/* oynatici.css - sayfa sayfa ders (Tuna 2026-10-06). Üretici: egitim/derleyici/src/mufredat-ders.mjs, davranış: oynatici.js.
 * Üç görünüm: .mod-tahta (16:9 sahne, ölçeklenir), .mod-ogrenci (ekranı dolduran sayfa), .mod-sunucu (hoca: notlar + sonraki).
 * Sayfa = ekran kadar bir bölüm, aşağı kaydırma yok (içerik taşarsa yalnız sayfanın kendi içi kayar, son çare). */
:root{--o-turuncu:#FF4500;--o-derin:#D63600;--o-krem:#FFF7F0;--o-murekkep:#241a12;--o-soluk:#6f6258;--o-cizgi:#eadfd6;--o-kod:#f6ede4;--o-yesil:#1d8a4a;--o-kirmizi:#c0392b}
.oynatici{margin:0;height:100vh;height:100dvh;overflow:hidden;background:#fff;color:var(--o-murekkep);font-family:'Baloo 2',system-ui,sans-serif}
.oynatici *{box-sizing:border-box}
.oynatici .sunum{display:none}
.oynatici.hazir .sunum{display:block}

/* ---------- ortak sayfa içeriği ---------- */
.sayfa{display:none;position:relative}
.sayfa.etkin{display:flex;flex-direction:column}
.sayfa h1,.sayfa h2{font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
.sayfa .sayfa-etiket{align-self:flex-start;background:var(--o-turuncu);color:#fff;font-weight:800;font-size:.7em;letter-spacing:.06em;
  text-transform:uppercase;border-radius:6px;padding:.15em .6em;margin-bottom:.5em}
.sayfa.yedek .sayfa-etiket{background:var(--o-soluk)}
.sayfa .sayfa-govde{flex:1;min-height:0;display:flex;gap:4%}
.sayfa .metin{flex:1 1 55%;min-width:0}
.sayfa .medya{flex:1 1 45%;min-width:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
.sayfa .medya img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;min-height:0}
.sayfa.duzen-gorsel .sayfa-govde .medya{flex:1 1 100%}
.sayfa ul,.sayfa ol{padding-left:1.1em;margin:.2em 0}
.sayfa li{margin:.25em 0}
.sayfa li::marker{color:var(--o-turuncu)}
.sayfa p{margin:.35em 0}
.sayfa pre{background:var(--o-kod);border-radius:10px;padding:.7em .9em;overflow:auto;font-size:.62em;line-height:1.45;margin:.5em 0}
.sayfa code{font-family:'JetBrains Mono',ui-monospace,monospace}
.sayfa :not(pre)>code{background:var(--o-kod);border-radius:5px;padding:.05em .3em;font-size:.85em}
.sayfa mark{background:#ffe1cf;color:var(--o-derin);border-radius:4px;padding:0 .15em}
.sayfa table{border-collapse:collapse;font-size:.75em}
.sayfa td,.sayfa th{border:1px solid var(--o-cizgi);padding:.3em .6em}
.sayfa small{color:var(--o-soluk);font-size:.6em}
.sayfa.adimli .adim-gizli{visibility:hidden}

.sayfa.tur-kapak .kapak-ic{flex:1;display:flex;align-items:center;gap:5%}
.sayfa.tur-kapak .kapak-metin{flex:1 1 55%}
.sayfa.tur-kapak .kapak-ust{color:var(--o-turuncu);font-weight:800;letter-spacing:.04em;margin:0 0 .3em}
.sayfa.tur-kapak h1{font-size:2.3em}
.sayfa.tur-kapak .kapak-alt{color:var(--o-soluk);font-size:1.05em}
.sayfa.tur-kapak .medya{flex:1 1 45%;align-self:stretch}
.sayfa.tur-ayrac{justify-content:center}
.sayfa.tur-ayrac h2{font-size:2.2em}

/* soru */
.soru .soru-metin{font-weight:700;margin-bottom:.4em}
.soru .secenekler{list-style:none;padding:0;margin:0;display:grid;gap:.4em}
.soru .secenekler li{margin:0}
.soru .secenekler button{width:100%;text-align:left;font:inherit;font-weight:600;background:#fff;color:inherit;border:2px solid var(--o-cizgi);
  border-radius:10px;padding:.45em .8em;cursor:pointer;counter-increment:secenek}
.soru .secenekler{counter-reset:secenek}
.soru .secenekler button::before{content:counter(secenek) ". ";color:var(--o-turuncu);font-weight:800}
.soru .secenekler button:hover{border-color:var(--o-turuncu)}
.soru .secenekler li.secili button{border-color:var(--o-turuncu);background:var(--o-krem)}
.soru.acik li[data-dogru] button{border-color:var(--o-yesil);background:#e7f6ed}
.soru.acik li.secili:not([data-dogru]) button{border-color:var(--o-kirmizi);background:#fbeaea}
.soru .soru-aciklama{margin-top:.5em;font-size:.85em;background:var(--o-krem);border-radius:10px;padding:.5em .8em}
.soru-ac{margin-top:.6em;font:inherit;font-size:.7em;font-weight:700;border:1px solid var(--o-cizgi);background:#fff;border-radius:8px;padding:.3em .8em;cursor:pointer}

/* etkinlik ve ödev kutusu */
.etkinlik,.odev-kutu{border:2px solid var(--o-cizgi);border-radius:12px;padding:.5em .7em;background:#fff;display:flex;flex-direction:column;min-height:0}
.etk-ust{display:flex;align-items:center;gap:.6em;font-size:.8em;margin-bottom:.3em;flex-wrap:wrap}
.etk-etiket{background:var(--o-murekkep);color:#fff;border-radius:6px;padding:.05em .55em;font-weight:800;font-size:.85em;letter-spacing:.04em;text-transform:uppercase}
.etk-baslik{font-weight:800}
.etk-durum{margin-left:auto;font-weight:700;color:var(--o-soluk)}
.etk-durum.tamam{color:var(--o-yesil)}
.etk-sayac{font-weight:800;color:var(--o-derin)}
.etk-bitir{font:inherit;font-weight:700;font-size:.9em;border:1px solid var(--o-turuncu);color:var(--o-derin);background:#fff;border-radius:8px;padding:.15em .7em;cursor:pointer}
.etk-bitir:disabled{border-color:var(--o-cizgi);color:var(--o-soluk);cursor:default}
.etk-aciklama{font-size:.8em}
.etk-govde{flex:1;min-height:0;overflow:auto}
/* etkinlik sayfası: kutu sayfanın kalanını doldurur, widget sığmazsa yalnız kutunun içi kayar */
.sayfa.tur-etkinlik .sayfa-govde{flex-direction:column}
.sayfa.tur-etkinlik .metin{display:flex;flex-direction:column;min-height:0;flex:1}
.sayfa.tur-etkinlik .metin>.etkinlik{flex:1;min-height:0}
.sayfa.tur-etkinlik .medya{display:none}
.etk-govde .widget{margin:0}
.yazi-cevap{width:100%;font:inherit;font-size:16px;border:1px solid var(--o-cizgi);border-radius:8px;padding:8px}

.gomulu-kutu{border:1px solid var(--o-cizgi);border-radius:10px;overflow:hidden;background:var(--o-krem)}
.gomulu-ust{font-size:.7em;font-weight:700;padding:.2em .6em;border-bottom:1px solid var(--o-cizgi);background:#fff}
.gomulu-ic{height:min(var(--y,520px),70vh);display:flex;align-items:center;justify-content:center}
.gomulu-ic iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.gomulu-ac{font:inherit;font-weight:800;border:0;background:var(--o-turuncu);color:#fff;border-radius:8px;padding:.4em 1.2em;cursor:pointer}

/* ---------- çubuklar (tahta + öğrenci + sunucu) ---------- */
.o-ust{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--o-cizgi);background:#fff;z-index:20;font-size:15px}
.o-ust a.o-geri{color:var(--o-soluk);text-decoration:none;font-weight:700;white-space:nowrap}
.o-ust a.o-geri:hover{color:var(--o-derin)}
.o-ust .o-baslik{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.o-ust .o-baslik small{color:var(--o-soluk);font-weight:600;margin-left:6px}
.o-dugme{font:inherit;font-weight:700;font-size:14px;border:1px solid var(--o-cizgi);background:#fff;color:var(--o-murekkep);border-radius:8px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.o-dugme:hover{border-color:var(--o-turuncu)}
.o-dugme.vurgu{background:var(--o-turuncu);border-color:var(--o-turuncu);color:#fff}
.o-dugme.canli{background:#e7f6ed;border-color:var(--o-yesil);color:var(--o-yesil)}
.o-dugme:disabled{opacity:.45;cursor:default}
.o-dugme.uyari{background:#fff4e5;border-color:#c46a00;color:#7a4300}
.o-dugme:focus-visible,.o-panel :focus-visible{outline:3px solid var(--o-derin);outline-offset:2px}
.o-gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.o-alt{position:fixed;bottom:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 12px;border-top:1px solid var(--o-cizgi);background:#fff;z-index:20}
.o-alt .o-ilerle{flex:1;display:flex;gap:3px;align-items:center;min-width:0}
.o-alt .o-ilerle i{flex:1;height:6px;border-radius:3px;background:var(--o-cizgi);cursor:pointer;min-width:2px}
.o-alt .o-ilerle i.gecti{background:#ffc4a8}
.o-alt .o-ilerle i.simdi{background:var(--o-turuncu)}
.o-alt .o-ilerle i.etk{outline:2px solid var(--o-murekkep);outline-offset:1px}
.o-alt .o-ilerle i.tamam{background:var(--o-yesil)}
.o-alt .o-no{font-weight:800;font-size:14px;min-width:64px;text-align:center}
.o-nav{font:inherit;font-weight:800;font-size:16px;border:0;border-radius:10px;padding:8px 18px;cursor:pointer;background:var(--o-krem);color:var(--o-murekkep)}
.o-nav.ileri{background:var(--o-turuncu);color:#fff}
.o-nav:disabled{opacity:.35;cursor:default}

.o-serit{position:fixed;top:48px;left:0;right:0;z-index:19;background:#e7f6ed;border-bottom:1px solid #bfe3cc;color:#155f34;font-weight:700;font-size:14px;
  padding:6px 12px;display:flex;gap:10px;align-items:center}
.o-serit[hidden]{display:none}
.o-serit .o-dugme{padding:2px 10px}

.o-panel{position:fixed;top:56px;right:12px;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 130px);overflow:auto;background:#fff;border:1px solid var(--o-cizgi);
  border-radius:12px;box-shadow:0 12px 32px rgba(36,26,18,.14);padding:14px;z-index:30;font-size:15px}
.o-panel[hidden]{display:none}
.o-panel h3{margin:0 0 8px;font-size:17px}
.o-panel .satir{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.o-panel select{font:inherit;border:1px solid var(--o-cizgi);border-radius:8px;padding:4px 8px;flex:1;min-width:0}
.o-panel label.anahtar{display:flex;gap:8px;align-items:center;font-weight:700;cursor:pointer}
.o-panel .kisiler{list-style:none;padding:0;margin:8px 0 0;font-size:14px}
.o-panel .kisiler li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid #f3ebe4}
.o-panel .kisiler li span:last-child{color:var(--o-soluk);white-space:nowrap}
.o-panel .not{color:var(--o-soluk);font-size:13px}
.o-panel .satir label{font-weight:700}
.o-panel .hata{color:var(--o-kirmizi);font-weight:700;font-size:14px;margin:6px 0}
.o-panel .onay{background:var(--o-krem);border-radius:8px;padding:8px 10px;margin:8px 0}
.o-panel .onay p{margin:0}
.o-panel .durum{background:#e7f6ed;border:1px solid #bfe3cc;color:#155f34;border-radius:8px;padding:8px 10px;margin:0 0 12px;font-size:14px}
.o-panel .durum.uyari{background:#fff4e5;border-color:#f0c88f;color:#6b3b00}
.o-panel .durum p{margin:0}
@media (pointer:coarse){.o-panel .o-dugme,.o-panel select,.o-panel label.anahtar{min-height:44px}}
.o-sayac{position:fixed;right:16px;bottom:70px;z-index:25;background:var(--o-murekkep);color:#fff;font-weight:800;font-size:32px;border-radius:12px;padding:6px 16px;cursor:pointer}
.o-sayac[hidden]{display:none}
.o-sayac.bitti{background:var(--o-turuncu)}
.o-ses{display:none}

/* ---------- tahta: 1600x900 sahne, pencereye ölçeklenir ---------- */
.mod-tahta .o-sahne-kap,.mod-sunucu .o-sahne-kap{position:fixed;top:48px;bottom:56px;left:0;right:0;display:flex;align-items:center;justify-content:center;background:#f4efea;overflow:hidden}
.o-sahne{width:1600px;height:900px;flex:none;background:#fff;transform-origin:center center;box-shadow:0 2px 18px rgba(36,26,18,.12);border-radius:6px;overflow:hidden;position:relative}
.mod-tahta .o-sahne .sayfa,.mod-sunucu .o-sahne .sayfa{position:absolute;inset:0;padding:64px 88px 56px;font-size:40px}
.mod-tahta .o-sahne .sayfa h2,.mod-sunucu .o-sahne .sayfa h2{font-size:1.45em}
.mod-tahta .o-sahne .sayfa .soru .secenekler button{font-size:.9em}
.o-sahne .sayfa.tur-etkinlik .metin{flex:1 1 100%}
.mod-tahta.tam .o-ust,.mod-tahta.tam .o-alt{opacity:0;transition:opacity .2s}
.mod-tahta.tam .o-ust:hover,.mod-tahta.tam .o-alt:hover{opacity:1}
.mod-tahta.tam .o-sahne-kap{top:0;bottom:0;background:#fff}
.mod-tahta.tam .o-sahne{box-shadow:none;border-radius:0}

/* ---------- öğrenci: ekranı dolduran sayfa ---------- */
.mod-ogrenci .o-sahne-kap{position:fixed;top:48px;bottom:56px;left:0;right:0;overflow:hidden}
.mod-ogrenci.serit-acik .o-sahne-kap{top:84px}
.mod-ogrenci .o-sahne{width:100%;height:100%;box-shadow:none;border-radius:0}
.mod-ogrenci .sayfa{position:absolute;inset:0;padding:clamp(16px,3vw,40px) clamp(16px,5vw,72px);font-size:clamp(17px,1.6vw,24px);overflow:auto}
.mod-ogrenci .sayfa h2{font-size:1.6em}
.mod-ogrenci .sayfa.tur-kapak h1{font-size:2.4em}
.mod-ogrenci .sayfa.tur-etkinlik .sayfa-govde{flex-direction:column}
.mod-ogrenci .sayfa .medya img{max-height:58vh}
@media (max-width:760px){
  .mod-ogrenci .sayfa.tur-etkinlik .metin{display:block}
  .mod-ogrenci .sayfa .sayfa-govde,.mod-ogrenci .sayfa.tur-kapak .kapak-ic{flex-direction:column}
  /* alt alta kapak: metin kendi boyunda, görsel hemen altında, ikisi dikeyde ortada (gömülü ölçekli sunum yatay kalır) */
  .mod-ogrenci:not(.olcekli) .sayfa.tur-kapak .kapak-ic{justify-content:center;gap:24px}
  .mod-ogrenci:not(.olcekli) .sayfa.tur-kapak .kapak-metin{flex:0 0 auto}
  .mod-ogrenci:not(.olcekli) .sayfa.tur-kapak .medya{flex:0 1 auto;align-self:center;min-height:0}
  .mod-ogrenci:not(.olcekli) .sayfa.tur-kapak .medya img{max-height:44vh}
  .o-ust .o-geri span,.o-alt .o-no small{display:none}
  .o-nav{padding:8px 12px}
}

/* ---------- sunucu görünümü ---------- */
.mod-sunucu .o-sahne-kap{right:38%;bottom:56px}
.mod-sunucu .o-yan{position:fixed;top:48px;bottom:56px;right:0;width:38%;border-left:1px solid var(--o-cizgi);background:#fff;display:flex;flex-direction:column;overflow:hidden}
.mod-sunucu .o-sonraki{height:28%;min-height:120px;background:#f4efea;position:relative;overflow:hidden;border-bottom:1px solid var(--o-cizgi)}
.mod-sunucu .o-sonraki .etiket{position:absolute;left:8px;top:6px;z-index:2;font-size:12px;font-weight:800;color:var(--o-soluk);text-transform:uppercase;letter-spacing:.06em}
.mod-sunucu .o-sonraki .mini{position:absolute;left:50%;top:50%;transform-origin:center center}
.mod-sunucu .o-notlar{flex:1;overflow:auto;padding:12px 16px;font-size:18px;line-height:1.45}
.mod-sunucu .o-notlar h4{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--o-soluk)}
.mod-sunucu .o-saat{font-weight:800;font-size:15px;color:var(--o-soluk);white-space:nowrap}
/* telefonda: sahne üstte tam genişlik 16:9, altında notlar, en altta küçük "sonraki" */
@media (max-width:760px){
  .mod-sunucu .o-sahne-kap{right:0;bottom:auto;height:calc(100vw * 9 / 16 + 12px)}
  .mod-sunucu .o-yan{top:calc(48px + 100vw * 9 / 16 + 12px);left:0;width:auto;border-left:0;border-top:1px solid var(--o-cizgi);flex-direction:column-reverse}
  .mod-sunucu .o-sonraki{height:96px;min-height:0;border-bottom:0;border-top:1px solid var(--o-cizgi)}
  .mod-sunucu .o-notlar{font-size:16px}
}
.hoca-not{display:none}

/* ---------- hoca materyali (doküman sayfası içinde) ---------- */
.ders-girisler{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:16px 0 22px}
.ders-girisler .giris{display:flex;flex-direction:column;gap:4px;border:1px solid var(--o-cizgi);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--o-murekkep);background:#fff}
.ders-girisler .giris:hover{border-color:var(--o-turuncu)}
.ders-girisler .giris b{font-size:18px}
.ders-girisler .giris span{font-size:14px;color:var(--o-soluk);line-height:1.35}
.ders-girisler .giris-hoca{background:var(--o-krem)}
.ders-girisler [hidden]{display:none}
.ders-alt{color:var(--o-soluk)}
.hoca-satir{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--o-cizgi)}
.hoca-satir h3{margin:0 0 6px;font-size:18px}
.hoca-satir h3 small{color:var(--o-soluk);font-weight:600;font-size:13px;margin-left:6px}
.hoca-satir .bos{color:var(--o-soluk)}
.hoca-onizleme{width:320px;height:180px;position:relative;overflow:hidden;border:1px solid var(--o-cizgi);border-radius:8px;background:#fff}
.mini-sahne{position:absolute;left:0;top:0;width:1600px;height:900px;transform:scale(.2);transform-origin:0 0}
.mini-sahne .sayfa{display:flex;flex-direction:column;position:absolute;inset:0;padding:64px 88px 56px;font-size:40px}
.mini-sahne .sayfa .adim-gizli{visibility:visible}
.mini-sahne .gomulu-kutu,.mini-sahne .widget{pointer-events:none}
.hoca-not-kutu{background:var(--o-krem);border-radius:10px;padding:8px 12px}
@media (max-width:760px){.hoca-satir{grid-template-columns:1fr}}

/* ---------- ödev sayfası ---------- */
.odev-sayfa .odev{margin:18px 0 28px}
.odev-sayfa .odev-kutu{font-size:18px}
.odev-alt{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.odev-alt button{font:inherit;font-weight:800;border:1px solid var(--o-cizgi);background:#fff;border-radius:8px;padding:6px 14px;cursor:pointer}
.odev-alt .odev-teslim{background:var(--o-turuncu);border-color:var(--o-turuncu);color:#fff}
.odev-durum{font-weight:700;color:var(--o-soluk)}
.odev-durum.tamam{color:var(--o-yesil)}
.odev-durum.tekrar{color:var(--o-kirmizi)}
.odev-yorum{margin-top:8px;background:var(--o-krem);border-radius:10px;padding:8px 12px}
.odev-yorum.tekrar{background:#fff1ec;border:1px solid #f4b9a3}
.odev-durum.hata{color:var(--o-kirmizi)}
.odev-alt button:disabled{opacity:.45;cursor:default}
.odev-alt button[aria-disabled=true]{opacity:.6;cursor:progress}
.odev-ipucu{margin:6px 0 0;color:var(--o-soluk);font-size:15px}
.odev-bilgi{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.odev-bilgi:empty{display:none}
.odev-bilgi>div{background:var(--o-krem);border-radius:10px;padding:8px 12px;font-size:16px}
.odev-bilgi>div.uyari{background:#fff4e5;border:1px solid #f0c88f;color:#6b3b00}
.odev-bilgi p{margin:0}
.odev-bilgi button{font:inherit;font-weight:700;border:1px solid var(--o-cizgi);background:#fff;color:var(--o-murekkep);border-radius:8px;padding:4px 12px;margin:6px 8px 0 0;cursor:pointer}
.odev-alt button:focus-visible,.odev-bilgi button:focus-visible{outline:3px solid var(--o-derin);outline-offset:2px}
@media (pointer:coarse){.odev-alt button,.odev-bilgi button{min-height:44px}}
.odev-listesi li{margin:.4em 0}

/* etkinlik sayfasında gömülü araç ve blok-saha kalan yüksekliğe sığar (düğmeleri sayfa altında kalmasın) */
.sayfa.tur-etkinlik .etk-govde{display:flex;flex-direction:column}
.sayfa.tur-etkinlik .etk-govde>.gomulu-kutu{flex:1;display:flex;flex-direction:column;min-height:0}
.sayfa.tur-etkinlik .etk-govde>.gomulu-kutu>.gomulu-ic{flex:1;height:auto;min-height:240px}
/* Tek gösterim kutusu (builder/blocks) olan sayfa: kutu sayfanın kalanını doldurur (Tuna 7 Eki) */
.sayfa.tur-etkinlik .metin:has(>.gomulu-kutu:only-child){display:flex;flex-direction:column;flex:1 1 100%}
.sayfa.tur-etkinlik .metin>.gomulu-kutu:only-child{flex:1;display:flex;flex-direction:column;min-height:0}
.sayfa.tur-etkinlik .metin>.gomulu-kutu:only-child>.gomulu-ic{flex:1;height:auto;min-height:240px}
.mod-ogrenci .sayfa.tur-etkinlik .widget.bsaha .bs-blok{height:clamp(240px,calc(100vh - 470px),420px)}
.mod-tahta .o-sahne .sayfa.tur-etkinlik,.mod-sunucu .o-sahne .sayfa.tur-etkinlik{font-size:32px;padding-top:44px;padding-bottom:36px}
.mod-tahta .o-sahne .sayfa.tur-etkinlik .widget.bsaha .bs-blok,.mod-sunucu .o-sahne .sayfa.tur-etkinlik .widget.bsaha .bs-blok{height:340px}
.mod-tahta .o-sahne .sayfa.tur-etkinlik .etk-ust,.mod-sunucu .o-sahne .sayfa.tur-etkinlik .etk-ust{font-size:.7em}
@media (max-width:760px){
  .mod-ogrenci .sayfa.tur-etkinlik .widget.bsaha .bs-blok{height:330px}
  .mod-ogrenci .sayfa.tur-etkinlik .etk-govde>.gomulu-kutu>.gomulu-ic{height:70vh;flex:none}
}

/* ---------- gömülü öğrenci (ders sayfasındaki kutu): tam bir slayt. Tahta gibi 1600x900 sahne kutuya ölçeklenir,
 * üst çubuk yok, Geri/İleri ve ilerleme alt çubukta, iframe içinde kaydırma yok (Tuna 7 Eki). Dar ekran kuralları burada geçmez. */
.mod-ogrenci.olcekli .o-ust{display:none}
.mod-ogrenci.olcekli .o-serit{top:0}
.mod-ogrenci.olcekli .o-alt{height:44px;gap:10px;padding:0 8px}
.mod-ogrenci.olcekli .o-nav{font-size:15px;padding:5px 14px}
.mod-ogrenci.olcekli .o-sahne-kap{top:0;bottom:44px;display:flex;align-items:center;justify-content:center;background:#fff}
.mod-ogrenci.olcekli.serit-acik .o-sahne-kap{top:32px}
.mod-ogrenci.olcekli .o-sahne{width:1600px;height:900px}
.mod-ogrenci.olcekli .sayfa{padding:64px 88px 56px;font-size:40px;overflow:hidden}
.mod-ogrenci.olcekli .sayfa h2{font-size:1.45em}
.mod-ogrenci.olcekli .sayfa.tur-kapak h1{font-size:2.3em}
.mod-ogrenci.olcekli .sayfa .medya img{max-height:100%}
.mod-ogrenci.olcekli .sayfa .sayfa-govde,.mod-ogrenci.olcekli .sayfa.tur-kapak .kapak-ic{flex-direction:row}
.mod-ogrenci.olcekli .sayfa.tur-etkinlik .sayfa-govde{flex-direction:column}
.mod-ogrenci.olcekli .sayfa.tur-etkinlik .metin{display:flex}
.mod-ogrenci.olcekli .sayfa.tur-etkinlik{font-size:32px;padding-top:44px;padding-bottom:36px}
.mod-ogrenci.olcekli .sayfa.tur-etkinlik .etk-ust{font-size:.7em}
.mod-ogrenci.olcekli .sayfa.tur-etkinlik .widget.bsaha .bs-blok{height:340px}
.mod-ogrenci.olcekli .gomulu-ic{height:min(var(--y,520px),600px)}
.mod-ogrenci.olcekli .sayfa.tur-etkinlik .metin>.gomulu-kutu:only-child>.gomulu-ic,
.mod-ogrenci.olcekli .sayfa.tur-etkinlik .etk-govde>.gomulu-kutu>.gomulu-ic{flex:1;height:auto;min-height:240px}
.mod-ogrenci.olcekli .sayfa .widget.bsaha .bs-govde{flex-direction:row;align-items:flex-start}
.mod-ogrenci.olcekli .sayfa .widget.bsaha .bs-sag{width:clamp(240px,46%,340px)}
.mod-ogrenci.olcekli .sayfa .widget.bsaha .bs-blok{flex:1 1 auto}
@media (min-width:480px){.mod-ogrenci.olcekli .o-alt .o-no small{display:inline}}
@media (max-width:479px){.o-alt .o-ilerle{gap:2px}.o-alt .o-ilerle i.etk{outline-width:1px;outline-offset:0}}

/* ---------- tek kutu tam ekran (tam-ekran.js, Tuna 7 Eki): etkinlik, Builder/Blocks kutusu, widget ---------- */
.te-dugme{font:inherit;font-weight:700;font-size:.85em;line-height:1.3;border:1px solid var(--o-cizgi);background:#fff;color:var(--o-murekkep);border-radius:8px;padding:.1em .7em;cursor:pointer;white-space:nowrap}
.te-dugme:hover{border-color:var(--o-turuncu);color:var(--o-derin)}
.etk-ust .te-dugme{margin-left:.4em}
.etk-ust .etk-durum:empty+.te-dugme{margin-left:auto}
.gomulu-ust:has(>.te-dugme){display:flex;align-items:center;gap:.5em}
.gomulu-ust>.te-dugme{margin-left:auto;font-size:1em}
.te-cubuk{display:flex;justify-content:flex-end;margin:0 0 4px;font-size:14px}
/* tahta: one full screen button, the presentation's (Tuna 2026-10-13); boxes keep theirs in the other views */
.mod-tahta .te-dugme,.mod-tahta .te-cubuk{display:none}
.te-hedef.te-tam{background:#fff;color:var(--o-murekkep);font-size:18px;padding:14px 18px;margin:0;border:0;border-radius:0;
  display:flex;flex-direction:column;overflow:auto;width:100%;height:100%;box-sizing:border-box}
.te-hedef.te-tam.gomulu-kutu{padding:0;background:var(--o-krem)}
.te-hedef.te-tam>.etk-ust{font-size:16px;flex:none}
.te-hedef.te-tam .etk-aciklama{flex:none}
.te-hedef.te-tam .etk-govde{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.te-hedef.te-tam .gomulu-kutu{flex:1;display:flex;flex-direction:column;min-height:0}
.te-hedef.te-tam .gomulu-ic{flex:1 1 auto!important;height:auto!important;min-height:0}
.te-hedef.te-tam .widget.bsaha .bs-blok{height:calc(100vh - 220px)!important;min-height:280px}
/* widget tuvali (ortak.js satır içi px boyutu verir): pencereye büyür, oran korunur */
.te-hedef.te-tam .widget canvas{height:calc(100vh - 240px)!important;width:auto!important;max-width:100%;min-width:0;object-fit:contain;flex:0 1 auto}
.te-hedef.te-tam .yazi-cevap{flex:1}
/* Fullscreen API yoksa (iPhone): kutu pencereyi doldurur; ölçekli sahnenin transform'u fixed'i bozmasın */
.te-hedef.te-yedek{position:fixed!important;inset:0;z-index:1000;width:auto;height:auto}
.te-yedek-acik .o-sahne{transform:none!important}
.te-yedek-acik,.te-yedek-acik body{overflow:hidden}

/* ---------- tahta: widget'lı sayfa yalnız widget, sahnenin tamamı (Tuna 8 Eki). Üretici mufredat-ders.mjs .tam-widget;
   istisna ders.md'de sayfa başlığında {baslikli}. html.tam-widget-yok eski düzeni gösterir (ders-video.mjs çekimi). ---------- */
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget{padding:0;font-size:24px}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget>h2,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget>.sayfa-etiket,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .medya,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-aciklama,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-etiket,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-baslik,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .gomulu-ust,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .te-dugme,
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .metin>:not(.widget,.gomulu-kutu,.gomulu,.etkinlik:has(.widget,.gomulu-kutu),.te-kap:has(.widget,.gomulu-kutu)){display:none!important}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .sayfa-govde,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .metin{flex:1 1 100%;display:flex;flex-direction:column;min-height:0;min-width:0;margin:0;padding:0;gap:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .metin>*{flex:1 1 0;min-height:0;margin:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etkinlik{border:0;border-radius:0;padding:0;position:relative}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-ust{position:absolute;top:10px;right:14px;z-index:3;font-size:20px;margin:0;padding:2px 10px;background:rgba(255,255,255,.92);border-radius:8px}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-ust:not(:has(.etk-sayac:not(:empty),.etk-durum:not(:empty))){display:none}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-govde{flex:1;display:flex;flex-direction:column;min-height:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-govde>*{flex:1;min-height:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .gomulu-kutu{display:flex;flex-direction:column;border:0;border-radius:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .gomulu-ic{flex:1;height:auto;min-height:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .etk-govde,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .metin{overflow:hidden}
/* a bare widget is wrapped by tam-ekran.js in .te-kap; it fills the stage like the box (its toolbar is hidden) */
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .te-kap{position:relative;overflow:hidden}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .te-cubuk{display:none}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .metin>.etkinlik{min-height:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .widget{flex:none;align-self:flex-start;width:max-content;max-width:none;transform-origin:0 0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .widget.bsaha{width:1120px}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .widget.bsaha .bs-blok{height:520px}
.mod-tahta.tam .o-sahne .sayfa.tam-widget{padding:44px 0 52px}
html.tam-widget-yok .mod-tahta.tam .o-sahne .sayfa.tam-widget{padding:64px 88px 56px}
/* stage page that still overflows after sigdir() shrank its text: scroll instead of clipping (Tuna 2026-10-10) */
.o-sahne .sayfa.tasiyor,.mini-sahne .sayfa.tasiyor{overflow:auto!important}
/* activity boxes keep a usable height (Tuna 2026-10-10): otherwise flex squeezes a Blocks/Builder box to ~20px or a
   text answer to 0 under a table or list, and scrollHeight never sees the overflow; with a floor sigdir() can react */
.sayfa.tur-etkinlik .metin>.etkinlik:has(.gomulu-kutu,.widget.bsaha){min-height:420px}
.sayfa.tur-etkinlik .metin>.etkinlik:has(.yazi-cevap){min-height:160px}
/* tool pages outside the tahta full-widget layout (student views, sunucu, {baslikli}): heading and the activity's top row
   stay, the block holding the tool fills the rest of the page; oynatici.js aracOlcekle() scales a widget to its area
   (Tuna 2026-10-10) */
.oynatici .sayfa.arac-sayfa .sayfa-govde{flex:1 1 auto;display:flex;min-height:0}
.oynatici .sayfa.arac-sayfa .metin{flex:1 1 55%;display:flex;flex-direction:column;min-height:0;min-width:0}
.oynatici .sayfa.arac-sayfa .metin>.arac-tutucu{flex:1 1 0;min-height:240px;display:flex;flex-direction:column}
.oynatici .sayfa.arac-sayfa .arac-tutucu .etk-govde{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.oynatici .sayfa.arac-sayfa .arac-alan{overflow:hidden;min-height:0}
.oynatici .sayfa.arac-sayfa .arac-alan>.widget{flex:none;align-self:flex-start;width:max-content;max-width:none;margin:0;transform-origin:0 0}
.oynatici .sayfa.arac-sayfa .arac-alan>.widget.bsaha{width:1340px}
.oynatici .sayfa.arac-sayfa .arac-alan>.widget.bsaha .bs-blok{height:400px!important}
/* on the 1600x900 stage a tool page needs less margin than a text page */
.oynatici .o-sahne .sayfa.arac-sayfa{padding:28px 36px 20px}
.oynatici .sayfa.arac-sayfa .gomulu-kutu{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
.oynatici .sayfa.arac-sayfa .gomulu-ic{flex:1 1 0;height:auto!important;min-height:0}
/* ```3d``` part model (gomulu.js 3d box; probot-egitim 2026-10-12): the box fills the tool area on tool pages and the
   whole stage on a tahta full-widget page; its scene drops the fixed height gomulu.js sets and takes the rest */
.oynatici .sayfa .gomulu[data-tur="3d"]{margin:0}
/* next to text the compiler puts the 3d box in the media column: it fills the column, images stay small below it */
.sayfa .medya:has(>.gomulu[data-tur="3d"]){flex:1 1 55%;align-self:stretch}
.sayfa .medya>.gomulu[data-tur="3d"]{align-self:stretch;flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.sayfa .medya>.gomulu[data-tur="3d"] .g-sahne{flex:1 1 0;height:auto!important;min-height:0}
.sayfa .medya>.gomulu[data-tur="3d"]~img{flex:0 1 auto;max-height:26%}
.oynatici .sayfa.arac-sayfa .gomulu[data-tur="3d"],html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .gomulu[data-tur="3d"]{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
.oynatici .sayfa.arac-sayfa .gomulu[data-tur="3d"] .g-sahne,html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .gomulu[data-tur="3d"] .g-sahne{flex:1 1 0;height:auto!important;min-height:0}
html:not(.tam-widget-yok) .o-sahne .sayfa.tam-widget .gomulu[data-tur="3d"]{border:0;border-radius:0}
@media (max-width:760px){
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .arac-alan>.widget,.mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .arac-alan>.widget.bsaha{width:auto;max-width:100%;align-self:stretch}
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .arac-alan>.widget.bsaha .bs-blok{height:330px!important}
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .arac-alan,.mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .arac-tutucu .etk-govde{overflow:visible}
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .metin>.arac-tutucu,.mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .gomulu-kutu{flex:none}
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .gomulu-ic{flex:none;height:70vh!important}
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .gomulu[data-tur="3d"]{flex:none}
  .mod-ogrenci:not(.olcekli) .sayfa.arac-sayfa .gomulu[data-tur="3d"] .g-sahne{flex:none;height:60vh!important}
  .mod-ogrenci:not(.olcekli) .sayfa .medya>.gomulu[data-tur="3d"]{flex:none}
  .mod-ogrenci:not(.olcekli) .sayfa .medya>.gomulu[data-tur="3d"] .g-sahne{flex:none;height:55vh!important}
}
/* ```etkinlik sirala```: drag or arrow the items into order (Tuna 2026-10-13); held item bold on a light ground */
.sirala{position:relative;list-style:none;margin:.3em 0 0;padding:0;display:flex;flex-direction:column;gap:.22em;font-size:.8em;user-select:none;-webkit-user-select:none}
.sirala li{display:flex;align-items:center;gap:.6em;padding:.12em .25em .12em .7em;border:1px solid var(--o-cizgi);border-radius:10px;background:#fff;cursor:grab;touch-action:none;line-height:1.2;position:relative;transition:background-color .3s,border-color .3s,box-shadow .15s}
.sirala li.tutuluyor{cursor:grabbing;background:var(--o-krem);font-weight:800;box-shadow:0 10px 26px rgba(36,26,18,.18);z-index:2;transition:box-shadow .15s,background-color .15s}
.sirala li.kayiyor{transition:transform .22s cubic-bezier(.2,.7,.3,1),background-color .3s,border-color .3s}
.sirala-no{min-width:1.8em;font-weight:800;color:var(--o-soluk)}
.sirala-ad{flex:1;min-width:0}
.sirala-ok{font:inherit;font-size:.85em;font-weight:800;line-height:1;width:1.8em;height:1.8em;border:1px solid var(--o-cizgi);background:#fff;color:var(--o-murekkep);border-radius:8px;cursor:pointer;flex:none}
.sirala-ok:hover{border-color:var(--o-turuncu);color:var(--o-derin)}
@media (prefers-reduced-motion:reduce){.sirala li,.sirala li.kayiyor,.sirala li.tutuluyor{transition:none}}
.sirala li:first-child .sirala-ok[data-yon="-1"],.sirala li:last-child .sirala-ok[data-yon="1"]{visibility:hidden}
.sirala li.dogru{background:#eaf6ee;border-color:#bfe3cb}
.sirala li.yanlis{background:#fbeceb;border-color:#efc6c1}
.sirala-kutu .etk-ust .sirala-kontrol{margin-left:.4em}
.sirala.iki-sutun{display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--satir),auto);column-gap:1em}

/* {gorsel-alt} (Hüseyin Hoca, 2026-10-13): text on top, the images under it at full width, filling the rest of the page.
 * Doubled class so it wins over the side-by-side rules of every view (.mod-ogrenci.olcekli .sayfa .sayfa-govde). */
.sayfa.gorsel-alt.gorsel-alt .sayfa-govde{flex-direction:column;gap:.6em}
.sayfa.gorsel-alt.gorsel-alt .metin{flex:0 0 auto}
.sayfa.gorsel-alt.gorsel-alt .medya{flex:1 1 0;min-height:0;width:100%;flex-direction:row;align-items:stretch;justify-content:center}
.sayfa.gorsel-alt.gorsel-alt .medya img{flex:1 1 0;min-width:0;width:100%;height:100%;max-height:100%;object-fit:contain}
/* phone student page scrolls: the images keep their own height instead of sharing a squeezed rest */
@media (max-width:760px){
  .mod-ogrenci:not(.olcekli) .sayfa.gorsel-alt.gorsel-alt .medya{flex:0 0 auto;flex-direction:column;align-items:center}
  .mod-ogrenci:not(.olcekli) .sayfa.gorsel-alt.gorsel-alt .medya img{flex:none;height:auto;max-height:58vh}
}

/* {orta-yazi} (2026-10-13): one sentence, large and centred both ways; the page has no heading */
.sayfa.orta-yazi.orta-yazi .sayfa-govde{align-items:center;justify-content:center;text-align:center}
.sayfa.orta-yazi.orta-yazi .metin{flex:0 1 auto;font-size:2.2em;font-weight:800;line-height:1.15}
.sayfa.orta-yazi.orta-yazi .metin>p{margin:0}
/* {gorsel-sol} (2026-10-13): images on the left and large, text and tables on the right */
.sayfa.gorsel-sol.gorsel-sol .sayfa-govde{flex-direction:row-reverse;align-items:center}
.sayfa.gorsel-sol.gorsel-sol .medya{flex:1 1 55%;align-self:stretch}
.sayfa.gorsel-sol.gorsel-sol .metin{flex:1 1 42%}
@media (max-width:760px){
  .mod-ogrenci:not(.olcekli) .sayfa.gorsel-sol.gorsel-sol .sayfa-govde{flex-direction:column;align-items:stretch}
  .mod-ogrenci:not(.olcekli) .sayfa.gorsel-sol.gorsel-sol .medya{flex:0 0 auto}
}
/* {ayrac} section divider (Tuna 2026-10-13): no empty page with a small heading top left. The title sits large in the
   middle both ways; an image in the body comes under it, centred and large; any text sits between them */
.sayfa.tur-ayrac.tur-ayrac{justify-content:center;justify-content:safe center;align-items:center;text-align:center}
.o-sahne .sayfa.tur-ayrac.tur-ayrac h2{font-size:2.4em;margin:0}
.sayfa.tur-ayrac.tur-ayrac .sayfa-govde{flex:0 1 auto;min-height:0;width:100%;flex-direction:column;align-items:center;gap:.4em;margin-top:.5em}
.sayfa.tur-ayrac.tur-ayrac .sayfa-govde:empty{display:none}
.sayfa.tur-ayrac.tur-ayrac .metin{flex:0 0 auto}
.sayfa.tur-ayrac.tur-ayrac .medya{flex:0 1 auto;min-height:0;width:100%;flex-direction:row;justify-content:center}
.mod-tahta .o-sahne .sayfa.tur-ayrac.tur-ayrac .medya img,.mod-sunucu .o-sahne .sayfa.tur-ayrac.tur-ayrac .medya img{max-height:540px}
.mod-ogrenci .sayfa.tur-ayrac.tur-ayrac .medya img{max-height:50vh}
/* ```not``` teacher's note box (Tuna 2026-10-16; sunum/ders-not.js): the class's ideas, one per line, written on the board.
   Hidden until the LMS says the viewer is a teacher; never on the student view */
.ders-not{display:flex;flex-direction:column;gap:.25em;margin:.4em 0;padding:.4em .55em .5em;border:1px solid var(--o-cizgi);border-radius:12px;background:var(--o-krem);text-align:left}
.ders-not[hidden]{display:none}
.ders-not-ust{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .6em;font-size:.62em}
.ders-not-ust b{font-weight:800;color:var(--o-murekkep)}
.ders-not-ust select{font:inherit;font-size:.9em;padding:.1em .3em;border:1px solid var(--o-cizgi);border-radius:6px;background:#fff;color:var(--o-murekkep)}
.ders-not-durum{margin-left:auto;color:var(--o-soluk);font-size:.9em}
.ders-not-istem{font-size:.65em;color:var(--o-soluk)}
.ders-not-istem p{margin:0}
.ders-not-metin{display:block;width:100%;box-sizing:border-box;min-height:4.6em;font:inherit;font-size:.72em;line-height:1.35;padding:.35em .5em;
  border:1px solid var(--o-cizgi);border-radius:8px;background:#fff;color:var(--o-murekkep);resize:vertical}
.ders-not-metin:focus{outline:2px solid var(--o-turuncu);outline-offset:1px}
.ders-not-metin:disabled{background:#fff;opacity:.8}
.ders-not-oku{margin:10px 0 4px;padding:8px 12px;border-radius:10px;background:var(--o-krem)}
.ders-not-oku .bos{margin:.2em 0 0}
.ders-not-kayit{margin-top:6px}
.ders-not-kayit small{color:var(--o-soluk)}
.ders-not-kayit ul{margin:.2em 0 0}