@layer cepdeposu-legacy {
/*
 * cepdeposu tema — tek CSS dosyası. Token'lar ve bileşen stilleri
 * wp-content/themes/cepdeposu/*.html mockup'larından BİREBİR taşındı
 * (oklch renk değerleri, spacing/typography ölçekleri dahil).
 */

/* ─── tokens ──────────────────────────────────────────────────────── */
/* Faz 4A (docs/design-system.md) ile: --accent/--blue/--ok/--warn/--bad/
   --gold/--silver/--bronze onaylı hex'lere taşındı; --ink/--primary/
   --success/--warning/--danger/--tier-* docs/design-system.md ile birebir
   isimlenen KANONİK adlardır — mevcut adlar geriye dönük alias'tır, ikinci
   bir renk sistemi değildir. --bg/--surface/--fg/--muted/--border zaten
   onaylı hex'lere yeterince yakın olduğu için bu fazda değiştirilmedi. */
:root {
  --bg:      oklch(0.975 0.006 255);
  --surface: oklch(1 0 0);
  --fg:      oklch(0.24 0.035 260);
  --muted:   oklch(0.52 0.022 260);
  --border:  oklch(0.905 0.01 260);
  --text:       var(--fg);      /* docs/design-system.md kanonik adı */
  --text-muted: var(--muted);   /* docs/design-system.md kanonik adı */

  /* marka renkleri — docs/design-system.md §1 onaylı hex'ler */
  --accent:        #E2650E;   /* turuncu — YALNIZ para/avantaj/kritik CTA (§16 disiplini) */
  --accent-strong: #C2560A;
  --accent-hover:  var(--accent-strong);
  --blue:          #2454B8;   /* Primary — navigasyon/interaction/marka */
  --blue-strong:   #1C4295;
  --blue-soft:     color-mix(in srgb, var(--blue) 12%, transparent);
  --primary:       var(--blue);         /* docs/design-system.md kanonik adı */
  --primary-hover: var(--blue-strong);
  --primary-tint:  #EAF0FB;

  --navy:        #1F5FCC;   /* eski koyu lacivert yüzeyler artık marka mavisi */
  --navy-2:      #17458F;   /* footer / hover / backdrop — mavinin koyu kardeşi */
  --navy-line:   #4E85E4;   /* mavi yüzey üstü ince çizgi/çerçeve */
  --on-navy:     #F4F8FE;
  --on-navy-dim: #D8E3F9;
  /* --ink: docs/design-system.md'nin yeni yapısal koyu rengi. --navy henüz
     hiçbir bileşende --ink'e yeniden bağlanmadı (header/footer tasarımı
     Faz 4B'de); bu token şimdilik yalnız tanımlı ve sonraki fazlar içindir. */
  --ink:   #0F1B2D;
  --ink-2: #1A2A42;

  --accent-soft:   color-mix(in srgb, var(--accent) 14%, transparent);
  --fg-soft:       color-mix(in oklch, var(--fg) 5%, transparent);

  --ok:    #1E8E5A;
  --ok-ink: var(--ok);
  --warn:  #D69E00;
  --bad:   #D33A2C;
  --success: var(--ok);      /* docs/design-system.md kanonik adı */
  --warning: var(--warn);
  --danger:  var(--bad);
  --success-tint: #E9F6EF;
  --warning-tint: #FCF3DC;
  --danger-tint:  #FBEAE8;

  --gold:   #B08D3E;   /* mat/metalik — yalnız B2B kademe statüsü, marka/CTA rengi DEĞİL */
  --silver: #9AA3AF;
  --bronze: #9C6B3E;
  --tier-gold:   var(--gold);   /* docs/design-system.md kanonik adı */
  --tier-silver: var(--silver);
  --tier-bronze: var(--bronze);

  /* yazı tipleri — aktif şema html[data-fontscheme] ile seçilir (varsayılan
     "modern": bu :root değerleri, Faz 4A ile Archivo'ya taşındı — bkz.
     docs/design-system.md §4). @font-face tanımları assets/css/fonts.css.
     --font-display: başlıklar. --font-mono: yalnız SKU / uyumluluk kodu. */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-h1: clamp(30px, 3vw, 40px);
  --fs-h2: clamp(21px, 1.6vw, 26px);
  --fs-h3: 18px;
  --fs-body: 15px;
  --fs-meta: 12px;
  /* docs/design-system.md §2 tam ölçek — yeni primitive'ler bunları kullanır;
     bu fazda mevcut şablonlarda tek tek uygulanmadı (bkz. progress log). */
  --fs-product-card: 16px;
  --fs-product-pdp:  22px;
  --fs-price-pdp:    28px;
  --fs-price-card:   18px;
  --fs-price-old:    13px;
  --fs-spec:         13.5px;
  --fs-sku:          12px;
  --fs-nav:          14px;
  --fs-btn:          14px;
  --fs-badge:        12px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-9: 64px;
  /* container: docs/design-system.md §4 (1360px → 1400px, Faz 4A). */
  --container: 1400px;
  /* breakpoint'ler (CSS custom property @media içinde kullanılamaz —
     docs/design-system.md §4 ile referans sabitleri): 480 / 768 / 1024 / 1280 */
  /* radius kilidi: genel 10px, küçük iç öğe 6px, 999px yalnız durum
     göstergesi (.pill, .badge, rozet) — docs/design-system.md §6. */
  --radius: 10px;
  --radius-sm: 6px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  /* iki seviyeli gölge — docs/design-system.md §5: dinlenmede gölgesiz,
     yükseltilmiş yüzeyler (dropdown/mega menü/modal/drawer) için tek tip. */
  --shadow-raised: 0 4px 16px oklch(0.1 0.03 260 / 0.08);
}

/* ─── yazı tipi şemaları ("Tema / Header" panelinden seçilir) ─────────
   "modern" = :root varsayılanı. Diğer üçü yalnız gereken değişkeni ezer. */
html[data-fontscheme="industrial"] {
  --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
html[data-fontscheme="warm"] {
  --font-sans:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: 'Rubik', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
html[data-fontscheme="simple"] {
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

html[data-theme="dark"] {
  --bg:      oklch(0.19 0.018 260);
  --surface: oklch(0.24 0.022 260);
  --fg:      oklch(0.93 0.012 260);
  --muted:   oklch(0.66 0.016 260);
  --border:  oklch(0.34 0.02 260);

  --accent:        #FB9440;
  --accent-strong: #F5820A;
  --blue:          #3D78DB;
  --blue-strong:   #2C63C4;
  --blue-soft:     color-mix(in srgb, var(--blue) 22%, transparent);

  --navy:        #1F5FCC;
  --navy-2:      #143A7B;
  --navy-line:   #4E85E4;
  --on-navy:     #F4F8FE;
  --on-navy-dim: #D8E3F9;

  --accent-soft:   color-mix(in srgb, var(--accent) 24%, transparent);
  --fg-soft:       color-mix(in oklch, var(--fg) 9%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; scroll-margin-top: 120px; }
p { margin: 0; text-wrap: pretty; }
/* odak halkası: opak, ≥3:1 kontrastlı mavi (eski --accent turuncu açık zeminde 3:1 altındaydı) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
/* dolu zeminli düğmelerde dışarıdaki mavi halka kaybolmasın diye koyu/nötr renk */
.btn-primary:focus-visible, .btn-accent:focus-visible, .row-add:focus-visible,
.pdp-summary form.cart .single_add_to_cart_button:focus-visible { outline-color: var(--fg); }

/* içeriğe atla — yalnız klavye odağında görünür */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); border: 1px solid var(--blue);
  font-size: 13px; font-weight: 700; box-shadow: 0 6px 20px color-mix(in oklch, var(--navy) 20%, transparent);
  transform: translateY(-160%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }
/* skip-link hedefi: programatik odakta klavye kullanıcısına odağın gerçekten
   içeriğe taşındığını göster (WCAG 2.4.7) */
#content:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

.brand-chip, .parttype, .viewtoggle button, .icon-btn, .city-select,
.header-actions .link-login, .pcard, .fab-btn, .stepper button, .row-add,
.foot-grid a, .util a, .search-results button, .qtable tbody tr {
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: var(--sp-4); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }

h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.eyebrow {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-strong); font-weight: 600;
}
.lead { font-size: 15px; color: var(--muted); max-width: 56ch; }
.meta { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--muted); }

/* ─── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform 60ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-outline { border-color: var(--border); color: var(--fg); background: var(--surface); }
.btn-outline:hover { border-color: var(--fg); background: var(--fg-soft); }
.btn-navy { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--fg); background: var(--fg-soft); }
.btn-quiet { background: color-mix(in oklch, var(--navy-2) 55%, transparent); border-color: var(--navy-line); color: var(--on-navy); }
.btn-quiet:hover { background: color-mix(in oklch, var(--navy-2) 82%, transparent); border-color: var(--on-navy-dim); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-lg { padding: 12px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--border); border-color: var(--border); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.02em;
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 600;
}
.pill--pay {
  --pill-h: 28;
  padding: 5px 12px; font-size: 12px; letter-spacing: 0.01em; font-weight: 700;
  background: oklch(0.96 0.045 var(--pill-h));
  color: oklch(0.44 0.15 var(--pill-h));
  border: 1px solid oklch(0.72 0.14 var(--pill-h) / 0.55);
  animation: cepdeposu-pill-attn 2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.pill--pay:nth-of-type(2) { animation-delay: 0.4s; }
.pill--pay:nth-of-type(3) { animation-delay: 0.8s; }
.pill--pay:nth-of-type(4) { animation-delay: 1.2s; }
.pill--pay:hover { transform: translateY(-1px); }

html[data-theme="dark"] .pill--pay {
  background: oklch(0.33 0.06 var(--pill-h));
  color: oklch(0.9 0.07 var(--pill-h));
  border-color: oklch(0.55 0.1 var(--pill-h) / 0.6);
}

/* ─── karanlık mod: bileşen düzeltmeleri ───────────────────────────────
   Token takası tek başına yetmiyordu: --navy / --navy-2 markanın doygun
   mavisi olarak kalıyor, near-black yüzeylerin üstünde "parlak mavi levha"
   gibi duruyordu (üst şerit, footer, teşvik bandı) ve koyu marka logoları
   koyu kart üstünde kayboluyordu. UI kılavuzu: karanlık modda doygunluğu
   düşür, ton varyantı kullan, kontrastı ayrı test et. */

/* üst yardımcı şerit */
html[data-theme="dark"] .util {
  background: color-mix(in oklch, var(--navy) 12%, var(--surface));
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .util a { color: var(--on-navy-dim); }
html[data-theme="dark"] .util a:hover { color: var(--fg); }

/* footer — parlak mavi levha yerine koyu yüzey */
html[data-theme="dark"] .site-footer {
  background: color-mix(in oklch, var(--navy) 9%, var(--bg));
  color: var(--muted);
  border-top: 1px solid var(--border);
}
html[data-theme="dark"] .foot-grid a { color: var(--fg); }
html[data-theme="dark"] .foot-grid h4,
html[data-theme="dark"] .foot-grid p,
html[data-theme="dark"] .foot-base .meta { color: var(--muted); }
html[data-theme="dark"] .foot-base { border-top-color: var(--border); }

/* teşvik bandı — tam doygun mavi yerine mavi tonlu koyu panel */
html[data-theme="dark"] .band {
  background: color-mix(in oklch, var(--navy) 15%, var(--bg));
  color: var(--fg);
  border-block: 1px solid color-mix(in oklch, var(--navy) 40%, var(--border));
}
html[data-theme="dark"] .band h2 { color: var(--fg); }
html[data-theme="dark"] .band .tier {
  background: color-mix(in oklch, var(--navy) 20%, var(--surface));
  border-color: color-mix(in oklch, var(--navy) 42%, var(--border));
}
html[data-theme="dark"] .band .tier .t-qty,
html[data-theme="dark"] .band-cta .fine { color: var(--muted); }

/* ana sayfa marka ızgarası — koyu logo PNG'leri karanlık kartta kaybolur,
   sadece görselli kartlarda logoyu küçük beyaz zemine al (yazı fallback'i
   zaten --fg ile okunur) */
html[data-theme="dark"] .brandcard__logo:has(img) {
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
}
html[data-theme="dark"] .brandcard__logo img { max-height: 30px; }

@keyframes cepdeposu-pill-attn {
  0%, 100% { box-shadow: 0 1px 2px oklch(0.7 0.14 var(--pill-h) / 0.22); transform: translateY(0); }
  50%      { box-shadow: 0 3px 12px oklch(0.7 0.16 var(--pill-h) / 0.5); transform: translateY(-1px); }
}

.page-head__pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 8px; /* §15: durum göstergesi değil, pill de değil */
  font-family: var(--font-sans); font-size: 11px; color: var(--muted); background: var(--surface);
}

/* ─── utility strip + header ──────────────────────────────────────── */
/* Ink: yapısal/bilgi şeridi — nav/interaction rengi (Primary) değil. */
.util { background: var(--ink); color: var(--on-navy-dim); font-size: 12px; }
.util .container { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.util a { color: var(--on-navy-dim); }
.util a:hover { color: var(--on-navy); }
.util .util-list { display: flex; gap: var(--sp-5); }
.util .util-list span { display: inline-flex; align-items: center; gap: 6px; }
.util svg { width: 13px; height: 13px; opacity: .8; }

/* beyaz başlık: logo | kısa AJAX arama + kargo sayacı | aksiyonlar */
/* header + marka şeridi TEK sticky blok olarak birlikte sabitlenir — böylece
   şerit her zaman header'ın gerçek yüksekliğinin tam altında durur, sabit
   piksel tahminine (eski top: 66px) ve ekran daralınca header sarınca
   bozulmaya gerek kalmaz. */
.header-stack { position: sticky; top: 0; z-index: 40; }
.site-header { background: var(--surface); color: var(--fg); border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; gap: var(--sp-4); min-height: 66px; padding-block: 10px; }
.brand { flex: none; display: inline-flex; align-items: center; gap: 9px; font-weight: 750; font-size: 19px; letter-spacing: -0.03em; color: var(--fg); }
.brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.brand .brand-mark svg { width: 15px; height: 15px; }
.brand em { color: var(--blue); font-style: normal; }
/* Logo: aspect ratio preserved; bounded on BOTH axes so any source image
   scales down proportionally into this box (no stretch, no crop).
   Selectors don't rely on .brand nesting the link — the custom logo prints its
   own <a>, so we also match it directly under .site-header. */
.brand .custom-logo-link,
.site-header .custom-logo-link {
  display: inline-flex;
  align-items: center;
  max-width: 190px;
  line-height: 0;
}
.brand .custom-logo,
.site-header img.custom-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 190px;
  max-height: 40px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .brand .custom-logo-link,
  .site-header .custom-logo-link { max-width: 132px; }
  .brand .custom-logo,
  .site-header img.custom-logo { max-width: 132px; max-height: 30px; }
}
/* Koyu mod logosu: "Tema / Header" ekranından ayrı bir görsel atanmışsa,
   koyu modda normal logo gizlenir ve bu gösterilir. */
.brand--logo .brand-logo-dark-link { display: none; }
[data-theme="dark"] .brand--logo.has-dark-logo .custom-logo-link:not(.brand-logo-dark-link) { display: none; }
[data-theme="dark"] .brand--logo.has-dark-logo .brand-logo-dark-link { display: inline-flex; }

/* ── başlık arama kutusu (görseldekinden bir tık dar) ── */
.hsearch { flex: 1 1 auto; min-width: 0; max-width: 460px; position: relative; display: flex; align-items: center; }
.hsearch__icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
/* Not: `.hsearch .hsearch__input` (0,2,0) — aşağıdaki genel
   `input[type="search"]` element+attribute seçicisi (0,1,1) tek sınıflı
   `.hsearch__input`'tan (0,1,0) daha özgül olduğu için soldaki 38px
   padding'i (ikon payı) 12px'e ezip yazı/büyüteç çakışmasına yol açıyordu
   (regresyon) — özgüllük burada artırılarak düzeltildi. */
.hsearch .hsearch__input {
  width: 100%; height: 42px; padding: 0 40px 0 38px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg);
  font: inherit; font-size: 13px;
}
.hsearch__input::placeholder { color: var(--muted); }
.hsearch__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); background: var(--surface); }
.hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hsearch__clear {
  position: absolute; right: 8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.hsearch__clear svg { width: 15px; height: 15px; }
.hsearch__clear:hover { background: var(--blue-soft); color: var(--fg); }
.hsearch__clear[hidden] { display: none; }

.hsearch__panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: 6px;
}
.hsearch__panel[hidden] { display: none; }
.hsearch__group-label {
  display: block; padding: 8px 10px 4px; font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.hsearch__opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg);
  font-size: 13px; line-height: 1.3;
}
.hsearch__opt:hover, .hsearch__opt.is-active { background: var(--blue-soft); }
.hsearch__opt .th {
  width: 34px; height: 34px; flex: none; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--border); background: var(--fg-soft); display: grid; place-items: center;
}
.hsearch__opt .th img { width: 100%; height: 100%; object-fit: cover; }
.hsearch__opt .tx { min-width: 0; flex: 1; }
.hsearch__opt .tx b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsearch__opt .tx small { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.hsearch__opt .pr { flex: none; font-weight: 700; font-size: 12px; white-space: nowrap; }
.hsearch__opt .pr del { color: var(--muted); font-weight: 500; margin-right: 4px; }
.hsearch__opt--model .th { background: var(--blue-soft); color: var(--blue); }
.hsearch__empty, .hsearch__typing { padding: 14px 12px; text-align: center; color: var(--muted); font-size: 12px; }
.hsearch__all {
  display: block; width: 100%; text-align: center; padding: 9px; margin-top: 4px;
  border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--blue); font-weight: 700; font-size: 12px; border-radius: 0 0 8px 8px;
}
.hsearch__all:hover { background: var(--blue-soft); }

/* ── başlığa gömülü kargo geri sayım kutusu (cepdeposu-b2b çıktısı) ── */
/* Eklentinin "compact" varyantı koyu zemin için tasarlı (beyaz-üstü-beyaz);
   beyaz başlıkta görünür kalması için renkleri burada tema token'larına çekiyoruz.
   order: 2 → sayaç başlığın en sağına, hesap/sepet aksiyonlarının (order: 1)
   hemen sağına geçer; masaüstü sırası: logo | arama | Hesabım · Sepet · sayaç. */
.header-cutoff { flex: none; order: 2; min-width: 0; }
/* SABİT genişlik: kutu, gösterilen kargo firmasının adı/logosu değiştikçe
   daralıp genişlemesin — yoksa yanındaki "Hesabım / Sepet" bloğu oynuyor.
   Uzun firma adları .__cname'de üç noktayla kırpılır. */
.header-cutoff .cepdeposu-cutoff-timer--compact { width: 296px; max-width: 100%; }
.header-cutoff .cepdeposu-cutoff-timer__card { background: var(--bg); border-color: var(--border); padding: 4px 10px; gap: 4px; }
.header-cutoff .cepdeposu-cutoff-timer__card-row { gap: 10px; }
.header-cutoff .cepdeposu-cutoff-timer__carrier { gap: 9px; flex: 1 1 auto; min-width: 0; }
.header-cutoff .cepdeposu-cutoff-timer__ctext { flex: 1 1 auto; min-width: 0; }
/* alçak başlık için: logo + saat pili + yazılar hepsi bir tık küçültülür */
.header-cutoff .cepdeposu-cutoff-timer__logo { height: 20px !important; max-width: 74px !important; }
.header-cutoff .cepdeposu-cutoff-timer__cname {
  color: var(--fg); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-cutoff .cepdeposu-cutoff-timer__label { color: var(--muted); font-size: 10px; }
.header-cutoff .cepdeposu-cutoff-timer__clock { background: #122647; color: #fff; font-size: 12px; padding: 2px 8px; }
.header-cutoff .cepdeposu-cutoff-timer__more {
  background: var(--surface); border-color: var(--border); color: var(--fg);
  font-size: 10px; padding: 2px 8px;
}
.header-cutoff .cepdeposu-cutoff-timer__more:hover { background: var(--fg-soft); border-color: var(--fg); }

.header-actions { flex: none; order: 1; margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.header-actions .link-login { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; padding: 8px 6px; }
.header-actions .link-login:hover { color: var(--blue); }
.header-actions .link-login svg { width: 16px; height: 16px; }

.icon-btn {
  position: relative; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; color: var(--fg); background: var(--surface);
}
.icon-btn:hover { border-color: var(--fg); }
.icon-btn svg { width: 17px; height: 17px; }
/* sadece ikon — metin etiketi kaldırıldı (gündüz güneş / gece ay) */
.theme-toggle { width: 40px; padding: 0; gap: 0; justify-content: center; }
.theme-toggle .ic-moon { display: none; }
.theme-toggle .ic-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ic-moon { display: block; }

.cart-btn-lg { position: relative; height: 40px; padding: 0 16px; }
.cart-btn-lg svg { width: 17px; height: 17px; }
.cart-btn-lg .badge {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: rgba(255,255,255,0.22); color: #fff;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}

/* ─── hero + part finder ─────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, color-mix(in oklch, var(--navy) 6%, var(--bg)), var(--bg)); border-bottom: 1px solid var(--border); }
.hero .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-5); padding-block: var(--sp-6); align-items: start; }
.hero-side { display: flex; flex-direction: column; gap: var(--sp-4); }

.finder { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-5); }
.finder-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.finder-head h3 { font-size: 18px; }
.finder-head .finder-sub { font-size: 12px; color: var(--muted); margin: 0; }

/* cepdeposu-b2b [cepdeposu_cihaz_secici] widget stili ayrı dosyada
   (cepdeposu-b2b/assets/cihaz-matrisi-selector.css) yönetiliyor —
   buradaki .apply-card hero'nun geri kalanı içindir. */

.apply-card {
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-5);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--navy) 8%, transparent);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.apply-card .eyebrow { color: var(--muted); }
.apply-card h3 { font-size: 19px; line-height: 1.25; margin: 6px 0 8px; }
.apply-card p { font-size: 13px; color: var(--muted); }
.tier-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
}
.tier-badge .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.tb-bronze .dot { background: var(--bronze); }
.tb-silver .dot { background: var(--silver); }
.tb-gold .dot { background: var(--gold); }
.ac-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.apply-card .fine { font-size: 11px; color: var(--accent-strong); margin: 0; font-weight: 600; }

/* ana sayfada bağımsız bölüm olarak: ikincil bilgi, CTA gibi görünmesin —
   üstünde/altında catalog/action-cards'tan daha dar bir boşluk yeterli. */
.trust-strip { padding-block: var(--sp-4); }
/* tek ortak yüzeyli service assurance şeridi — dört ayrı floating kart
   yerine tek border/radius/background, sütunlar arasında ince separator
   (§Brand Priority + Trust Strip Polish, bkz. trust-strip.php). */
.assurance {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.assurance__item {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}
.assurance__item + .assurance__item { border-left: 1px solid var(--border); }
.assurance__icon { flex: none; width: 20px; height: 20px; color: var(--muted); }
.assurance__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.assurance__text strong { font-size: 13px; font-weight: 700; }
.assurance__text span { font-size: 11px; color: var(--muted); }

/* ─── ana sayfa aksiyon kartları (Hızlı Sipariş / Teknisyen Panelim /
   Tamirci Dizini) — eskiden header'daki aux çip grubuydu, Post Redesign
   IA Polish ile buraya taşındı. ─────────────────────────────────────── */
.iaction-section { padding-block: 0 var(--sp-6); }
.iaction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.iaction-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: 14px; border: 1px solid transparent;
  color: #fff; box-shadow: 0 1px 2px color-mix(in oklch, var(--navy) 8%, transparent);
}
.iaction-card:hover { filter: brightness(0.96); }
.iaction-card--accent { background: var(--accent); }
.iaction-card--accent:hover { background: var(--accent-strong); filter: none; }
.iaction-card--primary { background: var(--primary); }
.iaction-card--ok { background: var(--ok); }
.iaction-card__icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(255,255,255,0.18);
}
.iaction-card__icon svg { width: 20px; height: 20px; }
.iaction-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iaction-card__title { font-size: 15px; }
.iaction-card__desc { font-size: 12px; opacity: 0.88; }
.iaction-card__arrow { flex: none; font-size: 16px; opacity: 0.8; }

/* ─── incentive band ─────────────────────────────────────────────── */
.band { background: var(--navy); color: var(--on-navy); }
.band .container { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); padding-block: var(--sp-5); align-items: center; }
.band h2 { font-size: 18px; margin-bottom: var(--sp-3); color: var(--on-navy); }
.tiers { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tier {
  display: flex; flex-direction: column; padding: 8px 12px; border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--navy-2) 65%, transparent); border: 1px solid var(--navy-line); min-width: 118px;
}
.tier .t-qty { font-size: 11px; color: var(--on-navy-dim); font-family: var(--font-sans); }
.tier .t-off { font-size: 16px; font-weight: 750; }
.tier.wire { border-color: color-mix(in oklch, var(--accent) 55%, var(--navy-line)); }
.tier.wire .t-off { color: var(--accent); }
.band-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.band-cta .fine { font-size: 11px; color: var(--on-navy-dim); max-width: 34ch; text-align: right; }

/* ─── category nav ───────────────────────────────────────────────── */
.catnav { background: var(--surface); border-bottom: 1px solid var(--border); }
.catnav .container { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.brand-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
/* justify-content:space-between — desktop'ta şerit container genişliğini tam
   kullanır (pill'ler doğal genişliğinde kalır, kalan alan aralara dengeli
   dağılır); overflow olduğunda (mobil) tarayıcı bunu doğal olarak flex-start
   gibi davranarak scroll'a düşürür, yine de 920px altında açıkça sıfırlanır. */
.brand-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-3); scrollbar-width: thin; }
.brand-scroll::-webkit-scrollbar { height: 6px; }
.brand-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.brand-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--surface); color: var(--fg);
}
.brand-chip:hover { border-color: var(--fg); }
/* seçili durum = interaction, Primary rengi (§16 disiplini — Accent'e taşınmaz) */
.brand-chip.active { background: var(--primary); color: var(--on-navy); border-color: var(--primary); }
.parttypes { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-bottom: var(--sp-3); border-top: 1px dashed var(--border); padding-top: var(--sp-3); }
.parttype {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.parttype:hover { color: var(--fg); border-color: var(--fg); }
.parttype.active { color: var(--accent-strong); border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.parttype svg { width: 14px; height: 14px; }
.parttypes--inline { border-top: 0; padding-top: 0; padding-bottom: 0; margin-bottom: var(--sp-4); }

/* ─── marka mega menü (header marka şeridi) ──────────────────────── */
.brand-chip-wrap { flex: none; display: inline-flex; }
.mega-host { position: relative; }
.mega:not([hidden]) {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  display: grid; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4);
  box-shadow: var(--shadow-raised);
  min-height: 96px; /* modeller AJAX'la gelene kadar sıçramayı azaltır */
}
.mega__search { position: relative; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; background: var(--surface); }
.mega__search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.mega__search-input { flex: 1 1 auto; border: 0; background: none; color: var(--fg); font-size: 13px; outline: none; }
.mega__search-input::placeholder { color: var(--muted); }
.mega__search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 2;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  max-height: 260px; overflow-y: auto; padding: 4px; }
.mega__search-results a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--fg); }
.mega__search-results a:hover { background: var(--accent-soft); }
.mega__models { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: var(--sp-4); }
.mega__models li { break-inside: avoid; }
.mega__models a { display: block; padding: 6px 0; font-size: 13px; color: var(--muted); }
.mega__models a:hover { color: var(--fg); text-decoration: underline; }
.mega__models .mega__loading, .mega__models .mega__empty { columns: 1; padding: 6px 0; font-size: 13px; color: var(--text-muted); }
.mega__all { justify-self: start; font-weight: 600; font-size: 13px; color: var(--primary); }
.mega__all:hover { text-decoration: underline; }
/* kapatma düğmesi yalnız mobil/dar görünümde (menü statik yığıldığında)
   gösterilir — masaüstünde hover-out / dışarı tıkla zaten kapatıyor */
.mega__close { display: none; }

/* ─── ana sayfa marka ızgarası ──────────────────────────────────── */
.brandgrid { padding-block: var(--sp-6); }
.brandgrid__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.brandgrid__head h2 { margin: 2px 0 0; }
.brandgrid__all { font-weight: 600; font-size: 13px; color: var(--blue); flex: none; }
.brandgrid__all:hover { text-decoration: underline; }
.brandgrid__list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.brandcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 116px; padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg);
  text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; }
.brandcard:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 10px 24px oklch(0.2 0.02 260 / 0.12); }
.brandcard__logo { display: grid; place-items: center; height: 44px; }
.brandcard__logo img { max-height: 44px; max-width: 132px; width: auto; height: auto; object-fit: contain; }
.brandcard__wordmark { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.brandcard__name { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ─── marka sayfası = model dizini ──────────────────────────────── */
.modeldir { padding-bottom: var(--sp-6); }
.modeldir__search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 420px;
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; background: var(--surface); margin-bottom: var(--sp-4); }
.modeldir__search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.modeldir__search-input { flex: 1 1 auto; border: 0; background: none; color: var(--fg); font-size: 13px; outline: none; }
.modeldir__search-input::placeholder { color: var(--muted); }
.modeldir__search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-height: 280px; overflow-y: auto; padding: 4px; }
.modeldir__search-results a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--fg); }
.modeldir__search-results a:hover { background: var(--accent-soft); }
.modeldir__list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: var(--sp-5); }
.modeldir__list li { break-inside: avoid; }
.modeldir__list a { display: block; padding: 7px 0; font-size: 13px; color: var(--fg); border-bottom: 1px solid var(--border); }
.modeldir__list a:hover { color: var(--blue); }

/* ─── catalog section + view toggle ──────────────────────────────── */
.catalog { padding-block: var(--sp-6); }
.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.catalog-head .meta { margin-top: 4px; }

.viewtoggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.viewtoggle a, .viewtoggle button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 5px; font-size: 12px; font-weight: 650; color: var(--muted); border: 0; background: transparent;
}
.viewtoggle svg { width: 14px; height: 14px; }
.viewtoggle button[aria-pressed="true"], .viewtoggle a[aria-pressed="true"] { background: var(--primary); color: var(--on-navy); }
.viewtoggle button:not([aria-pressed="true"]):hover, .viewtoggle a:not([aria-pressed="true"]):hover { color: var(--fg); }

.toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar .count-res { font-size: 12px; color: var(--muted); }
.toolbar .sort { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.toolbar select.mini, .toolbar select {
  font: inherit; font-size: 12px; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--fg);
}

/* /shop/ toolbar model search (Product Discovery UX, 2026-09-05 — sadeleştirme
   turu: popüler aramalar kaldırıldı, marka select'i arama kutusunun yanına
   geldi). `#cepdeposu-shop-search` bilerek `#cepdeposu-shop-listing`
   (AJAX ile innerHTML'i değişen alan) DIŞINDA kalır ki arama kutusunun/marka
   select'inin olay dinleyicileri her seçimden sonra kaybolmasın; görsel
   olarak Filtreler/Vitrin/Liste şeridinin hemen ÜSTÜNDE kompakt bir satır
   olarak durur. Desktop: [Marka] [Model ara] yan yana. Mobile: marka üstte,
   model arama altta (tam genişlik). */
.shopsearch { margin-bottom: var(--sp-3); display: flex; align-items: flex-start; gap: 8px; }
.shopsearch__brand { flex: 0 0 200px; height: 44px; }
.shopsearch__box {
  position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 0 var(--sp-3); height: 44px;
}
.shopsearch__box:focus-within { border-color: var(--primary); outline: 2px solid color-mix(in oklch, var(--primary) 30%, transparent); outline-offset: -1px; }
.shopsearch__box svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.shopsearch__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 14px; height: 100%; }
.shopsearch__input:focus { outline: none; }
.shopsearch__submit { flex: none; border: 0; border-radius: var(--radius-sm); background: var(--primary); color: #fff; min-width: 64px; height: 32px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.shopsearch__submit:hover { background: var(--primary-strong, #0b4edb); }
.shopsearch__submit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.shopsearch__results {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgb(0 0 0 / 0.12); padding: 6px;
}
.shopsearch__results > * {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--fg); cursor: pointer;
}
.shopsearch__results > .is-active { background: var(--accent-soft); color: var(--accent-strong); }
@media (max-width: 720px) {
  .shopsearch { flex-direction: column; align-items: stretch; }
  .shopsearch__brand { flex: none; width: 100%; height: 46px; }
  .shopsearch__box { height: 46px; }
  .shopsearch__submit { min-width: 60px; padding-inline: 12px; }
}
#cepdeposu-shop-listing[aria-busy="true"] { opacity: 0.55; pointer-events: none; transition: opacity 0.12s ease; }

/* archive-product.php'de toolbar bir kart görünümünde */
.woocommerce-page .toolbar,
.listing .toolbar {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-3) var(--sp-4);
}

/* ─── product grid (Vitrin) ─────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.pcard:hover { border-color: color-mix(in oklch, var(--navy) 30%, var(--border)); box-shadow: 0 6px 20px color-mix(in oklch, var(--navy) 10%, transparent); }
.pcard .ph-img {
  aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in oklch, var(--navy) 9%, transparent), transparent 60%),
    var(--fg-soft);
  border-bottom: 1px solid var(--border); color: color-mix(in oklch, var(--fg) 35%, transparent);
}
.pcard .ph-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard .ph-img svg { width: 46px; height: 46px; }
.pcard .ph-img .code-chip {
  position: absolute; left: 10px; bottom: 10px; font-family: var(--font-mono);
  font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--surface);
  border: 1px solid var(--border); color: var(--muted);
}
.stock-flag {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; font-family: var(--font-sans); padding: 3px 7px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
.stock-flag .dot { width: 7px; height: 7px; border-radius: 999px; }
.stock-flag.s-ok   { color: var(--ok); }    .stock-flag.s-ok .dot   { background: var(--ok); }
.stock-flag.s-low  { color: var(--warn); }  .stock-flag.s-low .dot  { background: var(--warn); }
.stock-flag.s-out  { color: var(--bad); }   .stock-flag.s-out .dot  { background: var(--bad); }
.stock-flag.s-back { color: var(--blue); }  .stock-flag.s-back .dot { background: var(--blue); }

/* Nokta için çok hafif nabız — "Az stok" ve "Yolda" durumlarında dikkat çeker.
   prefers-reduced-motion açıksa global kural (bkz. altta) bunu durdurur. */
@keyframes cepdeposu-stock-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.35); opacity: 0.6; }
}
.stock-flag.s-low .dot, .stock-flag.s-back .dot,
.stock-cell.s-low .dot, .stock-cell.s-back .dot,
.pdp-summary .stock.low-stock::before,
.pdp-summary .stock.available-on-backorder::before {
  animation: cepdeposu-stock-pulse 1.8s ease-in-out infinite;
}

/* ─── ürün rozetleri: indirim (turuncu) / yeni (yeşil) ─────────── */
.pbadges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pbadge {
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.01em;
  padding: 2px 6px; border-radius: 999px; white-space: nowrap; /* §10: pill = TEK radius kullanımı */
}
.pbadge--sale { background: var(--accent-soft); color: var(--accent-strong); }
.pbadge--new  { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pbadge--kalite { background: color-mix(in oklch, var(--muted) 14%, var(--surface)); color: var(--fg); }

/* Vitrin kartı — görselin sol üst köşesinde, alt alta */
.pcard .ph-img .pbadges {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  flex-direction: column; align-items: flex-start;
}
.pcard .ph-img .pbadges { gap: 5px; }
.pcard .ph-img .pbadge {
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; padding: 4px 8px;
}
.pcard .ph-img .pbadge--sale { color: var(--accent-strong); }
.pcard .ph-img .pbadge--new  { color: var(--ok); }

/* Hızlı Sipariş Tablosu — ürün adının yanında, satır içi */
.qtable .c-txt .pbadge { font-size: 9px; }

/* ─── kalite sınıfı rozeti: vitrin kartı + Hızlı Sipariş tablosu ortak ─ */
.qgrade {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  padding: 3px 8px; border-radius: 4px;
  color: var(--blue); background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.qgrade__icon { display: inline-flex; width: 12px; height: 12px; flex: none; }
.qgrade__icon svg { display: block; width: 100%; height: 100%; }
.qgrade__label { min-width: 0; }
.qgrade--refurbished {
  color: var(--accent-strong); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.pcard-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.qtable .c-txt .qgrade { font-size: 9px; padding: 2px 6px; gap: 4px; }
.qtable .c-txt .qgrade__icon { width: 10px; height: 10px; }

/* Tekil ürün sayfası — galerinin sol üst köşesinde */
.pdp-media .pbadges {
  position: absolute; z-index: 6;
  left: calc(var(--sp-4) + 8px); top: calc(var(--sp-4) + 8px);
  flex-direction: column; align-items: flex-start;
}
.pdp-media .pbadge { background: var(--surface); border: 1px solid var(--border); }

/* ─── PDP "Parça Özellikleri" bölümü ─── */
.pdp-part-specs { margin: 24px 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pdp-part-specs h2 { margin: 0 0 12px; font-size: 1.05rem; }
.pdp-part-specs__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; }
.pdp-part-specs__list div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 2px; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
.pdp-part-specs__list dt { color: var(--muted); margin: 0; flex: none; display: inline-flex; align-items: center; gap: 8px; }
.pdp-part-specs__ico { width: 16px; height: 16px; flex: none; opacity: .6; }
.pdp-part-specs__list dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pdp-part-specs__list div.is-nowrap dd { white-space: nowrap; overflow-wrap: normal; }
.pdp-part-specs__list div.is-wide { grid-column: 1 / -1; }
.pdp-part-specs__list div.is-wide dd { text-align: left; }
@media (max-width: 720px) {
	.pdp-part-specs { padding: 16px; }
	.pdp-part-specs__list { grid-template-columns: 1fr; column-gap: 0; }
	/* dar ekranda değer sütununu küçült ve uzun SKU / parça-model kodu /
	   model adlarının sayfa dışına taşmasını engelle (sarmaya izin ver) */
	.pdp-part-specs__list div { gap: 10px; font-size: .9rem; }
	.pdp-part-specs__list dd { min-width: 0; overflow-wrap: anywhere; }
	.pdp-part-specs__list div.is-nowrap dd { white-space: normal; overflow-wrap: anywhere; }
}
.pdp-part-specs__colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pdp-part-specs__colors .k { color: var(--muted); margin-right: 4px; }
.pdp-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; }
.pdp-swatch::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sw, #ccc); border: 1px solid color-mix(in oklch, var(--fg) 15%, transparent); }
.pdp-part-specs__apple { margin: 14px 0 0; padding: 8px 12px; border-radius: 8px; font-size: .9rem; }
.pdp-part-specs__apple--warn { background: color-mix(in oklch, var(--danger, #c0392b) 14%, var(--surface)); color: var(--danger, #8a1c12); }
.pdp-part-specs__apple--ok { background: color-mix(in oklch, var(--ok) 14%, var(--surface)); color: var(--ok); }
.pdp-part-specs__apple--neutral { background: color-mix(in oklch, var(--muted) 12%, var(--surface)); color: var(--fg); }

.pcard-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
/* uzun ürün adı 2 satırda kırpılır — tek uzun başlık grid satırındaki
   TÜM kartları kontrolsüz büyütmesin (title attribute'u tam adı taşır). */
.pcard-body h3 {
  font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.compat { display: flex; flex-wrap: wrap; gap: 4px; }
.compat .tag { font-size: 10px; padding: 1px 6px; }
.price-block { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.price-retail { font-size: 12px; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--muted) 60%, transparent); }
.price-dealer { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.price-dealer small { font-size: 11px; font-weight: 600; color: var(--muted); }
/* §12 B2B Price/Advantage Component — kart fiyatının hemen altında tek
   satır; retail'de PHP tarafında hiç render edilmez (bkz. functions.php
   cepdeposu_tier_price_note). Kademe rengi yalnız nokta, metin rengi değil.
   Faz 4F: kanonik bileşen — kart/PDP/sepet/Hızlı Sipariş hepsi bu sınıfı
   kullanır (bkz. docs/design-system.md §12). */
.pcard-tier { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.pcard-tier .dot { width: 6px; height: 6px; border-radius: 999px; flex: none; background: var(--muted); }
.pcard-tier--bronze .dot { background: var(--tier-bronze); }
.pcard-tier--silver .dot { background: var(--tier-silver); }
.pcard-tier--gold   .dot { background: var(--tier-gold); }
.pcard .btn { margin-top: var(--sp-2); }

/* ─── quick order table ─────────────────────────────────────────── */
.qtable-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.qscroll { overflow-x: auto; }
.qtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.qtable thead th {
  background: var(--navy); color: var(--on-navy);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600; text-align: left; padding: 11px 14px; white-space: nowrap;
}
.qtable thead th.r { text-align: right; }
.qtable thead th.c { text-align: center; }
.qtable tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.qtable tbody tr:nth-child(even) { background: color-mix(in oklch, var(--fg) 2.5%, transparent); }
.qtable tbody tr { cursor: pointer; }
.qtable tbody tr:hover { background: var(--accent-soft); }
.qtable .c-code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.qtable .c-name { font-weight: 600; min-width: 210px; white-space: nowrap; }
/* meta satırı ve "Ürün Görseli" çip etiketi yalnızca mobil kart düzeninde */
.qtable .qo-meta, .qtable .thumb-chip { display: none; }
.qtable .c-name .thumb {
  width: 34px; height: 34px; padding: 0; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-right: 10px;
  overflow: hidden; border: 1px solid var(--border);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in oklch, var(--navy) 10%, transparent), transparent 60%),
    var(--fg-soft);
  color: color-mix(in oklch, var(--fg) 45%, transparent);
}
.qtable .c-name .thumb svg { width: 18px; height: 18px; }
.qtable .c-name .thumb img { width: 100%; height: 100%; object-fit: cover; }
.qtable .c-name .thumb.has-img { cursor: zoom-in; }
.qtable .c-name .thumb.has-img:hover { border-color: var(--accent); }

/* büyütülmüş ürün görseli (hover/tıkla) */
.thumb-zoom {
  position: absolute; z-index: 80; width: 240px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px color-mix(in oklch, var(--navy) 22%, transparent);
  pointer-events: none;
}
.thumb-zoom img { width: 100%; height: auto; border-radius: 6px; display: block; }

/* dokunmatik: tam ekran ürün görseli (çipe basınca) */
.thumb-light {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in oklch, var(--navy-2) 82%, transparent);
}
.thumb-light[hidden] { display: none; }
.thumb-light img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 12px; background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Hızlı Sipariş Tablosu ürün adları büyük harf (telefon parçaları) */
.qtable td.c-name .c-txt .qv-open { text-transform: uppercase; }

/* ─── hızlı bakış (quick view) ──────────────────────────────────── */
.qv-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.qv-modal[hidden] { display: none; }
.qv-backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--navy-2) 65%, transparent); backdrop-filter: blur(2px); }
.qv-dialog {
  position: relative; z-index: 1; width: min(860px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 64px color-mix(in oklch, var(--navy) 30%, transparent);
}
.qv-x {
  position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--navy) 18%, transparent);
}
.qv-x:hover { color: var(--fg); border-color: var(--fg); }
.qv-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); padding: var(--sp-5); }
.qv-body .qv-title { padding-right: 40px; }
.qv-status { grid-column: 1 / -1; padding: var(--sp-6); text-align: center; color: var(--muted); }
.qv-gallery { display: flex; flex-direction: column; gap: var(--sp-2); }
.qv-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--border);
  border-radius: 10px; background: var(--fg-soft); cursor: pointer; opacity: .55;
}
.qv-gallery img.is-active { opacity: 1; border-color: var(--accent); }
.qv-gallery img:only-child { cursor: default; opacity: 1; }
.qv-gallery.is-empty { align-self: start; }
.qv-noimg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; aspect-ratio: 4 / 3; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--fg-soft); color: var(--muted);
}
.qv-noimg em { font-style: normal; font-size: 11px; letter-spacing: 0.04em; }
.qv-info { display: flex; flex-direction: column; gap: var(--sp-3); }
.qv-title { font-size: 20px; line-height: 1.25; }
.qv-sku { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.qv-price { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.qv-price del { font-size: 14px; font-weight: 500; color: var(--muted); margin-right: 6px; }
.qv-compat { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qv-compat-label { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); width: 100%; }
.qv-desc { font-size: 13px; color: var(--muted); }
.qv-desc p { margin-bottom: var(--sp-2); }
.qv-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }
.qv-buy { display: flex; gap: var(--sp-2); align-items: stretch; }
.qv-qty {
  width: 64px; text-align: center; padding: 0 6px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--fg); font: inherit;
}
@media (max-width: 640px) {
  .qv-body { grid-template-columns: 1fr; }
}
.qtable .c-name .c-txt { min-width: 0; }
.qtable .c-name .sub { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.qtable .c-name .c-txt { display: inline-flex; align-items: flex-start; gap: 6px; vertical-align: middle; white-space: normal; }
/* Masaüstü Liste Görünümü: ad + rozet/"Uyumlu" grubu artık gerçek bir içerik
   sütununda (.c-body, thumb'ın yanında) alt alta akar — böylece rozet satırı
   görselin değil ürün adının başladığı X koordinatından başlar (bkz.
   quick-order-row.php .c-body). */
.qtable .c-name .c-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.qtable .c-name .c-meta-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.qtable .c-name .c-meta-row:empty { display: none; }
.compat-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--fg-soft); color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.compat-badge:hover, .compat-badge[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.compat-badge .caret { width: 11px; height: 11px; transition: transform .15s ease; }
.compat-badge[aria-expanded="true"] .caret { transform: rotate(180deg); }
.compat-pop {
  position: fixed; z-index: 90; max-width: 260px; padding: 10px 12px; border-radius: 10px;
  background: var(--navy-2, #17458F); color: #eef4ff; border: 1px solid color-mix(in oklch, #fff 12%, transparent);
  box-shadow: 0 16px 40px color-mix(in oklch, var(--navy) 40%, transparent);
  font-size: 12px; line-height: 1.5; pointer-events: none;
}
.compat-pop[hidden] { display: none; }
.compat-pop__label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: color-mix(in oklch, #fff 55%, transparent); margin-bottom: 4px;
}
.qtable .r { text-align: right; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.qtable .c { text-align: center; }
.qtable .unit { font-weight: 700; white-space: nowrap; }
.qtable .unit .rt { display: block; font-weight: 500; font-size: 10px; color: var(--muted); text-decoration: line-through; }
/* Faz 4F: Liste Görünümü (.qtable — archive-product.php + catalog.php'deki
   quick-order-row.php satırı) fiyat hücresindeki kanonik .pcard-tier notu —
   sütun dar olduğu için üst öğenin nowrap'ini miras almaz, sağa hizalı sarar.
   NOT: bu, ayrı bir sayfa olan /hizli-siparis/ (bkz. cepdeposu_quick_order_bar_html())
   ile karıştırılmamalı; ikisi farklı bileşenlerdir. */
.qtable .unit .pcard-tier { white-space: normal; justify-content: flex-end; font-weight: 400; }
.qtable .line-total { font-weight: 700; white-space: nowrap; }
.qtable .c-check input { width: 15px; height: 15px; accent-color: var(--accent); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.stepper button { width: 26px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); font-size: 15px; }
.stepper button:hover { background: var(--fg-soft); color: var(--fg); }
/* `span.stepper input`: dosyada daha sonra gelen genel input[type="number"]
   sıfırlamasıyla (§ "input / select / textarea taban stili") aynı özgüllükte
   (0,1,1) çakışmaması için element+class ile özgüllüğü kasıtlı yükseltir —
   aksi halde adet kutusu width:100%'e genişleyip fiyat/kaldır sütununu
   (sepet) mobilde görünüm dışına itiyordu (4E'de tespit edilen regresyon). */
span.stepper input { width: 44px; min-height: 30px; height: 30px; border: 0; border-inline: 1px solid var(--border); text-align: center; font-family: var(--font-sans); font-size: 12px; background: var(--surface); color: var(--fg); padding: 0; }
.stepper input:focus { outline: 2px solid var(--blue); }

.stock-cell { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; }
.stock-cell .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.stock-cell.s-ok   { color: var(--ok); }   .stock-cell.s-ok .dot   { background: var(--ok); }
.stock-cell.s-low  { color: var(--warn); } .stock-cell.s-low .dot  { background: var(--warn); }
.stock-cell.s-out  { color: var(--bad); }  .stock-cell.s-out .dot  { background: var(--bad); }
.stock-cell.s-back { color: var(--blue); } .stock-cell.s-back .dot { background: var(--blue); }

.row-add { width: 34px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: oklch(0.99 0 0); display: grid; place-items: center; }
.row-add:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.row-add svg { width: 15px; height: 15px; }
.row-add:disabled { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; }

.qtable-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--fg-soft); border-top: 1px solid var(--border); flex-wrap: wrap; }
.qtable-foot .sum { font-size: 13px; }
.qtable-foot .sum strong { font-family: var(--font-sans); font-size: 16px; }

.hidden { display: none !important; }

/* ─── hızlı sipariş: canlı sepet çubuğu ──────────────────────────── */
.cepdeposu-qbar {
  position: sticky; bottom: 0; z-index: 20;
  margin-top: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: var(--navy); color: var(--on-navy);
  border-radius: 10px; padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 10px 30px color-mix(in oklch, var(--navy) 25%, transparent);
}
.cepdeposu-qbar[hidden] { display: none; }
.cepdeposu-qbar.is-hidden { display: none; }

.cepdeposu-qbar .qbar-info {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-size: 13px; color: var(--on-navy-dim);
}
.cepdeposu-qbar .qbar-info strong {
  color: var(--on-navy); font-family: var(--font-sans); font-weight: 700;
  display: inline-block; /* sepete ekleme sonrası scale vurgusu için */
}
.cepdeposu-qbar .qbar-total strong { font-size: 18px; margin-left: 6px; transform-origin: right center; }
.cepdeposu-qbar .qbar-note { font-size: 11px; }
.cepdeposu-qbar .qbar-mini { display: none; }

.cepdeposu-qbar .qbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cepdeposu-qbar .qbar-actions .btn { white-space: nowrap; }
.cepdeposu-qbar .qbar-empty {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px; padding: 0;
  border: 1px solid color-mix(in oklch, var(--on-navy) 22%, transparent);
  background: transparent; color: var(--on-navy-dim); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cepdeposu-qbar .qbar-empty:hover {
  color: #fff;
  border-color: color-mix(in oklch, var(--bad) 60%, transparent);
  background: color-mix(in oklch, var(--bad) 24%, transparent);
}
.cepdeposu-qbar .qbar-empty:disabled { opacity: .5; cursor: not-allowed; }

/* her sepete eklemede tek seferlik accent halka vurgusu (JS .qbar-pulse ekler) */
.cepdeposu-qbar.qbar-pulse { animation: cepdeposu-qbar-pulse 650ms ease-out 1; }
@keyframes cepdeposu-qbar-pulse {
  0%   { box-shadow: 0 10px 30px color-mix(in oklch, var(--navy) 25%, transparent), 0 0 0 0 color-mix(in oklch, var(--accent) 70%, transparent); }
  100% { box-shadow: 0 10px 30px color-mix(in oklch, var(--navy) 25%, transparent), 0 0 0 20px transparent; }
}

/* WooCommerce'in ekleme sonrası butonun yanına iliştirdiği "Sepetim"
   bağlantısı gizli — geri bildirim için canlı sepet çubuğu ve toast var. */
a.added_to_cart,
a.added_to_cart.wc-forward { display: none !important; }

@media (max-width: 640px) {
  /* mobilde kenardan ayrık, tek satır kompakt hap çubuğu.
     position: fixed — çubuk .catalog / listeleme bölümünün içinde dursa da
     ekranın altına sabitlenir; `sticky` iken kısa ana sayfa bölümünün
     üstünden yarım taşıp içeriğe biniyordu. */
  .cepdeposu-qbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom));
    margin: 0; z-index: 45;
    flex-wrap: nowrap; gap: 10px;
    border-radius: 999px; padding: 8px 8px 8px 18px;
    box-shadow: 0 10px 28px color-mix(in oklch, var(--navy) 40%, transparent);
  }
  /* çubuk açıkken sayfa sonundaki içerik altında kalmasın */
  body.cd-qbar-on { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .cepdeposu-qbar .qbar-info {
    width: auto; flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap; align-items: baseline; gap: 10px;
    overflow: hidden;
  }
  .cepdeposu-qbar .qbar-sel,
  .cepdeposu-qbar .qbar-total .qbar-total-label,
  .cepdeposu-qbar .qbar-note { display: none; }
  .cepdeposu-qbar .qbar-mini { display: inline; white-space: nowrap; }
  .cepdeposu-qbar .qbar-total { white-space: nowrap; }
  .cepdeposu-qbar .qbar-total strong { margin-left: 0; font-size: 16px; }
  .cepdeposu-qbar .qbar-actions { width: auto; flex: none; gap: 6px; }
  .cepdeposu-qbar .qbar-actions .btn-quiet { display: none; }
  .cepdeposu-qbar .qbar-actions .btn { flex: none; text-align: center; border-radius: 999px; }
  .cepdeposu-qbar .qbar-empty { width: 34px; height: 34px; }
}

/* ─── "sepete eklendi" toast'ı ───────────────────────────────────── */
.cepdeposu-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--navy); color: var(--on-navy);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--fg) 22%, transparent);
  font-size: 13px;
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.cepdeposu-toast.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
.cepdeposu-toast .ct-msg { min-width: 0; }
.cepdeposu-toast .ct-msg strong { font-weight: 700; }
.cepdeposu-toast .ct-link {
  flex: none; font-weight: 600; text-decoration: underline; color: var(--on-navy);
}
@media (max-width: 640px) {
  .cepdeposu-toast { left: 16px; right: 16px; max-width: none; }
}

/* ─── WooCommerce bildirim çubukları — site geneli (sepet, ödeme, mağaza) ──
   WC'nin varsayılan üstten-çizgili gri/yeşil kutusunu tema diline çeker:
   yumuşak tonlu kart + sol renk şeridi + yuvarlak ikon rozeti + sağa iten
   aksiyon. MyAccount içindeki daha özgül kurallar aynı görünümü korur. */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  --_nc: var(--blue);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--_nc) 30%, transparent);
  border-left: 3px solid var(--_nc);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--_nc) 8%, var(--surface));
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--fg) 6%, transparent);
  animation: cep-notice-in 240ms var(--ease-out);
}
@keyframes cep-notice-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.woocommerce-message { --_nc: var(--ok); }
.woocommerce-info    { --_nc: var(--blue); }
.woocommerce-error   { --_nc: var(--bad); }

/* çok maddeli hata listesi: maddeler rozetin sağında alt alta */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-error { align-items: flex-start; }
.woocommerce-error li { flex: 1 1 100%; margin: 0; }
.woocommerce-error li + li { margin-top: var(--sp-1); }

/* WC'nin ikon-fontlu, position:absolute ::before'unu akışa alıp net rozet yap */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
  background: var(--_nc);
  color: #fff;
  font: 700 12px/1 var(--font-sans);
  text-indent: 0;
}
.woocommerce-message::before { content: "\2713"; }
.woocommerce-info::before    { content: "i"; font-family: Georgia, "Times New Roman", serif; font-style: normal; }
.woocommerce-error::before   { content: "!"; margin-top: 1px; }

/* birincil aksiyon ("Sepeti görüntüle" vb.): dolu mavi tema düğmesi, sağa yasla.
   WC'nin `.woocommerce a.button` kuralını geçmek için element-nitelikli +
   .woocommerce-notices-wrapper öncüllü seçiciler ve tüm durumlar ezilir. */
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message button.button,
.woocommerce-notices-wrapper .woocommerce-message input.button,
.woocommerce-notices-wrapper .woocommerce-info a.button,
.woocommerce-notices-wrapper .woocommerce-info button.button,
.woocommerce-notices-wrapper .woocommerce-error a.button,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce-message a.button,
.woocommerce-message button.button,
.woocommerce-message input.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-message a.button:focus,
.woocommerce-notices-wrapper .woocommerce-info a.button:hover,
.woocommerce-notices-wrapper .woocommerce-error a.button:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-message a.button:focus,
.woocommerce-message a.button:hover,
.woocommerce-message a.button:focus,
.woocommerce-message button.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background: var(--blue-strong);
  color: #fff;
}

/* "Geri alınsın mı?" — çerçeveli mini düğme, bildirim rengiyle */
.woocommerce-message a.restore-item,
.woocommerce-message .restore-item {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--_nc) 40%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--_nc);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.woocommerce-message a.restore-item:hover,
.woocommerce-message .restore-item:hover {
  background: color-mix(in srgb, var(--_nc) 12%, var(--surface));
}

/* kupon/giriş göster: kutu değil, sade satır-içi bağlantı */
.woocommerce-message a.showcoupon,
.woocommerce-info a.showcoupon,
.woocommerce-info a.showlogin,
.woocommerce-message .showcoupon,
.woocommerce-info .showcoupon,
.woocommerce-info .showlogin {
  order: 2;
  flex: 0 0 auto;
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--_nc);
  font-size: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: normal;
}
.woocommerce-message a.showcoupon:hover,
.woocommerce-info a.showcoupon:hover,
.woocommerce-info a.showlogin:hover,
.woocommerce-message .showcoupon:hover,
.woocommerce-info .showcoupon:hover,
.woocommerce-info .showlogin:hover {
  text-decoration: none;
}

/* blok tabanlı bildirimler (mini sepet vb.) — köşe/şerit tema diline yaklaşsın */
.wc-block-components-notice-banner {
  border-radius: var(--radius);
  border-left-width: 3px;
  font-size: 13px;
}

/* ─── katalog listeleme (filtre paneli + sayfalama + sticky özet) ─── */
.crumbs { padding-block: var(--sp-4) 0; }
.crumbs a, .crumbs span { font-size: 12px; color: var(--muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { margin: 0 6px; opacity: .5; }

.page-head { padding-block: var(--sp-4) var(--sp-5); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head h1 { margin-bottom: 4px; }
.page-head__main { min-width: 0; }
.page-head__row { margin-top: var(--sp-2); }
.page-head__row.has-logo {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--sp-4);
}
.page-head__logo {
  margin: 0; display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 14vw, 104px); aspect-ratio: 1; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.page-head__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.page-head__text { min-width: 0; }
@media (max-width: 560px) {
  .page-head__row.has-logo { grid-template-columns: auto 1fr; gap: var(--sp-3); }
  .page-head__logo { width: clamp(52px, 18vw, 72px); padding: 8px; border-radius: 12px; }
}

.listing { display: block; padding-bottom: var(--sp-8); }

.page-head--listing { padding-block: var(--sp-4) var(--sp-3); }
.page-head--listing h1 { font-size: clamp(20px, 2.6vw, 26px); }
.page-head--listing .lead { font-size: 13px; max-width: 62ch; margin-top: 4px; }
.parttypes--inline { margin-bottom: var(--sp-3); }

/* ödeme yöntemi + kademeli iskonto etiketleri — model adının hemen altında, kompakt */
.page-head__pills--compact { justify-content: flex-start; flex-wrap: wrap; gap: 4px 5px; margin-top: var(--sp-2); }
.page-head__pills--compact .pill {
  padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0;
}
.page-head__pills--compact .pill--pay { animation: none; }
.page-head__pills--compact .pill--pay:hover { transform: none; }
.page-head__pills--compact .pill--tier {
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
}
.page-head__pills--compact .pill-sep {
  align-self: stretch; width: 1px; margin: 1px 3px; background: var(--border);
}
/* dar ekranda ayraç görünmesin, chip'ler alt satıra sarsın */
@media (max-width: 520px) { .page-head__pills--compact .pill-sep { display: none; } }

/* açılır "Filtreler" düğmesi — Vitrin / Hızlı Sipariş Tablosu araç çubuğunda */
.filterpop { position: relative; flex: none; }
.filterpop__btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg); font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; white-space: nowrap; user-select: none;
}
.filterpop__btn::-webkit-details-marker { display: none; }
.filterpop__btn svg { width: 15px; height: 15px; flex: none; }
.filterpop__btn:hover { border-color: var(--fg); }
.filterpop.is-open .filterpop__btn { border-color: var(--primary); color: var(--primary); }
.filterpop__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--primary); color: var(--on-navy); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums;
}
.filterpop__panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0;
  width: min(300px, 86vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.filterpop__panel[hidden] { display: none; }
.filterpop__panel > header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.filterpop__panel > header h2 { font-size: 13px; }
.filterpop__panel > header a { font-size: 11px; color: var(--primary); font-weight: 600; }
.toolbar .filterpop__btn { border-radius: var(--radius-sm); padding: 6px 11px; }
.toolbar .filterpop__panel { left: 0; right: auto; }

.fgroup { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.fgroup:last-child { border-bottom: 0; }
.fgroup h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--sp-2); }
.checkline { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.checkline input { width: 15px; height: 15px; accent-color: var(--primary); flex: none; }
a.checkline:hover { color: var(--primary); }
.checkline .count { margin-left: auto; font-family: var(--font-sans); font-size: 11px; color: var(--muted); }
.price-inputs { display: flex; align-items: center; gap: 6px; }
.price-inputs input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 12px; background: var(--surface); color: var(--fg); }
.price-inputs input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.fselect { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 12px; background: var(--surface); color: var(--fg); }
.fselect:focus { outline: 2px solid var(--primary); border-color: var(--primary); }

.main-col { min-width: 0; }

/* ─── aktif filtre çipleri (§26) ─────────────────────────────────── */
.activefilters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--sp-3); }
.pill--filter {
  background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong, var(--border));
  font-weight: 600; padding: 4px 8px 4px 10px;
}
.pill--filter:hover { border-color: var(--primary); color: var(--primary); }
.pill--filter span[aria-hidden] { font-size: 13px; line-height: 1; opacity: 0.7; }
.activefilters__clear { font-size: 11px; font-weight: 600; color: var(--muted); }
.activefilters__clear:hover { color: var(--primary); }

/* Regresyon stabilizasyonu: masaüstünde kalıcı sol panel yaklaşımı (Faz 4C.1/
   4C.2) kaldırıldı — sürekli açık panel `.main-col`'u 268px daraltıyordu.
   `.filterpop` artık TÜM genişliklerde aynı davranışta: toolbar'daki
   düğmeyle açılan bir popover/panel, kapalıyken hiçbir layout genişliği
   tüketmez (native <details>/<summary>, aç/kapa mantığı assets/js/theme.js
   içinde tek bir yerde — masaüstü/mobil ayrımı yok). ≥1081px'te yalnız
   panel biraz daha geniş ve gerekirse kendi içinde kaydırılabilir. */
@media (min-width: 1081px) {
  .toolbar .filterpop__panel {
    width: min(360px, 90vw);
    max-height: min(70vh, 560px);
    overflow-y: auto;
  }
}

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding-block: var(--sp-6); }
.pagination a, .pagination span {
  min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 12px; background: var(--surface); color: var(--fg);
}
.pagination a:hover { border-color: var(--fg); }
.pagination .current { background: var(--primary); color: var(--on-navy); border-color: var(--primary); }
.pagination .dots { color: var(--muted); cursor: default; }

/* ─── sepet sayfası ───────────────────────────────────────────────── */
.cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-5); padding-bottom: var(--sp-8); align-items: start; }
.cart-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

.cart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cart-card > header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cart-card > header h2 { font-size: 14px; }
.cart-card > header .meta { font-size: 12px; }

.citem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--border); align-items: center; }
.citem:last-child { border-bottom: 0; }
.ci-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); background: color-mix(in oklch, var(--navy) 8%, var(--surface)); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); }
.ci-thumb svg { width: 26px; height: 26px; }
.ci-info { min-width: 0; }
.ci-name { font-weight: 650; font-size: 14px; letter-spacing: -0.005em; }
.ci-code { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.ci-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 7px; }
.ci-unit { font-family: var(--font-sans); font-size: 13px; color: var(--muted); }
.ci-unit .woocommerce-Price-amount { color: var(--fg); font-weight: 600; }
.ci-meta .stock-flag { position: static; }
.ci-right { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.ci-right .stepper { flex: none; }
.ci-line { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 104px; flex: none; }
.ci-line, .ci-line * { white-space: nowrap; }
.ci-line strong { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--fg); line-height: 1.25; }
.ci-line span { font-family: var(--font-sans); font-size: 11px; color: var(--muted); }
.ci-remove { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); background: var(--surface); flex: none; }
.ci-remove:hover { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 45%, var(--border)); background: color-mix(in oklch, var(--bad) 8%, transparent); }
.ci-remove svg { width: 15px; height: 15px; }

.page-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-2); }

.summary { position: sticky; top: 86px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.summary > header { background: var(--navy); color: var(--on-navy); padding: var(--sp-4); }
.summary > header h2 { font-size: 14px; }
.summary > header p { font-size: 11px; color: var(--on-navy-dim); margin-top: 3px; }
.sum-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 14px; }
.sum-row .k { color: var(--muted); }
.sum-row .v { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 14px; }
.sum-row.discount .v { color: var(--ok-ink); }
.sum-row.discount .k { color: var(--fg); }
.sum-div { height: 1px; background: var(--border); margin-block: var(--sp-2); }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-1); }
.sum-total .k { font-weight: 700; font-size: 14px; }
.sum-total .v { font-family: var(--font-sans); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.sum-foot { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.sum-foot .btn-accent { font-size: 15px; padding: 14px 18px; box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--accent) 60%, transparent); }
.sum-foot .secure { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); justify-content: center; }
.sum-foot .secure svg { width: 13px; height: 13px; }
.tier-hint {
  margin: 0 var(--sp-4) var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.tier-hint svg { width: 15px; height: 15px; flex: none; }
.tier-hint.reached { background: color-mix(in oklch, var(--ok) 14%, transparent); color: color-mix(in oklch, var(--ok) 82%, black); }

.cart-empty { text-align: center; padding: var(--sp-8) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.cart-empty svg { width: 44px; height: 44px; color: var(--muted); margin: 0 auto var(--sp-3); }
.cart-empty h2 { font-size: 16px; margin-bottom: 6px; }
.cart-empty p { font-size: 13px; color: var(--muted); margin-bottom: var(--sp-4); }

/* ─── ödeme (checkout) sayfası ──────────────────────────────────── */
/* WooCommerce'in kendi checkout işaretlemesi; tema kabuğuna oturtulur.
   Sol: müşteri bilgileri · Sağ: yapışkan sipariş özeti (.summary diliyle). */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-5);
  align-items: start;
  padding-bottom: var(--sp-8);
}
.checkout-main { min-width: 0; }

/* WC'nin checkout üstü giriş / kupon kutuları — tema container'ında zaten
   .woocommerce-info stilleniyor; burada sadece aralık. */
.woocommerce-checkout .container > .woocommerce-form-login-toggle,
.woocommerce-checkout .container > .woocommerce-form-coupon-toggle,
.woocommerce-checkout .container > .woocommerce-form-login,
.woocommerce-checkout .container > form.checkout_coupon { margin-bottom: var(--sp-4); }

/* Kupon kutusu artık sipariş özeti içinde, ödeme yöntemlerinin üstünde —
   dar sütuna göre sıkışık ve alanla ayrılmış. */
#order_review .woocommerce-form-coupon-toggle { margin: 0 0 var(--sp-3); }
#order_review .woocommerce-form-coupon-toggle .woocommerce-info {
  display: block;
  margin: 0;
  padding: 10px var(--sp-3);
  font-size: 12px;
  line-height: 1.5;
}
#order_review .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
#order_review .woocommerce-form-coupon-toggle .showcoupon {
  display: inline;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 650;
}
#order_review form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
#order_review form.checkout_coupon > p:first-child { display: none; }
/* WC sürümüne göre alan/buton sarmalayıcısı <p class="form-row"> ya da <div> */
#order_review form.checkout_coupon .form-row,
#order_review form.checkout_coupon .coupon-code-input { flex: 1 1 130px; min-width: 0; margin: 0; }
#order_review form.checkout_coupon .form-row-last,
#order_review form.checkout_coupon .coupon-code-button { flex: 0 0 auto; }
#order_review form.checkout_coupon .input-text {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 14px;
}
#order_review form.checkout_coupon .input-text:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-soft);
  outline-offset: 1px;
}
/* "Kupon kullan" (apply_coupon) düğmesi — WC'nin gri varsayılanını tamamen
   ez, tema birincil düğmesiyle (.btn-primary) aynı mavi. Konumdan bağımsız
   olsun diye hem #order_review hem .woocommerce-checkout altında hedeflenir. */
#order_review form.checkout_coupon button[name="apply_coupon"],
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"],
.woocommerce-checkout form.checkout_coupon button.button {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--blue) !important;
  border-radius: var(--radius-sm);
  background: var(--blue) !important;
  background-image: none !important;
  box-shadow: none;
  text-shadow: none;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
#order_review form.checkout_coupon button[name="apply_coupon"]:hover,
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover,
.woocommerce-checkout form.checkout_coupon button.button:hover {
  background: var(--blue-strong) !important;
  border-color: var(--blue-strong) !important;
  color: #fff !important;
}
#order_review form.checkout_coupon button[name="apply_coupon"]:active,
.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:active {
  transform: translateY(1px);
}

/* billing / shipping / ek alanlar bloğu */
#customer_details.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  width: auto;
  margin: 0;
}
#customer_details.col2-set::before,
#customer_details.col2-set::after { content: none; display: none; }
#customer_details .col-1,
#customer_details .col-2 { float: none; width: auto; min-width: 0; margin: 0; }
#customer_details .col-2:empty { display: none; }

.checkout .woocommerce-billing-fields > h3,
.checkout .woocommerce-shipping-fields > h3,
.checkout .woocommerce-additional-fields > h3,
#customer_details h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.checkout .woocommerce-shipping-fields h3 #ship-to-different-address-checkbox { margin-right: 8px; }

.checkout .woocommerce-billing-fields__field-wrapper,
.checkout .woocommerce-shipping-fields__field-wrapper,
.checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
.checkout .form-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.checkout .form-row-first,
.checkout .form-row-last { width: auto; float: none; }
.checkout .form-row-wide,
.checkout .form-row.notes,
.checkout .form-row.address-field { grid-column: 1 / -1; }
.checkout .col2-set .form-row-first,
.checkout .col2-set .form-row-last { grid-column: auto; }
.checkout .form-row > label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.checkout .form-row .required { color: var(--bad); border: 0; text-decoration: none; }
.checkout .form-row .optional { color: var(--muted); font-weight: 500; }
.checkout .woocommerce-input-wrapper { display: block; width: 100%; }

.checkout .input-text,
.checkout select,
.checkout textarea {
  font: inherit;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
}
.checkout textarea {
  height: auto;
  min-height: 84px;
  padding: 10px 14px;
  line-height: 1.5;
}
.checkout select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.checkout .input-text:focus,
.checkout select:focus,
.checkout textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
  background: var(--surface);
}
.checkout .form-row.woocommerce-invalid .input-text,
.checkout .form-row.woocommerce-invalid select { border-color: var(--bad); }
.checkout .form-row.woocommerce-validated .input-text { border-color: color-mix(in oklch, var(--ok) 55%, var(--border)); }

/* WC select2 (ülke / il) — tema input yüksekliğine hizala */
.checkout .select2-container--default .select2-selection--single {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding-left: 14px;
  color: var(--fg);
}
.checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.checkout .select2-container--default.select2-container--focus .select2-selection--single,
.checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* teslimat adresi geçişi + "hesap oluştur" onay kutuları */
.checkout .woocommerce-account-fields .create-account,
.checkout #ship-to-different-address label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); }
.checkout .woocommerce-account-fields .create-account label { font-weight: 500; color: var(--fg); }

/* ── sağ kolon: sipariş özeti (sepet .summary diliyle) ── */
.checkout-review {
  position: sticky;
  top: 86px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
#order_review_heading {
  margin: 0;
  padding: var(--sp-4);
  background: var(--navy);
  color: var(--on-navy);
  font-size: 14px;
  font-weight: 700;
}
.checkout-review #order_review { padding: var(--sp-4); }

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-3);
  font-size: 14px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 8px 0;
  text-align: left;
  vertical-align: top;
  border: 0;
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table thead th { color: var(--muted); font-weight: 600; }
.woocommerce-checkout-review-order-table .product-name { color: var(--fg); font-weight: 600; }
.woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); }
.woocommerce-checkout-review-order-table tbody tr td { border-bottom: 1px solid var(--border); }
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td { border-top: 1px solid var(--border); padding-top: 10px; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 16px;
  font-weight: 800;
  color: var(--fg);
  border-top: 1px solid var(--border);
}
.woocommerce-checkout-review-order-table .cart-discount td { color: var(--ok-ink); }

/* ödeme yöntemleri — WC'nin gri (#ebe9eb) varsayılan kutusunu ez;
   iki ID'li seçici (#order_review #payment) WC'nin tek ID'li kuralını geçer. */
#order_review #payment,
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
#order_review #payment ul.wc_payment_methods,
.woocommerce-checkout #payment ul.wc_payment_methods {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#order_review #payment ul.wc_payment_methods li {
  margin: 0;
  padding: 12px var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
#order_review #payment ul.wc_payment_methods li:last-child { border-bottom: 0; }
#order_review #payment ul.wc_payment_methods li label {
  display: inline;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 0 6px;
}
#order_review #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
  margin: 10px 0 0;
  padding: 12px;
  background: var(--fg-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
#order_review #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before { display: none; }
#order_review #payment .woocommerce-terms-and-conditions-wrapper {
  margin: var(--sp-3) 0;
  font-size: 12px;
  color: var(--muted);
}
#order_review #payment .place-order { padding: 0; margin: 0; }
#order_review #place_order,
.woocommerce-checkout #place_order {
  float: none;
  width: 100%;
  margin-top: var(--sp-2);
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--accent) 60%, transparent);
}
#order_review #place_order:hover,
.woocommerce-checkout #place_order:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
#order_review #place_order:active,
.woocommerce-checkout #place_order:active { transform: translateY(1px); }

/* ─── tekil ürün (ürün detay) ───────────────────────────────────── */
.pdp-container { padding-block: var(--sp-5) var(--sp-8); }
.pdp-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-8); align-items: start;
}
.pdp-media { position: sticky; top: 120px; }

.woocommerce-product-gallery {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: var(--sp-4);
  box-shadow: 0 1px 3px color-mix(in oklch, var(--navy) 8%, transparent),
              0 18px 40px -24px color-mix(in oklch, var(--navy) 30%, transparent);
}
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { border-radius: 10px; aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.woocommerce-product-gallery__image img {
  border-radius: 10px; width: 100%; height: 100%; object-fit: contain;
}
.woocommerce-product-gallery img { background: var(--fg-soft); }
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-3) 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 64px; margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img {
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; opacity: 0.5;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--accent); }
.woocommerce-product-gallery__trigger {
  position: absolute; z-index: 5; top: calc(var(--sp-4) + 8px); right: calc(var(--sp-4) + 8px);
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  box-shadow: 0 2px 8px color-mix(in oklch, var(--navy) 16%, transparent);
}
.woocommerce-product-gallery__trigger:hover { color: var(--fg); border-color: var(--fg); }

/* sol sütun: "Bu Tamir İçin Gerekebilecekler" kartı — sağ satın alma
   kutusundan buraya (galerinin altına) taşındı. Eklentinin inline <style>'ı
   tek-sınıf seçici kullandığı için bu iki-sınıf kurallar onu geçersiz kılar. */
.pdp-media .cepdeposu-tamir-kiti-onerisi {
  max-width: none; margin: var(--sp-4) 0 0; position: static; top: auto;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  box-shadow: 0 1px 3px color-mix(in oklch, var(--navy) 8%, transparent),
              0 18px 40px -24px color-mix(in oklch, var(--navy) 30%, transparent);
}
.pdp-media .cepdeposu-tamir-kiti-onerisi__title { font-size: 15px; font-weight: 750; color: var(--fg); }
.pdp-media .cepdeposu-tamir-kiti-onerisi__subtitle { font-size: 12px; color: var(--muted); }
.pdp-media .cepdeposu-tko-section__title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--muted);
}
.pdp-media .cepdeposu-tko-item {
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.pdp-media .cepdeposu-tko-item__title { color: var(--fg); font-weight: 600; }
.pdp-media .cepdeposu-tko-item__price { color: var(--accent-strong); font-weight: 700; }
.pdp-media .cepdeposu-tko-item__action .button {
  background: var(--surface); border: 1px solid var(--border); color: var(--fg);
  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 650;
}
.pdp-media .cepdeposu-tko-item__action .button:hover { border-color: var(--accent); color: var(--accent-strong); }

.pdp-summary {
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: var(--sp-6);
  box-shadow: 0 1px 3px color-mix(in oklch, var(--navy) 8%, transparent),
              0 18px 40px -24px color-mix(in oklch, var(--navy) 30%, transparent);
}
.pdp-summary .product_title {
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 750;
}
.pdp-summary .woocommerce-product-rating {
  display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted);
}
.pdp-summary .star-rating { color: var(--warn); }
.pdp-summary .woocommerce-review-link { color: var(--muted); }

/* fiyat — ürün adından belirgin biçimde AYRI: farklı renk (accent) + tabular rakam */
.pdp-summary .price {
  margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--accent-strong);
}
.pdp-summary .price del { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration-color: color-mix(in oklch, var(--muted) 60%, transparent); }
.pdp-summary .price ins { text-decoration: none; color: var(--accent-strong); }
.pdp-summary .price .woocommerce-Price-currencySymbol { font-weight: 600; }
.pdp-summary .price small.woocommerce-price-suffix {
  display: block; width: 100%; margin-top: 2px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--muted);
}

/* ürün adının hemen altındaki künye — kompakt etiketler: Marka / Parça kategorisi / Kalite / SKU / Varyant */
.pdp-specbar {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pdp-specbar__chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 14px; line-height: 1.3;
}
.pdp-specbar__chip .k {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
}
.pdp-specbar__chip .v { font-size: 15px; font-weight: 700; color: var(--fg); }
.pdp-specbar__chip.is-mono .v {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 600;
}
/* "Uyumlu modeller" etiketi — .compat-badge tabanlı (Hızlı Sipariş Tablosu ile aynı açılır kutu) */
.pdp-specbar__compat { font-size: 14px; padding: 4px 12px; }
.pdp-specbar__compat .n {
  text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: var(--fg);
}
.pdp-specbar__compat[aria-expanded="true"] .n { color: var(--accent); }

/* stok durumu künye çipi — .stock-flag bileşeni (renk + nabız noktası)
   künye satırına akıtılır; kart köşesi için olan absolute konum sıfırlanır.
   Satın alma kutusundaki WooCommerce `.stock` metni gizli (tek kaynak bu). */
.pdp-specbar__stock {
  position: static; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; line-height: 1.3;
}
.pdp-specbar__stock .dot { width: 8px; height: 8px; }
.pdp-summary p.stock { display: none; }

/* mobil: künye etiketleri belirgin şekilde küçülür — küçük "tag" görünümü */
@media (max-width: 600px) {
  .pdp-specbar { gap: 4px; }
  .pdp-specbar__chip {
    gap: 4px; padding: 2px 8px; border-radius: 7px; font-size: 11px; line-height: 1.25;
  }
  .pdp-specbar__chip .k { font-size: 8.5px; letter-spacing: 0.03em; }
  .pdp-specbar__chip .v { font-size: 11px; font-weight: 600; }
  /* "Uyumlu modeller" etiketi diğer künye çipleriyle AYNI ölçüde olsun */
  .pdp-specbar__compat {
    gap: 4px; padding: 2px 8px; border-radius: 7px; font-size: 8.5px; letter-spacing: 0.03em;
  }
  .pdp-specbar__compat .k { font-size: 8.5px; }
  .pdp-specbar__compat .n {
    font-size: 11px; font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0;
  }
  .pdp-specbar__compat .caret { width: 9px; height: 9px; }
  .pdp-specbar__stock { padding: 2px 8px; border-radius: 7px; font-size: 10.5px; gap: 4px; }
  .pdp-specbar__stock .dot { width: 6px; height: 6px; }
}

/* Faz 4F: .pdp-seg kaldırıldı — PDP artık kanonik .pcard-tier'i kullanıyor
   (bkz. functions.php cepdeposu_single_segment_note / §12). .pdp-summary
   flex-column'da varsayılan align-items:stretch tam genişliğe yayardı;
   bileşenin kendisine değil, yalnız bu üst bağlamdaki yerleşimine dokunuyoruz. */
.pdp-summary .pcard-tier { align-self: flex-start; }

/* "Fiyat & Avantajlar" bölümü — ayrı bir kart DEĞİL, .pdp-summary kartının
   içinde fiyatın hemen altından "Sepete Ekle"nin sonuna kadar olan bloklar.
   Üstteki ayırıcı çizgi fiyatın kendi `border-bottom`'u; burada TEKRAR
   çizgi çizmiyoruz (iki paralel çizgi gereksizdi). */
.pdp-buybox {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: 0 0 var(--sp-4);
}

/* katlanır kademe tablosu — docs/design-direction.md §11 "Detaylı fiyat
   kademelerini gör"; varsayılanda kapalı, açıkken mevcut tablo aynen. */
.pdp-tier-details { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pdp-tier-details summary {
  cursor: pointer; list-style: none; padding: 10px 14px;
  font-size: 13px; font-weight: 650; color: var(--fg);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pdp-tier-details summary::-webkit-details-marker { display: none; }
.pdp-tier-details summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease);
}
.pdp-tier-details[open] summary::after { transform: rotate(-135deg); }
.pdp-tier-details[open] summary { border-bottom: 1px solid var(--border); }
.pdp-tier-details .cepdeposu-qty-tier-table { border: none; border-radius: 0; }

/* miktar kademe indirimi tablosu — tema sürümü (eklenti CSS'ini geçersiz kılar) */
.pdp-summary .cepdeposu-qty-tier-table {
  margin: 0; max-width: none;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.pdp-summary .cepdeposu-qty-tier-table table {
  width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px;
}
.pdp-summary .cepdeposu-qty-tier-table thead th {
  background: var(--fg-soft); color: var(--muted);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; font-weight: 700;
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.pdp-summary .cepdeposu-qty-tier-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--muted);
}
.pdp-summary .cepdeposu-qty-tier-table tbody tr:last-child td { border-bottom: none; }
.pdp-summary .cepdeposu-qty-tier-table tbody tr:nth-child(even) {
  background: color-mix(in oklch, var(--fg) 3%, transparent);
}
.pdp-summary .cepdeposu-qty-tier-table tbody tr:hover { background: var(--accent-soft); }
.pdp-summary .cepdeposu-qty-tier-table tbody td:first-child {
  font-family: var(--font-sans); font-weight: 700; color: var(--fg);
}
.pdp-summary .cepdeposu-qty-tier-table tbody td:nth-child(2) {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg);
}
.pdp-summary .cepdeposu-qty-tier-table tbody td:last-child {
  font-weight: 700; color: var(--accent-strong);
}

.woocommerce-product-details__short-description {
  font-size: 13px; color: var(--muted); line-height: 1.65;
}
.woocommerce-product-details__short-description p { margin-bottom: var(--sp-2); }
.woocommerce-product-details__short-description ul { margin: 0 0 var(--sp-2); padding-left: 18px; }

.pdp-summary form.cart {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); margin: var(--sp-2) 0 0;
}
.pdp-summary form.cart .quantity { display: inline-flex; }
.pdp-summary form.cart .quantity input.qty {
  width: 88px; height: 52px; padding: 0 6px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg);
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
}
.pdp-summary form.cart .quantity input.qty:focus { outline: 2px solid var(--blue); border-color: var(--accent); }
.pdp-summary form.cart .single_add_to_cart_button {
  flex: 1; min-width: 200px; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: oklch(0.99 0 0);
  font-size: 15px; font-weight: 750; letter-spacing: -0.005em;
  box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--accent) 65%, transparent);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform 60ms var(--ease);
}
.pdp-summary form.cart .single_add_to_cart_button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.pdp-summary form.cart .single_add_to_cart_button:active { transform: translateY(1px); }
.pdp-summary form.cart .single_add_to_cart_button:disabled,
.pdp-summary form.cart .single_add_to_cart_button.disabled {
  background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed;
}
.pdp-summary .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--sp-3); width: 100%; }
.pdp-summary table.variations { width: 100%; margin: 0 0 var(--sp-3); border-collapse: collapse; }
.pdp-summary table.variations td { padding: 4px 0; vertical-align: middle; }
.pdp-summary table.variations select {
  font: inherit; font-size: 13px; padding: 8px 10px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg);
}
.pdp-summary .stock {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700; margin: 0;
}
.pdp-summary .stock::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: currentColor; flex: none;
}
.pdp-summary .stock.in-stock { color: var(--ok); }
.pdp-summary .stock.in-stock.low-stock { color: var(--warn); }
.pdp-summary .stock.out-of-stock { color: var(--bad); }
.pdp-summary .stock.available-on-backorder { color: var(--blue); }

.pdp-summary .product_meta {
  display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-2);
  padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.pdp-summary .product_meta > span { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp-summary .product_meta a { color: var(--fg); }
.pdp-summary .product_meta a:hover { color: var(--accent-strong); }

/* --- sekmeler + ilgili ürünler --- */
.pdp-after { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--sp-4); padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 5px;
  font-size: 12.5px; font-weight: 650; color: var(--muted);
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--fg); }
.woocommerce-tabs ul.tabs li.active a { background: var(--navy); color: var(--on-navy); }
.woocommerce-tabs .panel,
.woocommerce-tabs .woocommerce-Tabs-panel {
  margin: 0; padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  font-size: 14px; line-height: 1.7; color: var(--fg);
}
.woocommerce-tabs .panel > h2:first-child { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.woocommerce-tabs .panel p { margin-bottom: var(--sp-3); color: var(--muted); }
.woocommerce-tabs .panel table.shop_attributes {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.woocommerce-tabs .panel table.shop_attributes th,
.woocommerce-tabs .panel table.shop_attributes td {
  padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top;
}
.woocommerce-tabs .panel table.shop_attributes th { width: 32%; color: var(--muted); font-weight: 600; }

.woocommerce-tabs #reviews .comment-form-rating .stars a { color: var(--warn); }
.woocommerce-tabs #reviews input[type="text"],
.woocommerce-tabs #reviews input[type="email"],
.woocommerce-tabs #reviews textarea {
  font: inherit; width: 100%; padding: 9px 11px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg);
}
.woocommerce-tabs #reviews .comment-form textarea:focus,
.woocommerce-tabs #reviews .comment-form input:focus { outline: 2px solid var(--blue); border-color: var(--accent); }
.woocommerce-tabs #reviews ol.commentlist { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.woocommerce-tabs #reviews ol.commentlist li {
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.woocommerce-tabs #reviews .comment-form-rating,
.woocommerce-tabs #reviews p { margin-bottom: var(--sp-3); }
.woocommerce-tabs #reviews .submit,
.woocommerce-tabs #reviews [type="submit"] {
  padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: oklch(0.99 0 0);
  font-size: 13px; font-weight: 600;
}

.pdp-after .related > h2,
.pdp-after .up-sells > h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); font-weight: 750; }
.pdp-container .pdp-after ul.products {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4);
}
.pdp-container .pdp-after ul.products::before,
.pdp-container .pdp-after ul.products::after { content: none !important; display: none !important; }
.pdp-container .pdp-after ul.products li.product {
  display: flex !important; margin: 0 !important; width: auto !important; float: none !important;
  min-width: 0;
}
.pdp-container .pdp-after ul.products li.product::before { content: none !important; }
.pdp-after ul.products li.product .pcard { width: 100%; }

/* --- mobil yapışkan satın alma çubuğu --- */
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px color-mix(in oklch, var(--navy) 12%, transparent);
}
.pdp-sticky .ps-price { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 750; font-size: 16px; white-space: nowrap; }
.pdp-sticky .ps-price del { font-size: 11px; font-weight: 500; color: var(--muted); margin-right: 5px; }
.pdp-sticky .ps-price ins { text-decoration: none; }
.pdp-sticky .ps-price small { display: none; }
.pdp-sticky .btn { flex: 1; }

@media (max-width: 1080px) {
  .pdp-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* Tek kolonda: galeri + rozetler önce (order 0), satın alma kutusu ortada,
     "Bu tamir için gerekebilecekler" kartı en sona. .pdp-media sarmalayıcısı
     kaldırılır ki çocukları doğrudan ızgara öğesi olsun ve sıralanabilsin. */
  .pdp-media { display: contents; }
  .pdp-summary { padding: var(--sp-5); order: 1; }
  .pdp-grid .cepdeposu-tamir-kiti-onerisi { order: 2; margin-top: 0; }
  .pdp-container .pdp-after ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pdp-sticky.is-ready { display: flex; }
  .pdp-container { padding-bottom: 92px; }
  .pdp-container .pdp-after ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pdp-container .pdp-after ul.products { grid-template-columns: 1fr; }
  .pdp-summary form.cart .single_add_to_cart_button { min-width: 0; }
}

/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer { background: var(--navy-2); color: var(--on-navy-dim); font-size: 13px; }
.site-footer .container { padding-block: var(--sp-8) var(--sp-6); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.6fr; gap: var(--sp-6); }
.foot-grid h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-navy-dim); margin-bottom: var(--sp-3); }
.foot-grid a { display: block; color: var(--on-navy); padding: 3px 0; }
.foot-grid a:hover { color: var(--accent); }
.foot-grid p { color: var(--on-navy-dim); }

/* footer marka logosu — yüklenmiş görsel ya da "cep" beyaz yazı logosu */
.site-footer .foot-brand {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  color: var(--on-navy-dim); font-weight: 750; font-size: 20px; letter-spacing: -0.03em;
}
.site-footer .foot-brand:hover { color: var(--on-navy-dim); }
.foot-brand__img { max-width: 190px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.foot-brand__mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: grid; place-items: center; background: var(--blue); color: #fff;
}
.foot-brand__mark svg { width: 15px; height: 15px; }
.foot-brand__cep { color: #fff; font-weight: 800; }
.foot-brand__tld { color: var(--on-navy-dim); opacity: 0.65; margin-left: 1px; }

.cities { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cities a { padding: 2px 0; font-size: 12px; }
/* şehir arşivi henüz yoksa (Tamirci Dizini pasif) düz metin — tıklanamaz gibi görünsün */
.cities__plain { padding: 2px 0; font-size: 12px; opacity: 0.6; }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--navy-line); flex-wrap: wrap; }
.foot-base .meta { color: var(--on-navy); }

/* ─── floating contact ─────────────────────────────────────────── */
.fab { position: fixed; right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid transparent; font-size: 13px; font-weight: 700; color: oklch(0.99 0 0);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--navy) 30%, transparent);
}
.fab-btn svg { width: 18px; height: 18px; }
.fab-btn:hover { box-shadow: 0 10px 28px color-mix(in oklch, var(--navy) 36%, transparent); }
.fab-wa { background: var(--ok); }
.fab-wa:hover { background: color-mix(in oklch, var(--ok) 88%, black); }
.fab-tg { background: var(--navy); }
.fab-tg:hover { background: var(--navy-2); }

/* mobilde alttaki yapışkan çubuklardan biri (hızlı sipariş sepet çubuğu,
   PDP satın alma çubuğu, Hızlı Sipariş sayfası özet çubuğu) görünürken
   kayan iletişim düğmeleri (.fab) onun üstüne binmesin diye yukarı alınır */
@media (max-width: 768px) {
  body.cd-qbar-on .fab,
  body.cd-pdp-sticky-on .fab,
  body.cd-qorder-bar-on .fab { bottom: calc(124px + env(safe-area-inset-bottom)); }
}

/* ─── Hesabım (WooCommerce My Account) ─────────────────────────── */
/* Sol menü + içerik iki sütun; menü gerçek bir kart. Panel/sipariş
 * özel stilleri cepdeposu-b2b/assets/panelim.css'te.
 * NOT: yalnızca oturum AÇIK durumda ızgara — giriş sayfasında (oturum
 * yok, sol menü yok) tek sütun kalır, yoksa <h2>+form 240px'e sıkışır. */
.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
/* WC'nin clearfix ::before/::after'i grid hücresi kapıyor — iptal et. */
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after { content: none; display: none; }
/* WC'nin float:left/right + width:30%/68% kurallarını ez (aynı özgüllük, sonra yüklenir). */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  max-width: 100%;
}

.woocommerce-MyAccount-navigation {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--navy) 8%, transparent);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  border-left: 3px solid transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--blue-soft); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--blue-soft);
  border-left-color: var(--blue);
  color: var(--blue);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
}

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Sipariş / indirme tabloları — kaydırılabilir kart içinde */
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-table--order-downloads,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.woocommerce-MyAccount-content table.shop_table thead th {
  background: var(--fg-soft);
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.woocommerce-MyAccount-content table.shop_table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--fg);
}
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-MyAccount-content table.shop_table tbody tr:hover td { background: var(--blue-soft); }

/* Durum hücresi -> pill */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status {
  font-weight: 700;
  white-space: nowrap;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--muted);
  vertical-align: middle;
}
.woocommerce-MyAccount-content tr.order-completed .woocommerce-orders-table__cell-order-status::before,
.woocommerce-MyAccount-content tr.status-completed .woocommerce-orders-table__cell-order-status::before { background: var(--ok); }
.woocommerce-MyAccount-content tr.order-processing .woocommerce-orders-table__cell-order-status::before,
.woocommerce-MyAccount-content tr.status-processing .woocommerce-orders-table__cell-order-status::before { background: var(--warn); }

/* Aksiyon düğmeleri */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
  display: inline-block;
  margin: 2px 0 2px 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a:first-child { margin-left: 0; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.view {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a:hover { border-color: var(--blue); color: var(--blue); }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.view:hover { background: var(--blue-strong); color: #fff; }

/* Bilgi / bildirim çubukları (e-posta onayı vb.) */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
}
/* WC'nin ikon-fontlu, position:absolute ::before'unu akışa al + net "i" rozeti yap */
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before {
  content: "i";
  position: static;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  font: 700 11px/1 Georgia, "Times New Roman", serif;
  font-style: normal;
}
/* Metin (anonim düğüm) solda ikonun yanında; buton sona iter */
.woocommerce-MyAccount-content .woocommerce-message .button,
.woocommerce-MyAccount-content .woocommerce-info .button {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  border: 0;
}

.woocommerce-account .woocommerce-pagination ul {
  display: flex; gap: 6px; list-style: none; margin: var(--sp-4) 0 0; padding: 0;
}
.woocommerce-account .woocommerce-pagination a,
.woocommerce-account .woocommerce-pagination span {
  display: inline-grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); font-size: 13px;
}
.woocommerce-account .woocommerce-pagination .current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── Tekil sipariş detayı (view-order) ───────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details { margin-top: var(--sp-5); }
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-customer-details h2,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-Address-title h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
.woocommerce-MyAccount-content mark.order-number,
.woocommerce-MyAccount-content mark.order-date,
.woocommerce-MyAccount-content mark.order-status {
  background: var(--blue-soft);
  color: var(--blue);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 650;
}

.woocommerce-MyAccount-content table.order_details { margin-bottom: 0; }
.woocommerce-MyAccount-content table.order_details thead th.product-total,
.woocommerce-MyAccount-content table.order_details td.product-total,
.woocommerce-MyAccount-content table.order_details tfoot th[scope="row"],
.woocommerce-MyAccount-content table.order_details tfoot th[scope="row"] + td { text-align: right; }
.woocommerce-MyAccount-content table.order_details tfoot th {
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  width: 1%;
}
.woocommerce-MyAccount-content table.order_details tfoot tr:last-child th,
.woocommerce-MyAccount-content table.order_details tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-MyAccount-content table.order_details .product-quantity { color: var(--muted); font-weight: 600; }

/* "Eylemler" satırı + tek eylem düğmesi */
.woocommerce-MyAccount-content .order-actions--heading { vertical-align: middle; text-align: right; }
.woocommerce-MyAccount-content .order-actions--heading + td { text-align: left; }
.woocommerce-MyAccount-content td a.order-actions-button {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}
.woocommerce-MyAccount-content td a.order-actions-button:hover { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
.woocommerce-MyAccount-content .order-again { margin: var(--sp-4) 0 0; }

/* ── Adres kartları (sipariş altı + Adresler sayfası) ───────────── */
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set,
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: start;
  gap: var(--sp-4);
  margin: 0;
  width: auto;
}
/* WC'nin .col2-set clearfix ::before/::after'i grid hücresi kapıyor — iptal. */
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::before,
.woocommerce-MyAccount-content .woocommerce-customer-details .col2-set::after,
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set::before,
.woocommerce-MyAccount-content .woocommerce-Addresses.col2-set::after { content: none; display: none; }
.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column,
.woocommerce-MyAccount-content .woocommerce-Address {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-wrap: anywhere;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin: 0; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  align-self: flex-start;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--blue);
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { background: var(--blue); color: #fff; }
.woocommerce-MyAccount-content address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg);
}
.woocommerce-MyAccount-content .woocommerce-customer-details--email,
.woocommerce-MyAccount-content .woocommerce-customer-details--phone {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.woocommerce-MyAccount-content .addresses ~ p,
.woocommerce-MyAccount-content > p:first-child { color: var(--muted); font-size: 13px; }

/* ── Formlar: hesap detayları + adres düzenleme (site arama kutusu diliyle) ── */
.woocommerce-MyAccount-content .woocommerce-address-fields { max-width: 720px; }
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  max-width: 720px;
}
.woocommerce-MyAccount-content form > h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--sp-3);
}
.woocommerce-MyAccount-content form.edit-account .form-row-wide,
.woocommerce-MyAccount-content form.edit-account fieldset,
.woocommerce-MyAccount-content form.edit-account > p:last-of-type,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row-wide { grid-column: 1 / -1; }
.woocommerce-MyAccount-content form .clear { display: none; }

.woocommerce-MyAccount-content form.edit-account .form-row,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.woocommerce-MyAccount-content form.edit-account .form-row > label,
.woocommerce-MyAccount-content .woocommerce-address-fields .form-row > label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.woocommerce-MyAccount-content .form-row .optional { color: var(--muted); font-weight: 500; }
.woocommerce-MyAccount-content form .woocommerce-input-wrapper { display: block; width: 100%; }

.woocommerce-MyAccount-content form.edit-account .input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields .input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields select {
  font: inherit;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce-MyAccount-content .woocommerce-address-fields select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.woocommerce-MyAccount-content form.edit-account .input-text:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields .input-text:focus,
.woocommerce-MyAccount-content .woocommerce-address-fields select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
  background: var(--surface);
}
.woocommerce-MyAccount-content form.edit-account span em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

.woocommerce-MyAccount-content form.edit-account fieldset {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--fg-soft);
  display: grid;
  gap: var(--sp-3);
}
.woocommerce-MyAccount-content form.edit-account fieldset .form-row { grid-column: 1 / -1; }
.woocommerce-MyAccount-content form.edit-account legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}

.woocommerce-MyAccount-content form.edit-account button[name="save_account_details"],
.woocommerce-MyAccount-content .woocommerce-address-fields button[name="save_address"] {
  justify-self: start;
  margin-top: var(--sp-2);
  padding: 11px 20px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}
.woocommerce-MyAccount-content form.edit-account button[name="save_account_details"]:hover,
.woocommerce-MyAccount-content .woocommerce-address-fields button[name="save_address"]:hover { background: var(--blue-strong); border-color: var(--blue-strong); }

/* ── Giriş sayfası (Hesabım, oturum açılmadan) ─────────────────── */
/* Kayıt My Account'ta kapalı: yapı <h2> + form.woocommerce-form-login,
   ikisi de .woocommerce'in doğrudan çocuğu (sarmalayıcı yok). */
.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 440px;
  margin-inline: auto;
}
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  margin: 0 0 var(--sp-4);
  font-size: 20px;
  font-weight: 700;
}
.woocommerce-account #customer_login.u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
  max-width: 880px;
}
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { content: none; display: none; }
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.woocommerce-account #customer_login h2 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.woocommerce-account #customer_login .woocommerce-form-login,
.woocommerce-account #customer_login .woocommerce-form-register {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row { margin: 0; display: flex; flex-direction: column; }
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.woocommerce-account .woocommerce-form-login .input-text,
.woocommerce-account .woocommerce-form-register .input-text {
  font: inherit;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
}
.woocommerce-account .woocommerce-form-login .input-text:focus,
.woocommerce-account .woocommerce-form-register .input-text:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
  background: var(--surface);
}
.woocommerce-account .woocommerce-form-login__rememberme {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.woocommerce-account .woocommerce-form-login__rememberme .input-checkbox,
.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] { width: auto; height: auto; margin: 0; }
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-form-login .woocommerce-button,
.woocommerce-account .woocommerce-form-login button.button {
  align-self: flex-start;
  margin-top: var(--sp-1);
  padding: 11px 22px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-form-login button.button:hover { background: var(--blue-strong); border-color: var(--blue-strong); }
.woocommerce-account .woocommerce-LostPassword { margin: 4px 0 0; font-size: 13px; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--blue); font-weight: 600; }
.woocommerce-account .woocommerce-privacy-policy-text p { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Panelim özet kartları — hiçbir koşulda içerik sütununu taşmasın */
.woocommerce-MyAccount-content .cb2b-panel,
.woocommerce-MyAccount-content .cb2b-panelim-orders { min-width: 0; max-width: 100%; }
.woocommerce-MyAccount-content .cb2b-panel-grid { min-width: 0; }

@media (max-width: 900px) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-account #customer_login.u-columns { grid-template-columns: 1fr; }
  .woocommerce-MyAccount-content .woocommerce-customer-details .col2-set,
  .woocommerce-MyAccount-content .woocommerce-Addresses.col2-set,
  .woocommerce-MyAccount-content form.edit-account,
  .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .woocommerce-MyAccount-navigation li a { min-height: 40px; border-left: 0; border-bottom: 3px solid transparent; }
  .woocommerce-MyAccount-navigation li.is-active a { border-left: 0; border-bottom-color: var(--blue); }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { border-top: 0; margin-top: 0; }
}
@media (max-width: 720px) {
  /* WC'nin kendi satır-yığını (shop_table_responsive) devrede: tablo tam
     genişlikte kalır, yatay taşma / nowrap YOK — hücreler sarar. */
  .woocommerce-MyAccount-content table.shop_table.shop_table_responsive {
    display: table;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
  }
  .woocommerce-MyAccount-content table.shop_table.shop_table_responsive td,
  .woocommerce-MyAccount-content table.shop_table.shop_table_responsive th {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: right;
  }
  /* WC'nin "data-title" etiketi td::before olarak sola yaslanır; üstteki
     kırılma kuralı ona sızınca etiket 1 karakter genişliğe düşüp DİKEY
     yazılıyordu — burada tek satıra sabitlenir. */
  .woocommerce-MyAccount-content table.shop_table.shop_table_responsive td::before {
    float: left;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    font-weight: 700;
  }
  /* Yığın görünümünde "Durum" hücresinin ::before'u artık "Durum:" ETİKETİ;
     masaüstündeki nokta göstergesinin kutusu (7px daire + gri zemin) o
     etikete sızıp harfin arkasında "madde işareti" gibi görünüyordu —
     burada nötrlenir. */
  .woocommerce-MyAccount-content table.shop_table_responsive tr .woocommerce-orders-table__cell-order-status::before {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    border-radius: 0;
  }
  /* İşlemler hücresindeki düğmeler dar ekranda alt alta sarabilsin. */
  .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions {
    white-space: normal;
  }
  .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a { display: inline-block; }
  /* yığın düzeni olmayan tablolar için güvenli kaydırma (taşma değil) */
  .woocommerce-MyAccount-content table.shop_table:not(.shop_table_responsive) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ─── responsive ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hero .container { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
/* mobilde theme.js .hero-side kartını .catalog'dan sonra #content'e taşır;
   bu durumda .container yatay boşluğu kaybolur — geri veriyoruz. */
@media (max-width: 768px) {
  #content > .hero-side {
    max-width: var(--container);
    margin-inline: auto;
    margin-block: var(--sp-5);
    padding-inline: var(--sp-4);
  }
}
@media (max-width: 1080px) {
  .listing { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .cart-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-review { position: static; }
}
@media (max-width: 960px) {
  .site-header .container { flex-wrap: wrap; gap: var(--sp-3); }
  .brand { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .hsearch { order: 3; max-width: none; flex-basis: 100%; }
  /* 16px: iOS Safari odakta sayfayı zoom etmesin */
  .hsearch__input { font-size: 16px; height: 44px; }
  .header-cutoff { order: 4; }
  .header-cutoff .cepdeposu-cutoff-timer--compact { max-width: none; }
}
@media (max-width: 920px) {
  .container { padding-inline: var(--sp-4); }
  .band .container { grid-template-columns: 1fr; }
  .brand-row { flex-wrap: wrap; }
  .brand-scroll { justify-content: flex-start; }
  /* marka şeridi: aşağı kaydırırken gizlenir (JS: body.cd-nav-collapsed),
     yukarı kaydırınca geri gelir — ekranda daha fazla ürün alanı. */
  .catnav {
    overflow: hidden;
    max-height: 140px;
    transition: max-height .28s ease, opacity .18s ease;
  }
  .catnav:has(.mega:not([hidden])) { max-height: 640px; }
  .catnav:has(.mega:not([hidden])) .mega__models { max-height: 44vh; overflow-y: auto; }
  body.cd-nav-collapsed .catnav {
    max-height: 0;
    opacity: 0;
    border-bottom-width: 0;
  }
  .mega-host { position: static; }
  .mega:not([hidden]) { position: relative; box-shadow: none; margin: var(--sp-2) 0 var(--sp-3); }
  /* kapatma düğmesi arama kutusuyla AYNI satırda, sağda — dikey boşluk yok */
  .mega:not([hidden]) .mega__search { margin-right: 46px; }
  .mega__close {
    display: inline-grid; place-items: center;
    position: absolute; top: var(--sp-4); right: var(--sp-4);
    width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--muted);
  }
  .mega__close svg { width: 16px; height: 16px; }
  .mega__models { columns: 2; }
  .modeldir__list { columns: 2; }
  /* marka ızgarası: parçalar %100 içinde kalsın — minmax(0,1fr) track'in
     logo genişliğinin altına inmesine izin verir, yoksa sayfa dışa kayıyordu */
  .brandgrid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brandgrid__item { min-width: 0; }
  .brandcard { min-width: 0; padding-inline: var(--sp-2); }
  .brandcard__logo { max-width: 100%; }
  .brandcard__logo img { max-width: 100%; }
  .brandcard__wordmark { font-size: 15px; }
  .brandcard__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .band-cta { align-items: flex-start; }
  .band-cta .fine { text-align: left; }
  /* service assurance: 2×2 grid, tek container + iç separator (yatay+dikey) */
  .assurance { display: grid; grid-template-columns: 1fr 1fr; }
  .assurance__item { padding: var(--sp-3); border-left: 0 !important; }
  .assurance__item:nth-child(2n) { border-left: 1px solid var(--border) !important; }
  .assurance__item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .iaction-grid { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .util { display: none; }
  .qtable-wrap { overflow-x: auto; }
  .qtable { min-width: 880px; }
  .citem { grid-template-columns: 44px minmax(0, 1fr); }
  .ci-thumb { width: 44px; height: 44px; }
  .ci-right { grid-column: 1 / -1; justify-content: space-between; gap: var(--sp-2); }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
  .checkout .woocommerce-billing-fields__field-wrapper,
  .checkout .woocommerce-shipping-fields__field-wrapper,
  .checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .brandgrid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__models { columns: 1; }
  .modeldir__list { columns: 1; }
}

/* ─── mobil: header aksiyonları sıkılaştırma (≤560px) ───────────── */
@media (max-width: 560px) {
  .site-header .container { gap: var(--sp-2); }
  .header-actions { gap: 4px; }

  /* kargo geri sayım kutusu telefonda gizli — ürün ve sepet
     sayfalarında zaten görünüyor, header'da tam genişlik blok yapıyordu */
  .header-cutoff { display: none; }

  /* tema düğmesi: 44×44 dokunma hedefi */
  .theme-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }

  /* giriş / hesabım: sadece ikon (erişilebilir ad aria-label'da) */
  .header-actions .link-login { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .header-actions .link-login .login-label { display: none; }

  /* sepet: ikon + adet rozeti; "Sepet" yazısı gizli */
  .cart-btn-lg { height: 44px; padding: 0 12px; gap: 6px; }
  .cart-btn-lg .cart-label { display: none; }
}

/* ─── mobil: ürün arşivi araç çubuğu → tek kompakt satır (≤640px) ───
   Filtreler + görünüm anahtarı (yalnız ikon) + sıralama tek satırda;
   "12 ürün · 1–12 arası" sayacı telefonda gizli (kullanıcı isteği).
   ui-ux-pro-max: ikon-yalnız düğmelerin erişilebilir adı aria-label'da,
   dokunma hedefi ~36px; satır sığmazsa kırpma yerine yatay kaydırma. */
@media (max-width: 640px) {
  /* tek satır; kırpma YOK — aksi halde "Filtreler" açılır paneli
     toolbar kutusu içine hapsolup görünmüyor. Öğeler daralarak sığar. */
  .listing .toolbar { flex-wrap: nowrap; gap: 6px; padding: 6px; }

  .toolbar .count-res { display: none; }

  .toolbar .filterpop { flex: none; }
  .toolbar .filterpop__btn { padding: 8px 10px; font-size: 12px; min-height: 36px; }
  .toolbar .filterpop__panel { width: min(320px, calc(100vw - 24px)); }

  .toolbar .viewtoggle { flex: none; padding: 2px; }
  .toolbar .viewtoggle button { padding: 8px 11px; min-height: 36px; gap: 0; }
  .toolbar .viewtoggle .vt-label { display: none; }
  .toolbar .viewtoggle svg { width: 16px; height: 16px; }

  .toolbar .sort { margin-left: auto; flex: 1 1 auto; min-width: 0; gap: 0; }
  .toolbar .sort form { min-width: 0; width: 100%; }
  .toolbar .sort select,
  .toolbar select { width: 100%; max-width: 100%; padding: 8px 8px; min-height: 36px; text-overflow: ellipsis; }
}

/* ─── mobil: kayan iletişim düğmeleri + footer (≤640px) ─────────── */
@media (max-width: 640px) {
  /* yatay taşma emniyeti — clip, sticky header'ı bozmaz (hidden bozabilir) */
  body { overflow-x: clip; }

  .fab {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  /* geniş "WhatsApp Sipariş" hapları yerine yuvarlak ikon düğmeler */
  .fab-btn { width: 48px; height: 48px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .fab-btn svg { width: 20px; height: 20px; }

  .site-footer .container { padding-block: var(--sp-6) var(--sp-5); }

  /* ── hızlı sipariş tablosu → telefonda KART düzeni ──────────────
     Yapı tahtakaleekran.com deseninden: [isim] / [kategori · stok ·
     "Ürün Görseli" çipi · rozetler] / [fiyat | adet + sepet].
     ui-ux-pro-max: geniş veri tablosu mobilde karta dönüşür;
     white-space:nowrap kaldırılır (hücre bindirmesini o yaratıyordu). */
  .qtable-wrap, .qscroll { overflow: visible; border: 0; background: transparent; }
  .qtable, .qtable tbody, .qtable tr, .qtable td { display: block; width: auto; }
  .qtable { min-width: 0; }
  .qtable thead { display: none; }

  .qtable tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "name  name name"
      "price qty  add";
    gap: 12px 10px;
    align-items: center;
    cursor: default;
  }
  .qtable tbody tr:nth-child(even),
  .qtable tbody tr:hover { background: var(--surface); }
  .qtable tbody td { padding: 0; border: 0; }

  /* gizli: SKU sütunu + masaüstü stok sütunu (stok mobilde meta satırında) */
  .qtable td.c-code,
  .qtable tbody td:nth-child(3) { display: none; }

  /* isim bloğu: ad üstte tam satır, altında meta öğeleri sararak */
  .qtable td.c-name { grid-area: name; min-width: 0; }
  .qtable td.c-name .c-txt {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0;
  }
  .qtable td.c-name .c-txt .qv-open {
    order: -1; flex-basis: 100%; font-weight: 700; font-size: 14px; line-height: 1.3;
    white-space: normal; overflow-wrap: anywhere; color: var(--fg);
  }

  /* "Ürün Görseli" çipi — gerçek thumb butonu, tıklanınca görsel açılır */
  .qtable td.c-name .thumb.has-img {
    width: auto; height: auto; margin: 0; padding: 3px 9px 3px 7px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: var(--muted);
  }
  .qtable td.c-name .thumb.has-img img,
  .qtable td.c-name .thumb > svg { display: none; }
  .qtable td.c-name .thumb .thumb-chip { display: inline-flex; align-items: center; gap: 5px; }
  .qtable td.c-name .thumb .thumb-chip svg { width: 13px; height: 13px; }
  .qtable td.c-name .thumb:not(.has-img) { display: none; }

  /* masaüstü-only içerik sütunu (.c-body) mobilde şeffaflaşır — ad/qo-meta/
     c-meta-row mevcut düz kart flex akışına geri döner (regresyon yok). */
  .qtable td.c-name .c-body { display: contents; }
  /* meta: kategori etiketi + stok — display:contents ile aynı satırda sarar */
  .qtable td.c-name .qo-meta { display: contents; }
  /* masaüstü-only sarmalayıcı (.c-meta-row) mobilde şeffaflaşır — rozet/uyumlu
     mevcut kart akışında thumb/qo-meta ile aynı seviyede kalır (regresyon yok). */
  .qtable td.c-name .c-meta-row { display: contents; }
  .qtable td.c-name .qo-cat {
    font-family: var(--font-sans); font-size: 10px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  }
  .qtable td.c-name .stock-cell { font-size: 11px; }

  /* aksiyon satırı */
  .qtable tbody td.unit {
    grid-area: price; justify-self: start; text-align: left;
    font-size: 17px; font-weight: 750; font-family: var(--font-sans);
  }
  .qtable tbody td.unit .rt { font-size: 11px; }
  .qtable tbody td:nth-child(5) { grid-area: qty; justify-self: end; }
  .qtable tbody td:nth-child(6) { grid-area: add; justify-self: end; }

  .qtable .stepper button { width: 34px; height: 38px; font-size: 17px; }
  .qtable .stepper input { width: 44px; height: 38px; font-size: 14px; }
  .qtable .row-add { width: 52px; height: 38px; }
  .qtable .row-add svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────  Hızlı Sipariş sayfası  ───────────────────────── */
.qorder-page { padding-block: var(--sp-6, 32px) 120px; }
.qorder-page__head { margin-bottom: var(--sp-5, 24px); }
.qorder-page__head h1 { margin: 4px 0 6px; }
.qorder-empty {
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--muted);
}

.qorder {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.qorder__labels,
.qorder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(120px, 160px) 40px;
  gap: 14px; align-items: center;
  padding: 12px 16px;
}
.qorder__labels {
  font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); background: var(--fg-soft, rgba(0,0,0,.03));
  border-bottom: 1px solid var(--border);
}
.qorder__labels span:nth-child(3) { text-align: right; }
.qorder-row { border-bottom: 1px solid var(--border); position: relative; }
.qorder-row:last-of-type { border-bottom: 0; }
.qorder-row.is-busy { opacity: .6; pointer-events: none; }

/* arama / seçili ürün */
.qorder-row__pick { min-width: 0; }
.qorder-row__search { position: relative; }
.qorder-row__input {
  width: 100%; height: 40px; padding: 0 36px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 14px;
}
.qorder-row__input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.qorder-row__clear {
  position: absolute; inset-inline-end: 6px; inset-block-start: 6px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
/* hidden niteliği CSS display kurallarını ezmesin (boş satır durumu) */
.qorder-row__clear[hidden],
.qorder-row__picked[hidden] { display: none; }
.qorder-row__clear:hover { color: var(--fg); }
.qorder-row__clear svg { width: 16px; height: 16px; }

.qorder-row__results {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px);
  z-index: 40; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.qorder-opt {
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px;
  align-items: center; width: 100%; padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--fg); font: inherit; text-align: start; cursor: pointer;
}
.qorder-opt:last-child { border-bottom: 0; }
.qorder-opt:hover:not(.is-disabled),
.qorder-opt:focus-visible { background: var(--fg-soft, rgba(0,0,0,.04)); }
.qorder-opt.is-disabled { opacity: .55; cursor: not-allowed; }
.qorder-opt .th { width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: var(--fg-soft, rgba(0,0,0,.05)); }
.qorder-opt .th img { width: 100%; height: 100%; object-fit: cover; }
.qorder-opt .tx { min-width: 0; }
.qorder-opt .tx b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qorder-opt .tx small { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.qorder-opt .mt { text-align: end; font-size: 12px; white-space: nowrap; }
.qorder-opt .mt .ok { color: var(--ok); font-weight: 600; }
.qorder-opt .mt .no { color: var(--muted); }
.qorder-row__empty { margin: 0; padding: 12px; color: var(--muted); font-size: 13px; }

.qorder-row__picked { display: flex; gap: 10px; align-items: center; min-width: 0; }
.qorder-row__picked .pk-thumb { width: 34px; height: 34px; flex: none; border-radius: 6px; overflow: hidden; background: var(--fg-soft, rgba(0,0,0,.05)); }
.qorder-row__picked .pk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qorder-row__picked .pk-text { min-width: 0; }
.qorder-row__picked .pk-name { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qorder-row__picked .pk-sku { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }

.qorder-row__total { text-align: right; font-weight: 650; font-size: 14px; }
.qorder-row__total .amount { white-space: nowrap; }

.qorder-row__del {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.qorder-row__del:hover:not(:disabled) { color: #c0392b; border-color: #c0392b; }
.qorder-row__del:disabled { opacity: .4; cursor: not-allowed; }
.qorder-row__del svg { width: 17px; height: 17px; }

.qorder-row__hint {
  grid-column: 1 / -1; margin: 2px 0 0; min-height: 0;
  font-size: 12px; color: var(--muted);
}
.qorder-row__hint:empty { display: none; }
.qorder-row__hint.is-error { color: #c0392b; }

.qorder__tools {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-top: 1px solid var(--border);
  background: var(--fg-soft, rgba(0,0,0,.02));
}
.qorder__tools .btn {
  flex: 1 1 0; max-width: 240px; min-height: 40px; padding-block: 0; line-height: 1;
}
.qorder__tools .btn svg { flex: none; margin-inline-end: 2px; }
.qorder__clear-all:disabled { opacity: .5; cursor: not-allowed; }

/* bu sayfaya özel alt çubuk (ana .cepdeposu-qbar'dan bağımsız) */
.qorder-bar {
  position: sticky; bottom: 0; z-index: 20; margin-top: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  background: var(--navy); color: var(--on-navy);
  border-radius: 10px; padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 10px 30px color-mix(in oklch, var(--navy) 25%, transparent);
}
.qorder-bar[hidden] { display: none; }
.qorder-bar__info {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-size: 13px; color: var(--on-navy-dim);
}
.qorder-bar__info strong {
  color: var(--on-navy); font-family: var(--font-sans); font-weight: 700;
}
.qorder-bar__total strong { font-size: 18px; margin-left: 6px; }
.qorder-bar__note { font-size: 11px; }
/* Faz 4F: kanonik .pcard-tier bu koyu zeminli çubukta da kullanılıyor
   (docs/design-system.md §12); yalnız metin rengini koyu zemine uyarlıyoruz,
   nokta rengi (kademe rengi) bileşenin kendi kuralından değişmeden gelir. */
.qorder-bar__info .pcard-tier { margin: 0; color: var(--on-navy-dim); }
.qorder-bar__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.qorder-bar__actions .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .qorder-bar { gap: var(--sp-2); }
  .qorder-bar__info { width: 100%; }
  .qorder-bar__note { display: none; }
  .qorder-bar__actions { width: 100%; }
  .qorder-bar__actions .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 720px) {
  .qorder__labels { display: none; }
  .qorder-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "pick pick"
      "qty  total"
      "hint del";
    row-gap: 10px;
  }
  .qorder-row__pick   { grid-area: pick; }
  .qorder-row__qty    { grid-area: qty; }
  .qorder-row__total  { grid-area: total; align-self: center; }
  .qorder-row__del    { grid-area: del; justify-self: end; }
  .qorder-row__hint   { grid-area: hint; align-self: center; margin: 0; }
}

/* ─── sayısal hizalama ───────────────────────────────────────────────
   Monospace kaldırıldıktan sonra fiyat / adet / tablo rakamları eşit
   genişlikte (tabular) kalsın; gövde fontu (Inter/Nunito Sans) tabular
   rakam figürünü destekler. */
.num, .meta,
.qtable td, .qtable-foot .sum strong,
.tier .t-qty, .stepper input, .pagination a, .pagination span,
.pdp-summary .price, .pdp-sticky .ps-price,
.pdp-summary form.cart .quantity input.qty,
.pdp-summary .cepdeposu-qty-tier-table td,
.ci-unit, .ci-line strong, .ci-line span, .sum-row .v, .sum-total .v,
.cepdeposu-qbar .qbar-info strong, .qorder-bar__info strong,
.qtable tbody td.unit {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   Faz 4A — Design System Foundation (docs/design-system.md)
   Genel amaçlı, sayfaya özel OLMAYAN primitive'ler. Amaç: hiçbir yerde
   stillenmemiş native form öğelerine (ör. henüz redesign edilmemiş
   my-account/quick-order formları) tutarlı bir taban vermek — .hsearch__*,
   .pcard, .pbadge, .tier-badge gibi sayfaya özel bileşenlere DOKUNULMADI
   (kendi seçicileri zaten daha yüksek özgüllükte, bu blok onları ezmez).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── link (gövde içi metin bağlantısı) ────────────────────────────── */
.link {
  color: var(--primary); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.link:hover { color: var(--primary-hover); text-decoration-color: currentColor; }

/* ─── input / select / textarea taban stili ────────────────────────
   Yalnız daha özgül bir seçici tarafından ele alınmayan native form
   öğelerini kapsar (element seçici → düşük özgüllük, mevcut .hsearch__input
   / .checkout / .qtable .stepper input gibi sınıf seçicileri ezmez). */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], input[type="url"], textarea, select {
  width: 100%; min-height: 44px; padding: 9px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font: 400 var(--fs-body)/1.4 var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--bg); color: var(--text-muted); cursor: not-allowed;
}

/* ── wrapper'lı arama kutularında iç input ikinci bir kutu çizmez ──
   Yukarıdaki genel `input[type="search"]` / `input:focus-visible` taban
   stili (0,1,1) tek sınıflı bu seçicilerden özgül olduğu için dış
   wrapper'ın (`.shopsearch__box` / `.mega__search` / `.modeldir__search`)
   içinde ayrı border + background + box-shadow'lu ikinci bir kutu
   oluşuyordu. Özgüllük artırılıp iç input görsel olarak sıfırlanıyor;
   ölçü ve hizayı dış wrapper verir. Davranış/JS değişmez.
   (Başlık aramasında `.hsearch .hsearch__input` zaten (0,2,0) ile bu
   tabanı ezdiği ve `.hsearch`'ün kendi wrapper kutusu olmadığı için
   oraya dokunulmadı.) */
.shopsearch .shopsearch__input,
.mega__search .mega__search-input,
.modeldir__search .modeldir__search-input {
  min-height: 0; padding: 0;
  border: 0; background: transparent;
  box-shadow: none; outline: 0;
}
.shopsearch .shopsearch__input:focus,
.shopsearch .shopsearch__input:focus-visible,
.mega__search .mega__search-input:focus,
.mega__search .mega__search-input:focus-visible,
.modeldir__search .modeldir__search-input:focus,
.modeldir__search .modeldir__search-input:focus-visible {
  border: 0; background: transparent; box-shadow: none; outline: 0;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text); }
.field > .field-hint { font-size: var(--fs-meta); color: var(--text-muted); }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: var(--danger);
}
.field .field-error { font-size: 13px; color: var(--danger); }

/* ─── badge / status (genel amaçlı durum göstergesi) ────────────────
   .pill / .pbadge / .tier-badge sayfaya özel bileşenlerdir ve değiştirilmedi;
   .badge yeni sayfalarda/formlarda kullanılacak genel birincil primitive. */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-badge); font-weight: 600; line-height: 1.4;
  background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; flex: none; background: currentColor; }
.badge--success { background: var(--success-tint); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-tint); color: var(--warning); border-color: transparent; }
.badge--danger  { background: var(--danger-tint);  color: var(--danger);  border-color: transparent; }
.badge--accent  { background: var(--accent-soft);  color: var(--accent-strong); border-color: transparent; }

/* ─── card surface (genel amaçlı yüzey) ─────────────────────────────
   .pcard ürün kartına özeldir ve değiştirilmedi; .card genel bir yüzey
   primitive'idir (dinlenmede gölgesiz — docs/design-system.md §9/§4.4). */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4);
}
.card--raised { box-shadow: var(--shadow-raised); }

}