/* ============================================================================
 * Tasarım tokenları — Faz 1.1, 2026-09-14.
 * SSoT: docs/theProject/frontend/DESIGN_SYSTEM.md §16.
 * Değerler RGB kanal üçlüsü olarak yazılır (örn. --brand-primary: 90 69 224;)
 * ki opaklık varyantları rgb(var(--token) / a) ile çalışsın.
 * ============================================================================ */

:root {
    /* === Tipografi (Plus Jakarta Sans, yerel yüklenir — cdn/assets/css/fonts.css) === */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root {
    /* === Zemin === */
    --bg-page:       244 246 251;   /* #F4F6FB */
    --bg-surface:    255 255 255;   /* #FFFFFF */
    --bg-raised:     250 251 254;   /* #FAFBFE */
    --bg-sunken:     234 239 248;   /* #EAEFF8 */
    --bg-scrim:      22 32 46;      /* alpha = .45 ile kullanılır */
    --bg-inverse:    22 32 46;      /* #16202E — koyu mürekkep zemin (tanıtım alt bilgisi) */

    /* === Metin === */
    --text-primary:    22 32 46;    /* #16202E */
    --text-muted-rgb:  85 99 122;   /* #55637A */
    --text-subtle-rgb: 107 114 128; /* #6B7280 */
    /* a11y düzeltme (i-20260926-0003): eski #A3AEC2 beyaz zeminde 2.24:1 (AA
     * 4.5 altı, axe-core ile ölçüldü). Yeni #6C7483 → 4.71:1. Aynı mavi-gri
     * hue korundu, yalnız koyulaştırıldı; --text-subtle (:23, 4.83:1) ile
     * neredeyse çakışıyor — beyaz zeminde disabled'ı subtle'dan gözle ayırt
     * edilir ölçüde açık TUTUP 4.5'i geçmek matematiksel olarak mümkün değil
     * (aradaki boşluk yok), bu yüzden iki token artık birbirine çok yakın;
     * tasarım borcu, ayrı bir kalem gerekir. */
    --text-disabled:   108 116 131; /* #6C7483 */
    --text-inverse-rgb: 255 255 255; /* #FFFFFF */
    --text-link:       70 52 196;   /* #4634C4 */

    /* === Kenar === */
    --border-default:  224 231 242; /* #E0E7F2 */
    --border-strong-rgb: 194 205 223; /* #C2CDDF */
    --border-divider:  237 241 248; /* #EDF1F8 */
    /* --focus-ring: --brand-primary + 3px halo */

    /* === Marka === */
    --brand-primary-rgb: 90 69 224;   /* #5A45E0 — çelişki: tasarım 90 69 224, mevcut #5b52e8 (91 82 232) aşağıdaki eski blokta — -rgb soneki: eski blok aynı adı hex tanımlıyor, plan 8.2 eski bloğu silince sonek kalkar (2026-09-15) */
    --brand-hover:     70 52 196;   /* #4634C4 */
    --brand-active:    58 42 168;   /* #3A2AA8 */
    --brand-soft:      237 234 253; /* #EDEAFD */
    --on-brand:        255 255 255; /* #FFFFFF */

    /* === Durum (zemin / kenar / metin üçlüsü) === */
    --success-surface:  227 246 238;  --success-border: 168 213 191;  --success-text:  18 114 78;
    --warning-surface:  253 240 219;  --warning-border: 224 200 150;  --warning-text:  138 86 0;
    --danger-surface:   251 232 230;  --danger-border:  229 179 176;  --danger-text:   185 47 40;
    --info-surface:     230 241 251;  --info-border:    179 196 230;  --info-text:     26 101 168;

    /* === Yayın durumu (8 hâl) === */
    --publish-draft-surface:      234 239 248; --publish-draft-text:      85 99 122;   --publish-draft-border:      224 231 242;
    --publish-queued-surface:     230 241 251; --publish-queued-text:     26 101 168;  --publish-queued-border:     179 196 230;
    --publish-producing-surface:  237 234 253; --publish-producing-text:  70 52 196;   --publish-producing-border:  199 190 249;
    --publish-ready-surface:      227 246 238; --publish-ready-text:      18 114 78;   --publish-ready-border:      168 213 191;
    --publish-scheduled-surface:  253 240 219; --publish-scheduled-text:  138 86 0;    --publish-scheduled-border:  224 200 150;
    --publish-published-surface:  18 114 78;   --publish-published-text:  255 255 255; --publish-published-border:  18 114 78;
    --publish-failed-surface:     251 232 230; --publish-failed-text:     185 47 40;   --publish-failed-border:     229 179 176;
    --publish-rejected-surface:   255 255 255; --publish-rejected-text:   185 47 40;   --publish-rejected-border:   229 179 176; /* dashed */

    /* === Platform renkleri (yalnız rozet/ikon; ağın kendi rengi) === */
    --platform-instagram: 193 53 132;  /* #C13584 */
    --platform-facebook:  24 119 242;  /* #1877F2 */
    --platform-x:         22 32 46;    /* #16202E */
    --platform-linkedin:  10 102 194;  /* #0A66C2 */
    --platform-pinterest: 189 8 28;    /* #BD081C */
    --platform-tiktok:    43 43 43;    /* #2B2B2B */
    --platform-whatsapp:  31 168 85;   /* #1FA855 */
    --platform-telegram:  34 158 217;  /* #229ED9 */

    /* a11y METİN varyantları (i-20260926-0003): ÜSTTEKİ --platform-facebook /
     * --platform-instagram (rozet/ikon rengi) DEĞİŞMEDİ. `_platformStrip.php`
     * çipinde bugün ikon basılmıyor (marka logosu varlığı yok, dosyanın kendi
     * docblock'u) — yalnız DÜZ METİN oluyor, ki metin WCAG 1.4.3 kapsamında
     * 4.5:1 ister. Ölçüldü: #1877F2 beyazda dahi en çok 4.23:1 verir (deniz
     * mavisi marka tonunun matematiksel tavanı) — zemin ne kadar
     * açılırsa açılsın 4.5'e ULAŞAMAZ; marka rengi SABİT kalıp (talimat)
     * yalnız METİN için aynı tondan koyulaştırılmış bir varyant üretildi
     * (aynı hue, ikon/rozet için kullanılan orijinal ton hâlâ mevcut ve
     * değişmedi). Değerler uydurulmadı: ölü/kullanılmayan eski blokta
     * (:220 civarı, `--brand-facebook-text` vb., "Frontend review #H8,
     * 2026-05-13") aynı problem için önceden hesaplanmış, hiç bağlanmamış
     * tonlar zaten vardı — onlar yeniden kullanıldı. */
    --platform-facebook-text:  13 97 201;   /* #0D61C9 — edeafd:4.98:1, beyaz:5.88:1 */
    --platform-instagram-text: 177 32 126;  /* #B1207E — edeafd:5.27:1, beyaz:6.22:1 */

    /* === Grafik serileri + ızgara === */
    --chart-1: 90 69 224;     /* #5A45E0 */
    --chart-2: 26 101 168;    /* #1A65A8 */
    --chart-3: 18 114 78;     /* #12724E */
    --chart-4: 138 86 0;      /* #8A5600 */
    --chart-5: 179 80 106;    /* #B3506A */
    --chart-6: 85 99 122;     /* #55637A */
    --chart-grid: 224 231 242;/* #E0E7F2 */

    /* === Ölçü (px / ms) === */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-6: 24px;  --space-8: 32px;  --space-10: 40px;

    --radius-xs:   3px;  --radius-sm: 6px;  --radius-md: 9px;  --radius-full: 999px;

    --duration-fast:   120ms;  --duration-normal: 200ms;
    --duration-slow:   320ms;  --duration-cap:    500ms;

    --z-base:   0;    --z-sticky: 10;  --z-drawer: 30;
    --z-modal:  40;   --z-toast:  50;

    --touch-target: 44px;

    /* === Gölge (tasarım: Fixerkit Tokens › Gölge kademeleri; koyuda gölge yok, kenar) === */
    --shadow-sm: 0 1px 2px rgba(22, 32, 46, .06);
    --shadow-md: 0 4px 12px rgba(22, 32, 46, .10);
    --shadow-lg: 0 12px 32px rgba(22, 32, 46, .16);
    --shadow-focus: 0 0 0 3px rgb(var(--brand-soft)), 0 0 0 4px rgb(var(--brand-primary-rgb));

    /* === Yazı ölçeği (tasarım: 11/12/13/15/18/20/24, satır 1.45, ağırlık 400/500/600) === */
    --text-2xs: 11px;  --text-xs: 12px;  --text-sm: 13px;  --text-base: 15px;
    --text-lg:  18px;  --text-xl: 20px;  --text-2xl: 24px;
    --leading:  1.45;
}

[data-theme="dark"] {
    /* === Zemin === */
    --bg-page:       20 22 31;     /* #14161F */
    --bg-surface:    27 30 41;     /* #1B1E29 */
    --bg-raised:     35 39 52;     /* #232734 */
    --bg-sunken:     15 17 26;     /* #0F111A */
    --bg-scrim:      5 6 10;       /* alpha = .65 ile kullanılır */
    --bg-inverse:    11 13 19;     /* #0B0D13 — koyu temada alt bilgi zemini (tasarım dosyasında ayrı değer bulunamadı) */

    /* === Metin === */
    --text-primary:    231 234 242; /* #E7EAF2 */
    --text-muted-rgb:  152 162 183; /* #98A2B7 */
    --text-subtle-rgb: 156 163 175; /* #9CA3AF */
    /* AA 4.5:1 (yüzey #1B1E29'da 6.54:1). Bu, eski [data-theme="dark"]
     * --text-subtle geçersiz kılmasının (#9ca3af) değeri; tasarımın #6B7591'i
     * aynı yüzeyde 3.62:1 idi (AA altı). Renk tek evde: bu üçlü. */
    /* a11y düzeltme (i-20260926-0003): eski #616A7D koyu yüzeyde (#1B1E29)
     * 3.06:1 (AA altı, ölçüldü — görev yalnız açık temayı istemişti ama
     * "gerekiyorsa düzelt" notu üzerine koyu tema da ölçüldü ve o da başarısız
     * çıktı). Yeni #808797 → 4.61:1. NOT: koyu --text-subtle (#6B7591)
     * aynı yüzeyde yalnız 3.62:1 idi — 2026-10-13'te giderildi (aşağıda
     * #9CA3AF, 6.54:1). */
    --text-disabled:   128 135 151; /* #808797 */
    --text-inverse-rgb: 20 22 31;    /* #14161F */
    --text-link:       183 173 247; /* #B7ADF7 */

    /* === Kenar === */
    --border-default:  44 49 64;    /* #2C3140 */
    --border-strong-rgb: 61 67 84;    /* #3D4354 */
    --border-divider:  35 39 52;    /* #232734 */

    /* === Marka === */
    --brand-primary-rgb: 154 140 240; /* #9A8CF0 — çelişki: tasarım 154 140 240, mevcut #8b80ff (139 128 255) aşağıdaki eski blokta */
    --brand-hover:     176 164 245; /* #B0A4F5 */
    --brand-active:    199 190 249; /* #C7BEF9 */
    --brand-soft:      35 32 67;    /* #232043 */
    --on-brand:        20 22 31;    /* #14161F */

    /* === Durum (zemin / kenar / metin üçlüsü) === */
    --success-surface:  18 41 31;     --success-border: 35 80 59;      --success-text:  87 199 154;
    --warning-surface:  43 35 19;     --warning-border: 87 69 33;      --warning-text:  226 178 92;
    --danger-surface:   46 26 28;     --danger-border:  90 49 52;      --danger-text:   239 124 115;
    --info-surface:     20 33 47;     --info-border:    42 63 88;      --info-text:     107 168 232;

    /* === Yayın durumu === */
    --publish-draft-surface:      35 39 52; --publish-draft-text:      152 162 183; --publish-draft-border:      44 49 64;
    --publish-queued-surface:     20 33 47; --publish-queued-text:     107 168 232; --publish-queued-border:     42 63 88;
    --publish-producing-surface:  35 32 67; --publish-producing-text:  183 173 247; --publish-producing-border:  58 52 112;
    --publish-ready-surface:      18 41 31; --publish-ready-text:      87 199 154; --publish-ready-border:      35 80 59;
    --publish-scheduled-surface:  43 35 19; --publish-scheduled-text:  226 178 92; --publish-scheduled-border:  87 69 33;
    --publish-published-surface:  87 199 154; --publish-published-text:20 22 31;    --publish-published-border:  87 199 154;
    --publish-failed-surface:     46 26 28; --publish-failed-text:     239 124 115; --publish-failed-border:     90 49 52;
    --publish-rejected-surface:   27 30 41; --publish-rejected-text:   239 124 115; --publish-rejected-border:   90 49 52; /* dashed */

    /* === Grafik ızgarası === */
    --chart-grid: 44 49 64; /* #2C3140 */

    /* === Gölge: koyuda yok, yüzey kenarla ayrılır === */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    /* === Platform a11y metin (i-20260926-0003) ===
     * Ölçüldü: koyu `--brand-soft` (#232043) üstünde facebook/instagram
     * ORİJİNAL tonu da AA altı (3.65:1 / 3.02:1) — kapsam dışı ama not
     * düşülüyor (bkz. rapor). Değer uydurulmadı: aşağıdaki eski/hiç
     * bağlanmamış "Platform brand dark overrides" bloğundaki (:335 civarı)
     * `--brand-facebook-text`/`--brand-instagram-text` koyu tonları aynen
     * yeniden kullanıldı — ikisi de #232043 üstünde ölçüldü: 6.02:1 / 7.61:1. */
    --platform-facebook-text:  96 163 255;  /* #60A3FF */
    --platform-instagram-text: 242 154 212; /* #F29AD4 */
}

/*
 * Design tokens — Faz G6 UI overhaul.
 * Single source of truth for color/spacing/typography.
 * Light + dark mode via [data-theme] attribute on <html>.
 * Renk, köşe, süre ve satır yüksekliğinin tek evi üstteki -rgb üçlüleri ve
 * --radius-* / --duration-* / --leading jetonlarıdır; eski takma adlar silindi
 * (i-20260914-0226-e).
 */

:root {

    /* === Spacing scale (Tailwind compatible) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* === Type: ölçek ve satır yüksekliği üstteki ilk :root bloğunda (11/12/13/15/18/20/24, satır 1.45). === */

    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;

    /* === Platform brand tokens (Frontend review #H8, 2026-05-13) ===
       Daha önce calendar/aiCopilot/workflow'da hardcoded'du, dark mode'da
       invisible olabiliyordu (örn. TikTok #000000 on dark bg). Burada
       canonical, dark override aşağıda. */
    --brand-instagram:       #d6249f;
    --brand-instagram-soft:  rgba(214, 36, 159, 0.10);
    --brand-instagram-text:  #b1207e;
    --brand-twitter:         #1da1f2;
    --brand-twitter-soft:    rgba(29, 161, 242, 0.10);
    --brand-twitter-text:    #0d8edb;
    --brand-facebook:        #1877f2;
    --brand-facebook-soft:   rgba(24, 119, 242, 0.10);
    --brand-facebook-text:   #0d61c9;
    --brand-linkedin:        #0a66c2;
    --brand-linkedin-soft:   rgba(10, 102, 194, 0.10);
    --brand-linkedin-text:   #084d92;
    --brand-tiktok:          #000000;
    --brand-tiktok-soft:     rgba(0, 0, 0, 0.08);
    --brand-tiktok-text:     #333333;

    /* =====================================================================
     * ALIAS: dış kaynak sözlüğü — DESIGN_SYSTEM.md §13.4
     *
     * KURAL: bu blokta SADECE var() bulunur, literal (hex/px/rem) YASAK.
     * Literal girdiği an değerin ikinci bir evi doğar ve SSoT (CLAUDE.md
     * kural 11) çiğnenir. Köprü TEK YÖNLÜDÜR: dış kaynak adı → bizim adımız.
     * Denetim: bash bin/check-token-alias.sh cdn/assets/css/tokens.css
     *
     * [data-theme="dark"] bloğuna alias YAZILMAZ — köprü var() olduğu için
     * dark override'lar kendiliğinden akar.
     * ===================================================================== */
    --color-bg:            rgb(var(--bg-page));
    --color-bg-subtle:     rgb(var(--bg-raised));
    --color-bg-muted:      rgb(var(--bg-sunken));
    --color-border:        rgb(var(--border-default));
    --color-border-strong: rgb(var(--border-strong-rgb));
    --color-text:          rgb(var(--text-primary));
    --color-text-muted:    rgb(var(--text-muted-rgb));
    --color-text-subtle:   rgb(var(--text-subtle-rgb));
    --color-primary-fg:    rgb(var(--text-inverse-rgb));
}

/* ---------------------------------------------------------------------------
 * BİLEREK ALIAS YAZILMAYANLAR (DESIGN_SYSTEM.md §13.2 + §1)
 *
 *   --color-primary
 *       DESIGN_SYSTEM.md §1 semantic'te `#0A0A0B`, §13.2'de "Ad aynı, DEĞER
 *       BİZİM" diye ikinci kez teyitli. `--brand-primary` (#5b52e8) MARKA
 *       rengidir, aksiyon/CTA rengi değil (§1 "Proje brand token'ları").
 *       İkisini eşitlemek SSoT'u çiğner → alias yok.
 *
 *   --color-success / -warning / -danger / -info  (+ -bg / -fg)
 *       §1 bu üçlüyü `-bg` + `-fg` İKİLİSİYLE tanımlar (§12 self-check maddesi).
 *       Bu dosyada `-fg` karşılığı HİÇ YOK (grep: 0 satır) — yalnız `--success`
 *       ve `--success-bg` var. Eksik yarıyı tahminle eşlemek §13.2'nin son
 *       cümlesiyle yasak ("tahminle eşleme"). Gerekirse önce §1'e terfi, sonra
 *       alias.
 * ------------------------------------------------------------------------- */

/* === Dark mode === */
[data-theme="dark"] {
    /* Marka + zemin + metin + durum adları :root'ta -rgb üçlülerine bağlı; koyu değer
     * [data-theme="dark"] üçlülerinden kendiliğinden akar. Aşağıda yalnız platform rozetleri. */
    /* Koyu zeminde (#1B1E29) açık-temadaki #16202E / #2B2B2B görünmez: X ve TikTok ağ rengi
     * koyu metin rengine (#E7EAF2) çevrilir; kontrast ~13:1. Diğer ağ renkleri koyuda okunur. */
    --platform-x:      231 234 242; /* #E7EAF2 */
    --platform-tiktok: 231 234 242; /* #E7EAF2 */
    /* Platform brand dark overrides — readable on dark surface */
    --brand-instagram-soft:  rgba(214, 36, 159, 0.22);
    --brand-instagram-text:  #f29ad4;
    --brand-twitter-soft:    rgba(29, 161, 242, 0.22);
    --brand-twitter-text:    #67c1f8;
    --brand-facebook-soft:   rgba(24, 119, 242, 0.22);
    --brand-facebook-text:   #60a3ff;
    --brand-linkedin-soft:   rgba(10, 102, 194, 0.22);
    --brand-linkedin-text:   #5db1ff;
    --brand-tiktok:          #ffffff;
    --brand-tiktok-soft:     rgba(255, 255, 255, 0.10);
    --brand-tiktok-text:     #e5e7eb;
}

/* Auto dark mode if user prefers system dark and explicit theme not set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
}

/* === Base reset (modern, mobile-first) === */
html { font-family: var(--font-sans); }
body { background: rgb(var(--bg-page)); color: rgb(var(--text-primary)); transition: background var(--duration-normal) ease, color var(--duration-normal) ease; }

/* === Component primitives === */

/* Button base — tasarım: yükseklik 34px, köşe 6px, 13px/500; dokunma alanı ::after ile 44px */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 34px; padding: 0 13px; border-radius: var(--radius-sm);
    font-weight: 500; font-size: var(--text-sm); line-height: var(--leading);
    border: 1px solid transparent; cursor: pointer; user-select: none;
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
    text-decoration: none;
}
.btn::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, var(--touch-target)); height: var(--touch-target);
    transform: translate(-50%, -50%);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { cursor: not-allowed; background: rgb(var(--bg-sunken)); color: rgb(var(--text-disabled)); border-color: transparent; }
.btn-primary { background: rgb(var(--brand-primary-rgb)); color: rgb(var(--on-brand)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--brand-hover)); }
.btn-primary:active:not(:disabled) { background: rgb(var(--brand-active)); }
.btn-secondary { background: rgb(var(--bg-surface)); color: rgb(var(--text-primary)); border-color: rgb(var(--border-strong-rgb)); }
.btn-secondary:hover:not(:disabled) { background: rgb(var(--bg-page)); }
.btn-secondary:active:not(:disabled) { background: rgb(var(--bg-sunken)); }
.btn-secondary:disabled { background: rgb(var(--bg-surface)); border-color: rgb(var(--border-default)); }
.btn-ghost { background: transparent; color: rgb(var(--text-primary)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--bg-sunken)); }
.btn-ghost:active:not(:disabled) { background: rgb(var(--bg-sunken)); }
.btn-ghost:disabled { background: transparent; }
.btn-danger { background: rgb(var(--danger-text)); color: rgb(var(--on-brand)); }
.btn-danger:disabled { background: rgb(var(--bg-sunken)); }
/* Yükleniyor: 12px dönen halka, opaklık .9, tıklama kapalı */
.btn.is-loading { opacity: .9; pointer-events: none; }
.btn.is-loading::before {
    content: ''; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Card — statik yüzey; üzerine gelme yalnız etkileşimli kartta (.card-link / a.card) */
.card {
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-default)); border-radius: var(--radius-md);
    padding: var(--space-6); box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.card-link:hover, a.card:hover { border-color: rgb(var(--border-strong-rgb)); box-shadow: var(--shadow-md); }

/* Form field — modern floating label */
.form-field { position: relative; margin-bottom: var(--space-4); }
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%; padding: 16px 12px 8px; font-size: 15px; line-height: 1.4;
    background: rgb(var(--bg-surface)); color: rgb(var(--text-primary));
    border: 1px solid rgb(var(--border-strong-rgb)); border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none; border-color: rgb(var(--brand-primary-rgb)); box-shadow: var(--shadow-focus);
}
.form-field input::placeholder { color: transparent; }
.form-field label {
    position: absolute; left: 12px; top: 14px; font-size: 14px; color: rgb(var(--text-muted-rgb));
    pointer-events: none; transition: top var(--duration-fast) ease, font-size var(--duration-fast) ease, color var(--duration-fast) ease;
    background: rgb(var(--bg-surface)); padding: 0 4px;
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label,
.form-field select + label,
.form-field select:focus + label {
    top: -8px; font-size: 12px; color: rgb(var(--brand-primary-rgb));
}
/* <select> doesn't support :placeholder-shown — labels stay floated permanently
   (selects always have a value, so it never has the empty/initial state) */
.form-field select + label { color: rgb(var(--text-muted-rgb)); }
.form-field select:focus + label { color: rgb(var(--brand-primary-rgb)); }
/* Number inputs: same handling — placeholder " " is enough but type=number
   has different behavior for :placeholder-shown in some browsers — covered above */
.form-field .help { font-size: 12px; color: rgb(var(--text-muted-rgb)); margin-top: 4px; }
.form-field .error { font-size: 12px; color: rgb(var(--danger-text)); margin-top: 4px; }

/* Düz input/select (FAZ 9.S3) — floating-label'lı `.form-field` yerine
 * görünür <label> + alan kullanan yerler için. postSuggestionsUi.js modal
 * formu bu sınıfa karşı yazılmıştı ama sınıf HİÇ tanımlı değildi: alanlar
 * tarayıcı varsayılanıyla, tema/dark mode dışında render oluyordu.
 * Tailwind statik artefakt olduğu için utility ile telafi edilemez. */
.form-input {
    width: 100%; padding: 10px 12px; font-size: 14px; line-height: 1.4;
    background: rgb(var(--bg-surface)); color: rgb(var(--text-primary));
    border: 1px solid rgb(var(--border-strong-rgb)); border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.form-input:focus { outline: none; border-color: rgb(var(--brand-primary-rgb)); box-shadow: var(--shadow-focus); }
.form-input:disabled { opacity: .6; cursor: not-allowed; }
.form-input::placeholder { color: rgb(var(--text-subtle-rgb)); }

/* Alert / banner */
.alert {
    padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid; font-size: var(--text-xs);
    display: flex; gap: 10px; align-items: flex-start;
}
.alert-success { background: rgb(var(--success-surface)); border-color: rgb(var(--success-border)); color: rgb(var(--success-text)); }
.alert-danger,
.alert-error { background: rgb(var(--danger-surface)); border-color: rgb(var(--danger-border)); color: rgb(var(--danger-text)); }
.alert-warning { background: rgb(var(--warning-surface)); border-color: rgb(var(--warning-border)); color: rgb(var(--warning-text)); }
.alert-info { background: rgb(var(--info-surface)); border-color: rgb(var(--info-border)); color: rgb(var(--info-text)); }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, rgb(var(--bg-sunken)) 25%, rgb(var(--bg-raised)) 50%, rgb(var(--bg-sunken)) 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-sm); display: block;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }

/* Empty state */
.empty-state { text-align: center; padding: 48px 24px; color: rgb(var(--text-muted-rgb)); }
.empty-state-icon { font-size: 56px; margin-bottom: 16px; opacity: .6; }
.empty-state h2 { font-size: 18px; color: rgb(var(--text-primary)); margin: 0 0 8px; font-weight: 600; }
.empty-state p { font-size: 14px; line-height: 1.5; max-width: 420px; margin: 0 auto 20px; }
.empty-state-cta { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Toast container */
#toast-region {
    position: fixed; top: 16px; right: 16px; z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: 8px; max-width: 380px;
    pointer-events: none;
}
.toast {
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-default)); border-radius: var(--radius-sm);
    padding: 12px 16px; box-shadow: var(--shadow-lg); pointer-events: auto;
    animation: toast-in var(--duration-normal) ease-out;
    display: flex; gap: 10px; align-items: flex-start;
}
.toast.toast-success { border-left: 4px solid rgb(var(--success-text)); }
.toast.toast-danger,
.toast.toast-error   { border-left: 4px solid rgb(var(--danger-text)); }
.toast.toast-warning { border-left: 4px solid rgb(var(--warning-text)); }
.toast.toast-info    { border-left: 4px solid rgb(var(--info-text)); }
.toast.leaving { animation: toast-out var(--duration-normal) ease-in forwards; }
.toast-body { flex: 1; font-size: 14px; line-height: 1.4; color: rgb(var(--text-primary)); }
.toast-title { font-weight: 600; margin: 0 0 2px; font-size: 14px; }
.toast-desc { color: rgb(var(--text-muted-rgb)); font-size: 13px; }
.toast-action { background: transparent; border: 0; color: rgb(var(--brand-primary-rgb)); font-weight: 600; cursor: pointer; padding: 0; font-size: 13px; }
.toast-close { background: transparent; border: 0; color: rgb(var(--text-subtle-rgb)); cursor: pointer; padding: 0 4px; font-size: 18px; line-height: 1; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(20px); } }

/* === Panel header responsive ===
 *
 * NEDEN TAILWIND SINIFI DEĞİL — ölçüldü (2026-08-02):
 *   `cdn/assets/css/tailwind.min.css` **statik artifact** (tailwind.config.js
 *   başlığında yazılı: build tek seferlik, çıktı commit'li). İçinde `lg:hidden`
 *   ve hiçbir `xl:*` sınıfı **YOK** — `grep` ile doğrulandı. Markup'a `xl:flex`
 *   yazmak sessizce hiçbir şey yapardı: kural değil, ölü sınıf olurdu.
 *   Artifact'i yeniden üretmek de doğru yol değildi; `content` globu
 *   `interface/**\/*.php` olduğu için başka bir şeridin henüz commit edilmemiş
 *   view'larının sınıflarını da bu commit'e sokardı.
 *
 * NE DÜZELTİYOR — ölçülen taşma (`#row` scrollWidth / viewport):
 *   768px → 1117/768 · 820px → 1117/820 · 1024px → 1133/1024
 *   Yani başlık **768'den ~1150'ye kadar** taşıyordu, yalnız 768'de değil.
 *   Kök neden: `md:` (768) eşiği 5 metin bağlantılı nav'ı sağ kümenin yanına
 *   sığmadığı bir genişlikte açıyordu. Taşma flex satırında `flex-shrink`
 *   tetikliyor, o da 36px'lik ikon butonlarını **28px'e eziyordu** —
 *   visual-qa'nın "tap target 28x36" bulgusu ile taşma bulgusu AYNI kök nedendi.
 *
 * Eşik: nav ile mobil sekme çubuğu TEK media query'den sürülür; ayrı eşikler
 * verilseydi bir aralıkta hiç navigasyon kalmayabilirdi. */
.panel-nav-primary { display: none; }
.panel-nav-mobile  { display: block; }
.panel-search      { display: none; }
.panel-search-label, .panel-search-kbd { display: none; }
.panel-user-link, .panel-user-divider   { display: none; }

@media (min-width: 640px) {
    .panel-search    { display: inline-flex; }
    .panel-user-link { display: inline-block; }
}
@media (min-width: 1024px) {
    .panel-nav-primary { display: flex; }
    .panel-nav-mobile  { display: none; }
    /* 1024-1279 aralığında nav + sağ küme sığsın: bağlantı yatay dolgusu 12→9px.
     * Ölçülmeden konmadı — 12px'te satır 973px, kapsayıcı 960px'ti. */
    .panel-nav-primary > a { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1280px) {
    .panel-search-label, .panel-search-kbd { display: inline; }
    .panel-user-divider    { display: block; }
    .panel-nav-primary > a { padding-left: 12px; padding-right: 12px; }
}

/* EMNİYET AĞI — eşikler "bugünkü İngilizce etiketlerle" ölçüldü. Ü6 çok
 * dillilik fazı aynı bağlantılara daha uzun Türkçe etiketler koyacak
 * ("Analytics" → "Analizler"). O gün sayfanın yeniden kırılmaması için nav
 * kendi içinde kayar; taşma sayfaya ASLA çıkmaz. `min-width: 0` olmadan flex
 * öğesi içeriğinin altına inemez ve `overflow` hiç tetiklenmez. */
.panel-nav-primary { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.panel-nav-primary::-webkit-scrollbar { display: none; }
.panel-nav-primary > a { white-space: nowrap; }

/* Dokunma hedefi ≥44px — GÖRSEL kutu 36px kalır (tasarım sistemi ölçüsü),
 * yalnız isabet alanı büyür. Şeffaf ::after buton İÇİNDE olduğu için tıklama
 * yine butona gider; 8px'lik `gap-2` aralığına taşar, komşu butona değil. */
.panel-icon-btn { position: relative; }
.panel-icon-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm); position: relative;
    background: transparent; border: 1px solid rgb(var(--border-strong-rgb)); cursor: pointer;
    color: rgb(var(--text-primary)); transition: background var(--duration-fast) ease;
}
.theme-toggle:hover { background: rgb(var(--bg-raised)); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Açıkta ay, koyuda güneş — ikinci ikon gizli (çizim _icon.php'de, theme.js dokunmaz). */
.theme-toggle .ti-sun { display: none; }
[data-theme="dark"] .theme-toggle .ti-sun { display: block; }
[data-theme="dark"] .theme-toggle .ti-moon { display: none; }

/* Visually hidden (a11y) */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus ring (a11y) */
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Metin alanı odağı (tasarım: 1px marka kenarı + tek 3px açık halka). Bu alanlar odakta zaten marka kenarı
 * alır; jetonun ikinci (4px marka) halkası kenarın dışında çift çerçeve çiziyordu. Jeton yalnız bu alanlarda
 * yerelde daraltılır (özgüllük kaygısı yok: `.focus:shadow-focus` ve `*:focus-visible` aynı değişkeni okur).
 * #helpSearch-input her hâlde: sorgu varken odakta olmayan alan statik shadow-focus taşır (tek 3px halka). */
.form-field input:focus, .form-field textarea:focus, .form-field select:focus,
.form-input:focus, .form-input:focus-visible,
#help-hero-search:focus, #help-hero-search:focus-visible,
#helpSearch-input {
    --shadow-focus: 0 0 0 3px rgb(var(--brand-soft));
}

/* Üst çubuk bağlantıları: basılı hâl (hover rengi kalmasın). Tanım header.php'de; burada yalnız :active, özgüllük
 * (0,3,1) hover'ı (0,3,0) yener. */
.site-header a.site-cta:active { background: rgb(var(--brand-active)); color: rgb(var(--on-brand)); }
.site-header a.site-signin:active { background: rgb(var(--bg-sunken)); color: rgb(var(--brand-active)); text-decoration: underline; }

/* Çip kuralı yalnız .wizard-stepper listesine bağlı (:where özgüllüğü 0 tutar, -active/-done geçersiz kılar); aynı ada sahip adım gövdesine (WizardShell/WizardStep section) uygulanmaz. */
/* === Wizard component === */
[data-wizard-stepper] { margin-bottom: 24px; }
.wizard-progress { height: 4px; background: rgb(var(--bg-sunken)); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.wizard-progress-bar { height: 100%; background: rgb(var(--brand-primary-rgb)); transition: width var(--duration-slow) ease; }
.wizard-stepper { display: flex; gap: 8px; padding: 0; margin: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
:where(.wizard-stepper) .wizard-step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 10px;
               border-radius: var(--radius-sm); font-size: 13px; scroll-snap-align: start;
               border: 1px solid rgb(var(--border-default)); background: rgb(var(--bg-surface)); color: rgb(var(--text-muted-rgb)); }
.wizard-step-active { border-color: rgb(var(--brand-primary-rgb)); color: rgb(var(--brand-primary-rgb)); background: rgb(var(--brand-soft)); font-weight: 600; }
.wizard-step-done { color: rgb(var(--success-text)); border-color: rgb(var(--success-text)); background: rgb(var(--success-surface)); }
.wizard-step-num { display: inline-flex; align-items: center; justify-content: center;
                   width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
                   background: rgb(var(--bg-sunken)); color: inherit; }
.wizard-step-active .wizard-step-num { background: rgb(var(--brand-primary-rgb)); color: rgb(var(--text-inverse-rgb)); }
.wizard-step-done .wizard-step-num { background: rgb(var(--success-text)); color: rgb(var(--text-inverse-rgb)); }
.wizard-step-label { white-space: nowrap; }
.wizard-step-count { font-size: 12px; color: rgb(var(--text-muted-rgb)); margin: 0; }
.wizard-step-clickable { cursor: pointer; transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease; }
.wizard-step-clickable:hover { transform: translateY(-1px); border-color: rgb(var(--brand-primary-rgb)); }
.wizard-step-clickable:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* === Example chip rows (input opsiyonel alternatif) === */
.example-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.example-chips-label { width: 100%; font-size: 11px; color: rgb(var(--text-muted-rgb));
                       margin: 2px 0 -2px; letter-spacing: 0.02em; text-transform: uppercase; }
.chip-example {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 12px; line-height: 1.4;
    background: rgb(var(--bg-sunken)); color: rgb(var(--text-muted-rgb));
    border: 1px solid rgb(var(--border-default)); border-radius: 999px;
    cursor: pointer; transition: all var(--duration-fast) ease;
    -webkit-appearance: none; appearance: none;
    font-family: inherit;
}
.chip-example:hover { background: rgb(var(--brand-soft));
                      color: rgb(var(--brand-primary-rgb)); border-color: rgb(var(--brand-primary-rgb)); }
.chip-example.is-active { background: rgb(var(--brand-primary-rgb)); color: rgb(var(--text-inverse-rgb));
                          border-color: rgb(var(--brand-primary-rgb)); font-weight: 600; }
.chip-example:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.chip-example .chip-swatch { width: 12px; height: 12px; border-radius: 50%;
                             border: 1px solid rgb(var(--border-default)); flex-shrink: 0; }

[data-wizard-step] { display: block; }
[data-wizard-step][hidden] { display: none; }
[data-wizard-nav] { display: flex; gap: 8px; justify-content: space-between;
                    padding-top: 18px; margin-top: 24px; border-top: 1px solid rgb(var(--border-default)); }
[data-wizard-nav] .wizard-nav-right { display: flex; gap: 8px; }

/* === Skip-link (a11y) === */
.skip-link { position: absolute; left: -9999px; top: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: calc(var(--z-toast) + 1); padding: 8px 14px;
                   background: rgb(var(--brand-primary-rgb)); color: rgb(var(--on-brand));
                   border-radius: var(--radius-sm); font-weight: 600; }

/* === Onboarding tour overlay === */
#onboarding-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(0,0,0,.55); pointer-events: auto;
}
.onboarding-spotlight {
    position: absolute; pointer-events: none;
    border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 4px rgb(var(--brand-primary-rgb));
    transition: all var(--duration-slow) ease;
}
.onboarding-tooltip {
    position: absolute; z-index: calc(var(--z-modal) + 1);
    background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-default)); border-radius: var(--radius-md);
    padding: 16px 18px; max-width: 320px; box-shadow: var(--shadow-lg);
    color: rgb(var(--text-primary));
}
.onboarding-tooltip h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.onboarding-tooltip p { margin: 0 0 12px; font-size: 13px; color: rgb(var(--text-muted-rgb)); line-height: 1.5; }
.onboarding-tooltip-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.onboarding-tooltip-progress { font-size: 11px; color: rgb(var(--text-subtle-rgb)); }

/* === Calendar grid ===
 *
 * ⚠ `1fr` DEĞİL `minmax(0, 1fr)` — ölçülerek öğrenildi (2026-08-02, 375px):
 *   `1fr`ın alt sınırı `auto`dur, yani track içeriğin **min-content**inden dar
 *   olamaz. `.cal-event` `white-space: nowrap` taşıdığı için uzun bir gönderi
 *   başlığı ("14:30 Yaz kampanyası duyurusu") hücrenin taban genişliğini
 *   dayatıyordu: 375px ekranda hücre **188px** ölçüldü, 7 kolon = **1323px**.
 *   `.cal-grid`de `overflow: hidden` olduğu için bu taşma yatay kaydırma
 *   çubuğu ÜRETMİYOR — **kırpıyor**: Çarşamba-Pazar sessizce görünmez oluyordu.
 *   Gün başlıkları ("Mon") kısa olduğu için 52px kalıyor, gövde 188px →
 *   başlık satırı ile gün hücreleri **hizasız** görünüyordu; ikisi de aynı
 *   kök nedendi.
 *   `minmax(0, 1fr)` + `.cal-day { min-width: 0 }` tabanı sıfıra indirir;
 *   metni `.cal-event`in mevcut `text-overflow: ellipsis`i kısaltır.
 *   Ölçüm sonrası: hücre 52.4px, grid scrollWidth == clientWidth. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
            background: rgb(var(--border-default)); border: 1px solid rgb(var(--border-default)); border-radius: var(--radius-sm); overflow: hidden; }
.cal-day { background: rgb(var(--bg-surface)); min-height: 110px; padding: 8px; min-width: 0;
           font-size: 12px; position: relative; cursor: pointer; transition: background var(--duration-fast) ease; }
.cal-day:hover { background: rgb(var(--bg-raised)); }
.cal-day.cal-day-other-month { background: rgb(var(--bg-raised)); color: rgb(var(--text-subtle-rgb)); }
.cal-day.cal-day-today { background: rgb(var(--brand-soft)); }
.cal-day-num { font-weight: 600; margin-bottom: 4px; }
.cal-day-events { display: flex; flex-direction: column; gap: 2px; }
.cal-event {
    background: rgb(var(--brand-soft)); color: rgb(var(--brand-primary-rgb));
    padding: 2px 5px; border-radius: 3px; font-size: 11px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-left: 3px solid rgb(var(--brand-primary-rgb));
}
.cal-event-instagram { border-left-color: var(--brand-instagram); background: var(--brand-instagram-soft); color: var(--brand-instagram-text); }
.cal-event-twitter   { border-left-color: var(--brand-twitter);   background: var(--brand-twitter-soft);   color: var(--brand-twitter-text); }
.cal-event-facebook  { border-left-color: var(--brand-facebook);  background: var(--brand-facebook-soft);  color: var(--brand-facebook-text); }
.cal-event-linkedin  { border-left-color: var(--brand-linkedin);  background: var(--brand-linkedin-soft);  color: var(--brand-linkedin-text); }
.cal-event-tiktok    { border-left-color: var(--brand-tiktok);    background: var(--brand-tiktok-soft);    color: var(--brand-tiktok-text); }
.cal-event-failed    { border-left-color: rgb(var(--danger-text)); background: rgb(var(--danger-surface)); color: rgb(var(--danger-text)); }

/* a11y METİN varyantı (i-20260926-0003) — bkz. `--platform-facebook-text` /
 * `--platform-instagram-text` tanımı (:70 civarı) için tam gerekçe. Tailwind
 * SINIFI DEĞİL: derlenmiş `tailwind.min.css`'te yeni sınıf sessiz no-op
 * olurdu (emsal: `blog/_postEnrichments.php:272`), statik artefaktı elle
 * yeniden derlemek burada gerekmiyor — düz CSS sınıfı, hemen yürürlükte.
 * Yalnız `_landing/_platformStrip.php` çipinin METİN etiketinde kullanılır;
 * `--platform-facebook` / `--platform-instagram` (rozet/ikon) ayrı kalır. */
.text-platform-facebook-a11y  { color: rgb(var(--platform-facebook-text)); }
.text-platform-instagram-a11y { color: rgb(var(--platform-instagram-text)); }
/* Başlık satırı gövdeyle AYNI track tanımını kullanmalı — aksi halde iki grid
 * farklı taban genişliğine oturur ve kolonlar hizasız görünür (yukarıdaki not). */
.cal-day-headers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
                   background: rgb(var(--border-default)); border: 1px solid rgb(var(--border-default)); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; }
.cal-day-header { background: rgb(var(--bg-raised)); padding: 8px; text-align: center; min-width: 0;
                  font-size: 11px; font-weight: 600; color: rgb(var(--text-muted-rgb)); text-transform: uppercase; letter-spacing: .04em;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dar ekranda 7 kolon zorunlu olarak ~52px'e iner (375px). 8px'lik iki yanlı
 * padding içeriğe 36px bırakıyordu → gün numarası bile sıkışıyordu. Ölçüldü;
 * padding daralması hücre genişliğini değil KULLANILABİLİR alanı büyütür. */
@media (max-width: 640px) {
    .cal-day { padding: 4px 3px; min-height: 84px; }
    .cal-day-header { padding: 6px 2px; letter-spacing: 0; }
    .cal-event { padding: 1px 3px; border-left-width: 2px; font-size: 10px; }
}

/* Takvim araç çubuğu — dar ekranda sarar (ölçüm: 375px'te satırın min genişliği
 * 391px, kullanılabilir alan 343px). `min-w-[150px]` tarih etiketi de dar
 * ekranda tabanını bırakır; genişliği yalnız hizalama içindi. */
/* `justify-content` KASITLI olarak yok: kapsayıcı 768px altında `flex-col`,
 * üstünde `md:justify-between` — hizalamayı iki durumda da ebeveyn belirliyor.
 * Buraya `flex-end` koymak 641-767px arasında araç çubuğunu sola hizalı
 * başlığın altında sağa itiyordu. */
.cal-toolbar-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
    .cal-toolbar-actions [data-cal-label] { min-width: 0; }
}

/* === Compose layout (publish) === */
/* `1fr` yerine `minmax(0, 1fr)` + `min-width: 0` — takvim ızgarasıyla aynı
 * latent sınıf (`1fr`ın tabanı `auto`dur, uzun hesap adı kolonun min
 * genişliğini dayatabilir).
 * DÜRÜSTLÜK NOTU: bu satırlar bugün ÖLÇÜLEBİLİR bir taşmayı düzeltmiyor.
 * 375px'te ölçülen 403px taşması bu ızgaradan değildi — ikisi de mutasyonla
 * tek tek kaldırıldı, sayfa yine 375/0 kaldı. Savunma amaçlı bırakıldı;
 * "şu bugu düzeltti" diye okunmamalı. */
.compose-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.compose-grid > * { min-width: 0; }
@media (max-width: 1024px) { .compose-grid { grid-template-columns: minmax(0, 1fr); } }
.compose-account-list { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; }
.compose-account-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.compose-account-item:hover { background: rgb(var(--bg-raised)); }
.compose-account-item input { margin: 0; }
.compose-account-platform { font-size: 11px; color: rgb(var(--text-subtle-rgb)); text-transform: uppercase; padding: 2px 6px;
                            border-radius: 3px; background: rgb(var(--bg-sunken)); margin-left: auto; }
.compose-editor textarea { width: 100%; min-height: 220px; padding: 14px; font-size: 15px; line-height: 1.5;
                           background: rgb(var(--bg-surface)); color: rgb(var(--text-primary)); border: 1px solid rgb(var(--border-default));
                           border-radius: var(--radius-sm); resize: vertical; }
.compose-editor textarea:focus { outline: none; border-color: rgb(var(--brand-primary-rgb)); box-shadow: var(--shadow-focus); }
.compose-counter { font-size: 12px; color: rgb(var(--text-muted-rgb)); display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.compose-counter-warn { color: rgb(var(--warning-text)); }
.compose-counter-over { color: rgb(var(--danger-text)); font-weight: 600; }
.compose-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 0; }
.compose-tool-btn { padding: 6px 10px; background: transparent; border: 1px solid rgb(var(--border-default)); border-radius: 6px;
                    font-size: 12px; cursor: pointer; color: rgb(var(--text-primary)); transition: all var(--duration-fast) ease; }
.compose-tool-btn:hover { background: rgb(var(--bg-raised)); border-color: rgb(var(--brand-primary-rgb)); }
.compose-preview { background: rgb(var(--bg-raised)); border-radius: var(--radius-sm); padding: 14px; }
.compose-preview-card { background: rgb(var(--bg-surface)); border: 1px solid rgb(var(--border-default)); border-radius: var(--radius-sm);
                        padding: 14px; margin-top: 8px; }
.compose-preview-tabs { display: flex; gap: 4px; }
.compose-preview-tab { padding: 4px 10px; font-size: 11px; border: 1px solid rgb(var(--border-default)); border-radius: 4px;
                       background: rgb(var(--bg-surface)); cursor: pointer; }
.compose-preview-tab.active { background: rgb(var(--brand-primary-rgb)); color: rgb(var(--text-inverse-rgb)); border-color: rgb(var(--brand-primary-rgb)); }

/* === Faz Frontend Review #B5/#3 (2026-05-13) — iOS safe-area + a11y utility === */

/* iPhone notch / home-indicator safe area. header.php bottom-nav kullanıyor;
 * önceden class undefined idi → bottom 34px home-indicator altında gizliydi.
 * Meta viewport içerik='viewport-fit=cover' set olmalı (panel head.php). */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-area-top    { padding-top: env(safe-area-inset-top, 0); }



/* === Z-index: tek ölçek üstteki ilk :root bloğunda (taban 0 · yapışkan 10 · çekmece 30 ·
 * modal 40 · toast 50). Eski --z-dropdown/-overlay/-popover/100/1000 kalktı. === */

/* === Print styles (Frontend review #Low12, 2026-05-13) ===
 * Yazdırılırken panel header, mobile nav, modal backdrop, AI copilot
 * launcher, toast region GÖZÜKMESİN. İçerik whitebg + siyah text. */
@media print {
    .panel-header,
    .ai-copilot-launcher,
    .ai-copilot-sidebar,
    nav[aria-label="Mobile navigation"],
    .wizard-modal-backdrop,
    .wizard-modal-wrap,
    #toast-region,
    .toast-region,
    [data-post-suggestions-trigger] {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .card {
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    a[href^="#"]::after,
    a[href^="javascript:"]::after { content: ""; }
}