/* ========================================
   TRENDMETRIK THEME VARIABLES
   Semantic CSS Variables for Light & Dark Modes
   ======================================== */

/* ────────────────────────────────────────────────────────────────────────────
   TOKEN USAGE GUIDE — yeni component yazarken hangi token'ı seç?
   ────────────────────────────────────────────────────────────────────────────

   Tema mekanizması:
     • Light mode = `:root` (default)
     • Dark mode  = `html.dark-mode`  (templates/layouts/base.html'de class set edilir)
     • Toggle    = `toggleDarkMode()` (header.html); persist = /api/user/preferences/dark-mode

   ── KANONİK TOKEN'LAR ──  Bu projede yeni CSS yazılırken aşağıdakiler tercih
   edilir; başka bir prefiks varsa (--tmv2-*, --color-*, --dm-*, --md-*) çoğu
   zaman bunların alias'ıdır ve kanoniğe yönlendirilmiştir.

     YÜZEY        --tm-bg            sayfa zemini (en alt katman)
                  --tm-bg-secondary  ikinci yüzey (panel arkası)
                  --tm-bg-tertiary   üçüncü yüzey (chip / pasif buton zemini)
                  --tm-bg-card       kart yüzeyi (KPI, Hızlı Erişim, Uyarılar...)
                  --tm-bg-elevated   yükseltilmiş yüzey (popover / drawer)
                  --tm-bg-input      form alanı zemini
                  --tm-bg-hover      hover üzerinde yumuşak vurgu
                  --tm-surface-raised  → --tm-bg-card alias'ı (legacy)

     METİN        --tm-text-primary    ana metin (başlıklar, body)
                  --tm-text-secondary  ikinci derece metin (etiket, subtitle)
                  --tm-text-muted      pasif metin / placeholder
                  --tm-text-inverse    koyu yüzey üstünde açık metin
                  --tm-fg-on-brand     primary/accent gradient üstü metin

     KENARLIK     --tm-border-color   varsayılan
                  --tm-border-light   yumuşak ayraç (tablo iç çizgi)
                  --tm-border-input   form alanı kenarı
                  --tm-border-focus   focus ring rengi

     MARKA        --tm-primary        ana mavi (= --color-primary)
                  --tm-primary-hover  daha koyu varyant
                  --tm-primary-soft   açık mavi tint (pasif rozet)
                  --tm-accent         turuncu CTA rengi
                  --tm-brand-{50..700}  primary scale (gradient/border tint için)

     ANLAMSAL     --tm-success / --tm-success-bg / --tm-success-border
                  --tm-warning / --tm-warning-bg / --tm-warning-border
                  --tm-error   / --tm-error-bg   / --tm-error-border
                  --tm-info    / --tm-info-bg    / --tm-info-border

     GÖLGE        --tm-shadow-sm  / -md / -lg / -xl   (mode-aware)

     MODAL        --tm-modal-backdrop

   ── KAÇINILACAK ANTI-PATTERN'LER ──
     ✗ Hardcoded `background: #fff` / `white` / `#0f172a`            → token kullan
     ✗ Inline `style="background: #f1f5f9"`                          → token kullan veya class
     ✗ Yeni `!important` yığmak (özellikle dark mode override için)  → specificity'yi düzelt
     ✗ Tanımsız token + fallback (`var(--tm-foo, #abc)`)             → önce burada tanımla
     ✗ MutationObserver ile inline style temizleme                   → CSS ile çöz

   Bu rehber bağlayıcıdır. Eski dosyalardaki uyumsuzluklar zamanla
   buradaki kanonik isimlere taşınmalıdır.
   ──────────────────────────────────────────────────────────────────────────── */

/* ===== LIGHT MODE (DEFAULT) ===== */
:root {
  /* ----- Semantic brand tokens (tek kaynak; yeni kodda bunları tercih et) ----- */
  --color-primary: #0175e4;
  --color-primary-hover: #0163c2;
  --color-primary-soft: #e8f3ff;
  --color-primary-rgb: 1, 117, 228;

  --color-accent: #fd751f;
  --color-accent-hover: #e76412;
  --color-accent-soft: #fff1e8;
  --color-accent-mid: #ff9a5c;
  --color-accent-rgb: 253, 117, 31;

  --color-secondary: #73b7fe;
  --color-secondary-soft: #eef7ff;
  --color-secondary-rgb: 115, 183, 254;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f7fb;

  --color-border: #dbe5ef;
  --color-text: #1e293b;
  --color-text-muted: #64748b;

  --color-success: #16a34a;
  --color-success-rgb: 22, 163, 74;
  --color-danger: #dc2626;
  --color-danger-rgb: 220, 38, 38;

  --shadow-soft: 0 10px 30px rgba(1, 117, 228, 0.08);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --radius-token-lg: 18px;
  --radius-token-md: 14px;

  /* Grafik seri sırası (JS ile hizalı tutun) */
  --tm-chart-1: #0175e4;
  --tm-chart-2: #73b7fe;
  --tm-chart-3: #fd751f;
  --tm-chart-4: #bfdfff;
  --tm-chart-5: #ffd2b5;

  /* Surface Colors - Yüzeyler */
  --tm-app-bg: #eef2f7;               /* Dekor gradyanı tabanı — açık, logo ile uyumlu */
  --tm-app-bg-mid: #f3f6fa;
  /* Logo tonları (PNG ile hizalı) */
  --tm-logo-blue: #0175e4;
  --tm-logo-blue-deep: #014a94;
  --tm-logo-blue-mid: #0163c2;
  --tm-logo-sky: #73b7fe;
  --tm-logo-sky-muted: #a8d0fe;
  --tm-logo-orange: #fd751f;
  --tm-app-grid-line: rgba(0, 112, 224, 0.025);  /* Eski: .045 — boş kart üzerinde fazla dikkat çekiyordu */
  /* Geriye uyum: isim violet, değer logo mavisi */
  --tm-decor-violet-soft: rgba(0, 112, 224, 0.14);
  --tm-decor-violet-mid: rgba(0, 88, 179, 0.12);
  --tm-decor-orange-soft: rgba(240, 112, 16, 0.1);
  --tm-decor-indigo-soft: rgba(112, 176, 240, 0.12);
  /* Blur yok: backdrop-filter büyük alanda çok pahalı; opaklık ile cam hissi */
  --tm-page-shell-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.56) 0%,
    rgba(248, 250, 252, 0.72) 100%
  );
  --tm-page-shell-border: rgba(148, 163, 184, 0.14);
  --tm-page-shell-radius: 28px;
  --tm-page-shell-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  /* Sayfa / kabuk yatay üst sınır — tek kaynak; genişletmek için yalnız bunu değiştir */
  --tmv2-page-inner-standard-max: 1920px;
  /* .tmv2-page-inner--wide / --ops (tm-ui-system) */
  --tmv2-page-inner-wide-max: 2400px;
  --tm-page-shell-inner-max: var(--tmv2-page-inner-standard-max);
  /* Cam sütun: içerik max + kabuk yatay padding (header ile aynı genişlik)  */
  --tm-page-shell-column-max: calc(var(--tm-page-shell-inner-max) + 2 * var(--tm-page-pad));
  --tm-page-shell-blur: 0px;
  --tm-sidebar-glass: rgba(255, 255, 255, 0.82);

  /* App layout — sabit sidebar + ana alan (tüm panel sayfaları) */
  --tm-sidebar-rail: 70px;
  --tm-layout-gap: 14px;
  --tm-layout-gap-right: 16px;
  /* Sidebar varken header+main yatay şeridi: sol rail+gap; sağda aynısı (sidebar sağda yok)
     — aksi halde sağ padding küçük kalır, içerik viewport merkezine göre sağa kayar. */
  --tm-main-outer-pad-x-with-sidebar: calc(var(--tm-sidebar-rail) + var(--tm-layout-gap));
  --tm-page-pad: 20px;
  --tm-section-gap: 16px;

  --tm-bg-primary: var(--color-bg);   /* Sayfa zemini */
  /* Kısa alias’lar (V2 dokümantasyonu / yeni stil) — mevcut semantic’lere bağlanır */
  --tm-bg: var(--color-bg);
  --tm-surface: var(--color-surface);
  --tm-surface-2: var(--color-surface-alt);
  --tm-border: var(--color-border);
  --tm-text: var(--color-text);
  --tm-danger: var(--color-danger);
  --tm-success: var(--color-success);
  --tm-bg-secondary: var(--color-surface-alt);
  --tm-bg-tertiary: #f1f5f9;
  --tm-bg-card: var(--color-surface);
  --tm-bg-elevated: var(--color-surface);
  --tm-bg-input: #ffffff;
  --tm-bg-hover: var(--color-primary-soft);
  --tm-bg-active: #e8f2fc;
  --tm-bg-disabled: #e2e8f0;
  
  /* Text Colors - Metin Renkleri */
  --tm-text-primary: var(--color-text);
  --tm-text-secondary: var(--color-text-muted);
  --tm-text-muted: #94a3b8;
  --tm-text-inverse: #ffffff;         /* Ters metin (dark bg üzerinde) */
  --tm-fg-on-brand: #ffffff;          /* Marka gradient / primary üstü metin */
  --tm-text-disabled: #cbd5e1;        /* Disabled text */
  
  /* Border Colors - Kenarlık Renkleri */
  --tm-border-color: var(--color-border);
  --tm-border-light: #eef2f7;
  --tm-border-dark: #c5d3e3;
  --tm-border-input: #cbd5e1;
  --tm-border-focus: var(--color-primary);

  /* Marka: mavi = ana sistem; turuncu = accent (CTA / vurgu) */
  --tm-primary: var(--color-primary);
  --tm-primary-hover: var(--color-primary-hover);
  --tm-primary-light: var(--color-secondary);
  --tm-primary-soft: var(--color-primary-soft);
  --tm-primary-bg: var(--color-primary-soft);

  /* Hesabım (panel + mağaza /account/*) — üst hero ve birincil CTA */
  --tm-account-hero-gradient: linear-gradient(
    135deg,
    var(--color-primary-hover) 0%,
    var(--color-primary) 52%,
    var(--color-secondary) 100%
  );
  --tm-account-cta-gradient: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-hover) 100%
  );

  --tm-accent: var(--color-accent);
  --tm-accent-hover: var(--color-accent-hover);
  --tm-accent-soft: var(--color-accent-soft);
  
  /* Semantic Colors - Anlamsal Renkler */
  --tm-success-light: #86efac;
  --tm-success-bg: #f0fdf4;
  --tm-success-border: #bbf7d0;
  
  --tm-warning: #f59e0b;
  --tm-warning-light: #fde68a;
  --tm-warning-bg: #fffbeb;
  --tm-warning-border: #fde68a;
  
  --tm-error: var(--color-danger);
  --tm-error-light: #fca5a5;
  --tm-error-bg: #fef2f2;
  --tm-error-border: #fecaca;
  
  --tm-info: var(--color-primary);
  --tm-info-light: var(--color-secondary);
  --tm-info-bg: var(--color-secondary-soft);
  --tm-info-border: #bfdbfe;
  
  /* Shadow - Gölgeler */
  --tm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --tm-shadow-lg: var(--shadow-card);
  --tm-shadow-xl: var(--shadow-soft);
  
  /* Gradient - Degradeler */
  --tm-gradient-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --tm-gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  
  /* Component Specific */
  --tm-navbar-bg: #ffffff;
  --tm-sidebar-bg: #ffffff;
  --tm-header-bg: #ffffff;
  --tm-footer-bg: #f8fafc;
  --tm-modal-backdrop: rgba(0, 0, 0, 0.5);

  /* ========================================
     UI v2 — tmv2-* (shell/dashboard/header ortak; tek kaynak)
     tm-shell-v2.css yalnızca layout/kurallar; sayısal tokenlar burada.
     ======================================== */
  --tmv2-sb-w: 240px;
  --tmv2-ff-serif: "Instrument Serif", Georgia, serif;
  --tmv2-ff-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tmv2-ff-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --tmv2-font-sans: var(--tmv2-ff-sans);
  --tmv2-font-serif: var(--tmv2-ff-serif);
  --tmv2-font-mono: var(--tmv2-ff-mono);
  --tmv2-fs-xs: 0.6875rem;
  --tmv2-fs-sm: 0.8125rem;
  --tmv2-fs-body: 0.875rem;
  --tmv2-fs-md: 0.9375rem;
  --tmv2-fs-lg: 1rem;
  --tmv2-fs-xl: 1.125rem;
  --tmv2-fs-2xl: 1.375rem;
  --tmv2-fw-normal: 400;
  --tmv2-fw-medium: 500;
  --tmv2-fw-semibold: 600;
  --tmv2-fw-bold: 700;

  --tmv2-page: #f4f6fa;
  --tmv2-page-bg: var(--tmv2-page);
  --tmv2-surface: #ffffff;
  --tmv2-surface-2: #fafbfd;
  --tmv2-surface-soft: var(--tmv2-surface-2);
  --tmv2-surface-3: #f1f5f9;

  --tmv2-ink: #0f172a;
  --tmv2-ink-2: #475569;
  --tmv2-mute: #94a3b8;
  --tmv2-text: var(--tmv2-ink);
  --tmv2-text-muted: var(--tmv2-ink-2);
  --tmv2-text-soft: var(--tmv2-mute);

  --tmv2-line: #e7ebf1;
  --tmv2-line-2: #eef1f6;
  --tmv2-border: var(--tmv2-line);
  --tmv2-border-strong: var(--color-border);

  --tmv2-primary: var(--color-primary);
  --tmv2-primary-hover: var(--color-primary-hover);
  --tmv2-primary-active: var(--tm-logo-blue-deep);
  --tmv2-primary-ink: var(--color-primary-hover);
  --tmv2-primary-soft: var(--color-primary-soft);

  --tmv2-success: var(--color-success);
  --tmv2-success-soft: #dcfce7;
  --tmv2-danger: var(--color-danger);
  --tmv2-danger-soft: #fee2e2;
  --tmv2-warning: #f59e0b;
  --tmv2-warning-soft: #fef3c7;
  --tmv2-warning-border: #d97706;
  --tmv2-info: var(--color-primary);
  --tmv2-info-soft: var(--color-secondary-soft);
  --tmv2-info-ink: var(--color-primary-hover);

  /* Bootstrap 5 uyumu — nötr / ikincil düğümler (#tmv2App içi) */
  --tmv2-bs-secondary: #6c757d;
  --tmv2-bs-secondary-hover: #5c636a;
  --tmv2-bs-secondary-active: #565e64;
  --tmv2-bs-dark: #212529;
  --tmv2-bs-dark-hover: #1c1f23;
  --tmv2-bs-light-hover-bg: #e9ecef;
  --tmv2-bs-light-hover-border: #dee2e6;
  --tmv2-bs-body: #212529;

  /* KPI / vurgu — marka mavisi (Tailwind blue-600/700 tonları, tek kaynak) */
  --tmv2-kpi-accent-gradient: linear-gradient(
    140deg,
    var(--color-primary-hover) 0%,
    var(--color-primary) 60%,
    var(--tm-logo-blue-deep) 100%
  );
  --tmv2-delta-success-fg-dark: #4ade80;
  --tmv2-delta-danger-fg-dark: #f87171;

  --tmv2-btn-radius: 10px;
  --tmv2-focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35);
  --tmv2-focus-ring-inset: inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.45);
  --tmv2-form-focus-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);

  --tmv2-nav-active-bg: var(--tmv2-surface-3);
  --tmv2-nav-active-ink: var(--tmv2-ink);
  --tmv2-nav-active-icon: var(--tmv2-primary);
  --tmv2-nav-active-bar: 2px;
  --tmv2-nav-active-bar-color: var(--tmv2-primary);
  --tmv2-nav-muted: var(--tmv2-mute);

  /* Shadows — Linear/Stripe tarzı ince gölgeler */
  --tmv2-sh-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --tmv2-sh-2: 0 2px 6px rgba(15, 23, 42, 0.06);
  --tmv2-sh-3: 0 8px 20px rgba(15, 23, 42, 0.08);

  /* === BORDER RADIUS — TEK KAYNAK ===
   * Modern key: --tmv2-radius-{xs,sm,md,lg,xl,pill}
   * Legacy key: --tmv2-r-{sm,md,lg,xl,pill} — alias olarak tutulur (backward compat),
   *   değerler aynı pixel eşleniyor → breaking change yok.
   */
  --tmv2-radius-xs: 4px;   /* chip / badge */
  --tmv2-radius-sm: 6px;   /* icon wrapper, small pill */
  --tmv2-radius-md: 8px;   /* button, shortcut */
  --tmv2-radius-lg: 10px;  /* kart (default) */
  --tmv2-radius-xl: 14px;  /* panel / büyük yüzey */
  --tmv2-radius-pill: 999px;

  /* Legacy aliases — eski --tmv2-r-* kullanımlarını modern scale'e bağlar
   * Pixel değerleri aynı kalır → eski kodlar kırılmadan tek kaynağa geçer */
  --tmv2-r-sm: var(--tmv2-radius-md);   /* 8px */
  --tmv2-r-md: var(--tmv2-radius-lg);   /* 10px */
  --tmv2-r-lg: var(--tmv2-radius-xl);   /* 14px */
  --tmv2-r-xl: 16px;                     /* radius-*'de karşılığı yok, sabit */
  --tmv2-r-pill: var(--tmv2-radius-pill); /* 999px */

  /* === AKSENT RENK SKALASI — Linear/Stripe mavi tint seti ===
   * Aktif filter, seçili satır, primary button vb. için tek kaynak.
   * Dark mode'da :root'un altında override edilebilir. */
  --tm-accent-50:  #eff6ff;   /* soft bg (aktif state) */
  --tm-accent-100: #dbeafe;   /* soft bg koyu ton / badge aktif */
  --tm-accent-200: #bfdbfe;   /* border (aktif) */
  --tm-accent-500: #0175e4;   /* primary hover */
  --tm-accent-600: #0163c2;   /* primary default */
  --tm-accent-700: #014a94;   /* primary pressed */
  --tm-accent-bar: #2563eb;   /* 2px left indicator bar */

  --tmv2-sp-1: 4px;
  --tmv2-sp-2: 8px;
  --tmv2-sp-3: 12px;
  --tmv2-sp-4: 16px;
  --tmv2-sp-5: 20px;
  --tmv2-sp-6: 24px;
  --tmv2-sp-7: 28px;
  --tmv2-sp-8: 32px;
  --tmv2-sp-9: 36px;
  --tmv2-sp-10: 40px;
  --tmv2-sp-11: 44px;
  --tmv2-sp-12: 48px;

  --tmv2-content-max-width: none;

  /* Layout gutter: header yatay padding = main pad-x = main pad-y (üst iç boşluk); tek ritim */
  --tmv2-layout-gutter: var(--tmv2-sp-4);
  --tmv2-page-pad-x: var(--tmv2-layout-gutter);
  --tmv2-page-pad-y: var(--tmv2-layout-gutter);
  /* Alt tuval: biraz nefes; üst/sol ile aynı zorunlu değil */
  --tmv2-page-pad-bottom: var(--tmv2-sp-6);

  /* Bölüm / kart aralığı — layout gutter ile aynı kaynak */
  --tmv2-section-gap: var(--tmv2-layout-gutter);
  --tmv2-card-min-h: 5.5rem;
  --tmv2-metric-card-min-h: 7.75rem;
  --tmv2-metric-card-tall-min-h: 10.25rem;

  /* Dashboard (Genel Bakış) — kompakt ritim; global metric token’larından ayrı */
  --tmv2-dashboard-gap: var(--tmv2-sp-3);
  --tmv2-dashboard-section-gap: var(--tmv2-layout-gutter);
  --tmv2-dashboard-metric-min-h: 7.25rem;
  --tmv2-dashboard-metric-tall-min-h: 8.875rem;

  /* === Fantom token alias'ları — referanslanan ama tanımsızdı, fallback hex aktifti ===
   * dashboard-cards / dashboard-kpi / dashboard-dark-mode / tm-header-v2 / overview-metric-cards
   * dosyaları --tm-brand-* ve --tm-surface-raised kullanıyordu; bu token'lar burada tanımlanır.
   * Light mode değerleri fallback hex'leriyle birebir aynı → görsel kayma yok. */
  --tm-surface-raised: var(--tm-bg-card);

  --tm-brand-50:  #e8f4ff;
  --tm-brand-100: #d1e9ff;
  --tm-brand-200: #a3d0fd;
  --tm-brand-300: #73b7fe;
  --tm-brand-400: #2e96f2;
  --tm-brand-500: var(--color-primary);        /* #0175e4 */
  --tm-brand-600: var(--color-primary-hover);  /* #0163c2 */
  --tm-brand-700: var(--tm-logo-blue-deep);    /* #014a94 */
}

/* Hesabım mağaza şablonları (store_layout + panel) — sınıf + token tek kaynak */
.card.tm-account-store-hero,
.tm-account-store-hero.card {
  background: var(--tm-account-hero-gradient) !important;
  border-radius: 12px;
  overflow: hidden;
  border: 0 !important;
}

.tm-account-store-hero__icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-account-modal-header {
  border-radius: 12px 12px 0 0;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--tm-account-hero-gradient) !important;
}

.tm-account-modal-footer-btn {
  background: var(--tm-account-cta-gradient) !important;
  border: none !important;
  color: var(--tm-fg-on-brand) !important;
  font-weight: 600;
  border-radius: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tm-account-modal-footer-btn:hover {
  opacity: 0.95;
  color: var(--tm-fg-on-brand) !important;
}

/* ===== DARK MODE ===== */
html.dark-mode,
html.dark {
  --color-primary: #3a88e5;
  --color-primary-hover: #5599eb;
  /* Soft varyantı primary'den türet — eski rgba(59,130,246) Tailwind mavisi mismatch'iydi */
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-primary-rgb: 58, 136, 229;

  --color-success-rgb: 74, 222, 128;
  --color-danger-rgb: 248, 113, 113;

  --color-accent: #e88a3d;
  --color-accent-hover: #f0a050;
  --color-accent-soft: rgba(232, 138, 61, 0.14);
  --color-accent-mid: #f0a060;
  --color-accent-rgb: 232, 138, 61;

  --color-secondary: #7eb6f0;
  --color-secondary-soft: rgba(126, 182, 240, 0.12);
  --color-secondary-rgb: 126, 182, 240;

  /* === Dark neutral palette (audit 2026-06-11 unification)
   * Eski dual palette (v1 navy `#0b1220/#111b2e` + v2 `#0b0f17/#10151f`) birleştirildi.
   * Tek skala: page → surface-1 → surface-2 → border, hepsi siyaha yakın neutral. */
  --color-bg: #050607;             /* page background (was #0b1220 navy) */
  --color-surface: #0b0f14;        /* primary surface / card (was #111b2e navy) */
  --color-surface-alt: #10151d;    /* elevated surface (header/sidebar/input) (was #0e1626) */

  --color-border: #242c37;         /* token-driven border (was #334155 blue-grey) */
  --color-text: #e5e7eb;           /* primary text (was #eef2f7) */
  --color-text-muted: #9ca3af;     /* muted text (was #a8b8cc) */

  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.22);

  /* Aktif sekme/filtre: yumuşak mavi yüzey (primary'den türetilir) */
  --tm-active-soft-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --tm-active-soft-border: color-mix(in srgb, var(--color-primary) 35%, transparent);
  --tm-active-soft-text: #d7eafe;
  --tm-text-on-primary: #f8fafc;
  --tm-border-subtle: rgba(148, 163, 184, 0.14);
  --tm-border-strong: rgba(148, 163, 184, 0.22);

  /* Header: parlak turuncu hover yerine yumuşak sıcak ton */
  --tm-header-logo-hover: #c9a882;
  --tm-header-surface-hover: rgba(255, 255, 255, 0.05);
  /* Tablo satırları: hafif lift, primary renk bulaşması yok */
  --tm-table-row-hover-bg: #141a23;

  /* Chart serisi — OLED uyumlu canlı, parlamayan tonlar (audit 2026-06-06).
   * Hedef: koyu lacivert (#0b1220) zemin üstünde net seçilen 5 ayrı renk;
   * saturate yüksek ama luminance orta — gözü yakmaz. */
  --tm-chart-1: #4d97f0;   /* canlı mavi (brand) */
  --tm-chart-2: #a78bfa;   /* mor — mavi'den ayrışır */
  --tm-chart-3: #fb923c;   /* sıcak turuncu — accent ailesinden */
  --tm-chart-4: #4ade80;   /* yeşil — semantik success uyumlu */
  --tm-chart-5: #fbbf24;   /* kehribar — dikkat çeker ama göz yakmaz */

  /* Surface Colors - Yüzeyler (neutral skala) */
  --tm-app-bg: #050607;
  --tm-app-bg-mid: #0b0f14;
  --tm-logo-blue: #3a88e5;
  --tm-logo-blue-deep: #2f7ddc;
  --tm-logo-blue-mid: #3a88e5;
  --tm-logo-sky: #7eb6f0;
  --tm-logo-sky-muted: #9cc8f0;
  --tm-logo-orange: #e88a3d;
  --tm-app-grid-line: rgba(112, 176, 240, 0.12);
  --tm-decor-violet-soft: rgba(112, 176, 240, 0.14);
  --tm-decor-violet-mid: rgba(0, 112, 224, 0.2);
  --tm-decor-orange-soft: rgba(240, 112, 16, 0.08);
  --tm-decor-indigo-soft: rgba(142, 197, 247, 0.12);
  /* Page shell: flat surface (was navy gradient overlay) */
  --tm-page-shell-bg: var(--color-surface);
  --tm-page-shell-border: rgba(148, 163, 184, 0.14);
  --tm-page-shell-radius: 28px;
  --tm-page-shell-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tmv2-page-inner-standard-max: 1920px;
  --tmv2-page-inner-wide-max: 2400px;
  --tm-page-shell-inner-max: var(--tmv2-page-inner-standard-max);
  /* Cam sütun: içerik max + kabuk yatay padding (header ile aynı genişlik) */
  --tm-page-shell-column-max: calc(var(--tm-page-shell-inner-max) + 2 * var(--tm-page-pad));
  --tm-page-shell-blur: 0px;
  --tm-sidebar-glass: rgba(16, 21, 29, 0.82);

  --tm-sidebar-rail: 70px;
  --tm-layout-gap: 14px;
  --tm-layout-gap-right: 16px;
  --tm-main-outer-pad-x-with-sidebar: calc(var(--tm-sidebar-rail) + var(--tm-layout-gap));
  --tm-page-pad: 20px;
  --tm-section-gap: 16px;

  /* Surface skala — neutral, dual-palette birleştirildi (audit 2026-06-11)
   * --tm-bg-primary    = body/page              = var(--color-bg)
   * --tm-bg-secondary  = main surface 1 / card  = var(--color-surface)
   * --tm-bg-tertiary   = surface 2 (header)     = var(--color-surface-alt)
   * --tm-bg-card       = card                   = var(--color-surface)
   * --tm-bg-elevated   = elevated surface       = var(--color-surface-alt)
   * --tm-bg-input      = input/filterbar        = var(--color-surface-alt)
   * --tm-bg-hover      = subtle row hover       = #141a23
   * --tm-bg-active     = active row             = #1a212b
   */
  --tm-bg-primary: var(--color-bg);
  --tm-bg: var(--color-bg);
  --tm-surface: var(--color-surface);
  --tm-surface-2: var(--color-surface-alt);
  --tm-border: var(--color-border);
  --tm-text: var(--color-text);
  --tm-danger: var(--color-danger);
  --tm-bg-secondary: var(--color-surface);
  --tm-bg-tertiary: var(--color-surface-alt);
  --tm-bg-card: var(--color-surface);
  --tm-bg-elevated: var(--color-surface-alt);
  --tm-bg-input: var(--color-surface-alt);
  --tm-bg-hover: #141a23;
  --tm-bg-active: #1a212b;
  --tm-bg-disabled: var(--color-bg);

  /* Text Colors - Metin Renkleri (neutral skala) */
  --tm-text-primary: var(--color-text);
  --tm-text-secondary: var(--color-text-muted);
  --tm-text-muted: #6b7280;
  --tm-text-inverse: var(--color-bg);
  --tm-text-disabled: #4b5563;

  /* Border Colors - Kenarlık Renkleri */
  --tm-border-color: var(--color-border);
  --tm-border-light: #2d3441;
  --tm-border-dark: #1a1f29;
  --tm-border-input: var(--color-border);
  --tm-border-focus: var(--color-primary);

  --tm-primary: var(--color-primary);
  --tm-primary-hover: var(--color-primary-hover);
  --tm-primary-light: var(--color-secondary);
  --tm-primary-soft: var(--color-primary-soft);
  --tm-primary-bg: var(--color-primary-soft);

  --tm-accent: var(--color-accent);
  --tm-accent-hover: var(--color-accent-hover);
  --tm-accent-soft: var(--color-accent-soft);
  
  /* Semantic Colors - Dark Mode Versiyonları */
  --tm-success: #52d87a;
  --tm-success-light: #86efac;
  --tm-success-bg: rgba(34, 197, 94, 0.15);
  --tm-success-border: rgba(34, 197, 94, 0.4);
  
  --tm-warning: #fbbf24;              /* Daha açık sarı */
  --tm-warning-light: #fde68a;
  --tm-warning-bg: rgba(245, 158, 11, 0.15);
  --tm-warning-border: rgba(245, 158, 11, 0.4);
  
  --tm-error: #f87171;                /* Daha açık kırmızı */
  --tm-error-light: #fca5a5;
  --tm-error-bg: rgba(239, 68, 68, 0.15);
  --tm-error-border: rgba(239, 68, 68, 0.4);
  
  --tm-info: var(--color-primary);
  --tm-info-light: var(--color-secondary);
  --tm-info-bg: var(--color-secondary-soft);
  --tm-info-border: rgba(96, 165, 250, 0.32);
  
  /* Shadow - Gölgeler (daha koyu) */
  --tm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.28);
  --tm-shadow-md: 0 3px 8px -1px rgba(0, 0, 0, 0.32), 0 1px 3px -1px rgba(0, 0, 0, 0.22);
  --tm-shadow-lg: 0 8px 20px -4px rgba(0, 0, 0, 0.38), 0 3px 8px -2px rgba(0, 0, 0, 0.22);
  --tm-shadow-xl: 0 16px 28px -6px rgba(0, 0, 0, 0.42), 0 8px 12px -4px rgba(0, 0, 0, 0.22);
  
  /* Gradient - Degradeler (flattened, neutral; navy gradients removed) */
  --tm-gradient-primary: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%);
  --tm-gradient-card: var(--color-surface);

  /* Component Specific — hepsi token üzerinden, sidebar gradient kaldırıldı */
  --tm-navbar-bg: var(--color-surface-alt);
  --tm-sidebar-bg: var(--color-surface-alt);
  --tm-header-bg: var(--color-surface-alt);
  --tm-footer-bg: var(--color-bg);
  --tm-modal-backdrop: rgba(0, 0, 0, 0.7);

  /* Scrollbar */
  --tm-scrollbar-track: var(--color-surface);
  --tm-scrollbar-thumb: #2d3441;
  --tm-scrollbar-thumb-hover: #3a4250;

  /* UI v2 — dark yüzey / çizgi (canonical token sistemine bağlı, dual palette tekleştirildi) */
  --tmv2-page: var(--color-bg);
  --tmv2-page-bg: var(--tmv2-page);
  --tmv2-surface: var(--color-surface);
  --tmv2-surface-2: var(--color-surface-alt);
  --tmv2-surface-soft: var(--tmv2-surface-2);
  --tmv2-surface-3: #141a23;
  --tmv2-ink: var(--color-text);
  --tmv2-ink-2: var(--color-text-muted);
  --tmv2-mute: #6b7280;
  --tmv2-text: var(--tmv2-ink);
  --tmv2-text-muted: var(--tmv2-ink-2);
  --tmv2-text-soft: var(--tmv2-mute);
  --tmv2-line: var(--color-border);
  --tmv2-line-2: #1a1f29;
  --tmv2-border: var(--tmv2-line);
  --tmv2-border-strong: var(--tm-border-strong);
  --tmv2-primary-soft: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --tmv2-success-soft: rgba(22, 163, 74, 0.15);
  --tmv2-danger-soft: rgba(220, 38, 38, 0.15);
  --tmv2-warning-soft: rgba(245, 158, 11, 0.15);
  --tmv2-warning-border: #f59e0b;
  --tmv2-sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --tmv2-sh-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --tmv2-sh-3: 0 12px 32px rgba(0, 0, 0, 0.4);
  --tmv2-focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.45);
  --tmv2-focus-ring-inset: inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.5);
  --tmv2-form-focus-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.22);

  --tmv2-kpi-accent-gradient: linear-gradient(
    140deg,
    var(--color-primary-hover) 0%,
    var(--color-primary) 60%,
    var(--tm-logo-blue-deep) 100%
  );

  --tmv2-bs-secondary: #64748b;
  --tmv2-bs-secondary-hover: #475569;
  --tmv2-bs-secondary-active: #334155;
  --tmv2-bs-dark: var(--color-bg);
  --tmv2-bs-dark-hover: var(--color-surface);
  --tmv2-bs-light-hover-bg: rgba(255, 255, 255, 0.08);
  --tmv2-bs-light-hover-border: var(--tmv2-line);
  --tmv2-bs-body: var(--tmv2-ink);

  /* === Fantom token alias'ları — dark mode override (bkz. :root yorumu) ===
   * --tm-surface-raised'ı KPI/Uyarılar/Hızlı Erişim'in oturduğu --tm-bg-card'a bağlar
   * → tüm overview kartları aynı dark surface ailesinden beslenir. */
  --tm-surface-raised: var(--tm-bg-card);          /* canonical surface */

  /* Brand tonları: dark zemin üzerinde fazla parlamasın diye 50/100/200 alpha tabanlı,
   * 300+ ise primary'den türev. */
  --tm-brand-50:  rgba(58, 136, 229, 0.08);
  --tm-brand-100: rgba(58, 136, 229, 0.14);
  --tm-brand-200: rgba(58, 136, 229, 0.28);
  --tm-brand-300: #5599eb;
  --tm-brand-400: #4a91e0;
  --tm-brand-500: var(--color-primary);            /* #3a88e5 */
  --tm-brand-600: var(--color-primary-hover);      /* #5599eb */
  --tm-brand-700: var(--color-primary);
}

/* ===== DARK MODE GLOBAL SHELL GUARANTEE (audit 2026-06-11) =====
 * Problem: 12/13 sayfada body bg `rgba(0,0,0,0)` ölçüldü. Sebep: bazı sayfa-bazlı CSS'ler
 * (advantage.css, dashboard-tabbed-page.css vb.) `background: linear-gradient(...) !important`
 * shorthand'ı ile body'nin background-color'unu transparent'a sıfırlıyor.
 * Çözüm: canonical token üzerinden body+main+app shell bg'sini garanti altına alan tek kural.
 * `!important` + sayfa-bazlı override'lardan SONRA cascade'te yer almak için theme-variables.css
 * sonuna konuldu (en geç-load edilen sayfa-bazlı CSS'lerden önce ama specificity ile galip). */
html.dark-mode,
html.dark {
  background-color: var(--color-bg);
}
/* Yüksek specificity (body[class]) — sayfa-bazlı inline <style> body gradient'lerini yeniyor */
html.dark-mode body[class],
html.dark-mode body,
html.dark body[class],
html.dark body {
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
html.dark-mode #tmv2App[class],
html.dark-mode #tmv2App,
html.dark-mode main#mainContent,
html.dark-mode main.main-content,
html.dark-mode .main-content {
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
/* Page-level app-container — body bg üzerinden gelsin, app-container şeffaf */
html.dark-mode .app-container[class],
html.dark-mode .app-container {
  background-color: transparent !important;
  background-image: none !important;
}
/* Sidebar / header / kart canonical token */
html.dark-mode .sidebar.sidebar--v2-host,
html.dark-mode #sidebar,
html.dark-mode .tmv2-header,
html.dark-mode .tm-navbar {
  background-color: var(--color-surface-alt);
  background-image: none;
}

/* ===== UTILITY CLASSES USING VARIABLES ===== */

/* Background Utilities */
.bg-surface-primary {
  background: var(--tm-bg-primary) !important;
  background-color: var(--tm-bg-primary) !important;
}

.bg-surface-secondary {
  background: var(--tm-bg-secondary) !important;
  background-color: var(--tm-bg-secondary) !important;
}

.bg-surface-tertiary {
  background: var(--tm-bg-tertiary) !important;
  background-color: var(--tm-bg-tertiary) !important;
}

.bg-surface-card {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

.bg-surface-elevated {
  background: var(--tm-bg-elevated) !important;
  background-color: var(--tm-bg-elevated) !important;
}

.bg-surface-input {
  background: var(--tm-bg-input) !important;
  background-color: var(--tm-bg-input) !important;
}

.bg-surface-hover:hover {
  background: var(--tm-bg-hover) !important;
  background-color: var(--tm-bg-hover) !important;
}

/* Text Utilities */
.text-surface-primary {
  color: var(--tm-text-primary) !important;
}

.text-surface-secondary {
  color: var(--tm-text-secondary) !important;
}

.text-surface-muted {
  color: var(--tm-text-muted) !important;
}

.text-surface-inverse {
  color: var(--tm-text-inverse) !important;
}

/* Border Utilities */
.border-surface {
  border-color: var(--tm-border-color) !important;
}

.border-surface-light {
  border-color: var(--tm-border-light) !important;
}

.border-surface-dark {
  border-color: var(--tm-border-dark) !important;
}

.border-surface-focus:focus {
  border-color: var(--tm-border-focus) !important;
}

/* Shadow Utilities */
.shadow-surface-sm {
  box-shadow: var(--tm-shadow-sm) !important;
}

.shadow-surface-md {
  box-shadow: var(--tm-shadow-md) !important;
}

.shadow-surface-lg {
  box-shadow: var(--tm-shadow-lg) !important;
}

.shadow-surface-xl {
  box-shadow: var(--tm-shadow-xl) !important;
}

/* Gradient Utilities */
.gradient-primary {
  background: var(--tm-gradient-primary) !important;
}

.gradient-card {
  background: var(--tm-gradient-card) !important;
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: var(--tm-scrollbar-track, #f1f5f9);
}

::-webkit-scrollbar-track {
  background: var(--tm-scrollbar-track, #f1f5f9);
}

::-webkit-scrollbar-thumb {
  background: var(--tm-scrollbar-thumb, #cbd5e1);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tm-scrollbar-thumb-hover, #94a3b8);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tm-scrollbar-thumb, #cbd5e1) var(--tm-scrollbar-track, #f1f5f9);
}

html.dark-mode * {
  scrollbar-color: var(--tm-scrollbar-thumb) var(--tm-scrollbar-track);
}

/* ===== BACKWARD COMPATIBILITY ===== */
/* Mevcut class'larla uyumluluk için */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
  background: var(--tm-bg-card) !important;
  background-color: var(--tm-bg-card) !important;
}

html.dark-mode .bg-gray-50,
html.dark-mode .bg-gray-100 {
  background: var(--tm-bg-secondary) !important;
  background-color: var(--tm-bg-secondary) !important;
}

html.dark-mode .text-dark,
html.dark-mode .text-black {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .text-muted {
  color: var(--tm-text-muted) !important;
}

html.dark-mode .border-gray-200,
html.dark-mode .border-gray-300 {
  border-color: var(--tm-border-color) !important;
}

/* ----- Marka bileşen yardımcıları (semantic token tabanlı) ----- */
/* .btn-accent / .badge-accent → design-system.css */

.tm-badge-info {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.tm-page-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-token-lg);
  box-shadow: var(--shadow-card);
}

/* =============================================================
   DARK MODE — GLOBAL BİLEŞEN OVERRIDE'LARI (2026-05-22)
   Bootstrap + ortak custom bileşenler html.dark-mode altında --tm-* token'larına
   bağlanır. Playwright dark-audit (prod, 50/63 sayfa) ile tespit edilen "açık
   zeminde koyu tema" sızıntılarını merkezi kapatır. !important: ID/Bootstrap
   özgüllüğünü yenmek için. (tests/e2e/audit/dark-mode/)
   ============================================================= */

/* ---- Yüzey kartları (Bootstrap .card + ortak custom kartlar) ---- */
html.dark-mode .card,
html.dark-mode .quick-access-card,
html.dark-mode .account-quick-link,
html.dark-mode .admin-quick-action-btn,
html.dark-mode .account-stat-tile {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .card-header,
html.dark-mode .card-footer {
  background-color: var(--tm-bg-secondary) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .card-body { color: var(--tm-text-primary) !important; }

/* ---- Bootstrap açık zemin yardımcıları ---- */
html.dark-mode .bg-white,
html.dark-mode .bg-light {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}

/* ---- Form alanları (IDli input/select dahil) ---- */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]),
html.dark-mode select,
html.dark-mode textarea {
  background-color: var(--tm-bg-input) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: var(--tm-text-muted) !important; opacity: 1; }
html.dark-mode .input-group-text {
  background-color: var(--tm-bg-secondary) !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Tablolar (Bootstrap CSS değişkenleri + bare table) ---- */
html.dark-mode .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tm-text-primary);
  --bs-table-border-color: var(--tm-border-color);
  --bs-table-striped-bg: var(--tm-bg-secondary);
  --bs-table-striped-color: var(--tm-text-primary);
  --bs-table-hover-bg: var(--tm-bg-hover);
  --bs-table-hover-color: var(--tm-text-primary);
  color: var(--tm-text-primary) !important;
}
html.dark-mode table th,
html.dark-mode table td { border-color: var(--tm-border-color) !important; }
html.dark-mode thead th,
html.dark-mode .table thead th,
html.dark-mode table thead th {
  background-color: var(--tm-bg-secondary) !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Açılır menü / liste / modal / sayfalama ---- */
html.dark-mode .dropdown-menu {
  background-color: var(--tm-bg-elevated) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .dropdown-item { color: var(--tm-text-primary) !important; }
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus { background-color: var(--tm-bg-hover) !important; }
html.dark-mode .list-group-item {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .modal-content {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer { border-color: var(--tm-border-color) !important; }
html.dark-mode .page-link {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Ortak custom araç çubuğu / sekme / filtre bileşenleri ---- */
html.dark-mode .table-header,
html.dark-mode .table-controls,
html.dark-mode .table-toolbar,
html.dark-mode .filters-bar,
html.dark-mode .tool-tabs,
html.dark-mode .view-toggle,
html.dark-mode .period-selector,
html.dark-mode .icon-wrapper.quick-access-icon--neutral {
  background-color: var(--tm-bg-secondary) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .period-btn {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .period-btn.active {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* ---- Bootstrap açık buton (toolbar toggle vb.) ---- */
html.dark-mode .btn-light,
html.dark-mode .btn-outline-secondary {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* =============================================================
   DARK MODE v2 — yüksek özgüllük + sayfa-özel bileşenler (2026-05-22)
   :not(#_tmdm) ID-bump'ı, sayfa-içi `#id{...!important}` kurallarını yener
   (özgüllüğe bir ID ekler, eşleşmeyi değiştirmez). Playwright dark-audit ile
   tespit edilen kalan ~154 selektörü kapsar. (tests/e2e/audit/dark-mode/)
   ============================================================= */

/* ---- Form alanları (IDli + class'lı hepsi; ID-bump ile kazanır) ---- */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(#_tmdm),
html.dark-mode select:not(#_tmdm),
html.dark-mode textarea:not(#_tmdm) {
  background-color: var(--tm-bg-input) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Kart benzeri yüzeyler (generic .card + yaygın custom kartlar) ---- */
html.dark-mode .card:not(#_tmdm),
html.dark-mode .modern-card:not(#_tmdm),
html.dark-mode .main-card:not(#_tmdm),
html.dark-mode .admin-card:not(#_tmdm),
html.dark-mode .wa-settings-card:not(#_tmdm),
html.dark-mode .wa-list-shell:not(#_tmdm),
html.dark-mode .rules-table-wrap:not(#_tmdm),
html.dark-mode .announcements-table-container:not(#_tmdm),
html.dark-mode .verifications-table-container:not(#_tmdm),
html.dark-mode .profit-empty-state__card:not(#_tmdm),
html.dark-mode .quick-access-card:not(#_tmdm) {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .card-header.bg-transparent:not(#_tmdm) { background-color: transparent !important; }

/* ---- Araç çubuğu / sekme / satır container'lar → ikincil yüzey ---- */
html.dark-mode .ad-toolbar,
html.dark-mode .monitoring-tabs,
html.dark-mode .wa-list-toolbar,
html.dark-mode .overview-row,
html.dark-mode .sub-flow-strip,
html.dark-mode .heatmap-header,
html.dark-mode .request-reason,
html.dark-mode .fc-intro,
html.dark-mode #requestsList,
html.dark-mode #requestsListHeader,
html.dark-mode #filterTabs,
html.dark-mode #serverFilesToggle,
html.dark-mode #subscriptionKpiBar,
html.dark-mode #dash-env,
html.dark-mode #dash-top-errors,
html.dark-mode #deploymentMetricsScopeNote,
html.dark-mode #bbLatestInformationalBanner,
html.dark-mode #orchScopeCard,
html.dark-mode #ps-product-list-card {
  background-color: var(--tm-bg-secondary) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Açık butonlar / tab / sayfalama butonları → kart yüzeyi ---- */
html.dark-mode #header-toggle-btn,
html.dark-mode #prev-page,
html.dark-mode #next-page,
html.dark-mode #filter-reset-btn,
html.dark-mode #pm-header-toggle,
html.dark-mode #upload-tab,
html.dark-mode #ordersColPickerBtn,
html.dark-mode #ordersDensityToggle,
html.dark-mode #refreshOrdersBtn,
html.dark-mode #wa-tab-api-btn,
html.dark-mode .btn-mini,
html.dark-mode .sort-pick,
html.dark-mode .bb-sort-wrap,
html.dark-mode .orch-mp-chip,
html.dark-mode .ad-toolbar-search,
html.dark-mode #amzFilterEnter {
  background-color: var(--tm-bg-card) !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Renkli ikon kutuları → koyu tint (içteki ikon rengi korunur) ---- */
html.dark-mode .info-icon.blue,
html.dark-mode .info-icon.green,
html.dark-mode .info-icon.orange,
html.dark-mode .info-icon.purple,
html.dark-mode .metric-icon,
html.dark-mode .ad-hero-icon,
html.dark-mode .icon-wrapper.quick-access-icon--neutral {
  background-color: var(--tm-bg-elevated) !important;
}
html.dark-mode .heatmap-cell.level-0 { background-color: var(--tm-bg-tertiary) !important; }

/* ---- Semantik rozetler — koyu zemin, hue korunur ---- */
html.dark-mode .badge.success,
html.dark-mode .stock-badge.ok,
html.dark-mode .status-badge-confirmed,
html.dark-mode .status-badge-delivered,
html.dark-mode .order-status.delivered,
html.dark-mode .monitoring-alert.success {
  background-color: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
html.dark-mode .badge.warning,
html.dark-mode .stock-badge.warning,
html.dark-mode .status-badge-processing,
html.dark-mode .status-badge-shipped,
html.dark-mode .order-status.shipped,
html.dark-mode .request-status.pending,
html.dark-mode .priority-badge.high,
html.dark-mode .type-badge.maintenance,
html.dark-mode .incident-badge.warning {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark-mode .badge.danger,
html.dark-mode .stock-badge.critical {
  background-color: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
html.dark-mode .type-badge.feature,
html.dark-mode .type-badge.announcement,
html.dark-mode .ad-pill,
html.dark-mode .qa-ai-badge.sales,
html.dark-mode .amz-suggestion-chip,
html.dark-mode .admin-badge.neutral,
html.dark-mode .tm-chip,
html.dark-mode .country-flag {
  background-color: var(--tm-bg-tertiary) !important;
  color: var(--tm-text-secondary) !important;
  border-color: var(--tm-border-color) !important;
}

/* ---- Sunucu sağlık durum noktaları ---- */
html.dark-mode #celeryStatus,
html.dark-mode #dbStatus,
html.dark-mode #redisStatus,
html.dark-mode #schedulerStatus {
  background-color: var(--tm-bg-tertiary) !important;
  color: var(--tm-text-primary) !important;
}

html.dark-mode tr.table-hover { background-color: transparent !important; }

/* =============================================================
   DARK MODE v3 — gradient/hardcoded zeminleri kesin yen (2026-05-22)
   :not(#_t) ID-bump (özgüllüğe ID ekler) → prod'da theme-variables.css sayfa
   CSS'inden ÖNCE yüklendiği için kaynak-sırası kayıplarını da telafi eder.
   background-image:none → hardcoded beyaz gradient'leri söker.
   ============================================================= */
html.dark-mode .card:not(#_t),
html.dark-mode .modern-card:not(#_t),
html.dark-mode .main-card:not(#_t),
html.dark-mode .admin-card:not(#_t),
html.dark-mode .quick-access-card:not(#_t),
html.dark-mode .profit-empty-state__card:not(#_t),
html.dark-mode .rules-table-wrap:not(#_t),
html.dark-mode .announcements-table-container:not(#_t),
html.dark-mode .verifications-table-container:not(#_t),
html.dark-mode .wa-settings-card:not(#_t),
html.dark-mode .wa-list-shell:not(#_t) {
  background-color: var(--tm-bg-card) !important;
  background-image: none !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
html.dark-mode .table-header:not(#_t),
html.dark-mode .table-controls:not(#_t),
html.dark-mode .table-toolbar:not(#_t),
html.dark-mode .filters-bar:not(#_t),
html.dark-mode .tool-tabs:not(#_t),
html.dark-mode .view-toggle:not(#_t),
html.dark-mode .period-selector:not(#_t),
html.dark-mode .monitoring-tabs:not(#_t),
html.dark-mode .wa-list-toolbar:not(#_t),
html.dark-mode .ad-toolbar:not(#_t),
html.dark-mode .overview-row:not(#_t),
html.dark-mode .sub-flow-strip:not(#_t),
html.dark-mode .icon-wrapper.quick-access-icon--neutral:not(#_t) {
  background-color: var(--tm-bg-secondary) !important;
  background-image: none !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}
/* Form alanları — ID-bump'ı 2'ye çıkar (sayfa #id#id veya yüksek özgüllüğe karşı) */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]):not(#_t):not(#_u),
html.dark-mode select:not(#_t):not(#_u),
html.dark-mode textarea:not(#_t):not(#_u) {
  background-color: var(--tm-bg-input) !important;
  background-image: none !important;
  color: var(--tm-text-primary) !important;
  border-color: var(--tm-border-color) !important;
}