/* =====================================================================
   İLERLEME EKRANI — TELEFON DÜZENİ · "Fildişi / Mürekkep vitrin" ailesi
   Kardeş katman; yükleme sırası:
   style.css → telefon-bugun.css → telefon-kesfet.css → telefon-ilerleme.css
   (.ks-etiket, .mk-satir, kimlik madalyonları telefon-kesfet.css'ten;
   .goal-bar style.css'ten miras alınır.) TAMAMI genişlik bloğunda; bu
   rota masaüstünde yok.

   Gereken yama (2 nokta):
     1) mobil.js · ilerlemeHtml() yeni işaretlemeyle değişir — örnek:
        demo/js/demo.js (ilerlemeHtml / ilSay / ilGunHtml). Gün harfleri
        GÜN ANAHTARINDAN türetilir (new Date() DEĞİL — ikisi ayrışırsa
        şerit gece yarısı kayar). Rozet yüzdesi AŞAĞI yuvarlanır ve
        kazanılana dek 99'da kapaklanır.
     2) index.html · telefon-kesfet.css'ten SONRA bu dosyanın bağı.

   ÜÇ SAYI BİRLEŞTİRİLMEZ: çalışılan = yolda + öğrenilmiş ekranda düz bir
   DENKLEM olarak durur; renk kavram başına ilerleme dilinden gelir
   (--ilerleme-yeni / --ilerleme-yolda / --ilerleme-ogren — üç blokta
   zaten tanımlı). KIRMIZI YOK: kırılan seri hata değildir.
   YENİ RENK YOK. Gradyan yok. Tek büyük sayı yok — bu ekran özet okur.
   ===================================================================== */

@media (max-width: 940px) {

  /* ------------------------------------------------------------------
     1 · SEVİYE VİTRİNİ — bant kodu büyük, yanında adı; altında düz
     --accent dolgulu yol çubuğu (style.css .goal-bar) ve tek satır
     açıklama; hairline'ın altında denklem.
     ------------------------------------------------------------------ */
  .il-band-satir { display: flex; align-items: baseline; gap: var(--sp-3); }
  .il-band {
    font-size: var(--fs-3xl); font-weight: 800;
    letter-spacing: -1px; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .il-band-ad { font-size: var(--fs-base); font-weight: 700; color: var(--muted); }
  .il-vitrin .goal-bar { margin-top: var(--sp-4); }
  .il-yol-alt {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm); font-weight: 600; color: var(--faint);
  }
  .il-yol-alt b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }

  .il-denklem-kap {
    margin-top: var(--sp-4); padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
  }
  .il-denklem {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2);
  }
  .il-say { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
  .il-say-ust { display: flex; align-items: center; gap: var(--sp-2); }
  .il-say-ust .ic { width: var(--sp-4); height: var(--sp-4); flex: 0 0 auto; }
  .il-say-ust b {
    font-size: var(--fs-xl); font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .il-say > i {
    font-style: normal; font-size: var(--fs-xs); font-weight: 700;
    color: var(--faint); letter-spacing: 0.3px;
  }
  .il-op {
    font-size: var(--fs-lg); font-weight: 800; color: var(--line-strong);
    flex: 0 0 auto;
  }
  /* Kavram renkleri — YALNIZ ikonda (Keşfet'teki kimlik kuralının aynısı). */
  .il-yeni  .ic { color: var(--ilerleme-yeni); }
  .il-yolda .ic { color: var(--ilerleme-yolda); }
  .il-ogren .ic { color: var(--ilerleme-ogren); }
  .il-not {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
    line-height: var(--lh-normal);
  }

  /* Sıfır ilerleme: sayı yerine kavramların ne anlama geleceği. */
  .il-aciklama { display: flex; flex-direction: column; gap: var(--sp-3); }
  .il-acik-satir { display: flex; gap: var(--sp-3); align-items: flex-start; }
  .il-acik-satir > .ic { width: var(--sp-4); height: var(--sp-4); flex: 0 0 auto; margin-top: 2px; }
  .il-acik-satir b { font-size: var(--fs-base); font-weight: 800; display: block; }
  .il-acik-satir i {
    font-style: normal; display: block;
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    line-height: var(--lh-normal);
  }

  /* ------------------------------------------------------------------
     2 · SERİ — sayı + en uzun + son 7 gün şeridi. Kırılan seri sakin
     tek satır; asla kırmızı, asla "kaçırdın".
     ------------------------------------------------------------------ */
  .il-seri { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
  .il-seri-ic {
    width: var(--icon-box); height: var(--icon-box); flex: 0 0 auto;
    border-radius: var(--r-full);
    background: var(--warn-soft);
    color: var(--warn-ink, var(--warn));
    display: inline-flex; align-items: center; justify-content: center;
  }
  .il-seri-ic .ic { width: var(--sp-5); height: var(--sp-5); }
  .il-seri-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
  .il-seri-tx b { font-size: var(--fs-md); font-weight: 800; }
  .il-seri-tx i { font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
  .il-hafta { display: flex; gap: var(--sp-1); flex: 0 0 auto; margin-left: auto; }
  .il-gun { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
  .il-gun > i {
    width: 24px; height: 24px;
    border-radius: var(--r-full);
    background: var(--card2);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-ters);
  }
  .il-gun > i .ic { width: var(--sp-3); height: var(--sp-3); }
  .il-gun > i.il-gun-ok { background: var(--ok); border-color: var(--ok); }
  .il-bugun > i { box-shadow: 0 0 0 2px var(--accent-ring); }
  .il-gun > b {
    font-size: var(--fs-xs); font-weight: 700; color: var(--faint);
    letter-spacing: 0.2px;
  }
  /* Dar telefonda (≤360) şerit alt satıra tam genişlik iner — hiçbir şey
     küçülmez, yalnız sarar. */
  @supports (width: 1px) {
    .il-hafta { min-width: 0; }
  }
  .il-kirik {
    flex: 1 1 100%;
    margin-top: var(--sp-1); padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
    line-height: var(--lh-normal);
    display: block;
  }
  .il-kirik .ic {
    width: var(--sp-4); height: var(--sp-4);
    vertical-align: -3px; color: var(--faint); margin-right: var(--sp-1);
  }

  /* ------------------------------------------------------------------
     3 · SIRADAKİ ROZET — ad, tek satır koşul, çubuk, "122 / 150".
     Yüzde AŞAĞI yuvarlanır, kazanılana dek 99'da kapaklanır (JS).
     ------------------------------------------------------------------ */
  .il-rozet-bas { display: flex; align-items: baseline; gap: var(--sp-3); }
  .il-rozet-bas b { font-size: var(--fs-md); font-weight: 800; flex: 1 1 auto; min-width: 0; }
  .il-rozet-say {
    font-size: var(--fs-sm); font-weight: 700; color: var(--faint);
    font-variant-numeric: tabular-nums; flex: 0 0 auto;
  }
  .il-rozet-i {
    font-style: normal; display: block; margin-top: var(--sp-1);
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  }
  .il-rozet .goal-bar { margin-top: var(--sp-3); }
}

/* Koyu tema = "Mürekkep vitrin": seviye kartı sahnenin vitrini — üst
   kenar ışığı. Token dışı değer yok. Sorgular birleşik: yine ≤940px. */
@media (max-width: 940px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .il-vitrin {
    box-shadow: var(--shadow-card), var(--kenar-isik);
  }
}
@media (max-width: 940px) {
  :root[data-theme="dark"] .il-vitrin {
    box-shadow: var(--shadow-card), var(--kenar-isik);
  }

  /* ODAK HALKASI — dosyanın SONUNDA ve :where() OLMADAN. Bu ekranın
     etkileşimli öğeleri ayrıntı satırları (.mk-satir, kurallar
     telefon-kesfet.css'te) — halka burada da güvenceye alınır. */
  .mk-satir:focus-visible {
    outline: none;
    box-shadow: var(--odak);
    border-color: var(--accent);
  }
}