/* ==============================================================
   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,
.xfh-m, .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, .xfh-m: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 ---- */
.btn--primary, .btn-primary, .btn-baklava-primary, .tm-cta-btn {
  background-image: linear-gradient(135deg, var(--color-primary, #0175e4), var(--color-primary-hover, #0163c2));
}
.btn--primary:hover, .btn-primary:hover, .btn-baklava-primary:hover, .tm-cta-btn:hover {
  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 tbody tr:hover,
.en-table tbody tr:hover,
.xtable tbody tr:hover,
.tm-alerts-tbl tbody tr:hover,
table.table tbody tr:hover {
  background: var(--tmx-row-hover);
}

/* ---- Input/select/textarea odak: yumuşak marka halkası ---- */
.form-control:focus, .tm-input:focus, .en-input:focus,
.tm-control:focus, input:focus, select:focus, textarea:focus {
  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-head
   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ık kartı: aşırı yükseklik/padding → kompakt (tüm sayfalarda) */
.tm-page-head {
  padding: 13px 16px !important;
  min-height: 0 !important;
  margin-bottom: 2px !important;
}
.tm-page-sub { 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, .tmv2-panel, .tmv2-dash-panel, .overview-widget-panel,
.ch-panel, .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), .en-stat, .tm-alerts-stat, .xstat, .bb-stat,
.tmv2-metric-card, .metric-card {
  border-radius: 14px !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, .tmv2-panel, .tmv2-dash-panel, .overview-widget-panel, .ch-panel,
.tm-card, .cpk-card, .tm-live-orders-card, .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 { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
/* 4) TÜM birincil butonlar → tek gradient materyal (zaten kısmen; pekiştir) */
.btn--primary, .btn-primary, .btn-baklava-primary, .tm-cta-btn, .tm-headbtn--cta {
  border: none !important;
  background-image: linear-gradient(135deg, var(--color-primary,#0175e4), var(--color-primary-hover,#0163c2)) !important;
  color: #fff !important;
}