/* =================================================================
   TRENDMETRIK v2 — CANLI PERFORMANSIM
   Sadece bu sayfaya özel ufak yardımcılar. Kart/KPI/buton/tablo/chip
   global tm-* bileşenleri kullanılır; burada ekstra stil yok.
   ================================================================= */

/* Sayfa kapsayıcısı — tipografi ve sayı disiplini buradan kalıtılır.
   .tm-page sınıfı zaten var; .tm-live-page sadece dikey yığın + canlı sayfa kuralları. */
.tm-live-page {
  display: flex; flex-direction: column;
  gap: var(--tm-space-5);
  /* Inter varsayılan; tabular nums ve stylistic set'ler — Inter'in numerik düzgün
     görünmesi için (cv11 = düz "1", ss01 = açık alternatifler). Geri dönüşler güvenli. */
  font-feature-settings: "cv11", "ss01";
}
/* Mobilde floating WhatsApp/chat butonu son içeriği kapatmasın */
@media (max-width: 720px) {
  .tm-live-page { padding-bottom: 84px; }

  /* Sipariş tablosu mobilde yatay scroll — "Saat" kolonu sticky:
     kullanıcı tabloyu yana kaydırırken sipariş zamanı her zaman görünür kalır. */
  .tm-live-tbl thead th:first-child,
  .tm-live-tbl tbody td:first-child {
    position: sticky; left: 0;
    background: var(--tm-surface);
    box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
    z-index: 1;
  }
  .tm-live-tbl thead th:first-child {
    background: var(--tm-surface-sunken);
  }

  /* Hourly chart toggle chip'leri mobilde kompakt (Sipariş/Ciro/Kâr) */
  .tm-live-page .tm-live-segs .tm-chip {
    padding: 4px 10px;
    font-size: var(--tm-text-xs);
  }
}

/* First-time empty state — tablo veya top ürün boşken görsel olarak değer aktar */
.tm-live-empty--firsttime {
  background: linear-gradient(135deg, rgba(1,117,228,0.04) 0%, rgba(34,197,94,0.03) 60%, var(--tm-surface) 100%);
  border-radius: var(--tm-radius-md);
}
.tm-live-empty--firsttime .tm-live-empty__title { color: var(--tm-brand-500); }
.tm-live-page :where(.tm-kpi__value, .num, .tm-cell-pos, .tm-cell-neg, .tm-mono, [data-bind="value"]) {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ---------- HEADER ---------- */
/* Pulseline (istatistik şeridi) solda, yenileme kontrolleri sağda — space-between.
   ≤720px: sütun; önce metrik bandı, altında araç çubuğu (DOM sırası). */
.tm-live-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-3);
  padding-bottom: 0;
  border-bottom: 0;
  min-width: 0;
}
.tm-live-header > .tm-live-pulseline {
  flex: 0 1 auto;
  min-width: 0;
  order: 0;
}
.tm-live-header > .tm-live-header__row {
  flex: 0 0 auto;
  min-width: 0;
  order: 1;
}
/* Başlık global header'da gösterildiği için sayfa içi h1 kaldırıldı —
   kontrol satırı sağ blokta sağa hizalansın. */
.tm-live-header__row--controls-only { justify-content: flex-end; }
.tm-live-header__row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--tm-space-3);
  min-width: 0;
}
.tm-live-title {
  display: inline-flex; align-items: center; gap: var(--tm-space-3);
  margin: 0; min-width: 0; flex: 1 1 auto;
}
.tm-live-title__text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* Brand pulse — yavaş, alarm değil */
.tm-live-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tm-brand-500); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-brand-500) 50%, transparent);
  animation: tmLivePulse 2.4s ease-out infinite;
}
@keyframes tmLivePulse {
  0%   { box-shadow: 0 0 0 0  color-mix(in srgb, var(--tm-brand-500) 50%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0  transparent; }
}
@media (prefers-reduced-motion: reduce) { .tm-live-pulse { animation: none; } }

.tm-live-controls {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tm-space-2);
  flex-shrink: 0;
}
.tm-live-iconbtn { width: 32px; padding: 0; }

/* Status pill */
.tm-live-status {
  display: inline-flex; align-items: center; gap: var(--tm-space-2);
  padding: 6px var(--tm-space-3);
  font-size: var(--tm-text-xs);
  color: var(--tm-text-secondary);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-md);
  font-variant-numeric: tabular-nums;
  height: 32px; line-height: 1;
  max-width: 220px;
}
.tm-live-status[data-state="error"]  { color: var(--tm-bad);  background: var(--tm-bad-bg);  border-color: var(--tm-bad-border); }
.tm-live-status[data-state="stale"]  { color: var(--tm-warn); background: var(--tm-warn-bg); border-color: var(--tm-warn-border); }
.tm-live-status[data-state="paused"] { border-style: dashed; color: var(--tm-text-muted); }
.tm-live-status__text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.tm-live-status__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tm-brand-500); flex: none;
  transition: transform var(--tm-dur-1) var(--tm-ease);
}
.tm-live-status[data-state="error"]  .tm-live-status__dot { background: var(--tm-bad); }
.tm-live-status[data-state="stale"]  .tm-live-status__dot { background: var(--tm-warn); }
.tm-live-status[data-state="paused"] .tm-live-status__dot { background: var(--tm-text-muted); }
.tm-live-status__dot.is-tickling { transform: scale(1.6); }

/* ---------- PULSELINE — hero stat strip (Son sipariş / Saatlik hız / İptal-iade)
   2026-05-13: küçük 10.5px etiketler + sıkışık pill'ler yerine ferah, okunaklı
   hero strip. Stat'lar aynı border ile birleşik bir bant gibi görünür. */
.tm-live-pulseline {
  display: flex; flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-md);
  background: var(--tm-surface);
  overflow: hidden;
  width: max-content;
  max-width: 100%;
}
.tm-live-stat {
  display: inline-flex; flex-direction: column;
  gap: 2px;
  padding: 9px var(--tm-space-4);
  min-width: 0; max-width: 100%;
  flex: 0 1 auto;
  position: relative;
  /* Stat'lar arası ince ayraç */
  border-right: 1px solid var(--tm-border);
}
.tm-live-stat:last-child { border-right: none; }
.tm-live-stat__label {
  font-size: var(--tm-text-xs);
  color: var(--tm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--tm-weight-semibold);
  line-height: 1.2;
}
.tm-live-stat__value {
  font-size: var(--tm-text-base);
  color: var(--tm-text-primary);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 0 1 auto;
  line-height: 1.2;
}

/* Kart başlığında metrik toggle */
.tm-live-segs { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- HEADER RESPONSIVE ---------- */

/* Tablet (≤960px): status text gizle, kontrolleri sıkıştır */
@media (max-width: 960px) {
  .tm-live-status { max-width: 140px; }
}

/* Phone wide (≤720px): header sütun; status sadece dot, refresh sadece ikon */
@media (max-width: 720px) {
  .tm-live-header {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    gap: var(--tm-space-2);
  }
  .tm-live-header > .tm-live-pulseline { order: 0; width: 100%; }
  .tm-live-header > .tm-live-header__row { order: 1; justify-content: flex-start; }
  .tm-live-header__row--controls-only { justify-content: flex-start; }
  .tm-live-status__text { display: none; }
  .tm-live-status { padding: 0; width: 32px; height: 32px;
    justify-content: center; max-width: none; }
  .tm-live-status__dot { width: 8px; height: 8px; }
  .tm-live-btn-label { display: none; }
  /* nowrap idi — çok dar ekranlarda taşıyordu; doğal sarmaya bırak */
  .tm-live-controls { flex-wrap: wrap; gap: 6px; }
  .tm-live-select { flex: 0 0 auto; }
}

/* Tablet (721–960px): yan yana kalır; pulseline sıkışabilsin */
@media (max-width: 960px) and (min-width: 721px) {
  .tm-live-header > .tm-live-pulseline {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
}

/* Phone narrow (≤480px): stat'lar daha kompakt, hâlâ yan yana 3 kolon */
@media (max-width: 480px) {
  .tm-live-stat { padding: 7px var(--tm-space-3); }
  .tm-live-stat__label { font-size: 10px; }
  .tm-live-stat__value { font-size: var(--tm-text-sm); }
}

/* Çok dar ekranlar (≤360px): toolbar kontrolleri sığacak şekilde ufak */
@media (max-width: 360px) {
  .tm-live-select {
    height: 30px; padding: 0 24px 0 var(--tm-space-2);
    font-size: 11px;
    background-position: right 8px center;
  }
  .tm-live-iconbtn { width: 30px; }
  #tmLiveRefresh { padding: 0 var(--tm-space-2); height: 30px; }
}

/* KPI kartında değer değişince hafif flash */
.tm-kpi.is-flashing { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tm-brand-500) 30%, transparent); }
.tm-kpi.is-flashing .tm-kpi__value { animation: tmLiveFlash 1100ms var(--tm-ease) 1; }
@keyframes tmLiveFlash {
  0%   { background: color-mix(in srgb, var(--tm-brand-500) 18%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .tm-kpi.is-flashing .tm-kpi__value { animation: none; } }

/* Sparkline canvas — KPI kartının altına flush */
.tm-live-spark {
  display: block; width: calc(100% + 2 * var(--tm-space-5));
  height: 32px;
  margin: var(--tm-space-2) calc(-1 * var(--tm-space-5)) calc(-1 * var(--tm-space-4));
}

/* Charts row */
.tm-live-charts {
  display: grid; gap: var(--tm-card-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .tm-live-charts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.tm-live-chartbox { position: relative; height: 280px; }

/* Doughnut + ortadaki etiket */
.tm-live-doughnut {
  display: grid; gap: var(--tm-space-4); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .tm-live-doughnut { grid-template-columns: 200px minmax(0, 1fr); }
}
.tm-live-doughnut__chart {
  position: relative; width: 100%; max-width: 220px; aspect-ratio: 1; margin: 0 auto;
}
.tm-live-doughnut__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
}
.tm-live-doughnut__center-label {
  font-size: var(--tm-text-xs); color: var(--tm-text-muted);
  letter-spacing: var(--tm-tracking-wide); text-transform: uppercase;
  font-weight: var(--tm-weight-semibold);
}
.tm-live-doughnut__center-value {
  font-size: var(--tm-text-xl);
  font-weight: var(--tm-weight-bold);
  color: var(--tm-text-primary);
  letter-spacing: var(--tm-tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1; margin-top: 2px;
}
.tm-live-doughnut__center-sub {
  font-size: var(--tm-text-xs); color: var(--tm-text-muted);
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.tm-live-legend { display: flex; flex-direction: column; gap: var(--tm-space-1); font-size: var(--tm-text-xs); }
.tm-live-legend__row {
  display: grid; grid-template-columns: 12px 1fr auto auto;
  gap: var(--tm-space-3); align-items: center;
  padding: 6px var(--tm-space-2);
  border-radius: var(--tm-radius-md);
}
.tm-live-legend__row:hover { background: var(--tm-surface-sunken); }
.tm-live-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tm-text-muted); }
.tm-live-legend__name { color: var(--tm-text-primary); }
.tm-live-legend__value { color: var(--tm-text-primary); font-weight: var(--tm-weight-semibold); font-variant-numeric: tabular-nums; }
.tm-live-legend__pct { color: var(--tm-text-muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.tm-live-legend__row.is-empty { color: var(--tm-text-muted); justify-content: center; padding: var(--tm-space-3); }

/* Pazaryeri pill (renk noktası + ad) */
.tm-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--tm-text-xs); color: var(--tm-text-secondary);
  font-weight: var(--tm-weight-semibold); white-space: nowrap;
}
.tm-live-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-text-muted); }
.tm-live-pill[data-platform="trendyol"]    .tm-live-pill__dot { background: #f27a1a; }
.tm-live-pill[data-platform="hepsiburada"] .tm-live-pill__dot { background: #ff6000; }
.tm-live-pill[data-platform="n11"]         .tm-live-pill__dot { background: #fdc500; }
.tm-live-pill[data-platform="pazarama"]    .tm-live-pill__dot { background: #6f3df5; }

/* Top ürünler listesi */
.tm-live-rank { display: flex; flex-direction: column; }
.tm-live-rank__row {
  display: grid; grid-template-columns: 18px 36px minmax(0,1fr) auto;
  gap: var(--tm-space-3); align-items: center;
  padding: var(--tm-space-3) 0;
  border-bottom: 1px solid var(--tm-border);
}
.tm-live-rank__row:last-child { border-bottom: none; }
.tm-live-rank__num { font-family: var(--tm-font-mono); font-size: var(--tm-text-xs); color: var(--tm-text-muted); text-align: right; }
.tm-live-rank__img {
  width: 36px; height: 36px; border-radius: var(--tm-radius-md);
  background: var(--tm-surface-sunken); border: 1px solid var(--tm-border);
  object-fit: cover;
}
.tm-live-rank__img--ph {
  display: flex; align-items: center; justify-content: center; color: var(--tm-text-disabled);
}
.tm-live-rank__name {
  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-live-rank__meta { font-size: var(--tm-text-xs); color: var(--tm-text-muted); margin-top: 2px; display: flex; gap: var(--tm-space-2); align-items: center; }
.tm-live-rank__metric { font-variant-numeric: tabular-nums; font-weight: var(--tm-weight-semibold); white-space: nowrap; }

/* Tablo: yeni satır vurgu */
.tm-live-tbl tbody tr.is-new {
  animation: tmLiveRowFlash 1500ms var(--tm-ease) 1;
}
@keyframes tmLiveRowFlash {
  0%   { background: color-mix(in srgb, var(--tm-brand-500) 14%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .tm-live-tbl tbody tr.is-new { animation: none; } }

/* Tıklanabilir sipariş satırı: pointer + klavye odak halkası */
.tm-live-tbl tbody tr[data-clickable] { cursor: pointer; }
.tm-live-tbl tbody tr[data-clickable]:focus-visible {
  outline: 2px solid var(--tm-brand-500);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--tm-brand-500) 8%, transparent);
}

/* Sıralanabilir başlık ok işareti */
.tm-live-tbl thead th.is-sortable { cursor: pointer; user-select: none; }
.tm-live-tbl thead th.is-sortable:hover { color: var(--tm-text-primary); }
.tm-live-tbl thead th[aria-sort="ascending"]::after,
.tm-live-tbl thead th[aria-sort="descending"]::after {
  content: ""; display: inline-block;
  width: 0; height: 0; margin-left: 4px; vertical-align: middle;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.tm-live-tbl thead th[aria-sort="ascending"]::after  { border-bottom: 5px solid var(--tm-text-primary); }
.tm-live-tbl thead th[aria-sort="descending"]::after { border-top:    5px solid var(--tm-text-primary); }

/* Ürün hücresi: küçük resim + isim */
.tm-live-product { display: flex; align-items: center; gap: var(--tm-space-3); min-width: 0; }
.tm-live-product__img {
  width: 28px; height: 28px; border-radius: var(--tm-radius-sm);
  background: var(--tm-surface-sunken); border: 1px solid var(--tm-border);
  object-fit: cover; flex: none;
}
.tm-live-product__name {
  min-width: 0; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Mağaza linki — etiketli buton, ürün adından sonra */
.tm-live-product__go {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; flex: none;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-brand-50, #fff7ed);
  color: var(--tm-brand-600, #ea580c);
  border: 1px solid var(--tm-brand-100, #ffedd5);
  font-size: 12px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  line-height: 1;
  transition: color var(--tm-dur-1) var(--tm-ease),
              background var(--tm-dur-1) var(--tm-ease),
              border-color var(--tm-dur-1) var(--tm-ease),
              transform .08s ease;
}
.tm-live-product__go-icon { width: 14px; height: 14px; flex: none; }
.tm-live-product__go-ext  { width: 11px; height: 11px; flex: none; opacity: .7; }
.tm-live-product__go-label { white-space: nowrap; }
.tm-live-product__go:hover,
.tm-live-product__go:focus-visible {
  background: var(--tm-brand-600, #ea580c);
  color: #fff;
  border-color: var(--tm-brand-600, #ea580c);
  outline: none;
}
.tm-live-product__go:hover .tm-live-product__go-ext { opacity: 1; }
.tm-live-product__go:active { transform: translateY(1px); }

/* Mobile (kart modu, ≤720px) — buton tam genişlik, daha okunabilir */
@media (max-width: 720px) {
  .tm-live-product__go {
    width: 100%;
    justify-content: center;
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 4px;
  }
  .tm-live-product__go-icon { width: 16px; height: 16px; }
  .tm-live-product__go-ext  { width: 12px; height: 12px; }
}

/* Dark mode */
.dark-mode .tm-live-product__go {
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.3);
}
.dark-mode .tm-live-product__go:hover,
.dark-mode .tm-live-product__go:focus-visible {
  background: #ea580c;
  color: #fff;
  border-color: #ea580c;
}

/* Durum etiketi (renk + ikon + metin) */
.tm-live-state-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--tm-radius-full);
  font-size: var(--tm-text-xs); font-weight: var(--tm-weight-semibold);
  background: var(--tm-ok-bg); color: var(--tm-ok);
}
.tm-live-state-badge[data-status="cancelled"] { background: var(--tm-bad-bg);  color: var(--tm-bad); }
.tm-live-state-badge[data-status="returned"]  { background: var(--tm-warn-bg); color: var(--tm-warn); }

/* Tablo footer */
.tm-live-tblfoot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--tm-space-3) var(--tm-space-4);
  border-top: 1px solid var(--tm-border);
  font-size: var(--tm-text-xs); color: var(--tm-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Mobilde tablo → kart */
@media (max-width: 720px) {
  /* Kart moduna geçince yatay scroll'u kapat — yoksa boş scrollbar görünüyor */
  .tm-live-page .tm-table-scroll {
    overflow-x: visible;
    padding: var(--tm-space-2) var(--tm-space-3);
  }
  .tm-live-tbl thead { display: none; }
  .tm-live-tbl, .tm-live-tbl tbody, .tm-live-tbl tr, .tm-live-tbl td { display: block; width: 100%; }
  /* tbody'i flex column yap → kartlar arası gap ile boşluk verilir */
  .tm-live-tbl tbody { display: flex; flex-direction: column; gap: var(--tm-space-2); }
  .tm-live-tbl tbody tr {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-md);
    margin: 0; /* eski yatay margin offset'i kaldırıldı; gap tbody'de */
    padding: var(--tm-space-3);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "time   pill   status"
      "prod   prod   prod"
      "ord    price  net";
    column-gap: var(--tm-space-3); row-gap: var(--tm-space-2);
  }
  /* Empty state row (colspan'lı tek td) — kart grid kurallarını uygulama */
  .tm-live-tbl tbody tr:has(td[colspan]) {
    display: block; padding: 0; border: none; background: transparent;
  }
  .tm-live-tbl tbody td { padding: 0; border: none; }
  .tm-live-tbl tbody td[data-cell="time"]    { grid-area: time;   font-family: var(--tm-font-mono); font-size: var(--tm-text-xs); color: var(--tm-text-muted); }
  .tm-live-tbl tbody td[data-cell="pill"]    { grid-area: pill;   min-width: 0; overflow: hidden; }
  .tm-live-tbl tbody td[data-cell="status"]  { grid-area: status; text-align: right; }
  .tm-live-tbl tbody td[data-cell="product"] { grid-area: prod;   min-width: 0; }
  .tm-live-tbl tbody td[data-cell="order"]   { grid-area: ord;    font-family: var(--tm-font-mono); font-size: var(--tm-text-xs); color: var(--tm-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-live-tbl tbody td[data-cell="price"]   { grid-area: price;  text-align: right; font-variant-numeric: tabular-nums; }
  .tm-live-tbl tbody td[data-cell="profit"]  { grid-area: net;    text-align: right; font-variant-numeric: tabular-nums; }
  .tm-live-tbl tbody td[data-cell="margin"]  { display: none; }

  /* Mobil kart modunda ürün adı tam genişlik kullansın */
  .tm-live-page .tm-live-product__name { max-width: none; }

  /* Tablo footer'ı dikey diz */
  .tm-live-tblfoot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tm-space-2);
    text-align: center;
  }
}

/* Empty state */
.tm-live-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--tm-space-10) var(--tm-space-4);
  gap: var(--tm-space-3); color: var(--tm-text-secondary);
}
.tm-live-empty svg { width: 64px; height: 64px; color: var(--tm-text-disabled); }
.tm-live-empty__title { font-size: var(--tm-text-base); font-weight: var(--tm-weight-semibold); color: var(--tm-text-primary); }
.tm-live-empty__hint { font-size: var(--tm-text-xs); color: var(--tm-text-muted); font-variant-numeric: tabular-nums; }

/* Loading flag — gerçek skeleton görünümü `.tm-skel` çocuk elementlerinden geliyor */

/* Yenileme aralığı select — buton yüksekliğine hizalı */
.tm-live-select {
  appearance: none; -webkit-appearance: none;
  height: 32px; padding: 0 28px 0 var(--tm-space-3);
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-xs); font-weight: var(--tm-weight-semibold);
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-md);
  background:
    var(--tm-surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2371717a' stroke-width='1.6' d='M1 1l4 4 4-4'/></svg>")
    no-repeat right 10px center;
  color: var(--tm-text-primary); cursor: pointer;
}
.tm-live-select:focus-visible { outline: none; box-shadow: var(--tm-ring); border-color: var(--tm-brand-400); }

/* ---------- KPI GRID RESPONSIVE ----------
   Page renders exactly 4 KPI tiles (Sipariş, Ciro, Net Kâr, Marj). Using
   `auto-fit, minmax(240px, 1fr)` produced a 3+1 lonely card in the
   ~800–1199px viewport range (3 columns fit, 4th drops to a second row).
   Explicit breakpoints (4 → 2 → 1, 3 cols deliberately skipped) keep the
   row balanced at every width. Mirrors the same 5/3/2/1 strategy used in
   #overviewTab .tm-kpi-grid--primary. */
.tm-live-page .tm-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .tm-live-page .tm-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tm-live-page .tm-kpi-row { gap: var(--tm-space-2); }
  .tm-live-page .tm-kpi { padding: var(--tm-space-3) var(--tm-space-4); min-height: 96px; }
  .tm-live-page .tm-kpi__value { font-size: var(--tm-text-lg); }
  /* Mobilde sparkline çok küçük kaldığı için gizle */
  .tm-live-page .tm-live-spark { display: none; }
}
@media (max-width: 420px) {
  .tm-live-page .tm-kpi-row { grid-template-columns: 1fr; }
}

/* ---------- FİLTRE BARI: live page özelinde temizlenmiş ----------
   2026-05-13: Pazaryeri/Durum chip'leri label'lı gruplara alındı; "Yalnız
   zarar" görsel olarak ayrıştı (negatif aksiyon — accent kırmızı). */
.tm-live-filterbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--tm-space-3);
  padding: var(--tm-space-3) var(--tm-space-4);
  border-top: 1px solid var(--tm-border);
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-surface-sunken);
}
/* Eski divider yerine semantic group label + ince visual ayraç */
.tm-live-filterbar__divider {
  width: 1px; height: 18px;
  background: var(--tm-border-strong);
  display: none;
}
.tm-live-filtergroup {
  display: inline-flex; align-items: center;
  flex-wrap: wrap; gap: 6px;
  padding: 0 0 0 var(--tm-space-3);
  border-left: 1px solid var(--tm-border);
}
.tm-live-filtergroup:first-of-type { border-left: none; padding-left: 0; }
.tm-live-filtergroup__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tm-text-muted);
  margin-right: 4px;
  flex: none;
}
/* Pazaryeri filtresi dropdown'u — tüm bağlı pazaryerlerini (amazon/idefix dahil)
   dinamik gösterir; eski sabit chip seti taşmadan tek kontrolde toplandı. */
.tm-live-platform-select {
  appearance: none;
  -webkit-appearance: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--tm-text);
  background-color: var(--tm-surface, #fff);
  border: 1px solid var(--tm-border);
  border-radius: 8px;
  padding: 5px 26px 5px 10px;
  cursor: pointer;
  line-height: 1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.tm-live-platform-select:hover { border-color: var(--tm-border-strong, #cbd5e1); }
.tm-live-platform-select:focus-visible {
  outline: 2px solid var(--tm-accent, #4338ca);
  outline-offset: 1px;
}
/* "Yalnız zarar" — özel negatif filtre chip'i, görsel olarak ayrışır */
.tm-live-page .tm-chip--loss {
  margin-left: auto;
  border: 1px dashed var(--tm-border-strong);
  color: var(--tm-text-secondary);
  background: transparent;
  display: inline-flex; align-items: center; gap: 5px;
}
.tm-live-page .tm-chip--loss:hover {
  border-color: rgba(239,68,68,0.45);
  color: #b91c1c;
}
.tm-live-page .tm-chip--loss[aria-pressed="true"] {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.36) !important;
  color: #b91c1c;
}

/* Search input — global tm-input pattern'iyla hizalı, klipsleme yok */
.tm-live-search {
  flex: 1 1 220px; min-width: 0; max-width: 320px;
  position: relative; display: flex;
}
.tm-live-search input {
  width: 100%; height: 32px;
  padding: 0 var(--tm-space-3) 0 30px;
  font-family: var(--tm-font-sans); font-size: var(--tm-text-sm);
  color: var(--tm-text-primary);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-md);
  background: var(--tm-surface);
  transition: border-color var(--tm-dur-1) var(--tm-ease), box-shadow var(--tm-dur-1) var(--tm-ease);
}
.tm-live-search input:focus {
  outline: none;
  border-color: var(--tm-brand-400);
  box-shadow: var(--tm-ring);
}
.tm-live-search__icon {
  position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%);
  color: var(--tm-text-muted); pointer-events: none;
}
.tm-live-search input::placeholder { color: var(--tm-text-muted); }

/* Mobilde arama tam genişlik (en üst satır), gruplar 100% basis ile alt alta */
@media (max-width: 720px) {
  .tm-live-filterbar { padding: var(--tm-space-3); gap: 8px; }
  .tm-live-search { flex: 1 1 100%; max-width: none; order: -1; }
  /* Chip'leri biraz sıkıştır — 10+ chip 4 satıra taşmasın */
  .tm-live-page .tm-live-filterbar .tm-chip {
    padding: 4px 10px;
    font-size: var(--tm-text-xs);
    line-height: 1.4;
  }
  /* Group'lar mobilde stack — ayraç border kaldır, label inline kalır */
  .tm-live-filtergroup {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: none;
  }
  .tm-live-filtergroup__label { font-size: 10px; margin-right: 6px; }
  .tm-live-page .tm-chip--loss { margin-left: 0; }
}

/* ---------- KART BAŞLIĞINDA segmented control'ün taşma davranışı ---------- */
@media (max-width: 720px) {
  .tm-card__header { flex-wrap: wrap; padding: var(--tm-space-3) var(--tm-space-4); }
  .tm-card__body   { padding: var(--tm-space-4); }
  .tm-live-segs    { width: 100%; }
}

/* ---------- BOŞ DURUM iyileştirmeleri ---------- */
.tm-live-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--tm-space-8) var(--tm-space-4);
  gap: var(--tm-space-3);
  color: var(--tm-text-secondary);
}
.tm-live-empty svg { width: 56px; height: 56px; color: var(--tm-text-disabled); flex: none; }
.tm-live-empty__title {
  font-size: var(--tm-text-base); font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
}
.tm-live-empty__body {
  font-size: var(--tm-text-sm); color: var(--tm-text-secondary);
  max-width: 40ch; line-height: var(--tm-leading-snug);
}
.tm-live-empty__hint {
  font-size: var(--tm-text-xs); color: var(--tm-text-muted);
  font-variant-numeric: tabular-nums;
  background: var(--tm-surface-sunken);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-md);
  padding: 6px var(--tm-space-3);
  margin-top: var(--tm-space-2);
}
.tm-live-empty__actions {
  display: flex; gap: var(--tm-space-2); margin-top: var(--tm-space-2); flex-wrap: wrap; justify-content: center;
}

/* Top ürünler boş durumu daha görsel — ayrı bar-chart SVG (tmLiveEmptyArtRank)
   ve marka rengi ile siparişler tablosundaki "Bugün için henüz sipariş yok"
   empty state'inden ayrışır. Renk tokenı brand-500; opacity ile gözde
   yumuşatılmış, ikisi de hem light hem dark modda okunabilir. */
.tm-live-rank__empty { padding: var(--tm-space-6) var(--tm-space-4); }
.tm-live-rank__empty svg { color: var(--tm-brand-500); opacity: 0.55; }

/* Cold-start delta chip varyantı (henüz baseline yok) */
.tm-kpi__delta--cold {
  background: transparent;
  color: var(--tm-text-disabled);
  border: 1px dashed var(--tm-border);
}

/* ---------- SKELETON KEYFRAME ---------- */
@keyframes tmLiveSkel {
  0%   { opacity: .55; }
  50%  { opacity: .85; }
  100% { opacity: .55; }
}

/* ---------- ORTAK SKELETON ---------- */
.tm-skel {
  display: inline-block;
  background: var(--tm-ink-100);
  border-radius: var(--tm-radius-sm);
  color: transparent;
  vertical-align: middle;
  animation: tmLiveSkel 1.4s ease-in-out infinite;
}
.tm-skel--text   { width: 90px;  height: 1em; }
.tm-skel--num    { width: 70px;  height: 1em; }
.tm-skel--wide   { width: 160px; height: 1em; }

@media (prefers-reduced-motion: reduce) {
  .tm-skel { animation: none; }
}

/* Saatlik chart placeholder bars */
.tm-live-chartskel {
  position: absolute; inset: var(--tm-space-3) var(--tm-space-2) var(--tm-space-6);
  display: flex; align-items: flex-end; gap: 1.6%;
  pointer-events: none;
}
.tm-live-chartskel > span {
  flex: 1 1 0; min-width: 0;
  background: var(--tm-ink-100);
  border-radius: var(--tm-radius-sm) var(--tm-radius-sm) 0 0;
  animation: tmLiveSkel 1.4s ease-in-out infinite;
}
.tm-live-chartbox[data-loading="1"] > canvas { visibility: hidden; }
.tm-live-chartbox:not([data-loading="1"]) .tm-live-chartskel { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tm-live-chartskel > span { animation: none; }
}

/* Doughnut placeholder ring + legend rows */
.tm-live-doughnut__skel {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: conic-gradient(var(--tm-ink-100), var(--tm-surface-sunken), var(--tm-ink-100));
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);
  pointer-events: none;
  animation: tmLiveSkel 1.4s ease-in-out infinite;
}
.tm-live-doughnut[data-loading="1"] .tm-live-doughnut__chart > canvas,
.tm-live-doughnut[data-loading="1"] .tm-live-doughnut__center { visibility: hidden; }
.tm-live-doughnut:not([data-loading="1"]) .tm-live-doughnut__skel { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tm-live-doughnut__skel { animation: none; }
}

/* Top ürün ve tablo satır skeleton'ları */
.tm-live-rank__row.is-skel,
.tm-live-tbl tbody tr.is-skel { pointer-events: none; }
.tm-live-rank__row.is-skel .tm-live-rank__img { background: var(--tm-ink-100); animation: tmLiveSkel 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tm-live-rank__row.is-skel .tm-live-rank__img { animation: none; }
}

/* ---------- DARK MODE polish ---------- */
[data-theme="dark"] .tm-live-status,
html.dark-mode .tm-live-status {
  background: var(--tm-surface-raised);
}
[data-theme="dark"] .tm-live-search input,
html.dark-mode .tm-live-search input {
  background: var(--tm-surface-raised);
}
[data-theme="dark"] .tm-live-select,
html.dark-mode .tm-live-select {
  background-color: var(--tm-surface-raised);
}
/* Pulseline stat alt çizgileri dark mode'da daha doygun border */
[data-theme="dark"] .tm-live-stat + .tm-live-stat,
html.dark-mode .tm-live-stat + .tm-live-stat {
  border-top-color: var(--tm-border-strong);
}
/* Filterbar mobil zemini dark mode'da gözden kaybolmasın */
[data-theme="dark"] .tm-live-filterbar,
html.dark-mode .tm-live-filterbar {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}

/* ---------- DOĞ̌RAMA: küçük tabletlerde doughnut layout (legend altta) ---------- */
@media (max-width: 960px) and (min-width: 720px) {
  .tm-live-doughnut { grid-template-columns: 1fr; }
  .tm-live-doughnut__chart { max-width: 200px; }
}

/* Card body mobile padding */
@media (max-width: 720px) {
  .tm-live-page .tm-card__body { padding: var(--tm-space-4) var(--tm-space-3); }
  .tm-live-page .tm-card__header { padding: var(--tm-space-3); }
  .tm-live-chartbox { height: 220px; }
  .tm-live-rank__row {
    padding: var(--tm-space-2) 0; gap: var(--tm-space-2);
    grid-template-columns: 16px 32px minmax(0,1fr) auto;
  }
  .tm-live-rank__img { width: 32px; height: 32px; }
  .tm-live-rank__name { font-size: var(--tm-text-sm); }
  /* Top ürün metric değerini küçük yazı + sığ paddingle altta tut */
  .tm-live-rank__metric { font-size: var(--tm-text-xs); }

  /* Card header'da başlık + chip'ler sığsın */
  .tm-live-page .tm-card__title { font-size: var(--tm-text-base); }
  .tm-live-page .tm-card__subtitle { font-size: var(--tm-text-xs); }

  /* Doughnut'u küçük tabletten daha geniş bırak — boş alan azalsın */
  .tm-live-doughnut__chart { max-width: 200px; }
}

/* Çok dar ekranlar: chart yüksekliği iyice küçük, doughnut center yazı tip da */
@media (max-width: 480px) {
  .tm-live-chartbox { height: 200px; }
  .tm-live-doughnut__chart { max-width: 180px; }
  .tm-live-doughnut__center-value { font-size: var(--tm-text-lg); }
  .tm-live-page .tm-kpi__value { font-size: var(--tm-text-base); }
  /* Top ürün satırında ürün adı uzun olunca taşmasın */
  .tm-live-rank__meta { flex-wrap: wrap; row-gap: 2px; }
}

/* =============================================================
   MOBILE REDESIGN — Canlı Performans (P1–P10)
   Scope: .tm-live-page (in-page) + body:has(.tm-live-page) (global FAB)
   Goal: 390/414/430px iPhone Safari'da ilk ekran = canlı durum +
         son sipariş özeti + 4 KPI; aşağıda kompakt grafikler.
   Bu blok sayfa içi mevcut kuralları override eder; alt taşma /
   kart yüksekliği / FAB çakışması düzeltmeleri burada toplanır.
   ============================================================= */

/* P3: Mobilde KPI grid'i her zaman 2 kolon — dar ekranda da Sipariş/
   Ciro/Net Kâr/Marj 2x2 olsun. Önceki kural ≤420px'te 1 kolona
   düşürüyordu; tek kolon = aşırı dikey scroll. */
@media (max-width: 480px) {
  .tm-live-page .tm-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--tm-space-2);
  }
  .tm-live-page .tm-kpi {
    padding: 10px 12px;
    min-height: 84px;
    gap: 4px;
  }
  .tm-live-page .tm-kpi__label {
    font-size: 10px;
    letter-spacing: 0.4px;
  }
  .tm-live-page .tm-kpi__value {
    font-size: var(--tm-text-base);
    line-height: 1.2;
  }
  /* P4: Delta + caption tek satır, taşma yok */
  .tm-live-page .tm-kpi__row {
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
  }
  .tm-live-page .tm-kpi__delta {
    font-size: 10.5px;
    padding: 1px 6px;
    flex: none;
  }
  .tm-live-page .tm-kpi__caption {
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* P2: Yenileme kontrolleri tek satır — status pill + select + pause +
   refresh aynı blokta yan yana. Çok dar ekranda yatay scroll'a izin
   ver (wrap yerine), zira KPI kartlarına geçmeden görsel düzen bozulmasın. */
@media (max-width: 480px) {
  .tm-live-page .tm-live-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .tm-live-page .tm-live-controls::-webkit-scrollbar { display: none; }
  /* Alt boşluk azalsın */
  .tm-live-page .tm-live-header { gap: var(--tm-space-2); }
  .tm-live-page .tm-live-header__row { gap: 6px; }
}

/* P6: Saatlik chart yüksekliği — kullanıcı 220-260px aralığı istedi.
   ≤480px için 200→240px (orta segment), ≤720px zaten 220px. */
@media (max-width: 480px) {
  .tm-live-page .tm-live-chartbox { height: 240px !important; }
}

/* P7: Pazaryeri donut'u mobilde daha kompakt + breakdown listesi
   altında kalsın. Doughnut layout zaten ≤960px'te 1-col grid;
   max-width burada düşürülür ki center value rahat okunsun. */
@media (max-width: 480px) {
  .tm-live-page .tm-live-doughnut {
    gap: var(--tm-space-3);
  }
  .tm-live-page .tm-live-doughnut__chart {
    max-width: 160px !important;
  }
  /* Center label/value/sub yığını korunsun, font ölçeği iniyor */
  .tm-live-page .tm-live-doughnut__center-label { font-size: 10px; }
  .tm-live-page .tm-live-doughnut__center-value { font-size: var(--tm-text-base); }
  .tm-live-page .tm-live-doughnut__center-sub { font-size: 10px; margin-top: 2px; }
  /* Legend (breakdown listesi) sıkı dikey */
  .tm-live-page .tm-live-legend { gap: 2px; }
  .tm-live-page .tm-live-legend__row {
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    padding: 4px var(--tm-space-2);
    gap: var(--tm-space-2);
    font-size: 11.5px;
  }
}

/* P8: Sayfa container spacing — masaüstünden devralınan space-5 boşluğu
   mobilde fazla. space-3'e düşür. Sidebar ile üst boşluk masaüstünde
   global header tarafından yönetiliyor; mobilde main-content'in zaten
   kendi padding'i var. Burada ek margin yok, sadece kartlar arası gap. */
@media (max-width: 480px) {
  .tm-live-page {
    gap: var(--tm-space-3);
  }
  .tm-live-page .tm-live-charts {
    gap: var(--tm-space-3);
  }
  /* Card header/body padding zaten mobilde küçültülmüş; sadece title
     boyutu daha kompakt tutulsun */
  .tm-live-page .tm-card__header { padding: var(--tm-space-3) var(--tm-space-3); gap: 6px; }
  .tm-live-page .tm-card__body { padding: var(--tm-space-3); }
  .tm-live-page .tm-card__title { font-size: var(--tm-text-sm); }
  .tm-live-page .tm-card__subtitle { font-size: 11px; }
}

/* P5: Floating destek/whatsapp/feedback grup mobilde içeriği kapatmasın.
   Live sayfasında yatay sıraya al + buton boyutunu küçült. 4 buton (+
   conditional back-to-top) ~36px yüksekliğinde tek satır → bottom 36px
   ~14px = ~50px viewport tüketimi (önceki dikey ~178px'den çok daha az).
   Kapsam body:has(.tm-live-page) — diğer sayfalar etkilenmez. */
@media (max-width: 480px) {
  body:has(.tm-live-page) .support-floating-buttons {
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }
  body:has(.tm-live-page) .support-floating-buttons .support-btn,
  body:has(.tm-live-page) .support-floating-buttons .whatsapp-btn,
  body:has(.tm-live-page) .support-floating-buttons .feedback-btn,
  body:has(.tm-live-page) .support-floating-buttons .backtotop-btn {
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
  body:has(.tm-live-page) .support-floating-buttons .support-btn i,
  body:has(.tm-live-page) .support-floating-buttons .whatsapp-btn i,
  body:has(.tm-live-page) .support-floating-buttons .feedback-btn i,
  body:has(.tm-live-page) .support-floating-buttons .backtotop-btn i,
  body:has(.tm-live-page) .support-floating-buttons .backtotop-btn svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }
}

/* P10: Yatay taşma garantisi — 390/414/430 viewport'larında min-width:0
   eksikliği nedeniyle bir kart genişlemeye yol açabilir. Page-level
   overflow guard. */
@media (max-width: 480px) {
  .tm-live-page,
  .tm-live-page > * {
    min-width: 0;
    max-width: 100%;
  }
  .tm-live-page .tm-card,
  .tm-live-page .tm-kpi {
    min-width: 0;
  }
}

/* =============================================================
   KPI GRID DOM STABİLİTESİ — Kartlar HER durumda yer tutar.
   Önceki davranış: API başarısızlığında JS grid'i display:none yapıyor;
   ya da insights / lucide / canvas reflow'u sırasında kullanıcı
   "kartlar yok oluyor sonra geliyor" hissi yaşıyordu.
   Çözüm:
     • Kart kendi min-height'ini sabitler — skeleton/loaded/empty/error
       arası geçiş yükseklik değiştirmez.
     • Grid'in min-height'i kart sayısına göre rezerve edilir, böylece
       kartlar içeriksiz olsa bile layout aşağı kaymaz.
     • İçerik value/delta/caption SLOT'larına min-height verilir → metin
       boş ("—") iken bile satır yüksekliği eşit.
   ============================================================= */

/* Kart min-height'i mode'a göre — base 108px (kpi.css'te zaten var) ama
   `tm-kpi` rule'u min-height: 108px tanımlı olduğunu doğrulayıp
   defensive override koymuyoruz. Sadece live page özelinde aşağıdaki
   slotlar metin boş iken bile dikey alan tutsun.
   NOT: Önceki sürümde `display: inline-flex` vardı — span çocukları
   (skeleton ve textContent) inline-flex ile render edilirken bazı
   tarayıcılarda 0 yükseklik / görünmez içerik üretiyordu. Sade
   block davranışına geri alındı. */
.tm-live-page .tm-kpi__value {
  min-height: 1.6em;
}
.tm-live-page .tm-kpi__row {
  min-height: 1.4em;
}

/* Loading state'inde kart kesinlikle GÖZ ALICI olsun — white-on-white
   asla — border belirgin, value/delta/caption skel'leri renkli zemin.
   Skeleton görünmediğinde kullanıcı kart yok zannediyor; bu rule fallback
   olarak garantili görünür placeholder sağlar. */
.tm-live-page .tm-kpi.tm-kpi--loading {
  border-color: var(--tm-border-strong, #d4d4d8);
  background: var(--tm-surface, #fff);
}
.tm-live-page .tm-kpi.tm-kpi--loading .tm-kpi__value,
.tm-live-page .tm-kpi.tm-kpi--loading .tm-kpi__delta,
.tm-live-page .tm-kpi.tm-kpi--loading .tm-kpi__caption {
  /* Skel child'ları parent'tan inheritlerse görünür rezerv olur */
  background-color: transparent;
}
/* tm-skel rengi düşmemiş bir token'a dayanmasın — fallback ile garanti et */
.tm-live-page .tm-skel {
  background: var(--tm-ink-100, #ececef);
}

/* KPI grid: base layout aspect-ratio değişmesin. Desktop 4-col + gap. */
.tm-live-page .tm-kpi-row {
  /* Bu min-height kartların kendi min-height'ı (108px) ile aynı —
     loading/empty/error state'lerde grid kaybolma garanti edilir. */
  min-height: 108px;
}

/* Mobil 2-col grid: 2 satır × 84px + gap = ~180px rezerv */
@media (max-width: 480px) {
  .tm-live-page .tm-kpi-row { min-height: 180px; }
  .tm-live-page .tm-kpi__value { min-height: 1.4em; }
}

/* Defensive: KPI grid dış kaynaklı script tarafından style="display:none"
   verilse bile layout'ta yer tutsun. !important burada bilinçli — 6
   ay sonra biri yine display:none ile gizlemeye çalışsa bile kartlar
   görünür kalır; gerçekten gizlemek isteyen `.tm-kpi-row.is-hidden`
   gibi açık bir class kullansın. */
.tm-live-page .tm-kpi-row[style*="display: none"],
.tm-live-page .tm-kpi-row[style*="display:none"] {
  display: grid !important;
}

/* =============================================================
   BRUTE-FORCE VISIBILITY GUARANTEE
   =============================================================
   Kullanıcı raporu: KPI kartları sayfa yüklenirken yok oluyor /
   görünmez oluyor. Token-tabanlı renkler bazı durumlarda
   resolve edilmiyor olabilir (theme-variables.css → tokens.css
   load-order, FOUC, dark-mode rule timing). Bu blok renkleri
   token-bağımsız sabit hex'lere bağlar; opacity/visibility'yi
   açık şekilde 1/visible yapar. !important kullanımı bilinçli —
   kullanıcı görünürlüğünü hiçbir cascade kuralına bırakmıyoruz.
   ============================================================= */
.tm-live-page .tm-kpi-row {
  visibility: visible !important;
  opacity: 1 !important;
}
.tm-live-page .tm-kpi {
  visibility: visible !important;
  opacity: 1 !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}
.tm-live-page .tm-kpi .tm-kpi__label,
.tm-live-page .tm-kpi .tm-kpi__value {
  visibility: visible !important;
  opacity: 1 !important;
}
.tm-live-page .tm-kpi .tm-kpi__label {
  color: #71717a !important;
}
.tm-live-page .tm-kpi .tm-kpi__value {
  color: #18181b !important;
}
/* Skeleton — token undefined olsa bile gri görünür */
.tm-live-page .tm-skel {
  background: #ececef !important;
  visibility: visible !important;
}

/* Dark mode override */
html.dark-mode .tm-live-page .tm-kpi,
[data-theme="dark"] .tm-live-page .tm-kpi {
  background: #0f1419 !important;
  border-color: #27272a !important;
  color: #fafafa !important;
}
html.dark-mode .tm-live-page .tm-kpi .tm-kpi__label,
[data-theme="dark"] .tm-live-page .tm-kpi .tm-kpi__label {
  color: #a1a1aa !important;
}
html.dark-mode .tm-live-page .tm-kpi .tm-kpi__value,
[data-theme="dark"] .tm-live-page .tm-kpi .tm-kpi__value {
  color: #fafafa !important;
}
html.dark-mode .tm-live-page .tm-skel,
[data-theme="dark"] .tm-live-page .tm-skel {
  background: #2a3548 !important;
}

/* Pulseline & status pill — aynı brute-force visibility */
.tm-live-page .tm-live-pulseline,
.tm-live-page .tm-live-pulseline .tm-live-stat,
.tm-live-page .tm-live-pulseline .tm-live-stat__label,
.tm-live-page .tm-live-pulseline .tm-live-stat__value,
.tm-live-page .tm-live-status,
.tm-live-page .tm-live-status__text {
  visibility: visible !important;
  opacity: 1 !important;
}
.tm-live-page .tm-live-pulseline .tm-live-stat__value {
  color: #18181b !important;
}
.tm-live-page .tm-live-pulseline .tm-live-stat__label {
  color: #71717a !important;
}
html.dark-mode .tm-live-page .tm-live-pulseline .tm-live-stat__value,
[data-theme="dark"] .tm-live-page .tm-live-pulseline .tm-live-stat__value {
  color: #fafafa !important;
}
html.dark-mode .tm-live-page .tm-live-pulseline .tm-live-stat__label,
[data-theme="dark"] .tm-live-page .tm-live-pulseline .tm-live-stat__label {
  color: #a1a1aa !important;
}
html.dark-mode .tm-live-page .tm-live-pulseline,
[data-theme="dark"] .tm-live-page .tm-live-pulseline {
  background: transparent !important;
}
/* Pill'lerin kendisi dark mode'da koyu zemin + border */
html.dark-mode .tm-live-page .tm-live-pulseline .tm-live-stat,
[data-theme="dark"] .tm-live-page .tm-live-pulseline .tm-live-stat {
  background: #0f1419 !important;
  border-color: #27272a !important;
}

/* =============================================================
   HEADER REVISION (≤480px) — toolbar + pulseline kompakt yeniden
   düzenleme. Önceki kurallar status'u 32x32 dot'a indiriyordu
   ("14 sn önce" bilgisi kayboluyordu) ve pulseline'ı sunken-card
   stacked görünümüne çeviriyordu (3 sayı için ~120px dikey alan).
   Bu blok her ikisini de override edip:
     • status pill: dot + truncated time text (flex:1 toolbar genişliği)
     • pulseline: yatay kompakt strip (3 chip yan yana, sunken bg yok)
   üretir. Toolbar tek satır, pulseline altında tek satır → header
   ~70-80px (öncesi ~120px+).
   ============================================================= */
@media (max-width: 480px) {
  /* Toolbar: status genişlesin, diğer kontroller sabit kalsın */
  .tm-live-page .tm-live-controls {
    flex-wrap: nowrap;
    overflow: visible;
    gap: 6px;
  }

  /* Status pill — dot + relative time (truncated). Önceki kural
     icon-only 32x32 yapıyordu; geri al. */
  .tm-live-page .tm-live-status {
    width: auto;
    height: 30px;
    padding: 0 10px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    justify-content: flex-start;
    font-size: 11px;
    gap: 6px;
  }
  .tm-live-page .tm-live-status__text {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
  }
  .tm-live-page .tm-live-status__dot {
    width: 6px;
    height: 6px;
    flex: none;
  }

  /* Select biraz daha kompakt — status'a daha çok yer kalsın */
  .tm-live-page .tm-live-select {
    height: 30px;
    padding: 0 22px 0 8px;
    font-size: 11px;
    background-position: right 7px center;
    flex: none;
  }

  /* Pause/refresh iconbtn 30px (toolbar yüksekliğine hizalı) */
  .tm-live-page .tm-live-iconbtn,
  .tm-live-page #tmLiveRefresh {
    height: 30px;
    width: 30px;
    padding: 0;
    flex: none;
  }

  /* Pulseline — kompakt YATAY pill stribi. 3 mini-stat yan yana; "Son sipariş"
     pill'i uzun olduğunda alt satıra sarar ama her pill bütün kalır (value
     içeride ellipsis). Eski dikey-stack düzeni "yana koy" talebiyle kaldırıldı. */
  .tm-live-page .tm-live-pulseline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .tm-live-page .tm-live-pulseline .tm-live-stat {
    width: auto;
    flex: 0 1 auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    padding: 5px 9px;
    min-width: 0; max-width: 100%;
  }
  .tm-live-page .tm-live-pulseline .tm-live-stat__label {
    font-size: 9.5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--tm-text-muted, #71717a);
    flex: none;
  }
  .tm-live-page .tm-live-pulseline .tm-live-stat__value {
    font-size: 12px;
    font-weight: var(--tm-weight-semibold, 600);
    color: var(--tm-text-primary, #18181b);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
  }
}

/* Çok dar ekranlar (≤360px): toolbar daha da sıkı, status biraz kısalır
   ama yine truncated metin görünür */
@media (max-width: 360px) {
  .tm-live-page .tm-live-status {
    padding: 0 8px;
    font-size: 10.5px;
  }
  .tm-live-page .tm-live-pulseline { gap: 4px 10px; }
  .tm-live-page .tm-live-pulseline .tm-live-stat__label { font-size: 9.5px; }
  .tm-live-page .tm-live-pulseline .tm-live-stat__value { font-size: 11.5px; }
}

/* =================================================================
   PREMIUM POLISH 2026-05-14 — V2 (REAL-DOM, OVERRIDE-AWARE)
   PR #963 polish'i pratikte görünmüyordu. Sebepler:
   1) Cards.css/template inline `!important` rules my-rules'u eziyor
      (head critical CSS: KPI:hover box-shadow !important).
   2) Body inline (template line 598+) `.tm-live-main-grid__sidebar
      .tm-action-card` aynı specificity'de + source-order'da sonra
      → mine'i eziyor.
   3) Drawer items real DOM `<article class="tm-drawer-row">`; ben
      `.tm-insights-drawer__item` arıyordum → 0 match.
   4) Baseline değişimleri `--tm-shadow-xs → xs` redundant (cards.css
      zaten aynısını veriyordu).

   V2 fix:
   - `#tmLivePerformancePage` ID selector ile specificity 1,0,0+
     → body inline (0,2,0) ezilir.
   - Görünür delta: shadow-xs → shadow-md baseline.
   - `!important` head-inline override için.
   - Drawer items: `.tm-drawer-row[data-severity="..."]` real selector
     (JS render fonksiyonu data-severity attribute ekler).
   - `.tm-live-error` dead code: kaldırıldı (template'de kullanılmıyor).
   ================================================================= */

/* ---------- KPI cards: VISIBLE elevation + interactive ---------- */
#tmLivePerformancePage .tm-kpi {
  box-shadow: var(--tm-shadow-md) !important;
  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) !important;
  will-change: transform;
}
#tmLivePerformancePage .tm-kpi:hover,
#tmLivePerformancePage .tm-kpi:focus-visible {
  border-color: var(--tm-brand-300) !important;
  box-shadow: var(--tm-shadow-lg) !important;
  transform: translateY(-2px) !important;
}
#tmLivePerformancePage .tm-kpi:focus-visible {
  outline: none;
  box-shadow: var(--tm-shadow-lg), var(--tm-ring) !important;
}
#tmLivePerformancePage .tm-kpi .tm-kpi__label {
  letter-spacing: var(--tm-tracking-wider) !important;
  font-weight: var(--tm-weight-bold) !important;
}
#tmLivePerformancePage .tm-kpi .tm-kpi__value {
  letter-spacing: var(--tm-tracking-tight) !important;
}

/* ---------- tm-card (chart/top5/orders/insights): VISIBLE elevation ---------- */
#tmLivePerformancePage .tm-card {
  box-shadow: var(--tm-shadow-md) !important;
  transition:
    border-color var(--tm-dur-2) var(--tm-ease),
    box-shadow var(--tm-dur-2) var(--tm-ease) !important;
}
/* Card header subtle background gradient for premium feel */
#tmLivePerformancePage .tm-card__header {
  background: linear-gradient(180deg, var(--tm-surface-sunken) 0%, var(--tm-surface) 100%);
}

/* ---------- Action insights count chip critical glow ---------- */
#tmLivePerformancePage .tm-action-insights__count {
  transition: background var(--tm-dur-2) var(--tm-ease),
              border-color var(--tm-dur-2) var(--tm-ease),
              box-shadow var(--tm-dur-2) var(--tm-ease);
}
#tmLivePerformancePage .tm-action-insights__count[data-severity="critical"] {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tm-bad) 14%, transparent) !important;
}

/* ---------- Action cards: VISIBLE hover lift (overrides sidebar inline) ---------- */
#tmLivePerformancePage .tm-action-card {
  transition:
    transform var(--tm-dur-1) var(--tm-ease),
    border-color var(--tm-dur-2) var(--tm-ease),
    box-shadow var(--tm-dur-2) var(--tm-ease) !important;
}
#tmLivePerformancePage .tm-action-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--tm-shadow-md) !important;
  border-color: var(--tm-border-strong) !important;
}
#tmLivePerformancePage .tm-action-card:focus-visible {
  outline: none !important;
  box-shadow: var(--tm-shadow-md), var(--tm-ring) !important;
}
/* Critical action cards: subtle red ambient for emphasis */
#tmLivePerformancePage .tm-action-card[data-severity="critical"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-bad) 4%, transparent) 0%, transparent 100%) !important;
}
#tmLivePerformancePage .tm-action-card[data-severity="critical"]:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tm-bad) 7%, transparent) 0%, transparent 100%) !important;
}

/* ---------- Status pill: visible ok-state pulse ---------- */
#tmLivePerformancePage .tm-live-status:not([data-state="error"]):not([data-state="stale"]):not([data-state="paused"]) {
  animation: tmLiveStatusPulse 2.4s ease-out infinite;
}
@keyframes tmLiveStatusPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-brand-500) 35%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #tmLivePerformancePage .tm-live-status { animation: none; }
}

/* ---------- Pulseline: visible shadow elevation ---------- */
#tmLivePerformancePage .tm-live-pulseline {
  box-shadow: var(--tm-shadow-sm);
  transition: box-shadow var(--tm-dur-2) var(--tm-ease);
}
#tmLivePerformancePage .tm-live-pulseline:hover {
  box-shadow: var(--tm-shadow-md);
}
#tmLivePerformancePage .tm-live-stat__value {
  letter-spacing: var(--tm-tracking-tight);
}

/* ---------- Top 5 ürün rank: premium accent ---------- */
#tmLivePerformancePage .tm-live-rank__num {
  font-weight: var(--tm-weight-bold);
  font-size: var(--tm-text-sm);
  color: var(--tm-text-secondary);
}
#tmLivePerformancePage .tm-live-rank__row {
  transition: background var(--tm-dur-1) var(--tm-ease);
}
#tmLivePerformancePage .tm-live-rank__row:hover {
  background: var(--tm-surface-sunken);
}

/* ---------- Drawer panel polish ---------- */
.tm-insights-drawer__panel {
  box-shadow: var(--tm-shadow-xl) !important;
}
.tm-insights-drawer__header {
  position: relative;
}
.tm-insights-drawer__header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tm-border-strong), transparent);
  pointer-events: none;
}
.tm-insights-drawer__title {
  letter-spacing: var(--tm-tracking-tight);
  font-weight: var(--tm-weight-bold);
}

/* ---------- Drawer ROW items — REAL DOM SELECTOR (.tm-drawer-row) ----------
   Real DOM: <article class="tm-drawer-row" data-id="..." data-signal-type="..."
              data-severity="...">  (data-severity 2026-05-14 JS patch ile eklenir) */
.tm-insights-drawer__body .tm-drawer-row {
  position: relative;
  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-insights-drawer__body .tm-drawer-row:hover {
  box-shadow: var(--tm-shadow-sm);
}
.tm-insights-drawer__body .tm-drawer-row[data-severity="critical"] {
  border-left: 3px solid var(--tm-bad) !important;
}
.tm-insights-drawer__body .tm-drawer-row[data-severity="warning"] {
  border-left: 3px solid var(--tm-warn) !important;
}
.tm-insights-drawer__body .tm-drawer-row[data-severity="info"] {
  border-left: 3px solid var(--tm-info) !important;
}
.tm-insights-drawer__body .tm-drawer-row[data-severity="success"] {
  border-left: 3px solid var(--tm-ok) !important;
}

/* ---------- Filter bar chip focus ---------- */
#tmLivePerformancePage .tm-live-filterbar .tm-chip:focus-visible {
  outline: none;
  box-shadow: var(--tm-ring);
}

/* ---------- Live page section gap: nefes ---------- */
#tmLivePerformancePage { gap: var(--tm-space-6) !important; }
@media (max-width: 720px) { #tmLivePerformancePage { gap: var(--tm-space-4) !important; } }
@media (max-width: 480px) { #tmLivePerformancePage { gap: var(--tm-space-3) !important; } }

/* ---------- Dark mode adjustments ---------- */
[data-theme="dark"] #tmLivePerformancePage .tm-card,
html.dark-mode #tmLivePerformancePage .tm-card {
  box-shadow: var(--tm-shadow-md) !important;
}
[data-theme="dark"] #tmLivePerformancePage .tm-kpi,
html.dark-mode #tmLivePerformancePage .tm-kpi {
  box-shadow: var(--tm-shadow-md) !important;
}
[data-theme="dark"] #tmLivePerformancePage .tm-kpi:hover,
html.dark-mode #tmLivePerformancePage .tm-kpi:hover,
[data-theme="dark"] #tmLivePerformancePage .tm-kpi:focus-visible,
html.dark-mode #tmLivePerformancePage .tm-kpi:focus-visible {
  border-color: var(--tm-brand-400) !important;
  box-shadow: var(--tm-shadow-xl) !important;
}
[data-theme="dark"] #tmLivePerformancePage .tm-card__header,
html.dark-mode #tmLivePerformancePage .tm-card__header {
  background: linear-gradient(180deg, var(--tm-surface-raised) 0%, var(--tm-surface) 100%);
}

/* ---------- Reduced motion: kill animations/transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  #tmLivePerformancePage .tm-kpi:hover,
  #tmLivePerformancePage .tm-kpi:focus-visible,
  #tmLivePerformancePage .tm-action-card:hover,
  .tm-insights-drawer__body .tm-drawer-row:hover {
    transform: none !important;
  }
  #tmLivePerformancePage .tm-live-pulseline,
  #tmLivePerformancePage .tm-action-card,
  #tmLivePerformancePage .tm-kpi,
  #tmLivePerformancePage .tm-card,
  .tm-insights-drawer__body .tm-drawer-row {
    transition: none !important;
  }
}

/* ████████████████████████████████████████████████████████████████████
   CANLI PERFORMANSIM — TRENDMETRIK DESIGN SYSTEM'E SADIK PANEL (2026-05-16)
   ────────────────────────────────────────────────────────────────────
   Kaynak: "Trendmetrik Design System" (colors_and_type.css + ui_kits/
   panel/panel.css). Linear/Stripe ilhamı: düz beyaz kartlar, 10px KPI /
   14px panel radius, yumuşak 3-kademe gölge, JetBrains Mono 24px/500 KPI
   değeri, TEK accent hero (mavi-gradyan "Ciro"), Inter 15/600 başlık,
   düz #f4f6fa tuval + soluk grid, 150ms restrained motion. ID özgüllüğü
   (#tmLivePerformancePage) → hiçbir class-global ezemez. FOUC-safe.
   HTML/JS değişmedi. Geri alma: bu blok silinir.
   ████████████████████████████████████████████████████████████████████ */

#tmLivePerformancePage {
  --ds-page:#f4f6fa; --ds-card:#ffffff; --ds-tint:#f1f5f9;
  --ds-ink:#0f172a; --ds-ink-2:#475569; --ds-ink-3:#94a3b8; --ds-ink-label:#1e293b;
  --ds-line:#e7ebf1; --ds-line-2:#dbe5ef; --ds-line-soft:#eef1f6;
  --ds-primary:#0175e4; --ds-primary-hover:#0163c2;
  --ds-ok-bg:#dcfce7; --ds-ok-fg:#15803d;
  --ds-bad-bg:#fee2e2; --ds-bad-fg:#b91c1c;
  --ds-sh1:0 1px 2px rgba(15,23,42,.04);
  --ds-sh2:0 2px 6px rgba(15,23,42,.06);
  --ds-sh3:0 8px 20px rgba(15,23,42,.08);
  --ds-kpi-accent:linear-gradient(140deg,#0163c2 0%,#0175e4 60%,#014a94 100%);
  --ds-cta:linear-gradient(135deg,#0175e4,#0163c2);
  --ds-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ds-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
html.dark-mode #tmLivePerformancePage,
[data-theme="dark"] #tmLivePerformancePage {
  --ds-page:#0b0f17; --ds-card:#10151f; --ds-tint:#141a26;
  --ds-ink:#e5edf5; --ds-ink-2:#9fb0c3; --ds-ink-3:#7c8da3; --ds-ink-label:#cdd8e6;
  --ds-line:#1e2533; --ds-line-2:#2a3548; --ds-line-soft:#1a212e;
  --ds-primary:#3a88e5; --ds-primary-hover:#5599eb;
  --ds-ok-bg:rgba(22,163,74,.20); --ds-ok-fg:#4ade80;
  --ds-bad-bg:rgba(220,38,38,.20); --ds-bad-fg:#f87171;
  --ds-sh1:0 1px 2px rgba(0,0,0,.35);
  --ds-sh2:0 4px 12px rgba(0,0,0,.35);
  --ds-sh3:0 12px 32px rgba(0,0,0,.4);
}

/* ── 1. TUVAL — düz #f4f6fa + soluk logo-mavi grid (spec) ───────────── */
html:not(.dark-mode) body:has(#tmLivePerformancePage) {
  background-color:#f4f6fa !important;
  background-image:
    linear-gradient(rgba(1,117,228,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,117,228,.024) 1px, transparent 1px) !important;
  background-size:32px 32px !important;
  background-attachment:fixed !important;
}
html.dark-mode body:has(#tmLivePerformancePage) {
  background-color:#0b0f17 !important;
  background-image:
    linear-gradient(rgba(58,136,229,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,136,229,.05) 1px, transparent 1px) !important;
  background-size:32px 32px !important;
  background-attachment:fixed !important;
}
body:has(#tmLivePerformancePage) .bg-shapes { display:none !important; }
body:has(#tmLivePerformancePage) .tmv2-page-inner { background:transparent !important; }

/* ── 2. KPI — mockup canli-performans.html'e hizalı (2026-05-17) ──────
   Değişiklikler: 14px radius, head (label+ikon rozeti), mono 26/600 değer,
   pill delta (up/down/flat renkleri), absolute spark; accent hero artık
   İLK kart (.tm-kpi--hero = Sipariş) — eski [data-kpi="revenue"] hero
   kaldırıldı. --ds-* token'ları zaten mockup renklerini taşıyor + dark
   varyantları var. HTML sözleşmesi (data-kpi/data-bind/data-spark) aynı. */
#tmLivePerformancePage .tm-kpi {
  display:flex !important; flex-direction:column !important;
  background:var(--ds-card) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:14px !important;
  box-shadow:var(--ds-sh1) !important;
  padding:16px 18px 14px !important;
  min-height:124px;
  overflow:hidden; position:relative;
  visibility:visible !important; opacity:1 !important;
  color:var(--ds-ink) !important;
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease !important;
}
#tmLivePerformancePage .tm-kpi:hover {
  transform:translateY(-1px);
  box-shadow:var(--ds-sh2) !important;
  border-color:var(--ds-line-2) !important;
}
#tmLivePerformancePage .tm-kpi--hero:hover {
  box-shadow:0 14px 30px -10px rgba(1,117,228,.55) !important;
}

/* Head: label solda, ikon rozeti sağda (mockup .kpi__head) */
#tmLivePerformancePage .tm-kpi__head {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
#tmLivePerformancePage .tm-kpi__icon {
  margin-left:auto; flex:none;
  width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:#e8f3ff; color:#0163c2;
}
#tmLivePerformancePage .tm-kpi__icon svg,
#tmLivePerformancePage .tm-kpi__icon i { width:13px; height:13px; }
#tmLivePerformancePage .tm-kpi[data-kpi="revenue"] .tm-kpi__icon { background:#dcfce7; color:#15803d; }
#tmLivePerformancePage .tm-kpi[data-kpi="profit"]  .tm-kpi__icon { background:#fff1e8; color:#c24e0c; }
#tmLivePerformancePage .tm-kpi[data-kpi="margin"]  .tm-kpi__icon { background:#e8f3ff; color:#0163c2; }
html.dark-mode #tmLivePerformancePage .tm-kpi__icon,
[data-theme="dark"] #tmLivePerformancePage .tm-kpi__icon { background:rgba(58,136,229,.16); color:#7eb6f0; }
html.dark-mode #tmLivePerformancePage .tm-kpi[data-kpi="revenue"] .tm-kpi__icon,
[data-theme="dark"] #tmLivePerformancePage .tm-kpi[data-kpi="revenue"] .tm-kpi__icon { background:rgba(22,163,74,.18); color:#4ade80; }
html.dark-mode #tmLivePerformancePage .tm-kpi[data-kpi="profit"] .tm-kpi__icon,
[data-theme="dark"] #tmLivePerformancePage .tm-kpi[data-kpi="profit"] .tm-kpi__icon { background:rgba(253,117,31,.16); color:#ff9540; }

/* (1,3,0) — eski #tmLivePerformancePage .tm-kpi .tm-kpi__label/__value
   (letter-spacing/weight !important, ~satır 1343-1347) ile aynı özgüllük;
   bu blok dosyada DAHA SONRA olduğu için tie'ı kazanır → mockup değerleri. */
#tmLivePerformancePage .tm-kpi .tm-kpi__label {
  font-family:var(--ds-sans) !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  color:var(--ds-ink-2) !important;
  visibility:visible !important; opacity:1 !important;
}
#tmLivePerformancePage .tm-kpi .tm-kpi__value {
  font-family:var(--ds-mono) !important;
  font-size:26px !important; font-weight:600 !important;
  letter-spacing:-.02em !important; line-height:1.1 !important;
  color:var(--ds-ink) !important;
  font-variant-numeric:tabular-nums;
  visibility:visible !important; opacity:1 !important;
}
#tmLivePerformancePage .tm-kpi__row {
  margin-top:10px; display:flex; align-items:center; gap:8px;
}
#tmLivePerformancePage .tm-kpi__delta {
  font-family:var(--ds-mono);
  font-size:11px; font-weight:700;
  border-radius:999px; padding:2px 8px;
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; gap:4px;
}
#tmLivePerformancePage .tm-kpi__delta--up   { background:var(--ds-ok-bg);  color:var(--ds-ok-fg); }
#tmLivePerformancePage .tm-kpi__delta--down { background:var(--ds-bad-bg); color:var(--ds-bad-fg); }
#tmLivePerformancePage .tm-kpi__delta--flat { background:var(--ds-tint);   color:var(--ds-ink-2); }
#tmLivePerformancePage .tm-kpi__delta--cold {
  background:transparent; color:var(--ds-ink-3);
  border:1px dashed var(--ds-line-2);
}
#tmLivePerformancePage .tm-kpi__caption { font-size:11.5px; font-weight:500; color:var(--ds-ink-3); }

/* Spark — mockup: absolute sağ-üst dekoratif (akış dışı) */
#tmLivePerformancePage .tm-kpi .tm-live-spark {
  position:absolute !important;
  right:14px; top:14px;
  width:96px !important; height:36px !important;
  margin:0 !important;
  pointer-events:none;
}

/* 2b. ACCENT HERO — İLK kart (Sipariş) mavi gradyan (mockup .kpi--hero) */
#tmLivePerformancePage .tm-kpi--hero {
  background:var(--ds-kpi-accent) !important;
  border:0 !important;
  box-shadow:0 8px 22px -10px rgba(1,117,228,.45) !important;
  color:#fff !important;
}
#tmLivePerformancePage .tm-kpi--hero::after {
  content:""; position:absolute; right:-40px; bottom:-60px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 65%);
  pointer-events:none;
}
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__label,
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__value { color:#fff !important; }
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__caption { color:rgba(255,255,255,.78) !important; }
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__icon { background:rgba(255,255,255,.20) !important; color:#fff !important; }
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__delta--up,
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__delta--down,
#tmLivePerformancePage .tm-kpi--hero .tm-kpi__delta--flat { background:rgba(255,255,255,.22) !important; color:#fff !important; }
#tmLivePerformancePage .tm-kpi--hero .tm-live-spark {
  width:128px !important; height:42px !important;
  filter:brightness(0) invert(1); opacity:.9;
}

/* ── 3. PANEL KARTLAR — beyaz, 14px, sh-1, Inter 15/600 başlık ──────── */
#tmLivePerformancePage .tm-live-main-grid__content .tm-card,
#tmLivePerformancePage .tm-live-charts .tm-card {
  background:var(--ds-card);
  border:1px solid var(--ds-line);
  border-radius:14px;
  box-shadow:var(--ds-sh1);
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
#tmLivePerformancePage .tm-live-main-grid__content .tm-card:hover,
#tmLivePerformancePage .tm-live-charts .tm-card:hover {
  transform:translateY(-1px);
  box-shadow:var(--ds-sh2);
  border-color:var(--ds-line-2);
}
#tmLivePerformancePage .tm-live-main-grid__content .tm-card__header,
#tmLivePerformancePage .tm-live-charts .tm-card__header {
  border-bottom:1px solid var(--ds-line);
  background:transparent;
}
#tmLivePerformancePage .tm-live-main-grid__content .tm-card__title,
#tmLivePerformancePage .tm-live-charts .tm-card__title {
  font-family:var(--ds-sans);
  font-size:15px; font-weight:600;
  letter-spacing:-.01em; color:var(--ds-ink);
}
#tmLivePerformancePage .tm-live-main-grid__content .tm-card__title::before,
#tmLivePerformancePage .tm-live-charts .tm-card__title::before { content:none !important; }
#tmLivePerformancePage .tm-live-main-grid__content .tm-card__subtitle,
#tmLivePerformancePage .tm-live-charts .tm-card__subtitle { font-size:12px; color:var(--ds-ink-2); }

/* ── 4. HEADER + PULSELINE — mockup .live-header (2026-05-17) ─────────
   Header artık beyaz kart; pulseline kart İÇİNDE açık tonlu (#f8fafc≈tint)
   şerit; kontroller sağda. JS/markup değişmedi (CSS-only, id-block). */
#tmLivePerformancePage .tm-live-header {
  background:var(--ds-card);
  border:1px solid var(--ds-line);
  border-radius:14px;
  padding:14px 18px;
  box-shadow:var(--ds-sh1);
  align-items:center;
}
/* CLS fix (desktop/tablet only — ≥768px, where the header is a wrapping flex
   row): the pulseline widens when its skeleton values are replaced by real
   data, wrapping the controls row to a second line (+~44px) and pushing the
   KPI grid down (~0.29 layout shift). Reserve the wrapped steady-state height
   so the swap never moves content below the header. Below 768px the header is
   flex-direction:column (naturally taller), so no min-height is applied — no
   forced gap on mobile. */
@media (min-width: 768px) {
  #tmLivePerformancePage .tm-live-header { min-height: 128px; }
}
#tmLivePerformancePage .tm-live-pulseline {
  background:var(--ds-tint) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  padding:2px !important;
  overflow:hidden;
}
#tmLivePerformancePage .tm-live-stat {
  border-right:1px solid var(--ds-line) ;
  padding:8px 16px;
  min-width:128px;
  transition:background 150ms ease;
}
#tmLivePerformancePage .tm-live-stat:last-child { border-right:none; }
#tmLivePerformancePage .tm-live-stat:hover { background:var(--ds-card); }
#tmLivePerformancePage .tm-live-stat__label {
  font-family:var(--ds-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ds-ink-3);
}
#tmLivePerformancePage .tm-live-stat__value {
  font-family:var(--ds-mono); font-size:14px; font-weight:600;
  letter-spacing:-.01em; color:var(--ds-ink);
}

/* ── 5. DURUM + KONTROLLER — panel.css .tm-control / .tm-cta-btn ─────── */
/* Mockup .live-status — varsayılan yeşil "Canlı" pill; durum varyantları
   id-block'ta (base [data-state] kuralları id özgüllüğüyle eziliyor). */
#tmLivePerformancePage .tm-live-status {
  background:var(--ds-ok-bg);
  color:var(--ds-ok-fg);
  border:1px solid color-mix(in srgb, var(--ds-ok-fg) 28%, transparent);
  border-radius:999px;
  box-shadow:none;
  font-weight:600;
}
#tmLivePerformancePage .tm-live-status[data-state="error"] {
  background:var(--ds-bad-bg); color:var(--ds-bad-fg);
  border-color:color-mix(in srgb, var(--ds-bad-fg) 28%, transparent);
}
#tmLivePerformancePage .tm-live-status[data-state="stale"] {
  background:#fef3c7; color:#92400e;
  border-color:rgba(146,64,14,.28);
}
html.dark-mode #tmLivePerformancePage .tm-live-status[data-state="stale"],
[data-theme="dark"] #tmLivePerformancePage .tm-live-status[data-state="stale"] {
  background:rgba(245,158,11,.16); color:#fbbf24; border-color:rgba(251,191,36,.32);
}
#tmLivePerformancePage .tm-live-status[data-state="paused"] {
  background:transparent; color:var(--ds-ink-3);
  border:1px dashed var(--ds-line-2);
}
#tmLivePerformancePage .tm-live-status__dot { background:currentColor; animation:dsBreath 2.6s ease infinite; }
@keyframes dsBreath {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  70%  { box-shadow:0 0 0 6px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
#tmLivePerformancePage .tm-live-status[data-state="error"] .tm-live-status__dot,
#tmLivePerformancePage .tm-live-status[data-state="stale"] .tm-live-status__dot,
#tmLivePerformancePage .tm-live-status[data-state="paused"] .tm-live-status__dot { animation:none; }
#tmLivePerformancePage .tm-live-select,
#tmLivePerformancePage #tmLivePause,
#tmLivePerformancePage .tm-live-iconbtn { border-radius:8px; transition:all 150ms ease; }
#tmLivePerformancePage .tm-live-select:hover,
#tmLivePerformancePage #tmLivePause:hover,
#tmLivePerformancePage .tm-live-iconbtn:hover { border-color:#cbd5e1; }
#tmLivePerformancePage #tmLiveRefresh {
  background:var(--ds-cta) !important; border:0 !important; color:#fff !important;
  border-radius:8px !important;
  box-shadow:0 2px 6px rgba(1,117,228,.25) !important;
  transition:all 150ms ease !important;
}
#tmLivePerformancePage #tmLiveRefresh:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(1,117,228,.35) !important;
}
#tmLivePerformancePage #tmLiveRefresh:active { transform:translateY(0); }

/* ── 6. TABLO / RANK / LEGEND — spec tipografi + mono sayılar ────────── */
#tmLivePerformancePage .tm-live-tbl thead th {
  font-family:var(--ds-sans); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ds-ink-2);
  border-bottom:1px solid var(--ds-line);
}
#tmLivePerformancePage .tm-live-tbl tbody td { color:var(--ds-ink-label); border-bottom-color:var(--ds-line-soft); }
#tmLivePerformancePage .tm-live-tbl tbody tr:not(.is-skel):not(.is-new):hover { background:var(--ds-tint); }
#tmLivePerformancePage .tm-live-rank__row { border-radius:8px; transition:background 150ms ease; }
#tmLivePerformancePage .tm-live-rank__row:not(.is-skel):hover { background:var(--ds-tint); }
#tmLivePerformancePage .tm-live-rank__num,
#tmLivePerformancePage .tm-live-rank__metric,
#tmLivePerformancePage .tm-live-legend__value,
#tmLivePerformancePage .tm-live-legend__pct,
#tmLivePerformancePage .tm-live-doughnut__center-value,
#tmLivePerformancePage .tm-live-tblfoot,
#tmLivePerformancePage .tm-live-tbl tbody td[data-cell="price"],
#tmLivePerformancePage .tm-live-tbl tbody td[data-cell="profit"],
#tmLivePerformancePage .tm-live-tbl tbody td[data-cell="order"] {
  font-family:var(--ds-mono); font-variant-numeric:tabular-nums;
}

/* ── 7. Restrained giriş (spec: minimal, reduced-motion gated) ──────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dsFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  #tmLivePerformancePage .tm-live-charts > .tm-card,
  #tmLivePerformancePage .tm-live-main-grid__content > .tm-card {
    animation:dsFade .35s ease both;
  }
  #tmLivePerformancePage .tm-live-charts > .tm-card:last-child { animation-delay:.05s; }
}
@media (prefers-reduced-motion: reduce) {
  #tmLivePerformancePage .tm-live-status__dot { animation:none; }
}

/* ── 8. ÖNCELİKLİ AKSİYONLAR (sidebar) — design-system'e hizala ────────
   Inline "tactical-ops" bloğu (Familjen Grotesk + pulse + gradyan bar)
   içerik <style>'ında live-dashboard.css'ten SONRA yükleniyor; bu yüzden
   #tmLivePerformancePage .tm-live-main-grid__sidebar (1,3,0+) özgüllüğü +
   !important ile eziyoruz. Hedef: panel.css .tm-panel / .tm-chip-btn /
   .tm-alert (sol-kenar severity) sadeliği. */
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights {
  background:var(--ds-card) !important;
  border:1px solid var(--ds-line) !important;
  border-radius:14px !important;
  box-shadow:var(--ds-sh1) !important;
  overflow:hidden;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__header {
  border-bottom:1px solid var(--ds-line) !important;
  background:transparent !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights .tm-card__title {
  font-family:var(--ds-sans) !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  color:var(--ds-ink-3) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights .tm-card__title::before {
  background:var(--ds-primary) !important; box-shadow:none !important; animation:none !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__count-num {
  font-family:var(--ds-mono) !important; font-weight:600 !important;
  letter-spacing:-.02em !important; color:var(--ds-ink) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__count[data-severity="critical"] .tm-action-insights__count-num { color:var(--ds-bad-fg) !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__count[data-severity="empty"] .tm-action-insights__count-num { color:var(--ds-ok-fg) !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__count-rest { color:var(--ds-ink-2) !important; font-weight:500 !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__last-check { font-family:var(--ds-mono) !important; color:var(--ds-ink-3) !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__refresh {
  border:1px solid #e2e8f0 !important; background:var(--ds-card) !important;
  color:var(--ds-ink-2) !important; border-radius:8px !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights__refresh:hover {
  background:var(--ds-tint) !important; border-color:#cbd5e1 !important;
  color:var(--ds-ink) !important; transform:none !important;
}

/* Filtre chip'leri → .tm-chip-btn */
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters {
  border-bottom:1px solid var(--ds-line) !important; background:transparent !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters .tm-chip {
  font-family:var(--ds-sans) !important; font-size:12px !important; font-weight:500 !important;
  background:var(--ds-card) !important; border:1px solid #e2e8f0 !important;
  color:var(--ds-ink-2) !important; border-radius:7px !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters .tm-chip:hover {
  background:var(--ds-tint) !important; border-color:#cbd5e1 !important; color:var(--ds-ink) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters .tm-chip[aria-pressed="true"] {
  background:#e8f3ff !important; border-color:var(--ds-primary) !important; color:var(--ds-primary-hover) !important; font-weight:600 !important;
}
html.dark-mode #tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters .tm-chip[aria-pressed="true"],
[data-theme="dark"] #tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters .tm-chip[aria-pressed="true"] {
  background:rgba(58,136,229,.18) !important; color:#bcd7f7 !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-filters .tm-chip__count {
  font-family:var(--ds-mono) !important; background:var(--ds-tint) !important; color:var(--ds-ink-3) !important;
}

/* Aksiyon kartı — temiz panel satırı + sol-kenar severity (.tm-alert deseni) */
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card {
  background:var(--ds-card) !important;
  border:1px solid var(--ds-line) !important;
  border-left:3px solid var(--ds-ink-3) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  padding:11px 12px !important;
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card::before { content:none !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card:hover {
  transform:translateY(-1px) !important; box-shadow:var(--ds-sh2) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--critical    { border-left-color:#dc2626 !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--warning     { border-left-color:#f59e0b !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--opportunity { border-left-color:#16a34a !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--info        { border-left-color:#0175e4 !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__icon {
  background:var(--ds-tint) !important; color:var(--ds-ink-2) !important;
  border-radius:8px !important; box-shadow:none !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--critical    .tm-action-card__icon { background:#fee2e2 !important; color:#dc2626 !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--warning     .tm-action-card__icon { background:#fef3c7 !important; color:#b45309 !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--opportunity .tm-action-card__icon { background:#dcfce7 !important; color:#15803d !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card--info        .tm-action-card__icon { background:#e8f3ff !important; color:#0163c2 !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__title {
  font-family:var(--ds-sans) !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:-.005em !important; color:var(--ds-ink) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__desc {
  font-family:var(--ds-sans) !important; font-size:12px !important; color:var(--ds-ink-2) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__metric {
  background:var(--ds-tint) !important; border:1px solid var(--ds-line) !important;
  border-radius:8px !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__metric-label { font-family:var(--ds-sans) !important; color:var(--ds-ink-3) !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__metric-value,
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__sub-metric-value {
  font-family:var(--ds-mono) !important; color:var(--ds-ink) !important; font-variant-numeric:tabular-nums;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__pill {
  font-family:var(--ds-sans) !important; background:var(--ds-tint) !important;
  color:var(--ds-ink-2) !important; border:1px solid var(--ds-line) !important; border-radius:999px !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-card__chevron { color:var(--ds-ink-3) !important; }
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-quick__a {
  font-family:var(--ds-sans) !important; color:var(--ds-ink-2) !important;
  border:1px solid var(--ds-line) !important; border-radius:8px !important; background:var(--ds-card) !important;
}
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-quick__a:hover {
  background:var(--ds-tint) !important; color:var(--ds-primary-hover) !important; border-color:#cbd5e1 !important;
}

/* ── 9. GRAFİKLER — mockup .seg segmented control + donut + legend ──────
   Track içinde borderless buton; aktif = beyaz pill + hafif gölge. */
#tmLivePerformancePage .tm-live-segs {
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  background:var(--ds-tint) !important;
  padding:3px !important;
  border-radius:8px !important;
  gap:2px !important;
}
#tmLivePerformancePage .tm-live-segs .tm-chip {
  font-family:var(--ds-sans) !important; font-size:12px !important; font-weight:600 !important;
  background:transparent !important; border:0 !important;
  color:var(--ds-ink-2) !important; border-radius:6px !important;
  padding:5px 11px !important; transition:all 150ms ease !important;
}
#tmLivePerformancePage .tm-live-segs .tm-chip:hover {
  background:transparent !important; color:var(--ds-ink) !important;
}
#tmLivePerformancePage .tm-live-segs .tm-chip[aria-pressed="true"] {
  background:var(--ds-card) !important; border:0 !important;
  color:var(--ds-primary-hover) !important; font-weight:600 !important;
  box-shadow:0 1px 2px rgba(15,23,42,.08) !important;
}
html.dark-mode #tmLivePerformancePage .tm-live-segs .tm-chip[aria-pressed="true"],
[data-theme="dark"] #tmLivePerformancePage .tm-live-segs .tm-chip[aria-pressed="true"] {
  background:var(--ds-card) !important; color:#bcd7f7 !important;
}
#tmLivePerformancePage .tm-live-doughnut__center-label,
#tmLivePerformancePage .tm-live-doughnut__center-sub {
  font-family:var(--ds-sans); font-size:11px; color:var(--ds-ink-3); font-weight:500;
}
#tmLivePerformancePage .tm-live-doughnut__center-value { color:var(--ds-ink); }
/* Legend — mockup .donut-legend__row: ince alt-çizgi ayraç, hover-pill yok */
#tmLivePerformancePage .tm-live-legend__row {
  border-radius:0;
  border-bottom:1px solid var(--ds-line);
  padding:4px 2px;
  font-size:12.5px;
  align-items:center;
  transition:none;
}
#tmLivePerformancePage .tm-live-legend__row:last-child { border-bottom:0; }
#tmLivePerformancePage .tm-live-legend__row:hover { background:transparent; }
#tmLivePerformancePage .tm-live-legend__row.is-empty { border-bottom:0; }
#tmLivePerformancePage .tm-live-legend__dot { border-radius:2px !important; width:8px !important; height:8px !important; }
#tmLivePerformancePage .tm-live-legend__name { font-family:var(--ds-sans); color:var(--ds-ink-label); font-weight:500; }
#tmLivePerformancePage .tm-live-legend__value { font-family:var(--ds-mono); color:var(--ds-ink); font-weight:600; }
#tmLivePerformancePage .tm-live-legend__pct  { font-family:var(--ds-mono); color:var(--ds-ink-3); }
#tmLivePerformancePage .tm-live-chartskel > span { background:var(--ds-tint) !important; }
#tmLivePerformancePage .tm-live-doughnut__skel { filter:saturate(0); opacity:.7; }

/* Top-5 sıralama satırı — temiz liste */
#tmLivePerformancePage .tm-live-rank__img {
  border-radius:8px !important; border:1px solid var(--ds-line) !important; background:var(--ds-tint) !important;
}
#tmLivePerformancePage .tm-live-rank__name { font-family:var(--ds-sans); color:var(--ds-ink-label); font-weight:500; }
#tmLivePerformancePage .tm-live-rank__meta { font-family:var(--ds-sans); color:var(--ds-ink-2); }
#tmLivePerformancePage .tm-live-rank__metric { color:var(--ds-ink); font-weight:600; }
#tmLivePerformancePage .tm-live-rank__num { color:var(--ds-ink-3); }

/* ── 9c. TOP-5 + SİPARİŞ TABLOSU — mockup canli-performans (2026-05-17)
   En geç id-block kuralları → tie'larda kazanır. CSS-only; JS-render
   markup (tm-live-rank__*/tm-live-state-badge/tm-cell-*) sözleşmesi aynı. */
#tmLivePerformancePage .tm-live-rank__row {
  grid-template-columns: 28px 48px minmax(0,1fr) auto;
  gap: 14px;
  padding: 12px 4px;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--ds-line);
}
#tmLivePerformancePage .tm-live-rank__row:last-child { border-bottom: 0; }
#tmLivePerformancePage .tm-live-rank__row:not(.is-skel):hover { background: var(--ds-tint); }
#tmLivePerformancePage .tm-live-rank__num {
  font-family: var(--ds-mono);
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--ds-ink-3) !important;
  text-align: center;
}
#tmLivePerformancePage .tm-live-rank__row:nth-child(1) .tm-live-rank__num { color: #fd751f !important; }
#tmLivePerformancePage .tm-live-rank__row:nth-child(2) .tm-live-rank__num { color: #0175e4 !important; }
#tmLivePerformancePage .tm-live-rank__row:nth-child(3) .tm-live-rank__num { color: #16a34a !important; }
#tmLivePerformancePage .tm-live-rank__img {
  width: 48px !important; height: 48px !important;
}
#tmLivePerformancePage .tm-live-rank__name {
  font-size: 13.5px; font-weight: 600; color: var(--ds-ink);
}
#tmLivePerformancePage .tm-live-rank__meta { font-size: 11.5px; }
#tmLivePerformancePage .tm-live-rank__metric {
  font-family: var(--ds-mono); font-size: 16px; font-weight: 700;
  color: var(--ds-ink); letter-spacing: -0.01em;
}

/* Sipariş tablosu — mockup table + .status pill + profit renkleri */
#tmLivePerformancePage .tm-live-tbl thead th {
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; color: var(--ds-ink-3) !important;
}
#tmLivePerformancePage .tm-live-state-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--ds-ok-bg);
  color: var(--ds-ok-fg);
}
#tmLivePerformancePage .tm-live-state-badge[data-status="cancelled"] {
  background: var(--ds-bad-bg); color: var(--ds-bad-fg);
}
#tmLivePerformancePage .tm-live-state-badge[data-status="returned"] {
  background: #fef3c7; color: #92400e;
}
html.dark-mode #tmLivePerformancePage .tm-live-state-badge[data-status="returned"],
[data-theme="dark"] #tmLivePerformancePage .tm-live-state-badge[data-status="returned"] {
  background: rgba(245,158,11,.16); color: #fbbf24;
}
#tmLivePerformancePage .tm-live-tbl tbody td.tm-cell-pos { color: var(--ds-ok-fg); font-weight: 700; }
#tmLivePerformancePage .tm-live-tbl tbody td.tm-cell-neg { color: var(--ds-bad-fg); font-weight: 700; }
#tmLivePerformancePage .tm-live-filterbar { background: var(--ds-tint); }
#tmLivePerformancePage .tm-live-filterbar .tm-chip[aria-pressed="true"] {
  background: var(--ds-primary) !important;
  border-color: var(--ds-primary) !important;
  color: #fff !important;
}


/* ── 10. Container boşluk ritmi (design-system 16px) + Öneriler kartı
   scroll KAPALI (kullanıcı isteği 2026-05-16) ─────────────────────────
   Inline blok: .tm-live-page gap var(--tm-space-5)=20px, .tm-live-main-grid
   gap 18/22px + margin-top 12px, sidebar max-height+overflow-y:auto.
   #tmLivePerformancePage (1,x,x) + !important ile design-system 16px
   ritmine çekiyoruz; sidebar'daki dikey/yatay scroll tamamen kalkıyor. */
#tmLivePerformancePage { gap:16px !important; }
#tmLivePerformancePage .tm-live-main-grid { gap:16px !important; margin-top:4px !important; }
#tmLivePerformancePage .tm-live-main-grid__content { gap:16px !important; }
#tmLivePerformancePage .tm-live-charts { gap:16px !important; }
#tmLivePerformancePage .tm-kpi-row { gap:12px !important; }
@media (min-width:1100px) {
  #tmLivePerformancePage .tm-live-main-grid { gap:16px !important; }
}
/* Öneriler / Öncelikli Aksiyonlar: hiçbir yönde scroll yok, tam yükseklik */
#tmLivePerformancePage .tm-live-main-grid__sidebar,
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights,
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-insights .tm-card__body,
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-insights-summary,
#tmLivePerformancePage .tm-live-main-grid__sidebar .tm-action-grid {
  max-height:none !important;
  overflow:visible !important;
  overflow-x:visible !important;
  overflow-y:visible !important;
}

/* ████████████████ /TRENDMETRIK DESIGN SYSTEM PANEL ████████████████████ */