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

/* ===== css/ds/ds-journey.css ===== */
/* =================================================================
   TRENDMETRIK DESIGN SYSTEM — KURULUM YOLCULUĞU ŞERİDİ (PR-2, 2026-09-14)
   templates/includes/_setup_journey_band.html · [data-tm-journey]

   SCOPE — unlike ds-shell.css (body.tm-ds-shell, ~3 routes only), this band
   renders on EVERY seller-panel page (docs/onboarding-plan-2026-09-14.md §1:
   "tüm satıcı-paneli sayfalarında"), most of which never carry `.tm-ds` on
   <main> or `tm-ds-shell` on <body>. The DS guard (tests/test_ui_design_system_
   guard.py) requires DS-namespaced radius token NAMES (--tm-radius-control/
   -card/-overlay) — those are only DECLARED inside `.tm-ds {}` (ds-tokens.css)
   or the `body.tm-ds-shell {}` mirror, so a plain page here would see them as
   unset. Fix: mirror the two radius names locally on [data-tm-journey] itself,
   pointing at the ALREADY-GLOBAL v2 primitives (static/css/v2/tokens.css) —
   identical values `.tm-ds` uses, same trick ds-shell.css documents for the
   shell. Everything else below (surface/border/text/accent/shadow/spacing)
   IS already global (:root, dark-mode aware) — used as-is, no mirror needed.
   ================================================================= */

[data-tm-journey] {
  --tm-radius-control: var(--tm-radius-md);
  --tm-radius-card: var(--tm-radius-xl);

  display: flex;
  flex-direction: column;
  gap: var(--tm-space-2);
  padding: var(--tm-space-3) var(--tm-space-4);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-card);
  box-shadow: var(--tm-shadow-card);
}

.tm-journey-band__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tm-space-3);
}

.tm-journey-band__steps {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
}

.tm-journey-band__dot {
  display: inline-block;
  width: var(--tm-space-2);
  height: var(--tm-space-2);
  border-radius: var(--tm-radius-full);
  background: var(--tm-border);
}

.tm-journey-band__dot--done {
  background: var(--tm-ok);
}

.tm-journey-band__dot--current {
  background: var(--tm-accent-500);
  outline: 2px solid var(--tm-accent-50);
  outline-offset: 1px;
}

.tm-journey-band__next {
  font-size: var(--tm-type-caption);
  line-height: var(--tm-type-caption-lh);
  color: var(--tm-text-secondary);
}

.tm-journey-band__next strong {
  color: var(--tm-text-primary);
  font-weight: var(--tm-weight-semibold);
}

/* [data-tm-journey] prefix (not bare .tm-journey-band__cta): a <button> inside
   html.dark-mode is reset by a global `html.dark-mode button { background-color:
   unset; border-color: unset; color: unset; }` (static/css/dark-mode.css:5046,
   NOT !important but 2 type-selectors -> higher specificity than a single class).
   Prefixing with the root's data-attribute selector (0,2,0) beats that (0,1,2)
   on the classes column before type-count is even compared — no !important
   needed, still guard-clean. */
[data-tm-journey] .tm-journey-band__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  padding: var(--tm-space-1) var(--tm-space-3);
  border: 0;
  border-radius: var(--tm-radius-control);
  background: var(--tm-accent-500);
  color: var(--tm-text-on-brand);
  font-size: var(--tm-type-caption);
  font-weight: var(--tm-weight-semibold);
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

[data-tm-journey] .tm-journey-band__cta:hover {
  background: var(--tm-accent-600);
}

.tm-journey-band__cta svg,
.tm-journey-band__toggle svg {
  width: var(--tm-space-4);
  height: var(--tm-space-4);
}

.tm-journey-band__done-icon {
  color: var(--tm-ok);
  display: inline-flex;
}

.tm-journey-band__done-text {
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-text-primary);
}

/* [data-tm-journey] prefix: same html.dark-mode button reset as .tm-journey-band__cta above. */
[data-tm-journey] .tm-journey-band__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--tm-space-1);
  border: 0;
  background: transparent;
  border-radius: var(--tm-radius-control);
  color: var(--tm-text-muted);
  cursor: pointer;
}

[data-tm-journey] .tm-journey-band__toggle:hover {
  background: var(--tm-surface-sunken);
}

/* Collapsed-label: only element visible in the collapsed row besides the
   toggle. Server renders BOTH the full row and this label always (no
   JS-inserted markup, no height recalculation -> no CLS); CSS just swaps
   which one is visible based on the server-rendered --collapsed modifier. */
.tm-journey-band__collapsed-label {
  display: none;
  font-size: var(--tm-type-caption);
  color: var(--tm-text-secondary);
}

.tm-journey-band--collapsed .tm-journey-band__steps,
.tm-journey-band--collapsed .tm-journey-band__next,
.tm-journey-band--collapsed .tm-journey-band__cta,
.tm-journey-band--collapsed .tm-journey-band__done-icon,
.tm-journey-band--collapsed .tm-journey-band__done-text {
  display: none;
}

.tm-journey-band--collapsed .tm-journey-band__collapsed-label {
  display: inline;
}

.tm-journey-band--collapsed {
  padding-top: var(--tm-space-2);
  padding-bottom: var(--tm-space-2);
}

.tm-journey-band__tasks:empty {
  display: none;
}

/* PR-5 (docs/onboarding-plan-2026-09-14.md §2) — eksik-görev satırı. */
.tm-journey-band--collapsed .tm-journey-band__tasks {
  display: none;
}

.tm-journey-band__tasks-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tm-space-2);
}

/* [data-tm-journey] prefix: same html.dark-mode button reset as
   .tm-journey-band__cta/.tm-journey-band__toggle above — severity color
   would otherwise be forced to #60a5fa by html.dark-mode a:not(...). */
[data-tm-journey] .tm-journey-band__task {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  padding: var(--tm-space-1) var(--tm-space-2);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-control);
  background: var(--tm-surface-sunken);
  color: var(--tm-text-secondary);
  font-size: var(--tm-type-caption);
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

[data-tm-journey] .tm-journey-band__task:hover {
  background: var(--tm-surface);
}

/* Global v2 primitives (--tm-warn/--tm-bad, static/css/v2/tokens.css), NOT the
   DS-scoped --tm-warning-fg/--tm-danger-fg (ds-tokens.css) which only resolve
   inside .tm-ds — same reasoning as the radius-token mirror at the top of this
   file: this band renders on plain (non-.tm-ds) pages too. */
[data-tm-journey] .tm-journey-band__task--warning {
  border-color: var(--tm-warn-border);
  color: var(--tm-warn);
}

[data-tm-journey] .tm-journey-band__task--critical {
  border-color: var(--tm-bad-border);
  color: var(--tm-bad);
}

.tm-journey-band__task-more {
  font-size: var(--tm-type-caption);
  color: var(--tm-text-muted);
}


/* ── Adım kartı (onboarding v2, 2026-09-21) — sıradaki adımın sayfasında anlatıcı ── */
.tm-journey-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid var(--tm-border, #e5e7eb);
  border-left: 4px solid var(--tm-primary, #2563eb);
  border-radius: var(--tm-radius-lg, 12px);
  background: var(--tm-surface, #fff);
  box-shadow: var(--tm-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.tm-journey-card__step { display: flex; flex-direction: column; gap: 8px; min-width: 96px; }
.tm-journey-card__badge {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--tm-primary, #2563eb); background: var(--tm-primary-soft, #eff6ff);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.tm-journey-card__progress { height: 6px; border-radius: 999px; background: var(--tm-border, #e5e7eb); overflow: hidden; }
.tm-journey-card__progress > span { display: block; height: 100%; background: var(--tm-primary, #2563eb); }
.tm-journey-card__title { margin: 0 0 4px; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--tm-text, #111827); }
.tm-journey-card__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tm-text-muted, #4b5563); max-width: 72ch; }
.tm-journey-card__hint { margin: 6px 0 0; font-size: 12px; color: var(--tm-text-muted, #6b7280); }
.tm-journey-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tm-journey-card__cta {
  display: inline-block; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
  color: #fff; background: var(--tm-primary, #2563eb); text-decoration: none; white-space: nowrap;
}
.tm-journey-card__cta:hover { filter: brightness(.95); color: #fff; }
.tm-journey-card__skip {
  background: none; border: 0; padding: 4px 0; font-size: 12px; color: var(--tm-text-muted, #6b7280);
  text-decoration: underline; cursor: pointer;
}
.tm-journey-card__skip:hover { color: var(--tm-text, #111827); }
@media (max-width: 992px) {
  .tm-journey-card { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
  .tm-journey-card__step { flex-direction: row; align-items: center; }
  .tm-journey-card__progress { flex: 1; }
  .tm-journey-card__actions { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 576px) {
  .tm-journey-card { margin: 0 0 12px; padding: 12px; border-radius: 12px; }
  .tm-journey-card__title { font-size: 16px; }
  .tm-journey-card__text { font-size: 13px; }
  .tm-journey-card__cta { width: 100%; text-align: center; }
  .tm-journey-card__actions { flex-direction: column; align-items: stretch; }
}


/* ===== css/ds/ds-tutorial.css ===== */
/* Paylasilan tutorial bileseni — "Nasil calisir?" adim adim anlatim (2026-09-18).
 *
 * KOKEN: katalog sayfasindaki `.cpk-tut*` bileseni (ds-catalog.css). Kullanici
 * "katalogdaki tutorial gibi olsun, yenisini yazma" dedi; bu dosya O bilesenin
 * sayfadan bagimsiz hale getirilmis kopyasidir — ayni yerlesim, ayni acilis
 * animasyonu, ayni akis-dugumleri.
 *
 * ⚠️ KOPYA BORCU (bilincli, docs/backlog.md'ye yazildi): katalog hala kendi
 * `.cpk-tut*` kurallarini kullaniyor. Iki kopyayi AYNI ANDA degistirmek yerine
 * katalogu bu bilesene tasimak dogru yol — ama bugun katalogu riske atmamak
 * icin yapilmadi. Bir sonraki katalog dokunusunda tasinmali.
 *
 * Kapsam: `.tm-ds` (DS opt-in) — DS disi sayfalarda inert.
 * Hareket butcesi (docs/ui-reference-spec.md): yalniz transform/opacity
 * animasyonu; layout ozelligi (left/top/width/height) animasyonu YOK.
 */

:is(.tm-ds, body.tm-ds-shell) .tm-tut { position: fixed; inset: 0; z-index: 2100; display: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut.is-open { display: block; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); opacity: 1; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(700px, calc(100vw - 28px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: var(--tm-space-2); overflow: hidden; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-overlay); box-shadow: var(--tm-shadow-modal); animation: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__top { position: relative; padding: var(--tm-space-4) var(--tm-space-6) 0; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__kicker { display: inline-flex; align-items: center; gap: var(--tm-space-1); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-accent-600); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__close { position: absolute; top: var(--tm-space-3); right: var(--tm-space-3); width: 32px; height: 32px; border-radius: var(--tm-radius-control); border: 1px solid var(--tm-border); background: var(--tm-ink-100); color: var(--tm-text-muted); display: grid; place-items: center; cursor: pointer; transition: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__close:hover { color: var(--tm-text-primary); }

/* R7 2026-09-23 (audit, /buybox-control/v3/ @320): dialog width min(700px,
   100vw-28px) = 292px at 320px viewport; 4 nodes at flex:0 0 auto width:78px
   already need 312px before the 3 connector lines are even counted — the
   last node was clipped by .tm-tut__dialog's own overflow:hidden. Rather than
   shrink node/icon size (label would stop being legible), let the row itself
   scroll horizontally — same "yatay kaydırma" pattern already used for wide
   data tables elsewhere in the audit. */
:is(.tm-ds, body.tm-ds-shell) .tm-tut__flow { display: flex; align-items: flex-start; padding: var(--tm-space-4) var(--tm-space-1) var(--tm-space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__node { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--tm-space-1); width: 78px; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__node-ic { position: relative; width: 40px; height: 40px; border-radius: var(--tm-radius-full); display: grid; place-items: center; background: var(--tm-ink-100); border: 2px solid var(--tm-border); color: var(--tm-text-muted); transition: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__node.is-active .tm-tut__node-ic { background: var(--tm-accent-500); border-color: var(--tm-accent-500); color: var(--tm-text-on-brand); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__node.is-done .tm-tut__node-ic { background: var(--tm-accent-50); border-color: var(--tm-accent-600); color: var(--tm-accent-600); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__node-lbl { font-size: 11px; font-weight: 500; color: var(--tm-text-muted); text-align: center; line-height: 1.25; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__node.is-active .tm-tut__node-lbl { color: var(--tm-text-primary); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__conn { flex: 1 1 auto; height: 2px; align-self: center; background: var(--tm-border); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__conn.is-done { background: var(--tm-accent-600); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__body { padding: var(--tm-space-2) var(--tm-space-6) 0; display: flex; flex-direction: column; align-items: center; gap: var(--tm-space-2); text-align: center; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz { width: 100%; max-width: 300px; padding: var(--tm-space-3); background: var(--tm-ink-100); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-control); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz svg { width: 100%; height: auto; max-height: 150px; display: block; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__stepno { font-family: var(--cpk-mono); font-size: 12px; font-weight: 500; color: var(--tm-accent-600); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__h { font-size: 18px; font-weight: 700; color: var(--tm-text-primary); margin: 0; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__d { font-size: 14px; line-height: 20px; color: var(--tm-text-secondary); max-width: 480px; margin: 0 auto; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__d b { color: var(--tm-text-primary); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-3); padding: var(--tm-space-4) var(--tm-space-6); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__skip { background: none; border: 0; color: var(--tm-text-muted); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__nav { display: flex; gap: var(--tm-space-2); }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__btn { display: inline-flex; align-items: center; gap: var(--tm-space-1); height: 36px; padding: 0 var(--tm-space-4); border-radius: var(--tm-radius-control); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid var(--tm-border); background: var(--tm-surface); color: var(--tm-text-primary); transition: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__btn--primary { background: var(--tm-accent-500); color: var(--tm-text-on-brand); border-color: transparent; box-shadow: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__btn--primary:hover { transform: none; box-shadow: none; }

:is(.tm-ds, body.tm-ds-shell) .tm-tut__btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Adim gorseli: SVG icindeki parcalar sirayla belirir ──────────────────────
   Her adim SVG'si `data-tm-tut-svg` altinda; icindeki `[data-anim]` ogeleri
   sirayla acilir. Yalniz opacity/transform — hareket butcesine uygun. */
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz { display: flex; justify-content: center; }
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz svg { width: 100%; max-width: 320px; height: auto; }
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim] {
  opacity: 0;
  transform: translateY(6px);
  animation: tmTutPart .45s ease forwards;
}
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim="1"] { animation-delay: .05s; }
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim="2"] { animation-delay: .35s; }
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim="3"] { animation-delay: .65s; }
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim="4"] { animation-delay: .95s; }
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim="5"] { animation-delay: 1.25s; }
@keyframes tmTutPart { to { opacity: 1; transform: translateY(0); } }

/* Fiyatin kademe kademe inisini anlatan ok — yalniz transform. */
:is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim-step] {
  animation: tmTutStepDown 2.4s ease-in-out infinite;
}
@keyframes tmTutStepDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

/* ⛔ Hareket hassasiyeti: kullanici azaltilmis hareket istiyorsa animasyon YOK —
   ama icerik GORUNUR kalir (opacity 0'da birakmak bilgiyi yutardi). */
@media (prefers-reduced-motion: reduce) {
  :is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim],
  :is(.tm-ds, body.tm-ds-shell) .tm-tut__viz [data-anim-step] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* "?" yeniden-acma butonu */
:is(.tm-ds, body.tm-ds-shell) .tm-tut-reopen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--tm-radius-full);
  border: 1px solid var(--tm-border, #e4e4e7);
  background: transparent; color: var(--tm-accent-fg);
  font-weight: var(--tm-weight-semibold); font-size: var(--tm-type-caption);
  cursor: pointer; line-height: 1; flex-shrink: 0;
}
:is(.tm-ds, body.tm-ds-shell) .tm-tut-reopen:hover { background: var(--tm-accent-bg); border-color: var(--tm-accent-fg); }
:is(.tm-ds, body.tm-ds-shell) .tm-tut-reopen:focus-visible { outline: 2px solid var(--tm-accent-fg); outline-offset: 2px; }


/* ===== css/ds/ds-tooltip.css ===== */
/* Paylasilan tooltip — kirpilmayan, <body> altinda tek dugum (2026-09-18).
   Gerekce ve olcum: static/js/ds/tm-tip.js dosya basligi.
   ⚠️ `.tm-ds` KAPSAMI YOK — bilerek: dugum <body>'nin dogrudan cocugu, DS
   kapsami <main> uzerinde. Kapsasaydik kural hic eslesmezdi (bu repoda
   tekrar eden `.tm-ds` soy-secici tuzagi).
   Hareket butcesi: yalniz opacity. */
.tm-tip {
  position: fixed;
  z-index: 2400;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .28);
  white-space: normal;
  word-break: break-word;
}
.tm-tip.is-open { opacity: 1; }

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


/* ===== css/ds/ds-polish.css ===== */
/* =================================================================
   CİLA V1 — "Katmanlı derinlik" (2026-09-23)
   Kaynak: docs/ui-audit/mockups/polish-v1.css (kullanıcı onaylı, page.addStyleTag
   enjeksiyonuyla doğrulanmıştı). Bu dosya AYNI görünümü kalıcı/temiz entegre eder:
   renkler token'dan (--color-*, --tm-*, --tmv2-*, --tm-brand-*, --tm-decor-*,
   --tm-polish-* — bkz. ds-tokens.css sonu), `!important` yalnız DOM'da ÖLÇÜLEREK
   (bkz. PR raporu) gerçekten ezilen background/border/box-shadow satırlarında —
   mockup'ın kendisi aynı 3 sayfada, aynı cascade konumunda (<head> sonu) bu
   !important'lar OLMADAN uygulanamamıştı (rakip page-specific CSS'ler önceden
   var/hardcode değer taşıyor). Radius/shadow için token zaten var-fallback
   zinciriyle (.kpi-card, .ch-panel …) bağlı → o ikisi için !important YOK.

   Kapsam: base.html'i extend eden TÜM sayfalar (satıcı paneli + admin kabuğu).
   Renk/zemin kuralları YALNIZ açık temada (`html:not(.dark-mode):not([data-theme="dark"])`
   öneki) — koyu tema token'larına dokunulmadı. Sidebar İSTİSNA: her temada koyu
   (v2/components/sidebar.css §20 yorumu), bu yüzden tema-bağımsız yazıldı.
   Yükleme: base.html, ds-tooltip.css'ten hemen sonra, en son <link>. */

/* ---------- 1) Sayfa kabuğu — ışık lekeleri KALDIRILDI (2026-09-24) ----------
   Buradaki iki radyal gradyan (sol üstte menekşe, sağ üstte turuncu) sayfa
   kabuğunun zeminine iki renkli bir yıkama basıyordu. İçerikle kaplanmayan her
   boşlukta görünüyordu; en belirgin yeri Genel Bakış'ta filtre çubuğu ile KPI
   kartları arasındaki 56px'lik aralıktı — kullanıcı bunu "mavi-şeftali gradyan
   bant" olarak bildirdi ve haklıydı.

   Tasarım kararı zaten "tek ton zemin" (docs/ui-reference-spec.md, Zenith:
   akromatik nötr + tek marka rengi); tasarım raporunda "V2'nin iki renkli bandı
   yok" denmişti ama bu Cila V1 katmanı onu geri getirmişti. Kaldırıldı.

   Not: `--tm-decor-violet-soft` / `--tm-decor-orange-soft` token'ları
   ds-tokens.css'te DURUYOR; başka kullanan çıkarsa diye silinmedi, yalnız bu
   kural kaldırıldı. */

/* ---------- 2) Kart yüzeyleri — kenarlık + gölge + radius, tek kural ----------
   Radius/gölge TOKEN'dan (--tm-radius-card / --tm-card-shadow, ds-tokens.css :root
   — .kpi-card ve .ch-panel zaten `var(--tm-radius-card, 12px)` / `var(--tm-card-shadow,
   …)` fallback zinciriyle yazılı, token tanımlanınca otomatik akar, !important
   GEREKMEZ). Kenarlık rengi de token (--color-border, tema-aware). */
.kpi-card,
.ch-panel,
.tmv2-panel,
.tm-ds .tm-card,
.tmv2-page .card,
.d3-orders-section-card,
.tm-live-orders-card,
.overview-widget-panel {
  border-radius: var(--tm-radius-card);
  box-shadow: var(--tm-card-shadow) !important; /* ölçüldü: dashboard-ui-enhancements.css / dashboard-tabbed-page.css aynı sınıfa hardcode box-shadow yazıyor, cascade konumu garanti değil */
  border: 1px solid var(--color-border) !important;
  transition: box-shadow var(--tm-dur-base) var(--tm-ease), transform var(--tm-dur-base) var(--tm-ease);
}
.ch-panel:hover,
.tmv2-panel:hover,
.tm-ds .tm-card:hover,
.overview-widget-panel:hover,
.tm-live-orders-card:hover,
.d3-orders-section-card:hover {
  box-shadow: var(--tm-card-shadow-hover) !important;
}

/* ---------- 3) KPI kart — değer/etiket tipografisi ---------- */
.kpi-card .kpi-value { font-weight: 700; }
/* 2026-09-24: tipografi TÜM kartlara, renk yalnız vurgu-dışına.
   Önceden tek kural `:not(.accent)` ile yazılmıştı; dışlamanın sebebi RENKTİ
   (vurgu kartının etiketi mavi zeminde, `--tm-text-muted` okunmaz olurdu) ama
   büyük-harf/boyut/ağırlık/harf-aralığı da onunla birlikte düşüyordu. Sonuç:
   "KÂR TUTARI" büyük harfken "Ciro" başlık-düzeninde kalıyordu — kullanıcı
   bunu bildirdi. Tipografi ortak, renk ayrı. */
.kpi-card .kpi-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kpi-card:not(.accent) .kpi-label {
  color: var(--tm-text-muted);
}
.kpi-card .kpi-ic { border-radius: 12px; }
/* .kpi-card.accent zaten tm-kpi.css'te token-şeklinde gradient/gölge taşıyor —
   mockup'la görsel olarak zaten örtüşüyor, buraya ayrıca yazılmadı. */

/* ---------- 4) Bölüm başlıkları ---------- */
.ch-h3,
.ch-head-l h2, .ch-head h2,
/* 2026-10-10 — TIPOGRAFI DRIFTI: 17px DS olceginde YOK (24/20/18/16/14/12/11).
   Kart basligi + panel basliklari TUM sayfalarda paylasilir; heading (16px)
   belirtecine cekildi. Olculdu: bu kural ds-primitives.css'teki dogru degeri
   eziyordu ve sayfalar arasi tek fark buydu. */
.tm-ds .tm-card__title,
.tmv2-panel h2, .tmv2-panel h3,
.d3-orders-section-card h2 {
  font-size: var(--tm-type-heading);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tm-text-primary);
}
.ch-sub,
.ch-head-l p,
/* 2026-10-10 — TIPOGRAFI DRIFTI: ds-primitives.css:232 bu sinifa DOGRU belirteci
   (--tm-type-caption, 12px) veriyordu; buradaki "cila" kurali onu 13px e EZIYORDU.
   Kart alt basligi TUM sayfalarda paylasilir -> tek satir hepsini hizalar. */
.tm-ds .tm-card__subtitle {
  color: var(--tm-text-muted);
  font-size: var(--tm-type-caption);
}

/* ---------- 5) Header — buzlu cam (yalnız açık tema) + marka çubuğu ---------- */
html:not(.dark-mode):not([data-theme="dark"]) header#tmv2Header.tmv2-header {
  background: var(--tm-polish-header-glass) !important;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: var(--color-border) !important;
  box-shadow: var(--tm-polish-header-shadow);
}
h1.tmv2-header-title {
  position: relative;
  padding-left: 14px;
}
h1.tmv2-header-title::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
}
/* 2026-10-07 — KALDIRILDI (çift çerçeve kusuru, bkz. tm-header-v2.css #tmHeaderSearchInput
   yorumu): bu iki kural `.tmv2-search__input`'a 999px/40px'lik kendi kapsülünü ve
   açık temada ayrı bir arka plan/kenarlık rengini veriyordu — dış `.tmv2-search`
   pill'i (ds-shell.css "one control, no pill" — 34px, control-radius, tek kenarlık)
   zaten tam kontrolü sağlıyor; input'un kendi şekli/zemini olunca pill'in İÇİNDE
   daha uzun, farklı renkli ikinci bir kapsül görünüyordu (kullanıcı ekran görüntüsü,
   2026-10-06). Giderme tek otoriteye taşındı: tm-header-v2.css. */

/* ---------- 6) Sidebar — BU DOSYADAN KALDIRILDI (2026-10-08) ----------
   Burada `--tmv2-sidebar-bg`, `background-color: #0f1622`,
   `--tmv2-nav-active-bg` ve `.tmv2-nav-section-label { color … !important }`
   yeniden tanımlanıyordu. ds-polish.css kaskadın SONUNDA yüklendiği için
   kanonik sol ray dosyasını (v2/components/sidebar.css) sessizce eziyordu.

   Bu, "aynı ray üç farklı zemin veriyor" kusurunun DÖRDÜNCÜ kaynağıydı ve
   ölçmeden görünmüyordu: kanonik dosya #031538 yazıyor, çizilen renk
   #0f1622 çıkıyordu. (Diğer üçü: ds-shell.css, tm-shell-v2.css,
   tm-v2-reference-chrome.css — hepsi aynı gün temizlendi.)

   🔒 Sol ray'e dair HİÇBİR kural buraya geri eklenmez; tek kaynak
      static/css/v2/components/sidebar.css.
   ------------------------------------------------------------------ */

/* ---------- 7) Butonlar — tek marka gradyanı ---------- */
.btn--primary, .btn-primary, .tm-btn--primary, .btn.btn-primary, a.btn.btn-primary {
  background: linear-gradient(180deg, var(--tm-brand-400), var(--color-primary)) !important;
  border-color: var(--tm-brand-700) !important;
  border-radius: 12px;
}
.btn--primary:hover, .btn-primary:hover:not(:disabled), a.btn.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-primary), var(--tm-brand-700)) !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .btn--secondary,
html:not(.dark-mode):not([data-theme="dark"]) .btn--ghost {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--tm-text-secondary) !important;
}

/* ---------- 8) Tablo başlığı + zebra (yalnız açık tema) ---------- */
html:not(.dark-mode):not([data-theme="dark"]) .tm-ds .tm-table thead th,
html:not(.dark-mode):not([data-theme="dark"]) table thead th {
  background: var(--tmv2-surface-3) !important;
  color: var(--tm-text-muted) !important;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html:not(.dark-mode):not([data-theme="dark"]) .tm-ds .tm-table tbody tr:nth-child(even) > td {
  background: var(--tmv2-surface-2);
}

/* ---------- 9) Sipariş kartı (yalnız açık tema) ---------- */
html:not(.dark-mode):not([data-theme="dark"]) .order-card {
  border: 1px solid var(--tm-border-light) !important;
  border-radius: 12px;
  background: var(--color-surface) !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .order-card:hover {
  border-color: var(--tm-border-dark) !important;
  box-shadow: var(--tm-card-shadow) !important;
}

/* ---------- 10) Form alanları ---------- */
.form-control, .form-select {
  height: 44px;
  border-radius: 12px;
}
html:not(.dark-mode):not([data-theme="dark"]) .form-control,
html:not(.dark-mode):not([data-theme="dark"]) .form-select {
  border-color: var(--color-border) !important;
  background: var(--tmv2-surface-2) !important;
}
html:not(.dark-mode):not([data-theme="dark"]) .form-control:focus,
html:not(.dark-mode):not([data-theme="dark"]) .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--tmv2-form-focus-shadow) !important;
  background: var(--color-surface) !important;
}

/* ---------- 11) Demo bandı — sakin ton (yalnız açık tema; koyu zaten ayrı
   tanımlı, bkz. demo-banner.css `html.dark-mode .tm-demo-banner`) ---------- */
html:not(.dark-mode):not([data-theme="dark"]) .tm-demo-banner {
  background: linear-gradient(90deg, var(--tm-polish-demo-bg-from), var(--tm-polish-demo-bg-to)) !important;
  border-bottom-color: var(--tm-polish-demo-border) !important;
}

/* ---------- 12) tm-kpi.css `--kpi-*` namespace — yalnız html.dark-mode'da
   canonical token'a bağlıydı (dark-mode-component-overrides-2026-06-11.css);
   açık temada da aynı bağ kurulur ki #e7ebf1/#94a3b8 (eski, AA-altı) yerine
   güncel --color-border / --tm-text-muted okunur. ---------- */
html:not(.dark-mode):not([data-theme="dark"]) {
  --kpi-line: var(--color-border);
  --kpi-line-strong: var(--tm-border-light);
  --kpi-mute: var(--tm-text-muted);
}

/* ═══ CONTAINER ARALIĞI — TEK DEĞER (kullanıcı kararı 2026-09-23: "container'lar arası boşluk azaltılmalı ve
   her sayfada standart olmalı"). Ölçüm (tests/e2e/ui-audit/gap_probe.cjs, 60 panel sayfası @1280): 19 farklı
   aralık (0…90px) — kaynak sayfa-özel .mb-3/.mb-4, flex row-gap ve inline margin karışımı. Kural: sayfanın
   üst-seviye yığın kabında çocukların dikey margin'i sıfır, kardeşler arası 16px; flex/grid kaplarda row-gap
   sıfırlanır ki 16 + gap toplanmasın. Kap listesi ölçümden (gap-probe JSON `stack`). Sonuç: gap_probe ile
   yeniden ölçülür; hedef histogram tek değer (16). */
#mainContent.tmv2-page :where(.tmv2-dashboard, .rp-wrap, .admin-page-container, .x-wrap, .xa-wrap, .hc-wrap, .tm-page,
  .w-full.container, .account-container-wrapper, .subscription-container-wrapper, .integration-container-wrapper,
  .wr-page__inner, .app-container.kom-shell, .tm-fin, .he-page, .promo-page, .my-info-page, .notif-page-wrapper,
  .order-profit-page, .pd-wrap, .tm-page-wrap, .tmv2p.container-fluid, .account-main-inner, .page-stack, .xmlv2.cpk,
  .tm-stack, .en-wrap, .integration-container, .tmv2-page-body, .tmv2-page-body > .container-fluid) {
  row-gap: 0 !important;
}
#mainContent.tmv2-page :where(.tmv2-dashboard, .rp-wrap, .admin-page-container, .x-wrap, .xa-wrap, .hc-wrap, .tm-page,
  .w-full.container, .account-container-wrapper, .subscription-container-wrapper, .integration-container-wrapper,
  .wr-page__inner, .app-container.kom-shell, .tm-fin, .he-page, .promo-page, .my-info-page, .notif-page-wrapper,
  .order-profit-page, .pd-wrap, .tm-page-wrap, .tmv2p.container-fluid, .account-main-inner, .page-stack, .xmlv2.cpk,
  .tm-stack, .en-wrap, .integration-container, .tmv2-page-body, .tmv2-page-body > .container-fluid) > :not(script):not(style):not(template) {
  margin-top: 0 !important; margin-bottom: 0 !important;
}
#mainContent.tmv2-page :where(.tmv2-dashboard, .rp-wrap, .admin-page-container, .x-wrap, .xa-wrap, .hc-wrap, .tm-page,
  .w-full.container, .account-container-wrapper, .subscription-container-wrapper, .integration-container-wrapper,
  .wr-page__inner, .app-container.kom-shell, .tm-fin, .he-page, .promo-page, .my-info-page, .notif-page-wrapper,
  .order-profit-page, .pd-wrap, .tm-page-wrap, .tmv2p.container-fluid, .account-main-inner, .page-stack, .xmlv2.cpk,
  .tm-stack, .en-wrap, .integration-container, .tmv2-page-body, .tmv2-page-body > .container-fluid) > :not(script):not(style):not(template) ~ :not(script):not(style):not(template) {
  margin-top: var(--tm-section-gap, 16px) !important;
}
/* Demo bandı ≥1024: tek satır (metin ellipsis), iki CTA + X aynı satırda */
@media (min-width: 1024px) {
  .tm-demo-banner { flex-wrap: nowrap !important; }
  .tm-demo-banner__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 2026-09-23 (responsive kalibrasyon): rapor sayfalarındaki segment düğmeleri (.rp-seg) 320px'te satırdan taşıyordu
   (ölçüldü: warnings@320 right 336 > 320, kaydırılabilir ata yok). Dar ekranda sarar. */
@media (max-width: 480px) {
  #mainContent.tmv2-page .rp-seg { flex-wrap: wrap; }
}

/* 2026-09-23 (responsive kalibrasyon, 320-414px, ölçüldü): (a) advantage-analysis .header-tool-card nowrap flex 380px >
   286px kap; (b) product-qa-settings .admin-header-right nowrap; (c) campaign-analysis boş-durum hücresi 534px genişlikte
   tablo — dar ekranda tablo kaydırılabilir blok olur (kaydırılabilir ata = erişilebilir). */
@media (max-width: 480px) {
  #mainContent.tmv2-page .header-tool-card { flex-wrap: wrap; }
  #mainContent.tmv2-page .header-tool-card > * { min-width: 0; flex: 1 1 100%; }
  #mainContent.tmv2-page .admin-header-right { flex-wrap: wrap; }
  #mainContent.tmv2-page .en-ops__group { flex-wrap: wrap; }   /* product-settings @320/375: #xmlUploadBtn 399 > 375 (2026-09-24) */
  /* (c) tablo kuralı KALDIRILDI (2026-09-24 ön-merge kontrolü): display:block tabloyu kendi sarmalayıcısında 252px'e kırpıp
     overflow-x'i etkisiz bırakıyordu; campaign-analysis'te .overflow-x-auto sarmalayıcı zaten var. */
}

/* 2026-09-24 (campaign-analysis@320): Tailwind kaydırma sarmalayıcısı içindeki tablo kendi overflow'unu kırpıyordu (table ovx=hidden,
   sarmalayıcı sw=cw) → içerik ulaşılamıyordu. Tablo taşsın, sarmalayıcı kaydırsın. */
@media (max-width: 480px) {
  #mainContent.tmv2-page .overflow-x-auto > table { overflow: visible !important; }
}

/* ---------- Genel Bakış: KPI üstü boşluk tek 16px (2026-09-24) ----------
   Ölçüldü (1280): sticky filtre çubuğunun altı 235px, KPI ızgarasının üstü
   291px → 56px. Üç ayrı aralık üst üste biniyordu:
     · #overviewTab      margin-top 16px  (`--tm-section-gap`, !important)
     · #overviewPage     padding-top 24px (`.tm-ds .tm-page`, --tm-space-6)
     · #tmOverviewKpiGrid margin-top 16px (aynı section-gap kuralı)
   Diğer panel sayfalarındaki global container aralığı 16px; sekme kabındaki
   16'yı TEK kaynak olarak bırakıp diğer ikisini sıfırlıyoruz. `!important`
   zorunlu: section-gap kuralı da !important ile geliyor (üslup değil, ölçüm). */
.tm-ds #overviewPage.tm-page { padding-top: 0; }
#mainContent.tmv2-page #tmOverviewKpiGrid { margin-top: 0 !important; }