/* ==========================================================================
   yusufaziz.com.tr — Geniş Ekran Düzeni + Seçmeli İzlek Şeridi (≥1280px)
   Yükleme yeri: </head> öncesi, kodeks_v7.css sonrası.
   Kapsam: Yalnızca ≥1280px; 390px ve 768px hesaplanan stilleri değişmez.
   ========================================================================== */

@media (min-width: 1280px) {
  :root,
  html[data-tema="a"],
  html[data-tema="b"],
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --genis-kenar: clamp(32px, 3.5vw, 72px);
    --genis-tavan: 1680px;
  }

  /* 1. Kenar Bandı Ton Geçişi (Yalnız mevcut tema değişkenleriyle)
     Derin siyah/koyu boşlukta "yüzen dar sütun" hissini kırmak için
     yüzey tonundan ana zemine yumuşak radyal geçiş. */
  body {
    background-color: var(--bg);
    background-image: radial-gradient(
      ellipse 92% 75% at 50% 0%,
      color-mix(in srgb, var(--surface) 72%, var(--bg)) 0%,
      var(--bg) 100%
    );
    background-attachment: fixed;
  }

  /* 2. Geniş Ana Kap (Üst çubuk, içerik ve alt bilgi aynı kaba hizalı) */
  .wrap {
    width: min(100% - (2 * var(--genis-kenar)), var(--genis-tavan));
    max-width: var(--genis-tavan);
    margin-inline: auto;
    padding-inline: 0;
  }

  /* Hakkında / About / نبذة: satır içi max-width:820px kabı geniş kaba hizalanır.
     Satır içi stil yalnız !important ile aşılır; <1280'de satır içi 820 aynen geçerli.
     Okuma ölçüsü aşağıdaki .post-body 70ch kuralıyla korunur. */
  .yazar-hero > .wrap[style*="max-width:820px"] {
    max-width: var(--genis-tavan) !important;
  }

  /* İç içe .wrap öğelerinin (ör. .kodeks-okuma-sahnesi içindeki .post-head > .wrap)
     ikinci kez daralmasını ve kenar boşluğu bırakmasını önle */
  .wrap .wrap,
  .kodeks-okuma-sahnesi .wrap {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* ========================================================================
     ORTAK BİLEŞEN: Seçmeli İzlek Şeridi (kodeks-izlek-*)
     Evdiş ilkesi: Masaüstünde (≥1280px) yatay kaydırma kaldırılır,
     tüm kategori düğmeleri alt satıra sarılarak eksiksiz görünür.
     (≤768px mobil yatay kaydırma davranışına dokunulmaz.)
     ======================================================================== */
  .kodeks-izlek-seridi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    overflow-x: visible;
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
  }

  .kodeks-izlek-btn {
    flex: 0 1 auto;
    max-width: 100%;
  }

  .kodeks-izlek-btn.active,
  .kodeks-izlek-btn[aria-pressed="true"],
  .kodeks-izlek-btn[aria-selected="true"] {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--acc-fg);
  }
  /* === /ORTAK BİLEŞEN === */

  /* 3. İki Sütunlu Sahne ve Kart Izgaraları */
  .kodeks-sahne.okuma-acik {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 32px;
  }

  /* Dizin sütunu olmayan tekil okuma sayfalarında sol 432px boşluğu kaldır */
  .kodeks-sahne.okuma-acik:not(:has(.kodeks-dizin-sutunu)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .kodeks-sahne.okuma-acik:not(:has(.kodeks-dizin-sutunu)) .kodeks-okuma-sahnesi {
    grid-column: 1 / -1;
  }

  /* Okuma paneli kapalıyken veya tekil dizin görünümünde kart ızgarası genişlesin */
  .kodeks-sahne:not(.okuma-acik) .posts {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 20px;
  }

  /* 4. Okuma Sahnesi ve Okuma Ölçüsü (68–75ch sınırı korunur) */
  .kodeks-okuma-sahnesi {
    padding: 36px 48px 52px;
    background: linear-gradient(
      180deg,
      var(--surface) 0%,
      color-mix(in srgb, var(--surface) 92%, var(--bg)) 100%
    );
  }

  .kodeks-okuma-cubugu {
    padding: 12px 18px;
    gap: 10px 16px;
  }

  .kodeks-okuma-sol,
  .kodeks-okuma-sag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .post-head h1 {
    max-width: 26ch;
  }

  .post-head .dek {
    max-width: 68ch;
  }

  .post,
  .post-body > p,
  .post-body > ul,
  .post-body > ol,
  .post-body > blockquote,
  .post-body > h2,
  .post-body > h3,
  .post-body > h4 {
    max-width: 70ch;
  }
}

@media (min-width: 1920px) {
  .kodeks-sahne.okuma-acik {
    gap: 40px;
  }

  .kodeks-okuma-sahnesi {
    padding: 44px 60px 60px;
  }
}