/* =====================================================================
   TM COMPONENTS — 2026-08-06 (feat/responsive-architecture)
   Container / PageShell (ADIM 2) + DataTable (ADIM 3) görsel katmanı.
   responsive-foundation.css'ten SONRA yüklenir (token'ları tüketir).
   ===================================================================== */

/* ---------- Container (tek gutter/max-width kaynağı) ---------- */
.tm-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--tm-gutter, 1rem);   /* mobil 16 → sm 24 → lg 32 (foundation token) */
  max-width: var(--tm-container-max, 1280px);
}
.tm-container--narrow { --tm-container-max: 880px; }
.tm-container--wide   { --tm-container-max: 1536px; }
.tm-container--fluid  { --tm-container-max: none; }

/* ---------- PageShell ---------- */
.tm-pageshell { padding-block: var(--tm-space-4, 1rem) var(--tm-space-6, 1.5rem); }
.tm-pageshell__head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  margin-bottom: var(--tm-space-4, 1rem);
}
.tm-pageshell__titles { min-width: 0; }
.tm-pageshell__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tm-page-title {
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  font-weight: 700; line-height: 1.2; margin: 0;
  overflow-wrap: anywhere;
}
.tm-page-subtitle { margin: .25rem 0 0; color: var(--tm-text-secondary, #6b7280); overflow-wrap: anywhere; }

/* ---------- DataTable ---------- */
.tm-datatable { width: 100%; }
.tm-datatable__scroll { width: 100%; max-width: 100%; }
.tm-datatable__table { width: 100%; border-collapse: collapse; }
.tm-datatable__table caption.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.tm-datatable__empty { text-align: center; color: var(--tm-text-secondary, #6b7280); padding: 1.25rem; }

/* md ÜSTÜ: gerçek tablo; genişse KART İÇİNDE yatay kaydırır (sayfa taşmaz) */
@media (min-width: 768px) {
  .tm-datatable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tm-datatable__table th, .tm-datatable__table td {
    padding: .625rem .75rem; text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--tm-line, #e5e7eb); overflow-wrap: anywhere;
  }
  .tm-datatable__table thead th {
    font-size: .8125rem; font-weight: 600; color: var(--tm-text-secondary, #6b7280);
    white-space: nowrap; border-bottom-width: 2px;
  }
}

/* md ALTI: her satır bir KART (thead gizli; td = etiket + değer) */
@media (max-width: 767.98px) {
  .tm-datatable__scroll { overflow-x: visible; }
  .tm-datatable__table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
  }
  .tm-datatable__table,
  .tm-datatable__table tbody,
  .tm-datatable__table tr,
  .tm-datatable__table td { display: block; width: 100%; }
  .tm-datatable__table tr {
    border: 1px solid var(--tm-line, #e5e7eb); border-radius: 12px;
    margin-bottom: .625rem; padding: .5rem .75rem; background: var(--tm-bg-card, #fff);
  }
  .tm-datatable__table td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .3rem 0; border: 0; overflow-wrap: anywhere;
  }
  .tm-datatable__table td::before {
    content: attr(data-label); font-weight: 600; color: var(--tm-text-secondary, #6b7280);
    flex: 0 0 42%; min-width: 0;
  }
  .tm-datatable__table td:empty { display: none; }
}

/* 2026-09-23 K5: ui-stability-round3-2026-06-05.css §6 "Smooth tab switch"
   buraya eritildi — .tab-content 28 şablonda kullanılan paylaşımlı sekme
   sınıfı (dashboard'a özgü değil), bu yüzden hedef tm-dashboard-v2.css değil
   burası. Hiçbir başka dosya .tab-content transition'ını yeniden tanımlamıyor
   (grep doğrulandı) → sıra/özgüllük riski yok. */
.tab-content { transition: opacity 0.15s ease; }

/* ══════════════════════════════════════════════════════════════════════
   2026-09-23 K5: tm-interaction-polish.css buraya eritildi (yama zinciri
   sadeleştirme). Fiziksel komşuları (ui-polish-2026-06-04.css,
   r5a-saas-polish-2026-06-06.css) bu turda dokunulmaz "büyük üç" listesinde
   → aynı cascade konumunda erime hedefi yok; bileşen-seviyesi (buton/kart/
   tablo/input) içerik olduğu için tm-components.css'e taşındı (kabuk değil,
   bileşen kuralı — görev talimatındaki 2. fallback). Cascade konumu ERKEN
   kayıyor (tm-components.css → tm-shell-v2.css'ten bile önce yüklenir);
   risk piksel-diff kapısıyla (155 sayfa × 1280/375) doğrulandı, bkz.
   docs/ui-audit/_work/K5-melt-report.md. Selector'lar/!important/:where()
   guard'ları BİREBİR korunur, yalnız dosya konumu değişti. ══════════════ */
/* ══════════════════════════════════════════════════════════════════════
   DS-SCOPE EXCLUSION — REGISTERED DEBT (2026-09-13, UI design-system refactor)
   2026-09-13 (design(live), Faz 4b): button/table/input focus rules also
   carry the exclusion now (Canlı Performans's toolbar/table collided the
   same way).
   The rules below carry `:where(:not(.tm-ds *))`: inside a page that opted
   into the design system (<main class="tm-ds">) these !important surface
   rules stand down, so the DS layer (static/css/ds/) can style .kpi-card /
   .ch-panel / .tm-card / .card without !important. `:where()` keeps the
   specificity of each rule exactly as before, so pages WITHOUT .tm-ds resolve
   identically (proof: computed-style fingerprint 0/0/0). This is backwards
   coupling on purpose and is counted as a separate line in the DS metrics
   table; it goes away when this file's surface rules are deleted (Faz 5 /
   wave 2), not before. ══════════════════════════════════════════════════ */
/* ==============================================================
   TM INTERACTION POLISH — 2026-07-29
   Global hover/focus mikro-etkileşimleri + renk canlılığı.
   Panel design-kit'ine (restrained motion) birebir uyumlu:
   150ms ease, translateY(-1..-2px), yumuşak/renkli gölge, primary
   gradient. ADDITIVE — yalnız transition/hover/focus/gradient ekler;
   layout ve mevcut kimlik korunur. prefers-reduced-motion saygılı.
   Amaç: kullanıcı "düz/statik, animasyon yok" geri bildirimi → sayfalar
   hover'da canlanır, tıklama/odak geri bildirimi hissedilir.
   ============================================================== */

:root {
  --tmx-ease: cubic-bezier(.22, .61, .36, 1);
  --tmx-dur: 160ms;
  --tmx-lift-shadow: 0 10px 28px rgba(15, 23, 42, .10);
  --tmx-lift-shadow-sm: 0 6px 18px rgba(15, 23, 42, .08);
  --tmx-brand-shadow: 0 8px 22px rgba(var(--color-primary-rgb, 1, 117, 228), .30);
  --tmx-row-hover: rgba(var(--color-primary-rgb, 1, 117, 228), .05);
}
html.dark-mode {
  --tmx-lift-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  --tmx-lift-shadow-sm: 0 6px 18px rgba(0, 0, 0, .40);
  --tmx-row-hover: rgba(var(--color-primary-rgb, 1, 117, 228), .12);
}

/* ---- Genel geçişler: interaktif öğeler yumuşak animasyonlu ---- */
.btn, .tmv2-metric-card, .metric-card, .card,
.overview-widget-panel, .dashboard-widget, .ch-panel, .cpk-card,
.tmv2-panel, .tmv2-dash-panel, .tm-alerts-stat, .en-stat, .xstat,
.bb-metric, .qa-card, .tm-live-stat, .quick-access-card,
.form-control, .tm-input, .en-input, .tm-control, .filter-btn, .tm-chip {
  transition:
    transform var(--tmx-dur) var(--tmx-ease),
    box-shadow var(--tmx-dur) var(--tmx-ease),
    border-color var(--tmx-dur) var(--tmx-ease),
    background-color var(--tmx-dur) var(--tmx-ease),
    color var(--tmx-dur) var(--tmx-ease);
}

@media (prefers-reduced-motion: no-preference) {
  /* Kartlar/paneller: hover'da hafif yükselme + yumuşak gölge → "canlı" his */
  .tmv2-metric-card:hover, .metric-card:hover, .card:hover,
  .overview-widget-panel:hover, .dashboard-widget:hover,
  .ch-panel:hover, .cpk-card:hover, .qa-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tmx-lift-shadow);
  }
  /* Küçük stat kartları: daha ölçülü lift */
  .tm-alerts-stat:hover, .en-stat:hover, .xstat:hover {
    transform: translateY(-1px);
    box-shadow: var(--tmx-lift-shadow-sm);
  }
  /* Butonlar: hover lift + basınca geri (dokunsal geri bildirim) */
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
}

/* ---- Renk canlılığı: primary butonlar gradient + marka gölge ----
   2026-09-13 (design(live), Faz 4b): DS sayfalarında buton/tablo/input skin'i
   ds-toolbar.css'ten (flat, gradientsiz) gelir; bu dosyanın gradient/gölge
   katmanı .tm-ds içinde durur (docs/ui-audit.md "Bölme 4a'yı açıyor mu?"). */
.btn--primary:where(:not(.tm-ds *)), .btn-primary:where(:not(.tm-ds *)),
.btn-baklava-primary:where(:not(.tm-ds *)), .tm-cta-btn:where(:not(.tm-ds *)) {
  background-image: linear-gradient(135deg, var(--color-primary, #0175e4), var(--color-primary-hover, #0163c2));
}
.btn--primary:hover:where(:not(.tm-ds *)), .btn-primary:hover:where(:not(.tm-ds *)),
.btn-baklava-primary:hover:where(:not(.tm-ds *)), .tm-cta-btn:hover:where(:not(.tm-ds *)) {
  box-shadow: var(--tmx-brand-shadow);
}

/* ---- Tablo satırları: hover'da yumuşak marka-tint vurgusu ---- */
tbody tr { transition: background-color var(--tmx-dur) var(--tmx-ease); }
.tm-table:where(:not(.tm-ds *)) tbody tr:hover,
.en-table:where(:not(.tm-ds *)) tbody tr:hover,
.xtable:where(:not(.tm-ds *)) tbody tr:hover,
.tm-alerts-tbl:where(:not(.tm-ds *)) tbody tr:hover,
table.table:where(:not(.tm-ds *)) tbody tr:hover {
  background: var(--tmx-row-hover);
}

/* ---- Input/select/textarea odak: yumuşak marka halkası ---- */
.form-control:focus:where(:not(.tm-ds *)), .tm-input:focus:where(:not(.tm-ds *)), .en-input:focus:where(:not(.tm-ds *)),
.tm-control:focus:where(:not(.tm-ds *)), input:focus:where(:not(.tm-ds *)), select:focus:where(:not(.tm-ds *)), textarea:focus:where(:not(.tm-ds *)) {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 1, 117, 228), .15);
  border-color: var(--color-primary, #0175e4);
}

/* reduced-motion: transform kapalı, yalnız yumuşak renk/gölge geçişi kalır */
@media (prefers-reduced-motion: reduce) {
  .btn, .card, .tmv2-metric-card, .metric-card, .cpk-card,
  .overview-widget-panel, .dashboard-widget, .ch-panel {
    transition: box-shadow 120ms ease, background-color 120ms ease;
  }
}

/* ==============================================================
   GLOBAL SPACING + DERİNLİK 2026-07-29
   Kullanıcı: 'her sayfada farklı/fazla boşluk, düz-sıkıcı, global çözüm'.
   Ölçüm: #mainContent padding 28px sol / 72px sağ (asimetrik!), .tm-page-header
   kartı ~175px (aşırı boş). Bunlar GLOBAL (tüm sayfalar) → tek yerden düzelt.
   ============================================================== */
/* 1) Yatay gutter artık shell'den SİMETRİK 32px (tm-shell-v2.css kaynakta).
   TÜM sayfa-wrapper'ları AYNI dikey boşluğa hizala (ölçüm: en-wrap=24, overview=5,
   live=0 → tutarsızdı) → her sayfada birebir aynı ritim. */
/* Sayfa wrapper'larının kendi dikey padding'ini SIFIRLA → boşluk yalnız shell'den.
   Değer 0 olduğundan specificity savaşı gereksiz: kuralımın vurduğu wrapper'lar 0
   olur, vuramadığı dirençli wrapper'lar (live/alerts/buybox) ZATEN 0 → hepsi tutarlı. */
#mainContent .tmv2-page-body > :where(div, section, main) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* 2) Sayfa başlığı ÇIPLAK ZEMİNDE (2026-09-24 kullanıcı kararı): kart iç boşluğu
   ve `margin-bottom: 2px` KALDIRILDI. Alt boşluğun TEK kaynağı
   `--tm-page-header-gap` (tm-v2.css) — sayfaya özel margin eklenmez. */
.tm-page-header__subtitle { margin: 2px 0 0 !important; }
/* 3) Sayfa arka planı: düz gri → hafif dikey gradient (derinlik hissi) */
body.tmv2-body, .tmv2-page-host {
  background: linear-gradient(180deg, #eaf0f8 0%, #f4f6fa 320px) !important;
}
/* 4) Kartlara hafif çok-katmanlı gölge (düz → boyutlu) */
.card:where(:not(.tm-ds *)),
.tmv2-panel:where(:not(.tm-ds *)),
.tmv2-dash-panel:where(:not(.tm-ds *)),
.overview-widget-panel:where(:not(.tm-ds *)),
.ch-panel:where(:not(.tm-ds *)),
.en-stat,
.xstat,
.tm-alerts-stat,
.bb-stat{
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 5px 16px rgba(15,23,42,.055) !important;
}

/* ══════════════════════════════════════════════════════════════
   BİLEŞEN BİRLEŞTİRME 2026-07-29
   Kullanıcı: 'her sayfanın kendine özgü css/padding/ayarları var, birleştir'.
   Per-page stat/kart/ikon stillerini TEK paylaşımlı görünüme indirir (HTML
   değişmez, global CSS). Kanonik materyal: radius + border + katmanlı gölge.
   ══════════════════════════════════════════════════════════════ */
/* 1) TÜM stat/özet kartları → TEK materyal (radius/border/gölge tutarlı) */
.kpi-card:not(.accent):where(:not(.tm-ds *)),
.en-stat,
.tm-alerts-stat,
.xstat,
.bb-stat,
.tmv2-metric-card:where(:not(.tm-ds *)),
.metric-card:where(:not(.tm-ds *)){
  border-radius: 16px !important;
  border: 1px solid var(--tm-border-color, #e6ebf2) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 6px 16px rgba(15,23,42,.05) !important;
}
/* 2) TÜM içerik panel/kartları → TEK materyal */
.card:where(:not(.tm-ds *)),
.tmv2-panel:where(:not(.tm-ds *)),
.tmv2-dash-panel:where(:not(.tm-ds *)),
.overview-widget-panel:where(:not(.tm-ds *)),
.ch-panel:where(:not(.tm-ds *)),
.tm-card:where(:not(.tm-ds *)),
.cpk-card:where(:not(.tm-ds *)),
.tm-live-orders-card:where(:not(.tm-ds *)),
.qa-card{
  border-radius: 16px !important;
  border: 1px solid var(--tm-border-color, #e6ebf2) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.05) !important;
}
/* 3) Stat ikon-çipleri → tutarlı boyut (renk kendi tone var'ından gelir) */
.en-stat__ic, .xstat__ic, .tm-alerts-stat__icon {
  width: 42px !important; height: 42px !important; border-radius: 12px !important;
}
.kpi-ic:where(:not(.tm-ds *)){ width: 40px !important; height: 40px !important; border-radius: 12px !important; }
/* 4) TÜM birincil butonlar → tek gradient materyal (zaten kısmen; pekiştir) */
.btn--primary:where(:not(.tm-ds *)), .btn-primary:where(:not(.tm-ds *)), .btn-baklava-primary:where(:not(.tm-ds *)),
.tm-cta-btn:where(:not(.tm-ds *)), .btn--primary:where(:not(.tm-ds *)) {
  border: none !important;
  background-image: linear-gradient(135deg, var(--color-primary,#0175e4), var(--color-primary-hover,#0163c2)) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   2026-09-23 K5: tm-pro-redesign.css buraya eritildi (kaynakta
   tm-interaction-polish.css'ten HEMEN SONRA yükleniyordu — aynı görece
   sıra burada da korundu: interaction-polish bloğu YUKARIDA, bu blok
   AŞAĞIDA, dosya içi sıra kaynaktaki dosyalar-arası sırayı taklit eder).
   Aynı gerekçe: fiziksel komşuları (r5a-saas-polish-2026-06-06.css,
   dark-mode-component-overrides-2026-06-11.css) bu turda dokunulmaz.
   ══════════════════════════════════════════════════════════════════════ */
/* DS-SCOPE EXCLUSION — REGISTERED DEBT (2026-09-13, UI design-system refactor Faz 4a).
   Rules carrying `:where(:not(.tm-ds *))` stand down inside pages that opted into the
   design system (<main class="tm-ds">); `:where()` keeps their specificity unchanged, so
   every other page resolves exactly as before. Counted in the DS metrics table
   ("Debt: shell DS-scope exclusions"); removed when the rule itself is deleted. */
/* ══════════════════════════════════════════════════════════════════════
   DS-SCOPE EXCLUSION — REGISTERED DEBT (2026-09-13, UI design-system refactor)
   2026-09-13 (design(live) + design(orders), Faz 4b — orders: important-collisions.cjs
   measured 809 visible #ordersTab elements hit by !important before this pass): table/button/input rules below also
   carry the exclusion now (Canlı Performans's table/toolbar/action-card
   buttons collided the same way overview's cards did — docs/ui-audit.md
   "Bölme 4a'yı açıyor mu?" flagged this file for 4b/4c).
   The rules below carry `:where(:not(.tm-ds *))`: inside a page that opted
   into the design system (<main class="tm-ds">) these !important surface
   rules stand down, so the DS layer (static/css/ds/) can style .kpi-card /
   .ch-panel / .tm-card / .card without !important. `:where()` keeps the
   specificity of each rule exactly as before, so pages WITHOUT .tm-ds resolve
   identically (proof: computed-style fingerprint 0/0/0). This is backwards
   coupling on purpose and is counted as a separate line in the DS metrics
   table; it goes away when this file's surface rules are deleted (Faz 5 /
   wave 2), not before. ══════════════════════════════════════════════════ */
/* ==================================================================
   TM PRO REDESIGN — 2026-07-29
   Kapsamlı profesyonel global tasarım-sistemi. Referans: sektör-standardı
   pazaryeri-yönetim araçları (temiz, veri-yoğun ama sade, rafine).
   TÜM sayfalara global uygulanır (base.html, interaction-polish'ten SONRA).
   Amaç: kozmetik tweak DEĞİL — tipografi/kart/tablo/buton/input/başlık
   bileşenlerini tek rafine sisteme indirir → tüm sayfalar profesyonel görünür.
   Light-öncelikli; dark mevcut override'lardan gelir.
   ================================================================== */

:root {
  --pro-line:      #e7ecf3;   /* rafine ince kenar */
  --pro-line-soft: #eef2f7;   /* satır ayırıcı */
  --pro-surface:   #ffffff;
  --pro-bg:        #f6f8fb;   /* sakin sayfa zemini */
  --pro-ink:       #101828;   /* birincil metin */
  --pro-ink-2:     #475467;   /* ikincil */
  --pro-ink-3:     #556173;   /* muted — 2026-09-24 kontrast: #98a2b3 beyazda 2,58:1 → 6,3:1 */
  --pro-brand:     var(--color-primary, #0175e4);
  --pro-brand-2:   var(--color-primary-hover, #0163c2);
  --pro-radius:    12px;
  --pro-radius-sm: 9px;
  --pro-shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  --pro-shadow-md: 0 4px 12px rgba(16,24,40,.06);
  --pro-pad:       18px;
}

/* ---------- Sakin, hafif sayfa zemini ---------- */
body.tmv2-body, .tmv2-page-host {
  background: var(--pro-bg) !important;
}
/* 🔴 ZEMİN KARTLA BİRLEŞİYORDU (2026-10-11, kullanıcı: *"tüm sayfalarda içerikler
   arka plan ile çok birleşik, içerik pasif"*). ÖLÇÜLDÜ: her sayfada görünen
   tuval `#tmv2Page.tmv2-page-host` ve bu kuralla #f6f8fb boyanıyor — beyaz kart
   (#fff) ile fark neredeyse yok. Body'nin ve tema tuvalinin (Palet B,
   `--color-bg` #e6ebf3 — "kart/zemin ayrımı renge dayanır" kararı) ÜSTÜNÜ
   örttüğü için o karar hiçbir sayfaya yansımamıştı. Açık temada zemin artık
   kanonik tuval; ince kenar ve gölge bir kademe belirgin. Koyu tema DEĞİŞMEDİ. */
html:not(.dark-mode) {
  --pro-bg:     var(--color-bg, #e6ebf3);
  --pro-line:   #dbe2ec;
  --pro-shadow: 0 1px 2px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.06);
}

/* ---------- Tipografi: rafine hiyerarşi, tabular rakam ---------- */
.tmv2-page, .tmv2-page-body {
  color: var(--pro-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
.tmv2-page :where(h1,h2,h3,h4,h5,h6) { letter-spacing: -0.018em; color: var(--pro-ink); }
.tmv2-page :where(.num, [data-bind="value"], .tm-mono, .kpi-value, .en-stat__v) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Kanonik KART / PANEL — temiz, rafine, tutarlı ---------- */
.tmv2-page :where(.card, .tmv2-panel, .tmv2-dash-panel, .overview-widget-panel,
  .ch-panel, .tm-card, .cpk-card, .qa-card, .en-ops, .en-filters,
  .tm-alerts-filters, .xpanel, .bb-panel, .tm-panel):where(:not(.tm-ds *)){
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
}

/* Sayfa başlığı: YÜZEY YOK (çıplak zemin, 2026-09-24). Eskiden burada
   `--pro-surface` + çerçeve + gölge + 14px/18px iç boşluk vardı; bu kart
   kaldırıldı. Yalnız tipografi cilası kalır. */
.tm-page-header__eyebrow, .tm-page-header__title-group .tm-page-header__eyebrow {
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--pro-ink-3) !important;
}
/* 2026-10-10: 13px ölçek DIŞIYDI (DS ölçeği 24/18/16/14/12/11) ve sayfa alt
   başlığı TÜM sayfalarda paylaşılıyor — tek satır düzeltmesi hepsini hizalar. */
.tm-page-header__subtitle { color: var(--pro-ink-2) !important; font-size: var(--tm-type-caption, 12px) !important; }

/* ---------- VERİ TABLOLARI — profesyonel görünümün kalbi ----------
   2026-09-13 (design(live) Faz 4b): DS sayfalarında tablo artık ds-table.css'ten
   (.tm-table, .tm-row-h token'ı) gelir; bu !important kuralları .tm-ds içinde
   duruyordu (docs/ui-audit.md "Bölme 4a'yı açıyor mu?" ölçümü, Canlı/Siparişler
   için 4b/4c'de tekrar). `:where()` özgüllüğü değiştirmediği için .tm-ds
   OLMAYAN sayfalar birebir aynı kalır. */
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table):where(:not(.tm-ds *)) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
/* Başlık satırı: küçük, muted, uppercase, ince alt-çizgi */
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table):where(:not(.tm-ds *)) thead th {
  background: #fafbfd !important;
  color: var(--pro-ink-3) !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .045em !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--pro-line) !important;
  white-space: nowrap;
}
/* Gövde hücreleri: ferah, okunur, ince ayırıcı */
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table):where(:not(.tm-ds *)) tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--pro-line-soft) !important;
  color: var(--pro-ink) !important;
  font-size: 13px !important;
  vertical-align: middle;
}
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table):where(:not(.tm-ds *)) tbody tr:last-child td {
  border-bottom: none !important;
}
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table):where(:not(.tm-ds *)) tbody tr {
  transition: background-color .14s ease;
}
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table):where(:not(.tm-ds *)) tbody tr:hover {
  background: #f7faff !important;
}

/* ---------- BUTONLAR — rafine, tutarlı (ağır gradient değil) ---------- */
.tmv2-page :where(.btn):where(:not(.tm-ds *)) {
  border-radius: var(--pro-radius-sm) !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.tmv2-page :where(.btn--primary, .btn-primary, .btn-baklava-primary, .tm-cta-btn, .btn--primary):where(:not(.tm-ds *)) {
  background: var(--pro-brand) !important;
  background-image: none !important;   /* rafine solid; ağır gradient kaldırıldı */
  border: 1px solid var(--pro-brand) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.06) !important;
}
.tmv2-page :where(.btn--primary:hover, .btn-primary:hover, .btn-baklava-primary:hover, .tm-cta-btn:hover, .btn--primary:hover):where(:not(.tm-ds *)) {
  background: var(--pro-brand-2) !important;
  border-color: var(--pro-brand-2) !important;
  transform: translateY(-1px);
}
.tmv2-page :where(.btn--outline-secondary, .btn--outline-primary, .btn-baklava-outline, .btn--secondary):where(:not(.tm-ds *)) {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  color: var(--pro-ink-2) !important;
}
.tmv2-page :where(.btn--outline-secondary:hover, .btn--outline-primary:hover, .btn-baklava-outline:hover):where(:not(.tm-ds *)) {
  border-color: #cdd5e0 !important; color: var(--pro-ink) !important; background: #fbfcfe !important;
}

/* ---------- INPUT / SELECT — temiz, tutarlı ---------- */
.tmv2-page :where(.form-control, .tm-input, .en-input, input:not([type=checkbox]):not([type=radio]), select, textarea):where(:not(.tm-ds *)) {
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius-sm) !important;
  color: var(--pro-ink) !important;
  background: var(--pro-surface) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tmv2-page :where(.form-control:focus, .tm-input:focus, .en-input:focus, input:focus, select:focus, textarea:focus):where(:not(.tm-ds *)) {
  border-color: var(--pro-brand) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb,1,117,228),.12) !important;
  outline: none !important;
}

/* ---------- STAT / KPI kartları — rafine, ölçülü renk ---------- */
.tmv2-page :where(.en-stat, .tm-alerts-stat, .xstat, .bb-stat, .kpi-card:not(.accent)):where(:not(.tm-ds *)){
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
  background: var(--pro-surface) !important;
}

/* Giriş animasyonu KALDIRILDI (2026-09-13, çift-yükleme bug'ı — Fix A).
   `proRise` her `.kpi-card` için iki kez oynuyordu: önce SSR yer-tutucu
   (.kpi-card--ph), sonra TMKpi.render'ın bastığı gerçek kart (ölçüldü:
   Genel Bakış hard-load'da proRise 5 + 4). Kullanıcı kararı (hedef dil):
   dekoratif giriş animasyonu yok, hareket yalnız kullanıcı eylemine tepki.
   Keyframe adı başka dosyalarda referanslanmıyor; blok bütünüyle çıkarıldı. */
@media (prefers-reduced-motion: reduce) {
  .tmv2-page * { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   GENEL BAKIŞ İYİLEŞTİRME 2026-07-29 (Canlı Performans ile tutarlı)
   ══════════════════════════════════════════════════════════════ */
/* 1) KPI kartları DENGELİ → 5 eşit sütun (featured Ciro aşırı-geniş değil) */
@media (min-width: 1100px) {
  .tmv2-dashboard .kpi-grid:where(:not(.tm-ds *)),
#overviewTab .kpi-grid:where(:not(.tm-ds *)) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
/* 2) Boş-durum ikonları GLOBAL marka-yumuşak daire (bilgilendirici/canlı) —
   overview donut/chart empty + tüm .tm-live-empty kullanan sayfalar */
.tm-live-empty svg,
.tm-live-empty [data-lucide] {
  color: var(--pro-brand, #0175e4) !important;
  background: var(--tm-primary-soft, #e8f3ff);
  border-radius: 50%;
  padding: 12px !important;
  box-sizing: content-box;
  width: 28px !important; height: 28px !important;
}