/* Beş 5 — ortak stil. Renkler doğrudan logodan alındı. */

:root{
  --zemin:#FBFCF8;
  --zemin-2:#EFF4E7;
  --zemin-3:#E4EBDA;
  --metin:#0B2A1E;
  --metin-2:#4A5C50;
  --metin-3:#77877D;
  --cizgi:#DCE4D2;
  --yesil:#4E9226;
  --yesil-parlak:#6DB32F;
  --yesil-ac:#A8C93A;
  --yesil-yumusak:#E6F1D6;
  --kalem:#E9992B;
  --golge:0 1px 2px rgba(11,42,30,.06), 0 8px 24px rgba(11,42,30,.05);

  --f-baslik:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-govde:"Lora",Georgia,"Times New Roman",serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --zemin:#0C1410;
    --zemin-2:#141F18;
    --zemin-3:#1C2A21;
    --metin:#E9F0E5;
    --metin-2:#A3B2A6;
    --metin-3:#7B8A80;
    --cizgi:#243328;
    --yesil:#7FC348;
    --yesil-parlak:#8FD152;
    --yesil-ac:#B7D84E;
    --yesil-yumusak:#1B2A17;
    --kalem:#F0AC4E;
    --golge:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--zemin);
  color:var(--metin);
  font-family:var(--f-govde);
  font-size:17px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--yesil);text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--yesil-ac);outline-offset:3px;border-radius:6px}

.kap{max-width:680px;margin:0 auto;padding:0 20px}

/* ── Üst çubuk ───────────────────────────────── */
.ust{
  border-bottom:1px solid var(--cizgi);
  background:var(--zemin);
  position:sticky;top:0;z-index:10;
}
.ust .kap{display:flex;align-items:center;gap:10px;height:60px}
.ust img{width:32px;height:32px;border-radius:7px}
.marka{
  font-family:var(--f-baslik);font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--metin);text-decoration:none;
}
.ust .bosluk{flex:1}
.ust a.kucuk{
  font-family:var(--f-baslik);font-weight:600;font-size:14px;
  text-decoration:none;color:var(--yesil);
  border:1.5px solid var(--yesil);border-radius:999px;padding:7px 14px;
  white-space:nowrap;
}

/* ── Hero ────────────────────────────────────── */
.hero{padding:44px 0 8px;text-align:center}
/* Logo dosyasi saydam degil; beyaz zemini koyu temada kutu gibi
   goruluyordu. Cikartma gibi bir kap icine alarak iki temada da
   kasitli duruyor. */
.hero img.logo{
  width:min(230px,62vw);margin:0 auto 26px;
  background:#fff;border-radius:26px;padding:12px;
  box-shadow:var(--golge);
}
h1{
  font-family:var(--f-baslik);font-weight:900;
  font-size:clamp(33px,8.4vw,50px);line-height:1.06;
  letter-spacing:-.035em;margin:0 0 16px;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--yesil)}
.hero p.giris{
  font-size:clamp(17px,4vw,19.5px);color:var(--metin-2);
  margin:0 auto 28px;max-width:30ch;line-height:1.5;
}

.eylem{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--yesil);color:#fff;text-decoration:none;
  font-family:var(--f-baslik);font-weight:700;font-size:18px;letter-spacing:-.01em;
  padding:16px 30px;border-radius:999px;
  box-shadow:0 6px 18px rgba(78,146,38,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.eylem:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(78,146,38,.34)}
.eylem:active{transform:translateY(0)}
.eylem svg{width:22px;height:22px;fill:currentColor;flex:none}

.rozetler{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:20px 0 0;padding:0;list-style:none;
}
.rozetler li{
  font-family:var(--f-baslik);font-weight:600;font-size:13px;
  color:var(--metin-2);background:var(--zemin-2);
  border:1px solid var(--cizgi);border-radius:999px;padding:6px 13px;
}

/* ── Lansman şeridi ──────────────────────────── */
.lansman{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 auto 22px;padding:10px 18px;
  background:var(--yesil-yumusak);
  border:1.5px solid var(--yesil);border-radius:999px;
  font-family:var(--f-baslik);font-weight:600;font-size:14.5px;
  color:var(--metin);line-height:1.35;text-align:left;
  max-width:100%;
}
.lansman b{color:var(--yesil);font-weight:800}
.lansman .im{font-size:17px;flex:none}

/* ── Canlı sayılar ───────────────────────────── */
/* Izgara, esnek kutu yerine: dorduncu kutu tek basina alt satira
   dusuyordu. Dar ekranda 2x2, genisde tek sirada dort. */
.sayilar{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin:26px 0 0;padding:0;list-style:none;
}
@media (max-width:520px){
  .sayilar{grid-template-columns:repeat(2,1fr)}
}
.sayilar li{
  background:var(--zemin-2);border:1px solid var(--cizgi);
  border-radius:14px;padding:12px 20px;min-width:96px;
}
.sayilar b{
  display:block;font-family:var(--f-baslik);font-weight:800;
  font-size:26px;line-height:1.1;letter-spacing:-.02em;
  color:var(--yesil);font-variant-numeric:tabular-nums;
}
.sayilar span{
  display:block;font-family:var(--f-baslik);font-weight:600;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--metin-3);margin-top:3px;
}

/* ── Bölümler ────────────────────────────────── */
section{padding:46px 0}
section + section{border-top:1px solid var(--cizgi)}

h2{
  font-family:var(--f-baslik);font-weight:800;
  font-size:clamp(23px,5.4vw,29px);line-height:1.18;
  letter-spacing:-.025em;margin:0 0 6px;text-wrap:balance;
}
h2 + .alt{color:var(--metin-2);margin:0 0 26px;font-size:16.5px}
h3{
  font-family:var(--f-baslik);font-weight:700;font-size:18px;
  letter-spacing:-.012em;margin:0 0 5px;
}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
strong{font-weight:600}

/* ── Adımlar ─────────────────────────────────── */
.adimlar{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.adimlar li{display:grid;grid-template-columns:44px 1fr;gap:0 16px;align-items:start}
.adimlar .no{
  width:44px;height:44px;border-radius:50%;
  background:var(--yesil-yumusak);color:var(--yesil);
  border:1.5px solid var(--yesil);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-baslik);font-weight:800;font-size:17px;
}
.adimlar p{color:var(--metin-2);font-size:16px;margin:0}

/* ── Örnek soru ──────────────────────────────── */
.soru{
  background:var(--zemin-2);border:1px solid var(--cizgi);
  border-radius:18px;padding:20px;box-shadow:var(--golge);
}
.soru .etiket{
  font-family:var(--f-baslik);font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--yesil);
  margin:0 0 10px;
}
.soru .govde{font-size:16.5px;margin:0 0 16px;line-height:1.55;white-space:pre-line}
.siklar{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.siklar li{
  background:var(--zemin);border:1px solid var(--cizgi);border-radius:11px;
  padding:11px 14px;font-family:var(--f-baslik);font-weight:500;font-size:15.5px;
  display:flex;gap:11px;align-items:baseline;
}
.siklar li b{color:var(--metin-3);font-weight:700;flex:none;min-width:16px}
.siklar li.dogru{
  background:var(--yesil-yumusak);border-color:var(--yesil);
}
.siklar li.dogru b{color:var(--yesil)}
.soru .cozum{
  font-size:15px;color:var(--metin-2);margin:0;
  padding-top:14px;border-top:1px dashed var(--cizgi);
}
.soru .cozum b{color:var(--metin);font-weight:600}

/* Neden diğer şıklar olmaz — çözümün altında, ondan daha sessiz. */
.soru .niye-baslik{
  font-size:13.5px;font-weight:600;color:var(--metin-3);
  margin:14px 0 6px;letter-spacing:.01em;
}
.soru .niye{
  list-style:none;margin:0;padding:0;display:grid;gap:5px;
  font-size:14px;color:var(--metin-3);line-height:1.5;
}
.soru .niye li{display:flex;gap:7px;align-items:baseline}
.soru .niye li b{color:var(--metin-3);font-weight:700;flex:none;min-width:16px}

/* ── Kapsam ──────────────────────────────────── */
.kapsam{display:grid;gap:18px}
.kutu{
  border:1px solid var(--cizgi);border-radius:14px;padding:16px 18px;
  background:var(--zemin-2);
}
.kutu h3{margin-bottom:9px}
.etiketler{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.etiketler li{
  font-family:var(--f-baslik);font-weight:600;font-size:13.5px;
  background:var(--zemin);border:1px solid var(--cizgi);
  border-radius:8px;padding:5px 11px;color:var(--metin-2);
}
.etiketler li.yakinda{color:var(--metin-3);border-style:dashed}

/* ── Öne çıkanlar ────────────────────────────── */
.ozellikler{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ozellikler p{color:var(--metin-2);font-size:16px;margin:0}

/* ── SSS ─────────────────────────────────────── */
details{
  border-bottom:1px solid var(--cizgi);padding:15px 0;
}
details:first-of-type{border-top:1px solid var(--cizgi)}
summary{
  font-family:var(--f-baslik);font-weight:600;font-size:16.5px;
  cursor:pointer;list-style:none;display:flex;gap:12px;align-items:flex-start;
  color:var(--metin);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";margin-left:auto;color:var(--yesil);
  font-weight:700;font-size:21px;line-height:1;flex:none;
}
details[open] summary::after{content:"−"}
details p{margin:11px 0 0;color:var(--metin-2);font-size:16px}

/* ── Kapanış çağrısı ─────────────────────────── */
.kapanis{text-align:center;background:var(--zemin-2);border-top:1px solid var(--cizgi)}
.kapanis h2{margin-bottom:8px}
.kapanis p{color:var(--metin-2);margin-bottom:24px}

/* ── Alt bilgi ───────────────────────────────── */
footer{
  border-top:1px solid var(--cizgi);padding:30px 0 40px;
  font-family:var(--f-baslik);font-size:14.5px;color:var(--metin-3);
}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
footer nav a{color:var(--metin-2);text-decoration:none;font-weight:500}
footer nav a:hover{color:var(--yesil);text-decoration:underline}
footer .telif{margin:0}

/* ── Sınav × ders sayfaları ──────────────────── */
.ders-sayfa{padding:30px 0 20px}
.ders-sayfa h1{font-size:clamp(28px,6.6vw,40px);text-align:left;margin-bottom:12px}
.ders-sayfa h2{margin:40px 0 10px}
.ders-sayfa .giris{font-size:17.5px;color:var(--metin-2);margin-bottom:24px;line-height:1.6}
.ders-sayfa .sayilar{justify-items:stretch;margin:0 0 26px;
  grid-template-columns:repeat(3,1fr);text-align:center}
.ders-sayfa .eylem{margin-bottom:8px}
.ders-sayfa .soru{margin:0 0 18px}
.ders-sayfa .soru img{border-radius:10px;margin:0 0 14px;border:1px solid var(--cizgi)}
.ders-sayfa details{border:none;padding:12px 0 0}
.ders-sayfa details:first-of-type{border-top:none}
.ders-sayfa summary{font-size:15px;color:var(--yesil)}
.ders-sayfa summary::after{display:none}
.ders-sayfa .cozum{margin-top:10px;padding-top:0;border-top:none}
.ders-sayfa .bitis{margin:34px 0 0;text-align:center}
/* Ders sayfasında doğru şık, çözüm açılana kadar işaretsiz duruyor.
   Temel durum nötr; yeşil yalnızca details[open] varken ekleniyor.
   :has() çalışmayan bir tarayıcıda vurgu hiç görünmez — cevabın
   sızmasındansa hiç vurgulanmaması yeğlenir. */
.ders-sayfa .siklar li.dogru{background:var(--zemin);border-color:var(--cizgi)}
.ders-sayfa .siklar li.dogru b{color:var(--metin-3)}
.ders-sayfa .soru:has(details[open]) .siklar li.dogru{
  background:var(--yesil-yumusak);border-color:var(--yesil);
}
.ders-sayfa .soru:has(details[open]) .siklar li.dogru b{color:var(--yesil)}
.izlek{
  font-family:var(--f-baslik);font-size:13.5px;color:var(--metin-3);
  margin-bottom:14px;letter-spacing:.01em;
}
.izlek a{color:var(--metin-2);text-decoration:none}
.izlek a:hover{color:var(--yesil)}
.etiketler li a{color:var(--metin-2);text-decoration:none}
.etiketler li:has(a):hover{border-color:var(--yesil)}
.etiketler li a:hover{color:var(--yesil)}

/* ── Metin sayfaları ─────────────────────────── */
.belge{padding:36px 0 20px}
.belge h1{font-size:clamp(27px,6.4vw,36px);text-align:left;margin-bottom:8px}
.belge .tarih{
  font-family:var(--f-baslik);font-size:13.5px;color:var(--metin-3);
  margin:0 0 30px;letter-spacing:.02em;
}
.belge h2{font-size:20px;margin:32px 0 8px}
.belge ul{margin:0 0 15px;padding-left:22px}
.belge li{margin-bottom:6px}
.belge .not{
  background:var(--zemin-2);border:1px solid var(--cizgi);
  border-radius:12px;padding:15px 17px;font-size:15.5px;color:var(--metin-2);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Kapsam kutusundaki açıklama satırı: etiketlerin altında, onlardan
   daha sessiz. */
.kutu-not{
  font-size:13.5px;line-height:1.5;color:var(--metin-3);
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--cizgi);
}
.kutu-not strong{color:var(--metin-2);font-weight:600}

/* QR yalnızca geniş ekranda: telefondaki ziyaretçi zaten butona
   basıyor, QR'ı ona göstermek yer kaplamaktan başka işe yaramıyor. */
.qr{display:none}
/* Ölçüt yalnızca genişlik değil FARE varlığı: dokunmatik bir
   cihazda QR gereksiz, kullanıcı butona basıyor. */
@media (min-width:760px) and (pointer:fine){
  /* Renkler değişkenden DEĞİL sabit: kart koyu bölümün içinde duruyor
     ve orada --zemin koyuya dönüyor. QR'ın okunabilmesi için beyaz
     sessiz alan şart, dolayısıyla kart kendi renklerini taşıyor. */
  .qr{display:flex;align-items:center;gap:22px;justify-content:center;
      margin:34px auto 0;padding:20px 26px;max-width:520px;
      border:1px solid #DCE4D2;border-radius:16px;background:#fff}
  .qr img{width:132px;height:132px;flex:0 0 auto}
  .qr p{margin:0;text-align:left;font-size:15px;line-height:1.5;
        color:#4A5C50}
  .qr p b{color:#0B2A1E}
}

/* Hızlı seviye tespiti CTA'sı — ders sayfalarında ana düğmenin altında. */
.tespit{
  margin:26px 0 30px;padding:22px 24px;
  background:var(--yesil-yumusak);border:1px solid var(--cizgi);
  border-radius:18px;
}
.tespit h2{margin:0 0 8px;font-size:20px}
.tespit p{margin:0 0 16px;color:var(--metin-2);font-size:15px;line-height:1.6}
.tespit .eylem{font-size:17px;padding:14px 26px}
.tespit-alt{margin:14px 0 0 !important;font-size:14px}
.tespit-alt a{color:var(--yesil);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   TASARIM KATMANI — açılış sayfaları
   ═══════════════════════════════════════════════════════════════

   Site tek bir 680 piksellik sütundu; her sayfa aynı dar şeritte
   akıyordu ve bu yüzden "klasik" görünüyordu. Bu katman okuma
   genişliğini bozmadan AÇILIŞ sayfalarına tam genişlikte şerit
   düzeni getiriyor.

   YÖN. Sınav kitapçığı + ölçüm paneli. Ürünün kendisi zaten ÖSYM
   dizgisinde siyah-beyaz basılıyor; sayfa da onu taklit ediyor:
   beyaz "kâğıt" kartlar, ince çizgiler, süs yok. Ayırt edici hamle
   koyu MÜREKKEP şeridi — ölçümlerin durduğu yer. Rakipler müşteri
   logosu dizerken bizim gösterebileceğimiz şey ölçüm.

   .kap (680px) okuma sayfalarında kalıyor; .genis (1120px) yalnızca
   açılış düzeni için.
   ─────────────────────────────────────────────────────────────── */

:root{
  --kagit:#FFFFFF;
  --murekkep:#0B2A1E;
  --murekkep-2:#123A2A;
  --f-olcum:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --yuvarlak:18px;
}
@media (prefers-color-scheme: dark){
  :root{ --kagit:#141F18; --murekkep:#050B08; --murekkep-2:#0E1A13 }
}

.genis{max-width:1120px;margin:0 auto;padding:0 22px}

/* ── Tam genişlik şerit ──────────────────────────────────────── */
.serit{padding:64px 0}
.serit-kagit{background:var(--kagit);border-block:1px solid var(--cizgi)}
.serit-koyu{
  background:linear-gradient(160deg,var(--murekkep) 0%,var(--murekkep-2) 100%);
  color:#EAF2E4;
}
.serit-koyu h2,.serit-koyu h3{color:#fff}
.serit-koyu p{color:#B9CBB4}

/* ── Kahraman ────────────────────────────────────────────────── */
.kahraman{padding:56px 0 40px}
.kahraman .ic{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){
  .kahraman .ic{grid-template-columns:1fr;gap:34px}
  .kahraman{padding:36px 0 28px}
}
.kahraman h1{
  font-size:clamp(34px,5.4vw,55px);line-height:1.03;letter-spacing:-.035em;
  font-weight:900;margin:0 0 18px;text-wrap:balance;
}
.kahraman h1 em{font-style:normal;color:var(--yesil)}
.kahraman .giris{font-size:clamp(16.5px,2vw,19px);line-height:1.62;color:var(--metin-2);
  margin:0 0 26px;max-width:34em}
.kahraman .dugmeler{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* İkincil düğme — birincil eylemin yanında sessiz durmalı. */
.eylem-2{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-baslik);font-weight:700;font-size:16px;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  color:var(--metin);background:transparent;border:1.5px solid var(--cizgi);
  transition:border-color .15s,transform .15s;
}
.eylem-2:hover{border-color:var(--yesil);color:var(--yesil);transform:translateY(-1px)}

/* Soru görseli: kitapçık sayfası gibi, hafif eğik. */
.kagit-cerceve{position:relative}
.kagit-cerceve img{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--cizgi);background:#fff;
  box-shadow:0 2px 6px rgba(11,42,30,.06),0 26px 60px -28px rgba(11,42,30,.34);
  transform:rotate(-1.4deg);
}
.kagit-cerceve::after{
  content:"";position:absolute;inset:14px -10px -12px 12px;z-index:-1;
  border-radius:14px;border:1px solid var(--cizgi);background:var(--zemin-2);
  transform:rotate(1.6deg);
}
.kagit-etiket{
  position:absolute;left:-6px;bottom:-14px;
  font-family:var(--f-olcum);font-size:11.5px;letter-spacing:.04em;
  background:var(--yesil);color:#fff;padding:6px 11px;border-radius:7px;
  box-shadow:0 6px 18px -6px rgba(78,146,38,.6);
}
@media (prefers-reduced-motion:reduce){
  .kagit-cerceve img,.kagit-cerceve::after{transform:none}
}

/* ── Ölçüm şeridi ────────────────────────────────────────────── */
.olcum-serit{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:820px){.olcum-serit{grid-template-columns:repeat(2,1fr);gap:26px 0}}
.olcum-serit > div{padding:0 26px;border-left:1px solid rgba(255,255,255,.13)}
.olcum-serit > div:first-child{border-left:none;padding-left:0}
@media (max-width:820px){
  .olcum-serit > div:nth-child(odd){border-left:none;padding-left:0}
}
.olcum-serit b{
  display:block;font-family:var(--f-baslik);font-weight:900;
  font-size:clamp(30px,4.4vw,42px);line-height:1;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums;
}
.olcum-serit span{
  display:block;font-family:var(--f-olcum);font-size:12px;line-height:1.45;
  letter-spacing:.02em;color:#93AB8D;margin-top:9px;
}
.serit-koyu .basligi{
  font-family:var(--f-olcum);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yesil-ac);margin:0 0 26px;
}

/* ── Özellik blokları ────────────────────────────────────────── */
.blok{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  padding:56px 0}
.blok + .blok{border-top:1px solid var(--cizgi)}
.blok.ters .gorsel{order:-1}
@media (max-width:860px){
  .blok{grid-template-columns:1fr;gap:28px;padding:38px 0}
  .blok.ters .gorsel{order:0}
}
.blok h2{font-size:clamp(24px,3.4vw,33px);letter-spacing:-.025em;margin:0 0 14px}
.blok p{font-size:16.5px;line-height:1.65;color:var(--metin-2);margin:0 0 14px}
.blok .rozet{
  display:inline-block;font-family:var(--f-olcum);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--yesil);
  border:1px solid var(--cizgi);border-radius:6px;padding:5px 10px;margin:0 0 14px;
}
.blok .gorsel img{
  display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--cizgi);background:#fff;
  box-shadow:0 2px 6px rgba(11,42,30,.05),0 20px 48px -26px rgba(11,42,30,.3);
}
.blok .baglar{font-family:var(--f-baslik);font-weight:600;font-size:15px;margin:0}

/* ── Kart ızgarası ───────────────────────────────────────────── */
.kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.kartlar{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.kartlar{grid-template-columns:1fr}}
.kart{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
  padding:24px 22px;display:flex;flex-direction:column;gap:9px;
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
a.kart{text-decoration:none;color:inherit}
a.kart:hover{transform:translateY(-3px);border-color:var(--yesil);
  box-shadow:0 16px 38px -22px rgba(11,42,30,.42)}
.kart .no{
  font-family:var(--f-olcum);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--metin-3);
}
.kart h3{font-family:var(--f-baslik);font-weight:800;font-size:19px;
  line-height:1.28;letter-spacing:-.015em;margin:0}
.kart p{font-size:15.5px;line-height:1.58;color:var(--metin-2);margin:0}
.kart .oku{margin-top:auto;font-family:var(--f-baslik);font-weight:700;
  font-size:14.5px;color:var(--yesil)}

/* ── Ders şeridi ─────────────────────────────────────────────── */
.dersler{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:860px){.dersler{grid-template-columns:repeat(2,1fr)}}
.ders-kutu{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:12px;
  padding:14px 16px;text-decoration:none;color:inherit;
  font-family:var(--f-baslik);font-weight:600;font-size:15.5px;
  transition:border-color .15s,transform .15s;
}
.ders-kutu:hover{border-color:var(--yesil);transform:translateY(-2px)}
.ders-kutu b{font-family:var(--f-olcum);font-weight:600;font-size:13.5px;
  color:var(--yesil);font-variant-numeric:tabular-nums}

/* ── Bölüm başlıkları (açılış) ───────────────────────────────── */
.bolum-bas{max-width:34em;margin:0 0 34px}
.bolum-bas .ustluk{
  font-family:var(--f-olcum);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--yesil);margin:0 0 10px;
}
.bolum-bas h2{font-size:clamp(25px,3.6vw,36px);letter-spacing:-.028em;
  line-height:1.12;margin:0 0 10px}
.bolum-bas p{font-size:16.5px;line-height:1.6;color:var(--metin-2);margin:0}

/* ── Kapanış çağrısı ─────────────────────────────────────────── */
.kapanis-cta{text-align:center;padding:8px 0 4px}
.kapanis-cta h2{font-size:clamp(26px,4vw,40px);letter-spacing:-.03em;
  margin:0 0 12px;color:#fff}
.kapanis-cta p{max-width:30em;margin:0 auto 24px}
.serit-koyu .eylem{background:var(--yesil-parlak);color:#08140E}
.serit-koyu .eylem:hover{box-shadow:0 10px 28px rgba(109,179,47,.4)}
.serit-koyu .eylem-2{color:#EAF2E4;border-color:rgba(255,255,255,.28)}
.serit-koyu .eylem-2:hover{border-color:#fff;color:#fff}

/* ═══════════════════════════════════════════════════════════════
   ÜST ÇUBUK · MEGAMENÜ · ALTLIK
   ═══════════════════════════════════════════════════════════════
   Menü <details> ile kuruldu, :hover ile değil: hover menü
   dokunmatikte açılmıyor ve klavyeyle gezilemiyor. <details>
   ikisinde de çalışıyor ve JavaScript kapalıyken bile açılıyor.
   ─────────────────────────────────────────────────────────────── */

.ust{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--zemin) 88%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.ust-ic{display:flex;align-items:center;gap:8px;height:66px}
.ust .marka{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--f-baslik);font-weight:900;font-size:19px;
  letter-spacing:-.02em;color:var(--metin);flex:none;
}
.ust .marka img{width:34px;height:34px;border-radius:8px}

.ana-menu{display:flex;align-items:center;gap:2px;margin-left:18px;flex:1}
@media (max-width:1000px){.ana-menu{display:none}}
.ana-menu > a,.menu-oge > summary{
  font-family:var(--f-baslik);font-weight:600;font-size:15.5px;
  color:var(--metin-2);text-decoration:none;padding:9px 13px;border-radius:9px;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  transition:background .14s,color .14s;
}
.ana-menu > a:hover,.menu-oge > summary:hover{background:var(--zemin-2);color:var(--metin)}
.menu-oge > summary::-webkit-details-marker{display:none}
.menu-oge > summary::after{
  content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  opacity:.55;transition:transform .16s;
}
.menu-oge[open] > summary{background:var(--zemin-2);color:var(--metin)}
.menu-oge[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}

.menu-oge{position:relative}
.mega{
  position:absolute;left:0;top:calc(100% + 12px);z-index:70;
  width:min(78vw,860px);
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:20px;
  box-shadow:0 2px 8px rgba(11,42,30,.06),0 30px 70px -30px rgba(11,42,30,.4);
  overflow:hidden;
}
.mega-dar{width:min(70vw,620px)}
.mega-ic{padding:20px}
.mega-ders{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mega-sinav{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mega-oge{
  display:flex;align-items:center;gap:13px;padding:11px;border-radius:13px;
  text-decoration:none;color:inherit;transition:background .14s;
}
.mega-oge:hover{background:var(--zemin-2)}
.mega-oge img{width:42px;height:42px;border-radius:10px;flex:none}
.mega-oge span{display:flex;flex-direction:column;gap:2px;font-size:13.5px;
  color:var(--metin-3);line-height:1.35}
.mega-oge b{font-family:var(--f-baslik);font-weight:700;font-size:15px;
  color:var(--metin)}
.mega-alt{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 20px;background:var(--zemin-2);border-top:1px solid var(--cizgi);
  font-size:13.5px;color:var(--metin-3);
}
.mega-alt a{font-family:var(--f-baslik);font-weight:700;color:var(--yesil);
  text-decoration:none;white-space:nowrap}

.mega-dar .mega-ic{display:grid;grid-template-columns:1fr 1.15fr;gap:20px}
.mega-tanit .ustluk{
  font-family:var(--f-olcum);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yesil);margin:0 0 8px;
}
.mega-tanit p{font-size:14px;line-height:1.55;color:var(--metin-2);margin:0 0 14px}
.mega-liste{display:grid;gap:2px}
.mega-satir{
  display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:11px;
  text-decoration:none;transition:background .14s;
}
.mega-satir:hover{background:var(--zemin-2)}
.mega-satir b{font-family:var(--f-baslik);font-weight:700;font-size:14.5px;
  color:var(--metin)}
.mega-satir span{font-size:12.5px;color:var(--metin-3);line-height:1.4}

.ust-cta{
  margin-left:auto;flex:none;
  font-family:var(--f-baslik);font-weight:700;font-size:15px;
  background:var(--yesil);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:999px;
  transition:transform .15s,box-shadow .15s;
}
.ust-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(78,146,38,.55)}
@media (max-width:1000px){.ust-cta{display:none}}

/* ── Mobil menü ──────────────────────────────────────────────── */
.mobil-ac{display:none;margin-left:auto;position:relative}
@media (max-width:1000px){.mobil-ac{display:block}}
.mobil-ac > summary{
  list-style:none;cursor:pointer;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--cizgi);display:grid;align-content:center;
  justify-items:center;gap:4.5px;background:var(--kagit);
}
.mobil-ac > summary::-webkit-details-marker{display:none}
.mobil-ac > summary span{display:block;width:17px;height:2px;background:var(--metin);
  border-radius:2px}
.mobil-menu{
  position:absolute;right:0;top:calc(100% + 10px);width:min(88vw,320px);
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(11,42,30,.45);
  padding:12px;display:grid;gap:2px;max-height:76vh;overflow-y:auto;z-index:70;
}
.mobil-menu a{
  font-family:var(--f-baslik);font-weight:600;font-size:15.5px;
  color:var(--metin);text-decoration:none;padding:11px 13px;border-radius:11px;
}
.mobil-menu a:hover{background:var(--zemin-2)}
.mobil-menu a.eylem{justify-content:center;margin-top:8px;color:#fff}
.mobil-bas{
  font-family:var(--f-olcum);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--metin-3);margin:12px 0 2px;padding:0 13px;
}

/* ── Altlık ──────────────────────────────────────────────────── */
.alt{
  margin-top:0;background:var(--zemin-2);border-top:1px solid var(--cizgi);
  padding:52px 0 26px;
}
.alt-ic{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){.alt-ic{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.alt-ic{grid-template-columns:1fr}}
.alt .marka{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--f-baslik);font-weight:900;font-size:19px;color:var(--metin);
  margin-bottom:12px;
}
.alt .marka img{width:34px;height:34px;border-radius:8px}
.alt-marka p{font-size:14.5px;line-height:1.6;color:var(--metin-2);margin:0 0 14px;
  max-width:34em}
.alt-sosyal{display:flex;flex-wrap:wrap;gap:8px}
.alt-sosyal a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-baslik);font-weight:600;font-size:13.5px;
  color:var(--metin-2);text-decoration:none;
  border:1px solid var(--cizgi);border-radius:999px;padding:7px 15px 7px 12px;
  background:var(--kagit);transition:border-color .14s,color .14s,transform .14s;
}
.alt-sosyal svg{width:17px;height:17px;fill:currentColor;flex:none}
.alt-sosyal a:hover{transform:translateY(-1px)}
.alt-sosyal a:hover{border-color:var(--yesil);color:var(--yesil)}
.alt-bas{
  font-family:var(--f-olcum);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--metin-3);margin:0 0 12px;
}
.alt ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alt ul a{font-size:14.5px;color:var(--metin-2);text-decoration:none}
.alt ul a:hover{color:var(--yesil)}
.alt-son{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:38px;padding-top:20px;border-top:1px solid var(--cizgi);
}
.alt-son p{margin:0;font-size:13px;color:var(--metin-3)}

/* ── Görsel yuvası (dosya gelene kadar) ──────────────────────── */
.yuva{
  display:grid;place-content:center;gap:6px;text-align:center;
  background:repeating-linear-gradient(45deg,var(--zemin-2),var(--zemin-2) 10px,
    var(--zemin-3) 10px,var(--zemin-3) 20px);
  border:1.5px dashed var(--cizgi);border-radius:14px;width:100%;
  color:var(--metin-3);padding:20px;
}
.yuva-ad{font-family:var(--f-baslik);font-weight:700;font-size:15px;color:var(--metin-2)}
.yuva-olcu{font-family:var(--f-olcum);font-size:12px;letter-spacing:.02em}

/* ═══════════════════════════════════════════════════════════════
   AÇILIŞ EK BİLEŞENLERİ
   ═══════════════════════════════════════════════════════════════ */

.ustluk-hero{
  font-family:var(--f-olcum);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yesil);margin:0 0 14px;
}
.hero-not{
  font-family:var(--f-olcum);font-size:13px;color:var(--metin-3);
  margin:18px 0 0;
}
.hero-gorsel img,.hero-gorsel .yuva{
  border-radius:20px;box-shadow:0 3px 10px rgba(11,42,30,.06),
  0 34px 74px -34px rgba(11,42,30,.42);border:1px solid var(--cizgi);
}
.hero-gorsel img{display:block;width:100%;height:auto}

.dugmeler.orta{justify-content:center}
.baglar.orta{text-align:center;margin-top:24px}

/* ── Deneme widget'ı (JavaScript'siz) ────────────────────────────
   Şık seçimi radio ile; :checked ile doğru/yanlış beliriyor ve
   çözüm açılıyor. Betik gerekmiyor, dolayısıyla her yerde çalışıyor. */
.ic-iki{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
@media (max-width:900px){.ic-iki{grid-template-columns:1fr;gap:26px}}

.deneme{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:20px;
  padding:26px;box-shadow:0 2px 8px rgba(11,42,30,.05),
  0 26px 60px -34px rgba(11,42,30,.36);
}
.deneme .etiket{
  font-family:var(--f-olcum);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yesil);margin:0 0 12px;
}
.deneme-govde{font-size:17px;line-height:1.55;margin:0 0 18px;font-weight:500}
.deneme-siklar{display:grid;gap:9px;margin:0 0 4px}
.deneme-siklar label{
  display:flex;align-items:baseline;gap:11px;cursor:pointer;
  background:var(--zemin);border:1.5px solid var(--cizgi);border-radius:13px;
  padding:12px 15px;font-family:var(--f-baslik);font-weight:500;font-size:15.5px;
  transition:border-color .14s,background .14s;
}
.deneme-siklar label:hover{border-color:var(--yesil-ac)}
.deneme-siklar input{position:absolute;opacity:0;width:0;height:0}
.deneme-siklar label b{color:var(--metin-3);font-weight:700;flex:none;min-width:17px}
.deneme-siklar label span{flex:1}
/* Seçilen şıkkın sonucu */
.deneme-siklar label.dogru:has(input:checked){
  background:var(--yesil-yumusak);border-color:var(--yesil);
}
.deneme-siklar label.dogru:has(input:checked)::after{
  content:"doğru";font-family:var(--f-olcum);font-size:11.5px;color:var(--yesil);
}
.deneme-siklar label.yanlis:has(input:checked){
  background:color-mix(in srgb,var(--kalem) 12%,transparent);border-color:var(--kalem);
}
.deneme-siklar label.yanlis:has(input:checked)::after{
  content:"yanlış";font-family:var(--f-olcum);font-size:11.5px;color:var(--kalem);
}
/* Bir şık seçilince doğru şık da işaretlensin */
.deneme-siklar:has(input:checked) label.dogru{border-color:var(--yesil)}
.deneme-cozum{
  font-size:15px;line-height:1.6;color:var(--metin-2);margin:16px 0 0;
  padding-top:15px;border-top:1px dashed var(--cizgi);
  max-height:0;overflow:hidden;opacity:0;padding-top:0;border-top-color:transparent;
  transition:max-height .3s,opacity .25s,padding-top .3s;
}
.deneme:has(input:checked) .deneme-cozum{
  max-height:22em;opacity:1;padding-top:15px;border-top-color:var(--cizgi);
}
.deneme-cozum b{color:var(--metin);font-weight:600}
.deneme-not{
  font-family:var(--f-olcum);font-size:12.5px;line-height:1.5;
  color:var(--metin-3);margin:14px 0 0;
}
/* :has() desteklemeyen tarayıcıda çözüm hep açık kalsın —
   gizli kalmasındansa görünmesi iyidir. */
@supports not selector(:has(*)){
  .deneme-cozum{max-height:none;opacity:1;padding-top:15px;
    border-top-color:var(--cizgi)}
}

/* ── Kart görseli ────────────────────────────────────────────── */
.kart-gorsel{margin:-6px 0 12px}
/* display:block YAZMA — .yuva grid ile diziliyor ve blok yapınca
   yer tutucunun iki satırı yan yana geliyordu. */
.kart-gorsel img{border-radius:12px;width:100%;height:auto;display:block}
.kart-gorsel .yuva{border-radius:12px;width:100%}
.kart-sinav img{width:52px;height:52px;border-radius:12px;margin-bottom:4px}

/* ── SSS ─────────────────────────────────────────────────────── */
.sss{max-width:46em;display:grid;gap:8px}
.sss details{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:14px;
  padding:2px 18px;
}
.sss summary{
  font-family:var(--f-baslik);font-weight:700;font-size:16.5px;
  padding:15px 0;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:14px;color:var(--metin);
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:"+";font-family:var(--f-olcum);font-size:20px;color:var(--yesil);
  flex:none;line-height:1;
}
.sss details[open] summary::after{content:"–"}
.sss details p{margin:0 0 16px;font-size:15.5px;line-height:1.62;color:var(--metin-2)}

/* ═══════════════════════════════════════════════════════════════
   HERO SAHNESİ — sohbet dört adımda ilerliyor
   ═══════════════════════════════════════════════════════════════
   Kaynak 2×2 ızgaradaki dört kare ayrı ayrı çizilmişti: telefonun
   açısı, boyu ve maskotun duruşu her karede farklıydı (ölçüldü,
   maskot bölgesinde kareler arası fark ekranın kendi farkından
   büyüktü). Oldukları gibi oynatılsalardı mesaj akmaz, bütün sahne
   zıplardı.

   Bu yüzden sahne 1. kareden SABİTLENDİ. Değişen tek şey telefonun
   ekranı: 2, 3 ve 4. karelerin ekranları 1. karenin ekran ölçüsüne
   oturtulup şeffaf katman olarak kesildi. Telefon, maskot, duvar ve
   kitaplar hiç kımıldamıyor.

   ÜÇ ŞEYE DİKKAT:

   1. PLAKA KIRPILAMAZ. Katmanların yeri plakaya oran olarak veriliyor
      (sol %5.336, üst %21.2598, en %57.9051, boy %62.9921). Plaka
      kırpılır ya da esnerse oranlar kayar, katmanlar ekranın dışına
      düşer. Kutu bu yüzden aspect-ratio ile 506/762'ye sabit.

   2. SOL TARAF ARTIK DÜZ ZEMİN. Plaka portre; hero'nun solunu görsel
      doldurmuyor. Zemin, plakanın kendi duvar renginden örneklenen
      dikey geçişle veriliyor (#00120E → #05251D → #02271D), üstüne
      fotoğraftaki nokta dokusunu andıran çok soluk bir ızgara
      konuyor. Renk birebir olduğu için plakanın sol kenarındaki dikiş
      görünmüyor.

   3. HAREKET İSTEMEYENE HAREKET YOK. prefers-reduced-motion açıksa
      animasyon durup son kare (sohbetin tamamlanmış hâli) gösteriliyor
      — en çok bilgi veren durum o.
   ─────────────────────────────────────────────────────────────── */

/* Taban stilde `section{padding:46px 0}` var. Hero kendi boşluğunu
   `.ic`in padding-block'uyla veriyor; o 46px üstte fazladan iniş,
   altta plakadan sonra 45 piksellik boş koyu şerit bırakıyordu
   (ölçüldü: plaka 1086'da bitiyor, bölüm 1131'de). Ayrıca `.ic`in
   100svh hesabına eklenip hero'yu ekrandan 26px taşırıyordu. */
.kahraman-bg{
  position:relative;
  padding:0;
  background-color:#04231A;
  background-image:
    radial-gradient(1100px 620px at 72% 46%, rgba(255,255,255,.055), transparent 70%),
    linear-gradient(180deg, #00120E 0%, #05251D 42%, #04231A 74%, #02271D 100%);
  color:#EAF2E4;
  overflow:hidden;
}
/* Fotoğraftaki soluk nokta ızgarası; zemin ile plaka aynı dünyada dursun. */
.kahraman-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(190,225,180,.075) 1.1px, transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(105deg, transparent 8%, #000 46%, #000 72%, transparent 92%);
          mask-image:linear-gradient(105deg, transparent 8%, #000 46%, #000 72%, transparent 92%);
}

.kahraman-bg > .genis{position:relative;z-index:2}

/* padding KISAYOLU KULLANILMIYOR: `.kahraman-bg .ic` (0,2,0) `.genis`i
   (0,1,0) ezdiği için `padding:64px 0` yan boşluğu da sıfırlıyordu.
   Geniş ekranda max-width ortaladığı için fark edilmiyor, dar ekranda
   metin doğrudan ekran kenarına yapışıyordu. */
.kahraman-bg .ic{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:48px;
  padding-block:64px;
}
.kahraman-bg .ic > div:first-child{max-width:34em}

.kahraman-bg h1{
  font-size:clamp(34px,5.2vw,56px);line-height:1.02;letter-spacing:-.035em;
  font-weight:900;margin:0 0 18px;color:#fff;text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.kahraman-bg h1 em{font-style:normal;color:var(--yesil-ac)}
.kahraman-bg .giris{
  font-size:clamp(16.5px,2vw,19px);line-height:1.62;color:#C6D6C0;
  margin:0 0 26px;max-width:30em;
}
.kahraman-bg .ustluk-hero{color:var(--yesil-ac)}
.kahraman-bg .eylem{background:var(--yesil-parlak);color:#07130D}
.kahraman-bg .eylem:hover{box-shadow:0 12px 30px rgba(109,179,47,.45)}
.kahraman-bg .eylem-2{color:#EAF2E4;border-color:rgba(255,255,255,.32)}
.kahraman-bg .eylem-2:hover{border-color:#fff;color:#fff}

/* ── Sahne ─────────────────────────────────────────────────────── */
/* Izgaranın sağ hücresinde duruyor; boyu metin bloğuyla aynı düzende
   kalsın diye sınırlı. Plaka 2:3 portre olduğundan genişlik yükseklikten
   türüyor (×0.664); ölçüyü yükseklikten vermek sütunu şişirmiyor.
   Alt sınır ekranın okunabilir kaldığı yer, üst sınır metin bloğunun
   birkaç kat üstüne çıkmadığı yer. */
.hero-sahne{
  position:relative;z-index:1;
  height:clamp(400px, 46vw, 600px);
  aspect-ratio:506/762;
  /* Metin sütunu 34em'de duruyor, kalan boşluğu 1fr yutuyordu ve plaka
     ortada asılı kalıyordu; kabın sağ kenarına yaslanıyor. */
  justify-self:end;
  pointer-events:none;
  /* Plakanın kendi duvarı bölümün zeminine yakın ama aynı değil; kenarı
     dikey bir dikiş gibi okunuyordu. Kenarı gizlemeye çalışmak yerine
     kutu belirgin yapılıyor — köşe yuvarlaması, ince çizgi ve gölgeyle
     kasıtlı bir kart oluyor, dikiş olmaktan çıkıyor. */
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  outline:1px solid rgba(255,255,255,.07);
  outline-offset:-1px;
}
/* Ölçüler yalnızca PLAKAYA veriliyor. `.hero-sahne > picture` diye
   ortak bir kural yazılmıştı; seçici ağırlığı (0,1,1) `.hero-ekran`ı
   (0,1,0) eziyor ve katmanlar ekran kutusu yerine bütün sahneyi
   kaplıyordu — animasyon çalışıyor ama hiçbir şey değişmiyor gibi
   görünüyordu. */
.hero-sahne > picture{display:block}
.hero-sahne > picture:first-child{position:absolute;inset:0}
.hero-sahne img{display:block;width:100%;height:100%}

.hero-ekran{
  position:absolute;
  left:5.336%;top:21.2598%;width:57.9051%;height:62.9921%;
  opacity:0;
}

/* Tek tur 11 sn. Her aşama ~2.6 sn duruyor, geçiş 0.35 sn: kaynak
   kareler arasında %1-4'lük ölçek farkı var, sert kesmede o fark
   seğirme gibi görünüyordu; kısa geçiş örtüyor. */
.hero-ekran{animation:hero-asama 11s linear infinite}
.hero-ekran.e2{animation-name:hero-e2}
.hero-ekran.e3{animation-name:hero-e3}
.hero-ekran.e4{animation-name:hero-e4}

@keyframes hero-e2{
  0%,23.6%{opacity:0} 26.8%,94.5%{opacity:1} 100%{opacity:0}
}
@keyframes hero-e3{
  0%,47.3%{opacity:0} 50.5%,94.5%{opacity:1} 100%{opacity:0}
}
@keyframes hero-e4{
  0%,70.9%{opacity:0} 74.1%,94.5%{opacity:1} 100%{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .hero-ekran{animation:none}
  .hero-ekran.e4{opacity:1}
}

/* ── Dar ekran ─────────────────────────────────────────────────── */
/* 900px altında plaka metnin yanına sığmıyor; akışa girip metnin
   altına geçiyor. Oranlar plakaya bağlı olduğu için katmanlar burada
   da yerinde kalıyor. */
@media (max-width:900px){
  .kahraman-bg .ic{
    grid-template-columns:1fr;gap:0;padding-block:38px 0;
  }
  /* Sahne artık `.genis`in içinde ve `.genis` iki yana 22'şer piksel
     boşluk veriyor. Tam genişliğe çıkmak için o boşluk eksi payla
     geri alınıyor; kutu içinde kalsaydı plakanın dört kenarı zeminin
     üstünde dikdörtgen olarak okunurdu (rengi yakın ama aynı değil).
     Üst kenar geçişle zemine karışıyor, alt kenar bölümün sonuyla
     çakıştığı için orada kenar görünmüyor. */
  /* Dar ekranda kart değil, tam genişlik: köşe, çizgi ve gölge kalkıyor
     — kenara dayanan bir kartın yuvarlak köşesi kırpılmış görünür. */
  .hero-sahne{
    height:auto;width:auto;aspect-ratio:auto;
    margin:26px -22px -1px;
    border-radius:0;box-shadow:none;outline:0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%);
            mask-image:linear-gradient(180deg, transparent 0, #000 9%);
  }
  .hero-sahne > picture:first-child{position:static}
  .kahraman-bg .ic > div:first-child{max-width:none}
}

/* Dar ekranda iki düğme yan yana sığmıyor; sığdırmak yerine alt alta
   geçsinler. */
@media (max-width:420px){
  .kahraman-bg .dugmeler{flex-wrap:wrap}
}

/* Ders kutusu etiketi ve sayıyı yan yana koyuyor. 390px'te iki sütunda
   sütun ~163px kalıyor, "KPSS Matematik" satır kırıyor ve sayı kırılan
   etiketin üstüne biniyor. Bu genişlikte tek sütun. */
@media (max-width:560px){
  .dersler{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   KOYU ŞERİTTE BÖLÜM BAŞLIĞI VE İZLEK
   ═══════════════════════════════════════════════════════════════
   `.serit-koyu p` koyu zemin için açık renk veriyor ama `.bolum-bas p`
   stil dosyasında DAHA SONRA geliyor ve iki kuralın ağırlığı eşit
   (0,1,1) — sonraki kazanıyor, metin koyu zeminde koyu kalıyordu.
   Aynı şey üstlük ve izlek için de geçerli: ikisi de açık zemine göre
   ayarlı. Koyu şeride özel, daha ağır kurallarla düzeltiliyor.

   Deneme sayfasına kadar koyu şeritte bölüm başlığı kullanılmamıştı;
   çakışma bu yüzden bugüne kadar görünmedi.
   ─────────────────────────────────────────────────────────────── */
.serit-koyu .bolum-bas p{color:#B9CBB4}
.serit-koyu .bolum-bas .ustluk{color:var(--yesil-ac)}
.serit-koyu .bolum-bas h1,.serit-koyu h1{color:#fff}
.serit-koyu .izlek{color:#8FA88A}
.serit-koyu .izlek a{color:#B9CBB4}
.serit-koyu .izlek a:hover{color:#fff}
.serit-koyu .kart{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);
}
.serit-koyu .baglar a{color:var(--yesil-ac)}

/* ═══════════════════════════════════════════════════════════════
   VERİ TABLOSU
   ═══════════════════════════════════════════════════════════════
   Sitede bugüne kadar hiç tablo yoktu. Deneme sayfasındaki ders
   dağılımı liste olarak da yazılabilirdi ama üç sütunlu bir veri;
   tabloda okunuyor, listede okunmuyor.

   Dar ekranda yatay kaydırma kabın içinde kalıyor: sayfanın gövdesi
   asla yana kaymamalı.
   ─────────────────────────────────────────────────────────────── */
.dagilim-tablo{
  width:100%; border-collapse:collapse; margin:0 auto; max-width:660px;
  font-size:15.5px;
}
.dagilim-tablo th,.dagilim-tablo td{
  padding:11px 14px; border-bottom:1px solid var(--cizgi); text-align:left;
}
.dagilim-tablo th{
  font-family:var(--f-baslik); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--metin-2);
  border-bottom:2px solid var(--metin-3);
}
/* Sayı sütunu sağa yaslı ve eşit genişlikli rakamlarla: sütun hâlinde
   okunacaksa basamaklar alt alta gelmeli. */
.dagilim-tablo td:last-child,.dagilim-tablo th:last-child{
  text-align:right; font-variant-numeric:tabular-nums; width:5em;
  font-weight:600;
}
.dagilim-tablo tr:last-child td{border-bottom:none}

/* Bekleyen görsel yuvaları dar ekranda gerçek oranlarında basılınca
   (800×800, 900×1200) sayfanın yarısını kaplıyor ve site yarım
   görünüyor. Yuva yalnızca dosya YOKKEN basıldığı için burada
   kısaltmak güvenli: görseller gelince kural kendiliğinden devre dışı
   kalıyor. Satır içi aspect-ratio'yu ezmek gerektiğinden !important
   şart. */
@media (max-width:560px){
  .yuva{aspect-ratio:auto!important;min-height:132px;padding:26px 20px}
}