/* TM paketi — kaynak sirasi korunur. Uretici: scripts/build_assets.py */

/* ===== css/v2/v2.css ===== */
/* =================================================================
   TRENDMETRIK DESIGN SYSTEM v2 — UMBRELLA
   Single entry point. Loaded LAST in base.html so its unlayered rules
   beat earlier unlayered legacy via source order. No @layer used:
   tm-ui-system.css already defines some .tm-* classes unlayered, and
   layered rules lose to unlayered — so we stay unlayered too.
   ================================================================= */


/* ==== @import css/v2/tokens.css ==== */
/* =================================================================
   TRENDMETRIK DESIGN SYSTEM v2 — TOKENS
   Single source of truth for color, type, spacing, motion.
   Unlayered; imported via v2.css.
   ================================================================= */

:root {
  /* ---------- Brand ----------
     PR-D2 token de-confliction (2026-06-19): --tm-brand-{300,500,600,700} are
     ALSO defined in theme-variables.css (canonical). Where the canonical token
     resolves to the IDENTICAL value in BOTH light and dark on every panel page
     (verified by full-cascade resolve: 0 rendered-value change), the duplicate literal
     here is aliased to the canonical source `var(--canonical, <orig-literal>)`.
     The literal is retained ONLY as a fallback so the standalone v2 fixture
     (tests/e2e/fixtures/canli-redesign-fixture.html — loads tokens.css without
     theme-variables.css) keeps its exact original rendering.
     Tokens with NO differently-named canonical (50/100/200/400/800/900) and the
     accent/surface-raised/text-* DESIGN-DECISION set are intentionally left
     unchanged (v2 value genuinely renders; convergence needs sign-off). */
  --tm-brand-50:  #e8f4ff;
  --tm-brand-100: #d1e9ff;
  --tm-brand-200: #a3d0fd;
  --tm-brand-300: var(--color-secondary, #73b7fe);     /* canonical #73b7fe (L) / dark from canonical */
  --tm-brand-400: #2e96f2;
  --tm-brand-500: var(--color-primary, #0175e4);       /* canonical #0175e4 (L) / dark from canonical */
  --tm-brand-600: var(--color-primary-hover, #0163c2); /* canonical #0163c2 (L) / dark from canonical */
  --tm-brand-700: var(--tm-logo-blue-deep, #014a94);   /* canonical #014a94 (L) / dark from canonical */
  --tm-brand-800: #013a73;
  --tm-brand-900: #012a55;

  /* ---------- Accent (CTA) ----------
     PR-D2b (2026-06-19): brand accent converged ORANGE→BLUE (user decision).
     Values match the canonical blue accent scale in theme-variables.css
     (--tm-accent-50..700) so the two definitions no longer diverge. */
  --tm-accent-50:  #eff6ff;
  --tm-accent-100: #dbeafe;
  --tm-accent-500: #0175e4;
  --tm-accent-600: #0163c2;
  --tm-accent-700: #014a94;

  /* ---------- Ink (neutral zinc) ---------- */
  --tm-ink-50:  #fafafa;
  --tm-ink-100: #f4f4f5;
  --tm-ink-200: #e4e4e7;
  --tm-ink-300: #d4d4d8;
  --tm-ink-400: #a1a1aa;
  --tm-ink-500: #71717a;
  --tm-ink-600: #52525b;
  --tm-ink-700: #3f3f46;
  --tm-ink-800: #27272a;
  --tm-ink-900: #18181b;
  --tm-ink-950: #09090b;

  /* ---------- Semantic ---------- */
  --tm-ok:        var(--color-success, #15803d);   /* kanonik; 2026-09-23 AA (5,02:1) */
  --tm-ok-bg:     #dcfce7;
  --tm-ok-border: #86efac;
  --tm-warn:      #b45309;                          /* 2026-09-23 AA (5,02:1); eski #d97706 3,19:1 */
  --tm-warn-bg:   #fef3c7;
  --tm-warn-border:#fcd34d;
  --tm-bad:       #dc2626;
  --tm-bad-bg:    #fee2e2;
  --tm-bad-border:#fca5a5;
  --tm-info:      #0284c7;
  --tm-info-bg:   #e0f2fe;
  --tm-info-border:#7dd3fc;

  /* ---------- Surfaces (light) ---------- */
  /* PR-D2: --tm-surface canonical (theme-variables.css) resolves to the same
     value in both modes on every panel page (L #ffffff, D #0b0f14 via dark-mode
     -component-overrides which loads last) → aliased; literal kept as fixture
     fallback. Zero rendered-value change (verified full-cascade resolve). */
  --tm-surface:         var(--color-surface, #ffffff);
  --tm-surface-sunken:  var(--color-bg, #f8fafc);        /* kanonik zemin (Palet B) */
  --tm-surface-raised:  #ffffff;
  --tm-surface-overlay: rgba(9,9,11,.5);
  --tm-border:          var(--color-border, #e4e4e7);    /* kanonik kenarlık (Palet B) */
  --tm-border-strong:   #d4d4d8;

  /* ---------- Text ---------- */
  --tm-text-primary:   #18181b;
  --tm-text-secondary: #52525b;
  --tm-text-muted:     var(--color-text-muted, #71717a); /* kanonik, AA */
  --tm-text-disabled:  #a1a1aa;
  --tm-text-inverse:   #ffffff;
  --tm-text-on-brand:  #ffffff;

  /* ---------- Shadows ---------- */
  --tm-shadow-xs: 0 1px 2px rgba(9,9,11,.04);
  --tm-shadow-sm: 0 1px 3px rgba(9,9,11,.06), 0 1px 2px rgba(9,9,11,.04);
  --tm-shadow-md: 0 4px 8px -2px rgba(9,9,11,.08), 0 2px 4px -2px rgba(9,9,11,.04);
  --tm-shadow-lg: 0 12px 24px -6px rgba(9,9,11,.1), 0 4px 8px -4px rgba(9,9,11,.06);
  --tm-shadow-xl: 0 24px 48px -12px rgba(9,9,11,.18);

  /* ---------- Focus ---------- */
  --tm-ring:     0 0 0 3px rgba(1,117,228,.25);
  --tm-ring-bad: 0 0 0 3px rgba(220,38,38,.25);
  --tm-ring-ok:  0 0 0 3px rgba(21,128,61,.25);

  /* ---------- Typography ---------- */
  --tm-font-sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --tm-text-xs:   0.75rem;
  --tm-text-sm:   0.875rem;
  --tm-text-base: 1rem;
  --tm-text-lg:   1.125rem;
  --tm-text-xl:   1.25rem;
  --tm-text-2xl:  1.5rem;
  --tm-text-3xl:  1.875rem;
  --tm-text-4xl:  2.25rem;
  --tm-text-5xl:  3rem;

  --tm-leading-tight:  1.2;
  --tm-leading-snug:   1.375;
  --tm-leading-normal: 1.5;
  --tm-leading-loose:  1.75;

  --tm-tracking-tight:  -0.02em;
  --tm-tracking-normal: 0;
  --tm-tracking-wide:   0.04em;
  --tm-tracking-wider:  0.08em;

  --tm-weight-normal:   400;
  --tm-weight-medium:   500;
  --tm-weight-semibold: 600;
  --tm-weight-bold:     700;

  /* ---------- Spacing (4px grid) ---------- */
  --tm-space-0:  0;
  --tm-space-1:  0.25rem;
  --tm-space-2:  0.5rem;
  --tm-space-3:  0.75rem;
  --tm-space-4:  1rem;
  --tm-space-5:  1.25rem;   /* 20px — ÖLÇEK DIŞI (2026-09-23): yeni kodda kullanma, 16 ya da 24'e git */
  --tm-space-6:  1.5rem;
  --tm-space-8:  2rem;
  --tm-space-10: 2.5rem;    /* 40px — ÖLÇEK DIŞI (2026-09-23): yeni kodda kullanma */
  --tm-space-12: 3rem;
  --tm-space-16: 4rem;
  --tm-space-20: 5rem;
  --tm-space-24: 6rem;

  /* ---------- Radius ---------- */
  --tm-radius-sm:   4px;
  --tm-radius-md:   6px;
  --tm-radius-lg:   12px;
  --tm-radius-xl:   16px;
  --tm-radius-2xl:  20px;
  --tm-radius-full: 9999px;

  /* ---------- Motion ---------- */
  --tm-dur-1: 120ms;
  --tm-dur-2: 180ms;
  --tm-dur-3: 240ms;
  --tm-dur-4: 360ms;
  --tm-ease:     cubic-bezier(.2,.8,.2,1);
  --tm-ease-in:  cubic-bezier(.4,0,1,1);
  --tm-ease-out: cubic-bezier(0,0,.2,1);
  /* Motion token seti (2026-09-23; F raporu): 43 farklı cubic-bezier yazımı yerine üç süre + standart eğri.
     mikro-etkileşim 150 · durum değişimi 200 · panel/modal 300 ms. */
  --tm-dur-fast: 150ms;
  --tm-dur-base: 200ms;
  --tm-dur-slow: 300ms;
  --tm-ease-standard: cubic-bezier(.4,0,.2,1);

  /* ---------- Layout ---------- */
  --tm-sidebar-w:      260px;      /* TEK sidebar genişliği (2026-09-23): legacy 280 / ds-shell 260 ikiliği kaldırıldı; theme-variables --tmv2-sb-w ile aynı */
  --tm-sidebar-w-mini: 72px;
  /* Sayfa kabuğu kenarları (2026-09-23): masaüstü yatay 32 · alt boşluk = FAB payı (72, adlandırılmış istisna, ölçek dışı). */
  --tm-page-edge-x:    var(--tm-space-8);   /* 32px */
  --tm-fab-clearance:  96px;   /* speed-dial 52px + 16px kenar + 28px pay: sağ alttaki kartın köşesine binmez (2026-09-24) */
  --tm-header-h:       60px;       /* SA7 (2026-06-15 panel-qa): gerçek render header min-height (58-60px) ile hizala; 56px toast/sidebar/filter-bar top-offset'ini altından kaçırıyordu */
  --tm-container-max:  1920px;     /* theme --tmv2-page-inner-standard-max ile hizalı */
  --tm-content-max:    1280px;

  /* Shell spacing — tighter than legacy app-layout (reduces vertical whitespace). */
  --tm-page-gutter-x: var(--tm-space-6);  /* 24px horizontal (2026-09-23 ölçek) */
  --tm-page-gutter-y: var(--tm-space-4);  /* 16px vertical */
  --tm-section-gap:   var(--tm-space-4);  /* 16px between containers — kullanıcı kararı 2026-09-23: aralık küçük ve HER sayfada aynı */
  --tm-card-gap:      var(--tm-space-4);  /* 16px between cards in a row */

  /* ---------- Phase D container scale (2026-06-06) ----------
     CEO talebi: sabit spacing scale (8/12/16/20/24/32) + max 3 katmanlı
     container mimarisi (page shell → section card → inner content). Yeni
     paralel sistem AÇILMADI; aşağıdaki aliaslar mevcut --tm-space-* token'larına
     bağlı. Eski --tm-page-gutter-x / --tm-section-gap / --tm-card-gap
     backward-compat için korundu (D2/D3 yeni token'lara migrate edecek).

     Kullanım (D2/D3 PR'larında):
     - page shell:   padding-inline: var(--tm-page-padding-x);
     - section card: padding: var(--tm-section-padding);
                     gap: var(--tm-section-card-gap);
                     border-radius: var(--tm-radius-card);
                     border: 1px solid var(--tm-card-border);
                     box-shadow: var(--tm-card-shadow);
     - inner content: gap: var(--tm-card-inner-gap);          (12px)
                      veya: gap: var(--tm-card-item-gap);      (16px)
     ---------------------------------------------------------- */
  --tm-page-padding-x:     var(--tm-space-6);  /* 24px — page horizontal padding */
  --tm-page-padding-y:     var(--tm-space-6);  /* 24px — page vertical padding (2026-09-23 ölçek) */
  --tm-section-padding:    var(--tm-space-6);  /* 24px — section card all-around (kompakt kart: --tm-space-4) */
  --tm-section-padding-x:  var(--tm-section-padding);
  --tm-section-padding-y:  var(--tm-section-padding);
  --tm-section-card-gap:   var(--tm-space-4);  /* 16px — between containers (alias of legacy --tm-section-gap) */
  --tm-card-inner-gap:     var(--tm-space-3);  /* 12px — tight inner stack */
  --tm-card-item-gap:      var(--tm-space-4);  /* 16px — comfortable inner stack */
  --tm-radius-card:        var(--tm-radius-xl); /* 14px — ds-tokens ile TEK değer (2026-09-23; eski 12 çakışıyordu) */
  --tm-radius-control:     var(--tm-radius-md); /* 6px — button / input; kart 12px ile karışmasın */
  --tm-card-border:        var(--tm-border);   /* light border alias */
  --tm-card-shadow:        var(--tm-shadow-xs);/* rest: tek katman, görsel gürültü yok */
  --tm-card-shadow-hover:  var(--tm-shadow-xs);/* hover lift YOK — rest ile aynı */
  /* Dashboard yüzey skalası (4px grid, ara değer yasak): 4 / 8 / 12 / 16 / 24 */
  /* ---------- /Phase D container scale ---------- */

  /* Z-index: do not set here — base.html loads tm-z-layers.css before v2.css.
   * Defining --tm-z-modal (etc.) in this file was overriding 1055→1050 and
   * collapsing .modal and .modal-backdrop into the same band.
   * Use: static/css/tm-z-layers.css (:root) as the single source. */

  /* ---------- Dashboard layout tokens (v2 redesign) ----------
     Handoff spec §5.1: Dashboard sayfasına özgü ölçüler.
     Tüm dashboard layout CSS'i static/css/v2/dashboard.css kullanır. */

  /* Hero bar height (hoşgeldin + filtreler) */
  --tm-dash-hero-h:         88px;

  /* KPI row: 5-kolon grid (masaüstü) */
  --tm-dash-kpi-cols:       5;
  --tm-dash-kpi-min-w:      180px;
  --tm-dash-kpi-h:          148px;

  /* Chart card heights */
  --tm-dash-chart-main-h:   380px;   /* trend line chart */
  --tm-dash-chart-donut-h:  380px;   /* kategori donut */
  --tm-dash-sparkline-h:    40px;    /* KPI kartındaki spark */

  /* Aside (duyurular/yenilikler paneli) */
  --tm-dash-aside-w:        320px;

  /* Content area max (handoff: 1440px page → ~1140px content iç alan) */
  --tm-dash-content-max:    var(--tm-content-max);

  /* Gap between dashboard rows */
  --tm-dash-row-gap:        var(--tm-space-4);   /* 16px (2026-09-23 kullanıcı: container aralığı tek değer) */
  --tm-dash-col-gap:        var(--tm-space-4);   /* 16px */

  /* Table row heights */
  --tm-dash-table-row-h:    52px;
  --tm-dash-table-dense-h:  40px;

  /* ---------- Accent orange — orijinal handoff paleti (§3.1) ----------
     Not: Mevcut repoda accent #fd751f → #0175e4 (mavi) olarak migrate
     edildi (PR-D2b). Bu token'lar handoff referansı ve gelecekteki
     pazarlama yüzeyi için tutulur; panel komponentleri --tm-accent-500
     (mavi) kullanmaya devam eder.
     Pazarlama sayfası / CTA turuncu için: --tm-orange-500 kullanın. */
  --tm-orange-50:  #fff8f3;
  --tm-orange-100: #ffecd9;
  --tm-orange-500: #fd751f;
  --tm-orange-600: #e76412;
  --tm-orange-700: #c24e0c;
}

/* =================================================================
   Dark mode — supports both new data-theme="dark" AND legacy .dark-mode class
   Single place; replaces scattered dark-mode patches.
   ================================================================= */
[data-theme="dark"],
html.dark-mode {
  --tm-warn:            #f59e0b;   /* 2026-09-24: koyu zeminde #b45309 düşük kontrast */
  --tm-surface:         #0f1419;
  --tm-surface-sunken:  #0b0f14;
  --tm-surface-raised:  #161c23;
  --tm-surface-overlay: rgba(0,0,0,.7);
  --tm-border:          #27272a;
  --tm-border-strong:   #3f3f46;

  --tm-text-primary:   #f4f4f5;
  --tm-text-secondary: #a1a1aa;
  --tm-text-muted:     #71717a;
  --tm-text-disabled:  #52525b;

  /* Neutral rozet zemini: açık moddaki #f4f4f5 koyu arka planda kontrast hatası veriyordu */
  --tm-ink-100: #1e2533;
  --tm-ink-200: #2a3545;

  --tm-brand-50:  rgba(1,117,228,.12);
  --tm-brand-100: rgba(1,117,228,.2);
  --tm-accent-50: rgba(1,117,228,.12);   /* PR-D2b: accent orange→blue (dark) */
  --tm-accent-100:rgba(1,117,228,.2);

  --tm-ok-bg:   rgba(21,128,61,.15);
  --tm-warn-bg: rgba(180,83,9,.15);
  --tm-bad-bg:  rgba(220,38,38,.15);
  --tm-info-bg: rgba(2,132,199,.15);

  --tm-shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --tm-shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --tm-shadow-md: 0 4px 8px -2px rgba(0,0,0,.5);
  --tm-shadow-lg: 0 12px 24px -6px rgba(0,0,0,.6);
  --tm-shadow-xl: 0 24px 48px -12px rgba(0,0,0,.7);

  --tm-ring: 0 0 0 3px rgba(46,150,242,.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tm-dur-1: 0ms;
    --tm-dur-2: 0ms;
    --tm-dur-3: 0ms;
    --tm-dur-4: 0ms;
    --tm-dur-fast: 0ms;
    --tm-dur-base: 0ms;
    --tm-dur-slow: 0ms;
  }
}

/* ==== /@import css/v2/tokens.css ==== */


/* ==== @import css/v2/reset.css ==== */
/* =================================================================
   TRENDMETRIK v2 — TARGETED RESET
   Kept minimal: do not fight Bootstrap globally, only normalize v2
   component touch-points (box-sizing in v2 roots, tabular-nums default).
   ================================================================= */

.tm-root,
.tm-page,
.tm-page *,
.tm-page *::before,
.tm-page *::after {
  box-sizing: border-box;
}

.tm-page :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
.tm-page :where(p) { margin: 0; }
.tm-page :where(ul, ol) { margin: 0; }

.tm-page :where(img, svg, video) {
  max-width: 100%;
  height: auto;
  display: block;
}

.tm-page :where(button) { font: inherit; }

/* Numeric cells default to tabular-nums for visual alignment */
.tm-num,
.tm-page [data-num] {
  font-variant-numeric: tabular-nums;
}

/* ==== /@import css/v2/reset.css ==== */


/* ==== @import css/v2/typography.css ==== */
/* =================================================================
   TRENDMETRIK v2 — TYPOGRAPHY
   Scoped to .tm-page so legacy page type is untouched.
   ================================================================= */

.tm-page {
  font-family: var(--tm-font-sans);
  color: var(--tm-text-primary);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tm-h1 {
  font-size: var(--tm-text-2xl);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-tight);
  font-weight: var(--tm-weight-bold);
  color: var(--tm-text-primary);
}

.tm-h2 {
  font-size: var(--tm-text-xl);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-tight);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
}

.tm-h3 {
  font-size: var(--tm-text-lg);
  line-height: var(--tm-leading-snug);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
}

.tm-eyebrow {
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-muted);
  letter-spacing: var(--tm-tracking-wide);
  text-transform: uppercase;
}

.tm-body {
  font-size: var(--tm-text-sm);
  color: var(--tm-text-secondary);
  line-height: var(--tm-leading-normal);
}

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

.tm-mono {
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==== /@import css/v2/typography.css ==== */


/* ==== @import css/v2/layout.css ==== */
/* =================================================================
   TRENDMETRIK v2 — LAYOUT PRIMITIVES
   .tm-page         page root (applies reset + typography scope)
   .tm-page-header  top of a page (title + actions row)
   .tm-section      logical content block with internal gap
   .tm-grid-*       responsive card grids
   .tm-stack        vertical flex with gap
   .tm-row          horizontal flex with gap
   ================================================================= */

/* Page root — sits inside base.html's .tmv2-page-body block */
.tm-page {
    display: flex;
    flex-direction: column;
    gap: var(--tm-section-gap);
    width: 100%;
    min-width: 0;
    /* No outer padding — the shell (.tmv2-page-body) owns padding.
       Keeps v2 pages flush with legacy spacing tokens. */
}

/* Page header: title + breadcrumb + actions on right */
.tm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tm-space-4);
    flex-wrap: wrap;
}

.tm-page-header__title-group {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-1);
    min-width: 0;
}

.tm-page-header__title {
    font-size: var(--tm-text-2xl);
    line-height: var(--tm-leading-tight);
    letter-spacing: var(--tm-tracking-tight);
    font-weight: var(--tm-weight-bold);
    color: var(--tm-text-primary);
}

.tm-page-header__subtitle {
    font-size: var(--tm-text-sm);
    color: var(--tm-text-muted);
}

.tm-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--tm-space-2);
    flex-wrap: wrap;
}

/* Section — a titled block of cards/content */
.tm-section {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3);
}

.tm-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-3);
}

.tm-section__title {
    font-size: var(--tm-text-base);
    font-weight: var(--tm-weight-semibold);
    color: var(--tm-text-primary);
}

/* Responsive card grids — auto-fit with minmax */
.tm-grid {
    display: grid;
    gap: var(--tm-card-gap);
    grid-template-columns: 1fr;
}

.tm-grid-2 {
    display: grid;
    gap: var(--tm-card-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tm-grid-3 {
    display: grid;
    gap: var(--tm-card-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tm-grid-4 {
    display: grid;
    gap: var(--tm-card-gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Asymmetric: main 2fr + aside 1fr */
.tm-grid-main-aside {
    display: grid;
    gap: var(--tm-card-gap);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

@media (max-width: 1024px) {
    .tm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm-grid-main-aside { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .tm-grid-2,
    .tm-grid-3,
    .tm-grid-4 {
      grid-template-columns: 1fr;
    }
}

/* Flex helpers */
.tm-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-3);
}

.tm-stack-sm { gap: var(--tm-space-2); }
.tm-stack-lg { gap: var(--tm-space-5); }

.tm-row {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3);
    flex-wrap: wrap;
}

.tm-row-sm { gap: var(--tm-space-2); }
.tm-row-lg { gap: var(--tm-space-5); }

.tm-spacer { flex: 1; }

/* ==== /@import css/v2/layout.css ==== */


/* ==== @import css/v2/shell.css ==== */
/* =================================================================
   TRENDMETRIK v2 — SHELL TUNE-UP
   Standardizes spacing between sidebar, header, and main content
   without rewriting the existing .tmv2-* DOM.
   ================================================================= */

/* =================================================================
   📐 SAYFA İÇERİK KONTRATI (yeni şablon yazarken bunu uygula)
   -----------------------------------------------------------------
   main.tmv2-page zaten:
     • --tmv2-page-pad-x  (~20px) yatay gutter
     • --tmv2-page-pad-y  (~16px) dikey üst boşluk
     • .tmv2-page-inner   max-width (variant'a göre 1280/1600/1920/760)
   sağlıyor. Sayfa root wrapper'ı EK padding/max-width vermez.

   ❌ YASAK ROOT SARMALAYICILAR (sayfa kenarlarını TUTARSIZ yapar):
     <div class="container">       Bootstrap 1140px max-width + 12px gutter
     <div class="container-fluid">  12px yatay padding
     <div class="px-4 py-4">         16px ek gutter (Tailwind/Bootstrap)
     <div class="w-full px-4">       aynı
     <div class="min-h-screen">      height main'in işi
     <div class="min-vh-100">         Bootstrap height utility
     <div class="bg-gradient-to-...">  arka plan main'in işi
     style="padding: ..."             inline padding
   Bunlar main'in 20px gutter'ı üstüne biner → sayfa daha dar görünür.

   ✅ DOĞRU PATTERN:
     {% block content %}
     <div class="<page-name>-page">  ← sadece page-specific class, padding YOK
       ...içerik...
     </div>
     {% endblock %}

   Form/wizard/dar sayfa için:
     {% block tmv2_inner_variant %}tmv2-page-inner--narrow{% endblock %}
   Veri-yoğun dashboard için:
     {% block tmv2_inner_variant %}tmv2-page-inner--wide{% endblock %}

   İçerideki kart/section padding'leri --tm-space-* token'larından gelsin.
   ================================================================= */

/* ---- Token bridge --------------------------------------------------
   Bridges legacy --tmv2-* tokens to v2 values (tighter gutters).
   shell.css loads AFTER theme-variables.css, so these overrides win
   via source order.
   ------------------------------------------------------------------ */
:root {
  /* Shell spacing */
  --tmv2-layout-gutter:   var(--tm-page-gutter-x);   /* 20px */
  --tmv2-page-pad-x:      var(--tm-page-gutter-x);
  --tmv2-page-pad-y:      var(--tm-page-gutter-y);   /* 16px */
  --tmv2-page-pad-bottom: var(--tm-space-6);         /* 24px */
  --tmv2-section-gap:     var(--tm-section-gap);     /* 20px */
  --tmv2-sb-w:            var(--tm-sidebar-w);       /* 280px */

  /* Sidebar nav tokens — bridge to v2 so brand color changes propagate */
  --tmv2-nav-active-bg:       var(--tm-brand-50);
  --tmv2-nav-active-ink:      var(--tm-brand-700);
  --tmv2-nav-active-icon:     var(--tm-brand-500);
  --tmv2-nav-active-bar-color:var(--tm-brand-500);
  --tmv2-nav-active-bar:      3px;
  --tmv2-nav-muted:           var(--tm-text-muted);
}

/* Keep the viewport gutter stable while moving between short/long pages. */
html {
    scrollbar-gutter: stable;
}

body.tmv2-body {
    overflow-y: scroll;
}

@media (min-width: 1025px) {
    #tmv2App .tmv2-main:not(.tmv2-main--no-sidebar) {
      width: calc(100vw - var(--tmv2-sb-w));
    }
}

html.dark-mode,
html[data-theme="dark"] {
  --tmv2-nav-active-bg:       rgba(1,117,228,.16);
  --tmv2-nav-active-ink:      var(--tm-text-primary);
  --tmv2-nav-active-icon:     var(--tm-brand-400);
  --tmv2-nav-active-bar-color:var(--tm-brand-400);
}

@media (max-width: 768px) {
:root {
    --tmv2-page-pad-x: var(--tm-space-3);
    --tmv2-page-pad-y: var(--tm-space-3);
}
}

/* ---- Shell tweaks --------------------------------------------------
   Rules below only apply to v2 usage (.tm-page inside .tmv2-page-body).
   ------------------------------------------------------------------ */
#tmv2App .tmv2-page-body {
    gap: var(--tm-section-gap);
    min-width: 0;
}

/* Kill stray top margin on first child of page body */
#tmv2App .tmv2-page-body > :where(.tm-page, .tm-page-header, .tm-section):first-child {
    margin-top: 0;
}

/* When a .tm-page sits inside the shell, drop the shell's own gap */
#tmv2App .tmv2-page-body:is(.tmh-db469189, :not(*) > .tm-page) {
    gap: 0;
}

#tmv2App .tmv2-page-inner {
    max-width: var(--tm-container-max, 1600px);
    width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

/* Reserve the visible shell height before async tables/charts hydrate. */
#tmv2App .tmv2-page-shell {
    min-height: calc(100dvh - 58px - var(--tmv2-page-pad-y) - var(--tmv2-page-pad-bottom));
}

#tmv2App .tmv2-page-body:is(.tmh-d161a3fb, :not(*) :is(.tmv2-dashboard, .tm-live-page, .product-settings-page, #ordersTab, .commission-analysis-page, .campaign-analysis-page, .buybox-control-module, .xml-sync-page)) {
    min-height: calc(100dvh - 58px - var(--tmv2-page-pad-y) - var(--tmv2-page-pad-bottom));
}

/* Route-level async reservations. These are intentionally in the shell bundle
   because some legacy pages do not consistently load their page CSS early. */
#tmv2App #bulkLoading.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 992px) {
    #tmv2App .tmv2-page-body:is(.tmh-1ca6f90e, :not(*) .tmv2-dashboard) {
      min-height: 900px;
    }

    /* FIX 2026-09-08: Canlı Performans anti-CLS rezervasyonu (2200/2050/980px)
       #ordersTab'te 2026-08-19'da düzeltilen hatanın AYNISIydı ve Canlı sayfası
       o düzeltmeyi almamıştı: bugün 2-3 siparişi olan kullanıcıda içerik ~900px
       kalıyor, rezervasyon 2050px olduğu için tablonun altında ~1100px BOŞ ALAN
       ve havada asılı sayfalama görünüyordu. İçeriğe-göre yükseklik.
       KPI satırı ve grafik kutusu rezervasyonu KORUNUR — ikisi de her zaman
       sabit sayıda öğe render eder (5 kart / 320px mount), yani gerçek CLS
       kaynağı onlar; boş-alan üreten sayfa/grid rezervasyonları kaldırıldı. */
    #tmv2App .tmv2-page-body:is(.tmh-3413ab38, :not(*) .tm-live-page) {
      min-height: 0;
    }

    #tmv2App .tm-live-page,
    #tmv2App .tm-live-page .tm-live-main-grid {
      min-height: 0;
    }

    #tmv2App .tm-live-page .tm-kpi-row {
      min-height: 150px;
    }

    #tmv2App .tm-live-page .tm-live-charts,
    #tmv2App .tm-live-page .tm-live-main-grid__content {
      min-height: 0;
    }

    #tmv2App .tm-live-page .tm-live-chartbox {
      min-height: 320px;
    }

    /* FIX 2026-08-19 (Detector-kanıtlı): orders anti-CLS rezervasyonu (1450px/930px)
       AZ KAYITTA içeriği ezip tablo-altında dev boş-alan + havada-sayfalama yaratıyordu.
       İçeriğe-göre yükseklik: küçük rezervasyon (toolbar flash'ı önler) ama boş-alan yok. */
    #tmv2App .tmv2-page-body:is(.tmh-25164ed4, :not(*) #ordersTab) {
      min-height: 0;
    }

    #tmv2App .tmv2-page-body:is(.tmh-25164ed4, :not(*) #ordersTab) .orders-table-stack {
      min-height: 0 !important;
    }

    #tmv2App .tmv2-page-body:is(.tmh-10434fa7, :not(*) .buybox-control-module) {
      min-height: 1962px;
    }

    #tmv2App .tmv2-page-body:is(.tmh-10434fa7, :not(*) .buybox-control-module) .buybox-control-module {
      min-height: 1962px !important;
    }
}

@media (max-width: 991.98px) {
    #tmv2App .tmv2-page-body:is(.tmh-1ca6f90e, :not(*) .tmv2-dashboard) {
      min-height: 1180px;
    }

    #tmv2App .tmv2-page-body:is(.tmh-25164ed4, :not(*) #ordersTab) {
      min-height: 0;  /* FIX 2026-08-19: içeriğe-göre (mobil) — boş-alan yok */
    }

    #tmv2App .tmv2-page-body:is(.tmh-25164ed4, :not(*) #ordersTab) .orders-table-stack {
      min-height: 0 !important;
    }

    /* FIX 2026-09-08 (mobil ayağı): bkz. yukarıdaki desktop notu. Mobilde
       rezervasyon daha da büyüktü (2450/2380/1260px) → az siparişte ekranın
       birkaç katı boş alan. KPI satırı rezervasyonu korunur (mobilde 5 kart
       alt alta dizilir → gerçek yükseklik ~430px, CLS oradan gelir). */
    #tmv2App .tmv2-page-body:is(.tmh-3413ab38, :not(*) .tm-live-page) {
      min-height: 0;
    }

    #tmv2App .tm-live-page,
    #tmv2App .tm-live-page .tm-live-main-grid {
      min-height: 0;
    }

    #tmv2App .tm-live-page .tm-kpi-row {
      min-height: 430px;
    }

    #tmv2App .tm-live-page .tm-live-charts,
    #tmv2App .tm-live-page .tm-live-main-grid__content {
      min-height: 0;
    }

    #tmv2App .tmv2-page-body:is(.tmh-10434fa7, :not(*) .buybox-control-module),
    #tmv2App .tmv2-page-body:is(.tmh-10434fa7, :not(*) .buybox-control-module) .buybox-control-module {
      min-height: 1962px !important;
    }
}

@keyframes tmv2-page-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

/* 🔴 KABUK GİRİŞ SOLMASI KALDIRILDI (2026-10-11, ölçüldü — kullanıcı: *"sayfa
   yüklemeleri kopuk, kasıyor"*). Genel Bakış açılışında ALTI ayrı solma üst üste
   biniyordu: belge-arası View Transition + bu kabuk solması + `main` solması
   (tmContentIn) + gövde çocuklarının yukarı-kayması (tmContentUp) + "hazır"
   nabzı (tmPageReadyIn) + kartların kendi kademesi (ds-motion). İlk üçü aynı
   anda 0'dan başlıyor, sayfa ~440 ms görünmez kalıyordu. Sayfa→sayfa geçişini
   View Transition, kart girişini ds-motion kademesi yapar; bu katman fazlaydı. */

#tmv2App .tmv2-page-body > .tm-page {
    margin-top: 0;
    padding-top: 0;
}

/* =================================================================
   v2 LAYOUT — sayfa-genişliği varyantları
   --------------------------------------
   Tüm tmv2 sayfalarda template başında {% block tmv2_inner_variant %}
   ile seçilir. Hangi varyant ne zaman?

   • (default)         — content-heavy okuma sayfaları (~1280px)
                         → çoğu rapor, analiz, ayarlar
   • --standard        — explicit "default" — kasıtlı seçim için
   • --wide            — yoğun veri / dashboard (~1920px)
                         → genel bakış, sipariş tablosu, payout
   • --ops             — operations grid'li sayfalar (~1920px)
                         → buybox kontrol, izleme panelleri
   • --narrow          — form/wizard/detay sayfaları (~760px)
                         → kullanıcı ayarları, onboarding form
   • --fluid           — kenara dayanan tablolar / liste sayfaları
                         → max-width yok, full width

   tm-ui-system.css'te de eski tanımlar var; burası yeni standart
   ve tek kaynak — gelecekte şablonlar bu varyantları kullansın.
   ================================================================= */

#tmv2App .tmv2-page-inner.tmv2-page-inner--standard {
    max-width: var(--tm-content-max, 1280px);
}

#tmv2App .tmv2-page-inner.tmv2-page-inner--narrow {
    max-width: 760px;
}

/* Wide / ops / fluid zaten tm-ui-system.css'te tanımlı — duplike etmiyoruz. */

/* ==== /@import css/v2/shell.css ==== */


/* ==== @import css/v2/components/buttons.css ==== */
/* =================================================================
   TRENDMETRIK v2 — BUTTON (RETIRED)
   PR-D6b (2026-06-19): the `tm-btn` / `tm-btn--*` family is RETIRED.
   All ~11 consumer templates + JS migrated to the canonical tm-v2
   `btn` / `btn--*` family (static/css/tm-v2.css). grep proves 0
   `tm-btn` markup/JS consumers remain (tm-btn-report is a separate,
   unrelated class and is untouched).

   Variant mapping (tm-btn → canonical btn):
     tm-btn               → btn
     tm-btn--sm           → btn--sm
     tm-btn--lg           → btn--lg          (added in tm-v2.css, PR-D6b)
     tm-btn--block        → btn--block       (added in tm-v2.css, PR-D6b)
     tm-btn--primary      → btn--primary
     tm-btn--secondary    → btn--secondary   (added in tm-v2.css, PR-D6b)
     tm-btn--accent       → btn--accent
     tm-btn--ghost        → btn--ghost
     tm-btn--soft-primary → btn--soft-primary (added in tm-v2.css, PR-D6b)
     tm-btn--icon         → btn--icon

   This file is intentionally left empty (rules removed) rather than
   deleted to keep the v2/v2.css @import stable. Safe to delete the
   import + file in a later cleanup PR.
   ================================================================= */

/* ==== /@import css/v2/components/buttons.css ==== */


/* ==== @import css/v2/components/cards.css ==== */
/* =================================================================
   TRENDMETRIK v2 — CARD
   .tm-card base + header / body / footer / variants.
   ================================================================= */

.tm-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-xs);
    overflow: hidden;
    transition:
      border-color var(--tm-dur-2) var(--tm-ease),
      box-shadow var(--tm-dur-2) var(--tm-ease);
}

.tm-card--flat {
    box-shadow: none;
}

.tm-card--raised {
    box-shadow: var(--tm-shadow-sm);
}

.tm-card--sunken {
    background: var(--tm-surface-sunken);
    box-shadow: none;
}

.tm-card--clickable {
    cursor: pointer;
}
.tm-card--clickable:hover {
    border-color: var(--tm-border-strong);
    box-shadow: var(--tm-shadow-sm);
}

.tm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tm-space-3);
    padding: var(--tm-space-4) var(--tm-space-5);
    border-bottom: 1px solid var(--tm-border);
}

.tm-card__title {
    font-size: var(--tm-text-base);
    font-weight: var(--tm-weight-semibold);
    color: var(--tm-text-primary);
    line-height: var(--tm-leading-snug);
}

.tm-card__subtitle {
    font-size: var(--tm-text-xs);
    color: var(--tm-text-muted);
    margin-top: 2px;
}

.tm-card__body {
    padding: var(--tm-space-5);
}

.tm-card__body--dense {
    padding: var(--tm-space-3) var(--tm-space-4);
}

.tm-card__footer {
    padding: var(--tm-space-3) var(--tm-space-5);
    border-top: 1px solid var(--tm-border);
    background: var(--tm-surface-sunken);
}

/* Quick-action / link card (dashboard shortcuts) */
.tm-card-link {
    display: flex;
    align-items: center;
    gap: var(--tm-space-4);
    padding: var(--tm-space-4) var(--tm-space-5);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-xs);
    color: var(--tm-text-primary);
    text-decoration: none;
    transition:
      border-color var(--tm-dur-2) var(--tm-ease),
      box-shadow var(--tm-dur-2) var(--tm-ease),
      transform var(--tm-dur-1) var(--tm-ease);
}

.tm-card-link:hover {
    border-color: var(--tm-brand-300);
    box-shadow: var(--tm-shadow-sm);
    transform: translateY(-1px);
    color: var(--tm-text-primary);
    text-decoration: none;
}

.tm-card-link__icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tm-radius-lg);
    background: var(--tm-brand-50);
    color: var(--tm-brand-600);
    font-size: var(--tm-text-xl);
}

.tm-card-link__icon--accent {
    background: var(--tm-accent-50);
    color: var(--tm-accent-600);
}

.tm-card-link__icon--ok {
    background: var(--tm-ok-bg);
    color: var(--tm-ok);
}

.tm-card-link__icon--info {
    background: var(--tm-info-bg);
    color: var(--tm-info);
}

.tm-card-link__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tm-card-link__title {
    font-size: var(--tm-text-sm);
    font-weight: var(--tm-weight-semibold);
    color: var(--tm-text-primary);
    line-height: var(--tm-leading-snug);
}

.tm-card-link__desc {
    font-size: var(--tm-text-xs);
    color: var(--tm-text-muted);
    line-height: var(--tm-leading-normal);
}

.tm-card-link__chevron {
    color: var(--tm-text-disabled);
    flex: none;
    transition: transform var(--tm-dur-1) var(--tm-ease), color var(--tm-dur-1) var(--tm-ease);
}

.tm-card-link:hover .tm-card-link__chevron {
    transform: translateX(2px);
    color: var(--tm-brand-500);
}

/* KPI card — compact stat tile */
.tm-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-2);
    padding: var(--tm-space-4) var(--tm-space-5);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-xs);
    min-height: 108px;
}

.tm-kpi__label {
    font-size: var(--tm-text-xs);
    font-weight: var(--tm-weight-semibold);
    color: var(--tm-text-muted);
    letter-spacing: var(--tm-tracking-wide);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--tm-space-2);
}

.tm-kpi__value {
    font-size: var(--tm-text-2xl);
    font-weight: var(--tm-weight-bold);
    color: var(--tm-text-primary);
    line-height: var(--tm-leading-tight);
    letter-spacing: var(--tm-tracking-tight);
    font-variant-numeric: tabular-nums;
}

.tm-kpi__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tm-space-3);
}

.tm-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--tm-text-xs);
    font-weight: var(--tm-weight-semibold);
    padding: 2px var(--tm-space-2);
    border-radius: var(--tm-radius-full);
    font-variant-numeric: tabular-nums;
}
.tm-kpi__delta--up   { color: var(--tm-ok);  background: var(--tm-ok-bg); }
.tm-kpi__delta--down { color: var(--tm-bad); background: var(--tm-bad-bg); }
.tm-kpi__delta--flat { color: var(--tm-text-muted); background: var(--tm-ink-100); }

.tm-kpi__caption {
    font-size: var(--tm-text-xs);
    color: var(--tm-text-muted);
}

/* ==== /@import css/v2/components/cards.css ==== */


/* ==== @import css/v2/components/forms.css ==== */
/* =================================================================
   TRENDMETRIK v2 — FORM
   .tm-field wrapper + .tm-input / .tm-select / .tm-textarea.
   ================================================================= */

.tm-field {
    display: flex;
    flex-direction: column;
    gap: var(--tm-space-2);
    min-width: 0;
}

.tm-label {
    font-size: var(--tm-text-sm);
    font-weight: var(--tm-weight-medium);
    color: var(--tm-text-secondary);
}

.tm-label--required::after {
    content: "*";
    color: var(--tm-bad);
    margin-left: 2px;
}

.tm-input,
.tm-select,
.tm-textarea {
    width: 100%;
    height: 40px;
    padding: 0 var(--tm-space-3);
    background: var(--tm-surface);
    color: var(--tm-text-primary);
    font-family: var(--tm-font-sans);
    font-size: var(--tm-text-sm);
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-md);
    transition:
      border-color var(--tm-dur-1) var(--tm-ease),
      box-shadow var(--tm-dur-1) var(--tm-ease);
}

.tm-textarea {
    height: auto;
    min-height: 96px;
    padding: var(--tm-space-3);
    line-height: var(--tm-leading-normal);
    resize: vertical;
}

.tm-input:focus,
.tm-select:focus,
.tm-textarea:focus {
    outline: none;
    border-color: var(--tm-brand-500);
    box-shadow: var(--tm-ring);
}

.tm-input[aria-invalid="true"],
.tm-select[aria-invalid="true"],
.tm-textarea[aria-invalid="true"] {
    border-color: var(--tm-bad);
}

.tm-input[aria-invalid="true"]:focus,
.tm-select[aria-invalid="true"]:focus,
.tm-textarea[aria-invalid="true"]:focus {
    box-shadow: var(--tm-ring-bad);
}

.tm-input:disabled,
.tm-select:disabled,
.tm-textarea:disabled {
    background: var(--tm-ink-100);
    color: var(--tm-text-disabled);
    cursor: not-allowed;
}

.tm-input--sm { height: 32px; font-size: var(--tm-text-xs); }
.tm-input--lg { height: 48px; font-size: var(--tm-text-base); }

.tm-help {
    font-size: var(--tm-text-xs);
    color: var(--tm-text-muted);
}

.tm-error {
    font-size: var(--tm-text-xs);
    color: var(--tm-bad);
}

/* Input with leading icon */
.tm-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.tm-input-group .tm-input {
    padding-left: var(--tm-space-10);
}

.tm-input-group__icon {
    position: absolute;
    left: var(--tm-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm-text-muted);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

/* ==== /@import css/v2/components/forms.css ==== */


/* ==== @import css/v2/components/tables.css ==== */
/* =================================================================
   TRENDMETRIK v2 — TABLE
   .tm-table — opinionated data table. Does not touch Bootstrap .table.
   ================================================================= */

.tm-table-wrap {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    overflow: hidden;
    box-shadow: var(--tm-shadow-xs);
}

.tm-table-scroll {
    overflow-x: auto;
}

.tm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tm-text-sm);
    font-family: var(--tm-font-sans);
}

.tm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tm-surface-sunken);
    color: var(--tm-text-muted);
    font-size: var(--tm-text-xs);
    font-weight: var(--tm-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tm-tracking-wide);
    padding: var(--tm-space-3) var(--tm-space-4);
    text-align: left;
    border-bottom: 1px solid var(--tm-border);
    white-space: nowrap;
}

.tm-table tbody td {
    padding: var(--tm-space-3) var(--tm-space-4);
    border-bottom: 1px solid var(--tm-border);
    color: var(--tm-text-primary);
    vertical-align: middle;
}

.tm-table tbody tr:last-child td {
    border-bottom: none;
}

.tm-table tbody tr:hover {
    background: var(--tm-surface-sunken);
}

.tm-table tbody tr[aria-selected="true"] {
    background: var(--tm-brand-50);
}

/* Density variants */
.tm-table--dense thead th { padding: var(--tm-space-2) var(--tm-space-3); }
.tm-table--dense tbody td { padding: var(--tm-space-2) var(--tm-space-3); }

/* Numeric columns */
.tm-table td.num,
.tm-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Cell helpers */
.tm-table .tm-cell-primary { font-weight: var(--tm-weight-semibold); }
.tm-table .tm-cell-muted   { color: var(--tm-text-muted); }
.tm-table .tm-cell-pos     { color: var(--tm-ok);  font-weight: var(--tm-weight-semibold); }
.tm-table .tm-cell-neg     { color: var(--tm-bad); font-weight: var(--tm-weight-semibold); }

/* Empty state row */
.tm-table__empty {
    padding: var(--tm-space-10) var(--tm-space-5);
    text-align: center;
    color: var(--tm-text-muted);
}

/* ==== /@import css/v2/components/tables.css ==== */


/* ==== @import css/v2/components/badges.css ==== */
/* =================================================================
   TRENDMETRIK v2 — BADGE
   .tm-badge — status pill, variants + optional dot.
   ================================================================= */

.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  padding: 2px var(--tm-space-2);
  border-radius: var(--tm-radius-full);
  line-height: 1.4;
  white-space: nowrap;
  font-family: var(--tm-font-sans);
}

.tm-badge--brand   { background: var(--tm-brand-50);  color: var(--tm-brand-700); }
.tm-badge--accent  { background: var(--tm-accent-50); color: var(--tm-accent-700); }
.tm-badge--ok      { background: var(--tm-ok-bg);    color: var(--tm-ok); }
.tm-badge--warn    { background: var(--tm-warn-bg);  color: var(--tm-warn); }
.tm-badge--bad     { background: var(--tm-bad-bg);   color: var(--tm-bad); }
.tm-badge--info    { background: var(--tm-info-bg);  color: var(--tm-info); }
.tm-badge--neutral { background: var(--tm-ink-100);  color: var(--tm-text-secondary); }

.tm-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex: none;
}

/* Outlined variant (use with --ok/--warn/--bad/etc.) */
.tm-badge--outline {
  background: transparent !important;
  border: 1px solid currentColor;
}

/* Size variant */
.tm-badge--sm {
  font-size: 10px;
  padding: 1px var(--tm-space-1);
}

/* ==== /@import css/v2/components/badges.css ==== */


/* ==== @import css/v2/components/kpi.css ==== */
/* =================================================================
   TRENDMETRIK v2 — KPI TILE
   Note: .tm-kpi base lives in components/cards.css. This file adds
   layout primitives used by KPI ROWS and spark variants.
   ================================================================= */

/* A row of KPI tiles — auto-fit on desktop, stacks on small */
.tm-kpi-row {
  display: grid;
  gap: var(--tm-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tm-kpi-row--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* KPI icon slot — small tinted square to the left of the label */
.tm-kpi__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tm-radius-md);
  background: var(--tm-brand-50);
  color: var(--tm-brand-600);
  flex: none;
  font-size: var(--tm-text-sm);
}

.tm-kpi__icon--accent { background: var(--tm-accent-50); color: var(--tm-accent-600); }
.tm-kpi__icon--ok     { background: var(--tm-ok-bg);     color: var(--tm-ok); }
.tm-kpi__icon--warn   { background: var(--tm-warn-bg);   color: var(--tm-warn); }
.tm-kpi__icon--bad    { background: var(--tm-bad-bg);    color: var(--tm-bad); }
.tm-kpi__icon--info   { background: var(--tm-info-bg);   color: var(--tm-info); }

/* Sparkline footprint: flush to bottom edges */
.tm-kpi__spark {
  height: 36px;
  margin: var(--tm-space-2) calc(-1 * var(--tm-space-5)) calc(-1 * var(--tm-space-4));
  display: block;
  width: calc(100% + 2 * var(--tm-space-5));
}

/* Loading skeleton — used while fetching */
.tm-kpi--skeleton .tm-kpi__value,
.tm-kpi--skeleton .tm-kpi__label {
  background: var(--tm-ink-100);
  color: transparent;
  border-radius: var(--tm-radius-sm);
  user-select: none;
}

.tm-kpi--skeleton .tm-kpi__value {
  min-height: 1.5em;
}

/* ==== /@import css/v2/components/kpi.css ==== */


/* ==== @import css/v2/components/kpi-dashboard.css ==== */
/* =================================================================
   TRENDMETRIK v2 — DASHBOARD KPI
   Standard card pattern used by the overview dashboard:
   label + info-tooltip / value / delta-badge + period.
   Cards also carry legacy .tmv2-kpi / .tmv2-metric-card so that
   existing JS (`#kpi-actual-content .tmv2-kpi` reveal animation)
   and legacy cascade hooks keep resolving.
   ================================================================= */

/* High-specificity grid selector with !important to beat legacy
   `.tmv2-kpi-actual-wrap { display: flex }` (even when JS injects
   inline styles) and anything scoped to `#kpi-actual-content` or
   `#overviewTab`. Without !important, browser cache hits can revert
   to the flex column layout. */
.tm-kpi-grid,
#kpi-actual-content.tm-kpi-grid,
#kpi-skeleton-loader.tm-kpi-grid,
#overviewTab .tm-kpi-grid {
  display: grid !important;
  gap: var(--tm-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  grid-auto-flow: row !important;
  flex-direction: unset !important;
  width: 100%;
  min-width: 0;
}

/* Opacity/visibility lifecycle is driven by DashboardSkeletonManager
   in dashboard_tabbed_main_script.html — it toggles `.is-visible` on
   #kpi-actual-content once data arrives. We rely on the existing
   rules in dashboard-ui-enhancements.css for that; adding a v2
   safety-net default would double-render with the skeleton which
   shares the same grid cell via .kpi-cards-wrapper's
   grid-template-areas: "stack". */

.tm-kpi-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tm-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--tm-space-2);
  padding: var(--tm-space-4) var(--tm-space-5);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-xl);
  box-shadow: var(--tm-shadow-xs);
  min-height: 128px;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--tm-dur-2) var(--tm-ease),
    box-shadow var(--tm-dur-2) var(--tm-ease),
    transform var(--tm-dur-1) var(--tm-ease);
}

.tm-kpi-card:hover {
  border-color: var(--tm-border-strong);
  box-shadow: var(--tm-shadow-md);
  transform: translateY(-2px);
}

/* Colored accent strip on the left edge — per-card variant */
.tm-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tm-kpi-accent, var(--tm-brand-500));
  opacity: 0;
  transition: opacity var(--tm-dur-2) var(--tm-ease);
}

.tm-kpi-card:hover::before,
.tm-kpi-card--hero::before {
  opacity: 1;
}

/* Per-card accent color via inline --tm-kpi-accent custom prop */
.tm-kpi-card[data-accent="brand"]  { --tm-kpi-accent: var(--tm-brand-500); }
.tm-kpi-card[data-accent="accent"] { --tm-kpi-accent: var(--tm-accent-500); }
.tm-kpi-card[data-accent="ok"]     { --tm-kpi-accent: var(--tm-ok); }
.tm-kpi-card[data-accent="info"]   { --tm-kpi-accent: var(--tm-info); }
.tm-kpi-card[data-accent="warn"]   { --tm-kpi-accent: var(--tm-warn); }
.tm-kpi-card[data-accent="bad"]    { --tm-kpi-accent: var(--tm-bad); }

/* Icon slot: colored square to the right of the label */
.tm-kpi-card__icon {
  position: absolute;
  top: var(--tm-space-4);
  right: var(--tm-space-5);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tm-radius-lg);
  background: color-mix(in srgb, var(--tm-kpi-accent, var(--tm-brand-500)) 12%, transparent);
  color: var(--tm-kpi-accent, var(--tm-brand-500));
  flex: none;
  pointer-events: none;
}

.tm-kpi-card__icon svg,
.tm-kpi-card__icon i {
  width: 18px;
  height: 18px;
}

/* Primary/hero variant — subtle brand tint + stronger title + permanent accent bar */
.tm-kpi-card--hero {
  background: linear-gradient(135deg, var(--tm-brand-50) 0%, var(--tm-surface) 65%);
  border-color: var(--tm-brand-200);
}

.tm-kpi-card--hero .tm-kpi-card__value {
  color: var(--tm-brand-700);
  font-size: var(--tm-text-3xl);
}

.tm-kpi-card--hero .tm-kpi-card__icon {
  background: var(--tm-brand-500);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tm-brand-500) 30%, transparent);
}

/* --- Head: label + optional info tooltip --- */
.tm-kpi-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-2);
  min-width: 0;
  padding-right: 44px; /* reserve space for absolute __icon slot */
}

.tm-kpi-card__value {
  padding-right: 44px;
}

.tm-kpi-card__label {
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-muted);
  letter-spacing: var(--tm-tracking-wide);
  text-transform: uppercase;
  line-height: var(--tm-leading-snug);
}

.tm-kpi-card__info {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-text-disabled);
  cursor: help;
  transition: color var(--tm-dur-1) var(--tm-ease);
}

.tm-kpi-card__info:hover,
.tm-kpi-card__info:focus-visible {
  color: var(--tm-brand-500);
  outline: none;
}

/* --- Value: main numeric --- */
.tm-kpi-card__value {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-2xl);
  font-weight: var(--tm-weight-bold);
  color: var(--tm-text-primary);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-tight);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

/* --- Delta row: badge + period text --- */
.tm-kpi-card__delta {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
  flex-wrap: wrap;
  margin-top: auto;
}

.tm-kpi-card__delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  padding: 2px var(--tm-space-2);
  border-radius: var(--tm-radius-full);
  font-variant-numeric: tabular-nums;
  color: var(--tm-text-muted);
  background: var(--tm-ink-100);
}

.tm-kpi-card__delta-badge svg,
.tm-kpi-card__delta-badge i {
  width: 12px;
  height: 12px;
}

.tm-kpi-card__delta-badge--up   { color: var(--tm-ok);  background: var(--tm-ok-bg); }
.tm-kpi-card__delta-badge--down { color: var(--tm-bad); background: var(--tm-bad-bg); }
.tm-kpi-card__delta-badge--flat { color: var(--tm-text-muted); background: var(--tm-ink-100); }

/* JS bridge — dashboard-kpi-badges.js toggles .positive / .negative on
   the badge. Map those class names to the v2 colors so direction is
   visible. Specificity intentionally double-class to beat the legacy
   `.tmv2-kpi .k-delta { background: var(--tmv2-success-soft) }` rule
   that colored every delta green regardless of direction. */
.tm-kpi-card__delta-badge.positive,
.tm-kpi-card .k-delta.positive,
.tmv2-kpi .k-delta.positive {
  color: var(--tm-ok) !important;
  background: var(--tm-ok-bg) !important;
}

.tm-kpi-card__delta-badge.negative,
.tm-kpi-card .k-delta.negative,
.tmv2-kpi .k-delta.negative {
  color: var(--tm-bad) !important;
  background: var(--tm-bad-bg) !important;
}

.tm-kpi-card__delta-badge.neutral,
.tm-kpi-card .k-delta.neutral,
.tmv2-kpi .k-delta.neutral {
  color: var(--tm-text-muted) !important;
  background: var(--tm-ink-100) !important;
}

.tm-kpi-card__delta-period {
  font-size: var(--tm-text-xs);
  color: var(--tm-text-muted);
}

/* Skeleton variant — preserves card footprint during load */
.tm-kpi-card--skeleton .tm-kpi-card__label,
.tm-kpi-card--skeleton .tm-kpi-card__value,
.tm-kpi-card--skeleton .tm-kpi-card__delta-badge {
  background: var(--tm-ink-100);
  color: transparent;
  border-radius: var(--tm-radius-sm);
  user-select: none;
}

.tm-kpi-card--skeleton .tm-kpi-card__label { height: 10px; width: 40%; }
.tm-kpi-card--skeleton .tm-kpi-card__value { height: 24px; width: 65%; }
.tm-kpi-card--skeleton .tm-kpi-card__delta-badge { height: 16px; width: 56px; background: var(--tm-ink-100); }

/* Responsive: dense on phones */
@media (max-width: 640px) {
  .tm-kpi-card {
    padding: var(--tm-space-3) var(--tm-space-4);
    min-height: 92px;
  }

  .tm-kpi-card__value {
    font-size: var(--tm-text-xl);
  }
}

/* ==== /@import css/v2/components/kpi-dashboard.css ==== */


/* ==== @import css/v2/components/filter-bar.css ==== */
/* =================================================================
   TRENDMETRIK v2 — FILTER BAR
   .tm-filterbar — sticky toolbar used above data tables.
   ================================================================= */

.tm-filterbar {
  display: flex;
  align-items: center;
  gap: var(--tm-space-3);
  padding: var(--tm-space-3) var(--tm-space-4);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-xl);
  box-shadow: var(--tm-shadow-xs);
  flex-wrap: wrap;
}

.tm-filterbar--sticky {
  position: sticky;
  top: var(--tm-header-h);
  z-index: var(--tm-z-sticky);
}

.tm-filterbar__label {
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tm-tracking-wide);
  margin-right: var(--tm-space-1);
}

.tm-filterbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  min-width: 0;
}

.tm-filterbar__spacer {
  flex: 1;
}

.tm-filterbar__divider {
  width: 1px;
  height: 20px;
  background: var(--tm-border);
  margin: 0 var(--tm-space-1);
}

/* Chip — toggle-style filter token */
.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  height: 28px;
  padding: 0 var(--tm-space-3);
  background: var(--tm-surface);
  color: var(--tm-text-secondary);
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-full);
  cursor: pointer;
  transition:
    background var(--tm-dur-1) var(--tm-ease),
    border-color var(--tm-dur-1) var(--tm-ease),
    color var(--tm-dur-1) var(--tm-ease);
  white-space: nowrap;
}

.tm-chip:hover {
  background: var(--tm-ink-100);
  color: var(--tm-text-primary);
}

.tm-chip[aria-pressed="true"],
.tm-chip.is-active {
  background: var(--tm-brand-50);
  color: var(--tm-brand-700);
  border-color: var(--tm-brand-200);
}

.tm-chip__close {
  margin-left: 2px;
  color: currentColor;
  opacity: .6;
  cursor: pointer;
}

.tm-chip__close:hover { opacity: 1; }

/* ==== /@import css/v2/components/filter-bar.css ==== */


/* ==== @import css/v2/components/tabs.css ==== */
/* =================================================================
   TRENDMETRIK v2 — TABS
   .tm-tabs — underline-style tab bar (Material 3 feel).
   ================================================================= */

.tm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--tm-border);
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tm-tabs::-webkit-scrollbar { display: none; }

.tm-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  min-height: 44px; /* guaranteed touch target (WCAG 2.5.5) across all tabbed pages */
  padding: var(--tm-space-3) var(--tm-space-4);
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--tm-dur-1) var(--tm-ease),
    border-color var(--tm-dur-1) var(--tm-ease),
    background var(--tm-dur-1) var(--tm-ease);
}

.tm-tab:hover {
  color: var(--tm-text-primary);
  background: var(--tm-ink-100);
}

.tm-tab:focus-visible {
  outline: none;
  box-shadow: var(--tm-ring);
  border-radius: var(--tm-radius-sm);
}

.tm-tab[aria-selected="true"],
.tm-tab.is-active {
  color: var(--tm-brand-600);
  border-bottom-color: var(--tm-brand-500);
  font-weight: var(--tm-weight-semibold);
}

.tm-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 18px;
  padding: 0 var(--tm-space-1);
  font-size: 10px;
  font-weight: var(--tm-weight-semibold);
  background: var(--tm-ink-100);
  color: var(--tm-text-secondary);
  border-radius: var(--tm-radius-full);
}

.tm-tab[aria-selected="true"] .tm-tab__count,
.tm-tab.is-active .tm-tab__count {
  background: var(--tm-brand-100);
  color: var(--tm-brand-700);
}

/* Panel content under tabs */
.tm-tab-panel {
  padding-top: var(--tm-space-4);
}

.tm-tab-panel[hidden] {
  display: none;
}

/* ==== /@import css/v2/components/tabs.css ==== */


/* ==== @import css/v2/components/empty-state.css ==== */
/* =================================================================
   TRENDMETRIK v2 — EMPTY STATE
   .tm-empty — zero-data placeholder: icon + title + desc + action.
   .tm-error — same layout, danger-tinted icon: data FAILED to load
   (distinct from "no data"). Unscoped (no .tm-ds ancestor needed) so it
   works on every page that already uses .tm-empty (ds-states.css has a
   .tm-ds-scoped twin for DS-shell pages; this is the non-DS twin —
   2026-09-23, UI-audit G: state-matrix ölçümü hata=boş-mesaj çakışmasını
   4 sayfada bulду, kök buydu: .tm-error yalnız .tm-ds altında var).
   ================================================================= */

.tm-empty,
.tm-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--tm-space-12) var(--tm-space-5);
  color: var(--tm-text-muted);
  gap: var(--tm-space-3);
}

.tm-empty--compact,
.tm-error--compact {
  padding: var(--tm-space-6) var(--tm-space-4);
}

.tm-empty__icon,
.tm-error__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tm-radius-full);
  background: var(--tm-ink-100);
  color: var(--tm-text-disabled);
}

.tm-error__icon {
  background: var(--tm-danger-bg, #fdecea);
  color: var(--tm-danger-fg, #dc3545);
}

.tm-empty__title,
.tm-error__title {
  font-size: var(--tm-text-base);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
  margin: 0;
}

.tm-empty__desc,
.tm-error__desc {
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
  max-width: 360px;
  line-height: var(--tm-leading-normal);
  margin: 0;
}

.tm-empty__actions,
.tm-error__actions {
  display: inline-flex;
  gap: var(--tm-space-2);
  margin-top: var(--tm-space-2);
}

/* ── CİLA 2026-07-28: giriş animasyonu + ikon float + marka varyantı ──
   Additive: mevcut tüm .tm-empty kullanımları otomatik olarak yumuşak bir
   giriş + hafif yüzen ikon kazanır → sayfalar-arası tutarlı, animasyonlu
   boş-durum. Çıplak "veri yok" placeholder'ları bununla değiştir. */
.tm-empty,
.tm-error {
  justify-content: center;
  min-height: 200px;
  white-space: normal;
  animation: tmEmptyIn .45s cubic-bezier(.22, .61, .36, 1) both;
}
/* Tablo hücresi içinde (colspan td) tam-genişlik + ortalı kalsın */
td > .tm-empty, td > .tm-error { width: 100%; }
.tm-empty__desc, .tm-error__desc { white-space: normal; }
.tm-empty__icon,
.tm-error__icon {
  width: 60px;
  height: 60px;
  animation: tmEmptyFloat 3.2s ease-in-out infinite;
}
.tm-empty__icon svg,
.tm-empty__icon [data-lucide],
.tm-error__icon svg,
.tm-error__icon [data-lucide] {
  width: 28px;
  height: 28px;
}
/* Marka-tint varyant: nötr gri yerine yumuşak mavi daire (vurgulu boş-durum) */
.tm-empty--brand .tm-empty__icon {
  background: var(--tm-primary-soft, #e8f3ff);
  color: var(--tm-primary, #0175e4);
}
@keyframes tmEmptyIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tmEmptyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-empty,
  .tm-empty__icon,
  .tm-error,
  .tm-error__icon { animation: none; }
}

/* ── .tm-live-empty GLOBAL stil 2026-07-28 ──
   Vanilla-chart boş-durumu (tm-vanilla-dashboard-charts.js: donut/ranking
   "Henüz satış yok" vb.) .tm-live-empty basar; bu sınıf ÖNCEDEN yalnız
   live-dashboard.css'te tanımlıydı → o CSS yalnız Canlı Performans'ta yüklü
   olduğundan Genel Bakış vb. sayfalarda STİLSİZ/çıplak kalıyordu. Burada
   global (base.html) tanımla → her sayfada tutarlı + animasyonlu. */
.tm-live-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--tm-space-2, 8px);
  padding: var(--tm-space-8, 32px) var(--tm-space-4, 16px);
  min-height: 180px;
  color: var(--tm-text-muted);
  animation: tmEmptyIn .45s cubic-bezier(.22, .61, .36, 1) both;
}
.tm-live-empty svg,
.tm-live-empty [data-lucide] {
  width: 48px;
  height: 48px;
  color: var(--tm-text-disabled, #94a3b8);
  margin-bottom: var(--tm-space-1, 4px);
  animation: tmEmptyFloat 3.2s ease-in-out infinite;
}
.tm-live-empty__title {
  font-size: var(--tm-text-base, 1rem);
  font-weight: var(--tm-weight-semibold, 600);
  color: var(--tm-text-primary);
}
.tm-live-empty__hint {
  font-size: var(--tm-text-sm, .875rem);
  color: var(--tm-text-muted);
  max-width: 320px;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .tm-live-empty,
  .tm-live-empty svg { animation: none; }
}

/* ==== /@import css/v2/components/empty-state.css ==== */


/* ==== @import css/v2/components/sidebar.css ==== */
/* =================================================================
   TRENDMETRIK v2 — SIDEBAR (canonical, consolidated)
   =================================================================
   Single source of truth for the v2 operator-panel sidebar.
   2026-07-09: KÖKTEN YENİDEN YAZILDI — tek karanlık tema (dark-first),
   katman karmaşası yok, !important sadece legacy kaçaklara.

   Load order (base_head_v2_links.html):
     … → tm-shell-v2.css (shell: fixed/drawer/backdrop positioning,
         size, 100dvh height, mobile transform) →
     tm-sidebar-v2-host-override.css (thin shim) →
     v2/v2.css → v2/components/sidebar.css  (THIS FILE, loaded LAST)

   Sidebar HER app-temada KOYU KALIR: #0e1420 zemin.
   html.dark-mode sadece çok ufak bir lacivert varyant ekler.

   DOM (templates/includes/sidebar_v2.html + sidebar.html):
     aside#tmv2SidebarRoot.tmv2-sidebar
       .tmv2-brand / .tmv2-workspace
       .tmv2-sidebar-body
         #sidebar.sidebar--v2-host
           .sidebar-header (mobile close only)
           nav.sidebar-nav.tmv2-sidebar-nav
             .tmv2-nav-section > .tmv2-nav-section-label
             a.tmv2-nav-item.nav-link[.active]
             .nav-group[.expanded] > button.nav-group-header + .nav-group-content
               a.tmv2-nav-item.nav-sublink[.active]
       .tmv2-pro-card (footer)
   ================================================================= */

/* =================================================================
   §0  TASARIM TOKENLARI — kılavuz rail dili (2026-10-08)
       Kaynak: static/css/tm-satis-ipuclari.css §2a "SOL RAY"
       (.k-rail / .k-spine / .k-node / .k-gauge).

       🔴 TEK KAYNAK. Sol ray'in rengi, tipografisi ve aktif durumu
       YALNIZ bu dosyada tanımlanır. ds-shell.css, tm-shell-v2.css,
       tm-v2-reference-chrome.css ve global.css'teki rakip kurallar
       2026-10-08'de kaldırıldı — geri eklenmez.

       NEDEN (ölçüldü 2026-10-08, gerçek çizilmiş DOM):
         • Aynı ray ÜÇ farklı zemin veriyordu: #12161f (tm-ds sayfaları),
           #0f1622 (diğerleri), XML Sync koyu temada tamamen SAYDAM.
         • Abonelik kartı İKİ ayrı görünümdeydi: turuncu gradyan blok
           (tm-shell-v2) ↔ saydam düz satır (ds-shell).
         • Menünün %37'si (943px içerikten 351px) ekran dışındaydı ve
           kaydırma çubuğu gizli olduğu için hiçbir ipucu yoktu.
   ================================================================= */

#tmv2SidebarRoot.tmv2-sidebar {
  /* ---- Marka (tm-satis-ipuclari.css :root ile BİREBİR aynı değerler) ---- */
  /* 2026-10-09 (kullanıcı: "sidebar biraz daha koyu olmalı"): #031538/#0a2250 →
     daha koyu lacivert. Metin tonları (--tmv2-nav-*) daha koyu zeminde daha
     yüksek kontrast verir; AA eşikleri tarayıcı testiyle ölçülüyor. */
  /* 2026-10-09 TUR 2 (kullanıcı: "daha koyu olması lazım"): neredeyse siyah
     lacivert; gradyan durakları da koyu (eski orta durak #051b45 alt yarıyı
     açık maviye çekiyordu). */
  --tmv2-lacivert:      #010814;
  --tmv2-lacivert-2:    #03142a;
  --tmv2-mavi:          #0175e4;
  --tmv2-mavi-acik:     #73b7fe;
  --tmv2-turuncu:       #f27a1a;

  /* ---- Yüzey ---- */
  --tmv2-sidebar-bg:    var(--tmv2-lacivert);
  --tmv2-sidebar-bg-2:  var(--tmv2-lacivert-2);
  --tmv2-sidebar-border: rgba(255, 255, 255, .07);
  --tmv2-dot-bg:        #0a1a33;   /* ikon dairesi zemini (.k-node__dot) */

  /* ---- Mürekkep — kontrast #031538 üstünde ÖLÇÜLDÜ (AA ≥4,5) ---- */
  /* 2026-10-09 (kullanıcı: "yazılar belli olmuyor, butonlar sönük"): pasif
     etiket ve ikon tonları açıldı; daha koyu zeminde (#020c22) kontrast daha da
     yüksek. Kicker/bölüm başlığı hâlâ bir kademe soluk (hiyerarşi korunur). */
  --tmv2-nav-kicker:    #aebfd8;   /* bölüm başlığı · rozet       — ≥ 10:1 */
  --tmv2-nav-ink:       #eef3fa;   /* pasif etiket (tur 2: "yazılar belli olmuyor") — ≥ 18:1 */
  --tmv2-nav-hover-ink: #ffffff;   /* hover · alt-link            — 20:1   */
  --tmv2-nav-active-ink:#ffffff;   /* aktif etiket                — 18:1   */
  --tmv2-nav-icon:      #d6e0ee;   /* pasif ikon — etikete yakın, bir kademe soluk */
  --tmv2-nav-sub-ink:   #d0dbea;
  --tmv2-nav-muted:     var(--tmv2-nav-kicker);

  /* ---- Çizgi / dolgu ---- */
  --tmv2-nav-line:      rgba(255, 255, 255, .10);   /* omurga (.k-spine) */
  --tmv2-nav-line-2:    rgba(255, 255, 255, .14);   /* daire çerçevesi */
  --tmv2-nav-hover-bg:  rgba(255, 255, 255, .08);
  --tmv2-nav-active-bg: rgba(255, 255, 255, .11);   /* tur 2: "butonlar belli olmuyor" */
  --tmv2-nav-active-bg-hover: rgba(255, 255, 255, .085);

  /* ---- Geometri ---- */
  --tmv2-nav-row-h:       34px;
  --tmv2-nav-dot:         24px;   /* ikon dairesi çapı */
  --tmv2-nav-icon-slot:   var(--tmv2-nav-dot);
  --tmv2-nav-gap:         11px;
  --tmv2-nav-h-pad:       10px;
  --tmv2-nav-radius:      10px;
  --tmv2-nav-margin-x:    6px;
  --tmv2-nav-sub-row-h:   28px;
  --tmv2-nav-spine-x:     22px;   /* = h-pad + dot/2 → daire merkezi */

  /* ---- Tipografi: ALTI basamaklı ölçek, başka boyut yok ----
     8,5 rozet · 9,5 kicker/bölüm · 11 meta/alt-link · 12,5 etiket/CTA
     · 17 gün sayısı · 18 mağaza adı                                     */
  /* 2026-10-09 (kullanıcı: "yazı tipi sitedeki yazı tipiyle aynı olmalı"):
     ray artık sitenin gövde ailesini (--tm-font-sans = Inter) kullanır; ayrı
     marka aileleri (Unbounded/Manrope) rayda KULLANILMAZ — onlar yalnız Satış
     İpuçları kılavuzunda kalır (tm-fonts.css yüklü kalmaya devam eder). */
  --tmv2-ff-display: var(--tm-font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
  --tmv2-ff-body:    var(--tm-font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
  --tmv2-fs-rozet:   8.5px;
  --tmv2-fs-kicker:  9.5px;
  --tmv2-fs-meta:    11px;
  --tmv2-fs-etiket:  12.5px;
  --tmv2-fs-gun:     17px;
  --tmv2-fs-baslik:  18px;

  --tmv2-hiz: cubic-bezier(.22, .9, .22, 1);
  --tmv2-yay: cubic-bezier(.34, 1.4, .5, 1);
}

/* =================================================================
   §1  YÜZEY — lacivert gradyan + köşe ışığı + gren (.k-rail)
       Ray HER temada ve HER sayfada AYNI. Tema sayfayı değiştirir,
       ray'i değiştirmez.
   ================================================================= */

#tmv2SidebarRoot.tmv2-sidebar {
  isolation: isolate;
  overflow: hidden;              /* kaydırma yalnız .sidebar-nav'da */
  /* `background-color` AYRI yazılır: gradyan `background-image`'tir ve tek
     başına renk kanalını saydam bırakır → gradyan çizilmezse (forced-colors,
     eski tarayıcı) ray saydam kalır ve metin sayfa zeminine düşerdi. */
  background-color: var(--tmv2-sidebar-bg);
  background-image: linear-gradient(168deg,
                    var(--tmv2-lacivert) 0%,
                    #02101f 52%,
                    var(--tmv2-lacivert-2) 100%);
  border-right: 1px solid var(--tmv2-sidebar-border);
  box-shadow: none;
  padding: 22px 10px 14px;
  gap: 0;
  font-family: var(--tmv2-ff-body);
}

#tmv2SidebarRoot.tmv2-sidebar::before {        /* köşe ışığı (.k-rail::before) */
  content: "";
  position: absolute;
  inset: -16% -46% auto -40%;
  height: 46%;
  background: radial-gradient(ellipse at 34% 0%, rgba(1, 117, 228, .40), transparent 64%);
  z-index: -2;
  pointer-events: none;
}
#tmv2SidebarRoot.tmv2-sidebar::after {         /* gren dokusu (.k-rail::after) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .05;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
}

/* İç kaplar saydam — ray yüzeyini miras alır.
   `!important`: mobile-responsive.css / global.css beyaz dolgularını yener. */
#tmv2SidebarRoot .tmv2-sidebar-body,
#tmv2SidebarRoot #sidebar,
#tmv2SidebarRoot #sidebar.sidebar,
#tmv2SidebarRoot #sidebar.sidebar--v2-host,
#tmv2SidebarRoot #sidebar .sidebar-header,
#tmv2SidebarRoot #sidebar .sidebar-nav,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav,
#tmv2SidebarRoot #sidebar .tmv2-nav-section,
#tmv2SidebarRoot #sidebar .nav-group,
#tmv2SidebarRoot #sidebar .nav-group-content {
  background: transparent !important;
}

#tmv2SidebarRoot .tmv2-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tmv2SidebarRoot #sidebar,
#tmv2SidebarRoot #sidebar.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Nav: tek kaydırma bölgesi; çubuk gizli.
   Alt kenarda yumuşama = "aşağıda daha var" sinyali. Gizli kaydırma
   çubuğuyla birlikte eskiden HİÇBİR ipucu yoktu (ölçüldü: 351px gizli). */
#tmv2SidebarRoot #sidebar .sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 0 10px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
#tmv2SidebarRoot #sidebar .sidebar-nav::-webkit-scrollbar { display: none; }

/* Legacy masaüstü daraltma düğmesi: gizli. */
#tmv2SidebarRoot #sidebar .sidebar-toggle { display: none !important; }

/* =================================================================
   §2  MENÜ SATIRI = kılavuzun .k-node'u
       numaralı daire → ikon dairesi · ince çizgi → omurga parçası
   ================================================================= */

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-group-header,
#tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-header {
  /* --- <button> tarayıcı varsayılanı sıfırlama --- */
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-etiket);
  font-weight: 600;
  width: 100%;
  background: transparent;
  color: inherit;
  /* --- geometri: <a> ve <button> özdeş --- */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--tmv2-nav-gap) !important;
  min-height: var(--tmv2-nav-row-h) !important;
  margin: 1px var(--tmv2-nav-margin-x);
  padding: 0 var(--tmv2-nav-h-pad) !important;
  border: none !important;
  border-radius: var(--tmv2-nav-radius);
  box-sizing: border-box;
  text-decoration: none;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color .18s var(--tmv2-hiz), color .18s var(--tmv2-hiz);
  cursor: pointer;
}

/* OMURGA (.k-spine): yalnız ARDIŞIK iki satır arasında çizilir.
   Bölüm başlığı (`.tmv2-nav-section`) araya girince kardeş zinciri kırılır
   ve çizgi kendiliğinden kesilir — ekstra kural gerekmez. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item + .tmv2-nav-item::before,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-group + .tmv2-nav-item::before {
  content: "";
  position: absolute;
  left: calc(var(--tmv2-nav-spine-x) - 1px);
  bottom: 50%;
  width: 2px;
  height: 36px;              /* önceki satırın daire merkezine ulaşır */
  border-radius: 2px;
  background: var(--tmv2-nav-line);
  z-index: 0;
  pointer-events: none;
}

/* Alt linkler (akordeon çocukları). */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tmv2-nav-sub-row-h);
  margin: 0 var(--tmv2-nav-margin-x);
  padding: 0 10px 0 34px;
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-meta);
  font-weight: 600;
  text-decoration: none;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color .18s var(--tmv2-hiz), color .18s var(--tmv2-hiz);
}
/* Alt link: omurga devam eder + küçük düğüm noktası. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink::before {
  content: "";
  position: absolute;
  left: calc(var(--tmv2-nav-spine-x) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tmv2-nav-line);
  border-radius: 0;
  pointer-events: none;
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink::after {
  content: "";
  position: absolute;
  left: calc(var(--tmv2-nav-spine-x) - 3px);
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22365c;
  box-shadow: 0 0 0 2px var(--tmv2-lacivert);
  pointer-events: none;
}

/* 🔴 ALT-LİNK İKONU OMURGA NOKTASIYLA ÇAKIŞIYORDU (2026-10-14, kullanıcı
   ekran görüntüsü: *"ikonun üzerinde bir şey var"*). Alt linklerde 12 px'lik
   ikon (w-3 h-3) tam omurga noktasının (::after, 6 px, aktifte turuncu)
   üstüne biniyordu → "turuncu kutu + bir şey" görünümü. Ölçüldü canlıda:
   nokta link-içi 19–25 px, ikon 14 px'ten başlıyordu. İkon 14 px'e çıkar,
   noktayı geçecek kadar sağa alınır; sıra: nokta · ikon · metin. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink > svg,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink > i,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink > img {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  margin-inline-start: 12px;
  opacity: .92;
}

/* =================================================================
   §3  İKON DAİRESİ (.k-node__dot) — 24px, lacivert dolgu, ince çerçeve
   ================================================================= */

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-icon,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link .nav-icon,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-group-header .nav-icon,
#tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-header .nav-icon {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--tmv2-nav-dot) !important;
  width: var(--tmv2-nav-dot) !important;
  min-width: var(--tmv2-nav-dot) !important;
  height: var(--tmv2-nav-dot) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50%;
  background: var(--tmv2-dot-bg);
  border: 1.5px solid var(--tmv2-nav-line-2);
  color: var(--tmv2-nav-icon);
  transform: none;
  transition: background .3s var(--tmv2-yay), border-color .3s var(--tmv2-yay),
              box-shadow .3s var(--tmv2-yay), transform .3s var(--tmv2-yay);
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-icon svg,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-icon i,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-icon img {
  display: block;
  flex: none;
  width: 12.5px !important;
  height: 12.5px !important;
  stroke-width: 2.1;
}

/* =================================================================
   §4  ETİKET (.k-node__name) — tek satır, ellipsis
   ================================================================= */

#tmv2SidebarRoot #sidebar .nav-label {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-etiket);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--tmv2-nav-ink);
  transition: color .2s var(--tmv2-hiz);
}

/* =================================================================
   §5  SAĞ TARAF — rozet / kilit / chevron
   ================================================================= */

#tmv2SidebarRoot #sidebar .nav-arrow {
  flex: none;
  flex-shrink: 0;
  width: 16px;
  min-width: 16px;
  margin-left: auto;
  background: transparent;
  box-shadow: none;
  color: var(--tmv2-nav-kicker);
  transition: transform .15s ease;
}
#tmv2SidebarRoot #sidebar .nav-group.expanded > .nav-group-header .nav-arrow {
  transform: rotate(180deg);
}

/* ROZET — TEK stil. Eskiden sayı / "Yeni" / "AI" / "beta" / "Kanal bağla"
   hepsi dolu mavi pill'di; artık hepsi aynı ince çerçeve. */
#tmv2SidebarRoot .tmv2-nav-badge {
  position: relative;
  z-index: 1;
  flex: none;
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  min-width: 0;
  padding: 0 7px;
  border-radius: 999px;
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-rozet);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .20);
  color: var(--tmv2-nav-kicker);
}

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav [data-lucide="lock"],
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav i.lucide-lock {
  flex: none;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--tmv2-nav-kicker);
}

/* =================================================================
   §6  PASİF RENKLER
   ================================================================= */

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link:not(.active) .nav-label,
#tmv2SidebarRoot #sidebar .nav-group-header:not(.admin-accordion) .nav-label {
  color: var(--tmv2-nav-ink);
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link:not(.active) .nav-icon,
#tmv2SidebarRoot #sidebar .nav-group-header .nav-icon {
  color: var(--tmv2-nav-icon);
}
/* `!important`: global.css `.nav-sublink { color:#6b6b6b !important }`. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink:not(.active) {
  color: var(--tmv2-nav-sub-ink) !important;
}

/* Yönetici akordeonu: ray diliyle uyumlu yumuşak kızıl. */
#tmv2SidebarRoot #sidebar .nav-group-header.admin-accordion .nav-label { color: #d98f8f; }

/* Çıkış: alarm kırmızısı değil, sessiz ikincil eylem. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-link.logout .nav-label,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-link.logout .nav-icon {
  color: #8b96a8;
}

/* =================================================================
   §7  HOVER (.k-node:hover)
   ================================================================= */

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link:not(.active):hover,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink:not(.active):hover,
#tmv2SidebarRoot #sidebar .nav-group-header:not(.admin-accordion):hover {
  background: var(--tmv2-nav-hover-bg) !important;
  transform: none !important;
  box-shadow: none !important;
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link:not(.active):hover .nav-label {
  color: var(--tmv2-nav-hover-ink);
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link:not(.active):hover .nav-icon {
  border-color: rgba(255, 255, 255, .26);
  color: var(--tmv2-nav-hover-ink);
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink:not(.active):hover {
  color: var(--tmv2-nav-hover-ink) !important;
}
#tmv2SidebarRoot #sidebar .nav-group-header.admin-accordion:hover {
  background: rgba(217, 143, 143, .10) !important;
}
#tmv2SidebarRoot #sidebar .nav-link.logout:hover {
  background: rgba(139, 150, 168, .12) !important;
}
#tmv2SidebarRoot #sidebar .nav-link.logout:hover .nav-label,
#tmv2SidebarRoot #sidebar .nav-link.logout:hover .nav-icon {
  color: #c1cbda;
}

/* =================================================================
   §8  AKTİF (.k-node.is-active) — TURUNCU DOLU DAİRE
       "Buradasın" sinyali TEK: turuncu daire + beyaz kalın etiket.
       Eski mavi 3px sol çubuk ve mavi pill KALDIRILDI (iki yarışan
       gösterge vardı). global.css'teki mavi ::before çubuğu da
       2026-10-08'de ray'in dışına alındı.
   ================================================================= */

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link.active {
  background: var(--tmv2-nav-active-bg) !important;
  color: var(--tmv2-nav-active-ink) !important;
  border: none !important;
  border-left: none !important;
  padding-left: var(--tmv2-nav-h-pad) !important;
  box-shadow: none !important;
  transform: none !important;
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link.active:hover {
  background: var(--tmv2-nav-active-bg-hover) !important;
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link.active .nav-icon {
  background: var(--tmv2-turuncu);
  border-color: var(--tmv2-turuncu);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(242, 122, 26, .20);
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link.active .nav-label {
  color: var(--tmv2-nav-active-ink);
  font-weight: 800;
}

/* Aktif alt link: düğüm noktası turuncu. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink.active {
  background: var(--tmv2-nav-active-bg) !important;
  color: var(--tmv2-nav-active-ink) !important;
  font-weight: 700;
  box-shadow: none !important;
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink.active:hover {
  background: var(--tmv2-nav-active-bg-hover) !important;
}
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-sublink.active::after {
  background: var(--tmv2-turuncu);
  box-shadow: 0 0 0 2px var(--tmv2-lacivert), 0 0 0 5px rgba(242, 122, 26, .18);
}

/* =================================================================
   §9  AKORDEON — aç/kapa
   ================================================================= */

#tmv2SidebarRoot #sidebar .nav-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#tmv2SidebarRoot #sidebar .nav-group:not(.expanded) .nav-group-content {
  max-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-content {
  max-height: none !important;
  overflow: visible !important;
  padding: 2px 0 4px !important;
}
#tmv2SidebarRoot #sidebar .nav-group.expanded > .nav-group-header:not(.admin-accordion) {
  background: var(--tmv2-nav-hover-bg) !important;
}
#tmv2SidebarRoot #sidebar .nav-group.expanded > .nav-group-header:not(.admin-accordion) .nav-label {
  color: var(--tmv2-nav-hover-ink);
}

/* =================================================================
   §10  BÖLÜM BAŞLIKLARI (.k-rail__kicker) — 9,5px, .2em, büyük harf
   ================================================================= */

#tmv2SidebarRoot .tmv2-nav-section {
  margin: 0;
  padding: 0;
}
#tmv2SidebarRoot .tmv2-nav-section--spaced { margin-top: 0; }
#tmv2SidebarRoot .tmv2-nav-section-label {
  margin: 0;
  /* 12/7 dikey ritim. ÖLÇÜLDÜ 2026-10-08: 18/8 iken 1440×900'de nav taşması
     134px'ti; beş bölüm başlığında 6'şar px + nav üst dolgusunda 4px kısaltma
     taşmayı 110px kapısının altına indiriyor (duman testi eşiği). */
  padding: 10px 12px 7px;   /* tur 2: marka↔mağaza payı için 2 px/bölüm (5 bölüm) geri alındı */
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tmv2-nav-kicker);
}
#tmv2SidebarRoot .tmv2-nav-section:first-of-type .tmv2-nav-section-label {
  padding-top: 4px;
}

/* =================================================================
   §11  BAŞ BLOĞU — kicker + Unbounded başlık + durum satırı
        Kaynak: .k-rail__kicker / .k-rail__title / .k-rail__sub

        ÖNCE iki ayrı kimlik üst üsteydi: logo satırı ("trendmetrik") ve
        hemen altında kutulu mağaza kartı. Artık TEK blok:
          TRENDMETRİK (kicker) → Mağaza adı (başlık) → durum (alt satır).
   ================================================================= */

#tmv2SidebarRoot .tmv2-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 8px;   /* tur 2: "TRENDMETRİK ile mağaza adı hâlâ çok yakın" → net boşluk + ayırıcı */
  min-height: 0;
}
#tmv2SidebarRoot .tmv2-brand-link {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
#tmv2SidebarRoot .tmv2-brand-link:hover { text-decoration: none; }
#tmv2SidebarRoot .tmv2-brand-mark {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: none;
  opacity: .95;
}
#tmv2SidebarRoot .tmv2-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
#tmv2SidebarRoot .tmv2-brand-kicker {
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-kicker);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tmv2-nav-kicker);
}

/* =================================================================
   §12  MAĞAZA BLOĞU — kutu yok; kılavuzun başlık + alt satırı
   ================================================================= */

#tmv2SidebarRoot .tmv2-workspace {
  position: relative;            /* açılır menü için gerekli */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);   /* marka ↔ mağaza ayrımı (tur 2: daha görünür çizgi) */
  cursor: pointer;
}
#tmv2SidebarRoot .tmv2-workspace--readonly { cursor: default; }
#tmv2SidebarRoot .tmv2-workspace:hover,
#tmv2SidebarRoot .tmv2-workspace--readonly:hover { background: transparent; }

#tmv2SidebarRoot .tmv2-wk-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  background: linear-gradient(140deg, var(--tmv2-mavi), #0b3f86);
  font-family: var(--tmv2-ff-display);
  font-size: var(--tmv2-fs-meta);
  font-weight: 700;
  color: #fff;
}
#tmv2SidebarRoot .tmv2-wk-info { flex: 1; min-width: 0; }
#tmv2SidebarRoot .tmv2-wk-name {
  font-family: var(--tmv2-ff-display);
  font-size: var(--tmv2-fs-baslik);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;   /* Inter için; -.05em Unbounded içindi */
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
}
#tmv2SidebarRoot .tmv2-wk-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--tmv2-fs-meta);
  line-height: 1.4;
  color: var(--tmv2-nav-kicker);
}
/* Bağlantı durumu noktası — metnin yanında, renk tek sinyal DEĞİL
   (metin zaten "N pazaryeri bağlı" / "Pazaryeri bağlanmadı" diyor). */
#tmv2SidebarRoot .tmv2-wk-meta::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tmv2-mavi-acik);
  box-shadow: 0 0 0 3px rgba(115, 183, 254, .16);
}
#tmv2SidebarRoot .tmv2-wk-chev { color: var(--tmv2-nav-kicker); align-self: center; }

/* Mağaza değiştirici açılır menüsü. */
#tmv2SidebarRoot .tmv2-wk-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: none;
  padding: var(--tmv2-sp-2, 6px);
  border-radius: var(--tmv2-r-lg, 12px);
  background: var(--tmv2-lacivert-2);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  z-index: var(--tmv2-z-dropdown, 1100);
}
#tmv2SidebarRoot .tmv2-workspace.open .tmv2-wk-menu { display: block; }
#tmv2SidebarRoot .tmv2-wk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--tmv2-nav-ink);
}
#tmv2SidebarRoot .tmv2-wk-item:hover { background: var(--tmv2-nav-hover-bg); color: #fff; }
#tmv2SidebarRoot .tmv2-wk-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tmv2-nav-kicker);
}
#tmv2SidebarRoot .tmv2-wk-item.active .dot { background: var(--tmv2-turuncu); }
#tmv2SidebarRoot .tmv2-wk-item .nm { font-size: var(--tmv2-fs-etiket); font-weight: 700; }
#tmv2SidebarRoot .tmv2-wk-item .sub { font-size: var(--tmv2-fs-meta); color: var(--tmv2-nav-kicker); }
#tmv2SidebarRoot .tmv2-wk-sep { height: 1px; background: var(--tmv2-nav-line); margin: 4px 2px; }
#tmv2SidebarRoot .tmv2-wk-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--tmv2-fs-etiket);
  font-weight: 700;
  color: var(--tmv2-mavi-acik);
}
#tmv2SidebarRoot .tmv2-wk-add:hover { background: var(--tmv2-nav-hover-bg); }

/* =================================================================
   §13  SIDEBAR HEADER — mobile close button only.
        `!important` beats mobile-responsive.css
        `#sidebar.sidebar .sidebar-header { background:#fff !important;
         min-height:70px !important }` at ≤1024px.
   ================================================================= */

#tmv2SidebarRoot #sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#tmv2SidebarRoot #sidebar .mobile-sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 4px 6px 0 auto;
  background: transparent;
  border: none;
  border-radius: var(--tmv2-nav-radius);
  color: var(--tmv2-nav-icon);
  cursor: pointer;
}

#tmv2SidebarRoot #sidebar .mobile-sidebar-close:hover {
  background: var(--tmv2-nav-hover-bg);
  color: var(--tmv2-nav-hover-ink);
}

@media (max-width: 1024px) {
  #tmv2SidebarRoot #sidebar .mobile-sidebar-close { display: inline-flex; }
  /* 🔴 ÇEKMECE ÜST ÇUBUĞUN ALTINDA KALIYORDU (2026-10-09, canlı 390 px ölçümü):
     açık çekmece z-index 1035 (--tm-z-sidebar) < yapışkan üst çubuk 1040
     (--tm-z-header-sticky) → marka + mağaza bloğu (0–83 px) üst çubuğun
     (0–61 px) ALTINDA, ~40 px kesik. Açıkken çekmece üst çubuğun ÜSTÜNE çıkar
     (1048: başlık açılır menüsü 1045'in üstünde, modal perdesi 1050 / modal
     1055'in ALTINDA — tm-z-layers.css sözleşmesi korunur). Kapatma düğmesi
     çekmecenin kendi başlığında (.mobile-sidebar-close), hamburger'a ihtiyaç yok. */
  #tmv2SidebarRoot.tmv2-sidebar:has(#sidebar.mobile-open) { z-index: 1048; }
}

/* =================================================================
   §14  SIDEBAR SEARCH — inline search kutusu (dark zemin).
   ================================================================= */

.tmv2-sidebar-search {
  position: relative;
  margin: 0 12px 6px;
  flex-shrink: 0;
}

.tmv2-sidebar-search__icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tmv2-nav-muted);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tmv2-sidebar-search__input {
  width: 100%;
  padding: 5px 8px 5px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--tmv2-nav-radius);
  color: var(--tmv2-nav-ink);
  font-family: var(--tmv2-ff-sans, "Inter", system-ui, sans-serif);
  font-size: 12px;
  outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
  box-sizing: border-box;
}

.tmv2-sidebar-search__input::placeholder { color: var(--tmv2-nav-muted); }

.tmv2-sidebar-search__input:focus {
  border-color: var(--tmv2-nav-active-bar-color);
  background: rgba(1, 117, 228, 0.08);
}

.tmv2-sidebar-search__input::-webkit-search-cancel-button { display: none; }

/* =================================================================
   §15  "Canlı Performans" live pulse dot.
        Pinned right via position:absolute — never reflows the label.
   ================================================================= */

.tm-nav-live { position: relative; }
.tm-nav-live .nav-label { padding-right: 18px; }

.tm-nav-live__pulse {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  pointer-events: none;
}

.tm-nav-live__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: tmNavLivePulse 1.6s ease-out infinite;
}

.tm-nav-live.active .tm-nav-live__pulse::after { animation-duration: 1s; }

@keyframes tmNavLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tm-nav-live__pulse::after { animation: none; box-shadow: none; }
}

/* =================================================================
   §16  AI MÜŞTERI ASİSTANI — marka mavi butonu.
        Sol hizası tüm diğer nav-item'larla aynı.
        Routing/gating değişmedi.
   ================================================================= */

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tm-nav-ai.tmv2-nav-item.nav-link {
  position: relative;
  /* Marka mavisi dolgu; border-left aktif bar YOK (renkli bg yeterli). */
  background: #0175e4 !important;
  border-left: none !important;
  padding-left: var(--tmv2-nav-h-pad) !important;
  border-radius: 12px !important;
  margin: 3px var(--tmv2-nav-margin-x) !important;
  animation: tmNavAiPulse 2.8s ease-out infinite;
}

#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tm-nav-ai.tmv2-nav-item.nav-link .nav-label,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tm-nav-ai.tmv2-nav-item.nav-link .nav-icon {
  color: #ffffff !important;
}

#tmv2SidebarRoot #sidebar .tm-nav-ai:hover {
  background: #0163c2 !important;
  filter: none;
}

#tmv2SidebarRoot #sidebar .tm-nav-ai.active {
  background: #0163c2 !important;
  outline: 2px solid rgba(1, 117, 228, 0.45);
  outline-offset: -2px;
}

.tm-nav-ai__badge {
  flex: none;
  flex-shrink: 0;
  margin-left: 6px;
  font-family: var(--tm-font-sans, "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

@keyframes tmNavAiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 117, 228, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(1, 117, 228, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 117, 228, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tm-nav-ai.tmv2-nav-item.nav-link {
    animation: none;
  }
}

/* =================================================================
   §17  ABONELİK KARTI — kılavuzun .k-rail__foot + .k-gauge dili
        Durumlar: demo · trial · trial_ending · paid · locked_intent
        (templates/includes/sidebar_v2.html, `subscription_card_state`)

        🔴 TEK GÖRÜNÜM. 2026-10-08 öncesi aynı kart iki ayrı biçimde
        çiziliyordu — tm-shell-v2.css'te turuncu/mor/gri gradyan blok,
        ds-shell.css'te saydam düz satır. Hangisinin görüneceğini sayfanın
        `tm-ds` seçimi belirliyordu. Her iki kaynak da kaldırıldı.

        Durum YALNIZ metin + kicker rengiyle ayrışır; zemin hepsinde aynı.
        Renk tek sinyal değildir (rozet metni durumu zaten yazar).
   ================================================================= */

#tmv2SidebarRoot .tmv2-pro-card {
  margin: 8px 4px 0;
  padding: 13px 6px 2px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--tmv2-nav-line);
  border-radius: 0;
  color: var(--tmv2-nav-ink);
}
#tmv2SidebarRoot .tmv2-pro-card::before { content: none; }

/* Rozet → kicker (pill değil). */
#tmv2SidebarRoot .tmv2-pro-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-kicker);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--tmv2-nav-kicker);
}
#tmv2SidebarRoot .tmv2-pro-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tmv2SidebarRoot .tmv2-pro-badge svg { width: 12px; height: 12px; flex: none; }

/* Gün sayısı → Unbounded.
   ÖNCE `Instrument Serif` + dar line-height idi: "3 gün kaldı" ifadesinde
   ğ'nin alt uzantısı KESİLİYORDU (ölçüldü). line-height 1.25 bunu bitirir. */
#tmv2SidebarRoot .tmv2-pro-days {
  margin: 0;
  font-family: var(--tmv2-ff-display);
  font-size: var(--tmv2-fs-gun);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;   /* Inter için; -.045em Unbounded içindi */
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
}
#tmv2SidebarRoot .tmv2-pro-sub {
  margin: 0;
  font-size: var(--tmv2-fs-meta);
  line-height: 1.5;
  opacity: 1;
  color: var(--tmv2-nav-kicker);
}

/* İlerleme çubuğu → .k-gauge. YALNIZ kalan süre; kullanım % DEĞİL. */
#tmv2SidebarRoot .tmv2-pro-bar {
  margin: 0;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .11);
  overflow: hidden;
}
#tmv2SidebarRoot .tmv2-pro-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tmv2-mavi), var(--tmv2-turuncu));
  transition: width .5s var(--tmv2-hiz);
}

/* TEK CTA — turuncu, tam genişlik (.tm-tips-btn dili). */
#tmv2SidebarRoot .tmv2-pro-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 32px;
  margin: 2px 0 0;
  padding: 0 12px;
  border-radius: 9px;
  background: linear-gradient(118deg, #f27a1a 0%, #fb9c3f 54%, #f27a1a 100%);
  color: #fff !important;
  font-family: var(--tmv2-ff-body);
  font-size: var(--tmv2-fs-etiket);
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(242, 122, 26, .28);
  transition: transform .2s var(--tmv2-yay), box-shadow .2s var(--tmv2-hiz),
              background .2s var(--tmv2-hiz);
}
#tmv2SidebarRoot .tmv2-pro-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(118deg, #f58526 0%, #fda752 54%, #f58526 100%);
  box-shadow: 0 7px 18px rgba(242, 122, 26, .40);
}
#tmv2SidebarRoot .tmv2-pro-cta:focus-visible {
  outline: 3px solid rgba(1, 117, 228, .55);
  outline-offset: 2px;
}

/* Durum tonu YALNIZ kicker'da. */
#tmv2SidebarRoot .tmv2-pro-card--trial  .tmv2-pro-badge { color: var(--tmv2-mavi-acik); }
#tmv2SidebarRoot .tmv2-pro-card--ending .tmv2-pro-badge { color: #f9a35e; }
#tmv2SidebarRoot .tmv2-pro-card--paid   .tmv2-pro-badge { color: var(--tmv2-mavi-acik); }
#tmv2SidebarRoot .tmv2-pro-card--demo   .tmv2-pro-badge { color: #9fb0c6; }
#tmv2SidebarRoot .tmv2-pro-card--locked .tmv2-pro-badge { color: #c3b2f5; }
/* Ücretli planda aciliyet yok → gauge tamamen mavi. */
#tmv2SidebarRoot .tmv2-pro-card--paid .tmv2-pro-bar > span {
  background: linear-gradient(90deg, var(--tmv2-mavi), var(--tmv2-mavi-acik));
}

/* =================================================================
   §18  A11Y — keyboard focus ring (inset, sağ kenara taşmaz).
   ================================================================= */

/* 2026-09-23 (UI denetimi K1): bu kural :148-175'teki `box-shadow: none !important`
   sıfırlaması tarafından eziliyordu → açık temada 94 sayfada klavye odağı görünmüyordu
   (CDP getMatchedStylesForNode ile doğrulandı). Aynı ağırlıkla kazanması için !important. */
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item:focus-visible,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link.active:focus-visible,
#tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .nav-sub-link.nav-link.active:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(1, 117, 228, 0.85) !important;
  border-radius: var(--tmv2-nav-radius);
}

/* prefers-reduced-motion: dekoratif geçişleri kapat. */
@media (prefers-reduced-motion: reduce) {
  #tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item {
    transition: none;
  }
}

/* =================================================================
   §19  TABLET (768–1024px) — drawer modu, dokunmatik hedef büyüt.
   ================================================================= */

/* 2026-09-23 UI denetimi D1: eskiden yalnız 768-1024px kapsıyordu, altındaki
   drawer genişliklerinde (ör. 375px) satır yüksekliği §2'nin --tmv2-nav-row-h
   (38px) değerinde kalıyordu — önerilen 44px dokunma hedefinin altında.
   Drawer modu ≤1024px'te aktif (tm-shell-v2.css:761); tek kural bu aralığın
   tamamını kapsasın diye alt sınır kaldırıldı. `!important` şart: §2'deki
   temel kural (satır ~166) `min-height: var(--tmv2-nav-row-h) !important`
   yazıyor — eski 42px kuralı bu yüzden hiç etki etmiyordu (!important her
   zaman non-important'ı ezer, kaynak sırası/specificity'den bağımsız). */
@media (max-width: 1024px) {
  #tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link,
  #tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-group-header {
    min-height: 44px !important;
  }
}

/* =================================================================
   §20  KOYU TEMA — ray HER İKİ temada da lacivert kalır.
        Kılavuz rayı gibi: tema sayfayı değiştirir, ray'i değil.
        Koyu temada yalnız gradyanın orta/son durağı bir tık derinleşir;
        zemin taban rengi (#031538) ve tüm mürekkep AYNI → kontrast
        ölçümleri iki temada da geçerli.
   ================================================================= */

/* Koyu temada genel bir dark-mode kuralı kenarlık rengini #242c37'ye çekiyordu
   (ölçüldü 2026-10-09: ayırıcı rgb(36,44,55)); ray her iki temada AYNI. */
html.dark-mode #tmv2SidebarRoot .tmv2-workspace { border-top-color: rgba(255, 255, 255, .14) !important; }
html.dark-mode #tmv2SidebarRoot.tmv2-sidebar {
  background-color: var(--tmv2-lacivert);
  background-image: linear-gradient(168deg,
                    var(--tmv2-lacivert) 0%,
                    #02101f 52%,
                    #04172f 100%);
}

/* Hareket azaltma tercihi — turuncu dairenin yay animasyonu dâhil. */
@media (prefers-reduced-motion: reduce) {
  #tmv2SidebarRoot *,
  #tmv2SidebarRoot *::before,
  #tmv2SidebarRoot *::after { transition: none !important; animation: none !important; }
  #tmv2SidebarRoot #sidebar .tmv2-sidebar-nav .tmv2-nav-item.nav-link.active .nav-icon {
    transform: none;
  }
}

/* =================================================================
   §21  tm-sidebar-* primitives — yeniden kullanılabilir primitive'ler.
        Gelecekte from-scratch sidebar shell için.
   ================================================================= */

.tm-sidebar {
  width: var(--tm-sidebar-w);
  background: #0e1420;
  border-right: 1px solid #1c2640;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.tm-sidebar--mini { width: var(--tm-sidebar-w-mini); }

.tm-sidebar__brand {
  height: var(--tm-header-h);
  padding: 0 var(--tm-space-4);
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
  border-bottom: 1px solid #1c2640;
  font-weight: var(--tm-weight-bold);
  color: #e8edf5;
  font-size: var(--tm-text-base);
  flex: none;
}

.tm-sidebar__nav {
  padding: var(--tm-space-3) var(--tm-space-2);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-sidebar__group { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--tm-space-2); }

.tm-sidebar__group-label {
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  color: #4e5d72;
  text-transform: uppercase;
  letter-spacing: var(--tm-tracking-wider);
  padding: var(--tm-space-3) var(--tm-space-3) var(--tm-space-2);
  margin: 0;
}

.tm-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--tm-space-3);
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: #c1cbda;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}

.tm-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e8edf5;
  text-decoration: none;
}

.tm-sidebar__item[aria-current="page"],
.tm-sidebar__item.is-active {
  background: rgba(1, 117, 228, 0.15);
  color: #ffffff;
  font-weight: 600;
}

.tm-sidebar__item[aria-current="page"]::before,
.tm-sidebar__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #0175e4;
  border-radius: 0 4px 4px 0;
}

.tm-sidebar__icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tm-sidebar__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-sidebar__badge {
  flex: none;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  background: rgba(1, 117, 228, 0.20);
  color: #7ec8ff;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.tm-sidebar__footer {
  padding: var(--tm-space-3);
  border-top: 1px solid #1c2640;
  flex: none;
}

.tm-sidebar__toggle {
  width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-2);
  background: transparent;
  border: none;
  color: #4e5d72;
  font-size: var(--tm-text-xs);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.tm-sidebar__toggle:hover { background: rgba(255, 255, 255, 0.05); color: #c1cbda; }

.tm-sidebar--mini .tm-sidebar__label,
.tm-sidebar--mini .tm-sidebar__badge,
.tm-sidebar--mini .tm-sidebar__group-label { display: none; }

.tm-sidebar--mini .tm-sidebar__item { justify-content: center; padding: 0; }

/* =================================================================
   2026-10-08 — "ALIGN FIX 2026-07-09" BLOĞU KALDIRILDI.
   O blok ikon kutusunu `width/height/flex: 20px !important`, SVG'yi
   `18px !important` ile çiviliyordu; kılavuz rail dilindeki 24px turuncu
   daire bu yüzden ÇİZİLEMİYORDU (ölçüldü 2026-10-08: daire yerine 20px
   kare kalıyordu). Hizalama artık §2+§3'te tek yerden geliyor:
   satır padding-left 10px + daire 24px + gap 11px → etiket sol-x'i
   TÜM item türlerinde (nav-link / nav-group-header) eşit.
   🔒 İkon boyutunu başka bir yerde yeniden çivileme.
   ================================================================= */


/* ==== /@import css/v2/components/sidebar.css ==== */


/* ==== @import css/v2/components/modal.css ==== */
/* =================================================================
   TRENDMETRIK v2 — MODAL
   .tm-modal — lightweight dialog. Does not replace Bootstrap .modal;
   new code uses .tm-modal, existing Bootstrap modals stay untouched.
   ================================================================= */

.tm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--tm-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tm-space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tm-dur-2) var(--tm-ease);
}

.tm-modal[aria-hidden="false"],
.tm-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--tm-surface-overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tm-modal__dialog {
  position: relative;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-2xl);
  box-shadow: var(--tm-shadow-xl);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 2 * var(--tm-space-8));
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(.98);
  transition:
    transform var(--tm-dur-2) var(--tm-ease),
    opacity var(--tm-dur-2) var(--tm-ease);
  overflow: hidden;
}

.tm-modal[aria-hidden="false"] .tm-modal__dialog,
.tm-modal.is-open .tm-modal__dialog {
  transform: translateY(0) scale(1);
}

.tm-modal--sm .tm-modal__dialog { max-width: 400px; }
.tm-modal--lg .tm-modal__dialog { max-width: 720px; }
.tm-modal--xl .tm-modal__dialog { max-width: 960px; }

.tm-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tm-space-3);
  padding: var(--tm-space-5) var(--tm-space-6);
  border-bottom: 1px solid var(--tm-border);
  flex: none;
}

.tm-modal__title {
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
  line-height: var(--tm-leading-snug);
  margin: 0;
}

.tm-modal__subtitle {
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
  margin-top: 2px;
}

.tm-modal__close {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--tm-text-muted);
  border-radius: var(--tm-radius-md);
  cursor: pointer;
  transition:
    background var(--tm-dur-1) var(--tm-ease),
    color var(--tm-dur-1) var(--tm-ease);
}

.tm-modal__close:hover {
  background: var(--tm-ink-100);
  color: var(--tm-text-primary);
}

.tm-modal__body {
  padding: var(--tm-space-5) var(--tm-space-6);
  overflow-y: auto;
  flex: 1;
  color: var(--tm-text-secondary);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-normal);
}

.tm-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tm-space-2);
  padding: var(--tm-space-4) var(--tm-space-6);
  border-top: 1px solid var(--tm-border);
  background: var(--tm-surface-sunken);
  flex: none;
}

.tm-modal__footer--start { justify-content: flex-start; }
.tm-modal__footer--between { justify-content: space-between; }

/* Mobile: bottom sheet */
@media (max-width: 640px) {
  .tm-modal {
    padding: 0;
    align-items: flex-end;
  }

  .tm-modal__dialog {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--tm-radius-2xl) var(--tm-radius-2xl) 0 0;
    transform: translateY(100%);
  }

  .tm-modal[aria-hidden="false"] .tm-modal__dialog,
  .tm-modal.is-open .tm-modal__dialog {
    transform: translateY(0);
  }
}

/* ==== /@import css/v2/components/modal.css ==== */


/* ==== @import css/v2/components/toast.css ==== */
/* =================================================================
   TRENDMETRIK v2 — TOAST
   .tm-toast — bottom-right stack, 4 variants, auto-dismiss friendly.
   Styles only — JS orchestration lives wherever the app wires it.
   ================================================================= */

.tm-toast-stack {
  position: fixed;
  bottom: var(--tm-space-5);
  right: var(--tm-space-5);
  z-index: var(--tm-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--tm-space-2);
  max-width: 400px;
  pointer-events: none;
}

.tm-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--tm-space-3);
  padding: var(--tm-space-3) var(--tm-space-4);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow-lg);
  color: var(--tm-text-primary);
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-snug);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  min-width: 280px;
  animation: tm-toast-in var(--tm-dur-3) var(--tm-ease);
}

.tm-toast.is-leaving {
  animation: tm-toast-out var(--tm-dur-2) var(--tm-ease-in) forwards;
}

/* Left stripe — 4px accent of the variant color */
.tm-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tm-ink-300);
}

.tm-toast--ok::before   { background: var(--tm-ok); }
.tm-toast--info::before { background: var(--tm-info); }
.tm-toast--warn::before { background: var(--tm-warn); }
.tm-toast--bad::before  { background: var(--tm-bad); }

.tm-toast__icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-text-muted);
  margin-top: 1px;
}

.tm-toast--ok   .tm-toast__icon { color: var(--tm-ok); }
.tm-toast--info .tm-toast__icon { color: var(--tm-info); }
.tm-toast--warn .tm-toast__icon { color: var(--tm-warn); }
.tm-toast--bad  .tm-toast__icon { color: var(--tm-bad); }

.tm-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-toast__title {
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
  font-size: var(--tm-text-sm);
}

.tm-toast__desc {
  color: var(--tm-text-secondary);
  font-size: var(--tm-text-xs);
  line-height: var(--tm-leading-normal);
}

.tm-toast__close {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--tm-text-muted);
  border-radius: var(--tm-radius-sm);
  cursor: pointer;
  margin-left: auto;
  transition:
    background var(--tm-dur-1) var(--tm-ease),
    color var(--tm-dur-1) var(--tm-ease);
}

.tm-toast__close:hover {
  background: var(--tm-ink-100);
  color: var(--tm-text-primary);
}

/* Optional progress bar for auto-dismiss */
.tm-toast__progress {
  position: absolute;
  left: 4px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tm-ink-200);
  overflow: hidden;
}

.tm-toast__progress::after {
  content: "";
  display: block;
  height: 100%;
  background: currentColor;
  opacity: .4;
  transform-origin: left;
  animation: tm-toast-progress 5s linear forwards;
}

@keyframes tm-toast-in {
  from { transform: translateX(12px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes tm-toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(12px); opacity: 0; }
}

@keyframes tm-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 640px) {
  .tm-toast-stack {
    left: var(--tm-space-3);
    right: var(--tm-space-3);
    bottom: var(--tm-space-3);
    max-width: none;
  }

  .tm-toast {
    min-width: 0;
  }
}

/* ---- Legacy bridge: .trendmetrik-toast ---------------------------
   The app's showToast() helpers (static/js/dashboard/*) render
   Bootstrap toasts with .trendmetrik-toast + .bg-success/bg-danger/
   bg-warning/bg-info. Instead of rewriting 5+ JS files, we restyle
   those toasts in place — Bootstrap's show/hide machinery stays,
   only the visual layer is upgraded to v2 tokens.
   ------------------------------------------------------------------ */
.trendmetrik-toast.toast {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-snug);
  border-radius: var(--tm-radius-lg);
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow-lg);
  padding: var(--tm-space-3) var(--tm-space-4);
  min-width: 280px;
  max-width: 400px;
  background: var(--tm-surface) !important;
  color: var(--tm-text-primary) !important;
  position: relative;
  overflow: hidden;
}

.trendmetrik-toast.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--tm-ink-300);
}

.trendmetrik-toast.toast.bg-success { background: var(--tm-surface) !important; color: var(--tm-text-primary) !important; }
.trendmetrik-toast.toast.bg-success::before { background: var(--tm-ok); }
.trendmetrik-toast.toast.bg-success .fa-check-circle { color: var(--tm-ok); }

.trendmetrik-toast.toast.bg-danger { background: var(--tm-surface) !important; color: var(--tm-text-primary) !important; }
.trendmetrik-toast.toast.bg-danger::before { background: var(--tm-bad); }
.trendmetrik-toast.toast.bg-danger .fa-exclamation-circle { color: var(--tm-bad); }

.trendmetrik-toast.toast.bg-warning { background: var(--tm-surface) !important; color: var(--tm-text-primary) !important; }
.trendmetrik-toast.toast.bg-warning::before { background: var(--tm-warn); }
.trendmetrik-toast.toast.bg-warning .fa-exclamation-triangle { color: var(--tm-warn); }

.trendmetrik-toast.toast.bg-info { background: var(--tm-surface) !important; color: var(--tm-text-primary) !important; }
.trendmetrik-toast.toast.bg-info::before { background: var(--tm-info); }
.trendmetrik-toast.toast.bg-info .fa-info-circle { color: var(--tm-info); }

/* Replace white text with brand-neutral text */
.trendmetrik-toast.toast.text-white {
  color: var(--tm-text-primary) !important;
}

.trendmetrik-toast.toast .btn-close {
  filter: none;
  opacity: .6;
}

.trendmetrik-toast.toast .btn-close:hover {
  opacity: 1;
}

.trendmetrik-toast.toast .toast-body {
  padding: 0;
  margin-left: var(--tm-space-2);
}

/* ==== /@import css/v2/components/toast.css ==== */


/* ==== @import css/v2/dashboard.css ==== */
/* =================================================================
   TRENDMETRIK v2 — DASHBOARD LAYOUT
   Handoff §5.1 spesifikasyonu: Dashboard (`templates/dashboard/index.html`)
   için tam sayfa layout sistemi.

   Bağımlılıklar:
     tokens.css  — --tm-* ve --tm-dash-* token'ları
     layout.css  — .tm-page, .tm-grid-*, .tm-section bazları
     shell.css   — .tmv2-page-body gutter ayarları

   Bu dosya SADECE dashboard.html'e özgü bileşenleri/layout'u içerir.
   Genel komponentler (kpi, table, card, badge) kendi component
   CSS'lerinde kalır.
   ================================================================= */

/* =================================================================
   1. SAYFA KAPSAYICISI
   ================================================================= */

/* Dashboard page root — .tm-page'i genişletir, dashboard-özel gap ayarı */
.tm-dash {
  display: flex;
  flex-direction: column;
  gap: var(--tm-dash-row-gap);
  width: 100%;
  min-width: 0;
}

/* =================================================================
   2. HERO BAR — Hoşgeldin + Filtreler
   Handoff §5.1: 88px yükseklik, sol ad, sağ filtreler
   ================================================================= */

.tm-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-4);
  min-height: var(--tm-dash-hero-h);
  padding: var(--tm-space-5) 0;
  flex-wrap: wrap;
}

.tm-dash-hero__greeting {
  display: flex;
  flex-direction: column;
  gap: var(--tm-space-1);
  min-width: 0;
}

.tm-dash-hero__title {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-2xl);
  font-weight: var(--tm-weight-bold);
  color: var(--tm-text-primary);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-dash-hero__subtitle {
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
  line-height: var(--tm-leading-normal);
}

/* Sağ taraf: tarih aralığı + pazaryeri filtre butonları */
.tm-dash-hero__filters {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Filtre pill button — .tm-btn'den bağımsız küçük varyant */
.tm-dash-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  height: 36px;
  padding: 0 var(--tm-space-3);
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-text-secondary);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-full);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background var(--tm-dur-1) var(--tm-ease),
    border-color var(--tm-dur-1) var(--tm-ease),
    color var(--tm-dur-1) var(--tm-ease);
  text-decoration: none;
}

.tm-dash-filter-pill:hover {
  background: var(--tm-ink-100);
  color: var(--tm-text-primary);
  border-color: var(--tm-border-strong);
}

.tm-dash-filter-pill:focus-visible {
  outline: none;
  box-shadow: var(--tm-ring);
}

.tm-dash-filter-pill--active {
  background: var(--tm-brand-50);
  color: var(--tm-brand-700);
  border-color: var(--tm-brand-200);
  font-weight: var(--tm-weight-semibold);
}

.tm-dash-filter-pill__caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* =================================================================
   3. KPI ŞERIDI — 5 kart yan yana
   Handoff §5.1: Ciro | Kâr | Sipariş | Ort.Sepet | Kâr Marjı
   ================================================================= */

.tm-dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(var(--tm-dash-kpi-cols), minmax(var(--tm-dash-kpi-min-w), 1fr));
  gap: var(--tm-dash-col-gap);
  width: 100%;
}

/* Sparkline container (KPI alt kısmı — chart.js veya inline SVG) */
.tm-dash-kpi-spark {
  height: var(--tm-dash-sparkline-h);
  width: 100%;
  margin-top: auto;

  /* Negatif margin ile kart padding'i aşıp kenarlara uzanır */
  margin-left: calc(-1 * var(--tm-space-5));
  margin-right: calc(-1 * var(--tm-space-5));
  margin-bottom: calc(-1 * var(--tm-space-5));
  width: calc(100% + 2 * var(--tm-space-5));

  border-radius: 0 0 var(--tm-radius-xl) var(--tm-radius-xl);
  overflow: hidden;
}

.tm-dash-kpi-spark canvas,
.tm-dash-kpi-spark svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* =================================================================
   4. CHART BÖLÜMÜ — Trend grafik (2/3) + Kategori donut (1/3)
   Handoff §5.1: 380px yükseklik, yan yana iki kart
   ================================================================= */

.tm-dash-charts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--tm-dash-col-gap);
  align-items: start;
}

/* Ana trend chart kartı */
.tm-dash-chart-main {
  min-height: var(--tm-dash-chart-main-h);
  display: flex;
  flex-direction: column;
}

.tm-dash-chart-main .tm-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tm-dash-chart-main canvas {
  flex: 1;
  min-height: 0;
  width: 100% !important;
}

/* Kategori donut kartı */
.tm-dash-chart-donut {
  min-height: var(--tm-dash-chart-donut-h);
  display: flex;
  flex-direction: column;
}

.tm-dash-chart-donut .tm-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-4);
}

.tm-dash-chart-donut canvas {
  max-width: 220px;
  max-height: 220px;
  width: 100% !important;
  height: auto !important;
}

/* Donut legend (kategori listesi) */
.tm-dash-donut-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tm-space-2);
}

.tm-dash-donut-legend__item {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
  font-size: var(--tm-text-xs);
  color: var(--tm-text-secondary);
}

.tm-dash-donut-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-dash-donut-legend__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-dash-donut-legend__pct {
  font-variant-numeric: tabular-nums;
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
  flex-shrink: 0;
}

/* =================================================================
   5. ALT SATIR — En kârlı ürünler (1/2) + Aksiyon gerektiren (1/2)
   Handoff §5.1: İki eşit kart yan yana
   ================================================================= */

.tm-dash-bottom-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tm-dash-col-gap);
  align-items: start;
}

/* En kârlı ürünler listesi */
.tm-dash-top-products {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tm-dash-product-item {
  display: flex;
  align-items: center;
  gap: var(--tm-space-3);
  padding: var(--tm-space-3) var(--tm-space-4);
  border-bottom: 1px solid var(--tm-border);
  transition: background var(--tm-dur-1) var(--tm-ease);
}

.tm-dash-product-item:last-child {
  border-bottom: none;
}

.tm-dash-product-item:hover {
  background: var(--tm-surface-sunken);
}

.tm-dash-product-item__rank {
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-bold);
  color: var(--tm-text-disabled);
  font-variant-numeric: tabular-nums;
  width: 20px;
  flex-shrink: 0;
  text-align: right;
}

.tm-dash-product-item__name {
  flex: 1;
  min-width: 0;
  font-size: var(--tm-text-sm);
  color: var(--tm-text-primary);
  font-weight: var(--tm-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-dash-product-item__spark {
  width: 60px;
  height: 24px;
  flex-shrink: 0;
}

.tm-dash-product-item__profit {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--tm-text-primary);
  flex-shrink: 0;
  text-align: right;
  min-width: 80px;
}

.tm-dash-product-item__profit--pos { color: var(--tm-ok); }
.tm-dash-product-item__profit--neg { color: var(--tm-bad); }

/* Aksiyon gerektiren uyarılar */
.tm-dash-alerts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tm-dash-alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--tm-space-3);
  padding: var(--tm-space-3) var(--tm-space-4);
  border-bottom: 1px solid var(--tm-border);
  transition: background var(--tm-dur-1) var(--tm-ease);
}

.tm-dash-alert-item:last-child {
  border-bottom: none;
}

.tm-dash-alert-item:hover {
  background: var(--tm-surface-sunken);
}

.tm-dash-alert-item__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--tm-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.tm-dash-alert-item__icon--warn {
  background: var(--tm-warn-bg);
  color: var(--tm-warn);
}

.tm-dash-alert-item__icon--bad {
  background: var(--tm-bad-bg);
  color: var(--tm-bad);
}

.tm-dash-alert-item__icon--info {
  background: var(--tm-info-bg);
  color: var(--tm-info);
}

.tm-dash-alert-item__body {
  flex: 1;
  min-width: 0;
}

.tm-dash-alert-item__title {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-text-primary);
  margin-bottom: var(--tm-space-1);
  line-height: var(--tm-leading-snug);
}

.tm-dash-alert-item__desc {
  font-size: var(--tm-text-xs);
  color: var(--tm-text-muted);
  line-height: var(--tm-leading-normal);
}

/* =================================================================
   6. SON SİPARİŞLER TABLOSU
   Handoff §5.1: 10 satır, "Tümü →" linki
   ================================================================= */

.tm-dash-orders {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tm-dash-orders-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tm-space-4) var(--tm-space-5);
  border-bottom: 1px solid var(--tm-border);
}

.tm-dash-orders-header__title {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
}

.tm-dash-orders-header__link {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-brand-600);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--tm-space-1);
  transition: color var(--tm-dur-1) var(--tm-ease);
}

.tm-dash-orders-header__link:hover {
  color: var(--tm-brand-700);
}

/* =================================================================
   7. ASIDE — Yenilikler / Duyurular
   Handoff §5.1: 320px genişlik, sağ panel
   ================================================================= */

/* Ana iki sütunlu layout: içerik + aside */
.tm-dash-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tm-dash-aside-w);
  gap: var(--tm-dash-col-gap);
  align-items: start;
}

.tm-dash-layout__main {
  display: flex;
  flex-direction: column;
  gap: var(--tm-dash-row-gap);
  min-width: 0;
}

.tm-dash-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--tm-dash-col-gap);
  position: sticky;
  top: calc(var(--tm-header-h) + var(--tm-space-4));
  max-height: calc(100vh - var(--tm-header-h) - var(--tm-space-8));
  overflow-y: auto;

  /* Firefox scrollbar thin */
  scrollbar-width: thin;
  scrollbar-color: var(--tm-border) transparent;
}

/* Duyuru item */
.tm-dash-announcement {
  display: flex;
  flex-direction: column;
  gap: var(--tm-space-2);
  padding: var(--tm-space-4);
  border-radius: var(--tm-radius-lg);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  transition:
    border-color var(--tm-dur-2) var(--tm-ease),
    box-shadow var(--tm-dur-2) var(--tm-ease);
}

.tm-dash-announcement:hover {
  border-color: var(--tm-border-strong);
  box-shadow: var(--tm-shadow-sm);
}

.tm-dash-announcement__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-2);
}

.tm-dash-announcement__date {
  font-size: var(--tm-text-xs);
  color: var(--tm-text-muted);
  font-variant-numeric: tabular-nums;
}

.tm-dash-announcement__title {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
  line-height: var(--tm-leading-snug);
}

.tm-dash-announcement__body {
  font-size: var(--tm-text-xs);
  color: var(--tm-text-secondary);
  line-height: var(--tm-leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =================================================================
   8. CARD HEADER ÖZELLEŞTİRMELERİ — Grafik kartları
   ================================================================= */

/* Grafik kartları için legend inline (başlığın yanında) */
.tm-dash-chart-legend {
  display: flex;
  align-items: center;
  gap: var(--tm-space-3);
  flex-wrap: wrap;
}

.tm-dash-legend-item {
  display: flex;
  align-items: center;
  gap: var(--tm-space-1);
  font-size: var(--tm-text-xs);
  color: var(--tm-text-muted);
}

.tm-dash-legend-item__swatch {
  width: 10px;
  height: 3px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* =================================================================
   9. BOŞ DURUM — Veri yokken gösterilen içerik
   ================================================================= */

.tm-dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-3);
  padding: var(--tm-space-10) var(--tm-space-6);
  text-align: center;
  color: var(--tm-text-muted);
  min-height: 200px;
}

.tm-dash-empty__icon {
  width: 40px;
  height: 40px;
  color: var(--tm-text-disabled);
}

.tm-dash-empty__title {
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-secondary);
}

.tm-dash-empty__desc {
  font-size: var(--tm-text-xs);
  max-width: 280px;
}

/* =================================================================
   10. RESPONSIVE — Breakpoint'ler
   ================================================================= */

/* Büyük tablet: aside gizlenir, tek kolon */
@media (max-width: 1200px) {
  .tm-dash-layout {
    grid-template-columns: 1fr;
  }

  .tm-dash-layout__aside {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  /* Aside → accordion'a dönüşür (JS ile kontrol) */
  .tm-dash-layout__aside[hidden] {
    display: none;
  }
}

/* Tablet: chart bölümü dikey */
@media (max-width: 1024px) {
  .tm-dash-charts {
    grid-template-columns: 1fr;
  }

  .tm-dash-chart-main,
  .tm-dash-chart-donut {
    min-height: 280px;
  }

  .tm-dash-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobil küçük tablet: alt satır dikey */
@media (max-width: 768px) {
  .tm-dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-dash-bottom-row {
    grid-template-columns: 1fr;
  }

  .tm-dash-hero {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
  }

  .tm-dash-hero__filters {
    width: 100%;
  }
}

/* Küçük mobil: tek kolon KPI */
@media (max-width: 480px) {
  .tm-dash-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   11. DARK MODE UYUMU
   [data-theme="dark"] ve html.dark-mode — tokens.css'ten geliyor,
   burada sadece dashboard-özel override'lar var.
   ================================================================= */

[data-theme="dark"] .tm-dash-announcement,
html.dark-mode .tm-dash-announcement {
  background: var(--tm-surface-raised);
}

[data-theme="dark"] .tm-dash-filter-pill,
html.dark-mode .tm-dash-filter-pill {
  background: var(--tm-surface-raised);
  border-color: var(--tm-border-strong);
}

[data-theme="dark"] .tm-dash-filter-pill:hover,
html.dark-mode .tm-dash-filter-pill:hover {
  background: var(--tm-surface-sunken);
}

/* ==== /@import css/v2/dashboard.css ==== */