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

/* ===== css/ds/ds-shell.css ===== */
/* =================================================================
   TRENDMETRIK DESIGN SYSTEM — SHELL (A2, 2026-09-13)
   Sidebar · top bar · demo banner · "Canlı Performansım" promo band ·
   floating support/chat button · sticky store/date nav. Presentation only —
   no route/API/state/JS changes, no id/class renames (docs/ui-audit.md Ek B).

   SCOPE (binding, docs/ui-design-log.md § Kabuk): every rule below is
   prefixed `body.tm-ds-shell`. That class is added in
   templates/layouts/base.html ONLY when the page's `tmv2_ds_scope` block
   renders "tm-ds" (dashboard_tabbed.html ds in ('overview','orders') /
   dashboard_live.html) AND `?legacy=1` is absent — i.e. exactly the ~3 DS
   routes, never the other ~200 pages that share this same shell markup.
   Proof: tests/e2e/ui-refactor/style-fingerprint.cjs on a non-DS page
   (/dashboard/products, /dashboard/xml) before/after this file = 0/0/0;
   ?legacy=1 on a DS page also drops the class.

   Custom-property trick (used throughout instead of fighting !important):
   the shell (sidebar/topbar/demo-banner/promo-FAB) sits OUTSIDE
   <main class="tm-ds">, so the `.tm-ds { --tm-radius-card: … }` block in
   ds-tokens.css is invisible here (custom properties only resolve for the
   scoping element + its descendants). Two kinds of variable used below:
     - tokens that are ALREADY global (:root, static/css/v2/tokens.css):
       --tm-shadow-card/-overlay/-modal, --tm-surface*, --tm-border*,
       --tm-text-*, --tm-accent-*, --tm-radius-md/xl/full, --tm-ink-100 —
       used as-is, no mirror needed.
     - shell-only tokens with no global equivalent (permanently-dark sidebar
       surface, control-radius mirror): declared in ds-tokens.css under the
       same `body.tm-ds-shell` selector (the one DS file the guard allows
       colour literals in) and consumed here as var(--tm-shell-*).
     - existing LEGACY custom properties the current shell CSS already
       reads (--tmv2-sb-w, --tmv2-nav-*): redeclaring them under
       `body.tm-ds-shell` re-themes every rule that consumes them, with NO
       new selector and NO !important — the cascade for custom properties
       always prefers the value declared on the nearer/more-specific match,
       so this is safe on the ~200 non-DS pages (they never get the class).

   Cascade trap: legacy shell CSS (tm-shell-v2.css, tm-header-v2.css,
   demo-banner.css, base.html's inline FAB block) carries many !important
   declarations. Per the design-log method, ds files never use !important
   (guard-enforced) — where a legacy !important rule visually fights this
   file, this file wins via HIGHER SPECIFICITY instead (adding the
   `body.tm-ds-shell` ancestor class to an equally-specific selector), or
   the legacy declaration turned out to not be !important at all (verified
   with the computed-style probe before writing the override — see
   docs/ui-design-log.md § Kabuk (A2) for the per-round table).
   ================================================================= */

/* ================= SIDEBAR =================
   Sol ray artık TEK kaynaktan geliyor: static/css/v2/components/sidebar.css
   (kılavuz rail dili, 2026-10-08).

   Burada eskiden şunlar vardı ve SİLİNDİ — hepsi "aynı ray, sayfaya göre
   başka görünüm" üretiyordu (ölçüldü 2026-10-08, gerçek DOM):
     • `--tm-shell-sidebar-bg` (#12161f) zemini → ds sayfalarında ray #12161f,
       diğer sayfalarda #0f1622, XML Sync koyu temada SAYDAM: üç farklı zemin.
     • `.nav-label { font-size: 14px }` → kanonik 12,5px'i eziyordu.
     • `--tmv2-nav-icon-slot: 18px` → ikon dairesini kırıyordu.
     • `.tmv2-pro-card { background: transparent }` → abonelik kartı ds
       sayfalarında düz satır, diğerlerinde turuncu gradyan blok: iki görünüm.
   `--tmv2-sb-w: 260px` da kalktı; theme-variables.css:271 zaten 260px veriyor
   (tek genişlik, 2026-09-23).

   🔒 Buraya sidebar kuralı GERİ EKLEME. Ray tema-bağımsız ve sayfa-bağımsız
      olmalı; testi: tests/e2e/sidebar-v3-duman.cjs "tek zemin" iddiası.
   ========================================================= */

/* ================= TOP BAR — 56-64px, plain surface, hairline border ================= */

body.tm-ds-shell header.tmv2-header {
  min-height: 60px;
  background: var(--tm-surface);
  border-bottom: 1px solid var(--tm-border);
  box-shadow: none;
}
body.tm-ds-shell header.tmv2-header .tmv2-header-inner { min-height: 60px; }
body.tm-ds-shell .tmv2-header--page,
body.tm-ds-shell .tmv2-header--inline-in-bar {
  background: transparent;
  border-bottom: 0;
}
body.tm-ds-shell .tmv2-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tm-text-primary);
}

/* Search — one control, control radius, no pill */
body.tm-ds-shell .tmv2-search {
  height: 34px;
  background: var(--tm-ink-100);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-control);
  box-shadow: none;
}
body.tm-ds-shell .tmv2-search:focus-within {
  border-color: var(--tm-shell-accent);
  outline: 2px solid var(--tm-shell-accent);
  outline-offset: 1px;
}

/* Icon buttons — 36px, control radius */
body.tm-ds-shell .header-dropdown-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--tm-radius-control);
}
body.tm-ds-shell .header-dropdown-btn:hover {
  background: var(--tm-ink-100);
}

/* Avatar — 32px */
body.tm-ds-shell .header-account-btn__avatar {
  width: 32px;
  height: 32px;
  box-shadow: none;
}

/* ================= DEMO BANNER — one row 40-44px, no wrap, no gradient ================= */

body.tm-ds-shell #tmDemoBanner {
  background: var(--tm-warn-bg);
  flex-wrap: nowrap;
  min-height: 40px;
  box-shadow: none;
}
body.tm-ds-shell #tmDemoBanner .tm-demo-banner__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* .tm-demo-banner__icon is already a fixed 28x28 box (demo-banner.css) — the
   `<i data-lucide>` inside it is `display:inline` until lucide.js swaps it
   for an <svg> (a replaced element); reserving `inline-block` here means the
   inline width/height already set on the tag apply BEFORE that swap, so the
   swap causes no reflow (layout-lint R6 CLS source). */
body.tm-ds-shell #tmDemoBanner [data-lucide] {
  display: inline-block;
}

@media (max-width: 1024px) and (min-width: 481px) {
  body.tm-ds-shell #tmDemoBanner {
    gap: 8px;
  }
  body.tm-ds-shell #tmDemoBanner .tm-demo-banner__text {
    min-width: 4rem;
  }
}

/* ================= "Canlı Performansım" PROMO BAND — CLS fix only ================= */
/* ds-utilities.css already re-skins colour/surface for `.tm-live-promo`
   (Faz 4b). The remaining defect (layout-lint R6, CLS 0.0995 @768) is the
   same reserved-icon-box gap as the demo banner: `[data-lucide]` inside the
   promo band is `display:inline` until hydrated, so the CTA/close buttons'
   own inline width/height attributes are ignored pre-hydration → the row
   grows once lucide.js runs → `.tm-live-promo__text` (flex-wrap) reflows. */
body.tm-ds-shell .tm-live-promo [data-lucide] {
  display: inline-block;
}

/* ================= CHAT / SUPPORT FAB — stay clear of the content column ================= */
/* Floating support buttons (speed dial): legacy size/position kept. The 28px + left:100vw variant (r36–r39) broke the
   dial's stacked items in prod (items positioned for 44/52px buttons ended up clipped at the viewport edge) — reverted
   2026-09-13; the residual 16px overlap with the chart card's corner at 1640 is accepted over a broken dial. */
/* ================= STICKY STORE/DATE NAV (Genel Bakış / Siparişler) ================= */
/* Measured (shell-probe r0): its inner left edge was ALREADY 312/20/12 at
   1280/1024/375 — the same canonical gutter the coordinator's "Sayfalar
   arası tutarlılık" round already aligned across all three pages. An
   earlier version of this rule zeroed `.dashboard-toolbar--nav` padding and
   REGRESSED that alignment to 292 (measured) — reverted. Only the control
   chrome (button radius) is restyled here; the platform-picker/date-picker
   JS-driven internals are out of shell scope (dashboard_tabbed_sticky_nav.html
   is owned by the page agents). */
body.tm-ds-shell .date-range-btn {
  border-radius: var(--tm-radius-control);
}

/* ================= TOP BANNER SLIDER (A2 round 2 → slider, 2026-09-13, user decision) =================
   Under the top bar, DS-shell only (templates/includes/_shell_ticker.html, included from base.html gated on
   the same var as the body class). ONE slide visible at a time; slides change with a horizontal slide
   transition every 6 s (paused on hover/focus), dots on the right; prefers-reduced-motion = instant switch.
   Fixed 56px row from first paint (catalog slide is server-rendered) → no CLS by construction. Own class
   names (`.tm-shell-ticker__*`) so the global store_header initMarquee() never touches it. */
.tm-shell-ticker {
  height: 60px;
  min-height: 60px;
  overflow: hidden;
  position: relative;
  /* 2026-10-14 komuta çubuğu: solda ana mesaj (esner), sağda başlık çipleri (sabit). */
  display: flex; align-items: stretch;
  /* Gradyan + yavas ambiyans kaymasi (2026-09-16, kullanici: "birkac gorsel ve animasyon").
     Iki uc da TON ailesinden ve koyu uc daha KOYU -> kontrast tabandan asla dusmuyor.
     `background-position` animasyonu hareket butcesinde ambiyans olarak serbest (layout ozelligi degil). */
  background: linear-gradient(120deg, var(--tm-shell-band-bg) 0%, var(--tm-shell-band-bg-2) 50%, var(--tm-shell-band-bg) 100%);
  background-size: 220% 100%;
  /* animation TEK yerde (asagidaki gorsel blogu) — mutasyon testinde mukerrer tanim
     kilidi delmisti: birini silince digeri hayatta kaliyordu, yani kilit yalan soyluyordu. */
  border-bottom: 0;
  box-shadow: none;
  color: var(--tm-shell-band-fg);
}
.tm-shell-ticker__wrapper { height: 100%; flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; }
.tm-shell-ticker__track { position: relative; height: 100%; width: 100%; }
/* slides stack; only the active one is visible. Enter from the right, leave to the left. */
.tm-shell-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--tm-space-4) 0 var(--tm-space-8);
  /* 2026-10-14: kayma YOK — yumuşak soluş (kullanıcı: "taktak geçiyor"). */
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}
.tm-shell-ticker__item.is-active { opacity: 1; pointer-events: auto; }
.tm-shell-ticker__item.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tm-shell-ticker__item { transition: none; transform: none; }
  .tm-shell-ticker__item.is-leaving { transform: none; }
}
.tm-shell-ticker__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 11px; box-shadow: inset 0 0 0 1px var(--tm-shell-band-fg-18);
  background: var(--tm-shell-band-fg-18);
  color: inherit;
}
.tm-shell-ticker__ic svg,
.tm-shell-ticker__ic [data-lucide] { width: 19px; height: 19px; }
/* Ana mesaj gövdesi: üstte küçük başlık etiketi, altında metin (2026-10-14). */
.tm-shell-ticker__govde { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; }
.tm-shell-ticker__et { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .82; }
.tm-shell-ticker__govde .tm-shell-ticker__txt { font-weight: 600; }
.tm-shell-ticker__ertele {
  flex-shrink: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 12px; text-decoration: underline; text-underline-offset: 3px; opacity: .85; white-space: nowrap;
}
.tm-shell-ticker__ertele:hover { opacity: 1; }
/* Çip paneli (sağ): bütün başlıklar sayılı; aktif çip beyaz + altında ilerleme çizgisi. */
.tm-shell-ticker__cipler {
  flex: 0 1 auto; max-width: 52%; display: flex; align-items: center; gap: 6px;
  padding: 0 var(--tm-space-4); overflow-x: auto; scrollbar-width: none;
  background: rgba(0, 0, 0, .12); box-shadow: inset 1px 0 0 var(--tm-shell-band-fg-18);
}
.tm-shell-ticker__cipler::-webkit-scrollbar { display: none; }
.tm-shell-ticker__cip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 34px; padding: 0 9px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--tm-shell-band-fg-18); color: var(--tm-shell-band-fg);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.tm-shell-ticker__cip:hover { background: var(--tm-shell-band-fg-45); }
.tm-shell-ticker__cip svg, .tm-shell-ticker__cip [data-lucide] { width: 15px; height: 15px; }
.tm-shell-ticker__cip.is-active { background: var(--tm-shell-band-fg); color: var(--tm-shell-band-bg); }
.tm-shell-ticker__rozet {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tm-shell-band-fg-18);
}
.tm-shell-ticker__cip.is-active .tm-shell-ticker__rozet { background: var(--tm-shell-band-bg); color: var(--tm-shell-band-fg); }
.tm-shell-ticker__cip .tm-shell-ticker__rozet[data-ton="danger"] { background: #ef4444; color: #fff; }
.tm-shell-ticker__cip .tm-shell-ticker__rozet[data-ton="warning"] { background: #f59e0b; color: #fff; }
/* Yer: etiket yalnız AKTİF çipte (diğerleri ikon + rozet; ad `title`'da). Geniş ekranda hepsi. */
@media (max-width: 1599px) {
  .tm-shell-ticker__cip:not(.is-active) .tm-shell-ticker__cip-ad { display: none; }
}
.tm-shell-ticker__cip-bar { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
.tm-shell-ticker__cip.is-active .tm-shell-ticker__cip-bar { opacity: 1; background: color-mix(in srgb, var(--tm-shell-band-bg) 20%, transparent); }
.tm-shell-ticker__cip-bar i { display: block; height: 100%; width: 100%; background: var(--tm-shell-band-bg); transform-origin: left; transform: scaleX(0); }
.tm-shell-ticker__cip.is-active .tm-shell-ticker__cip-bar i { animation: tmCipBar var(--tm-ticker-slide-ms, 8000ms) linear forwards; }
.tm-shell-ticker:hover .tm-shell-ticker__cip-bar i, .tm-shell-ticker:focus-within .tm-shell-ticker__cip-bar i { animation-play-state: paused; }
@keyframes tmCipBar { to { transform: scaleX(1); } }
/* Panel zemini aktif mesajın tonunu alır (uyarı turuncusu yalnız sol yarıda kalmasın). */
.tm-shell-ticker[data-ton="warning"] { background: linear-gradient(120deg, var(--tm-shell-band-warn), var(--tm-shell-band-warn-2)); }
.tm-shell-ticker[data-ton="danger"]  { background: linear-gradient(120deg, var(--tm-shell-band-danger), var(--tm-shell-band-danger-2)); }
.tm-shell-ticker[data-ton="success"] { background: linear-gradient(120deg, var(--tm-shell-band-ok), var(--tm-shell-band-ok-2)); }
.tm-shell-ticker[data-ton="warning"] .tm-shell-ticker__cip.is-active { color: var(--tm-shell-band-warn); }
.tm-shell-ticker[data-ton="danger"]  .tm-shell-ticker__cip.is-active { color: var(--tm-shell-band-danger); }
.tm-shell-ticker[data-ton="success"] .tm-shell-ticker__cip.is-active { color: var(--tm-shell-band-ok); }
@media (prefers-reduced-motion: reduce) {
  .tm-shell-ticker__cip.is-active .tm-shell-ticker__cip-bar i { animation: none; transform: scaleX(1); }
}
.tm-shell-ticker__txt {
  font-size: 14px;
  line-height: 20px;
  color: inherit;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex; align-items: baseline; gap: var(--tm-space-2);
}
.tm-shell-ticker__txt strong { color: inherit; font-weight: 700; font-size: 15px; }
.tm-shell-ticker__sub { opacity: 0.85; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.tm-shell-ticker__txt .mono { font-variant-numeric: tabular-nums; font-weight: 600; color: inherit; }
.tm-shell-ticker__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.tm-shell-ticker__link:hover { opacity: 0.85; }
.tm-shell-ticker__cta {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--tm-space-4); flex-shrink: 0;
  border-radius: var(--tm-radius-control); background: var(--tm-shell-band-fg); color: var(--tm-shell-band-bg);
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.tm-shell-ticker__cta:hover { opacity: 0.92; }

/* İlk-sipariş şeridinin kapatma düğmesi (2026-09-28). CTA'ya yapışmaması için
   sol boşluk; dokunmatikte kolay hedef olsun diye 28px kutu. */
.tm-shell-ticker__close {
  margin-left: 10px; flex: 0 0 auto;
  width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 0; border-radius: 8px;
  color: currentColor; opacity: .75; font-size: 18px; cursor: pointer;
}
.tm-shell-ticker__close:hover { opacity: 1; background: rgba(255,255,255,.18); }
.tm-shell-ticker__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; margin-left: auto;
  border: 0; border-radius: var(--tm-radius-full); background: transparent; color: inherit; opacity: 0.8; cursor: pointer;
}
.tm-shell-ticker__dismiss:hover { background: var(--tm-shell-band-fg-18); opacity: 1; }
.tm-shell-ticker__dismiss svg,
.tm-shell-ticker__dismiss [data-lucide] { width: 13px; height: 13px; }
/* dots (right edge); hidden when there is a single slide */
.tm-shell-ticker__dots { position: absolute; right: 32px; top: 0; bottom: 0; display: flex; align-items: center; gap: var(--tm-space-2); z-index: 2; }
/* 🔴 NOKTA BOZULMASI (2026-09-17, kullanıcı bildirimi "noktalarda yamulma var"):
   aktif nokta `transform: scaleX(2.2)` ile geniştiliyordu. scaleX bir DAİREYİ yatay
   ezerek ELİPS yapar — uç kavisleri de aynı oranda gerildiği için hap değil
   "yamulmuş nokta" görünür. Çözüm: ölçeklemek yerine aktif noktaya GERÇEK hap
   genişliği vermek (border-radius sabit kalır → uçlar kusursuz yarım daire).
   ⚠️ Genişlik GEÇİŞLE animate EDİLMEZ: `width` bir yerleşim özelliği ve
   docs/ui-reference-spec.md hareket bütçesi bunu yasaklıyor. Geçiş yalnız renkte. */
.tm-shell-ticker__dot {
  width: 8px; height: 8px; border: 0; padding: 0; flex: 0 0 auto;
  border-radius: 999px; background: var(--tm-shell-band-fg-45); cursor: pointer;
}
.tm-shell-ticker__dot.is-active { width: 22px; background: var(--tm-shell-band-fg); }
.tm-shell-ticker[data-count="1"] .tm-shell-ticker__dots { display: none; }
.tm-shell-ticker[data-count="1"] .tm-shell-ticker__item { padding-right: 32px; }

/* Tones — warning slide uses --tm-warn/-bg (danger when terminated), dealer-ad success/info as in
   dealer_status_panel.html; the warning tints the whole row so it is never mistaken for an advert. */
.tm-shell-ticker__item[data-tone="promo"],
.tm-shell-ticker__item[data-tone="info"]    { background: linear-gradient(120deg, var(--tm-shell-band-bg), var(--tm-shell-band-bg-2)); color: var(--tm-shell-band-fg); }
.tm-shell-ticker__item[data-tone="success"] { background: linear-gradient(120deg, var(--tm-shell-band-ok), var(--tm-shell-band-ok-2)); color: var(--tm-shell-band-fg); }
.tm-shell-ticker__item[data-tone="warning"] { background: linear-gradient(120deg, var(--tm-shell-band-warn), var(--tm-shell-band-warn-2)); color: var(--tm-shell-band-fg); }
.tm-shell-ticker__item[data-tone="danger"]  { background: linear-gradient(120deg, var(--tm-shell-band-danger), var(--tm-shell-band-danger-2)); color: var(--tm-shell-band-fg); }
.tm-shell-ticker__item[data-tone="warning"] .tm-shell-ticker__cta { color: var(--tm-shell-band-warn); }
.tm-shell-ticker__item[data-tone="danger"]  .tm-shell-ticker__cta { color: var(--tm-shell-band-danger); }

/* ---- Gorsel/hareket turu (2026-09-16, kullanici istegi) ------------------------------------
   Hepsi transform/opacity/background-position — layout ozelligi animasyonu YOK (ui-reference-spec).
   Etkilesim <=200ms; ambiyans (band kaymasi, uyari nabzi) sure-serbest; giris 420ms tek-sefer.
   prefers-reduced-motion'da HEPSI kapali ve hicbiri icerigi opacity 0'da birakmiyor. */
@keyframes tmBandDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes tmBandIn    { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tmIcPulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.tm-shell-ticker { animation: tmBandDrift 28s ease-in-out infinite, tmBandIn 420ms cubic-bezier(.22,.61,.36,1) backwards; }
/* Uyari/tehlike tonunda ikon nabzi: dikkat SAYIYA degil DURUMA cekiliyor; metne dokunmuyor. */
.tm-shell-ticker__item[data-tone="warning"] .tm-shell-ticker__ic,
.tm-shell-ticker__item[data-tone="danger"]  .tm-shell-ticker__ic { animation: tmIcPulse 2.4s ease-in-out infinite; }
/* Mikro-etkilesimler (<=200ms) */
.tm-shell-ticker__cta { transition: transform 160ms ease-out, opacity 160ms ease-out; }
.tm-shell-ticker__cta:hover { transform: translateY(-1px); }
.tm-shell-ticker__cta:active { transform: translateY(0); }
.tm-shell-ticker__ic { transition: transform 160ms ease-out; }
.tm-shell-ticker__item.is-active .tm-shell-ticker__ic { transform: none; }
/* Aktif nokta: `width` DEGIL `transform: scaleX` — layout animasyonu yasak. */
.tm-shell-ticker__dot { transition: background-color 160ms ease-out; }
.tm-shell-ticker__dismiss { transition: transform 160ms ease-out, background-color 160ms ease-out, opacity 160ms ease-out; }
.tm-shell-ticker__dismiss:hover { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .tm-shell-ticker,
  .tm-shell-ticker__item[data-tone="warning"] .tm-shell-ticker__ic,
  .tm-shell-ticker__item[data-tone="danger"]  .tm-shell-ticker__ic { animation: none; }
  .tm-shell-ticker__cta, .tm-shell-ticker__ic, .tm-shell-ticker__dot, .tm-shell-ticker__dismiss { transition: none; }
  .tm-shell-ticker__cta:hover, .tm-shell-ticker__dismiss:hover { transform: none; }
  /* aktif nokta genisligi transform DEGIL gercek genislik → hareket-azaltmada da dogru gorunur */
}

@media (max-width: 640px) {
  .tm-shell-ticker__item { padding: 0 calc(var(--tm-space-12) + var(--tm-space-2)) 0 var(--tm-space-3); gap: var(--tm-space-2); }
  .tm-shell-ticker__txt { font-size: 13px; white-space: normal; line-height: 17px; max-height: 34px; }
  .tm-shell-ticker__dots { right: 12px; }
  /* 2026-10-14 komuta çubuğu: mobilde çipler mesajın ALTINDA tek satır, yatay kaydırılır
     (A-1'deki "3/12" sayacının yerine — çipler zaten her başlığı sayısıyla gösteriyor). */
  .tm-shell-ticker { flex-direction: column; height: auto; min-height: 60px; }
  .tm-shell-ticker__wrapper { height: 56px; flex: 0 0 56px; }
  .tm-shell-ticker .tm-shell-ticker__item { padding-right: var(--tm-space-3); }
  .tm-shell-ticker__cipler { max-width: none; height: 42px; flex: 0 0 42px; padding: 0 var(--tm-space-3); box-shadow: inset 0 1px 0 var(--tm-shell-band-fg-18); }
  .tm-shell-ticker__cip { height: 30px; padding: 0 8px; font-size: 12px; }
  .tm-shell-ticker__et { display: none; }
  .tm-shell-ticker__ic { width: 30px; height: 30px; border-radius: 9px; }
  .tm-shell-ticker__ertele { font-size: 11px; padding: 0 2px; }
  .tm-shell-ticker__cta { height: 28px; padding: 0 var(--tm-space-3); font-size: 12px; }
}

/* content starts at the page's own 24px rhythm right under the banner (legacy main padding-top 16 stacked on it) */
body.tm-ds-shell main.tmv2-content { padding-top: 0; }


/* ═══ Şerit görsel güçlendirme (2026-09-17, kullanıcı: "güzel ama dikkat çekmiyor,
   daha fazla resim/ikon koyabiliriz") — üç ekleme, hiçbiri yerleşim animasyonu
   kullanmaz (yalnız transform/opacity; hareket bütçesi korunur). ═══ */

/* (a) İkon rozeti: 26px → 30px, çift katman (dış halka + iç dolgu) ve hafif
   yükselti. Sabit; dikkat çeken ama titremeyen bir çapa. */
.tm-shell-ticker__ic {
  width: 30px; height: 30px;
  box-shadow: 0 0 0 1px var(--tm-shell-band-fg-18), 0 2px 8px rgba(0, 0, 0, 0.14);
}
.tm-shell-ticker__ic svg,
.tm-shell-ticker__ic [data-lucide] { width: 17px; height: 17px; }

/* (b) Slayt ilerleme çubuğu: şeridin ALT kenarında 6 sn'de dolan ince çizgi.
   Hem "dönüyor" bilgisini verir hem gözü bandın üstünde tutar. transform:scaleX
   ile çizilir (layout YOK). Hover/odakta duraklar — slider'ın kendisi de durur. */
.tm-shell-ticker__prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--tm-shell-band-fg-18); overflow: hidden; z-index: 3; pointer-events: none;
}
.tm-shell-ticker__prog::after {
  content: ""; display: block; height: 100%; width: 100%;
  background: var(--tm-shell-band-fg); opacity: 0.9;
  transform-origin: left center; transform: scaleX(0);
  animation: tmTickerProg var(--tm-ticker-slide-ms, 6000ms) linear infinite;
}
.tm-shell-ticker:hover .tm-shell-ticker__prog::after,
.tm-shell-ticker:focus-within .tm-shell-ticker__prog::after { animation-play-state: paused; }
.tm-shell-ticker[data-count="1"] .tm-shell-ticker__prog { display: none; }
@keyframes tmTickerProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* (c) Ürün görseli kümesi (katalog/haftalık slaytı): üst üste binen 4 yuvarlak
   thumbnail + "+N" rozeti. Gerçek katalog görselleri (/xml/catalog/weekly-top
   payload'ındaki `image`) — dekoratif çizim değil, satılabilir ürünler. */
.tm-shell-ticker__thumbs { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: var(--tm-space-1); }
.tm-shell-ticker__thumb {
  width: 26px; height: 26px; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--tm-shell-band-bg); background: var(--tm-shell-band-fg-18);
  margin-left: -9px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.tm-shell-ticker__thumb:first-child { margin-left: 0; }
.tm-shell-ticker__thumb-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: -9px; border-radius: 999px;
  border: 2px solid var(--tm-shell-band-bg); background: var(--tm-shell-band-fg);
  color: var(--tm-shell-band-bg); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) { .tm-shell-ticker__thumbs { display: none; } }

@media (prefers-reduced-motion: reduce) {
  /* Çubuk KALIR (durum göstergesi) ama akmaz: dolu gösterilir. */
  .tm-shell-ticker__prog::after { animation: none; transform: scaleX(1); opacity: 0.55; }
}


/* 2026-09-28: şerit çizildiğinde yüksekliğini tek kaynaktan duyur — toast kabı
   (dashboard-*.css) `--tm-ticker-h` ile kendini şeridin ALTINA yerleştirir.
   `:has()` desteklenmeyen tarayıcıda değişken 0 kalır → eski davranış. */
body:is(.tmh-e6051e5a, :not(*) #tmShellTicker) { --tm-ticker-h: 56px; }
/* İLK SİPARİŞ ŞERİDİ — dar ekran (2026-09-28, ÖLÇÜLDÜ 390px).
   Metin iki satıra taşıp kırpılıyordu ("İlk sipariş…"): CTA sabit genişlikte,
   metin ise küçülemiyordu. Metin tek satır + ellipsis, CTA daralır ama okunur
   kalır; kapatma düğmesi ≥28px dokunma hedefi. */
@media (max-width: 575.98px) {
  .tm-shell-ticker__item[data-kind="first-order"] { gap: 8px; padding-right: 8px; }
  .tm-shell-ticker__item[data-kind="first-order"] .tm-shell-ticker__txt {
    min-width: 0; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tm-shell-ticker__item[data-kind="first-order"] .tm-shell-ticker__cta {
    flex: 0 0 auto; white-space: nowrap; padding: 5px 10px; font-size: 12.5px;
  }
  .tm-shell-ticker__item[data-kind="first-order"] .tm-shell-ticker__ic { display: none; }
}


/* Sabitlenmiş öğe (data-pin) varken şerit DÖNMÜYOR — slayt noktaları ve
   ilerleme çubuğu o hâlde anlamsız ve dar ekranda kapatma düğmesinin üstüne
   biniyor. `:has()` desteklenmeyen tarayıcıda eski görünüm kalır (zararsız). */
.tm-shell-ticker:has([data-pin]) .tm-shell-ticker__dots,
.tm-shell-ticker:has([data-pin]) .tm-shell-ticker__prog { display: none; }