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

/* ===== css/header-brand.css ===== */
/**
 * Header: logo yanı sayfa adı — Bootstrap / Tailwind / Baklava link renkleri
 * gömülü header <style> üzerine yazabiliyor; bu dosya base.html'de dark-mode'dan sonra yüklenir.
 */
html:not(.dark-mode) .header-bar .header-logo-link {
  color: #0f172a !important;
  text-decoration: none !important;
}

html:not(.dark-mode) .header-bar .header-logo-text,
html:not(.dark-mode) .header-bar #headerPageName {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html:not(.dark-mode) .header-bar .header-logo-link:hover {
  background: rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark-mode) .header-bar .header-logo-link:hover .header-logo-text,
html:not(.dark-mode) .header-bar .header-logo-link:hover #headerPageName {
  color: var(--color-primary-hover, #0163c2) !important;
}

html.dark-mode .header-bar .header-logo-text,
html.dark-mode .header-bar #headerPageName {
  color: var(--tm-text-primary) !important;
}

html.dark-mode .header-bar .header-logo-link:hover .header-logo-text,
html.dark-mode .header-bar .header-logo-link:hover #headerPageName {
  color: var(--tm-header-logo-hover) !important;
}


/* ===== css/app-layout.css ===== */
/**
 * Tek panel düzeni:
 * .app-layout > main#app-main > .page-shell > .page-shell__inner > {% block content %}
 * Ortalama ve max-width yalnızca .page-shell__inner; kabuk yüzeyi .page-shell.
 */

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
  /* Dekorun (bg-shapes z-index 0) üstünde kalsın. Bootstrap modal + backdrop body’de ~1050;
     modal markup’ı bu kabın içinde kalırsa stacking yüzünden backdrop tüm sayfayı (modal dahil) kilitler
     — tabbed dashboard’da portal script ile body’e taşınıyor. */
  z-index: 2;
  box-sizing: border-box;
}

/* Ana sütun: cam kabuk .page-shell’de; main şeffaf taşıyıcı */
main#mainContent.app-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* global.css .main-content padding’i: yatay/alt burada; üst base’te (header) */
main#mainContent.app-main:not(.no-sidebar) {
  /* Sol: sidebar rail + gap. Sağ: aynı değer — dar sağ padding içeriği viewport ortasına göre sağa iter */
  padding-left: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-right: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-bottom: calc(var(--tm-layout-gap) + 2px) !important;
}

main#mainContent.app-main.no-sidebar {
  padding-left: var(--tm-layout-gap) !important;
  padding-right: var(--tm-layout-gap-right, 16px) !important;
  padding-bottom: calc(var(--tm-layout-gap) + 2px) !important;
}

/* --- Sayfa kabuğu (glass) — tüm panel içeriği --- */
.page-shell {
  position: relative;
  /* overflow:hidden sticky’yi kırar; yatay taşmayı kes, dikeyde görünür bırak */
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  width: 100%;
  max-width: min(100%, var(--tm-page-shell-column-max));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-height: calc(100vh - 28px);
  padding: var(--tm-page-pad);
  border-radius: var(--tm-page-shell-radius, 28px);
  background: var(--tm-page-shell-bg) !important;
  /* backdrop-filter kaldırıldı: her scroll/repaint’te tüm alt pikseli yeniden örnekler */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--tm-page-shell-border);
  box-shadow: var(--tm-page-shell-shadow);
}

.page-shell__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--tm-page-shell-inner-max, 1680px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Doğrudan inner altında: yalnızca dikey ritim; genişlik/padding shell’de */
.page-shell__inner > .page-stack {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* Dikey ritim (isteğe bağlı sarmalayıcı) */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tm-section-gap);
  width: 100%;
  box-sizing: border-box;
}

/* Bootstrap kökü doğrudan inner içindeyse çift gutter olmasın */
.page-shell__inner > .container,
.page-shell__inner > .container-fluid {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sayfa kök sınıfları: dış kutu shell; burada yatay/max-width/arka plan sıfırlanır */
.page-shell__inner .page-container,
.page-shell__inner .dashboard-wrapper,
.page-shell__inner .dashboard-page,
.page-shell__inner .content-wrapper,
.page-shell__inner .order-profit-page,
.page-shell__inner .order-analysis-page,
.page-shell__inner .wide-container,
.page-shell__inner .xml-page,
.page-shell__inner .xml-sources-page,
.page-shell__inner .xml-upload-page,
.page-shell__inner .module-page,
.page-shell__inner .brand-studio-page,
.page-shell__inner .buybox-control-module,
.page-shell__inner .app-container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* Hesap / mağaza sayfaları — aynı inner; dış wrapper şeffaf */
.page-shell__inner .account-page-wrapper,
.page-shell__inner .profile-page-wrapper,
.page-shell__inner .subscription-page-wrapper,
.page-shell__inner .shipping-page-wrapper,
.page-shell__inner .security-page-wrapper,
.page-shell__inner .notifications-page-wrapper,
.page-shell__inner .balance-page-wrapper,
.page-shell__inner .integration-page-wrapper,
.page-shell__inner .cart-page-wrapper,
.page-shell__inner .favorites-page-wrapper,
.page-shell__inner .orders-page-wrapper,
.page-shell__inner #pricing-page,
.page-shell__inner .pricing-page,
.page-shell__inner .xml-pricing-page {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* XML ekleme: iç içe Bootstrap container ile dar sütun / çift gutter oluşmasın */
.page-shell__inner .xml-upload-page > .container,
.page-shell__inner .xml-upload-page > .container-fluid,
.page-shell__inner .xml-upload-page .container,
.page-shell__inner .xml-upload-page .container-fluid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-sizing: border-box;
}

/* İç bölümler: kabuktan bir kademe daha opak (isteğe bağlı sınıf) */
.page-shell__inner .section-card,
.page-shell__inner .tm-section-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #dbe5ef);
  border-radius: var(--radius-token-lg, 18px);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(15, 23, 42, 0.06));
  box-sizing: border-box;
}

html.dark-mode .page-shell__inner .section-card,
html.dark-mode .page-shell__inner .tm-section-card {
  background: var(--color-surface, #1e293b);
  border-color: var(--color-border, #334155);
  box-shadow: var(--shadow-card, 0 6px 20px rgba(0, 0, 0, 0.2));
}

/* Üst site header — main ile aynı yatay şerit; .page-shell ile aynı sütun genişliği (ortada) */
/* Legacy: #tmv2App v2 shell’de üst şerit tm-header-v2; çift rail padding olmasın */
body:not(.tmv2-body, #tm-yok):is(.tmh-c6fd76e8, :not(*) main#mainContent.app-main:not(.no-sidebar)) .header-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-left: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-right: var(--tm-main-outer-pad-x-with-sidebar) !important;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

body:not(.tmv2-body, #tm-yok):is(.tmh-471a5e73, :not(*) main#mainContent.app-main.no-sidebar) .header-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-left: var(--tm-layout-gap) !important;
  padding-right: var(--tm-layout-gap-right, 16px) !important;
  padding-top: 12px !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

body:not(.tmv2-body, #tm-yok):is(.tmh-31afa602, :not(*) main#mainContent.app-main) .header-bar {
  flex-shrink: 0 !important;
  width: min(100%, var(--tm-page-shell-column-max)) !important;
  max-width: min(100%, var(--tm-page-shell-column-max)) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  border-radius: var(--tm-page-shell-radius, 28px);
}

@media (max-width: 1024px) {
  main#mainContent.app-main:not(.no-sidebar) {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 10px !important;
  }

  body:not(.tmv2-body, #tm-yok):is(.tmh-c6fd76e8, :not(*) main#mainContent.app-main:not(.no-sidebar)) .header-wrapper {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 768px) {
  main#mainContent.app-main:not(.no-sidebar) {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 8px !important;
    padding-bottom: 10px !important;
  }

  main#mainContent.app-main.no-sidebar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body:not(.tmv2-body, #tm-yok):is(.tmh-c6fd76e8, :not(*) main#mainContent.app-main:not(.no-sidebar)) .header-wrapper,
  body:not(.tmv2-body, #tm-yok):is(.tmh-471a5e73, :not(*) main#mainContent.app-main.no-sidebar) .header-wrapper {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 8px !important;
  }

  .page-shell {
    border-radius: 16px;
    padding: max(12px, env(safe-area-inset-left, 12px));
  }
}

@media (prefers-contrast: more) {
  .page-shell {
    background: var(--tm-bg-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--tm-border-color) !important;
    box-shadow: none !important;
  }

}


/* ===== css/base-legacy-layout.css ===== */
/**
 * Base şablondan taşınan layout kuralları (eski tam genişlik + sol çekmece).
 *
 * Panel v2: #tmv2SidebarRoot varken bu dosyadaki kurallar UYGULANMAZ — tm-shell-v2,
 * tm-header-v2, tm-v2-overrides layout’u belirler.
 *
 * Scope: body:not(:has(#tmv2SidebarRoot)) — hide_base_sidebar veya tmv2 dışı şablonlar.
 */

/* Dikey boşluk; yatay gutter app-layout.css */
body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .main-content:not(.account-page-content):not([class*="account"]):not([class*="profile"]):not([class*="subscription"]):not([class*="shipping"]):not([class*="security"]):not([class*="notifications"]):not([class*="balance"]):not([class*="integration"]):not([class*="cart"]):not([class*="favorites"]):not([class*="orders"]) {
  padding-top: 120px;
  width: 100%;
  box-sizing: border-box;
  transition: margin-left 0.3s ease;
}

body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .main-content.no-sidebar {
  margin-left: 0;
}

@media (max-width: 1024px) {
  body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .main-content {
    margin-left: 0;
  }
}

body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) nav.w-full.sticky {
  position: fixed !important;
  top: 48px !important;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  z-index: var(--tm-z-header-sticky);
}

body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  z-index: var(--tm-z-sidebar) !important;
  height: 100vh !important;
  width: 280px;
}

body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .main-content:not(.account-page-content):not([class*="account"]):not([class*="profile"]):not([class*="subscription"]):not([class*="shipping"]):not([class*="security"]):not([class*="notifications"]):not([class*="balance"]):not([class*="integration"]):not([class*="cart"]):not([class*="favorites"]):not([class*="orders"]) {
  padding-top: 120px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: margin-left 0.3s;
}

body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .sidebar.collapsed ~ .main-content,
body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .main-content.expanded {
  margin-left: 0 !important;
}

body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) main#mainContent.main-content:not(.account-page-content):not([class*="account"]):not([class*="profile"]):not([class*="subscription"]):not([class*="shipping"]):not([class*="security"]):not([class*="notifications"]):not([class*="balance"]):not([class*="integration"]):not([class*="cart"]):not([class*="favorites"]):not([class*="orders"]) {
  padding-top: 88px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) nav.w-full.sticky {
    top: 48px !important;
  }

  body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .sidebar {
    width: 100%;
    max-width: 100%;
  }

  body:is(.tm-yan-yok, :not(.tmv2-body), #tm-yok) .main-content:not(.account-page-content):not([class*="account"]):not([class*="profile"]):not([class*="subscription"]):not([class*="shipping"]):not([class*="security"]):not([class*="notifications"]):not([class*="balance"]):not([class*="integration"]):not([class*="cart"]):not([class*="favorites"]):not([class*="orders"]) {
    padding-top: calc(56px + 3vw) !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }
}


/* ===== css/responsive-foundation.css ===== */
/* =====================================================================
   RESPONSIVE FOUNDATION — 2026-08-06 (feat/responsive-architecture)
   Sistemsel yapı katmanı. base.html + tüm layout kabuklarında BİR KEZ yüklenir.
   Amaç: sayfa dosyalarındaki ad-hoc padding / max-width / overflow yamalarını
   ortak, öngörülebilir kurallarla değiştirmek.
   Rapor: docs/responsive-audit.md  (KN-1 container, KN-2 spacing, KN-3 min-width:0)

   ADIM 1 kapsamı: box-sizing, min-width:0 guard, overflow-wrap, dvh, safe-area,
   ve Container/PageShell'in (ADIM 2) tüketeceği gutter DESIGN TOKEN'ları.
   Burada sayfa-özel kural YOKTUR; yalnız global sistem.
   ===================================================================== */

/* ---- 1) box-sizing her yerde (standalone sayfalar Bootstrap yüklemese de) ---- */
*, *::before, *::after { box-sizing: border-box; }

/* ---- 2) DESIGN TOKENS — tek gutter/max-width ölçeği (KN-1/KN-2) ----
   Sayfalar bir daha ham px yazmayacak; Container bu token'ları kullanacak. */
:root {
  /* responsive gutter: mobil 16 → sm 24 → lg 32 */
  --tm-gutter: 1rem;
  --tm-container-max: 1280px;

  /* dvh (mobil adres-çubuğu-güvenli tam yükseklik) */
  --tm-vh-full: 100vh;

  /* çentik / safe-area insets */
  --tm-safe-top: env(safe-area-inset-top, 0px);
  --tm-safe-right: env(safe-area-inset-right, 0px);
  --tm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tm-safe-left: env(safe-area-inset-left, 0px);
}
@media (min-width: 640px)  { :root { --tm-gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --tm-gutter: 2rem; } }
@supports (height: 100dvh)  { :root { --tm-vh-full: 100dvh; } }

/* ---- 3) min-width:0 GUARD (KN-3) ----
   Flex/grid çocukları varsayılan min-width:auto ile içerik-genişliğinde kalır;
   uzun kırılmayan metin (TL, e-posta, barkod, URL) hücreyi viewport'tan taşırır.
   Bootstrap grid + yaygın flex/grid container'larının doğrudan çocuklarında sıfırla.
   Düşük-specificity → sayfa niyetli genişliklerini bozmaz, yalnız taşma kilidini açar. */
:where(.row > *, [class*="col-"], .d-flex > *, .tm-flex > *, .tm-grid > *) { min-width: 0; }

/* ---- 4) overflow-wrap guard'ı ---- */
.tm-wrap { overflow-wrap: anywhere; word-break: break-word; }

/* ---- 5) dvh + safe-area UTILITY'leri (sayfalar 100vh yerine bunları kullanır) ---- */
.tm-minh-screen { min-height: var(--tm-vh-full); }
.tm-h-screen    { height: var(--tm-vh-full); }
.tm-safe-x {
  padding-left:  max(var(--tm-gutter), var(--tm-safe-left));
  padding-right: max(var(--tm-gutter), var(--tm-safe-right));
}
.tm-safe-b { padding-bottom: max(0px, var(--tm-safe-bottom)); }
.tm-safe-t { padding-top: max(0px, var(--tm-safe-top)); }


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ===== css/kurulum-checklist.css ===== */
/* KURULUM CHECKLIST — header düğmesi + açılır liste / mobil alt panel.
   Ürün sahibi kararı 2026-09-28. Şablon: templates/includes/_kurulum_checklist.html */

.tk-wrap { position: relative; display: inline-flex; }

.tk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 700; line-height: 1.2;
  background: #2563EB; color: #fff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, .35);
  white-space: nowrap;
}
.tk-btn:hover { background: #1D4ED8; }
.tk-btn:focus-visible { outline: 2px solid #1E3A8A; outline-offset: 2px; }

/* İlerleme halkası — yüzde şablondan `--tk-yuzde` ile gelir. */
.tk-ring {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  background: conic-gradient(#fff var(--tk-yuzde, 0%), rgba(255, 255, 255, .35) 0);
}

/* Kurulum bitene kadar dikkat çeksin (ürün sahibi isteği). Hareket
   hassasiyeti olan kullanıcıda nabız KAPANIR. */
@keyframes tk-nabiz {
  0%, 100% { box-shadow: 0 2px 10px rgba(37, 99, 235, .35); }
  50%      { box-shadow: 0 2px 18px rgba(37, 99, 235, .85); }
}
.tk-btn { animation: tk-nabiz 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tk-btn { animation: none; } }

.tk-panel {
  position: absolute; z-index: 1080; top: calc(100% + 10px); right: 0;
  width: 380px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #E2E8F0; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
  padding: 8px;
}
.tk-panel[hidden] { display: none; }

.tk-panel__head { position: relative; padding: 8px 12px 10px; }
.tk-panel__head h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: #0F172A; }
.tk-panel__head p  { margin: 0; font-size: 12px; color: #64748B; }
.tk-kapat {
  position: absolute; top: 2px; right: 4px;
  width: 28px; height: 28px;           /* dokunma hedefi */
  border: 0; background: transparent; color: #94A3B8;
  font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.tk-kapat:hover { background: #F1F5F9; color: #475569; }

.tk-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.tk-row:hover { background: #F8FAFC; }
.tk-row__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-t { font-size: 13.5px; font-weight: 600; color: #0F172A; line-height: 1.35; }
.tk-d { font-size: 12px; color: #64748B; line-height: 1.35; }
.tk-row[data-d="tamam"] .tk-t { color: #64748B; text-decoration: line-through; }
.tk-row[data-d="uyari"] .tk-d { color: #B45309; font-weight: 600; }
.tk-row[data-d="suruyor"] .tk-d { color: #1D4ED8; font-weight: 600; }

.tk-ic {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.tk-ic--tamam    { background: #16A34A; color: #fff; }
.tk-ic--bekliyor { background: #fff; border: 2px solid #CBD5E1; }
.tk-ic--suruyor  { background: #DBEAFE; border: 2px solid #2563EB; }
.tk-ic--uyari    { background: #F59E0B; color: #fff; }

.tk-sep { height: 1px; background: #E2E8F0; margin: 6px 12px; }
.tk-grip { display: none; }

/* ── Mobil: alttan açılan panel ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .tk-btn { padding: 7px 12px; }
  .tk-btn__txt { font-size: 13px; }
  .tk-panel {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: auto; max-width: none;
    border-radius: 20px 20px 0 0; border: 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    padding: 6px 4px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 78vh; overflow-y: auto;
  }
  .tk-grip {
    display: block; width: 44px; height: 4px; border-radius: 2px;
    background: #CBD5E1; margin: 6px auto 4px;
  }
  .tk-row { padding: 12px; }      /* dokunma hedefi ≥44px */
}

/* ── Koyu tema ────────────────────────────────────────────────────────── */
html.dark .tk-panel,
body.dark-mode .tk-panel { background: #0F172A; border-color: #1E293B; }
html.dark .tk-panel__head h4,
body.dark-mode .tk-panel__head h4,
html.dark .tk-t,
body.dark-mode .tk-t { color: #E2E8F0; }
html.dark .tk-row:hover,
body.dark-mode .tk-row:hover { background: #1E293B; }
html.dark .tk-sep,
body.dark-mode .tk-sep { background: #1E293B; }
html.dark .tk-ic--bekliyor,
body.dark-mode .tk-ic--bekliyor { background: transparent; border-color: #475569; }


/* Dar ekran: düğme sayfa başlığını kırpıyordu (ölçüldü 390px — başlık
   "Genel B..." oluyordu). 480px altında etiket yalnız sayaca iner;
   erişilebilir ad `aria-label`da tam metinle durur. */
@media (max-width: 479.98px) {
  .tk-btn__txt { font-size: 0; }
  .tk-btn__txt::after {
    content: attr(data-kisa);
    font-size: 13px;
  }
}

/* ── 2026-10-13: görev listesi — sıradaki görev vurgusu ───────────────────── */
.tk-row[data-sirada="1"] { background: #EFF6FF; }
.tk-row[data-sirada="1"]:hover { background: #DBEAFE; }
.tk-row[data-sirada="1"] .tk-ic--bekliyor { border-color: #2563EB; color: #1D4ED8; background: #DBEAFE; font-size: 12px; }
.tk-sirada {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: #2563EB; color: #fff; vertical-align: 1px;
}
html.dark .tk-row[data-sirada="1"],
body.dark-mode .tk-row[data-sirada="1"] { background: #172554; }