/* =====================================================================
   REFLO — ORTAK GÖRÜNÜM
   =====================================================================
   NİÇİN AYRI DOSYA (24.09.2026)
     Bu kurallar oyunun index.html'inin içindeydi. Admin ekranı kendi
     sayfasına çıkarılıyor ve AYNI görünümü kullanacak. İki yere
     kopyalarsak bir gün ayrışırlar ve kimse fark etmez; o yüzden tek
     kaynak burası. Hem oyun hem admin bu dosyayı bağlar.

     Taşıma sırasında TEK BİR KARAKTER değişmedi — yalnız yeri değişti.
   ===================================================================== */
/* Dünya: her ünite Türkiye'den bir yer. Balonlar serbest uçar, doğru olanı yakalarsın.
   Tek görsel dünyaya bağlı tasarım — tema değişimi yok, her renk açıkça tanımlı.
   Gökyüzü renkleri JS tarafından üniteye göre, gökyüzü olayları rütbeye göre değişir. */
:root{
  --sky1:#160F33; --sky2:#3C2160; --sky3:#8E4370; --sky4:#D9736A; --sky5:#F2A75C;
  --sun:#FFD98E;
  --ink:#FFF7EC; --ink-dim:rgba(255,247,236,.64); --ink-faint:rgba(255,247,236,.15);
  --line:rgba(255,247,236,.24);
  --panel:rgba(16,11,38,.76);
  --mint:#7BD6A4; --coral:#FF7A6B; --heat:#FFC94D; --rank:#FFF7EC;
  /* Karnenin iki rengi: yeşil YAPILAN, kırmızı YAPILMAYAN. Hem CSS
     hem JS buradan okuyor ki bir gün ayrışmasınlar. */
  /* KARNE RENKLERİNİN ANLAMI — üçü de ayrı şey söylüyor:
       yeşil   = yapıldı / doğru
       kırmızı = YANLIŞ yapıldı
       gri     = HİÇ YAPILMADI
     Üçüncüsü eskiden yoktu: yapılmayan bölümler de kırmızı
     çiziliyordu ve veli "çocuğum bunları yanlış yapmış" sanıyordu.
     Oysa hiç girmemişti. Bilinmeyeni hatayla aynı renge boyamak
     yanlış bilgi vermek. */
  --karne-yesil:#7BD6A4; --karne-kirmizi:#FF5C4D; --karne-gri:#3E3757;
  --display:"Baloo 2","Segoe UI",system-ui,sans-serif;
  --body:"Familjen Grotesk","Segoe UI",system-ui,sans-serif;
}
*{ box-sizing:border-box; }

body{
  margin:0; min-height:100dvh; color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 30%,var(--sky3) 56%,var(--sky4) 78%,var(--sky5) 100%);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------------- manzara ---------------- */
.scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.stars{ position:absolute; inset:0 0 48% 0; transition:opacity .8s ease; }
.stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:var(--ink); animation:twinkle 4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.12 } 50%{ opacity:.8 } }

.sun{
  position:absolute; width:230px; height:230px; margin:-115px 0 0 -115px; border-radius:50%;
  background:radial-gradient(circle,var(--sun) 0 13%,rgba(255,255,255,.34) 26%,rgba(255,255,255,.13) 44%,rgba(255,255,255,0) 72%);
  opacity:.8; animation:sunpulse 7s ease-in-out infinite; transition:left .8s ease, top .8s ease;
}
@keyframes sunpulse{ 0%,100%{ transform:scale(1); opacity:.92 } 50%{ transform:scale(1.07); opacity:1 } }

.drift{ position:absolute; border-radius:50% 50% 44% 44%/58% 58% 42% 42%; opacity:.62; filter:drop-shadow(0 4px 8px rgba(10,6,26,.35)); animation:rise linear infinite }
.drift::after{ content:""; position:absolute; left:50%; bottom:-19%; width:26%; height:16%; transform:translateX(-50%); background:#5A3B22; border-radius:1px; }
@keyframes rise{
  0%{ transform:translateY(20vh) translateX(0) } 50%{ transform:translateY(-40vh) translateX(14px) }
  100%{ transform:translateY(-105vh) translateX(-8px) }
}

.ridge{ position:absolute; left:0; right:0; bottom:0; width:100%; display:block; }
.haze{ position:absolute; left:0; right:0; pointer-events:none }
.haze.h1{ bottom:26vh; height:12vh; background:linear-gradient(180deg,transparent,rgba(255,247,236,.16),transparent) }
.haze.h2{ bottom:16vh; height:10vh; background:linear-gradient(180deg,transparent,rgba(255,247,236,.12),transparent) }
.cloud{ position:absolute; border-radius:50%; background:rgba(255,247,236,.16); filter:blur(14px); animation:cdrift linear infinite }
@keyframes cdrift{ 0%{ transform:translateX(-32vw) } 100%{ transform:translateX(132vw) } }
.vig{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 50% 55%, transparent 42%, rgba(6,4,18,.44) 100%) }
.ridge.far{ height:33vh; opacity:.62 } .ridge.mid{ height:25vh; opacity:.85 } .ridge.near{ height:18vh }

/* rütbe gökyüzü olayları */
.aura{ position:absolute; inset:0; }
.bird{ position:absolute; color:rgba(20,12,40,.72); animation:cross 26s linear infinite; }
.bird svg{ display:block }
@keyframes cross{ 0%{ transform:translateX(-14vw) translateY(0) } 50%{ transform:translateX(50vw) translateY(-22px) } 100%{ transform:translateX(114vw) translateY(4px) } }
.flash{ position:absolute; inset:0; background:rgba(255,255,255,.55); opacity:0; animation:flash 9s ease-out infinite; }
@keyframes flash{ 0%,86%{ opacity:0 } 88%{ opacity:.5 } 90%{ opacity:.05 } 92%{ opacity:.38 } 96%,100%{ opacity:0 } }
.aurora{
  position:absolute; left:-20%; width:140%; height:120px; filter:blur(26px); opacity:.5;
  background:linear-gradient(90deg,transparent,var(--heat),transparent); animation:wave 14s ease-in-out infinite;
}
@keyframes wave{ 0%,100%{ transform:translateY(0) rotate(-4deg) } 50%{ transform:translateY(-26px) rotate(3deg) } }
.dragon{ position:absolute; color:rgba(18,10,36,.8); animation:soar 30s linear infinite; }
.dragon svg{ display:block; animation:flap 2.4s ease-in-out infinite }
@keyframes soar{ 0%{ transform:translateX(-24vw) translateY(10px) scale(.85) } 50%{ transform:translateX(45vw) translateY(-40px) scale(1.05) } 100%{ transform:translateX(120vw) translateY(6px) scale(.85) } }
@keyframes flap{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.72) } }

/* oyuncu karakteri */
.hero{ position:absolute; right:6%; bottom:7.5vh; width:96px; display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--rank); }
.hero .mark{ width:28px; height:28px; opacity:.95; filter:drop-shadow(0 0 9px currentColor); animation:hover 3.4s ease-in-out infinite; }
.hero .mark svg{ width:100%; height:100% }
.hero .body{ width:92px; height:138px; filter:drop-shadow(0 5px 12px rgba(0,0,0,.55)); }
.hero .body svg{ width:100%; height:100%; display:block }
.hero .body .cape{ transform-origin:48px 44px; animation:capeflow 4.2s ease-in-out infinite }
@keyframes capeflow{ 0%,100%{ transform:skewX(0deg) } 50%{ transform:skewX(-4deg) } }
@keyframes hover{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.hero.cheer .body{ animation:cheer .55s cubic-bezier(.34,1.56,.64,1) }
@keyframes cheer{ 0%{ transform:translateY(0) scale(1) } 40%{ transform:translateY(-18px) scale(1.08) } 100%{ transform:translateY(0) scale(1) } }
.hero.sad .body{ animation:sad .6s ease-out }
@keyframes sad{ 0%{ transform:translateY(0) } 30%{ transform:translateY(7px) scaleY(.9) } 100%{ transform:translateY(0) } }

/* ---------------- kabuk ---------------- */
.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding-inline:16px; padding-block:18px; min-height:100dvh; display:flex; flex-direction:column; }
.wrap.shake{ animation:shake .36s cubic-bezier(.36,.07,.19,.97) }
@keyframes shake{ 10%,90%{ transform:translateX(-3px) } 20%,80%{ transform:translateX(5px) } 30%,50%,70%{ transform:translateX(-8px) } 40%,60%{ transform:translateX(8px) } }
section{ display:flex; flex-direction:column }

.eyebrow{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); font-weight:600 }

/* marka */
.logo{ display:flex; align-items:center; gap:13px; margin-top:4px }
.logomark{ width:clamp(42px,11vw,56px); height:clamp(42px,11vw,56px); flex:none; color:var(--heat); filter:drop-shadow(0 3px 12px rgba(255,201,77,.45)) }
.logomark svg{ width:100%; height:100%; display:block }
.logotype{
  font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,12vw,4.4rem);
  letter-spacing:.01em; line-height:.9;
  text-shadow:0 3px 0 rgba(16,11,38,.4), 0 10px 30px rgba(16,11,38,.55);
}
.tag{ font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,4.2vw,1.3rem); color:var(--heat); margin:10px 0 0 }

/* üst kapılar */
.doorrow{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap }
.door2{
  flex:1 1 160px; display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  font-family:var(--body); color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:13px 15px;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.door2:hover{ transform:translateY(-2px); border-color:var(--heat); background:rgba(255,247,236,.12) }
.door2 svg{ width:20px; height:20px; color:var(--heat); flex:none }
.door2 span{ display:flex; flex-direction:column; min-width:0 }
.door2 b{ font-family:var(--display); font-weight:700; font-size:.94rem; letter-spacing:-.01em; line-height:1.15; white-space:nowrap }
.door2 i{ font-style:normal; font-size:.76rem; color:var(--ink-dim) }

/* kalıcı üst bar */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:9px;
  margin:-18px -16px 6px; padding:10px 16px 12px;
  background:linear-gradient(180deg, rgba(16,11,38,.86), rgba(16,11,38,.58) 66%, rgba(16,11,38,0));
  backdrop-filter:blur(10px);
}
.brandmini{ display:flex; align-items:center; gap:8px; background:none; border:0; padding:4px 2px;
  cursor:pointer; color:var(--ink); font-family:var(--display) }
.brandmini svg{ width:23px; height:23px; color:var(--heat); flex:none }
.brandmini b{ font-size:1rem; font-weight:800; letter-spacing:.03em }
.topbar .sp{ flex:1 }
.door3{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 13px;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.door3:hover{ border-color:var(--heat); background:rgba(255,247,236,.12); transform:translateY(-1px) }
.door3.on{ border-color:var(--heat); color:var(--heat) }
.door3 svg{ width:15px; height:15px; flex:none }
.door3.vurgu{ border-color:rgba(255,201,77,.55); background:rgba(255,201,77,.14); color:var(--heat) }
.door3.vurgu:hover{ background:rgba(255,201,77,.24) }
@media (max-width:470px){
  .brandmini b{ display:none }
  .topbar{ gap:6px }
  .door3{ padding:8px 10px; font-size:.76rem; gap:5px }
}
/* EŞİK 380 -> 560. Şeritte üç düğme varken 390px'e tam oturuyordu
   (27+132+111+74 = 390, tek piksel pay yok). Dördüncü düğme "Veli"
   eklenince 456px'e çıktı ve gövde 390'a sığmayınca SAYFANIN TAMAMI
   yana kaydı — giriş, karargâh ve oyun ekranları dahil. Hata üst
   şeritteydi ama her ekranda görünüyordu.
   Yeni eşik, yazıların sığdığı en dar noktanın (dört düğme için
   ~560px) hemen altından başlıyor. Ölçüm ekran-denetimi.js'te. */
@media (max-width:560px){
  /* Dört düğme yazılarıyla sığmıyor: yazılar gidiyor, simgeler kalıyor.
     "Giriş" en çok kullanılan olduğu için yazısı korunuyor. */
  .door3{ padding:8px 9px; gap:0; font-size:0 }
  .door3 svg{ width:17px; height:17px }
  #to-kod{ font-size:.76rem; gap:5px; padding:8px 11px }
}

/* toplu yükleme */
.drop{
  border:2px dashed var(--ink-faint); border-radius:14px; padding:24px 18px; text-align:center;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.drop:hover,.drop.over{ border-color:var(--heat); background:rgba(255,201,77,.09) }
.drop .ic{ width:30px; height:30px; color:var(--heat); margin:0 auto 8px; display:block }
.drop b{ display:block; font-family:var(--display); font-size:.98rem }
.drop small{ display:block; font-size:.79rem; color:var(--ink-dim); margin-top:5px }
.uprep{ font-size:.87rem; line-height:1.65; border-left:3px solid var(--heat); padding-left:12px; color:var(--ink-dim); margin:0 }
.uprep b{ color:var(--ink) }
.uprep small{ display:block; margin-top:6px; font-size:.78rem; opacity:.85 }
.uprep.bad{ border-left-color:var(--coral) }
.errline{ color:var(--coral); font-size:.85rem; margin:0; font-weight:600 }
.okline{ color:var(--mint); font-size:.85rem; margin:0; font-weight:600 }
/* yönetici paneli */
.ikili{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:460px){ .ikili{ grid-template-columns:1fr } }
.sayac{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:10px; margin-top:16px }
.sayac .s{ background:rgba(255,255,255,.05); border:1px solid var(--ink-faint); border-radius:12px;
  padding:11px 13px; display:flex; flex-direction:column; gap:2px }
.sayac .s b{ font-family:var(--display); font-size:1.32rem; line-height:1.1 }
.sayac .s span{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim) }
.rtab .kodcell{ font-family:var(--mono,ui-monospace,monospace); letter-spacing:.1em; color:var(--heat) }
.rtab .rozet{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  border-radius:5px; padding:2px 7px; background:rgba(255,255,255,.08); color:var(--ink-dim) }
.rtab .rozet.var{ background:rgba(126,232,199,.15); color:var(--mint) }
.rtab .rozet.yok{ background:rgba(255,122,107,.15); color:var(--coral) }
.rtab .rozet.ara{ background:rgba(255,201,77,.18); color:var(--heat) }
.rtab td.islem{ white-space:normal; min-width:132px }
.rtab td.islem .linkish{ font-size:.78rem }
.linkish.tehlike{ color:var(--coral) }
.linkish.vurgu{ color:var(--heat); font-weight:700 }
.btn.uyar{ border-color:var(--coral); color:var(--coral) }
.rtab tr.silmod td{ background:rgba(255,122,107,.08) }
.silsor{ font-size:.78rem; color:var(--ink-dim); display:inline-flex; flex-wrap:wrap; gap:4px; align-items:baseline }
.onay{ display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--ink-dim);
  margin-top:9px; cursor:pointer; line-height:1.5 }
.onay input{ width:17px; height:17px; margin:2px 0 0; flex:none; accent-color:var(--heat) }
.onay b{ color:var(--ink) }
.demolist{ display:flex; flex-direction:column; gap:10px }
.demolist .dt{ border:1px solid var(--ink-faint); border-radius:12px; padding:12px 14px;
  display:flex; flex-direction:column; gap:3px }
.demolist .dt b{ font-family:var(--display); font-size:1rem }
.demolist .dt .m{ font-size:.84rem; color:var(--ink-dim) }
.demolist .dt .t{ font-size:.72rem; color:var(--ink-faint); letter-spacing:.04em }
.shake{ animation:shk .38s }
@keyframes shk{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.tchip{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-dim);
  background:rgba(16,11,38,.55); border:1px solid var(--line); border-radius:999px; padding:6px 12px }
.tchip b{ color:var(--ink); font-family:var(--display) }
.codebox{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--heat); border-radius:12px; padding:14px 16px; background:rgba(255,201,77,.08) }
.codebox .lbl{ display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim) }
.codebox b{ font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:.16em; color:var(--heat); line-height:1.15 }
.codebox small{ flex-basis:100%; font-size:.78rem; color:var(--ink-dim) }
.busy{ opacity:.55; pointer-events:none }
.tablewrap{ overflow-x:auto; margin-inline:-4px }
/* DAR EKRANDA TABLO -> KART.
   Öğretmen tablosunda yedi sütun var ve hepsi en dar hâlinde bile
   750px istiyor; 768px'lik bir tablette ya da telefonda bu tabloya
   YANA KAYDIRMA çubuğu takmak demek. Yatay kaydırma bir tabloyu
   okunmaz yapıyor: göz satır başını kaybediyor, hangi sütuna baktığını
   unutuyor. Bu yüzden dar ekranda satırlar kart oluyor: her hücre alt
   alta, başlığı solunda. Sütun başlığı satırı gizleniyor, çünkü
   başlıklar artık hücrelerin yanında. */
/* EŞİK 999 -> 1149. İki sütunlu ızgara 1000px'te başlıyor ve orada
   her panele ancak ~427px düşüyor; beş sütunlu okul/şube tabloları
   o genişliğe sığmayıp yine yana kaydırma çubuğu çıkarıyordu. Kart
   düzeni, panelin gerçekten genişlediği noktaya kadar sürüyor. */
@media (max-width:1149px){
  .rtab.kart, .rtab.kart tbody, .rtab.kart tr, .rtab.kart td{ display:block; width:auto }
  .rtab.kart{ min-width:0 }
  .rtab.kart thead{ display:none }
  .rtab.kart tr{ border:1px solid var(--line); border-radius:12px;
    padding:10px 12px; margin-bottom:10px; background:rgba(0,0,0,.18) }
  .rtab.kart td{ border-top:0; padding:4px 0; white-space:normal }
  .rtab.kart td[data-l]:not([data-l=""])::before{
    content:attr(data-l); display:block; font-size:.7rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-dim); font-weight:600; margin-bottom:1px }
  .rtab.kart td:first-child{ font-size:1.05rem }
  .rtab.kart td.islem{ padding-top:8px; border-top:1px solid var(--ink-faint); margin-top:6px }
  .rtab.kart .bos{ border:0; background:none }
}
/* ---- BÖLÜM RAPORU (çok dersli) ----
   46 satırlık tablo telefonda okunmuyordu: önce sınıfın zorlandığı
   bölümler, sonra açılır menüden tek bölümün ayrıntısı. */
.brapor{ display:grid; grid-template-columns:repeat(auto-fit,minmax(86px,1fr)); gap:8px; margin:12px 0 }
.brapor div{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center }
.brapor b{ display:block; font-family:var(--display); font-size:1.12rem; font-variant-numeric:tabular-nums }
.brapor span{ font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim) }
.brapor .zayif b{ color:var(--coral) }
.brapor .iyi b{ color:var(--mint) }
.bzor{ display:flex; flex-direction:column; gap:6px; margin:10px 0 14px }
.bzor button{ text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; color:inherit; font:inherit; cursor:pointer; min-height:44px; line-height:1.35 }
.bzor button i{ font-style:normal; color:var(--coral); float:right; margin-left:10px; white-space:nowrap }
.bzor .bos{ color:var(--ink-dim); font-size:.86rem; margin:0 }
.dersnot{ color:var(--ink-dim); font-size:.88rem; line-height:1.5 }
.rtab{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:360px }
.rtab th{ text-align:left; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600; padding:0 8px 8px 0; white-space:nowrap }
.rtab td{ padding:9px 8px 9px 0; border-top:1px solid var(--ink-faint); white-space:nowrap }
.rtab td:first-child{ white-space:normal; min-width:108px }
.rtab th:last-child,.rtab td:last-child{ padding-right:0 }
.rtab .ad{ font-weight:600 }
.rtab .yz{ color:var(--heat); letter-spacing:.06em; font-variant-numeric:tabular-nums }
.rtab .sessiz{ color:var(--ink-faint) }
.rtab tr.hic td{ color:var(--ink-faint) }
.rtab .bos{ text-align:center; color:var(--ink-faint); padding:18px 0 }
.zorlist{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
.zorlist .w{ display:inline-flex; align-items:baseline; gap:7px; font-size:.86rem;
  background:rgba(255,122,107,.12); border:1px solid rgba(255,122,107,.32);
  border-radius:999px; padding:6px 12px }
.zorlist .w b{ color:var(--coral); font-family:var(--display); letter-spacing:.03em }
.zorlist .w i{ font-style:normal; color:var(--ink-dim); font-size:.76rem }

/* ---------------- SINIF KARNESİ ----------------
   Halkanın dolu yayı TAMAMLANAN bölümlerin oranı. Renk oranla
   birlikte kayıyor: azken kırmızı, artınca yeşile dönüyor. Kalan
   kısım sönük kırmızı — "burası daha yapılmadı" demek. */
.donutlar{ display:grid; gap:12px; margin-top:6px;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr)) }
.dnt{ display:flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 8px 12px; cursor:pointer; text-align:center;
  font-family:var(--body); color:var(--ink); appearance:none; -webkit-appearance:none;
  transition:border-color .15s, transform .15s, background .15s }
.dnt:hover{ border-color:var(--heat); transform:translateY(-2px) }
.dnt.secili{ border-color:var(--heat); background:rgba(255,201,77,.1) }
/* HİÇ BAŞLANMAMIŞ DERS: halka tamamen gri ve kart soluk. Kırmızı
   olduğu sürece "yanlış yapılmış" gibi okunuyordu. */
.dnt.bos{ opacity:.62 }
.dnt.bos .yuz{ color:var(--ink-dim) }
.dnt svg{ width:76px; height:76px; flex:none; transform:rotate(-90deg) }
.dnt .cember{ fill:none; stroke-width:9; stroke-linecap:butt }
.dnt .yuz{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink) }
.dnt .ad{ font-size:.82rem; font-weight:600; line-height:1.15 }
.dnt .alt{ font-size:.71rem; color:var(--ink-dim); line-height:1.25 }
.dnt .halka-yazi{ transform:rotate(90deg); transform-origin:center;
  font-family:var(--display); font-weight:700; font-size:20px; fill:var(--ink) }

.kbar{ display:flex; flex-direction:column; gap:9px; margin-top:4px }
.kbar .sr{ display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:baseline }
.kbar .nm{ font-size:.86rem; font-weight:600 }
.kbar .sy{ font-size:.76rem; color:var(--ink-dim); white-space:nowrap }
/* AZ VERİ — bir soru tipi yalnızca birkaç kez denenmişse çubuk
   YEŞİL BOYANMAZ. Sebebi: "Gölge eşleştirme · 0 / 1" tek doğru cevapla
   ekranda 56 sorunun hepsini bilmiş bir satırla birebir aynı
   görünüyordu; veli de öğretmen de bunu ustalık sanıyordu. Oran
   doğruydu ama DAYANAĞI yoktu. Az denemede çubuk griye düşüyor ve
   yanında "az veri" yazıyor — hüküm vermek için erken demek. */
.kbar .sr.az .yol{ background:var(--karne-gri) }
.kbar .sr.az .dol{ background:#5B5480 }
.kbar .sr.az .nm{ color:var(--ink-dim) }
.kbar .azv{ display:inline-block; margin-left:7px; padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-dim); font-size:.72rem;
  font-weight:600; letter-spacing:.02em; vertical-align:middle }
/* Çubuk boş bir ray değil, DOLU bir oran çubuğu: yeşil kısım doğru,
   kırmızı kısım yanlış cevapların payı. Eskiden ray gri, yalnızca
   yanlış payı renkliydi; "%37 yanlış" yazısının altında %37'lik ince
   bir çizgi vardı ve doğru oranı hiçbir yerde görünmüyordu. */
.kbar .yol{ grid-column:1 / -1; height:9px; border-radius:999px;
  background:var(--karne-kirmizi); overflow:hidden }
/* display:block ŞART. .dol bir <span>; satır içi öğede width ve height
   yok sayılır, dolayısıyla yeşil kısım hiç çizilmiyordu. Ray eskiden
   gri olduğu için fark edilmemişti: çubuk boş görünüyordu ama "boş ray"
   sanılıyordu. Ray kırmızı olunca hepsi kıpkırmızı çıktı ve hata
   ortaya döküldü. */
.kbar .dol{ display:block; height:100%; background:var(--karne-yesil);
  border-radius:999px 0 0 999px }

.kogr{ margin-top:6px; border-top:1px solid var(--ink-faint) }
.kogr .st{ border-bottom:1px solid var(--ink-faint) }
.kogr .bas{ display:grid; grid-template-columns:28px 1fr auto; gap:10px;
  align-items:center; padding:11px 2px; cursor:pointer }
.kogr .bas:hover{ background:rgba(255,255,255,.04) }
.kogr .arti{ width:24px; height:24px; border-radius:7px; border:1px solid var(--line);
  background:transparent; color:var(--ink); font-size:1rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-family:var(--display); padding:0; flex:none }
.kogr .st.acik .arti{ border-color:var(--heat); color:var(--heat) }
.kogr .ad{ font-size:.9rem; font-weight:600 }
.kogr .ad small{ display:block; font-weight:400; font-size:.74rem; color:var(--ink-dim) }
.kogr .sag{ font-size:.8rem; color:var(--ink-dim); text-align:right; white-space:nowrap }
.kogr .sag b{ color:var(--ink); font-family:var(--display) }
.kogr .sag .zayif{ color:var(--coral) }
.kogr .sag .iyi{ color:var(--mint) }
.kogr .ic{ padding:4px 2px 16px 30px }
.kogr h6{ margin:14px 0 8px; font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:600 }
.kogr .dal{ border-left:2px solid var(--ink-faint); padding-left:12px; margin-bottom:6px }
.kogr .dal .bas2{ display:grid; grid-template-columns:22px 1fr auto auto; gap:10px;
  align-items:center; padding:9px 0; cursor:pointer; font-size:.95rem }
.kogr .dal .bas2:hover{ color:var(--heat) }
.kogr .dal .arti2{ width:22px; height:22px; border-radius:6px; border:1px solid var(--line);
  background:transparent; color:inherit; font-size:.8rem; line-height:1; padding:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none }
.kogr .dal .ky{ font-size:.82rem; color:var(--coral); white-space:nowrap }
/* Karnede bölüm satırının en sağı: bu bölümü bu çocuğa ödev ver */
.kogr .k-odev{ font-family:var(--body); font-size:var(--p-kucuk, .9rem); font-weight:600;
  color:var(--heat); background:transparent; border:1px solid rgba(255,201,77,.45);
  border-radius:999px; padding:5px 12px; cursor:pointer; white-space:nowrap }
.kogr .k-odev:hover{ background:rgba(255,201,77,.16) }
.kogr .k-odev:disabled{ cursor:default; opacity:.8 }
.kogr .k-odev.tamam{ color:var(--mint); border-color:rgba(123,214,164,.5) }
/* Telefonda dört sütun sığmıyor: düğme ekranı taşırıp bölüm adını
   harf harf alt alta itiyordu (390px'te ölçüldü). Orada düğme kendi
   satırına iniyor, yine sağa yaslı. */
@media (max-width:560px){
  .kogr .dal .bas2{ grid-template-columns:22px 1fr auto; row-gap:6px }
  .kogr .k-odev{ grid-column:2 / -1; justify-self:end }
}
.kogr .sorular{ margin:2px 0 10px; padding:0 0 0 30px; list-style:none }
.kogr .sorular li{ font-size:.92rem; line-height:1.55; padding:7px 0;
  border-bottom:1px dashed var(--ink-faint) }
.kogr .sorular li:last-child{ border-bottom:0 }
.kogr .sorular .tip{ font-size:.78rem; color:var(--ink-dim); display:block; margin-top:2px }
.kogr .sorular .kez{ color:var(--coral); font-size:.82rem; font-weight:600 }
.kogr .bosnot{ font-size:.9rem; color:var(--ink-dim); margin:6px 0 12px; line-height:1.5 }

/* ---------------- VELİ EKRANI ----------------
   Çocuk sekmeleri: ikiz velisi iki çocuk arasında buradan geçiyor.
   Tek çocuğu olan veli bu şeridi hiç görmüyor (JS gizliyor) —
   tek sekmeli bir sekme şeridi kullanıcıya soru sordurur. */
.cocuk-sek{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.cocuk-sek button{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:9px 15px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--ink-dim); cursor:pointer;
  font:inherit; text-align:left; transition:.16s }
.cocuk-sek button b{ font-size:.94rem; font-weight:600; color:var(--ink-dim) }
.cocuk-sek button small{ font-size:.72rem; letter-spacing:.02em }
.cocuk-sek button:hover{ border-color:var(--heat) }
.cocuk-sek button.secili{ border-color:var(--heat); background:rgba(255,201,77,.1); color:var(--ink) }
.cocuk-sek button.secili b{ color:var(--ink) }
/* Velide öğrenci satırı yok, dallar doğrudan geliyor: .kogr'un
   liste görünümünden kalan üst çizgisini burada kaldırıyoruz. */
#v-bolum{ border-top:0; padding-top:2px }
/* Çocuğun adı sayfanın öznesi: etiket değil başlık boyutunda. */
.v-ad{ font-family:var(--display); font-size:calc(1.45rem * var(--p-zoom, 1)); font-weight:800;
  line-height:1.15; margin:0; color:var(--ink); letter-spacing:.01em }
@media (max-width:460px){ .v-ad{ font-size:1.25rem } }

/* ============ PANEL EKRANLARINDA YAZI ÖLÇÜSÜ ============
   Bütün ölçüler oyun ekranından miras kalmıştı. Oyun çocuk için
   tasarlandı: ekranda az yazı var, punto zaten büyük. Panel
   ekranları ise YETİŞKİNİN UZUN UZUN OKUDUĞU yerler ve oralarda aynı
   küçük ölçüler duruyordu — tablo .88rem, sütun başlığı .60rem,
   alan etiketi .68rem, açıklama .85rem. AFA iki kez "büyüteç lazım"
   dedi; haklı.

   KAPSAM: yalnızca öğretmen paneli, yönetim paneli, veli ekranı ve
   şifre kurulum ekranı. Oyunun hiçbir ölçüsüne dokunulmuyor —
   :is() ile o dört bölüme kilitli. Telefon dahil her genişlikte
   geçerli; küçük yazı dar ekranda daha da zor okunuyor. */
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum){
  /* PANEL EKRANLARININ YAZI ÖLÇEĞİ — TEK ÇARPAN.
     AFA tarayıcıyı %90 yakınlıkta kullanıyor (böylece ekrana daha çok
     şey sığıyor). %90'da 16px'lik bir yazı gerçekte 14.4px çiziliyor;
     bu yüzden "16px yaptım" demek yetmiyordu, ekranda hâlâ küçüktü.
     Çözüm: tasarım ölçülerini 1/0.90 ile çarpmak. Böylece o %90'da
     otururken gövde metni yine 16px olarak görünüyor.
        --p-zoom tek ayar noktası. Başka bir yakınlığa geçerse
        yalnızca bu sayı değişir, aşağıdaki hiçbir satıra
        dokunulmaz. */
  --p-zoom:1.11;
  --p-kucuk : calc( .94rem * var(--p-zoom));   /* ikincil metin   */
  --p-orta  : calc(1.02rem * var(--p-zoom));   /* gövde metni     */
  --p-buyuk : calc(1.06rem * var(--p-zoom));   /* tablo gövdesi   */
  --p-etiket: calc( .88rem * var(--p-zoom));   /* alan etiketi    */
  --p-basl  : calc( .86rem * var(--p-zoom));   /* bölüm başlığı   */
}
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .eyebrow{ font-size:var(--p-basl); letter-spacing:.13em }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .count{ font-size:var(--p-kucuk) }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .hint{ font-size:var(--p-orta); line-height:1.6 }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .privacy{ font-size:var(--p-kucuk); line-height:1.6 }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .uprep{ font-size:var(--p-orta) }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .errline,
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .okline{ font-size:var(--p-orta) }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .linkish{ font-size:var(--p-orta) }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .tchip{ font-size:var(--p-kucuk) }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .rtab{ font-size:var(--p-buyuk) }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .rtab th{ font-size:var(--p-basl); letter-spacing:.08em }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .field label{ font-size:var(--p-etiket); letter-spacing:.09em }
:is(#screen-setup, #screen-admin, #screen-veli, #screen-kurulum) .field small{ font-size:var(--p-kucuk) }
/* Karne bileşenleri: halka, çubuk, öğrenci listesi. */
:is(#screen-setup, #screen-veli) .dnt .yuz{ font-size:calc(1.12rem * var(--p-zoom)) }
:is(#screen-setup, #screen-veli) .dnt .ad{ font-size:var(--p-kucuk) }
:is(#screen-setup, #screen-veli) .dnt .alt{ font-size:calc(.8rem * var(--p-zoom)) }
:is(#screen-setup, #screen-veli) .kbar .nm{ font-size:var(--p-orta) }
:is(#screen-setup, #screen-veli) .kbar .sy{ font-size:calc(.84rem * var(--p-zoom)) }
:is(#screen-setup, #screen-veli) .kogr h6{ font-size:var(--p-basl) }
:is(#screen-setup, #screen-veli) .kogr .ad{ font-size:var(--p-orta) }
:is(#screen-setup, #screen-veli) .kogr .ad small{ font-size:calc(.84rem * var(--p-zoom)) }
:is(#screen-setup, #screen-veli) .kogr .sag{ font-size:var(--p-kucuk) }
:is(#screen-setup, #screen-veli) .kogr .dal .ky{ font-size:var(--p-kucuk) }
:is(#screen-setup, #screen-veli) .kogr .sorular li{ font-size:var(--p-orta) }
:is(#screen-setup, #screen-veli) .kogr .sorular .tip{ font-size:calc(.84rem * var(--p-zoom)) }
:is(#screen-setup, #screen-veli) .kogr .bosnot{ font-size:var(--p-orta) }
/* Markupta satır içi yazılmış bölüm başlıkları (.68rem) — onları da
   buradan büyütüyoruz ki tek yerden yönetilsin. */
:is(#screen-setup, #screen-veli) .kyari > h6{ font-size:var(--p-basl) !important }

/* =================== GENİŞ EKRAN: ÖĞRETMEN PANELİ ===================
   Bütün ekranlar tek bir 760px'lik sütunda duruyor; oyun için doğru,
   öğretmen paneli için değil. Öğretmen bunu dizüstünde açıyor ve
   ekranın üçte ikisi boş kalıyordu — yazıları büyütmek yerine yeri
   kullanmak lazım.

   :has() ile YALNIZCA öğretmen ekranı açıkken genişliyoruz; oyun,
   giriş ve yönetim ekranlarının düzenine hiç dokunulmuyor. Telefonda
   da hiçbir şey değişmiyor: kurallar en az 1000px'te başlıyor. */
@media (min-width:1000px){
  /* Komuta masası da aynı kurala giriyor: o da dizüstünde açılıyor ve
     içinde okul/öğretmen/şube tabloları var, dar sütunda okunmuyordu.
     Oyun ve giriş ekranları yine dışarıda. */
  .wrap:has(#screen-setup:not([hidden])),
  .wrap:has(#screen-veli:not([hidden])),
  .wrap:has(#screen-admin:not([hidden])){ max-width:1180px; padding-inline:26px }

  /* Veli ekranı da aynı ailede: tek çocuk için bile iki sütun
     ("nerede zorlanıyor" / "hangi sorular") yan yana okunuyor.
     Tek panel olduğu için #screen-veli'ye ızgara vermiyoruz,
     yalnızca içindeki ayrıntıya. */
  #v-detay{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:8px 30px; align-items:start }
  #v-detay > .panel-head{ grid-column:1 / -1 }

  #screen-admin{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px; align-items:start }
  #screen-admin > *{ grid-column:1 / -1 }
  #screen-admin > .panel{ grid-column:auto; margin:0 }
  /* GENİŞ TABLOLU PANELLER TAM GENİŞLİK.
     Öğretmen tablosunda yedi sütun var (ad, kullanıcı adı, rol, branş,
     şube, giriş, işlem) ve branş hücresi sekiz ders adı taşıyabiliyor;
     ölçtüm, tablo en az 750px istiyor. İki sütunlu ızgarada panele
     ~520px düşüyordu ve .tablewrap YANA KAYDIRMA çubuğu çıkarıyordu.
     Yatay kaydırma bir tabloyu okunmaz yapar: göz satır başını
     kaybediyor. Bu iki panel artık satırın tamamını alıyor.
     ÖNCELİK NOTU: "#screen-admin > .panel" tek id + tek sınıf; onu
     yenmek için burada da iki id gerekiyor. */
  #screen-admin > #ad-ogr-panel,
  #screen-admin > #ad-veli-panel{ grid-column:1 / -1 }

  /* Paneller iki sütun. Uzun olanlar (sınıf seçimi, karne) tam genişlik. */
  #screen-setup{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px; align-items:start }
  #screen-setup > *{ grid-column:1 / -1 }
  #screen-setup > .panel{ grid-column:auto; margin:0 }
  /* ÖNCELİK: "#screen-setup > .panel" tek id + tek sınıf; onu yenmek
     için burada da iki id gerekiyor. Tek id yazınca bu iki panel
     sütuna sıkışıp kalıyordu. */
  #screen-setup > #sinif-panel,
  #screen-setup > #karne-panel{ grid-column:1 / -1 }
  /* Sınıf / Ders / Sınıf kodu yan yana. Ders seçici gizliyken kutu
     kendiliğinden sola kayıyor, sütun numarası sabitlenmiyor. */
  #sinif-panel{ display:grid; grid-template-columns:repeat(2,minmax(0,220px)) 1fr;
    gap:18px; align-items:start }

  /* Halkalar geniş ekranda devasa olmasın: sabit genişlik, sola yaslı. */
  .donutlar{ grid-template-columns:repeat(auto-fill,166px); justify-content:start }

  /* Karnenin iki yarısı yan yana: solda soru tipleri, sağda öğrenciler.
     Öğretmen "hangi konu zorluyor" ile "kim geride" sorusuna aynı
     anda bakabiliyor; eskiden biri için diğerini kaydırmak gerekiyordu. */
  #k-detay{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:8px 30px; align-items:start }
  #k-detay > .panel-head{ grid-column:1 / -1 }
  .kyari{ min-width:0 }
  .kyari h6{ margin-top:12px }
}

@media (min-width:1400px){
  .wrap:has(#screen-setup:not([hidden])),
  .wrap:has(#screen-veli:not([hidden])),
  .wrap:has(#screen-admin:not([hidden])){ max-width:1340px }
  #k-detay,
  #v-detay{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) }
}
/* BÜYÜK EKRANDA DAHA DA GENİŞ.
   Yazılar büyüyünce 1340px dar gelmeye başladı: tablo hücreleri ve
   çocuk adları alt alta kırılıyordu. Ekran ne veriyorsa kullanıyoruz;
   üst sınır yine de var, yoksa 27" bir ekranda satırlar okunamayacak
   kadar uzuyor (göz satır başını kaybediyor). */
@media (min-width:1600px){
  .wrap:has(#screen-setup:not([hidden])),
  .wrap:has(#screen-veli:not([hidden])),
  .wrap:has(#screen-admin:not([hidden])){ max-width:1520px }
}
@media (min-width:1900px){
  .wrap:has(#screen-setup:not([hidden])),
  .wrap:has(#screen-veli:not([hidden])),
  .wrap:has(#screen-admin:not([hidden])){ max-width:1720px }
  /* ÜÇ SÜTUN DENENDİ, GERİ ALINDI: panel sayısı arttıkça her biri
     daralıyor ve öğretmen tablosu 1920px'te bile 506px'e sıkışıp
     yana kaydırma çubuğu çıkarıyordu. Geniş ekranın işi paneli
     daraltmak değil genişletmek. */
}

/* bölüm raporu */
.btab tbody tr{ cursor:pointer }
.btab tbody tr:hover td{ background:rgba(255,255,255,.04) }
.btab tr.secili td{ background:rgba(255,255,255,.07) }
.btab .bl{ font-weight:600; white-space:normal }
.btab .kod{ display:block; font-size:.68rem; color:var(--ink-faint); letter-spacing:.06em }
.btab .zayif{ color:var(--coral) }
.btab .iyi{ color:var(--mint) }
.btab tr.hic td{ color:var(--ink-faint) }
.bkel{ margin-top:14px; border-top:1px solid var(--ink-faint); padding-top:12px }
.bkel h5{ margin:0 0 8px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim) }

/* adım rayı */
.rail{ display:flex; align-items:flex-start; margin:20px 0 0 }
.rail .st{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; position:relative }
.rail .st::before{ content:""; position:absolute; top:12px; left:-50%; width:100%; height:2px; background:var(--ink-faint) }
.rail .st:first-child::before{ display:none }
.rail .st.done::before{ background:var(--heat) }
.rail .dot{ width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.75rem; font-weight:700; background:rgba(16,11,38,.8);
  border:2px solid var(--ink-faint); color:var(--ink-faint); position:relative; z-index:1 }
.rail .st.on .dot{ border-color:var(--heat); color:var(--heat) }
.rail .st.done .dot{ border-color:var(--heat); background:var(--heat); color:#2E2006 }
.rail .lbl{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:center }
.rail .st.on .lbl,.rail .st.done .lbl{ color:var(--ink-dim) }

/* onay kutuları */
.consents{ display:flex; flex-direction:column; gap:11px; border-top:1px solid var(--line); padding-top:16px }
.chk{ display:flex; gap:11px; align-items:flex-start; cursor:pointer }
.chk input{ position:absolute; opacity:0; width:0; height:0 }
.chk .box{ width:21px; height:21px; flex:none; margin-top:1px; border-radius:6px; border:2px solid var(--line);
  background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; transition:background .12s ease }
.chk .box svg{ width:13px; height:13px; color:#2E2006; opacity:0 }
.chk input:checked + .box{ background:var(--heat); border-color:var(--heat) }
.chk input:checked + .box svg{ opacity:1 }
.chk input:focus-visible + .box{ box-shadow:0 0 0 3px rgba(255,201,77,.3) }
.chk .ctext{ font-size:.86rem; color:var(--ink-dim); line-height:1.5 }
.chk.invalid .box{ border-color:var(--coral) }
.inline{ background:none; border:none; padding:0; font:inherit; color:var(--heat); text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.badge{ display:inline-block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--heat); background:rgba(255,201,77,.14); border:1px solid rgba(255,201,77,.34); border-radius:5px; padding:3px 8px }

/* yasal metin penceresi */
.sheet-wrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center }
.sheet-wrap[hidden]{ display:none }

/* Ekranlar `hidden` özniteliğiyle gizleniyor. Ama section'lara
   display:flex verildiği için yazar kuralı tarayıcının kendi
   [hidden]{display:none} kuralını eziyor — hepsi alt alta görünüyor.
   Bu tek satır olmadan sayfa tek yığın hâline geliyor. */
[hidden]{ display:none !important }
.sheet-wrap .scrim{ position:absolute; inset:0; background:rgba(8,5,20,.8) }
.sheet2{ position:relative; width:100%; max-width:620px; max-height:86dvh; display:flex; flex-direction:column;
  background:#171033; border:1px solid var(--line); border-radius:16px 16px 0 0 }
.sheet2 header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line) }
.sheet2 header h3{ font-family:var(--display); font-weight:700; font-size:1.05rem; margin:0 }
.sheet2 .body{ overflow-y:auto; padding:18px; font-size:.88rem; color:var(--ink-dim); line-height:1.65 }
.sheet2 .body h4{ font-family:var(--body); font-size:.94rem; color:var(--ink); margin:16px 0 6px } .sheet2 .body h4:first-child{ margin-top:0 }
.sheet2 .body p{ margin:0 0 9px } .sheet2 .body ul{ margin:0 0 9px; padding-left:18px }
.sheet2 .fill{ color:var(--heat); background:rgba(255,201,77,.1); padding:0 4px; border-radius:3px }
.sheet2 footer{ padding:13px 18px; border-top:1px solid var(--line) }
@media (min-width:640px){ .sheet-wrap{ align-items:center; padding:20px } .sheet2{ border-radius:16px; border-bottom:1px solid var(--line) } }
h1{
  font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,9.5vw,3.8rem); line-height:.96;
  margin:6px 0 0; letter-spacing:-.02em; text-wrap:balance;
  text-shadow:0 3px 0 rgba(16,11,38,.4), 0 10px 30px rgba(16,11,38,.55);
}
h1 em{ font-style:normal; color:var(--heat) }
h2{ font-family:var(--display); font-weight:700; font-size:1.2rem; margin:0 }
.lede{ margin:14px 0 0; max-width:50ch; color:var(--ink-dim) }

.panel{ border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(8px); padding:22px; display:flex; flex-direction:column; gap:16px; margin-top:22px; border-radius:14px }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap }
.field{ display:flex; flex-direction:column; gap:6px }
.field label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); font-weight:600 }
.field input, textarea, select{ font-family:var(--body); color:var(--ink); background:rgba(0,0,0,.34); border:1px solid var(--line); border-radius:9px; width:100% }
.field input, select{ font-size:1.05rem; font-weight:500; padding:12px 14px }
.field input::placeholder{ color:rgba(255,247,236,.33) }
.field small{ color:var(--ink-dim); font-size:.78rem }

/* Branş ve şube kutucukları: tek tek tikleniyor, dar ekranda alt alta
   düşüyor. Etiketin tamamı tıklanabilir — telefonda kutucuğu vurmak zor.
   DİKKAT: bu blok .field kurallarından SONRA gelmek zorunda. Yukarıdaki
   ".field input, select{ width:100%; padding:12px 14px }" kuralı aynı
   ağırlıkta; önce yazılırsa onaltı piksellik kutucuğu satır genişliğine
   şişiriyor ve etiketler birbirine giriyor. */
.tikkutu{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
.field .tikkutu label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px;
  font-size:.85rem; letter-spacing:0; text-transform:none; font-weight:500;
  color:var(--ink-dim); line-height:1.1; white-space:nowrap; margin:0 }
.field .tikkutu label:has(input:checked){ border-color:var(--heat); color:var(--ink);
  background:rgba(255,201,77,.12) }
.field .tikkutu input[type=checkbox]{ width:17px; height:17px; min-width:17px;
  padding:0; margin:0; flex:none; accent-color:var(--heat); border-radius:4px }
.tikkutu .bos{ font-size:.85rem; color:var(--ink-dim) }
textarea{ min-height:170px; resize:vertical; font-size:.95rem; line-height:1.75; padding:15px }
:focus-visible{ outline:2px solid var(--heat); outline-offset:2px }
.count{ font-size:.8rem; color:var(--ink-dim); font-variant-numeric:tabular-nums }
.count.warn{ color:var(--coral) }
.hint{ font-size:.85rem; color:var(--ink-dim); margin:0 }
.privacy{ font-size:.78rem; color:var(--ink-dim); margin:0; max-width:48ch }

.btn{
  font-family:var(--display); font-size:1.15rem; font-weight:700; padding:13px 30px; border-radius:999px;
  border:none; background:linear-gradient(180deg,#FFE39A,var(--heat)); color:#3A2208; cursor:pointer;
  box-shadow:0 5px 0 #C8901F, 0 10px 22px rgba(16,11,38,.5); transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 #C8901F,0 14px 26px rgba(16,11,38,.55) }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #C8901F }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; font-size:1rem; font-weight:600; padding:12px 22px }
.btn.ghost:hover{ background:rgba(255,247,236,.1); transform:none; box-shadow:none }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.btn.sm{ font-size:.88rem; padding:10px 16px }
.linkish{ background:none; border:none; padding:0; font-family:var(--body); font-size:.86rem; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px; cursor:pointer; margin-top:14px; align-self:flex-start }
.linkish:hover{ color:var(--ink) }

/* ---------------- rütbe ---------------- */
.rankcard{ display:flex; align-items:center; gap:18px; border:1px solid var(--rank); border-radius:14px; padding:20px; margin-top:22px; background:linear-gradient(145deg,rgba(255,247,236,.15),rgba(16,11,38,.45)); backdrop-filter:blur(8px) }
.crest{ width:74px; height:74px; flex:none; color:var(--rank); filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)) }
.crest svg{ width:100%; height:100%; display:block }
.rankmeta{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.rankmeta .who{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }
.rankmeta .name{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,7vw,2.2rem); color:var(--rank); line-height:1.05 }
.stars{ font-size:1.2rem; letter-spacing:.18em; color:var(--rank) }
.stars .off{ color:var(--ink-faint) }
.rankmeta .next{ font-size:.8rem; color:var(--ink-dim); margin-top:4px }
/* "GENEL RÜTBE" / "TÜRKÇE RÜTBEN" — hangi rütbeye baktığı belli olsun.
   Eskiden tek bir rütbe vardı ve bu satır yoktu; çocuk üstteki rütbenin
   hangi dersin rütbesi olduğunu bilemiyordu. */
.rankmeta .kapsam{
  font-family:var(--display); font-size:.8rem; font-weight:800;
  letter-spacing:.06em; color:var(--heat); margin-top:2px;
}
/* NOT: burada text-transform:uppercase YOK. CSS büyük harf dönüşümü
   belgenin dilini (tr) kullanıyor ve "English" -> "ENGLİSH" oluyordu. */

.ladder{ display:flex; gap:8px; margin-top:14px }
.rung{ flex:1; border:1px solid var(--ink-faint); border-radius:11px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; opacity:.38; background:rgba(16,11,38,.66) }
.rung.on{ opacity:1; border-color:currentColor } .rung.now{ background:rgba(255,247,236,.14) }
.rung svg{ width:26px; height:26px; display:block }
.rung b{ font-family:var(--display); font-size:.74rem; font-weight:700 }
.rung i{ font-style:normal; font-size:.58rem; color:var(--ink-dim); letter-spacing:.08em }

.tally{ display:flex; gap:22px; margin-top:16px; flex-wrap:wrap }
.tally div{ display:flex; flex-direction:column }
.tally b{ font-family:var(--display); font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums }
.tally span{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }

/* ---------------- üniteler ---------------- */
.units{ display:grid; grid-template-columns:repeat(auto-fill,minmax(166px,1fr)); gap:10px; margin-top:12px }
.unit{ text-align:left; font-family:var(--body); color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 14px; cursor:pointer; display:flex; flex-direction:column; gap:3px; backdrop-filter:blur(6px); transition:transform .12s ease, background .12s ease; position:relative; overflow:hidden }
.unit:hover{ transform:translateY(-2px); background:rgba(255,247,236,.15) }
.unit .swatch{ position:absolute; inset:0 auto 0 0; width:5px }
.unit .no{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim) }
.unit .t{ font-family:var(--display); font-size:1.05rem; font-weight:700; line-height:1.15 }
.unit .place{ font-size:.72rem; color:var(--ink-dim) }
.unit .s{ font-size:.95rem; letter-spacing:.14em; color:var(--heat); margin-top:3px }
.unit .s .off{ color:var(--ink-faint) }
.unit.empty{ opacity:.42; cursor:default } .unit.empty:hover{ transform:none; background:var(--panel) }
.unit.empty .s{ font-size:.72rem; letter-spacing:0; color:var(--ink-dim) }
.sinif-kutu{ display:flex; gap:7px; flex-wrap:wrap }
.sinif-kutu .sk{ position:relative; cursor:pointer }
.sinif-kutu .sk input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer }
.sinif-kutu .sk span{ display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  font-family:var(--display); font-weight:700; font-size:1rem; transition:all .12s ease }
.sinif-kutu .sk input:checked + span{ background:rgba(255,201,77,.2); border-color:var(--heat); color:var(--heat) }
.sinif-kutu .sk input:focus-visible + span{ outline:2px solid var(--heat); outline-offset:2px }
.ops{ font-weight:400; color:var(--ink-dim); text-transform:none; letter-spacing:0 }
textarea.ctl{ font-family:var(--body); resize:vertical; min-height:74px; line-height:1.5 }
.duzeltme-not{ margin:2px 0 0; font-size:.88rem; color:var(--mint); font-weight:600 }
.bt-say{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; margin-bottom:4px }
.bt-say div{ display:flex; flex-direction:column; gap:2px }
.bt-say b{ font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1 }
.bt-say span{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim) }
.odev-kart.kisisel{ background:linear-gradient(135deg, rgba(196,160,224,.24), rgba(255,201,77,.1));
  border-color:rgba(196,160,224,.5) }
.odev-kart.kisisel svg{ color:#C4A0E0 }
/* ÖDEV KARTI (AFA): rütbe kutusunun hemen altında ve BÜYÜK.
   Eskiden ünite listesinin altındaydı ve küçüktü; çocuk aşağı
   kaydırmadan görmüyordu. Ödev, girer girmez göze çarpmalı. */
.odev-kart{ margin:14px 0 4px; padding:18px 18px 20px; border-radius:16px; backdrop-filter:blur(6px);
  background:linear-gradient(135deg, rgba(123,214,164,.28), rgba(255,201,77,.16));
  border:2px solid rgba(123,214,164,.6); box-shadow:0 6px 22px rgba(123,214,164,.16) }
.odev-kart .ok-bas{ display:flex; gap:13px; align-items:flex-start }
.odev-kart svg{ width:28px; height:28px; flex:none; margin-top:2px; color:var(--mint) }
.odev-kart b{ display:block; font-family:var(--display); font-size:1.42rem; font-weight:800; line-height:1.15 }
.odev-kart .ok-bas span{ display:block; font-size:1rem; color:var(--ink); opacity:.85; margin-top:3px; line-height:1.4 }
.ok-liste{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px }
.ok-b{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-size:1rem;
  font-weight:700; color:var(--ink); background:var(--panel); border:1px solid var(--line);
  border-radius:99px; padding:12px 18px; min-height:44px; cursor:pointer;
  transition:border-color .12s, transform .12s }
.ok-b:hover:not([disabled]){ border-color:var(--mint); transform:translateY(-1px) }
.ok-b[disabled]{ cursor:default; opacity:.6; color:var(--mint); border-color:rgba(123,214,164,.4) }
.ok-b .im{ width:17px; height:17px; flex:none; color:var(--mint) }
.tekrar{ width:100%; margin-top:12px; display:flex; align-items:center; gap:13px; text-align:left;
  font-family:var(--body); color:var(--ink); cursor:pointer;
  background:linear-gradient(135deg, rgba(194,84,63,.22), rgba(255,201,77,.12));
  border:1px solid rgba(255,138,122,.45); border-radius:14px; padding:14px 16px;
  backdrop-filter:blur(6px); transition:transform .12s ease, border-color .12s ease }
.tekrar:hover:not([disabled]){ transform:translateY(-2px); border-color:var(--coral) }
.tekrar[disabled]{ cursor:default; opacity:.55; background:var(--panel); border-color:var(--line) }
.tekrar .tk-ic{ flex:none; width:38px; height:38px; border-radius:11px; display:flex;
  align-items:center; justify-content:center; background:rgba(255,247,236,.1); color:var(--coral) }
.tekrar[disabled] .tk-ic{ color:var(--mint) }
.tekrar .tk-ic svg{ width:20px; height:20px }
.tekrar .tk-yazi{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.tekrar .tk-yazi b{ font-family:var(--display); font-size:1.02rem; font-weight:700 }
.tekrar .tk-yazi span{ font-size:.83rem; color:var(--ink-dim) }
.tekrar .tk-say{ flex:none; font-family:var(--display); font-weight:800; font-size:1.5rem;
  color:var(--coral); font-variant-numeric:tabular-nums }
.tekrar[disabled] .tk-say{ color:var(--mint); font-size:1.1rem }
.obolum{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;
  max-height:260px; overflow-y:auto; padding:2px }
.obolum label{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:.86rem;
  border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:var(--panel);
  transition:border-color .12s ease, background .12s ease }
.obolum label:hover{ border-color:var(--heat) }
.obolum label:has(input:checked){ border-color:var(--heat); background:rgba(255,201,77,.14) }
.obolum input{ accent-color:var(--heat); width:16px; height:16px; flex:none; margin:0 }
.obolum .bt{ min-width:0; display:flex; flex-direction:column; gap:1px }
.obolum .bt b{ font-weight:600 }
.obolum .bt i{ font-style:normal; font-size:.74rem; color:var(--ink-dim) }
.o-ek{ font-family:var(--body); font-size:var(--p-kucuk, .9rem); font-weight:600; color:var(--heat);
  background:transparent; border:1px solid rgba(255,201,77,.42); border-radius:99px;
  padding:4px 10px; cursor:pointer; white-space:nowrap }
.o-ek:hover{ background:rgba(255,201,77,.16) }
.rtab td.sag{ text-align:right }
.rtab .dt{ font-weight:600 } .rtab .dt.ok{ color:var(--mint) } .rtab .dt.yok{ color:var(--ink-dim) }
.kilit-not{ background:var(--panel); border:1px solid rgba(255,201,77,.42); border-radius:14px;
  padding:14px 16px; margin-top:12px; display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between; backdrop-filter:blur(6px) }
.kilit-not .kn-ic{ display:flex; gap:11px; align-items:flex-start; min-width:220px; flex:1 }
.kilit-not svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--heat) }
.kilit-not b{ display:block; font-family:var(--display); font-size:1rem; font-weight:700 }
.kilit-not span{ display:block; font-size:.85rem; color:var(--ink-dim); margin-top:2px }
.kilit-not .kn-btn{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.kilit-not.carp{ animation:kncarp .5s ease }
#hub-unitcount.uyar{ color:var(--heat); font-weight:700 }
@keyframes kncarp{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-5px) }
  50%{ transform:translateX(5px) } 80%{ transform:translateX(-3px) } }
@media (prefers-reduced-motion:reduce){ .kilit-not.carp{ animation:none } }
.btn.sm{ padding:9px 18px; font-size:.9rem; margin:0 }
.unit.kilit{ opacity:.5; cursor:pointer }
.unit.kilit:hover{ transform:none; background:rgba(255,247,236,.1) }
.unit.kilit .t, .unit.kilit .no, .unit.kilit .place{ color:var(--ink-dim) }
.unit.kilit .s{ font-size:.74rem; letter-spacing:0; color:var(--heat);
  display:flex; align-items:center; gap:5px }
.unit.kilit .s svg{ width:13px; height:13px }
.tema-bas{ grid-column:1 / -1; display:flex; align-items:baseline; gap:10px; margin:14px 0 -2px }
.tema-bas:first-child{ margin-top:2px }
.tema-bas b{ font-family:var(--display); font-size:1.02rem; font-weight:700; letter-spacing:.01em }
.tema-bas span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }
.tema-bas i{ flex:1; height:1px; background:var(--line) }

/* ---------- ders sekmeleri ---------- */
.ders-sekme{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px }
.ds{
  font-family:var(--display); font-size:1rem; font-weight:700; cursor:pointer; color:var(--ink);
  background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; display:inline-flex; align-items:center; gap:8px;
}
.ds:hover{ border-color:var(--heat) }
.ds.acik{ background:linear-gradient(180deg,#FFE39A,var(--heat)); color:#3A2208; border-color:transparent }
.ds .pul{
  width:8px; height:8px; border-radius:50%; background:var(--heat);
  box-shadow:0 0 0 3px rgba(255,201,77,.22);
}
.ds.acik .pul{ background:#3A2208; box-shadow:none }

/* ---------- ders kareleri (karargâhın giriş ekranı) ----------
   Çocuk giriş yapınca önce BUNLARI görüyor. Üniteler hiç çizilmiyor;
   bir kareye dokununca o dersin rütbesi ve üniteleri açılıyor. */
.ders-kare{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:4px 0 6px;
}
@media (min-width:720px){ .ders-kare{ grid-template-columns:repeat(3,1fr) } }
.ders-kare .dk-bekle{ grid-column:1 / -1; margin:18px 0; text-align:center;
  color:var(--ink-dim); font-size:1.05rem }
.dk{
  position:relative; cursor:pointer; text-align:left; color:var(--ink);
  background:rgba(0,0,0,.30); border:1px solid var(--line); border-radius:18px;
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:2px;
  min-height:168px; overflow:hidden;
}
.dk:hover{ border-color:var(--heat) }
.dk .dk-kahraman{
  position:absolute; right:-6px; bottom:-10px; width:92px; opacity:.9;
  pointer-events:none;
}
.dk .dk-kahraman svg{ width:100%; height:auto; display:block }
.dk .dk-ad{
  font-family:var(--display); font-size:1.24rem; font-weight:800; letter-spacing:.01em;
  line-height:1.15; margin-bottom:6px;
}
.dk .dk-rutbe{ font-family:var(--display); font-size:1rem; font-weight:700 }
.dk .dk-yildiz{ font-size:.95rem; letter-spacing:.06em; margin-top:2px }
.dk .dk-yildiz .off{ opacity:.26 }
.dk .dk-not{ font-size:.76rem; color:var(--ink-dim); line-height:1.4; margin-top:6px; max-width:64% }
.dk .dk-pul{
  position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(180deg,#FFE39A,var(--heat)); color:#3A2208;
  font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  border-radius:999px; padding:4px 9px;
}
.geri-ders{ margin:18px 0 0 }

/* ---------- Türkçe oyun katmanı ---------- */
#tr-kat{
  /* viewport-fit=cover ile içerik çentiğin altına girebiliyor; güvenli
     alan kadar boşluk bırakıyoruz. */
  position:fixed; inset:0; z-index:60; overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 34%,var(--sky3) 62%,var(--sky4) 84%,var(--sky5) 100%);
}
#tr-kat .kutu{ max-width:640px; margin:0 auto; border:1px solid var(--line); background:var(--panel);
  backdrop-filter:blur(8px); border-radius:14px; padding:20px }
.tr-ust{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.tr-ust .eyebrow{ flex:1 }
/* DOKUNMA HEDEFİ EN AZ 44 PİKSEL. 320-430 piksel arası dokuz ekranda
   ölçtüm: "Çık" 21x16, "Tekrar dinle" 36 piksel yüksekti. 6 yaşındaki
   çocuğun parmağı için ikisi de küçük; Apple ve Google'ın kılavuzu da
   44 piksel diyor. Görünen kutu aynı kalıyor, dokunulan alan büyüyor. */
#tr-cik{
  min-width:44px; min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 8px; margin:0;
}
#tr-ses{ min-height:44px; padding-top:0; padding-bottom:0; margin-bottom:14px }
/* 23.09 AFA: "Tekrar dinle" ile soru metni birbirine yapışıyordu;
   .tr-sor'un üst boşluğu yok, aradaki nefesi düğmeye verdik. */
/* ---- SÜRELİ MOD ----
   Bar YAVAŞ ve AKICI inecek (AFA): karşımızda 7 yaşında bir çocuk var,
   sıçrayarak inen bir çubuk panik yaratıyor. Genişliği her karede
   (requestAnimationFrame) yazıyoruz, saniyede bir adım atmıyor.
   Renk iki eşikte değişiyor; son %15'te hafifçe nefes alıyor ki
   çocuk yazıyı okumadan da anlasın. */
.tr-mod{ display:flex; align-items:center; gap:12px; margin:0 0 14px }
.tr-can{ font-size:1.05rem; letter-spacing:.12em; color:var(--coral); white-space:nowrap }
.tr-can .gitti{ opacity:.22 }
.tr-sure{ flex:1; height:10px; border-radius:99px; background:var(--ink-faint); overflow:hidden }
.tr-sure i{ display:block; height:100%; width:100%; border-radius:99px;
  background:var(--mint); transition:background .5s ease }
.tr-sure i.az{ background:var(--heat) }
.tr-sure i.son{ background:var(--coral); animation:tr-nabiz 1.1s ease-in-out infinite }
@keyframes tr-nabiz{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@media (prefers-reduced-motion:reduce){ .tr-sure i.son{ animation:none } }
.tr-mod-sec{ display:grid; gap:12px; margin-top:8px }
.tr-mod-sec .btn{ min-height:64px; text-align:left; display:block; line-height:1.35 }
.tr-mod-sec .btn small{ display:block; font-weight:400; opacity:.78; font-size:.82rem; margin-top:3px }
.tr-nokta{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:16px }
.tr-nokta i{ width:9px; height:9px; border-radius:50%; background:var(--ink-faint); display:block }
.tr-nokta i.ok{ background:var(--mint) } .tr-nokta i.no{ background:var(--coral) }
.tr-nokta i.su{ background:var(--heat); transform:scale(1.35) }
.tr-sor{ font-family:var(--display); font-size:1.32rem; font-weight:700; margin:0 0 4px; line-height:1.3 }
.tr-ip{ color:var(--ink-dim); font-size:.88rem; margin:0 0 16px; line-height:1.5 }
/* Koyu resimler (örümcek, karınca, siyah...) koyu zeminde kaybolmasın:
   bütün resimlere ince, açık bir dış hat. Açık renkli resimlerde fark
   edilmiyor, koyularda çizgiyi zeminden ayırıyor. */
svg.ikon{ filter:drop-shadow(0 0 .6px rgba(255,247,236,.9)) drop-shadow(0 0 .6px rgba(255,247,236,.6)) }
.tr-sec{ display:grid; gap:11px }
.tr-sec.i2{ grid-template-columns:1fr 1fr } .tr-sec.i3{ grid-template-columns:repeat(3,1fr) }
/* Uzun şıklar sütunu değiştirmez, yalnızca küçülür ve satır atlar. */
.tr-sec.uzun .tr-s{ font-size:.95rem; padding:13px 8px }
.tr-sec.i3.uzun .tr-s{ font-size:.85rem; padding:12px 5px }

/* DAR EKRANDA UZUN KELİMELİ ŞIK ALT ALTA
   ÖLÇÜM: 320px'te üç sütunlu dizilimde bir satıra ancak ~8 harf
   sığıyor (kutu içi 65px). "Pencereden" ve "geldiğinde" (10 harf,
   tek parça) sığmayınca overflow-wrap:anywhere kelimeyi ORTADAN
   bölüyordu — çocuk ekranda "Pencerede / n" görüyordu.

   ESKİ EŞİK NEDEN KAÇIRIYORDU: küçültme, şıkkın TOPLAM uzunluğuna
   bakıyordu (>14 harf). Oysa "Çöp kutusuna" 12 harf ama boşluktan
   bölünüp iki satıra rahat sığıyor; "Pencereden" 10 harf ama tek
   parça olduğu için sığmıyor. Ölçüt toplam uzunluk değil, EN UZUN
   KELİME.

   NEDEN KÜÇÜLTMEK DEĞİL DE ALT ALTA: yazıyı daha da küçültmek
   1. sınıf çocuğu için okunmaz hâle getiriyordu. Sütunu bırakıp
   şıkları alt alta dizince hem yazı normal boyutta kalıyor hem de
   kelime bölünmüyor. Yalnızca YAZILI şıklarda: resimli şıklarda
   alt alta dizmek ekranı üç katına çıkarırdı. */
@media (max-width:560px){
  .tr-sec.yazi.dik{ grid-template-columns:1fr; gap:9px }
  .tr-sec.yazi.dik .tr-s{ padding:12px 15px; font-size:1rem }
}
/* TEK KELİMELİK UZUN ŞIK (ör. "hindistancevizi"): boşluğu yok, satır
   atlayacak yeri de yok. Önce yazıyı küçültüyoruz; yine sığmazsa
   ortadan bölmesine izin veriyoruz — taşırıp kutudan çıkmaktan iyi.
   Boşluklu şıklar bu sınıfı almaz, onlar kelime ortasından bölünmez. */
/* 22.09 (AFA): sabit %78 küçültme geniş ekranda gereksizdi, "Yuvarlanabilir"
   okunmuyordu. Artık yazı YALNIZ sığmıyorsa, sığana kadar küçülüyor
   (bkz. tekSigdir). */
.tr-s.tek>span{ letter-spacing:-.012em }
.tr-s{
  font-family:var(--body); cursor:pointer; color:var(--ink);
  background:rgba(0,0,0,.3); border:2px solid var(--line); border-radius:14px;
  padding:15px 12px; font-weight:600; font-size:1.05rem;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  /* Dar sütunda uzun kelime taşmasın: sar, gerekirse kelimeyi böl. */
  /* anywhere ŞART: grid sütunu sabit genişlikte, break-word ise uzun
     kelimeyi min-content olarak sayıp kutuyu taşırıyor ("Suyun
     temizlenmesine" 106 > 101). anywhere taşmayı tamamen bitiriyor;
     kelimenin ortadan bölünmemesini ise yazı boyu kademeleriyle
     sağlıyoruz (aşağıdaki .uzun / medya sorguları) ve bunu
     ekran-denetimi.js her genişlikte ölçüyor. */
  text-align:center; min-width:0; overflow-wrap:anywhere;
  position:relative;   /* .tr-sec.yazisiz'daki gizli span buraya bağlansın */
}
.tr-s:hover{ border-color:var(--heat) }
.tr-s.ok{ border-color:var(--mint); background:rgba(123,214,164,.18) }
.tr-s.no{ border-color:var(--coral); background:rgba(255,122,107,.16) }
.tr-s svg{ width:62px; height:62px; display:block }
/* Soru şıkkın adını söylüyorsa (ör. "Hangisi on kuruş?") yazı cevabı ele
   veriyor — bkz. secenekler()'teki yazisiz. Yazı DOM'da kalıyor, yalnız
   görünmüyor: ses okuma ve ekran okuyucu ondan besleniyor. */
.tr-sec.yazisiz .tr-s>span{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap }
/* Yazısız resim şıkkında resmin KENDİSİ okunacak: saat, çetele, kesir,
   para. 48 piksellik simgede akrep ile yelkovan, çetele çizgileri
   seçilemiyordu (2. sınıf, 22.09). Bu şıklar büyük çizilir. */
.tr-sec.yazisiz .tr-s svg,
.tr-sec.i3.yazisiz .tr-s svg{ width:84px; height:84px }
.tr-buyuk{ font-family:var(--display); font-size:2.5rem; font-weight:800; line-height:1 }
/* Gölge koyu zeminde koyu olamaz: silueti AÇIK renk yapıyoruz. */
.tr-golge svg{ filter:brightness(0) invert(1) opacity(.72); width:112px; height:112px }
.tr-resim svg{ width:112px; height:112px }
.tr-yuva{ display:flex; gap:8px; justify-content:center; margin:0 0 14px; flex-wrap:wrap; min-height:62px }
.tr-kutu{ width:52px; height:60px; border:2px dashed var(--line); border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-family:var(--display); font-size:1.75rem;
  font-weight:800; background:rgba(0,0,0,.24); cursor:pointer }
.tr-kutu.dolu{ border-style:solid; border-color:var(--heat); background:rgba(255,201,77,.16) }
.tr-havuz{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:14px }
.tr-tas{ font-family:var(--display); cursor:pointer; color:var(--ink); width:52px; height:56px;
  border:2px solid var(--line); border-radius:12px; background:rgba(0,0,0,.3); font-size:1.6rem; font-weight:800 }
.tr-tas:hover{ border-color:var(--heat) } .tr-tas.bitti{ opacity:.22; pointer-events:none }
.tr-izgara{ display:grid; gap:4px; justify-content:center; margin-bottom:14px }
.tr-h{ font-family:var(--display); cursor:pointer; color:var(--ink); width:36px; height:36px;
  border-radius:8px; background:rgba(0,0,0,.3); border:1px solid var(--line); font-weight:700;
  font-size:1rem; display:flex; align-items:center; justify-content:center }
.tr-h.bas{ background:var(--heat); color:#3A2208; border-color:var(--heat) }
.tr-h.buldu{ background:rgba(123,214,164,.28); border-color:var(--mint); cursor:default }
.tr-liste{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-bottom:14px }
.tr-kel{ font-weight:600; font-size:.92rem; padding:5px 13px; border-radius:999px;
  background:rgba(0,0,0,.3); border:1px solid var(--line) }
.tr-kel.buldu{ background:rgba(123,214,164,.22); border-color:var(--mint); text-decoration:line-through; color:var(--ink-dim) }
.tr-arac{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap }
.tr-geri{ margin-top:15px; padding:12px 15px; border-radius:12px; font-weight:600; display:none }
.tr-geri.iyi{ display:block; background:rgba(123,214,164,.18); color:var(--mint); border:1px solid rgba(123,214,164,.4) }
.tr-geri.kotu{ display:block; background:rgba(255,122,107,.16); color:var(--coral); border:1px solid rgba(255,122,107,.4) }
.tr-geri.not{ display:block; background:rgba(255,247,236,.1); color:var(--ink-dim); border:1px solid var(--line) }
@media (max-width:430px){
  /* ŞIK DİZİLİMİ EKRAN GENİŞLİĞİNE GÖRE DEĞİŞMEZ.
     Önceden telefonda i3 -> iki sütuna indiriliyordu; üç şıklı soruda
     üçüncü şık tek başına altta kalıyordu (2+1). Kural artık net:
     3 şık = tek sıra, 4 şık = 2 üst + 2 alt. Sığdırmayı sütun sayısını
     değiştirerek değil, yazıyı küçültüp sarmalayarak yapıyoruz. */
  .tr-s{ padding:13px 7px; font-size:.98rem }
  .tr-sec.i3 .tr-s{ padding:13px 4px; font-size:.88rem; gap:6px }
  .tr-sec.i3.uzun .tr-s{ font-size:.78rem; padding:12px 3px }
  .tr-sec.i3 .tr-s svg{ width:48px; height:48px }
  .tr-kutu,.tr-tas{ width:46px }
  .tr-h{ width:31px;height:31px;font-size:.9rem }
}
@media (max-width:360px){
  .tr-sec.i3 .tr-s{ font-size:.8rem }
  .tr-sec.i3.uzun .tr-s{ font-size:.64rem; padding:12px 2px; letter-spacing:-.01em }
  .tr-sec.i3 .tr-s svg{ width:42px; height:42px }
  .tr-sec.i3.yazisiz .tr-s svg{ width:76px; height:76px }
}
/* ---------------- matematik ---------------- */
.mat-satir{ display:flex; align-items:center; justify-content:center; gap:7px;
  flex-wrap:wrap; margin:0 0 18px }
.mat-tas{ font-family:var(--display); font-size:2.3rem; font-weight:800; line-height:1;
  min-width:52px; padding:8px 6px; border-radius:14px; text-align:center;
  background:rgba(0,0,0,.3); border:2px solid var(--line) }
.mat-tas.bos{ border-style:dashed; border-color:var(--heat); color:var(--heat) }
.mat-im{ font-family:var(--display); font-size:1.9rem; font-weight:800; color:var(--ink-dim) }
/* Somut aşama: iki nesne kümesi, aralarında işaret. */
.mat-somut{ display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin:0 0 14px }
.mat-kume{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:3px; max-width:130px }
.mat-nesne{ width:26px; height:26px; display:inline-block }
.mat-nesne.b{ width:36px; height:36px }
/* Kâğıt para: üstündeki değer okunabilsin (2. sınıf para sayma). */
.mat-nesne.kagit{ width:72px; height:72px }
.mat-nesne svg{ width:100%; height:100% ; display:block }
/* Karşılaştırma: iki taraf, ortada soru işareti. */
.mat-karsi{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:8px; margin:0 0 20px }
.mat-taraf{ display:flex; align-items:center; justify-content:center; min-height:56px }
.mat-vs{ font-family:var(--display); font-size:1.7rem; font-weight:800; color:var(--heat) }
/* Uzunluk: alt alta, aynı sol hizadan başlayan iki çubuk. */
.mat-boy{ display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin:0 0 20px; padding-left:6px }
.mat-cubuk-sat{ display:flex; align-items:center }
.mat-cubuk{ height:22px; border-radius:11px; background:var(--heat); display:block; max-width:100% }
.mat-boy .mat-vs{ align-self:center }
.mat-isaret{ font-family:var(--display); font-size:2rem; font-weight:800; line-height:1; color:var(--heat) }
/* Örüntü dizisi */
.mat-dizi{ display:flex; align-items:center; justify-content:center; gap:6px;
  flex-wrap:wrap; margin:0 0 20px }
.mat-dizi .mat-tas{ font-size:1.7rem; min-width:42px; padding:6px 4px }
/* Nesne grafiği: satır başına bir kategori */
.mat-grafik{ display:flex; flex-direction:column; gap:8px; margin:0 0 18px }
.mat-gsatir{ display:flex; align-items:center; gap:8px }
.mat-getiket{ flex:0 0 74px; font-size:.82rem; color:var(--ink-dim); text-align:right;
  overflow-wrap:anywhere }
.mat-gcubuk{ display:flex; gap:2px; flex-wrap:nowrap; min-width:0 }
@media (max-width:430px){
  .mat-tas{ font-size:1.9rem; min-width:44px }
  .mat-im{ font-size:1.5rem }
  .mat-nesne{ width:21px; height:21px }
  .mat-getiket{ flex-basis:58px; font-size:.74rem }
  .mat-dizi .mat-tas{ font-size:1.4rem; min-width:34px }
}
@media (max-width:360px){
  .mat-nesne{ width:18px; height:18px }
  .mat-tas{ font-size:1.7rem; min-width:38px }
}

.pw-yedek{ font-family:var(--display); font-size:1.5rem; font-weight:800; letter-spacing:.04em }

/* ---------------- oyun ---------------- */
#screen-play{ flex:1; gap:8px }
.hud{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
@media (max-width:470px){
  .hud{ gap:6px }
  .chip{ padding:4px 10px; gap:5px }
  .chip span{ font-size:.52rem; letter-spacing:.1em }
  .chip b{ font-size:.98rem }
  .iconbtn{ padding:6px 7px }
}
.chip{ display:flex; align-items:baseline; gap:6px; background:rgba(16,11,38,.6); border:1px solid var(--line); border-radius:999px; padding:5px 13px; backdrop-filter:blur(6px) }
.chip span{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }
.chip b{ font-family:var(--display); font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums }
.chip.hearts b{ color:var(--coral); letter-spacing:.08em } .chip.hearts .gone{ color:var(--ink-faint) }
.hud .spacer{ flex:1 }
.iconbtn{ background:rgba(16,11,38,.6); border:1px solid var(--line); border-radius:999px; color:var(--ink-dim); cursor:pointer; padding:7px 9px; line-height:0 }
.iconbtn:hover{ color:var(--ink) }

.target{ text-align:center; padding:10px 8px 2px }
.target .eyebrow{ display:block; margin-bottom:2px }
.target b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,8.5vw,3.2rem); line-height:1.05; text-wrap:balance; text-shadow:0 3px 0 rgba(16,11,38,.45), 0 10px 26px rgba(16,11,38,.6) }
.target.pulse b{ animation:pop .34s cubic-bezier(.34,1.56,.64,1) }
@keyframes pop{ 0%{ transform:scale(.8); opacity:.3 } 100%{ transform:scale(1); opacity:1 } }

.arena{ position:relative; flex:1; min-height:360px; overflow:hidden; touch-action:manipulation }
.arena::before{ content:""; position:absolute; left:0; right:0; top:0; height:86px; pointer-events:none; background:linear-gradient(180deg,rgba(255,122,107,.6),rgba(255,122,107,0)); opacity:0; transition:opacity .25s ease; z-index:3 }
.arena.danger::before{ opacity:1 }

.balloon{
  position:absolute; left:0; top:0; border:none; cursor:pointer; font-family:var(--display); font-weight:700;
  color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; word-break:break-word;
  padding:12px 9px 18px; border-radius:50% 50% 44% 44%/58% 58% 42% 42%;
  text-shadow:0 1px 4px rgba(0,0,0,.5); filter:drop-shadow(0 8px 16px rgba(16,11,38,.55));
  will-change:transform; line-height:1.12;
}
.balloon::after{ content:""; position:absolute; left:50%; bottom:-11px; width:17px; height:13px; transform:translateX(-50%); background:#6B4A2E; border-radius:2px 2px 3px 3px; box-shadow:0 -5px 0 -2px rgba(107,74,46,.85) }
.fire .balloon{ box-shadow:0 0 0 3px rgba(255,201,77,.8) }
.balloon.popped{ animation:burst .3s ease-out forwards }
@keyframes burst{ 0%{ opacity:1 } 40%{ transform:scale(1.3) } 100%{ transform:scale(.1); opacity:0 } }
.balloon.bad{ animation:wobble .5s ease-out forwards }
@keyframes wobble{ 0%{ opacity:1 } 30%{ transform:rotate(-16deg) scale(.94) } 65%{ transform:rotate(14deg) scale(.88) } 100%{ transform:rotate(46deg) scale(.5); opacity:0 } }
.balloon.dim{ opacity:.25 }
.balloon.show{ outline:3px solid var(--mint); outline-offset:3px }
/* Doğru balon bir kez kaçtıysa: yalnızca parlıyor, transform'a dokunmuyor. */
.balloon.ipucu{ animation:ipucuParla 1.1s ease-in-out infinite }
@keyframes ipucuParla{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) } 50%{ box-shadow:0 0 0 5px rgba(255,255,255,.6) } }

.spark{ position:absolute; width:8px; height:8px; border-radius:50%; pointer-events:none; z-index:4; transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s linear }
.pop-score{ position:absolute; pointer-events:none; z-index:4; font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--heat); text-shadow:0 2px 6px rgba(16,11,38,.8); font-variant-numeric:tabular-nums; transition:transform .8s cubic-bezier(.2,.8,.3,1), opacity .8s linear }
.combo-tag{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--heat); white-space:nowrap; pointer-events:none; z-index:3; text-shadow:0 2px 8px rgba(16,11,38,.85) }

.curtain{ position:absolute; inset:0; z-index:5; background:rgba(16,11,38,.84); backdrop-filter:blur(3px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:20px; cursor:pointer; border-radius:14px }
.curtain .no{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim) }
.curtain .big{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,9vw,3.2rem); color:var(--heat); line-height:1 }
.curtain .sub{ font-size:1rem; color:var(--ink-dim) }
.curtain .tap{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-top:10px }
.curtain .tick{ font-family:var(--display); font-weight:800; font-size:clamp(4rem,22vw,7rem); color:var(--heat); line-height:1; animation:tick .8s ease-out }
@keyframes tick{ 0%{ transform:scale(2.2); opacity:0 } 40%{ transform:scale(1); opacity:1 } 100%{ transform:scale(1); opacity:1 } }

.feedback{ text-align:center; font-family:var(--display); font-weight:600; font-size:1.1rem; min-height:1.6rem; color:var(--heat); margin:0; text-shadow:0 2px 6px rgba(16,11,38,.7) }

/* ---------------- bitiş ---------------- */
.earned{ border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; display:flex; flex-direction:column; gap:8px; margin-top:22px; background:var(--panel); backdrop-filter:blur(8px) }
.earned .bigstars{ font-size:3rem; letter-spacing:.1em; line-height:1 }
.earned .bigstars span{ display:inline-block; color:var(--ink-faint) }
.earned .bigstars span.lit{ color:var(--heat); animation:starpop .45s cubic-bezier(.34,1.56,.64,1); text-shadow:0 0 24px rgba(255,201,77,.75) }
@keyframes starpop{ 0%{ transform:scale(0) rotate(-50deg) } 100%{ transform:scale(1) rotate(0) } }
.earned .rule{ font-size:.82rem; color:var(--ink-dim) }
.promo{ border:1px solid var(--rank); border-radius:14px; padding:20px; margin-top:14px; display:flex; align-items:center; gap:16px; background:linear-gradient(145deg,rgba(255,247,236,.2),rgba(16,11,38,.45)) }
.promo .crest{ width:58px; height:58px }
.promo .txt{ display:flex; flex-direction:column; gap:1px }
.promo .lbl{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim) }
.promo .nm{ font-family:var(--display); font-weight:800; font-size:1.7rem; color:var(--rank); line-height:1.1 }
.scoreboard{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px }
.scoreboard div{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; backdrop-filter:blur(6px) }
.scoreboard b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,5.5vw,1.8rem); font-variant-numeric:tabular-nums }
.scoreboard span{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }
.report{ border-left:3px solid var(--heat); padding-left:16px; display:flex; flex-direction:column; gap:8px; margin-top:22px }
.misslist{ list-style:none; margin:0; padding:0 }
.misslist li{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dotted var(--ink-faint); font-size:.95rem }
.misslist .en{ color:var(--heat); font-weight:600 }
.misslist .n{ color:var(--ink-dim); font-variant-numeric:tabular-nums; font-size:.82rem }
/* TAKILDIĞIN SORULAR — şıklı hâli.
   Satır artık yan yana değil alt alta: üstte soru + Dinle, altında
   şıklar. Oyundaki şıkların küçültülmüş kopyası; amaç oynamak değil
   doğruyu görmek, o yüzden ne puan ne zincir var. */
.misslist.kacan li{ display:block; padding:12px 0 }
.misslist.kacan .kb{ display:flex; justify-content:space-between; align-items:center;
  gap:14px; margin-bottom:9px }
.misslist.kacan .kbad{ font-weight:600; line-height:1.4 }
.misslist.kacan .kdog{ margin:0; font-size:.92rem; color:var(--ink-dim) }
.misslist.kacan .kdog b{ color:var(--mint) }
.ksec{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.ksec:has(.ks:nth-child(4)){ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ks{ font-family:var(--body); cursor:pointer; color:var(--ink); background:rgba(0,0,0,.3);
  border:2px solid var(--line); border-radius:11px; padding:10px 8px; font-weight:600;
  font-size:.92rem; display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; min-width:0; overflow-wrap:anywhere }
.ks svg{ width:44px; height:44px; display:block }
.kresim{ text-align:center; line-height:1; margin:4px 0 10px }
.kresim span{ width:46px; height:46px; display:inline-block; margin:3px }
.kresim svg{ width:100%; height:100% }
.kresim.kbuyuk span{ width:84px; height:84px }
.kresim.kgolge span{ width:84px; height:84px }
.kresim.kgolge svg{ filter:brightness(0) invert(1) opacity(.72) }
.ks .gizli{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.ksec .ks{ position:relative }
.ks .tr-buyuk{ font-size:1.3rem; font-weight:700 }
.ks:hover{ border-color:var(--heat) }
.ks.ok{ border-color:var(--mint); background:rgba(123,214,164,.18) }
.ks.no{ border-color:var(--coral); background:rgba(255,122,107,.16) }
.ksec[data-bitti] .ks{ cursor:default }

/* Sıralamalı tekrar (siralama · cumle_dizme · kelime_avi).
   Üstte yuva — çocuğun kurduğu sıra; altta havuz — dokunacağı
   parçalar. Alınan parça havuzda soluklaşır, silinmez: yeri boş
   kalırsa çocuk nereden aldığını kaybediyor. */
.ksira{ margin-top:4px }
.ksira-yuva{ display:flex; flex-wrap:wrap; gap:6px; min-height:46px;
  padding:6px; border:1px dashed var(--ink-faint); border-radius:10px; margin-bottom:8px }
.ksira-havuz{ display:flex; flex-wrap:wrap; gap:6px }
.ksira .kst{ min-height:42px; padding:0 12px; border-radius:10px;
  border:1px solid var(--ink-faint); background:transparent; color:inherit;
  font:inherit; font-size:1rem; cursor:pointer }
.ksira.harf .kst{ min-width:42px; padding:0 8px; font-weight:700; font-size:1.1rem }
.ksira .kst.bitti{ opacity:.28; cursor:default }
.ksira.ok .ksira-yuva{ border-style:solid; border-color:var(--mint) }
.ksira.no .ksira-yuva{ border-style:solid; border-color:var(--heat) }
.ksira[data-bitti] .kst{ cursor:default }
/* Uzun kelimeli şık burada da bölünmesin — oyundaki kuralın aynısı. */
@media (max-width:560px){ .ksec.dik{ grid-template-columns:1fr } }
.allgood{ color:var(--mint); margin:0 }
.wa{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:1.05rem; font-weight:700; text-decoration:none; padding:13px 26px; border-radius:999px; background:#25D366; color:#08301C; box-shadow:0 5px 0 #17A34C }
.wa:active{ transform:translateY(3px); box-shadow:0 2px 0 #17A34C }
.teacher-note{ border:1px dashed var(--line); padding:15px; margin-top:22px; display:flex; flex-direction:column; gap:6px; border-radius:12px; background:rgba(16,11,38,.45) }
.teacher-note .eyebrow{ color:var(--heat) }
.teacher-note p{ margin:0; font-size:.95rem }
.teacher-note small{ color:var(--ink-dim); font-size:.73rem }
footer{ border-top:1px solid var(--ink-faint); padding-top:14px; margin-top:22px; color:var(--ink-dim); font-size:.77rem }

@media (max-width:430px){
  .scoreboard{ grid-template-columns:1fr }
  .crest{ width:60px; height:60px }
  .rung svg{ width:22px; height:22px } .rung b{ font-size:.64rem }
  .hero{ width:66px; right:5% } .hero .body{ width:42px; height:66px }
}
/* ---------------- duy ve göster (1-2) ---------------- */
#screen-pic, #screen-hunt{ flex:1; gap:14px }
.pw-ses{ width:112px; height:112px; border-radius:50%; border:none; cursor:pointer; align-self:center;
  background:linear-gradient(180deg,#FFE39A,var(--heat)); color:#3A2208;
  box-shadow:0 6px 0 #C8901F, 0 14px 30px rgba(16,11,38,.5);
  display:flex; align-items:center; justify-content:center; transition:transform .1s }
.pw-ses:active{ transform:translateY(4px); box-shadow:0 2px 0 #C8901F }
.pw-ses svg{ width:50px; height:50px }
.pw-ses.calar{ animation:nabiz 1s ease-in-out infinite }
@keyframes nabiz{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
.pw-ipucu{ text-align:center; font-size:.88rem; color:var(--ink-dim); margin:0 }
.pw-yazi{ text-align:center; font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem,7vw,2.3rem); margin:0; color:var(--ink) }
.pw-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:440px;
  margin-inline:auto; width:100% }
.pw-k{ background:var(--panel); border:2px solid var(--line); border-radius:18px; padding:12px;
  cursor:pointer; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:transform .12s ease, border-color .12s ease, background .12s ease }
.pw-k:hover{ transform:translateY(-2px); border-color:var(--heat) }
.pw-k svg{ width:100%; height:100%; max-width:118px; max-height:118px; display:block }
.pw-k.ok{ border-color:var(--mint); background:rgba(123,214,164,.2) }
.pw-k.no{ border-color:var(--coral); background:rgba(255,122,107,.2) }
.pw-k.sonuk{ opacity:.35 }

/* ---------------- kelime avı (3-4) ---------------- */
.kv-balon{ display:flex; justify-content:center }
.kv-balon svg{ width:150px; height:186px }
.kv-ip{ text-align:center; display:flex; flex-direction:column; gap:2px }
.kv-ip .e{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); font-weight:600 }
.kv-ip .t{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,6.5vw,2.2rem); line-height:1.1 }
.kv-harf{ display:flex; justify-content:center; gap:7px; flex-wrap:wrap }
.kv-h{ width:32px; height:42px; border-bottom:4px solid var(--line-s, rgba(255,247,236,.42)); display:flex;
  align-items:center; justify-content:center; font-family:var(--display); font-weight:800;
  font-size:1.45rem; color:var(--ink) }
.kv-h.bos{ border-bottom-color:transparent; width:13px }
.kv-h.acik{ border-bottom-color:var(--mint) }
.kv-arac{ display:flex; justify-content:center; min-height:34px }
.kv-geri-al{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body); font-size:.78rem;
  font-weight:600; letter-spacing:.02em; color:var(--heat); background:rgba(255,201,77,.12);
  border:1px solid rgba(255,201,77,.45); border-radius:99px; padding:7px 14px; cursor:pointer;
  transition:opacity .15s ease, background .15s ease }
.kv-geri-al:hover:not([disabled]){ background:rgba(255,201,77,.22) }
.kv-geri-al[disabled]{ opacity:.32; cursor:default; color:var(--ink-dim);
  background:transparent; border-color:var(--line) }
.kv-tus{ display:flex; flex-direction:column; gap:6px; max-width:440px; margin-inline:auto; width:100% }
.kv-sira{ display:grid; grid-template-columns:repeat(20,1fr); gap:5px }
.kv-t{ grid-column:span 2; aspect-ratio:1/1; border:1px solid var(--line); border-radius:10px; background:var(--panel);
  font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 }
.kv-t:hover:not([disabled]){ border-color:var(--heat) }
.kv-t[disabled]{ opacity:.3; cursor:default }
.kv-t.var{ background:rgba(123,214,164,.22); border-color:var(--mint); color:var(--mint); opacity:1 }
.kv-t.yok{ background:rgba(255,122,107,.2); border-color:var(--coral); color:var(--coral); opacity:1 }
.kv-sira.s2 .kv-t:first-child{ grid-column:2 / span 2 }   /* A, Q'nun sağına kayar */
.kv-sira.s3 .kv-t:first-child{ grid-column:4 / span 2 }   /* Z, S'nin altına gelir */
.kv-sure{ height:8px; border-radius:99px; background:var(--ink-faint); overflow:hidden; max-width:420px;
  margin-inline:auto; width:100% }
.kv-sure i{ display:block; height:100%; background:var(--mint); width:100%; transition:width 1s linear, background .4s }
.kv-sure i.az{ background:var(--heat) } .kv-sure i.son{ background:var(--coral) }



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

/* ============ SORUYU BİLDİR (24.09) ============
   Düğme oyun ekranının sağ üstünde, "Çık"ın yanında. Bilerek soluk ve
   küçük: oyunun akışını bölmemeli, yanlışlıkla basılmamalı. Çocuk
   aradığında bulacağı yerde duruyor. */
.tr-ust-sag{ display:flex; align-items:center; gap:14px }
.linkish.bildir{ opacity:.6; font-size:.82rem }
.linkish.bildir:hover, .linkish.bildir:focus-visible{ opacity:1 }

.tr-bildir-kat{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px }
.tr-bildir-kat .scrim{ position:absolute; inset:0; background:rgba(8,5,24,.72) }
.tr-bildir-kutu{
  position:relative; width:min(460px,100%); max-height:86vh; overflow:auto;
  background:var(--kart,#1b1440); color:inherit;
  border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:22px;
}
.tr-bildir-kutu h3{ margin:0 0 6px; font-size:1.15rem }
.tr-bildir-kutu .tr-ip{ margin:0 0 14px }
.tr-bildir-sec{ display:grid; gap:8px }
.tr-bildir-s{
  width:100%; min-height:52px; padding:10px 14px; text-align:left;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  background:rgba(255,255,255,.04); color:inherit; font:inherit; font-size:1rem;
  cursor:pointer;
}
.tr-bildir-s:hover:not(:disabled){ background:rgba(255,255,255,.1) }
.tr-bildir-s:disabled{ opacity:.45; cursor:default }
.tr-bildir-s.secili{ opacity:1; border-color:var(--mint,#66e0a3); background:rgba(102,224,163,.16) }
.tr-bildir-s:focus-visible{ outline:3px solid var(--mint,#66e0a3); outline-offset:2px }
.tr-bildir-not{ display:block; margin-top:14px; font-size:.9rem }
.tr-bildir-not span{ display:block; margin-bottom:6px; color:var(--ink-dim,#b3aad6) }
.tr-bildir-not em{ font-style:normal; opacity:.7 }
.tr-bildir-not textarea{
  width:100%; padding:10px 12px; border-radius:10px; font:inherit;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.2); color:inherit;
  /* rows=2 yetmiyordu: kutu 150px'e çıkıp "Vazgeç"i ekrandan taşırıyordu.
     Yükseklik burada sabitleniyor, uzun yazıda kendi içinde kayıyor. */
  height:64px; min-height:64px; max-height:110px; resize:vertical;
}

/* Bildirilen sorular — kırmızı rozet yalnız bekleyen varken. */
.count.rozet-kirmizi{
  background:var(--heat,#ff6b5a); color:#fff; padding:3px 10px;
  border-radius:999px; font-weight:700;
}
.rtab tr.tikla{ cursor:pointer }
.rtab tr.tikla:hover{ background:rgba(255,255,255,.05) }
.rtab small.alt{ display:block; opacity:.62; font-size:.76rem; margin-top:2px }
.tchip.d-yeni{ background:rgba(255,107,90,.18); color:var(--heat,#ff6b5a) }
.tchip.d-bakiliyor{ background:rgba(255,196,84,.16) }
.tchip.d-duzeltildi{ background:rgba(102,224,163,.16); color:var(--mint,#66e0a3) }
.tchip.d-gecersiz{ opacity:.6 }

/* Öğrenci kodu — listede ve kartta okunaklı olsun. */
/* KOD RENGİ (24.09 düzeltme)
   İlk hâli beyazın %8'i zemin, kalıtımla gelen koyu yazı — AFA'nın
   deyişiyle "siyah içine siyah". Koyu panelde okunmuyordu.
   Sınıf kodunun eski hâlindeki düzen: koyu kutu, sıcak sarı yazı. */
.kodkutu{
  font:700 .95rem/1 ui-monospace,"JetBrains Mono",monospace; letter-spacing:.06em;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,196,84,.34);
  color:var(--heat); border-radius:8px; padding:5px 9px;
  display:inline-block; white-space:nowrap;
}

/* Kod kutusu açıklamasındaki vurgu: <b> kullanınca .codebox b kuralı
   (1.7rem, turuncu) devreye giriyor ve yazı kutudan taşıyordu. */
.codebox small em{ font-style:normal; font-weight:700; color:var(--ink) }

/* Öğrenci adının yanındaki kod — küçük, adı bastırmasın. */
.kodkutu.mini{
  font-size:.74rem; padding:3px 7px; margin-left:8px;
  vertical-align:middle; letter-spacing:.05em;
}

/* Kod düğmesi: dokunulabilir olduğu belli olsun ama adı bastırmasın. */
button.kodkutu{ cursor:pointer; font-family:ui-monospace,"JetBrains Mono",monospace }
button.kodkutu:hover{ background:rgba(0,0,0,.5); border-color:var(--heat) }
button.kodkutu:focus-visible{ outline:3px solid var(--heat); outline-offset:2px }
button.kodkutu.kopyalandi{
  color:var(--mint); border-color:var(--mint); background:rgba(102,224,163,.14); opacity:1;
}

/* Sınıf kodu artık katlanmış duruyor — ekranda kolay olan kazanır,
   o yüzden zayıf yol göz önünde olmasın. */
.codebox b.kod-basliksiz{ font-size:1rem; letter-spacing:.02em; color:var(--ink); font-weight:700 }
.eski-kod{ margin-top:8px; border-top:1px dotted var(--cizgi, rgba(255,255,255,.14)); padding-top:8px }
.eski-kod > div{ margin-top:6px }
.eski-kod span{ display:block; line-height:1.6; font-size:.78rem; color:var(--ink-dim) }
.eski-kod span.not{ margin-top:4px; opacity:.8 }
#eski-kod-ac{ font-size:.78rem; opacity:.6 }
#eski-kod-ac:hover{ opacity:1 }
.eski-kod b{ font-family:ui-monospace,"JetBrains Mono",monospace; font-size:.95rem !important;
  letter-spacing:.1em !important; color:var(--ink-dim) !important }

/* Veli ekranında çocuğun giriş kodu. */
.v-kod{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px }
.v-kod > span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim) }
.v-kod small{ flex-basis:100%; font-size:.76rem; color:var(--ink-dim) }

/* ===== KOD KUTUSU HİÇ ÇİZİLMİYOR (24.09) =====
   Kutuyu ekrandan kaldırırken yalnız "hidden" bırakmıştım. Ama
   öğretmen paneli sınıf seçilince $("codebox").hidden = false yapıyor —
   yani kutu geri geliyordu: ekranda ham "55FZS9" yazısı ve altında
   kocaman bir boşluk. Öğeler DOM'da lazım (kod oradan okunuyor) ama
   ÇİZİLMEMELİ; karar tek yerde, burada. */
#codebox{ display:none !important }

/* BAŞLIKLAR DİKKAT ÇEKSİN (AFA 02.10): panel başlıkları (Ödev, Sınıf Raporu,
   Bölüm Raporu, İçerik Yükleme, Önerilen ödevler) ve bölüm başlıkları
   (Soru tipine göre zorlanma, Öğrenciler) soluk küçük harf etiket olarak
   kalıyordu; "önerilen ödevler kısmının olduğunu bilmesem dikkatimi
   çekmezdi." Artık Baloo başlık, sarı çubuk. Veli ekranı da aynı. */
#screen-setup .panel > .panel-head > .eyebrow,
#screen-veli  .panel > .panel-head > .eyebrow,
.oneri > h6, .bas-h6{
  font-family:var(--display); font-size:1.45rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); line-height:1.15; padding-left:12px; border-left:5px solid var(--heat); border-radius:2px }
.bas-h6, .oneri > h6{ font-size:1.2rem !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  color:var(--ink) !important; font-weight:800 !important; margin:18px 0 8px !important }
#screen-setup #k-detay > .panel-head > .eyebrow,
#screen-veli  #v-detay > .panel-head > .eyebrow{ font-size:1.45rem }
/* önerilen ödevler kartı: sarı çerçeveli kutu */
.oneri{ background:rgba(255,201,77,.07); border:1px solid rgba(255,201,77,.35); border-radius:12px; padding:4px 14px 12px }
.oneri > h6{ margin-top:12px !important }