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

/* ===== css/tm-shell-v2.css ===== */
/* 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. */
/**
 * Trendmetrik UI v2 — Shell Layout
 * Grid-based layout: sidebar | [header + page content]
 * Reference: trendmetrik-v2 target design
 *
 * --tmv2-* tasarım tokenları: theme-variables.css (tek kaynak).
 */

/* ============ APP SHELL — CSS GRID ============ */
.tmv2-app {
  display: grid;
  grid-template-columns: var(--tmv2-sb-w) 1fr;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  font-family: var(--tmv2-ff-sans);
  color: var(--tmv2-ink);
  background: var(--tmv2-page);
  overflow-x: hidden;
}

:is(body.tm-yan-yok, #tm-yok) .tmv2-app {
  grid-template-columns: 1fr;
}

/* ============ SIDEBAR (ortak görünüm; konum masaüstü / mobil medya sorgularında) ============ */
/* YALNIZ iskelet/konum. Renk, dolgu, tipografi → v2/components/sidebar.css.
   2026-10-08: `background: var(--tmv2-surface)` (açık temada BEYAZ) ve
   `border-right`/`padding` buradan kaldırıldı — ray'in görünümünü iki dosya
   birden söylüyordu. */
#tmv2SidebarRoot.tmv2-sidebar {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tmv2SidebarRoot.tmv2-sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/*
 * Masaüstü: sol sütun viewport’a sabitlenir; sayfa (ana sütun) scroll olurken sidebar yerinde kalır.
 * Sticky + tek grid satırında uzun içerik ile güvenilir değil; fixed + ana sütun offset.
 */
@media (min-width: 1025px) {
  :is(body:not(.tm-yan-yok), #tm-yok) .tmv2-app {
    display: block;
  }

  #tmv2SidebarRoot.tmv2-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--tmv2-sb-w);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    z-index: var(--tmv2-z-sidebar);
  }

  .tmv2-main:not(.tmv2-main--no-sidebar) {
    margin-left: var(--tmv2-sb-w);
    width: calc(100% - var(--tmv2-sb-w));
    min-width: 0;
    box-sizing: border-box;
  }

  .tmv2-main.tmv2-main--no-sidebar {
    margin-left: 0;
    width: 100%;
  }
}

/* ============ MAIN COLUMN ============ */
.tmv2-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.tmv2-main--no-sidebar {
  grid-column: 1 / -1;
}

/* ============ HEADER (sticky in main column) ============ */
header.tmv2-header {
  position: sticky;
  top: 0;
  z-index: var(--tmv2-z-header);
  background: var(--tmv2-surface);
  border-bottom: 1px solid var(--tmv2-line-2);
  padding: 0 var(--tmv2-layout-gutter);
  min-height: 58px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Inner header bar: flexbox row */
header.tmv2-header .tmv2-header-inner {
  display: flex;
  align-items: center;
  gap: var(--tm-layout-gap);
  width: 100%;
  max-width: var(--tmv2-page-inner-max, 1600px);
  margin: 0 auto;
  min-height: 58px;
  /* visible: overflow:hidden kesiyordu — bildirim / hesap dropdown'ları header altına taşınamıyordu */
  overflow: visible;
}

/* Title/search section shrinks to fit */
header.tmv2-header .tmv2-header--inline-in-bar {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/* Action buttons don't shrink */
header.tmv2-header .header-actions,
header.tmv2-header .tmv2-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mobile menu button: visible only on tablet/mobile */
header.tmv2-header #mobileMenuToggle {
  display: none;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  header.tmv2-header #mobileMenuToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tmv2-ink-2);
    border-radius: 8px;
  }
  header.tmv2-header #mobileMenuToggle:hover {
    background: var(--tmv2-surface-2);
  }
}

/* 2026-09-23 K5: tm-v2-shell-conflict-fix.css §"Dark mode: header" buraya
   eritildi (aynı seçici, iki tanım vardı). Kazanan değerler korundu:
   fallback zinciri (--tmv2-surface → --color-surface → #111b2e) patch'ten
   geldi; grep ile hiçbir sonraki v2-sheet'te bu seçiciye dokunulmadığı
   doğrulandı → !important kaldırıldı (piksel-diff kapısı bunu doğrular). */
html.dark-mode header.tmv2-header {
  background: var(--tmv2-surface, var(--color-surface, #111b2e));
  border-bottom-color: var(--tmv2-line);
}

/* ============ PAGE HOST + MAIN (tek sayfa tuvali: padding/bg burada) ============ */
#tmv2App #tmv2Page.tmv2-page-host {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* main.tmv2-page: GLOBAL content shell contract (base.html) —
   single source of truth for ALL dashboard/admin page padding.
   2026-06-11 third pass (real visual-gap measurement, 13 pages × 3
   viewports): main padding was correct but the RENDERED gap was still
   30/36/44 (t/l/r) because .tmv2-page-inner re-added sp-5 (20px) on
   all four sides on every page, and page-root wrappers (.container-
   fluid.py-2, .wide-container, .tmv2p module roots, .app-container)
   stacked 8–16px more on top. The shell is now the ONLY gutter
   source: inner pad tokens are zeroed in this scope and page-root
   wrapper classes are normalized below. Visual target (CEO):
   top 8-12 / left 14-18 / right 24-32 desktop. */
html body #tmv2App main#mainContent.main-content.tmv2-page {
  --tmv2-page-inner-max: var(--tmv2-page-inner-standard-max, 1600px);
  /* .tmv2-page-inner padding lives on these tokens; inside the shell
     they must be 0 — outside .tmv2-page mains the fallback (sp-5)
     keeps working, which is why the tokens exist at all. */
  --tmv2-page-inner-pad-x: 0px;
  --tmv2-page-inner-pad-y: 0px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  /* Dengeli yatay gutter (CEO 2026-06-19: referans tasarıma uyum). Eski
     76px sağ gutter tüm sayfa boyunca asimetrik "sola kaymış" görünüm
     veriyordu (hedef zaten left 14-18 / right 24-32 idi). Floating support
     butonları yalnız alt-sağ köşede yüzer; wrapper padding-bottom (48-64px)
     son içeriği onların üstünde tutar. */
  /* FIX 2026-07-09 (kullanıcı: tüm sayfalarda sağ boşluk, FAB içeriği örtmesin):
     sağ gutter FAB-clearance'a (72px) çıkarıldı — sağ-alt yüzen FAB'lar (44px+16px
     ~60px) 28px gutter'da içeriğin (özellikle uzun tablolar) üstüne biniyordu.
     Shell "tek yatay-gutter kaynağı" olduğundan bu TÜM sayfaları global etkiler. */
  /* GLOBAL SPACING REFACTOR 2026-07-29 (kullanıcı: asimetrik/tutarsız boşluk,
     simetrik+tutarlı istiyor). Yatay gutter SİMETRİK 32px (önce 72px-sağ/28px-sol
     asimetrikti). FAB'lar alt-sağda yüzdüğünden içerik onları 80px alt-boşlukla
     geçer (yatay örtüşme minimum; simetri kullanıcı-önceliği). */
  /* TEK BOŞLUK KAYNAĞI: tüm sayfa dikey+yatay boşluğu buradan gelir; sayfa
     wrapper'ları sıfırlanır (aşağıda) → her sayfada birebir aynı. */
  /* 2026-09-23: kenar ve FAB payı token'a bağlandı (v2/tokens.css --tm-page-edge-x / --tm-fab-clearance). */
  padding: 16px var(--tm-page-edge-x, 32px) var(--tm-fab-clearance, 72px) var(--tm-page-edge-x, 32px) !important;
  background: var(--tmv2-page-bg, var(--tmv2-page));
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  html body #tmv2App main#mainContent.main-content.tmv2-page {
    padding: 10px 20px 20px 20px !important;
  }
}

@media (max-width: 640px) {
  html body #tmv2App main#mainContent.main-content.tmv2-page {
    padding: 8px 12px 18px 12px !important;
  }
}

/* GLOBAL inner-wrapper normalize — every direct child of the shell
   (regardless of class: .tmv2-page-inner, .dashboard-container,
   .container, .dashboard-page, .content-wrapper, .tm-page-container,
   etc.) is reset to full width and zero horizontal margin so its
   own paddings/margins cannot tilt the visual gap on any page.
   Single rule, no per-page selector. */
html body #tmv2App main#mainContent.main-content.tmv2-page > *:not(.tm-tour-fab-mobile) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Mobil sayfa-turu yedek FAB (#tmTourFabMobile): .tmv2-page-body flex column +
   align-items:stretch butonu tam genişliğe çekip yatay oval yapıyordu.
   main doğrudan çocuk veya .tmv2-page-body içi — her iki yerleşimde 44×44 sabit.
   bottom/right inline page_tour stillerinde kalır (account bottom-nav offset). */
html body #tmv2App main#mainContent.main-content.tmv2-page > .tm-tour-fab-mobile,
html body #tmv2App .tm-tour-fab-mobile,
html body #tmv2App #tmTourFabMobile {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  position: fixed !important;
  z-index: 1080 !important;
}

/* GLOBAL page-root wrapper normalize — transparent gutter wrappers
   only, by class whitelist, at page-root depth (main / inner / shell
   direct children, .tmv2-page-body children down to 3 levels). These
   classes are layout containers by convention and were duplicating
   the shell gutter (.container-fluid 12px + py-2/3, .wide-container
   sp-3, .tmv2p module roots 16px, .app-container). Cards, tables and
   component internals are never selected — no per-page rule. */
html body #tmv2App main#mainContent.main-content.tmv2-page
  > :is(.container, .container-fluid, .wide-container, .app-container, .dashboard-container, .dashboard-page, .content-wrapper, .tm-page-container, .page-container, .page-stack, .tmv2p, .tm-page):where(:not(.tm-ds *)),
html body #tmv2App main#mainContent.main-content.tmv2-page
  :is(.tmv2-page-inner, .tmv2-page-shell) > :is(.container, .container-fluid, .wide-container, .app-container, .dashboard-container, .dashboard-page, .content-wrapper, .tm-page-container, .page-container, .page-stack, .tmv2p, .tm-page):where(:not(.tm-ds *)),
html body #tmv2App main#mainContent.main-content.tmv2-page
  .tmv2-page-body > :is(.container, .container-fluid, .wide-container, .app-container, .dashboard-container, .dashboard-page, .content-wrapper, .tm-page-container, .page-container, .page-stack, .tmv2p, .tm-page):where(:not(.tm-ds *)),
html body #tmv2App main#mainContent.main-content.tmv2-page
  .tmv2-page-body > * > :is(.container, .container-fluid, .wide-container, .app-container, .dashboard-container, .dashboard-page, .content-wrapper, .tm-page-container, .page-container, .page-stack, .tmv2p, .tm-page):where(:not(.tm-ds *)),
html body #tmv2App main#mainContent.main-content.tmv2-page
  .tmv2-page-body > * > * > :is(.container, .container-fluid, .wide-container, .app-container, .dashboard-container, .dashboard-page, .content-wrapper, .tm-page-container, .page-container, .page-stack, .tmv2p, .tm-page):where(:not(.tm-ds *)) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* GLOBAL V2 redesign wrapper normalize — the redesigned page roots
   (.rp-wrap profit/loss reports, .x-wrap xml, .en-wrap inventory,
   .tm-page-wrap, .cm-wrap/.fm-wrap mapping, .pr-wrap pricing, .pa/.tmonb,
   .xa-wrap/.pm-wrap/.bb-wrap/.qa-wrap) each carried their own 24px
   horizontal padding + max-width, so content width JUMPED between pages.
   Zero horizontal padding/margin + full width so EVERY redesigned page
   shares one content box; the shell gutter is the single horizontal-gap
   source. Vertical padding (top rhythm / bottom button-clearance) kept. */
html body #tmv2App main#mainContent.main-content.tmv2-page
  :is(.rp-wrap, .x-wrap, .en-wrap, .tm-page-wrap, .cm-wrap, .fm-wrap, .pr-wrap, .pa, .tmonb, .hc-wrap, .xa-wrap, .pm-wrap, .bb-wrap, .qa-wrap) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* The FIRST block of a page never adds its own top spacing — the shell
   padding-top is the single top-gap source. Catches page headers /
   sticky toolbars that carried their own margin-top (.kom-hero 12px,
   dashboard mobile .sticky-header 8px, …) without any per-page rule. */
html body #tmv2App main#mainContent.main-content.tmv2-page .tmv2-page-shell > :first-child,
html body #tmv2App main#mainContent.main-content.tmv2-page .tmv2-page-body > :first-child,
html body #tmv2App main#mainContent.main-content.tmv2-page .tmv2-page-body > * > :first-child {
  margin-top: 0 !important;
}

/* Global floating-action right offset — same horizontal rhythm as the
   content shell so the buttons line up with the right edge of cards. */
.tm-floating-actions,
.floating-action-buttons,
.fixed-action-buttons,
.tm-fab,
[data-tm-fab] {
  right: 24px;
}

@media (max-width: 640px) {
  .tm-floating-actions,
  .floating-action-buttons,
  .fixed-action-buttons,
  .tm-fab,
  [data-tm-fab] {
    right: 12px;
  }
}

/* =================================================================
   HEADER ↔ İÇERİK HİZALAMA — VARIANT-AWARE
   ----------------------------------------------------------------
   Kök sorun: header-inner sabit 1600px max-width kullanıyordu;
   .tmv2-page-inner--wide (1920px) variant'lı sayfalarda içerik
   320px daha geniş yayılıyor, header dar kalıyordu → sol/sağ
   boşluklar "tutarsız" görünüyordu. :has() ile main column içindeki
   variant'ı tespit edip --tmv2-page-inner-max'i tek noktadan
   güncelliyoruz; header otomatik aynı genişliğe geçiyor.
   ================================================================= */

/* Page variant'ı .tmv2-main seviyesine yükselt — header de aynı sınırı görür */
.tmv2-main:is(.tmh-44dec85f, :not(*) .tmv2-page-inner--wide),
.tmv2-main:is(.tmh-6fb19929, :not(*) .tmv2-page-inner--ops) {
  --tmv2-page-inner-max: var(--tmv2-page-inner-wide-max, 1920px);
}
.tmv2-main:is(.tmh-01119886, :not(*) .tmv2-page-inner--standard) {
  --tmv2-page-inner-max: var(--tm-content-max, 1280px);
}
.tmv2-main:is(.tmh-2c5fe880, :not(*) .tmv2-page-inner--narrow) {
  --tmv2-page-inner-max: 760px;
}
.tmv2-main:is(.tmh-0b3c62c0, :not(*) .tmv2-page-inner--fluid) {
  --tmv2-page-inner-max: none;
}

/* Header inner artık main'in scope'undan variant değerini alır.
   Eski kural (line 111) hâlâ geçerli ama artık doğru max'i okur.
   Sadece --fluid için özel davranış: max-width 'none' olamaz max-width
   property için; o yüzden --fluid'de header-inner full width açıyoruz. */
.tmv2-main:is(.tmh-0b3c62c0, :not(*) .tmv2-page-inner--fluid) header.tmv2-header .tmv2-header-inner {
  max-width: none;
}

/* Genişlik tek kaynak: .tmv2-page-inner; main tam sütun */
main.tmv2-content,
#tmv2App main#mainContent.tmv2-content,
#tmv2App main#mainContent {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}

#tmv2App .tmv2-page-body {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-section-gap);
}

/* 2026-09-23 K5: tm-v2-shell-conflict-fix.css §"Dark mode background
   conflicts" buraya eritildi. dark-mode.css bazı sayfalarda (ör.
   xml-upload-page — bu dosyadaki :has() listesinde YOK) #mainContent'e
   !important gradient basıyor; bu blok v2 kabuğu altındaki TÜM sayfaları
   inherit'e zorlayarak nötrler. Aşağıdaki sayfa-özel :has() kuralları daha
   yüksek specificity (+1 :has pseudo-class) taşıdığı için bu bloğu ezip
   kendi düz rengini basar — sıra bu yüzden önemsiz, ama okunabilirlik için
   üstte tutuldu. */
html.dark-mode #tmv2App main#mainContent,
html.dark-mode #tmv2App main.tmv2-content {
  background: inherit !important;
  background-image: none !important;
}

/* Dashboard page: white surface for KPI/panel cards */
html:not(.dark-mode) #tmv2App main#mainContent.tmv2-page:is(.tmh-4b5921bb, :not(*) .tmv2-dashboard) {
  background: var(--tmv2-surface);
}

html.dark-mode #tmv2App main#mainContent.tmv2-page:is(.tmh-4b5921bb, :not(*) .tmv2-dashboard) {
  background: var(--tmv2-page);
}

/* Buybox ve benzeri araç sayfaları: dashboard ile aynı tuval (solid zemin) */
html:not(.dark-mode) #tmv2App main#mainContent.tmv2-page:is(.tmh-9d583908, :not(*) .buybox-control-module) {
  background: var(--tmv2-surface);
}

html.dark-mode #tmv2App main#mainContent.tmv2-page:is(.tmh-9d583908, :not(*) .buybox-control-module) {
  background: var(--tmv2-page);
}

/* Hakediş / finans: içerik kartları beyaz; ana tuval surface-2 ile tek ton (beyaz şerit yok) */
html:not(.dark-mode) #tmv2App main#mainContent.tmv2-page:is(.tmh-dab47abe, :not(*) .payout-dash.tm-payout) {
  background: var(--tmv2-surface-2, var(--tmv2-surface));
}

html.dark-mode #tmv2App main#mainContent.tmv2-page:is(.tmh-dab47abe, :not(*) .payout-dash.tm-payout) {
  background: var(--tmv2-page);
}

/* XML Yönetimi — tuval buybox ile aynı; grid dekoru yumuşat */
html:not(.dark-mode) #tmv2App main#mainContent.tmv2-page:is(.tmh-c1926d24, :not(*) .xml-sources-page) {
  background: var(--tmv2-surface);
}

html.dark-mode #tmv2App main#mainContent.tmv2-page:is(.tmh-c1926d24, :not(*) .xml-sources-page) {
  background: var(--tmv2-page);
}

#tmv2Page.tmv2-page-host:is(.tmh-936dcd6f, :not(*) .xml-sources-page) {
  --tm-app-grid-line: rgba(15, 23, 42, 0.028);
}

#tmv2Page.tmv2-page-host:is(.tmh-936dcd6f, :not(*) .xml-sources-page) .bg-shapes::after {
  opacity: 0.42;
}

#tmv2Page.tmv2-page-host:is(.tmh-936dcd6f, :not(*) .xml-sources-page) .shape {
  opacity: 0.12 !important;
}

/* ----- v2 sayfa hiyerarşisi: .tmv2-page-inner → .tmv2-page-shell → header / grid ----- */
#tmv2App .tmv2-page-inner {
  width: 100%;
  max-width: var(--tmv2-page-inner-max, 1600px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* PR 2026-06-11 follow-up: main-content dashboard tabbed sayfalarında
     `.tmv2-page` class taşımıyor → tm-shell-v2.css:196 padding 14px rule
     uygulanmıyordu → içerik sol kenara yapışıyordu. Burada token-driven
     yatay padding ekle (left+right) ve dikey nefes (top+bottom) — tek
     yerden global kontrol. Token override edilebilir. */
  padding-left: var(--tmv2-page-inner-pad-x, var(--tmv2-sp-5));
  padding-right: var(--tmv2-page-inner-pad-x, var(--tmv2-sp-5));
  padding-top: var(--tmv2-page-inner-pad-y, var(--tmv2-sp-5));
  padding-bottom: var(--tmv2-page-inner-pad-y, var(--tmv2-sp-5));
}

#tmv2App .tmv2-page-shell {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-section-gap);
  margin-top: 0;
  padding-top: 0;
}

#tmv2App .tmv2-page-header {
  width: 100%;
  min-width: 0;
}

#tmv2App .tmv2-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--tmv2-section-gap);
  align-items: start;
  width: 100%;
}

@media (max-width: 991.98px) {
  #tmv2App .tmv2-section-grid {
    grid-template-columns: 1fr;
  }
}

/* Liste / tablo gövdesi — tek yüzey, token border + radius */
#tmv2App .tmv2-table-shell {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--tmv2-r-lg, 14px);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  background: var(--tmv2-surface);
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(15, 23, 42, 0.04));
  overflow: hidden;
}

html.dark-mode #tmv2App .tmv2-table-shell {
  border-color: var(--tmv2-line);
}

/* Neutralize legacy wrappers if they somehow still exist inside v2 shell */
#tmv2App .app-layout,
#tmv2App .page-shell,
#tmv2App .page-shell__inner {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tabbed dashboard */
.tmv2-dashboard {
  width: 100%;
  min-width: 0;
}

/* Dashboard nav: no extra margins, flush to page top */
.tmv2-dashboard .dashboard-shell--nav {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Dashboard main content: compact spacing */
.tmv2-dashboard .dashboard-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============ SIDEBAR COMPONENTS ============
   2026-10-08: marka bloğu, mağaza kartı, nav bölüm başlığı, rozet ve
   ABONELİK KARTI (.tmv2-pro-*) kuralları BU DOSYADAN KALDIRILDI ve tek
   kaynağa taşındı: static/css/v2/components/sidebar.css.

   Neden: aynı abonelik kartı iki ayrı görünüm veriyordu (ölçüldü,
   gerçek DOM) — burada turuncu/mor/gri gradyan blok, ds-shell.css'te
   saydam düz satır. Hangi görünümün çizileceğini sayfanın `tm-ds`
   seçimi belirliyordu; kullanıcı aynı kartı iki farklı biçimde görüyordu.

   Bu dosyada sidebar'a dair KALAN tek şey, yukarıdaki §SIDEBAR
   bölümündeki KONUMLANDIRMA (fixed/grid/drawer) ve aşağıdaki duyarlı
   (responsive) kurallardır. Görünüm buraya geri eklenmez.
   ============================================================ */

/* ============ RESPONSIVE — collapse sidebar below 1024px ============ */
/* ============ RESPONSIVE: TABLET ≤1024px ============ */
@media (max-width: 1024px) {
  .tmv2-app {
    grid-template-columns: 1fr;
  }

  /* Sidebar: off-screen drawer */
  /* z-index: tm-z-layers.css — modal (1055) / backdrop (1050) her zaman bu katmanın üstünde olmalı; eski 100k değerler tüm modalları tıklanmaz bırakıyordu */
  #tmv2SidebarRoot.tmv2-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 320px);
    height: 100%;
    z-index: var(--tm-z-sidebar, 1035);
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    box-shadow: none;
  }

  #tmv2SidebarRoot.tmv2-sidebar:has(#sidebar.mobile-open) {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  /* Perde, içerik ile drawer arası — modaldan (1050/1055) düşük kalmalı */
  .tmv2-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--tm-z-fixed, 1030);
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  .tmv2-sidebar-backdrop.is-visible {
    display: block;
    opacity: 1;
  }

  .tmv2-main {
    grid-column: 1 / -1;
  }

  #tmv2App {
    --tmv2-layout-gutter: var(--tmv2-sp-4);
    --tmv2-page-pad-x: var(--tmv2-layout-gutter);
    --tmv2-page-pad-y: var(--tmv2-layout-gutter);
    --tmv2-page-pad-bottom: var(--tmv2-sp-6);
  }

  /* Header: compact; yatay padding = layout gutter */
  header.tmv2-header {
    padding: 0 var(--tmv2-layout-gutter);
    min-height: 52px;
  }

  /* Header search: hide on tablet */
  header.tmv2-header .tmv2-search,
  header.tmv2-header .tmv2-header-search {
    display: none !important;
  }

  /* Page padding now from tokens above */

  /* 2026-09-23 K5: tm-v2-shell-conflict-fix.css §"Inner #sidebar mobile
     resets ≤1024px" buraya eritildi. #tmv2SidebarRoot.tmv2-sidebar (yukarıda)
     drawer'ın kendisini fixed+transform ile taşıyor; içindeki eski #sidebar
     bileşeni kendi legacy fixed-positioning CSS'ini (global.css/mobile-
     responsive.css) miras alırsa çifte konumlama olur — burada relative'e
     sıfırlanır. */
  #tmv2App #tmv2SidebarRoot #sidebar.sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============ RESPONSIVE: MOBILE ≤768px ============ */
@media (max-width: 768px) {
  #tmv2App {
    --tmv2-layout-gutter: var(--tmv2-sp-3);
    --tmv2-page-pad-x: var(--tmv2-layout-gutter);
    --tmv2-page-pad-y: var(--tmv2-layout-gutter);
    --tmv2-page-pad-bottom: var(--tmv2-sp-5);
  }

  /* 2026-09-23 K5: tm-v2-overrides.css §"Mobile safety" buraya eritildi.
     Kaynaktaki `max-width: 100% !important` zaten ölüydü: bu dosyanın
     üstündeki `#tmv2App main#mainContent.tmv2-content { max-width: none !important }`
     kuralı (id,class,type)=(2,1,1) specificity taşıyor, silinen kural
     (1,1,1) idi — hiçbir zaman kazanamıyordu. Yalnız gerçekten etkili olan
     overflow-x:hidden taşındı. */
  #tmv2App main.tmv2-content {
    overflow-x: hidden;
  }

  /* 2026-09-23 K5: tm-v2-shell-conflict-fix.css §"Inner #sidebar mobile
     resets ≤768px" buraya eritildi — 1024px'teki resetin üstüne, görünürlük/
     flex-layout garantisi ekler (drawer açıkken #sidebar görünür+dolu olmalı). */
  #tmv2App #tmv2SidebarRoot #sidebar.sidebar {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    background: transparent !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
  }

  header.tmv2-header {
    padding: 0 var(--tmv2-layout-gutter);
    min-height: 48px;
    /* x:hidden + y:visible bazı motorlarda dropdown'ı keser; panel açılıyor ama görünmüyordu */
    overflow: visible;
  }

  header.tmv2-header .tmv2-header-inner {
    gap: 6px;
    min-height: 48px;
  }

  /* Hide non-essential header items on mobile */
  header.tmv2-header .tmv2-header-status,
  header.tmv2-header .btn-nasil-yapilir {
    display: none !important;
  }

  /* Shrink action buttons on mobile: 44px → 36px */
  header.tmv2-header .header-actions,
  header.tmv2-header .tmv2-header-actions {
    gap: 4px !important;
  }

  header.tmv2-header .header-dropdown-btn,
  header.tmv2-header .header-actions .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
  }

  header.tmv2-header .header-actions .btn i,
  header.tmv2-header .header-dropdown-btn i {
    width: 18px !important;
    height: 18px !important;
  }

  /* Account avatar smaller */
  header.tmv2-header #accountMenuToggle .rounded-circle {
    width: 32px !important;
    height: 32px !important;
  }

  /* Title: truncate if too long */
  header.tmv2-header .tmv2-header-title {
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  /* The inline-in-bar grid: collapse to min-content on mobile */
  header.tmv2-header .tmv2-header--inline-in-bar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Hide "What's New" button on mobile to save space */
  header.tmv2-header #whatsNewToggle {
    display: none !important;
  }

  /* Background grid: reduce on mobile */
  .bg-shapes::before {
    opacity: 0.4;
  }
}

/* ============ RESPONSIVE: SMALL MOBILE ≤480px ============ */
@media (max-width: 480px) {
  #tmv2App {
    --tmv2-layout-gutter: var(--tmv2-sp-2);
    --tmv2-page-pad-x: var(--tmv2-layout-gutter);
    --tmv2-page-pad-y: var(--tmv2-layout-gutter);
    --tmv2-page-pad-bottom: var(--tmv2-sp-4);
  }

  header.tmv2-header {
    padding: 0 var(--tmv2-layout-gutter);
    min-height: 44px;
  }

  header.tmv2-header .tmv2-header-inner {
    gap: 4px;
  }

  /* K4 (mobil-denetim 2026-10-11): ≤480px'te 44px'e tm-header-v2.css'te
     bumplenen dokunma hedefi burada 32px'e geri küçülüyordu (header.tmv2-header
     .header-dropdown-btn — element+2sınıf, tm-header-v2.css'teki .header-dropdown-btn
     tek-sınıf kuralından daha spesifik, kazanıyordu). 44px tabanı korunuyor. */
  header.tmv2-header .header-dropdown-btn,
  header.tmv2-header .header-actions .btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  /* Dark mode toggle mobilde de görünsün — kullanıcı talebi.
     Önceki "alan korumak için gizle" stratejisi UX maliyeti yarattı:
     gece kullanan kullanıcı temayı değiştirmek için sayfa derinine
     girmek zorunda kalıyordu. Buton 32x32 olduğu için zaten dar yer
     kaplıyor. */
  header.tmv2-header #darkModeToggle {
    display: inline-flex !important;
  }

  /* Title even more compact */
  header.tmv2-header .tmv2-header-title {
    font-size: 14px !important;
    max-width: 100px;
  }

  /* Floating buttons: hide on small screens */
  #tmFbkOpen {
    display: none !important;
  }
}

/* ============ MOBILE UTILITY CLASSES ============ */

/* Table scroll wrapper — prevents body horizontal scroll */
.tmv2-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Auto table scroll on mobile — any table inside page content */
@media (max-width: 1024px) {
  #tmv2App main#mainContent.tmv2-page .table-responsive,
  #tmv2App main#mainContent.tmv2-page .table-scroll,
  #tmv2App main#mainContent.tmv2-page table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent cards and containers from exceeding viewport */
  #tmv2App main#mainContent.tmv2-page .card,
  #tmv2App main#mainContent.tmv2-page .panel,
  #tmv2App main#mainContent.tmv2-page [class*="container"] {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Filter bar: responsive wrap */
@media (max-width: 768px) {
  .tmv2-filter-bar,
  .tmv2-filterbar,
  .filter-bar,
  .dashboard-top-controls {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .tmv2-filter-bar > *,
  .tmv2-filterbar > *,
  .filter-bar > * {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
  }

  .tmv2-filter-bar .btn,
  .tmv2-filterbar .btn,
  .filter-bar .btn {
    flex: 0 0 auto;
  }
}

/* Empty state: compact on mobile */
@media (max-width: 768px) {
  .tmv2-empty-state,
  .empty-state-container {
    padding: 24px 16px !important;
    min-height: auto !important;
  }

  .tmv2-empty-state img,
  .empty-state-container img {
    max-width: 120px;
  }
}

/* Modal: mobile friendly */
@media (max-width: 768px) {
  .modal-dialog {
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }

  .modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
}


/* ===== css/tm-header-v2.css ===== */
/**
 * Trendmetrik UI v2 — üst şerit (kalıcı)
 * header.html içindeki inline <style> buraya taşındı; v2 chrome tm-v2-reference-chrome ile birleştirildi.
 */

#tmv2App {
  /* Header height variable — used for consistent spacing. Header is now sticky (not fixed). */
  --tmv2-header-offset: 60px;
}

/* 2026-09-28: dil seçici kaldırıldı (ürün tek dilli) → .tm-lang-flag* kuralları
   da silindi; tek tüketicileri header'daki bayrak makrosuydu. */

/* Eski layout: sol tmv2 sidebar yoksa */
@media (min-width: 992px) {
  html:is(.tmh-4dd2e557, :not(*) > :is(.tm-yan-yok, body:not(.tmv2-body), #tm-yok)) .sidebar {
    top: 76px;
    height: calc(100vh - 76px);
  }
}

/* #mainContent üst boşluk: tm-v2-overrides.css (base head sonunda !important; hesap sayfaları hariç) */

/* === Legacy header shell (overridden by #tmv2App rules below) === */
    body.bg-secondary-100 {
      background: var(--tmv2-surface-3) !important;
    }

    /* Legacy: only applies when NOT inside #tmv2App */
    body:not(.tmv2-body, #tm-yok) .header-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      padding: 20px;
      background: transparent;
    }

    body:not(.tmv2-body, #tm-yok) .header-bar {
      background: var(--tmv2-surface);
      border-radius: var(--tmv2-r-xl);
      box-shadow: var(--tmv2-sh-2);
      padding: var(--tmv2-sp-3) var(--tmv2-sp-6);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--tmv2-sp-4);
      max-width: none;
      width: 100%;
      margin: 0;
      flex-wrap: wrap;
      border: 1px solid var(--tmv2-line-2);
      box-sizing: border-box;
    }
    
    .header-logo-section {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .header-logo-icon {
      width: 40px;
      height: 40px;
      background: transparent;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--tm-fg-on-brand);
      font-weight: bold;
      font-size: 18px;
      overflow: hidden;
    }
    
    /* Sayfa adı — header ile uyumlu, okunaklı tipografi */
    .header-logo-link {
      text-decoration: none !important;
      color: var(--tmv2-ink) !important;
      gap: 0.625rem;
      border-radius: 12px;
      transition: background-color 0.18s ease;
    }
    .header-logo-link:hover {
      background: rgba(15, 23, 42, 0.04);
    }
    .header-logo-link:focus-visible {
      outline: 2px solid rgba(var(--color-primary-rgb), 0.45);
      outline-offset: 2px;
    }
    .header-logo-text {
      font-size: 1.0625rem !important;
      font-weight: 600 !important;
      color: var(--tmv2-ink) !important;
      letter-spacing: -0.03em !important;
      line-height: 1.2 !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: color 0.18s ease;
    }
    .header-logo-link:hover .header-logo-text {
      color: var(--color-primary) !important;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Narrow desktop / tablet (≥md, <xl): the header packs 5+ actions and gets
       crowded between ~960–1199px. The text labels on `Sync aktif` and
       `Nasıl Yapılır?` are hidden via Bootstrap responsive classes (d-xl-inline)
       at this range, so the corresponding pill/button collapses to a compact
       icon-only form. Tighten the inter-action gap and `Nasıl Yapılır?` padding
       so the row breathes without changing the desktop ≥xl layout. */
    @media (min-width: 768px) and (max-width: 1199.98px) {
      .header-actions { gap: 6px; }
      .btn-nasil-yapilir { padding: 8px 12px; gap: 0; }
      .tmv2-header-status { padding-left: 8px; padding-right: 8px; }
    }

    .btn-nasil-yapilir {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); /* Baklava Primary */
      color: var(--tm-fg-on-brand);
      border: none;
      border-radius: 8px; /* Baklava border-radius-sm */
      padding: 8px 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.2); /* Baklava shadow */
    }
    
    .btn-nasil-yapilir:hover {
      background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3); /* Baklava Primary Shadow */
      color: var(--tm-fg-on-brand);
    }
    
    .btn-nasil-yapilir-icon {
      width: 20px;
      height: 20px;
      background: var(--tm-warning-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    
    
    @media (max-width: 768px) {
      .header-bar {
        padding: 8px 10px;
        gap: 6px;
        justify-content: flex-start;
        min-height: 56px;
      }
      
      .header-logo-section {
        display: none !important;
      }
      
      .header-logo-text {
        display: none;
      }
      
      .header-logo-icon {
        display: none !important;
      }
      
      .btn-nasil-yapilir {
        display: none !important;
      }
      
      #mobileMenuToggle {
        margin-right: 8px !important;
        padding: 8px !important;
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      
      /* Masaüstünde mobile menu butonunu gizle */
      @media (min-width: 1025px) {
        #mobileMenuToggle {
          display: none !important;
        }
      }
      
      #mobileMenuToggle i {
        width: 20px !important;
        height: 20px !important;
      }
      
      .header-actions {
        gap: 6px;
        flex-wrap: nowrap;
        margin-left: auto;
        display: flex;
        align-items: center;
      }
      
      /* K4 (mobil-denetim 2026-10-11): 40px → 44px dokunma hedefi. İç ikon boyutu
         (18/16/20px) KORUNDU — yalnız dokunma alanı büyüdü, görsel ikon aynı kaldı. */
      .header-dropdown-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
      }

      .header-dropdown-btn i {
        width: 18px !important;
        height: 18px !important;
      }

      #accountMenuToggle {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0;
      }

      #accountMenuToggle > div {
        width: 32px !important;
        height: 32px !important;
        border-width: 2px !important;
      }

      #accountMenuToggle i {
        width: 16px !important;
        height: 16px !important;
      }

      #notificationsToggle {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        min-width: 44px !important;
        min-height: 44px !important;
      }
      
      .header-wrapper {
        padding: 1vw;
      }
      
      .api-warning-banner {
        order: 3 !important;
        width: 100% !important;
        margin: 8px 0 0 0 !important;
      }
      
      .api-warning-banner > div {
        font-size: 12px !important;
        padding: 6px 12px !important;
      }
      
      .api-warning-banner span {
        font-size: 12px !important;
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.9;
        transform: scale(1.02);
      }
    }
    
    /* Subscription Expiry Banner Styles */
    .subscription-expiry-banner {
      display: none;
    }
    
    .subscription-expiry-banner.visible {
      display: flex;
      align-items: center;
    }
    
    .subscription-banner-inner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      white-space: nowrap;
    }
    
    .subscription-banner-inner:hover {
      transform: translateY(-1px);
      text-decoration: none;
    }
    
    .subscription-banner-inner .banner-icon {
      font-size: 14px;
      flex-shrink: 0;
    }
    
    .subscription-banner-inner .banner-text {
      line-height: 1.2;
    }
    
    .subscription-banner-inner .banner-link {
      font-weight: 700;
      text-decoration: none;
      margin-left: 4px;
      transition: opacity 0.2s;
    }
    
    .subscription-banner-inner .banner-link:hover {
      opacity: 0.8;
    }
    
    /* Banner renk varyasyonları */
    .subscription-banner-critical {
      background: linear-gradient(135deg, var(--tm-error-bg) 0%, var(--tm-error-border) 100%);
      border: 1.5px solid var(--color-danger);
      color: var(--color-danger);
      box-shadow: var(--tmv2-sh-1);
      animation: pulse 2s infinite;
    }
    
    .subscription-banner-critical .banner-icon {
      color: var(--color-danger);
    }
    
    .subscription-banner-critical .banner-link {
      color: var(--color-danger);
    }
    
    .subscription-banner-warning {
      background: linear-gradient(135deg, var(--tm-warning-bg) 0%, var(--tm-warning-light) 100%);
      border: 1.5px solid var(--tmv2-warning);
      color: var(--color-text);
      box-shadow: var(--tmv2-sh-1);
    }
    
    .subscription-banner-warning .banner-icon {
      color: var(--tmv2-warning-border);
    }
    
    .subscription-banner-warning .banner-link {
      color: var(--tmv2-warning-border);
    }
    
    .subscription-banner-info {
      background: linear-gradient(135deg, var(--color-secondary-soft) 0%, var(--tm-info-border) 100%);
      border: 1.5px solid var(--color-primary);
      color: var(--color-primary-hover);
      box-shadow: var(--tmv2-sh-1);
    }
    
    .subscription-banner-info .banner-icon {
      color: var(--color-primary);
    }
    
    .subscription-banner-info .banner-link {
      color: var(--color-primary);
    }
    
    @media (max-width: 768px) {
      .subscription-expiry-banner.visible {
        display: flex !important;
        align-items: center;
        max-width: min(100vw - 100px, 220px);
        overflow: hidden;
      }
      .subscription-expiry-banner.visible .subscription-banner-inner {
        font-size: 11px;
        padding: 6px 8px;
        white-space: normal;
        line-height: 1.25;
      }
    }
    
    @media (max-width: 1100px) and (min-width: 769px) {
      .subscription-banner-inner {
        padding: 6px 10px;
        font-size: 11px;
      }
      
      .subscription-banner-inner .banner-icon {
        font-size: 12px;
      }
    }
/* === Dropdown, bildirim, tutorial === */
/* Tutorial step button styles */
    .tutorial-step-btn {
      cursor: pointer;
    }
    
    .tutorial-step-btn:hover {
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    }
    
    /* Header Dropdown Styles */
    .header-dropdown-btn {
      position: relative;
      z-index: 1001;
    }
    
    .header-dropdown-btn:hover {
      transform: translateY(-2px);
      background: rgba(59, 130, 246, 0.08) !important;
    }
    
    .header-dropdown-btn:active {
      transform: translateY(0);
    }
    
    .header-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: var(--tmv2-surface);
      overflow: hidden;
    }
    /* D4 2026-06-07: Bootstrap .dropdown-menu z-index 1000 default'unu güvenle
       override eder. Banner (1042) altında kalmasın diye 1045. Modal-backdrop
       (1050) üstüne çıkmaz. !important — bazı framework override'larına karşı
       (bu dosyada zaten !important kullanım pattern'i var, tutarlılık için). */
    .dropdown-menu.header-dropdown,
    .header-dropdown.dropdown-menu,
    ul.header-dropdown {
      z-index: var(--tm-z-header-dropdown, var(--tmv2-z-dropdown, 1000)) !important;
    }
    
    .header-dropdown.show {
      display: block !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
    
    .header-dropdown.closing {
      opacity: 0 !important;
      transform: translateY(-10px) !important;
    }
    
    .header-dropdown-item {
      padding: var(--tmv2-sp-3) var(--tmv2-sp-5);
      color: var(--tmv2-ink-2);
      text-decoration: none;
      display: flex;
      align-items: center;
      transition: all 0.2s ease;
      border: none;
      background: transparent;
    }
    
    .header-dropdown-item:hover {
      background: linear-gradient(90deg, var(--tmv2-surface-3) 0%, var(--tmv2-surface-2) 100%);
      color: var(--color-text);
      padding-left: var(--tmv2-sp-6);
    }
    
    .header-dropdown-item i {
      color: var(--color-text-muted);
      transition: color 0.2s ease;
    }
    
    .header-dropdown-item:hover i {
      color: var(--color-primary);
    }

    /* =============================================================
       ACCOUNT DROPDOWN (#accountDropdown / .header-dropdown--account)
       Polished design — token-driven, theme-aware, sectioned.
       ============================================================= */
    .header-dropdown.header-dropdown--account {
      min-width: 260px;
      max-width: calc(100vw - 20px);
      border: none;
      border-radius: 16px;
      margin-top: 8px;
      padding: 0 0 var(--tmv2-sp-2);
      background: var(--tm-bg-card, #ffffff);
      box-shadow:
        0 6px 24px rgba(15, 23, 42, 0.10),
        0 1px 4px rgba(15, 23, 42, 0.06);
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      overflow: hidden;
    }
    .header-dropdown.header-dropdown--account.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Profile section: avatar + name + email */
    .header-dropdown__profile {
      padding: 14px var(--tmv2-sp-5);
      background: linear-gradient(
        135deg,
        var(--tm-primary-soft, #e8f3ff) 0%,
        var(--tm-bg-secondary, #f3f7fb) 100%
      );
      border-bottom: 1px solid var(--tm-border-color, #dbe5ef);
    }
    .header-dropdown__profile-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .header-dropdown__avatar {
      flex: none;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--tm-account-cta-gradient,
        linear-gradient(135deg, var(--color-primary, #0175e4) 0%, var(--color-primary-hover, #0163c2) 100%));
      box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 1, 117, 228), 0.25);
      color: #ffffff;
    }
    .header-dropdown__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .header-dropdown__avatar i,
    .header-dropdown__avatar svg {
      width: 20px;
      height: 20px;
    }
    .header-dropdown__profile-info {
      flex: 1 1 auto;
      min-width: 0;
    }
    .header-dropdown__name {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--tm-text-primary, #1e293b);
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-dropdown__email {
      font-size: 0.75rem;
      color: var(--tm-text-secondary, #64748b);
      line-height: 1.3;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Section label: tiny uppercase muted text grouping items */
    .header-dropdown__section-label {
      list-style: none;
      padding: 10px var(--tmv2-sp-5) 4px;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--tm-text-muted, #94a3b8);
    }

    /* Divider — minimal margin, theme-aware color */
    .header-dropdown__divider {
      margin: var(--tmv2-sp-2) var(--tmv2-sp-3);
      border: 0;
      border-top: 1px solid var(--tm-border-color, #dbe5ef);
      opacity: 1;
    }

    /* Item layout: icon-chip + text (replaces inline icon) */
    .header-dropdown.header-dropdown--account .header-dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px var(--tmv2-sp-5);
      color: var(--tm-text-primary, #1e293b);
      font-size: 0.875rem;
      font-weight: 500;
      border-radius: 0;
      transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
    }
    .header-dropdown.header-dropdown--account .header-dropdown-item:hover {
      background: var(--tm-bg-hover, var(--tm-primary-soft, #e8f3ff));
      color: var(--tm-text-primary, #1e293b);
      padding-left: calc(var(--tmv2-sp-5) + 4px);
    }
    /* Override the older "all: linear-gradient" hover from the global rule */
    .header-dropdown.header-dropdown--account .header-dropdown-item {
      background: transparent;
    }

    /* Icon chip: small tinted square holding the lucide icon */
    .header-dropdown-item__icon {
      flex: none;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--tm-bg-tertiary, #f1f5f9);
      color: var(--tm-text-secondary, #64748b);
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .header-dropdown-item__icon i,
    .header-dropdown-item__icon svg {
      width: 15px !important;
      height: 15px !important;
      flex: none;
    }
    .header-dropdown.header-dropdown--account .header-dropdown-item:hover .header-dropdown-item__icon {
      background: var(--tm-primary-soft, #e8f3ff);
      color: var(--tm-primary, #0175e4);
    }

    /* Accent variant — used for "Mağaza Yönetimi" (admin link).
       Was incorrectly red; now neutral with brand accent on hover. */
    .header-dropdown-item__icon--accent {
      background: var(--tm-accent-soft, #fff1e8);
      color: var(--tm-accent, #fd751f);
    }
    .header-dropdown.header-dropdown--account .header-dropdown-item:hover .header-dropdown-item__icon--accent {
      background: var(--tm-accent, #fd751f);
      color: #ffffff;
    }

    .header-dropdown-item__text {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Danger variant: only logout. Red-tinted on hover. */
    .header-dropdown.header-dropdown--account .header-dropdown-item--danger {
      color: var(--tm-error, #dc2626);
    }
    .header-dropdown.header-dropdown--account .header-dropdown-item--danger:hover {
      background: var(--tm-error-bg, #fef2f2);
      color: var(--tm-error, #dc2626);
    }
    .header-dropdown.header-dropdown--account .header-dropdown-item--danger .header-dropdown-item__icon {
      background: var(--tm-error-bg, #fef2f2);
      color: var(--tm-error, #dc2626);
    }
    .header-dropdown.header-dropdown--account .header-dropdown-item--danger:hover .header-dropdown-item__icon {
      background: var(--tm-error, #dc2626);
      color: #ffffff;
    }

    /* Dark mode overrides (token-aware; falls back to dark hex) */
    html.dark-mode .header-dropdown.header-dropdown--account,
    [data-theme="dark"] .header-dropdown.header-dropdown--account {
      background: var(--tm-bg-card, #111b2e);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
    }
    html.dark-mode .header-dropdown__profile,
    [data-theme="dark"] .header-dropdown__profile {
      background: linear-gradient(
        135deg,
        rgba(58, 136, 229, 0.15) 0%,
        var(--tm-bg-secondary, #111b2e) 100%
      );
    }
    
    /* Custom notification styles */
    .notification-item {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--tmv2-line-2);
      cursor: pointer;
      transition: background-color 0.15s ease;
    }
    .notification-item:hover {
      background-color: var(--tmv2-surface-2);
    }
    .notification-item.unread {
      background-color: var(--tmv2-primary-soft);
      border-left: 3px solid var(--color-primary);
    }
    .notification-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.125rem;
    }
    .notification-icon.order {
      background: var(--color-secondary-soft);
    }
    .notification-icon.profit {
      background: var(--tmv2-success-soft);
    }
    .notification-icon.alert {
      background: var(--tmv2-danger-soft);
    }
    
    /* Dropdown positioning fix */
    @media (max-width: 768px) {
      .header-dropdown {
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: calc(100vw - 20px) !important;
        max-width: 320px !important;
        transform-origin: top right !important;
      }
      
      .header-actions {
        position: relative;
      }
      
      .header-actions .dropdown {
        position: static;
      }
    }
    
    @media (max-width: 576px) {
      .header-dropdown {
        right: 10px !important;
        left: auto !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
      }
    }
/* === Nasıl Yapılır / Kullanım rehberi modal (Bootstrap 5; backdrop body’de z~1050 — modal da body’ye taşınmalı) === */
#nasilYapilirModal.tmv2-guide-modal.modal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#nasilYapilirModal .tmv2-guide-modal__dialog {
  width: min(1040px, 90vw) !important;
  max-width: min(1040px, 90vw) !important;
  margin: 2.5rem auto !important;
  max-height: calc(100vh - 64px);
}

@media (max-width: 576px) {
  #nasilYapilirModal .tmv2-guide-modal__dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0.75rem auto !important;
    max-height: calc(100vh - 24px);
  }
}

#nasilYapilirModal .tmv2-guide-modal__content {
  border-radius: 16px !important;
  border: 1px solid var(--tmv2-line, #e7ebf1) !important;
  background: var(--tmv2-surface, #ffffff) !important;
  box-shadow: var(--tmv2-sh-2, 0 12px 40px rgba(15, 23, 42, 0.1)) !important;
  overflow: hidden !important;
  max-height: calc(100vh - 64px) !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 576px) {
  #nasilYapilirModal .tmv2-guide-modal__content {
    border-radius: 16px !important;
    max-height: calc(100vh - 24px) !important;
  }
}

#nasilYapilirModal .tmv2-guide-modal__header {
  flex-shrink: 0;
  padding: 1rem 1.25rem !important;
  background: var(--tmv2-surface, #fff) !important;
  border-bottom-color: var(--tmv2-line-2, #eef1f6) !important;
}

#nasilYapilirModal .tmv2-guide-modal__header .modal-title {
  font-size: 1.125rem !important;
  color: var(--tmv2-ink, #0f172a) !important;
}

#nasilYapilirModal .tmv2-guide-modal__header-sub {
  font-size: 0.8125rem !important;
  color: var(--tmv2-ink-2, #475569) !important;
}

#nasilYapilirModal .tmv2-guide-modal__header-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--tmv2-surface-2, #fafbfd);
  border: 1px solid var(--tmv2-line-2, #eef1f6);
}

#nasilYapilirModal .tmv2-guide-modal__close {
  opacity: 0.85;
  flex-shrink: 0;
}

#nasilYapilirModal .tmv2-guide-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important; /* tm-shell-v2 .modal-body 70vh üstünü kapat */
  overflow-y: auto !important;
  background: var(--tmv2-page, #f4f6fa) !important;
  -webkit-overflow-scrolling: touch;
}

#nasilYapilirModal .tmv2-guide-modal__quick {
  padding: 0.75rem 1.25rem !important;
  background: var(--tmv2-surface-2, #fafbfd) !important;
  border-bottom-color: var(--tmv2-line-2, #eef1f6) !important;
}

#nasilYapilirModal .tmv2-guide-modal__quick-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tmv2-surface, #fff);
  border: 1px solid var(--tmv2-line, #e7ebf1);
  box-shadow: var(--tmv2-sh-1);
}

#nasilYapilirModal .tmv2-guide-modal__quick-icon span {
  font-size: 1.25rem;
  line-height: 1;
}

#nasilYapilirModal .tmv2-guide-modal__quick-title {
  font-size: 0.9375rem !important;
  color: var(--tmv2-ink, #0f172a) !important;
}

#nasilYapilirModal .tmv2-guide-modal__quick-text {
  color: var(--tmv2-ink-2, #475569) !important;
  line-height: 1.45;
}

/* Accordion — sadece bu modalda; hover’da kaydırma yok */
#nasilYapilirModal #tutorialAccordion {
  padding: 0.75rem !important;
}

#nasilYapilirModal #tutorialAccordion .accordion-button {
  padding: 0.65rem 0.85rem !important;
  min-height: 48px;
  align-items: center !important;
}

#nasilYapilirModal #tutorialAccordion .accordion-button:not(.collapsed) {
  background: var(--tmv2-primary-soft, #eff5ff) !important;
  color: var(--tmv2-primary-ink, #1d4ed8) !important;
  box-shadow: none !important;
}

#nasilYapilirModal #tutorialAccordion .accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

#nasilYapilirModal #tutorialAccordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563eb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  transition: transform 0.2s ease;
  margin-left: auto;
}

#nasilYapilirModal #tutorialAccordion .accordion-button.collapsed::after {
  transform: rotate(-90deg);
}

#nasilYapilirModal #tutorialAccordion .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
}

#nasilYapilirModal #tutorialAccordion .accordion-item {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#nasilYapilirModal #tutorialAccordion .accordion-item:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

#nasilYapilirModal #tutorialAccordion .accordion-collapse {
  transition: max-height 0.35s ease;
}
/* === Store seçim === */
.store-option-btn:hover {
    border-color: var(--tmv2-primary) !important;
    background: linear-gradient(135deg, var(--tmv2-surface-2) 0%, var(--tmv2-surface-3) 100%) !important;
    transform: translateY(-2px);
    box-shadow: var(--tmv2-sh-2) !important;
  }
  
  .store-option-btn:active {
    transform: translateY(0);
  }
  
  .store-option-btn .store-icon-wrapper {
    transition: transform 0.3s ease;
  }
  
  .store-option-btn:hover .store-icon-wrapper {
    transform: scale(1.1);
  }
/* === v2 üst şerit (reference-chrome birleşik) === */
/* ----- Üst şerit: başlık + arama (örnek .tmv2-header) ----- */
.tmv2-header--page {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(200px, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--tmv2-line-2);
  background: var(--tmv2-page);
  flex-shrink: 0;
}

.tmv2-head-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.tmv2-head-title h1 {
  margin: 0;
  font-family: var(--tmv2-ff-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--tmv2-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmv2-head-title .en {
  font-size: 13px;
  color: var(--tmv2-ink-2);
  font-family: var(--tmv2-ff-sans);
}

.tmv2-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 12px;
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-line);
  border-radius: 999px;
  box-shadow: var(--tmv2-sh-1);
  color: var(--tmv2-ink-2);
  font-size: 13px;
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tmv2-search:focus-within {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.14);
}

.tmv2-search__icon {
  flex-shrink: 0;
  color: var(--tmv2-ink-2);
}

.tmv2-search input {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--tmv2-ink);
  min-width: 0;
}

/* 2026-10-07 — ÇİFT ÇERÇEVE DÜZELTMESİ (kullanıcı ekran görüntüsü, açık tema,
   Canlı Performans/Genel Bakış): `#tmHeaderSearchInput` dış `.tmv2-search`
   pill'inin (34px, ds-shell.css control-radius, tek kenarlık) İÇİNDE kendi
   40px'lik 999px-radius'lu kapsülünü ve AYRI bir arka plan/kenarlık rengini
   alıyordu — ölçüm: getComputedStyle açık temada input 40×297 @y10 vs pill
   34×340 @y13 (üstten/alttan taşma) + input background rgb(241,245,249) ≠
   pill background rgb(244,244,245); koyu temada input background
   rgb(16,21,29) ≠ pill rgb(30,37,51). Kök: ds/ds-polish.css:120-129 (açık,
   KALDIRILDI) + dark-mode-component-overrides-2026-06-11.css:642 (koyu,
   KALDIRILDI) + dashboard/dashboard-dark-mode.css:982-987 (koyu, KALDIRILDI).
   Bu üçü kaldırılınca SİTE-GENELİ `dark-mode.css:4640` (`input[type="search"],
   .search-input`) ve `dark-mode.css:5069` (`input, textarea, select`) hâlâ
   `!important` ile eşleşiyor (her ikisi de diğer sayfalardaki arama/form
   kutuları için GEREKLİ, dokunulmadı — bkz. store_header.html, cancellation
   dashboard vb.) — ama bunlar düz `!important`, ID seçici bunları yener.
   🔴 GERÇEK KOYU-TEMA ENGELİ başka bir yerdeydi — `theme-variables.css:1164`
   ve `:1344` ("DARK MODE v2/v3") `html.dark-mode input:not(...):not(#_tmdm)`
   / `:not(#_t):not(#_u)` kalıbı kullanıyor: `:not(#id)` özgüllüğe BİR ID
   ekliyor (CDP `CSS.getMatchedStylesForNode` ile ölçüldü — bu iki kural
   `#tmHeaderSearchInput{...!important}`'ı AÇIKÇA yeniyordu, çünkü v3'te 2 ID-
   bump var, bizde 1). Bu kalıp KASITLI (yorum: "ID-bump'ı, sayfa-içi
   `#id{...!important}` kurallarını yener") — bu yüzden ID seçiciyi daha fazla
   `:not()` ile güçlendirmek yerine, aynı dosyadaki iki kurala
   `:not(#tmHeaderSearchInput)` istisnası eklendi (checkbox/radio/… tip
   istisnalarıyla aynı kalıp). Tek otorite burada: ID seçici + !important,
   pill'in kendi zemini/kenarlığı (ds-shell.css `.tmv2-search`) korunur, input
   HER ZAMAN şeffaf/çerçevesiz kalır. `appearance: none` ayrıca eklendi (native
   arama-alanı dekorasyonunu tamamen kaldırır, zaten özel ikon/temizle butonu
   kullanıyoruz) — kozmetik/sağlamlaştırma, arka plan kusurunun kökü DEĞİLDİ. */
#tmHeaderSearchInput {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  height: 100% !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* Yerleşik (webkit/edge) arama temizle butonunu gizle — özel butonu kullanıyoruz */
.tmv2-search input[type="search"]::-webkit-search-cancel-button,
.tmv2-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.tmv2-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tmv2-ink-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tmv2-search__clear:hover {
  background: var(--tmv2-line);
  color: var(--tmv2-ink);
}

.tmv2-search__clear[hidden] {
  display: none;
}

/* Typeahead öneri paneli — input'un altında açılır liste */
.tmv2-search__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1080;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
  background: var(--tmv2-surface, #fff);
  border: 1px solid var(--tmv2-line, #e7ebf1);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.tmv2-search__suggest[hidden] {
  display: none;
}

.tmv2-search__suggest-group {
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tmv2-ink-2, #64748b);
}

.tmv2-search__suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--tmv2-ink, #1e293b);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.tmv2-search__suggest-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmv2-search__suggest-item__count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--tmv2-ink-2, #64748b);
  background: var(--tmv2-surface-2, #f1f5f9);
  border-radius: 999px;
  padding: 1px 7px;
}

.tmv2-search__suggest-item:hover,
.tmv2-search__suggest-item.is-active {
  background: var(--tmv2-surface-2, #f1f5f9);
}

.tmv2-search__suggest-item.is-active {
  outline: 1px solid var(--color-primary, #2563eb);
  outline-offset: -1px;
}

.tmv2-search__suggest-empty {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--tmv2-ink-2, #64748b);
}

html.dark-mode .tmv2-search__suggest {
  background: var(--color-surface, #1e293b);
  border-color: var(--tmv2-line, #334155);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html.dark-mode .tmv2-header--page {
  background: var(--color-bg);
  border-bottom-color: var(--tmv2-line);
}

/* Tek şerit: başlık | arama (esnek) | sağ boşluk — referans yatay üst bar */
.tmv2-header--inline-in-bar {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(160px, 1fr) minmax(0, auto);
  flex: 1;
  min-width: 0;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  border-bottom: none !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  .tmv2-header--inline-in-bar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tmv2-header--inline-in-bar .tmv2-head-title,
.tmv2-header--inline-in-bar .tmv2-header-title-group {
  min-width: 0;
}

.tmv2-header--inline-in-bar .tmv2-search {
  max-width: 340px;
  width: 100%;
  margin: 0 !important;
  justify-self: stretch;
}

@media (min-width: 901px) {
  .tmv2-header--inline-in-bar .tmv2-search {
    justify-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.tmv2-header--inline-in-bar .tmv2-head-right--placeholder {
  display: none;
}

/* Hide legacy logo section inside v2 header */
header.tmv2-header .header-logo-section {
  display: none !important;
}

/* V2 header: <header class="tmv2-header"> — styled in tm-shell-v2.css.
   No .header-wrapper/.header-bar inside v2 header — no legacy overrides needed. */

/* V2 header button styling */
header.tmv2-header .btn-nasil-yapilir {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  gap: 6px !important;
  box-shadow: none !important;
  transform: none !important;
}

header.tmv2-header .btn-nasil-yapilir:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--tmv2-sh-1) !important;
}

#tmv2App .tmv2-header-outer .btn-nasil-yapilir-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
}

#tmv2App .tmv2-header-outer .header-dropdown-btn {
  border-radius: 12px !important;
  width: 40px !important;
  height: 40px !important;
  color: var(--tmv2-ink-2) !important;
}

#tmv2App .tmv2-header-outer .header-dropdown-btn:hover {
  background: var(--tmv2-surface-2) !important;
  color: var(--tmv2-ink) !important;
}

/* Tüm header icon button base — inline style'lar şablondan kaldırıldı, class kuralları artık geçerli.
   Boyut, renk, hover, focus, ikon size hep tek noktadan. */
.header-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--tm-text-muted, #64748b);
  text-decoration: none;
  transition:
    background var(--tm-dur-1, .15s) var(--tm-ease, ease),
    color var(--tm-dur-1, .15s) var(--tm-ease, ease);
}
.header-dropdown-btn:hover {
  background: var(--tm-ink-100, #f1f5f9);
  color: var(--tm-text-primary, #0f172a);
}
.header-dropdown-btn:focus-visible {
  outline: none;
  box-shadow: var(--tm-ring);
}
/* Tüm lucide ikonları header butonlarda aynı boyutta */
.header-dropdown-btn > svg,
.header-dropdown-btn > i[data-lucide] {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2;
}
/* Badge — bildirim/sayı göstergesi */
.header-dropdown-btn__badge {
  font-size: 10px;
  font-weight: var(--tm-weight-semibold, 600);
  padding: 0.15em 0.4em;
  min-width: 18px;
  line-height: 1;
  background: var(--tm-brand-500, #0175e4);
  color: #fff;
  border: 2px solid var(--tm-surface, #fff);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--tm-brand-500, #0175e4) 30%, transparent);
}
.header-dropdown-btn__badge--danger {
  background: var(--tm-bad, #dc2626);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--tm-bad, #dc2626) 30%, transparent);
}
.header-dropdown-btn__badge[hidden] { display: none; }

/* Account avatar button */
.header-account-btn {
  border-radius: var(--tm-radius-full, 50%) !important;
  padding: 2px !important;
}
.header-account-btn:hover {
  background: transparent;
}
.header-account-btn__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tm-brand-500, #0175e4) 0%, var(--tm-brand-700, #014a94) 100%);
  border: 2px solid var(--tm-surface, #fff);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tm-brand-500, #0175e4) 25%, transparent);
  transition: box-shadow var(--tm-dur-1, .15s) var(--tm-ease, ease);
  overflow: hidden;
}
.header-account-btn:hover .header-account-btn__avatar {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--tm-brand-500, #0175e4) 35%, transparent);
}
.header-account-btn__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.header-account-btn__avatar i[data-lucide],
.header-account-btn__avatar svg {
  width: 18px !important;
  height: 18px !important;
  color: #fff;
}

/* Dark mode ayarlamaları */
html.dark-mode .header-dropdown-btn {
  color: var(--tm-text-muted);
}
html.dark-mode .header-dropdown-btn:hover {
  background: color-mix(in srgb, var(--tm-text-primary) 8%, transparent);
  color: var(--tm-text-primary);
}
html.dark-mode .header-account-btn__avatar {
  border-color: var(--tm-surface);
}

@media (max-width: 768px) {
  #tmv2App .tmv2-header-outer .header-bar {
    padding: 8px 12px 8px !important;
  }
}

/* === v2 semantik sınıflar (header.html) === */
.tmv2-header-left {
  display: flex;
  align-items: baseline;
  min-width: 0;
}
.tmv2-header-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.tmv2-header-title {
  margin: 0;
  /* Tema uyumu: v2 sans-serif (Inter) — sidebar, sayfa başlıkları ve butonlarla aynı aile.
     Eski Instrument Serif kaldırıldı; header metni gövde metni ile tutarlı. */
  font-family: var(--tmv2-ff-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
  font-weight: var(--tmv2-fw-semibold, 600);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  letter-spacing: -0.015em;
  color: var(--tmv2-ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.tmv2-header-subtitle {
  font-size: 13px;
  color: var(--tmv2-ink-2, #475569);
  font-family: var(--tmv2-ff-sans, "Inter", system-ui, sans-serif);
}
.tmv2-header-search {
  /* ek kurallar .tmv2-search ile */
}
#tmv2App .tmv2-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-left: auto;
}
@media (max-width: 768px) {
  #tmv2App .tmv2-header-actions {
    gap: 6px;
  }
}
.tmv2-header-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tmv2-ink-2, #475569);
  background: var(--tmv2-surface-2, #fafbfd);
  border: 1px solid var(--tmv2-line, #e7ebf1);
  white-space: nowrap;
}
.tmv2-header-status .tmv2-header-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tmv2-success);
  box-shadow: 0 0 0 3px rgba(var(--color-success-rgb), 0.25);
}

html.dark-mode .tmv2-header-status {
  background: var(--tmv2-surface-2, rgba(30, 41, 59, 0.6));
  border-color: var(--tmv2-line, #334155);
  color: var(--tmv2-ink-2, #94a3b8);
}
/* Geriye dönük: .tmv2-head-title */
.tmv2-head-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.tmv2-head-title h1 {
  margin: 0;
  font-family: var(--tmv2-ff-serif, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--tmv2-ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmv2-head-title .en {
  font-size: 13px;
  color: var(--tmv2-ink-2, #475569);
  font-family: var(--tmv2-ff-sans, "Inter", system-ui, sans-serif);
}


/* ===== css/tm-dashboard-v2.css ===== */
/**
 * Trendmetrik UI v2 — dashboard primitives (TRE-23 / TRE-25)
 * Used with macros/kpi_card.html and future tmv2-* dashboard blocks.
 */

.tmv2-kpi-skeleton-wrap,
.tmv2-kpi-actual-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-dashboard-gap);
  width: 100%;
  min-width: 0;
}

/* Genel Bakış / Siparişler tab içi — alt boşluk */
.tmv2-overview-tab-inner,
.tmv2-orders-tab-inner {
  padding-bottom: var(--tmv2-dashboard-section-gap);
}

/* Uyarı + hızlı erişim — .tmv2-panel köşe yarıçapı (tm-ui-system) */
.tmv2-dash-panel {
  border-radius: inherit;
}

.tmv2-kpi-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-dashboard-gap);
  width: 100%;
  min-width: 0;
}

.tmv2-dashboard-grid {
  display: grid;
  gap: var(--tmv2-dashboard-gap);
  width: 100%;
  min-width: 0;
}

/* ============================================================
   2026-09-23 K5: ui-stability-round3-2026-06-05.css buraya eritildi
   (§1,2,3,4,5,7 — §6 .tab-content paylaşımlı olduğu için tm-components.css'e
   gitti). Hiçbiri elsewhere tanımlı değildi (grep doğrulandı) → additive,
   dosya taşınması cascade sırasını değiştirmiyor.
   ============================================================ */

/* §1 Dashboard sayfa-özel overlay — global'e (tm-loader-unify.js) yönlendirildi,
   görünmez kalır. JS API uyumlu kalır (TrendmetrikLoader.show/hide aktif). */
#dashboard-loading-overlay,
#dashboard-loading-overlay.show,
body.modal-open #dashboard-loading-overlay,
body.modal-open #dashboard-loading-overlay.show {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* §2 Chart container: smooth fade-in transition, render hazırken animasyon. */
.tm-chart-wrap,
.platform-dist-chart-wrap,
.tm-cost-breakdown__chart-wrap,
[id$="ChartContainer"] {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tm-chart-wrap.is-loading,
.platform-dist-chart-wrap.is-loading,
.tm-cost-breakdown__chart-wrap.is-loading {
  opacity: 0;
}

/* §3 Chart canvas: ensure responsive height + crisp paint on retina. */
canvas[id$="Chart"],
canvas[id*="analytics"],
canvas[id*="platform"],
canvas[id*="status"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* §4 Overview KPI hover micro-animasyon — kullanıcı kart aktif değil hissi. */
.overview-kpi-section .tm-kpi-card,
.overview-kpi-section [class*="kpi-card"] {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.overview-kpi-section .tm-kpi-card:hover,
.overview-kpi-section [class*="kpi-card"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* §5 Donut/grafik kart spacing dengeleme — büyük boşluklar kaldırıldı. */
.overview-platform-dist,
.tm-cost-breakdown {
  padding: 1rem 1.1rem !important;
}
.platform-dist-body {
  padding-top: 0.4rem;
}

/* §7 Chart legend hizalama — uzun label'lar wrap edebilsin, scroll değil. */
.platform-dist-legend,
.tm-cost-breakdown__grid {
  align-items: stretch;
}
.platform-dist-legend__row {
  min-height: 28px;
  padding: 4px 0;
}

@media (min-width: 992px) {
  .tmv2-dashboard-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tmv2-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tmv2-panel-body {
  min-width: 0;
}

.tmv2-panel-header__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tmv2-ink, var(--color-text));
  letter-spacing: -0.01em;
}

.tmv2-panel-header__meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
}

/* Genel Bakış: skeleton + gerçek KPI aynı hücrede üst üste (dashboard-ui-enhancements ile uyumlu) */
#overviewTab .kpi-cards-wrapper {
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
  min-width: 0;
}

#overviewTab .kpi-cards-wrapper #kpi-skeleton-loader,
#overviewTab .kpi-cards-wrapper #kpi-actual-content {
  grid-area: stack;
}

/* Flex sütun (.overview-metric-deck) içinde grid yığınının küçülmesi/taşması */
#overviewTab .overview-kpi-section--deck > .overview-metric-deck > .kpi-cards-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.tmv2-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tmv2-page-header__titles h1,
.tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text-primary, #0f172a);
}

.tmv2-page-header__titles p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #64748b);
}

.tmv2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

@media (min-width: 1024px) {
  .tmv2-grid--kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Genel Bakış: `.tmv2-grid` on KPI rows is a v2 hook; column/gap rules stay in dashboard-overview-metric-cards (higher specificity). */
html.dark-mode #overviewTab .dashboard-overview-tmv2-head .tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  color: var(--color-text-primary, #f1f5f9);
}
html.dark-mode #overviewTab .dashboard-overview-tmv2-head .tmv2-page-header__titles p {
  color: var(--color-text-secondary, #94a3b8);
}

/* Siparişler / Analiz vb. sekmeler: --color-text-secondary tanımsız olduğu için p hep #64748b kalıyordu */
html.dark-mode .dashboard-overview-tmv2-head .tmv2-page-header__titles p {
  color: var(--tm-text-secondary, var(--color-text-muted, #94a3b8));
}

/* Genel v2 başlık — tabbed dashboard üst şerit ile uyum */
.tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  color: var(--color-text-primary, var(--color-text));
}
html.dark-mode .tmv2-page-header__titles .tmv2-page-header__title-as-h1 {
  color: var(--color-text-primary, #f1f5f9);
}

/* ========== Referans v2 — KPI, panel, grid (trendmetrik-v2 paketi) ========== */
/* KPI grid */
.tmv2-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tmv2-dashboard-gap);
  margin-bottom: var(--tmv2-dashboard-gap);
}
.tmv2-kpi-row.five {
  grid-template-columns: repeat(5, 1fr);
}

/* Yüzey: .tmv2-metric-card (tm-ui-system); burada yalnızca KPI düzeni */
.tmv2-kpi {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tmv2-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--tmv2-sh-2);
}
.tmv2-kpi .k-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tmv2-ink, var(--color-text));
  letter-spacing: -0.005em;
}
.tmv2-kpi .k-en {
  font-size: 10px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  text-transform: lowercase;
}
.tmv2-kpi .k-value {
  font-family: var(--tmv2-ff-mono, ui-monospace, monospace);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tmv2-ink, var(--color-text));
  margin-top: 10px;
}
.tmv2-kpi .k-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: var(--tmv2-r-pill, 999px);
  font-size: 11px;
  font-weight: 600;
  background: var(--tmv2-success-soft, #dcfce7);
  color: var(--tmv2-success, #16a34a);
}
.tmv2-kpi .k-delta.down {
  background: var(--tmv2-danger-soft, #fee2e2);
  color: var(--tmv2-danger, #dc2626);
}
html.dark-mode .tmv2-kpi .k-delta {
  background: var(--tmv2-success-soft);
  color: var(--tmv2-delta-success-fg-dark);
}
html.dark-mode .tmv2-kpi .k-delta.down {
  background: var(--tmv2-danger-soft);
  color: var(--tmv2-delta-danger-fg-dark);
}
.tmv2-kpi .k-delta svg,
.tmv2-kpi .k-delta i {
  width: 11px;
  height: 11px;
}
.tmv2-kpi .k-delta-txt {
  font-size: 11px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  margin-left: 6px;
  font-weight: 500;
}
.tmv2-kpi .spark {
  position: absolute;
  right: 10px;
  top: 14px;
  width: 120px;
  height: 46px;
  pointer-events: none;
}

.tmv2-kpi.accent,
.tmv2-kpi.tmv2-metric-card--primary {
  color: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .k-label,
.tmv2-kpi.accent .k-value,
.tmv2-kpi.tmv2-metric-card--primary .k-label,
.tmv2-kpi.tmv2-metric-card--primary .k-value {
  color: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .k-en,
.tmv2-kpi.tmv2-metric-card--primary .k-en {
  color: rgba(255, 255, 255, 0.75);
}
.tmv2-kpi.accent .k-delta,
.tmv2-kpi.tmv2-metric-card--primary .k-delta {
  background: rgba(255, 255, 255, 0.2);
  color: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .k-delta-txt,
.tmv2-kpi.tmv2-metric-card--primary .k-delta-txt {
  color: rgba(255, 255, 255, 0.7);
}
.tmv2-kpi.accent .spark path.area,
.tmv2-kpi.tmv2-metric-card--primary .spark path.area {
  fill: rgba(255, 255, 255, 0.18);
}
.tmv2-kpi.accent .spark path.line,
.tmv2-kpi.tmv2-metric-card--primary .spark path.line {
  stroke: var(--tm-fg-on-brand);
}
.tmv2-kpi.accent .big-circle,
.tmv2-kpi.tmv2-metric-card--primary .big-circle {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
  pointer-events: none;
}

.tmv2-kpi.tall .k-value {
  margin-top: 6px;
}
.tmv2-kpi.tall .big-spark {
  margin-top: 14px;
  height: 48px;
  width: 100%;
  display: block;
}

/* Alt KPI satırı: değer + delta yan yana (referans dashboard-v2) */
.tmv2-kpi.tall .tmv2-kpi-row-mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.tmv2-kpi.tall .tmv2-kpi-row-mid .k-value {
  margin-top: 0;
}

/* Üst satır: etiket + sparkline için içerik alanı */
.tmv2-kpi .tmv2-kpi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-right: 128px;
}

.tmv2-kpi.accent .tmv2-kpi-head,
.tmv2-kpi.tmv2-metric-card--primary .tmv2-kpi-head {
  padding-right: 128px;
}

.tmv2-kpi .tmv2-kpi-delta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* .tmv2-panel / .tmv2-card — tek kaynak: tm-ui-system.css (#tmv2App) */

/* İç bölüm kendi padding’ini veriyorsa (ör. başlık + gövde split) */
.tmv2-panel.tmv2-panel--flush {
  padding: 0;
}
.tmv2-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.tmv2-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tmv2-ink, var(--color-text));
  letter-spacing: -0.005em;
}
.tmv2-panel-sub {
  font-size: 12px;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  margin-top: 2px;
}

.tmv2-seg {
  display: inline-flex;
  background: var(--tmv2-surface-2, var(--color-surface-alt));
  border: 1px solid var(--tmv2-line, var(--color-border));
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.tmv2-seg button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--tmv2-ink-2, var(--color-text-muted));
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.tmv2-seg button.active {
  background: var(--tmv2-surface, var(--color-surface));
  color: var(--tmv2-ink, var(--color-text));
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.tmv2-two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.tmv2-three-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 14px;
}

@media (max-width: 1280px) {
  .tmv2-kpi-row,
  .tmv2-kpi-row.five {
    grid-template-columns: repeat(2, 1fr);
  }
  .tmv2-three-col {
    grid-template-columns: 1fr;
  }
  .tmv2-two-col {
    grid-template-columns: 1fr;
  }
  .tmv2-donut-panel {
    grid-template-columns: 1fr;
  }
}

/* ============ MOBILE: 1-col KPI, compact cards ============ */
@media (max-width: 768px) {
  .tmv2-kpi-row,
  .tmv2-kpi-row.five {
    grid-template-columns: 1fr;
    gap: var(--tmv2-dashboard-gap);
  }

  .tmv2-kpi .k-value {
    font-size: 20px;
  }

  .tmv2-panel-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tmv2-seg {
    width: 100%;
    justify-content: center;
  }

  .tmv2-chart-wrap {
    height: 200px;
  }
}

/* Genel Bakış — kompakt KPI (global .tmv2-metric-card’dan ayrı; yalnızca #overviewTab) */
#tmv2App #overviewTab .overview-dash-v2 .overview-kpi-tmv2 .tmv2-kpi.tmv2-metric-card {
  box-sizing: border-box;
  padding: var(--tmv2-sp-3) var(--tmv2-sp-3) var(--tmv2-sp-2);
  min-height: var(--tmv2-dashboard-metric-min-h);
}

#tmv2App #overviewTab .overview-dash-v2 .overview-kpi-tmv2 .tmv2-kpi.tall.tmv2-metric-card {
  min-height: var(--tmv2-dashboard-metric-tall-min-h);
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .k-value {
  margin-top: var(--tmv2-sp-2);
  font-size: 1.375rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .tmv2-kpi-delta-row {
  margin-top: var(--tmv2-sp-2);
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .spark {
  top: var(--tmv2-sp-2);
  width: 6.75rem;
  height: 2.5rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi .tmv2-kpi-head,
#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.accent .tmv2-kpi-head,
#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.tmv2-metric-card--primary .tmv2-kpi-head {
  padding-right: 7rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.tall .big-spark {
  margin-top: var(--tmv2-sp-2);
  height: 2.5rem;
}

#tmv2App #overviewTab .overview-dash-v2 .tmv2-kpi.tall .k-value {
  margin-top: var(--tmv2-sp-2);
}

/* ============ SMALL MOBILE ============ */
@media (max-width: 480px) {
  .tmv2-kpi .k-value {
    font-size: 18px;
  }

  .tmv2-kpi .k-label {
    font-size: 12px;
  }

  .tmv2-chart-wrap {
    height: 180px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   2026-09-23 K5: ui-stability-round4-2026-06-05.css buraya eritildi.
   Her seçici `.tm-live-page` ile başlar (yalnız Canlı Performans sayfası,
   dashboard_live.html) → dosya konumu neresi olursa olsun yalnız o sayfada
   render olur, başka sayfaya sızma riski yok. `:where(:not(.tm-ds *))`
   taşıyan 3 kural (kaynakta da işaretliydi — DS-SCOPE EXCLUSION,
   2026-09-13 design(live) r4) aynı guard'la taşındı; kalan kurallar
   (order/min-height gibi layout-critical olanlar) guard'sız — kaynakta da
   öyleydi, .tm-ds sayfada da aktif kalmaları KASITLI (dosyanın kendi
   yorumu: "those stay, untouched"). Bu dosya artık tm-dashboard-v2.css'in
   parçası; live-actions-v2.css (yalnız ?legacy=1 altında yüklenir) İLE
   KARIŞTIRILMASIN — round4 her zaman yüklenir, legacy-gate'e bağlı DEĞİL.
   ══════════════════════════════════════════════════════════════════════ */

/* UI stability round 4 — Live reorder + KPI polish.
   2026-06-05: kullanıcı raporu sonrası:
   (a) Live'da grafikler üste, sipariş tablosu alta
   (b) KPI cards iyileştirilmeli (spacing, hover, sparkline ratio, hizalama)

   PR #1745 ile orders'i üste taşıyan order:30/40 kuralı bu sayfada flip
   ediliyor — kullanıcı tekrar grafikleri önde görmek istedi. */

/* ──────────────────────────────────────────────────────────────────────
   1) REORDER: Charts üste, Orders alta — PR #1745 flip
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-live-main-grid {
  order: 20 !important;
}
.tm-live-page .tm-live-orders-card {
  order: 50 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   2) Live KPI cards — okunabilirlik + spacing + hover micro
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-kpi-row:where(:not(.tm-ds *)) {
  gap: 14px;
  margin-bottom: 4px;
}
.tm-live-page .tm-kpi {
  /* daha rahat iç boşluk, kart yüksekliği eşit — 108→92 (2026-08-24 audit) */
  padding: 12px 14px !important;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tm-live-page .tm-kpi:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.tm-live-page .tm-kpi .tm-kpi__label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #475569;
}
.tm-live-page .tm-kpi .tm-kpi__value {
  font-weight: 700;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.tm-live-page .tm-kpi .tm-kpi__row {
  margin-top: 8px;
  align-items: center;
  gap: 8px;
}
.tm-live-page .tm-kpi .tm-kpi__delta {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.3;
}
.tm-live-page .tm-kpi .tm-kpi__caption {
  font-size: 11px;
  color: #64748b;
}

/* Sparkline canvas — KPI içinde dengeli oran, taşma yok */
.tm-live-page .tm-kpi canvas {
  max-height: 36px;
  width: auto !important;
  opacity: 0.85;
}

/* Hero card (ilk KPI — Sipariş sayısı) — beyaz metin kontrastı korunur */
.tm-live-page .tm-kpi.tm-kpi--hero {
  padding: 14px 16px !important;
}
.tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__delta {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────────
   3) Chart sections — orders'tan sonra geldiklerinde üst margin
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-live-main-grid:where(:not(.tm-ds *)) {
  margin-top: 10px;
}

/* Charts container — 1024+ daha kompakt, charts daha az boy alır */
@media (min-width: 1024px) {
  .tm-live-page .tm-live-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 1023px) {
  .tm-live-page .tm-live-charts {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

/* Chart card içi padding biraz daha sıkı (önceki + 1rem rahatlatıyordu) */
.tm-live-page .tm-live-charts .tm-card__body {
  padding: 14px 16px;
}

/* Sticky sidebar charts'ı kısaysa grid içinde uzun beyaz boşluk yaratıyordu;
   align-content: start ile grid yüksekliği max(sidebar, content) yerine
   doğal akışa düşer. Content kolonu da kendi yüksekliğine sığar. */
.tm-live-page .tm-live-main-grid {
  align-content: start;
}
.tm-live-page .tm-live-main-grid__content {
  align-self: start;
}
.tm-live-page .tm-live-main-grid__sidebar {
  align-self: start;
}

/* shell.css'te layout-shift koruması olarak min-height 2050/980/2200px
   forciyordu (eski layout: orders ortada, charts altta). Yeni reorder ile
   charts kısa kalıyor → devasa boşluk. Override edip natural-height akışa
   geri dönüyoruz. Skeleton/loading reservation kart bazında zaten var. */
#tmv2App .tm-live-page,
#tmv2App .tm-live-page .tm-live-main-grid,
#tmv2App .tm-live-page .tm-live-charts,
#tmv2App .tm-live-page .tm-live-main-grid__content {
  min-height: 0 !important;
}
#tmv2App .tmv2-page-body:is(.tmh-3413ab38, :not(*) .tm-live-page) {
  min-height: auto !important;
}

/* ──────────────────────────────────────────────────────────────────────
   4) Orders tablosu üst boşluk — charts'tan ayrılsın
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-live-orders-card:where(:not(.tm-ds *)) {
  margin-top: 18px;
}


/* ===== css/tm-ui-system.css ===== */
/**
 * Trendmetrik — ortak UI primitives (TRE UI system)
 * theme-variables.css token'larına bağlı; yeni sayfalarda bu sınıfları tercih edin.
 */

/* --- Page stack --- */
.tm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tm-section-gap, 16px);
  width: 100%;
}

.tm-stack--tight {
  gap: 0.75rem;
}

/* --- Card / panel --- */
.tm-card {
  background: var(--tm-bg-card, var(--color-surface));
  border: 1px solid var(--tm-border-color, var(--color-border));
  border-radius: var(--radius-token-md, 14px);
  box-shadow: var(--tm-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.06));
  padding: 1rem 1.25rem;
}

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

.tm-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.tm-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tm-text-primary, var(--color-text));
}

.tm-card__sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--tm-text-secondary, var(--color-text-muted));
}

html.dark-mode .tm-card {
  box-shadow: var(--shadow-card);
}

/* --- Table --- */
.tm-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-token-md, 14px);
  border: 1px solid var(--tm-border-color);
}

.tm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tm-table thead th {
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tm-text-secondary);
  background: var(--tm-bg-tertiary);
  border-bottom: 1px solid var(--tm-border-color);
}

.tm-table tbody td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--tm-border-subtle, var(--tm-border-light));
  color: var(--tm-text-primary);
}

.tm-table tbody tr:hover td {
  background: var(--tm-table-row-hover-bg, var(--tm-bg-hover));
}

/* --- Buttons --- */
.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tm-btn--primary {
  background: var(--color-primary);
  color: var(--tm-fg-on-brand, #fff);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.25);
}

/* `:not([aria-disabled="true"])` added 2026-09-16 (QA-2, PR #6560). These two hover rules load on
   every base.html page and already excluded `:disabled`; they never excluded `aria-disabled`.
   Once the DS layer narrowed its own hover the same way, THIS rule became the winner for
   aria-disabled buttons and kept lighting them up on hover — measured: ghost_aria hover went
   rgb(244,244,245) -> rgb(232,243,255), i.e. the rule was handed over, not silenced.
   Fixing it here (2 selectors) is cheaper and safer than three per-variant counter-rules in the DS
   layer, and it is the right behaviour outside the DS scope too: a button that announces itself as
   disabled must not answer the pointer. */
.tm-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.tm-btn--ghost {
  background: transparent;
  color: var(--tm-text-primary);
  border-color: var(--tm-border-color);
}

.tm-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tm-bg-hover);
  border-color: var(--tm-border-color);
}

.tm-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Badges --- */
.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1.2;
}

.tm-badge--success {
  background: var(--tm-success-bg);
  color: var(--tm-success);
  border: 1px solid var(--tm-success-border);
}

.tm-badge--warning {
  background: var(--tm-warning-bg);
  color: var(--tm-warning);
  border: 1px solid var(--tm-warning-border);
}

.tm-badge--danger {
  background: var(--tm-error-bg);
  color: var(--tm-error);
  border: 1px solid var(--tm-error-border);
}

html.dark-mode .tm-badge--success {
  background: rgba(var(--color-success-rgb), 0.12);
  color: var(--tm-success-light);
  border-color: rgba(var(--color-success-rgb), 0.35);
}

html.dark-mode .tm-badge--danger {
  background: rgba(var(--color-danger-rgb), 0.12);
  color: var(--tm-error-light);
  border-color: rgba(var(--color-danger-rgb), 0.35);
}

/* --- Modal / dialog surface (Bootstrap .modal-content ile birlikte kullanılabilir) --- */
.tm-modal-surface {
  border-radius: var(--radius-token-lg, 18px) !important;
  border: 1px solid var(--tm-border-color) !important;
  background: var(--tm-bg-card) !important;
  box-shadow: var(--tm-shadow-lg) !important;
}

/*
 * TM v2 — Bootstrap 5 modal katmanı (tek kaynak z-index: tm-z-layers.css)
 * Kullanım: içerik #tmv2App dışına taşınmalı (base.html tmMoveBootstrapModalsToBody).
 * İsim eşlemesi: .modal = tam ekran | .modal-dialog = kutu | .modal-content = yüzey
 */
.tmv2-modal-backdrop {
  /* Bootstrap .modal-backdrop ile aynı rol; özel instance gerekirse */
  z-index: var(--tm-z-modal-backdrop, 1050);
}

.tmv2-guide-modal.modal.show {
  z-index: var(--tm-z-modal, 1055) !important;
}

/* --- Toast stack (mevcut toast ile uyum) --- */
.tm-toast-host {
  position: fixed;
  z-index: var(--tm-z-toast, 10800);
  pointer-events: none;
}

/* --- Skeleton --- */
.tm-skeleton {
  height: 1rem;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--tm-bg-tertiary) 0%,
    var(--tm-bg-hover) 50%,
    var(--tm-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: tm-skeleton-shimmer 1.2s ease-in-out infinite;
}

.tm-skeleton--h2 {
  height: 2rem;
  width: 40%;
}

.tm-skeleton--line {
  height: 0.75rem;
  width: 100%;
}

@keyframes tm-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --- Empty / error --- */
.tm-empty-state {
  text-align: center;
  padding: 2rem 1.25rem;
  color: var(--tm-text-secondary);
  border: 1px dashed var(--tm-border-color);
  border-radius: var(--radius-token-md);
  background: var(--tm-bg-secondary);
}

.tm-empty-state__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tm-text-primary);
}

.tm-error-state {
  border: 1px solid var(--tm-error-border);
  background: var(--tm-error-bg);
  color: var(--tm-error);
  border-radius: var(--radius-token-md);
  padding: 1rem 1.25rem;
}

html.dark-mode .tm-error-state {
  background: rgba(var(--color-danger-rgb), 0.12);
  color: var(--tm-error-light);
  border-color: rgba(var(--color-danger-rgb), 0.35);
}

/* --- Progress --- */
.tm-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--tm-bg-tertiary);
  overflow: hidden;
}

.tm-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transition: width 0.35s ease;
}

/* ============ V2 SURFACE SYSTEM ============ */
/* Solid surface classes — blocks background grid from showing through */

.tmv2-surface {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6);
  border-radius: var(--tmv2-r-lg, 14px);
}

.tmv2-surface-card {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6);
  border-radius: var(--tmv2-r-lg, 14px);
  box-shadow: var(--tmv2-sh-1, 0 1px 3px rgba(15,23,42,.05));
}

.tmv2-surface-soft {
  background: var(--tmv2-surface-2, #fafbfd) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6);
  border-radius: var(--tmv2-r-md, 10px);
}

/* Force solid surface on common page containers inside v2 shell */
#tmv2App .wide-container,
#tmv2App .profit-margin-page,
#tmv2App .order-profit-page,
#tmv2App .product-profit-page,
#tmv2App .category-profit-page,
#tmv2App .xml-page,
#tmv2App .xml-sources-page,
#tmv2App .alerts-page,
#tmv2App .product-management-page,
#tmv2App .monitoring-container,
#tmv2App .app-container,
#tmv2App .commission-page,
#tmv2App .advantage-page,
#tmv2App .plus-commission-page {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  box-shadow: none;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Override page-specific max-width/padding variables that differ from v2 */
#tmv2App .app-container {
  --page-container-max-width: 100%;
  --page-container-padding-x: 0;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Container-fluid inside v2: no extra padding (prevents double-gutter) */
#tmv2App .container-fluid {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tables and filter bars: solid white background.
   K1 (QA BLOCK 1 ile aynı kategori, tur 3, 2026-10-11): `background` SHORTHAND'ı
   `background-color`a indirgendi — bu kural `#tmv2App .table-container` (ID+1sınıf)
   olduğu için, !important OLMADAN BİLE, promo-tools.css'teki ≤767.98px kaydırma-
   gölgesi kuralından (yalnız sınıf, ID'siz) SPESİFİSİTE ile kazanıp onun
   background-image'ini SIFIRLIYORDU (shorthand, belirtilmeyen background-image'i
   `none`'a resetler). Niyet zaten "solid white BACKGROUND" (renk) — longhand'a
   indirgemek davranışı değiştirmiyor. */
#tmv2App .table-responsive,
#tmv2App .table-container,
#tmv2App .filter-bar,
#tmv2App .filter-section,
#tmv2App .profit-filters {
  background-color: var(--tmv2-surface, #ffffff);
  border-radius: var(--tmv2-r-lg, 14px);
}

/* Empty state panels: solid surface */
#tmv2App .empty-state,
#tmv2App .empty-state-container,
#tmv2App .no-data-message {
  background: var(--tmv2-surface, #ffffff);
  border: 1px solid var(--tmv2-line-2, #eef1f6);
  border-radius: var(--tmv2-r-lg, 14px);
  padding: 40px 24px;
}

/* Generic Bootstrap .card inside v2: solid white */
#tmv2App .card {
  background: var(--tmv2-surface, #ffffff) !important;
}

/* Dark mode surfaces */
html.dark-mode #tmv2App .wide-container,
html.dark-mode #tmv2App .profit-margin-page,
html.dark-mode #tmv2App .order-profit-page,
html.dark-mode #tmv2App .product-profit-page,
html.dark-mode #tmv2App .category-profit-page,
html.dark-mode #tmv2App .xml-page,
html.dark-mode #tmv2App .xml-sources-page,
html.dark-mode #tmv2App .alerts-page,
html.dark-mode #tmv2App .product-management-page,
html.dark-mode #tmv2App .monitoring-container {
  background: var(--tmv2-surface, #10151f);
  border-color: var(--tmv2-line, #1e2533);
}

html.dark-mode #tmv2App .card {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* ============ V2 PAGE NORMALIZATION ============ */
/* Force all legacy page wrappers into v2 visual system */

/* Page wrappers: transparent pass-through — inner panels provide surface */
#tmv2App .product-settings-page,
#tmv2App .admin-xml-page,
#tmv2App .product-profit-page-wrapper,
#tmv2App .order-profit-page,
#tmv2App .profit-margin-page-wrapper,
#tmv2App .tmv2-analysis-root,
#tmv2App .pricing-page,
#tmv2App .flash-offers-page {
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* Neutralize glass/blur effects inside v2 shell */
#tmv2App [style*="backdrop-filter"],
#tmv2App .glass,
#tmv2App .glass-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#tmv2App .card,
#tmv2App .stat-card,
#tmv2App .pricing-card,
#tmv2App .calculator-card,
#tmv2App .settings-card,
#tmv2App .metric-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  border-radius: var(--tmv2-r-lg, 14px) !important;
  box-shadow: var(--tmv2-sh-1, 0 1px 3px rgba(15,23,42,.05)) !important;
}

/* Birincil düğüm renkleri — durumlar tm-buttons-v2.css (#tmv2App, Bootstrap ile uyum) */
#tmv2App .text-primary {
  color: var(--tmv2-primary) !important;
}

#tmv2App .bg-primary {
  background-color: var(--tmv2-primary) !important;
}

/* Tables: consistent styling */
#tmv2App table.table,
#tmv2App .table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

#tmv2App .table thead th {
  background: var(--tmv2-surface-2, #fafbfd) !important;
  border-bottom: 1px solid var(--tmv2-line, #e7ebf1) !important;
  font-weight: 600;
  font-size: 12px;
  color: var(--tmv2-ink-2, #475569);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px;
}

#tmv2App .table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--tmv2-line-2, #eef1f6);
  color: var(--tmv2-ink, #0f172a);
  vertical-align: middle;
}

#tmv2App .table tbody tr:hover {
  background: var(--tmv2-surface-2, #fafbfd) !important;
}

/* Page headers: consistent title styling */
#tmv2App .page-header,
#tmv2App .page-title-card,
#tmv2App .product-settings-page .card:first-child {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line, #e7ebf1) !important;
  border-radius: var(--tmv2-r-xl, 18px) !important;
  box-shadow: var(--tmv2-sh-1) !important;
}

/* Pagination: v2 styled */
#tmv2App .pagination .page-link {
  color: var(--tmv2-primary) !important;
  border-color: var(--tmv2-line) !important;
  border-radius: var(--tmv2-r-md) !important;
}

#tmv2App .pagination .page-item.active .page-link {
  background: var(--tmv2-primary) !important;
  border-color: var(--tmv2-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

/* Badge: v2 consistent */
#tmv2App .badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  padding: 3px 8px;
}

/* Input/Select: v2 consistent */
#tmv2App .form-control,
#tmv2App .form-select {
  border: 1px solid var(--tmv2-line, #e7ebf1) !important;
  border-radius: var(--tmv2-r-md, 10px) !important;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--tmv2-surface, #ffffff);
  color: var(--tmv2-ink, #0f172a);
}

#tmv2App .form-control:focus,
#tmv2App .form-select:focus {
  border-color: var(--tmv2-primary) !important;
  box-shadow: var(--tmv2-form-focus-shadow) !important;
  outline: none;
}

/* Dark mode: all legacy pages */
html.dark-mode #tmv2App .product-settings-page,
html.dark-mode #tmv2App .admin-xml-page,
html.dark-mode #tmv2App .product-profit-page-wrapper,
html.dark-mode #tmv2App .order-profit-page,
html.dark-mode #tmv2App .profit-margin-page-wrapper,
html.dark-mode #tmv2App .tmv2-analysis-root,
html.dark-mode #tmv2App .pricing-page,
html.dark-mode #tmv2App .flash-offers-page {
  background: var(--tmv2-surface, #10151f);
  border-color: var(--tmv2-line, #1e2533);
}

html.dark-mode #tmv2App .card,
html.dark-mode #tmv2App .stat-card,
html.dark-mode #tmv2App .pricing-card,
html.dark-mode #tmv2App .metric-card {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

html.dark-mode #tmv2App .table thead th {
  background: var(--tmv2-surface-2, #0e131c) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
  color: var(--tmv2-ink-2, #9aa7bb);
}

html.dark-mode #tmv2App .table tbody td {
  border-color: var(--tmv2-line-2, #161c27);
  color: var(--tmv2-ink, #e6ecf5);
}

html.dark-mode #tmv2App .table tbody tr:hover {
  background: var(--tmv2-surface-2, #0e131c) !important;
}

html.dark-mode #tmv2App .form-control,
html.dark-mode #tmv2App .form-select {
  background: var(--tmv2-surface-2, #0e131c) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
  color: var(--tmv2-ink, #e6ecf5) !important;
}

/* ============ COMMISSION / ADVANTAGE / PLUS PAGES — V2 NORMALIZATION ============ */
/* These pages use pages-common.css + commission.css with orange palette.
   Override to match v2 system when inside #tmv2App. */

/* App container: transparent pass-through (parent already provides bg) */
#tmv2App .app-container {
  background: transparent !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override page-specific variables with v2 tokens */
#tmv2App .app-container,
#tmv2App [class*="commission"],
#tmv2App [class*="advantage"],
#tmv2App [class*="plus-commission"] {
  --page-container-max-width: 100%;
  --page-container-padding-x: 0;
  --page-section-gap: 12px;
  --card-padding: 16px;
}

/* Header section: white surface, v2 radius */
#tmv2App .header-section {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  border-radius: var(--tmv2-r-lg, 14px) !important;
  padding: 16px 20px !important;
  box-shadow: var(--tmv2-sh-1) !important;
  margin-bottom: 12px !important;
}

/* Header content: reduce vertical spacing */
#tmv2App .header-content {
  gap: 12px !important;
}

#tmv2App .header-top {
  gap: 12px !important;
}

/* Tool cards: v2 soft surface */
#tmv2App .header-tool-card {
  background: var(--tmv2-surface-2, #fafbfd) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  border-radius: var(--tmv2-r-md, 10px) !important;
  padding: 14px !important;
}

/* Table wrapper: v2 surface */
#tmv2App .table-wrapper {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  border-radius: var(--tmv2-r-lg, 14px) !important;
  overflow: hidden;
  box-shadow: var(--tmv2-sh-1) !important;
}

/* Table header: compact */
#tmv2App .table-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--tmv2-line-2, #eef1f6);
}

/* Commission card: use v2 surface instead of orange gradient */
#tmv2App .commission-card {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  border-radius: var(--tmv2-r-md, 10px) !important;
}

/* Commission percentage badge: subtle, v2-aligned */
#tmv2App .commission-percentage {
  background: var(--tmv2-primary-soft) !important;
  color: var(--tmv2-primary-ink) !important;
  border-color: rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Orange action icons: accent yumuşatma */
#tmv2App .header-tool-card .tool-icon {
  background: var(--tmv2-primary-soft) !important;
  color: var(--tmv2-primary) !important;
}

/* Filter/search section: compact */
#tmv2App .search-section,
#tmv2App .filter-section {
  background: var(--tmv2-surface, #ffffff) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  border-radius: var(--tmv2-r-lg, 14px) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

/* Reduce excessive vertical margins on these pages */
#tmv2App .app-container > * + * {
  margin-top: 12px !important;
}

#tmv2App .app-container .header-section + .table-wrapper,
#tmv2App .app-container .header-section + .search-section,
#tmv2App .app-container .filter-section + .table-wrapper {
  margin-top: 12px !important;
}

/* Empty state inside commission/advantage pages */
#tmv2App .app-container .empty-state,
#tmv2App .table-wrapper .empty-state {
  background: var(--tmv2-surface, #ffffff) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 32px 20px !important;
  min-height: auto !important;
}

/* Pagination: compact */
#tmv2App .pagination-section {
  padding: 10px 16px !important;
  border-top: 1px solid var(--tmv2-line-2, #eef1f6);
}

/* Dark mode overrides for commission pages */
html.dark-mode #tmv2App .header-section {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

html.dark-mode #tmv2App .header-tool-card {
  background: var(--tmv2-surface-2, #0e131c) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

html.dark-mode #tmv2App .table-wrapper {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

html.dark-mode #tmv2App .commission-card {
  background: var(--tmv2-surface-2, #0e131c) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

html.dark-mode #tmv2App .search-section,
html.dark-mode #tmv2App .filter-section {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* ----- TM v2 — global surface contract (panel / card / metric / table) -----
   Layout (.tmv2-page-inner--wide vb.) yalnızca genişlik; bu blok görünümü tekilleştirir. ----- */
#tmv2App .tmv2-panel {
  box-sizing: border-box;
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-border);
  border-radius: var(--tmv2-r-lg);
  box-shadow: var(--tmv2-sh-1);
  padding: var(--tmv2-sp-5);
  margin-bottom: 0;
}

#tmv2App .tmv2-panel.tmv2-panel--flush {
  padding: 0;
}

#tmv2App .tmv2-panel--warning {
  background: color-mix(in srgb, var(--tmv2-warning-soft) 28%, var(--tmv2-surface));
  border-color: color-mix(in srgb, var(--tmv2-warning) 32%, var(--tmv2-border));
}

html.dark-mode #tmv2App .tmv2-panel--warning {
  background: color-mix(in srgb, var(--tmv2-warning-soft) 18%, var(--tmv2-surface));
  border-color: color-mix(in srgb, var(--tmv2-warning-border) 35%, var(--tmv2-line));
}

#tmv2App .tmv2-card {
  box-sizing: border-box;
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-border);
  border-radius: var(--tmv2-r-lg);
  box-shadow: var(--tmv2-sh-1);
  padding: var(--tmv2-sp-4);
  min-height: var(--tmv2-card-min-h);
}

#tmv2App .tmv2-metric-card {
  box-sizing: border-box;
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-border);
  border-radius: var(--tmv2-r-lg);
  box-shadow: var(--tmv2-sh-1);
  padding: var(--tmv2-sp-4);
  min-height: var(--tmv2-metric-card-min-h);
}

#tmv2App .tmv2-kpi.tall {
  min-height: var(--tmv2-metric-card-tall-min-h);
}

#tmv2App .tmv2-metric-card--primary {
  background: radial-gradient(120% 180% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    var(--tmv2-kpi-accent-gradient);
  color: var(--tm-fg-on-brand);
  border-color: color-mix(in srgb, var(--tmv2-primary) 22%, transparent);
  box-shadow: var(--tmv2-sh-2);
}

#tmv2App .tmv2-metric-card--primary .k-label,
#tmv2App .tmv2-metric-card--primary .k-value {
  color: var(--tm-fg-on-brand);
}

#tmv2App .tmv2-metric-card--primary .k-en {
  color: rgba(255, 255, 255, 0.75);
}

/* İç içe: yalnızca dış panel çerçevesi güçlü; iç kartlar yumuşak */
#tmv2App .tmv2-panel .tmv2-card,
#tmv2App .tmv2-panel .tmv2-metric-card {
  border-color: color-mix(in srgb, var(--tmv2-border) 58%, var(--tmv2-surface));
  box-shadow: none;
}

#tmv2App .tmv2-panel .tmv2-metric-card--primary {
  border-color: color-mix(in srgb, var(--tmv2-primary) 28%, transparent);
  box-shadow: var(--tmv2-sh-1);
}

/* Hızlı erişim: küçük karo — global card min-height gevşet */
#tmv2App .tmv2-panel .quick-access-grid .tmv2-card {
  min-height: 0;
}

#tmv2App .tmv2-table-shell {
  border-color: var(--tmv2-border);
  background: var(--tmv2-surface);
  border-radius: var(--tmv2-r-lg);
  box-shadow: var(--tmv2-sh-1);
}

@media (max-width: 768px) {
  #tmv2App .tmv2-panel:not(.tmv2-panel--flush) {
    padding: var(--tmv2-sp-4);
  }
}

/* ----- Global page shell stack (any v2 page) ----- */
#tmv2App .tmv2-page-shell > .tmv2-section {
  display: flex;
  flex-direction: column;
  gap: var(--tmv2-section-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#tmv2App .tmv2-page-shell .tmv2-panel {
  margin-bottom: 0;
}

/* In-page header band (card-style) */
#tmv2App .tmv2-page-header--card {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--tmv2-sp-4) var(--tmv2-sp-3);
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  border-radius: var(--tmv2-r-lg);
  box-shadow: var(--tmv2-sh-1);
  box-sizing: border-box;
}

html.dark-mode #tmv2App .tmv2-page-header--card {
  border-color: var(--tmv2-line);
}

#tmv2App .tmv2-page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tmv2-ink);
  margin: 0;
  letter-spacing: -0.02em;
}

#tmv2App .tmv2-page-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--tmv2-ink-2);
}

#tmv2App .tmv2-section-lead h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tmv2-ink);
  margin: 0 0 0.25rem;
}

#tmv2App .tmv2-section-lead p {
  font-size: 0.8125rem;
  color: var(--tmv2-ink-2);
  margin: 0 0 var(--tmv2-sp-4);
}

/* Responsive grids */
#tmv2App .tmv2-section-grid--auto-4 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--tmv2-sp-3);
}

@media (min-width: 640px) {
  #tmv2App .tmv2-section-grid--auto-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #tmv2App .tmv2-section-grid--auto-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Step cards (wizard / onboarding — any page) */
#tmv2App .tmv2-step-card {
  position: relative;
  min-height: 5.75rem;
  box-sizing: border-box;
  padding: var(--tmv2-sp-4);
  border-radius: var(--tmv2-r-lg);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  background: var(--tmv2-surface-2);
  color: var(--tmv2-ink);
  box-shadow: var(--tmv2-sh-1);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#tmv2App .tmv2-step-card:hover {
  box-shadow: var(--tmv2-sh-2);
  border-color: var(--tmv2-line);
}

#tmv2App .tmv2-step-card--1 {
  background: color-mix(in srgb, var(--tmv2-primary) 10%, var(--tmv2-surface));
  border-color: color-mix(in srgb, var(--tmv2-primary) 28%, var(--tmv2-line));
}

#tmv2App .tmv2-step-card--2 {
  background: color-mix(in srgb, var(--tmv2-warning) 12%, var(--tmv2-surface));
  border-color: color-mix(in srgb, var(--tmv2-warning) 32%, var(--tmv2-line));
}

#tmv2App .tmv2-step-card--3 {
  background: color-mix(in srgb, var(--tmv2-info) 10%, var(--tmv2-surface));
  border-color: color-mix(in srgb, var(--tmv2-info) 28%, var(--tmv2-line));
}

#tmv2App .tmv2-step-card--4 {
  background: color-mix(in srgb, var(--tmv2-success) 10%, var(--tmv2-surface));
  border-color: color-mix(in srgb, var(--tmv2-success) 30%, var(--tmv2-line));
}

#tmv2App .tmv2-step-card__head {
  display: flex;
  align-items: center;
  gap: var(--tmv2-sp-3);
  margin-bottom: var(--tmv2-sp-2);
}

#tmv2App .tmv2-step-card__num {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--tmv2-r-pill, 999px);
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  color: var(--tmv2-ink);
}

#tmv2App .tmv2-step-card--1 .tmv2-step-card__num {
  background: var(--tmv2-primary-soft);
  border-color: color-mix(in srgb, var(--tmv2-primary) 35%, var(--tmv2-line));
  color: var(--tmv2-primary);
}

#tmv2App .tmv2-step-card--2 .tmv2-step-card__num {
  background: var(--tmv2-warning-soft);
  border-color: color-mix(in srgb, var(--tmv2-warning) 40%, var(--tmv2-line));
  color: var(--tmv2-warning-border, var(--tmv2-warning));
}

#tmv2App .tmv2-step-card--3 .tmv2-step-card__num {
  background: var(--tmv2-info-soft);
  border-color: color-mix(in srgb, var(--tmv2-info) 35%, var(--tmv2-line));
  color: var(--tmv2-info-ink, var(--tmv2-info));
}

#tmv2App .tmv2-step-card--4 .tmv2-step-card__num {
  background: var(--tmv2-success-soft);
  border-color: color-mix(in srgb, var(--tmv2-success) 35%, var(--tmv2-line));
  color: var(--tmv2-success);
}

#tmv2App .tmv2-step-card__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tmv2-ink);
  margin: 0;
  line-height: 1.25;
}

#tmv2App .tmv2-step-card__desc {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--tmv2-ink-2);
  margin: 0;
}

@keyframes tmv2-step-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tmv2App .tmv2-step-card {
  animation: tmv2-step-card-in 0.45s ease-out backwards;
}

#tmv2App .tmv2-section-grid--auto-4 .tmv2-step-card:nth-child(1) {
  animation-delay: 0.04s;
}

#tmv2App .tmv2-section-grid--auto-4 .tmv2-step-card:nth-child(2) {
  animation-delay: 0.08s;
}

#tmv2App .tmv2-section-grid--auto-4 .tmv2-step-card:nth-child(3) {
  animation-delay: 0.12s;
}

#tmv2App .tmv2-section-grid--auto-4 .tmv2-step-card:nth-child(4) {
  animation-delay: 0.16s;
}

/* Block heading (icon + title) */
#tmv2App .tmv2-block-head {
  display: flex;
  align-items: center;
  gap: var(--tmv2-sp-3);
  margin: 0 0 var(--tmv2-sp-3);
}

#tmv2App .tmv2-block-head__icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--tmv2-r-md);
  display: grid;
  place-items: center;
  background: var(--tmv2-primary-soft);
  color: var(--tmv2-primary);
  flex-shrink: 0;
}

#tmv2App .tmv2-block-head h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tmv2-ink);
}

/* Compact action links (grid of shortcuts) */
#tmv2App a.tmv2-action-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tmv2-sp-3);
  min-height: 4.25rem;
  padding: var(--tmv2-sp-3) var(--tmv2-sp-4);
  border-radius: var(--tmv2-r-lg);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  background: var(--tmv2-surface-2);
  box-shadow: var(--tmv2-sh-1);
  text-decoration: none !important;
  color: var(--tmv2-ink) !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#tmv2App a.tmv2-action-card:hover {
  box-shadow: var(--tmv2-sh-2);
  border-color: var(--tmv2-line);
  transform: translateY(-1px);
}

#tmv2App .tmv2-action-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--tmv2-r-md);
  display: grid;
  place-items: center;
}

#tmv2App .tmv2-action-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

#tmv2App .tmv2-action-card__label {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tmv2-ink);
}

#tmv2App a.tmv2-action-card--primary .tmv2-action-card__icon {
  background: var(--tmv2-primary-soft);
  color: var(--tmv2-primary);
}

#tmv2App a.tmv2-action-card--primary {
  border-color: color-mix(in srgb, var(--tmv2-primary) 30%, var(--tmv2-line));
  background: color-mix(in srgb, var(--tmv2-primary) 6%, var(--tmv2-surface));
}

#tmv2App a.tmv2-action-card--danger .tmv2-action-card__icon {
  background: var(--tmv2-danger-soft);
  color: var(--tmv2-danger);
}

#tmv2App a.tmv2-action-card--danger {
  border-color: color-mix(in srgb, var(--tmv2-danger) 28%, var(--tmv2-line));
  background: color-mix(in srgb, var(--tmv2-danger) 6%, var(--tmv2-surface));
}

#tmv2App a.tmv2-action-card--info .tmv2-action-card__icon {
  background: var(--tmv2-info-soft);
  color: var(--tmv2-info-ink, var(--tmv2-info));
}

#tmv2App a.tmv2-action-card--info {
  border-color: color-mix(in srgb, var(--tmv2-info) 26%, var(--tmv2-line));
  background: color-mix(in srgb, var(--tmv2-info) 6%, var(--tmv2-surface));
}

#tmv2App a.tmv2-action-card--success .tmv2-action-card__icon {
  background: var(--tmv2-success-soft);
  color: var(--tmv2-success);
}

#tmv2App a.tmv2-action-card--success {
  border-color: color-mix(in srgb, var(--tmv2-success) 28%, var(--tmv2-line));
  background: color-mix(in srgb, var(--tmv2-success) 6%, var(--tmv2-surface));
}

/* List + table chrome */
#tmv2App .tmv2-list-panel {
  margin-top: var(--tmv2-sp-4);
}

#tmv2App .tmv2-list-panel > .tmv2-table-shell {
  border-radius: var(--tmv2-r-lg);
  overflow: visible;
}

#tmv2App .tmv2-table-toolbar {
  padding: var(--tmv2-sp-3) var(--tmv2-sp-4);
  background: var(--tmv2-surface-2);
  border-bottom: 1px solid var(--tmv2-line-2, var(--tmv2-line));
}

#tmv2App .tmv2-table-toolbar__icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--tmv2-r-md);
  display: grid;
  place-items: center;
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  color: var(--tmv2-ink-2);
}

#tmv2App .tmv2-table-toolbar h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tmv2-ink);
}

#tmv2App .tmv2-table-toolbar p {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--tmv2-ink-2);
}

#tmv2App .tmv2-stat-chip {
  padding: var(--tmv2-sp-2) var(--tmv2-sp-3);
  border-radius: var(--tmv2-r-md);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  background: var(--tmv2-surface);
}

#tmv2App .tmv2-stat-chip__label {
  font-size: 0.6875rem;
  color: var(--tmv2-ink-2);
}

#tmv2App .tmv2-stat-chip__val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tmv2-ink);
  font-variant-numeric: tabular-nums;
}

#tmv2App .tmv2-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

#tmv2App table.xml-sources-table thead tr {
  background: var(--tmv2-surface-2);
  border-bottom: 1px solid var(--tmv2-line-2, var(--tmv2-line));
}

#tmv2App table.xml-sources-table th {
  color: var(--tmv2-ink-2);
  font-weight: 600;
  border-color: transparent;
}

#tmv2App table.xml-sources-table tbody tr {
  border-color: var(--tmv2-line-2, var(--tmv2-line));
}

#tmv2App table.xml-sources-table tbody tr:hover {
  background: color-mix(in srgb, var(--tmv2-ink) 4%, var(--tmv2-surface));
}

#tmv2App .tmv2-entity-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--tmv2-r-md);
  display: grid;
  place-items: center;
  background: var(--tmv2-primary-soft);
  border: 1px solid color-mix(in srgb, var(--tmv2-primary) 22%, var(--tmv2-line));
  color: var(--tmv2-primary);
}

/* ----- Wide / fluid page inner (#tmv2App) ----- */
#tmv2App .tmv2-page-inner.tmv2-page-inner--wide {
  max-width: min(100%, var(--tmv2-page-inner-wide-max, 1920px));
}

/* Operations / buybox: aynı genişlik üst sınırı — özel sayfa max-width yok */
#tmv2App .tmv2-page-inner.tmv2-page-inner--ops {
  max-width: min(100%, var(--tmv2-page-inner-wide-max, 1920px));
}

#tmv2App .tmv2-page-inner.tmv2-page-inner--fluid {
  max-width: none;
}

/* Bağımsız geniş sarmalayıcı (ör. ürün ayarları) */
#tmv2App .tmv2-page-inner--wide:not(.tmv2-page-inner) {
  max-width: min(100%, var(--tmv2-page-inner-wide-max, 1920px));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Ops dashboard: primary column + sidebar rail */
#tmv2App .tmv2-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: var(--tmv2-sp-4);
  align-items: start;
  width: 100%;
}

@media (max-width: 991.98px) {
  #tmv2App .tmv2-ops-grid {
    grid-template-columns: 1fr;
  }
}

/* Bootstrap .card + .tmv2-metric-card gövdesi */
#tmv2App .tmv2-metric-card .card-body {
  padding: var(--tmv2-sp-4);
}

/* Generic action panel */
#tmv2App .tmv2-action-panel {
  background: var(--tmv2-surface);
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line));
  border-radius: var(--tmv2-r-lg);
  box-shadow: var(--tmv2-sh-1);
  padding: var(--tmv2-sp-4);
  box-sizing: border-box;
}

#tmv2App .tmv2-empty-state--compact {
  padding: var(--tmv2-sp-5) var(--tmv2-sp-4);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Commission / Plus / Advantage — shared .app-container layout */
#tmv2App .app-container {
  --page-max-width: min(100%, var(--tmv2-page-inner-wide-max, 1920px));
}

#tmv2App .app-container .header-text h1,
#tmv2App .app-container .header-text h1.m-0 {
  font-size: 1.375rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
  color: var(--tmv2-ink) !important;
}

#tmv2App .app-container .header-text p,
#tmv2App .app-container .header-text p.mt-1 {
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: var(--tmv2-ink-2) !important;
}

#tmv2App .app-container .header-section {
  background: var(--tmv2-surface) !important;
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line)) !important;
  border-radius: var(--tmv2-r-lg) !important;
  box-shadow: var(--tmv2-sh-1) !important;
  padding: 0 var(--tmv2-sp-3) !important;
  margin-top: var(--tmv2-sp-3) !important;
}

#tmv2App .app-container .header-content {
  padding: var(--tmv2-sp-3) 0 !important;
  gap: var(--tmv2-sp-3) !important;
}

#tmv2App .app-container .header-tool-card {
  background: var(--tmv2-surface-2) !important;
  border: 1px solid var(--tmv2-line-2, var(--tmv2-line)) !important;
  border-radius: var(--tmv2-r-md) !important;
  box-shadow: var(--tmv2-sh-1) !important;
}

/* Primary blue instead of orange for Bootstrap warning CTAs in these flows */
#tmv2App .app-container .btn-warning {
  background: var(--tmv2-primary) !important;
  border-color: var(--tmv2-primary) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .app-container .btn-warning:hover,
#tmv2App .app-container .btn-warning:focus {
  background: var(--tmv2-primary-hover, var(--color-primary-hover)) !important;
  border-color: var(--tmv2-primary-hover, var(--color-primary-hover)) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .app-container .btn-bulk-primary {
  background: var(--tmv2-primary) !important;
  box-shadow: var(--tmv2-sh-2) !important;
  color: var(--tm-fg-on-brand) !important;
}

#tmv2App .app-container .btn-bulk-primary:hover {
  filter: brightness(0.97);
}

#tmv2App .app-container .bulk-select-type-pill:hover {
  border-color: color-mix(in srgb, var(--tmv2-primary) 35%, var(--tmv2-line)) !important;
  background: var(--tmv2-primary-soft) !important;
}

#tmv2App .app-container .bulk-select-type-pill input {
  accent-color: var(--tmv2-primary) !important;
}

#tmv2App .app-container .bulk-select-panel__body .form-input:focus,
#tmv2App .app-container .bulk-select-panel__body select:focus {
  border-color: color-mix(in srgb, var(--tmv2-primary) 45%, var(--tmv2-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmv2-primary) 18%, transparent) !important;
  outline: none !important;
}

#tmv2App .tmv2-upload-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  padding: var(--tmv2-sp-4);
  border-radius: var(--tmv2-r-lg);
  border: 2px dashed var(--tmv2-line-2, var(--tmv2-line));
  background: var(--tmv2-surface-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#tmv2App .tmv2-upload-dropzone:hover {
  border-color: color-mix(in srgb, var(--tmv2-primary) 40%, var(--tmv2-line));
  background: var(--tmv2-surface);
}

/* Ürün ayarları — shell arka planı token ile */
#tmv2App .product-settings-page .min-vh-100.bg-light {
  background: transparent !important;
}

#tmv2App .profit-margin-page .wide-container {
  max-width: min(100%, var(--tmv2-page-inner-wide-max, 2200px));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tmv2-sp-3);
  padding-right: var(--tmv2-sp-3);
  box-sizing: border-box;
}

/* Üst küçük etiket (buybox / paneller) */
#tmv2App .tmv2-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tmv2-ink-2);
}

/* Genel Bakış — maliyet uyarısı: token yüzey (dashboard-tabbed .alert-card !important üstüne) */
#tmv2App #overviewTab .cost-warning-banner--critical.tmv2-panel.tmv2-panel--warning {
  background: color-mix(in srgb, var(--tmv2-danger-soft) 55%, var(--tmv2-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--tmv2-danger) 32%, var(--tmv2-border)) !important;
  border-left: 4px solid var(--tmv2-danger) !important;
  border-radius: var(--tmv2-r-lg) !important;
  box-shadow: var(--tmv2-sh-1) !important;
}

#tmv2App #overviewTab .cost-warning-banner.tmv2-panel--flush .cost-warning-content {
  padding: var(--tmv2-sp-4) var(--tmv2-sp-5);
  box-sizing: border-box;
}

html.dark-mode #tmv2App #overviewTab .cost-warning-banner--critical.tmv2-panel.tmv2-panel--warning {
  background: color-mix(in srgb, var(--tmv2-danger-soft) 22%, var(--tmv2-surface)) !important;
  border-color: color-mix(in srgb, var(--tmv2-danger) 40%, var(--tmv2-line)) !important;
}

/* Soru-Cevap uyarı bandı — bilgilendirici (marka) ton, danger-kırmızı DEĞİL */
#tmv2App #overviewTab .cost-warning-banner--qa.tmv2-panel.tmv2-panel--warning {
  background: color-mix(in srgb, var(--tmv2-info-soft) 55%, var(--tmv2-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--tmv2-info) 32%, var(--tmv2-border)) !important;
  border-left: 4px solid var(--tmv2-info) !important;
  border-radius: var(--tmv2-r-lg) !important;
  box-shadow: var(--tmv2-sh-1) !important;
}

#tmv2App #overviewTab .cost-warning-banner--qa .cost-warning-icon {
  color: var(--tmv2-info) !important;
}

html.dark-mode #tmv2App #overviewTab .cost-warning-banner--qa.tmv2-panel.tmv2-panel--warning {
  background: color-mix(in srgb, var(--tmv2-info-soft) 22%, var(--tmv2-surface)) !important;
  border-color: color-mix(in srgb, var(--tmv2-info) 40%, var(--tmv2-line)) !important;
}


/* ===== css/tm-analysis-pages-v2.css ===== */
/**
 * Trendmetrik — Kârlılık / analiz sayfaları (ürün, sipariş, kâr marjı, kategori, iade)
 * tmv2-analysis-root ile işaretlenen sayfalarda devreye girer.
 * tm-ui-system + tm-shell token’ları ile uyumlu.
 */

/* ----- Arka plan dekorunu yumuşat (.bg-shapes viewport sabit) ----- */
#tmv2Page.tmv2-page-host:is(.tmh-f787b041, :not(*) .tmv2-analysis-root) {
  --tm-app-grid-line: rgba(15, 23, 42, 0.034);
}

#tmv2Page.tmv2-page-host:is(.tmh-f787b041, :not(*) .tmv2-analysis-root) .bg-shapes::after {
  opacity: 0.55;
}

#tmv2Page.tmv2-page-host:is(.tmh-f787b041, :not(*) .tmv2-analysis-root) .shape {
  opacity: 0.14 !important;
}

/* ----- Kök: dashboard ile aynı genişlik (#tmv2Page padding dışında tam sütun) ----- */
.tmv2-analysis-root {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  max-width: var(--tmv2-content-max-width, none);
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
}

#mainContent.main-content:is(.tmh-d0c2d839, :not(*) .tmv2-analysis-root) {
  position: relative;
  z-index: 1;
}

/* Bölüm aralığı */
.tmv2-analysis-section {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .tmv2-analysis-section {
    margin-bottom: 1.125rem;
  }
}

/* ----- Başlık kartı ----- */
.tmv2-analysis-title-card {
  border-radius: var(--tmv2-r-lg, 14px) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  background: var(--tmv2-surface, #fff) !important;
}

html.dark-mode .tmv2-analysis-title-card {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* ----- Özet şerit (compact-stats-bar) ----- */
.tmv2-analysis-summary {
  border-radius: var(--tmv2-r-lg, 14px) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  background: var(--tmv2-surface, #fff) !important;
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  padding: 0.65rem 1rem !important;
}

html.dark-mode .tmv2-analysis-summary {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* ----- Filtre çubuğu ----- */
.tmv2-analysis-filter {
  border-radius: var(--tmv2-r-lg, 14px) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  background: var(--tmv2-surface, #fff) !important;
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  padding: 0.65rem 1rem !important;
}

.tmv2-analysis-filter .form-select,
.tmv2-analysis-filter .form-control {
  min-height: 38px !important;
  height: 38px !important;
  font-size: 0.8125rem !important;
  border-radius: 12px !important;
  border-color: var(--tmv2-line-2, #e7ebf1) !important;
}

.tmv2-analysis-filter .filter-divider {
  align-self: stretch;
  min-height: 28px;
}

/* Excel / dışa aktar — yeşil yerine nötr + vurgu */
.tmv2-analysis-root #download-product-report,
.tmv2-analysis-root #download-order-report,
.tmv2-analysis-root #download-category-report,
.tmv2-analysis-root #download-return-report,
.tmv2-analysis-root .tmv2-analysis-export-btn {
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.35rem 0.85rem !important;
  border: 1px solid var(--tmv2-line, #e7ebf1) !important;
  background: var(--tmv2-surface-2, #fafbfd) !important;
  color: var(--tmv2-ink, #0f172a) !important;
}

.tmv2-analysis-root #download-product-report:hover,
.tmv2-analysis-root #download-order-report:hover,
.tmv2-analysis-root #download-category-report:hover,
.tmv2-analysis-root #download-return-report:hover,
.tmv2-analysis-root .tmv2-analysis-export-btn:hover {
  border-color: var(--tmv2-primary) !important;
  color: var(--tmv2-primary) !important;
  background: var(--tmv2-primary-soft) !important;
}

html.dark-mode .tmv2-analysis-root #download-product-report,
html.dark-mode .tmv2-analysis-root #download-order-report,
html.dark-mode .tmv2-analysis-root #download-category-report,
html.dark-mode .tmv2-analysis-root #download-return-report,
html.dark-mode .tmv2-analysis-root .tmv2-analysis-export-btn {
  background: var(--tmv2-surface-2, #0e131c) !important;
  color: var(--tmv2-ink, #e6ecf5) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* ----- Tablo paneli ----- */
.tmv2-analysis-panel {
  border-radius: var(--tmv2-r-lg, 14px) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  background: var(--tmv2-surface, #fff) !important;
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  overflow: hidden;
}

.tmv2-analysis-panel .table-responsive {
  margin: 0;
}

.tmv2-analysis-panel .table {
  margin-bottom: 0 !important;
  font-size: 0.875rem;
}

.tmv2-analysis-panel thead.table-light th,
.tmv2-analysis-panel thead th {
  background: var(--tmv2-surface-2, #f8fafc) !important;
  color: var(--tmv2-ink-2, #475569) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  vertical-align: middle;
  padding: 0.65rem 0.75rem !important;
}

html.dark-mode .tmv2-analysis-panel thead th {
  background: var(--tmv2-surface-2, #0e131c) !important;
  color: var(--tmv2-ink-2, #94a3b8) !important;
  border-bottom-color: var(--tmv2-line, #1e2533) !important;
}

.tmv2-analysis-panel tbody td {
  padding: 0.55rem 0.75rem !important;
  vertical-align: middle;
  border-bottom-color: var(--tmv2-line-2, #f1f5f9) !important;
}

html.dark-mode .tmv2-analysis-panel tbody td {
  border-bottom-color: var(--tmv2-line, #1e2533) !important;
}

/* ----- Boş durum ----- */
.tmv2-analysis-root .empty-state-container {
  padding: 2rem 1.25rem !important;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.tmv2-analysis-root .empty-state-icon {
  width: 4rem !important;
  height: 4rem !important;
  font-size: 1.75rem !important;
}

.tmv2-analysis-root .empty-state-icon i {
  font-size: 1.75rem !important;
}

/* ----- Sayfalama çubuğu ----- */
.tmv2-analysis-pagination {
  border-radius: var(--tmv2-r-lg, 14px) !important;
  border: 1px solid var(--tmv2-line-2, #eef1f6) !important;
  background: var(--tmv2-surface, #fff) !important;
  box-shadow: var(--tmv2-sh-1, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
  padding: 0.75rem 1rem !important;
}

html.dark-mode .tmv2-analysis-pagination {
  background: var(--tmv2-surface, #10151f) !important;
  border-color: var(--tmv2-line, #1e2533) !important;
}

/* ----- Geri bildirim sekmesi: analiz sayfalarında biraz daha az baskın ----- */
#tmv2App:is(.tmh-ad5b1b7c, :not(*) .tmv2-analysis-root) #tmFbkOpen {
  opacity: 0.94;
  filter: saturate(0.95);
}

@media (min-width: 1024px) {
  #tmv2App:is(.tmh-ad5b1b7c, :not(*) .tmv2-analysis-root) #tmFbkOpen {
    right: 2px;
  }
}


/* ===== css/tm-v2-reference-chrome.css ===== */
/**
 * Trendmetrik v2 — Reference Chrome
 * Sidebar inner elements + dark mode canvas.
 * Layout handled by tm-shell-v2.css (grid + sticky).
 * This file handles:
 *   - Inner #sidebar reset (legacy rail → full panel)
 *   - Dark mode canvas gradient
 *   - Nav active states
 */

/* ──────────────────────────────────────────────────────────────────────
   2026-10-08 — NAV GÖRSELLERİ BU DOSYADAN KALDIRILDI.
   Etiket yazı tipi/boyutu, ikon kutusu, aktif durum (mavi 3px sol çubuk +
   mavi pill), alt-link ve akordeon başlığı kuralları ARTIK TEK KAYNAKTA:
   static/css/v2/components/sidebar.css (kılavuz rail dili).
   Burada yalnız YAPISAL iş kalır: legacy `sidebar-panel.css` rail
   davranışını (70px→280px hover, fixed, 75vh) nötrleyen #sidebar reset'i
   ve koyu tema tuval gradyanı.
   🔒 Buraya nav rengi/boyutu/aktif-durum kuralı GERİ EKLEME — iki kaynak
      yeniden doğar (bu dosya tam olarak öyle şişmişti).
   ────────────────────────────────────────────────────────────────────── */

/* ----- App font ----- */
#tmv2App.tmv2-app {
  font-family: var(--tmv2-ff-sans);
  -webkit-font-smoothing: antialiased;
}

/* ----- Inner #sidebar: override legacy sidebar-panel.css fixed/rail behavior ----- */
@media (min-width: 1025px) {
  /* Hide duplicate header inside sidebar body */
  #tmv2SidebarRoot .tmv2-sidebar-body .sidebar-header {
    display: none !important;
  }

  #tmv2App {
    --tm-sidebar-rail: var(--tmv2-sb-w);
  }

  #tmv2SidebarRoot #sidebar.sidebar,
  #tmv2SidebarRoot #sidebar,
  body #tmv2SidebarRoot #sidebar,
  html body #tmv2SidebarRoot #sidebar {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: auto !important;
  }

  #tmv2SidebarRoot #sidebar:hover,
  body #tmv2SidebarRoot #sidebar:hover {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    box-shadow: none !important;
  }

  #tmv2SidebarRoot #sidebar .sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0.35rem 0.75rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #tmv2SidebarRoot #sidebar .sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Accordion: only expand on .expanded class, not hover */
  #tmv2SidebarRoot #sidebar .nav-group:not(.expanded) .nav-group-content {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #tmv2SidebarRoot #sidebar .nav-group.expanded .nav-group-content {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Hide toggle button */
  #tmv2SidebarRoot #sidebar .sidebar-toggle {
    display: none !important;
  }
}

/* ----- Mobile: inner sidebar fully relative ----- */
@media (max-width: 1024px) {
  #tmv2SidebarRoot #sidebar.sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #tmv2SidebarRoot #sidebar.mobile-open .sidebar-nav {
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  #tmv2SidebarRoot #sidebar.sidebar {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    z-index: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    background: transparent !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
  }
}

/* ----- Dark mode: canvas gradient ----- */
html.dark-mode body.tmv2-body .tmv2-app {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(58, 136, 229, 0.12), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(232, 138, 61, 0.06), transparent 50%),
    var(--tmv2-page);
}

/* Page shell — neutralized in v2 (styled via tm-shell-v2.css) */

/*
 * Üst şerit / grid hizası — test ve dokümantasyon için ana sütun seçicisi + token
 * (gerçek yerleşim tm-shell-v2 grid’de; sabit header varyantı: .tmv2-main:not(.tmv2-main--no-sidebar) left: var(--tmv2-sb-w))
 */


/* ===== css/tm-modal-bootstrap-stack.css ===== */
/* ---- Canonical visual language for every Bootstrap modal ---- */
:root {
  --tm-modal-radius: 14px;
  --tm-modal-radius-sm: 10px;
  --tm-modal-border: var(--tmv2-line-2, #e7ebf1);
  --tm-modal-surface: var(--tmv2-surface, #ffffff);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #f8fafc);
  --tm-modal-ink: var(--tmv2-ink, #0f172a);
  --tm-modal-primary: var(--tmv2-primary, var(--color-primary, #0175e4));
  --tm-modal-primary-soft: color-mix(in srgb, var(--tm-modal-primary) 10%, #ffffff);
  --tm-modal-shadow: 0 22px 58px rgba(15, 23, 42, 0.22);
  --tm-modal-backdrop-bg: rgba(15, 23, 42, 0.48);
}

body > .modal {
  --bs-modal-bg: var(--tm-modal-surface);
  --bs-modal-border-color: var(--tm-modal-border);
  --bs-modal-border-radius: var(--tm-modal-radius);
  --bs-modal-header-border-color: var(--tm-modal-border);
  --bs-modal-footer-border-color: var(--tm-modal-border);
  --bs-modal-padding: 1rem;
}

body > .modal.fade {
  transition: opacity 0.2s ease-out !important;
}

body > .modal.fade .modal-dialog {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease-out !important;
}

body > .modal.show .modal-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body > .modal.show > .modal-backdrop,
body > .modal-backdrop.show {
  background-color: var(--tm-modal-backdrop-bg) !important;
  opacity: 1 !important;
}

body > .modal .modal-dialog {
  width: min(calc(100vw - 24px), var(--bs-modal-width, 500px));
}

body > .modal .modal-content {
  overflow: hidden !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: var(--tm-modal-radius) !important;
  box-shadow: var(--tm-modal-shadow) !important;
}

body > .modal .modal-header,
body > .modal .modal-header.bg-primary,
body > .modal .modal-header.bg-success,
body > .modal .modal-header.bg-danger,
body > .modal .modal-header.bg-warning,
body > .modal .modal-header.bg-info,
body > .modal .modal-header.bg-dark,
body > .modal .modal-header.bg-white {
  min-height: 56px;
  gap: 0.75rem;
  padding: 0.85rem 1rem !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border-bottom: 1px solid var(--tm-modal-border) !important;
}

body > .modal .modal-title,
body > .modal .modal-header h1,
body > .modal .modal-header h2,
body > .modal .modal-header h3,
body > .modal .modal-header h4,
body > .modal .modal-header h5,
body > .modal .modal-header h6 {
  color: var(--tm-modal-ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

body > .modal .modal-header .bg-white,
body > .modal .modal-header .bg-opacity-20 {
  background: var(--tm-modal-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--tm-modal-primary) 18%, transparent) !important;
  border-radius: var(--tm-modal-radius-sm) !important;
}

body > .modal .modal-header i.text-white,
body > .modal .modal-header .text-white,
body > .modal .modal-header .bg-white,
body > .modal .modal-header .bg-opacity-20,
body > .modal .modal-header [class*="rounded"] > i {
  color: var(--tm-modal-primary) !important;
}

body > .modal .btn-close,
body > .modal .btn-close-white {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 0.68 !important;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease,
    transform 0.15s ease !important;
}

body > .modal .btn-close:hover,
body > .modal .btn-close:focus {
  background-color: var(--tm-modal-surface-muted) !important;
  opacity: 1 !important;
  transform: scale(1.03);
  box-shadow: none !important;
}

body > .modal .modal-body {
  padding: 1rem !important;
  color: var(--tm-modal-ink) !important;
  background: var(--tm-modal-surface) !important;
}

body > .modal .modal-footer,
body > .modal .modal-footer.bg-light,
body > .modal .modal-footer.bg-white {
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--tm-modal-surface-muted) !important;
  border-top: 1px solid var(--tm-modal-border) !important;
}

body > .modal .modal-footer .btn {
  border-radius: 8px !important;
  font-weight: 650 !important;
}

body > .modal .modal-body .bg-light,
body > .modal .modal-body .bg-white.border,
body > .modal .modal-body .rounded-3,
body > .modal .modal-body .rounded-2 {
  border-radius: var(--tm-modal-radius-sm) !important;
}

body > .modal .modal-body .bg-light {
  background: var(--tm-modal-surface-muted) !important;
}

body > .modal .modal-dialog-scrollable .modal-body {
  scrollbar-gutter: stable;
}

@media (max-width: 575.98px) {
  body > .modal .modal-dialog {
    width: calc(100vw - 16px);
    margin: 0.5rem auto !important;
  }

  body > .modal .modal-content {
    border-radius: 12px !important;
  }

  body > .modal .modal-header,
  body > .modal .modal-body,
  body > .modal .modal-footer {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  body > .modal .modal-footer {
    align-items: stretch !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .modal.fade,
  body > .modal.fade .modal-dialog,
  body > .modal .btn-close {
    transition: none !important;
  }
}

html.dark-mode body > .modal {
  --tm-modal-border: var(--tmv2-line, #1e2533);
  --tm-modal-surface: var(--tmv2-surface, #10151f);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #0e131c);
  --tm-modal-ink: var(--tmv2-ink, #e6ecf5);
  --tm-modal-primary-soft: color-mix(in srgb, var(--tm-modal-primary) 16%, #10151f);
  --tm-modal-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
  --tm-modal-backdrop-bg: rgba(2, 6, 23, 0.66);
}

/* Specificity guard: page-level #modal-id overrides must still inherit the global modal language. */
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-content {
  overflow: hidden !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: var(--tm-modal-radius) !important;
  box-shadow: var(--tm-modal-shadow) !important;
}

body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-primary,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-success,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-danger,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-warning,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-info,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-dark,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-white {
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border-bottom: 1px solid var(--tm-modal-border) !important;
}

body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-body {
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
}

body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-light,
body > .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-white {
  background: var(--tm-modal-surface-muted) !important;
  border-top: 1px solid var(--tm-modal-border) !important;
}

/* Nested Bootstrap modals are common in legacy pages; they must share the same global design. */
.modal:is(#tmModalSpecificityBoost, .modal) {
  --bs-modal-bg: var(--tm-modal-surface);
  --bs-modal-border-color: var(--tm-modal-border);
  --bs-modal-border-radius: var(--tm-modal-radius);
  --bs-modal-header-border-color: var(--tm-modal-border);
  --bs-modal-footer-border-color: var(--tm-modal-border);
  --bs-modal-padding: 1rem;
}

.modal:is(#tmModalSpecificityBoost, .modal).fade {
  transition: opacity 0.2s ease-out !important;
}

.modal:is(#tmModalSpecificityBoost, .modal).fade .modal-dialog {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease-out !important;
}

.modal:is(#tmModalSpecificityBoost, .modal).show .modal-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-dialog {
  width: min(calc(100vw - 24px), var(--bs-modal-width, 500px));
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-content {
  overflow: hidden !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: var(--tm-modal-radius) !important;
  box-shadow: var(--tm-modal-shadow) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-header,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-primary,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-success,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-danger,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-warning,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-info,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-dark,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header.bg-white {
  min-height: 56px;
  gap: 0.75rem;
  padding: 0.85rem 1rem !important;
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border-bottom: 1px solid var(--tm-modal-border) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-title,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h1,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h2,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h3,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h4,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h5,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header h6 {
  color: var(--tm-modal-ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-opacity-20 {
  background: var(--tm-modal-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--tm-modal-primary) 18%, transparent) !important;
  border-radius: var(--tm-modal-radius-sm) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-header i.text-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .text-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-white,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header .bg-opacity-20,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-header [class*="rounded"] > i {
  color: var(--tm-modal-primary) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .btn-close,
.modal:is(#tmModalSpecificityBoost, .modal) .btn-close-white {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  filter: none !important;
  opacity: 0.68 !important;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease,
    transform 0.15s ease !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .btn-close:hover,
.modal:is(#tmModalSpecificityBoost, .modal) .btn-close:focus {
  background-color: var(--tm-modal-surface-muted) !important;
  opacity: 1 !important;
  transform: scale(1.03);
  box-shadow: none !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-body {
  padding: 1rem !important;
  color: var(--tm-modal-ink) !important;
  background: var(--tm-modal-surface) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-light,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer.bg-white {
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--tm-modal-surface-muted) !important;
  border-top: 1px solid var(--tm-modal-border) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-footer .btn {
  border-radius: 8px !important;
  font-weight: 650 !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .bg-light,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .bg-white.border,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .rounded-3,
.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .rounded-2 {
  border-radius: var(--tm-modal-radius-sm) !important;
}

.modal:is(#tmModalSpecificityBoost, .modal) .modal-body .bg-light {
  background: var(--tm-modal-surface-muted) !important;
}

html.dark-mode .modal:is(#tmModalSpecificityBoost, .modal) {
  --tm-modal-border: var(--tmv2-line, #1e2533);
  --tm-modal-surface: var(--tmv2-surface, #10151f);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #0e131c);
  --tm-modal-ink: var(--tmv2-ink, #e6ecf5);
  --tm-modal-primary-soft: color-mix(in srgb, var(--tm-modal-primary) 16%, #10151f);
  --tm-modal-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
  --tm-modal-backdrop-bg: rgba(2, 6, 23, 0.66);
}

@media (max-width: 575.98px) {
  .modal:is(#tmModalSpecificityBoost, .modal) .modal-dialog {
    width: calc(100vw - 16px);
    margin: 0.5rem auto !important;
  }

  .modal:is(#tmModalSpecificityBoost, .modal) .modal-content {
    border-radius: 12px !important;
  }

  .modal:is(#tmModalSpecificityBoost, .modal) .modal-header,
  .modal:is(#tmModalSpecificityBoost, .modal) .modal-body,
  .modal:is(#tmModalSpecificityBoost, .modal) .modal-footer {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}

/* Date range picker popovers use their own positioning, but share modal motion. */
.date-range-picker-modal {
  --tm-modal-border: var(--tmv2-line-2, #e7ebf1);
  --tm-modal-surface: var(--tmv2-surface, #ffffff);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #f8fafc);
  --tm-modal-ink: var(--tmv2-ink, #0f172a);
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease-out,
    visibility 0.16s ease-out !important;
}

.date-range-picker-modal.d-none,
.date-range-picker-modal[style*="display: none"] {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 8px, 0) scale(0.985) !important;
  /* Fade-out geçişi için display:block tutuluyor; ama pozisyonlanmış (absolute) kural
     yalnız dashboard-datepicker.css'te → o bundle yüklenmeyen sayfalarda (ör. Genel Bakış)
     modal position:static + in-flow kalıp sayfa ALTINA 127px görünmez boşluk ekliyordu
     ("en altta ciddi boşluk"). Gizliyken akıştan çıkar → fantom yükseklik yok. 2026-09-18. */
  position: fixed !important;
}

.date-range-picker-modal .date-range-picker-container {
  background: var(--tm-modal-surface) !important;
  color: var(--tm-modal-ink) !important;
  border: 1px solid var(--tm-modal-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

.date-range-picker-modal .date-range-picker-header,
.date-range-picker-modal .date-range-picker-footer {
  background: var(--tm-modal-surface-muted) !important;
  border-color: var(--tm-modal-border) !important;
}

@media (max-width: 575.98px) {
  .date-range-picker-modal,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) {
    left: 8px !important;
    right: 8px !important;
    min-width: 0 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .date-range-picker-modal .date-range-picker-container,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .date-range-picker-modal .date-range-picker-footer,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .date-range-picker-modal .date-range-picker-footer .btn,
  .date-range-picker-modal .date-range-picker-footer button,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-footer .btn,
  body .date-range-picker-modal:is(#tmDatePickerSpecificityBoost, .date-range-picker-modal) .date-range-picker-footer button {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
}

html.dark-mode .date-range-picker-modal {
  --tm-modal-border: var(--tmv2-line, #1e2533);
  --tm-modal-surface: var(--tmv2-surface, #10151f);
  --tm-modal-surface-muted: var(--tmv2-surface-2, #0e131c);
  --tm-modal-ink: var(--tmv2-ink, #e6ecf5);
}

/**
 * Trendmetrik — Bootstrap 5 Modal Merkezi Standardı
 *
 * Z-index kaynağı: `static/css/tm-z-layers.css` (tek kaynak, CSS değişkenleri).
 * JS tarafı: `static/js/tm-modal-manager.js` (backdrop reparenting + body lock).
 *
 * KÖKEN SORUN ve ÇÖZÜM
 *   Bootstrap `.modal-backdrop`'u `<body>`'ye ekler. Eğer modal bir stacking
 *   context'li container'da (örn. `main#mainContent.tmv2-page` position:relative
 *   +z-index:1, `.page-shell` isolation:isolate, `.tmv2-analysis-root` vb.)
 *   render edildiyse, modal'ın efektif z-index'i ata'ya göre 1'e sıkışır; body
 *   root'undaki backdrop (1050) ise üstte kalır → dialog tıklanamaz / perdeli.
 *
 *   ÇÖZÜM: tm-modal-manager.js backdrop'u MODAL elementinin İÇİNE, dialog'un
 *   ÖNCESİNE taşır. Aynı stacking context + DOM sırası (backdrop → dialog)
 *   sayesinde dialog DAİMA üstte çizilir. Sayfa-özel z-index override'ları
 *   (9999/999999 vb.) modalı kırsa bile bu mekanizma bağımsız çalışır.
 *
 * PROJE KURALI
 *   Yeni modal stillerinde:
 *     - `.modal` z-index'ini DEĞİŞTİRMEYİN (tm-z-layers.css ele alır)
 *     - `.modal-backdrop` z-index'ini DEĞİŞTİRMEYİN
 *     - Custom overlay/perde kullanıyorsanız class adı `.modal-backdrop`
 *       OLMAMALI; kendi class'ınızı verin + `body.modal-open` altında gizleyin
 *       (tm-z-layers.css'deki guard rule örneğine bakın).
 *     - `pointer-events` yalnızca `.modal-dialog` / `.modal-content` üzerinde
 *       `auto` olmalı; `.modal.show` Bootstrap gereği `pointer-events: none`.
 */

/* ---- Pointer-events (Bootstrap 5 default + defensive overrides) ---- */
.modal.show,
body > .modal.show {
  pointer-events: none !important;
}

.modal.show .modal-dialog,
.modal.show .modal-content,
.modal.show .modal-header,
.modal.show .modal-body,
.modal.show .modal-footer,
body > .modal.show .modal-dialog {
  pointer-events: auto !important;
}

/* Backdrop — click-outside dismiss için tıklanabilir; modal içine taşındığında
   da korunur (Bootstrap mousedown listener DOM pozisyonundan bağımsız). */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
  pointer-events: auto !important;
}

/* ---- Z-index (hard-pin: sayfa override'larına karşı) ---- */
body > .modal,
body > .modal.fade,
body > .modal.show,
body > .modal.fade.show {
  z-index: var(--tm-z-modal, 1055) !important;
}

body > .modal-backdrop,
body > .modal-backdrop.fade,
body > .modal-backdrop.show,
body > .modal-backdrop.fade.show {
  z-index: var(--tm-z-modal-backdrop, 1050) !important;
}

/* ---- Backdrop modal'ın İÇİNE taşındığında (tm-modal-manager.js) ---- */
/* Modal kendi stacking context'ini oluşturur (z:1055). İçindeki backdrop
   absolute + inset:0 ile modal viewport'unu kaplar, z:0; dialog relative z:1 —
   dialog DAİMA backdrop'un üstüne çizilir. */
.modal.show > .modal-backdrop,
body > .modal.show > .modal-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

.modal.show > .modal-dialog,
body > .modal.show > .modal-dialog {
  position: relative;
  z-index: 1;
}

/* ---- Modal açıkken yan UI elementleri ---- */
body.modal-open #tmFbkOpen,
body.modal-open .tm-feedback-partial-fab {
  pointer-events: none;
}

body.modal-open #tmFbkRoot.tm-fbk-root-shell:not(.tm-fbk--open) {
  pointer-events: none !important;
}

/* ---- Sayfa-özel legacy override'ları ETKİSİZLEŞTİR ---- */
/* Bazı sayfalar hâlâ scope'lu override verebilir (`.order-profit-page .modal`,
   `.product-delete-page .modal-backdrop` vb.). `body >` öncülünü kullandığımız
   kurallar, sayfa scope'undan bağımsız olduğu için çakışma durumunda CSS cascade
   sırasında YİNE kazanır (specificity: `body.modal-open .x` = 0,1,1,1 vs sayfa
   `.page .modal` = 0,0,2,0). Garantiyi `!important` ile sağlıyoruz. */


/* ===== css/tm-modal-system.css ===== */
:root {
  --tmm-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tmm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tmm-bg: var(--tmv2-surface, #ffffff);
  --tmm-text: var(--tmv2-text, #0f172a);
  --tmm-muted: var(--tmv2-muted, #64748b);
  --tmm-faint: #94a3b8;
  --tmm-line: var(--tmv2-line-2, #e7ebf1);
  --tmm-panel: var(--tmv2-surface-muted, #f8fafc);
  --tmm-shadow: 0 24px 64px rgba(15, 23, 42, .24), 0 4px 12px rgba(15, 23, 42, .08);
  --tmm-backdrop-bg: rgba(15, 23, 42, .46);
  --tmm-info: #0175e4;
  --tmm-danger: #ef4444;
  --tmm-success: #10b981;
  --tmm-warning: #f59e0b;
  --tmm-neutral: #64748b;
}

.tmm-backdrop,
.tmm-backdrop * {
  box-sizing: border-box;
}

.tmm-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--tm-z-modal, 1065);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--tmm-font);
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: auto;
  transition: opacity 240ms ease, background-color 240ms ease, backdrop-filter 240ms ease, visibility 0s linear 300ms;
}

.tmm-backdrop.is-rendered {
  visibility: visible;
}

.tmm-backdrop.is-open {
  background: var(--tmm-backdrop-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.tmm {
  --tmm-accent: var(--tmm-info);
  width: min(100%, 600px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: var(--tmm-text);
  background: var(--tmm-bg);
  border: 1px solid var(--tmm-line);
  border-radius: 16px;
  box-shadow: var(--tmm-shadow);
  opacity: 0;
  transform: translateY(10px) scale(.982);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease;
}

.tmm.sm { width: min(100%, 440px); }
.tmm.md { width: min(100%, 680px); }
.tmm.lg { width: min(100%, 920px); }
.tmm.xl { width: min(100%, 1080px); }

.tmm.info { --tmm-accent: var(--tmm-info); --tmm-accent-soft: rgba(1, 117, 228, .1); }
.tmm.danger { --tmm-accent: var(--tmm-danger); --tmm-accent-soft: rgba(239, 68, 68, .1); }
.tmm.success { --tmm-accent: var(--tmm-success); --tmm-accent-soft: rgba(16, 185, 129, .1); }
.tmm.warning { --tmm-accent: var(--tmm-warning); --tmm-accent-soft: rgba(245, 158, 11, .13); }
.tmm.neutral { --tmm-accent: var(--tmm-neutral); --tmm-accent-soft: rgba(100, 116, 139, .12); }

.tmm-backdrop.is-open .tmm {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tmm.anim-slide {
  transform: translateY(22px);
}

.tmm.anim-fade {
  transform: none;
}

.tmm-backdrop.is-open .tmm.anim-slide,
.tmm-backdrop.is-open .tmm.anim-fade {
  transform: translateY(0);
}

.tmm-accentbar {
  height: 3px;
  flex: 0 0 auto;
  background: var(--tmm-accent);
}

.tmm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 18px 18px 15px 20px;
  border-bottom: 1px solid var(--tmm-line);
}

.tmm-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--tmm-accent);
  background: var(--tmm-accent-soft);
}

.tmm-ic svg,
.tmm-ic i[data-lucide],
.tmm-x svg,
.tmm-x i[data-lucide],
.tmm-sec-title svg,
.tmm-sec-title i[data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.tmm-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.tmm-title {
  margin: 0;
  color: var(--tmm-text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
}

.tmm-sub {
  margin: 4px 0 0;
  color: var(--tmm-faint);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

.tmm-x {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #94a3b8;
  background: transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.tmm-x:hover,
.tmm-x:focus-visible {
  color: var(--tmm-text);
  background: #f1f5f9;
  outline: none;
}

.tmm-body {
  padding: 6px 20px 18px;
  overflow: auto;
  min-height: 0;
}

.tmm--center .tmm-body {
  padding: 26px 24px 22px;
  text-align: center;
}

.tmm-sec {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--tmm-panel);
}

.tmm-sec:first-child {
  margin-top: 10px;
}

.tmm-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--tmm-text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}

.tmm-sec-title svg,
.tmm-sec-title i[data-lucide] {
  color: var(--tmm-accent);
}

.tmm-grid {
  display: grid;
  gap: 10px 16px;
}

.tmm-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tmm-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.tmm-k {
  color: var(--tmm-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}

.tmm-v {
  min-width: 0;
  color: var(--tmm-text);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.tmm-money {
  font-family: var(--tmm-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.tmm-v.is-pos { color: #059669; }
.tmm-v.is-neg { color: #e11d48; }
.tmm-v.is-info { color: var(--tmm-info); }

.tmm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #047857;
  background: #d1fae5;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

.tmm-chip.danger {
  color: #b91c1c;
  background: #fee2e2;
}

.tmm-callout {
  padding: 12px 14px;
  border-radius: 12px;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}

.tmm-callout.danger {
  color: #7f1d1d;
  background: #fef2f2;
  border-color: #fecaca;
}

.tmm-form {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}

.tmm-field {
  display: grid;
  gap: 7px;
  color: var(--tmm-muted);
  font-size: 12px;
  font-weight: 700;
}

.tmm-input {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--tmm-line);
  border-radius: 12px;
  color: var(--tmm-text);
  background: var(--tmm-bg);
  font: 500 13px/1.35 var(--tmm-font);
  outline: none;
}

.tmm-input:focus {
  border-color: var(--tmm-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tmm-accent) 16%, transparent);
}

.tmm-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--tmm-line);
  background: var(--tmm-bg);
}

.tmm-btn {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 13px/1.2 var(--tmm-font);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.tmm-btn:hover {
  transform: translateY(-1px);
}

.tmm-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tmm-accent) 22%, transparent);
  outline-offset: 2px;
}

.tmm-btn.primary,
.tmm-btn.success {
  color: #fff;
  background: var(--tmm-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tmm-accent) 22%, transparent);
}

.tmm-btn.danger {
  color: #fff;
  background: var(--tmm-danger);
  box-shadow: 0 8px 18px rgba(239, 68, 68, .22);
}

.tmm-btn.ghost {
  color: var(--tmm-text);
  background: var(--tmm-bg);
  border-color: var(--tmm-line);
}

.tmm-btn.ghost:hover {
  background: #f8fafc;
}

.tmm-btn-block {
  width: 100%;
}

.tmm-center-text {
  margin: 0;
  color: var(--tmm-muted);
  font-size: 13px;
  line-height: 1.45;
}

html.dark-mode .tmm-backdrop,
body.dark-mode .tmm-backdrop {
  --tmm-bg: #0f172a;
  --tmm-text: #f8fafc;
  --tmm-muted: #cbd5e1;
  --tmm-faint: #94a3b8;
  --tmm-line: rgba(148, 163, 184, .22);
  --tmm-panel: rgba(15, 23, 42, .72);
  --tmm-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .28);
}

html.dark-mode .tmm-x:hover,
html.dark-mode .tmm-x:focus-visible,
body.dark-mode .tmm-x:hover,
body.dark-mode .tmm-x:focus-visible,
html.dark-mode .tmm-btn.ghost:hover,
body.dark-mode .tmm-btn.ghost:hover {
  background: rgba(148, 163, 184, .12);
}

html.dark-mode .tmm-input,
body.dark-mode .tmm-input {
  background: rgba(15, 23, 42, .72);
}

@media (max-width: 520px) {
  .tmm-backdrop {
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
  }

  .tmm,
  .tmm.sm,
  .tmm.md,
  .tmm.lg,
  .tmm.xl {
    width: 100%;
    max-height: min(88vh, calc(100vh - 24px));
    border-radius: 16px 16px 12px 12px;
    transform: translateY(18px);
  }

  .tmm-head {
    min-height: 68px;
    padding: 16px 14px 13px 16px;
  }

  .tmm-body {
    padding: 6px 16px 16px;
  }

  .tmm-grid.two {
    grid-template-columns: 1fr;
  }

  .tmm-foot {
    padding: 12px 16px 16px;
    flex-wrap: wrap;
  }

  .tmm-foot .tmm-btn {
    flex: 1 1 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmm-backdrop,
  .tmm {
    transition: none !important;
  }
}

@media print {
  .tmm-backdrop {
    display: none !important;
  }
}


/* ===== css/toast.css ===== */
/* =============================================================
   Trendmetrik — Global Toast Bildirim Sistemi (tmToast)
   Port: PAGE DESIGN (3)/styles/toast.css  → app static.
   Token bridge: mockup --surface/--line/--ink/--primary... token'larını
   reponun gerçek --tmv2-* / --color-* token'larına bağlar; böylece
   dark/light app genelinde otomatik çalışır (hex hardcode YOK).
   API: window.tmToast.success/error/warning/info/loading(title,message,opts)
   Varsayılan konum: TOP-CENTER (kullanıcı talebi).
   ============================================================= */

/* ---------- token bridge (mockup → repo tokens) ---------- */
.tmt-region,
.tmt {
  --tmt-surface: var(--tmv2-surface, #ffffff);
  --tmt-surface-2: var(--tmv2-surface-2, #f8fafc);
  --tmt-line: var(--tmv2-line, #e7ebf1);
  --tmt-line-strong: var(--tmv2-border-strong, #dbe5ef);
  --tmt-ink: var(--tmv2-ink, #0f172a);
  --tmt-ink-2: var(--tmv2-ink-2, #1e293b);
  --tmt-muted: var(--tmv2-text-muted, #64748b);
  --tmt-muted-2: var(--tmv2-mute, #94a3b8);
  --tmt-primary: var(--color-primary, #0175e4);
  --tmt-primary-soft: var(--color-primary-soft, #e8f3ff);
  --tmt-success: var(--tmv2-success, #16a34a);
  --tmt-success-soft: var(--tmv2-success-soft, #dcfce7);
  --tmt-danger: var(--tmv2-danger, #dc2626);
  --tmt-danger-soft: var(--tmv2-danger-soft, #fee2e2);
  --tmt-warning: var(--tmv2-warning, #f59e0b);
  --tmt-warning-soft: var(--tmv2-warning-soft, #fef3c7);
  --tmt-ff-sans: var(--tmv2-ff-sans, "Inter", sans-serif);
  --tmt-ff-mono: var(--tmv2-ff-mono, "JetBrains Mono", monospace);
}

/* MODAL POLICY (PR-G1b): --tm-z-toast (1080) > --tm-z-modal (1055) >
   --tm-z-modal-backdrop (1050) → toast modal açıkken de görünür/etkileşilebilir
   kalır (modal aksiyonu sonucu bildirimi kaybolmaz). Ayrı modal-toast katmanı
   gerekmez; pointer-events region'da none, sadece toast kartında auto → modal
   arkası tıklanabilirliği bozulmaz. Toast top-center header altında oturur,
   modal başlığıyla nadiren çakışır; çakışırsa kullanıcı kapatabilir/sürükleyebilir. */
.tmt-region {
  /* PR-G1b: vertical offset = header altı; default token 56px (base.html JS
     gerçek header yüksekliğini --tm-header-h'e senkronlar). Kenar boşluğu için
     +14px. left/right/bottom değerleri data-pos'a göre aşağıda set edilir. */
  --tmt-edge: 14px;
  --tmt-top: calc(var(--tm-header-h, 56px) + var(--tmt-edge) + env(safe-area-inset-top, 0px));
  position: fixed;
  z-index: var(--tm-z-toast, 9999);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* padding artık konum offset'ini taşımıyor (top/left/right/transform taşıyor).
     Sadece dahili nefes; safe-area yatayda korunur. */
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  pointer-events: none;
  /* PR-G1b spec: desktop min(420px, 100vw-32px) — okunabilir genişlik. */
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - var(--tmt-top) - 16px);
  overflow: hidden;
  box-sizing: border-box;
}
.tmt-region[data-pos="top-right"]     { top: var(--tmt-top); right: var(--tmt-edge); align-items: flex-end; }
.tmt-region[data-pos="top-left"]      { top: var(--tmt-top); left: var(--tmt-edge);  align-items: flex-start; }
.tmt-region[data-pos="bottom-right"]  { bottom: var(--tmt-edge); right: var(--tmt-edge); align-items: flex-end; flex-direction: column-reverse; }
.tmt-region[data-pos="bottom-left"]   { bottom: var(--tmt-edge); left: var(--tmt-edge);  align-items: flex-start; flex-direction: column-reverse; }
/* TRUE viewport top-center: left:50% + translateX(-50%) sabit genişlikli region'ı
   tam ortalar (kenar/scrollbar drift yok, right: kullanılmaz). */
.tmt-region[data-pos="top-center"]    { top: var(--tmt-top); left: 50%; right: auto; transform: translateX(-50%); align-items: center; }
.tmt-region[data-pos="bottom-center"] { bottom: var(--tmt-edge); left: 50%; right: auto; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

/* Mobile: tam genişlik (kenar 12px), yine ortalı kalır. */
@media (max-width: 640px) {
  .tmt-region {
    --tmt-edge: 12px;
    width: calc(100vw - 24px);
  }
}

/* ---------- toast shell ---------- */
.tmt {
  pointer-events: auto;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  background: var(--tmt-surface);
  border: 1px solid var(--tmt-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 30px -12px rgba(15, 23, 42, 0.28);
  padding: 13px 14px 13px 15px;
  overflow: hidden;
  transform-origin: center;
  will-change: transform, opacity;
  font-family: var(--tmt-ff-sans);
}
/* accent rail on the left */
.tmt::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--tmt-accent, var(--tmt-primary));
}

/* ---------- icon tile ---------- */
.tmt__icon {
  grid-column: 1; grid-row: 1;
  width: 34px; height: 34px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tmt-soft, var(--tmt-primary-soft));
  color: var(--tmt-accent, var(--tmt-primary));
  flex-shrink: 0;
}
.tmt__icon [data-lucide] { width: 18px; height: 18px; stroke-width: 2.2; }
.tmt__icon svg { width: 18px; height: 18px; }
.tmt__icon .tmt-spin { animation: tmt-spin .8s linear infinite; }
@keyframes tmt-spin { to { transform: rotate(360deg); } }

/* ---------- text ---------- */
.tmt__body { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 1px; }
.tmt__title {
  font-family: var(--tmt-ff-sans);
  font-size: 13px; font-weight: 700;
  color: var(--tmt-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.tmt__msg {
  font-family: var(--tmt-ff-sans);
  font-size: 12px; font-weight: 400;
  color: var(--tmt-muted);
  line-height: 1.45;
  margin-top: 2px;
  word-break: break-word;
}
.tmt__msg b, .tmt__msg strong { color: var(--tmt-ink-2); font-weight: 600; }
.tmt__msg .tmt-num { font-family: var(--tmt-ff-mono); font-weight: 600; color: var(--tmt-ink-2); }

/* ---------- close ---------- */
.tmt__close {
  grid-column: 3; grid-row: 1;
  width: 26px; height: 26px;
  border: 0; background: transparent;
  border-radius: 6px;
  color: var(--tmt-muted-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.tmt__close:hover,
.tmt__close:focus-visible { background: var(--tmt-surface-2); color: var(--tmt-ink); outline: none; }
.tmt__close [data-lucide] { width: 15px; height: 15px; }
.tmt__close svg { width: 15px; height: 15px; }

/* ---------- actions row ---------- */
.tmt__actions {
  grid-column: 2 / -1; grid-row: 2;
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.tmt__btn {
  font-family: var(--tmt-ff-sans);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--tmt-line);
  background: var(--tmt-surface);
  color: var(--tmt-ink-2);
  cursor: pointer;
  transition: all .15s;
}
.tmt__btn:hover { border-color: var(--tmt-line-strong); background: var(--tmt-surface-2); }
.tmt__btn:focus-visible { outline: 2px solid var(--tmt-accent, var(--tmt-primary)); outline-offset: 1px; }
.tmt__btn--primary {
  border-color: transparent;
  background: var(--tmt-accent, var(--tmt-primary));
  color: #fff;
}
.tmt__btn--primary:hover { filter: brightness(0.94); background: var(--tmt-accent, var(--tmt-primary)); color: #fff; }

/* ---------- progress bar ---------- */
.tmt__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--tmt-accent, var(--tmt-primary));
  opacity: 0.55;
  transform-origin: left center;
  transform: scaleX(1);
}
.tmt--running .tmt__progress { transition: transform linear; transform: scaleX(0); }

/* ---------- type tints ---------- */
.tmt[data-type="success"] { --tmt-accent: var(--tmt-success); --tmt-soft: var(--tmt-success-soft); }
.tmt[data-type="error"]   { --tmt-accent: var(--tmt-danger);  --tmt-soft: var(--tmt-danger-soft); }
.tmt[data-type="warning"] { --tmt-accent: var(--tmt-warning); --tmt-soft: var(--tmt-warning-soft); }
.tmt[data-type="info"]    { --tmt-accent: var(--tmt-primary); --tmt-soft: var(--tmt-primary-soft); }
.tmt[data-type="loading"] { --tmt-accent: var(--tmt-primary); --tmt-soft: var(--tmt-primary-soft); }
/* loading has no progress fill */
.tmt[data-type="loading"] .tmt__progress { display: none; }

/* ---------- enter / exit animations ---------- */
.tmt { animation: tmt-in .42s cubic-bezier(.16, 1, .3, 1); }
.tmt--out { animation: tmt-out .3s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes tmt-in {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes tmt-out {
  to { opacity: 0; transform: translateX(24px) scale(.96); }
}
/* left-anchored regions slide from the left */
.tmt-region[data-pos$="left"] .tmt { animation-name: tmt-in-left; }
.tmt-region[data-pos$="left"] .tmt.tmt--out { animation-name: tmt-out-left; }
@keyframes tmt-in-left  { from { opacity: 0; transform: translateX(-24px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes tmt-out-left { to { opacity: 0; transform: translateX(-24px) scale(.96); } }
/* center regions slide from the top */
.tmt-region[data-pos*="center"] .tmt { animation-name: tmt-in-top; }
.tmt-region[data-pos*="center"] .tmt.tmt--out { animation-name: tmt-out-top; }
@keyframes tmt-in-top  { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tmt-out-top { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* ---------- dark mode (tokens already remap; this tunes the rail shadow) ---------- */
html.dark-mode .tmt,
body.dark-mode .tmt {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .tmt, .tmt--out { animation-duration: .001ms; }
  .tmt--running .tmt__progress { transition: none; }
  .tmt__icon .tmt-spin { animation-duration: 1.2s; }
}