/* =====================================================================
   DUYARLI KATMAN — TELEFON VE TABLET ORTAK KURALLARI (30 Eyl 2026)
   =====================================================================
   Kullanici karari: tablet dikeyde (601–940) alt cubuk KALIR, icerik iki
   sutunu kullanir; tablet yatay / dar masaustunde (941–1199) kenar menu
   ikon rayina iner (app.js `railUygula`). 940 kirilimi DEGISMEDI.
   Ekrana ozel telefon/tablet kurallari o ekranin kendi dosyasinda.
   ===================================================================== */

/* ---------- ekran basligi (ortak yuva, `#mBaslik`) ----------
   Telefonda `#pageTitle` cizilmiyor; kendi basligi olmayan dokuz ekranda
   (Senaryolar, Hikaye, Kelimeler, Dilbilgisi, Rozetler, Duzeltmeler,
   Ayarlar, Yonetim, Konusma) ekranin adini soyleyen hicbir sey yoktu.
   Yuva `#view`in DISINDA: modul kendi icerigini yeniden cizse de kalir.
   Ad ve cip masaustu baslik blogunun kaynagindan (`baslikBlogu`). */
.m-bas { display: none; }
@media (max-width: 940px) {
  .m-bas:not([hidden]) {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--m-yan, var(--sp-4)) 0;
  }
  /* masaustu `.tb-gun` ile ayni yuzey ve hiyerarsi, telefona bir adim kucuk */
  .m-blok:not([hidden]) {
    flex: none; display: flex; align-items: center; gap: var(--sp-3);
    height: 46px; padding: 0 var(--sp-3) 0 var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
    box-shadow: var(--shadow-1);
  }
  .m-blok > b {
    font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
    color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .m-blok > b .ic { width: 20px; height: 20px; }
  .m-blok > span {
    display: flex; flex-direction: column; gap: 1px;
    padding-left: var(--sp-3); border-left: 1px solid var(--line-zayif, var(--line));
  }
  .m-blok i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; color: var(--accent); white-space: nowrap; }
  .m-blok em { font-style: normal; font-size: var(--fs-xs); font-weight: 400; line-height: 1.2; color: var(--muted); white-space: nowrap; }
  .m-blok-tamam > b { color: var(--ok-strong); }
  .m-bas-ad {
    flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--text);
    overflow-wrap: anywhere;
  }
}
@media (max-width: 374px), (max-width: 940px) and (max-height: 700px) and (orientation: portrait) {
  .m-bas-ad { font-size: 21px; }
  .m-blok:not([hidden]) { height: 42px; }
  .m-blok > b { font-size: 19px; }
}

/* ---------- UST SERIT HER EKRANDA SABIT (30 Eyl 2026) ----------
   Kullanici: "asagi scroll yapildiginda tum bolumlerde header kismini
   sabitle". Serit telefonda ZATEN `sticky` tanimliydi ama `.main`in
   `overflow-x: hidden`i onu `.main`e bagliyordu (kaydirma kabi) ve
   serit sayfayla birlikte kayip gidiyordu — yalniz Tekrar/Istatistik
   bunu kendi icinde asmisti (belgeli tuzak). `clip` tasmayi ayni sekilde
   kirpar ama kab OLUSTURMAZ. Eski tarayici `clip`i tanimazsa `hidden`
   kalir (serit kayar, bozulma yok). Serit yuksekligi TEK token:
   `--m-ust`; altina yapisan her sey onu kullanir. */
@media (max-width: 940px) {
  :root { --m-ust: 64px; }
  .main { overflow-x: hidden; overflow-x: clip; }
  .topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--page-glass);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  }
  /* Dilbilgisi "alistirmaya don" seridi serit ALTINA yapisir */
  .gr-donus { top: calc(var(--m-ust) + var(--sp-2)); }
  .gr-bolum { scroll-margin-top: calc(var(--m-ust) + 64px); }
}
@media (max-width: 374px), (max-width: 940px) and (max-height: 700px) and (orientation: portrait) {
  :root { --m-ust: 56px; }
}

/* ---------- bolum listesi → yapiskan yatay serit ----------
   Masaustundeki sol bolum listeleri (Ayarlar · Dilbilgisi · Rozetler)
   telefonda gizliydi; uzun ekranlarda (3,2–14,7 ekran) bolumler arasi
   kisa yol yoktu. Ayni dugmeler, ayni isleyici — yalniz gorunum.
   Ust seridin ALTINA yapisir. */
@media (max-width: 940px) {
  .ay-nav, .gr-nav, .rz-nav {
    position: sticky; top: var(--m-ust, 64px); z-index: 15;
    display: flex; flex-wrap: nowrap; gap: var(--sp-2);
    margin: calc(-1 * var(--sp-2)) calc(-1 * var(--m-yan, var(--sp-4))) var(--sp-3);
    padding: var(--sp-2) var(--m-yan, var(--sp-4));
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    background: var(--page);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .ay-nav::-webkit-scrollbar, .gr-nav::-webkit-scrollbar, .rz-nav::-webkit-scrollbar { display: none; }
  .ay-nav > .gr-nav-oge, .gr-nav > .gr-nav-oge, .rz-nav > .gr-nav-oge {
    flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; padding: 0 var(--sp-3); margin: 0; width: auto;
    font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap;
    background: var(--card); border: 1px solid var(--line-kart); border-radius: var(--r-full); box-shadow: none;
  }
  .gr-nav-oge > .ic { width: 16px; height: 16px; color: var(--muted); }
  .gr-nav-oge > b { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
  .gr-nav-oge > i:not(.gr-nav-zayif) { display: none; }
  .gr-nav-oge.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .gr-nav-oge.on > .ic { color: var(--accent); }
  /* sarmalayici izgaralar telefonda tek sutun (zaten blok) — serit ustte */
  .ay-duzen, .gr-duzen, .rz-duzen { display: block; }
}

/* ---------- tablet dikey (601–940) ----------
   Telefon duzeni oldugu gibi 768'e geriliyordu: kenar dolgusu 16px,
   acilir listeler 680px. Dolgu bir adim buyur; ekranlarin iki sutunlu
   duzeni kendi dosyalarinda. */
@media (min-width: 601px) and (max-width: 940px) {
  :root { --m-yan: var(--sp-6); }
  .view { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .m-bas:not([hidden]) { padding-top: var(--sp-5); }
}

/* ---------- ray (941–1199'da varsayilan) ----------
   Sayac rozeti sekmenin SAG KENARINA baglaniyordu; rayda sekme 52px ve
   rozet ikonun ustune biniyordu ("118" ikonu kapatiyordu). Rozet artik
   ikonun sag ust kosesine baglanir. */
.layout.rail .tab .badge { right: auto; left: calc(50% + 2px); top: 2px; }

/* ---------- katli suzgec: arama + "Suzgecler" TEK SATIR ----------
   Telefon suzgeci (`mobilSuzgec`) dugmeyi aramanin ALTINA ayri satir
   olarak koyuyordu: kapaliyken bile 100px. Kapaliyken ikisi yan yana;
   acilinca acilir listeler alta sarilir. Senaryolar ve Kelimeler ortak. */
@media (max-width: 940px) {
  .filters.suz-katli.suz-kapali { flex-wrap: nowrap; align-items: stretch; }
  .filters.suz-katli > input[type=text], .filters.suz-katli > input[type=search] { flex: 1 1 auto; min-width: 0; }
  .filters.suz-katli.suz-kapali > .suz-ac { flex: none; align-self: stretch; }
}

/* =====================================================================
   TELEFON UST SERIDI — "A · marka + durum kapsulu" (30 Eyl 2026)
   =====================================================================
   Kullanici: "cok sade ve anlasilir durmuyor, premium degil". Eski
   serit: yalniz logo glifi · ortada yuzen "1" hapi · harfi kaybolan
   avatar (sistem temasinda harf #1b1442, bakir zeminde okunmuyordu).
   Uc secenek onizlendi, A secildi: solda bakir karo + "NevaTeach",
   sagda seri ("1 gün") ve avatar TEK kapsulde. */
.tb-marka-ad, .tb-durum-ayrac { display: none; }
.tb-marka-bag { display: contents; color: inherit; text-decoration: none; }
.tb-durum { display: contents; }
@media (max-width: 940px) {
  .topbar {
    height: var(--m-ust, 64px); min-height: var(--m-ust, 64px); padding: 0 var(--m-yan, var(--sp-4));
    border-bottom: 1px solid var(--line-kart);
  }
  /* Logo bagi: glif + ad tek dokunma hedefi (44px), Ogren'e goturur */
  .tb-marka-bag {
    display: flex; align-items: center; gap: 10px; flex: none;
    min-height: 44px; border-radius: var(--r-md);
  }
  .tb-marka {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--accent); color: var(--ink-ters-sabit, #FFF7EF);
  }
  .tb-marka svg { width: 20px; height: 20px; }
  .tb-marka-ad {
    display: block; flex: none;
    font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
  }
  .tb-durum {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-left: auto; padding: 3px 3px 3px var(--sp-3);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-full);
    box-shadow: var(--shadow-1);
  }
  .tb-durum-ayrac { display: block; width: 1px; height: 20px; background: var(--line); }
  .tb-durum > .tb-seri {
    position: relative; left: auto; top: auto; transform: none;
    height: 36px; padding: 0 var(--sp-1); gap: 5px;
    background: none; border: 0; border-radius: var(--r-full);
    font-size: var(--fs-kontrol); color: var(--muted);
  }
  .tb-durum > .tb-seri b { font-size: var(--fs-md); }
  .tb-durum > .tb-seri span { font-size: var(--fs-sm); }
  /* dokunma alani 44px (belgeli ::after deseni) */
  .tb-durum > .tb-seri::after { top: -4px; bottom: -4px; left: -8px; right: -4px; }
  .topbar .tb-durum > .tb-avatar {
    margin: 0; width: 36px; height: 36px; flex: 0 0 36px;
    font-size: var(--fs-kontrol); box-shadow: none;
    /* HARF IKI TEMADA DA OKUNUR: acikta krem, koyuda gece laciverti.
       `--ink-ters` bu ikisini zaten tasiyor (KOYU TEMA kurali). */
    color: var(--ink-ters);
  }
  .topbar .tb-durum > .tb-avatar::after { inset: -4px; }
}
/* S bandi (dar ya da kisa telefon): serit 56px — 320x568'de Bugun zaten
   648px'ti, 64px serit bir 12px daha ekliyordu. */
@media (max-width: 374px), (max-width: 940px) and (max-height: 700px) and (orientation: portrait) {
  .tb-marka { width: 30px; height: 30px; border-radius: 9px; }
  .tb-marka svg { width: 18px; height: 18px; }
  .tb-durum > .tb-seri { height: 32px; }
  .topbar .tb-durum > .tb-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .topbar .tb-durum > .tb-avatar::after { inset: -6px; }
}
@media (max-width: 374px) {
  .tb-marka-ad { font-size: 16px; }
  .tb-durum > .tb-seri span { display: none; }
}

/* Ogrenciler: eski duz baslik satiri — yerini ortak yuva (#mBaslik) aldi */
@media (max-width: 940px) {
  #view > .og-ekran-bas { display: none; }
}
/* Rayda sekme listesi icerigini 1px (59/60) tasiyordu: kalici kaydirma
   cubugu gosteren sistemlerde (Windows) Yonetim sekmesinin altinda yatay
   bir cubuk cikiyordu. Dikey kaydirma (cok sekme, kisa ekran) kalir. */
.layout.rail .tabs { overflow-x: hidden; }