/* Öğretmenler Odası Network — 29 Ekim Gösteri Sihirbazı 1.4.0 (bütün kurallar .oon-gs altında) */
.oon-gs{
  --gs-zemin:#F2F4F8; --gs-yuzey:#FFFFFF; --gs-yazi:#14213A; --gs-soluk:#58647C; --gs-cizgi:#DCE1EA;
  --gs-vurgu:#D10F1B; --gs-vurgu-yazi:#FFFFFF; --gs-altin:#E9A51E; --gs-cip:#EEF1F6; --gs-yesil:#1E7A45;
  --gs-r:14px;
  color:var(--gs-yazi); font-size:16px; line-height:1.5; max-width:1320px; margin:0 auto; padding-block:8px 24px;
}
.oon-gs *,.oon-gs *::before,.oon-gs *::after{box-sizing:border-box}
.oon-gs-yukleniyor{color:var(--gs-soluk); padding:24px 0}
.oon-gs-ust{margin:0 0 18px}
.oon-gs-eyebrow{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gs-vurgu); font-weight:700; margin:0 0 6px}
.oon-gs-h1{font-weight:800; font-size:clamp(28px,4vw,46px); line-height:1.05; margin:0; text-wrap:balance; color:var(--gs-yazi)}
.oon-gs-lede{color:var(--gs-soluk); max-width:64ch; margin:10px 0 0}
.oon-gs-izgara{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
.oon-gs-sahnesutun{min-width:0; display:flex; flex-direction:column; gap:12px}
.oon-gs-ayarlar{display:flex; flex-direction:column; gap:14px; min-width:0}
@media (max-width:940px){ .oon-gs-izgara{grid-template-columns:minmax(0,1fr)} }

.oon-gs-kutu{background:var(--gs-yuzey); border:1px solid var(--gs-cizgi); border-radius:var(--gs-r); padding:16px}
.oon-gs-kutu h2{font-size:15px; font-weight:700; margin:0 0 10px; color:var(--gs-yazi)}
.oon-gs-satir{display:flex; align-items:center; gap:10px}
.oon-gs-buyuk{font-weight:800; font-size:32px; min-width:2.2ch; text-align:right; font-variant-numeric:tabular-nums; color:var(--gs-yazi)}
.oon-gs-buyuk--kucuk{font-size:24px}
.oon-gs input[type=range]{width:100%; accent-color:var(--gs-vurgu)}
.oon-gs select,.oon-gs textarea,.oon-gs input[type=text]{font:inherit; font-size:15px; width:100%; border:1px solid var(--gs-cizgi); background:var(--gs-yuzey); color:var(--gs-yazi); border-radius:10px; padding:8px 10px; margin:0}
.oon-gs textarea{min-height:140px; resize:vertical}
.oon-gs-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.oon-gs-seg button,.oon-gs-cipler button{font:inherit; font-size:14px; border:1px solid var(--gs-cizgi); background:var(--gs-cip); color:var(--gs-yazi); border-radius:10px; padding:8px 6px; cursor:pointer; line-height:1.3}
.oon-gs-seg button small{display:block; color:var(--gs-soluk); font-size:12px}
.oon-gs-seg button[aria-pressed="true"]{background:var(--gs-yazi); color:#fff; border-color:var(--gs-yazi)}
.oon-gs-seg button[aria-pressed="true"] small{color:#fff; opacity:.8}
.oon-gs-cipler{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.oon-gs-cipler button{padding:6px 10px}
.oon-gs-cipler button:hover{border-color:var(--gs-vurgu); color:var(--gs-vurgu)}
.oon-gs-cipler button.oon-gs-kilitli{background:transparent; border-style:dashed; color:var(--gs-soluk)}
.oon-gs-kilitnot{margin-top:10px; background:#FFF6E0; border:1px solid #F0D48A; border-radius:10px; padding:10px 12px; font-size:14px; color:#5A4300}
.oon-gs-kilitnot p{margin:0}
.oon-gs-kilitnot .oon-gs-dugmeler{margin-top:8px}
.oon-gs-sira{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:gs}
.oon-gs-sira li{display:flex; align-items:center; gap:8px; background:var(--gs-cip); border-radius:10px; padding:6px 8px 6px 10px; counter-increment:gs}
.oon-gs-sira li::before{content:counter(gs) "."; font-weight:700; color:var(--gs-soluk); min-width:1.6em}
.oon-gs-sira__ad{flex:1; font-weight:700; min-width:0}
.oon-gs-sira__sabit{font-size:12px; color:var(--gs-soluk)}
.oon-gs-sira__is{display:flex; gap:4px}
.oon-gs-sira__is button{font:inherit; width:30px; height:30px; border-radius:8px; border:1px solid var(--gs-cizgi); background:var(--gs-yuzey); color:var(--gs-yazi); cursor:pointer; padding:0; line-height:1}
.oon-gs-sira__is button[disabled]{opacity:.35; cursor:default}
.oon-gs-ikili{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.oon-gs-ikili label{font-size:13px; color:var(--gs-soluk); display:flex; flex-direction:column; gap:4px}
.oon-gs-ipucu{font-size:13px; color:var(--gs-soluk); margin:8px 0 0}
.oon-gs-secenek{display:flex; flex-direction:column; gap:8px; font-size:15px}
.oon-gs-secenek label{display:flex; gap:8px; align-items:center; cursor:pointer}
.oon-gs-secenek input[type=checkbox]{accent-color:var(--gs-vurgu); width:18px; height:18px; margin:0}
.oon-gs-etiketad{display:block!important; margin:6px 0 4px; color:var(--gs-soluk); font-size:13px}
.oon-gs details summary{cursor:pointer; font-weight:700; font-size:15px}
.oon-gs details[open] summary{margin-bottom:8px}
.oon-gs-dugmeler{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0}

.oon-gs-sahne{position:relative; background:#0A1629; border-radius:var(--gs-r); overflow:hidden; border:1px solid var(--gs-cizgi)}
.oon-gs-sahne canvas{display:block; width:100%; height:auto; touch-action:manipulation; cursor:pointer}
.oon-gs-sahne:fullscreen{border-radius:0; border:0; display:flex; align-items:center; justify-content:center; background:#07101F}
.oon-gs-sahne:fullscreen canvas{max-width:100vw; max-height:100vh}
.oon-gs-tamcubuk{position:absolute; right:12px; bottom:12px; display:none; gap:8px}
.oon-gs-sahne:fullscreen .oon-gs-tamcubuk{display:flex}
.oon-gs-tamcubuk button{font:inherit; font-weight:700; border:0; border-radius:12px; padding:12px 16px; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; font-size:18px}

.oon-gs-kumanda{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.oon-gs-bosluk{flex:1}
.oon-gs-btn{font:inherit; font-weight:700; font-size:15px; border-radius:12px; padding:10px 14px; border:1px solid var(--gs-cizgi); background:var(--gs-yuzey); color:var(--gs-yazi)!important; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none!important; line-height:1.2}
.oon-gs-btn:hover{border-color:var(--gs-yazi)}
.oon-gs-btn--ana{background:var(--gs-vurgu); color:var(--gs-vurgu-yazi)!important; border-color:var(--gs-vurgu); justify-content:center}
.oon-gs-btn--ana:hover{filter:brightness(1.07); border-color:var(--gs-vurgu)}
#oon-gs-oynat{min-width:130px}
.oon-gs-btn--kucuk{font-size:13px; padding:6px 10px; margin-top:8px}
.oon-gs button:focus-visible,.oon-gs a:focus-visible,.oon-gs select:focus-visible,.oon-gs textarea:focus-visible,.oon-gs input:focus-visible{outline:3px solid var(--gs-altin); outline-offset:2px}
.oon-gs-surgu{width:100%}
.oon-gs-cizelge{display:flex; gap:6px; overflow-x:auto; padding-bottom:2px}
.oon-gs-cizelge button{flex:0 0 auto; font:inherit; font-size:14px; border:1px solid var(--gs-cizgi); background:var(--gs-yuzey); color:var(--gs-yazi); border-radius:999px; padding:6px 12px; cursor:pointer}
.oon-gs-cizelge button.on{background:var(--gs-yazi); color:#fff; border-color:var(--gs-yazi)}
.oon-gs-durum{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--gs-soluk)}
.oon-gs-durum b{color:var(--gs-yazi)}
.oon-gs-uyari{color:var(--gs-vurgu); font-weight:700}
.oon-gs-tamam{color:var(--gs-yesil); font-weight:700}
.oon-gs-orta{color:#9A6A00; font-weight:700}
.oon-gs-alt{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.oon-gs-alt:empty{display:none}

.oon-gs--kapi{padding:24px 0}
.oon-gs-kapi{background:var(--gs-yuzey); border:1px solid var(--gs-cizgi); border-radius:var(--gs-r); padding:28px; max-width:640px}
.oon-gs-kapi__btn{display:flex; gap:8px; flex-wrap:wrap}

.oon-gs-baski{display:none}
@media print{
  body.oon-gs-yazdiriliyor{background:#fff!important}
  body.oon-gs-yazdiriliyor *{visibility:hidden!important}
  body.oon-gs-yazdiriliyor .oon-gs-baski,body.oon-gs-yazdiriliyor .oon-gs-baski *{visibility:visible!important}
  body.oon-gs-yazdiriliyor .oon-gs-baski{display:block!important; position:absolute; left:0; top:0; width:100%; background:#fff; color:#14213A; font-size:10.5pt; line-height:1.35}
  .oon-gs-b-sayfa{page-break-after:always; break-after:page; page-break-inside:avoid; break-inside:avoid}
  .oon-gs-b-sayfa:last-child{page-break-after:auto; break-after:auto}
  .oon-gs-b-sayfa h1{font-size:18pt; margin:0 0 1mm}
  .oon-gs-b-sayfa h2{font-size:13pt; margin:3mm 0 1.5mm}
  .oon-gs-b-alt-baslik{color:#58647C; margin:0 0 3mm}
  .oon-gs-b-sayfa img{display:block; height:140mm; width:auto; max-width:100%; margin:0 auto}
  .oon-gs-b-tablo{border-collapse:collapse; width:100%; margin:2mm 0}
  .oon-gs-b-tablo th,.oon-gs-b-tablo td{border:1px solid #C9D0DC; padding:1.2mm 2.5mm; text-align:left}
  .oon-gs-b-tablo th{background:#EEF1F6; width:20%}
  .oon-gs-b-sayfa ol{margin:0; padding-left:6mm}
  .oon-gs-b-sayfa li{margin:.8mm 0}
  .oon-gs-b-not{color:#58647C; font-size:9.5pt; margin:2mm 0 0}
  .oon-gs-b-alt{border-top:.3mm solid #C9D0DC; margin-top:3mm; padding-top:1.2mm; font-size:8.5pt; color:#58647C}
  @page{size:A4 landscape; margin:10mm 12mm}
}

/* 1.2.0 — hazır gösteriler */
.oon-gs-hazirbolum{margin:0 0 18px}
.oon-gs-hazirbas{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:10px}
.oon-gs-hazirbas h2{font-size:19px; font-weight:800; margin:0; color:var(--gs-yazi)}
.oon-gs-hazirbas p{margin:0; color:var(--gs-soluk); font-size:14px}
.oon-gs-hazirlar{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x proximity}
.oon-gs-hk{flex:0 0 260px; scroll-snap-align:start; background:var(--gs-yuzey); border:1px solid var(--gs-cizgi); border-radius:var(--gs-r); padding:14px; display:flex; flex-direction:column; gap:8px}
.oon-gs-hk h3{font-size:16px; font-weight:800; margin:0; line-height:1.25; color:var(--gs-yazi)}
.oon-gs-hk__ozet{font-size:13.5px; color:var(--gs-soluk); margin:0; flex:1}
.oon-gs-hk__rozet{display:flex; flex-wrap:wrap; gap:4px; margin:0}
.oon-gs-hk__rozet span{font-size:12px; background:var(--gs-cip); border-radius:999px; padding:2px 8px; color:var(--gs-yazi)}
.oon-gs-hk__sekil{font-size:12.5px; color:var(--gs-yazi); margin:0; font-weight:600}
.oon-gs-hk .oon-gs-btn{margin-top:2px; justify-content:center}
.oon-gs-hk--kilit{background:transparent; border-style:dashed}
.oon-gs-hk--kilit h3,.oon-gs-hk--kilit .oon-gs-hk__sekil{color:var(--gs-soluk)}
.oon-gs-hk--secili{border-color:var(--gs-vurgu); box-shadow:0 0 0 2px var(--gs-vurgu) inset}
.oon-gs-plan{background:var(--gs-yuzey); border:1px solid var(--gs-cizgi); border-radius:var(--gs-r); padding:16px}
.oon-gs-plan__bas{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px}
.oon-gs-plan__bas h2{font-size:18px; font-weight:800; margin:0; color:var(--gs-yazi)}
.oon-gs-plan__bas .oon-gs-btn{margin:0}
.oon-gs-plan h3{font-size:15px; font-weight:700; margin:12px 0 6px; color:var(--gs-yazi)}
.oon-gs-plan__izgara{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px}
@media (max-width:700px){ .oon-gs-plan__izgara{grid-template-columns:minmax(0,1fr)} }
.oon-gs-akis{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14.5px}
.oon-gs-akis li{padding:4px 8px; border-radius:8px}
.oon-gs-akis li.on{background:#FFF1D6; outline:1px solid #F0C65A}
.oon-gs-siir{background:#F7F2E7; border-radius:12px; padding:4px 14px 12px}
.oon-gs-siir p{margin:8px 0; font-size:15px; line-height:1.5; color:#2A2415}
.oon-gs-siir p span{display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9A6A00}
.oon-gs-siir .oon-gs-ipucu{font-size:12.5px}
@media print{
  .oon-gs-b-iki{display:grid; grid-template-columns:1fr 1fr; gap:8mm}
  .oon-gs-b-iki h3{font-size:12pt; margin:0 0 2mm}
  .oon-gs-b-iki p{margin:0 0 2mm}
}
/* 1.3.0 — öğrenci yer kartları */
.oon-gs-btn--kilitli{border-style:dashed; color:var(--gs-soluk)!important}
.oon-gs-alt .oon-gs-kilitnot{flex-basis:100%}
@media print{
  .oon-gs-b-kartsayfa{display:grid; grid-template-columns:1fr 1fr; gap:6mm; height:184mm; page-break-after:always; break-after:page}
  .oon-gs-b-kartsayfa:last-child{page-break-after:auto; break-after:auto}
  .oon-gs-b-kart{border:.4mm dashed #9AA4B5; border-radius:3mm; padding:4mm 5mm; display:flex; flex-direction:column; gap:2.5mm; overflow:hidden}
  .oon-gs-b-kart--bos{border-color:transparent}
  .oon-gs-b-kartbas{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:.6mm solid #E30A17; padding-bottom:2mm}
  .oon-gs-b-kartbas strong{display:block; font-size:20pt; line-height:1.1}
  .oon-gs-b-kartbas span{font-size:9pt; color:#58647C}
  .oon-gs-b-kartbas em{font-style:normal; font-weight:800; font-size:14pt; color:#fff; background:#E30A17; border-radius:50%; min-width:10mm; height:10mm; display:flex; align-items:center; justify-content:center; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .oon-gs-b-minis{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5mm 3mm}
  .oon-gs-b-mini{margin:0}
  .oon-gs-b-minikutu{position:relative}
  .oon-gs-b-minikutu img{display:block; width:100%; height:auto}
  .oon-gs-b-minikutu i{position:absolute; width:3.6mm; height:3.6mm; margin:-1.8mm 0 0 -1.8mm; border-radius:50%; background:#E30A17; border:.6mm solid #fff; box-shadow:0 0 0 .35mm #E30A17; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .oon-gs-b-mini figcaption{font-size:9pt; margin-top:.8mm; display:flex; justify-content:space-between; align-items:baseline; gap:2mm}
  .oon-gs-b-mini figcaption span{font-weight:800; font-size:12pt; color:#E30A17}
  .oon-gs-b-kartnot{font-size:8pt; color:#58647C; margin:auto 0 0}
  .oon-gs-b-kartalt{font-size:7pt; color:#8C97AB; margin:0; border-top:.3mm solid #D8DEE8; padding-top:1mm}
}
/* 1.4.0 — müzikle oynatma */
.oon-gs-dosyabtn{cursor:pointer}
.oon-gs-muziksatir{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px}
.oon-gs-muziksatir .oon-gs-btn--kucuk{margin-top:0}
.oon-gs-onay{display:flex; gap:8px; align-items:center; margin-top:10px; font-size:14.5px; cursor:pointer}
.oon-gs-onay input{accent-color:var(--gs-vurgu); width:18px; height:18px; margin:0}
.oon-gs input[type=number]{font:inherit; font-size:15px; width:110px; border:1px solid var(--gs-cizgi); background:var(--gs-yuzey); color:var(--gs-yazi); border-radius:10px; padding:6px 10px}
/* 1.6.0 — sınıf listesi getir */
#oon-gs-isimkutu > .oon-gs-btn{margin:0 0 10px}
.oon-gs-listeler{display:flex; flex-direction:column; gap:6px; margin:0 0 12px}
.oon-gs-listeoge{font:inherit; text-align:left; border:1px solid var(--gs-cizgi); background:var(--gs-cip); color:var(--gs-yazi); border-radius:10px; padding:8px 10px; cursor:pointer; display:flex; flex-direction:column; gap:2px}
.oon-gs-listeoge:hover{border-color:var(--gs-vurgu)}
.oon-gs-listeoge span{font-size:12.5px; color:var(--gs-soluk)}