/* ══════════════════════════════════════════════════════════════════════
   ana.css — OrtakBurada ana sayfası (misafir + üye)
   6 Ağustos 2026'da yazıldı.

   NEDEN AYRI DOSYA: önceki ana sayfada 593 satır CSS ve 1.078 satır JS
   doğrudan HTML'in içine gömülüydü. Tarayıcı gömülü kodu önbelleğe
   alamaz; her sayfa açılışında 134 KB yeniden iniyordu. Ayrı dosyaya
   çıkınca ilk ziyaretten sonrası bedava geliyor.

   TASARIM DİLİ (Linear/Cursor incelemesinden sonra):
     · Karakter arka planda değil, tipografide ve boşlukta
     · Bölümler ince yatay çizgilerle ayrılır — kart yığını değil
     · Hareket ölçülü: ızgaraya oturan fade, sert kesme. Tilt/3B/parallax yok
     · Butonlar yumuşak kare + chip · gradyan yok · parıltı yok
   ══════════════════════════════════════════════════════════════════════ */

/* ── KART DİLİ ─────────────────────────────────────────────────────
   Kartlar BEYAZ CAM: arkasını bulanıklaştırıp geçiriyor, kendi rengi yok.
   Zemin tek renge geçtikten sonra da aynı kaldı — cam yüzey artık sabit
   bir rengin üstünde çalıştığı için tarayıcı sonucu saklayabiliyor,
   yani hem daha ucuz hem daha sakin duruyor. */
/* ── RENKLER ────────────────────────────────────────────────────────
   ÖNEMLİ DERS (6 Ağu 2026): burada :root üzerinden --text global olarak
   koyuya çevrilmişti. Ama header ve footer da aynı değişkeni kullanıyor —
   sonuçta menü yazıları da siyaha döndü ve koyu kapsül başlığın içinde
   okunmaz oldu.

   Artık global değişkenler v8'in koyu temasında BIRAKILIYOR; aydınlık
   renkler yalnızca ana sayfanın kendi bölümlerine (.hero, .bol, .kapanis)
   veriliyor. Header, footer ve site geneli hiç etkilenmiyor. */
:root{
  --bg:#08080b;
  --orange:#ff6b00;
  --orange-deep:#e05500;
  --peach:#ffbd59;
  --en:1180px;

  /* Siyaha yakın zeminin (#12100E) üstünde BEYAZ yazı — kontrast 19:1.
     Vurgular marka turuncusu #ff6b00 (6,6:1). Burada bir dönem koyu
     turuncu #9c3400 kullanılıyordu; o renk AYDINLIK video zemin için
     seçilmişti ve zemin koyulaşınca kontrastı 1,79:1'e düştü, yani
     okunmaz oldu. 19 kullanımı birden turuncuya çevrildi.
     DERS: zemin rengi değişince vurgu renklerini yeniden ölç. */
  --text:#ffffff;
  --sonuk:rgba(255,255,255,.94);
  --cok-sonuk:rgba(255,255,255,.82);
  --cizgi:rgba(255,255,255,.26);
  --cizgi-kuv:rgba(255,255,255,.42);
  /* Kartlarda RENK YOK — yalnızca bulanıklık. Beyaz tül eklenince
     zemin soluyor ve "karartma" gibi duruyordu; saf blur videonun
     rengini olduğu gibi geçiriyor, sadece arkasını yumuşatıyor. */
  --kart:rgba(255,255,255,.04);
  --kart-kuv:rgba(255,255,255,.06);
}

/* Header ve footer v8'in kendi koyu kimliğinde kalır — ana sayfanın
   aydınlık takımı oraya sızmamalı. */
header.nav-head,.nav-shell,.nv-panel,.nv-menu,.site-foot,#siteFooter,
.ob-ck,#basvuruNotif,#eggNotif,.nv-npanel{
  --text:#ffffff;
  --sonuk:rgba(255,255,255,.58);
  --cok-sonuk:rgba(255,255,255,.38);
  --cizgi:rgba(255,255,255,.08);
  --cizgi-kuv:rgba(255,255,255,.14);
  color:#fff;
}

/* ══ ZEMİN — TEK RENK ════════════════════════════════════════════════
   6 Ağu 2026, Bilo: "sitede arka plan tek renk olsun... orta karar bir şey
   olsun ve sırıtmasın marka kimliğiyle. şeffaflık kalacak yine."

   #12100E — sıcak kömür/taş. Nasıl seçildi: burada duran video zeminin
   697 karesinin ortalaması ölçüldü, #571000 çıktı (parlaklık %12,
   doygunluk %100) — hem aşırı koyu hem sırıtan bir kırmızıydı. Yeni renk
   parlaklığı %6,4'te tutuyor — Bilo ilk denenen %19'luk tonu beğenmedi, siyaha yakın istedi. Sıcak tarafta
   kalıp marka turuncusuna rakip olmuyor.
   Kontrast: beyaz metinle 19:1, turuncu vurguyla 6,6:1.

   Videonun kaldırılması aynı zamanda kasma sorununun ilacı: her video
   karesinde arkasındaki bütün cam yüzeyler yeniden hesaplanıyordu. Sabit
   renk üstünde tarayıcı camı bir kez hesaplayıp saklıyor, bu yüzden
   şeffaflık telefonda da açık kalabiliyor.

   Eski zemin öğeleri gizleniyor: sayfaların içinde hâlâ duran WebGL
   tuvalleri ve karartma katmanı ekrana hiç gelmesin. */
#obVideo,#plasma,#obZemin,#bg-canvas,#plasmaBlur{display:none !important}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#12100E}
body{
  background:#12100E; color:#fff;
  font-family:'Sora',sans-serif; font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Ekranda görünmez ama ekran okuyucu ve arama motoru okur.
   Gizli anahtar kelime doldurmak için DEĞİL — yalnız bağlam etiketleri. */
.gizli-metin{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Bölüm iskeleti ──────────────────────────────────────────────── */
.bol{position:relative;z-index:2;padding:104px 24px;color:var(--text)}
.bol.ince{padding:72px 24px}
.ic{width:100%;max-width:var(--en);margin:0 auto}

/* Bölümleri ayıran ince çizgi — kart kutusu yerine matbaa ayracı */
.ayrac{border-top:1px solid var(--cizgi)}

.etiket{
  font-family:'Geist',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#ff6b00;
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.etiket::after{content:'';flex:1;height:1px;background:var(--cizgi);max-width:180px}

h2.baslik{
  /* Başlık genişliği bölüme göre değişiyor (.genis / .dar) — hepsi aynı
     ölçüde olunca sayfa boyunca aynı blok tekrar ediyordu. */
  font-family:'Geist',sans-serif;font-weight:600;
  font-size:clamp(28px,3.9vw,46px);letter-spacing:-.028em;line-height:1.12;
  max-width:20ch;
}
h2.baslik em{font-style:normal;color:#ff6b00}
h2.baslik .pe{color:#ff6b00}

.alt-metin{
  margin-top:20px;font-size:17px;line-height:1.75;color:var(--sonuk);max-width:60ch;
}

/* ── Butonlar ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Geist',sans-serif;font-weight:700;font-size:15px;
  padding:14px 14px 14px 28px;border-radius:16px;
  background:var(--orange);color:#fff;
  transition:background .2s ease,transform .2s ease;
  cursor:pointer;border:none;
text-shadow:0 1px 2px rgba(74,42,0,.62)}
.btn .chip{
  width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,background .2s ease;flex-shrink:0;
}
.btn .chip svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.btn:hover{background:var(--orange-deep);transform:translateY(-2px)}
.btn:hover .chip{transform:translateX(4px);background:var(--peach)}
.btn:hover .chip svg{stroke:#3a2000}
.btn:active{transform:scale(.98)}

.btn.hayalet{
  background:transparent;color:var(--sonuk);
  border:1px solid var(--cizgi-kuv);padding:14px 26px;
}
.btn.hayalet:hover{background:rgba(255,255,255,.04);color:#fff;
  border-color:rgba(255,189,89,.42);transform:translateY(-2px)}

.btn.seftali{background:var(--peach);color:#1a1206}
.btn.seftali .chip{background:rgba(26,18,6,.18)}
.btn.seftali .chip svg{stroke:#1a1206}
.btn.seftali:hover{background:#ffcf80}
.btn.seftali:hover .chip{background:rgba(26,18,6,.28)}
.btn.seftali:hover .chip svg{stroke:#1a1206}

/* Hero'daki koyu öğeler DÜZ SİYAH DEĞİL, BUĞULU CAM.
   İlk denemede dönen kelime kutusu, butonlar ve avatarlar düz koyu
   renkti; turuncu videonun üstünde siyah lekeler gibi duruyorlardı.
   Artık hepsi arkasındaki videoyu bulanıklaştırarak geçiriyor: rengi
   videodan alıyor, video hareket ettikçe içleri de değişiyor.
   Marka kimliğinin cam dili zaten bu. */
.hero .rot-box{
  background:rgba(255,255,255,.05);color:#fff;
  -webkit-backdrop-filter:blur(13px);
          backdrop-filter:blur(13px);
  /* clip-path ile backdrop-filter aynı anda çalışmıyor (tarayıcı camı
     kırpma alanının dışında hesaplıyor); köşe yuvarlatma border-radius'a
     bırakıldı, contain:paint kaldırıldı. */
  clip-path:none;contain:none;
  border:1px solid rgba(255,255,255,.20);
}
.hero .btn{
  background:rgba(255,255,255,.06);color:#fff;
  -webkit-backdrop-filter:blur(13px);
          backdrop-filter:blur(13px);
  border:1px solid rgba(255,255,255,.20);
}
.hero .btn .chip{background:rgba(255,255,255,.22)}
.hero .btn:hover{background:rgba(255,255,255,.14)}
.hero .btn:hover .chip{background:var(--orange)}
.hero .btn:hover .chip svg{stroke:#fff}
.hero .btn.hayalet{
  background:rgba(255,255,255,.16);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.42);
}
.hero .btn.hayalet:hover{background:rgba(255,255,255,.26);color:#fff}
.hero .av{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.45);color:#ffd9a8;
}

/* ══ HERO ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;z-index:2;color:var(--text);
  min-height:min(92vh,860px);
  display:flex;align-items:center;
  padding:150px 24px 90px;
}
.hero-ic{width:100%;max-width:var(--en);margin:0 auto}

.h-title{
  font-family:'Geist',sans-serif;font-weight:700;
  font-size:clamp(38px,6.6vw,80px);
  letter-spacing:-.038em;line-height:1.03;
  max-width:16ch;
}
.h-title .satir{display:block}

/* Marka satırı bilerek KÜÇÜK ve soluk: asıl mesaj "… ortak bul." cümlesi.
   İlk denemede ikisi de aynı boyuttaydı ve marka adı başlığı eziyordu —
   göz önce ne okuyacağını bilemiyordu. Marka zaten header'da duruyor,
   burada yalnızca imza olarak var. */
.marka-ln{
  color:var(--cok-sonuk);
  font-size:.42em;font-weight:600;letter-spacing:-.02em;
  margin-top:.34em;
}
.marka-ln .dot,.marka-ln .fl.dot{color:var(--orange)}
.marka-ln .fl{display:inline-block;opacity:0;transform:translateY(1.1em) rotate(4deg);
  animation:flIn .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes flIn{to{opacity:1;transform:translateY(0) rotate(0)}}

/* Dönen kelime kutusu — Bilo'nun beğendiği animasyon, olduğu gibi taşındı.
   Tek fark: artık cümlenin içinde duruyor ("Girişimine ortak bul") ve ilk
   kelime sunucudan basılıyor, böylece h1 hiçbir an boş kalmıyor (SEO). */
.rot-box{
  display:inline-flex;align-items:center;vertical-align:bottom;
  background:var(--orange);color:#fff;
  border-radius:.16em;padding:.02em .16em .06em;
  overflow:hidden;white-space:nowrap;contain:paint;
  clip-path:inset(0 round .16em);
  transition:width .45s cubic-bezier(.4,0,.2,1);
text-shadow:0 1px 2px rgba(74,42,0,.62)}
.rot-box .ch{display:inline-block}
.rot-box .ch.in-slide{transform:translateY(110%);opacity:0;animation:chSlide .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes chSlide{to{transform:translateY(0);opacity:1}}
.rot-box .ch.in-flip{transform:perspective(400px) rotateX(-95deg) translateY(30%);opacity:0;animation:chFlip .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes chFlip{60%{opacity:1}to{transform:perspective(400px) rotateX(0) translateY(0);opacity:1}}
.rot-box .ch.in-blur{filter:blur(10px);transform:scale(1.35);opacity:0;animation:chBlur .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes chBlur{to{filter:blur(0);transform:scale(1);opacity:1}}
.rot-box .ch.in-drop{transform:translateY(-130%);opacity:0;animation:chDrop .6s cubic-bezier(.34,1.56,.5,1) forwards}
@keyframes chDrop{40%{opacity:1}to{transform:translateY(0);opacity:1}}
.rot-box .ch.out{transform:translateY(0);animation:chOut .38s cubic-bezier(.55,0,.55,.2) forwards}
@keyframes chOut{to{transform:translateY(-115%);opacity:0}}

.h-alt{margin-top:28px;font-size:18px;line-height:1.72;color:var(--sonuk);max-width:56ch}
.h-alt b{color:var(--text);font-weight:600}

.h-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.h-kanit{display:flex;align-items:center;gap:14px;margin-top:42px;flex-wrap:wrap}
.avs{display:flex}
.av{
  width:34px;height:34px;border-radius:50%;background:#1a1a22;
  border:2px solid var(--bg);margin-left:-10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Geist',sans-serif;font-size:11px;font-weight:700;color:var(--peach);
}
.av:first-child{margin-left:0}
.h-kanit span{font-size:14.5px;color:var(--cok-sonuk)}
.h-kanit b{color:#fff;font-weight:700}

/* ══ TEK CÜMLE — ne yaptığımız ═══════════════════════════════════════ */
.ozet{
  font-family:'Geist',sans-serif;font-weight:400;
  font-size:clamp(23px,3.1vw,36px);line-height:1.42;letter-spacing:-.022em;
  max-width:24ch;
}
.ozet em{font-style:normal;color:#ff6b00}
.ozet .pe{color:#ff6b00}

/* Sayılar kartsız: rakamın kendisi yeterince güçlü, kutuya koymak
   onu küçültüyordu. Aralarında yalnız ince dikey çizgi var. */
.sayilar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0;margin-top:64px;border-top:1px solid var(--cizgi);padding-top:34px}
.sayi{padding:0 26px;border-left:1px solid var(--cizgi)}
.sayi:first-child{border-left:none;padding-left:0}
.sayi b{display:block;font-family:'Geist',sans-serif;font-weight:600;
  font-size:clamp(38px,4.6vw,58px);color:#fff;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.sayi span{display:block;margin-top:10px;font-size:14px;color:var(--cok-sonuk);line-height:1.45}
@media(max-width:600px){
  .sayilar{gap:22px 0}
  .sayi{padding:0 16px}
  .sayi:nth-child(odd){border-left:none;padding-left:0}
}

/* ══ İKİ TARAF ══════════════════════════════════════════════════════
   Kartlar BUĞULU CAM — marka kimliğinin imzası bu. İlk denemede kartlar
   düz siyahtı ve aralarında 1px çizgi vardı; ortaya ızgara benzeri bir
   tablo çıkıyordu ve marka diline hiç uymuyordu. Artık her kart kendi
   yumuşak kare kutusunda, arkasındaki zemini bulanıklaştırarak duruyor. */
.taraflar{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.taraf{
  background:var(--kart-kuv);
  -webkit-backdrop-filter:blur(13px);
          backdrop-filter:blur(13px);
  border:1px solid var(--cizgi-kuv);border-radius:18px;
  padding:40px 34px;display:flex;flex-direction:column;
}
.taraf .rol{
  font-family:'Geist',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cok-sonuk);
}
.taraf.kurum .rol{color:#ff6b00}
.taraf h3{font-family:'Geist',sans-serif;font-weight:600;font-size:26px;
  letter-spacing:-.024em;margin-top:16px;line-height:1.22}
.taraf p{margin-top:14px;color:var(--sonuk);font-size:15.5px;line-height:1.7}
.taraf ul{margin-top:22px;list-style:none;display:flex;flex-direction:column;gap:11px}
.taraf li{display:flex;gap:11px;font-size:15px;color:var(--sonuk);line-height:1.55}
.taraf li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;
  stroke:#ff6b00;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.taraf.kurum li svg{stroke:#fff}
.taraf .alt-btn{margin-top:auto;padding-top:32px}

/* ══ ADIMLAR ════════════════════════════════════════════════════════
   Dört eşit kutu yan yanaydı — her bölüm aynı ızgarada olunca sayfa
   tekdüze okunuyordu. Artık dikey bir akış: numara solda büyük ve mat,
   metin sağda. Göz yukarıdan aşağı iniyor, sıra hissi gerçekten oluşuyor. */
.adimlar{margin-top:56px;display:flex;flex-direction:column}
.adim{
  display:grid;grid-template-columns:132px 1fr;gap:34px;align-items:start;
  padding:34px 0;border-top:1px solid var(--cizgi);
}
.adim:last-child{border-bottom:1px solid var(--cizgi)}
.adim .no{
  font-family:'Geist',sans-serif;font-weight:300;
  font-size:clamp(46px,5.4vw,72px);line-height:.86;
  color:rgba(156,52,0,.66);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.adimlar.pe .adim .no{color:rgba(156,52,0,.72)}
.adim .govde{max-width:56ch}
.adim h3{font-family:'Geist',sans-serif;font-weight:600;font-size:clamp(20px,2.3vw,26px);
  letter-spacing:-.022em;line-height:1.24;margin:0}
.adim p{margin-top:12px;font-size:16px;color:var(--sonuk);line-height:1.72}

@media(max-width:700px){
  .adim{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .adim .no{font-size:38px}
}

/* ══ SEKTÖR ŞERİDİ ══════════════════════════════════════════════════ */
.serit{overflow:hidden;position:relative;padding:26px 0;color:var(--text);
  border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi)}
.serit::before,.serit::after{
  content:'';position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none;
}
/* Kenar solması siyah değil: video üstünde siyah bant çıkıyordu. */
.serit::before,.serit::after{display:none}
.serit-ray{display:flex;gap:52px;width:max-content;animation:kay 42s linear infinite}
.serit:hover .serit-ray{animation-play-state:paused}
@keyframes kay{to{transform:translateX(-50%)}}
.serit-ray span{
  font-family:'Geist',sans-serif;font-weight:600;font-size:15px;
  color:rgba(255,255,255,.58);white-space:nowrap;letter-spacing:.01em;
}

/* ══ EKRANLAR ═══════════════════════════════════════════════════════ */
.ekranlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:22px;margin-top:52px}
.ekran{
  border:1px solid var(--cizgi);border-radius:16px;overflow:hidden;
  background:var(--kart);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  transition:border-color .3s ease,transform .3s ease;
}
.ekran:hover{border-color:rgba(255,189,89,.32);transform:translateY(-3px)}
.ekran img{width:100%;display:block;border-bottom:1px solid var(--cizgi)}
.ekran .yazi{padding:20px 22px 24px}
.ekran b{font-family:'Geist',sans-serif;font-weight:600;font-size:16px;display:block}
.ekran small{display:block;margin-top:7px;font-size:13.5px;color:var(--cok-sonuk);line-height:1.6}

/* ══ GÜVEN ══════════════════════════════════════════════════════════ */
.guven{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-top:48px}
.guven-k{
  background:var(--kart);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border:1px solid var(--cizgi);border-radius:16px;padding:28px 24px;
}
.guven-k svg{width:22px;height:22px;stroke:#ff6b00;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.guven-k b{display:block;font-family:'Geist',sans-serif;font-weight:600;
  font-size:16px;margin-top:16px}
.guven-k p{margin-top:9px;font-size:14px;color:var(--sonuk);line-height:1.65}

/* ══ SSS ════════════════════════════════════════════════════════════ */
/* SSS'de bilerek cam YOK: akordeon açılıp kapanırken bulanıklaştırılan
   katmanın boyutu değişiyor ve Chrome tüm katmanı yeniden çiziyor —
   ekranda titreme oluyor (21 Tem 2026'da öğrenildi). Burada düz zemin. */
.sss{margin-top:48px;background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--cizgi);border-radius:18px;padding:4px 26px}
.soru{border-bottom:1px solid var(--cizgi)}
.soru:last-child{border-bottom:none}
.soru summary{
  list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:'Geist',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:-.015em;line-height:1.45;
  transition:color .2s ease;
}
.soru summary::-webkit-details-marker{display:none}
.soru summary:hover{color:#ff6b00}
.soru summary::after{
  content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--cok-sonuk);border-bottom:2px solid var(--cok-sonuk);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease,border-color .2s ease;
}
.soru[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#ffe2c0}
.soru .cevap{padding:0 40px 26px 0;color:var(--sonuk);font-size:15.5px;line-height:1.78}
.soru .cevap a{color:#ff6b00;border-bottom:1px solid rgba(255,226,192,.4)}

/* ══ KAPANIŞ ════════════════════════════════════════════════════════ */
.kapanis{text-align:center;padding:118px 24px;color:var(--text)}
.kapanis h2{
  font-family:'Geist',sans-serif;font-weight:600;
  font-size:clamp(30px,4.6vw,54px);letter-spacing:-.032em;line-height:1.1;
  max-width:18ch;margin:0 auto;
}
.kapanis h2 em{font-style:normal;color:#ff6b00}
.kapanis p{margin:22px auto 0;color:var(--sonuk);max-width:52ch;font-size:17px;line-height:1.7}
.kapanis .h-ctas{justify-content:center}

/* ══ GİRİŞ HAREKETİ ═════════════════════════════════════════════════
   Tek hareket dili: ölçülü fade + ızgaraya oturma. Kaydırma sırasında
   büyüyen/dönen/eğilen hiçbir şey yok — o dil siteyi hem yavaşlatıyor
   hem şablon gibi gösteriyordu. */
/* Giriş hareketi YALNIZCA JavaScript çalışıyorsa devreye girer.
   Önceden .gel doğrudan opacity:0 ile başlıyordu; betik herhangi bir
   sebeple çalışmazsa (hata, eski tarayıcı, otomatik tarayıcı) sayfanın
   yarısı görünmez kalıyordu. Artık gizleme sınıfını betiğin kendisi
   ekliyor — betik yoksa içerik olduğu gibi duruyor. */
.js-hazir .gel{opacity:0;transform:translateY(10px);
  transition:opacity .44s ease-out,transform .44s cubic-bezier(.22,1,.36,1)}
.js-hazir .gel.ic-gir{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .gel{opacity:1;transform:none;transition:none}
  .serit-ray{animation:none}
  html{scroll-behavior:auto}
}

/* ══ DAR EKRAN ══════════════════════════════════════════════════════ */
@media(max-width:900px){
  .taraflar{grid-template-columns:1fr}
  .hero{padding:128px 22px 72px;min-height:auto}
  .bol{padding:78px 22px}
  .bol.ince{padding:58px 22px}
  .kapanis{padding:88px 22px}
  .taraf{padding:34px 26px}
}
@media(max-width:600px){
  body{font-size:15.5px}
  .h-alt{font-size:16.5px}
  .adim{padding:28px 22px 32px}
  .guven-k{padding:26px 22px}
  .sayi{padding:22px 18px}
  .sayi b{font-size:29px}
  .btn{width:100%;justify-content:space-between}
  .h-ctas{gap:10px}
}

/* ══════════════════════════════════════════════════════════════════════
   UZUN ANLATIM BÖLÜMLERİ (6 Ağu 2026)
   Bilo: "ana sayfa uzun olsun, SEO için daha çok yazı, 7 yaşındaki çocukla
   70 yaşındaki adam bile anlayabilmeli." Bu bölümler o yüzden var: sade
   cümleler, gerçek örnekler, terim açıklamaları.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sade anlatım blokları ─────────────────────────────────────────── */
.anlat{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px;align-items:start}
.anlat p{color:var(--sonuk);font-size:16.5px;line-height:1.82;margin-bottom:16px}
.anlat p:last-child{margin-bottom:0}
.anlat b{color:var(--text);font-weight:600}
.anlat .vurgu{color:#ff6b00;font-weight:700}

/* ── Örnek hikâye kartları ─────────────────────────────────────────── */
.hikayeler{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:44px}
.hikaye{
  background:var(--kart);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border:1px solid var(--cizgi);border-radius:16px;padding:30px 26px;
  display:flex;flex-direction:column;
}
.hikaye .kim{
  font-family:'Geist',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#ff6b00;
}
.hikaye .durum{margin-top:16px;font-size:16px;line-height:1.7;color:var(--text);font-weight:500}
.hikaye .ok{
  margin:18px 0;height:1px;background:var(--cizgi);position:relative;
}
.hikaye .ok::after{
  content:'↓';position:absolute;left:0;top:-11px;
  font-size:15px;color:#ff6b00;padding-right:8px;
}
.hikaye .sonuc{font-size:15px;line-height:1.72;color:var(--sonuk)}
.hikaye .sonuc b{color:#ff6b00;font-weight:700}

/* ── Rol listesi ───────────────────────────────────────────────────── */
.roller{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.rol-c{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.045);border:1px solid var(--cizgi);
  border-radius:12px;padding:11px 17px;font-size:14.5px;color:var(--sonuk);
  transition:border-color .25s ease,color .25s ease;
}
.rol-c:hover{border-color:rgba(255,189,89,.35);color:var(--text)}
.rol-c i{width:5px;height:5px;border-radius:50%;background:#ff6b00;flex-shrink:0}

/* ── Ücret satırları ───────────────────────────────────────────────── */
.ucret{margin-top:40px;border-top:1px solid var(--cizgi)}
.ucret-s{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:20px 0;border-bottom:1px solid var(--cizgi);
}
.ucret-s .ne{font-family:'Geist',sans-serif;font-weight:600;font-size:16.5px;min-width:230px}
.ucret-s .kac{
  font-family:'Geist',sans-serif;font-weight:700;font-size:15px;color:#ff6b00;
  white-space:nowrap;
}
.ucret-s .kac.bedava{color:var(--orange)}
.ucret-s .aciklama{color:var(--sonuk);font-size:14.5px;line-height:1.65;flex:1;min-width:240px}

/* ── Terim sözlüğü ─────────────────────────────────────────────────── */
.sozluk{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:40px}
.terim{
  background:rgba(255,255,255,.03);border:1px solid var(--cizgi);
  border-radius:14px;padding:22px 22px 24px;
}
.terim b{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:16px;color:#ff6b00}
.terim p{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--sonuk)}

@media(max-width:900px){
  .anlat{grid-template-columns:1fr;gap:0}
  .ucret-s .ne{min-width:auto;width:100%}
}


/* ── Bölüm ritmi ────────────────────────────────────────────────────
   Sayfanın her bölümü aynı kalıpta (etiket → başlık → ızgara) olunca
   aşağı inerken hiçbir sürpriz kalmıyordu. Bu sınıflar ritmi kırıyor. */
h2.baslik.genis{max-width:26ch;font-size:clamp(30px,4.6vw,56px)}
h2.baslik.dar{max-width:15ch}

.bol.orta{text-align:center}
.bol.orta .etiket{justify-content:center}
.bol.orta .etiket::after{display:none}
.bol.orta .etiket::before{content:'';flex:0 0 46px;height:1px;background:var(--cizgi)}
.bol.orta h2.baslik{margin:0 auto}
.bol.orta .alt-metin{margin-left:auto;margin-right:auto}

/* Geniş görsel bölümü: kenarlardan taşan, tam genişlikte sunum */
.bol.tam{padding-left:0;padding-right:0}
.bol.tam .ic{max-width:100%;padding:0 24px}
.ekranlar.buyuk{grid-template-columns:1fr;gap:28px;max-width:960px;margin-left:auto;margin-right:auto}
.ekranlar.buyuk .ekran{display:grid;grid-template-columns:1.35fr 1fr;align-items:center}
.ekranlar.buyuk .ekran img{border-bottom:none;border-right:1px solid var(--cizgi);height:100%;object-fit:cover}
.ekranlar.buyuk .yazi{padding:32px 34px}
.ekranlar.buyuk b{font-size:19px}
.ekranlar.buyuk small{font-size:14.5px;margin-top:10px}
@media(max-width:760px){
  .ekranlar.buyuk .ekran{grid-template-columns:1fr}
  .ekranlar.buyuk .ekran img{border-right:none;border-bottom:1px solid var(--cizgi)}
}

/* ══ DAR EKRAN TAŞMA ONARIMI — 8 Ağustos 2026 ═════════════════════════
   Ölçüm (390×844, canlı): iki blok ekran dışına taşıyordu.

   1) `.akis` (Şu an sitede / Canlı akış) `max-width:520px` taşıyor.
      Sabit bir üst sınır, 390px'lik ekranda 152px taşma demek. Üst sınır
      korunuyor ama artık ekranı aşamıyor.
   2) `.scrub` metni `max-width:22ch`. `ch` birimi yazı tipine bağlı ve
      büyük puntoda 22 karakter 396px ediyordu; içindeki `.hw` kelime
      kutuları da bölünemediği için son kelime 26px dışarı çıkıyordu.

   Sayfanın kendisi yatay kaymıyordu (gövdede `overflow-x:hidden` var),
   yani hata gözle görülmüyordu ama metnin sağ ucu kırpılıyordu. */
/* İki sütunlu bölüm kabı. Daha önce index.php'de satır içi stildeydi;
   satır içi stil medya sorgusuyla ezilemediği için dar ekranda
   ısrarla iki sütun kalıyordu. */
.ic.ikili{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
/* `minmax(0,1fr)` şart: düz `1fr`, içindeki en geniş öğenin "en dar
   hâlinin" altına İNMEZ. Bu bölümdeki canlı akış satırları geniş
   olduğu için sütun tek sütuna düşse bile 520px'te takılı kalıyordu
   (390px ekranda ölçüldü: grid-template-columns hesaplanan değer
   "520px"). `min-width:0` da aynı kilidi çocuk tarafında açıyor. */
.ic.ikili > *{min-width:0}
@media(max-width:900px){ .ic.ikili{grid-template-columns:minmax(0,1fr);gap:34px} }

@media(max-width:760px){
  .akis{ max-width:100%; }
  .scrub{ max-width:100%; font-size:clamp(24px,7.4vw,34px); }
  .scrub .hw{ display:inline; }
}

/* Ortalı bölümlerde YALNIZ başlık ortalanır. Gövde metni sola hizalı
   kalır — uzun paragrafı ortalamak her satırın başlangıcını kaydırıyor
   ve göz bir sonraki satırı bulmakta zorlanıyor. */
.bol.orta .anlat,
.bol.orta .hikayeler,
.bol.orta .sss,
.bol.orta .ekranlar{text-align:left}
.bol.orta .anlat{max-width:1000px;margin-left:auto;margin-right:auto}


/* Site geneli yüzen öğeler (Fikir Ver düğmesi, çerez şeridi) video zemin
   üstünde düz koyu kutular gibi duruyordu; onlar da cama alındı. */
.ob-fikir-btn{
  background:rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter:blur(13px);
          backdrop-filter:blur(13px);
  border-color:rgba(255,255,255,.22) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   HAREKET DİLİ (6 Ağu 2026)
   Animasyon kütüphanesinden beş efekt seçildi — kural: bir sayfada en
   fazla 4-5 efekt, hepsi 60 kare/sn'de akmalı. Seçilenler ve nedenleri:

     #1  Maskeli açılış  — bölüm başlıkları alt maskeden yukarı çıkar.
                           Sade ama sayfaya ritim veren temel hareket.
     #6  Sayaç           — rakamlar sıfırdan hedefe akar. Rakamın kendisi
                           mesaj olduğu için hareketi de hak ediyor.
     #16 Vurgu şeridi    — vurgulu kelimenin arkasında marka renginde
                           şerit soldan sağa açılır.
     #27 Kesik yazı      — dev başlık zemini keser, harflerin içinden
                           VİDEO akar. Video zeminle en çok konuşan efekt.
     #17 Altı çizilme    — bağlantılarda, yalnız fare üstüne gelince.

   Hepsi transform/opacity/clip üzerinden çalışıyor (düzen hesabı
   tetiklemiyor) ve prefers-reduced-motion'da tamamen kapanıyor.
   ══════════════════════════════════════════════════════════════════════ */

/* ── #1 Maskeli açılış ─────────────────────────────────────────────── */
.mask-satir{display:block;overflow:hidden}
.mask-satir > span{
  display:block;transform:translateY(105%);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.ic-gir .mask-satir > span,.mask-satir.ic-gir > span{transform:translateY(0)}

/* ── #16 Vurgu şeridi ──────────────────────────────────────────────── */
.serit-vurgu{position:relative;display:inline-block;z-index:0;padding:0 .12em;margin:0 -.06em}
.serit-vurgu::before{
  content:'';position:absolute;left:0;right:0;top:.06em;bottom:.06em;z-index:-1;
  background:rgba(61,20,0,.42);border-radius:.1em;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .72s cubic-bezier(.22,1,.36,1) .22s;
}
.ic-gir .serit-vurgu::before,.serit-vurgu.ic-gir::before{transform:scaleX(1)}

/* ── #27 Vurgu yazı ────────────────────────────────────────────────────
   Eskiden zemin videosunun ilk karesi harflerin içine hapsediliyordu:
   arkada dönen videoyla aynı görüntü olduğu için harfler pencere gibi
   çalışıyordu. Zemin tek renge geçince o pencere mantığı çöktü — geride
   zeminle ilgisi kalmamış rastgele bir doku kalıyordu.

   Yerine marka turuncusu: düz, gradyansız, tek renk. Vurgu yazıların
   turuncu olması zaten marka kuralı. */
.kesik{
  color:#ff6b00;
  -webkit-text-fill-color:currentColor;
  background:none;
}

/* ── #6 Sayaç ──────────────────────────────────────────────────────── */
.sayi b{font-variant-numeric:tabular-nums}

/* ── #17 Altı çizilme (yalnız fareyle) ─────────────────────────────── */
.alt-ciz{position:relative}
.alt-ciz::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.alt-ciz:hover::after{transform:scaleX(1);transform-origin:left center}

@media (prefers-reduced-motion:reduce){
  .mask-satir > span{transform:none;transition:none}
  .serit-vurgu::before{transform:scaleX(1);transition:none}
  .alt-ciz::after{display:none}
}

/* ══ EK HAREKETLER ════════════════════════════════════════════════════
   Kütüphaneden üç efekt daha. Hepsi transform/opacity ile çalışıyor,
   düzen hesabı tetiklemiyor, prefers-reduced-motion'da kapanıyor.  */

/* #19 metin dolması KALDIRILDI: paragraflar okunurken soluk duruyordu,
   göz sürekli "yazı henüz gelmedi mi" diye tereddüt ediyordu. Okunacak
   metin animasyona bağlanmaz. */
.dol{opacity:1}

/* Kartlar: girişte alttan süzülme + fareyle hafif kalkma.
   Gölge yok (parıltı kuralı) — yalnız konum ve kenar rengi değişiyor. */
.hikaye,.adim,.guven-k,.ekran,.taraf{
  transition:transform .42s cubic-bezier(.22,1,.36,1),
             border-color .42s ease,
             background .42s ease;
}
.hikaye:hover,.guven-k:hover,.taraf:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
}

/* Rol çipleri sırayla belirir — hepsi aynı anda gelince kalabalık
   görünüyordu, kademeli gelince liste "yazılıyormuş" gibi okunuyor. */
.rol-c{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),
             border-color .25s ease,background .25s ease}
.roller.ic-gir .rol-c{opacity:1;transform:none}
.rol-c:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}

/* Adım satırı: fareyle üstüne gelince numara öne çıkar */
.adim{transition:background .35s ease}
.adim:hover{background:rgba(255,255,255,.07)}
.adim .no{transition:color .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.adim:hover .no{color:#fff;transform:translateX(6px)}

/* Ekran kartlarında görsel hafifçe yaklaşır */
.ekran img{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.ekran:hover img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .dol{opacity:1;transition:none}
  .rol-c{opacity:1;transform:none;transition:none}
  .hikaye:hover,.guven-k:hover,.taraf:hover,.adim:hover .no,.ekran:hover img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   GENİŞLETİLMİŞ HAREKET DİLİ (6 Ağu 2026, ikinci tur)
   Bilo: "hâlâ animasyonlar çok az, canlı sayfadan örnek alabilirsin."
   Eski v8 ana sayfasındaki dört efekt buraya uyarlandı — ama video zemin
   ve aydınlık takıma göre yeniden renklendirildi.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Kaydırdıkça kelime kelime aydınlanan metin ────────────────────────
   Büyük bir cümle soluk başlıyor; sayfa kaydıkça kelimeler sırayla
   tam beyaza dönüyor. Okuma ritmini kullanıcının kendi kaydırması
   belirliyor — sabit süreli bir animasyon değil, "scrub". */
.scrub{
  font-family:'Geist',sans-serif;font-weight:700;
  font-size:clamp(26px,3.4vw,50px);letter-spacing:-.03em;line-height:1.36;
  max-width:22ch;
}
.scrub .hw{color:rgba(255,255,255,.26);transition:color .3s ease}
.scrub .hw.yandi{color:#fff}
.scrub .hw.vurgu.yandi{color:#ff6b00}

/* ── Odak çerçevesi (TrueFocus) ────────────────────────────────────────
   Kelimeler sırayla netleşir, köşe çerçevesi aralarında gezinir.
   Parıltı (drop-shadow) kaldırıldı — marka kuralı. */
.odak{display:flex;gap:.5em;justify-content:center;align-items:center;
  flex-wrap:wrap;position:relative;margin-top:8px}
.odak-k{
  position:relative;font-family:'Geist',sans-serif;font-weight:700;
  font-size:clamp(28px,4vw,58px);letter-spacing:-.03em;
  filter:blur(5px);opacity:.55;
  transition:filter .5s ease,opacity .5s ease;
}
.odak-k.net{filter:blur(0);opacity:1}
.odak-cerceve{position:absolute;top:0;left:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.22,1,.36,1),
             width .42s cubic-bezier(.22,1,.36,1),
             height .42s cubic-bezier(.22,1,.36,1);
  opacity:0}
.odak-cerceve.acik{opacity:1}
.odak-cerceve i{position:absolute;width:15px;height:15px;
  border:3px solid #fff;border-radius:3px}
.odak-cerceve i.tl{top:-11px;left:-11px;border-right:none;border-bottom:none}
.odak-cerceve i.tr{top:-11px;right:-11px;border-left:none;border-bottom:none}
.odak-cerceve i.bl{bottom:-11px;left:-11px;border-right:none;border-top:none}
.odak-cerceve i.br{bottom:-11px;right:-11px;border-left:none;border-top:none}

/* ── Canlı akış satırları ──────────────────────────────────────────────
   Sitede o an ne olduğunu gösteren satırlar; belirli aralıkla içerik
   değişiyor. Yeşil nokta nabız atıyor — tek "canlı" işareti bu. */
.akis{margin-top:38px;display:flex;flex-direction:column;gap:10px;max-width:520px}
.akis-bas{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:4px}
.akis-nokta{width:7px;height:7px;border-radius:50%;background:#5bd39a;
  animation:akisNabiz 2s ease-out infinite}
@keyframes akisNabiz{
  0%{box-shadow:0 0 0 0 rgba(91,211,154,.55)}
  70%{box-shadow:0 0 0 8px rgba(91,211,154,0)}
  100%{box-shadow:0 0 0 0 rgba(91,211,154,0)}
}
.akis-s{display:flex;align-items:center;gap:13px;padding:13px 16px;
  border:1px solid rgba(255,255,255,.20);border-radius:14px;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.akis-s .ik{width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.akis-s .ik svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.akis-s .gv{flex:1;min-width:0;transition:opacity .36s ease,transform .36s ease}
.akis-s.degisiyor .gv{opacity:0;transform:translateY(7px)}
.akis-s .bs{font-size:13.5px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akis-s .al{font-size:11.5px;color:rgba(255,255,255,.72);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Yığılan kartlar (ScrollStack) ─────────────────────────────────────
   Kartlar kaydırdıkça üst üste yığılıyor: her biri bir öncekinin
   üzerine oturuyor ve alttaki hafifçe küçülüyor. */
.yigin{position:relative;margin-top:56px}
.yigin-k{
  position:sticky;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
  border:1px solid rgba(255,255,255,.26);border-radius:20px;
  padding:38px 34px;margin-bottom:22px;
  transform-origin:center top;will-change:transform;
}
.yigin-k h3{font-family:'Geist',sans-serif;font-weight:600;
  font-size:clamp(21px,2.4vw,28px);letter-spacing:-.022em;line-height:1.24}
.yigin-k p{margin-top:12px;font-size:16px;line-height:1.72;color:var(--sonuk);max-width:56ch}
.yigin-k .sr{font-family:'Geist',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#ff6b00;margin-bottom:16px;display:block}

@media (prefers-reduced-motion:reduce){
  .scrub .hw{color:#fff}
  .odak-k{filter:none;opacity:1}
  .odak-cerceve{display:none}
  .akis-nokta{animation:none}
  .yigin-k{position:static;transform:none !important}
}

/* ══ MİNİMAL AMA DEĞERLİ HAREKETLER (üçüncü tur) ══════════════════════
   Bilo: "minimal ama değerli animasyonlar". Gösteriş yapmayan, ama
   dokunulduğunda arayüzün canlı olduğunu hissettiren dört hareket.  */

/* 1 · Etiket çizgisi açılır — bölüm başlarken çizgi soldan sağa uzuyor.
   Küçücük bir hareket ama her bölüme "başlıyor" hissi veriyor. */
.etiket::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.22,1,.36,1) .1s}
.etiket.ic-gir::after,.ic-gir .etiket::after{transform:scaleX(1)}

/* 2 · Manyetik buton — fare yaklaşınca buton ona doğru birkaç piksel
   kayıyor. Tıklanabilirliği elle tutulur hâle getiren klasik dokunuş. */
.btn{will-change:transform}
.btn.miknatis{transition:background .2s ease,transform .28s cubic-bezier(.22,1,.36,1)}

/* 3 · SSS yumuşak açılma — <details> varsayılan olarak ANİDEN açılıyor.
   Cevap gövdesi kendi geçişiyle iniyor. */
.soru .cevap{
  overflow:hidden;
  animation:cevapAc .42s cubic-bezier(.22,1,.36,1);
}
@keyframes cevapAc{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
.soru summary::after{transition:transform .32s cubic-bezier(.22,1,.36,1),border-color .2s ease}

/* 4 · Header kaydırınca daralır — sayfa aşağı inince kapsül biraz
   küçülüp yukarı yaklaşıyor, içerik için yer açıyor. */
header.nav-head{transition:padding .35s cubic-bezier(.22,1,.36,1)}
.nav-shell{transition:padding .35s cubic-bezier(.22,1,.36,1),
                      background .35s ease,border-color .35s ease}
body.kaydi header.nav-head{padding-top:10px}
body.kaydi .nav-shell{padding-top:7px;padding-bottom:7px;
  background:rgba(13,13,18,.46);border-color:rgba(255,255,255,.16)}

@media (prefers-reduced-motion:reduce){
  .etiket::after{transform:scaleX(1)}
  .soru .cevap{animation:none}
  header.nav-head,.nav-shell{transition:none}
}