/* =====================================================================
   ÇALIŞ (Bugün) EKRANI — TELEFON DÜZENİ · "Fildişi" (1a) uyarlaması
   style.css'ten SONRA yüklenir (aynı özgüllükte kurallar kaynak sırasıyla
   kazanır). TAMAMI genişlik bloğunda: masaüstü (941px+) bu dosyadan
   TEK KURAL bile almaz — 1440×900 bit-bit aynı kalır.

   Gereken işaretleme yaması (4 küçük ek; üçü `hidden` öznitelikli —
   masaüstünde tarayıcı varsayılanı gizler, masaüstü CSS'ine dokunulmaz):
     1) index.html · .topbar içine, .page-head'den sonra:
          <button type="button" class="tb-avatar" id="tbAvatar" hidden
                  title="Profil" aria-label="Profil">M</button>
     2) index.html · .page-head içine, h1'den ÖNCE:
          <div class="tb-tarih" hidden>18 Ağustos Salı</div>
        (JS gün adını yazar; masaüstünde görünmez)
     3) views.js · hero, .hero-note'tan sonra:
          <div class="hero-ozet" hidden>5 cümle · ~15 dakika</div>
     4) views.js · hero kartının sınıfına day.lessonDone iken ` hero-bitti`
        eklenir (masaüstünde sınıf kullanılmıyor, görünüm değişmez).

   YENİ RENK YOK — her değer mevcut token'dan ya da style.css'te zaten
   tanımlı değişmezlerden. color-mix kullanılan iki yerde önce düz rgba
   yedeği duruyor (Chrome <111). Gölge yalnız token: --shadow-card /
   --shadow-pop. Gradyan yok; tek istisna kaydırma maskeleri (mask-image).
   ===================================================================== */

@media (max-width: 940px) {

  /* ------------------------------------------------------------------
     1 · UYGULAMA ÇUBUĞU — tek çubuk: tarih üstte küçük, başlık altında,
     sağda avatar; ikinci satır hairline'lı EDİTORYAL istatistik bandı
     (hap görünümü yerine sessiz sayılar — 1a). Marka şeridi gizli:
     marka alt yuvada ve uygulama simgesinde zaten var.
     ------------------------------------------------------------------ */
  .sidebar { display: none; }

  .topbar {
    padding: var(--sp-3) var(--sp-4) 0;
    gap: var(--sp-2) var(--sp-3);
    align-items: center;
  }
  .page-head { flex: 1 1 auto; min-width: 0; }
  .page-sub { display: none; }

  /* Tarih satırı — başlığın ÜSTÜNDE, harf aralıklı küçük etiket. */
  .tb-tarih {
    display: block;
    font-size: var(--fs-xs); font-weight: 800;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--faint);
    margin-bottom: var(--sp-1);
  }

  /* Avatar 34px görünür + çift halka; ::after ile 44px dokunma alanı. */
  .tb-avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    padding: 0; border: none; border-radius: var(--r-full);
    background: var(--accent);
    color: var(--ink-ters);
    font-family: inherit; font-size: var(--fs-base); font-weight: 800;
    line-height: 1; cursor: pointer;
    box-shadow: 0 0 0 2px var(--page), 0 0 0 3px var(--line-strong);
    transition: transform var(--mo-hizli) var(--mo-cikis),
                box-shadow var(--mo-hizli) var(--mo-cikis);
  }
  .tb-avatar::after {
    content: ''; position: absolute; inset: -5px;
    border-radius: var(--r-full);
  }
  .tb-avatar:active { transform: scale(.94); }

  /* İstatistik bandı: hap yüzeyi kalkar, sayı + BÜYÜK HARF etiket kalır;
     aralarında hairline. Kaydırma + sağ kenar maskesi style.css'ten
     geliyor. Seri ve "bugün" ilk ekranın işi değil. */
  .top-stats {
    order: 3;
    gap: 0;
    border-top: 1px solid var(--line);
    padding: var(--sp-3) 0;
  }
  .top-stats [data-pill="seri"],
  .top-stats [data-pill="bugun"] { display: none; }
  .top-stats .stat-pill {
    background: none; border: none; box-shadow: none;
    border-radius: 0;
    height: auto; min-height: 0;
    padding: 0 var(--sp-4);
    border-left: 1px solid var(--line);
  }
  .top-stats .stat-pill:first-child { border-left: none; padding-left: var(--sp-1); }
  .top-stats .stat-pill:hover { transform: none; border-color: var(--line); }
  .top-stats .stat-pill .sp-ic { display: none; }
  .top-stats .stat-pill .sp-tx b { font-size: var(--fs-md); }

  /* ------------------------------------------------------------------
     2 · HERO — ekranın tek sorusu: ŞİMDİ NE YAPACAĞIM.
     Kart spec geometrisinde (--card, --r-lg, --shadow-card, --sp-4);
     1a'nın dili: ortam hapı sağa yaslı, sayı satırı, 10 segment,
     tek satır özet, madalyonlu birincil düğme.
     ------------------------------------------------------------------ */
  .hero-level { display: none; }

  .hero-ust { margin-bottom: var(--sp-3); }
  .hero-ust .scene-chip { margin-left: auto; }

  .hero-sayac .hs-bolu {
    font-size: var(--fs-xl); font-weight: 700; color: var(--faint);
  }
  .hero-sayac .hs-birim {
    font-size: var(--fs-base); color: var(--muted); font-weight: 600;
  }

  /* ADIM ŞERİDİ — 10 sayılabilir segment, oran çubuğu değil. */
  .hero-adim { margin: var(--sp-3) 0 var(--sp-3); flex-wrap: nowrap; gap: var(--sp-1); }
  .hero-adim > i {
    flex: 1 1 0; min-width: 0; max-width: none;
    height: var(--sp-1);
    border-radius: var(--r-full);
    background: var(--line);
    box-shadow: none;
  }
  .hero-adim > i.dolu { background: var(--accent); }

  /* Dört satırlık paragraf gizli; tek satır özet açık (yama 3). */
  .hero-note { display: none; }
  .hero-ozet {
    display: block;
    font-size: var(--fs-sm); font-weight: 600;
    color: var(--faint);
  }

  /* Eylem sütunu: birincil tam genişlik 52px, ikincil ikili 42px. */
  .hero .act {
    flex-direction: column; align-items: stretch;
    gap: var(--sp-3); margin-top: var(--sp-4);
  }
  .hero .act-main { width: 100%; }
  .hero .act-main .btn-lg {
    flex: 1 1 auto; width: 100%;
    font-size: var(--fs-base);
  }
  /* Play ikonu madalyonda (1a) — ek öğe yok, mevcut .ic giydirilir. */
  .hero .act-main .btn-lg .ic {
    width: 28px; height: 28px; flex: 0 0 28px;
    padding: 7px; box-sizing: border-box;
    border-radius: var(--r-full);
    background: rgba(251, 252, 254, 0.16);              /* yedek: --ink-ters %16 */
    background: color-mix(in srgb, var(--ink-ters) 16%, transparent);
  }
  .hero .act-more {
    width: 100%; margin: 0;
    flex-wrap: nowrap; gap: var(--sp-2);
  }
  .hero .act-more > .btn {
    flex: 1 1 0; min-width: 0;
    height: var(--ctrl-h); min-height: var(--ctrl-h);
    padding: 0 var(--sp-3);
  }

  /* Ders bittiyse düğme yok — yeşil tonlu rozet tek başına, tam genişlik. */
  .hero-bitti .act-main .btn-lg { display: none; }
  .hero-bitti .act-main .durum-hap {
    flex: 1 1 auto; justify-content: center;
  }

  /* ------------------------------------------------------------------
     3 · BECERİ ŞERİDİ — 42px tam yuvarlak çipler, --card zemin,
     --btn-line çerçeve. Çekirdek ikili: --accent çerçeve + madalyonlu
     ikon. Yapıldı işareti yalnız --ok renginde sade ✓.
     ------------------------------------------------------------------ */
  .tur-serit > .btn {
    height: var(--ctrl-h); min-height: var(--ctrl-h);
    padding: 0 var(--sp-4);
    border-radius: var(--r-full);
    background: var(--card);
    border-color: var(--btn-line);
  }
  .tur-serit > .ts-cekirdek,
  .tur-serit > .ts-gorev,
  .tur-serit > .ts-cekirdek.ts-ok,
  .tur-serit > .ts-gorev.ts-ok {
    background: var(--card);
    border-color: var(--accent);
    --edge: var(--line-strong);
    padding-left: var(--sp-2);
  }
  .tur-serit > .ts-cekirdek .ic,
  .tur-serit > .ts-gorev .ic {
    width: 28px; height: 28px; flex: 0 0 28px;
    padding: 7px; box-sizing: border-box;
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--accent);
  }
  .tur-serit .ts-onay {
    width: auto; height: auto;
    margin-left: var(--sp-1);
    background: none;
    color: var(--ok);
  }
  .tur-serit .ts-onay .ic {
    width: var(--sp-4); height: var(--sp-4);
    padding: 0; background: none;
  }

  /* ------------------------------------------------------------------
     4 · BÖLÜM BAŞLIKLARI — kart başlığı editoryal etikete döner:
     küçük, BÜYÜK HARF, harf aralıklı; renkli ikon kutusu kalkar (1a).
     ------------------------------------------------------------------ */
  .view .card h2 {
    font-size: var(--fs-xs); font-weight: 800;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--faint);
  }
  .view .card h2 > .ic { display: none; }
  .view .card h2 .u-count { font-size: var(--fs-xs); }

  /* ------------------------------------------------------------------
     5 · GÜNÜN PLANI — dolgulu satırlar yerine hairline'lı zaman çizgisi:
     halka numaralar, sıradaki adım vurgulu, bitmiş adım yeşil dolu.
     ------------------------------------------------------------------ */
  .plan-list { gap: 0; }
  .plan-list li {
    background: none;
    border-radius: 0;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .plan-list li:last-child { border-bottom: none; }
  li.plan-done { background: none; }
  .plan-list li:first-child:not(.plan-done) .plan-check {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ------------------------------------------------------------------
     6 · BUGÜNÜN KELİMELERİ — ızgara yerine yatay kaydırmalı kart rayı
     (snap'li); açıklama paragrafı telefonda gizli. Sağ kenar maskesi
     kaydırılabildiğini söyler.
     ------------------------------------------------------------------ */
  .card.sessiz > .sub { display: none; }
  .word-grid.wg-alt {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .word-grid.wg-alt::-webkit-scrollbar { display: none; }
  .word-grid.wg-alt > * {
    flex: 0 0 150px;
    scroll-snap-align: start;
  }
  .word-grid.wg-alt .word-card { border-radius: var(--r-lg); }

  /* ------------------------------------------------------------------
     7 · YÜZEN GEZİNME YUVASI — alt çubuk kenardan kenara şerit yerine
     kenarlardan çekilmiş, tam yuvarlak köşeli cam yuva (1a). Zemin yine
     --page-glass + blur; kayan katman gölgesi --shadow-pop.
     ------------------------------------------------------------------ */
  .mobil-nav {
    left: var(--sp-4); right: var(--sp-4);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-pop);
    padding: var(--sp-1) var(--sp-2);
  }
  .mobil-nav .nav-item {
    min-height: 54px;
    border-radius: var(--r-md);
  }
  .mobil-nav .nav-item.on { background: var(--accent-soft); }

  /* Yuva yüzer olunca içerik ve toast payları ona göre. */
  .app-foot {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px) + var(--sp-4));
  }
  .toast {
    bottom: calc(var(--sp-4) + 70px + env(safe-area-inset-bottom, 0px));
  }

  /* ------------------------------------------------------------------
     8 · DURUMLAR — yükleniyor + hata (kalan beşi style.css'te var).
     ------------------------------------------------------------------ */
  .btn.yukluyor { pointer-events: none; color: transparent; position: relative; }
  .btn.yukluyor .ic { visibility: hidden; }
  .btn.yukluyor::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: var(--sp-5); height: var(--sp-5);
    margin: -10px 0 0 -10px;
    border-radius: var(--r-full);
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    /* Dönüş linear: --mo-cikis bir GEÇİŞ eğrisidir, sürekli dönen
       göstergede teklemeye dönüşür. */
    animation: tb-donme 700ms linear infinite;
  }
  .btn-primary.yukluyor::after {
    border-color: rgba(251, 252, 254, 0.35);            /* --ink-ters %35 */
    border-top-color: var(--ink-ters);
  }
  @keyframes tb-donme { to { transform: rotate(360deg); } }

  /* HATA: yalnız gerçek başarısızlık (ağ/sunucu) — kırmızı ilerleme
     dilinin parçası değildir. Sarsıntı .mo-yanlis ile JS'ten gelir. */
  .btn.hata {
    border-color: var(--bad);
    color: var(--bad);
    background: var(--bad-soft);
    --edge: var(--bad-strong);
  }
}

/* Koyu temada dolu birincil düğmenin mürekkebi koyudur (style.css: #1b1442)
   — madalyon ve gösterge aynı mürekkeple. Değerler style.css'te zaten
   tanımlı değişmezler; yeni renk değildir. Sorgular birleşik: ≤940px. */
/* Koyu tema = "Mürekkep vitrin" (1b): hero sahneyi kurar — kartın üst
kenarında ince ışık (--kenar-isik), birincil düğme KEMİK renginde
(--ink-ters zemin + style.css'in koyu mürekkebi #1b1442), çekirdek çipler
dolgulu. Segment dolgusu kendiliğinden açık indigoya döner (koyu temada
--accent = #a5b4fc). Değerler style.css'te zaten tanımlı değişmezler;
yeni renk değildir. Sorgular birleşik: ≤40px değil, ≤940px. */
@media (max-width: 940px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    box-shadow: var(--shadow-card), var(--kenar-isik);
  }
  :root:not([data-theme="light"]) .hero .act-main .btn-lg {
    background: var(--ink-ters);
    border-color: var(--ink-ters);
  }
  :root:not([data-theme="light"]) .tur-serit > .ts-cekirdek,
  :root:not([data-theme="light"]) .tur-serit > .ts-gorev,
  :root:not([data-theme="light"]) .tur-serit > .ts-cekirdek.ts-ok,
  :root:not([data-theme="light"]) .tur-serit > .ts-gorev.ts-ok {
    background: var(--accent-soft);
  }
  :root:not([data-theme="light"]) .hero .act-main .btn-lg .ic {
    background: rgba(27, 20, 66, 0.14);
    background: color-mix(in srgb, #1b1442 14%, transparent);
  }
  :root:not([data-theme="light"]) .btn-primary.yukluyor::after {
    border-color: rgba(27, 20, 66, 0.28);
    border-top-color: #1b1442;
  }
  :root:not([data-theme="light"]) .tb-avatar { color: #1b1442; }
}
@media (max-width: 940px) {
  :root[data-theme="dark"] .hero {
    box-shadow: var(--shadow-card), var(--kenar-isik);
  }
  :root[data-theme="dark"] .hero .act-main .btn-lg {
    background: var(--ink-ters);
    border-color: var(--ink-ters);
  }
  :root[data-theme="dark"] .tur-serit > .ts-cekirdek,
  :root[data-theme="dark"] .tur-serit > .ts-gorev,
  :root[data-theme="dark"] .tur-serit > .ts-cekirdek.ts-ok,
  :root[data-theme="dark"] .tur-serit > .ts-gorev.ts-ok {
    background: var(--accent-soft);
  }
  :root[data-theme="dark"] .hero .act-main .btn-lg .ic {
    background: rgba(27, 20, 66, 0.14);
    background: color-mix(in srgb, #1b1442 14%, transparent);
  }
  :root[data-theme="dark"] .btn-primary.yukluyor::after {
    border-color: rgba(27, 20, 66, 0.28);
    border-top-color: #1b1442;
  }
  :root[data-theme="dark"] .tb-avatar { color: #1b1442; }

  /* ODAK HALKASI — dosyanın SONUNDA ve :where() OLMADAN (bu blokta
     eklenen/yeniden giydirilen kontroller için; sıfır özgüllük verilirse
     yukarıdaki zemin kuralları halkayı ezer). */
  .tb-avatar:focus-visible,
  .tur-serit > .btn:focus-visible,
  .hero .act .btn:focus-visible,
  .mobil-nav .nav-item:focus-visible {
    outline: none;
    box-shadow: var(--odak);
    border-color: var(--accent);
  }
}