.app-layout{display:flex;flex:1;min-height:0}
.app-layout>main{min-width:0}
.sol-menu{width:224px;flex:none;padding:24px 14px;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:8px}
.menu-baslik{font-size:11px;letter-spacing:1.5px;color:var(--muted);padding:8px 12px 16px}
.sol-menu a{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:600}
.sol-menu a:hover{background:var(--panel2);color:var(--txt)}
.sol-menu a[aria-current=page]{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
.menu-alt{margin-top:auto;padding:16px 12px;color:var(--muted);font-size:12px;line-height:1.6}
#siniflar,#yonetim{overflow:auto;padding:24px}
.sinif-baslik h1{font-size:26px;margin:0 0 8px}.sinif-baslik p{margin:0;color:var(--muted)}
.sinif-ozet{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.sinif-ozet>div{padding:14px;background:var(--panel2);border-radius:10px;color:var(--muted);font-size:13px}
.sinif-ozet b{display:block;font-size:25px;color:var(--txt);margin-bottom:4px}
.sinif-sekmeler{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.sinif-sekmeler button[aria-pressed=true]{border-color:var(--acc);color:var(--acc)}
.sinif-oyunlar-listesi{display:grid;gap:10px}.sinif-oyunkart{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.sinif-oyunkart p{margin:5px 0;color:var(--muted);font-size:13px}.sinif-oyunkart .row{flex-shrink:0}
.sinif-bos{padding:26px 12px;color:var(--muted);line-height:1.6;text-align:center}
#sinifBagla .row{align-items:end}#sinifBagla label{flex:1;min-width:160px}
.sonuc-kayit{padding:14px;border:1px solid var(--acc);border-radius:10px;margin:14px 0}.sonuc-kayit p{margin:0 0 10px}
/* Oyun hakkı seçicisi başlık şeridinin içindedir: eskiden başlıkla HUD arasında kendi
   satırını kaplıyordu, o satırın ortası bomboştu ve sahneden ~58 px yiyordu. Başlığın boş
   orta alanına taşındı; oyun ekranında üstte üç değil iki şerit var.
   Seçicinin kendi "Sınıf seçin" seçeneği zaten etiket görevi görüyor, ayrı yazı gerekmiyor
   (erişilebilirlik için select'te aria-label var). Ad tek satırda kalsın diye taşarsa üç
   noktaya iner; tam metin title özniteliğinde duruyor (sinif-panel.js). */
#rastgeleKutu{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
#rastgeleKutu select{width:150px;flex:none}
#rastgeleAd{font-size:15px;font-weight:700;color:var(--acc);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rastgeleBtn{white-space:nowrap}.app-layout.student .sol-menu{display:none}
/* İki ayrı margin-left:auto boşluğu paylaşırdı; seçici ile sekmeler yan yana dursun. */
header:has(#rastgeleKutu:not([hidden])) .tabs{margin-left:0}
/* Dar masaüstünde logo yerini seçiciye bırakır (800 px altı kuralı bunu zaten kapsıyordu). */
@media(max-width:1100px){header:has(#rastgeleKutu:not([hidden])) .logo{display:none}}
body.girissiz .sol-menu,body.girissiz #menuAc{display:none!important}
body[data-gorunum=game] .sol-menu{display:none}body[data-gorunum=game] #tabTeacher{display:inline-block}
body[data-gorunum=siniflar] #tabTeacher,body[data-gorunum=siniflar] #tabGame{display:none}
#menuAc{display:none}
@media(max-width:800px){
  header{gap:6px;padding:8px}
  header .tabs .tab[data-view]{display:none!important}
  header .tabs{flex-shrink:0}
  #rastgeleBtn{font-size:12px;padding:8px}
  .sol-menu{width:190px;position:absolute;z-index:45;top:0;bottom:0;box-shadow:12px 0 35px #0005;display:none}
  .app-layout{position:relative}.app-layout.menu-acik .sol-menu{display:flex}
  #menuAc{display:block}.sol-menu a{min-height:48px}
  #siniflar{padding:12px}.sinif-oyunkart{align-items:stretch;flex-direction:column}
  .sinif-ozet{gap:6px}.sinif-ozet>div{padding:10px}
  /* Telefonda düğme yalnız zar simgesi kalır (aria-label okur), yer seçilen öğrencinin
     adına gider. Yine de sığmazsa ad kendi satırına iner: kimin sırada olduğu kısaltmayla
     kaybolmasın. */
  #rastgeleKutu{gap:6px;flex:1;min-width:0;flex-wrap:wrap}
  #rastgeleKutu select{width:104px}
  #rastgeleBtn .btn-yazi{display:none}
  #rastgeleAd{font-size:12px;flex:1;min-width:120px}
  #rastgeleAd .rastgele-on{display:none}
  header .gt{display:none}
  body[data-gorunum=game] header .logo{display:none}
}
@media print{.sol-menu,#menuAc,#rastgeleKutu{display:none!important}}
/* ÖğretmenXai yardımcı yüzeyleri */

body:not([data-gorunum="game"]) .sol-menu a[aria-current=page]{background:#e8f3ff;color:#2558c4}
.sinif-ozet>div:nth-child(1){background:var(--brand-lav);color:#4a3596}
.sinif-ozet>div:nth-child(2){background:var(--brand-van);color:#70480b}
.sinif-ozet>div:nth-child(3){background:var(--brand-mint);color:#245d56}
.sinif-ozet b{color:inherit}
/* Ders programı (program-panel.js) */
#program{overflow:auto;padding:24px}
body[data-gorunum=program] #tabTeacher,body[data-gorunum=program] #tabGame{display:none}
.program-tablo{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.program-tablo th,.program-tablo td{border:1px solid var(--line);padding:4px;text-align:center;vertical-align:middle}
.program-tablo th small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.program-hucre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:44px;padding:4px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font:inherit}
.program-hucre.dolu{border-style:solid;background:var(--panel2);color:var(--txt)}
.program-hucre.secili{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 30%,transparent)}
.program-hucre b{font-size:14px}.program-hucre small{font-size:11px;color:var(--muted)}
div.program-hucre{cursor:default}