/* Geniş ekran düzeni: tablet (768-1023 px) ve bilgisayar (≥1024 px).
   Sahip (2026-10-22): "panelin bilgisayar hali de mobil gibi çalışıyor mobil ayrı pc ayrı olmalı".
   Telefon düzeni (<768 px) tema.css'tedir ve değişmez; bu dosyadaki her kural geniş ekran sorgusu içindedir
   (yalnız geniş ekran parçalarını telefonda gizleyen ilk blok hariç).
   Kabuk: #menu telefonda alt sekme çubuğu, geniş ekranda sol kenar çubuğu (tablet 72 px ikonlu, bilgisayar 240 px).
   #ust ince başlık satırı (sağda zil ve avatar). #sahne kenar çubuğunun sağında; .sayfa içeriği ortalı,
   en çok --icerik (tablet 760, bilgisayar 1200 px), iki yanda en az 32 px. Sayfa düzenleri aşağıda, sayfa önekleriyle.
   Not: sayfa stil blokları (stilEkle) bu dosyadan sonra eklenir; aynı ağırlıktaki kuralları ezmemek için sayfa
   kuralları ":root" ile başlar. */

/* Telefonda gizli geniş ekran parçaları */
.menu-marka, .menu-alt, .ust-genis-ek { display: none; }
@media (max-width: 767px) {
  .menu.ic-ekran, .ust.yalniz-genis { display: none !important; }
}

/* ═════════════ Kabuk (≥768 px) ═════════════ */
@media (min-width: 768px) {
  :root { --kenar: 72px; --icerik: 760px; --menu-h: 0px; --ust-h: 64px; }
  html, body { height: 100%; }
  body { display: block; background: var(--zemin); }
  #kok { width: auto; max-width: none; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; background: var(--zemin); }
  body:not(.kenarli) { --kenar: 0px; }

  /* Sol kenar çubuğu */
  .menu {
    top: 0; bottom: 0; left: 0; right: auto; width: var(--kenar); height: auto; z-index: 22;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 12px 16px; overflow-y: auto; scrollbar-width: none;
    background: var(--yuzey); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 1px 0 0 var(--cizgi);
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu.ic-ekran { display: flex; }
  .menu-hap { display: none; }
  .menu-marka { display: flex; justify-content: center; padding: 6px 0 18px; }
  .menu-marka .mk-kilit-yazi { display: none; }
  .menu button, .menu .mk-siteye {
    position: relative; flex: none; min-height: 48px; width: 100%; padding: 0; border-radius: 14px;
    flex-direction: row; justify-content: center; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 700; color: var(--y2); transition: background .15s, color .15s;
  }
  .menu .menu-yazi { display: none; }
  .menu button .i { width: 22px; height: 22px; }
  .menu button.aktif { color: var(--vurgu-rozet); background: var(--vurgu-zemin); }
  .menu button.aktif .i { transform: none; }
  .menu button.aktif::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vurgu); }
  .menu .rozet-sayi { position: absolute; top: 4px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--yuzey); }
  .menu-alt { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; box-shadow: inset 0 1px 0 var(--cizgi); }
  .menu .mk-siteye { display: none; color: var(--y3); }
  .menu .mk-siteye .i { width: 20px; height: 20px; }
  @media (hover: hover) {
    .menu button:hover:not(.aktif), .menu .mk-siteye:hover { background: var(--yuzey2); color: var(--y1); }
  }

  /* Üst başlık satırı */
  .ust {
    left: var(--kenar); height: var(--ust-h); padding: 0 max(24px, calc((100% - var(--kenar) - var(--icerik)) / 2 - 8px));
    background: color-mix(in srgb, var(--zemin) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--cizgi);
  }
  .ust.cam { background: color-mix(in srgb, var(--zemin) 90%, transparent); }
  .ust::after { display: none; }
  .ust .baslik { font-size: 19px; font-weight: 800; padding: 0 8px; }
  .ust-marka, .ust-isaret { display: none !important; }
  .ust-genis-ek { display: flex; align-items: center; gap: 8px; margin-left: 8px; flex: none; }
  .ust-zil { position: relative; }
  .ust-zil .menu-yazi { display: none; }
  .ust-zil .rozet-sayi { position: absolute; top: 4px; right: 2px; box-shadow: 0 0 0 2px var(--zemin); }
  .ust-avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
  .ust-avatar .avatar { width: 36px; height: 36px; }
  /* Kök ekranlardaki sayfa içi marka satırı geniş ekranda başlık satırına taşınır */
  .mk-ust { display: none; }

  /* İçerik alanı */
  .sahne { left: var(--kenar); }
  .sayfa, .sayfa.menusuz, .sayfa.ustsuz, .sayfa.altbar {
    padding: calc(var(--ust-h) + 28px) max(32px, calc((100% - var(--icerik)) / 2)) 56px;
  }
  .sayfa.altbar { padding-bottom: 128px; }
  body[data-ust="yok"] .sayfa { padding-top: 40px; }
  .sayfa { scrollbar-width: thin; scrollbar-color: var(--yuzey3) transparent; }
  .alt-bar { padding: 16px max(32px, calc((100% - var(--icerik)) / 2)) 22px; background: linear-gradient(to top, var(--zemin) 70%, transparent); }
  .alt-bar .btn.tam { width: auto; flex: 1; }

  /* Alt pencere: ortada iletişim kutusu */
  .sheet {
    left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100% - 64px)); max-height: min(86vh, 900px);
    border-radius: 24px; padding: 26px 28px 28px; opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(.98); transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s;
  }
  .sheet.acik { transform: translate(-50%, -50%); opacity: 1; }
  .sheet .tutamac { display: none; }
  .toast { top: 20px; }

  /* Etkileşim: üzerine gelme ve klavye odağı */
  :focus-visible { outline: 2.5px solid var(--vurgu); outline-offset: 3px; }
  @media (hover: hover) {
    .btn.ana:hover { background: var(--vurgu-dolgu-koyu); }
    .btn.ikincil:hover { background: color-mix(in srgb, var(--vurgu-zemin) 80%, var(--vurgu) 20%); }
    .btn.hayalet:hover, .btn.cizgili:hover { background: var(--yuzey3); }
    .ikon-btn:hover { background: var(--yuzey2); }
    .kart.tik:hover, .secim:hover { box-shadow: var(--golge-2); }
    .liste-satir.tik:hover { background: var(--yuzey2); }
    .cip:hover:not(.secili) { background: var(--yuzey2); }
    .baglanti:hover { text-decoration: underline; text-underline-offset: 3px; }
  }
}

/* ═════════════ Bilgisayar (≥1024 px) ═════════════ */
@media (min-width: 1024px) {
  :root { --kenar: 240px; --icerik: 1200px; }
  body:not(.kenarli) { --kenar: 0px; }
  .menu { padding: 18px 14px 18px; }
  .menu-marka { justify-content: flex-start; padding: 6px 8px 22px; }
  .menu-marka .mk-kilit-yazi { display: flex; }
  .menu button, .menu .mk-siteye { justify-content: flex-start; padding: 0 14px; }
  .menu .menu-yazi { display: inline; }
  .menu button.aktif::before { left: -14px; }
  .menu .rozet-sayi { position: static; margin-left: auto; box-shadow: none; }
  .menu .mk-siteye { display: flex; font-size: 14px; }
}

/* ═════════════ Sayfa düzenleri (geniş ekran) ═════════════ */
/* Okuma ve form ekranları: içerik en çok 760 px, ortada (alt çubuk da aynı genişliğe hizalanır) */
@media (min-width: 1024px) {
  #sahne:is([data-rota="/coz/:id"], [data-rota="/hata-tekrar"], [data-rota="/kartlar"], [data-rota="/konusma/:id"], [data-rota="/oda/:id"], [data-rota="/duello/:id"],
    [data-rota="/soru-yaz"], [data-rota="/odev-yaz"], [data-rota="/sinif-yaz"], [data-rota="/icerik-yaz"], [data-rota="/kelime-yaz"], [data-rota="/etkinlik-yaz"], [data-rota="/toplu-ekle"],
    [data-rota="/degerlendir"], [data-rota="/degerlendir/:oturum/:soru"], [data-rota="/icerik/:id"], [data-rota="/soru/:id"], [data-rota="/bildirimler"], [data-rota="/duyurular"],
    [data-rota="/profil"], [data-rota="/sonuc/:id"], [data-rota="/ders/:anahtar"], [data-rota="/kurum-ayar"], [data-rota="/erisim-bitti"], [data-rota="/sifre-yenile"]) { --icerik: 760px; }
  #sahne[data-rota="/seviye-testi"]:has(.st-alt) { --icerik: 760px; }
}

@media (min-width: 1024px) {
  /* Giriş, ücretsiz hesap, davet kodu: solda marka ve açıklama, sağda düğmeler ya da form */
  :root .gr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 80px; row-gap: 0; align-content: center; max-width: 1080px; margin: 0 auto; min-height: 100%; }
  :root .gr > * { grid-column: 1; min-width: 0; }
  :root .gr > .gr-ust { grid-row: 1; }
  :root .gr > .gr-sahne { grid-row: 2; max-width: 520px; }
  :root .gr > .gr-baslik { grid-row: 3; }
  :root .gr > .gr-baslik .h-dev { font-size: 44px; }
  :root .gr > .gr-alt { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; padding: 32px; border-radius: var(--r-xb); background: var(--yuzey); box-shadow: var(--golge-2); }
  :root .gr > .mt-8:first-child { grid-row: 1 / span 2; align-self: center; }
  :root .gr > .mt-8:first-child .h1 { font-size: 34px; }
  :root .gr > form { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; padding: 32px; border-radius: var(--r-xb); background: var(--yuzey); box-shadow: var(--golge-2); }
  :root .gr > .gr-baglantilar { grid-column: 2; grid-row: 2; align-self: start; }

  /* Seviye testi giriş ekranı: solda başlık kartı, sağda ölçülen alanlar ve başlat */
  :root .st:has(> .st-not) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-content: start; }
  :root .st:has(> .st-not) > * { grid-column: 2; margin: 0; }
  :root .st:has(> .st-not) > .st-ust { grid-column: 1 / -1; }
  :root .st:has(> .st-not) > .kart.kahraman { grid-column: 1; grid-row: 2 / span 5; align-self: start; padding: 32px; }
  :root .st:has(> .st-not) > .kart.kahraman .h1 { font-size: 34px; }

  /* Bugün: dört kutu tek sırada */
  :root .bg-ana { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  :root .bg-ana .bg-kurs { grid-column: span 2; }

  /* Listeler: kartlar ızgarada */
  #sahne:is([data-rota="/odevler"], [data-rota="/siniflar"], [data-rota="/verilen"]) .sayfa .yigin:has(> .kart.tik) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

  /* Öğretmen paneli: iki sütun */
  :root .pn-kok > .yigin.g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
  :root .pn-kok > .yigin.g > * { margin-top: 0; min-width: 0; }
  :root .pn-kok > .yigin.g > :is(:first-child, .pn-duyuru, .pn-hero, .pn-hizli) { grid-column: 1 / -1; }

  /* Kurum ana ekranı: özet geniş, Bugün dikkat ve Bugünün dersleri yan yana */
  :root .yigin.g:has(> .kr-bas) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
  :root .yigin.g:has(> .kr-bas) > * { margin-top: 0; min-width: 0; }
  :root .yigin.g:has(> .kr-bas) > :is(.mk-ust, .kr-bas, .kr-hero) { grid-column: 1 / -1; }
  :root .yigin.g:has(> .kr-bas) > .kr-hero { order: -1; grid-row: 2; }
  :root .yigin.g:has(> .kr-bas) > .kr-bas { order: -2; grid-row: 1; }
}
@media (min-width: 1440px) {
  #sahne:is([data-rota="/odevler"], [data-rota="/siniflar"], [data-rota="/verilen"]) .sayfa .yigin:has(> .kart.tik) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* Kurum: Bugün dikkat solda (uzun), sağda Bugünün dersleri, kısa yollar ve öğretmenler alt alta; seviye dağılımı tam genişlik.
     Altıncı satır esnek: uzun sol sütunun fazlası sağdaki kartların arasına boşluk koymaz. */
  :root .yigin.g:has(> .kr-bas) { grid-template-rows: auto auto auto auto auto 1fr; }
  :root .yigin.g:has(> .kr-bas) > :nth-child(3) { grid-column: 1; grid-row: 3 / span 4; }
  :root .yigin.g:has(> .kr-bas) > :nth-child(4) { grid-column: 2; grid-row: 3; }
  :root .yigin.g:has(> .kr-bas) > :nth-child(6) { grid-column: 2; grid-row: 4; }
  :root .yigin.g:has(> .kr-bas) > :nth-child(7) { grid-column: 2; grid-row: 5; }
  :root .yigin.g:has(> .kr-bas) > :nth-child(n+8) { grid-column: 1 / -1; }
  :root .yigin.g:has(> .kr-bas) .kr-serit { margin: 0; padding: 2px 0 8px; }
}
@media (min-width: 1024px) {
  /* Kurum özeti: kart genişse sayılar ve oranlar tek sırada; dar sütuna düşerse (yeni kurumun ilk günü) alt alta */
  :root .kart.kahraman.kr-hero { container-type: inline-size; }
}
@container (min-width: 720px) {
  :root .kr-hero-ic { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: center; }
  :root .kr-hero-ic > .kr-hero-alt { margin-top: 0; }
}
@media (min-width: 1024px) {
  /* Davet kodu gibi tek bölümlü giriş ekranları: tek sütun, ortada */
  :root .gr:not(:has(> form, > .gr-alt)) { grid-template-columns: minmax(0, 560px); justify-content: center; }
}