/* =====================================================================
   BUGÜN — MASAÜSTÜ DÜZENİ (29 Eyl 2026)
   =====================================================================
   Kullanıcı: "her şey birbirinden kopuk, compact bir yapı yok, düzen yok".
   Referans ilkeleri: Headspace Today (ADA 2023) — günün işi tek listede,
   tek dokunuşla; Linear arayüz yenilemesi — ana iş öne, yapı "hissedilir,
   görülmez"; Duolingo çekirdek sekmeler — en az yazı stili, kutu yerine
   boşluk; bento ızgara — tek ızgara, tek aralık, satırda eşit boy.

   SÖZLEŞME (ölçülür, `scratchpad/bugun-web-olc.js`):
     - tek aralık: 16px (--sp-4), bloklar arası ve ızgara içi
     - punto ölçeği: 12,5 · 13,5 · 15 · 17 · 23 · 44 (mevcut tokenlar)
     - kart dili tek: kâğıt kart (--card), başlık satırı `.bg-bas`
     - aynı satırdaki kartlar eşit yükseklik (grid stretch)
   KAPSAM: yalnızca ≥941px ve yalnızca `bg-` sınıfları. Telefonda Bugün
   ekranını `APP.Mobil` çiziyor; bu dosya ona DOKUNMAZ.
   Renkler token — koyu tema kendiliğinden doğru (ham hex YAZMA).
   ===================================================================== */

.bg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 941px) {

  /* ---------- bloklar: tek dikey ritim ---------- */
  #view > .bg-hero,
  #view > .bg-izgara,
  #view > .bg-kelimeler,
  #view > .bg-liste-kart { margin: 0 0 var(--sp-4); }

  /* ---------- hero: tam genişlik, tek satır ---------- */
  .hero.bg-hero {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
    padding: var(--sp-6) 28px;
  }
  .bg-hero-sol { flex: 1 1 auto; min-width: 0; }
  .bg-hero-sag { flex: 0 0 auto; }
  .bg-hero .hero-ust { justify-content: flex-start; gap: var(--sp-3); }
  .bg-hero .hero-greet { font-size: var(--fs-base); }
  .bg-hero .scene-chip { font-size: var(--fs-sm); }
  .bg-hero .hero-sayac { margin-top: var(--sp-3); }
  .bg-hero .hs-buyuk { font-size: var(--fs-4xl); line-height: 1; }
  /* koyu temada --yan-ink-silik (%35) 2,90:1 kalıyordu (büyük yazı eşiği 3:1) */
  .bg-hero .hs-bolu { font-size: var(--fs-xl); color: var(--yan-metin-orta); }
  .bg-hero .hs-birim { font-size: var(--fs-md); }
  .bg-hero .hero-adim { margin-top: var(--sp-3); }
  .bg-hero .hero-note { margin-top: var(--sp-3); font-size: var(--fs-base); max-width: 70ch; }
  .bg-hero .act { margin-top: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .bg-hero .act-main, .bg-hero .act-more { flex-wrap: nowrap; }
  .bg-hero .act .btn, .bg-hero .act .durum-hap { font-size: var(--fs-kontrol); }
  /* Birincil düğmedeki sayaç düğmenin yazı rengini alır — koyu temada
     sönük hero rengiyle bakır zeminde 1,68:1 kalıyordu (ölçüldü). */
  .bg-hero .act .btn-primary .u-count { color: inherit; }

  /* ---------- ızgara: günün akışı 2/3 · ilerleme 1/3, eşit boy ---------- */
  .bg-izgara {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sp-4); align-items: stretch;
  }
  .bg-izgara > .card { margin: 0; display: flex; flex-direction: column; }

  /* ---------- kart başlık satırı: her kartta aynı ---------- */
  .bg-bas {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
  }
  .bg-bas h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: var(--ls-h2); }
  .bg-bas h2 .u-count { font-size: inherit; font-weight: 400; color: var(--muted); }
  .bg-bas-sag { font-size: var(--fs-sm); color: var(--muted); text-align: right; }

  /* ---------- günün akışı: tek satır dili ---------- */
  .bg-liste { list-style: none; margin: 0; padding: 0; }
  .bg-satir {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    min-height: 60px; padding: var(--sp-2) 0;
    border-top: 1px solid var(--line-zayif);
  }
  .bg-satir:first-child { border-top: 0; }
  .bg-durum {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--card2); color: var(--muted);
  }
  .bg-durum .ic { width: 16px; height: 16px; }
  .bg-ok .bg-durum { background: var(--ok-soft); color: var(--ok-strong); }
  .bg-satir-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .bg-satir-metin b { font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.3; }
  .bg-satir-metin span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
  .bg-ok .bg-satir-metin b { color: var(--muted); }
  .bg-satir-sag { display: flex; align-items: center; justify-content: flex-end; }
  .bg-satir-sag .btn { min-height: var(--ctrl-h); font-size: var(--fs-kontrol); }
  .bg-satir-sag .btn .ic { width: 14px; height: 14px; }

  .bg-cubuk { display: block; width: 140px; height: 6px; border-radius: var(--r-full); background: var(--card2); overflow: hidden; }
  .bg-cubuk > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
  .bg-cubuk-genis { width: 100%; margin: var(--sp-2) 0 var(--sp-3); }

  /* ---------- serbest alıştırma: eşit karolar (şerit sağdan kesiliyordu) ---------- */
  .bg-alt-bas {
    margin: var(--sp-4) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line-zayif);
    font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  }
  .bg-karolar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-top: auto; }
  .bg-karo {
    position: relative; display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--ctrl-h); padding: 0 var(--sp-3);
    /* "Başla" düğmeleriyle AYNI ikincil dil: zeminsiz + kontrol kenarı (3:1) */
    border: 1px solid var(--btn-line); border-radius: var(--r-md); background: transparent; color: var(--text);
    font: 500 var(--fs-base)/1.2 var(--font-ui); text-align: left; cursor: pointer;
    transition: border-color var(--mo-hizli) var(--mo-cikis), background-color var(--mo-hizli) var(--mo-cikis);
  }
  .bg-karo > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bg-karo .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }
  .bg-karo:hover { border-color: var(--accent); background: var(--card2); }
  .bg-karo .ts-gorev-nokta { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .bg-karo .ts-onay { flex: none; display: inline-grid; color: var(--ok-strong); }
  .bg-karo .ts-onay .ic { width: 14px; height: 14px; color: currentColor; }

  /* ---------- ilerleme ---------- */
  .bg-il-sayi { display: flex; align-items: baseline; gap: var(--sp-2); }
  .bg-il-sayi b { font-size: var(--fs-xl); font-weight: 600; color: var(--text); line-height: 1.1; }
  .bg-il-sayi span { font-size: var(--fs-base); color: var(--muted); }
  .bg-il-katman { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-base); color: var(--muted); }
  .bg-il-katman b { color: var(--text); font-weight: 600; }
  .bg-il-not { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
  .bg-ilerleme .hafta-kapsam { margin: 0 0 var(--sp-3); }
  .bg-ilerleme .plan-streak { margin-top: auto; }
  /* Ölçeğe bağlama: eski genel kurallar 13px / 11px veriyordu (ölçüldü).
     Küçük etiketler "Serbest alıştırma" ile AYNI stil: 12,5 / 600 / sessiz. */
  .bg-ilerleme .hafta-kapsam .hk-et { font-size: var(--fs-sm); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--muted); }
  .bg-ilerleme .plan-streak, .bg-ilerleme .plan-streak .ps-govde > span:first-child { font-size: var(--fs-base); }
  .bg-ilerleme .plan-streak .ps-olcut { font-size: var(--fs-sm); }
  .bg-kelimeler > .sub, .bg-kelimeler > .sub b, .bg-liste-kart > .sub { font-size: var(--fs-base); }

  /* ---------- bugünün kelimeleri: beş eşit sütun ---------- */
  .bg-kelimeler .word-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-top: 0;
  }
  .bg-kelimeler .word-grid > * { min-width: 0; margin: 0; }
  .bg-kelimeler > .sub { margin: 0 0 var(--sp-3); }
  .bg-liste-kart .word-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
  .bg-liste-kart .word-grid > * { min-width: 0; margin: 0; }
}

/* =====================================================================
   ÜST ŞERİT — takvim yaprağı + sayaç bandı (29 Eyl 2026, masaüstü)
   =====================================================================
   Önce: başlık + tarih iki satır düz yazı; sağda beş ayrı ETİKETSİZ kutu
   ("287", "3" ne demek — ancak ipucunda), koyu temada beş ikon rengi.
   Kullanıcı: "düz yazı şeklinde yapma". Referans: Stripe/Linear metrik
   şeridi (tek yüzey, eşit bölmeler, etiket + değer) ve takvim yaprağı.
   İkon kutuları TEK renk (bakır); renk ek anlamı yalnız seride taşır.
   Yaprak ve bant AYNI yükseklik (--ctrl-h-lg) — şerit tek hizada okunur.
   Şerit içerik sütunuyla AYNI formülle hizalanır: 1920'de haplar
   sütunun dışına, sayfanın sağ kenarına kaçıyordu.
   Telefonda `.page-head` ve bant çizilmiyor; bu blok ona DOKUNMAZ.
   ===================================================================== */
.tb-gun[hidden] { display: none; }
@media (max-width: 940px) { .tb-gun { display: none; } }

@media (min-width: 941px) {
  .topbar {
    /* `.view` ile AYNI değer — token orada yerel tanımlı, burada tanımsızdı */
    --view-yan: clamp(14px, 2.6vw, 32px);
    padding-block: var(--sp-4);
    padding-inline: max(var(--view-yan), calc((100% - var(--icerik-w)) / 2));
    column-gap: var(--sp-4);
    /* bant sığıyor mu kararı ŞERİDİN genişliğinden — menü açık/dar fark etmez */
    container: ustserit / inline-size;
  }
  .page-head { gap: var(--sp-1); flex: 1 1 auto; }
  .page-sub { font-size: var(--fs-base); color: var(--muted); }

  /* tarih bloğu: büyük gün + (ay / haftanın günü) — tek bütün */
  .page-sub:empty { display: none; }
  .tb-gun {
    flex: none; display: flex; align-items: center; gap: var(--sp-3);
    height: var(--ctrl-h-lg); padding: 0 var(--sp-4) 0 var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  }
  .tb-gun b {
    font-size: var(--fs-xl); font-weight: 600; line-height: 1; letter-spacing: -.02em;
    color: var(--text); font-variant-numeric: tabular-nums;
  }
  .tb-gun span {
    display: flex; flex-direction: column; gap: 2px;
    padding-left: var(--sp-3); border-left: 1px solid var(--line-zayif);
  }
  .tb-gun i { font-style: normal; font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--accent); }
  .tb-gun em { font-style: normal; font-size: var(--fs-sm); font-weight: 400; line-height: 1.2; color: var(--muted); }
  .tb-gun b .ic { width: 22px; height: 22px; }
  .tb-gun-tamam b { color: var(--ok-strong); }

  /* sayaç bandı: tek yüzey, eşit bölmeler */
  .top-stats {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0; padding: 0;
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden;
  }
  .top-stats .stat-pill {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto;
    align-content: center; column-gap: var(--sp-2); row-gap: 1px;
    /* bant dış ölçüsü = yaprak (52): 1px kenar iki kez düşülür */
    height: auto; min-height: calc(var(--ctrl-h-lg) - 2px); padding: 0 var(--sp-5) 0 var(--sp-3);
    border: 0; border-radius: 0; background: transparent;
    transition: background-color var(--mo-hizli) var(--mo-cikis);
  }
  .top-stats .stat-pill + .stat-pill { border-left: 1px solid var(--line-zayif); }
  .top-stats .stat-pill:hover { background: var(--card2); }
  .top-stats .stat-pill .sp-tx { display: contents; }
  .top-stats .stat-pill .sp-tx i {
    display: block; grid-column: 2; grid-row: 1; align-self: end;
    font-style: normal; font-size: var(--fs-xs); font-weight: 500; line-height: 1.2;
    color: var(--muted); letter-spacing: 0; white-space: nowrap;
  }
  .top-stats .stat-pill .sp-tx b {
    grid-column: 2; grid-row: 2; align-self: start;
    font-size: var(--fs-md); font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
    color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .top-stats .stat-pill .sp-dim { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); letter-spacing: 0; }
  /* ikon kutusu — tek renk; `:root .topbar` koyu temadaki çip rengi kuralını geçer */
  :root .topbar .top-stats .stat-pill .sp-ic {
    grid-column: 1; grid-row: 1 / 3; align-self: center;
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: var(--accent-soft); color: var(--accent);
  }
  :root .topbar .top-stats .stat-pill .sp-ic .ic { width: 15px; height: 15px; }
  /* seri yoksa alev sönük; sürüyorsa bakır DOLU kutu */
  :root .topbar .top-stats .stat-pill[data-pill="seri"]:not(.sp-canli) .sp-ic { background: var(--card2); color: var(--faint); }
  :root .topbar .top-stats .stat-pill.sp-canli .sp-ic { background: var(--accent); color: var(--card); }
}

/* DAR MASAÜSTÜ (ölçüldü: 941–1100, menü açık): bant yarım satırda sağa
   yaslı kırılıyordu, sol kenarı içerikle hizasızdı. Sığmayınca KENDİ
   satırına geçer ve TAM GENİŞLİĞE yayılır — bölmeler eşit büyür. */
@container ustserit (max-width: 799px) {
  .top-stats { flex: 1 1 100%; order: 3; }
}