/* ============================================================
     PINBOARD — tek dosya arayüz
     Sistem fontları, CDN yok, harici ağ bağımlılığı yok.
     ============================================================ */

  /* --- Tema değişkenleri: varsayılan AÇIK tema --- */
  :root {
    /* VARSAYILAN = "Sade" (soğuk-nötr, modern light). Renkler burada; --serif/--radius WARM kalır ki
       Kum/Akşam temaları (bunları miras alır) kendi sıcak/editöryel kimliğini korusun. Sade bloğu serif/radius'u ayrıca sans/14px'e çeker. */
    --bg:        #f7f8fa;
    --bg-soft:   #eceef2;
    --card:      #ffffff;
    --card-2:    #f4f6f8;
    --text:      #1b1d21;
    --text-soft: #565b66;
    --text-dim:  #8c919c;
    --border:    #e8eaef;
    --border-2:  #dadde4;
    --accent:    #4063d6;
    --accent-soft:#ebeffb;
    --accent-ink:#2f4cae;
    --shadow:    0 1px 2px rgba(20,24,40,.05), 0 4px 14px rgba(20,24,40,.06);
    --shadow-sm: 0 1px 2px rgba(20,24,40,.06);
    --radius:    14px;
    --radius-sm: 10px;
    /* Başlıklar artık SANS — TÜM temalarda modern dil (eski Palatino serif emekli edildi); gövdeyle aynı sistem yığını. */
    --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable", Roboto, Helvetica, Arial, system-ui, sans-serif;
    /* Meta/tarih/sayaç için sistem MONOSPACE — "kütüphane fişi / arşiv" dokusu. */
    --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
    --good:      #1f9d63;
    --good-soft: #e3f6ec;
    --warn:      #d98a00;
    --warn-soft: #fbf0d6;
    --danger:    #d64545;
    --danger-soft:#fce4e4;
  }

  /* --- Otomatik KOYU tema (sistem tercihi) --- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
      --bg:        #070e26;
      --bg-soft:   #0b1740;
      --card:      #101e49;
      --card-2:    #18295e;
      --text:      #eaf1ff;
      --text-soft: #a7b6e0;
      --text-dim:  #6a7cb0;
      --border:    #2c4488;
      --border-2:  #3a55a0;
      --accent:    #5089ff;
      --accent-soft:#13245a;
      --accent-ink:#a8c4ff;
      --shadow:    0 1px 2px rgba(2,6,22,.55), 0 8px 26px rgba(2,6,22,.65);
      --shadow-sm: 0 1px 2px rgba(2,6,22,.6);
      --good:      #43c489; --good-soft:#10362b;
      --warn:      #e0a73a; --warn-soft:#33301a;
      --danger:    #ef6f7e; --danger-soft:#381f2e;
    }
  }
  /* --- El ile seçilen KOYU tema --- */
  :root[data-tema="koyu"] {
    --bg:        #070e26;
    --bg-soft:   #0b1740;
    --card:      #101e49;
    --card-2:    #18295e;
    --text:      #eaf1ff;
    --text-soft: #a7b6e0;
    --text-dim:  #6a7cb0;
    --border:    #2c4488;
    --border-2:  #3a55a0;
    --accent:    #5089ff;
    --accent-soft:#13245a;
    --accent-ink:#a8c4ff;
    --shadow:    0 1px 2px rgba(2,6,22,.55), 0 8px 26px rgba(2,6,22,.65);
    --shadow-sm: 0 1px 2px rgba(2,6,22,.6);
    --good:      #43c489; --good-soft:#10362b;
    --warn:      #e0a73a; --warn-soft:#33301a;
    --danger:    #ef6f7e; --danger-soft:#381f2e;
  }
  /* Dark (UCL navy): hafif metalik sheen + dashboard gradient'ini kis */
  :root[data-tema="koyu"] .dd-orb { opacity: .2; }
  :root[data-tema="koyu"] .dd-grid { opacity: .24; }
  :root[data-tema="koyu"] .ekle-hero {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 82%, #44619e) 0%, var(--card) 58%);
    border-color: #3a55a0;
    box-shadow: inset 0 1px 0 rgba(150,180,235,.14), 0 14px 34px -16px rgba(2,6,22,.7);
  }
  /* Dark: birincil butonlar mavi degil -> beyaz/gumus (navy zeminde kontrast, UCL) */
  :root[data-tema="koyu"] .btn.birincil, :root[data-tema="koyu"] .af-submit {
    background: #eaf0ff; color: #0b1740; border-color: transparent;
    box-shadow: 0 2px 10px rgba(2,6,22,.5);
  }
  :root[data-tema="koyu"] .btn.birincil:hover, :root[data-tema="koyu"] .af-submit:hover { background: #fff; filter: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema]) .dd-orb { opacity: .2; }
    :root:not([data-tema]) .dd-grid { opacity: .24; }
    :root:not([data-tema]) .ekle-hero {
      background: linear-gradient(180deg, color-mix(in srgb, var(--card) 82%, #44619e) 0%, var(--card) 58%);
      border-color: #3a55a0;
      box-shadow: inset 0 1px 0 rgba(150,180,235,.14), 0 14px 34px -16px rgba(2,6,22,.7);
    }
    :root:not([data-tema]) .btn.birincil, :root:not([data-tema]) .af-submit {
      background: #eaf0ff; color: #0b1740; border-color: transparent;
      box-shadow: 0 2px 10px rgba(2,6,22,.5);
    }
    :root:not([data-tema]) .btn.birincil:hover, :root:not([data-tema]) .af-submit:hover { background: #fff; filter: none; }
  }
  /* --- 🏖️ KUM teması (sıcak krem/bej zemin — "huzur" referansları; warm serif/radius temelden miras) --- */
  :root[data-tema="kum"] {
    --bg:#f1e7d3; --bg-soft:#e6d8bf; --card:#fdf8ed; --card-2:#f4ecd9;
    --text:#3a3326; --text-soft:#6e6353; --text-dim:#9c8f79;
    --border:#e3d6bd; --border-2:#d6c4a4;
    --accent:#a2663f; --accent-soft:#ecddcb; --accent-ink:#8a5430;   /* terracotta -> tozlu/sönük kil: sıcak ama dingin */
    --shadow:0 2px 6px rgba(120,100,70,.06),0 12px 28px rgba(120,100,70,.09);
    --shadow-sm:0 1px 2px rgba(120,100,70,.10);
    --good:#5a9e7a; --good-soft:#e4efe4;
    --warn:#c2974e; --warn-soft:#f4ebd6;
    --danger:#bd7468; --danger-soft:#f2e3de;
  }
  /* --- 🧊 SADE teması (soğuk-nötr, düz, "Notion + modern": grain yok, sans başlık, kıl-payı çizgi, sıkı yarıçap) --- */
  :root[data-tema="sade"] {
    --bg:#f7f8fa; --bg-soft:#eceef2; --card:#ffffff; --card-2:#f4f6f8;
    --text:#1b1d21; --text-soft:#565b66; --text-dim:#8c919c;
    --border:#e8eaef; --border-2:#dadde4;
    --accent:#4063d6; --accent-soft:#ebeffb; --accent-ink:#2f4cae;
    --shadow:0 1px 2px rgba(20,24,40,.05),0 4px 14px rgba(20,24,40,.06);
    --shadow-sm:0 1px 2px rgba(20,24,40,.06);
    --radius:14px; --radius-sm:10px;
    /* Modern dilde başlıklar da SANS (Palatino serif yerine) — gövdeyle aynı sistem yığını */
    --serif:-apple-system,BlinkMacSystemFont,"Segoe UI","Segoe UI Variable",Roboto,Helvetica,Arial,system-ui,sans-serif;
    --good:#1a9e60; --good-soft:#e6f5ed;
    --warn:#c2870f; --warn-soft:#faf0d9;
    --danger:#dc4848; --danger-soft:#fce8e8;
  }
  /* --- 🌿 YAPRAK (sage) teması — sıcak krem zemin + adaçayı yeşili accent (planner/wellness referansı) --- */
  :root[data-tema="yaprak"] {
    --bg:#f1f0e6; --bg-soft:#e7e6d8; --card:#fbfbf4; --card-2:#ecebde;
    --text:#373a30; --text-soft:#5e6353; --text-dim:#9a9c88;
    --border:#e3e1d1; --border-2:#d3d1be;
    --accent:#5f7b55; --accent-soft:#e4ead8; --accent-ink:#4d6743;   /* adaçayı yeşili — beyaz metin için yeterince koyu */
    --shadow:0 2px 6px rgba(80,90,60,.06),0 12px 28px rgba(80,90,60,.09);
    --shadow-sm:0 1px 2px rgba(80,90,60,.10);
    --radius:14px; --radius-sm:10px;
    --good:#5d8f5f; --good-soft:#e2ecdb;
    --warn:#c2974e; --warn-soft:#f1e9d6;
    --danger:#bd6f60; --danger-soft:#f0e1dc;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable",
                 Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }
  /* Kâğıt grain dokusu kaldırıldı — tüm temalarda düz, temiz, modern yüzey (renk-dışı modernizasyon). */
  /* Sayısal metinlerde hizalı rakam (sayaç/tarih zıplamaz) */
  .konu-baslik .sayi, .konu-cip .adet, .kart-kicker, .okuma-kicker,
  .rozet-sayi, .bugun-bilgi, .not-durum { font-variant-numeric: tabular-nums; }

  a { color: var(--accent-ink); text-decoration: none; }
  a:hover { text-decoration: underline; }

  button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
  }

  /* Klavye odağı: tüm etkileşimli öğelerde görünür halka (a11y).
     :focus-visible olduğu için fareyle tıklamada görünmez, yalnız Tab'da çıkar. */
  button:focus-visible,
  a:focus-visible,
  .tema-nokta:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ============================ ARAÇ ÇUBUĞU ============================ */
  header.arac-cubugu {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .arac-ic {
    max-width: 1680px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .marka {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 16px; letter-spacing: -.2px;
    white-space: nowrap; user-select: none;
  }
  .marka .kasa {
    width: 28px; height: 28px; border-radius: 10px;
    background: var(--accent);
    display: grid; place-items: center; color: #fff; font-size: 15px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform .2s;
  }
  .marka-sus { font-size: 13px; opacity: .8; }
  /* TİP SİSTEMİ — masthead SERİF (akşam-kütüphanesi imzası) + meta/tarih/sayaç MONOSPACE (arşiv fişi dokusu) */
  .marka .ad, .ray-marka .ad { font-family: var(--serif); letter-spacing: -.01em; font-size: 15.5px; font-weight: 700; }
  .kart-kicker .kicker-kaynak, .kart-kicker .kicker-tarih, .kart-kicker .kicker-ayrac,
  .toplam-bilgi, .seg-btn .adet, .konu-cip .adet, #kesif-adet, .okuma-kicker {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
  }

  .arama-sar {
    position: relative; flex: 1 1 220px; min-width: 160px;
  }
  .arama-sar .ikon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); font-size: 14px; pointer-events: none;
  }
  input.arama {
    width: 100%; min-height: 42px; box-sizing: border-box;
    padding: 10px 12px 10px 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-2);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    outline: none;
    box-shadow: 0 1px 2px rgba(20,24,40,.06), 0 5px 14px -8px rgba(20,24,40,.22);
    transition: border-color .15s, box-shadow .15s;
  }
  input.arama:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .ekle-sar { display: flex; gap: 6px; flex: 1 1 260px; min-width: 200px; }
  input.ekle-kutu {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-2);
    background: var(--card);
    color: var(--text); font-size: 14px; outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  input.ekle-kutu:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  /* Ekle alanı: toolbar'dan çıkan, ölçülü "yakala" kartı (programın ana eylemi) */
  .ekle-alani { max-width: 1680px; margin: 0 auto; padding: 12px 20px 0; }
  .ekle-satir {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px 7px 12px;
    background: color-mix(in srgb, var(--accent) 5%, var(--card));
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .ekle-satir:focus-within {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card);
  }
  .ekle-satir .ekle-arti { flex: none; width: 18px; height: 18px; color: var(--accent); }
  /* input kartın İÇİNDE çerçevesiz; odak halkasını kart taşır */
  .ekle-alani input.ekle-kutu {
    flex: 1; border: none; background: none; box-shadow: none;
    padding: 6px 2px; font-size: 14.5px; min-width: 80px;
  }
  .ekle-alani input.ekle-kutu:focus { border: none; box-shadow: none; }
  /* ipucu varsayılan gizli; yalnız ekle kutusuna odaklanınca görünür (sadelik) */
  .ekle-ipuc { display: none; font-size: 11.5px; color: var(--text-dim); padding: 7px 4px 0 14px; }
  .ekle-satir:focus-within ~ .ekle-ipuc { display: block; }
  .ekle-alani .ek-onizleme { padding: 10px 2px 0; }

  .btn {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border-2);
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .05s;
  }
  .btn:hover { background: var(--card-2); }
  .btn:active { transform: translateY(1px); }
  .btn.birincil {
    background: var(--accent);
    color: #fff; font-weight: 700; border-color: transparent;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .btn.birincil:hover { background: var(--accent-ink); transform: translateY(-1px); }
  .btn.ikon-btn { padding: 10px 11px; }

  /* Satır-içi SVG ikonlar (emoji yerine tek tutarlı çizgi dili) */
  .ik-svg { width: 15px; height: 15px; flex: none; vertical-align: -.16em; }
  .btn.ikon-btn .ik-svg { width: 16px; height: 16px; vertical-align: -.18em; }
  .marka .kasa .ik-svg { width: 16px; height: 16px; vertical-align: 0; }
  .kart-ayak .duzenle-ac .ik-svg, .kart-ayak .sil-btn .ik-svg { width: 16px; height: 16px; }
  .ik-bos { width: 40px; height: 40px; opacity: .42; stroke-width: 1.5; }

  /* İliştirilen görsel önizleme şeridi */
  .ek-onizleme {
    max-width: 1680px; margin: 0 auto; padding: 10px 20px 0;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .ek-onizleme .ek-kart {
    position: relative; width: 64px; height: 64px; flex: none;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border-2); background: var(--card-2);
  }
  .ek-onizleme .ek-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ek-onizleme .ek-kaldir {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
    font-size: 12px; line-height: 1; display: grid; place-items: center;
  }
  .ek-onizleme .ek-kaldir:hover { background: var(--danger); }

  /* İşle düğmesi + gelen-sayısı vurgusu */
  .isle-sar { position: relative; }
  .rozet-sayi {
    position: absolute; top: -7px; right: -7px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: var(--shadow-sm);
  }
  /* İşlenecek girdi varken sakin bir zemin farkı — hareketsiz (huzur). */
  .btn.vurgu-isle {
    background: var(--accent-soft); color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }

  /* İşleme dönen gösterge */
  .spinner {
    width: 14px; height: 14px; display: inline-block; vertical-align: -2px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: don .7s linear infinite;
  }
  @keyframes don { to { transform: rotate(360deg); } }

  /* Parlayan bekleme metni (shimmer): uzun beklemelerde "sadece spinner"ın monotonluğunu
     kırar; metnin üzerinden yumuşak bir ışık gezer. background-clip:text desteklenmezse
     color fallback'i görünür; reduced-motion'da animasyon kapanır, metin düz renge döner. */
  .parildak {
    color: var(--text-soft);
    background: linear-gradient(100deg,
      var(--text-dim) 28%, var(--text) 48%, var(--text) 52%, var(--text-dim) 72%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: parilti 1.9s ease-in-out infinite;
  }
  @keyframes parilti { from { background-position: 180% 0; } to { background-position: -80% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .parildak { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  }

  /* ============================ DURUM FİLTRE ÇİPLERİ ============================ */
  .filtre-bar {
    max-width: 1680px; margin: 0 auto;
    padding: 10px 20px 4px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .cip {
    padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    background: var(--card); color: var(--text-soft);
    border: 1px solid var(--border);
    transition: all .15s;
  }
  .cip:hover { background: var(--card-2); }
  .cip:active { transform: scale(.97); }
  .cip.aktif {
    background: var(--accent); color: #fff; font-weight: 700; border-color: transparent;
    box-shadow: 0 3px 9px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .cip .adet { opacity: .7; font-weight: 700; margin-left: 4px; font-size: 12px; }
  .filtre-bar .bosluk { flex: 1; }
  .toplam-bilgi { font-size: 13px; color: var(--text-dim); margin-left: auto; flex: none; }

  /* ---- Tek çubuk, iki bölge: DURUM segment kontrol ---- */
  .durum-segment {
    display: inline-flex; flex: none;
    background: var(--card-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px; gap: 2px;
  }
  .seg-btn {
    padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--text-soft);
    background: transparent; border: none; white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .seg-btn:hover { color: var(--text); }
  .seg-btn.aktif {
    background: var(--accent); color: #fff; font-weight: 700;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .seg-btn .adet { opacity: .7; font-weight: 700; margin-left: 4px; font-size: 12px; }

  /* ---- Bölge ayırıcı + KONU mikro-etiketi ---- */
  .bolge-ayrac { flex: none; width: 1px; height: 22px; background: var(--border-2); margin: 0 4px; }
  .konu-etiket {
    flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-dim); user-select: none;
  }
  /* Konu satırı: durumun hemen altında. (align-items:center kaldırıldı — eski yatay
     düzenden kalmaydı; etiketi ve listeyi ortalayıp DURUM ile hizayı bozuyordu.) */
  .konu-satir { padding-top: 2px; }

  /* ---- KONU rafı: dolgusuz, renk-noktalı haplar (yatay kaydırılır) ---- */
  .konu-raf {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .konu-raf::-webkit-scrollbar { height: 6px; }
  .konu-raf::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
  .konu-raf .konu-cip {
    flex: none; background: transparent; border: 1px solid var(--border);
    color: var(--text-soft);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .konu-raf .konu-cip:hover { background: var(--card-2); color: var(--text); }
  .konu-raf .konu-cip .knokta {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--cr, var(--text-dim));
  }
  .konu-raf .konu-cip.aktif {
    background: var(--accent-soft); color: var(--accent-ink);
    border-color: var(--accent); font-weight: 700; box-shadow: none;
  }
  .konu-raf .konu-cip .adet { opacity: .6; font-weight: 700; margin-left: 2px; font-size: 12px; }

  /* Sıcak kişisel selam (dashboard hero değil — tek satır) */
  /* Ana eylem bandı: Ekle + İşle — içeriğin en üstünde, ekranda ilk göze çarpan blok */
  /* Ekle hero: sayfanın en üstünde SABİT yakalama kutusu (popup değil) — yaz, Ekle'ye bas,
     kutu temizlenir ve açık kalır (devam et); bitince İşle. */
  .ekle-hero {
    max-width: 1680px; margin: 0 auto; padding: 14px 20px 4px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .ekle-hero .ekle-modal-kutu { min-height: 72px; }
  .ekle-hero .ek-onizleme { padding: 0; }
  .ekle-hero-ayak { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ekle-hero-ayak .isle-sar { position: relative; }
  .ekle-hero-ayak .btn {
    padding: 11px 22px; font-size: 15px; font-weight: 700; border-radius: var(--radius-sm);
  }
  .ekle-hero-ayak .btn .ik-svg { width: 18px; height: 18px; vertical-align: -.2em; }

  /* Dashboard (Panel) görünümü: ferah, ortalanmış giriş ekranı — karşılama + hızlı ekle + nabız */
  .dashboard-panel {
    position: relative;
    max-width: 100%; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;   /* tum icerik dikey + yatay ortali */
    gap: 18px;                                       /* masthead ile form arasi nefes */
    min-height: calc(100vh - 106px);
  }
  /* Panel: kolonlari tam yukseklige cek -> altta dekorsuz/duz "footer" bandi kalmasin */
  body[data-sayfa="panel"] .uygulama { align-items: stretch; }
  body[data-sayfa="panel"] .ic-akis { display: flex; flex-direction: column; }
  body[data-sayfa="panel"] .dashboard-panel { flex: 1 1 auto; }
  .dashboard-panel > .page-header, .dashboard-panel > .dashboard-icerik { position: relative; z-index: 1; }
  /* dashboard arka plan dekorasyonu (ilgili shape'ler) */
  .dashboard-deko { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .dd-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
  .dd-orb-1 { top: -130px; right: -70px; width: 380px; height: 380px; opacity: .5;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
  .dd-orb-2 { bottom: -150px; left: -90px; width: 420px; height: 420px; opacity: .4;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-ink) 28%, transparent), transparent 70%); }
  .dd-grid { position: absolute; inset: 0; opacity: .4;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 1.3px, transparent 1.3px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent 32%, #000 78%);
            mask-image: radial-gradient(circle at 50% 44%, transparent 32%, #000 78%); }
  /* yuzen notlar (pin'li) + link chip + hashtag etiketleri */
  .dd-note {
    position: absolute; width: 158px; padding: 13px 14px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 18px 42px -20px rgba(20,24,40,.45);
    display: flex; flex-direction: column; gap: 7px; opacity: .4;
  }
  .dd-note > svg { width: 19px; height: 19px; color: var(--accent); }
  .dd-note > i { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--text) 13%, transparent); }
  .dd-note-accent { border-left: 3px solid var(--accent); }
  .dd-note-accent > svg { color: var(--accent-ink); }
  .dd-note-warm { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, var(--border)); }
  .dd-note-warm > svg { color: var(--warn); }
  .dd-note-warm > i { background: color-mix(in srgb, var(--warn) 30%, transparent); }
  .dd-note-1 { top: 7%; right: 2%; transform: rotate(5deg); }
  .dd-note-2 { bottom: 14%; left: 5%; transform: rotate(-6deg); }
  .dd-note-3 { bottom: 9%; right: 2%; width: 140px; transform: rotate(-3deg); }
  /* push-pin (dd-note-1 ustunde) */
  .dd-pin { position: absolute; top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; }
  .dd-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fff 0 2px, var(--danger) 3px);
    box-shadow: 0 3px 6px -2px rgba(20,24,40,.5); }
  /* link chip */
  .dd-chip { position: absolute; top: 31%; left: 7%; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); opacity: .45; transform: rotate(-4deg); }
  .dd-chip > svg { width: 15px; height: 15px; color: var(--accent-ink); }
  .dd-chip > i { display: block; width: 44px; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
  /* hashtag etiketleri */
  .dd-tag { position: absolute; width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: var(--accent-ink);
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); opacity: .5; }
  .dd-tag-1 { top: 19%; left: 15%; transform: rotate(-8deg); }
  .dd-tag-2 { bottom: 38%; right: 4%; transform: rotate(7deg); }
  .dd-dot { position: absolute; bottom: 11%; left: 23%; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); opacity: .5; }
  /* Panel masthead: editöryal "akşam masası" başlığı (kicker + iri serif selam + sakin alt satır) */
  .page-header {
    flex: none; width: 100%; max-width: 1014px; padding: 0 24px 6px; text-align: center;
  }
  .page-header-baslik { margin: 0; font-weight: 700; line-height: 1.12; color: var(--text); text-align: center; }
  .page-header-baslik b { color: var(--accent-ink); font-weight: 800; }
  /* İçerik: ortali, daraltilmis kolon (form azicik kuculur, ortalandigi netlesir) */
  .dashboard-icerik {
    flex: none; width: 100%; max-width: 1014px; display: flex; flex-direction: column;
    gap: 20px; justify-content: flex-start; padding: 20px 24px 24px;
  }
  .dashboard-icerik .ozet-serit { padding: 0; order: 1; max-width: 100%; width: 100%; margin: 0; flex: none; }
  .dashboard-icerik #haftalik-serit { order: 2; max-width: 100%; width: 100%; margin: 0; }
  .dashboard-icerik #bugun-serit-panel { order: 3; max-width: 100%; width: 100%; margin: 0; padding: 0; }
  /* Hızlı yakala: davetkâr ama küçük çerçeveli "masa notu" — sayfayı kaplamaz, masthead hiyerarşisini bozmaz */
  .dashboard-icerik .ekle-hero {
    max-width: 100%; width: 100%; margin: 0; order: 4; flex: none;
    padding: 18px 20px; gap: 11px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 24px; box-shadow: 0 1px 2px rgba(20,24,40,.05), 0 12px 32px -14px rgba(20,24,40,.28);
  }
  .dashboard-icerik .ekle-modal-kutu { flex: none; min-height: 74px; font-size: 15.5px; }
  /* "Hızlı yakala" başlığı (çerçevenin üstünde) */
  .ekle-hero-bas { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
  .ekle-hero-bas:empty, .ekle-hero-bas:not(:has(> :not([hidden]))) { display: none; }
  .ekle-hero-bas .ik-svg { width: 16px; height: 16px; color: var(--accent); align-self: center; }
  .ekle-hero-bas .alt { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; color: var(--text-dim); }

  /* Kişisel özet şeridi (Clarity tarzı renkli kartlar) — içeriğin nabzı, ilk bakışta */
  .ozet-serit {
    max-width: 1680px; margin: 0 auto; padding: 8px 20px 4px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  }
  .ozet-kart {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 18px;   /* grafik kaldırıldı: tam genişlik, ferah */
    border-radius: var(--radius); border: none; text-align: center;
    cursor: pointer; transition: transform .1s, box-shadow .18s, filter .15s;
  }
  /* Kart grafikleri (donut/sparkline/halka/kavanoz) kaldırıldı — tek-tip, sayı-odaklı sade kartlar (modern, tüm temalar) */
  .ozet-grafik { display: none; }
  .ozet-kart:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60,45,25,.10); filter: brightness(1.02); }
  .ozet-kart:active { transform: translateY(0); }
  .ozet-ust { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; opacity: .85; }
  .ozet-ust .ik-svg { width: 16px; height: 16px; }
  .ozet-sayi { font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1; }
  /* Kart alt-satırı: ikincil metrik, kartın altına sabit (boş alanı doldurur, gerçek bilgi taşır) */
  .ozet-alt { margin-top: auto; font-size: 11.5px; font-weight: 700; opacity: .72; font-variant-numeric: tabular-nums; }
  .ozet-bar { width: 100%; height: 5px; border-radius: 999px; background: rgba(0,0,0,.10); overflow: hidden; margin-top: 6px; }
  .ozet-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: currentColor; transition: width .4s ease; }
  /* Eğlenceli karşılama: Panel'e girince kartlar sırayla "pop" yapar (sayılar JS'te sıfırdan sayılır) */
  @keyframes ozet-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
  .ozet-serit.canli .ozet-kart { animation: ozet-pop .42s cubic-bezier(.34, 1.56, .64, 1) both; }
  .ozet-serit.canli .ozet-kart:nth-child(2) { animation-delay: .06s; }
  .ozet-serit.canli .ozet-kart:nth-child(3) { animation-delay: .12s; }
  .ozet-serit.canli .ozet-kart:nth-child(4) { animation-delay: .18s; }
  @media (prefers-reduced-motion: reduce) { .ozet-serit.canli .ozet-kart { animation: none; } }
  .ozet-kart.k-mor   { background: #efe7f7; color: #6b4e96; }
  .ozet-kart.k-seft  { background: #fbe9dc; color: #b06a3c; }
  .ozet-kart.k-mavi  { background: #e6edf5; color: #3a6491; }
  .ozet-kart.k-yesil { background: #e6f0e6; color: #4a7a52; }
  /* Akşam: çok-renkli kutular yerine tek-tip sakin navy kart (kullanıcı: dark'ta yan renkler rahatsız edici) */
  :root[data-tema="koyu"] .ozet-kart.k-mor,
  :root[data-tema="koyu"] .ozet-kart.k-seft,
  :root[data-tema="koyu"] .ozet-kart.k-mavi,
  :root[data-tema="koyu"] .ozet-kart.k-yesil { background: var(--card-2); color: var(--text); border: 1px solid var(--border); }
  /* Sade tema: pastel renkli kutular yerine tek-tip beyaz kart + kıl-payı çizgi (monokrom, modern kısıtlama) */
  :root[data-tema="sade"] .ozet-kart.k-mor,
  :root[data-tema="sade"] .ozet-kart.k-seft,
  :root[data-tema="sade"] .ozet-kart.k-mavi,
  :root[data-tema="sade"] .ozet-kart.k-yesil { background: var(--card); color: var(--text); border: 1px solid var(--border); }
  /* Yaprak: stat kutuları sade/flat (sakin) — pastel yerine tek-tip krem kart */
  :root[data-tema="yaprak"] .ozet-kart.k-mor,
  :root[data-tema="yaprak"] .ozet-kart.k-seft,
  :root[data-tema="yaprak"] .ozet-kart.k-mavi,
  :root[data-tema="yaprak"] .ozet-kart.k-yesil { background: var(--card); color: var(--text); border: 1px solid var(--border); }
  /* Kum — Huzur: soğuk pastel yerine SICAK TOPRAK ailesi (analog uyum = dinginlik); metinler AA kontrastlı koyu sıcak ton */
  :root[data-tema="kum"] .ozet-kart.k-mor   { background:#f1e7d2; color:#6a5c34; }  /* Toplam — yulaf */
  :root[data-tema="kum"] .ozet-kart.k-seft  { background:#f3e2d0; color:#8a5430; }  /* Bu hafta — kil/kavun */
  :root[data-tema="kum"] .ozet-kart.k-mavi  { background:#e8ebd9; color:#515c33; }  /* Tamamlanma — adaçayı */
  :root[data-tema="kum"] .ozet-kart.k-yesil { background:#f1e1d9; color:#875046; }  /* Bekleyen — tozlu pembe */
  :root[data-tema="koyu"] .ozet-bar { background: rgba(255,255,255,.12); }

  .selam {
    font-family: inherit; line-height: 1.4; color: var(--text-soft);
  }
  .selam:empty { display: none; }
  .selam b { color: var(--accent-ink); font-weight: 700; }
  /* masthead kicker: tarih — arşiv fişi dokusu (mono, harf aralıklı, sönük) */
  .selam-kicker {
    display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 12px;
  }
  /* === Sıcak selam: greeting = sıcak serif + sıcak amber ton; kuyruk = sakin sistem-sans ===
     Renk: color-mix(--warn, --text) — projede zaten var olan idiom (bkz. .s-calisiyorum).
     4 temaya YENİ token/override olmadan otomatik uyar; soğuk --accent bilinçle kullanılmadı. */
  .selam-bas {
    display: block;                     /* masthead: kendi satırı (imza) */
    font-family: var(--serif);          /* humanist, SICAK serif — akşam-kütüphanesi imzası */
    font-weight: 700;
    font-size: clamp(30px, 4.6vw, 44px);
    letter-spacing: -.4px; line-height: 1.16;
    color: color-mix(in srgb, var(--warn) 52%, var(--text));   /* sıcak ama masthead ağırlığında okunur */
  }
  .selam-bas b { color: inherit; font-weight: 700; }  /* selam içindeki olası <b> de sıcak kalsın */
  .selam-bas .vurgu { color: var(--accent-ink); }     /* slogan vurgusu: accent renk */
  .selam-kuyruk {
    display: block; margin: 12px auto 0; max-width: 60ch;
    font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.55;
    color: var(--text-soft);            /* ikincil/sakin: hiyerarşi korunur */
  }
  .selam-kuyruk .vurgu-2 { color: var(--text); font-weight: 600; }
  /* KUM teması: zemin açık krem; masthead'i bir tık koyultup kontrastı güvene al */
  :root[data-tema="kum"] .selam-bas {
    color: color-mix(in srgb, var(--warn) 46%, var(--text));
  }
  /* SADE teması: masthead sıcak amber yerine nötr near-black (modern + yüksek kontrast) */
  :root[data-tema="sade"] .selam-bas { color: var(--text); }
  :root[data-tema="yaprak"] .selam-bas { color: var(--text); }
  /* AKŞAM (koyu): masthead amber yerine nötr açık ton (dark'ta sıcak renk rahatsız etmesin) */
  :root[data-tema="koyu"] .selam-bas { color: var(--text); }
  .selam-link {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--accent-ink); font-weight: 700; cursor: pointer; text-decoration: underline;
  }
  /* Boş sonuç ekranındaki tek eylem düğmesi */
  .bos-eylem {
    margin-top: 16px; padding: 8px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    color: var(--accent-ink); background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    transition: background .15s;
  }
  .bos-eylem:hover { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
  .bos-ipuc { font-size: 12.5px; color: var(--text-dim); margin-top: 16px; }

  /* "Bugün şuna bak" hatırlatma şeridi */
  .bugun-serit { max-width: 1680px; margin: 8px auto 0; padding: 0 20px; }
  .bugun-ic {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--radius); padding: 11px 16px;
  }
  .bugun-ic .bugun-etk { font-weight: 600; color: var(--text-soft); flex: none; }
  .bugun-ic .bugun-baslik { font-weight: 600; color: var(--text); transition: color .15s; }
  .bugun-ic .bugun-bosluk { flex: 1; }
  .bugun-ic .bugun-ac-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left;
  }
  .bugun-ic .bugun-ac-btn .bugun-ok { color: var(--text-dim); font-size: 18px; line-height: 1; transition: color .15s, transform .15s; }
  .bugun-ic .bugun-ac-btn:hover .bugun-baslik { color: var(--accent-ink); }
  .bugun-ic .bugun-ac-btn:hover .bugun-ok { color: var(--accent-ink); transform: translateX(2px); }
  .bugun-ic .bugun-sonraki {
    flex: none; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--card); color: var(--text-soft); cursor: pointer;
    transition: background .15s, color .15s;
  }
  .bugun-ic .bugun-sonraki:hover { background: var(--card-2); color: var(--text); }
  /* Panel feature varyantı: editöryal "öne çıkan" — sıcak accent kenar + hafif accent zemin */
  .panel-bugun .bugun-ic {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-sm);
  }
  .panel-bugun .bugun-ic .bugun-etk { color: var(--accent-ink); }
  .panel-bugun .bugun-ic .bugun-baslik { font-family: var(--serif); font-size: 16px; }
  .panel-bugun .bugun-ic .bugun-sonraki { background: color-mix(in srgb, var(--card) 70%, transparent); }

  /* "Bu hafta" bandı — haftanın sakin özeti (claude'suz, anlık hesap) */
  .haftalik-ic {
    background: var(--card-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  .haftalik-bas.haftalik-toggle { cursor: pointer; background: none; border: none; color: inherit;
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; margin: -5px -8px; border-radius: 10px; }
  .haftalik-bas.haftalik-toggle:hover { background: var(--card); }
  .haftalik-katla-et { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--text-soft); flex: none; }
  .haftalik-bas.haftalik-toggle:hover .haftalik-katla-et { color: var(--accent-ink); }
  .haftalik-cev { color: inherit; font-size: 10px; }
  .haftalik-yeni { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: var(--accent); padding: 1px 7px; border-radius: 999px; margin-left: 6px; flex: none; }
  .haftalik-bas { display: inline-flex; align-items: center; gap: 8px; flex: none; }
  .haftalik-bas .etk { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--text); }
  .haftalik-bas .ik-svg { width: 16px; height: 16px; color: var(--accent); }
  .haftalik-ozet { font-size: 14.5px; color: var(--text-soft); line-height: 1.5; }
  .haftalik-ozet b { color: var(--accent-ink); font-weight: 700; }
  .haftalik-picks { display: flex; flex-wrap: wrap; gap: 8px; }
  .haftalik-pick {
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border-2); color: var(--text-soft); cursor: pointer;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
  }
  .haftalik-pick:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
  /* Haftalık AI özeti (claude) — istatistik şeridinin altında tam genişlikte açılır */
  .haftalik-govde { flex-basis: 100%; width: 100%; }
  .haftalik-digest { font-size: 14px; color: var(--text); line-height: 1.62; }
  .haftalik-digest p { margin: 0 0 8px; }
  .haftalik-digest p:last-child { margin-bottom: 0; }
  .haftalik-digest.yukleniyor { display: flex; align-items: center; gap: 10px; color: var(--text-soft); }
  .digest-ref { color: var(--accent-ink); font-weight: 700; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
  .digest-ref:hover { background: var(--accent-soft); }
  .haftalik-cikar, .haftalik-yenile {
    font: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px; cursor: pointer;
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-2));
    color: var(--accent-ink); transition: background .12s, border-color .12s;
  }
  .haftalik-cikar:hover, .haftalik-yenile:hover { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
  .haftalik-yenile { margin-top: 8px; font-size: 12px; padding: 5px 12px; background: var(--card); color: var(--text-soft); border-color: var(--border-2); }
  /* "Aç" ile karta gidince kısa vurgulama */
  .kart.vurgu { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
  @media (max-width: 620px) { .bugun-serit { padding: 0 14px; } }

  /* ============================ İÇERİK ============================ */
  main {
    max-width: 1680px;
    margin: 0 auto;
    padding: 6px 20px 80px;
  }

  .konu-grup { margin-top: 34px; }
  .konu-grup:first-child { margin-top: 16px; }
  /* Editöryal "raf etiketi": serif konu + ince çizgi + mono sayaç — uzun akışta net bölüm kırılımı.
     Yapışkan: kaydırırken üst çubuğun (62px) hemen altına sabitlenir; o bölümdeyken hep görünür. */
  .konu-baslik {
    position: sticky; top: 61px; z-index: 5;
    display: flex; align-items: center; gap: 11px;
    font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: -.2px;
    margin: 0 0 12px; padding: 7px 0;
    color: var(--text);
    background: var(--bg);   /* kartlar altından geçmesin (opak şerit) */
  }
  .konu-baslik .nokta {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--text-dim); flex: none;
  }
  .konu-baslik .kb-ad { flex: none; }
  .konu-baslik .kb-cizgi { flex: 1; height: 1px; background: var(--border-2); }
  .konu-baslik .sayi {
    flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
    color: var(--text-dim); background: transparent; padding: 0; border-radius: 0;
  }

  .kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
  }

  /* ============================ KART ============================ */
  .kart {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 20px 18px;
    display: flex; flex-direction: column; gap: 13px;
    transition: box-shadow .18s, border-color .18s, opacity .2s, transform .1s;
    /* ekran dışı kartların yerleşim/boyamasını ertele (yüzlerce kartta hız) */
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
  }
  .kart:hover { border-color: var(--border-2); transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(20,30,50,.07); }
  /* "Bitti": kart devre dışı/bozuk gibi solmasın. Yüzeyi hafif geri çek + başlığı yumuşat;
     ayaktaki yeşil durum noktası tam görünür kalır (tamamlandı, dinleniyor — okunur). */
  .kart.bitti { background: var(--card-2); border-color: var(--border); }
  .kart.bitti .kart-baslik { color: var(--text-soft); }

  /* ===== Toplu seçim ===== */
  .kart-sec {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    width: 22px; height: 22px; border-radius: 7px;
    border: 1.5px solid var(--border-2); background: var(--card);
    display: none; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: background .12s, border-color .12s;
  }
  body.secim-modu .kart-sec { display: grid; }
  .kart-sec svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity .12s; }
  body.secim-modu .kart { cursor: pointer; }
  body.secim-modu .kart-kicker { padding-left: 28px; }   /* kutuya yer aç */
  .kart.secili { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent), var(--shadow-sm); }
  .kart.secili .kart-sec { background: var(--accent); border-color: var(--accent); }
  .kart.secili .kart-sec svg { opacity: 1; }
  /* Seçim modunda kart içi tıklamalar seçim yapar; ayak/link pasif */
  body.secim-modu .kart-ayak, body.secim-modu .kart-link { pointer-events: none; }
  #sec-btn.aktif { background: var(--accent); border-color: var(--accent); color: #fff; }
  #sec-btn.aktif .ik-svg { color: #fff; }

  /* Liste başlığı: seçim modunda kontroller "Seç"in YERİNDE inline açılır (normal <-> seçim) */
  .liste-normal, .liste-secim { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: wrap; }
  .liste-secim { display: none; }
  body.secim-modu .liste-normal { display: none; }
  body.secim-modu .liste-secim { display: flex; }
  /* Seçim modunda kontrol barı YAPIŞKAN kalsın (kaydırıp kart seçerken piller kaybolmasın) */
  body.secim-modu .liste-ust {
    position: sticky; top: 62px; z-index: 40; margin-top: 0;
    background: var(--bg); border-bottom: 1px solid var(--border); padding: 9px 20px;
  }
  body.secim-modu .konu-baslik { position: static; }   /* yapışkan bölüm başlığı seçim barıyla çakışmasın */
  .toplu-sayi { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--accent-ink); padding: 0 2px; flex: none; }
  .toplu-ayrac { width: 1px; height: 22px; background: var(--border-2); flex: none; }
  .toplu-eylemler { display: inline-flex; align-items: center; gap: 6px; }
  .toplu-eylemler.pasif { opacity: .38; pointer-events: none; }
  .toplu-btn {
    font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--card-2); color: var(--text-soft); cursor: pointer;
    white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
  }
  .toplu-btn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
  .toplu-sil { margin-left: 4px; color: color-mix(in srgb, var(--danger) 72%, var(--text-soft)); border-color: color-mix(in srgb, var(--danger) 22%, var(--border-2)); }
  .toplu-sil:hover { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
  .toplu-btn.pasif { opacity: .35; pointer-events: none; }
  /* eylem grubu içinde durum-değiştir ile taşı/ata arasını ayır; seçiciler kırpılmasın */
  .toplu-ic-ayrac { width: 1px; align-self: stretch; min-height: 18px; background: var(--border); margin: 0 4px; flex: none; }
  select.toplu-klasor-sec, input.toplu-alt-girdi { flex: none; }
  .toplu-tumu.aktif { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
  .toplu-kapat { background: transparent; border-color: transparent; }
  .toplu-bosluk { flex: 1; min-width: 2px; }
  /* Klasör seçiciler (toplu taşı + Ekle kutusu) — native select, sade görünüm */
  select.toplu-klasor-sec { -webkit-appearance: none; appearance: none; padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
  .ekle-klasor-sec { -webkit-appearance: none; appearance: none;
    font-size: 13px; font-weight: 600; padding: 8px 28px 8px 12px; border-radius: 999px;
    border: 1px solid var(--border-2); background-color: var(--card-2); color: var(--text-soft); cursor: pointer; max-width: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
    transition: background-color .12s, color .12s, border-color .12s; }
  .ekle-klasor-sec:hover { background-color: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
  .ekle-klasor-sec:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .ekle-alt-girdi {
    font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; max-width: 160px;
    border: 1px solid var(--border-2); background-color: var(--card-2); color: var(--text); transition: border-color .12s, box-shadow .12s;
  }
  .ekle-alt-girdi::placeholder { color: var(--text-dim); font-weight: 500; }
  .ekle-alt-girdi:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  /* "Nereye gidecek" hedef grubu: klasör ikonu + klasör/alt-konu — Ekle/İşle eyleminden görsel olarak ayrı */
  .ekle-hedef { display: inline-flex; align-items: center; gap: 6px; }
  .ekle-hedef-ik { width: 16px; height: 16px; color: var(--text-dim); flex: none; }

  /* Liste üst-bilgi satırı (Kasam/Keşif): solda öğe sayısı, sağda "Seç" — eyleme bitişik bağlam */
  .liste-ust {
    max-width: 1680px; margin: 14px auto 0; padding: 0 20px;
    display: flex; align-items: center; gap: 10px;
  }
  .liste-sayi { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
  .liste-ust-bosluk { flex: 1; }
  .liste-sec-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: var(--card-2); color: var(--text-soft); border: 1px solid var(--border-2); cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
  }
  .liste-sec-btn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
  .liste-sec-btn .ik-svg { width: 16px; height: 16px; }

  .kart-ust {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  }
  .kart-baslik {
    font-size: 17px; font-weight: 700; letter-spacing: -.2px;
    line-height: 1.3; margin: 0; overflow-wrap: anywhere;
    /* En fazla 2 satır; uzun başlık kart yüksekliğini şişirmesin (taranabilir kalsın) — tam metin title'da */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kart-baslik-tik { cursor: pointer; transition: color .15s; }
  .kart-baslik-tik:hover { color: var(--accent-ink); }
  /* (kaldırıldı) Eski dolu-pastel kaynak rozetleri ve YENİ rozeti artık render
     edilmiyor — kartlar sade "kaynak · tarih" kicker'ı + tek nokta kullanıyor. */

  .kart-link {
    font-size: 13px; word-break: break-all;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--accent-ink);
  }
  .kart-link .ok { font-size: 11px; opacity: .8; }

  .kart-ozet {
    font-size: 14px; color: var(--text-soft); line-height: 1.6;
    margin: 0; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* tıkla-genişlet: açıkken kırpma kalkar, özet tamamen görünür */
  .kart-ozet.acik { -webkit-line-clamp: unset; display: block; overflow: visible; }
  .ozet-ac {
    align-self: flex-start; margin-top: -3px;
    font-size: 12px; font-weight: 600; color: var(--accent-ink);
    background: none; border: none; padding: 2px 0;
  }
  .ozet-ac:hover { text-decoration: underline; }
  .ozet-ac[hidden] { display: none; }

  /* Karttan düzenleme paneli */
  .duzenle-govde { display: none; flex-direction: column; gap: 6px; margin-top: 4px; }
  .duzenle-govde.acik { display: flex; }
  .duzenle-govde .dz-etk {
    font-size: 11px; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .duzenle-govde input, .duzenle-govde textarea {
    width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-2); background: var(--card-2); color: var(--text);
    font-family: inherit; font-size: 13px; outline: none; resize: vertical;
  }
  .duzenle-govde input:focus, .duzenle-govde textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card);
  }
  .duzenle-govde .dz-btnler { display: flex; gap: 8px; margin-top: 2px; }
  /* #6 düzenle panelinde "Yer" (klasör) seçici + konu/alt sarmalayıcıları (panel ile aynı dikey ritim) */
  .duzenle-govde .dz-konu-sar, .duzenle-govde .dz-alt-sar { display: flex; flex-direction: column; gap: 6px; }
  .duzenle-govde .dz-klasor {
    -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box;
    padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text);
    background: var(--card-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer;
  }
  .duzenle-govde .dz-klasor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  /* #5 süzgeç altında durumu değişen kartın yumuşak çıkışı (sayaç+liste tutarlı kalsın) */
  .kart.suzulecek { pointer-events: none; }
  .kart.cikiyor { opacity: 0; transform: scale(.96) translateY(-4px); transition: opacity .34s ease, transform .34s ease; }
  /* #4 bekleyen (işlenmemiş girdi) şeridi — Notlarım/Keşif üstünde */
  .bekleyen-serit {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: var(--radius-sm); color: var(--accent-ink); font-size: 13.5px;
  }
  .bekleyen-serit .bs-ik { display: inline-flex; flex: none; }
  .bekleyen-serit .bs-ik .ik-svg { width: 18px; height: 18px; }
  .bekleyen-serit .bs-metin { flex: 1 1 auto; min-width: 0; }
  .bekleyen-serit .bs-metin strong { font-weight: 800; }
  .bekleyen-serit .bs-isle {
    flex: none; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
    background: var(--accent); color: #fff; border: none; cursor: pointer; transition: background .14s;
  }
  .bekleyen-serit .bs-isle:hover { background: var(--accent-ink); }
  /* #7 eylemli ("Geri al") toast */
  .toast.toast-eylem { display: flex; align-items: center; gap: 12px; }
  .toast .toast-eylem-btn {
    flex: none; padding: 4px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 800;
    background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.32); cursor: pointer;
  }
  .toast .toast-eylem-btn:hover { background: rgba(255,255,255,.3); }
  /* İÇERİK-ÜSTÜ DURUM şeridi (masaüstü + mobil; sidebar'dan buraya taşındı — kurul kararı).
     Top bar'ın hemen altına yapışır (sticky), kartlar altından kayar. .seg-btn dilini paylaşır.
     Kapsayıcı id'si tarihsel olarak #mobil-durum; artık her ekranda görünür. */
  .mobil-durum {
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
    max-width: 1680px; margin: 0 auto 16px; padding: 11px 20px 12px;
    position: sticky; top: 57px; z-index: 40;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .mobil-durum .seg-btn {
    flex: none; padding: 6px 13px; border-radius: 999px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--text-soft);
    background: var(--card-2); border: 1px solid transparent; box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .mobil-durum .seg-btn:hover { background: var(--bg-soft); color: var(--text); }
  .mobil-durum .seg-btn[hidden] { display: none; }
  .mobil-durum .seg-btn.aktif { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
  .mobil-durum .seg-btn .adet { opacity: .75; font-weight: 700; margin-left: 4px; font-size: 11.5px; }
  .mobil-durum .seg-btn.aktif .adet { opacity: .9; }
  .mobil-durum .seg-eksik { border-color: color-mix(in srgb, var(--warn) 38%, var(--border)); color: color-mix(in srgb, var(--warn) 80%, var(--text)); }
  .mobil-durum .seg-eksik.aktif { background: var(--warn); color: #fff; border-color: var(--warn); }
  .mobil-durum .seg-bugun { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); color: var(--accent-ink); }
  .mobil-durum .seg-bugun.aktif { background: var(--accent); color: #fff; border-color: var(--accent); }
  @media (max-width: 900px) {
    /* mobil: tek satır yatay kaydır (sarma yok), top bar daha kısa */
    .mobil-durum {
      flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
      margin: 0 0 12px; padding: 9px 14px; top: 53px;
    }
    .mobil-durum::-webkit-scrollbar { display: none; }
    .mobil-durum .seg-btn { padding: 7px 13px; font-size: 13px; }
  }
  /* #3 okuma penceresinde görev listesi (- [ ] / - [x]) — salt-okunur kutu */
  li.md-gorev { list-style: none; display: flex; align-items: flex-start; gap: 9px; }
  .md-gorev .md-kutu {
    flex: none; width: 17px; height: 17px; margin-top: 2px; position: relative;
    border: 1.6px solid var(--border-2); border-radius: 5px; background: var(--card);
  }
  .md-gorev.dolu .md-kutu { background: var(--good); border-color: var(--good); }
  .md-gorev.dolu .md-kutu::after {
    content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .md-gorev.dolu .md-gorev-metin { color: var(--text-soft); text-decoration: line-through; }
  .duzenle-govde .dz-kaydet {
    font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
    background: var(--accent); color: #fff; border: none;
  }
  .duzenle-govde .dz-kaydet:hover { background: var(--accent-ink); }
  .duzenle-govde .dz-vazgec {
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    background: var(--card); color: var(--text-soft); border: 1px solid var(--border-2);
  }
  .duzenle-govde .dz-vazgec:hover { background: var(--bg-soft); color: var(--text); }

  /* ============================ OKUMA KARTI (C) ============================ */
  /* Üst kicker: kaynak · tarih (balon yok, sade soluk satır) */
  .kart-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-dim); margin-bottom: -2px;
  }
  .kart-kicker .kicker-ayrac { opacity: .55; }
  /* kaynak = küçük çizgi-ikon (PLATFORM markası rengi) + ad (nötr) + okuma süresi */
  .kart-kicker .kicker-kaynak { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--text-soft); }
  .kart-kicker .kicker-ik { width: 13.5px; height: 13.5px; flex: none; opacity: .95; }
  .kicker-ik.ki-youtube  { color: #e5332a; }   /* YouTube kırmızı */
  .kicker-ik.ki-instagram{ color: #e1306c; }   /* Instagram pembe */
  .kicker-ik.ki-whatsapp { color: #1fa756; }   /* WhatsApp yeşil */
  .kicker-ik.ki-x        { color: #1d2a35; }   /* X mürekkep */
  .kicker-ik.ki-web      { color: #5b86b3; }   /* Web — nötr globe mavisi (platform değil) */
  .kicker-ik.ki-not      { color: var(--text-dim); opacity: .8; }  /* Not — kişisel, nötr */
  :root[data-tema="koyu"] .kicker-ik.ki-x { color: #e8eaed; }      /* koyu temada siyah X kaybolmasın */
  .kart-kicker .kicker-sure { font-variant-numeric: tabular-nums; }
  /* Kartta pastel konu rozeti (Clarity tarzı renkli kategori etiketi). --cr = konuRenk(konu) */
  .kart-konu-rozet {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
    background: color-mix(in srgb, var(--cr, var(--accent)) 16%, var(--card));
    color: color-mix(in srgb, var(--cr, var(--accent)) 66%, var(--text));
  }
  /* Başlık önünde "yeni" noktası (YENİ rozeti yerine) */
  .yeni-nokta {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 84%, #000);
    margin-right: 7px; vertical-align: middle; flex: none;
  }
  /* Tek ince ikon ayağı */
  .kart-ayak {
    /* ASLA satır kaymaz: tek satırda kalır (flex-wrap:nowrap). Aksiyon ikon/etiketleri
       ikinci satıra düşüp hizayı bozmasın — bu satıra buton eklerken bu kurala DİKKAT. */
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; min-width: 0;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
  }
  .kart-ayak .ayak-ik { white-space: nowrap; }
  .kart-ayak .ayak-ik {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 4px 2px;
    font-size: 12.5px; font-weight: 600; color: var(--text-dim);
    transition: color .15s;
  }
  .kart-ayak .ayak-ik:hover { color: var(--text-soft); }
  .kart-ayak .ayak-ik .cev { font-size: 10px; transition: transform .18s; }
  .kart-ayak .detay-ac.acik .cev { transform: rotate(90deg); }
  .kart-ayak .duzenle-ac { margin-left: auto; font-size: 14px; padding: 4px 4px; }
  .kart-ayak .sil-btn { font-size: 14px; padding: 4px 4px; }
  .kart-ayak .sil-btn:hover { color: var(--danger); background: none; border-color: transparent; }
  /* Düzenle/Sil = nadir/yıkıcı; dinlenmede geri planda, kart hover'ında ya da odakta belirginleşir. */
  .kart-ayak .duzenle-ac, .kart-ayak .sil-btn { opacity: .38; transition: opacity .15s, color .15s; }
  .kart:hover .duzenle-ac, .kart:hover .sil-btn,
  .kart-ayak .duzenle-ac:focus-visible, .kart-ayak .sil-btn:focus-visible { opacity: 1; }
  @media (hover: none) { .kart-ayak .duzenle-ac, .kart-ayak .sil-btn { opacity: .65; } }
  /* Öneri'de "İlgilenmiyorum" ikon-only (⊗); düzenle/sil gibi ikincil aksiyon — dinlenmede soluk */
  .kart-ayak .oneri-gizle { opacity: .42; padding: 4px 4px; transition: opacity .15s, color .15s; }
  .kart:hover .oneri-gizle, .kart-ayak .oneri-gizle:focus-visible { opacity: 1; }
  @media (hover: none) { .kart-ayak .oneri-gizle { opacity: .65; } }
  .not-dolu { color: var(--accent); font-weight: 700; margin-left: 1px; }
  .durum-goster .durum-nokta {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--text-dim);
  }
  .durum-goster.s-yeni        .durum-nokta { background: color-mix(in srgb, var(--accent) 84%, #000); }
  .durum-goster.s-calisiyorum .durum-nokta { background: color-mix(in srgb, var(--warn) 68%, #000); }
  .durum-goster.s-bitti       .durum-nokta { background: color-mix(in srgb, var(--good) 80%, #000); }
  /* Durum göstericisi = pastel hap (Clarity kanban-etiket hissi); renkli nokta içinde kalır */
  .durum-goster.s-yeni, .durum-goster.s-calisiyorum, .durum-goster.s-bitti {
    padding: 4px 11px; border-radius: 999px; font-weight: 600;
  }
  .durum-goster.s-yeni        { background: var(--accent-soft); color: var(--accent-ink); }
  .durum-goster.s-calisiyorum { background: var(--warn-soft);   color: color-mix(in srgb, var(--warn) 72%, var(--text)); }
  .durum-goster.s-bitti       { background: var(--good-soft);   color: color-mix(in srgb, var(--good) 72%, var(--text)); }
  .durum-goster:hover { filter: brightness(.97); }

  /* ============================ EKLER (WhatsApp medya) ============================ */
  .ekler-serit { display: flex; flex-wrap: wrap; gap: 8px; }
  .ek-gorsel {
    height: 84px; max-width: 100%; object-fit: cover; cursor: zoom-in;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--card-2);
  }
  .ek-video {
    width: 100%; max-height: 220px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: #000;
  }
  .ek-dosya {
    font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--card-2);
    color: var(--text-soft); word-break: break-all;
  }
  .ek-dosya:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
  .ek-yok {
    font-size: 12px; color: var(--text-dim); font-style: italic;
    padding: 6px 10px; border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
  }

  /* ============================ DETAYLI ÖZET (yapılandırılmış) ============================ */
  .kart-detay { display: flex; flex-direction: column; }
  .detay-ac {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--accent-ink);
    background: transparent; border: 1px solid transparent;
    padding: 4px 2px; border-radius: 8px;
    transition: color .15s;
  }
  .detay-ac:hover { color: var(--accent); }
  .detay-ac .cev { font-size: 10px; transition: transform .18s; }
  .detay-ac.acik .cev { transform: rotate(90deg); }
  .detay-sar { margin-top: 8px; }
  /* Açılır detay, Notlarım önizlemesiyle aynı markdown stilini (.not-onizleme) kullanır. */

  .kart-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; color: var(--text-dim);
    margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border);
  }

  /* (Durum yüzer seçici kaldırıldı — durum pili artık tek-tıkla döngü.) */

  /* Onay modalı — ekranın önünde ortalanmış (silme onayı vb.) */
  #onay-modal {
    position: fixed; inset: 0; z-index: 9600; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(25,18,10,.42);
  }
  #onay-modal.gor { display: flex; }
  .onay-panel {
    background: var(--card); border: 1px solid var(--border-2);
    border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,.32);
    padding: 22px 22px 18px; max-width: 380px; width: 100%;
  }
  #onay-modal.gor .onay-panel { animation: onay-gir .2s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes onay-gir { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { #onay-modal.gor .onay-panel { animation: none; } }
  .onay-mesaj { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--text); font-weight: 600; }
  .onay-btnler { display: flex; justify-content: flex-end; gap: 10px; }
  .onay-btnler button { padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: background .14s, color .14s; }
  .onay-vazgec { background: var(--card-2); color: var(--text-soft); border-color: var(--border-2); }
  .onay-vazgec:hover { background: var(--bg-soft); color: var(--text); }
  .onay-evet { background: var(--danger); color: #fff; }
  .onay-evet:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }

  /* Öneri hedef seçici modalı (Notlarıma / klasör + alt-konu) — onay modalıyla aynı kabuk */
  #hedef-modal {
    position: fixed; inset: 0; z-index: 9600; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(25,18,10,.42);
  }
  #hedef-modal.gor { display: flex; }
  .hedef-panel {
    background: var(--card); border: 1px solid var(--border-2);
    border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0,0,0,.32);
    padding: 18px 16px 14px; max-width: 360px; width: 100%; max-height: 76vh; display: flex; flex-direction: column;
  }
  #hedef-modal.gor .hedef-panel { animation: onay-gir .2s cubic-bezier(.22, .61, .36, 1) both; }
  @media (prefers-reduced-motion: reduce) { #hedef-modal.gor .hedef-panel { animation: none; } }
  .hedef-baslik { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); padding: 0 4px; }
  .hedef-liste { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
  .hedef-sec {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid transparent;
    background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .hedef-sec .ik-svg { width: 17px; height: 17px; flex: none; color: var(--text-dim); }
  .hedef-sec .hkad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hedef-sec .hac { flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
  .hedef-sec:hover { background: var(--card-2); }
  .hedef-sec:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .hedef-sec.birincil { background: var(--accent-soft); color: var(--accent-ink); }
  .hedef-sec.birincil .ik-svg { color: var(--accent-ink); }
  .hedef-sec.birincil .hac { color: color-mix(in srgb, var(--accent-ink) 70%, var(--text-dim)); }
  .hedef-sec.alt-sec { padding-left: 34px; font-weight: 600; color: var(--text-soft); font-size: 13px; }
  .hedef-sec.alt-sec .hnokta { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex: none; }
  .hedef-altsatir { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 4px; }
  .hedef-vazgec {
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
    background: var(--card-2); color: var(--text-soft); border: 1px solid var(--border-2); cursor: pointer;
  }
  .hedef-vazgec:hover { background: var(--bg-soft); color: var(--text); }

  /* ============================ SİL (öğe silme) ============================ */
  .kart-alt {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .sil-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    color: var(--text-dim);
    padding: 5px 9px; border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: color .12s, background .12s, border-color .12s;
  }
  .sil-btn:hover {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  }
  /* (Satır-içi sil-onay kaldırıldı — silme tek yoldan: merkezi onaySor modalı.) */

  /* Notlarım açılır alan */
  .not-ac {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--text-soft);
    padding: 5px 4px; border-radius: 6px;
  }
  .not-ac:hover { color: var(--text); }
  .not-ac .cev { transition: transform .18s; font-size: 10px; }
  .not-ac.acik .cev { transform: rotate(90deg); }
  .not-govde { display: none; flex-direction: column; gap: 6px; }
  .not-govde.acik { display: flex; }
  textarea.not-alan {
    width: 100%; min-height: 78px; resize: vertical;
    padding: 9px 11px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-2); background: var(--card-2);
    color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.5;
    outline: none; transition: border-color .15s, box-shadow .15s;
  }
  textarea.not-alan:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--card);
  }
  .not-durum { font-size: 11.5px; color: var(--text-dim); min-height: 14px; }
  .not-durum.kayitli { color: var(--good); }

  /* Notlarım: Yaz / Önizle sekmeleri */
  .not-sekme {
    display: inline-flex; align-self: flex-start;
    border: 1px solid var(--border-2); border-radius: 999px;
    overflow: hidden; background: var(--card-2);
  }
  .not-sekme .not-tab {
    font-size: 11.5px; font-weight: 600; padding: 4px 13px;
    color: var(--text-soft); transition: background .12s, color .12s;
    border-right: 1px solid var(--border);
  }
  .not-sekme .not-tab:last-child { border-right: none; }
  .not-sekme .not-tab:hover { background: var(--bg-soft); }
  .not-sekme .not-tab.sec { background: var(--accent); color: #fff; }

  /* Notlarım: işlenmiş markdown önizleme kutusu */
  .not-onizleme {
    border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    background: var(--card-2); padding: 9px 13px;
    font-size: 13px; line-height: 1.6; color: var(--text);
    word-break: break-word; overflow-wrap: anywhere; min-height: 78px;
  }
  .not-onizleme > :first-child { margin-top: 0; }
  .not-onizleme > :last-child { margin-bottom: 0; }
  .not-onizleme h1, .not-onizleme h2, .not-onizleme h3, .not-onizleme h4 {
    margin: 12px 0 6px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px;
  }
  .not-onizleme h1 { font-size: 16.5px; }
  .not-onizleme h2 { font-size: 15px; }
  .not-onizleme h3 { font-size: 13.5px; }
  .not-onizleme h4 { font-size: 13px; color: var(--text-soft); }
  .not-onizleme p { margin: 7px 0; }
  .not-onizleme ul, .not-onizleme ol { margin: 7px 0; padding-left: 22px; }
  .not-onizleme li { margin: 2px 0; }
  .not-onizleme a { color: var(--accent-ink); }
  .not-onizleme code {
    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    font-size: 12px; background: var(--bg-soft); color: var(--accent-ink);
    padding: 1px 5px; border-radius: 5px;
  }
  .not-onizleme pre.md-kod {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0;
    overflow-x: auto;
  }
  .not-onizleme pre.md-kod code {
    background: none; color: var(--text); padding: 0; font-size: 12px;
  }
  .not-onizleme blockquote {
    margin: 8px 0; padding: 2px 12px; color: var(--text-soft);
    border-left: 3px solid var(--border-2);
  }
  .not-onizleme hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
  .not-onizleme .md-bos { color: var(--text-dim); font-style: italic; margin: 0; }

  /* ============================ BOŞ DURUMLAR ============================ */
  .bos {
    text-align: center; padding: 70px 20px; color: var(--text-dim);
  }
  .bos .emoji { font-size: 44px; margin-bottom: 12px; }
  .bos h2 { font-size: 18px; color: var(--text-soft); margin: 0 0 6px; font-weight: 700; }
  .bos p { margin: 4px 0; font-size: 14px; }
  .bos kbd {
    font-family: inherit; font-size: 12px; font-weight: 600;
    background: var(--card); border: 1px solid var(--border-2);
    border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px;
    color: var(--text-soft);
  }

  /* ===== Onboarding: boş kasada tek örnek "işlenmiş" kart ===== */
  .bos-onb { max-width: 600px; margin: 0 auto; padding-top: 56px; }
  .onb-kicker { font-size: 14px; color: var(--text-soft); margin: 0 0 16px; }
  .onb-kicker b { color: var(--text); }
  .bos-onb .ornek-kart { text-align: left; max-width: 540px; margin: 0 auto; position: relative; cursor: default; }
  .ornek-rozet {
    position: absolute; top: 12px; right: 12px;
    font-size: 10px; letter-spacing: .08em; font-weight: 700;
    color: var(--text-dim); background: var(--card-2);
    border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px;
  }
  .ornek-ac {
    background: none; border: none; color: var(--accent-ink);
    font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0 2px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .ornek-ac .cev { font-size: 11px; transition: transform .18s; }
  .ornek-ac.acik .cev { transform: rotate(90deg); }
  .ornek-detay {
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border);
    text-align: left; font-size: 14px; line-height: 1.6; color: var(--text);
  }
  .ornek-detay[hidden] { display: none; }
  .ornek-detay h2 { font-size: 14px; font-weight: 700; margin: 12px 0 5px; color: var(--text-soft); }
  .ornek-detay h2:first-child { margin-top: 0; }
  .ornek-detay ul { margin: 4px 0; padding-left: 18px; }
  .ornek-detay li { margin: 2px 0; }
  .ornek-detay p { margin: 5px 0; }
  .ornek-konu { margin-top: 12px; }
  .ornek-konu-cip {
    font-size: 12px; color: var(--accent-ink); background: var(--accent-soft);
    padding: 3px 10px; border-radius: 999px;
  }
  .onb-aciklama { font-size: 13px; color: var(--text-soft); line-height: 1.6; margin: 18px auto 6px; max-width: 540px; }
  .onb-kaybol { color: var(--text-dim); }
  .onb-telegram { margin: 18px auto 0; max-width: 540px; text-align: left;
    font-size: 12.5px; line-height: 1.6; color: var(--text-soft);
    background: var(--card-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 14px; }
  .onb-telegram[hidden] { display: none; }
  .onb-telegram b { color: var(--text); font-weight: 700; }
  .onb-telegram code { background: var(--card); border: 1px solid var(--border);
    padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12px; }
  .onb-tg-ik { margin-right: 2px; }

  /* ============================ BİLDİRİMLER (toast) ============================ */
  #bildirimler {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 200; display: flex; flex-direction: column; gap: 8px;
    align-items: center; pointer-events: none; width: max-content; max-width: 92vw;
  }
  .toast {
    pointer-events: auto;
    background: var(--text); color: var(--bg);
    padding: 11px 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 9px;
    animation: toast-gir .25s ease;
  }
  .toast.iyi    { background: var(--good); color:#fff; }
  .toast.uyari  { background: var(--warn); color:#fff; }
  .toast.hata   { background: var(--danger); color:#fff; }
  .toast.cikis  { animation: toast-cik .25s ease forwards; }
  @keyframes toast-gir { from { opacity:0; transform: translateY(10px); } }
  @keyframes toast-cik { to   { opacity:0; transform: translateY(10px); } }
  @media (max-width: 900px) { #bildirimler { bottom: 86px; } } /* mobilde FAB'ın üstünde kalsın */
  /* (F) Kaydet sonrası düzenlenen/taşınan kartı kısa vurgula (gözden kaçmasın) */
  .kart.vurgu { animation: kart-vurgu 1.7s ease both; }
  @keyframes kart-vurgu {
    0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-soft); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  /* (C) Hızlı yakala kutusunda algılanan link rozeti */
  .ekle-link-rozet {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin: 0 0 2px; padding: 4px 10px; border-radius: 999px; max-width: 100%; box-sizing: border-box;
    background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600;
  }
  /* display:inline-flex, [hidden] attribute'ünün UA display:none'ını eziyordu -> link yokken bile
     "Link algılandı:" görünüyordu. [hidden] iken kesin gizle. */
  .ekle-link-rozet[hidden] { display: none; }
  .ekle-link-rozet .ik-svg { width: 13px; height: 13px; flex: none; }
  .ekle-link-rozet .host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Sunucu hata şeridi */
  #hata-serit {
    display: none;
    background: var(--danger-soft); color: var(--danger);
    border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    font-size: 13.5px; font-weight: 600;
    text-align: center; padding: 9px 16px;
  }
  #hata-serit.gor { display: block; }
  #hata-serit button {
    margin-left: 10px; font-weight: 700; text-decoration: underline; color: inherit;
  }

  /* İşleme şeridi (canlı ilerleme + Durdur) */
  #isle-serit {
    display: none;
    background: var(--accent-soft); color: var(--accent-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    font-size: 13.5px; font-weight: 600; padding: 9px 16px;
  }
  #isle-serit.gor { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
  #isle-iptal-btn {
    font-weight: 700; text-decoration: underline; color: inherit;
    padding: 2px 8px; border-radius: 8px;
  }
  #isle-iptal-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

  /* Sürükle-bırak kaplaması */
  #birak-katman {
    position: fixed; inset: 0; z-index: 300; display: none;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    backdrop-filter: blur(2px);
    align-items: center; justify-content: center;
    border: 3px dashed var(--accent); border-radius: 0;
  }
  #birak-katman.gor { display: flex; }
  #birak-katman .kutu {
    background: var(--card); color: var(--text);
    padding: 26px 40px; border-radius: var(--radius);
    font-size: 18px; font-weight: 700; box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 12px;
  }

  /* ============================ GÖRSEL BÜYÜTME (lightbox) ============================ */
  #lightbox {
    position: fixed; inset: 0; z-index: 400; display: none;
    background: rgba(14, 10, 28, .82);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 32px; cursor: zoom-out;
  }
  #lightbox.gor { display: flex; animation: toast-gir .18s ease; }
  #lightbox img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--radius-sm); box-shadow: 0 10px 40px rgba(0,0,0,.35);
  }
  #lightbox .lb-kapat {
    position: absolute; top: 16px; right: 18px;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; font-size: 20px; line-height: 1;
    display: grid; place-items: center;
  }
  #lightbox .lb-kapat:hover { background: rgba(255,255,255,.28); }

  /* ============================ OKUMA PENCERESİ (Oku) ============================ */
  #okuma-modal {
    position: fixed; inset: 0; z-index: 350; display: none;
    background: rgba(14, 10, 28, .55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 5vh 16px;   /* overlay KAYDIRMAZ -> panel sabit çerçeve; içerik panelin İÇİNDE kayar */
  }
  #okuma-modal.gor { display: flex; animation: toast-gir .18s ease; }
  /* okuma ilerleme çubuğu — panelin ÜST kenarında (içerik scroll'una göre dolar) */
  .okuma-ilerleme {
    position: absolute; top: 0; left: 0; height: 3px; width: 0;
    background: var(--accent); z-index: 6; border-radius: var(--radius) 0 0 0;
    transition: width .1s linear;
  }
  /* Panel = SABİT çerçeve: ekranı değil kendi içeriğini kaydırır (flex sütun, max-height) */
  .okuma-panel {
    /* Yerel sistem okuma serif'i (CDN yok) — Akşam Kütüphanesi okuma odası imzası */
    --oku-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, Cambria, "Times New Roman", serif;
    position: relative; width: 100%; max-width: var(--oku-olcu, 720px);
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 22%, transparent),
                0 2px 8px color-mix(in srgb, var(--accent) 13%, transparent);
  }
  .okuma-panel ::selection { background: var(--accent-soft); color: var(--accent-ink); }
  /* okuma araç çubuğu (panel üstünde sabit; flex:none) */
  .okuma-arac {
    flex: none; z-index: 3;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 11px 16px; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(8px); border-radius: var(--radius) var(--radius) 0 0;
  }
  .oku-arac-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-dim);
    background: transparent; border: 1px solid transparent;
    padding: 5px 10px; border-radius: 999px; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
  }
  .oku-arac-btn:hover { background: var(--card-2); color: var(--text); }
  @media (hover: none) { .oku-arac-btn { background: var(--card-2); color: var(--text-soft); } }
  .oku-arac-btn.etkin { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
  .oku-ayrac { width: 1px; height: 20px; background: var(--border-2); margin: 0 2px; }
  .oku-bosluk { flex: 1; }
  .okuma-kapat {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--card-2); color: var(--text-soft); border: 1px solid var(--border);
    font-size: 15px; line-height: 1; display: grid; place-items: center;
  }
  .okuma-kapat:hover { background: var(--bg-soft); color: var(--text); }
  /* İçerik = panel içinde KAYAN alan (scroll burada; çubuk notun sağ kenarında) */
  .okuma-ic {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;   /* iOS momentum kaydırma */
    padding: 22px 34px 34px;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-dim) 24%, transparent) transparent;
  }
  .okuma-ic::-webkit-scrollbar { width: 9px; }
  .okuma-ic::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-dim) 24%, transparent); border-radius: 999px; border: 2.5px solid transparent; background-clip: padding-box; }
  .okuma-ic::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-dim) 42%, transparent); background-clip: padding-box; }
  .okuma-ic .okuma-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 13px;
  }
  .okuma-ic .okuma-baslik {
    font-family: var(--oku-serif); font-size: clamp(25px, 4vw, 30px); font-weight: 600;
    line-height: 1.22; letter-spacing: -.012em; color: var(--text);
    margin: 0 0 14px; word-break: break-word;
  }
  /* başlık altında kısa accent çizgi — editöryel imza */
  .okuma-ic .okuma-baslik::after {
    content: ""; display: block; width: 46px; height: 3px; border-radius: 3px;
    background: var(--accent); opacity: .9; margin-top: 15px;
  }
  .okuma-ic .okuma-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--accent-ink); margin-bottom: 14px; word-break: break-all;
  }
  /* içindekiler (TOC) */
  .okuma-toc {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 12px; margin: 2px 0 16px;
    background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  }
  .okuma-toc .toc-etk {
    font-size: 11px; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .04em; align-self: center; margin-right: 2px;
  }
  .okuma-toc button {
    font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
    background: var(--card); border: 1px solid var(--border-2); border-radius: 999px; padding: 4px 10px;
  }
  .okuma-toc button:hover { background: var(--accent-soft); border-color: var(--accent); }
  /* detay markdown: ferah + ayarlanabilir (yazı boyu/tipi) */
  .okuma-panel .not-onizleme {
    border: none; background: none; padding: 0; min-height: 0;
    font-size: var(--oku-fs, 17px); line-height: 1.75; color: var(--text);
    font-family: var(--oku-font, var(--oku-serif));
  }
  /* okuma penceresinde ANA başlıklar (##) = bölüm/chapter işareti */
  .okuma-panel .not-onizleme h2 {
    font-family: var(--oku-font, var(--oku-serif)); font-size: calc(var(--oku-fs, 17px) + 5px); font-weight: 700;
    color: var(--accent-ink); letter-spacing: -.01em;
    margin: 36px 0 14px; padding-top: 28px;
    border-top: 1px solid var(--border); scroll-margin-top: 14px;
  }
  /* ilk bölümün üstünde ayraç olmasın */
  .okuma-panel .not-onizleme h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
  /* alt başlıklar (###) belirgin alt-blok olsun */
  .okuma-panel .not-onizleme h3 {
    font-family: var(--oku-font, var(--oku-serif)); font-size: calc(var(--oku-fs, 17px) + 2px); font-weight: 700;
    color: var(--accent-ink); margin: 26px 0 8px; scroll-margin-top: 14px;
  }
  /* bölüm içi nefes: madde ve paragraflar arası boşluk */
  .okuma-panel .not-onizleme p { margin: 11px 0; }
  .okuma-panel .not-onizleme ul, .okuma-panel .not-onizleme ol { margin: 11px 0; padding-left: 26px; }
  .okuma-panel .not-onizleme li { margin: 7px 0; }
  .okuma-panel .not-onizleme li::marker { color: var(--accent); }
  /* sepya okuma tonu (temadan bağımsız göz konforu) */
  .okuma-panel[data-oku-ton="sepya"] { background: #f7efe0; border-color: #e7dcc4; }
  .okuma-panel[data-oku-ton="sepya"] .okuma-arac { background: rgba(247,239,224,.92); border-color: #e7dcc4; }
  .okuma-panel[data-oku-ton="sepya"] .okuma-baslik,
  .okuma-panel[data-oku-ton="sepya"] .not-onizleme { color: #43381f; }
  .okuma-panel[data-oku-ton="sepya"] .not-onizleme h2 { color: #6b4f1e; border-top-color: #e2d6bb; }
  .okuma-panel[data-oku-ton="sepya"] .not-onizleme h3 { color: #6b4f1e; }
  .okuma-panel[data-oku-ton="sepya"] .not-onizleme h4 { color: #6b5a3a; }
  .okuma-ekler { padding: 0 34px; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
  .okuma-ekler .ek-gorsel { height: 110px; }
  .okuma-bos { color: var(--text-dim); font-style: italic; }
  /* "Bak" ile açılan, henüz özetlenmemiş öğenin gövdesi */
  .okuma-ozet-lead {
    font-size: 16px; line-height: 1.6; color: var(--text-soft);
    margin: 2px 0 14px;
  }
  .okuma-not-blok { margin: 4px 0 14px; }
  .okuma-not-etk {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: .3px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
  }
  @media (max-width: 620px) {
    #okuma-modal { padding: 0; }
    /* mobil: panel tam ekran, scroll yine panel içinde */
    .okuma-panel { max-width: 100% !important; height: 100vh; max-height: 100vh; border-radius: 0; }
    .okuma-arac { border-radius: 0; padding: 10px 14px; }
    .okuma-ic { padding: 18px 20px 44px; }
    .okuma-ekler { padding: 0 20px; }
    .okuma-ic .okuma-baslik { font-size: 23px; }
  }
  @media (prefers-reduced-motion: reduce) { #okuma-modal.gor { animation: none; } .okuma-ilerleme { transition: none; } }

  /* Yükleniyor iskeleti */
  .iskelet {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; height: 150px;
    position: relative; overflow: hidden;
  }
  .iskelet::after {
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 5%, transparent), transparent);
    animation: kayar 1.3s infinite;
  }
  @keyframes kayar { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

  /* İçerik belirme: kartlar yüklenince yumuşak yukarı kayarak görünür (stagger ile sırayla) */
  @keyframes kart-gir { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  /* İMZA: "Kasa" açılışı — logo kilidi bir kez nazikçe döner/yaylanır (vault click) */
  @keyframes kasa-ac { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-10deg) scale(1.1); } 58% { transform: rotate(5deg) scale(1.02); } 100% { transform: rotate(0) scale(1); } }
  /* Panel girişi: masthead/bugün/yakala blokları yumuşak yukarı belirir (kademeli) */
  @keyframes mh-gir { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  /* ============================ TEMA SEÇİCİ (renk noktaları) ============================ */
  .tema-secici {
    display: inline-flex; gap: 6px; align-items: center;
    padding: 5px 7px; border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--card-2); box-shadow: var(--shadow-sm);
  }
  .tema-nokta {
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    border: 2px solid transparent; box-shadow: var(--shadow-sm); cursor: pointer;
    transition: transform .12s, border-color .12s;
  }
  .tema-nokta:hover { transform: scale(1.15); }
  .tema-nokta.aktif { border-color: var(--text); transform: scale(1.1); }
  .n-koyu  { background: #1a2029; }
  .n-yaprak { background: radial-gradient(circle at 35% 30%, #8ba47e, #5f7b55); }
  .n-kum   { background: radial-gradient(circle at 35% 30%, #f0e3cb, #d8bd90); }
  .n-sade  { background: radial-gradient(circle at 34% 30%, #ffffff, #e7ecf7); box-shadow: inset 0 0 0 1px #ccd4e2; }

  /* Hareket hassasiyeti: animasyonları kapat */
  @media (prefers-reduced-motion: reduce) {
    .vurgu-isle { animation: none !important; }
    .kart:hover { transform: none; }
    .marka:hover .kasa, .ray-marka:hover .kasa { transform: none; }
    .iskelet::after { animation: none; }
  }

  /* ===================== BASMA GERİ BİLDİRİMİ (press + yay fiziği) =====================
     Dokununca öğe hafifçe küçülür (uygulama niyetini algıladı); bırakınca yay gibi yerine döner.
     Parmağını kaydırıp öğeden çıkarsan :active düşer -> işlem iptal, öğe yaylanarak geri gelir.
     Yaylanma = bırakışta yavaş + hafif aşımlı (overshoot) cubic-bezier; basışta hızlı (.05s).
     prefers-reduced-motion: reduce'ta bu blok hiç uygulanmaz. */
  @media (prefers-reduced-motion: no-preference) {
    .btn, .ray-ekle, .sor-ac-btn, .bos-eylem, .gor-btn, .seg-btn, .konu-cip,
    .kart-ayak .ayak-ik, .bugun-ac-btn, .bugun-sonraki, .oku-arac-btn, .ilgili-oge, .sor-ornek {
      transition: transform .34s cubic-bezier(.34, 1.56, .64, 1),
                  background .15s ease, color .15s ease, border-color .15s ease,
                  box-shadow .18s ease, opacity .15s ease, filter .15s ease;
    }
    .btn:active, .ray-ekle:active, .sor-ac-btn:active, .bos-eylem:active,
    .gor-btn:active, .seg-btn:active, .konu-cip:active, .kart-ayak .ayak-ik:active,
    .bugun-ac-btn:active, .bugun-sonraki:active, .oku-arac-btn:active,
    .ilgili-oge:active, .sor-ornek:active {
      transform: scale(.95);
      transition-duration: .05s;
    }
    .tema-nokta { transition: transform .34s cubic-bezier(.34, 1.56, .64, 1), border-color .12s; }
    .tema-nokta:active { transform: scale(.85); transition-duration: .05s; }

    /* Kart: büyük yüzey -> daha ölçülü çöküş; basışta hafif küçülür, bırakışta yaylanır */
    .kart {
      transition: transform .34s cubic-bezier(.34, 1.56, .64, 1),
                  box-shadow .18s ease, border-color .18s ease, background .2s ease;
    }
    .kart:active { transform: scale(.99); transition-duration: .06s; }

    /* ---- İnce belirme animasyonları (yükleme + medya + durum) ----
       Hepsi yalnız bu no-preference bloğunda: hareket hassasiyeti açıkken devre dışı. */

    /* Liste yüklenince / filtre / sekme değişince kartlar sırayla yumuşakça belirir.
       '.gir' sınıfı yalnız içerik gerçekten değiştiğinde eklenir (bkz. ciz()), böylece
       durum/not gibi yerinde güncellemelerde tüm liste "yanıp sönmez". */
    .kartlar.gir > .kart { animation: kart-gir .44s cubic-bezier(.22, .61, .36, 1) both; }
    .kartlar.gir > .kart:nth-child(2) { animation-delay: .045s; }
    .kartlar.gir > .kart:nth-child(3) { animation-delay: .09s; }
    .kartlar.gir > .kart:nth-child(4) { animation-delay: .135s; }
    .kartlar.gir > .kart:nth-child(5) { animation-delay: .18s; }
    .kartlar.gir > .kart:nth-child(6) { animation-delay: .225s; }
    .kartlar.gir > .kart:nth-child(7) { animation-delay: .27s; }
    .kartlar.gir > .kart:nth-child(n+8) { animation-delay: .31s; }

    /* İMZA: ilk açılışta logo kilidi bir kez "açılır" (kasa motifi). backwards => hover wobble korunur */
    .ray-marka .kasa { animation: kasa-ac .9s cubic-bezier(.34, 1.4, .5, 1) .15s backwards; }
    /* Panel'e girişte masthead -> bugün -> yakala yumuşak kademeli belirir (stat kartları zaten pop yapar) */
    .dashboard-panel .page-header { animation: mh-gir .55s cubic-bezier(.22, .61, .36, 1) both; }
    .dashboard-icerik #bugun-serit-panel { animation: mh-gir .5s cubic-bezier(.22, .61, .36, 1) .14s backwards; }
    .dashboard-icerik .ekle-hero { animation: mh-gir .55s cubic-bezier(.22, .61, .36, 1) .2s backwards; }

    /* İMZA: "bitti" mührü — bir öğe bitince durum pulu mühür gibi basılır + ince halka dışa açılır
       (tek seferlik; .muhur sınıfı JS'te eklenip ~620ms sonra kaldırılır -> :active press korunur) */
    @keyframes muhur-bas { 0% { transform: scale(1.45) rotate(-7deg); } 45% { transform: scale(.93) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
    @keyframes muhur-halka { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
    .durum-goster.muhur { position: relative; animation: muhur-bas .5s cubic-bezier(.3, 1.5, .5, 1) both; }
    .durum-goster.muhur::after {
      content: ""; position: absolute; inset: -3px; border-radius: 999px;
      border: 2px solid var(--good); pointer-events: none;
      animation: muhur-halka .55s ease-out both;
    }

    /* Görseller aniden "pat" diye değil, yüklendiklerinde yumuşak belirir.
       onload -> '.yuklendi' (okuma ekleri + lightbox). reduced-motion'da bu kural yok:
       opacity hep 1 kalır, görsel JS'e bağımlı olmadan görünür. */
    .ek-gorsel { opacity: 0; transition: opacity .5s ease; }
    .ek-gorsel.yuklendi { opacity: 1; }
    #lightbox img { opacity: 0; transition: opacity .3s ease; }
    #lightbox img.yuklendi { opacity: 1; }

    /* Durum noktası: yeni -> çalışıyorum -> bitti renk geçişi yumuşak akar (cross-fade).
       kartGorselDurum() nokta span'ini koruduğu için className değişimi transition'ı tetikler. */
    .durum-goster .durum-nokta { transition: background-color .4s ease; }
  }

  /* Dokunmatik cihazlar: parmak kalkınca "yapışan" hover durumlarını engelle */
  @media (hover: none) {
    .kart:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border-2); }
    .btn:hover { background: var(--card); }
    .cip:hover { background: var(--card); }
    .marka:hover .kasa, .ray-marka:hover .kasa { transform: none; }
  }

  @media (max-width: 620px) {
    .arac-ic { padding: 11px 14px; gap: 9px; }
    .marka span.ad { display: none; }
    .marka-sus { display: none; }
    .ekle-alani { padding: 10px 14px 0; }
    .ekle-satir { flex-wrap: wrap; }
    .ekle-satir .ekle-arti { display: none; }
    .ekle-alani input.ekle-kutu { flex: 1 1 100%; }
    #ekle-btn { flex: 1; }
    .ekle-ipuc { display: none; }
    main { padding: 8px 14px 80px; }
    .dashboard-panel { justify-content: flex-start; min-height: 0; }
    .dd-note, .dd-chip, .dd-tag, .dd-dot { display: none; }
    .page-header { padding: 24px 16px 2px; }
    .dashboard-icerik { padding: 18px 16px; gap: 14px; }
    .dashboard-icerik .ekle-modal-kutu { min-height: 80px; }
    .ekle-hero { padding: 10px 14px 4px; }
    .ekle-hero-ayak .btn { flex: 1; padding: 12px 14px; }
    .ekle-hero-ayak .ekle-modal-ipuc { flex: 1 1 100%; }
    .ozet-serit { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 6px 14px 2px; }
    .ozet-sayi { font-size: 22px; }
    .ozet-grafik { display: none; }            /* dar ekranda kart zaten dolu — sparkline'ı gizle */
    .ozet-kart { padding: 14px 16px; }
    .selam-kicker { margin-bottom: 8px; letter-spacing: .12em; }
    .selam-kuyruk { font-size: 14px; }
    .liste-ust { padding: 0 14px; margin-top: 10px; }
    body.secim-modu .liste-ust { top: 53px; padding: 8px 14px; }
    .konu-baslik { top: 53px; }   /* mobil üst çubuk daha kısa */
    .filtre-bar { padding: 12px 14px 2px; }
    .tema-secici { padding: 4px 6px; gap: 5px; }
    /* mobil: blur'lu sticky bar scroll'da tutuklanıyordu -> opak zemine düş */
    .arac-cubugu { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
    /* dar ekranda net tek sütun */
    .kartlar { grid-template-columns: 1fr; gap: 14px; }
    /* mobil: durum çipleri sarılır (yatay kaydırma gerekmez) */
    .yan-ray .durum-segment { width: 100%; }
    .toplam-bilgi { margin-left: 0; }
  }

  /* ============================ DOKUNMATİK HEDEFLER ============================
     Genişlikten BAĞIMSIZ: her dokunmatik cihazda (telefon + tablet, 621-900 bandı dahil) büyük hedef.
     Masaüstü (hover var) etkilenmez. (Gerçek cihazda doğrulanmalı — emülasyon hover:none'u taklit eder.) */
  @media (hover: none) {
    .sil-btn, .not-ac, .detay-ac { padding: 8px 10px; }
    .yan-ray .seg-btn { padding: 9px 14px; font-size: 13px; }
    .yan-ray .gor-btn { padding: 12px 12px; }
    .yan-ray .konu-cip { padding: 10px 11px; }
    .alt-raf .alt-cip { padding: 11px 11px; }
    .yan-ray .klasor-ekle-btn { width: 36px; height: 36px; }
    .yan-ray .klasor-ekle-btn svg { width: 17px; height: 17px; }
    .yan-ray .klasor-sil, .yan-ray .alt-sil { width: 36px; height: 36px; font-size: 21px; opacity: .75; margin-left: 0; }
    /* Dokunmada × sürekli açık (right:30px, sayacın yerinde) -> sayaçla çakışmasın diye klasör sayacını gizle
       (masaüstündeki "hover'da sayaç->× takası"nın kalıcı hâli; chevron görünür kalır) */
    .klasor-raf .klasor-cip .adet { display: none; }
    .yan-ray .alt-ekle-btn { padding: 9px 12px; font-size: 13px; }
    .yan-ray .klasor-yeni-girdi, .yan-ray .alt-yeni-girdi { padding: 11px 11px; font-size: 14px; }
    /* tema noktaları: dokunmada 16px çok küçük -> ~24px dokunma hedefi (yer değiştirme ileride, gerçek cihaz testiyle) */
    .tema-nokta { width: 24px; height: 24px; }
  }

  /* ============================ KASANA SOR ============================ */
  .sor-ac-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; box-sizing: border-box;
    padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; white-space: nowrap;
    color: var(--text-soft); background: var(--card);
    border: 1px solid var(--border-2);
    transition: background .15s, border-color .15s, color .15s, transform .05s;
  }
  .sor-ac-btn:hover { background: var(--card-2); border-color: var(--border-2); color: var(--text); }
  .sor-ac-btn:active { transform: translateY(1px); }

  /* ---- Profil dropdown (ust serit sag) ---- */
  .profil-sar { position: relative; flex: none; }
  .profil-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
  .profil-avatar { display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); text-transform: uppercase;
    transition: background .15s, border-color .15s; }
  .profil-btn:hover .profil-avatar { background: color-mix(in srgb, var(--accent) 24%, var(--accent-soft)); }
  .profil-avatar.buyuk { width: 44px; height: 44px; font-size: 16px; flex: none; }
  .profil-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200;
    width: 252px; padding: 8px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(20,24,40,.06), 0 18px 46px -16px rgba(20,24,40,.42);
  }
  .profil-menu[hidden] { display: none; }
  .profil-bilgi { display: flex; align-items: center; gap: 11px; padding: 8px 8px 10px; }
  .profil-bilgi-met { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .profil-bilgi-met b { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .profil-bilgi-met span { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .profil-ayrac { height: 1px; background: var(--border); margin: 2px 4px 6px; }
  .profil-oge {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    padding: 10px; border: none; border-radius: 10px; background: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--text-soft); text-align: left;
    transition: background .12s, color .12s;
  }
  .profil-oge .ik-svg { width: 18px; height: 18px; flex: none; }
  .profil-oge:hover { background: var(--bg-soft); color: var(--text); }
  .profil-cikis:hover { background: var(--danger-soft); color: var(--danger); }

  #sor-modal {
    position: fixed; inset: 0; z-index: 360; display: none;
    background: rgba(14, 10, 28, .55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 5vh 16px;
  }
  #sor-modal.gor { display: flex; animation: toast-gir .18s ease; }
  .sor-panel {
    width: 100%; max-width: 640px; display: flex; flex-direction: column;
    max-height: 88vh; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 22%, transparent),
                0 2px 8px color-mix(in srgb, var(--accent) 13%, transparent);
    overflow: hidden;
  }
  .sor-bas {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--border); flex: none;
  }
  .sor-bas-ad { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--accent-ink); }
  .sor-kapat {
    width: 30px; height: 30px; border-radius: 50%; font-size: 16px; line-height: 1;
    color: var(--text-dim); background: var(--card-2); display: grid; place-items: center;
  }
  .sor-kapat:hover { background: var(--bg-soft); color: var(--text); }

  .sor-akis {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .sor-bos { margin: auto 0; text-align: center; padding: 16px 4px; }
  .sor-bos-ust { font-size: 14px; color: var(--text-soft); margin: 0 0 14px; line-height: 1.55; }
  .sor-ornekler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .sor-ornek {
    font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 999px;
    color: var(--accent-ink); background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    transition: background .15s, border-color .15s;
  }
  .sor-ornek:hover { background: color-mix(in srgb, var(--accent) 13%, var(--card)); border-color: var(--accent); }

  .sor-tur { display: flex; flex-direction: column; gap: 8px; }
  .sor-soru {
    align-self: flex-end; max-width: 85%;
    background: var(--accent); color: #fff;
    padding: 8px 13px; border-radius: 14px 14px 4px 14px;
    font-size: 14px; line-height: 1.45; font-weight: 500; word-break: break-word;
  }
  .sor-cevap {
    align-self: flex-start; max-width: 92%;
    background: var(--card-2); border: 1px solid var(--border);
    padding: 12px 14px; border-radius: 14px 14px 14px 4px;
    font-size: 14px; line-height: 1.6; color: var(--text); word-break: break-word;
  }
  .sor-cevap.dusunuyor { color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; }
  .sor-cevap.hata { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
  .sor-cevap > :first-child { margin-top: 0; }
  .sor-cevap > :last-child { margin-bottom: 0; }
  .sor-cevap p { margin: 8px 0; }
  .sor-cevap ul, .sor-cevap ol { margin: 8px 0; padding-left: 22px; }
  .sor-cevap li { margin: 4px 0; }
  .sor-cevap li::marker { color: var(--accent); }
  .sor-cevap strong { font-weight: 600; }
  .sor-cevap h2, .sor-cevap h3 { font-size: 15px; font-weight: 600; color: var(--accent-ink); margin: 12px 0 6px; }

  .sor-kaynaklar {
    align-self: flex-start; max-width: 92%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -1px;
  }
  .sor-kaynaklar .sor-kaynak-etk { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-right: 1px; }
  .sor-kaynak {
    display: inline-flex; align-items: center; gap: 5px; max-width: 250px;
    font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px;
    color: var(--accent-ink); background: var(--card); border: 1px solid var(--border-2);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .sor-kaynak:hover { border-color: var(--accent); background: var(--accent-soft); }
  .sor-kaynak .nk { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
  .sor-kaynak .ad { overflow: hidden; text-overflow: ellipsis; }

  .sor-giris {
    flex: none; display: flex; gap: 8px; padding: 12px 14px;
    border-top: 1px solid var(--border); background: var(--card);
  }
  .sor-kutu {
    flex: 1; padding: 11px 14px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--card-2);
    color: var(--text); font-family: inherit; font-size: 14px; outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .sor-kutu:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card); }
  .sor-gonder {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: var(--accent);
    transition: background .15s, transform .05s, opacity .15s;
  }
  .sor-gonder:hover { background: var(--accent-ink); }
  .sor-gonder:active { transform: scale(.94); }
  .sor-gonder:disabled { opacity: .5; cursor: default; }

  @media (max-width: 620px) {
    #sor-modal { padding: 3vh 10px; }
    .sor-panel { max-height: 94vh; }
  }

  /* ============================ İLGİLİ ÖĞELER (okuma penceresi) ============================ */
  .ilgili-blok { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
  .ilgili-bas {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 10px;
  }
  .ilgili-bas .ik-svg { width: 16px; height: 16px; color: var(--accent); }
  .ilgili-liste { display: flex; flex-direction: column; gap: 6px; }
  .ilgili-oge {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--card-2);
    transition: border-color .15s, background .15s, transform .05s;
  }
  .ilgili-oge:hover { border-color: var(--accent); background: var(--accent-soft); }
  .ilgili-oge:active { transform: translateY(1px); }
  .ilgili-oge .ilgili-nokta { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .ilgili-oge .ilgili-ad {
    flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ilgili-oge .ilgili-neden { flex: none; font-size: 11.5px; color: var(--text-dim); }
  .okuma-panel[data-oku-ton="sepya"] .ilgili-blok { border-top-color: #e7dcc4; }
  .okuma-panel[data-oku-ton="sepya"] .ilgili-oge { background: #f1e6cf; border-color: #e7dcc4; }
  /* Sepya tonunda ilgili-öğelerin yazı renkleri de sepyaya sabitlenir (yoksa koyu temada
     açık renk metin krem zeminde görünmez kalıyordu). */
  .okuma-panel[data-oku-ton="sepya"] .ilgili-bas { color: #6b4f1e; }
  .okuma-panel[data-oku-ton="sepya"] .ilgili-bas .ik-svg { color: #9a7b3e; }
  .okuma-panel[data-oku-ton="sepya"] .ilgili-oge .ilgili-ad { color: #43381f; }
  .okuma-panel[data-oku-ton="sepya"] .ilgili-oge .ilgili-neden { color: #8a7448; }
  .okuma-panel[data-oku-ton="sepya"] .ilgili-oge:hover { background: #e9dbbf; border-color: #d8c49a; }

  /* ============================ KEŞİF / ÖNERİLER ============================ */
  /* Görünüm segmenti (Kasam / Keşif) — durum-segment kabuğunu paylaşır */
  .gorunum-seg .gor-btn {
    padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--text-soft);
    background: transparent; border: none; white-space: nowrap;
    display: inline-flex; align-items: center;
    transition: background .15s, color .15s;
  }
  .gorunum-seg .gor-btn:hover { color: var(--text); }
  .gorunum-seg .gor-btn.aktif {
    background: var(--accent); color: #fff; font-weight: 700;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .gorunum-seg .gor-btn .adet {
    margin-left: 6px; font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  }
  .gorunum-seg .gor-btn.aktif .adet { background: rgba(255,255,255,.25); color: #fff; }

  .kesif-arac { display: inline-flex; align-items: center; gap: 8px; flex: none; }
  .kesif-arac .btn { padding: 8px 13px; font-size: 13px; }
  .kesif-btn {
    color: var(--accent-ink); background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .kesif-btn:hover { background: color-mix(in srgb, var(--accent) 15%, var(--card)); border-color: var(--accent); }
  .kesif-btn[disabled] { opacity: .6; }
  /* Keşif içerik-üstü araç çubuğu (başlık + Şimdi keşfet/Kaynaklarım) — sidebar'dan buraya taşındı */
  .kesif-ust {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    max-width: 1680px; margin: 0 auto 6px; padding: 8px 20px 14px;
  }
  .kesif-ust-baslik {
    display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0;
    font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
  }
  .kesif-ust-baslik .ik-svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
  .kesif-ust .kesif-arac { flex: none; }
  @media (max-width: 620px) { .kesif-ust { padding: 6px 14px 12px; } .kesif-ust-baslik { font-size: 15.5px; } }

  /* Öneri kartı işaretleri */
  .kart-kicker .kicker-oneri {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--accent-ink); background: var(--accent-soft);
    padding: 1px 7px; border-radius: 999px;
  }
  /* Bugün eklenen öğe etiketi — kartın SAĞ ÜST köşesinde dolu accent pil (kicker'dan ayrı, karışmaz) */
  .kart-yeni-rozet {
    position: absolute; top: 12px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: #fff; background: var(--accent);
    padding: 2px 8px; border-radius: 999px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  /* Bugün-kartının kicker'ı badge'in altına girmesin diye sağdan boşluk bırak */
  .kart-bugun .kart-kicker { padding-right: 52px; }
  /* Favori (kalp) — kartın sağ üst köşesi; boş = ince outline, dolu = accent dolgu */
  .kart-favori {
    position: absolute; top: 8px; right: 9px; z-index: 3;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: none; border: none; color: var(--text-dim);
    opacity: .5; transition: opacity .14s, color .14s, background .14s, transform .08s;
  }
  .kart-favori svg { width: 18px; height: 18px; }
  .kart-favori:hover { opacity: 1; color: var(--accent); background: var(--card-2); }
  .kart-favori.dolu { opacity: 1; color: var(--accent); }
  .kart-favori.dolu svg { fill: var(--accent); }
  .kart-favori:active { transform: scale(.88); }
  @media (hover: none) { .kart-favori { opacity: .72; } }
  /* tüm kartlarda kalp var: kicker kalbe girmesin; YENİ rozet (bugün) kalbin soluna kaysın */
  .kart-kicker { padding-right: 38px; }
  .kart-bugun .kart-kicker { padding-right: 88px; }
  .kart-bugun .kart-yeni-rozet { right: 46px; }
  .kart-ayak .oneri-ekle { color: var(--accent-ink); font-weight: 700; }
  .kart-ayak .oneri-ekle:hover { color: var(--accent); }
  .kart-ayak .oneri-gizle:hover { color: var(--danger); }

  /* Kaynaklarım modalı */
  #kaynak-modal {
    position: fixed; inset: 0; z-index: 360; display: none;
    background: rgba(14,10,28,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 6vh 16px;
  }
  #kaynak-modal.gor { display: flex; animation: toast-gir .18s ease; }
  .kaynak-panel {
    width: 100%; max-width: 540px; display: flex; flex-direction: column; max-height: 84vh;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 22%, transparent),
                0 2px 8px color-mix(in srgb, var(--accent) 13%, transparent);
    overflow: hidden;
  }
  .kaynak-ic { padding: 16px; overflow-y: auto; }
  .kaynak-aciklama { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; line-height: 1.55; }
  .kaynak-aciklama code { background: var(--card-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
  .kaynak-giris { display: flex; gap: 8px; margin-bottom: 14px; }
  .kaynak-kutu {
    flex: 1; padding: 10px 13px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-2); background: var(--card-2); color: var(--text);
    font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
  }
  .kaynak-kutu:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card); }
  .kaynak-liste { display: flex; flex-direction: column; gap: 6px; }
  .kaynak-satir {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2);
  }
  .kaynak-satir .kaynak-host { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--text); word-break: break-all; }
  .kaynak-satir .kaynak-sil { flex: none; color: var(--text-dim); padding: 4px 6px; border-radius: 6px; font-size: 13px; }
  .kaynak-satir .kaynak-sil:hover { color: var(--danger); background: var(--danger-soft); }
  .kaynak-bos { font-size: 13px; color: var(--text-dim); text-align: center; padding: 16px 0; }

  /* ============================ BÜYÜK EKLE PENCERESİ ============================ */
  #ekle-modal {
    position: fixed; inset: 0; z-index: 360; display: none;
    background: rgba(14,10,28,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 5vh 16px;
  }
  #ekle-modal.gor { display: flex; animation: toast-gir .18s ease; }
  .ekle-modal-panel {
    width: 100%; max-width: 680px; display: flex; flex-direction: column; max-height: 88vh;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 22%, transparent),
                0 2px 8px color-mix(in srgb, var(--accent) 13%, transparent);
    overflow: hidden;
  }
  .ekle-modal-ic { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
  .ekle-modal-kutu {
    width: 100%; min-height: 150px; resize: vertical;
    padding: 14px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-2, var(--border)); background: var(--card); color: var(--text);
    font-family: inherit; font-size: 15px; line-height: 1.6; outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .ekle-modal-kutu:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card); }
  /* "Hızlı yakala" başlığının sağında Temizle düğmesi — yalnız kutuda içerik varken görünür (kutu metniyle çakışmaz) */
  .ekle-temizle {
    margin-left: auto; align-self: center;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
    background: var(--card-2); color: var(--text-dim); border: 1px solid var(--border);
    transition: background .12s, color .12s, border-color .12s, transform .05s;
  }
  .ekle-temizle[hidden] { display: none; }
  .ekle-temizle svg { width: 13px; height: 13px; }
  .ekle-temizle:hover { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
  .ekle-temizle:active { transform: scale(.96); }
  .ekle-birak-zon {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 16px; border-radius: var(--radius-sm); cursor: pointer; text-align: center;
    border: 1.5px dashed var(--border-2, var(--border)); background: var(--card);
    color: var(--text-soft); font-size: 13.5px;
    transition: border-color .15s, background .15s, color .15s;
  }
  .ekle-birak-zon:hover, .ekle-birak-zon.uzeride {
    border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
  }
  .ekle-birak-zon .ik-svg { width: 18px; height: 18px; flex: none; }
  .ekle-birak-sec { color: var(--accent-ink); font-weight: 600; text-decoration: underline; }
  #ekle-modal .ek-onizleme { padding: 0; }
  .ekle-modal-ayak {
    flex: none; display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--border); background: var(--card);
  }
  .ekle-modal-ipuc { font-size: 11.5px; color: var(--text-dim); }
  .ekle-modal-bosluk { flex: 1; }
  @media (max-width: 620px) {
    #ekle-modal { padding: 0; }
    .ekle-modal-panel { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .ekle-modal-ipuc { display: none; }
    .ekle-modal-ayak .btn { flex: 1; }
  }

  /* ============================ SOL RAY DÜZENİ ============================ */
  .uygulama { display: flex; align-items: flex-start; min-height: 100vh; }
  .yan-ray {
    width: 244px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    /* İnce, belirsiz, modern scrollbar: dinlenmede görünmez; yalnız ray hover'ında hafif belirir (Firefox: ince+sönük). */
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-dim) 16%, transparent) transparent;
    /* Ray GERİ ÇEKİLİR: arka plan içerik tonuyla aynı (--bg), yalnız saç-teli ayraç.
       Ray renkli bir panel olmaktan çıkar; kartlar (--card) öne çıkar (Notion-sakin). */
    background: var(--bg); border-right: 1px solid var(--border);
    padding: 16px 11px 16px; display: flex; flex-direction: column; gap: 10px;
    transition: width .2s ease;   /* daralt/genişlet yumuşak geçiş (mobilde transform geçişi devralır) */
  }
  .ic-sutun { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  /* WebKit (Chrome/Edge): ray scrollbar'ı 5px, şeffaf yiv; thumb dinlenmede görünmez, hover'da sönük belirir */
  .yan-ray::-webkit-scrollbar { width: 5px; }
  .yan-ray::-webkit-scrollbar-track { background: transparent; }
  .yan-ray::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background .2s; }
  .yan-ray:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-dim) 26%, transparent); }
  .yan-ray::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-dim) 42%, transparent); }

  .ray-marka { display: flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 15.5px; letter-spacing: -.2px; padding: 0 6px 2px; }
  .ray-marka .kasa { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: #fff; flex: none; transition: transform .2s; box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 32%, transparent); }
  .ray-marka:hover .kasa { transform: rotate(-6deg) scale(1.06); }
  .ray-marka .kasa .ik-svg { width: 16px; height: 16px; }
  /* Sidebar daralt/genişlet düğmesi (referans "planner" sidebar'larındaki gibi marka satırında) */
  .ray-daralt-btn {
    margin-left: auto; flex: none; width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 7px; background: transparent;
    color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s, transform .2s ease;
  }
  .ray-daralt-btn:hover { background: var(--card-2); color: var(--text); }
  .ray-daralt-btn svg { width: 17px; height: 17px; }

  .ray-ekle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8.5px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700;
    background: var(--accent); color: #fff; border: none;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 22%, transparent);
    transition: background .15s, transform .05s;
  }
  .ray-ekle:hover { background: var(--accent-ink); }
  .ray-ekle:active { transform: translateY(1px); }
  .ray-ekle .ik-svg { width: 18px; height: 18px; }

  /* Alt araç bölümü: sidebar'ın dibine iter (Yedek al vb.) */
  .ray-alt { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
  .ray-arac-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 550;
    background: transparent; color: var(--text-soft); border: 1px solid transparent; cursor: pointer; text-align: left;
  }
  .ray-arac-btn:hover { background: var(--card-2); color: var(--text); border-color: var(--border); }
  .ray-arac-btn .ik-svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

  .ray-bolum { display: flex; flex-direction: column; gap: 2px; }
  .ray-baslik { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); padding: 2px 8px; margin-top: 2px; margin-bottom: 1px; }
  /* Katlanır bölüm başlığı (Durum / Konular) — tıkla aç/kapa, chevron döner */
  .ray-baslik-kat { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; border-radius: 7px; transition: background .12s, color .12s; }
  .ray-baslik-kat:hover { color: var(--text-soft); background: var(--card-2); }
  .ray-baslik-kat:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ray-baslik-kat .kat-adet { font-size: 10px; font-weight: 700; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
  .ray-baslik-kat .kat-ok { width: 12px; height: 12px; margin-left: auto; opacity: .5; flex: none; transition: transform .2s ease; }
  .ray-bolum.kapali .ray-baslik-kat .kat-ok { transform: rotate(-90deg); }
  .ray-bolum.kapali .durum-segment,
  .ray-bolum.kapali .konu-raf { display: none; }

  /* DURUM = kompakt yatay çip süzgeci (dikey 6 satır yerine — panel nefes alsın) */
  .yan-ray .durum-segment {
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px;
    /* border:none -> taban .durum-segment'in saran kutusunu iptal et; çipler diğer
       bölümler gibi serbest aksın (Klasörler/Konular da kutusuz). */
    background: none; border: none; border-radius: 0; margin: 3px 0 0; padding: 0 2px;
  }
  .yan-ray .seg-btn {
    position: relative; flex: none;
    display: inline-flex; align-items: center; gap: 5px; text-align: center;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--text-soft);
    background: var(--card-2); border: 1px solid transparent; box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .yan-ray .seg-btn[hidden] { display: none; }
  .yan-ray .seg-btn:hover { background: var(--bg-soft); color: var(--text); }
  .yan-ray .seg-btn.aktif { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
  /* Konu çipi aktif işareti (kılavuz çizginin ÜSTÜNDE accent NOKTA — referans alt-öğe deseni) — Durum çipleri dolu zemin kullanır, ::before yok */
  .yan-ray .konu-cip.aktif::before {
    content: ""; position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 2.5px var(--card);
  }
  .yan-ray .seg-btn .adet { background: none; color: var(--text-dim); font-weight: 700; font-size: 11px; padding: 0; margin: 0; }
  .yan-ray .seg-btn.aktif .adet { color: rgba(255,255,255,.85); }
  /* "Çekilemeyenler" = uyarı tonlu çip; "Yeniler" = accent tonlu çip (durum ekseninden ayrı işaretler) */
  .yan-ray .seg-eksik { border-color: color-mix(in srgb, var(--warn) 38%, var(--border)); color: color-mix(in srgb, var(--warn) 80%, var(--text)); }
  .yan-ray .seg-eksik .adet { color: color-mix(in srgb, var(--warn) 72%, var(--text-dim)); }
  .yan-ray .seg-eksik.aktif { background: var(--warn); color: #fff; border-color: var(--warn); }
  .yan-ray .seg-eksik.aktif .adet { color: rgba(255,255,255,.9); }
  .yan-ray .seg-bugun { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); color: var(--accent-ink); }
  .yan-ray .seg-bugun.aktif { background: var(--accent); color: #fff; border-color: var(--accent); }
  .yan-ray .seg-bugun.aktif .adet { color: rgba(255,255,255,.85); }

  /* GÖRÜNÜM = yatay MOD anahtarı (kapsül toggle) — dikey süzgeçlerden biçimce ayrı.
     (Ayraç çizgisi kaldırıldı: kapsül zaten ayırıyor; Keşif görünümünde Durum gizlenince
     o çizgi boşlukta asılı kalıp "büyük boşluk" hissi veriyordu.) */
  .yan-ray .gorunum-seg {
    display: flex; flex-direction: column; gap: 2px;
    background: none; border: none; border-radius: 0; padding: 0;
  }
  .yan-ray .gor-btn {
    position: relative;
    width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 11px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 550; color: var(--text-soft);
    background: none; border: none; box-shadow: none;
    transition: background .15s, color .15s;
  }
  .yan-ray .gor-btn:hover { background: var(--card-2); color: var(--text); }
  /* aktif menu ogesi (URL'e gore isaretlenir) */
  .yan-ray .gor-btn.aktif { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; box-shadow: none; }
  .yan-ray .gor-btn.aktif::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
  .yan-ray .gor-btn.aktif .ray-cev { opacity: .8; }
  /* Referans "planner" sidebar dili: her satırda sağda ince chevron (›) — navigasyon hissi + ferah */
  .yan-ray .gor-btn .gor-ad { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ray-cev { display: inline-flex; flex: none; color: var(--text-dim); opacity: .45; transition: opacity .15s, transform .15s; }
  .ray-cev svg { width: 14px; height: 14px; }
  .yan-ray .gor-btn:hover .ray-cev, .yan-ray .konu-cip:hover .ray-cev { opacity: .85; transform: translateX(1.5px); }
  .yan-ray .gor-btn.aktif .ray-cev, .yan-ray .konu-cip.aktif .ray-cev,
  .klasor-raf .klasor-cip.aktif .ray-cev, .alt-raf .alt-cip.aktif .ray-cev { opacity: .8; color: var(--accent-ink); }
  /* Klasör = genişleyebilen üst-öğe (referans deseni): chevron AÇIKKEN 90° döner (› -> ⌄); hover'da gizlenmez */
  .yan-ray .klasor-cip.aktif .ray-cev { transform: rotate(90deg); }
  /* Aktif "buradasın" = TEK işaret: hafif accent dolgu + ince sol çubuk (gölge YOK).
     Klasör/konu satırlarıyla aynı dil — ray tek görsel dile indi. */
  .yan-ray .gor-btn.aktif { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
  .yan-ray .gor-btn.aktif::before {
    content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 2.5px; height: 15px; border-radius: 3px; background: var(--accent);
  }
  .yan-ray .gor-btn .ik-svg { width: 17px; height: 17px; flex: none; opacity: .75; }
  .yan-ray .gor-btn.aktif .ik-svg { opacity: 1; }
  .yan-ray .gor-btn .adet { margin-left: auto; background: none; color: var(--text-dim); font-weight: 700; font-size: 11.5px; }
  .yan-ray .gor-btn.aktif .adet { color: var(--accent-ink); }

  /* konu rafı — TEK SÜTUN tam genişlik satırlar; Durum satırlarıyla aynı hizada, sade (kutusuz) */
  .yan-ray .konu-raf {
    display: flex; flex-direction: column; gap: 2px;
    overflow: visible; background: none;
    margin-left: 9px; padding-left: 11px; border-left: 1.5px solid var(--border);   /* alt öğe girintisi + kılavuz çizgi */
  }
  .yan-ray .konu-cip {
    position: relative;
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 8px 11px; border-radius: 9px; font-size: 12.5px;
    border: none; background: none; color: var(--text-soft);
  }
  .yan-ray .konu-cip .kad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .yan-ray .konu-cip:hover { background: var(--card-2); color: var(--text); }
  /* Aktif SÜZGEÇ (konu/klasör) nav-aktiften bir kademe hafif: nav dolu accent-soft, süzgeç yarı-ton + çubuk/bold.
     Böylece "hangi sayfadayım" (nav) ile "hangi süzgeç açık" (konu) görsel hiyerarşide ayrışır. */
  .yan-ray .konu-cip.aktif { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); color: var(--accent-ink); font-weight: 700; }
  /* Sidebar'daki aktif çipler (klasör/konu/alt-konu) DÜZ kalsın — taban .cip.aktif'in yükselti gölgesini
     (0 3px 9px) sıfırla; yoksa tıklanan buton "öne doğru çıkıyor" (havaya kalkmış görünüyor). */
  .yan-ray .cip.aktif { box-shadow: none; }
  .yan-ray .konu-cip .knokta {
    width: 7px; height: 7px; flex: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cr, var(--text-dim)) 14%, transparent);
  }
  .yan-ray .konu-cip.aktif .knokta { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--cr, var(--accent)); }
  .yan-ray .konu-cip .adet {
    margin-left: auto; padding-left: 6px; flex: none; color: color-mix(in srgb, var(--text-dim) 78%, transparent);
    font-variant-numeric: tabular-nums; font-size: 11px;
  }

  /* Sol panel 3 bölge: Gezin (görünümler) | Klasörler | Süz (durum+konular) — net ayraçlar */
  /* Klasörler nav'ın DEVAMI: aralarına ayraç koyma (gezinme grubu); asıl ayraç gezinme<->süzgeç arasında (Durum) */
  .klasor-bolum { margin-top: 2px; padding-top: 0; }
  /* Durum süzgeci sidebar'dan KALDIRILDI (içerik-üstü şeride taşındı). Sidebar bölümünü gizle;
     gezinme(nav+klasör)<->süzgeç ayracını artık Konular taşır. */
  #durum-bolum { display: none; }
  #konu-satir { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--border); }
  .klasor-bolum .ray-baslik-kat .kat-ok { margin-left: 4px; }
  .klasor-ekle-btn {
    margin-left: auto; flex: none; width: 20px; height: 20px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-2); border-radius: 6px; background: var(--card);
    color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
  }
  .klasor-ekle-btn svg { width: 13px; height: 13px; }
  .klasor-ekle-btn:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
  .klasor-yeni { padding: 4px 2px 2px; }
  .klasor-yeni-girdi {
    width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit; font-size: 13px;
    color: var(--text); background: var(--card); border: 1px solid var(--accent); border-radius: 8px;
    box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
  }
  .klasor-raf .klasor-cip { position: relative; }
  .klasor-raf .klasor-cip .kad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* Klasör rafı kılavuz-çizgi girintisini KALDIR -> folder satırları nav (Panel/Notlarım) ile aynı sol hizada başlasın */
  .yan-ray .klasor-raf { margin-left: 0; padding-left: 0; border-left: none; }
  .klasor-sil {
    position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; padding: 0; border: none; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
    background: transparent; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
  }
  /* Klasörler NAV diliyle gösterilir (gezinme hedefi — süzgeç DEĞİL): folder ikon + ad + chevron + GÜÇLÜ nav-aktif.
     hover'da chevron -> × yer değişir (sayaç kalır); × yalnız hover'da (aktifte değil). */
  .yan-ray .klasor-cip { padding: 10px 12px; gap: 11px; font-size: 13px; font-weight: 550; }
  .yan-ray .klasor-cip .kad { flex: 1 1 auto; }
  .yan-ray .klasor-cip .klasor-ik { display: inline-flex; flex: none; color: var(--text-dim); }
  .yan-ray .klasor-cip .klasor-ik svg { width: 17px; height: 17px; opacity: .8; }
  .yan-ray .klasor-cip.aktif { background: var(--accent-soft); }
  .yan-ray .klasor-cip.aktif .klasor-ik { color: var(--accent-ink); }
  .yan-ray .klasor-cip.aktif .klasor-ik svg { opacity: 1; }
  /* Klasör aktif işareti = sol accent ÇUBUK (nav gibi; nokta DEĞİL — nokta yalnız alt-öğelerde).
     konu-cip'ten miras alınan dot biçimini çubuğa geri çevir (width/height/şekil/halka override). */
  .yan-ray .klasor-cip.aktif::before { left: 3px; width: 2.5px; height: 15px; border-radius: 3px; box-shadow: none; }
  .klasor-raf .klasor-cip .adet { transition: opacity .12s; }
  .klasor-raf .klasor-cip:hover .adet { opacity: 0; }   /* hover: sayaç -> × takası (chevron görünür kalır, dönüşü korur) */
  .klasor-raf .klasor-cip:hover .klasor-sil { opacity: .65; }
  .klasor-sil:hover { opacity: 1 !important; background: var(--danger-soft); color: var(--danger); }
  .klasor-bos { padding: 6px 9px 2px; font-size: 12px; color: var(--text-dim); line-height: 1.4; }
  .ray-bolum.kapali .klasor-raf, .ray-bolum.kapali .klasor-yeni { display: none; }
  /* Aktif klasörün altındaki alt-konular — app'in TAM-GENİŞLİK satır diliyle (klasörün "açık gövdesi").
     width:100% ŞART: yoksa alt-raf içeriğe büzülüp dar/yüzen kalıyordu (klasör pill'inin altında kopuk mini-hap). */
  .alt-raf {
    display: flex; flex-direction: column; gap: 1px;
    width: 100%; box-sizing: border-box;
    margin: 2px 0 6px 20px; padding-left: 13px; border-left: 1.5px solid var(--border);
  }
  .alt-raf .alt-cip {
    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; text-align: left;
    padding: 7px 10px; border: none; background: none; border-radius: 8px; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--text-soft); position: relative; transition: background .12s, color .12s;
  }
  .alt-raf .alt-cip .kad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .alt-raf .alt-cip .adet { flex: none; color: var(--text-dim); font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
  .alt-raf .alt-cip:hover { background: var(--card-2); color: var(--text); }
  /* AKTİF alt = HAFİF işaret: nokta (kılavuz çizgide) + accent-ink kalın; YARIŞAN dolgu YOK
     (tek güçlü vurgu üstteki klasör pill'inde kalır -> iki yeşil hap muddiness'i biter). */
  .alt-raf .alt-cip.aktif { background: none; color: var(--accent-ink); font-weight: 700; }
  .alt-raf .alt-cip.aktif .adet { color: var(--accent-ink); }
  .alt-raf .alt-cip.aktif::before { content: ""; position: absolute; left: -16.75px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2.5px var(--card); }
  .alt-raf .alt-genel { color: var(--text-dim); }
  /* Tümü = alt-konu listesinin AÇ/KAPA başlığı (Design gibi): sağda chevron — AÇIKKEN aşağı (⌄), KATLIYKEN sağa (›) */
  .alt-raf .alt-tumu .alt-cev { opacity: .5; transition: transform .2s ease, opacity .15s; }
  .alt-raf .alt-tumu .alt-cev svg { width: 13px; height: 13px; }
  .alt-raf:not(.alt-katli) .alt-tumu .alt-cev { transform: rotate(90deg); opacity: .6; }
  .alt-raf .alt-tumu:hover .alt-cev { opacity: .9; }
  /* "Tüm Konular" = konu listesinin AÇ/KAPA başlığı (aynı mantık; #id ile hover-itme kuralını ezer) */
  #konu-bar .konu-tumu .konu-cev { opacity: .5; transition: transform .2s ease, opacity .15s; }
  #konu-bar .konu-tumu .konu-cev svg { width: 13px; height: 13px; }
  #konu-bar:not(.konu-katli) .konu-tumu .konu-cev { transform: rotate(90deg); opacity: .6; }
  #konu-bar .konu-tumu:hover .konu-cev { opacity: .9; }
  /* alt-konu × kaldır (çip içinde) */
  .alt-raf .alt-cip { position: relative; }
  .alt-sil {
    flex: none; width: 16px; height: 16px; margin-left: 1px; padding: 0; border: none; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
    background: transparent; color: var(--text-dim); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
  }
  .alt-raf .alt-cip:hover .alt-sil, .alt-raf .alt-cip.aktif .alt-sil { opacity: .6; }
  .alt-sil:hover { opacity: 1 !important; background: var(--danger-soft); color: var(--danger); }
  /* "+ alt-konu" oluşturma düğmesi + girdisi (klasör "+" ile aynı his, daha küçük) */
  /* "+ alt-konu" = alt-konu satırlarıyla AYNI tam-genişlik satır dili (yüzen fit-content buton DEĞİL) */
  .alt-ekle-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 1px 0 0; text-align: left;
    padding: 7px 10px; border: none; border-radius: 8px; background: none;
    color: var(--text-dim); cursor: pointer; font: inherit; font-size: 12px; transition: color .12s, background .12s;
  }
  .alt-ekle-btn .art { font-size: 15px; line-height: 1; flex: none; }
  .alt-ekle-btn:hover { color: var(--accent-ink); background: var(--card-2); }
  .alt-yeni { margin: 2px 0; }
  .alt-yeni-girdi {
    width: 100%; box-sizing: border-box; padding: 6px 8px; font: inherit; font-size: 12.5px;
    color: var(--text); background: var(--card); border: 1px solid var(--accent); border-radius: 7px;
    box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
  }
  /* Klasör-içi alt-konu grup başlığı (içerikte) — normal konu başlığından biraz daha hafif */
  .konu-baslik.alt-baslik .kb-ad { font-size: 17px; }
  /* Düzenle panelinde alt-konu ipucu + toplu alt-konu girişi */
  .duzenle-govde .dz-ipuc { font-weight: 500; color: var(--text-dim); font-size: 11px; }
  input.toplu-alt-girdi { font: inherit; font-size: 13px; max-width: 168px; color: var(--text); }
  input.toplu-alt-girdi::placeholder { color: var(--text-dim); }
  input.toplu-alt-girdi:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

  /* araçlar: tam-genişlik butonlar */
  .yan-ray .isle-sar { position: relative; display: block; }
  .yan-ray .btn { width: 100%; justify-content: center; }
  .yan-ray .kesif-arac { display: flex; flex-direction: column; gap: 6px; }

  /* üst ince şerit (arama + Sor + tema) */
  .ust-serit {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .ust-serit .arama-sar { flex: 1 1 auto; min-width: 0; }
  .ray-ac-btn { display: none; }
  .ic-akis { flex: 1; }

  /* ============ DARALTILMIŞ İKON RAYI (yalnız masaüstü) ============
     Referans "planner" sidebar'larındaki gibi: sidebar yalnız-ikon bir raya küçülür.
     Etiket/sayaç/chevron/başlık/alt-ağaç/süzgeçler gizlenir; kimlik title (tooltip) ile gelir.
     Mobilde (<=900px) daralt yok sayılır — çekmece tam içerik gösterir. */
  @media (min-width: 901px) {
    .yan-ray.daralt { width: 64px; padding-left: 8px; padding-right: 8px; }
    /* marka: kasa üstte, daralt (artık genişlet) düğmesi altta — dikey */
    .yan-ray.daralt .ray-marka { flex-direction: column; gap: 9px; padding: 0 0 4px; }
    .yan-ray.daralt .ray-marka .ad { display: none; }
    .yan-ray.daralt .ray-daralt-btn { margin-left: 0; transform: rotate(180deg); }
    /* nav: ikon ortalı; etiket/sayaç/chevron gizli */
    .yan-ray.daralt .gor-btn { justify-content: center; padding: 10px 0; gap: 0; }
    .yan-ray.daralt .gor-ad,
    .yan-ray.daralt .adet,
    .yan-ray.daralt .ray-cev,
    .yan-ray.daralt .kat-adet { display: none; }
    /* aktif: sol çubuk yerine ikon-hap (accent-soft zaten temelde) */
    .yan-ray.daralt .gor-btn.aktif::before,
    .yan-ray.daralt .klasor-cip.aktif::before { display: none; }
    .yan-ray.daralt .gor-btn.aktif,
    .yan-ray.daralt .klasor-cip.aktif { border-radius: 10px; }
    /* bölüm başlıkları + süzgeç bölümleri (Durum/Konular/Keşif araç) gizli */
    .yan-ray.daralt .klasor-bolum .ray-baslik-kat,
    .yan-ray.daralt .klasor-yeni,
    .yan-ray.daralt .klasor-bos,
    .yan-ray.daralt #durum-bolum,
    .yan-ray.daralt #konu-satir,
    .yan-ray.daralt #kesif-arac { display: none; }
    /* klasörler: ikon ortalı; ad/sayaç/chevron/× ve alt-ağaç gizli (genişletince görünür) */
    .yan-ray.daralt .klasor-cip { justify-content: center; padding: 10px 0; gap: 0; }
    .yan-ray.daralt .klasor-cip .kad,
    .yan-ray.daralt .klasor-cip .adet,
    .yan-ray.daralt .klasor-cip .ray-cev,
    .yan-ray.daralt .klasor-cip .klasor-sil,
    .yan-ray.daralt .alt-raf { display: none; }
    /* Yedek al: ikon ortalı; metin gizli (bare text node -> font-size:0) */
    .yan-ray.daralt .ray-arac-btn { justify-content: center; padding: 9px 0; gap: 0; font-size: 0; }
  }

  /* mobil çekmece + FAB */
  .ray-katman { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(14,10,28,.45); }
  .ray-katman.gor { display: block; }
  .ekle-fab { display: none; }

  @media (max-width: 900px) {
    .ray-daralt-btn { display: none; }   /* mobilde çekmece var; daralt düğmesi gizli */
    .yan-ray {
      position: fixed; top: 0; left: 0; z-index: 210; width: 264px; height: 100vh;
      transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.22);
    }
    .yan-ray.acik { transform: translateX(0); }
    .ray-ac-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--card-2); color: var(--text); border: none; }
    .ray-ac-btn .ik-svg { width: 20px; height: 20px; }
    .ekle-fab {
      display: grid; place-items: center; position: fixed; right: 18px; bottom: 18px; z-index: 120;
      width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; border: none;
      box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
    }
    .ekle-fab .ik-svg { width: 26px; height: 26px; }
    .ic-akis .ekle-alani { display: none; } /* mobilde hızlı kutu gizli; FAB ile büyük pencere */
    .ust-serit { padding: 9px 14px; }
    .ust-serit .toplam-bilgi { display: none; }
    .ust-serit .sor-btn-yazi { display: none; }
    .ust-serit .sor-ac-btn { padding: 9px 11px; }
  }


    /* Özet motoru (claude) yoksa üstte uyarı bandı. Token-tabanli -> 4 temaya (navy dahil) uyar; amber accent uyari anlamini korur. */
    .ai-uyari{display:flex;align-items:flex-start;gap:10px;padding:9px 16px;
      background:var(--card);color:var(--text-soft);
      border-bottom:1px solid var(--border);border-left:3px solid var(--warn);
      font-size:13px;line-height:1.5;}
    .ai-uyari-ik{flex:none;color:var(--warn);}
    .ai-uyari-metin{flex:1;min-width:0;}
    .ai-uyari code{background:var(--bg-soft);padding:1px 5px;border-radius:4px;
      font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12px;}
    .ai-uyari-kapat{flex:none;background:none;border:none;color:inherit;opacity:.7;
      font-size:18px;line-height:1;cursor:pointer;padding:0 2px;}
    .ai-uyari-kapat:hover{opacity:1;}