/* ═══════════════════════════════════════════════════════════════════════════
   stil.css — Etik Kurul
   Uygulamalar/etik-kurul/stil.css

   Palet ve yazı düzeni isnad-atolye ile aynı değişkenleri kullanır (--kagit,
   --murekkep, --vurgu …); portalın geri kalanıyla aynı aileden görünsün diye.
   Tek ayrıksı öğe karar mührüdür: dosyanın hükmü, kurulun mührüyle basılır.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --kagit:#F7FAFD; --panel:#FFFFFF; --panel-2:#EFF5FB;
  --murekkep:#1B2A4A; --murekkep-2:#42556F; --murekkep-3:#56698A;
  --cizgi:rgba(4,44,83,.12); --cizgi-koyu:rgba(4,44,83,.28);
  --vurgu:#185FA5; --vurgu-yum:#E6F1FB; --lacivert:#042C53;
  --olur:#1F6B4D; --olur-zem:#E4F1EB;
  --olmaz:#9B2C2C; --olmaz-zem:#FAE8E8;
  --uyari:#8A6414; --uyari-zem:#FAF2E0;
  --gri:#56677F; --gri-zem:#EAEFF5;
  --serif:Georgia,"Palatino Linotype","Times New Roman",serif;
  --govde:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --veri:ui-monospace,"Cascadia Mono","SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kagit:#042C53; --panel:#08386A; --panel-2:#0C447C;
    --murekkep:#FFFFFF; --murekkep-2:#CFE1F5; --murekkep-3:#A9C8E9;
    --cizgi:rgba(156,198,238,.16); --cizgi-koyu:rgba(156,198,238,.34);
    --vurgu:#9CC6EE; --vurgu-yum:#0C447C; --lacivert:#CFE1F5;
    --olur:#79CBA5; --olur-zem:#16302A;
    --olmaz:#E79A98; --olmaz-zem:#3A2223;
    --uyari:#D9B76A; --uyari-zem:#332C19;
    --gri:#A9C8E9; --gri-zem:#0C447C;
  }
}
:root[data-theme="dark"]{
  --kagit:#042C53; --panel:#08386A; --panel-2:#0C447C;
  --murekkep:#FFFFFF; --murekkep-2:#CFE1F5; --murekkep-3:#A9C8E9;
  --cizgi:rgba(156,198,238,.16); --cizgi-koyu:rgba(156,198,238,.34);
  --vurgu:#9CC6EE; --vurgu-yum:#0C447C; --lacivert:#CFE1F5;
  --olur:#79CBA5; --olur-zem:#16302A;
  --olmaz:#E79A98; --olmaz-zem:#3A2223;
  --uyari:#D9B76A; --uyari-zem:#332C19;
  --gri:#A9C8E9; --gri-zem:#0C447C;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--kagit);color:var(--murekkep);
  font-family:var(--govde);font-size:17px;line-height:1.6;
  padding:0 1.1rem 4rem;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.sarmal{max-width:72rem;margin:0 auto}
.dar{max-width:34rem;margin:0 auto}

.ust-etiket{font-family:var(--veri);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--murekkep-3)}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.15}
.alt-baslik{color:var(--murekkep-2);max-width:62ch;margin:0}
.not{font-size:.88rem;color:var(--murekkep-3);margin:0}
.satir{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

header.giris{padding:2.4rem 0 1.4rem;border-bottom:1px solid var(--cizgi);display:grid;gap:.5rem}

/* ── Düğmeler ── */
.dugme{
  border:1px solid var(--cizgi-koyu);background:var(--panel);color:var(--murekkep);
  border-radius:4px;padding:.6rem 1.1rem;font-weight:600;min-height:44px;
  transition:border-color .15s,background .15s;
}
.dugme:hover{border-color:var(--vurgu)}
.dugme.ana{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
:root[data-theme="dark"] .dugme.ana{color:var(--kagit)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dugme.ana{color:#042C53}}
.dugme.ana:hover{filter:brightness(1.08)}
.dugme.tehlike{color:var(--olmaz);border-color:var(--olmaz)}
.dugme:disabled{opacity:.45;cursor:not-allowed}

/* ── Kartlar ── */
.kart{
  background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);
  padding:1.3rem 1.4rem;display:grid;gap:.9rem;align-content:start;
}
.kart h2{font-size:1.45rem}
.giris-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.4rem;margin-top:1.6rem}

input.alan{
  width:100%;padding:.65rem .8rem;font:inherit;font-size:1.05rem;
  background:var(--kagit);color:var(--murekkep);
  border:1px solid var(--cizgi-koyu);border-radius:4px;
}
input.alan:focus{outline:3px solid var(--vurgu);outline-offset:2px;border-color:var(--vurgu)}
input.kod{font-family:var(--veri);letter-spacing:.4em;font-size:1.6rem;text-align:center;max-width:12rem}
.hata{color:var(--olmaz);font-size:.9rem;min-height:1.3rem;margin:0}

/* ── Hoca üst çubuğu ── */
.hoca-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;
  padding:.8rem 0;border-bottom:1px solid var(--cizgi);
}
.oda-kod{font-family:var(--veri);font-size:1rem;letter-spacing:.08em;color:var(--murekkep-2)}
.oda-kod b{color:var(--vurgu);font-size:1.25rem;letter-spacing:.2em}
.sekme{display:flex;gap:.25rem;flex-wrap:wrap}
.sekme button{background:none;border:1px solid transparent;border-radius:4px;padding:.3rem .75rem;color:var(--murekkep-2);font-size:.95rem}
.sekme button[aria-current="true"]{border-color:var(--cizgi-koyu);color:var(--murekkep);background:var(--panel)}
.katilan{margin-left:auto;font-size:.95rem;color:var(--murekkep-2)}
.katilan b{font-family:var(--veri);color:var(--murekkep)}
.baglanti-yok{background:var(--uyari-zem);color:var(--uyari);padding:.4rem .8rem;border-radius:4px;font-size:.9rem}

/* ── Lobi ── */
.lobi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.6rem;margin-top:1.6rem;align-items:start}
.qr-kutu{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center}
.qr-kutu .qr{background:#fff;padding:10px;border:1px solid var(--cizgi);width:210px;max-width:100%}
.qr-kutu .qr svg{display:block;width:100%;height:auto}
.buyuk-kod{font-family:var(--veri);font-size:clamp(3rem,8vw,5.2rem);letter-spacing:.18em;color:var(--lacivert);line-height:1}
.adres{font-family:var(--veri);font-size:.9rem;color:var(--murekkep-2);word-break:break-all}
.oyuncular{display:flex;flex-wrap:wrap;gap:.4rem}
.oyuncular span{background:var(--panel-2);border:1px solid var(--cizgi);border-radius:999px;padding:.15rem .7rem;font-size:.95rem}
.dosya-sec{display:grid;gap:.2rem}
.dosya-sec label{display:grid;grid-template-columns:22px 4.2rem 1fr;gap:.6rem;align-items:start;padding:.45rem .5rem;border-radius:4px;cursor:pointer}
.dosya-sec label:hover{background:var(--panel-2)}
.dosya-sec input{margin:.35rem 0 0;width:16px;height:16px;accent-color:var(--vurgu)}
.dosya-sec .no{font-family:var(--veri);font-size:.8rem;color:var(--murekkep-3);padding-top:.2rem}
.dosya-sec .t{font-weight:600}
.dosya-sec .tg{display:block;font-size:.85rem;color:var(--murekkep-3)}

/* ── Hızlı tur ── */
.hizli{margin-top:1.6rem;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr);gap:1.6rem;align-items:start}
.soru-kart{background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);padding:clamp(1.3rem,3vw,2.4rem);display:grid;gap:1.2rem}
.soru-kart .ust{display:flex;justify-content:space-between;gap:1rem}
.soru-metni{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.3;margin:0}
.cevap{border-top:1px solid var(--cizgi);padding-top:1rem;display:grid;gap:.35rem}
.cevap .kat{font-family:var(--serif);font-size:1.7rem}
.cevap .kat.olmaz{color:var(--olmaz)} .cevap .kat.olur{color:var(--olur)}
.madde{font-family:var(--veri);font-size:.82rem;color:var(--murekkep-2)}

/* dağılım çubukları */
.dagilim{display:grid;gap:.45rem}
.dagilim .cubuk{display:grid;grid-template-columns:minmax(7rem,9.5rem) 1fr 2.2rem;gap:.6rem;align-items:center;font-size:.92rem}
.dagilim .iz{height:12px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.dagilim .dolu{height:100%;background:var(--gri);transition:width .5s ease}
.dagilim .cubuk.dogru .dolu{background:var(--olur)}
.dagilim .cubuk.dogru{font-weight:600}
.dagilim .sayi{font-family:var(--veri);text-align:right;color:var(--murekkep-2)}

/* ── Kurul oturumu ── */
.kurul{margin-top:1.4rem;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(18rem,1fr);gap:1.6rem;align-items:start}
.ilerleme{grid-column:1/-1;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.noktalar{display:flex;gap:5px}
.noktalar i{width:26px;height:4px;border-radius:2px;background:var(--cizgi-koyu)}
.noktalar i.bitti{background:var(--vurgu)}
.noktalar i.simdi{background:var(--murekkep)}
.ilerleme .sag{margin-left:auto}

.dosya{position:relative;background:var(--panel);border:1px solid var(--cizgi);border-top:4px solid var(--lacivert);overflow:hidden}
.d-bas{padding:1.3rem clamp(1.1rem,3vw,2rem) 1rem;border-bottom:1px solid var(--cizgi);display:grid;gap:.35rem}
.d-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--veri);font-size:.78rem;letter-spacing:.06em;color:var(--murekkep-3)}
.d-bas h2{font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12}
.d-govde{padding:1.2rem clamp(1.1rem,3vw,2rem) 1.6rem;display:grid;gap:1.1rem}
.etiket{font-family:var(--veri);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--murekkep-3);margin:0 0 .25rem}
.olay{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.55;margin:0;max-width:64ch}
.iddia{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.2rem);margin:0;color:var(--murekkep-2)}
.kanit{border:1.5px dashed var(--cizgi-koyu);border-radius:4px;padding:1rem 1.1rem;display:grid;gap:.3rem}
.kanit.muhurlu{text-align:center;color:var(--murekkep-3)}
.kanit.acik{border:1px solid var(--cizgi);border-left:3px solid var(--uyari);background:var(--uyari-zem)}
.kanit h3{font-size:1.2rem}
.kanit p{margin:0;font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.55}
.karar{border-top:3px double var(--cizgi-koyu);padding-top:1rem;display:grid;gap:.7rem}
.karar h3{font-size:1.6rem}
.karar h3.olmaz{color:var(--olmaz)} .karar h3.olur{color:var(--olur)}
.karar p{margin:0;font-family:var(--serif);font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6;max-width:66ch}
.maddeler{display:flex;flex-wrap:wrap;gap:.35rem}
.maddeler span{font-family:var(--veri);font-size:.78rem;background:var(--panel-2);border:1px solid var(--cizgi);border-radius:3px;padding:.15rem .5rem}
.tartisma{background:var(--vurgu-yum);border-radius:4px;padding:.8rem 1rem}
.tartisma p{font-style:italic}

/* Mühür başlık bandının sağına basılır; başlık o kadar içeriden kırılır ki
   hiçbir satırın üstüne binmesin. */
.dosya.muhurlu .d-bas{padding-right:clamp(8.5rem,14vw,10rem);min-height:150px}
.muhur{
  position:absolute;top:10px;right:clamp(8px,2vw,24px);width:128px;height:128px;border-radius:50%;
  display:grid;place-items:center;text-align:center;font-family:var(--serif);font-weight:700;
  font-size:1.2rem;line-height:1.05;letter-spacing:.06em;transform:rotate(-13deg);pointer-events:none;
  opacity:.88;
}
.muhur::before,.muhur::after{content:"";position:absolute;border-radius:50%;border:4px solid currentColor}
.muhur::before{inset:0}
.muhur::after{inset:8px;border-width:1.5px}
.muhur small{display:block;font-family:var(--veri);font-size:.55rem;letter-spacing:.12em;font-weight:500;margin-top:5px}
.muhur.yeni{animation:muhur .5s cubic-bezier(.3,1.6,.5,1) both} .muhur.olur{color:var(--olur)}

.panel{position:sticky;top:1rem;display:grid;gap:1rem;align-content:start}
.panel .soru{font-family:var(--serif);font-size:1.3rem;line-height:1.3;margin:0}
.sayac-kutu{display:flex;align-items:baseline;gap:.5rem}
.sayac-kutu b{font-family:var(--veri);font-size:2.2rem;color:var(--lacivert);font-variant-numeric:tabular-nums}
.zamanlayici{display:flex;align-items:center;gap:.7rem;border:1px solid var(--cizgi);border-radius:4px;padding:.45rem .7rem;background:var(--panel)}
.zamanlayici .t{font-family:var(--veri);font-size:1.5rem;font-variant-numeric:tabular-nums;min-width:4.2ch}
.zamanlayici .t.az{color:var(--olmaz)}
.zamanlayici button{background:none;border:1px solid var(--cizgi-koyu);border-radius:4px;padding:.2rem .6rem;font-size:.85rem;color:var(--murekkep-2)}

/* sıralama */
.siralama{list-style:none;margin:0;padding:0;display:grid}
.siralama li{display:grid;grid-template-columns:2rem 1fr auto auto;gap:.6rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--cizgi)}
.siralama .s{font-family:var(--veri);color:var(--murekkep-3);font-size:.85rem}
.siralama .p{font-family:var(--veri);color:var(--vurgu);font-variant-numeric:tabular-nums;font-weight:600}
.siralama .k{font-family:var(--veri);font-size:.8rem;color:var(--olur);min-width:2.2rem;text-align:right}

/* ── Sonuç ── */
.sonuc{margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.kursu{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;align-items:end;margin:1.2rem 0}
.kursu div{background:var(--panel);border:1px solid var(--cizgi);border-top:3px solid var(--vurgu);padding:.8rem;text-align:center;display:grid;gap:.2rem}
.kursu .ad{font-weight:600;overflow-wrap:anywhere}
.kursu .p{font-family:var(--veri);color:var(--vurgu)}
.kursu .y1{padding-block:1.6rem;border-top-color:var(--uyari)}
.kursu .y1 .ad{font-family:var(--serif);font-size:1.4rem;font-weight:400}
.kapanis ol{margin:0;padding-left:1.3rem;display:grid;gap:.6rem;font-family:var(--serif);font-size:1.15rem}

/* ── Öğrenci telefonu ── */
.tel{max-width:30rem;margin:0 auto;padding-top:1.2rem;display:grid;gap:1rem}
.tel-ust{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;border-bottom:1px solid var(--cizgi);padding-bottom:.6rem}
.tel-ust .ad{font-weight:600;overflow-wrap:anywhere}
.tel-ust .puan{font-family:var(--veri);color:var(--vurgu);font-weight:600;white-space:nowrap}
.bekle{text-align:center;padding:2.2rem 1rem;display:grid;gap:.6rem;color:var(--murekkep-2)}
.bekle h2{color:var(--murekkep);font-size:1.6rem}
.oy-dugmeleri{display:grid;gap:.6rem}
.oy{
  min-height:64px;border-radius:6px;border:2px solid var(--cizgi-koyu);background:var(--panel);
  font-size:1.15rem;font-weight:600;text-align:left;padding:.7rem 1rem;display:flex;align-items:center;gap:.7rem;
}
.oy::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid currentColor;flex:none;opacity:.5}
.oy[aria-pressed="true"]::before{background:currentColor;opacity:1;box-shadow:inset 0 0 0 3px var(--panel)}
.oy.v-ihlal{color:var(--olmaz)} .oy.v-degil{color:var(--olur)} .oy.v-yetersiz{color:var(--gri)}
.oy[aria-pressed="true"].v-ihlal{background:var(--olmaz-zem);border-color:var(--olmaz)}
.oy[aria-pressed="true"].v-degil{background:var(--olur-zem);border-color:var(--olur)}
.oy[aria-pressed="true"].v-yetersiz{background:var(--gri-zem);border-color:var(--gri)}
.oy.kat{color:var(--murekkep);min-height:52px;font-size:1.02rem}
.oy.kat[aria-pressed="true"]{background:var(--vurgu-yum);border-color:var(--vurgu)}
.oy:disabled{cursor:default}
/* kendi başına çalışmada cevap anında işaretlenir */
.oy.kat.dogru-cevap{background:var(--olur-zem);border-color:var(--olur);color:var(--olur)}
.oy.kat.yanlis-cevap{background:var(--olmaz-zem);border-color:var(--olmaz);color:var(--olmaz)}
.oy:disabled:not(.dogru-cevap):not(.yanlis-cevap){opacity:.55}
.oy-izgara{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.tel .soru{font-family:var(--serif);font-size:1.3rem;line-height:1.3;margin:0}
.tel details{border:1px solid var(--cizgi);border-radius:4px;background:var(--panel);padding:.6rem .9rem}
.tel summary{cursor:pointer;font-weight:600;color:var(--vurgu)}
.tel details p{font-family:var(--serif);margin:.6rem 0 0}
.kazanc{padding:1rem 1.1rem;border-radius:4px;display:grid;gap:.2rem}
.kazanc.iyi{background:var(--olur-zem);color:var(--olur)}
.kazanc.orta{background:var(--uyari-zem);color:var(--uyari)}
.kazanc.yok{background:var(--gri-zem);color:var(--gri)}
.kazanc.sure{background:var(--uyari-zem);color:var(--uyari)}
.fark{background:var(--panel);border-left:3px solid var(--uyari);padding:.4rem .6rem;color:var(--murekkep)}
#sira.yukseldi{animation:firla .6s cubic-bezier(.3,1.6,.5,1);color:var(--olur)}
.kazanc b{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.kazanc span{color:var(--murekkep-2);font-size:.95rem}
.gizlilik{font-size:.85rem;color:var(--murekkep-3);background:var(--panel-2);padding:.7rem .9rem;border-radius:4px;margin:0}

@keyframes belir{from{opacity:0;transform:translateY(6px)}}
@keyframes ac{from{opacity:0;transform:perspective(900px) rotateX(-60deg);transform-origin:top}}
@keyframes muhur{from{transform:rotate(-13deg) scale(2.1);opacity:0}to{transform:rotate(-13deg) scale(1);opacity:.88}}

@media (max-width:900px){
  .giris-izgara,.lobi,.hizli,.kurul,.sonuc{grid-template-columns:1fr}
  .panel{position:static}
}
@media (max-width:560px){
  body{padding:0 1rem 3rem}
  .qr-kutu{grid-template-columns:1fr}
  .qr-kutu .qr{width:170px}
  .dosya.muhurlu .d-bas{padding-right:6.6rem;min-height:112px}
  .muhur{width:92px;height:92px;font-size:.74rem;top:10px;right:8px}
  .muhur::before{border-width:3px}
  .muhur::after{inset:5px}
  .muhur small{font-size:.42rem;margin-top:3px}
  .ilerleme .sag{margin-left:0;width:100%}
  .ilerleme .sag .dugme{flex:1}
  .kursu{grid-template-columns:1fr}
  .dagilim .cubuk{grid-template-columns:minmax(6rem,8rem) 1fr 2rem}
}
/* ── Oyunlaştırma: süre, seri, yarış, kürsü ─────────────────────────────── */
.dugme.buyuk{font-size:1.08rem;padding:.8rem 1.4rem;min-height:52px}
.ses-dugme{background:none;border:1px solid var(--cizgi-koyu);border-radius:999px;padding:.2rem .8rem;font-size:.85rem;color:var(--murekkep-2)}
.ses-dugme[aria-pressed="false"]{opacity:.6}

.sayac{display:flex;align-items:center;gap:.6rem}
.sayac-iz{flex:1;height:10px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.sayac-dolu{height:100%;width:100%;background:var(--vurgu);border-radius:999px;transition:width .2s linear,background .3s}
.sayac-dolu.az{background:var(--olmaz)}
.sayac-sn{font-family:var(--veri);font-weight:600;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}

.seri{display:inline-block;font-family:var(--veri);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--uyari-zem);color:var(--uyari);border:1px solid var(--uyari);border-radius:999px;padding:.05rem .5rem;vertical-align:middle;white-space:nowrap}
.puan-buyuk{font-family:var(--serif);font-size:clamp(1.8rem,7vw,2.4rem)!important;font-weight:400;line-height:1.1}
.kazanc.yeni .puan-buyuk{animation:firla .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes firla{from{transform:scale(.4);opacity:0}}

.ilerleme-cubuk{display:block;height:6px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.ilerleme-cubuk>span{display:block;height:100%;background:var(--olur);border-radius:999px;transition:width .4s ease}

.yazi-form{display:flex;gap:.5rem}
.yazi-form .alan{flex:1;min-width:0;font-size:1.15rem}
.oy.kat.secim{cursor:pointer;align-items:flex-start;font-weight:400}
.oy.kat.secim input{margin-top:.3rem;accent-color:var(--vurgu)}
.oy.kat.secim::before{display:none}
.sonuc-kart{border-left-color:var(--uyari)}
.sonuc-kart.yeni{animation:belir .5s ease}

/* canlı yarış (projeksiyon) */
.yaris{margin-top:1.4rem}
.yaris-ust{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.yaris-ozet{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--murekkep-2)}
.yaris-ozet b{font-family:var(--veri);color:var(--lacivert);font-size:1.3rem}
.yaris-liste{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.yaris-liste li{display:grid;grid-template-columns:2.2rem minmax(8rem,1.2fr) minmax(6rem,2fr) 4.5rem 6.5rem;gap:.8rem;align-items:center;
  background:var(--panel);border:1px solid var(--cizgi);padding:.55rem .8rem;border-radius:4px;transition:transform .3s}
.yaris-liste .s{font-family:var(--veri);color:var(--murekkep-3);text-align:center}
.yaris-liste .ad{font-weight:600;overflow-wrap:anywhere}
.yaris-liste .adim{font-family:var(--veri);font-size:.85rem;color:var(--murekkep-2);text-align:right}
.yaris-liste .p{font-family:var(--veri);font-weight:600;color:var(--vurgu);text-align:right;font-size:1.1rem;font-variant-numeric:tabular-nums}
.yaris-liste li.ilk1{border-left:4px solid var(--uyari)}
.yaris-liste li.ilk2{border-left:4px solid var(--murekkep-3)}
.yaris-liste li.ilk3{border-left:4px solid var(--olur)}
.yaris-liste li.bitti .adim{color:var(--olur);font-weight:600}
.takim-yaris{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;margin-bottom:1rem}
.takim-yaris div{background:var(--panel);border:1px solid var(--cizgi);border-top:3px solid var(--vurgu);padding:.6rem .8rem;display:flex;justify-content:space-between;align-items:baseline}
.takim-yaris div.onde{border-top-color:var(--uyari)}
.takim-yaris b{font-family:var(--veri);color:var(--vurgu)}

/* tartışma */
.tartisma-sayfa{margin-top:1.4rem;display:grid;gap:1.4rem}
.tartisma-sayfa h2{font-size:1.5rem;margin-bottom:.6rem}
.zor-liste{margin:0;padding-left:1.4rem;display:grid;gap:.8rem}
.zor-liste li{background:var(--panel);border:1px solid var(--cizgi);padding:.8rem 1rem}
.zor-liste p{margin:.3rem 0 0}
.zor-ust{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.zor-ust .oran{font-family:var(--veri);font-size:.85rem;color:var(--olmaz)}
.tartisma-dosya{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(16rem,1fr);gap:1.2rem;align-items:start;margin-bottom:1.4rem}

/* kürsü: üçüncü, ikinci, birinci sırayla açılır */
.kursu.yeni .y3{animation:kursu .6s .3s both cubic-bezier(.3,1.5,.5,1)}
.kursu.yeni .y2{animation:kursu .6s 1.1s both cubic-bezier(.3,1.5,.5,1)}
.kursu.yeni .y1{animation:kursu .7s 2s both cubic-bezier(.3,1.5,.5,1)}
@keyframes kursu{from{transform:translateY(40px) scale(.8);opacity:0}}
.kursu .y1{padding-block:2rem}

@media (max-width:900px){
  .tartisma-dosya{grid-template-columns:1fr}
  .yaris-liste li{grid-template-columns:1.8rem 1fr 4.5rem;grid-template-areas:"s ad p" "c c adim"}
  .yaris-liste .s{grid-area:s} .yaris-liste .ad{grid-area:ad} .yaris-liste .p{grid-area:p}
  .yaris-liste .ilerleme-cubuk{grid-area:c} .yaris-liste .adim{grid-area:adim}
}
/* ── Görsel dil: simgeler, konfeti, rozetler, bölüm kartları ──────────────── */
.oy{gap:.75rem}
.oy.kat::before,.oy[class*="v-"]::before{display:none}
.oy-ikon{font-size:1.45rem;line-height:1;flex:none;width:1.8rem;text-align:center;filter:saturate(.95)}
.oy[aria-pressed="true"] .oy-ikon,.oy.dogru-cevap .oy-ikon{transform:scale(1.15);transition:transform .15s}
.oy:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(4,44,83,.10)}
.oy:not(:disabled):active{transform:scale(.98)}
.oy.kat.dogru-cevap{box-shadow:0 0 0 3px var(--olur-zem)}
.tur-ikon{font-size:1rem;letter-spacing:0}

.kazanc{position:relative;padding-top:1.1rem}
.kazanc .buyuk-ikon{font-size:2.6rem;line-height:1;display:block;color:inherit}
.kazanc span b{font-size:inherit;font-family:inherit;font-weight:700}
.kazanc.yeni .buyuk-ikon{animation:zipla .6s cubic-bezier(.3,1.7,.5,1)}
@keyframes zipla{0%{transform:scale(.2) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(6deg)}100%{transform:none}}
.seri.alev{background:linear-gradient(90deg,#FFE3C2,#FFD0D0);color:#9B3B12;border-color:#E07A3A}
.seri.alev{animation:nabiz 1.4s ease-in-out infinite}
@keyframes nabiz{50%{box-shadow:0 0 0 4px rgba(224,122,58,.18)}}
.seri.sonuk{background:var(--gri-zem);color:var(--gri);border-color:var(--cizgi-koyu)}
:root[data-theme="dark"] .seri.alev{background:#3D2A1A;color:#FFC08A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seri.alev{background:#3D2A1A;color:#FFC08A}}

.konfeti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:90}
.konfeti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;opacity:.95;animation-name:dus;animation-timing-function:cubic-bezier(.25,.6,.45,1);animation-fill-mode:forwards}
@keyframes dus{to{transform:translate(var(--x),108vh) rotate(var(--r));opacity:.85}}

.ara-kart{background:var(--panel);border:1px solid var(--cizgi);border-top:4px solid var(--vurgu);border-radius:10px;padding:1.6rem 1.3rem;display:grid;gap:.8rem;text-align:center;justify-items:center}
.ara-kart.yeni{animation:belir .45s ease}
.ara-ikon{font-size:3.2rem;line-height:1}
.ara-kart.yeni .ara-ikon{animation:zipla .7s .1s both cubic-bezier(.3,1.7,.5,1)}
.ara-kart h2{font-size:1.5rem}
.ara-kart p{margin:0;max-width:34ch;color:var(--murekkep-2)}
.ara-liste{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;text-align:left;width:100%}
.ara-liste li{background:var(--panel-2);border-radius:8px;padding:.5rem .8rem}
.bekle .ara-ikon{animation:salla 2.4s ease-in-out infinite}
@keyframes salla{50%{transform:rotate(12deg)}}

.sonuc-ikon{font-size:3.4rem;line-height:1}
.sonuc-kart.yeni .sonuc-ikon{animation:zipla .8s .2s both cubic-bezier(.3,1.7,.5,1)}
.rozetler{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.55rem}
.rozet{border:1px solid var(--cizgi);border-radius:10px;padding:.7rem .5rem;text-align:center;display:grid;gap:.15rem;background:var(--panel);animation:belir .4s ease both}
.rozet-ikon{font-size:2rem;line-height:1.1}
.rozet b{font-size:.92rem}
.rozet small{font-size:.78rem;color:var(--murekkep-2);line-height:1.3}
.rozet:not(.kilitli){border-color:var(--uyari);background:var(--uyari-zem)}
.rozet.kilitli .rozet-ikon{filter:grayscale(1);opacity:.35}
.rozet.kilitli b{color:var(--murekkep-3)}

.nasil{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.nasil li{display:flex;align-items:center;gap:.45rem;background:var(--panel);border:1px solid var(--cizgi);border-radius:999px;padding:.35rem .85rem .35rem .55rem;font-size:.95rem}
.nasil li span{font-size:1.2rem}
.kart-ikon{font-size:2rem;line-height:1}
.madalya{font-size:2rem;line-height:1}
.yaris-liste .s{font-size:1.1rem}
.kursu .y1 .madalya{font-size:2.8rem}
/* ── Sıralama turu ─────────────────────────────────────────────────────── */
.sira-liste{display:grid;gap:.4rem;counter-reset:none}
.sira-yer{display:grid;grid-template-columns:2rem 1fr auto;gap:.6rem;align-items:center;text-align:left;
  border-radius:8px;padding:.55rem .7rem;min-height:52px;font:inherit;color:var(--murekkep);border:2px solid var(--cizgi-koyu);background:var(--panel)}
.sira-yer b{font-family:var(--veri);font-size:1.05rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);color:var(--vurgu)}
.sira-yer span{display:grid;gap:.2rem}
.sira-yer small{color:var(--olmaz);font-size:.85rem}
.sira-yer.bos{border-style:dashed;color:var(--murekkep-3);background:transparent}
.sira-yer.dolu{border-color:var(--vurgu);background:var(--vurgu-yum);cursor:pointer;animation:belir .25s ease}
.sira-yer.iyi{border-color:var(--olur);background:var(--olur-zem)}
.sira-yer.kotu{border-color:var(--olmaz);background:var(--olmaz-zem)}
.sira-havuz{display:grid;gap:.45rem}
.sira-adim{text-align:left;font:inherit;font-size:1rem;color:var(--murekkep);background:var(--panel);border:2px solid var(--cizgi-koyu);border-radius:8px;padding:.7rem .85rem;min-height:52px;cursor:pointer}
.sira-adim:hover{border-color:var(--vurgu)}
.sira-adim:active{transform:scale(.98)}

.gerekce-kutu{display:grid;gap:.6rem;margin-top:.6rem;padding:1rem;border:2px solid var(--uyari);border-radius:10px;background:var(--uyari-zem)}
.gerekce-kutu .oy{font-size:.98rem}
/* ── Kampanya: Bir Dönem Etik Kurulda ──────────────────────────────────────
   Kurul salonu havası: lacivert zemin, altın vurgu. Yalnız kampanya
   ekranlarında; sitenin geri kalanı sade kalır. */
.kamp-afis{margin-top:1.6rem;border-radius:14px;overflow:hidden;color:#F5F1E6;
  background:radial-gradient(120% 140% at 85% 0%,#2B4F7E 0%,#0B2545 55%,#061A33 100%);border:1px solid #C9A227;box-shadow:0 10px 30px rgba(4,44,83,.25)}
.kamp-afis-ic{padding:1.6rem 1.4rem;display:grid;gap:.6rem;max-width:44rem;background:linear-gradient(90deg,rgba(6,26,51,.85),rgba(6,26,51,.25))}
.kamp-afis h2{font-size:clamp(1.6rem,4.5vw,2.3rem);color:#F3D58A;letter-spacing:.02em}
.kamp-afis p{margin:0;color:#E8E2D0}
.kamp-afis .ust-etiket{color:#C9B27A}
.kamp-afis .not{color:#D8CBA3}
.kamp-afis .dugme.ana{background:#C9A227;border-color:#C9A227;color:#1A1405;justify-self:start}
.kamp-baslik{display:flex;align-items:center;gap:.8rem}
.kamp-baslik span{font-size:2.6rem}
.adimlar{list-style:none;margin:0;padding:0;display:flex;gap:.4rem}
.adimlar li{flex:1;display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--murekkep-3);border-bottom:3px solid var(--cizgi-koyu);padding-bottom:.35rem}
.adimlar li b{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);font-family:var(--veri);font-size:.8rem}
.adimlar li.simdi{color:var(--murekkep);border-color:#C9A227}.adimlar li.simdi b{background:#C9A227;color:#1A1405}
.adimlar li.tamam{color:var(--olur);border-color:var(--olur)}.adimlar li.tamam b{background:var(--olur);color:#fff}
.profil{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;padding:1rem;border-radius:12px;color:#F5F1E6;
  background:linear-gradient(135deg,#0B2545,#1B3F6B);border:1px solid #C9A227}
.profil-ikon{font-size:2.8rem;line-height:1}
.profil-bilgi{display:grid;gap:.25rem}
.profil-bilgi b{font-family:var(--serif);font-size:1.3rem;font-weight:400}
.profil-bilgi span,.profil-bilgi small{color:#DCD3BA}
.profil-bilgi small b{font-family:var(--veri);font-size:inherit;color:#F3D58A}
.itibar{height:10px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.itibar span{display:block;height:100%;background:linear-gradient(90deg,#C9A227,#F3D58A);border-radius:999px;transition:width .8s ease}
.oturumlar{display:grid;gap:.6rem}
.oturum-kart{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.8rem;border-radius:12px;background:var(--panel);border:1px solid var(--cizgi)}
.oturum-kart.siradaki{border:2px solid #C9A227;box-shadow:0 4px 14px rgba(201,162,39,.18)}
.oturum-kart.bitti{border-color:var(--olur)}
.oturum-kart.kilitli{opacity:.55}
.oturum-ikon{font-size:2rem;width:2.6rem;text-align:center}
.oturum-bilgi{display:grid;gap:.15rem}
.oturum-bilgi small{font-family:var(--veri);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--murekkep-3)}
.oturum-bilgi span{font-size:.9rem;color:var(--murekkep-2)}
.oturum-sonuc{color:var(--olur)!important;font-weight:600}
.kamp-hikaye{border-top-color:#C9A227}
.kamp-hikaye .hedef{background:var(--uyari-zem);color:var(--uyari);border-radius:8px;padding:.5rem .8rem;font-weight:600}
.tutanak{border-left-color:#C9A227;position:relative}
.tutanak.yeni{animation:belir .5s ease}
.tutanak-mühür{font-size:2.6rem;line-height:1}
.tutanak-liste{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;margin:0}
.tutanak-liste dt{color:var(--murekkep-2)}
.tutanak-liste dd{margin:0;font-family:var(--veri);font-weight:600;text-align:right}
.terfi{margin-top:.4rem;padding:.8rem 1rem;border-radius:10px;background:linear-gradient(90deg,#FFF3C9,#FFE2A8);color:#6A4B00;font-size:1.1rem;text-align:center;animation:zipla .7s both}

/* ── Görseller (kampanya) ── */
.kamp-afis{position:relative}
.afis-gorsel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.kamp-afis-ic{position:relative}
.gorsel-beyan{font-size:.78rem;color:var(--murekkep-3);margin:0}
.gorsel-beyan.acik{color:#CBBF9A}
.oturum-gorsel{position:relative;width:5.2rem;height:4rem;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#0B2545,#1B3F6B);display:grid;place-items:center;flex:none}
.oturum-kapak{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oturum-gorsel .oturum-ikon{position:relative;font-size:1.6rem;width:auto;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.oturum-kapak~.oturum-ikon{position:absolute;right:4px;bottom:2px;font-size:1.2rem}
.oturum-kart.kilitli .oturum-kapak{filter:grayscale(1) blur(1px)}
.hikaye-kapak{width:calc(100% + 2.6rem);margin:-1.6rem -1.3rem 0;height:11rem;object-fit:cover;border-radius:10px 10px 0 0;display:block}
.hikaye-kapak~.ara-ikon{margin-top:-2.4rem;background:var(--panel);border-radius:50%;width:4rem;height:4rem;display:grid;place-items:center;font-size:2.2rem;box-shadow:0 2px 10px rgba(0,0,0,.2)}

/* ── Küçük canlandırmalar (hareket azaltma tercihinde hepsi kapanır) ── */
/* Görseller: yavaş yakınlaşma ve kayma; kandil ışığı gibi hafif parıltı. */
.afis-gorsel{animation:kenburns 26s ease-in-out infinite alternate;transform-origin:60% 40%}
.hikaye-kapak{animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1.5%)}}
.kamp-afis::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 50% at 55% 60%,rgba(243,213,138,.22),transparent 70%);animation:kandil 4.5s ease-in-out infinite}
@keyframes kandil{0%,100%{opacity:.55}40%{opacity:.9}60%{opacity:.7}}
.kamp-afis h2{animation:belir .8s ease both}
/* Dönem ekranı: kartlar sırayla gelir, sıradaki oturum nabız atar. */
.oturum-kart{animation:kaygel .5s ease both}
.oturum-kart:nth-child(2){animation-delay:.08s}.oturum-kart:nth-child(3){animation-delay:.16s}
.oturum-kart:nth-child(4){animation-delay:.24s}.oturum-kart:nth-child(5){animation-delay:.32s}
@keyframes kaygel{from{opacity:0;transform:translateX(-14px)}}
.oturum-kart.siradaki{animation:kaygel .5s ease both,nabizAltin 2.4s 1s ease-in-out infinite}
@keyframes nabizAltin{50%{box-shadow:0 0 0 6px rgba(201,162,39,.18),0 4px 14px rgba(201,162,39,.18)}}
.oturum-kart:not(.kilitli){transition:transform .2s ease,box-shadow .2s ease}
.oturum-kart:not(.kilitli):hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(4,44,83,.14)}
.itibar span{animation:dolum 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes dolum{from{width:0!important}}
.profil-ikon{animation:suzul 3.5s ease-in-out infinite}
@keyframes suzul{50%{transform:translateY(-4px)}}
/* Terfi: unvan simgesinin çevresinde dönen parıltılar. */
.terfi{position:relative;overflow:hidden}
.terfi::before,.terfi::after{content:"✨";position:absolute;top:50%;left:50%;font-size:1.1rem;animation:yorunge 3s linear infinite}
.terfi::after{animation-delay:-1.5s}
@keyframes yorunge{from{transform:rotate(0) translateX(9rem) rotate(0)}to{transform:rotate(360deg) translateX(9rem) rotate(-360deg)}}
/* Kartlar ve düğmeler */
.kart{transition:box-shadow .2s ease}
.giris-izgara .kart:hover{box-shadow:0 8px 22px rgba(4,44,83,.10)}
.kart-ikon{display:inline-block;transition:transform .3s ease}
.giris-izgara .kart:hover .kart-ikon{transform:rotate(-8deg) scale(1.12)}
.nasil li{animation:belir .45s ease both}
.nasil li:nth-child(2){animation-delay:.07s}.nasil li:nth-child(3){animation-delay:.14s}.nasil li:nth-child(4){animation-delay:.21s}.nasil li:nth-child(5){animation-delay:.28s}

/* ── Ara sahne: kurul kapısı açılır ── */
.ara-sahne{position:fixed;inset:0;z-index:120;background:#050F1F;overflow:hidden;perspective:1400px;display:grid;place-items:center;animation:belir .3s ease}
.ara-sahne.kapaniyor{opacity:0;transition:opacity .35s ease}
.sahne-gorsel{position:absolute;inset:0}
.sahne-gorsel img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);animation:sahneZoom 4.6s cubic-bezier(.2,.6,.3,1) forwards;filter:brightness(.55)}
@keyframes sahneZoom{35%{filter:brightness(.55)}100%{transform:scale(1.02);filter:brightness(.95)}}
.sahne-perde{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(3,10,22,.85) 100%)}
.sahne-yazi{position:relative;z-index:2;text-align:center;color:#F5EBD0;display:grid;gap:.5rem;padding:0 1.5rem;opacity:0;animation:sahneYazi 1s 1.9s ease forwards}
.sahne-yazi small{font-family:var(--veri);letter-spacing:.3em;text-transform:uppercase;color:#E3C877;font-size:.8rem}
.sahne-yazi b{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,6vw,3.2rem);text-shadow:0 2px 18px rgba(0,0,0,.7);line-height:1.15}
@keyframes sahneYazi{from{opacity:0;transform:translateY(14px);letter-spacing:.08em}to{opacity:1;transform:none;letter-spacing:normal}}
.kapi{position:absolute;top:0;bottom:0;width:50.5%;z-index:3;background:
  linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35)),
  repeating-linear-gradient(90deg,#3B2412 0 22px,#46301A 22px 24px),#3B2412;box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
.kapi.sol{left:0;transform-origin:left center;animation:kapiSol 1.5s .6s cubic-bezier(.6,0,.2,1) forwards;border-right:2px solid #C9A227}
.kapi.sag{right:0;transform-origin:right center;animation:kapiSag 1.5s .6s cubic-bezier(.6,0,.2,1) forwards;border-left:2px solid #C9A227}
@keyframes kapiSol{to{transform:rotateY(-100deg)}}
@keyframes kapiSag{to{transform:rotateY(100deg)}}
.kapi-desen{position:absolute;inset:12% 14%;border:3px solid #C9A227;border-radius:50% 50% 6px 6px / 22% 22% 6px 6px;opacity:.85;
  background:repeating-conic-gradient(from 22.5deg,rgba(201,162,39,.35) 0 12.5%,transparent 0 25%) 50% 40%/46px 46px}
.kapi-muhur{position:absolute;z-index:4;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;
  background:radial-gradient(circle,#F3D58A,#C9A227 60%,#8A6A10);box-shadow:0 0 0 4px #5A3E0A,0 0 30px rgba(243,213,138,.7);animation:muhurSahne 1.9s ease forwards}
@keyframes muhurSahne{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.1);opacity:1}45%{transform:scale(1);opacity:1}60%{opacity:0;transform:scale(1.4)}100%{opacity:0;transform:scale(1.4)}}
.sahne-gec{position:absolute;right:max(1rem,env(safe-area-inset-right));bottom:max(1.2rem,env(safe-area-inset-bottom));z-index:5;
  background:rgba(5,15,31,.55);color:#F5EBD0;border:1px solid rgba(243,213,138,.6);border-radius:999px;padding:.5rem 1.1rem;font-weight:600;min-height:44px}

/* ── Etik tüneli ve Mizan ── */
.tunel{position:relative;height:78px;margin:.2rem 0 .3rem;border-radius:40px 40px 12px 12px;
  background:radial-gradient(120% 90% at 100% 55%,rgba(243,213,138,.4),transparent 45%),linear-gradient(180deg,#0B2545,#163A63);
  box-shadow:inset 0 6px 14px rgba(0,0,0,.35)}
.tunel-ic{position:absolute;left:30px;right:30px;top:0;bottom:0}
.tunel-ray{position:absolute;left:0;right:0;bottom:19px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,#C9A227 0 10px,transparent 10px 16px);opacity:.7}
.durak{position:absolute;bottom:13px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#1B3F6B;border:2px solid #C9A227;display:grid;place-items:center;font-size:.85rem;line-height:1}
.durak.gecti{background:#F3D58A;box-shadow:0 0 8px rgba(243,213,138,.8)}
.durak.burada{background:#fff;box-shadow:0 0 0 4px rgba(243,213,138,.35)}
.tunel-karakter{position:absolute;bottom:24px;width:54px;height:54px;transform:translateX(-50%);transition:left .9s cubic-bezier(.3,.7,.4,1)}
.oturum-kart{position:relative}
.donem-mizan{position:absolute;width:64px;height:64px;right:-6px;top:-38px;z-index:2}
.donem-mizan.geldi{animation:dongeldi 1.1s cubic-bezier(.3,.7,.4,1) both}
.donem-mizan:not(.geldi){animation:suzul 3s ease-in-out infinite}
@keyframes dongeldi{0%{transform:translate(-120px,-60px) scale(.6);opacity:0}25%{transform:translate(-80px,-30px);opacity:1}40%{transform:translate(-60px,0)}55%{transform:translate(-40px,-25px)}70%{transform:translate(-20px,0)}85%{transform:translate(-8px,-12px)}100%{transform:none}}

.hareket-notu{font-size:.85rem;color:var(--murekkep-2);background:var(--panel-2);border-radius:8px;padding:.45rem .7rem;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
/* Canlandırmalar varsayılan olarak açık (telefon dâhil): oyun kökte .hareket-zorla
   koyar; aşağıdaki cihaz kuralı yalnız JS çalışmadan önce etkilidir. Öğrenci
   "Kapat" derse kökte .hareket-kapali olur ve her cihazda hareket durur. */
:root.hareket-kapali *,:root.hareket-kapali *::before,:root.hareket-kapali *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  :root:not(.hareket-zorla) *,:root:not(.hareket-zorla) *::before,:root:not(.hareket-zorla) *::after{animation:none!important;transition:none!important}
}

/* ── alan seçimi · kazanımlar ─────────────────────────────────────────── */
.alan-secim { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
.kaz-etiket { font-size: .82rem; color: var(--vurgu); font-weight: 600; }
.kaz-karne { display: grid; gap: .55rem; }
.kaz-satir { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: .25rem .6rem; align-items: center; }
.kaz-ad { grid-column: 1 / -1; font-size: .92rem; }
.kaz-cubuk { height: .55rem; border-radius: 99px; background: var(--cizgi); overflow: hidden; grid-column: 1; }
.kaz-cubuk > span { display: block; height: 100%; background: var(--murekkep-3); border-radius: inherit; }
.kaz-satir.iyi .kaz-cubuk > span { background: #2E7D4F; }
.kaz-satir.orta .kaz-cubuk > span { background: #C9962B; }
.kaz-satir.zayif .kaz-cubuk > span { background: #B23A3A; }
.kaz-deger { font-variant-numeric: tabular-nums; font-size: .9rem; }
.kaz-duzey { font-size: .85rem; white-space: nowrap; }
.kaz-liste ol { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.kaz-liste summary { cursor: pointer; }
.rapor { display: grid; gap: 1rem; }
.rapor-arac { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: flex-end; }
.tablo-kap { overflow-x: auto; }
.kaz-tablo { border-collapse: collapse; width: 100%; font-size: .9rem; }
.kaz-tablo th, .kaz-tablo td { border-bottom: 1px solid var(--cizgi); padding: .4rem .5rem; text-align: center; white-space: nowrap; }
.kaz-tablo tbody th, .kaz-tablo td:nth-child(2) { text-align: left; }
.kaz-tablo td.iyi { background: rgba(46, 125, 79, .16); }
.kaz-tablo td.orta { background: rgba(201, 150, 43, .18); }
.kaz-tablo td.zayif { background: rgba(178, 58, 58, .16); }
.kaz-tablo td.az { color: var(--murekkep-3); }
.ogr-rapor { border: 1px solid var(--cizgi); border-radius: 12px; padding: 1rem; display: grid; gap: .7rem; background: var(--kagit); }
.ogr-rapor h2 { margin: .1rem 0; }
.kaz-oneri { font-size: .92rem; border-left: 3px solid var(--uyari, #C9962B); padding-left: .6rem; }
.kaz-eksik ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .9rem; }
@media print {
  .hoca-bar, .rapor-arac .satir, .sayfa-alt, .kaz-liste, .site-ust, header.kabuk { display: none !important; }
  .ogr-rapor { break-before: page; border: 0; padding: 0; }
  .rapor > .ogr-rapor:first-of-type { break-before: auto; }
  .tablo-kap { overflow: visible; }
  .kaz-tablo { font-size: .75rem; }
  .kaz-eksik:not([open]) > * { display: block; }
  body { background: #fff; }
}

/* Alan sürümleri (hoca tartışması) ve sınıf kodu */
.alan-surum { font-size: .9rem; }
.alan-surum summary { cursor: pointer; color: var(--vurgu); }
.alan-surum ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
input.kod.harf { letter-spacing: .2em; font-size: 1.3rem; text-transform: none; }
.kamp-sinif summary { cursor: pointer; }
.kamp-sinif form { margin-top: .6rem; }
@media print { .sinif-bilgi, .sinif-calismalar { display: none !important; } }
.sinif-alani { display: grid; gap: .35rem; justify-items: start; }
.sinif-uyari { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); max-width: min(92vw, 32rem); background: var(--kagit, #fff); border: 1px solid var(--uyari, #C9962B); border-left-width: 4px; border-radius: 10px; padding: .7rem 1rem; box-shadow: 0 6px 24px rgba(0,0,0,.15); z-index: 50; font-size: .92rem; }

/* Oyun kipi: sitenin çubuğu ve alt bilgisi gizlenir; köşede Çıkış ve Tam ekran */
body.oyun-modu .kabuk-serit, body.oyun-modu .kabuk-alt, body.oyun-modu .kabuk-atla, body.oyun-modu .sayfa-alt { display: none !important; }
body.oyun-modu #app { padding-top: 3.4rem; padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
.oyun-kose { display: none; }
body.oyun-modu .oyun-kose { display: flex; gap: .4rem; position: fixed; top: max(.5rem, env(safe-area-inset-top)); right: max(.6rem, env(safe-area-inset-right)); z-index: 80; }
.kose-dugme { font: inherit; font-size: 1.15rem; line-height: 1; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cizgi); background: var(--kagit, #fff); color: var(--murekkep, #1a1a1a); box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer; }
.kose-dugme:hover, .kose-dugme:focus-visible { border-color: var(--vurgu); }
.kose-dugme.cikis.onay { background: #B23A3A; border-color: #B23A3A; color: #fff; }
@media print { .oyun-kose { display: none !important; } body.oyun-modu #app { padding-top: 0; } }

/* Telefon: 9 seçenekli kartlar ekrana sığsın; dokunma hedefi en az 48 px kalır */
.oy-ek { display: block; font-size: .78em; font-weight: 500; opacity: .8; }
body { overflow-x: clip; }
@media (max-width: 560px) {
  .oy-izgara { gap: .4rem; }
  .oy-izgara .oy.kat { min-height: 48px; padding: .45rem .55rem; gap: .45rem; font-size: .95rem; line-height: 1.2; }
  .oy-izgara .oy-ikon { font-size: 1.15rem; width: 1.35rem; }
  .oy-izgara .oy.kat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Kullanılabilirlik (28.09.2026): dokunma hedefleri, telefon sığdırma, projeksiyon ── */
.ses-dugme, .sekme button { min-height: 44px; }
.kose-ipucu { position: absolute; top: 50px; right: 0; white-space: nowrap; background: #B23A3A; color: #fff; font-size: .8rem; padding: .25rem .6rem; border-radius: 6px; }
.oyun-kose { align-items: flex-start; }
.kaz-tablo tbody th, .kaz-tablo thead th:first-child { position: sticky; left: 0; background: var(--kagit, #fff); z-index: 1; }
@media (max-width: 560px) {
  .tunel { height: 58px; margin: 0 0 .1rem; }
  .tunel-karakter { width: 42px; height: 42px; bottom: 18px; }
  .tunel-ray { bottom: 14px; }
  .tel .soru { font-size: 1.2rem; line-height: 1.32; }
}
@media (min-width: 1200px) {
  .qr-kutu .qr { width: 300px; }
}
/* Yatay telefon (alçak ve geniş ekran): ilerleme şeridi gizlenir, seçenekler üç sütun */
@media (max-height: 500px) and (min-width: 600px) {
  .tunel { display: none; }
  .oy-izgara { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .oy-izgara .oy.kat { min-height: 44px; padding: .35rem .5rem; gap: .4rem; font-size: .92rem; line-height: 1.15; }
  .oy-izgara .oy-ikon { font-size: 1.05rem; width: 1.25rem; }
  .oy-izgara .oy.kat:last-child:nth-child(odd) { grid-column: auto; }
  .tel .soru { font-size: 1.1rem; line-height: 1.3; }
  body.oyun-modu #app { padding-top: 3rem; }
  .tel { max-width: 100%; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
}

/* ── Tartışma masası (projeksiyon): iri yazı, aşama aşama açılan cevap ── */
.masa { display: grid; gap: 1.2rem; }
.masa h1 { margin: .2rem 0; }
.masa-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .7rem; }
.masa-sec { font: inherit; text-align: left; display: grid; gap: .2rem; padding: .9rem 1rem; min-height: 44px; border: 1px solid var(--cizgi-koyu); border-radius: 10px; background: var(--panel); cursor: pointer; }
.masa-sec:hover, .masa-sec:focus-visible { border-color: var(--vurgu); }
.masa-ust { justify-content: space-between; align-items: center; }
.masa-alan { gap: .4rem; align-items: center; }
.masa .dosya { font-size: clamp(1rem, 1.35vw, 1.45rem); }
.masa .dosya h2 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.masa-oy { border: 2px dashed var(--cizgi-koyu); border-radius: 12px; padding: 1rem 1.2rem; font-size: clamp(1rem, 1.4vw, 1.4rem); display: grid; gap: .6rem; justify-items: start; }
.masa-oy.acik { border-style: solid; border-color: var(--olur); background: var(--olur-zem); }
.masa-kart { gap: 1rem; }
.masa-soru { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.6rem); line-height: 1.3; margin: 0; }
.masa-secenek { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .5rem; }
.masa-secenek span { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 1px solid var(--cizgi-koyu); border-radius: 8px; font-size: clamp(1rem, 1.4vw, 1.35rem); }
.masa-secenek span.dogru { border: 3px solid var(--olur); background: var(--olur-zem); font-weight: 700; }
.masa-adim { font-size: clamp(1rem, 1.4vw, 1.35rem); display: grid; gap: .4rem; }
.masa-cevap { border-left: 4px solid var(--olur); padding-left: 1rem; font-size: clamp(1rem, 1.4vw, 1.35rem); }
.sarmal.masa { max-width: min(96vw, 1600px); }

/* ── Öğren modu ── */
.ogren-liste { display: grid; gap: .6rem; }
.ogren-konu { font: inherit; text-align: left; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; min-height: 56px; border: 1px solid var(--cizgi-koyu); border-radius: 10px; background: var(--panel); cursor: pointer; }
.ogren-konu span { display: grid; gap: .15rem; }
.ogren-konu small { color: var(--murekkep-2); }
.ogren-konu.bitti { border-color: var(--olur); }
.ogren-ikon { font-size: 1.6rem; }
.ogren-tamam { margin-left: auto; color: var(--olur); font-weight: 700; font-size: 1.3rem; }
.ogren-ilerleme { display: flex; gap: .35rem; }
.ogren-ilerleme span { flex: 1; height: 6px; border-radius: 3px; background: var(--cizgi); }
.ogren-ilerleme span.gecti { background: var(--olur); }
.ogren-ilerleme span.simdi { background: var(--vurgu, #185FA5); }
.ogren-giris { font-style: italic; color: var(--murekkep-2); margin: 0; }
.ogren-kart { gap: .8rem; }
.ogren-kart h2 { margin: 0; }
.ogren-kart p { margin: 0; line-height: 1.55; }
.ogren-ornek { background: var(--panel-2); border-radius: 8px; padding: .7rem .9rem; line-height: 1.5; }
.ogren-karisan { border-left: 4px solid var(--uyari, #C9962B); padding-left: .8rem; line-height: 1.5; }
.ogren-nav { justify-content: space-between; }
.ogren-alan { gap: .4rem; align-items: center; }

/* Mizan katmanları ve canlandırmaları dosyanın sonunda (Mizan v2). */

/* ── P7 · Karışan iki kavram kefelerde (28.09.2026) ──
   Etiket kefenin içinde durur; kefe kirişe karşı dönerek dik asıldığı için
   yazı da dik kalır. Kefe halkası 42.2 / 213.3 (256'lık tuval), gövdesi
   y ≈ 120–150; etiket gövdenin hemen altına asılır. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fark-tarti{display:grid;gap:.4rem;justify-items:center;margin-top:.3rem}
.fark-mizan{width:min(190px,56vw);aspect-ratio:1;position:relative;margin:0 auto -.5rem}
.fark-tarti .fark{justify-self:stretch;margin:0;position:relative}
.kazanc .fark b{font:inherit;font-weight:700}

/* ── P3 · Erişilebilirlik (28.09.2026) ──
   Odak halkası iki tonlu: mavi çizgi + zemin renginde iç boşluk; açık ve
   koyu zeminde, kampanyanın lacivert-altın bölümlerinde de görünür. */
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--vurgu);outline-offset:2px;box-shadow:0 0 0 2px var(--panel)}
label:has(input:focus-visible){outline:3px solid var(--vurgu);outline-offset:2px}
.kamp-afis :focus-visible,.profil :focus-visible,.ara-sahne :focus-visible{outline-color:#F3D58A}
.tel .soru:focus,.tel .soru:focus-visible{outline:none;box-shadow:none}
.isaret{margin-left:auto;font-weight:800;font-size:1.25rem;line-height:1}
.oy.kat.yanlis-cevap .isaret{color:var(--olmaz)} .oy.kat.dogru-cevap .isaret{color:var(--olur)}
.kisayol{text-align:center}
/* Açılır başlıklar da dokunma hedefidir: en az 44 px. */
details > summary{min-height:44px;padding-block:.55rem;box-sizing:border-box;cursor:pointer}

/* ── P5 · Günler arası tekrar: girişte Mizan hatırlatır ── */
.tekrar-afis{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;margin-top:1rem;padding:1rem 1.1rem;border-radius:12px;
  background:var(--uyari-zem);border:1px solid var(--uyari)}
.tekrar-afis h2{font-size:1.35rem;margin:.1rem 0 .3rem}
.tekrar-afis .not{margin-bottom:.6rem}
.tekrar-mizan{width:84px;height:84px}
@media (max-width:420px){.tekrar-afis{grid-template-columns:1fr;justify-items:start}.tekrar-mizan{width:72px;height:72px}}
.tekrar-secim{border-color:var(--uyari)}

/* ── P1 · Maddeyi oku: belge metni, cevaptan sonra ── */
.madde-oku{border:1px solid var(--cizgi-koyu);border-left:3px solid var(--lacivert);border-radius:6px;background:var(--panel);padding:0 .8rem;color:var(--murekkep)}
.madde-oku summary{font-weight:700;color:var(--vurgu);display:flex;align-items:center;gap:.4rem}
.madde-oku blockquote{margin:.2rem 0 .7rem;padding:0;display:grid;gap:.3rem}
.madde-oku cite{font-style:normal;font-family:var(--veri);font-size:.8rem;letter-spacing:.04em;color:var(--murekkep-2)}
.madde-oku blockquote p{margin:0;font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--murekkep)}
.madde-oku .madde-giris{font-style:italic;color:var(--murekkep-2)!important}
.madde-oku .not{margin-bottom:.6rem}
.kazanc .madde-oku span,.kazanc .madde-oku b{font:inherit;color:inherit}

/* ── P4 · Güven işaretleme ── */
.oy.kat.secili{background:var(--vurgu-yum);border-color:var(--vurgu);opacity:1!important}
.guven{display:grid;gap:.5rem;padding:.9rem 1rem;border-radius:10px;border:2px solid var(--vurgu);background:var(--panel);animation:belir .25s ease}
.guven-soru{margin:0;font-weight:700;font-size:1.05rem}
.guven-dugmeler{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media (max-width:360px){.guven-dugmeler{grid-template-columns:1fr}}
.secim-sira{margin:0;padding-left:1.3rem;display:grid;gap:.25rem}
.secim-yazi{margin:0;font-size:1.05rem}
.guven-ozet p{margin:0}
.ey-bolum .ey-kaz{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.92rem}
.ey-kart{margin:0;padding-left:1.3rem;display:grid;gap:.45rem;font-size:.92rem}
.ey-ogr{margin:0;font-size:.9rem;border-left:3px solid var(--olmaz);padding-left:.6rem}

/* ── P2b · Son değerlendirme ve P6 · öğrenci vakası ── */
textarea.alan{width:100%;padding:.65rem .8rem;font:inherit;font-size:1rem;line-height:1.5;background:var(--kagit);color:var(--murekkep);border:1px solid var(--cizgi-koyu);border-radius:4px;resize:vertical;min-height:5.5rem}
textarea.alan:focus{outline:3px solid var(--vurgu);outline-offset:2px;border-color:var(--vurgu)}
.deger .olay{font-size:1.1rem}
.dugme.tehlike-ana{background:var(--olmaz);border-color:var(--olmaz)}
.vaka-uyari{background:var(--uyari-zem);border-left:4px solid var(--uyari);padding:.6rem .8rem;border-radius:6px;font-size:.95rem}
.deger-hoca .dosya-sec label{min-height:44px}
.deger-cevap{gap:.5rem}
.deger-cevap p{margin:0;line-height:1.5}
.deger-toplam{font-family:var(--veri);font-weight:700;color:var(--vurgu)}
.rubrik-puan{display:grid;gap:.4rem;border-top:1px solid var(--cizgi);padding-top:.6rem}
.rp-satir{display:grid;grid-template-columns:minmax(7rem,1fr) repeat(3,48px);gap:.4rem;align-items:center}
.rp{min-height:44px;border:2px solid var(--cizgi-koyu);border-radius:8px;background:var(--panel);font-weight:700;font-size:1.05rem}
.rp.secili{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.rubrik{margin:.4rem 0 0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:.92rem}
.ogr-vakalar article{border-top:1px solid var(--cizgi);padding-top:.7rem;margin-top:.7rem;display:grid;gap:.4rem}
.ogr-vakalar article p{margin:0}
.deger-karne{border-left-color:var(--lacivert)}
@media print{.deger-hoca,.ogr-vakalar{display:none!important}}

/* Oyun kipinde köşe düğmeleri sabittir; sayfa kayınca başlıklar düğmelerin
   altından geçip okunmaz hâle geliyordu ("Kur⛶d"). Düğmelerin arkasına
   zemin renginde bir şerit konur: içerik şeridin altında kaybolur. */
body.oyun-modu::before{content:"";position:fixed;left:0;right:0;top:0;z-index:79;pointer-events:none;
  height:calc(max(.5rem, env(safe-area-inset-top)) + 44px + .4rem);background:var(--kagit);box-shadow:0 1px 0 var(--cizgi)}
@media print{body.oyun-modu::before{display:none}}
body.oyun-modu .panel{top:calc(max(.5rem, env(safe-area-inset-top)) + 44px + 1rem)}
.masa-secenek{grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.onay-notu{margin:0;font-weight:700;color:var(--olmaz)}

/* ── Giriş ekranı: role ve sıraya göre (29.09.2026) ── */
.giris-bolum{margin-top:1.6rem;display:grid;gap:.8rem}
.giris-bolum>h2{font-size:1.5rem}
.derse-katil{background:var(--panel);border:1px solid var(--cizgi);border-left:4px solid var(--vurgu);border-radius:8px;padding:1rem 1.1rem;gap:.6rem;
  grid-template-columns:minmax(0,1fr) auto;align-items:center}
.derse-katil .katil-ust{display:grid;gap:.2rem}
.derse-katil .katil-form{flex-wrap:nowrap}
.derse-katil .hata,.derse-katil .sinif-satir{grid-column:1/-1}
.derse-katil .hata:empty{display:none}
.sinif-satir{border-top:1px solid var(--cizgi);padding-top:.6rem;gap:.5rem}
@media (max-width:600px){.derse-katil{grid-template-columns:1fr}}
.adim-liste{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));counter-reset:none}
.adim-kart{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;background:var(--panel);border:1px solid var(--cizgi);border-radius:10px;padding:1rem}
.adim-no{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-family:var(--veri);font-weight:700;background:var(--vurgu);color:#fff}
.adim-ic{display:grid;gap:.5rem;align-content:start;min-width:0}
.adim-ic h3{font-size:1.2rem}
.kamp-mini{display:grid;gap:.3rem}
.kamp-mini-gorsel{width:100%;height:5.5rem;object-fit:cover;border-radius:8px;border:1px solid #C9A227}
.hoca-arac{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.hoca-arac-kart{background:var(--panel-2);border:1px solid var(--cizgi);border-radius:10px;padding:1rem;display:grid;gap:.5rem;align-content:start}
.hoca-arac-kart h3{font-size:1.15rem}
.hoca-bolum{border-top:2px solid var(--cizgi-koyu);padding-top:1.2rem}

/* ── Kurul Yolculuğu: önerilen yol, hazırlık, Mizan'ın notu, dönem sonu töreni ── */
.yol-kart{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border-radius:14px;overflow:hidden;color:#F5F1E6;
  background:linear-gradient(135deg,#0B2545,#1B3F6B);border:1px solid #C9A227;box-shadow:0 8px 24px rgba(4,44,83,.2)}
.yol-kart-ic{padding:1.2rem 1.3rem;display:grid;gap:.6rem;align-content:start}
.yol-kart h3{font-size:1.6rem;color:#F3D58A}
.yol-kart p{margin:0;color:#E8E2D0}
.yol-kart .ust-etiket{color:#C9B27A}
.yol-kart .not{color:#D8CBA3}
.yol-kart .dugme.ana{background:#C9A227;border-color:#C9A227;color:#1A1405}
.yol-kart-gorsel{width:100%;height:100%;min-height:10rem;object-fit:cover}
@media (max-width:640px){.yol-kart{grid-template-columns:1fr}.yol-kart-gorsel{order:-1;height:8rem;min-height:0}}
.serbest-baslik{font-size:1.15rem;margin-top:.4rem}
.adim-kart.no-yok{grid-template-columns:1fr}
.yol-mizan{width:88px;height:88px}
.mizan-not{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;background:var(--uyari-zem);border:1px solid var(--uyari);border-radius:12px;padding:.8rem 1rem}
.mizan-not-g{width:72px;height:72px}
.mizan-not p{margin:.3rem 0 0;font-size:.95rem}
.toren-cagri{text-align:left}
.toren-bas{text-align:center;display:grid;gap:.5rem;justify-items:center;padding:1rem;border-radius:14px;color:#F5F1E6;background:radial-gradient(120% 140% at 50% 0%,#2B4F7E,#0B2545 60%,#061A33);border:1px solid #C9A227}
.toren-bas h1{color:#F3D58A}
.toren-bas .ust-etiket{color:#C9B27A}
.toren-bas p{margin:0;color:#E8E2D0;max-width:34ch}
.toren-mizan{width:120px;height:120px}
.toren-unvan{font-size:1.2rem}
.toren-oturum{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
.gorev-belgesi{border:3px double #C9A227;border-radius:10px;padding:1rem 1.2rem;background:var(--panel);display:grid;gap:.4rem;text-align:center}
.gorev-belgesi p{margin:0;font-family:var(--serif);font-size:1.1rem}
@media print{
  body.belge-yazdir #app>*{display:none!important}
  body.belge-yazdir #app>.toren{display:block!important}
  body.belge-yazdir .toren>*:not(.gorev-belgesi){display:none!important}
  body.belge-yazdir .gorev-belgesi{border-width:6px;padding:3rem;margin-top:4rem}
}

/* Mizan daha görünür (hocanın isteği, 29.09.2026): tünelde ve geri bildirimde büyük. */
.tunel{height:104px}
.tunel-karakter{width:80px;height:80px;bottom:22px}
.kazanc-ust{display:flex;align-items:flex-end;gap:.6rem}
.kazanc-mizan{width:104px;height:104px;flex:none}
.fark-mizan{width:min(230px,64vw)}
.donem-mizan{width:88px;height:88px;top:-56px}
.tekrar-mizan{width:110px;height:110px}
.yol-mizan{width:120px;height:120px}
.mizan-not-g{width:96px;height:96px}
.toren-mizan{width:160px;height:160px}
@media (max-width:560px){
  .tunel{height:88px}
  .tunel-karakter{width:66px;height:66px;bottom:16px}
  .kazanc-mizan{width:88px;height:88px}
}
/* Görselin tuvalinde boşluk var; tünelde karakter tabanından büyütülür (tünelin üstüne taşabilir). */
.tunel-karakter{transform:translateX(-50%) scale(1.3);transform-origin:50% 100%;z-index:2}
.tunel{overflow:visible;margin-top:1.4rem}

/* ── Veri bildirimi ve hoca veri araçları ── */
.bildirim-arka{position:fixed;inset:0;z-index:130;background:rgba(4,20,40,.6);display:grid;place-items:center;padding:1rem}
.bildirim{background:var(--panel);color:var(--murekkep);border-radius:12px;border-top:4px solid var(--vurgu);max-width:34rem;max-height:90vh;overflow:auto;padding:1.2rem 1.3rem;display:grid;gap:.7rem}
.bildirim ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;font-size:.95rem;line-height:1.5}
.toren-gelisim,.toren-dilim{font-weight:700;color:#F3D58A!important}
.toren-dilim:empty{display:none}
code.kimlik{user-select:all;word-break:break-all;background:var(--panel-2);padding:.1rem .3rem;border-radius:4px}
.donem-kapat{border:1px solid var(--olmaz);border-radius:8px;padding:0 .8rem .6rem}
.ogr-sil{justify-content:flex-end}
@media print{.ogr-sil,.donem-kapat{display:none!important}}

/* ── Mizan konuşur: konuşma balonu, tek parça pozlar (29.09.2026) ── */
.mizan-tek{display:block;width:100%;height:100%}
.mizan-tek img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));animation:suzul 3.2s ease-in-out infinite}
.mizan-soz{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem .7rem;align-items:center}
.ms-g{width:96px;height:96px;flex:none}
.mizan-soz.buyuk .ms-g{width:132px;height:132px}
.ms-balon{position:relative;margin:0;background:var(--panel);color:var(--murekkep);border:2px solid #C9A227;border-radius:14px;padding:.6rem .85rem;font-size:1rem;line-height:1.45;font-weight:600;box-shadow:0 3px 10px rgba(4,44,83,.1)}
.mizan-soz .ms-balon::before{content:"";position:absolute;left:-10px;top:50%;width:16px;height:16px;background:var(--panel);border-left:2px solid #C9A227;border-bottom:2px solid #C9A227;transform:translateY(-50%) rotate(45deg)}
.kazanc .mizan-soz{margin-bottom:.3rem}
.kazanc .ms-balon{color:var(--murekkep)}
.kazanc-soz .ms-g{width:92px;height:92px}
.hikaye-soz{text-align:left;width:100%}
.hikaye-soz .ms-balon{font-weight:500}
.fark-soz{margin:0 0 .2rem;align-self:stretch;text-align:center}
@media (max-width:420px){.ms-g{width:76px;height:76px}.mizan-soz.buyuk .ms-g{width:100px;height:100px}.kazanc-soz .ms-g{width:76px;height:76px}.ms-balon{font-size:.95rem}}
/* Açılış sahnesi: salondaki pirinç terazi (%50,6 / %58,9) Mizan'a dönüşür. */
.sahne-mizan{position:absolute;z-index:6;left:50.6%;top:58.9%;transform:translate(-50%,-78%);display:grid;justify-items:center;gap:.5rem;width:min(88vw,26rem);opacity:0;animation:mizanBelir .9s 2.6s cubic-bezier(.3,1.4,.5,1) forwards}
.sahne-mizan .mizan-tek{width:150px;height:150px}
.sahne-mizan .ms-balon{text-align:center}
.sahne-parilti{position:absolute;left:50%;top:62%;width:40px;height:40px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#FFF4C8,rgba(243,213,138,.8) 40%,transparent 70%);animation:parilti 1s 2.1s ease-out both}
@keyframes mizanBelir{from{opacity:0;transform:translate(-50%,-40%) scale(.3)}to{opacity:1;transform:translate(-50%,-78%) scale(1)}}
@keyframes parilti{0%{opacity:0;width:20px;height:20px}40%{opacity:1}100%{opacity:0;width:260px;height:260px}}
:root.hareket-kapali .sahne-mizan{opacity:1}
/* ── Sade ana ekran ── */
.giris-sade{display:grid;gap:1rem}
.giris-sade .mizan-soz{max-width:36rem}
.ana-secim{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);margin-top:1.2rem;align-items:stretch}
@media (max-width:760px){.ana-secim{grid-template-columns:1fr}}
.canli-kart{border-left-color:var(--vurgu);align-content:start}
.canli-kart .katil-form{flex-wrap:nowrap}
.canli-kart .hata:empty{display:none}
.kart-ikon-img{width:48px;height:48px}
.ikon-dugme{width:26px;height:26px;vertical-align:middle;margin:-4px 2px -4px -4px}
.baslik-ikon{width:44px;height:44px;vertical-align:middle}
.kucuk-baglar{display:grid;gap:.6rem;margin-top:1.2rem;padding:1rem;border:1px solid var(--cizgi);border-radius:10px;background:var(--panel)}
.giris-alt{margin-top:1.6rem;display:grid;gap:.6rem;justify-items:start;border-top:1px solid var(--cizgi);padding-top:1rem}
.hoca-giris{display:grid;gap:1rem;padding-top:1rem}

/* ── Ayarlar paneli ── */
.ayarlar{gap:.9rem}
.ayar-satir{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;border-top:1px solid var(--cizgi);padding-top:.8rem}
.ayar-satir p{margin:.15rem 0 0}
.ayar-anahtar{min-width:5.5rem}
.sinif-ac .alan.kod{max-width:9rem}
/* Ara sahneye dokununca: kapılar açık, Mizan ve yazı hemen görünür. */
.ara-sahne{cursor:pointer}
.ara-sahne.atla .kapi{animation:none}
.ara-sahne.atla .kapi.sol{transform:rotateY(-100deg)}
.ara-sahne.atla .kapi.sag{transform:rotateY(100deg)}
.ara-sahne.atla .kapi-muhur,.ara-sahne.atla .sahne-parilti{display:none}
.ara-sahne.atla .sahne-yazi{animation:none;opacity:1}
.ara-sahne.atla .sahne-mizan{animation:none;opacity:1;transform:translate(-50%,-78%)}
.ara-sahne.atla .sahne-gorsel img{animation:none;transform:scale(1.02);filter:brightness(.95)}
.sahne-gec::after{content:" · ya da ekrana dokun";font-weight:400;opacity:.8}
.sinif-ac-dikey{display:grid;gap:.6rem}.sinif-ac-dikey .alan.kod{max-width:10rem}.sinif-ac-dikey .hata:empty{display:none}

/* ── UX denetimi (29.09.2026): geri bildirimde önce öğrenme, yapışkan ileri düğmesi ── */
.kazanc .dogrusu{font-family:var(--serif);font-size:1.35rem;font-weight:400;color:var(--murekkep);line-height:1.3}
.kazanc .aciklama{color:var(--murekkep);font-size:1rem;line-height:1.55}
.puan-rozet{justify-self:start;margin-top:.3rem;font-family:var(--veri);font-size:.85rem;background:var(--panel);border:1px solid var(--cizgi-koyu);border-radius:999px;padding:.15rem .6rem;color:var(--murekkep-2)!important}
.tel > [data-is="k-ileri"],.ogren-nav{position:sticky;bottom:max(.5rem,env(safe-area-inset-bottom));z-index:6}
.tel > [data-is="k-ileri"]{box-shadow:0 6px 18px rgba(4,44,83,.25)}
.ogren-nav{background:linear-gradient(transparent,var(--kagit) 35%);padding-top:1rem}
.oturum-kart.kilitli{opacity:1;filter:grayscale(1);color:var(--murekkep-2)}
.giris-sade{grid-template-columns:1fr;align-items:center}
@media (max-width:640px){
  .yol-kart-gorsel{display:none}
  .kazanc-soz .ms-g{width:96px;height:96px}
  .giris-sade .mizan-soz.buyuk .ms-g{width:96px;height:96px}
}
.ana-secim{grid-template-columns:1fr!important}.ana-secim .tekrar-afis{margin-top:0}
.canli-kart{gap:.6rem}.canli-kart .kart-ikon-img{display:none}.gorsel-beyan a{color:inherit}
/* Mizan yerleşimi: afişte hep solda, metinle aynı hizada; boşta daha az eğim. */
@media (max-width:420px){.tekrar-afis{grid-template-columns:auto 1fr;justify-items:stretch}.tekrar-mizan{width:84px;height:84px}}
/* Tekrar afişinde kendi pozu (kum saati, kart destesi): gelir, sonra hafifçe tartar. */
.mizan-tek.mizan-tekrar img{animation:none}
.mizan-tek.mizan-tekrar{transform-origin:50% 96%;animation:mGeldi .6s cubic-bezier(.3,.7,.4,1) both,mTart 3.4s ease-in-out .6s infinite}
@keyframes mTart{0%,100%{transform:rotate(0)}22%{transform:rotate(-3deg)}50%{transform:rotate(0)}72%{transform:rotate(2.5deg)}}
@keyframes mGeldi{0%{transform:translateY(10px) scale(.92);opacity:0}100%{transform:none;opacity:1}}

/* ── Mizan köşesi: cevaptan sonra alttan yükselip konuşur ── */
.mizan-kose{position:fixed;left:max(.4rem,env(safe-area-inset-left));bottom:calc(max(.5rem,env(safe-area-inset-bottom)) + 64px);z-index:70;display:flex;align-items:flex-end;gap:.3rem;pointer-events:none;max-width:min(92vw,26rem);animation:mkCik .55s cubic-bezier(.3,1.5,.5,1) both}
.mizan-kose.iniyor{animation:mkIn .45s ease-in both}
.mk-govde{width:112px;height:112px;flex:none}
.mk-balon{position:relative;margin-bottom:62px;background:var(--panel);color:var(--murekkep);border:2px solid #C9A227;border-radius:14px;padding:.55rem .8rem;font-weight:700;font-size:.98rem;line-height:1.35;box-shadow:0 6px 18px rgba(4,44,83,.2);animation:mkBalon .35s .25s both}
.mk-balon::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--panel);border-left:2px solid #C9A227;border-bottom:2px solid #C9A227;transform:rotate(45deg)}
@keyframes mkCik{from{transform:translateY(140%)}to{transform:none}}
@keyframes mkIn{to{transform:translateY(140%);opacity:0}}
@keyframes mkBalon{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* Telefonda küçük: açıklama metnini daha az örter; dokununca hemen iner. */
@media (max-width:899px){.mizan-kose{pointer-events:auto;cursor:pointer;gap:.15rem}.mk-govde{width:72px;height:72px}.mk-balon{margin-bottom:34px;padding:.4rem .65rem;font-size:.9rem;line-height:1.3}}
@media (min-width:900px){.mizan-kose{bottom:1.2rem}.mk-govde{width:140px;height:140px}}

/* Yöneticinin hoca listesi */
.hoca-liste{list-style:none;padding:0;margin:.4rem 0;display:grid;gap:.2rem}
.hoca-liste li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--cizgi);overflow-wrap:anywhere}

/* ── Mizan v2: bacaklı gövde, zemin gölgesi (filtre yok), yürüme, duygu işaretleri ──
   Katman sırası: gölge, bacaklar, gövde (bacaksız), göz kapağı, kiriş+kefeler, işaret.
   Dönme noktaları 256'lık tuvalde: göbek (127.9, 61.1), kefe halkaları (42.2 / 213.3, 80.8),
   kalçalar (111, 210) ve (144, 210). */
.mizan{position:relative;display:block;width:100%;height:100%}
.mizan img,.m-kiris,.m-kefe{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Gölge: filtre yerine ayak altında sabit elips. Hareketli katmanlar artık
   her karede filtrenin yeniden çizilmesini tetiklemez. */
.m-golge{position:absolute;left:22%;right:22%;bottom:1.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.35),rgba(0,0,0,0))}
.m-kiris{transform-origin:49.95% 23.85%}
.m-kefe.sol{transform-origin:16.47% 31.55%}
.m-kefe.sag{transform-origin:83.33% 31.55%}
.mizan .m-bacak.sol{transform-origin:43.4% 82%}
.mizan .m-bacak.sag{transform-origin:56.3% 82%}
.mizan.uzgun .m-kiris{transform:rotate(-11deg)}
.mizan.uzgun .m-kefe{transform:rotate(11deg)}
.mizan.notr .m-kiris{animation:mKirisNotr 4.2s ease-in-out infinite}
.mizan.notr .m-kefe{animation:mKefeNotr 4.2s ease-in-out infinite}
@keyframes mKirisNotr{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes mKefeNotr{0%,100%{transform:rotate(1.6deg)}50%{transform:rotate(-1.6deg)}}
.mizan.sevinc .m-kiris{animation:mKirisSevinc 1.4s cubic-bezier(.3,.6,.4,1) both}
.mizan.sevinc .m-kefe{animation:mKefeSevinc 1.6s cubic-bezier(.3,.6,.4,1) both}
@keyframes mKirisSevinc{0%{transform:rotate(0)}18%{transform:rotate(9deg)}40%{transform:rotate(-6deg)}62%{transform:rotate(3deg)}82%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
@keyframes mKefeSevinc{0%{transform:rotate(0)}22%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}66%{transform:rotate(-5deg)}85%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.mizan.uzgun .m-kiris{animation:mKirisUzgun 1.3s cubic-bezier(.4,0,.3,1) both}
.mizan.uzgun .m-kefe{animation:mKefeUzgun 1.5s cubic-bezier(.4,0,.3,1) both}
@keyframes mKirisUzgun{0%{transform:rotate(0)}35%{transform:rotate(-15deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(-12deg)}100%{transform:rotate(-11deg)}}
@keyframes mKefeUzgun{0%{transform:rotate(0)}38%{transform:rotate(22deg)}62%{transform:rotate(5deg)}82%{transform:rotate(14deg)}100%{transform:rotate(11deg)}}
/* Soluk alma gövde ile göz kapağında aynı; bacaklar soluk almaz (yere basar). */
.mizan .m-govde{animation:nefes 2.6s ease-in-out infinite;transform-origin:50% 82%}
.mizan .m-kirp{animation:nefes 2.6s ease-in-out infinite,mKirp 5.3s linear infinite;transform-origin:50% 82%;opacity:0}
@keyframes nefes{50%{transform:scale(1.03,.975)}}
@keyframes mKirp{0%,95%{opacity:0}96%,98.5%{opacity:1}100%{opacity:0}}
/* Duygu işareti: küçük boyda yüz okunmadığı için beden dili + işaret.
   Sevinçte altın parıltı bir kez parlar; üzgünde ter damlası bir kez süzülür. */
.mizan .m-isaret{opacity:0}
.mizan.sevinc .m-isaret{animation:parilda 1.3s ease-out both}
@keyframes parilda{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.12)}45%{transform:scale(.95)}80%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.05)}}
.mizan.uzgun .m-isaret{animation:damla 1.8s ease-in .25s both}
@keyframes damla{0%{opacity:0;transform:translateY(-3%)}20%{opacity:1;transform:none}75%{opacity:1;transform:translateY(3%)}100%{opacity:0;transform:translateY(7%)}}
/* Yürüme: kap .yuru aldığında (tünelde left geçişi boyunca) adım atar.
   Sevinç ve nötr: zıplayan, sallanan ördek yürüyüşü. Üzgün: yavaş, küçük adım. */
.yuru .mizan{animation:yurGovde .38s ease-in-out infinite}
.yuru .mizan .m-bacak.sol{animation:adim .38s ease-in-out infinite}
.yuru .mizan .m-bacak.sag{animation:adim .38s ease-in-out -.19s infinite}
.yuru .mizan .m-golge{animation:golgeSik .19s ease-in-out infinite alternate}
@keyframes yurGovde{0%,50%,100%{transform:translateY(0) rotate(-2.5deg)}25%,75%{transform:translateY(-4%) rotate(0)}}
@keyframes adim{0%,100%{transform:rotate(0)}25%{transform:translateY(-3%) rotate(-16deg)}50%{transform:rotate(0)}75%{transform:rotate(9deg)}}
@keyframes golgeSik{to{transform:scaleX(.82);opacity:.7}}
.yuru .mizan.uzgun{animation:yurGovdeYavas .6s ease-in-out infinite}
.yuru .mizan.uzgun .m-bacak.sol{animation:adimKucuk .6s ease-in-out infinite}
.yuru .mizan.uzgun .m-bacak.sag{animation:adimKucuk .6s ease-in-out -.3s infinite}
@keyframes yurGovdeYavas{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes adimKucuk{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(5deg)}}
/* Hareket kapalı: hiçbiri çalışmaz; üzgün terazi eğik, işaretler görünmez kalır. */
:root.hareket-kapali .mizan,:root.hareket-kapali .mizan *{animation:none!important}
/* ── El sallama (selam pozu; tek parça gövde + bilekten dönen el) ──
   Bilek 256'lık tuvalde (94.9, 148.2). Görününce 3 kez sallar, sonra durur. */
.mizan-selam{position:relative;display:block;width:100%;height:100%}
.mizan-selam img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mizan-selam .ms-el{transform-origin:37.05% 57.88%;animation:elSalla .5s ease-in-out .35s 3}
@keyframes elSalla{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(12deg)}}
:root.hareket-kapali .mizan-selam .ms-el{animation:none!important}
/* ── Her cevapta tepki (hocanın isteği, 29.09.2026: Mizan çoğu soruda yerinde
   duruyor; doğruda zıplasın, yanlışta üzülsün). Tepki önce, yürüme sonra gelir.
   Tünel kaydığında (Mizan ortada sabit) Mizan yerinde yürür, duraklar geriye kayar. */
.tunel-karakter .mizan{transform-origin:50% 95%}
.tunel-karakter.hopla .mizan{animation:hopla .7s cubic-bezier(.3,.7,.4,1)}
@keyframes hopla{0%{transform:none}15%{transform:scale(1.1,.85)}45%{transform:translateY(-38%) scale(.95,1.08)}70%{transform:translateY(0) scale(1.08,.92)}85%{transform:scale(.98,1.02)}100%{transform:none}}
.tunel-karakter.uzul .mizan{animation:uzul .9s ease-in-out}
@keyframes uzul{0%{transform:none}20%,80%{transform:scale(1.04,.9)}40%{transform:scale(1.04,.9) rotate(-4deg)}60%{transform:scale(1.04,.9) rotate(4deg)}100%{transform:none}}
.tunel-duraklar{position:absolute;inset:0}
:root.hareket-kapali .tunel-karakter .mizan,:root.hareket-kapali .tunel-duraklar{animation:none!important;transition:none!important}

/* Selam pozunun kabı eski tek parça Mizan ile aynı ölçüde. */
.sahne-mizan .mizan-selam{width:150px;height:150px}
.tunel-karakter.gizli{visibility:hidden}
/* Satır içi çizim ikonu (emoji yerine) */
.ikon-sat{display:inline-block;width:1.3em;height:1.3em;vertical-align:-.28em;object-fit:contain}
.profil-ikon .ikon-sat,.sonuc-ikon .ikon-sat{width:1em;height:1em;vertical-align:0}

/* ── Karışan iki kavram kefelerde (hocanın düzeltmesi, 29.09.2026) ──
   1) Kavram kefenin İÇİNDE: kart kefenin ağzına oturur (alt kenarı kefe kenarında),
      ipleri örter, yazı okunur. mizan() içinde sıra: img, sonra etiket.
   2) Yanlış seçim kırmızı, doğrusu yeşil kart (dosyanın sonunda).
   3) Ağır basan DOĞRU cevap: bu ekranda kiriş sağa (doğru tarafa) yatar. */
.m-kefe .m-etiket{position:absolute;left:16.47%;bottom:47.6%;transform:translateX(-50%);width:36%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;padding:1.6% 1.5%;text-align:center;
  font-family:var(--govde,system-ui);font-size:clamp(.58rem,3.4cqw,.78rem);font-weight:700;line-height:1.1;color:var(--murekkep,#0B2545);
  background:#FFF9EA;border:1.5px solid #C9A227;border-bottom:0;border-radius:5px 5px 0 0;box-shadow:0 -1px 3px rgba(0,0,0,.12)}
.m-kefe.sag .m-etiket{left:83.33%}
.m-kefe img{position:absolute;inset:0}
.fark-mizan{container-type:inline-size}
.mizan.dogru-agir .m-kiris{transform:rotate(11deg);animation:mKirisDogru 1.3s cubic-bezier(.4,0,.3,1) both}
.mizan.dogru-agir .m-kefe{transform:rotate(-11deg);animation:mKefeDogru 1.5s cubic-bezier(.4,0,.3,1) both}
@keyframes mKirisDogru{0%{transform:rotate(0)}35%{transform:rotate(15deg)}60%{transform:rotate(9deg)}80%{transform:rotate(12deg)}100%{transform:rotate(11deg)}}
@keyframes mKefeDogru{0%{transform:rotate(0)}38%{transform:rotate(-22deg)}62%{transform:rotate(-5deg)}82%{transform:rotate(-14deg)}100%{transform:rotate(-11deg)}}
:root.hareket-kapali .mizan.dogru-agir .m-kiris,:root.hareket-kapali .mizan.dogru-agir .m-kefe{animation:none!important}
/* Yanlış seçim kırmızı, doğrusu yeşil (başlık yazısı yerine renk; hocanın isteği). */
.m-kefe.sol .m-etiket{background:var(--olmaz-zem);border-color:var(--olmaz);color:var(--olmaz)}
.m-kefe.sag .m-etiket{background:var(--olur-zem);border-color:var(--olur);color:var(--olur)}

/* ── Denetim turu 2 (tasarım): koyu tema, rapor yazdırma ── */
:root[data-theme="dark"] .rp.secili{color:var(--kagit)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rp.secili{color:#042C53}}
/* Düzey hücresinde renk basılmasa da düzey okunur (kaz-duzey metni) */
.kaz-tablo .kaz-duzey{display:block;font-size:.72rem;font-weight:600;color:var(--murekkep-3)}
@media print{
  @page rapor{size:A4 landscape;margin:12mm}
  .rapor{page:rapor}   /* yalnız rapor yatay; görev belgesi dikey kalır */
  .kaz-tablo th,.kaz-tablo td{white-space:normal;padding:.25rem .3rem}
  .kaz-tablo tbody th,.kaz-tablo thead th:first-child{position:static}
  .kaz-tablo td.iyi,.kaz-tablo td.orta,.kaz-tablo td.zayif{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ogr-rapor.ilk-rapor{break-before:auto}
  .kaz-tablo tr,.ogr-rapor h2{break-inside:avoid}
}
/* Koşu sırasında tünel üstte yapışık: geri bildirime kaydırınca da Mizan'ın tepkisi ve yürüyüşü görünür
   (karakter oturumunun provası, 29.09.2026). Üst şeridin altında, Mizan'ın başına yer bırakır. */
body.oyun-modu .tel .tunel{position:sticky;top:calc(max(.5rem, env(safe-area-inset-top)) + 44px + 1.6rem);z-index:6}
.lobi-adim{margin:.2rem 0 .6rem;font-weight:600;color:var(--murekkep)}
.lobi-adim b{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--vurgu);color:var(--kagit);font-size:.85em;margin-right:.2em}
/* FARK açıkken tünel yapışmaz (kefeli Mizan ve balonu örtülmesin); geri bildirimin başı yapışık tünelin altında açılır. */
body.oyun-modu .tel .tunel.fark-acik{position:relative;top:auto}
.tel .kazanc{scroll-margin-top:calc(max(.5rem, env(safe-area-inset-top)) + 44px + 1.6rem + 118px)}
.tel .kazanc:has(.fark-tarti){scroll-margin-top:calc(max(.5rem, env(safe-area-inset-top)) + 44px + 1rem)}
@media (max-width:560px){.tel .kazanc{scroll-margin-top:calc(max(.5rem, env(safe-area-inset-top)) + 44px + 1.6rem + 72px)}}
@media (max-height:500px) and (min-width:600px){.mk-govde{width:56px;height:56px}.mk-balon{margin-bottom:26px}}
:root[data-theme="dark"] .adimlar li.tamam b{color:var(--kagit)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .adimlar li.tamam b{color:#042C53}}
/* Sınıf listesi */
.liste-adlar{margin:.3rem 0;line-height:1.7}
.liste-sec{display:grid;gap:.3rem}
.sinif-liste textarea{width:100%;box-sizing:border-box;font:inherit}

/* ── Ekran ekonomisi (hocanın isteği, 29.09.2026): oyun sırasında gerekmedikçe kaydırma yok ──
   Cevaptan sonra yalnız öğrencinin seçimi ve doğrusu kalır; öbür seçenekler çekilir. */
.oy-izgara:has(.dogru-cevap) > .oy:not(.dogru-cevap):not(.yanlis-cevap),.oy-dugmeleri:has(.dogru-cevap) > .oy:not(.dogru-cevap):not(.yanlis-cevap){display:none}
.oy-izgara:has(.dogru-cevap){grid-template-columns:1fr 1fr}
.oy-izgara:has(.dogru-cevap) > .oy:only-of-type,.oy-izgara:has(.dogru-cevap):not(:has(.yanlis-cevap)) > .dogru-cevap{grid-column:1 / -1}
.kazanc .not{font-size:.88rem;line-height:1.35}
@media (max-width:560px){
  /* FARK: kefeli Mizan küçülür, karıştırılan noktanın notu yanına geçer */
  .fark-tarti{grid-template-columns:44% 1fr;align-items:center;column-gap:.6rem}
  .fark-tarti .fark-soz{grid-column:1 / -1}
  .fark-tarti .fark-mizan{width:100%;margin:0}
  .fark-tarti .fark{margin:0;font-size:.9rem;line-height:1.35}
  .kazanc .aciklama{font-size:.95rem;line-height:1.4}
}
@media (max-width:560px){
  /* Cevaptan sonra soru metni kısalır (öğrenci okudu); geri bildirim tek ekrana yaklaşır */
  .tel:has(.kazanc) .soru{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .kazanc .madde-oku{margin:0}
  .kazanc .madde-oku > button,.kazanc .madde-oku > summary{min-height:40px;padding:.3rem .7rem;font-size:.9rem}
}
/* Güvenli kayıt göstergesi */
.kayit-durum{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(.5rem, env(safe-area-inset-bottom)) + .3rem);z-index:90;background:var(--panel);color:var(--murekkep);border:1px solid var(--cizgi-koyu);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.15);max-width:92vw;text-align:center}
/* Yazı boyutu (Ayarlar) */
:root.yazi-k{font-size:93.75%}
:root.yazi-b{font-size:115%}
.yazi-sec{gap:.3rem;flex-wrap:nowrap}
.yazi-sec .dugme{min-width:0;padding:.4rem .6rem}
/* Nasıl oynanır */
.nasil .nasil-adim{margin:.4rem 0 .6rem;padding-left:1.3rem;display:grid;gap:.45rem;line-height:1.4}
.nasil .mizan-soz .ms-g{width:84px;height:84px}
/* Tüneldeki Mizan'ın konuşma balonu (köşe Mizan'ı yerine; aynı ekranda tek Mizan) */
.tunel-balon{position:absolute;top:calc(100% + 8px);transform:translateX(-50%);z-index:7;max-width:min(82vw,24rem);width:max-content;
  background:var(--panel);color:var(--murekkep);border:2px solid #C9A227;border-radius:14px;padding:.45rem .75rem;font-weight:700;font-size:.95rem;line-height:1.3;
  box-shadow:0 6px 18px rgba(4,44,83,.2);animation:mkBalon .3s both;pointer-events:none}
.tunel-balon::before{content:"";position:absolute;left:50%;top:-9px;width:14px;height:14px;background:var(--panel);border-left:2px solid #C9A227;border-top:2px solid #C9A227;transform:translateX(-50%) rotate(45deg)}
.tunel-balon.iniyor{opacity:0;transition:opacity .35s}
@media (max-width:560px){
  /* Kurul dosyası telefonda sıkı: aralıklar dar, mühürlü kanıt tek satır (yazı küçülmeden) */
  .tel .d-bas{padding:.8rem 1rem .6rem;gap:.2rem}
  .tel .d-bas h2{font-size:1.5rem}
  .tel .d-govde{padding:.8rem 1rem 1rem;gap:.7rem}
  .tel .kanit.muhurlu{padding:.45rem .7rem}
  .tel .kanit.muhurlu > div{display:none}
  .tel .kanit.muhurlu .etiket::after{content:" · ilk oydan sonra açılır";text-transform:none;letter-spacing:0}
}
.lobi > .lobi-adim{grid-column:1 / -1;margin:0}
/* Yatay telefonda köşe Mizan üstte (alttaki Sonraki düğmesini örtmesin, ekrandan taşmasın) */
@media (max-height:500px) and (min-width:600px){.mizan-kose{bottom:auto;top:calc(max(.5rem, env(safe-area-inset-top)) + 44px + .6rem)}}
/* Lobide QR ve büyük kod kartın genişliğine göre ölçeklenir (kod kutudan taşmasın) */
@media (min-width:561px){
  .qr-kutu{container-type:inline-size;grid-template-columns:auto minmax(0,1fr)}
  .qr-kutu .qr{width:min(300px,45cqw)}
  .qr-kutu .buyuk-kod{font-size:clamp(1.8rem,9cqw,5.2rem);letter-spacing:.12em}
  .qr-kutu .adres{overflow-wrap:anywhere}
}
/* ── Taşma denetimi (tur 12): uzun ad, e-posta ve baskı genişliği ── */
.hoca-liste li > span{min-width:0;overflow-wrap:anywhere}
.hoca-liste li > button{min-width:0;max-width:55%;white-space:normal;overflow-wrap:anywhere}
.siralama li{grid-template-columns:2rem minmax(0,1fr) auto auto}
.siralama li > :nth-child(2){min-width:0;overflow-wrap:anywhere}
.dosya-sec label{grid-template-columns:22px 4.2rem minmax(0,1fr)}
.dosya-sec label > :last-child{min-width:0;overflow-wrap:anywhere}
.sinif-calismalar .kaz-tablo tbody th{white-space:normal;overflow-wrap:anywhere;min-width:8rem;max-width:18rem}
@media print{
  .kaz-tablo{width:100%;table-layout:fixed;overflow-wrap:anywhere}
  .kaz-tablo th,.kaz-tablo td{white-space:normal;overflow-wrap:anywhere;padding:.2rem .15rem;font-size:.65rem}
}
/* Açılış sahnesinde Mizan konuşurken başlık üste alınır (Mizan başlığın üstüne binmesin) */
.ara-sahne:has(.sahne-mizan) .sahne-yazi{position:absolute;left:0;right:0;top:calc(max(1rem, env(safe-area-inset-top)) + 7%)}
@media (max-height:640px){.ara-sahne:has(.sahne-mizan) .sahne-yazi b{font-size:1.6rem}}
/* Tünelde kaç soru kaldığı görünsün (hocanın isteği): sağ üstte "3 / 11" */
.tunel-sayac{position:absolute;top:.4rem;right:.9rem;z-index:3;font-family:var(--veri);font-weight:700;font-size:.85rem;color:#F3D58A;background:rgba(11,37,69,.7);border-radius:999px;padding:.1rem .55rem;letter-spacing:.05em}
/* Kayıtlarım (06.10.2026): bekleyen cevap göstergesi dokunulabilir; durum satırları ve pencere */
button.kayit-durum{font:inherit;font-size:.85rem;line-height:1.35;cursor:pointer;min-height:44px;width:max-content;max-width:min(92vw,30rem)}
.kayit-durum.uyari{border-radius:12px;background:var(--uyari-zem);color:var(--uyari);border-color:var(--uyari);font-weight:600}
.kayit-ozet{margin:.6rem 0;padding:.55rem .8rem;border-radius:8px;background:var(--uyari-zem);color:var(--uyari);font-size:.92rem;line-height:1.45}
.kayit-ozet:empty{display:none}
.kayit-ozet .ses-dugme{margin-left:.3rem}
.kayitlarim{display:flex;flex-direction:column;gap:.7rem}
.kayitlarim .kayit-bag{margin:0;font-weight:600}
.kayitlarim .kayit-sayi{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.kayit-ozet.tamam{background:none;color:var(--murekkep-2);padding-block:.2rem}
body.kayit-bekliyor{padding-bottom:5.5rem}
.kaydi-yok{border-left:4px solid var(--uyari);background:var(--uyari-zem)}
.kaydi-yok .not{margin:.4rem 0 0}