/* ==========================================================================
   DKC.ai tanıtım sitesi — ai.dkc.click
   Marka renkleri (--vurgu-*, --aura, --parlama, --golge-buton) dkc.click'in
   stil.css dosyasından olduğu gibi alındı; devir paketindeki marka/renkler.css
   ile birebir aynı değerler. Sistem koyu teması, devir paketinde kaybolmuş olan
   @media sarmalayıcısıyla birlikte geri kondu (bkz. site/BENIOKU.md).
   ========================================================================== */

/* --- Yazı tipleri (kendi sunucumuzda, SIL OFL 1.1) ----------------------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/font/inter-latin-ext.a28eb6d3ccb5.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/font/inter-latin.c940764593d0.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(/font/dmserif-latin-ext.dfea1d6549e7.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(/font/dmserif-latin.f273cf2c9ce9.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Caveat;font-style:normal;font-weight:600;font-display:swap;
  src:url(/font/caveat-latin-ext.a6d2b158d0cc.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Caveat;font-style:normal;font-weight:600;font-display:swap;
  src:url(/font/caveat-latin.1c591acdadd5.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --- Marka renkleri: açık tema (varsayılan) ------------------------------ */
body[data-renk="dkc-ai"]{
  --vurgu-1:#E53100; --vurgu-2:#FF6A00;
  --vurgu-metin:#FF3B00; --vurgu-soluk:rgba(255,59,0,.32); --karalama:#FF3B00;
  /* Marka turuncusu beyaz üzerinde 3,57:1 — büyük başlıkta yeterli, küçük
     metinde değil. Etiket, bağlantı ve liste işaretleri bir tık koyusunu
     kullanıyor: #C92B00 · 5,48:1 (WCAG AA). Büyük yazıda marka rengi aynen
     duruyor — devir paketindeki kontrast notunun bilinçli tercih çağrısı. */
  --vurgu-metin-kucuk:#C92B00;
  --golge-buton:0 10px 30px -8px rgba(255,59,0,.4);
  --aura:rgba(255,59,0,.15);
  --parlama:none;

  --zemin:#FFFFFF;
  --zemin-2:#F7F4F1;
  --zemin-3:#EFE9E4;
  --metin:#15100D;
  --metin-2:#5A514B;
  --metin-3:#6E645E;   /* zemin-2 üzerinde 5,25:1 — eski #8A807A 3,52:1'de kalıyordu */
  --kenar:rgba(21,16,13,.12);
  --kenar-2:rgba(21,16,13,.07);
  --golge-kart:0 1px 2px rgba(21,16,13,.05), 0 12px 28px -18px rgba(21,16,13,.28);
  --cam:rgba(255,255,255,.82);
}

/* --- Marka renkleri: kullanıcı koyu temayı seçtiğinde -------------------- */
:root[data-tema="koyu"] body[data-renk="dkc-ai"]{
  --vurgu-1:#E53100; --vurgu-2:#FF8A3D;
  --vurgu-metin:#FF3B00; --vurgu-soluk:rgba(255,59,0,.35); --karalama:#FF7A45;
  --vurgu-metin-kucuk:#FF7A45;  /* koyu zeminde 7,48:1 */
  --parlama:0 0 44px -6px rgba(255,122,45,.5);
  --golge-buton:0 14px 40px -10px rgba(229,49,0,.6);
  --aura:rgba(255,59,0,.34);

  --zemin:#100D0C;
  --zemin-2:#181413;
  --zemin-3:#221C1A;
  --metin:#F8F5F3;
  --metin-2:#ADA29B;
  --metin-3:#8E837C;   /* zemin-2 üzerinde 4,95:1 */
  --kenar:rgba(248,245,243,.14);
  --kenar-2:rgba(248,245,243,.08);
  --golge-kart:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.9);
  --cam:rgba(16,13,12,.78);
}

/* --- Sistem koyu teması bilerek dinlenmiyor ------------------------------
   Sayfa varsayılan olarak AÇIK temada açılır. Koyu tema yalnız ziyaretçi
   düğmeye bastığında gelir ve tercihi localStorage'da saklanır.

   0.27.26'ya kadar burada bir `@media (prefers-color-scheme: dark)` bloğu
   vardı ve sistemi koyu olan ziyaretçiye sayfa koyu açılıyordu. Kaldırıldı:
   tanıtım sayfasının ilk izlenimi tek ve öngörülebilir olsun istiyoruz.
   `renkler.css`'teki karşılığı da bu yüzden taşınmadı. */


/* --- Temel -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  --ust-yukseklik:67px;scroll-padding-top:calc(var(--ust-yukseklik) + 16px);}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}}

body{
  margin:0;
  background:var(--zemin);
  color:var(--metin);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--vurgu-metin-kucuk);text-decoration-thickness:1px;text-underline-offset:3px;}
h1,h2,h3{line-height:1.12;letter-spacing:-.022em;margin:0;text-wrap:balance;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
em{font-family:"DM Serif Display",Georgia,serif;font-style:normal;font-weight:400;color:var(--vurgu-metin);letter-spacing:-.01em;}
:focus-visible{outline:2px solid var(--vurgu-metin);outline-offset:3px;border-radius:4px;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.atla{position:absolute;left:-9999px;top:0;z-index:100;background:var(--vurgu-1);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;text-decoration:none;font-weight:600;}
.atla:focus{left:0;}

.sinir{width:100%;max-width:1180px;margin:0 auto;padding-inline:24px;}
.sinir-dar{max-width:800px;}
@media (max-width:560px){.sinir{padding-inline:16px;}}

.logo{width:92px;height:27.4px;color:var(--metin);display:block;}
.logo-nokta{fill:var(--vurgu-metin);}

/* --- Düğmeler ----------------------------------------------------------- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;
  font-weight:600;font-size:15.5px;letter-spacing:-.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.dugme:hover{transform:translateY(-2px);}
.dugme-birincil{background:var(--vurgu-1);color:#fff;box-shadow:var(--golge-buton);}
.dugme-birincil:hover{background:var(--vurgu-2);}
.dugme-ikincil{background:transparent;color:var(--metin);border-color:var(--kenar);}
.dugme-ikincil:hover{border-color:var(--vurgu-metin);color:var(--vurgu-metin);}
.dugme-beyaz{background:#fff;color:#B32700;}  /* 6,55:1 */
.dugme-beyaz:hover{background:#FFF3EE;}
.dugme-ince{padding:9px 17px;font-size:14px;background:transparent;color:var(--metin);border-color:var(--kenar);}
.dugme-ince:hover{border-color:var(--vurgu-metin);color:var(--vurgu-metin);}
.dugme-tam{width:100%;margin-top:auto;}
.dugme-ok{width:13px;height:13px;flex:0 0 auto;opacity:.75;
  transition:transform .18s ease,opacity .18s ease;}
.dugme:hover .dugme-ok{transform:translate(2px,-2px);opacity:1;}
/* Sağ ok yatay ilerliyor; çapraz kayma yalnız "dışarı açılır" okuna ait. */
.dugme-ok.ok-sag{width:15px;height:15px;opacity:.9;}
.dugme:hover .dugme-ok.ok-sag{transform:translateX(3px);opacity:1;}

/* --- Üst bar ------------------------------------------------------------ */
.ust{position:sticky;top:0;z-index:50;background:var(--cam);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--kenar-2);}
.ust-ic{display:flex;align-items:center;gap:20px;height:66px;}
.ust-marka{display:flex;align-items:center;flex:0 0 auto;}
.ust-gezinme{display:flex;gap:26px;margin-inline:auto;}
.ust-gezinme a{color:var(--metin-2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:6px 0;border-bottom:1.5px solid transparent;transition:color .15s ease,border-color .15s ease;}
.ust-gezinme a:hover,.ust-gezinme a[aria-current="true"]{color:var(--metin);border-bottom-color:var(--vurgu-metin-kucuk);}
.ust-gezinme a{white-space:nowrap;}
.ust-gezinme a.gezinme-vurgu{font-weight:750;}
.ust-gezinme a.gezinme-egik{font-style:italic;}
.ust-eylem{display:flex;align-items:center;gap:10px;flex:0 0 auto;}

.tema-dugme{width:36px;height:36px;border-radius:999px;border:1px solid var(--kenar);
  background:transparent;cursor:pointer;display:grid;place-items:center;padding:0;
  transition:border-color .15s ease;}
.tema-dugme:hover{border-color:var(--vurgu-metin);}
/* dkc.click'teki güneş/ay düğmesi. İki simge üst üste duruyor, tema
   değişince biri dönerek kayboluyor öbürü geliyor. */
.tema-dugme{position:relative;color:var(--metin-2);}
.tema-dugme:hover{color:var(--metin);}
.tema-dugme svg{position:absolute;width:16px;height:16px;
  transition:opacity .26s ease,transform .42s cubic-bezier(.3,.7,.3,1);}
/* Varsayılan açık tema: tıklayınca koyuya geçilir, yani ay gösterilir. */
.tema-gunes{opacity:0;transform:rotate(-90deg) scale(.35);}
.tema-ay{opacity:1;transform:rotate(0) scale(1);}
:root[data-tema="koyu"] .tema-gunes{opacity:1;transform:rotate(0) scale(1);}
:root[data-tema="koyu"] .tema-ay{opacity:0;transform:rotate(90deg) scale(.35);}

/* Tema değişirken bütün geçişler tek kare kapanır: renkler kademeli değişince
   sayfa flaş patlamış gibi görünüyor. Simge dönüşü hariç tutuluyor. */
.tema-gecis *:not(.tema-gunes):not(.tema-ay),
.tema-gecis *::before,.tema-gecis *::after{transition:none !important;}
@media (max-width:860px){.ust-gezinme{display:none;}.ust-ic{justify-content:space-between;}}
@media (max-width:420px){.dugme-ince{padding:8px 13px;font-size:13px;}.ust-ic{gap:10px;}}

/* --- 1 · Giriş ---------------------------------------------------------- */
.giris{position:relative;overflow:hidden;padding:clamp(48px,7vw,92px) 0 clamp(52px,7vw,96px);}
.giris-aura{position:absolute;inset:-25% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(58% 48% at 72% 30%, var(--aura), transparent 70%);}
.giris-ic{position:relative;display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(24px,4vw,48px);align-items:center;}

/* .rozetler kaldırıldı (0.27.26); .rozet/.nabiz kuralları da gitti. */

.giris h1{font-size:clamp(38px,6vw,68px);font-weight:800;letter-spacing:-.035em;}
.giris h1 em{display:inline-block;}
.giris-alt{margin-top:20px;font-size:clamp(16.5px,1.6vw,19.5px);color:var(--metin-2);max-width:31em;}
.giris-dugmeler{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

.kanal-serit{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:26px;border-top:1px solid var(--kenar-2);}
.kanal-serit li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--metin-2);padding:5px 12px 5px 9px;border-radius:999px;background:var(--zemin-2);border:1px solid var(--kenar-2);}
.kanal-serit li::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--kanal-renk,var(--metin-3));}

/* Her kanalın iki rengi var: --kanal-renk işaret ve kenarda kullanılan tanıdık
   marka tonu, --kanal-balon ise üzerine beyaz yazı gelen zemin. Ayırmak
   zorunluydu: WhatsApp yeşili (#25D366) üzerinde beyaz yazının kontrastı
   1,98:1 — okunmuyor. Baloncuk tonlarının hepsi beyazla en az 5:1 veriyor. */
[data-kanal="instagram"]{--kanal-renk:#E1306C;--kanal-balon:#C13584;}  /* 5,11:1 */
[data-kanal="whatsapp"] {--kanal-renk:#25D366;--kanal-balon:#075E54;}  /* 7,66:1 */
[data-kanal="messenger"]{--kanal-renk:#0084FF;--kanal-balon:#0B65C2;}  /* 5,74:1 */
[data-kanal="tiktok"]   {--kanal-renk:#FE2C55;--kanal-balon:#B81237;}  /* 6,60:1 */
[data-kanal="telegram"] {--kanal-renk:#229ED9;--kanal-balon:#15678F;}  /* 6,23:1 */

.giris-gorsel{position:relative;}
/* Görsel, 1180px'lik ortak şeridin sağından taşarak tarayıcıyla birlikte
   büyüyor; metin ve üst bar hizasında kalsın diye yalnız sağ kenar açılıyor.
   1180px altında değer 0, yani dar ekranda hiçbir şey değişmiyor.
   Sağ kenar viewport'un 48px içinde duruyor; ayrıca .giris overflow:hidden. */
@media (min-width:881px){
  .giris-gorsel{margin-right:calc(-1 * max(0px, (100vw - 1180px) / 2 - 24px));}
}
.giris-gorsel::before{content:"";position:absolute;inset:-6% -4%;border-radius:50%;
  background:radial-gradient(60% 55% at 50% 50%, var(--aura), transparent 70%);filter:blur(14px);}
/* width:auto şart. `width:100%` ile max-height görseli EZİYORDU: genişlik
   kesin olduğu için tarayıcı yalnız yüksekliği kırpıyor, oranı korumuyordu
   (2200px'te 1061x600 ölçtüm, oysa görsel 4:3). width:auto olunca iki sınır
   birlikte çalışıyor, tarayıcı oranı koruyarak küçültüyor.
   max-width:100% sütunu doldurmayı, max-height de büyümenin durduğu yeri
   veriyor; min(…,64vh) alçak pencerede girişin ekranı yutmasını engelliyor. */
.giris-gorsel img{position:relative;display:block;width:auto;max-width:100%;
  max-height:min(600px,64vh);margin-inline:auto;}

@media (max-width:880px){
  .giris-ic{grid-template-columns:1fr;}
  /* Yatay görsel dar ekranda kare olandan daha az yer kaplıyor; sınır buna
     göre gevşetildi. */
  .giris-gorsel{order:-1;max-width:560px;margin-inline:auto;}
}
@media (max-width:560px){
  /* Görsel üstte kalsın ama başlığı ekranın dışına itmesin. */
  .giris{padding-top:28px;}
  .giris-gorsel{max-width:100%;}
}

/* --- Bölüm iskeleti ----------------------------------------------------- */
.bolum{padding:clamp(56px,7vw,104px) 0;}
.bolum-etiket{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--vurgu-metin-kucuk);margin-bottom:14px;}
.bolum-baslik{font-size:clamp(28px,3.9vw,46px);font-weight:800;letter-spacing:-.03em;}
.bolum-giris{margin-top:18px;font-size:clamp(16px,1.5vw,18.5px);color:var(--metin-2);max-width:60ch;}

/* --- 2 · Ne yapıyor ----------------------------------------------------- */
.yetenek{background:var(--zemin-2);border-block:1px solid var(--kenar-2);}
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:14px;margin-top:44px;}
.kart{background:var(--zemin);border:1px solid var(--kenar-2);border-radius:18px;padding:24px 22px 26px;
  box-shadow:var(--golge-kart);transition:transform .2s ease,border-color .2s ease;}
.kart:hover{transform:translateY(-3px);border-color:var(--vurgu-soluk);}
.kart-no{font-family:"DM Serif Display",Georgia,serif;font-size:26px;color:var(--vurgu-metin);
  opacity:.5;display:block;margin-bottom:12px;}
.kart h3{font-size:18px;font-weight:700;letter-spacing:-.018em;}
.kart p{margin-top:8px;font-size:14.8px;color:var(--metin-2);line-height:1.55;}

/* --- Yatay şeritler ----------------------------------------------------- */
.serit{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px max(24px,calc((100vw - 1180px)/2 + 24px)) 12px;
  scrollbar-width:thin;scrollbar-color:var(--kenar) transparent;overscroll-behavior-x:contain;}
.serit::-webkit-scrollbar{height:8px;}
.serit::-webkit-scrollbar-thumb{background:var(--kenar);border-radius:999px;}
.serit > li{scroll-snap-align:start;flex:0 0 auto;}
.serit figure{margin:0;}
@media (max-width:560px){.serit{padding-inline:16px;}}

.serit-oklar{display:flex;gap:8px;flex:0 0 auto;}
.ok{width:42px;height:42px;border-radius:999px;border:1px solid var(--kenar);background:var(--zemin);
  cursor:pointer;position:relative;transition:border-color .15s ease,background-color .15s ease;}
.ok:hover{border-color:var(--vurgu-metin);}
.ok::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;
  border-right:2px solid var(--metin);border-bottom:2px solid var(--metin);}
.ok[data-yon="ileri"]::after{transform:translateX(-2px) rotate(-45deg);}
.ok[data-yon="geri"]::after{transform:translateX(2px) rotate(135deg);}
.ok:hover::after{border-color:var(--vurgu-metin);}
.serit-ipucu{margin-top:14px;text-align:center;font-size:13.5px;color:var(--metin-3);}

/* --- 3 · Sesli demo ----------------------------------------------------- */
.sesli-vitrin{background:
  radial-gradient(circle at 78% 24%,rgba(255,83,31,.22),transparent 35%),
  radial-gradient(circle at 20% 82%,rgba(86,72,255,.18),transparent 34%),
  #09090b;color:#fff;border-block:1px solid rgba(255,255,255,.08);}
#sesli-demo-root{min-height:560px;display:grid;place-items:center;}
.sesli-demo-yedek{max-width:720px;text-align:center;padding:60px 24px;}
.sesli-demo-yedek h2{font-size:clamp(30px,5vw,58px);margin-bottom:18px;}
.sesli-demo-yedek p:last-child{color:rgba(255,255,255,.62);}
.sesli-demo-uygulama{position:relative;width:100%;min-height:560px;display:grid;place-items:center;
  overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 32px 100px -54px rgba(255,80,32,.72);isolation:isolate;}
.sesli-demo-uygulama::before{content:"";position:absolute;z-index:-1;width:440px;height:440px;
  left:-190px;bottom:-260px;border-radius:50%;background:rgba(229,49,0,.18);filter:blur(56px);}
.sesli-demo-sahne{width:min(100%,820px);padding:clamp(30px,5vw,72px);animation:sesli-sahne-gir .52s cubic-bezier(.2,.78,.22,1) both;}
@keyframes sesli-sahne-gir{from{opacity:0;transform:translateX(58px)}to{opacity:1;transform:none}}
.sesli-demo-sahne.sesli-demo-cikiyor{animation:sesli-sahne-cik .28s cubic-bezier(.55,.08,.7,.35) both;pointer-events:none;}
@keyframes sesli-sahne-cik{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-58px)}}
.sesli-demo-tanitim{text-align:center;display:grid;justify-items:center;}
.sesli-demo-etiket{margin-bottom:16px;color:#ff815b;font-size:12px;font-weight:800;letter-spacing:.16em;}
.sesli-demo-tanitim h2,.sesli-demo-bitti h2{font-size:clamp(32px,5vw,62px);line-height:1.02;
  max-width:15ch;letter-spacing:-.045em;}
.sesli-demo-tanitim>p:not(.sesli-demo-etiket){max-width:600px;margin-top:22px;color:rgba(255,255,255,.68);
  font-size:clamp(15px,1.7vw,19px);}
.sesli-demo-tanitim>small{margin-top:15px;color:rgba(255,255,255,.48);font-size:12px;}
.sesli-demo-baslat{display:inline-flex;align-items:center;gap:14px;min-width:min(100%,330px);margin-top:32px;
  padding:10px 15px 10px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(29,29,29,.72);color:#fff;box-shadow:inset 0 0 0 1px rgba(44,47,54,.31),
  inset 0 0 50px rgba(255,255,255,.012),0 18px 50px -28px rgba(255,84,37,.9);
  font:750 16px Inter,sans-serif;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.sesli-demo-baslat:hover{transform:translateY(-2px);border-color:rgba(255,128,88,.58);background:rgba(38,31,29,.84);}
.sesli-demo-cta-orb{display:grid;place-items:center;width:58px;height:58px;overflow:hidden;border-radius:50%;flex:0 0 auto;}
.sesli-demo-cta-orb canvas{width:56px!important;height:56px!important;display:block;}
.sesli-demo-ok{margin-left:auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:#e53100;font-size:22px;transition:transform .2s ease;}
.sesli-demo-baslat:hover .sesli-demo-ok{transform:translateX(3px);}

.sesli-demo-form{display:grid;gap:16px;max-width:710px;}
.sesli-demo-form-baslik{display:flex;align-items:center;gap:14px;margin-bottom:4px;}
.sesli-demo-form-baslik>button{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;
  padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.06);
  color:#fff;font-size:20px;cursor:pointer;}
.sesli-demo-form-baslik>div{display:grid;}.sesli-demo-form-baslik strong{font-size:clamp(22px,3vw,34px);}
.sesli-demo-form-baslik small{color:rgba(255,255,255,.55);font-size:12.5px;}
.sesli-demo-form label{display:grid;gap:7px;color:rgba(255,255,255,.76);font-size:12.5px;font-weight:720;}
.sesli-demo-form input{width:100%;min-height:49px;padding:11px 14px;border:1px solid rgba(255,255,255,.14);
  border-radius:13px;background:rgba(255,255,255,.075);color:#fff;font:500 15px Inter,sans-serif;outline:none;}
.sesli-demo-form input:focus{border-color:#ff815b;box-shadow:0 0 0 3px rgba(255,103,55,.18);}
.sesli-demo-form-ikili{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.sesli-demo-form .sesli-demo-bilgi-hafizasi{margin:0;color:rgba(255,255,255,.65);font-size:12px;line-height:1.6;}
.sesli-demo-form .sesli-demo-onay{display:flex;align-items:flex-start;gap:10px;font-weight:450;line-height:1.5;}
.sesli-demo-onay input{flex:0 0 auto;width:19px;height:19px;min-height:0;margin-top:1px;accent-color:#e53100;}
.sesli-demo-form-gonder,.sesli-demo-bitti button,.sesli-demo-bitir{display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:53px;padding:13px 22px;border:0;border-radius:999px;background:linear-gradient(135deg,#c82a00,#f4511e);
  color:#fff;font:800 15.5px Inter,sans-serif;cursor:pointer;box-shadow:0 18px 45px -24px rgba(255,80,32,.9);}
.sesli-demo-form-gonder span{font-size:20px;}.sesli-demo-hata{color:#ffab91;font-size:13px;text-align:center;}

.sesli-demo-canli{display:grid;justify-items:center;text-align:center;padding-block:clamp(24px,3vw,42px);}
.sesli-demo-orb{position:relative;width:min(74vw,420px);aspect-ratio:1;border-radius:50%;
  filter:drop-shadow(0 24px 60px rgba(58,69,255,.24));transition:filter .18s ease;}
.sesli-demo-orb.ses-aliniyor{filter:drop-shadow(0 22px 68px rgba(255,81,32,.5));}
.voice-powered-orb,.voice-powered-orb canvas{display:block;width:100%;height:100%;}
.sesli-demo-sayac{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;text-shadow:0 2px 16px #060608;}
.sesli-demo-sayac span{font-size:10px;font-weight:850;letter-spacing:.17em;color:rgba(255,255,255,.58);}
.sesli-demo-sayac strong{font-variant-numeric:tabular-nums;font-size:clamp(46px,8vw,84px);line-height:1;
  letter-spacing:-.06em;color:#fff;}
.sesli-demo-canli-durum{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;
  margin-top:-8px;color:rgba(255,255,255,.72);font-size:13.5px;}
.sesli-demo-canli-durum i{width:8px;height:8px;border-radius:50%;background:#42d392;box-shadow:0 0 0 6px rgba(66,211,146,.1);}
.sesli-demo-ses-notu{max-width:48ch;margin:12px 0 0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.6;}
.sesli-demo-ses-baglantisi{display:inline;background:none;border:0;border-radius:0;box-shadow:none;
  min-height:0;padding:3px 0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.sesli-demo-ses-baglantisi:hover{color:#fff;}
.sesli-demo-ses-baglantisi:focus-visible{outline:2px solid #ffab91;outline-offset:4px;}
.sesli-demo-bitir{margin-top:22px;width:auto;min-width:190px;}
.sesli-demo-bitir:hover,.sesli-demo-bitti button:hover{filter:brightness(1.12);}
.sesli-demo-uzak-ses{position:absolute;width:1px;height:1px;left:-9999px;overflow:hidden;}
.sesli-demo-bitti{text-align:center;display:grid;justify-items:center;max-width:700px;}
.sesli-demo-bitti-isaret{display:grid;place-items:center;width:70px;height:70px;margin-bottom:24px;border-radius:50%;
  background:rgba(66,211,146,.14);border:1px solid rgba(66,211,146,.35);color:#62e6a7;font-size:30px;}
.sesli-demo-bitti p{margin:18px 0 28px;color:rgba(255,255,255,.62);}.sesli-demo-bitti button{width:auto;min-width:190px;}
@media(max-width:620px){
  #sesli-demo-root,.sesli-demo-uygulama{min-height:610px}.sesli-demo-uygulama{border-radius:24px}
  .sesli-demo-sahne{padding:28px 20px}.sesli-demo-form-ikili{grid-template-columns:1fr}
  .sesli-demo-tanitim h2,.sesli-demo-bitti h2{font-size:clamp(31px,10vw,45px)}
  .sesli-demo-orb{width:min(92vw,360px)}
}

/* --- 4 · Afişler -------------------------------------------------------- */
.afis{padding-bottom:clamp(44px,5vw,72px);}
.afis-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;}
.afis-oge{width:min(74vw,290px);}
.afis-oge img{border-radius:16px;border:1px solid var(--kenar-2);box-shadow:var(--golge-kart);
  aspect-ratio:1080/1350;object-fit:cover;background:var(--zemin-3);}
.afis-oge figcaption{margin-top:13px;font-size:13.6px;line-height:1.5;color:var(--metin-2);
  display:flex;gap:8px;align-items:flex-start;}
.afis-oge figcaption span{flex:0 0 auto;width:20px;height:20px;border-radius:999px;
  background:var(--vurgu-1);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;margin-top:1px;}
@media (max-width:720px){.serit-oklar{display:none;}.afis-ust{display:block;}}

/* Afişi açan düğme. Görselin kendisi düğme oluyor ki klavyeyle de açılabilsin. */
.afis-ac{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:16px;}
.afis-ac img{transition:transform .25s cubic-bezier(.2,.7,.3,1);}
.afis-ac:hover img{transform:scale(1.015);}
.afis-ac:focus-visible{outline:2px solid var(--vurgu-metin-kucuk);outline-offset:4px;}
/* Büyüteç fareyle açılıp kapandığında odak düğmeye dönüyor ama halka
   gösterilmiyor; app.js sınıfı odak bırakılınca kaldırıyor. */
.afis-ac.odak-halkasiz:focus-visible{outline:none;}

/* --- Afiş büyüteci ------------------------------------------------------
   dkc.click'teki pencerenin aynısı. Renkler koyu sabit: perde her temada
   karanlık, üstündeki yazı her temada açık. */
.buyutec:not([open]){display:none;}
.buyutec{border:0;padding:0;background:none;color:#fff;
  max-width:min(94vw,1100px);max-height:96vh;overflow:visible;
  display:grid;gap:12px;justify-items:center;
  opacity:0;transform:scale(.94);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1);}
.buyutec.acik{opacity:1;transform:scale(1);}
.buyutec::backdrop{background:rgba(12,8,7,0);backdrop-filter:blur(0);
  transition:background-color .22s ease,backdrop-filter .22s ease;}
.buyutec.acik::backdrop{background:rgba(12,8,7,.86);backdrop-filter:blur(4px);}
.buyutec-ust{width:100%;display:flex;justify-content:flex-end;}
.buyutec-govde{display:grid;place-items:center;max-width:100%;}
.buyutec img{display:block;width:auto;max-width:100%;object-fit:contain;
  border-radius:14px;background:#1a1513;
  /* Üst çubuk, açıklama ve denetimler sabit yer kaplıyor. Sınırı yalnız vh ile
     vermek uzun ekranda görseli gereksiz küçültüyor, kısa ekranda kutuyu
     taşırıyor. İkisinin küçüğü alınıyor. */
  max-height:min(80vh,calc(96vh - 175px));}
.buyutec-alt{margin:0;max-width:60ch;font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.88);text-align:center;}
.buyutec-denetim{display:flex;align-items:center;gap:18px;}
.buyutec-sayac{min-width:56px;text-align:center;font-size:13.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;}
.buyutec-kapat,.buyutec-ok{display:grid;place-items:center;width:40px;height:40px;
  line-height:1;border:1px solid rgba(255,255,255,.26);border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font:inherit;
  transition:background-color .2s ease;}
.buyutec-kapat{font-size:22px;}
.buyutec-ok{font-size:24px;padding-bottom:3px;}
.buyutec-kapat:hover,.buyutec-ok:hover{background:rgba(255,255,255,.2);}
.buyutec-kapat:focus-visible,.buyutec-ok:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:620px){
  .buyutec{max-width:94vw;gap:10px;}
  .buyutec img{max-height:min(72vh,calc(96vh - 210px));}
}
@media (prefers-reduced-motion: reduce){
  .kanal-ikon{animation:none !important;}
  .buyutec,.buyutec::backdrop,.afis-ac img{transition:none;}
  .buyutec{opacity:1;transform:none;}
}

/* --- 4 · Kanallar ------------------------------------------------------- */
.kanallar{background:var(--zemin-2);border-block:1px solid var(--kenar-2);}
.kanal-sekme{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;}
/* Dar ekranda sekmeler üç satıra sarıp 144px yer kaplıyordu; telefon görünene
   kadar ekranın yarısı gidiyordu. Tek satırda kaydırılıyorlar. */
@media (max-width:620px){
  .kanal-sekme{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;}
  .kanal-sekme::-webkit-scrollbar{display:none;}
  .kanal-sekme button{flex:0 0 auto;}
}
.kanal-sekme button{padding:9px 16px 9px 13px;border-radius:999px;border:1px solid var(--kenar);
  background:var(--zemin);color:var(--metin-2);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;}
/* Kanal ikonları konturdan çizilmiş. Dolgulu bir marka logosu "çizilemez";
   çizgi çizilebilir. Her şekilde pathLength="1" var, yani uzunluk 1'e
   normalleştiriliyor ve dash hesabı ikonun ölçüsünden bağımsız oluyor —
   Framer Motion'ın pathLength'i de perde arkasında bunu yapıyor. */
.kanal-ikon{width:21px;height:21px;flex:0 0 auto;color:var(--kanal-renk);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.kanal-sekme button[aria-selected="true"] .kanal-ikon{color:currentColor;}

/* Üzerine gelince ve seçilince ikon yeniden çizilir.
   Animasyon dıştaki <svg>'ye veriliyor, içindeki <path>'lere değil: ikonlar
   <use> ile geliyor ve <use> içeriği gölge ağacında duruyor — dışarıdan
   yazılan `.kanal-ikon path` seçicisi oraya ulaşmaz. `stroke-dasharray` ve
   `stroke-dashoffset` ise KALITSAL özellikler, dıştan verilince içeri geçerler.
   Bedeli: parçalar sırayla değil birlikte çiziliyor. */
.kanal-sekme button:hover .kanal-ikon,
.kanal-sekme button:focus-visible .kanal-ikon,
.kanal-sekme button[aria-selected="true"] .kanal-ikon{
  animation:ikon-ciz .6s linear both;
}
@keyframes ikon-ciz{
  from{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;}
  12%{opacity:1;}
  to{stroke-dasharray:1;stroke-dashoffset:0;opacity:1;}
}
.kanal-sekme button:hover{color:var(--metin);border-color:var(--kanal-renk);}
/* Seçili sekme yalnız kenar rengiyle değil, dolu zeminle de ayrışsın. */
.kanal-sekme button[aria-selected="true"]{background:var(--kanal-balon);color:#fff;border-color:transparent;}
.kanal-sekme button[aria-selected="true"]::before{background:#fff;}

/* Carousel. Eskiden yatay kaydırılan bir şeritti; sorun şuydu: beş telefon
   ekrana neredeyse sığdığı için kaydırma payı yalnız 460px kalıyor ve son üç
   telefon hiçbir zaman öne gelemiyordu — Messenger 644px, Telegram 1288px
   isterdi. Sekmelerin üçü bu yüzden ölü görünüyordu. Artık raf kayıyor,
   içerik değil. */
/* Öndeki telefon ortada, komşuları kenardan görünüyor — carousel olduğu
   böyle anlaşılıyor ve geniş ekranda alan boş kalmıyor. Raf, slot genişliği
   kadar kayıyor; ilk slotun ortaya gelmesi için başta yarım ekranlık pay var.
   Dar ekranda slot ekranı kapladığı için pay kendiliğinden sıfıra iniyor. */
.kanallar{--telefon-slot:min(88vw,344px);}
.telefon-vitrin{margin-top:34px;overflow:hidden;}
.telefon-raf{display:flex;align-items:flex-start;
  padding-left:max(0px,calc(50% - var(--telefon-slot) / 2));
  transition:transform .45s cubic-bezier(.3,.7,.3,1);}
.telefon{flex:0 0 var(--telefon-slot);display:flex;justify-content:center;padding:8px 0 4px;}
.telefon-cerceve{width:min(86vw,312px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.3,.7,.3,1);}
/* Öndeki dışındakiler geride dursun; hangisinin etkin olduğu tek bakışta
   anlaşılsın. */
.telefon[aria-hidden="true"] .telefon-cerceve{opacity:.4;transform:scale(.93);}
@media (prefers-reduced-motion: reduce){
  .telefon-raf,.telefon-cerceve{transition:none;}
}
.telefon-cerceve{background:var(--zemin);border:1px solid var(--kenar);border-radius:30px;flex:0 0 auto;
  padding:9px 9px 14px;box-shadow:var(--golge-kart);overflow:hidden;
  border-top:5px solid var(--kanal-renk);}
.telefon-tepe{width:62px;height:5px;border-radius:999px;background:var(--kenar);margin:4px auto 10px;}
.telefon-baslik{display:flex;align-items:center;gap:10px;padding:0 8px 12px;border-bottom:1px solid var(--kenar-2);}
.telefon-avatar{width:34px;height:34px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--kanal-balon);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;}
.telefon-kim{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.telefon-kim strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.telefon-kim span{font-size:11.5px;color:var(--metin-3);}
.telefon-kanal{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--metin-3);flex:0 0 auto;}

.konusma{display:flex;flex-direction:column;gap:9px;padding:14px 8px 4px;}
.balon{max-width:84%;padding:9px 13px 7px;border-radius:16px;font-size:14px;line-height:1.48;position:relative;}
.balon time{display:block;font-size:10.5px;margin-top:3px;opacity:.6;}
.balon.gelen{align-self:flex-start;background:var(--zemin-3);color:var(--metin);border-bottom-left-radius:5px;}
.balon.giden{align-self:flex-end;background:var(--kanal-balon);color:#fff;border-bottom-right-radius:5px;}
.balon.giden time{text-align:right;}

/* --- Konuşma akışı ------------------------------------------------------
   Varsayılan: bütün mesajlar görünür. JavaScript devreye girdiğinde şeride
   `data-durum="bekliyor"` konur ve mesajlar sırayla açılır; JavaScript yoksa
   ya da kullanıcı hareket azaltma istiyorsa hiçbir şey gizlenmez. */
.konusma[data-durum="bekliyor"] .balon:not(.gorundu):not(.yaziyor){display:none;}
.balon.gorundu{animation:balon-gir .3s cubic-bezier(.2,.7,.3,1) both;}
@keyframes balon-gir{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:none;}
}

.balon.yaziyor{display:flex;gap:4px;align-items:center;padding:11px 14px;
  animation:balon-gir .22s ease-out both;}
.balon.yaziyor span{width:6px;height:6px;border-radius:999px;background:currentColor;
  opacity:.45;animation:yaziyor-nokta 1.1s ease-in-out infinite;}
.balon.yaziyor span:nth-child(2){animation-delay:.16s;}
.balon.yaziyor span:nth-child(3){animation-delay:.32s;}
.balon.gelen.yaziyor span{background:var(--metin-2);}
@keyframes yaziyor-nokta{
  0%,60%,100%{opacity:.3;transform:translateY(0);}
  30%{opacity:.9;transform:translateY(-3px);}
}

.telefon-yazma{display:flex;align-items:center;gap:8px;margin:14px 8px 0;padding:9px 13px;
  border-radius:999px;background:var(--zemin-3);border:1px solid var(--kenar-2);
  font-size:12.5px;color:var(--metin-3);}
.telefon-yazma::after{content:"";margin-left:auto;width:21px;height:21px;border-radius:999px;
  background:var(--kanal-balon);flex:0 0 auto;
  clip-path:polygon(22% 24%,80% 50%,22% 76%,38% 50%);}

/* --- 5 · Canlı deneyin -------------------------------------------------- */
/* Bant bilerek --vurgu-1/--vurgu-2 kullanmıyor: beyaz yazı #FF6A00 üzerinde
   2,87:1 veriyor, yani büyük yazı eşiğini (3:1) bile geçmiyor. Aşağıdaki iki
   ton aynı marka rampasının okunur ucu — beyazla 6,55:1 ve 5,27:1. */
.deneyin{background:linear-gradient(135deg,#B32700,#CE2C00);color:#fff;
  padding:clamp(52px,6.5vw,88px) 0;}
.deneyin .bolum-etiket{color:#fff;}  /* 5,27:1 */
.deneyin-ic{display:grid;grid-template-columns:1fr;min-height:610px;align-items:center;}
.deneyin-metin{width:100%;max-width:760px;margin-inline:auto;text-align:center;}
.deneyin-metin > p{margin-inline:auto;}
.demo-notlar{text-align:left;}
.demo-dene{margin:28px auto 14px;}
.demo-tanitim-ipucu{display:block;font-size:12px;color:rgba(255,255,255,.85);}
#demo-tanitim[hidden],.demo-kabuk[hidden]{display:none;}
.demo-sahne-cikis{animation:demo-sahne-cikis .28s ease forwards;pointer-events:none;}
.demo-sahne-giris{animation:demo-sahne-giris .42s ease both;}
@keyframes demo-sahne-cikis{to{opacity:0;transform:translateY(-20px)}}
@keyframes demo-sahne-giris{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.demo-mesaj,.demo-medya,.demo-telegram{animation:demo-sahne-giris .3s ease both;}
.demo-geri{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--kenar);
  border-radius:50%;background:var(--zemin-2);color:var(--metin);font-size:20px;cursor:pointer;}
.demo-geri:disabled{opacity:.5;cursor:wait;}
.demo-kayit[aria-busy="true"] .demo-avatar{animation:demo-kayit-nabiz 1.2s ease-in-out infinite;}
@keyframes demo-kayit-nabiz{50%{opacity:.55;transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){
  .demo-sahne-cikis,.demo-sahne-giris,.demo-mesaj,.demo-medya,.demo-telegram,
  .demo-kayit[aria-busy="true"] .demo-avatar{animation:none;}
  #yazili-demo-orb canvas{display:none;}
  #yazili-demo-orb{background:radial-gradient(circle at 35% 30%,#ffb183,#f4511e 50%,#6e1a06);border-radius:50%;}
}
.deneyin h2{font-size:clamp(28px,3.9vw,46px);font-weight:800;letter-spacing:-.03em;}
.deneyin h2 em{color:#fff;opacity:.92;}
.deneyin-metin > p:not(.bolum-etiket){margin-top:18px;font-size:clamp(16px,1.5vw,18.5px);color:rgba(255,255,255,.92);max-width:52ch;}
.deneyin-dugmeler{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px;}
.deneyin-kullanici{font-size:14px;font-weight:600;color:#fff;}
/* İnce yazı. Üç tur sürdü, sebebi şuydu: bu metin ortalanmış bir kompozisyonun
   altına düşen ikincil bilgi. Önce sola yaslı tek blok olarak sahipsiz durdu,
   sonra panele alınınca ikincil olmaktan çıkıp dikkat çeken bir kutuya dönüştü.
   İnce yazının işi geri çekilmek; kendine zemin ve kenarlık çizdirmemeli.
   Kalan hâl: CTA grubundan ince bir çizgiyle ayrılan, iki sütunlu sessiz bir
   satır. Sütun yapısı sola yaslamayı gerekçelendiriyor, blok ortalı kalıyor. */
.demo-notlar{margin:26px auto 0;max-width:760px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.26);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;}
.demo-notlar > div{display:grid;gap:5px;align-content:start;}
.demo-notlar dt{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;}                                   /* 5,27:1 */
.demo-notlar dd{margin:0;font-size:13.2px;line-height:1.6;color:rgba(255,255,255,.94);}  /* 4,75:1 */
@media (max-width:720px){.demo-notlar{grid-template-columns:1fr;gap:16px;}}

.deneyin-oneri{display:flex;flex-direction:column;gap:9px;}
.deneyin-oneri li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:14px;border-bottom-left-radius:5px;padding:11px 15px;font-size:14.5px;
  color:#fff;align-self:flex-start;max-width:100%;}
@media (max-width:880px){.deneyin-ic{grid-template-columns:1fr;}}

/* Canlı web demosu: form ve sohbet aynı sabit kabukta yer değiştiriyor. */
.demo-kabuk{min-width:0;width:100%;max-width:760px;margin-inline:auto;border:1px solid rgba(255,255,255,.28);border-radius:24px;background:var(--zemin);color:var(--metin);box-shadow:0 28px 70px -32px rgba(30,8,0,.72);overflow:hidden}
.demo-kayit{display:grid;gap:15px;padding:clamp(20px,3vw,30px)}
.demo-kayit-baslik,.demo-sohbet-baslik{display:flex;align-items:center;gap:12px}.demo-kayit-baslik div,.demo-sohbet-baslik div{display:grid;min-width:0}.demo-kayit-baslik small,.demo-sohbet-baslik small{color:var(--metin-3);font-size:12px}
.demo-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--vurgu-1),var(--vurgu-2));color:#fff;font-size:12px;font-weight:850}
.demo-kayit label{display:grid;gap:6px;color:var(--metin-2);font-size:12.5px;font-weight:750}.demo-kayit input{width:100%;min-height:46px;padding:10px 13px;border:1px solid var(--kenar);border-radius:12px;background:var(--zemin-2);color:var(--metin);font:inherit;outline:none}.demo-kayit input:focus,.demo-mesaj-form textarea:focus{border-color:var(--vurgu-2);box-shadow:0 0 0 3px var(--vurgu-soluk)}
.demo-kayit-ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-kayit .demo-onay{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.5}.demo-onay input{flex:0 0 auto;width:18px;height:18px;min-height:0;margin-top:2px;accent-color:var(--vurgu-1)}.demo-kayit .dugme{width:100%;border:0;background:linear-gradient(135deg,var(--vurgu-1),var(--vurgu-2));color:#fff}.demo-kayit .bal-kupu{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-kayit[hidden],.demo-sohbet[hidden]{display:none}.demo-sohbet{--demo-mesaj-punto:14px;min-height:590px;background:var(--zemin-2)}.demo-sohbet-baslik{padding:15px 17px;border-bottom:1px solid var(--kenar);background:var(--zemin)}.demo-sohbet-baslik small i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#36b37e}.demo-sohbet-baslik>b{margin-left:auto;color:var(--metin-3);font-size:12px}
.demo-mesajlar{height:390px;margin:0;padding:18px;display:flex;flex-direction:column;gap:10px;overflow:auto;list-style:none;scrollbar-width:thin}.demo-mesaj{max-width:86%;padding:10px 13px;border-radius:15px;background:var(--zemin);box-shadow:var(--golge-kart);color:var(--metin);font-size:var(--demo-mesaj-punto);line-height:1.52;white-space:pre-wrap}.demo-mesaj.ziyaretci{align-self:flex-end;border-bottom-right-radius:4px;background:linear-gradient(135deg,var(--vurgu-1),var(--vurgu-2));color:#fff}.demo-mesaj.asistan{align-self:flex-start;border-bottom-left-radius:4px}.demo-mesaj.sistem{align-self:center;background:transparent;box-shadow:none;color:var(--metin-3);font-size:12px;text-align:center}
.demo-medya{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:86%}.demo-medya img,.demo-medya video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:13px;background:#000}
.demo-telegram{align-self:stretch;display:grid;gap:7px;padding:15px;border:1px solid #65aadd;border-radius:15px;background:#172737;color:#eef7ff;box-shadow:0 12px 30px -20px #000}.demo-telegram small{color:#75bcf0;font-size:10px;font-weight:800;letter-spacing:.08em}.demo-telegram pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:500 12.5px/1.55 Inter,sans-serif}.demo-telegram span{color:#a7c7dd;font-size:11px}
.demo-telegram-yanit{display:grid;gap:7px;margin-top:5px;padding-top:11px;border-top:1px solid rgba(117,188,240,.22)}.demo-telegram-yanit textarea{width:100%;resize:vertical;min-height:64px;padding:10px 11px;border:1px solid rgba(117,188,240,.4);border-radius:10px;background:#0f1d29;color:#eef7ff;font:500 12.5px/1.5 Inter,sans-serif;outline:none}.demo-telegram-yanit textarea:focus{border-color:#75bcf0;box-shadow:0 0 0 3px rgba(117,188,240,.14)}.demo-telegram-yanit button{justify-self:start;margin:0;padding:8px 11px;border:0;border-radius:9px;background:#2aabee;color:#fff;font:750 11.5px Inter,sans-serif}.demo-telegram-yanit button:disabled{opacity:.5}.demo-telegram-yanit .demo-telegram-yanit-durum{line-height:1.45}
.demo-oneriler{display:flex;gap:7px;padding:0 14px 10px;overflow:auto}.demo-oneriler button{flex:0 0 auto;width:auto;margin:0;padding:7px 10px;border:1px solid var(--kenar);border-radius:999px;background:var(--zemin);color:var(--metin-2);font:600 11px Inter,sans-serif;white-space:nowrap}.demo-mesaj-form{display:flex;align-items:flex-end;gap:8px;margin:0 14px;padding:8px;border:1px solid var(--kenar);border-radius:16px;background:var(--zemin)}.demo-mesaj-form textarea{flex:1;max-height:110px;resize:none;border:0;background:transparent;color:var(--metin);font:500 var(--demo-mesaj-punto)/1.52 Inter,sans-serif;outline:none}.demo-mesaj-form button{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:12px;background:var(--vurgu-1);color:#fff;font-size:20px}.demo-mesaj-form button:disabled{opacity:.45}
.demo-durum{min-height:18px;margin:7px 16px 12px;color:var(--metin-3);font-size:11.5px}.demo-kayit .demo-durum{margin:0}.demo-durum.demo-hata{color:#ba2f24}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:560px){.demo-kayit-ikili{grid-template-columns:1fr}.demo-sohbet{min-height:540px}.demo-mesajlar{height:340px}.demo-medya{grid-template-columns:1fr}}

/* --- 6 · Panelden ------------------------------------------------------- */
.panel-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;}
.panel-oge{width:min(88vw,620px);}
.tarayici{border:1px solid var(--kenar);border-radius:14px;overflow:hidden;background:#1A1615;
  box-shadow:var(--golge-kart);}
.tarayici-ust{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#241E1C;
  border-bottom:1px solid rgba(255,255,255,.07);}
.tarayici-ust span{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.2);}
.tarayici-ust em{font-family:Inter,sans-serif;font-size:11.5px;color:rgba(255,255,255,.45);
  margin-left:12px;letter-spacing:.01em;}
.tarayici img{width:100%;aspect-ratio:1600/1000;object-fit:cover;object-position:top left;}
.panel-oge figcaption{margin-top:14px;font-size:14.2px;line-height:1.55;color:var(--metin-2);}
.panel-oge figcaption strong{display:block;color:var(--metin);font-size:15.5px;font-weight:700;margin-bottom:3px;}
@media (max-width:720px){.panel-ust{display:block;}}

/* --- 7 · Nasıl kurulu --------------------------------------------------- */
.teknik{background:var(--zemin-2);border-block:1px solid var(--kenar-2);
  padding-block:clamp(40px,5vw,64px);}
.teknik-katlanir{border:1px solid var(--kenar);border-radius:18px;background:var(--zemin);
  overflow:hidden;}
.teknik-katlanir summary{list-style:none;cursor:pointer;padding:22px 26px;
  position:relative;padding-right:60px;}
.teknik-katlanir summary::-webkit-details-marker{display:none;}
.teknik-katlanir summary::after{content:"";position:absolute;right:28px;top:28px;width:9px;height:9px;
  border-right:2px solid var(--metin-3);border-bottom:2px solid var(--metin-3);
  transform:rotate(45deg);transition:transform .2s ease;}
.teknik-katlanir[open] summary::after{transform:rotate(225deg);top:31px;}
.teknik-baslik{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0;}
.teknik-alt{display:block;margin-top:3px;font-size:14.2px;font-weight:400;
  letter-spacing:normal;color:var(--metin-3);}
.teknik-govde{padding:0 26px 26px;border-top:1px solid var(--kenar-2);margin-top:4px;padding-top:22px;}
.teknik-govde p{color:var(--metin-2);font-size:16px;}
.teknik-govde p + p{margin-top:14px;}
.teknik-vurgu{border-left:2px solid var(--vurgu-metin-kucuk);padding-left:16px;color:var(--metin) !important;}
.teknik-govde h3{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vurgu-metin-kucuk);margin-top:28px;margin-bottom:12px;}
.teknik-liste li{position:relative;padding-left:20px;color:var(--metin-2);font-size:15.5px;}
.teknik-liste li + li{margin-top:7px;}
.teknik-liste li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:2px;background:var(--vurgu-soluk);}

/* --- 8 · Neden önemli --------------------------------------------------- */
.neden-ic{text-align:center;}
.neden .bolum-etiket{text-align:center;}
.neden-metin{font-size:clamp(19px,2.3vw,26px);line-height:1.5;letter-spacing:-.018em;
  color:var(--metin);max-width:24em;margin-inline:auto;text-wrap:balance;}
.karalama{font-family:Caveat,cursive;font-weight:600;font-size:clamp(30px,4.4vw,48px);
  color:var(--karalama);margin-top:26px;transform:rotate(-1.6deg);line-height:1.2;}

/* --- 9 · Fiyat ---------------------------------------------------------- */
.fiyat{background:var(--zemin-2);border-block:1px solid var(--kenar-2);}
.fiyat-kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));
  gap:16px;margin-top:44px;align-items:stretch;}
/* min-width:0 olmadan uzun bir fiyat metni grid izini genişletip dördüncü
   kartı ekrandan taşırıyor. */
.fiyat-kart{display:flex;flex-direction:column;min-width:0;background:var(--zemin);border:1px solid var(--kenar-2);
  border-radius:20px;padding:26px 22px 24px;box-shadow:var(--golge-kart);position:relative;}
.fiyat-kart-one{border-color:var(--vurgu-soluk);box-shadow:var(--golge-kart),var(--parlama);}
.fiyat-etiket{position:absolute;top:-11px;left:26px;background:var(--vurgu-1);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:999px;}
.fiyat-kart h3{font-size:21px;font-weight:700;letter-spacing:-.02em;}
.fiyat-kime{margin-top:7px;font-size:14.2px;color:var(--metin-3);line-height:1.5;min-height:2.9em;}
.fiyat-tutar{margin:20px 0 22px;padding-bottom:20px;border-bottom:1px solid var(--kenar-2);
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.fiyat-rakam{font-size:34px;font-weight:800;letter-spacing:-.035em;color:var(--metin);
  overflow-wrap:anywhere;}
.fiyat-devre{font-size:14.5px;color:var(--metin-3);font-weight:500;}
.fiyat-hedef{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--metin-3);margin-bottom:5px;font-variant-numeric:tabular-nums;}
.fiyat-ozellik{margin:0 0 16px;}
.kart-kanallar{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;padding:12px 14px;
  border-radius:12px;background:var(--zemin-2);border:1px solid var(--kenar-2);}
.kart-kanallar-baslik{font-size:12.5px;font-weight:700;color:var(--metin-2);letter-spacing:-.005em;}
.kart-ikonlar{display:flex;gap:10px;align-items:center;}
/* Burada dolgulu set (#ikd-*) kullanılıyor: küçük ölçekte dolu şekil konturdan
   daha okunaklı. Sekmelerdeki kontur seti orada kalıyor, çizilme efekti için. */
.kart-ikonlar svg{width:19px;height:19px;flex:0 0 auto;color:var(--metin-3);
  fill:currentColor;stroke:none;
  transition:color .15s ease;}
.fiyat-kart:hover .kart-ikonlar svg{color:var(--vurgu-metin-kucuk);}
.fiyat-ozellik > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--kenar-2);}
.fiyat-ozellik > div:last-child{border-bottom:none;}
.fiyat-ozellik dt{font-size:13.8px;color:var(--metin-3);flex:0 0 auto;}
.fiyat-ozellik dd{margin:0;font-size:14.2px;font-weight:600;color:var(--metin);text-align:right;}
.fiyat-ortak{margin-top:26px;padding:16px 20px;border-radius:14px;
  background:var(--zemin);border:1px solid var(--kenar-2);
  font-size:15px;color:var(--metin-2);line-height:1.55;}
.fiyat-ortak strong{color:var(--metin);}
.fiyat-dipnot{margin-top:16px;font-size:13.8px;color:var(--metin-3);}

/* Teklif tercihi; bir aboneliği etkinleştirme veya ücret tahsil etme düğmesi değildir. */
.sesli-ek{padding:14px;margin-bottom:20px;border:1px solid var(--vurgu-soluk);border-radius:14px;
  background:linear-gradient(135deg,var(--aura),transparent 85%);}
.sesli-ek:has(input:checked){border-color:var(--vurgu-metin-kucuk);box-shadow:0 0 0 1px var(--vurgu-soluk);}
.sesli-ek-secim{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;}
.sesli-ek-secim strong{display:block;font-size:14px;color:var(--metin);}
.sesli-ek-secim small{display:block;font-size:11.5px;color:var(--metin-2);}
.sesli-ek-anahtar{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 44px;
  width:44px;height:26px;margin:0;border:1px solid var(--kenar);border-radius:99px;background:var(--metin-3);
  cursor:pointer;transition:background .18s ease;}
.sesli-ek-anahtar::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s ease;}
.sesli-ek-anahtar:checked{background:var(--vurgu-1);border-color:var(--vurgu-1);}
.sesli-ek-anahtar:checked::before{transform:translateX(18px);}
.sesli-ek p{margin-top:10px;font-size:12px;line-height:1.5;color:var(--metin-2);}
.sesli-ek-durum{display:block;margin-top:8px;font-size:11.5px;font-weight:650;color:var(--vurgu-metin-kucuk);}
.basvuru-form .sesli-ek{margin-bottom:0;}

/* --- 10 · Başvuru ------------------------------------------------------- */
.basvuru{background:var(--zemin-2);border-top:1px solid var(--kenar-2);}
.basvuru-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;
  padding:26px;border-radius:20px;background:var(--zemin);border:1px solid var(--kenar-2);
  box-shadow:var(--golge-kart);}
.alan{display:flex;flex-direction:column;gap:7px;min-width:0;}
.alan-genis{grid-column:1/-1;}
.alan label{font-size:13px;font-weight:600;color:var(--metin-2);}
.alan input,.alan select{width:100%;padding:12px 14px;border-radius:11px;
  border:1px solid var(--kenar);background:var(--zemin);color:var(--metin);
  font:inherit;font-size:15.5px;transition:border-color .15s ease;}
.alan input:focus,.alan select:focus{border-color:var(--vurgu-metin-kucuk);outline:none;
  box-shadow:0 0 0 3px var(--vurgu-soluk);}
.alan input::placeholder{color:var(--metin-3);}

/* Bal küpü. İşaretlemede `hidden` niteliği var; stil hiç yüklenmese bile alan
   gizli kalsın diye. Buradaki kural onu ekran dışına alıyor ama display:none
   yapmıyor — bazı botlar display:none alanları atlıyor. `hidden` niteliğinin
   varsayılan display:none davranışını bu yüzden eziyoruz. */
.bal-kupu[hidden]{display:block;position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.basvuru-eylem{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px;}
.basvuru-durum{font-size:14.5px;color:var(--metin-2);}
.basvuru-durum.basvuru-hata{color:var(--vurgu-metin-kucuk);}
.basvuru-not{margin-top:18px;font-size:13.8px;color:var(--metin-3);}
@media (max-width:620px){
  .basvuru-form{grid-template-columns:1fr;padding:22px 18px;}
  .basvuru-eylem .dugme{width:100%;}
}

/* --- Alt bilgi ---------------------------------------------------------- */
.alt{background:var(--zemin-2);border-top:1px solid var(--kenar-2);padding:clamp(44px,5vw,64px) 0 28px;}
.alt-ic{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,52px);align-items:center;}
.alt-marka p{margin-top:16px;font-size:14.2px;color:var(--metin-3);max-width:46ch;line-height:1.6;}
.alt-sutun h2{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--metin-3);margin-bottom:16px;}
.alt-durum li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--kenar-2);font-size:14px;}
.alt-durum li span{color:var(--metin-3);}
.alt-durum a,.alt-baglanti a{color:var(--metin);text-decoration:none;border-bottom:1px solid transparent;}
.alt-durum a:hover,.alt-baglanti a:hover{color:var(--vurgu-metin-kucuk);border-bottom-color:var(--vurgu-soluk);}
.alt-baglanti li{padding:6px 0;font-size:14.4px;}
.alt-son{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--kenar-2);}
.alt-son p{font-size:13px;color:var(--metin-3);}
.alt-telif a{color:var(--metin-2);text-decoration-color:var(--kenar);}
.alt-telif a:hover{color:var(--vurgu-metin-kucuk);}
/* Düğme kanalın kendi yeşiliyle işaretleniyor; metin ve kenar sitenin
   ölçülü diliyle kalıyor. Marka yeşili (#25D366) üzerine beyaz yazı 1,98:1
   verdiği için zemin olarak kullanılmıyor — yalnız ikon ve kenarda. */
.alt-whatsapp{justify-self:end;text-align:center;}
.alt-whatsapp-ikon{width:19px;height:19px;flex:0 0 auto;fill:var(--kanal-renk);}
.alt-whatsapp:hover{border-color:var(--kanal-renk);color:var(--metin);}
@media (max-width:760px){.alt-ic{grid-template-columns:1fr;}.alt-whatsapp{justify-self:start;}}
.sesli-demo-secici{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 20px 24px}
.sesli-demo-secici button{font:inherit;font-weight:700;padding:12px 20px;border:1px solid #b8b2ad;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
.sesli-demo-secici button[aria-pressed="true"]{background:#ff3b00;color:#fff;border-color:#ff3b00}
.sesli-demo-secici button:focus-visible{outline:3px solid #ff7a40;outline-offset:3px}
.sesli-demo-secici button:disabled{cursor:not-allowed;opacity:.55}