/* DS-SCOPE EXCLUSION — REGISTERED DEBT (2026-09-13, UI design-system refactor Faz 4a).
   Rules carrying `:where(:not(.tm-ds *))` stand down inside pages that opted into the
   design system (<main class="tm-ds">); `:where()` keeps their specificity unchanged, so
   every other page resolves exactly as before. Counted in the DS metrics table
   ("Debt: shell DS-scope exclusions"); removed when the rule itself is deleted. */
.tm-dashboard-ch-grid {
  margin: var(--tm-dashboard-card-gap, 12px) 0 var(--tm-dashboard-section-gap, 16px);
}

.tm-dashboard-ch-grid .ch-mount {
  min-width: 0;
}

#overviewTab #tmOvWeek.ch-mount {
  height: 280px;
  max-height: 280px;
  overflow: hidden;
  overscroll-behavior: contain;
}
#overviewTab #tmOvWeek.ch-mount .ch-body {
  height: 100%;
  overflow: hidden;
}
#overviewTab #tmOvWeek.ch-mount svg.ch-svg:where(:not(.tm-ds *)) {
  display: block;
  width: 100%;
  height: 100% !important;
  overflow: hidden;
  transform-origin: 82% 58%;
}
#overviewTab #tmOvWeek.ch-mount.is-zoom-in svg.ch-svg {
  animation: tm-chart-zoom-in 640ms cubic-bezier(.4, 0, .2, 1) both;
}
#overviewTab #tmOvWeek.ch-mount.is-zoom-out svg.ch-svg {
  animation: tm-chart-zoom-out 640ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes tm-chart-zoom-in {
  from { transform: scale(0.92); opacity: 0.55; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes tm-chart-zoom-out {
  from { transform: scale(1.08); opacity: 0.55; }
  to { transform: scale(1); opacity: 1; }
}

.tm-dashboard-ch-grid .ch-panel {
  position: relative;
}
.ch-zoom-chip {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  font: 650 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #0175e4;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(1, 117, 228, 0.22);
  border-radius: 999px;
  padding: 5px 10px;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.ch-zoom-chip.is-flash {
  animation: tm-zoom-chip-flash 280ms ease-out;
}
@keyframes tm-zoom-chip-flash {
  0% { transform: scale(0.9); background: #0175e4; color: #fff; border-color: #0175e4; }
  100% { transform: scale(1); }
}
html.dark-mode .ch-zoom-chip,
body.dark-mode .ch-zoom-chip {
  background: rgba(15, 23, 42, 0.88);
  color: #73b7fe;
  border-color: rgba(115, 183, 254, 0.28);
}

.ch-rank-row[data-href] {
  cursor: pointer;
  border-radius: 8px;
  margin: 0 -4px;
  padding: 2px 4px;
}
.ch-rank-row[data-href]:hover {
  background: rgba(1, 117, 228, 0.07);
}

.tm-dashboard-ch-grid .ch-panel {
  border-radius: 8px;
}

.tm-dashboard-ch-grid--live {
  grid-auto-flow: dense;
}

.tm-dashboard-ch-grid--live .ch-panel {
  min-height: 0;
}

/* AZ-VERİ BOŞLUĞU (Genel Bakış, 2026-09-18 — Canlı Performans ile aynı düzeltme):
   1) Grid satır-gerdirmesi (align-items:stretch varsayılan) az-veride kısa kartı uzun
      kardeşine gerip İÇİNE boşluk bırakıyordu → panel içerik yüksekliğine otursun. (Genel
      Bakış kartları çift-simetrik: 2 donut / 2 ranking yan yana → dolu veride regresyon yok.)
   2) "En Çok Satanlar" ranking mount'ları .ch-mount 240px default min-height'ı yüzünden 1-2
      üründe dev boşluk bırakıyordu (donut ds-chart-card.css'te muaf, ranking değildi) → liste
      kendi yüksekliğine otursun. dashboard-overview.css YALNIZ ?legacy=1'de yüklendiği için bu
      kurallar AKTİF bundle'a (bu dosya, koşulsuz yüklenir) yazılır. */
.tm-dashboard-ch-grid--overview {
  align-items: start;
}
#overviewTab #tmOvTop.ch-mount,
#overviewTab #tmOvTopQty.ch-mount,
.overview-dash-v2 #tmOvTop.ch-mount,
.overview-dash-v2 #tmOvTopQty.ch-mount {
  min-height: 0;
}

/* Responsive span override — 2026-08-05 (responsive-ui-audit):
   Base `.ch-grid` is a 6-col grid; at <=1100px tm-charts.css collapses it to
   2 cols (span-3 -> span 2) and at <=640px to 1 col (span-3 -> span 1).
   These `--live` span rules (specificity 0,2,1) were UNCONDITIONAL and beat
   the tm-charts.css media-query rules (0,1,0), so on tablet/mobile a `.span-3`
   panel tried to span 3 tracks inside a 2/1-track grid → horizontal overflow
   of the two live chart panels (donut + Top 5). Guard with min-width:1101px so
   the shared responsive collapse can take over below the desktop breakpoint. */
@media (min-width: 1101px) {
  .tm-dashboard-ch-grid--live .ch-panel.span-6 {
    grid-column: span 6;
  }

  .tm-dashboard-ch-grid--live .ch-panel.span-4 {
    grid-column: span 4;
  }

  .tm-dashboard-ch-grid--live .ch-panel.span-3 {
    grid-column: span 3;
  }

  .tm-dashboard-ch-grid--live .ch-panel.span-2 {
    grid-column: span 2;
  }
}

.tm-dashboard-ch-grid--live .ch-mount {
  max-height: none;
}

/* Saatlik Akış — geniş/yüksek mount; SVG paneli doldursun */
.tm-live-hourly-panel .tm-live-hourly-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}
.tm-live-hourly-panel .tm-live-hourly-meta[hidden] { display: none !important; }
.tm-live-hourly-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.tm-live-hourly-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tm-live-hourly-legend__swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #0175e4;
}
.tm-live-hourly-legend__swatch.is-baseline {
  background: transparent;
  border-top: 2px dashed #94a3b8;
  height: 0;
  width: 20px;
}
.tm-live-hourly-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: #64748b;
}
.tm-live-hourly-stats strong {
  font-family: var(--tm-font-sans, "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.tm-live-hourly-stats .tm-live-hourly-delta.is-up { color: #16a34a; }
.tm-live-hourly-stats .tm-live-hourly-delta.is-down { color: #dc2626; }
.tm-live-hourly-stats .tm-live-hourly-delta.is-flat { color: #64748b; }

.tm-live-hourly-panel,
.tm-live-hourly-panel .ch-head,
.tm-live-hourly-panel .ch-seg,
.tm-live-hourly-panel .ch-seg button {
  pointer-events: auto !important;
}
.tm-live-hourly-panel .ch-seg button {
  cursor: pointer !important;
}
/* polish (2026-09-13, item 8, layout-lint R9 "stretched card"): tm-vanilla-
   dashboard-charts.js's ensureLiveHourlyMountBox() sets `el.style.height =
   '320px'` on THIS mount unconditionally (every viewport, JS untouched here —
   presentation-only task). That plain inline style already out-ranks the
   `height`/`min-height` below at every width because inline beats a non-
   !important external rule regardless of media query — so the mount stayed
   pinned at 320px while svg.ch-svg (already `!important` below, correctly)
   and .ch-body (no inline fight) DID shrink at the ≤1099/≤640 breakpoints,
   opening a 65px (1024/768) / 85px (375) dead gap under the chart. `!important`
   added to `height`/`min-height` here only — same fix class already used two
   properties down on this exact selector (`overflow`/`pointer-events` are
   already `!important` for the same inline-JS-fight reason). */
#tmLivePerformancePage #tmLiveHourlyFlow.tm-live-hourly-mount,
.tm-dashboard-ch-grid--live #tmLiveHourlyFlow.tm-live-hourly-mount {
  /* 2026-10-03: ≥1100px'te 470 — yanındaki pazaryeri kartıyla aynı boy (eski 320'de sağda ~200px boşluk).
     2026-10-05: pazaryeri kartı kompakt (halka 140, tek satır liste) → 400; iki kart yine aynı boy.
     2026-10-09: pazaryeri kartına sütun başlığı + "Bugünün yıldızı" eklenince doğal boyu 611px oldu;
     400’lük grafikle satır 570’te kalıp pazaryeri kartı taşıyordu (ölçüm). 450 → satır 620,
     iki kart yine eş boy ve grafik de 50px daha okunaklı. Sayfa yine de eski halinden kısa
     (bant kalktı: 2053 → ~1960).
     JS (tm-vanilla-dashboard-charts.js liveHourlyHeight) çizim yüksekliğini BU değişkenden okur. */
  --tm-live-hourly-h: 240px;
  /* 2026-10-10 (kullanıcı: "konteynerler/grafikler çok büyük, kaba"): 450 → 300. Ölçüm 1650×935:
     grafik satırı 596 px (ekranın %64'ü), sipariş tablosu ekran altındaydı (top 1111). Pazaryeri
     kartı da aynı PR'da kompakt (halka 240→150, satırlar sıkı) → iki kart yine eş boy (~340). */
  flex: 0 0 auto;
  min-height: var(--tm-live-hourly-h) !important;
  height: var(--tm-live-hourly-h) !important;
  max-height: none;
  overflow: visible !important;
  pointer-events: auto !important;
}
#tmLivePerformancePage #tmLiveHourlyFlow.tm-live-hourly-mount .ch-body,
.tm-dashboard-ch-grid--live #tmLiveHourlyFlow.tm-live-hourly-mount .ch-body {
  height: var(--tm-live-hourly-h);
  min-height: var(--tm-live-hourly-h);
  overflow: visible !important;
}
#tmLivePerformancePage #tmLiveHourlyFlow.tm-live-hourly-mount svg.ch-svg,
.tm-dashboard-ch-grid--live #tmLiveHourlyFlow.tm-live-hourly-mount svg.ch-svg {
  height: var(--tm-live-hourly-h) !important;
  min-height: var(--tm-live-hourly-h);
  width: 100%;
  overflow: visible !important;
}
#tmLivePerformancePage #tmLiveHourlyFlow .tm-live-empty {
  min-height: var(--tm-live-hourly-h, 320px);
}

@media (max-width: 1099px) {
  #tmLivePerformancePage #tmLiveHourlyFlow.tm-live-hourly-mount,
  .tm-dashboard-ch-grid--live #tmLiveHourlyFlow.tm-live-hourly-mount {
    --tm-live-hourly-h: 280px;
    min-height: var(--tm-live-hourly-h) !important;
    height: var(--tm-live-hourly-h) !important;
  }
}

@media (max-width: 640px) {
  #tmLivePerformancePage #tmLiveHourlyFlow.tm-live-hourly-mount,
  .tm-dashboard-ch-grid--live #tmLiveHourlyFlow.tm-live-hourly-mount {
    --tm-live-hourly-h: 240px;
    min-height: var(--tm-live-hourly-h) !important;
    height: var(--tm-live-hourly-h) !important;
  }
  .tm-live-hourly-panel .tm-live-hourly-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

html.dark-mode .tm-live-hourly-panel .tm-live-hourly-meta,
body.dark-mode .tm-live-hourly-panel .tm-live-hourly-meta {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
}
/* polish (2026-09-13, item 4, dark-mode text tiers): these three literal hex
   greys (#cbd5e1/#94a3b8/#f1f5f9) each added their own stray tier distinct
   from the two DS text tokens every other Canlı label/value already resolved
   to. Restated on the same DS tokens (var(), not a new literal) — legend/stats
   are "muted" (secondary caption text), the bold total is "primary". */
html.dark-mode .tm-live-hourly-legend,
body.dark-mode .tm-live-hourly-legend { color: var(--tm-text-muted, #94a3b8); }
html.dark-mode .tm-live-hourly-stats,
body.dark-mode .tm-live-hourly-stats { color: var(--tm-text-muted, #94a3b8); }
html.dark-mode .tm-live-hourly-stats strong,
body.dark-mode .tm-live-hourly-stats strong { color: var(--tm-text-primary, #f4f4f5); }

.tm-dashboard-ch-grid .ch-seg button {
  cursor: pointer;
}
.tm-dashboard-ch-grid--overview .ch-seg button.on,
.tm-dashboard-ch-grid--live .ch-seg button.on {
  background: #0175e4;
  color: #fff;
  box-shadow: none;
}

.tm-analytics-gauge-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.tm-legacy-chart-fallback[hidden],
.tm-live-charts[hidden],
.overview-charts-row[hidden] {
  display: none !important;
}

/* ============================================================================
   PR-A 2026-06-11 — Layout stability reservations (perf program)
   Overview chart mount'ları TMCharts JS mount edene kadar (~cold load 3-4sn)
   boş div'ler; geç mount .tm-dashboard-ch-grid--overview'i 198px→730px
   patlatıyordu (runtime audit 2026-06-11: tek shift CLS 0.29, kaynak
   section.ch-panel.span-3/.span-4). Ölçülen nihai mount yükseklikleri yalnız
   :empty (henüz mount edilmemiş) durumda rezerve edilir — içerik gelince
   kural düşer, nihai layout her viewport'ta bugünkü ile birebir aynı kalır.
   Değerler TEST demo hesabında ölçüldü (@1600 / @1366 / @390, 2026-06-11). */
#tmOvPlatform:empty { min-height: 170px; }
#tmOvStatus:empty   { min-height: 168px; }
#tmOvWeek:empty     { min-height: 340px; }
#tmOvTop:empty      { min-height: 363px; }

@media (max-width: 1499px) {
  #tmOvWeek:empty { min-height: 262px; }
}

@media (max-width: 767px) {
  #tmOvPlatform:empty { min-height: 352px; }
  #tmOvStatus:empty   { min-height: 262px; }
  #tmOvWeek:empty     { min-height: 117px; }
}
/* === /PR-A reservations === */

/* ============================================================================
   2026-07-17 — Canlı (live) chart mount CLS rezervasyonu (loading polish)
   Canlı sayfa donut (#tmLivePlatformVanilla) + saatlik (#tmLiveHourlyFlow)
   mount edilene kadar 0px yükseklikli boş div'lerdi; SSR verisi varken bile
   TMCharts JS mount'u ilk paint'ten sonra çalışıp ~300px'e "pop" ediyordu
   (ölçülen runtime CLS ~0.048, kaynak bu iki mount + geç reveal). PR-A ile
   birebir aynı yaklaşım: yalnız :empty (henüz mount edilmemiş) durumda nihai
   mount yüksekliğini rezerve et — içerik gelince kural düşer, layout birebir
   aynı kalır (yeni CLS getirmez). Ölçüm: TEST demo (id=15), @1440, 300px.
   .ch-panel'in stretch/height:100% zinciri bu mount'u içerdiği için değer
   panelin nihai satır yüksekliğiyle uyumludur.
   ÖZGÜLLÜK NOTU: live-dashboard.css'te
   `#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel > .ch-mount
    { min-height: 0 }` (1,3,0) kuralı var; onu geçmek için rezervasyon
   `#tmLivePerformancePage #<id>` (2,1,0) ile scope'lanır. */
#tmLivePerformancePage #tmLivePlatformVanilla:empty,
#tmLivePerformancePage #tmLiveHourlyFlow:empty { min-height: 300px; }

@media (max-width: 1099px) {
  /* Tek kolona düşünce donut+legend dikeyde büyür; saatlik mount benzer. */
  #tmLivePerformancePage #tmLivePlatformVanilla:empty,
  #tmLivePerformancePage #tmLiveHourlyFlow:empty { min-height: 264px; }
}

@media (max-width: 640px) {
  /* Donut mobilde dikey istif (donut-wrap column) → daha uzun; saatlik kompakt. */
  #tmLivePerformancePage #tmLivePlatformVanilla:empty { min-height: 360px; }
  #tmLivePerformancePage #tmLiveHourlyFlow:empty { min-height: 300px; }
}
/* === /canlı mount reservations === */

@media (max-width: 640px) {
  .tm-dashboard-ch-grid {
    margin-top: 10px;
  }

  .tm-dashboard-ch-grid .ch-donut-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .tm-dashboard-ch-grid .ch-donut {
    align-self: center;
  }

  .tm-dashboard-ch-grid .ch-legend li {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .tm-dashboard-ch-grid .ch-legend .nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tm-dashboard-ch-grid .ch-legend .sh {
    display: none;
  }

  .tm-analytics-gauge-pair {
    grid-template-columns: 1fr;
  }
}

/* 2026-10-03 — mobil kullanılabilirlik (ds-live.css'teki kompakt kart bloğunun eşi; DS bundle'ı !important
   taşıyamadığı için başka stili EZMESİ gereken kurallar burada — bu dosya sayfada her zaman yüklenir,
   live-dashboard.css yalnız ?legacy=1'de). Ölçüldü (390px, gerçek sayfa):
   "30 sn" seçici 466px'e uzuyordu (yatay taşma) · 5 KPI kartı tek sütun ~900px · zebra satırda kart hücreleri gri blok. */
@media (max-width: 560px){
  #tmLivePerformancePage .tm-live-select { width: auto !important; max-width: 96px; flex: 0 0 auto; }
  #tmLivePerformancePage .tm-live-kpi-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #tmLivePerformancePage .tm-live-kpi-grid > .kpi-card { min-width: 0; padding: 10px 12px !important; min-height: 0 !important; }
  #tmLivePerformancePage .tm-live-kpi-grid > .kpi-card:first-child { grid-column: 1 / -1; }
  /* 2026-10-10: sabit 28 → token (ds-live.css .tm-live-page = 16). 112 px'lik kompakt kartta 28 px
     kıvılcım kartın altından taşıp kırpılıyordu (QA BLOK-3, 390 px ölçümü). */
  #tmLivePerformancePage .tm-live-kpi-grid .kpi-chart { height: var(--tm-dash-sparkline-h, 28px) !important; }
  #tmLivePerformancePage #tmLiveTable tr:not(.is-skel) { margin-bottom: 8px !important; }
  #tmLivePerformancePage #tmLiveTable tr:not(.is-skel) td { background: transparent !important; }
}

/* `.tm-ovins` bileşeni KALDIRILDI (2026-10-09, kullanıcı kararı) — Genel Bakış'taki "Dönem özeti"
   bandı 2026-10-05'te zaten kalkmıştı (bkz. tests/test_genel_bakis_donem_ozeti_2026_10_03.py:114,
   `id="tmOvInsights"` şablonda OLMAMALI); geriye kalan tek kullanıcı Canlı Performans'ın
   "Bugünün özeti" şeridiydi, o da kaldırıldı. Şablon + JS + CSS birlikte gitti. */

/* Satış Trendi · son 30 gün — alt özet: üç istatistik kutusu (dönem toplamı + değişim · en iyi gün · günlük ort.). */
#tmOvMonthlyPanel .tm-ovtrend-foot {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px;
  padding: 12px 16px 16px; margin-top: 4px;
  border-top: 1px dashed var(--tm-border, #e2e8f0);
}
#tmOvMonthlyPanel .tm-ovtrend-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#tmOvMonthlyPanel .tm-ovtrend-k { font-size: 11.5px; font-weight: 600; color: var(--tm-text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; }
#tmOvMonthlyPanel .tm-ovtrend-v { font-size: 20px; font-weight: 750; color: var(--tm-text, #0f172a); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#tmOvMonthlyPanel .tm-ovtrend-stat--main .tm-ovtrend-v { font-size: 26px; }
#tmOvMonthlyPanel .tm-ovtrend-d { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#tmOvMonthlyPanel .tm-ovtrend-d small { font-weight: 500; color: var(--tm-text-muted, #64748b); margin-left: 4px; }
#tmOvMonthlyPanel .tm-ovtrend-d.up { color: var(--tm-success-fg, #15803d); }
#tmOvMonthlyPanel .tm-ovtrend-d.down { color: var(--tm-danger-fg, #b91c1c); }
#tmOvMonthlyPanel .tm-ovtrend-d.flat { color: var(--tm-text-muted, #64748b); font-weight: 500; }
#tmOvMonthlyPanel .tm-ovtrend-legend { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c, #0175e4); vertical-align: middle; margin: 0 4px 0 0; }
#tmOvMonthlyPanel .tm-ovtrend-legend.is-prev { margin-left: 10px; background: repeating-linear-gradient(90deg, #94a3b8 0 4px, transparent 4px 7px); }
#tmOvMonthlyPanel .ch-svg .ch-area-fill { opacity: 1; }
#tmOvMonthlyPanel .ch-svg .ch-area-line:not(.is-dashed) { stroke-width: 3; }
#tmOvMonthlyPanel .ch-svg .ch-live-end-pulse { display: inline; animation: tmOvPulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tmOvPulse { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #tmOvMonthlyPanel .ch-svg .ch-live-end-pulse { animation: none; } }
@media (max-width: 560px) {
  #tmOvMonthlyPanel .tm-ovtrend-foot { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 12px; }
  #tmOvMonthlyPanel .tm-ovtrend-stat--main { grid-column: 1 / -1; }
  #tmOvMonthlyPanel .tm-ovtrend-stat--main .tm-ovtrend-v { font-size: 22px; }
  #tmOvMonthlyPanel .tm-ovtrend-v { font-size: 16px; }
}

/* Canlı Performans — üst şerit cilası (2026-10-03). "Bugünün özeti" bandının kuralları
   2026-10-09'da bandıyla birlikte kaldırıldı. */
#tmLivePerformancePage .tm-live-stat {
  border-radius: 999px !important;
  border: 1px solid var(--tm-border, #e2e8f0) !important;
  background: var(--tm-bg-surface, #fff) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 6px 14px !important;
}
#tmLivePerformancePage .tm-live-stat:first-child {
  border-color: color-mix(in srgb, var(--tm-success, #16a34a) 35%, var(--tm-border, #e2e8f0)) !important;
  background: color-mix(in srgb, var(--tm-success, #16a34a) 7%, var(--tm-bg-surface, #fff)) !important;
}
#tmLivePerformancePage .tm-live-stat:first-child::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px;
  background: var(--tm-success, #16a34a); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-success, #16a34a) 60%, transparent);
  animation: tmLiveBeat 2s ease-out infinite; vertical-align: middle;
}
@keyframes tmLiveBeat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-success, #16a34a) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { #tmLivePerformancePage .tm-live-stat:first-child::before { animation: none; } }

/* Genel Bakış mobil: 5 KPI kartı tek sütunda ~800px yer kaplıyordu (ölçüldü 390px). Canlı ile aynı 2 sütun,
   ciro kartı tam genişlik. */
@media (max-width: 560px){
  #tmOverviewKpiGrid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #tmOverviewKpiGrid > .kpi-card { min-width: 0; padding: 10px 12px !important; min-height: 0 !important; }
  #tmOverviewKpiGrid > .kpi-card:first-child { grid-column: 1 / -1; }
  #tmOverviewKpiGrid .kpi-chart { height: 28px !important; }
}

/* Genel Bakış — "Aylık ciro hedefi" (2026-10-03). Çubuk SVG; dikey çizgi = ayın geçen kısmı (tempo). */
.tm-hedef {
  margin: 16px 0 4px; padding: 16px 18px; border-radius: var(--tm-radius-lg, 14px);
  border: 1px solid color-mix(in srgb, var(--tm-primary, #0175e4) 25%, var(--tm-border, #e2e8f0));
  background: linear-gradient(110deg, color-mix(in srgb, var(--tm-primary, #0175e4) 9%, var(--tm-bg-surface, #fff)) 0%, var(--tm-bg-surface, #fff) 60%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tm-hedef.is-empty { border-style: dashed; background: var(--tm-bg-surface, #fff); }
.tm-hedef__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tm-hedef__lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.tm-hedef__k { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--tm-text-muted, #64748b); }
.tm-hedef__k i { color: var(--tm-primary, #0175e4); margin-right: 4px; }
.tm-hedef__v { font-size: 24px; font-weight: 750; color: var(--tm-text, #0f172a); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tm-hedef__v small { font-size: 14px; font-weight: 600; color: var(--tm-text-muted, #64748b); }
.tm-hedef__cta { font-size: 13px; color: var(--tm-text-secondary, #475569); }
.tm-hedef__pct { font-size: 28px; font-weight: 800; color: var(--tm-primary, #0175e4); font-variant-numeric: tabular-nums; }
.tm-hedef__pct.is-done { color: var(--tm-success-fg, #15803d); }
.tm-hedef__edit { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--tm-primary, #0175e4); cursor: pointer; }
.tm-hedef__bar { display: block; width: calc(100% - 14px); height: 14px; margin: 14px 7px 10px; overflow: visible; }
.tm-hedef__bar line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tm-hedef__bar .bg { stroke: color-mix(in srgb, var(--tm-primary, #0175e4) 13%, transparent); stroke-width: 12px; }
.tm-hedef__bar .fg { stroke: var(--tm-primary, #0175e4); stroke-width: 12px; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: tm-hedef-dolum 1.1s cubic-bezier(.22, 1, .36, 1) .15s forwards; }
.tm-hedef__bar .fg.is-behind { stroke: #f59e0b; }
.tm-hedef__bar .fg.is-done { stroke: var(--tm-success, #16a34a); }
.tm-hedef__bar .pace { stroke: var(--tm-text, #0f172a); stroke-width: 2px; stroke-linecap: butt; opacity: .55; }
@keyframes tm-hedef-dolum { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .tm-hedef__bar .fg { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }
.tm-hedef__stats { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--tm-text-secondary, #475569); }
.tm-hedef__stat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--tm-bg-surface, #fff);
  border: 1px solid var(--tm-border-light, #f1f5f9); white-space: nowrap; }
.tm-hedef__stat i { color: var(--tm-primary, #0175e4); font-size: 12px; }
.tm-hedef__stat.is-up i { color: var(--tm-success, #16a34a); }
.tm-hedef__stats b { color: var(--tm-text, #0f172a); }
.tm-hedef__stats em { font-style: normal; font-weight: 650; }
.tm-hedef__stats .is-up, .tm-hedef__stats em.is-up { color: var(--tm-success-fg, #15803d); }
.tm-hedef__stats em.is-down { color: #b45309; }
.tm-hedef__note { flex-basis: 100%; font-size: 11.5px; color: var(--tm-text-muted, #64748b); }
.tm-hedef__form { margin-top: 12px; }
.tm-hedef__form[hidden] { display: none; }
.tm-hedef__form label { display: block; font-size: 12px; font-weight: 600; color: var(--tm-text-secondary, #475569); margin-bottom: 4px; }
.tm-hedef__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-hedef__row input { width: 200px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--tm-border-input, #cbd5e1); border-radius: 8px; font-size: 14px; }
.tm-hedef__unit { font-weight: 650; color: var(--tm-text-muted, #64748b); }
.tm-hedef__err { margin: 6px 0 0; font-size: 12px; color: var(--tm-danger-fg, #b91c1c); }
@media (max-width: 560px) {
  .tm-hedef { padding: 12px; }
  .tm-hedef__v { font-size: 20px; }
  .tm-hedef__pct { font-size: 22px; }
  .tm-hedef__stats { font-size: 12px; }
}
/* Canlı Performans — "Dikkat" (2026-10-05). Sayfada tek satır özet çubuğu; ayrıntılar <dialog> içinde
   (kullanıcı: "çok yer kaplıyor, grafikler ve sipariş tablosu önemli"). */
#tmLivePerformancePage .tm-dikkat { margin: 12px 0 0; }
#tmLivePerformancePage .tm-dikkat[hidden] { display: none; }
#tmLivePerformancePage .tm-dikkat__bar {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 14px; text-align: left;
  border-radius: 10px; border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--tm-border, #e2e8f0));
  background: color-mix(in srgb, #f59e0b 8%, var(--tm-bg-surface, #fff)); color: var(--tm-text-secondary, #475569);
  font-size: 13px; cursor: pointer; transition: background .15s ease;
}
#tmLivePerformancePage .tm-dikkat__bar:hover { background: color-mix(in srgb, #f59e0b 14%, var(--tm-bg-surface, #fff)); }
#tmLivePerformancePage .tm-dikkat__bar:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
/* 2026-10-10: "dikkat" seridi de ortak olcege oturdu (13px -> caption 12px). */
#tmLivePerformancePage .tm-dikkat__say { color: #92400e; white-space: nowrap; font-size: var(--tm-type-caption); }
#tmLivePerformancePage .tm-dikkat__ozet { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--tm-type-caption); }
#tmLivePerformancePage .tm-dikkat__bar .tm-dikkat__cta { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tm-primary, #0175e4); white-space: nowrap; }
#tmLivePerformancePage .tm-dikkat__bar .tm-dikkat__cta::after { content: " →"; }

.tm-dikkat-dlg {
  /* genel CSS sıfırlaması <dialog>'un ortalamasını bozuyordu (sol üstte açılıyordu) → açıkça ortala */
  position: fixed; inset: 0; margin: auto; height: fit-content; overflow: auto;
  width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 640px); padding: 0; border: 0; border-radius: 14px;
  background: var(--tm-bg-surface, #fff); color: var(--tm-text, #0f172a);
  box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .35);
}
.tm-dikkat-dlg::backdrop { background: rgba(15, 23, 42, .45); }
.tm-dikkat-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 10px;
  border-bottom: 1px solid var(--tm-border, #e2e8f0); position: sticky; top: 0; background: inherit; }
.tm-dikkat-dlg__head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #92400e; }
.tm-dikkat-dlg__head h3 i { margin-right: 4px; color: #d97706; }
.tm-dikkat-dlg__head p { margin: 2px 0 0; font-size: 12px; color: var(--tm-text-muted, #64748b); }
.tm-dikkat-dlg__kapat { border: 0; background: none; font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: 8px; color: var(--tm-text-muted, #64748b); cursor: pointer; }
.tm-dikkat-dlg__kapat:hover { background: var(--tm-bg-subtle, #f1f5f9); }
/* Çubuk: üst üste binen küçük görseller (ürün resmi / pazaryeri logosu) */
#tmLivePerformancePage .tm-dikkat__yigin { display: inline-flex; flex: 0 0 auto; }
#tmLivePerformancePage .tm-dikkat__yigin:empty { display: none; }
.tm-dikkat__mini, .tm-dikkat__gorsel {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden;
  background: color-mix(in srgb, #f59e0b 18%, var(--tm-bg-surface, #fff)); color: #92400e; font-weight: 700;
}
.tm-dikkat__mini { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--tm-bg-surface, #fff); font-size: 11px; }
.tm-dikkat__mini + .tm-dikkat__mini { margin-left: -9px; }
.tm-dikkat__mini img, .tm-dikkat__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--tm-bg-surface, #fff); }
.tm-dikkat__mini.is-logo img, .tm-dikkat__gorsel.is-logo img { object-fit: contain; padding: 3px; }

/* Pencere: kartlar */
.tm-dikkat-dlg { width: min(760px, calc(100vw - 32px)); }
.tm-dikkat-dlg .tm-dikkat__list { list-style: none; margin: 0; padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-dikkat__kart {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 12px;
  border: 1px solid var(--tm-border, #e2e8f0); border-top: 3px solid #f59e0b; background: var(--tm-bg-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); font-size: 13px; color: var(--tm-text-secondary, #475569);
}
.tm-dikkat__kart.is-plat, .tm-dikkat__kart.is-stokyok { border-top-color: var(--tm-danger, #dc2626); }
.tm-dikkat__ust { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.tm-dikkat__gorsel { width: 56px; height: 56px; border-radius: 10px; font-size: 20px; border: 1px solid var(--tm-border, #e2e8f0); }
.tm-dikkat__govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-dikkat__baslik { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tm-dikkat__kart .tm-dikkat__ad {
  font-weight: 700; color: var(--tm-text, #0f172a); text-decoration: none; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tm-dikkat__kart a.tm-dikkat__ad:hover { color: var(--tm-primary, #0175e4); }
.tm-dikkat__rozetler { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-dikkat__rozet {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--tm-bg-subtle, #f1f5f9); color: var(--tm-text-muted, #64748b);
}
.tm-dikkat__rozet.is-pz { background: color-mix(in srgb, var(--tm-primary, #0175e4) 12%, transparent); color: var(--tm-primary, #0175e4); }
.tm-dikkat__rozet.is-kirmizi { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.tm-dikkat__rozet.is-amber { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #92400e; }
.tm-dikkat__rozet.is-yesil { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; }
.tm-dikkat__olcu { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 3px 8px; font-size: 11px; }
.tm-dikkat__olcu-et { color: var(--tm-text-muted, #64748b); }
.tm-dikkat__olcu b { font-weight: 700; color: var(--tm-text, #0f172a); white-space: nowrap; }
.tm-dikkat__olcu b.is-bugun { color: #b91c1c; }
.tm-dikkat__cubuk { width: 100%; height: 6px; display: block; }
.tm-dikkat__cubuk-zemin { fill: var(--tm-bg-subtle, #f1f5f9); }
.tm-dikkat__cubuk-normal { fill: #94a3b8; }
.tm-dikkat__cubuk-bugun { fill: #dc2626; }
.tm-dikkat__git {
  flex: 0 0 auto; margin-top: -2px; border: 1px solid var(--tm-border, #e2e8f0); background: var(--tm-bg-surface, #fff); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--tm-primary, #0175e4); cursor: pointer; white-space: nowrap;
}
.tm-dikkat__git:hover { background: var(--tm-bg-subtle, #f1f5f9); }
.tm-dikkat__oneriler { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--tm-border, #e2e8f0); }
.tm-dikkat__oneri-bas { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tm-text-muted, #64748b); }
.tm-dikkat__oneri-bas i { color: #f59e0b; }
.tm-dikkat__oneri {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.3;
  text-decoration: none; color: var(--tm-text-secondary, #475569); background: var(--tm-bg-subtle, #f1f5f9);
}
.tm-dikkat__oneri i { width: 14px; text-align: center; color: var(--tm-primary, #0175e4); }
.tm-dikkat__oneri:hover { color: var(--tm-text, #0f172a); background: color-mix(in srgb, var(--tm-primary, #0175e4) 10%, var(--tm-bg-surface, #fff)); }
.tm-dikkat__oneri.is-birincil { background: var(--tm-primary, #0175e4); color: var(--tm-bg-surface, #fff); }
.tm-dikkat__oneri.is-birincil i { color: inherit; }
.tm-dikkat__oneri.is-birincil:hover { background: color-mix(in srgb, var(--tm-primary, #0175e4) 85%, #000); color: var(--tm-bg-surface, #fff); }
.tm-dikkat__oneri::after { content: "→"; margin-left: auto; opacity: .7; }
@media (max-width: 640px) {
  .tm-dikkat-dlg .tm-dikkat__list { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}

/* ==== 2026-10-05 Canlı Performans arayüz denetimi düzeltmeleri (ölçülen sorunlar, gerçek sayfa) ==== */
/* ① Sipariş no 1440'ta kesiliyordu ("DEMO-MULTI-AM…"; Amazon no'ları 19 karakter): sütun 130 → 184 px.
   Tam değer title ile de okunur. Ürün sütunu esnek, fark oradan gelir. */
#tmLivePerformancePage .tm-live-tbl th:nth-child(3),
#tmLivePerformancePage .tm-live-tbl td:nth-child(3) { width: 184px; }
/* 2026-10-09 — ADET + AKSİYON eklenince 10 sütun oldu; BÜTÇE YENİDEN KURULDU.
   ÖLÇÜLDÜ (1440, kart 1066px): sabitler 718px + aksiyon 168 → ÜRÜN’e 180 kalıyor, ondan da
   görsel(28) + "Maliyet eksik" rozeti(97) düşünce ürün ADINA 15px kalıyordu ("P…"), aksiyon
   hücresi de 221px isteyip taşıyordu. Üç ayar birlikte:
     ① sayı sütunlarından 30px kırpıldı (adet 48 · tutar 80 · kâr 76 · marj 52 · durum 80),
     ② aksiyon etiketleri yalnız ≥1600px’te; altında ikon-only (84px) — title/aria-label kalır,
     ③ "Maliyet eksik" rozeti <1600px’te ikon-only (metin `title`’da).
   İŞARET: bu kurallar `#id` ile yazılır çünkü ds-live.css’teki aynı kurallar (0,4,1) bu
   dosyanın (1,3,1) kurallarına YENİLİYOR — aynı değerler iki yerde tutulur (bkz. ds-live.css). */
#tmLivePerformancePage .tm-live-tbl th:nth-child(5),
#tmLivePerformancePage .tm-live-tbl td:nth-child(5) { width: 48px; }
#tmLivePerformancePage .tm-live-tbl th:nth-child(6),
#tmLivePerformancePage .tm-live-tbl td:nth-child(6) { width: 86px; }
#tmLivePerformancePage .tm-live-tbl th:nth-child(7),
#tmLivePerformancePage .tm-live-tbl td:nth-child(7) { width: 86px; }
/* MARJ 68: "-%%22,8" 65px istiyor (ölçüldü 1440) — 60’da son rakam kesiliyordu. */
#tmLivePerformancePage .tm-live-tbl th:nth-child(8),
#tmLivePerformancePage .tm-live-tbl td:nth-child(8) { width: 68px; }
#tmLivePerformancePage .tm-live-tbl th:nth-child(10),
#tmLivePerformancePage .tm-live-tbl td:nth-child(10) { width: 84px; }
/* DURUM 88’e geri: 80’e kırpınca "Geçerli" rozeti taşıyordu (ölçüldü, her genişlikte). */
#tmLivePerformancePage .tm-live-tbl th:nth-child(9),
#tmLivePerformancePage .tm-live-tbl td:nth-child(9) { width: 88px; }
/* ≥1600: iki etiketli düğme + dış-bağlantı ikonu 221px istiyor → 232. */
@media (min-width: 1600px) {
  #tmLivePerformancePage .tm-live-tbl th:nth-child(10),
  #tmLivePerformancePage .tm-live-tbl td:nth-child(10) { width: 232px; }
}
/* <1400: SİPARİŞ NO 184 → 120. 184, Amazon’un 19 karakterlik numarası içindi (2026-10-05);
   dar ekranda o 64px ÜRÜN ADINDAN çalınıyor (ölçüldü 1280: ad 40px). Numara kesilince
   `title` tam değeri taşır ve satır tıklanınca detay çekmecesi zaten tam numarayı yazıyor. */
@media (max-width: 1399.98px) {
  #tmLivePerformancePage .tm-live-tbl th:nth-child(3),
  #tmLivePerformancePage .tm-live-tbl td:nth-child(3) { width: 120px; }
}
/* <1180: 10 sütun artık SİĞMİYOR. ÖLÇÜLDÜ (1100, tablo 772px): sabitler 716 → ÜRÜN 56px,
   ad 0px — hücre boş görünüyordu. Burada ezmek yerine KAYDIRMAYA geçiyoruz: sarmalayıcı
   `.tm-table-scroll` zaten `overflow-x:auto` (ui-polish-2026-06-04.css:109), tabloya taban
   genişlik verilir. 2026-09-13’teki "fixed layout" kararı "Durum kesiliyordu" diye alınmıştı;
   taban-genişlikli kaydırmada HİÇBİR ŞEY kesilmiyor, o gerekçe karşılanıyor.
   ≤560px zaten kart düzenine geçiyor (ayrı blok), bu aralık yalnız tablet/dar masaüstü. */
@media (min-width: 560.02px) and (max-width: 1179.98px) {
  #tmLivePerformancePage .tm-live-tbl { min-width: 940px; }
}
@media (max-width: 1599.98px) {
  #tmLivePerformancePage .tm-live-rowact__lbl,
  #tmLivePerformancePage .tm-live-rowact__ext,
  #tmLivePerformancePage .tm-live-cost-badge__lbl { display: none; }
  #tmLivePerformancePage .tm-live-cost-badge { padding: 0 5px; }
}
/* ② "Bugünün Siparişleri" başlığı kart gövdesinden 20 px içeride başlıyordu (kart 24 + başlık 20 px yatay
   iç boşluk) → başlık, arama kutusu ve tablo aynı hizada. */
#tmLivePerformancePage .tm-live-orders-card > .tm-card__header { padding-left: 0; padding-right: 0; padding-top: 0; }
@media (max-width: 560px){
  /* ③ Üst kontrol satırı (durum · aralık · Yenile · Daha fazla) tek satıra zorlanıyordu → "Daha fazla" (Duraklat,
     Excel) ekranın 88 px dışına taşıyor, mobilde HİÇ erişilemiyordu. Satır kırılsın. */
  #tmLivePerformancePage .tm-live-controls { flex-wrap: wrap !important; row-gap: 8px; width: 100%; }
  /* kontrol satırının kabı flex öğesi ve min-width:auto ile içeriği kadar (466 px) genişliyordu → daralabilsin */
  #tmLivePerformancePage .tm-live-header__row--controls-only { min-width: 0; max-width: 100%; flex: 1 1 100%; }
  #tmLivePerformancePage .tm-live-controls .tm-actions-overflow__body { right: 0; left: auto; max-width: calc(100vw - 32px); }
  /* ④ Mobil sipariş kartı 190 px'ti: masaüstünden gelen hücre yüksekliği (52 px) her satıra uygulanıyordu.
     Hücreler içerik kadar; sipariş no kendi satırında TAM görünür (önce "DEMO-ORD-0…"). */
  #tmLivePerformancePage #tmLiveTable tr:not(.is-skel) td { height: auto !important; min-height: 0 !important; }
  /* 2026-10-09: ADET + AKSİYON hücreleri eklendi → iki yeni satır. BU kural
     `#id #id` (2,2,1) + `!important` ile yazılı; ds-live.css’in (0,4,1) aynı kuralını
     EZİYOR. İki pakette AYNI alan listesi durmalı — yalnız ds-live güncellenseydi yeni
     hücreler ızgaraya "auto-placement" ile girip kartı bozardı (ölçüldü: aksiyon
     hücresi 322px’lik kartta 193px kaldı). Donut’taki 140/200 vakasıyla aynı sınıf. */
  #tmLivePerformancePage #tmLiveTable tr:not(.is-skel) {
    grid-template-areas: "time pill pill pill status" "product product product product product"
                         "order order order order order"
                         "qty qty price profit margin"
                         "actions actions actions actions actions" !important;
  }
  #tmLivePerformancePage #tmLiveTable td[data-cell="actions"] .tm-live-rowact { display: flex !important; width: 100%; gap: 8px; }
  #tmLivePerformancePage #tmLiveTable td[data-cell="actions"] .tm-live-rowact__btn { flex: 1 1 0; justify-content: center; min-height: 36px; }
  #tmLivePerformancePage #tmLiveTable td[data-cell="actions"] .tm-live-rowact__lbl { display: inline !important; }
  #tmLivePerformancePage #tmLiveTable td[data-cell="order"] { align-self: start !important; overflow: visible !important; text-overflow: clip !important; }
  #tmLivePerformancePage .tm-live-orders-card { padding: 16px !important; }
}
/* Genel Bakış denetimi (2026-10-05): "Hedefi değiştir" dokunma alanı 18 px'ti → en az 32 px. */
.tm-hedef__edit { min-height: 32px; padding: 6px 10px; margin: -6px -10px; border-radius: 8px; }
.tm-hedef__edit:hover { background: color-mix(in srgb, var(--tm-primary, #0175e4) 8%, transparent); }

/* ==== Genel Bakış — "Öncelikli işler" (2026-10-05) ====
   Kullanıcı: "çok yazı var, basitlik yok, görsel/ikon/pazaryeri ikonu olsun, öncelikli olanlar yukarıda".
   Tek ızgara; kart = görsel (ürün resmi, yoksa tür ikonu) + pazaryeri logosu rozeti + tür rozeti + ad (2 satır) +
   büyük değer + kısa alt satır + eylem. Renk dili: kritik kırmızı · uyarı turuncu · fırsat mor. Yazı ölçüsü
   sabit: başlık 16 · ad 13 · değer 18 · rozet/alt 12. */
.tm-onc {
  --onc-acc: var(--tm-danger, #dc2626);
  margin: 16px 0 4px; padding: 16px 18px; border-radius: var(--tm-radius-lg, 14px);
  border: 1px solid var(--tm-border, #e2e8f0); background: var(--tm-bg-surface, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tm-onc[hidden] { display: none; }
.tm-onc__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.tm-onc__title { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--tm-text, #0f172a); }
.tm-onc__title-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  color: #fff; background: linear-gradient(135deg, #f59e0b, #ef4444); box-shadow: 0 4px 10px -4px rgba(239, 68, 68, .6); }
.tm-onc__say { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--tm-danger, #dc2626); }
.tm-onc__filtre { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tm-onc__filtre button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--tm-border, #e2e8f0); background: var(--tm-bg-surface, #fff);
  color: var(--tm-text-secondary, #475569); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.tm-onc__filtre button b { font-weight: 700; color: var(--tm-text, #0f172a); }
.tm-onc__filtre button i { font-size: 11px; opacity: .8; }
.tm-onc__filtre button:hover { border-color: var(--tm-primary, #0175e4); color: var(--tm-primary, #0175e4); }
.tm-onc__filtre button.is-on { background: var(--tm-text, #0f172a); border-color: var(--tm-text, #0f172a); color: var(--tm-bg-surface, #fff); }
.tm-onc__filtre button.is-on b { color: inherit; }
.tm-onc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tm-onc__kart { --onc-acc: var(--tm-danger, #dc2626); animation: tm-onc-gir .45s cubic-bezier(.22, 1, .36, 1) both; }
.tm-onc__kart.is-uyari { --onc-acc: #f59e0b; }
.tm-onc__kart.is-firsat { --onc-acc: #7c3aed; }
.tm-onc__kart.is-fazla, .tm-onc__kart.is-gizli { display: none; }
.tm-onc.is-tumu .tm-onc__kart.is-fazla:not(.is-gizli) { display: block; }
.tm-onc__kart:nth-child(2) { animation-delay: .04s; } .tm-onc__kart:nth-child(3) { animation-delay: .08s; } .tm-onc__kart:nth-child(4) { animation-delay: .12s; }
.tm-onc__kart:nth-child(5) { animation-delay: .16s; } .tm-onc__kart:nth-child(6) { animation-delay: .2s; } .tm-onc__kart:nth-child(7) { animation-delay: .24s; } .tm-onc__kart:nth-child(8) { animation-delay: .28s; }
@keyframes tm-onc-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tm-onc__kart { animation: none; } }
.tm-onc__link { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 12px; height: 100%;
  padding: 12px; border-radius: 12px; border: 1px solid var(--tm-border, #e2e8f0); background: var(--tm-bg-surface, #fff);
  color: inherit; text-decoration: none; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tm-onc__link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--onc-acc); }
.tm-onc__link:hover, .tm-onc__link:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--onc-acc) 45%, var(--tm-border, #e2e8f0));
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--onc-acc) 70%, transparent); color: inherit; text-decoration: none; }
.tm-onc__gorsel { position: relative; grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--onc-acc) 10%, var(--tm-bg-surface, #fff)); }
.tm-onc__gorsel img:not(.tm-onc__pz) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: var(--tm-bg-surface, #fff);
  border: 1px solid var(--tm-border-light, #f1f5f9); }
.tm-onc__yer { font-size: 20px; color: var(--onc-acc); }
.tm-onc__pz { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; object-fit: contain; padding: 2px;
  background: var(--tm-bg-surface, #fff); border: 1px solid var(--tm-border, #e2e8f0); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.tm-onc__pz.is-harf, .tm-onc__pz-sm.is-harf { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--tm-text-secondary, #475569); }
.tm-onc__govde { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tm-onc__rozet { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; color: var(--onc-acc); background: color-mix(in srgb, var(--onc-acc) 11%, transparent); }
.tm-onc__rozet i { font-size: 10px; }
.tm-onc__rozetler { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-onc__rozet.is-ek { --onc-acc: var(--tm-danger, #dc2626); }
.tm-onc__rozet.is-ek.is-uyari { --onc-acc: #f59e0b; }
.tm-onc__rozet.is-ek.is-firsat { --onc-acc: #7c3aed; }
.tm-onc__ad { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--tm-text, #0f172a);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-onc__alt-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tm-onc__deger { font-size: 18px; font-weight: 800; color: var(--onc-acc); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.tm-onc__alt { font-size: 12px; color: var(--tm-text-muted, #64748b); }
.tm-onc__pzler { display: flex; gap: 4px; }
.tm-onc__pz-sm { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; padding: 1px; background: var(--tm-bg-surface, #fff); border: 1px solid var(--tm-border, #e2e8f0); }
.tm-onc__eylem { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--tm-primary, #0175e4); }
.tm-onc__eylem i { font-size: 10px; transition: transform .18s ease; }
.tm-onc__link:hover .tm-onc__eylem i { transform: translateX(3px); }
.tm-onc__daha { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 8px; border-radius: 10px;
  border: 1px dashed var(--tm-border, #e2e8f0); background: none; font-size: 12.5px; font-weight: 600; color: var(--tm-primary, #0175e4); cursor: pointer; }
.tm-onc__daha i { transition: transform .2s ease; }
.tm-onc.is-tumu .tm-onc__daha i { transform: rotate(180deg); }
.tm-onc__bos { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; color: var(--tm-success-fg, #15803d); }
.tm-onc__bos span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--tm-success, #16a34a); }
@media (max-width: 560px) {
  .tm-onc { padding: 12px; }
  .tm-onc__filtre { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .tm-onc__filtre button { flex: 0 0 auto; }
  .tm-onc__grid { grid-template-columns: 1fr; gap: 8px; }
}

/* Pazaryeri logosu (2026-10-05) — Canlı platform listesi + sipariş tablosu. */
.tm-pz-logo { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; object-fit: contain; padding: 1px; margin-right: 6px; vertical-align: middle;
  background: var(--tm-bg-surface, #fff); border: 1px solid var(--tm-border, #e2e8f0); }
#tmLivePerformancePage .tm-live-plat__name { display: inline-flex; align-items: center; }
#tmLivePerformancePage .tm-live-pill { display: inline-flex; align-items: center; }

/* ==== Genel Bakış bento yerleşimi (2026-10-05) ====
   Kullanıcı: "çok boşluk ve karmaşıklık var; platform dağılımı ve aylık grafik yukarı". Satır 1: trend (8) |
   platform + hedef (4). Satır 3: en çok satanlar (8) | sipariş durumu (4). Boşluk: ızgara 12 px, panel 16 px. */
#overviewPage :is(.tm-ov-bento, .tm-dashboard-ch-grid--overview) { gap: 12px; margin: 12px 0 0; align-items: stretch; }
#overviewPage :is(.tm-ov-bento, .tm-dashboard-ch-grid--overview) .ch-panel { padding: 16px; }
#overviewPage :is(.tm-ov-bento, .tm-dashboard-ch-grid--overview) .ch-head { margin-bottom: 8px; }
#overviewPage :is(.tm-ov-bento, .tm-dashboard-ch-grid--overview) .ch-h3 { font-size: 15px; font-weight: 650; }
#overviewPage :is(.tm-ov-bento, .tm-dashboard-ch-grid--overview) .ch-sub { font-size: 12px; }
#overviewPage .tm-ov-yan { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#overviewPage .tm-ov-yan > .ch-panel { flex: 1 1 auto; margin: 0; }
#overviewPage .tm-ov-yan .tm-hedef { margin: 0; padding: 14px 16px; }
#overviewPage .tm-ov-yan .tm-hedef__v { font-size: 20px; }
#overviewPage .tm-ov-yan .tm-hedef__pct { font-size: 22px; }
#overviewPage .tm-ov-yan .tm-hedef__lead { flex-basis: 140px; }
#overviewPage .tm-ov-yan .tm-hedef__bar { margin: 10px 7px 8px; }
#overviewPage .tm-ov-yan .tm-hedef__stat { padding: 3px 8px; font-size: 12px; }
#overviewPage .tm-ov-yan .tm-hedef__stat:first-child { display: none; }   /* dar sütunda tahmin, %58'in yanında fazlalık */
/* Platform halkası dar sütunda küçük + liste sıkı */
/* Veri gelmeden ÖNCE de son yükseklik (2026-10-11, ölçüldü): JS büyük sayıyı, alt istatistikleri
   ve pastayı çizince aylık kart 381→516, platform kartı 168→303 px uzuyor, altındaki Hedef ve
   Öncelikli işler 135 px aşağı kayıyordu (CLS 0,021). Yer önceden ayrılır. */
#overviewPage #tmOvMonthlyPanel > .ch-head { min-height: 88px; }
#overviewPage #tmOvMonthlyFoot:empty { min-height: 114px; }
#overviewPage #tmOvPlatform:empty { min-height: 140px; }
#overviewPage .tm-ov-plat .ch-donut-wrap { gap: 12px; flex-wrap: nowrap; align-items: center; }
#overviewPage .tm-ov-plat svg.ch-donut { width: 120px; height: 120px; flex: 0 0 120px; }
#overviewPage .tm-ov-plat .ch-legend { font-size: 12px; gap: 4px; min-width: 0; flex: 1 1 auto; }
#overviewPage .tm-ov-durum svg.ch-donut { width: 120px; height: 120px; flex: 0 0 120px; }
#overviewPage .tm-ov-durum .ch-legend { font-size: 12.5px; }
#overviewPage .tm-ov-durum__alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tm-border-light, #f1f5f9); }
#overviewPage .tm-ov-durum__alt span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--tm-bg-subtle, #f1f5f9); font-size: 12px; color: var(--tm-text-secondary, #475569); }
#overviewPage .tm-ov-durum__alt i { color: var(--tm-primary, #0175e4); font-size: 11px; }
#overviewPage .tm-ov-durum__alt .is-pos { color: var(--tm-success-fg, #15803d); }
#overviewPage .tm-ov-durum__alt .is-neg { color: var(--tm-danger-fg, #b91c1c); }
#overviewPage .tm-ov-top .ch-mount[hidden] { display: none; }
/* Trend paneli: alt özet tek sıkı satır */
#overviewPage .tm-ov-trend .tm-ovtrend-foot { margin-top: 8px; padding-top: 10px; }
#overviewPage .tm-onc { margin: 12px 0 0; }
@media (max-width: 1023.98px) {
  #overviewPage .tm-ov-yan { grid-column: span 12; flex-direction: row; flex-wrap: wrap; }
  #overviewPage .tm-ov-yan > * { flex: 1 1 320px; }
  #overviewPage .tm-ov-durum { grid-column: span 12; }
}
@media (max-width: 767.98px) {
  #overviewPage .tm-ov-yan { flex-direction: column; }
  #overviewPage :is(.tm-ov-bento, .tm-dashboard-ch-grid--overview) .ch-panel { padding: 12px; }
}
/* Bento ince ayar (2026-10-05): dar sütunda platform adı kesiliyordu → tutar sütunu gizli, ad + pay görünür;
   hedef tutarı tek satır; en çok satanlar 6 satır; sipariş durumu dikeyde ortalı. */
#overviewPage .tm-ov-plat .ch-legend li { grid-template-columns: 10px minmax(0, 1fr) auto; }
#overviewPage .tm-ov-plat .ch-legend .v, #overviewPage .tm-ov-plat .ch-legend .vl, #overviewPage .tm-ov-plat .ch-legend .val { display: none; }
#overviewPage .tm-ov-yan .tm-hedef__lead { flex: 1 1 100%; order: 1; }
#overviewPage .tm-ov-yan .tm-hedef__v { font-size: 18px; white-space: nowrap; }
#overviewPage .tm-ov-yan .tm-hedef__v small { font-size: 12px; }
#overviewPage .tm-ov-yan .tm-hedef__top { position: relative; }
#overviewPage .tm-ov-yan .tm-hedef__pct { position: absolute; top: -2px; right: 0; font-size: 20px; }
#overviewPage .tm-ov-yan .tm-hedef__edit { order: 2; margin: 0 -10px -6px; }
#overviewPage .tm-ov-top .ch-rank-row:nth-child(n+7) { display: none; }
#overviewPage .tm-ov-durum { display: flex; flex-direction: column; }
#overviewPage .tm-ov-durum > .ch-mount { flex: 1 1 auto; display: flex; align-items: center; }
#overviewPage .tm-onc__link { padding: 10px 12px; gap: 6px 12px; }
#overviewPage .tm-onc__grid { align-items: start; }

/* ==== Canlı Performans yerleşimi (2026-10-05) ====
   Grafik solda (8) · platform sağda (4) kompakt: halka 140 px, pazaryeri satırı tek satır (logo · ad · çubuk ·
   ciro · pay), kâr/adet ince ikinci satır. "Bugünün özeti" tek satırlık mini şerit (~64 px). */
#tmLivePerformancePage .tm-dashboard-ch-grid--live { gap: 12px; }
#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel { padding: 16px; }
/* (2026-10-09: sabit 140px kaldırıldı — halka artık kalan boşluğa büyüyor; dosya sonundaki kurala bak.) */
#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel.span-2 .ch-donut-wrap { gap: 10px; }
#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel.span-2 .ch-legend { display: none; }   /* liste aşağıdaki satırlarda */
#tmLivePerformancePage .tm-live-plat { gap: 8px; padding-top: 10px; }
#tmLivePerformancePage .tm-live-plat__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
#tmLivePerformancePage .tm-live-plat__head { display: contents; }
/* Ölçek düzeltmesi (2026-10-09): bu üç satır 13px ve 11,5px yazıyordu — ikisi de tasarım
   ölçeğinde YOK (ds-tokens.css: body 14/20 · caption 12/16 · micro 11/14). Kurallar id ile
   yazıldığı için ds-live.css'in token'lı aynı kurallarını sessizce eziyorlardı; artık ikisi
   aynı değeri söylüyor. (DS token'ı yoksa düşen sabit = token'ın kendi değeri.) */
#tmLivePerformancePage .tm-live-plat__name { font-size: var(--tm-type-body, 14px); line-height: var(--tm-type-body-lh, 20px); font-weight: 600; min-width: 0; }
#tmLivePerformancePage .tm-live-plat__rev { font-size: var(--tm-type-body, 14px); line-height: var(--tm-type-body-lh, 20px); font-weight: 700; text-align: right; }
#tmLivePerformancePage .tm-live-plat__bar { grid-column: 1 / -1; height: 4px; }
#tmLivePerformancePage .tm-live-plat__meta { grid-column: 1 / -1; font-size: var(--tm-type-micro, 11px); line-height: var(--tm-type-micro-lh, 14px); gap: 8px; }

/* ====================================================================
   Anlık Platform Dağılımı kartı — boşluğun gerçek bilgiyle doldurulması (2026-10-09)
   Kullanıcı: "gereksiz geniş, kötü duruyor". ÖLÇÜLDÜ (az-veri senaryosu, 1440px): kart
   364×530 iken içerik 140px halka + 40px tek satırdı → ~300px ölü boşluk. Üç ekleme:
     ① .tm-live-plat__cols — sütun başlığı (satırlar tablo gibi okunsun)
     ② .tm-live-star      — "Bugünün yıldızı" (kaldırılan bandın tek benzersiz kutusu)
     ③ büyüyen halka     — sabit 140px yerine kalan boşluğa ölçeklenen SVG (en çok 240px)
   ==================================================================== */
#tmLivePerformancePage .tm-live-plat__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  margin: 10px 0 -2px; padding-bottom: 6px; border-bottom: 1px solid var(--tm-border, #e2e8f0);
  font-size: var(--tm-type-micro, 11px); line-height: var(--tm-type-micro-lh, 14px);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tm-text-muted, #64748b);
}
#tmLivePerformancePage .tm-live-plat__cols[hidden] { display: none; }
#tmLivePerformancePage .tm-live-plat__cols > span:last-child { text-align: right; }
#tmLivePerformancePage .tm-live-plat { padding-top: 8px; }

#tmLivePerformancePage .tm-live-star {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--tm-border, #e2e8f0);
}
#tmLivePerformancePage .tm-live-star[hidden] { display: none; }
#tmLivePerformancePage .tm-live-star__gorsel {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; font-size: 14px;
  color: #b45309; background: color-mix(in srgb, #f59e0b 16%, var(--tm-bg-surface, #fff));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--tm-border, #e2e8f0));
}
#tmLivePerformancePage .tm-live-star__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--tm-bg-surface, #fff); }
#tmLivePerformancePage .tm-live-star__govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#tmLivePerformancePage .tm-live-star__k {
  font-size: var(--tm-type-micro, 11px); line-height: var(--tm-type-micro-lh, 14px);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tm-text-muted, #64748b);
}
#tmLivePerformancePage .tm-live-star__ad {
  font-size: var(--tm-type-body, 14px); line-height: var(--tm-type-body-lh, 20px); font-weight: 600;
  color: var(--tm-text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tmLivePerformancePage .tm-live-star__d {
  font-size: var(--tm-type-micro, 11px); line-height: var(--tm-type-micro-lh, 14px); color: var(--tm-text-muted, #64748b);
}
#tmLivePerformancePage .tm-live-star__d b { color: var(--tm-text, #0f172a); font-weight: 600; }

/* Halka artık SABİT 140px değil: kartın kalan boşluğunu doldurur (viewBox’lı SVG → width:auto +
   height:%100 ile en-boy oranını koruyarak ölçeklenir). Az veride satır az → halka büyür;
   dolu veride satırlar yer kaplar → halka tabanına iner. Eski 140px sabiti, kart 530px’e
   gerilirken içeriği 180px’de bırakıp ~300px ölü boşluk açıyordu (ölçüm 2026-10-09). */
#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel.span-2 > #tmLivePlatformVanilla.ch-mount {
  /* Halka kartın ESNEK parçası: boşluk varsa büyür, satır çoksa küçülür. `min-height: 110`
     tabanı önemli — kartın DOĞAL yüksekliğini belirler; 130’da 6 pazaryeri + yıldız satırıyla
     kart 669px’e çıkıp satırı kendi sürüklüyor, bu kez saatlik akışın ALTINDA boşluk açıyordu
     (ölçüm 2026-10-09: panel 669 > saatlik 570). */
  /* `flex-basis: 110px` ŞART: taban ‘auto’ kalırsa flex, mount’un İÇERİK boyunu (SVG’nin
     168px’lik özniteliği) temel alır ve kart küçülemez — ölçüm: panel 669 > saatlik 570.
     Taban 110 olunca kartın doğal boyu 521’e iner, ızgara onu 570’e gerer ve ARTAN yeri mount alır. */
  /* 2026-10-10 (kullanıcı: "pie chart'ı büyüt"): yıldız kutusu kaldırıldı, halka artık SABİT 160 px
     ve kartın ÜSTÜNDE; satır listesi altında kalan yüksekliği paylaşıyor (ds-live.css ④). Esnek taban
     (110) bu düzende halkayı küçültüyordu — id-özgüllüğü nedeniyle sınıf kuralı inertti (ölçüldü: 110). */
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-height: 160px; overflow: visible;
}
#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel.span-2 .ch-donut-wrap {
  height: 100%; justify-content: center; align-items: center;
}
#tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel.span-2 .ch-donut-wrap svg.ch-donut {
  width: 160px; height: 160px; max-height: 160px; min-height: 0;
}
@media (max-width: 1099px) {
  #tmLivePerformancePage .tm-dashboard-ch-grid--live > .ch-panel.span-2 .ch-donut-wrap svg.ch-donut {
    width: 150px; height: 150px; max-height: 150px;
  }
}

/* Saatlik Akış özet satırı hiyerarşisi (2026-10-09): dört parça da aynı 12/600 ile yazılıyordu,
   ana rakam ayırt edilemiyordu. İlk parça (Bugün toplam) başlık boyuna çıkar; metin aynı. */
#tmLivePerformancePage .tm-live-hourly-stats .tm-live-hourly-stat { display: inline-flex; align-items: baseline; gap: 5px; }
#tmLivePerformancePage .tm-live-hourly-stats .tm-live-hourly-stat.is-ana > strong {
  /* 2026-10-10: 16 → 18 (başlık kademesi). Bu id-kuralı (1,3,1) ds-live.css'teki sınıf kuralını (0,4,1)
     eziyordu; "hero 18 px" ORADAN yazılınca inert kalıyordu (QA ölçümü) → değer BURADA. */
  font-size: var(--tm-type-title, 18px); line-height: var(--tm-type-title-lh, 28px);
}

html.dark-mode #tmLivePerformancePage .tm-live-plat__cols,
body.dark-mode #tmLivePerformancePage .tm-live-plat__cols { border-color: #334155; }