/* =====================================================================
   İLERLEME — TELEFON            kaynak: Ilerleme Premium.dc.html (1a)
   ---------------------------------------------------------------------
   Guncel standart (telefon-tekrar.css ailesi): ekranin TEK vitrini
   lacivert yuzey (--yan-bg2, ustte bakir sac cizgisi), gerisi kagit
   kart. Geist 500/600, gosteri sayisi 44/500, kas etiketleri
   --fs-xs/600/--ls-kas. Yukleme sirasi: style.css → telefon-bugun.css →
   telefon-kesfet.css → telefon-ilerleme.css. TAMAMI ≤940px; bu rota
   masaustunde yok.

   Isaretleme `mobil.js · ilerlemeHtml()` icinde; gun harfleri GUN
   ANAHTARINDAN turer, rozet yuzdesi ASAGI yuvarlanir ve 99'da kapaklanir.

   OLCUM DILI DEGISMEDI: uc sayi birlestirilmez (calisilan = yolda +
   ogrenilmis denklem olarak durur); kirmizi yok; kirilan seri sakin.

   VITRIN RENKLERI: vitrin HER TEMADA lacivert — icindeki kavram
   renkleri temaya gore degisemez; bu yuzden koyu setin --ilerleme-*
   DEGISMEZLERI (#8FB0CE / #DBA277 / #7FB093, style.css'te tanimli)
   vitrin kapsaminda yerel degiskene alinir. Yeni renk DEGILDIR —
   tekrar ekranindaki --yan-* pratiginin aynisi.
   ===================================================================== */

@media (max-width: 940px) {

  /* ---------------- LACIVERT VITRIN: SEVIYE + DENKLEM ---------------- */
  .il-vitrin {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px 14px 14px;
    background: var(--yan-bg2); border: 0; border-radius: 22px;
    box-shadow: var(--shadow-card);
    /* koyu setin degismezleri — vitrin her temada lacivert */
    --v-yeni: #8FB0CE; --v-yolda: #DBA277; --v-ogren: #7FB093;
  }
  .il-vitrin::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: var(--yan-cizgi);
  }

  .il-kas-satir { display: flex; align-items: baseline; gap: var(--sp-2); }
  .il-kas {
    font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: var(--ls-kas); text-transform: uppercase;
    line-height: normal;
  }
  .il-vitrin .il-kas { color: var(--yan-vurgu-2); }
  .il-sag {
    margin-left: auto; font-size: var(--fs-xs);
    color: var(--yan-metin-zayif); font-variant-numeric: tabular-nums;
  }

  .il-band-satir { display: flex; align-items: center; gap: 11px; }
  .il-band {
    flex: none;
    font-size: var(--fs-4xl); font-weight: 500; line-height: .95;
    letter-spacing: -.03em; color: var(--yan-metin);
    font-variant-numeric: tabular-nums;
  }
  .il-band-tx {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
  }
  .il-band-tx i {
    font-style: normal; font-size: 14.5px; font-weight: 500;
    color: var(--yan-metin); line-height: normal;
  }
  .il-band-tx em {
    font-style: normal; font-size: var(--fs-sm); line-height: 1.4;
    color: var(--yan-metin-orta);
  }
  .il-band-tx em b { font-weight: 600; color: var(--yan-metin); }

  /* Yol cubugu: duz bakir dolgu, kanal --yan-kanal. Oran cubugu BU —
     denklemdeki sayilarla karismasin diye vitrinde tek cubuk var. */
  .il-yol {
    display: flex; height: 5px; border-radius: 3px;
    background: var(--yan-kanal); overflow: hidden;
  }
  .il-yol > span { display: block; border-radius: 3px; background: var(--yan-vurgu); }

  .il-ayrac { height: 1px; background: var(--yan-kanal); }

  .il-denklem {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2);
  }
  .il-say { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .il-say-ust { display: flex; align-items: center; gap: 7px; }
  .il-say-ust .ic { width: 15px; height: 15px; flex: none; }
  .il-say-ust b {
    font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.02em;
    line-height: 1; color: var(--yan-metin);
    font-variant-numeric: tabular-nums;
  }
  .il-say > i {
    font-style: normal; font-size: var(--fs-xs); font-weight: 600;
    color: var(--yan-metin-zayif); line-height: normal;
  }
  .il-op {
    flex: none; font-size: var(--fs-lg); font-weight: 500;
    color: var(--yan-ink-kas);
  }
  .il-yeni  .ic { color: var(--v-yeni); }
  .il-yolda .ic { color: var(--v-yolda); }
  .il-ogren .ic { color: var(--v-ogren); }
  .il-not {
    margin: 0; font-size: 11.5px; line-height: 1.5;
    color: var(--yan-metin-zayif);
  }

  /* Sifir hesap: sayi yerine kavramlarin ne anlama gelecegi. */
  .il-aciklama { display: flex; flex-direction: column; gap: var(--sp-3); }
  .il-acik-satir { display: flex; gap: 9px; align-items: flex-start; }
  .il-acik-satir > .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
  .il-acik-satir b {
    display: block; font-size: var(--fs-base); font-weight: 500;
    color: var(--yan-metin);
  }
  .il-acik-satir i {
    font-style: normal; display: block;
    font-size: var(--fs-sm); line-height: 1.5;
    color: var(--yan-metin-orta);
  }

  /* ---------------- KAGIT KARTLAR ---------------- */
  .il-kagit, .il-seri, .il-rozet, .il-detay {
    display: flex; flex-direction: column; gap: 9px;
    padding: 12px;
    background: var(--card); border: 1px solid var(--line-kart);
    border-radius: 18px; box-shadow: var(--shadow-card);
  }
  .il-rozet .il-kas, .il-detay .il-kas { color: var(--accent); }

  /* ---- seri: madalyon + metin + 7 gun seridi ---- */
  .il-seri { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .il-seri-ic {
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 9px;
    background: var(--warn-soft); color: var(--warn-ink, var(--warn));
  }
  .il-seri-ic .ic { width: 13px; height: 13px; }
  .il-seri-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .il-seri-tx b { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
  .il-seri-tx i {
    font-style: normal; font-size: var(--fs-sm); color: var(--faint);
    line-height: normal;
  }
  .il-hafta { display: flex; gap: 4px; flex: none; margin-left: auto; }
  .il-gun { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .il-gun > i {
    display: grid; place-items: center; box-sizing: border-box;
    width: 22px; height: 22px; border-radius: var(--r-full);
    background: var(--card2); border: 1px solid var(--line-zayif);
    color: var(--card);
  }
  .il-gun > i .ic { width: 11px; height: 11px; }
  .il-gun > i.il-gun-ok {
    background: var(--ilerleme-ogren); border-color: var(--ilerleme-ogren);
  }
  .il-bugun > i { box-shadow: 0 0 0 2px var(--accent-ring); }
  .il-bugun > b { color: var(--text); }
  .il-gun > b {
    font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
    line-height: normal;
  }

  /* Kirilan seri: sakin tek satir — kirmizi YOK, "kacirdin" YOK. */
  .il-kirik {
    flex: 1 1 100%;
    margin: 0; padding-top: 9px;
    border-top: 1px solid var(--line-zayif);
    font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  }
  .il-kirik b { font-weight: 600; color: var(--text); }

  /* ---- siradaki rozet ---- */
  .il-rozet-say {
    margin-left: auto; font-size: var(--fs-sm); color: var(--faint);
    font-variant-numeric: tabular-nums;
  }
  .il-rozet-say b { font-weight: 600; color: var(--accent); }
  .il-rozet-ad { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
  .il-rozet-i {
    font-style: normal; margin-top: -7px;
    font-size: var(--fs-sm); color: var(--faint);
  }
  .il-cubuk {
    display: flex; height: 6px; border-radius: 3px;
    background: var(--line-zayif); overflow: hidden;
  }
  .il-cubuk > span { display: block; border-radius: 3px; background: var(--accent); }

  /* ---- ayrinti satirlari (tek kart, hairline ayracli) ---- */
  .il-detay { padding: 4px 12px; gap: 0; }
  .il-satir {
    display: flex; align-items: center; gap: 9px;
    min-height: 46px;
    background: transparent; border: 0; padding: 0;
    font-family: inherit; text-align: left; cursor: pointer;
    transition: color var(--mo-hizli) var(--mo-cikis);
  }
  .il-satir + .il-satir { border-top: 1px solid var(--line-zayif); }
  .il-s-ic {
    flex: none; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 9px;
    background: var(--bant-bg, var(--card2)); color: currentColor;
  }
  .il-s-ic .ic { width: 13px; height: 13px; }
  .il-s-mavi  { color: var(--ilerleme-yeni);  --bant-bg: var(--tint-blue, var(--card2)); }
  .il-s-amber { color: var(--warn-ink, var(--warn)); --bant-bg: var(--warn-soft); }
  .il-s-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .il-s-tx b {
    font-size: var(--fs-base); font-weight: 500; color: var(--text);
    line-height: normal;
  }
  .il-s-tx i {
    font-style: normal; font-size: var(--fs-sm); color: var(--faint);
    line-height: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Saga bakan chevron sette yok — asagi bakan dondurulur (belgeli cozum). */
  .il-s-ok { flex: none; display: inline-flex; color: var(--faint); }
  .il-s-ok .ic { width: 16px; height: 16px; transform: rotate(-90deg); }
  .il-satir:hover .il-s-tx b { color: var(--accent); }
  .il-satir:active .il-s-tx b { color: var(--accent-strong, var(--accent)); }
  .il-satir:disabled { opacity: .45; cursor: not-allowed; }
}

/* ODAK HALKASI — dosyanin SONUNDA ve :where() OLMADAN. */
@media (max-width: 940px) {
  .il-satir:focus-visible {
    outline: none;
    box-shadow: var(--odak);
    border-radius: var(--r-sm);
  }
}