/* ---------------------------------------------------------- MARKA
   Renkler EduMiXX-Hukuk logosundan ölçüldü:
     lacivert #001848 · altın #E4B46C / #D8A860
   Lacivert + altın hukuk ürününde zaten "ciddi, kaliteli" okunuyor;
   markanın kendi rengi olduğu için ayrıca uydurmaya gerek yok.        */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --lacivert-900:#071534; --lacivert-800:#0E2148; --lacivert-700:#16305F;
  --lacivert-400:#5A6E94;
  --altin:#B9822B; --altin-parlak:#D8A860; --altin-soluk:#F6EEDF;
  --kagit:#FCFAF6; --kart:#FFFFFF; --metin:#171A21; --soluk:#6C7280;
  --cizgi:#E7E2D8; --iyi:#1C6B4A; --uyari:#9A6B10;
  --olcu:44rem; --r:14px;
  --golge:0 1px 2px rgba(7,21,52,.05), 0 6px 20px -8px rgba(7,21,52,.16);
  --golge-lg:0 2px 4px rgba(7,21,52,.05), 0 22px 48px -16px rgba(7,21,52,.28);
  --serif:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --kagit:#0B1020; --kart:#141A2C; --metin:#EDEFF4; --soluk:#98A0B4;
  --cizgi:#252C42; --altin:#E0AE5F; --altin-soluk:#221C12;
  --lacivert-800:#0B1020; --lacivert-400:#8A96B4;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
  --golge-lg:0 2px 4px rgba(0,0,0,.4), 0 22px 48px -16px rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kagit);color:var(--metin);font-family:var(--sans);
  font-size:16px;line-height:1.62;font-feature-settings:"ss01","cv05"}
a{color:var(--altin);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------- ÜST */
.ust{position:sticky;top:0;z-index:40;background:rgba(252,250,246,.88);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--cizgi);
  padding:.55rem 1.1rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
@media (prefers-color-scheme:dark){.ust{background:rgba(11,16,32,.88)}}
.ust .marka{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.ust .marka .amblem{height:25px;width:auto;display:block}
.ust .marka .kelime{height:16px;width:auto;display:block}
@media (prefers-color-scheme:dark){
  .ust .marka .kelime{filter:brightness(0) invert(1) opacity(.92)}
}
/* ÜRÜN ROZETİ. Logo çatı adı (EduMiXX Hukuk) söylüyor; öğrencinin hangi
   kursta olduğunu söyleyen şey yoktu. Dar ekranda kelime logosu gizleniyor
   (aşağıda), rozet kalıyor — orada tek kimlik o. */
.ust .marka .urun{font-size:.66rem;font-weight:700;letter-spacing:.11em;
  color:var(--altin);border:1px solid var(--altin);border-radius:.3rem;
  padding:.1rem .34rem;line-height:1.3;white-space:nowrap}
.ust nav{display:flex;gap:1.15rem;flex-wrap:wrap;font-size:.895rem;font-weight:500}
.ust nav a{color:var(--metin);opacity:.72}
.ust nav a:hover{opacity:1;text-decoration:none}
.ust nav a.etkin{opacity:1;font-weight:700;color:var(--lacivert-800);
  box-shadow:inset 0 -2px 0 var(--altin)}
@media (prefers-color-scheme:dark){.ust nav a.etkin{color:var(--metin)}}

/* SORU ÇÖZ açılır menüsü. <details> ile kuruldu; JS yok, dokunmatikte ve
   klavyeyle çalışır. Panel absolute, başlık akışını bozmaz. */
.soru-menu{position:relative}
.soru-menu>summary{list-style:none;cursor:pointer;color:var(--metin);opacity:.72;
  font-weight:500;display:inline-flex;align-items:center;gap:.3rem}
.soru-menu>summary::-webkit-details-marker{display:none}
.soru-menu>summary::after{content:"";width:.4rem;height:.4rem;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-.1rem);transition:transform .15s}
.soru-menu[open]>summary::after{transform:rotate(-135deg) translateY(-.05rem)}
.soru-menu>summary:hover{opacity:1}
.soru-menu.etkin>summary{opacity:1;font-weight:700;color:var(--lacivert-800);
  box-shadow:inset 0 -2px 0 var(--altin)}
@media (prefers-color-scheme:dark){.soru-menu.etkin>summary{color:var(--metin)}}
.sm-panel{position:absolute;top:calc(100% + .55rem);left:0;z-index:60;
  min-width:17.5rem;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:.7rem;box-shadow:var(--golge-lg);padding:.4rem;
  display:flex;flex-direction:column}
.sm-sat{display:block;padding:.5rem .65rem;border-radius:.45rem;opacity:1}
.sm-sat b{display:block;font-weight:600;font-size:.9rem;color:var(--metin)}
.sm-sat i{display:block;font-style:normal;font-size:.78rem;color:var(--soluk);
  margin-top:.05rem}
a.sm-sat:hover{background:var(--zemin-2);text-decoration:none}
a.sm-sat.etkin{background:var(--altin-soluk)}
a.sm-sat.etkin b{color:var(--lacivert-800)}
.sm-yok{opacity:.45;cursor:default}
.sm-yok b{font-weight:500}
.kip-secim{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.1rem}
.banka-suzgec{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;margin:1.2rem 0 1.6rem;
  padding:.85rem 1rem;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:.6rem}
/* min-width:0 ŞART (17.09.2026). <select> kendini EN UZUN SEÇENEĞİNE göre
   boyutlandırır; "Medeni Hukuk, Kaynakları ve Uygulanması" gibi başlıklar
   461px istiyordu. Esnek öğenin varsayılan min-width:auto'su bu isteği
   kırpmadığı için select'teki max-width:100% zaten taşmış genişliğe
   uygulanıyordu; 390px ekranda banka ve kartlar sayfaları 103px sağa
   kayıyordu. Ölçüldü: 145 sayfanın 4'ü bu yüzden taşıyordu. */
.banka-suzgec label{display:flex;flex-direction:column;gap:.25rem;
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soluk);flex:1 1 14rem;min-width:0}
.banka-suzgec select{font:inherit;font-size:.9rem;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--metin);background:var(--zemin);
  border:1px solid var(--cizgi);border-radius:.4rem;padding:.42rem .55rem;
  width:100%;max-width:100%;min-width:0;text-overflow:ellipsis}
.coz-durum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem .9rem}
.coz-cik{font:inherit;font-size:.84rem;background:none;border:0;padding:0;cursor:pointer;
  color:var(--soluk);text-decoration:underline;text-underline-offset:.2em}
.coz-cik:hover{color:var(--metin)}
/* DERSİN TÜREV SEÇENEKLERİ (14.09.2026). Ders kartlarıyla aynı ızgara
   mantığı; ama ilerleme çubuğu yok, bunlar ölçülen şeyler değil kapılar. */
.turev-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:1rem;margin:1.6rem 0 0}
.turev-izgara .adim-kart{margin:0}
.turev-izgara h3{margin:0 0 .3rem;font-size:1.05rem}
.turev-izgara .ipucu{margin:0}
/* SORU BANKASI — İKİ SÜTUN (14.09.2026). Sol sabit dizin, sağ seçili soru.
   Akordeon kalktı: tıklamak sayfayı açıp aşağı kaydırmıyor, sağdaki içeriği
   değiştiriyor. Dar ekranda alt alta düşer ve dizin kendi içinde kayar. */
.banka-duzen{display:grid;grid-template-columns:minmax(12rem,16rem) 1fr;
  gap:1.8rem;align-items:start;margin:1.4rem 0 0}
.banka-liste{position:sticky;top:5rem;max-height:calc(100vh - 7rem);
  overflow:auto;padding-right:.3rem}
.banka-liste h3.banka-bas{margin:1.1rem 0 .4rem}
.banka-liste h3.banka-bas:first-child{margin-top:0}
.cip-satir{display:flex;flex-wrap:wrap;gap:.28rem}
.soru-cip{min-width:2.3rem;font:inherit;font-size:.82rem;font-weight:600;
  padding:.28rem .45rem;border:1px solid var(--cizgi);border-radius:.4rem;
  background:var(--kart);color:var(--metin);cursor:pointer;
  transition:border-color .12s,background .12s}
.soru-cip:hover{border-color:var(--altin)}
.soru-cip.secili{background:var(--altin);border-color:var(--altin);color:#fff}
/* ÇÖZÜLMÜŞ SORU RENKLİ (Cihan, 15.09.2026): yeşil doğru, kırmızı yanlış. */
.soru-cip.dogru{border-color:var(--iyi);background:rgba(28,107,74,.12);color:var(--iyi)}
.soru-cip.yanlis{border-color:#b4322f;background:rgba(180,50,47,.1);color:#b4322f}
.soru-cip.dogru.secili{background:var(--iyi);color:#fff}
.soru-cip.yanlis.secili{background:#b4322f;border-color:#b4322f;color:#fff}
.banka-durum{margin:-.6rem 0 1.2rem;font-size:.9rem;color:var(--soluk);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.banka-durum strong{color:var(--metin)}
.banka-durum .d{color:var(--iyi);font-weight:600}
.banka-durum .y{color:#b4322f;font-weight:600}
.banka-durum .sifirla{font:inherit;font-size:.82rem;background:none;border:0;
  color:var(--altin);cursor:pointer;text-decoration:underline;padding:0}
.banka-detay .soru{margin:0}

/* ================== SORU KUTUSU (Cihan, 15.09.2026) ==================
   İKİ SORUN VARDI:
   1. Her yer aynı sarı tonundaydı; soru nerede bitiyor, cevap nerede
      başlıyor göze çarpmıyordu.
   2. Soru uzunluğu değişince sayfa yukarı aşağı zıplıyordu; mobilde
      okumak eziyetti.
   ÇÖZÜM: sabit yükseklikli, kendi içinde kayan bir kutu. Kutunun boyu
   soru değişince DEĞİŞMEZ, o yüzden sayfa oynamaz. İçeride üç ayrı
   renk bölgesi var: soru (beyaz), şıklar (açık gri), cevap (yeşil/kırmızı
   zeminli ayrı panel). */
.soru-kutu{display:flex;flex-direction:column;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:16px;box-shadow:var(--golge);
  overflow:hidden;height:calc(100vh - 8.5rem);min-height:24rem}
.sk-bas{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--cizgi);
  background:var(--lacivert-900);color:#fff;flex:0 0 auto}
.sk-bas .konu{font-size:.82rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sk-bas .sayac{font-size:.78rem;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.sk-bas .rozet{background:rgba(255,255,255,.14);color:#fff}
.sk-bas .rozet.gri{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.sk-geri{display:none}
.sk-govde{flex:1 1 auto;overflow-y:auto;padding:1.25rem 1.35rem 1.5rem;
  -webkit-overflow-scrolling:touch}
.sk-etiket{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--altin);margin:0 0 .5rem}
.sk-govde .kok{font-family:var(--serif);font-size:1.06rem;line-height:1.72;
  margin:0 0 1.15rem}
/* ÖNCÜL BİÇİMİ (Cihan, 18.09.2026: "biraz ileride yazılsın").
   Öncül soru kökünden İÇERİ alınır ve rakam ASILI kalır: uzun öncül alt
   satıra düştüğünde metnin altına hizalanır, rakamın altına değil. Göz
   böylece hangi satırın hangi öncüle ait olduğunu bir bakışta görür —
   sınav kâğıdının kendi düzeni budur. */
.kok .kok-sat,.kok .oncul,.kok .kok-kapanis{display:block}
.kok .kok-sat+.oncul{margin-top:.55rem}
.kok .oncul{padding-left:3.1rem;text-indent:-1.9rem;margin:.16rem 0}
.kok .on-no{display:inline-block;min-width:1.9rem;font-style:normal;
  font-weight:600;color:var(--altin);text-indent:0}
.kok .oncul+.kok-kapanis{margin-top:.55rem}
.sk-siklar{border-top:1px solid var(--cizgi);padding-top:1rem}
.sk-govde .sik{background:var(--zemin,#f7f5ef);margin:.4rem 0}

/* CEVAP BÖLGESİ — soruyla aynı renkte olmayacak. */
.sk-cevap{margin:1.4rem -1.35rem -1.5rem;padding:1.1rem 1.35rem 1.5rem;
  border-top:2px solid var(--iyi);background:rgba(28,107,74,.07)}
.sk-cevap.kotu{border-top-color:#b4322f;background:rgba(180,50,47,.06)}
.sk-cevap .hukum{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;
  font-weight:700;font-size:1rem;color:var(--iyi)}
.sk-cevap.kotu .hukum{color:#b4322f}
.sk-cevap .hukum .im{display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--iyi);color:#fff;
  font-size:.9rem;flex:0 0 auto}
.sk-cevap.kotu .hukum .im{background:#b4322f}
.sk-cevap .cozum{border-left:0;background:transparent;box-shadow:none;
  padding:0;margin:0;font-size:.94rem;line-height:1.7}
.sk-cevap .analiz{margin-top:1rem}
.sk-alt{flex:0 0 auto;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  padding:.8rem 1.1rem;border-top:1px solid var(--cizgi);background:var(--zemin,#f7f5ef)}
.sk-alt .dugme{padding:.5rem .9rem;font-size:.9rem}
.sk-alt .yildiz{margin-left:auto}
/* SINAV KUTUSU: bankayla aynı iskelet, üç fark — sayaç sağda, şıklar
   <button>, "Sınavı bitir" sağa yaslı. */
.sinav-kutu .sk-bas .sayac{font-weight:700;font-size:.9rem;color:var(--altin-parlak)}
.sinav-kutu .sk-bas .sayac.az{color:#ff8b87}
.sinav-kutu .sk-alt #bitir{margin-left:auto}
.sinav-kutu .sk-alt .ikincil{min-width:3.2rem}

@media(max-width:820px){
  .banka-duzen{grid-template-columns:1fr;gap:1.1rem}
  .banka-liste{position:static;max-height:16rem}
  /* MOBİLDE TAM EKRAN (Cihan, 15.09.2026): soru seçilince kutu ekranı
     kaplar. Arka sayfa kaymaz, geri düğmesiyle listeye dönülür. */
  .banka-detay.acik{position:fixed;inset:0;z-index:60;background:var(--kart);
    padding:0;margin:0}
  .banka-detay.acik .soru-kutu{height:100dvh;border-radius:0;border:0;min-height:0}
  .banka-detay.acik .sk-geri{display:inline-flex;align-items:center;gap:.3rem;
    background:none;border:0;color:#fff;font:inherit;font-size:.88rem;
    cursor:pointer;padding:.2rem .1rem;flex:0 0 auto}
  .banka-detay.acik .sk-bas .konu{font-size:.78rem}
}
/* GİRİŞ EKRANI: yalnız form (17.09.2026 — reklam vitrine taşındı). */
.giris-duzen{display:grid;grid-template-columns:minmax(0,22rem);
  justify-content:center;align-items:start;max-width:56rem;margin:2rem auto}
@media(max-width:820px){.giris-duzen{max-width:26rem;margin:1rem auto}}
.tum-kart{display:block;padding:1.5rem 1.6rem;border-radius:.9rem;
  border:1px solid var(--vurgu);background:linear-gradient(135deg,
  color-mix(in srgb,var(--vurgu) 12%,var(--kart)),var(--kart));
  text-decoration:none;color:inherit;margin:.4rem 0 0;min-width:0}
.tum-kart:hover{border-color:var(--metin)}
.t-rozet{display:inline-block;font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vurgu);
  margin-bottom:.5rem}
.t-ad{display:block;font-size:1.32rem;font-weight:700;line-height:1.2}
.t-alt{display:block;margin-top:.45rem;font-size:.93rem;line-height:1.6;
  color:var(--soluk);max-width:42rem}
.t-dur{display:block;margin-top:.7rem;font-size:.8rem;color:var(--soluk)}
@media(max-width:600px){.t-ad{font-size:1.12rem}.tum-kart{padding:1.2rem}}
.banka-coz{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  margin:-.9rem 0 1.6rem}
.banka-coz .ipucu{margin:0}
/* .analiz-bas'ın kuralı yoktu: banka ekranında şık analizi başlığı gövde
   metniyle aynı görünüyordu. .analiz h4 ile aynı biçim verildi. */
.analiz-bas{margin:0 0 .45rem;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--altin)}
h3.banka-bas{margin:1.8rem 0 .5rem;padding-bottom:.3rem;font-size:.78rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--altin);border-bottom:1px solid var(--cizgi)}
#tt .fikra{margin:.42rem 0;padding-left:.6rem;
  border-left:2px solid var(--cizgi)}
#tt .fikra:first-of-type{margin-top:.45rem}
#tt .fikra.anilan{border-left-color:var(--altin);background:var(--altin-soluk);
  padding:.28rem .5rem .28rem .6rem;border-radius:0 .3rem .3rem 0}
#tt .tt-say{font-weight:500;font-size:.78em;color:var(--soluk)}
.cevap-ac{margin-top:.8rem;border-top:1px solid var(--cizgi);padding-top:.7rem}
.cevap-ac>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:.35rem;font-size:.86rem;font-weight:600;color:var(--altin-koyu);
  border:1px solid var(--altin);border-radius:.4rem;padding:.3rem .7rem}
.cevap-ac>summary::-webkit-details-marker{display:none}
.cevap-ac>summary::after{content:"";width:.38rem;height:.38rem;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-.08rem)}
.cevap-ac[open]>summary{margin-bottom:.55rem}
.cevap-ac[open]>summary::after{transform:rotate(-135deg)}
.cevap-ac>summary:hover{background:var(--altin-soluk)}
.yildiz{margin-top:.7rem;font:inherit;font-size:.82rem;cursor:pointer;
  background:none;border:1px solid var(--cizgi);border-radius:.4rem;
  padding:.28rem .6rem;color:var(--soluk)}
.yildiz:hover{border-color:var(--altin);color:var(--metin)}
.yildiz.dolu{color:var(--altin-koyu);border-color:var(--altin);font-weight:600}
.sinav-kart{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap}
.sinav-kart .sk-ad{font-weight:600;font-size:1.02rem}
.ust .bosluk{flex:1}
#oturum{font-size:.84rem;white-space:nowrap}

main{max-width:var(--olcu);margin:0 auto;padding:2rem 1.1rem 6rem}
main.genis{max-width:64rem}
/* Soru bankası iki sütunlu: 64rem'de bile sağdaki soru dar kalıyordu. */
main.cok-genis{max-width:76rem}

/* ------------------------------------------------------- TİPOGRAFİ */
h1{font-family:var(--serif);font-size:clamp(1.9rem,4.4vw,2.65rem);line-height:1.1;
  letter-spacing:-.022em;font-weight:600;margin:.1rem 0 .5rem}
h2{font-family:var(--serif);font-size:1.48rem;line-height:1.24;letter-spacing:-.014em;
  font-weight:600;margin:2.6rem 0 .7rem}
h3{font-size:1.075rem;font-weight:700;letter-spacing:-.005em;margin:1.9rem 0 .45rem;
  color:var(--lacivert-700)}
@media (prefers-color-scheme:dark){h3{color:var(--altin)}}
h4,h5,h6{font-size:.95rem;font-weight:700;margin:1.4rem 0 .3rem;color:var(--soluk);
  text-transform:uppercase;letter-spacing:.05em}
.govde{font-family:var(--serif);font-size:1.075rem;line-height:1.78;font-weight:400}
.govde p{margin:0 0 1.15em}
.govde ul,.govde ol{margin:0 0 1.15em;padding-left:1.35rem}
.govde li{margin:.34em 0}
.govde li::marker{color:var(--altin)}
.ipucu{color:var(--soluk);font-size:.885rem;font-family:var(--sans);line-height:1.55}
hr{border:0;border-top:1px solid var(--cizgi);margin:2.4rem 0}
code{font-size:.88em;background:var(--altin-soluk);color:var(--altin);
  padding:.12em .38em;border-radius:5px;font-weight:600}

/* ------------------------------------------------------------ HERO */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 420px at 78% -12%, rgba(216,168,96,.22), transparent 62%),
  linear-gradient(160deg, var(--lacivert-800) 0%, var(--lacivert-900) 100%);
  color:#fff;border-radius:22px;padding:2.6rem 2rem 2.2rem;margin:.4rem 0 2rem;
  box-shadow:var(--golge-lg)}
.hero:after{content:"";position:absolute;right:-70px;bottom:-90px;width:340px;height:340px;
  background:url(varlik/amblem.png) right bottom/contain no-repeat;opacity:.09;pointer-events:none}
.hero .etiket{display:inline-flex;align-items:center;gap:.42rem;font-size:.73rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--altin-parlak);
  border:1px solid rgba(216,168,96,.34);border-radius:99px;padding:.3rem .75rem;margin-bottom:1.1rem}
.hero h1{color:#fff;margin:0 0 .6rem;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--altin-parlak)}
.hero p{color:rgba(255,255,255,.76);font-size:1.02rem;max-width:46ch;margin:0 0 1.5rem}
.hero .dugmeler{display:flex;gap:.6rem;flex-wrap:wrap;position:relative;z-index:2}

/* ----------------------------------------------------- EŞİK ÖLÇERİ */
.esik{position:relative;z-index:2;margin:1.7rem 0 0;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.3rem}
.esik .sayi{font-family:var(--serif);font-size:3.4rem;line-height:.95;font-weight:700;
  color:var(--altin-parlak);letter-spacing:-.03em}
.esik .alt{color:rgba(255,255,255,.72);font-size:.9rem;margin-top:.3rem}
.cubuk{height:9px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;
  margin:.95rem 0 .4rem;position:relative}
.cubuk i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--altin),var(--altin-parlak));transition:width .5s}
.cubuk .hedef{position:absolute;top:-5px;bottom:-5px;width:2px;background:#fff;opacity:.65}
.kart .esik{border-top:0;padding-top:0}
.kart .esik .sayi{color:var(--lacivert-800)}
.kart .esik .alt{color:var(--soluk)}
.kart .cubuk{background:var(--cizgi)}
.kart .cubuk .hedef{background:var(--altin)}
@media (prefers-color-scheme:dark){.kart .esik .sayi{color:var(--altin)}}

/* ----------------------------------------------------------- KART */
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1.15rem 1.25rem;margin:1.15rem 0;box-shadow:var(--golge)}
.kart.vurgulu{border-color:rgba(185,130,43,.4);background:
  linear-gradient(var(--kart),var(--kart)) padding-box,
  linear-gradient(160deg,var(--altin-parlak),var(--cizgi)) border-box;border:1px solid transparent}
.izgara{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));margin:1.4rem 0}
.uclu{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin:1.2rem 0}
.uclu .kart{margin:0}
.kutucuk{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:.95rem 1rem;box-shadow:var(--golge);position:relative;overflow:hidden}
.kutucuk:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--altin),var(--altin-parlak))}
.kutucuk .b{font-size:1.72rem;font-family:var(--serif);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--lacivert-800)}
@media (prefers-color-scheme:dark){.kutucuk .b{color:var(--altin)}}
.kutucuk .e{color:var(--soluk);font-size:.79rem;margin-top:.2rem;line-height:1.4}

/* --------------------------------------------------------- DÜĞMELER */
.dugme{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.94rem;
  font-weight:600;cursor:pointer;background:var(--altin);color:#1b1203;border:0;
  border-radius:10px;padding:.68rem 1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:transform .12s, filter .12s}
.dugme:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none}
.dugme.ikincil{background:transparent;color:inherit;border:1px solid currentColor;
  box-shadow:none;opacity:.85}
.dugme.ikincil:hover{opacity:1;filter:none}
.hero .dugme.ikincil{color:#fff;border-color:rgba(255,255,255,.4)}
.dugme:disabled{opacity:.45;cursor:default;transform:none}

.kart-ic{font-size:1.02rem;line-height:1.65}
/* FLASH KART KUTUSU (14.09.2026). Sabit yükseklikli dikdörtgen: kart
   değiştikçe kutunun boyu zıplamasın, düğmeler yerinde kalsın. Metin
   sığmazsa kutu kendi içinde kayar, dışarı taşmaz. */
.kart-kutu{min-height:17rem;max-width:44rem;margin:1.15rem auto;display:flex;
  align-items:center;justify-content:center;padding:2rem 1.8rem;cursor:pointer;
  overflow:auto}
.kart-kutu .kart-ic{width:100%;font-size:1.08rem;line-height:1.8;text-align:center}
.kart-kutu .kart-ic.kart-soru{text-align:left;font-size:1rem;line-height:1.65}
.kart-kutu .kart-ic.kart-soru .kok{margin:0 0 .8rem;font-weight:600}
.kart-kutu:hover{border-color:var(--altin)}
.kart-dugmeler{justify-content:center}
/* Gizlenen anahtar: boşluk ön yüzde, vurgulu hâli arka yüzde.
   SINIF ADI 'kart-bos' — 'bosluk' zaten üst menüdeki esnek aralığın adı
   (.ust .bosluk{flex:1}); aynı adı kullanmak başlığı bozuyordu. */
.kart-bos{display:inline-block;text-align:center;color:var(--altin);font-weight:700;
  background:var(--altin-soluk);border-bottom:2px solid var(--altin);
  border-radius:.3rem .3rem 0 0;vertical-align:baseline}
mark.acik{background:var(--altin-soluk);color:inherit;font-weight:700;
  border-radius:.3rem;padding:0 .22rem}
.kart-ic .sik{margin:.3rem 0}
.kart-dugmeler{display:flex;gap:.7rem;margin:1.1rem 0 0;flex-wrap:wrap}
.kart-bitti{text-align:center;padding:2rem 1rem}
.ozet-kutu{margin:0 0 1.6rem;border-left:3px solid var(--lacivert-700);
  background:rgba(14,33,72,.035);border-radius:0 6px 6px 0}
.ozet-kutu>summary{padding:.6rem .9rem;font-family:var(--sans);font-size:.92rem}
.ozet-ic{padding:.2rem 1rem 1rem}
.ozet-ic h2{font-size:1.02rem;margin:1.1rem 0 .4rem}
.ozet-ic p{margin:.5rem 0}
@media (prefers-color-scheme:dark){.ozet-kutu{background:rgba(170,182,214,.06)}}
/* ----------------------------------------------------------- ROZET */
.rozet{display:inline-flex;align-items:center;font-family:var(--sans);font-size:.705rem;
  font-weight:700;letter-spacing:.015em;padding:.19rem .5rem;border-radius:6px;
  background:var(--altin-soluk);color:var(--altin);margin-left:.35rem;
  vertical-align:middle;
  /* SATIR SONU SERBEST (Cihan, 15.09.2026). white-space:nowrap'ti ve bazı
     sınav adları çok uzun ("2023 AVUKATLAR İÇİN ADLİ HAKİMLİK (ARALIK)",
     285px): mobilde çekmece başlığını 390px'in dışına itiyordu. Ölçüldü:
     114 sayfanın 12'si yalnız bu yüzden taşıyordu. */
  white-space:normal;text-align:left;line-height:1.3;min-width:0}
.rozet.gri{background:var(--cizgi);color:var(--soluk)}
.rozet.lacivert{background:rgba(14,33,72,.08);color:var(--lacivert-700)}
@media (prefers-color-scheme:dark){.rozet.lacivert{background:#1d2540;color:#aab6d6}}

/* ------------------------------------------------------ İÇİNDEKİLER */
.ic{list-style:none;padding:0;margin:1.4rem 0}
.ic li{border-bottom:1px solid var(--cizgi);padding:.78rem .35rem;display:flex;
  align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ic li:hover{background:var(--altin-soluk);border-radius:8px}
.ic a{font-weight:600;color:var(--metin)}
.ic a:hover{color:var(--altin)}
.ic .meta{color:var(--soluk);font-size:.8rem;width:100%;margin-top:.1rem}
.ic .no{font-family:var(--serif);font-size:.88rem;color:var(--altin);font-weight:700;
  min-width:1.9rem;flex-shrink:0}
/* ders ağırlık çubuğu */
.agirlik{flex:1;min-width:70px;height:6px;background:var(--cizgi);border-radius:99px;overflow:hidden}
.agirlik i{display:block;height:100%;background:var(--altin-parlak);border-radius:99px}

/* ---------------------------------------------- MADDE TOOLTIP'İ */
/* Madde göndermesi biraz KÜÇÜLTÜLDÜ (Cihan): .9em akan metinde fazla
   baskındı, gönderme metnin önüne geçiyordu. */
.madde{border-bottom:1px dotted var(--altin);cursor:help;white-space:nowrap;
  font-family:var(--sans);font-size:.82em;font-weight:600;color:var(--altin)}
/* UZUN MADDE KUTUSU KAYAR (Cihan, 18.09.2026). Kanun maddeleri 2.200
   karaktere kadar çıkıyor (TBK m.407, m.344); kutu ekranı taşırıyor ve
   maddenin sonu okunamıyordu. Artık kutu yükseklikte sınırlı ve kendi
   içinde kayıyor; başlık şeridi kayarken üstte kalıyor.
   overscroll-behavior:contain — kutunun sonuna gelince sayfanın kaymasını
   engeller, yoksa parmak kutudan çıkıp sayfayı sürüklüyordu. */
#tt{position:fixed;z-index:90;max-width:min(35rem,92vw);background:var(--kart);
  border:1px solid var(--cizgi);border-radius:12px;padding:.9rem 1rem;
  box-shadow:var(--golge-lg);font-size:.9rem;line-height:1.55;display:none;font-family:var(--sans);
  max-height:min(60vh,26rem);overflow-y:auto;overscroll-behavior:contain}
/* SEÇİCİ "#tt b" İDİ VE ÇOK GENİŞTİ (18.09.2026): madde metnindeki
   "**(Ek: 14/7/2023-7456/23 md.)**" de <b> olarak geliyor, başlık şeridinin
   altın/büyük-harf stilini alıyordu. Kutu kaydırılabilir olunca sticky de
   ona uygulandı ve kaydırınca üstte başlık yerine mevzuat notu yapıştı.
   Başlığın artık kendi sınıfı var. */
#tt .tt-bas{position:sticky;top:-.9rem;z-index:1;
  display:block;color:var(--altin);font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;
  margin:-.9rem -1rem .35rem;padding:.9rem 1rem .4rem;
  background:var(--kart);border-radius:12px 12px 0 0}
#tt .fikra b{color:var(--metin);font-weight:600}

/* ----------------------------------------------------- SINAV NOTU */
.sinav-notu{position:relative;background:var(--altin-soluk);padding:1rem 1.15rem .75rem;
  margin:1.7rem 0;border-radius:12px;font-family:var(--sans);font-size:.96rem;
  border:1px solid rgba(185,130,43,.22)}
.sinav-notu:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:var(--altin);border-radius:99px}
.sinav-notu .sn-et{display:block;font-size:.685rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--altin);font-weight:700;margin-bottom:.4rem}
.sinav-notu p{margin:0 0 .65em}
.sinav-notu ul{margin:.25rem 0 .65rem;padding-left:1.2rem}

/* --------------------------------------------------------- TABLO */
.tablo-kutu{overflow-x:auto;max-width:100%;margin:1.7rem 0;
  border:1px solid var(--cizgi);border-radius:12px;box-shadow:var(--golge)}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.9rem}
th,td{border-bottom:1px solid var(--cizgi);padding:.6rem .75rem;text-align:left;vertical-align:top}
th{background:var(--lacivert-800);color:#fff;font-weight:600;font-size:.8rem;
  letter-spacing:.03em;text-transform:uppercase;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(185,130,43,.045)}

/* ---------------------------------------------------------- SORU */
.soru{margin:1.4rem 0 0}
.soru .kok{font-family:var(--serif);font-size:1.06rem;line-height:1.7;
  margin-bottom:1rem}
.sik{display:block;width:100%;text-align:left;font:inherit;font-size:.985rem;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:11px;
  padding:.7rem .9rem;margin:.45rem 0;cursor:pointer;transition:border-color .12s,background .12s}
.sik:hover{border-color:var(--altin)}
.sik.sec{border-color:var(--altin);background:var(--altin-soluk)}
.sik.dogru{border-color:var(--iyi);background:rgba(28,107,74,.09)}
.sik.yanlis{border-color:#b4322f;background:rgba(180,50,47,.07);text-decoration:line-through;opacity:.75}
.sik b{display:inline-block;width:1.5em;color:var(--altin);font-weight:700}
/* ŞIKLAR HER YERDE TIKLANABİLİR (Cihan, 14.09.2026). İşaret kabın üstünde:
   .soru[data-sik="1"]. Banka ve sınav ekranlarının kendi dinleyicisi var,
   onlar bu işareti taşımaz — çakışma olmaz. */
.soru[data-sik="1"] .sik{cursor:pointer}
.soru[data-sik="1"][data-verildi] .sik{cursor:default}
.sik-sonuc{margin:.85rem 0 .2rem;font-weight:700;font-size:.95rem}
.sik-sonuc.iyi{color:var(--iyi)}
.sik-sonuc.kotu{color:#b4322f}
.cozum:empty{display:none}   /* çözüm yoksa boş kutu da çıkmaz */

/* ================== SINAV SONUÇ EKRANI (Cihan, 15.09.2026) ==================
   Eskisi metin duvarıydı. Artık bir bakışta okunan üç görsel katman:
   büyük skor, nokta ızgarası, konu çubukları. */
.sonuc-bas{background:var(--kart);border:1px solid var(--cizgi);border-radius:18px;
  box-shadow:var(--golge);padding:1.8rem 1.6rem;text-align:center;margin:1.2rem 0 1.4rem;
  border-top:4px solid #b4322f}
.sonuc-bas.gecti{border-top-color:var(--iyi)}
.sonuc-rakam{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,8vw,4rem);
  line-height:1;letter-spacing:-.03em;color:#b4322f}
.sonuc-bas.gecti .sonuc-rakam{color:var(--iyi)}
.sonuc-rakam span{font-size:.4em;color:var(--soluk);font-weight:600;letter-spacing:0}
.sonuc-hukum{margin:.7rem 0 1.2rem;color:var(--soluk);font-size:1rem}
.sonuc-hukum strong{color:var(--metin)}
.sonuc-bas .cubuk{max-width:26rem;margin:0 auto}
.sonuc-say{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1rem}
.sonuc-say .sy{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;
  font-weight:600;color:var(--soluk)}
.sonuc-say .sy:before{content:"";width:.65rem;height:.65rem;border-radius:50%}
.sonuc-say .sy.d:before{background:var(--iyi)}
.sonuc-say .sy.y:before{background:#b4322f}
.sonuc-say .sy.b:before{background:var(--cizgi)}

/* nokta ızgarası — her soru bir nokta, tıklanınca incelemeye gider */
.nokta-sinav{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;
  margin:0 0 2.2rem;padding:1rem;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:14px}
.nokta-sinav i{width:1.15rem;height:1.15rem;border-radius:5px;cursor:pointer;
  transition:transform .12s}
.nokta-sinav i:hover{transform:scale(1.25)}
.nokta-sinav i.d{background:var(--iyi)}
.nokta-sinav i.y{background:#b4322f}
.nokta-sinav i.b{background:var(--cizgi)}

/* konu çubukları */
.knt-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:.8rem;margin:1rem 0 1.6rem}
.knt{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;
  padding:.85rem 1rem;box-shadow:var(--golge)}
.knt-ust{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline}
.knt-ust .ad{font-weight:600;font-size:.92rem;line-height:1.35}
.knt-ust .skor{font-size:.82rem;color:var(--soluk);font-variant-numeric:tabular-nums;
  flex:0 0 auto;font-weight:700}
.knt-cubuk{height:7px;border-radius:99px;background:#b4322f;overflow:hidden;margin:.6rem 0 0}
.knt-cubuk i{display:block;height:100%;background:var(--iyi);border-radius:99px}
.knt.tam .knt-ust .skor{color:var(--iyi)}
.knt-alt{display:flex;gap:.9rem;margin-top:.6rem}
.knt-alt .kbag{font-size:.8rem;color:var(--altin);font-weight:600}
.analiz{margin:.9rem 0 0;font-size:.9rem;color:var(--soluk)}
.analiz h4{margin:0 0 .45rem;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soluk);font-weight:700}
.analiz div{padding:.35rem 0;border-top:1px solid var(--cizgi);line-height:1.6}
.analiz b{color:var(--metin)}
.cozum{border-left:3px solid var(--iyi);padding:.85rem 1rem;margin:1rem 0;
  background:var(--kart);border-radius:0 10px 10px 0;font-size:.94rem;box-shadow:var(--golge)}
details.cekmece{border:1px solid var(--cizgi);border-radius:11px;padding:.65rem .9rem;
  margin:.55rem 0;background:var(--kart);box-shadow:var(--golge)}
/* DOĞRUDAN ÇOCUK. Eskiden "details.cekmece summary" yazıyordu ve torun
   <summary>'lere de uyguluyordu: cevap çekmecesi ("Cevabı göster") iç içe
   details olduğu için çekmecenin "+" işaretini ve flex düzenini miras
   alıyor, ekranda bozuk bir işaret çıkıyordu. */
details.cekmece>summary{cursor:pointer;font-weight:600;font-size:.925rem;
  font-family:var(--sans);list-style:none;display:flex;gap:.5rem;align-items:baseline;
  flex-wrap:wrap;min-width:0}
details.cekmece>summary::-webkit-details-marker{display:none}
details.cekmece>summary:before{content:"+";color:var(--altin);font-weight:700;flex-shrink:0}
/* EKSİ İŞARETİ DOĞRUDAN KARAKTERLE (14.09.2026). Eskiden CSS kaçışı
   yazılmıştı: content:"\2212". Ama bu CSS, Python üçlü tırnağının
   içinde duruyor ve Python \221 dizisini SEKİZLİ KAÇIŞ sanıp
   U+0091 kontrol karakterine çeviriyordu; ekrana görünmez bir
   karakter + "2" basılıyordu. Açık çekmecede eksi yerine "2"
   görünmesinin sebebi buydu. */
details.cekmece[open]>summary:before{content:"−"}
details.cekmece[open]{padding-bottom:1.1rem;border-color:rgba(185,130,43,.35)}

/* ---------------------------------------------------- SINAV ŞERİDİ */
.serit{position:sticky;top:54px;z-index:30;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:12px;padding:.62rem .9rem;margin-bottom:1.2rem;
  display:flex;gap:1rem;align-items:center;font-family:var(--sans);font-size:.9rem;
  flex-wrap:wrap;box-shadow:var(--golge)}
.serit .sayac{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem}
.serit .sayac.az{color:#b4322f}
.deneme-sec{display:flex;gap:.32rem;flex-wrap:wrap;margin:.8rem 0}
.deneme-sec button{font:inherit;font-size:.79rem;min-width:2.2rem;padding:.28rem;
  border:1px solid var(--cizgi);background:var(--kart);color:var(--soluk);
  border-radius:7px;cursor:pointer}
.deneme-sec button.dolu{background:var(--altin-soluk);border-color:var(--altin);
  color:var(--altin);font-weight:700}
.deneme-sec button.simdi{outline:2px solid var(--altin);outline-offset:1px}

/* --------------------------------------------------- GİRİŞ / PERDE */
input[type=search],input[type=text],input[type=password]{width:100%;font:inherit;
  padding:.68rem .85rem;border:1px solid var(--cizgi);border-radius:10px;
  background:var(--kart);color:var(--metin)}
input:focus{outline:2px solid var(--altin);outline-offset:1px;border-color:transparent}
.giris-kutu{max-width:24rem;margin:1.5rem auto}
.giris-kutu .basi{text-align:center;margin-bottom:1.6rem}
.giris-kutu .basi .g-amblem{height:54px;width:auto;display:block;margin:0 auto .65rem}
.giris-kutu .basi .g-kelime{height:25px;width:auto;display:block;margin:0 auto 1.4rem}
@media (prefers-color-scheme:dark){
  .giris-kutu .basi .g-kelime{filter:brightness(0) invert(1) opacity(.92)}
}
.giris-kutu label{display:block;font-size:.82rem;font-weight:600;color:var(--soluk);
  margin:.95rem 0 .3rem}
.giris-kutu .hata{color:#b4322f;font-size:.87rem;margin:.7rem 0 0}
.ayrac{display:flex;align-items:center;gap:.8rem;color:var(--soluk);font-size:.78rem;margin:1.3rem 0}
.ayrac:before,.ayrac:after{content:"";flex:1;border-top:1px solid var(--cizgi)}
.google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  font:inherit;font-size:.94rem;font-weight:600;cursor:pointer;background:var(--kart);
  color:var(--metin);border:1px solid var(--cizgi);border-radius:10px;padding:.68rem;
  box-shadow:var(--golge)}
.google:hover{border-color:var(--altin)}
.perde{position:fixed;inset:0;z-index:80;background:rgba(7,21,52,.72);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.perde-kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:18px;
  padding:2rem 1.8rem;max-width:31rem;box-shadow:var(--golge-lg);text-align:center}
.perde-kart img{height:38px;width:auto;margin-bottom:1.1rem}
.perde-kart h2{margin:0 0 .5rem;font-size:1.3rem}

@media(max-width:640px){
  main{padding:1.3rem .95rem 4.5rem}
  .hero{padding:2rem 1.3rem 1.7rem;border-radius:18px}
  .hero:after{width:220px;height:220px;right:-50px;bottom:-60px}
  .esik .sayi{font-size:2.8rem}
  /* DAR EKRANDA MENU KENDI SATIRINDA (13.09.2026).
     Eskiden menu yatay kaydirma seridiydi: 390 pikselde 229 piksellik
     menunun ancak 170 pikseli goruntuye giriyor, "Ara" seridin disinda
     kaliyor ve kaydirilabildigine dair bir isaret bulunmuyordu. Urun
     rozeti eklenince gorunen kisim daha da daraldi. Serit yerine menu
     tam satir: dort baslik 390 piksele rahat siginiyor, hicbir sey
     gizlenmiyor. Bedeli basligin yaklasik 28 piksel uzamasi. */
  .ust{gap:.45rem .8rem;padding:.5rem .85rem;flex-wrap:wrap}
  .ust nav{order:3;width:100%;gap:1.15rem;font-size:.85rem;flex-wrap:wrap;
    overflow:visible;padding-bottom:0}
  .ust nav a{white-space:nowrap}
  .soru-menu>summary{white-space:nowrap}
  .sm-panel{position:fixed;left:.6rem;right:.6rem;min-width:0;
    top:auto;margin-top:.4rem}
  .ust .marka .kelime{display:none}
  #oturum{font-size:.75rem}
}

/* =============================================== VİTRİN (koyu, animasyonlu) */
body.vitrin{background:var(--lacivert-900);color:#fff}
body.vitrin .ust{background:rgba(7,21,52,.72);border-bottom-color:rgba(255,255,255,.09)}
body.vitrin .ust nav a{color:#fff;opacity:.66}
body.vitrin .ust nav a:hover{opacity:1}
/* "Soru" AÇILIR MENÜSÜ VİTRİNDE GÖRÜNMÜYORDU (14.09.2026). Karanlık başlıkta
   bağlantıları beyaza çeviren kural yalnız `nav a`ya bakıyor; menü ise
   <details><summary> ve kuralın dışında kalıyordu. Ana sayfada koyu lacivert
   zemine neredeyse siyah yazıyla basılıyor, yani menü kayıp görünüyordu. */
body.vitrin .ust nav .soru-menu>summary{color:#fff;opacity:.66}
body.vitrin .ust nav .soru-menu[open]>summary,
body.vitrin .ust nav .soru-menu>summary:hover{opacity:1}
body.vitrin .ust .marka .kelime{filter:brightness(0) invert(1) opacity(.95)}
body.vitrin main{max-width:none;padding:0}
.v-ic{max-width:64rem;margin:0 auto;padding:0 1.3rem;width:100%}

/* --- sahne düzeni ------------------------------------------------------- */
.sahne{position:relative}
.yapisik{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.v-baslik{font-family:var(--serif);font-weight:600;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2.4rem,6.6vw,5rem);margin:0}
.v-alt{color:rgba(255,255,255,.62);font-size:clamp(1rem,1.6vw,1.2rem);
  max-width:42ch;margin:1.1rem auto 0;line-height:1.6}
.altin{color:var(--altin-parlak)}

/* --- 1. açılış --------------------------------------------------------- */
#s1 .yapisik{background:
  radial-gradient(900px 520px at 50% 18%, rgba(216,168,96,.20), transparent 66%)}
#s1 .amb{width:min(46vw,330px);opacity:.13;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-56%) scale(calc(1 + var(--p)*.35));filter:saturate(1.2)}
#s1 .ort{text-align:center;position:relative;z-index:2;
  transform:translateY(calc(var(--p) * -70px));opacity:calc(1 - var(--p)*1.25)}
.kaydir{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.45);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.5rem}
.kaydir span{display:block;width:1px;height:28px;
  background:linear-gradient(rgba(255,255,255,.5),transparent);animation:ins 1.8s infinite}
@keyframes ins{0%{opacity:0;transform:translateY(-8px)}50%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* --- 2. yirmi ders sağdan gelir ---------------------------------------- */
#s2 .yazi{position:absolute;left:50%;top:14%;transform:translate(-50%,0);
  text-align:center;z-index:3;pointer-events:none;width:100%;
  opacity:calc(1 - max(0, (var(--p) - .62)) * 2.8)}
#s2 .seritler{position:absolute;left:0;right:0;bottom:9%;top:46%;
  display:flex;flex-direction:column;justify-content:center;gap:.9rem}
#s2 .yapisik:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--lacivert-900) 26%,rgba(7,21,52,.55) 44%,transparent 58%)}
#s2 .serit-d{display:flex;gap:.85rem;white-space:nowrap;will-change:transform}
#s2 .serit-d.a{transform:translateX(calc(46vw - var(--p) * 128vw))}
#s2 .serit-d.b{transform:translateX(calc(70vw - var(--p) * 150vw))}
#s2 .serit-d.c{transform:translateX(calc(56vw - var(--p) * 112vw))}
.d-kart{flex:0 0 auto;display:flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:.75rem 1.1rem;backdrop-filter:blur(3px)}
.d-kart .ders-amblem{color:var(--altin-parlak);flex-shrink:0}
.d-kart .ad{font-weight:600;font-size:.95rem}
.d-kart .sy{color:rgba(255,255,255,.42);font-size:.8rem}
.d-kart.buyuk{background:rgba(216,168,96,.13);border-color:rgba(216,168,96,.42)}

/* --- 3. ağırlık ---------------------------------------------------------*/
#s3 .agir{display:grid;gap:.7rem;width:100%;max-width:40rem}
#s3 .sat{display:flex;align-items:center;gap:.9rem;
  opacity:calc(-.15 + var(--p) * 3.2);transform:translateX(calc((1 - min(1, var(--p)*2.6)) * -26px))}
#s3 .sat .ad{width:11.5rem;font-weight:600;font-size:.94rem;flex-shrink:0}
#s3 .sat .c{flex:1;height:9px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
#s3 .sat .c i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--altin),var(--altin-parlak));
  width:calc(var(--w) * min(1, var(--p) * 2.2))}
#s3 .sat .n{width:3.6rem;text-align:right;color:rgba(255,255,255,.5);font-size:.84rem;
  font-variant-numeric:tabular-nums}
#s3 .sat.sonuk{opacity:calc((-.15 + var(--p)*3.2) * .38)}

/* --- 4. döngü ----------------------------------------------------------- */
#s4 .adimlar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;max-width:56rem}
#s4 .adim{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:1.4rem 1.2rem;transition:all .45s}
#s4 .adim .no{font-family:var(--serif);font-size:.9rem;color:var(--altin-parlak);font-weight:700}
#s4 .adim h3{color:#fff;font-size:1.08rem;margin:.5rem 0 .35rem;text-transform:none;letter-spacing:0}
#s4 .adim p{color:rgba(255,255,255,.55);font-size:.87rem;margin:0;line-height:1.55}
#s4 .adim.etkin{background:rgba(216,168,96,.14);border-color:rgba(216,168,96,.5);
  transform:translateY(-8px);box-shadow:0 20px 44px -20px rgba(216,168,96,.5)}

/* --- 5. kapanış --------------------------------------------------------- */
#s5{background:linear-gradient(180deg,var(--lacivert-900),#04102a)}
.fiyat-kart{background:rgba(255,255,255,.045);border:1px solid rgba(216,168,96,.3);
  border-radius:20px;padding:2rem 1.8rem;max-width:25rem;margin:2rem auto 0;text-align:center}
.fiyat-kart .tutar{font-family:var(--serif);font-size:3rem;font-weight:700;
  color:var(--altin-parlak);line-height:1;letter-spacing:-.03em}
.fiyat-kart .per{color:rgba(255,255,255,.5);font-size:.9rem;margin-top:.3rem}
.fiyat-kart ul{list-style:none;padding:0;margin:1.5rem 0;text-align:left;font-size:.93rem}
/* FLEX DEĞİL, KONUMLANDIRMA (Cihan, 15.09.2026 — ikinci deneme).
   flex denendi, uzun madde ("Mevzuat değişikliklerinde ücretsiz
   güncelleme") yine tikin ALTINA düştü: metin düğümü ayrı bir esnek öğe
   sayılıyor ve daralamayınca alt satıra geçiyor. Mutlak konumlandırılmış
   tik + sol iç boşluk bu sorunu kökten bitirir: metin normal akan bir
   paragraftır, istediği kadar satıra sarar, tik hep ilk satırın hizasında
   kalır. */
.fiyat-kart li{position:relative;padding:.45rem 0 .45rem 1.6rem;
  color:rgba(255,255,255,.82);text-align:left;line-height:1.55;display:block}
.fiyat-kart li:before{content:"✓";position:absolute;left:0;top:.45rem;
  color:var(--altin-parlak);font-weight:700;line-height:1.55}
.v-dip{border-top:1px solid rgba(255,255,255,.1);padding:2.5rem 1.3rem 3rem;text-align:center;
  color:rgba(255,255,255,.4);font-size:.85rem}
.v-dip img{height:22px;opacity:.55;margin-bottom:.9rem}

/* --- giriş animasyonu (IntersectionObserver) ---------------------------- */
.gel{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),
  transform .8s cubic-bezier(.2,.7,.3,1)}
.gel.ic{opacity:1;transform:none}
.gel.g1{transition-delay:.08s}.gel.g2{transition-delay:.16s}.gel.g3{transition-delay:.24s}

@media(max-width:780px){
  #s4 .adimlar{grid-template-columns:repeat(2,1fr)}
  #s3 .sat .ad{width:7.6rem;font-size:.86rem}
}

/* ==================================================== REKLAM BÖLÜMÜ
   Cihan, 14.09.2026 (2): ilk yazım numaralı beş satırlık bir "özellik
   listesi"ydi — her satır aynı ritimde, başlıklar özellik etiketi, metin
   mekanizma anlatıyordu. Reklam böyle yazılmaz. Yeniden kuruldu:
   tek büyük iddia (Hedef 84), sonra ritmi değişen sahneler — büyük ürün
   görseli, iki kart, geniş şerit, fiyat. Numara yok, etiket yok; her
   başlık bir cümle, her cümle bir iddia.
   Görseller inline SVG/CSS; dosya, CDN, ağ isteği yok. */
.mf{padding:0 0 2rem;overflow-x:clip}
.mf-ic{max-width:64rem;margin:0 auto;padding:0 1.3rem}

/* --- 1. HEDEF 84 ------------------------------------------------------- */
/* --- HEDEF 84: YAPIŞIK SAHNE (Cihan, 15.09.2026) ------------------------
   Cihan "buradan itibaren animasyon yok" dedi. Haklıydı: bölüm tek
   seferlik bir opaklık geçişiyle beliriyordu, oysa üstteki dört sahne
   kaydırmaya bağlı SÜREKLİ hareket ediyor. Bu sahne artık onlarla aynı
   sınıfta: ekran sabitlenir, kaydırdıkça 120 nokta tek tek dolar ve
   başlıktaki sayı 0'dan 84'e çıkar. */
#s-hedef .yapisik{background:
  radial-gradient(900px 520px at 50% 40%, rgba(216,168,96,.18), transparent 66%)}
.kas-ust{margin:0 auto .6rem;color:rgba(255,255,255,.45);font-size:.8rem;
  letter-spacing:.22em;text-transform:uppercase}
#s-hedef .buyuk{font-family:var(--serif);font-weight:700;letter-spacing:-.045em;
  line-height:.92;font-size:clamp(3.4rem,11vw,8rem);margin:0;
  background:linear-gradient(180deg,#fff 28%,var(--altin-parlak));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
#s-hedef .alti{color:rgba(255,255,255,.66);font-size:clamp(1rem,1.7vw,1.2rem);
  max-width:34ch;margin:1.2rem auto 0;line-height:1.6;
  opacity:calc(.25 + var(--p,0) * 2.4)}
#s-hedef .alti b{color:#fff;font-weight:600}
.nokta-izgara{display:grid;grid-template-columns:repeat(20,1fr);gap:.4rem;
  max-width:29rem;margin:2.4rem auto 0}
.nokta-izgara i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.08);
  transform:scale(.55);transition:background .25s,transform .25s,box-shadow .25s}
.nokta-izgara i.dolu{transform:none;background:rgba(255,255,255,.22)}
.nokta-izgara i.altin.dolu{background:var(--altin-parlak);
  box-shadow:0 0 10px rgba(216,168,96,.55)}
.nokta-not{color:rgba(255,255,255,.42);font-size:.82rem;margin:1.3rem 0 0;
  letter-spacing:.02em;min-height:1.2em}

/* --- 2. BÜYÜK ÜRÜN SAHNESİ -------------------------------------------- */
.mf-buyuk{display:grid;grid-template-columns:.86fr 1.14fr;gap:3.4rem;align-items:center;
  padding:5.5rem 0;border-top:1px solid rgba(255,255,255,.08)}
.mf-iddia{font-family:var(--serif);font-weight:600;letter-spacing:-.025em;line-height:1.14;
  font-size:clamp(1.75rem,3.4vw,2.65rem);color:#fff;margin:0 0 1rem;text-transform:none}
.mf-destek{color:rgba(255,255,255,.6);font-size:1.02rem;line-height:1.65;margin:0}
.mf-olcu{display:inline-block;margin-top:1.5rem;font-size:.82rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--altin-parlak);
  border-top:1px solid rgba(216,168,96,.35);padding-top:.7rem}
.mf-buyuk svg{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.45))}

/* --- RENK (Cihan, 15.09.2026) ------------------------------------------
   Sayfa baştan sona lacivert + altındı, tek tondu. Her sahneye kendi
   ışığı verildi: kanun turkuaz, çıkmış sorular yeşil, eşitlik mor,
   mevzuat kehribar. Yazı rengi değişmiyor — yalnız zemin ışığı ve ince
   vurgular. Marka altın kalıyor. */
.mf-buyuk{position:relative}
/* inset YATAYDA 0 (Cihan, 15.09.2026): -3rem ışık halesini ekranın
   dışına taşırıyor ve mobilde sayfayı yatay kaydırılır hâle getiriyordu. */
.mf-buyuk:before{content:"";position:absolute;inset:-2rem 0;pointer-events:none;
  background:radial-gradient(620px 380px at 78% 50%, rgba(42,160,160,.16), transparent 68%)}
.mf-buyuk>*{position:relative}
.mf-buyuk .mf-olcu{color:#5fd0cc;border-top-color:rgba(95,208,204,.4)}
.cz1 .balon{filter:drop-shadow(0 0 22px rgba(42,160,160,.25))}

.mf-ikili .mf-kart:first-child{
  background:linear-gradient(165deg,rgba(28,140,96,.13),rgba(255,255,255,.035) 58%);
  border-color:rgba(60,180,130,.28)}
.mf-ikili .mf-kart:last-child{
  background:linear-gradient(165deg,rgba(124,106,232,.15),rgba(255,255,255,.035) 58%);
  border-color:rgba(140,124,240,.3)}

/* --- 3. İKİ KART ------------------------------------------------------- */
.mf-ikili{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;padding:1rem 0 5rem}
.mf-kart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:2.2rem 2rem 2.4rem;display:flex;flex-direction:column}
.mf-kart .mf-iddia{font-size:clamp(1.4rem,2.3vw,1.85rem)}
.mf-kart .k-cizim{margin-top:auto;padding-top:2rem}
.mf-kart svg{width:100%;height:auto;overflow:visible}

/* --- 4. ŞERİT --------------------------------------------------------- */
.mf-serit{background:linear-gradient(100deg,rgba(232,140,58,.17),
  rgba(216,168,96,.05) 58%,rgba(232,140,58,.1));
  border-top:1px solid rgba(232,140,58,.32);border-bottom:1px solid rgba(232,140,58,.32)}
.mf-serit .serit-ic{max-width:64rem;margin:0 auto;padding:4.4rem 1.3rem;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.mf-serit svg{width:100%;height:auto;overflow:visible}

/* --- 5. FİYAT --------------------------------------------------------- */
.mf-fiyat{padding:6rem 0 5rem;text-align:center}
.mf-fiyat .rakam{font-family:var(--serif);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(3.4rem,9vw,6.4rem);line-height:1;color:var(--altin-parlak);margin:0}
.mf-fiyat .rakam small{font-size:.34em;letter-spacing:0;color:rgba(255,255,255,.55);
  display:block;font-family:var(--sans);font-weight:500;margin-bottom:.9rem;
  text-transform:uppercase;letter-spacing:.16em}
.mf-fiyat .acik{color:rgba(255,255,255,.62);font-size:1.02rem;line-height:1.65;
  max-width:40ch;margin:1.6rem auto 0}
.ders-tas{display:grid;grid-template-columns:repeat(10,1fr);gap:.45rem;
  max-width:34rem;margin:2.8rem auto 0}
.ders-tas i{aspect-ratio:1.9;border-radius:6px;background:rgba(216,168,96,.14);
  border:1px solid rgba(216,168,96,.38);display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:700;color:var(--altin-parlak);
  font-style:normal;font-family:ui-monospace,monospace;
  opacity:0;transform:scale(.7);transition:all .4s cubic-bezier(.2,1.5,.4,1);
  transition-delay:calc(var(--i) * 32ms)}
.gel.ic .ders-tas i{opacity:1;transform:none}

/* --- 6. SAYILAR ------------------------------------------------------- */
#mf-sayi{padding:5rem 0 6.5rem;border-top:1px solid rgba(255,255,255,.08)}
.sy-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  max-width:52rem;margin:2.6rem auto 0}
.sy-kutu{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:1.5rem 1.3rem;text-align:center}
.sy-kutu .s{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.1vw,2.1rem);
  letter-spacing:-.025em;color:var(--altin-parlak);font-variant-numeric:tabular-nums;
  line-height:1;display:block}
.sy-kutu .e{color:rgba(255,255,255,.5);font-size:.84rem;margin-top:.55rem;display:block}
.sy-not{text-align:center;color:rgba(255,255,255,.34);font-size:.8rem;
  margin:2.2rem auto 0;max-width:44rem;line-height:1.65}

/* --- KADEMELİ GİRİŞ + KAYDIRMAYA BAĞLI SÜZÜLME (Cihan, 15.09.2026) ------
   İlk yazımda bölüm bütün olarak bir kez beliriyordu; Cihan "hiç animasyon
   yok" dedi, haklı: tek seferlik 0.8sn'lik bir opaklık geçişi göze
   çarpmıyor. Şimdi iki katman var:
   1) KADEMELİ GİRİŞ — başlık, metin, ölçü satırı ve çizim sırayla geliyor.
   2) SÜZÜLME — çizim ekranda ilerledikçe kayıyor (--k, VITRIN_JS'te
      her kaydırmada güncelleniyor). Sürekli hareket, tek atış değil. */
.kad{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.gel.ic .kad{opacity:1;transform:none}
.gel.ic .kad:nth-child(1){transition-delay:.05s}
.gel.ic .kad:nth-child(2){transition-delay:.16s}
.gel.ic .kad:nth-child(3){transition-delay:.27s}
.gel.ic .kad:nth-child(4){transition-delay:.38s}

/* çizim: yandan gelir, sonra kaydırmayla süzülür */
/* HAREKET MİKTARI ARTTI (Cihan, 15.09.2026): 34px göze çarpmıyordu,
   90px çarpıyor. Çizim kayarken hafifçe de dönüyor. */
.v-cizim,.k-cizim{opacity:0;transform:translateY(46px) scale(.94);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1) .15s,
             transform .9s cubic-bezier(.2,.7,.3,1) .15s}
.gel.ic .v-cizim,.gel.ic .k-cizim{opacity:1;
  transform:translateY(calc((.5 - var(--k,.5)) * 90px))
            rotate(calc((.5 - var(--k,.5)) * 2.2deg))}
.mf-buyuk .v-yazi{transform:translateY(calc((.5 - var(--k,.5)) * -38px))}
.mf-kart{transform:translateY(calc((.5 - var(--k,.5)) * 26px))}
.mf-fiyat .rakam{transform:scale(calc(1 + (.5 - var(--k,.5)) * -.09))}

/* büyük başlıkta yavaş akan altın parıltı */
#s-hedef .buyuk{background-size:100% 260%;background-position:0 30%;
  animation:parla 7s ease-in-out infinite alternate}
@keyframes parla{to{background-position:0 78%}}

/* şerit: zemin kaydırmayla yavaşça kayar */
.mf-serit{background-size:160% 100%;
  background-position:calc(var(--k,.5) * 60%) 0}

/* --- ÇİZİM CANLANDIRMALARI (Cihan, 15.09.2026) --------------------------
   Üçü de DÖNGÜ. Tek seferlik geçişler kaydırırken kaçırılıyordu; bunlar
   ekranda kaldığı sürece tekrar ediyor, yani her ziyaretçi görüyor.
   Hepsi .gel.ic ile başlar — sahne dışındayken boşuna dönmez. */
.cz .sol{fill:rgba(255,255,255,.15)}
.cz .alt{fill:var(--altin-parlak)}
.cz .altc{stroke:var(--altin-parlak)}
.cz2 .kapak{transition:transform .8s cubic-bezier(.2,.9,.3,1) .3s}
.cz2 .ic-sik{opacity:0;transition:opacity .6s .75s}
.gel.ic .cz2 .kapak{transform:translateY(38px)}
.gel.ic .cz2 .ic-sik{opacity:1}

/* ---- CZ1: imleç çipe gider, basar, balon açılır (5,2sn döngü) ---------- */
.cz1 .imlec,.cz1 .dalga,.cz1 .balon,.cz1 .cip{opacity:0}
.gel.ic .cz1 .imlec{opacity:1;animation:imlecGit 5.2s cubic-bezier(.4,0,.2,1) infinite}
.gel.ic .cz1 .cip{opacity:1;animation:cipBas 5.2s ease-out infinite}
.gel.ic .cz1 .dalga{animation:dalgaAc 5.2s ease-out infinite}
.gel.ic .cz1 .balon{animation:balonAc 5.2s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes imlecGit{
  0%   {transform:translate(232px,148px) scale(1)}
  26%  {transform:translate(140px,52px) scale(1)}
  32%  {transform:translate(140px,52px) scale(.78)}
  38%  {transform:translate(140px,52px) scale(1)}
  78%  {transform:translate(140px,52px) scale(1);opacity:1}
  92%  {transform:translate(232px,148px) scale(1);opacity:0}
  100% {transform:translate(232px,148px) scale(1);opacity:0}
}
@keyframes cipBas{
  0%,26%  {transform:none}
  31%     {transform:translateY(1.5px) scale(.97)}
  36%,100%{transform:none}
}
@keyframes dalgaAc{
  0%,29%  {opacity:0;transform:scale(.3)}
  33%     {opacity:.9;transform:scale(.8)}
  50%,100%{opacity:0;transform:scale(2.5)}
}
@keyframes balonAc{
  0%,33%  {opacity:0;transform:translateY(-14px) scale(.97)}
  44%     {opacity:1;transform:none}
  82%     {opacity:1;transform:none}
  92%,100%{opacity:0;transform:translateY(-10px) scale(.98)}
}
.cz1 .cip,.cz1 .dalga,.cz1 .balon{transform-box:fill-box;transform-origin:center}
.cz1 .imlec{transform-box:view-box;transform-origin:0 0}

/* ---- CZ4: dört profil "Tek ders"in içinden doğar (6sn döngü) ---------- */
.cz4 .kisi,.cz4 .cekirdek{transform-box:view-box}
.cz4 .kisi{opacity:0}
.cz4 .k1{transform-origin:44px 28px}
.cz4 .k2{transform-origin:256px 28px}
.cz4 .k3{transform-origin:44px 120px}
.cz4 .k4{transform-origin:256px 120px}
.gel.ic .cz4 .k1{animation:cik1 6s cubic-bezier(.25,.9,.3,1) infinite}
.gel.ic .cz4 .k2{animation:cik2 6s cubic-bezier(.25,.9,.3,1) infinite .12s}
.gel.ic .cz4 .k3{animation:cik3 6s cubic-bezier(.25,.9,.3,1) infinite .24s}
.gel.ic .cz4 .k4{animation:cik4 6s cubic-bezier(.25,.9,.3,1) infinite .36s}
@keyframes cik1{0%,6%{opacity:0;transform:translate(106px,48px) scale(.12)}
  30%,88%{opacity:1;transform:none}100%{opacity:0;transform:translate(106px,48px) scale(.12)}}
@keyframes cik2{0%,6%{opacity:0;transform:translate(-106px,48px) scale(.12)}
  30%,88%{opacity:1;transform:none}100%{opacity:0;transform:translate(-106px,48px) scale(.12)}}
@keyframes cik3{0%,6%{opacity:0;transform:translate(106px,-44px) scale(.12)}
  30%,88%{opacity:1;transform:none}100%{opacity:0;transform:translate(106px,-44px) scale(.12)}}
@keyframes cik4{0%,6%{opacity:0;transform:translate(-106px,-44px) scale(.12)}
  30%,88%{opacity:1;transform:none}100%{opacity:0;transform:translate(-106px,-44px) scale(.12)}}
/* çizgiler MERKEZDEN dışarı çiziliyor (x1,y1 artık merkez) */
.cz4 .tel{stroke-dasharray:150;stroke-dashoffset:150}
.gel.ic .cz4 .tel{animation:telCiz 6s cubic-bezier(.25,.9,.3,1) infinite}
.gel.ic .cz4 .t2{animation-delay:.12s}
.gel.ic .cz4 .t3{animation-delay:.24s}
.gel.ic .cz4 .t4{animation-delay:.36s}
@keyframes telCiz{0%,6%{stroke-dashoffset:150}30%,88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:150}}
.gel.ic .cz4 .cekirdek{animation:cekirdekNabiz 6s ease-in-out infinite}
@keyframes cekirdekNabiz{0%,4%{transform:scale(1.14)}16%,100%{transform:scale(1)}}
.cz4 .cekirdek{transform-origin:150px 76px}

/* ---- CZ5: mühür gibi inen damgalar (4,8sn döngü) ---------------------- */
.cz5 .eski{opacity:.36}
.cz5 .damga{opacity:0;transform-box:fill-box;transform-origin:center}
.gel.ic .cz5 .damga-yok{animation:muhur 4.8s cubic-bezier(.3,1.6,.4,1) infinite .4s}
.gel.ic .cz5 .damga-var{animation:muhur 4.8s cubic-bezier(.3,1.6,.4,1) infinite 1.1s}
@keyframes muhur{
  0%      {opacity:0;transform:scale(2.6) rotate(-13deg)}
  9%      {opacity:1;transform:scale(1) rotate(-5deg)}
  12%     {transform:scale(1.06) rotate(-5deg)}
  16%,84% {transform:scale(1) rotate(-5deg);opacity:1}
  94%,100%{opacity:0;transform:scale(1.15) rotate(-5deg)}
}
/* güncellenen satır damga inmeden hemen önce yeşile döner */
.cz5 .taze{opacity:.25}
.gel.ic .cz5 .taze{animation:tazelen 4.8s ease-out infinite}
@keyframes tazelen{0%,18%{opacity:.25;width:56px}
  24%,88%{opacity:1;width:84px}100%{opacity:.25;width:56px}}

@media(max-width:860px){
  .mf-buyuk{grid-template-columns:1fr;gap:2rem;padding:3.6rem 0}
  .mf-buyuk .v-cizim{order:-1}
  .mf-ikili{grid-template-columns:1fr;padding-bottom:3.4rem}
  .mf-serit .serit-ic{grid-template-columns:1fr;gap:2rem;padding:3.4rem 1.3rem}
  .sy-izgara{grid-template-columns:repeat(2,1fr)}
  .ders-tas{grid-template-columns:repeat(5,1fr);max-width:19rem}
  .nokta-izgara{grid-template-columns:repeat(15,1fr);max-width:20rem}
}
@media (prefers-reduced-motion: reduce){
  .ders-tas i,.cz1 .balon,.cz1 .cip,.cz2 .ic-sik,.cz4 .kisi,.cz5 .damga,
  .kad,.v-cizim,.k-cizim{opacity:1!important;transform:none!important;transition:none}
  .cz1 .imlec,.cz1 .dalga{display:none}
  .cz1 .balon,.cz1 .cip,.cz4 .kisi,.cz4 .tel,.cz4 .cekirdek,
  .cz5 .damga,.cz5 .taze{animation:none!important}
  .cz4 .tel{stroke-dashoffset:0!important}
  .cz5 .taze{opacity:1!important}
  #s-hedef .buyuk{animation:none}
  .nokta-izgara i{transform:none;background:rgba(255,255,255,.22)}
  .nokta-izgara i.altin{background:var(--altin-parlak)}
  .cz2 .kapak{transform:translateY(38px)!important}
  .cz4 .tel{stroke-dashoffset:0!important}
  .cz1 .cip{animation:none}
}
/* Hareket istemeyene sıradan, okunur sayfa */
@media (prefers-reduced-motion: reduce){
  .yapisik{position:static;height:auto;padding:3.5rem 0}
  #s1 .ort,#s2 .yazi,#s3 .sat{opacity:1!important;transform:none!important}
  #s2 .serit-d{transform:none!important;flex-wrap:wrap;white-space:normal}
  #s3 .sat .c i{width:var(--w)!important}
  .gel{opacity:1;transform:none;transition:none}
  .kaydir span{animation:none}
}

/* ============================================================== PANEL */
.panel-basi{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:.4rem 0 1.4rem}
.p-ikili{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.2rem 0}
.p-ikili .kart{margin:0}
.esik-kart .sayi{font-family:var(--serif);font-size:2.9rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--lacivert-800);margin:.35rem 0 .2rem}
@media (prefers-color-scheme:dark){.esik-kart .sayi{color:var(--altin)}}
.esik-kart .cubuk{background:var(--cizgi);margin:.8rem 0 0}
.esik-kart .cubuk .hedef{background:var(--altin)}
.adim-kart{display:block;color:var(--metin);margin:0;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s}
.adim-kart:hover{transform:translateY(-3px);box-shadow:var(--golge-lg);
  border-color:rgba(185,130,43,.45);text-decoration:none}

/* ====================================================== DERS KATALOĞU */
.ders-izgara{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  margin:1.8rem 0}
.ders-kart{display:flex;flex-direction:column;gap:.5rem;background:var(--kart);
  border:1px solid var(--cizgi);border-radius:16px;padding:1.15rem 1.2rem 1.1rem;
  box-shadow:var(--golge);color:var(--metin);position:relative;overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s}
.ders-kart:hover{transform:translateY(-4px);box-shadow:var(--golge-lg);
  border-color:rgba(185,130,43,.45);text-decoration:none}
.ders-kart .k-ust{display:flex;align-items:flex-start;justify-content:space-between}
.ders-kart .k-amb{color:var(--altin);display:block}
.ders-kart .k-no{font-family:var(--serif);font-size:1.5rem;font-weight:700;
  color:var(--cizgi);line-height:1;letter-spacing:-.02em}
.ders-kart .k-ad{font-weight:700;font-size:1.03rem;letter-spacing:-.01em;line-height:1.25}
.ders-kart .k-c{height:5px;background:var(--cizgi);border-radius:99px;overflow:hidden}
.ders-kart .k-c i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--altin),var(--altin-parlak))}
.ders-kart .k-alt{color:var(--soluk);font-size:.82rem}
.ders-kart .k-alt b{color:var(--metin)}
.ders-kart .k-dur{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--altin)}
.ders-kart.pasif{opacity:.5;pointer-events:none;box-shadow:none}
.ders-kart.pasif .k-dur{color:var(--soluk)}

/* ======================================================== DERS DETAYI */
.ders-basi{display:flex;align-items:center;gap:1.1rem;margin:.6rem 0 1.4rem}
.ders-basi .db-amb{color:var(--altin);flex-shrink:0;display:block;line-height:0;
  background:var(--altin-soluk);border-radius:16px;padding:.85rem}
.ilerleme-kutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1rem 1.15rem;box-shadow:var(--golge);margin:1.2rem 0 2rem}
.il-ust{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;
  margin-bottom:.55rem}
.ilerleme-kutu .cubuk{margin:0 0 .45rem;background:var(--cizgi)}
.ilerleme-kutu .cubuk i{background:linear-gradient(90deg,var(--altin),var(--altin-parlak))}
.devam{display:block}

/* --- syllabus --- */
.sb-bolum{margin:1.6rem 0;border:1px solid var(--cizgi);border-radius:var(--r);
  overflow:hidden;background:var(--kart);box-shadow:var(--golge)}
.sb-bolum header{padding:.95rem 1.15rem;background:var(--altin-soluk);
  border-bottom:1px solid var(--cizgi)}
.sb-bolum .sb-bno{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--altin)}
.sb-bolum h3{margin:.15rem 0 .1rem;color:var(--metin);font-size:1.06rem;
  text-transform:none;letter-spacing:-.01em}
.sb-bolum .sb-ozet{color:var(--soluk);font-size:.8rem}
.sb-sat{display:flex;align-items:center;gap:.75rem;padding:.68rem 1.15rem;
  border-top:1px solid var(--cizgi);color:var(--metin);font-size:.94rem}
.sb-sat:first-of-type{border-top:0}
.sb-sat:hover{background:var(--altin-soluk);text-decoration:none}
.sb-tik{width:1.2rem;flex-shrink:0;color:var(--cizgi);font-size:1.05rem;line-height:1}
.sb-sat.bitti .sb-tik{color:var(--iyi);font-weight:700}
.sb-sat.bitti .sb-ad{color:var(--soluk)}
.sb-no{font-family:var(--serif);font-size:.82rem;color:var(--altin);font-weight:700;
  width:1.7rem;flex-shrink:0}
.sb-ad{flex:1;font-weight:600}
.sb-kel{color:var(--soluk);font-size:.78rem;white-space:nowrap}

/* ================================================== OKUMA + SOL AĞAÇ */
body.okuma main{max-width:none;padding:0}
.okuma-duzen{display:grid;grid-template-columns:17.5rem minmax(0,1fr);
  gap:0;align-items:start}
.agac{position:sticky;top:54px;height:calc(100vh - 54px);overflow-y:auto;
  border-right:1px solid var(--cizgi);padding:1.1rem .85rem 3rem;background:var(--kart)}
.agac h4{margin:0 0 .7rem;font-size:.7rem;letter-spacing:.1em}
.agac .ag-bolum{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--altin);margin:1.1rem 0 .35rem;padding:0 .45rem}
.agac a{display:flex;gap:.5rem;align-items:baseline;padding:.4rem .5rem;border-radius:8px;
  color:var(--metin);font-size:.855rem;line-height:1.35}
.agac a:hover{background:var(--altin-soluk);text-decoration:none}
.agac a.simdi{background:var(--lacivert-800);color:#fff;font-weight:600}
.agac a.simdi .ag-no{color:var(--altin-parlak)}
.agac a.bitti .ag-ad{color:var(--soluk)}
.agac .ag-no{font-family:var(--serif);font-size:.74rem;font-weight:700;color:var(--altin);
  min-width:1.35rem;flex-shrink:0}
.agac .ag-ad{flex:1}
.agac .ag-tik{color:var(--iyi);font-size:.8rem}
/* width:100% ŞART (Cihan, 15.09.2026). "margin:0 auto" bir ızgara öğesinde
   otomatik kenar boşluğu demektir ve öğeyi İÇERİĞİNE göre boyutlandırır:
   geniş tablosu olan başlıkta sütun 390px olsa bile gövde 569px'e çıkıyor,
   sayfa sağa kayıyordu. width:100% öğeyi sütuna kilitler; max-width geniş
   ekranda okuma genişliğini, margin auto ortalamayı korur. Tablo artık
   kendi kutusunda yatay kayıyor. */
.okuma-govde{width:100%;max-width:44rem;margin:0 auto;
  padding:1.9rem 1.4rem 6rem;min-width:0}
.agac-ac{display:none}
@media(max-width:900px){
  /* minmax(0,1fr) — DÜZ "1fr" DEĞİL (Cihan, 15.09.2026). Düz 1fr aslında
     minmax(auto,1fr) demektir: sütun, içindeki en geniş şeyin sığacağı kadar
     BÜYÜR. Geniş tablosu olan başlıklarda sütun 390px yerine 540px oluyor ve
     bütün sayfa sağa kayıyordu. Ölçüldü: 114 başlık sayfasının 37'si taşıyordu
     (hem Medeni hem Borçlar; derse özel değil). Masaüstü kuralında zaten
     minmax(0,1fr) yazıyordu, yalnız mobil kural unutulmuştu. */
  .okuma-duzen{grid-template-columns:minmax(0,1fr)}
  .agac{position:static;height:auto;border-right:0;border-bottom:1px solid var(--cizgi);
    max-height:60vh;display:none}
  .agac.acik{display:block}
  .agac-ac{display:flex;align-items:center;gap:.5rem;width:100%;font:inherit;font-size:.9rem;
    font-weight:600;background:var(--kart);border:0;border-bottom:1px solid var(--cizgi);
    padding:.75rem 1.1rem;cursor:pointer;color:var(--metin);position:sticky;top:54px;z-index:20}
  .okuma-govde{padding:1.4rem 1rem 4rem}
}