/* ELAY Mağaza — tek stil dosyası. Sayfa bölümleri yalnızca kendi sayfasında (body[data-view]) geçerlidir. */
/* ==========================================================================
   ELAY — Design System v1.0
   Digital Fashion / Editorial Commerce
   Mobile-first. Breakpoints: 390 · 430 · 768 · 1024 · 1280 · 1440 · 1920
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Palette — Off White · Ivory · Soft Beige · Warm Gray · Charcoal · Black */
  /* 2026-10-25: daha temiz, ferah zemin — bej yalnızca vurgu yüzeylerinde.
     Eski sıcak kâğıt tonu: --bg #F7F4EF · --bg-elev #FBF9F5 · --surface #EFEAE2 · --beige #E4DBCD */
  --bg: #FFFFFF;              /* 2026-11-08 Fakir düzeni: saf beyaz zemin; kutular --panel ile ayrışır. Önceki kırık beyaz: #FCFBF9 */
  --bg-elev: #FFFFFF;
  --surface: #F3F0EB;
  --beige: #E8E1D5;
  --warm-gray: #A39B90;
  --muted: #857D73;
  --text-2: #57514A;
  --text: #1E1C1A;
  --ink: #0F0E0D;
  --line: rgba(30, 28, 26, .10);
  --line-strong: rgba(30, 28, 26, .22);
  --accent: #A3452B;          /* kontrollü kullanılır: indirim, uyarı */
  --success: #4E6B4A;
  --on-ink: #F7F4EF;
  --scrim: rgba(15, 14, 13, .42);
  --img-bg: #F0EDE8;
  --panel: #F5F3EF;          /* Fakir düzeni: açık panel yüzeyi (arama, kutular, footer) */

  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;
  --hdr-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-soft: 0 1px 2px rgba(20, 16, 12, .04), 0 12px 40px -12px rgba(20, 16, 12, .18);
  --shadow-float: 0 24px 80px -24px rgba(20, 16, 12, .35);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131211; --bg-elev: #1A1917; --surface: #22201E; --beige: #2C2926;
    --warm-gray: #7D766D; --muted: #9A9288; --text-2: #C7BFB4; --text: #F1ECE5; --ink: #FAF7F2;
    --line: rgba(255, 248, 240, .12); --line-strong: rgba(255, 248, 240, .24);
    --accent: #D38C6F; --success: #8FB089; --on-ink: #141312; --img-bg: #24211E; --panel: #1F1D1B;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px -12px rgba(0,0,0,.6);
    --shadow-float: 0 24px 80px -24px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131211; --bg-elev: #1A1917; --surface: #22201E; --beige: #2C2926;
  --warm-gray: #7D766D; --muted: #9A9288; --text-2: #C7BFB4; --text: #F1ECE5; --ink: #FAF7F2;
  --line: rgba(255, 248, 240, .12); --line-strong: rgba(255, 248, 240, .24);
  --accent: #D38C6F; --success: #8FB089; --on-ink: #141312; --img-bg: #24211E; --panel: #1F1D1B;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px -12px rgba(0,0,0,.6);
  --shadow-float: 0 24px 80px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
  animation: page-fade .5s var(--ease-out);
}
/* Not: body üzerinde transform KULLANILMAZ — position:fixed öğeleri bozar */
main { animation: page-in .6s var(--ease-out); }
body.is-leaving { opacity: 0; transition: opacity .22s var(--ease); }
body.no-scroll { overflow: hidden; }
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--img-bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--text); color: var(--bg); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 999; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--r-pill); transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ---------- 3. Layout ---------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1920px; }
.container--narrow { max-width: 860px; }
.section { padding-block: clamp(48px, 6.5vw, 104px); }
.section--tight { padding-block: clamp(36px, 4.5vw, 64px); }
.section--surface { background: var(--surface); }
/* Koyu bölüm: tüm tokenlar ters çevrilir, bileşenler otomatik uyum sağlar */
.section--ink {
  --bg: #0F0E0D; --bg-elev: #1C1A18; --surface: #1C1A18; --beige: #2A2724; --img-bg: #24211E;
  --text: #F4EFE8; --text-2: #CFC7BC; --muted: #9A9288; --ink: #F4EFE8;
  --line: rgba(255,255,255,.14); --line-strong: rgba(255,255,255,.3);
  background: var(--bg); color: var(--text); color-scheme: dark;
}
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 4vw, 48px); }
.section-head__title { display: grid; gap: 10px; }

.grid { display: grid; gap: var(--g, 16px); }
.stack { display: flex; flex-direction: column; gap: var(--g, 12px); }
.row { display: flex; align-items: center; gap: var(--g, 12px); }
.row--between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; } }
@media (min-width: 1280px) { .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 4. Typography ----------------------------------------------- */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.display {
  font-family: var(--serif); font-weight: 400; line-height: .92; letter-spacing: -.025em;
  font-size: clamp(38px, 5.2vw, 84px); text-transform: uppercase;
}
.h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.8vw, 58px); line-height: 1; letter-spacing: -.02em; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.8vw, 44px); line-height: 1.04; letter-spacing: -.018em; }
.h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.1; letter-spacing: -.01em; }
.h4 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.upper { text-transform: uppercase; }
.italic { font-style: italic; }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--text-2); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.balance { text-wrap: balance; }

.link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .02em; padding-bottom: 3px; }
.link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .45s var(--ease-out); }
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link:hover::after { animation: link-redraw .7s var(--ease-out) .05s forwards; }
@keyframes link-redraw { 0% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.link .ico { transition: transform .35s var(--ease-out); }
.link:hover .ico { transform: translateX(4px); }
.link--upper { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; }

/* İkonlar — Material Symbols Rounded (Alpet ile aynı set). <elay-icon class="ico" data-i="ad">: glif ::before ile basılır ve
   kutuyu doldurur (font-size 100cqh) — boyut her yerde .ico genişlik/yüksekliğiyle verilir. Dolu: --ico-fill: 1. */
.ico { position: relative; display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; container-type: size; --ico-fill: 0; }
.ico::before {
  content: attr(data-i); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 100cqh; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga'; font-variation-settings: 'FILL' var(--ico-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Material'da olmayan marka logoları (Instagram, TikTok, Pinterest) çizgi SVG */
svg.ico { display: inline-block; container-type: normal; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.ico--xs { width: 12px; height: 12px; }
.ico--lg { width: 24px; height: 24px; }

/* ---------- 5. Buttons & Controls --------------------------------------- */
.btn {
  --btn-bg: var(--text); --btn-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 12px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg);
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
  transition: transform .2s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s, opacity .2s;
  overflow: hidden; isolation: isolate;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease-out); border-radius: inherit; }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.975); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line-strong); }
.btn--ghost::before { background: var(--text); }
.btn--ghost:hover { color: var(--bg); border-color: var(--text); }
.btn--light { --btn-bg: #F7F4EF; --btn-fg: #141312; }
.btn--light::before { background: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn--outline-light::before { background: #fff; }
.btn--outline-light:hover { color: #141312; }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 15px; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--btn-fg); border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.is-done::before { background: var(--success); transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; transition: background .25s, transform .2s; }
.icon-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.icon-btn:active { transform: scale(.92); }
.icon-btn--solid { background: var(--bg-elev); box-shadow: var(--shadow-soft); }

.count-badge { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 600; display: grid; place-items: center; line-height: 1; }
.count-badge:empty, .count-badge[data-count="0"] { display: none; }
.count-badge.is-bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); font-size: 13px; white-space: nowrap; transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--text); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .x { opacity: .6; }
.chip--lg { height: 48px; padding: 0 22px; font-size: 14px; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { --c: #ccc; width: 30px; height: 30px; border-radius: 50%; position: relative; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: transform .2s; }
.swatch::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid transparent; transition: border-color .2s; }
.swatch:hover { transform: scale(1.06); }
.swatch.is-active::after, .swatch[aria-checked="true"]::after { border-color: var(--text); }
.swatch--sm { width: 12px; height: 12px; }
.swatch--sm::after { inset: -3px; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { min-width: 56px; height: 44px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); font-size: 13px; transition: all .2s; }
.pill:hover { border-color: var(--text); }
.pill.is-active, .pill[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.pill.is-out { color: var(--muted); text-decoration: line-through; border-style: dashed; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); height: 40px; }
.qty button { width: 38px; height: 100%; display: grid; place-items: center; border-radius: 50%; }
.qty button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.qty output, .qty span { min-width: 24px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.qty--sm { height: 34px; }
.qty--sm button { width: 32px; }

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--bg-elev); color: var(--text); }
.badge--dark { background: var(--text); color: var(--bg); }
.badge--accent { background: var(--accent); color: #fff; }
.badge--outline { background: transparent; border: 1px solid var(--line-strong); }
.badge--success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }

/* Forms */
.field { position: relative; display: block; }
.field__input {
  width: 100%; height: 56px; padding: 22px 16px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: 15px;
  transition: border-color .2s, box-shadow .2s; appearance: none;
}
textarea.field__input { height: auto; min-height: 120px; resize: vertical; padding-top: 26px; }
.field__input:hover { border-color: var(--warm-gray); }
.field__input:focus { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.field__label { position: absolute; left: 17px; top: 18px; font-size: 15px; color: var(--muted); pointer-events: none; transition: all .2s var(--ease); transform-origin: left top; }
.field__input:focus + .field__label, .field__input:not(:placeholder-shown) + .field__label, select.field__input + .field__label { top: 9px; font-size: 11px; letter-spacing: .04em; }
.field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.field.is-error .field__input { border-color: var(--accent); }
.field.is-error .field__hint { color: var(--accent); }
.field__suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
select.field__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857D73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; user-select: none; }
.check input { appearance: none; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 5px; display: grid; place-items: center; transition: all .2s; flex: none; margin: 0; background: var(--bg-elev); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--text); border-color: var(--text); }
.check input:checked::after { content: ''; width: 10px; height: 6px; border: 1.6px solid var(--bg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--bg); transform: none; }

.switch { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--beige); transition: background .25s; cursor: pointer; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s var(--ease-out); }
.switch input:checked + span { background: var(--text); }
.switch input:checked + span::after { transform: translateX(16px); }

/* Range (price) */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--line-strong); border-radius: 2px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--text); cursor: grab; }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--text); cursor: grab; }

/* ---------- 6. Header (Fakir düzeni) -------------------------------------
   Üst satır: logo · büyük arama kutusu · yazılı ikonlar (Favorilerim, Hesabım, Sepetim).
   Alt satır (≥1024px): kategori şeridi, alt kategoriler CSS ile açılır. Mobilde arama ikinci satırda. */
:root { --hdr-h: 109px; }
@media (min-width: 1024px) { :root { --hdr-h: 126px; } }
.hdr { position: sticky; top: 0; z-index: 60; background: var(--bg-elev); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease); }
.hdr.is-scrolled { box-shadow: 0 8px 24px -18px rgba(20, 16, 12, .35); }
.hdr__top {
  display: grid; align-items: center; gap: 6px 8px; padding-block: 6px 10px;
  grid-template-columns: auto 1fr auto; grid-template-areas: "burger logo actions" "search search search";
}
.hdr__burger { grid-area: burger; margin-left: -8px; }
/* Logo (Html.Logo): masaüstünde yatay logo, mobilde yuvarlak rozet — header, ödeme, giriş aynı sınıfları kullanır */
.hdr__logo { grid-area: logo; justify-self: start; display: inline-flex; align-items: center; color: var(--text); line-height: 0; }
.hdr__word { display: none; height: 30px; width: auto; }
.hdr__badge { width: 42px; height: 42px; }
.hdr__search {
  grid-area: search; display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 14px;
  border-radius: 12px; background: var(--panel); border: 1px solid transparent; color: var(--muted); font-size: 14px; text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.hdr__search:hover, .hdr__search:focus-visible { background: var(--bg-elev); border-color: var(--line-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 5%, transparent); }
.hdr__search > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hdr__kbd { display: none; font: 500 11px/1 var(--sans); padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.hdr__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.hdr__act { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .2s; }
.hdr__act:hover { background: var(--panel); }
.hdr__act .count-badge { top: 3px; left: 23px; right: auto; }
.hdr__act-label, .hdr__act--wide, .hdr__region, .hdr__lang { display: none !important; }
@media (min-width: 1024px) {
  .hdr__top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search actions"; gap: 40px; min-height: 76px; padding-block: 12px; }
  .hdr__burger { display: none; }
  .hdr__word { display: block; }
  .hdr__badge { display: none; }
  .hdr__search { height: 48px; max-width: 680px; justify-self: center; }
  .hdr__kbd { display: inline-block; }
  .hdr__act-label { display: inline !important; }
  .hdr__act--wide { display: inline-flex !important; }
  .hdr__region { display: inline-flex !important; margin-right: 4px; }
  .hdr__lang { display: inline-flex !important; margin-right: 8px; }
}

/* Kategori şeridi */
.hdr__cats { display: none; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .hdr__cats { display: block; } }
.hdr__cats-in { display: flex; align-items: center; gap: 2px; height: 48px; }
.hdr__cat { position: relative; height: 100%; display: flex; align-items: center; }
.hdr__cat > a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background .2s, color .2s; }
.hdr__cat > a .ico--xs { opacity: .55; transition: transform .25s var(--ease-out); }
.hdr__cat:hover > a, .hdr__cat:focus-within > a, .hdr__cat.is-current > a { background: var(--panel); color: var(--text); }
.hdr__cat:hover > a .ico--xs { transform: rotate(180deg); }
.hdr__cat--deal { margin-right: 8px; }
.hdr__cat--deal > a, .hdr__cat--deal:hover > a, .hdr__cat--deal.is-current > a { background: var(--text); color: var(--bg); }
.hdr__drop {
  position: absolute; top: calc(100% - 4px); left: 0; z-index: 62; width: max-content; min-width: 300px; max-width: 640px; padding: 14px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease), transform .25s var(--ease-out), visibility 0s .2s;
}
.hdr__drop--end { left: auto; right: 0; }
.hdr__cat:hover .hdr__drop, .hdr__cat:focus-within .hdr__drop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease-out); }
.hdr__drop-grid { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 4px; }
.hdr__drop-item { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; font-size: 13.5px; transition: background .2s; }
.hdr__drop-item:hover, .hdr__drop-item:focus-visible { background: var(--panel); }
.hdr__drop-item img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.hdr__drop-item span { display: grid; gap: 1px; }
.hdr__drop-item strong { font-weight: 500; }
.hdr__drop-item small { font-size: 11.5px; color: var(--muted); }
.hdr__drop-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.hdr__drop-all:hover { color: var(--text-2); }

/* Language switch (TR / EN) */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 3px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); margin-inline: 4px; }
.lang-switch button { height: 100%; min-width: 30px; padding: 0 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; opacity: .55; transition: opacity .2s, background .25s, color .25s; }
.lang-switch button:hover { opacity: 1; }
.lang-switch button.is-active { opacity: 1; background: currentColor; }
.lang-switch button.is-active { background: var(--text); color: var(--bg); }
.hdr__actions .lang-switch.hide-sm { display: none; }
@media (min-width: 1024px) { .hdr__actions .lang-switch.hide-sm { display: inline-flex; } }
.lang-switch--seg { height: 42px; padding: 4px; border: 0; background: var(--surface); margin: 0; }
.lang-switch--seg button { min-width: 48px; font-size: 12px; }

/* Region / currency button (header, mobile menu, footer) */
.region-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 11px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; transition: border-color .2s, background .2s; }
.region-btn:hover { border-color: currentColor; }
.region-btn__code { opacity: .6; }
.region-btn__cur { font-weight: 500; }
.hdr__actions .region-btn.hide-sm { display: none; }
@media (min-width: 1024px) { .hdr__actions .region-btn.hide-sm { display: inline-flex; } }
.region-btn--block { height: 42px; padding: 0 16px; background: var(--surface); border: 0; font-size: 12px; }
.region-panel { width: min(600px, 100%); }
.region-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 479px) { .region-list { grid-template-columns: 1fr; } }
.region-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); text-align: left; font-size: 14px; transition: border-color .2s, background .2s; }
.region-opt:hover { border-color: var(--text); }
.region-opt.is-active { border-color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--text); }
.region-opt__code { width: 30px; height: 22px; border-radius: 4px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; flex: none; }
.region-opt__name { flex: 1; min-width: 0; }
.region-opt__cur { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.region-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.region-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface); font-size: 13px; line-height: 1.55; color: var(--text-2); }
.region-note .ico { margin-top: 2px; flex: none; }

/* Instant search overlay */
.sov { position: fixed; left: 0; right: 0; top: 0; z-index: 105; max-height: min(88vh, 760px); display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--shadow-float); border-radius: 0 0 var(--r-lg) var(--r-lg); transform: translateY(-16px); opacity: 0; visibility: hidden; transition: transform .45s var(--ease-out), opacity .3s var(--ease), visibility 0s .45s; }
.sov.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--ease-out), opacity .3s var(--ease); }
.sov__bar { border-bottom: 1px solid var(--line); }
.sov__barin { display: flex; align-items: center; gap: 14px; height: 76px; }
.sov__input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none; font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.01em; }
.sov__input::placeholder { color: var(--muted); }
.sov__input::-webkit-search-cancel-button { display: none; }
.sov__kbd { font-family: var(--sans); font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.sov__body { overflow-y: auto; overscroll-behavior: contain; padding: 24px 0 32px; }
.sov__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .sov__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; } }
.sov__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sov__chips .chip { height: 34px; font-size: 12.5px; }
.sov__links { margin-top: 10px; }
.sov__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: padding .3s var(--ease-out); }
.sov__links a:hover, .sov__links a:focus-visible { padding-left: 6px; }
.sov__links a .ico { opacity: .5; }
.sov__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin-top: 12px; }
@media (min-width: 900px) { .sov__products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sov-p { display: grid; gap: 10px; border-radius: var(--r-sm); }
.sov-p__img { display: block; aspect-ratio: 4/5; border-radius: var(--r-sm); overflow: hidden; background: var(--img-bg); }
.sov-p__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.sov-p:hover .sov-p__img img, .sov-p:focus-visible .sov-p__img img { transform: scale(1.04); }
.sov-p__meta { display: grid; gap: 2px; }
.sov-p__brand { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sov-p__name { font-size: 13.5px; }
.sov-p .price { font-size: 13px; }
.sov__empty { padding: 24px 0 8px; }
@media (max-width: 899px) {
  .sov { bottom: 0; max-height: none; border-radius: 0; }
  .sov__barin { height: 64px; }
  .sov__main { order: -1; }
}

/* Brand wordmarks, marquee & cards (ana sayfa + marka sayfası) */
.bmark { font-family: var(--sans); font-weight: 500; line-height: 1; white-space: nowrap; }
.bmark--sans-wide { text-transform: uppercase; letter-spacing: .32em; font-weight: 500; }
.bmark--sans-bold { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.bmark--sans-light { text-transform: uppercase; letter-spacing: .22em; font-weight: 300; }
.bmark--serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.bmark--serif-italic { font-family: var(--serif); font-style: italic; letter-spacing: -.01em; }
.bmark--serif-upper { font-family: var(--serif); text-transform: uppercase; letter-spacing: .12em; }
.bmarquee { position: relative; overflow: hidden; padding-block: clamp(18px, 2.4vw, 30px); border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bmarquee__track { display: flex; align-items: center; width: max-content; animation: marquee 46s linear infinite; }
.bmarquee:hover .bmarquee__track, .bmarquee:focus-within .bmarquee__track { animation-play-state: paused; }
.bmarquee a { display: inline-flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); font-size: clamp(20px, 2.1vw, 30px); color: var(--text); opacity: .78; transition: opacity .25s; }
.bmarquee a::after { content: '✦'; font-family: var(--sans); font-size: 10px; opacity: .45; letter-spacing: 0; font-style: normal; font-weight: 400; }
.bmarquee a:hover, .bmarquee a:focus-visible { opacity: 1; }
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.bcard { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--surface); color: var(--text); isolation: isolate; text-align: center; }
@media (min-width: 1024px) { .bcard { aspect-ratio: 16 / 10; } }
.bcard__img { position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scale(1.06); transition: opacity .6s var(--ease), transform 1.4s var(--ease-out); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; }
.bcard__img::after { content: ''; position: absolute; inset: 0; background: rgba(12, 11, 10, .48); }
.bcard .bmark { font-size: clamp(15px, 1.5vw, 21px); transition: color .4s; padding-inline: 12px; white-space: normal; }
.bcard .bmark--serif, .bcard .bmark--serif-italic { font-size: clamp(20px, 2vw, 28px); }
.bcard__meta { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .4s; }
.bcard__origin { position: absolute; top: 12px; left: 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .4s; }
@media (hover: hover) {
  .bcard:hover .bcard__img, .bcard:focus-visible .bcard__img { opacity: 1; transform: none; }
  .bcard:hover, .bcard:focus-visible { color: #fff; }
  .bcard:hover .bcard__meta, .bcard:hover .bcard__origin, .bcard:focus-visible .bcard__meta, .bcard:focus-visible .bcard__origin { color: rgba(255,255,255,.85); }
}
.bcard--all { background: var(--text); color: var(--bg); }
.bcard--all .bcard__meta, .bcard--all .bcard__origin { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.pcard__cat a:hover { color: var(--text); }
.brand-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .25s, color .25s; }
.brand-link:hover, .brand-link:focus-visible { text-decoration-color: currentColor; color: var(--text); }

/* Mobil kategori menüsü (soldan panel) */
.mnav { position: fixed; inset: 0 auto 0 0; width: min(420px, 100%); z-index: 101; background: var(--bg-elev); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .45s var(--ease-out); box-shadow: var(--shadow-float); }
.mnav.is-open { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding-inline: 16px; border-bottom: 1px solid var(--line); }
.mnav__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 120px; }
.mnav__list > li { border-bottom: 1px solid var(--line); }
.mnav__list summary, .mnav__row { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0; font-size: 15px; font-weight: 500; cursor: pointer; }
.mnav__list summary::-webkit-details-marker { display: none; }
.mnav__list summary > span:not(.mnav__ico), .mnav__row > span:not(.mnav__ico) { flex: 1; }
.mnav__list summary img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.mnav__ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); flex: none; }
.mnav__row--deal .mnav__ico { background: var(--text); color: var(--bg); }
.mnav__list summary > .ico { transition: transform .3s var(--ease-out); color: var(--muted); }
.mnav__list details[open] summary > .ico { transform: rotate(180deg); }
.mnav__row > .ico { color: var(--muted); }
.mnav__sub { display: grid; gap: 2px; padding: 0 0 12px 54px; }
.mnav__sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; font-size: 14px; color: var(--text-2); }
.mnav__sub small { font-size: 12px; color: var(--muted); }
.mnav__all { color: var(--text) !important; font-weight: 600; justify-content: flex-start !important; }
.mnav__links { display: grid; gap: 4px; margin-top: 16px; }
.mnav__links a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--text-2); }
.mnav__tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mnav-scrim { display: none; }

/* ---------- 7. Mobil alt menü ------------------------------------------- */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr); height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-elev); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -18px rgba(20, 16, 12, .4);
}
.bnav a, .bnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--muted); transition: color .2s; }
.bnav .ico { width: 22px; height: 22px; }
.bnav .is-active { color: var(--text); }
.bnav .is-active .ico { --ico-fill: 1; }
.bnav .count-badge { top: 6px; right: calc(50% - 20px); }
.has-bnav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .bnav { display: none; } .has-bnav { padding-bottom: 0; } }

/* ---------- 8. Footer (Fakir düzeni) ------------------------------------ */
.ftr { background: var(--panel); margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 4vw, 48px); }
.ftr__news { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px; margin-bottom: clamp(28px, 4vw, 44px); border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--line); }
@media (min-width: 900px) { .ftr__news { grid-template-columns: 1fr minmax(320px, 460px); padding: 24px 28px; gap: 32px; } }
.ftr__news-text { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ftr__news-text > div { min-width: 0; }
.ftr__news-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--panel); display: grid; place-items: center; flex: none; }
.ftr__news h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ftr__news p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ftr__form { display: flex; gap: 8px; min-width: 0; }
.ftr__form input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: 16px; outline: none; }
.ftr__form input:focus { border-color: var(--text); }
.ftr__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-bottom: 32px; }
@media (min-width: 768px) { .ftr__cols { grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr; gap: 32px; } }
.ftr__brand { grid-column: 1 / -1; display: grid; gap: 14px; align-content: start; }
@media (min-width: 768px) { .ftr__brand { grid-column: auto; } }
.ftr__logo { justify-self: start; display: inline-grid; justify-items: center; gap: 10px; color: var(--text); }
.ftr__logo .logo { height: 36px; width: auto; }
/* Slogan: logo 1'deki "MORE THAN STYLE" */
.brand-tag { font-size: 9.5px; font-weight: 500; letter-spacing: .36em; margin-right: -.36em; text-transform: uppercase; color: var(--text-2); line-height: 1; white-space: nowrap; }
.ftr__brand p { font-size: 13.5px; color: var(--text-2); max-width: 34ch; line-height: 1.55; }
.ftr__social { display: flex; gap: 8px; }
.ftr__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); border: 1px solid var(--line); transition: background .2s, color .2s; }
.ftr__social a:hover { background: var(--text); color: var(--bg); }
.ftr__cols h4 { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.ftr__cols li + li { margin-top: 9px; }
.ftr__cols a { font-size: 13.5px; color: var(--text-2); transition: color .2s; }
.ftr__cols a:hover { color: var(--text); }
.ftr__contact li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.ftr__contact .ico { color: var(--muted); }
.ftr__prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.ftr__prefs .lang-switch { margin: 0; }
.ftr__theme { height: 32px; padding: 3px; }
.ftr__theme button { min-width: 30px; height: 100%; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.ftr__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-block: 18px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.ftr__pay { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ftr__pay span { height: 26px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); background: var(--bg-elev); }
.credit { padding: 14px 0 22px; text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); }
.credit strong { font-weight: 600; color: var(--text); letter-spacing: .16em; }
.credit__link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .25s; }
.credit__link:hover, .credit__link:focus-visible { text-decoration-color: currentColor; }
.credit--page { padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); background: var(--bg); position: relative; z-index: 1; }

/* ---------- 9. Ürün kartı (Fakir düzeni) --------------------------------
   Beyaz kart: kare görsel + rozet + favori · marka, ad (2 satır), puan · fiyat + her zaman görünen sepet butonu. */
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
@media (hover: hover) { .pcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); } }
.pcard__frame { position: relative; }
.pcard__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--img-bg); isolation: isolate; }
.pcard__track { position: absolute; inset: 0; }
.pcard__track img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.2s var(--ease-out); }
.pcard__track img + img { opacity: 0; }
@media (hover: hover) {
  .pcard:hover .pcard__track img:first-child { opacity: 0; }
  .pcard:hover .pcard__track img + img { opacity: 1; transform: scale(1.03); }
}
@media (hover: none) {
  .pcard__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pcard__track::-webkit-scrollbar { display: none; }
  .pcard__track img { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
  .pcard__track img + img { opacity: 1; }
  .pcard__dots { display: flex !important; }
}
.pcard__dots { display: none; position: absolute; left: 0; right: 0; bottom: 10px; justify-content: center; gap: 4px; z-index: 2; pointer-events: none; }
.pcard__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); transition: background .2s, width .3s; }
.pcard__dots i.is-active { background: #fff; width: 12px; border-radius: 3px; }
.pcard__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pbadge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--text); color: var(--bg); }
.pbadge--sale { background: var(--accent); color: #fff; }
.pbadge--soft { background: var(--bg-elev); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pcard__colors { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: var(--bg-elev); font-size: 11px; font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pcard__colors .swatch--sm { width: 10px; height: 10px; }
.pcard__colors .swatch--sm::after { display: none; }
.pcard__wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.1); transition: transform .2s; }
.pcard__wish .heart { width: 18px; height: 18px; }
.pcard__wish:hover { transform: scale(1.08); }
.pcard__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 12px 12px; }
.pcard__cat { font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pcard__name { font-size: 14px; font-weight: 500; line-height: 1.35; min-height: calc(1.35em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pcard__rating { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.pcard__rating .stars { color: #C9932E; }
.pcard__rating .stars .ico { width: 13px; height: 13px; }
.pcard__rating span:first-of-type { color: var(--text); font-weight: 500; }
.pcard__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pcard__price { display: grid; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pcard__price s { font-size: 12px; color: var(--muted); }
.pcard__price strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.pcard__price strong.is-sale { color: var(--accent); }
.pcard__add { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600; transition: background .2s, transform .15s; }
.pcard__add:hover { background: var(--ink); }
.pcard__add:active { transform: scale(.95); }
.pcard__add--ghost { background: var(--panel); color: var(--text); }
.pcard__add--ghost:hover { background: var(--beige); }
@media (max-width: 599px) {
  .pcard__body { padding: 10px; }
  .pcard__name { font-size: 13px; }
  .pcard__price strong { font-size: 15px; }
  .pcard__add { padding: 0; width: 36px; height: 36px; min-width: 36px; }
  .pcard__add span { display: none; }
}
.price { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.price s { color: var(--muted); font-size: 12.5px; }
.price .is-sale { color: var(--accent); }
.pcard--large .pcard__media { aspect-ratio: 4 / 5; }
.pcard.is-oos .pcard__media img { filter: grayscale(.4); opacity: .8; }

/* Wishlist heart animation */
.heart { width: 20px; height: 20px; transition: color .25s; }
[aria-pressed="true"] .heart { --ico-fill: 1; color: var(--text); animation: heart-pop .55s var(--ease-out); }
.pcard__wish[aria-pressed="true"] .heart { --ico-fill: 1; color: var(--accent); }
@keyframes heart-pop { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }
.heart-burst { position: absolute; inset: 0; pointer-events: none; }
.heart-burst i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: burst .6s var(--ease-out) forwards; }
@keyframes burst { from { transform: translate(-50%, -50%) rotate(var(--r)) translateY(0); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--r)) translateY(-18px); opacity: 0; } }

/* ---------- 10. Raylar (yatay kaydırma) — Fakir: masaüstünde 5 kart, mobilde ~2 kart -------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block: 2px 6px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }
@media (min-width: 600px) { .rail { grid-auto-columns: calc((100% - 2 * 12px) / 3.2); gap: 12px; } }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; } }
@media (min-width: 1200px) { .rail { grid-auto-columns: calc((100% - 4 * 16px) / 5); } }
@media (min-width: 1680px) { .rail { grid-auto-columns: calc((100% - 5 * 16px) / 6); } }
.rail-nav { display: none; gap: 6px; }
@media (min-width: 768px) { .rail-nav { display: flex; } }
.rail-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-elev); display: grid; place-items: center; transition: all .2s; }
.rail-nav button .ico { width: 16px; height: 16px; }
.rail-nav button:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.rail-nav button[disabled] { opacity: .3; pointer-events: none; }
.rail-progress { display: none; }
.rail-progress span { display: none; }

/* Bölüm başlığı (Fakir: solda başlık, sağda "Tümünü gör" + oklar) */
.shead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.shead__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.015em; }
.shead__sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.shead__end { display: flex; align-items: center; gap: 14px; }
.shead__all { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.shead__all .ico { transition: transform .25s var(--ease-out); }
.shead__all:hover .ico { transform: translateX(3px); }
.hsec { padding-block: clamp(20px, 3vw, 36px); }
.panel { background: var(--panel); border-radius: 18px; }

/* ---------- 11. Editorial cards ----------------------------------------- */
.ecard { position: relative; display: block; overflow: hidden; border-radius: var(--r-md); color: #fff; isolation: isolate; background: var(--img-bg); }
.ecard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.ecard:hover .ecard__img { transform: scale(1.045); }
.ecard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,.62) 0%, rgba(10,9,8,.15) 45%, transparent 70%); z-index: 0; }
.ecard__body { position: absolute; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px); z-index: 1; display: grid; gap: 10px; }
.ecard__body .eyebrow { color: rgba(255,255,255,.78); }
.ecard__index { position: absolute; top: clamp(16px, 2.4vw, 28px); left: clamp(20px, 3vw, 40px); z-index: 1; font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.85); }
.ecard .link { color: #fff; }

.story-card { display: grid; gap: 16px; }
.story-card__media { overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4/5; background: var(--img-bg); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.story-card:hover .story-card__media img { transform: scale(1.04); }
.story-card__title { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 28px); line-height: 1.05; letter-spacing: -.01em; }

/* ---------- 12. Overlays: drawer, sheet, modal --------------------------- */
.scrim { position: fixed; inset: 0; z-index: 95; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(460px, 100%);
  background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow-float);
  transform: translateX(100%); transition: transform .55s var(--ease-out); visibility: hidden;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer__title { font-family: var(--serif); font-size: 24px; line-height: 1; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; overscroll-behavior: contain; }
.drawer__foot { padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg-elev); display: grid; gap: 14px; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-height: 92vh;
  background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; transform: translateY(100%); transition: transform .55s var(--ease-out); visibility: hidden;
}
.sheet.is-open { transform: none; visibility: visible; }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 0; flex: none; }
.sheet__body { overflow-y: auto; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; bottom: 24px; width: min(560px, calc(100% - 48px)); border-radius: 24px; transform: translate(-50%, calc(100% + 40px)); }
  .sheet.is-open { transform: translate(-50%, 0); }
  .sheet__body { padding: 20px 28px 28px; }
}

.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__panel { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 28px; opacity: 0; transform: translateY(16px) scale(.98); transition: all .45s var(--ease-out); }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 12px; right: 12px; }

/* Lightbox (fullscreen gallery) */
.lightbox { position: fixed; inset: 0; z-index: 120; background: #0c0b0a; color: #fff; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s; }

/* ---------- 13. Toast ---------------------------------------------------- */
.toasts { position: fixed; z-index: 130; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
@media (min-width: 1024px) { .toasts { left: auto; right: 24px; bottom: 24px; transform: none; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-float); font-size: 13.5px; animation: toast-in .5s var(--ease-out) both; }
.toast.is-out { animation: toast-out .35s var(--ease) forwards; }
.toast img { width: 44px; height: 54px; object-fit: cover; border-radius: 8px; }
.toast__body { flex: 1; display: grid; gap: 2px; }
.toast__body strong { font-weight: 500; }
.toast__body span { opacity: .65; font-size: 12.5px; }
.toast a, .toast button.toast__action { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.toast__check { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 16%, transparent); display: grid; place-items: center; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- 14. Cart drawer content (Fakir düzeni) -----------------------
   Başlık "Sepetim (n ürün)" · kargo çubuğu · sade satırlar · küçük öneri rayı · ara toplam + "Sepete git" / "Siparişi tamamla". */
#cart-drawer { width: min(440px, 100%); }
#cart-drawer .drawer__head { padding: 14px 16px 14px 20px; background: var(--bg-elev); }
#cart-drawer .drawer__title { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.drawer__count { font-size: 14px; font-weight: 400; }
.cart-drawer-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#cart-drawer .drawer__body { padding: 14px 16px 20px; }

.ship-progress { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel); font-size: 13.5px; line-height: 1.4; }
.ship-progress strong { font-weight: 600; }
.ship-progress__ico { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--bg-elev); display: grid; place-items: center; }
.ship-progress__txt { flex: 1; min-width: 0; display: grid; gap: 8px; padding-top: 1px; }
.ship-progress__bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.ship-progress__bar span { display: block; height: 100%; width: var(--p, 0%); background: var(--text); border-radius: 3px; transition: width .7s var(--ease-out); }
.ship-progress.is-done { background: color-mix(in srgb, var(--success) 10%, var(--bg-elev)); }
.ship-progress.is-done .ship-progress__ico { background: var(--success); color: #fff; }
.ship-progress.is-done .ship-progress__bar span { background: var(--success); }

.cdr__lines { margin-top: 6px; }
.line-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); animation: page-in .45s var(--ease-out) both; }
.line-item:last-child { border-bottom: 0; }
.line-item__img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--img-bg); }
.line-item__img img { width: 100%; height: 100%; object-fit: cover; }
.line-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.line-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.line-item__name { font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-item__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.line-item__opts { font-size: 12.5px; color: var(--muted); }
.line-item__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.line-item__foot .price { font-size: 14.5px; font-weight: 600; display: grid; justify-items: end; line-height: 1.2; }
.line-item__foot .price s { font-size: 12px; font-weight: 400; color: var(--muted); }
.line-item__foot .price .is-sale { color: var(--accent); }
.line-item .qty { height: 34px; border-radius: 10px; }
.line-item .qty button { width: 32px; border-radius: 9px; }
.line-item .qty button[disabled] { opacity: .3; pointer-events: none; }
.line-item__remove { width: 32px; height: 32px; flex: none; margin: -6px -6px 0 0; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color .2s, background .2s; }
.line-item__remove:hover { color: var(--accent); background: var(--panel); }
.line-item.is-removing { animation: item-out .35s var(--ease) forwards; }
@keyframes item-out { to { opacity: 0; transform: translateX(24px); } }

.cart-recs { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.cart-recs__title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.mini-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; }
.mini-rail::-webkit-scrollbar { display: none; }
.mini-card { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); font-size: 12.5px; min-width: 0; }
.mini-card__img { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--img-bg); }
.mini-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mini-card__name { line-height: 1.3; min-height: calc(1.3em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; font-weight: 600; }
.mini-card__add { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--text); color: var(--bg); display: grid; place-items: center; transition: opacity .2s; }
.mini-card__add:hover { opacity: .85; }

.cdr__foot { gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -20px rgba(20, 16, 12, .45); }
.cdr__rows { display: grid; gap: 6px; font-size: 13.5px; }
.cdr__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-2); }
.cdr__row--total { color: var(--text); font-size: 15px; font-weight: 500; }
.cdr__row--total strong { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cdr__free { color: var(--success); font-weight: 600; }
.cdr__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cdr__btns .btn { padding: 0 12px; }
.cdr__note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.cdr-empty { padding: 40px 8px 24px; }
.cdr-empty__title { font-size: 17px; font-weight: 600; }

.empty { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 56px 16px; }
.empty__art { width: 96px; height: 96px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; margin-bottom: 8px; }
.empty__title { font-family: var(--serif); font-size: 28px; line-height: 1; }

/* ---------- 15. Accordion & Tabs ---------------------------------------- */
.acc { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { transition: transform .35s var(--ease-out); }
.acc[open] summary .ico { transform: rotate(45deg); }
.acc__body { padding-bottom: 24px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.acc[open] .acc__body { animation: acc-in .4s var(--ease-out); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } }

.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 14px 0; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--muted); white-space: nowrap; transition: color .2s; }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--text); transform: scaleX(0); transition: transform .4s var(--ease-out); }
.tab:hover { color: var(--text); }
.tab.is-active, .tab[aria-selected="true"] { color: var(--text); }
.tab.is-active::after, .tab[aria-selected="true"]::after { transform: scaleX(1); }

.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--surface); gap: 2px; }
.seg button { height: 34px; padding: 0 16px; border-radius: var(--r-pill); font-size: 12.5px; color: var(--text-2); transition: all .25s; }
.seg button.is-active { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---------- 16. Skeleton -------------------------------------------------- */
.skel { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--r-sm); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-elev) 70%, transparent), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel--media { aspect-ratio: 4/5; border-radius: var(--r-md); }
.skel--line { height: 12px; }
.skel--line.w60 { width: 60%; } .skel--line.w40 { width: 40%; } .skel--line.w80 { width: 80%; }

/* ---------- 17. Motion: reveal ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-img { overflow: hidden; }
.reveal-img img { transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
.reveal-img.is-in img { transform: scale(1); }
.split-line { display: block; overflow: hidden; }
.split-line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
.is-in .split-line > span, .split-line.is-in > span { transform: none; }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 14px; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 48px; animation: marquee 38s linear infinite; padding-left: 48px; }
.marquee__track span { display: inline-flex; align-items: center; gap: 48px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.marquee__track span::after { content: '✦'; font-size: 9px; opacity: .6; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .5; }

/* Rating */
.stars { display: inline-flex; gap: 2px; color: var(--text); }
.stars .ico { width: 14px; height: 14px; opacity: .3; }
.stars .ico.is-on { --ico-fill: 1; opacity: 1; }

/* Utilities */
@media (max-width: 767.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-tablet-up { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }
@media (max-width: 1023.98px) { .only-desktop { display: none !important; } }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.w-full { width: 100%; }
.ratio-45 { aspect-ratio: 4/5; } .ratio-34 { aspect-ratio: 3/4; } .ratio-1 { aspect-ratio: 1; } .ratio-169 { aspect-ratio: 16/9; }
.cover { width: 100%; height: 100%; object-fit: cover; }
.rounded { border-radius: var(--r-md); overflow: hidden; }
.divider { height: 1px; background: var(--line); }

/* Mobil: form alanlarına odaklanınca iOS yakınlaştırmasını engelle (min 16px) */
@media (max-width: 1023.98px) {
  .field__input, .ftr__form input, input:not([class]), select:not([class]), textarea:not([class]) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .split-line > span { transform: none; }
}

/* ---------- Razor kabuk partial'ları (Views/Shared/Portal/Layout) ------- */
.mega__tile-text .h3 { display: block; }
.mnav__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.mnav__badge { width: 40px; height: 40px; }
.mnav__word { height: 20px; width: auto; }
.mnav__tools { --g: 8px; }
.mnav__all { color: var(--text) !important; font-weight: 500; }
.mnav__links { --g: 14px; margin-top: 32px; }
.ftr__eyebrow { margin-bottom: 16px; }
.ftr__lead { max-width: 40ch; }
.ftr__social { --g: 8px; }
.ftr__h4-gap { margin-top: 32px; }
.ftr__h4-gap-sm { margin-top: 24px; }

/* ---------- Ortak partial'lar (Views/Shared/Portal/Product, Order) ---- */
.badge--soldout { background: var(--bg-elev); }
/* Hızlı ekleme alt paneli (_quickAdd): fiyat, seçenek ve adet + buton düzeni ürün bilgi sütunuyla ortak (.pinfo*) */
.qa-head { display: flex; align-items: flex-start; gap: 14px; }
.qa-head__img { width: 84px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--img-bg); flex: none; }
.qa-head__meta { display: grid; gap: 2px; flex: 1; min-width: 0; }
.qa-head__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.qa-head__link { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 4px; font-size: 13px; font-weight: 600; }
.qa .pinfo__opt { margin-top: 18px; }
.qa-foot { margin-top: 22px; }

/* ---------- Ortak yardımcılar (Razor dönüşümü: satır içi stil yerine) ---- */
.section--flush-top { padding-top: 0; }
.section-head--center { align-items: center; }
.icon-btn--outline { border: 1px solid var(--line-strong); }
.story-card__text { --g: 10px; }
.story-card__dek { max-width: 44ch; }
.story-card__cta { justify-self: start; align-self: start; }

/* toastr — ELAY teması (ceca.js: positionClass "toast-elay").
   toastr öğeleri de .toast sınıfını kullandığı için ELAY .toast stilleri burada #toast-container altında düzenlenir. */
#toast-container.toast-elay { position: fixed; z-index: 140; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); top: auto; right: auto; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); display: grid; gap: 8px; pointer-events: none; }
@media (min-width: 900px) { #toast-container.toast-elay { bottom: 32px; } }
#toast-container.toast-elay > .toast {
  position: relative; width: auto; margin: 0; pointer-events: auto; opacity: 1;
  display: block; padding: 14px 44px 16px 48px; border-radius: 16px; overflow: hidden;
  background: var(--text); background-image: none; color: var(--bg);
  box-shadow: var(--shadow-float); font: 400 13.5px/1.45 var(--sans);
  animation: toast-in .5s var(--ease-out) both;
}
#toast-container.toast-elay > .toast:hover { box-shadow: var(--shadow-float); opacity: 1; cursor: default; }
#toast-container.toast-elay > .toast::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .9; }
#toast-container.toast-elay > .toast-success::before { background: var(--success); border-color: var(--success); }
#toast-container.toast-elay > .toast-error::before { background: var(--accent); border-color: var(--accent); }
#toast-container.toast-elay > .toast-warning::before { border-color: #D9A441; background: #D9A441; }
#toast-container.toast-elay > .toast-info::before { border-color: var(--warm-gray); }
#toast-container.toast-elay .toast-title { font-weight: 500; font-size: 13.5px; }
#toast-container.toast-elay .toast-message { opacity: .78; font-size: 12.5px; margin-top: 2px; }
#toast-container.toast-elay .toast-message a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#toast-container.toast-elay .toast-close-button { position: absolute; right: 12px; top: 10px; float: none; font-size: 20px; line-height: 1; color: inherit; opacity: .6; text-shadow: none; background: none; border: 0; padding: 4px; cursor: pointer; }
#toast-container.toast-elay .toast-close-button:hover { opacity: 1; color: inherit; }
#toast-container.toast-elay .toast-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35; }

/* ceca.js yükleniyor durumları */
body.is-busy { cursor: progress; }
.drawer.drawer-loading { pointer-events: none; }
.drawer.drawer-loading::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); }

/* ---------- Ürün bilgi sütunu (Fakir düzeni) — ürün detayı, hızlı bakış ve hızlı ekleme ortak ----------
   _pdpInfo / _pdpSpecs / _quickAdd: marka + ad · puan + ürün kodu · fiyat · taksit kutusu · avantaj çipleri ·
   diğer renkler (görsel) · beden · adet + Sepete Ekle + favori · ikonlu akordeon satırları */
.pinfo { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
.pinfo__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.pinfo__brand { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pinfo__brand a:hover { color: var(--text); }
.pinfo__badges { display: flex; gap: 6px; }
.pinfo__name { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2vw, 28px); line-height: 1.12; letter-spacing: -.01em; }
.pinfo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pinfo__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.pinfo__rating .stars, .pacc__score .stars { color: #C9932E; }
.pinfo__rating strong { color: var(--text); font-weight: 600; }
.pinfo__rating u { text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.pinfo__rating:hover u { text-decoration-color: currentColor; }
.pinfo__sku strong { font-weight: 500; color: var(--text-2); }
.pinfo__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; font-variant-numeric: tabular-nums; }
.pinfo__now { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
.pinfo__now.is-sale { color: var(--accent); }
.pinfo__price s { font-size: 16px; color: var(--muted); }
.pinfo__price--sm { margin-top: 2px; gap: 4px 8px; }
.pinfo__price--sm .pinfo__now { font-size: 19px; }
.pinfo__price--sm s { font-size: 13px; }
.pinfo__box { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--panel); font-size: 13px; line-height: 1.4; color: var(--text-2); text-align: left; transition: background .2s; }
.pinfo__box > span { flex: 1; min-width: 0; }
.pinfo__box strong { color: var(--text); font-weight: 600; }
button.pinfo__box:hover { background: color-mix(in srgb, var(--text) 7%, var(--panel)); }
.pinfo__box-go { color: var(--muted); }
.pinfo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pinfo__chips li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.pinfo__chips .ico { width: 14px; height: 14px; color: var(--success); }
.pinfo__opt { display: grid; gap: 10px; margin-top: 18px; }
.pinfo__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pinfo__label { font-size: 13.5px; color: var(--text-2); }
.pinfo__label strong { color: var(--text); font-weight: 600; }
.pinfo__guide { font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.pinfo__guide:hover { color: var(--text); }
.pcolors { display: flex; flex-wrap: wrap; gap: 8px; }
.pcolor { --c: transparent; position: relative; width: 62px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--img-bg); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.pcolor img { width: 100%; height: 100%; object-fit: cover; }
.pcolor::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.pcolor.is-tinted img { filter: grayscale(1) brightness(1.18) contrast(1.05); }
.pcolor.is-tinted::after { opacity: .92; }
.pcolor:hover { border-color: var(--line-strong); }
.pcolor.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pinfo__stock { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--text-2); }
.pinfo__stock.is-low strong { color: var(--accent); font-weight: 600; }
.pinfo__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }
.pinfo__stock.is-low .pinfo__dot { background: var(--accent); }
.pinfo__buy { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.pinfo__qty { height: 52px; flex: none; border-radius: 12px; }
.pinfo__qty button { width: 38px; border-radius: 10px; }
.pinfo__qty output { min-width: 24px; font-weight: 600; }
.pinfo__add { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; }
.pinfo__add > span { overflow: hidden; text-overflow: ellipsis; }
.pinfo__wish { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); transition: border-color .2s; }
.pinfo__wish:hover { border-color: var(--text); }
.pinfo__wish .heart { width: 22px; height: 22px; }
.pinfo__wish[aria-pressed="true"] .heart { --ico-fill: 1; color: var(--accent); }
.pinfo__more { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.pinfo__more:hover .ico { transform: translateX(3px); }
.pinfo__more .ico { transition: transform .25s var(--ease-out); }
/* Akordeon satırları (ikon + başlık + sayaç + ok) */
.pinfo__accs { margin-top: 22px; border-top: 1px solid var(--line); }
.pacc summary { justify-content: flex-start; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pacc__ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel); }
.pacc__t { flex: 1; min-width: 0; }
.pacc__n { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--panel); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.pacc[open] summary .pacc__ico .ico { transform: none; }
.pacc[open] summary .ico.pacc__chev { transform: rotate(180deg); }
.pacc .acc__body { padding: 0 0 16px 46px; font-size: 14px; line-height: 1.65; }
.pacc__list { display: grid; gap: 6px; margin-top: 8px; padding-left: 18px; list-style: disc; }
.pacc .spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 20px; font-size: 13.5px; }
.pacc .spec dt { color: var(--muted); }
.pacc .spec dd { margin: 0; color: var(--text); }
.pacc__notes { display: grid; gap: 10px; }
.pacc__notes > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
.pacc__notes dt { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pacc__notes dt small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.pacc__notes dd { margin: 0; }
.pacc__score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pacc__score strong { font-size: 22px; font-weight: 700; color: var(--text); }
.pacc__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pacc__inst { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pacc__inst th { padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); }
.pacc__inst td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.pacc__inst th:last-child, .pacc__inst td:last-child { padding-right: 0; text-align: right; }
.pacc__tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); font-size: 11px; font-weight: 600; }

/* ---------- Hızlı bakış modalı (_quickView: ana sayfada ürüne tıklanınca; bilgi sütunu .pinfo) ---------- */
.modal__panel.qv { width: min(1040px, 100%); max-height: min(90vh, 860px); padding: 0; overflow: auto; overscroll-behavior: contain; }
.qv__close { z-index: 3; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); }
.qv__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.qv__media { --c: transparent; padding: 12px 12px 0; }
.qv__stage { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--panel); }
.qv__stage img { width: 100%; height: 100%; object-fit: cover; animation: page-fade .35s var(--ease-out); }
/* Renge özel görsel yoksa: görsel griye çekilir, üstüne renk çarpılır (multiply) */
.qv__tint, .qv__frame::after { position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity .3s; }
.qv__frame::after { content: ""; }
.qv__media.is-tinted .qv__stage img, .qv__media.is-tinted .qv__frame img { filter: grayscale(1) brightness(1.18) contrast(1.05); }
.qv__media.is-tinted .qv__tint, .qv__media.is-tinted .qv__frame::after { opacity: .92; }
.qv__badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.qv__frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.qv__frame { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--img-bg); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.qv__frame img { width: 100%; height: 100%; object-fit: cover; }
.qv__frame:hover { border-color: var(--line-strong); }
.qv__frame.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.qv__info { padding: 20px 20px 24px; min-width: 0; }
.qv .pinfo__name { padding-right: 36px; }
@media (max-width: 767px) {
  #my-modal:has(.qv) { padding: 0; place-items: end center; }
  .modal__panel.qv { max-height: 94vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .qv__stage { aspect-ratio: 4 / 3; }
  .qv .pinfo__buy { position: sticky; bottom: 0; z-index: 2; margin: 10px -20px 0; padding: 10px 20px; background: var(--bg); border-top: 1px solid var(--line); }
}
@media (min-width: 860px) {
  .qv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qv__media { position: sticky; top: 0; align-self: start; padding: 16px; }
  .qv__info { padding: 32px 32px 28px 16px; }
}



/* ======================================================================
   KEŞFET & KURUMSAL (ortak) — body[data-kpage]
   Journal, makale, Shop The Look, bulucular, Hakkımızda, Kariyer, Yasal, Tasarım Sistemi, Ekranlar.
   .khead sayfa başlığı (açık panel; isteğe bağlı görsel) · .kbox içerik kartı · .klay yan içindekiler (.ktoc) + gövde
   .kcard makale kartı · .kgrid ızgara · .mcard bulucu sonucu (uyum % + ürün kartı) · .wiz bulucu sihirbazı
   ====================================================================== */
:where(body[data-kpage]) .kpage { padding-bottom: clamp(8px, 2vw, 24px); }
:where(body[data-kpage]) .kpage [hidden] { display: none !important; }

/* ---------- Sayfa başlığı ---------- */
:where(body[data-kpage]) .khead { padding-top: clamp(12px, 1.6vw, 20px); }
:where(body[data-kpage]) .khead__in { display: grid; gap: 20px; padding: clamp(18px, 2.6vw, 32px) clamp(18px, 3vw, 40px); border-radius: 18px; background: var(--panel); }
:where(body[data-kpage]) .khead__in > * { min-width: 0; }
:where(body[data-kpage]) .khead__text { display: grid; gap: 10px; align-content: start; justify-items: start; }
:where(body[data-kpage]) .khead .crumbs li + li::before { content: '›'; font-size: 13px; line-height: 1; }
:where(body[data-kpage]) .khead__kicker { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 6px; }
:where(body[data-kpage]) .khead__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; max-width: 24ch; }
:where(body[data-kpage]) .khead__lead { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 64ch; }
:where(body[data-kpage]) .khead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; }
:where(body[data-kpage]) .khead__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
:where(body[data-kpage]) .khead__stats li { display: inline-flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--bg-elev); font-size: 12.5px; color: var(--muted); }
:where(body[data-kpage]) .khead__stats strong { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
:where(body[data-kpage]) .khead__media { position: relative; height: clamp(170px, 42vw, 240px); border-radius: 14px; overflow: hidden; background: var(--img-bg); }
:where(body[data-kpage]) .khead__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 45%); }
:where(body[data-kpage]) .khead__badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg-elev); font-size: 12.5px; font-weight: 500; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
:where(body[data-kpage]) .khead__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
@media (min-width: 900px) {
  :where(body[data-kpage]) .khead__in--media { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
  :where(body[data-kpage]) .khead__media { height: clamp(240px, 24vw, 330px); }
}

/* ---------- Bölüm, kart, yan içindekiler ---------- */
:where(body[data-kpage]) .kbox { min-width: 0; padding: clamp(18px, 2.6vw, 32px); border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 16px); }
:where(body[data-kpage]) .kbox--panel { background: var(--panel); border-color: transparent; }
:where(body[data-kpage]) .kbox__head { display: grid; gap: 6px; margin-bottom: clamp(16px, 2vw, 24px); }
:where(body[data-kpage]) .kbox__head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
:where(body[data-kpage]) .kbox__kicker { font-size: 12px; font-weight: 600; color: var(--muted); }
:where(body[data-kpage]) .ktitle { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
:where(body[data-kpage]) .ksub { font-size: 14px; color: var(--text-2); line-height: 1.6; max-width: 62ch; }
:where(body[data-kpage]) .klay { display: grid; gap: 16px; align-items: start; }
:where(body[data-kpage]) .klay > * { min-width: 0; }
:where(body[data-kpage]) .kbody { display: grid; gap: 16px; min-width: 0; }
:where(body[data-kpage]) .ktoc { display: none; }
@media (min-width: 1024px) {
  :where(body[data-kpage]) .klay { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  :where(body[data-kpage]) .ktoc { display: block; position: sticky; top: calc(var(--hdr-h) + 16px); max-height: calc(100vh - var(--hdr-h) - 32px); overflow-y: auto; padding: 14px; border-radius: 18px; background: var(--panel); }
}
:where(body[data-kpage]) .ktoc__title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 10px 8px; }
:where(body[data-kpage]) .ktoc ol { display: grid; gap: 2px; }
:where(body[data-kpage]) .ktoc ol a { display: grid; grid-template-columns: 24px 1fr; gap: 4px; align-items: baseline; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.35; color: var(--text-2); transition: background .2s, color .2s; }
:where(body[data-kpage]) .ktoc ol a > span:first-child { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
:where(body[data-kpage]) .ktoc ol a:hover { color: var(--text); background: color-mix(in srgb, var(--bg-elev) 60%, transparent); }
:where(body[data-kpage]) .ktoc ol a.is-active { background: var(--bg-elev); color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
:where(body[data-kpage]) .ktoc__tools { display: grid; gap: 8px; margin-top: 12px; padding: 12px 10px 4px; border-top: 1px solid var(--line-strong); }
:where(body[data-kpage]) .ktoc__tools > a:not([class]) { font-size: 13px; color: var(--text-2); }
:where(body[data-kpage]) .ktoc__tools > a:not([class]):hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Çipler, ızgaralar ---------- */
:where(body[data-kpage]) .kchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
:where(body[data-kpage]) .kchips::-webkit-scrollbar { display: none; }
:where(body[data-kpage]) .kchips .chip { flex: none; min-height: 42px; background: var(--bg-elev); }
:where(body[data-kpage]) .kchips .chip.is-active, :where(body[data-kpage]) .kchips .chip[aria-pressed="true"] { background: var(--text); }
:where(body[data-kpage]) .kchips .chip sup, :where(body[data-kpage]) .kchips .chip .n { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; vertical-align: baseline; }
@media (min-width: 768px) { :where(body[data-kpage]) .kchips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
:where(body[data-kpage]) .kgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { :where(body[data-kpage]) .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { :where(body[data-kpage]) .kgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
:where(body[data-kpage]) .kgrid--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { :where(body[data-kpage]) .kgrid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { :where(body[data-kpage]) .kgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* ---------- Makale kartı ---------- */
:where(body[data-kpage]) .kcard { display: flex; flex-direction: column; min-width: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
@media (hover: hover) { :where(body[data-kpage]) .kcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); } }
:where(body[data-kpage]) .kcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--img-bg); }
:where(body[data-kpage]) .kcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
:where(body[data-kpage]) .kcard:hover .kcard__media img { transform: scale(1.03); }
:where(body[data-kpage]) .kcard__tag { position: absolute; top: 12px; left: 12px; }
:where(body[data-kpage]) .kcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
:where(body[data-kpage]) .kcard__meta { font-size: 12px; font-weight: 500; color: var(--muted); }
:where(body[data-kpage]) .kcard__title { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
:where(body[data-kpage]) .kcard:hover .kcard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:where(body[data-kpage]) .kcard__dek { font-size: 13.5px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(body[data-kpage]) .kcard__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
:where(body[data-kpage]) .kcard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
:where(body[data-kpage]) .kcard__cta .ico { transition: transform .25s var(--ease-out); }
:where(body[data-kpage]) .kcard:hover .kcard__cta .ico { transform: translateX(3px); }
@media (min-width: 768px) {
  :where(body[data-kpage]) .kcard--feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  :where(body[data-kpage]) .kcard--feat .kcard__media { aspect-ratio: auto; min-height: 300px; max-height: 380px; }
  :where(body[data-kpage]) .kcard--feat .kcard__body { justify-content: center; gap: 10px; padding: clamp(20px, 3vw, 40px); }
  :where(body[data-kpage]) .kcard--feat .kcard__title { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.08; }
  :where(body[data-kpage]) .kcard--feat .kcard__dek { font-size: 15px; -webkit-line-clamp: 3; }
  :where(body[data-kpage]) .kcard--feat .kcard__foot { margin-top: 10px; }
}

/* ---------- Bulucu sonucu: uyum % + ürün kartı ---------- */
:where(body[data-kpage]) .mcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; animation: page-in .6s var(--ease-out) both; animation-delay: var(--d, 0s); }
:where(body[data-kpage]) .mcard > .pcard { flex: 1; }
:where(body[data-kpage]) .mcard__pct { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--panel); font-size: 12.5px; }
:where(body[data-kpage]) .mcard__pct strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 599px) { :where(body[data-kpage]) .kgrid--4 .mcard__pct { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; } :where(body[data-kpage]) .kgrid--4 .mcard__rank { display: none; } }
:where(body[data-kpage]) .mcard__rank { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
:where(body[data-kpage]) .mcard__bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
:where(body[data-kpage]) .mcard__bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--success); transition: width 1.1s var(--ease-out) .2s; }
:where(body[data-kpage]) .is-drawn .mcard__bar i { width: var(--w); }
:where(body[data-kpage]) .mcard.is-top .mcard__pct { background: var(--text); color: var(--bg); }
:where(body[data-kpage]) .mcard.is-top .mcard__rank { color: color-mix(in srgb, var(--bg) 70%, transparent); }
:where(body[data-kpage]) .mcard.is-top .mcard__bar { background: color-mix(in srgb, var(--bg) 25%, transparent); }
:where(body[data-kpage]) .mcard__why { display: grid; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); padding: 0 2px; }
:where(body[data-kpage]) .mcard__why li { display: flex; gap: 8px; align-items: flex-start; }
:where(body[data-kpage]) .mcard__why .ico { color: var(--success); width: 14px; height: 14px; margin-top: 2px; }

/* ---------- Bulucu sihirbazı (koku + çanta) ---------- */
:where(body[data-kpage]) .wiz { width: min(920px, 100%); margin-inline: auto; padding: clamp(18px, 3vw, 36px); border-radius: 20px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 16, 12, .04); }
:where(body[data-kpage]) .wiz.is-result { width: 100%; padding: 0; border: 0; background: none; box-shadow: none; }
:where(body[data-kpage]) .wiz__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: clamp(18px, 2.4vw, 28px); }
:where(body[data-kpage]) .wiz__top.is-intro { display: none; }
:where(body[data-kpage]) .wiz.is-result .wiz__top { display: none; }
:where(body[data-kpage]) .wiz__prog { display: grid; gap: 8px; }
:where(body[data-kpage]) .wiz__step { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
:where(body[data-kpage]) .wiz__bar { height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; }
:where(body[data-kpage]) .wiz__bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--text); transition: width .6s var(--ease-out); }
:where(body[data-kpage]) .wiz__count { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--panel); font-size: 12.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(body[data-kpage]) .wiz__count i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
:where(body[data-kpage]) .wiz__count.is-zero i { background: var(--accent); }
:where(body[data-kpage]) .wiz__count.is-bump { animation: bump .5s var(--ease-out); }
:where(body[data-kpage]) .wiz-screen { animation: page-in .45s var(--ease-out) both; }
:where(body[data-kpage]) .wiz-screen.is-leaving { opacity: 0; transition: opacity .2s var(--ease); }
:where(body[data-kpage]) .wiz__q { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; outline: none; }
:where(body[data-kpage]) .wiz__hint { margin-top: 8px; font-size: 14px; color: var(--muted); }
:where(body[data-kpage]) .wiz-intro { display: grid; justify-items: center; gap: 12px; text-align: center; padding-block: clamp(8px, 2vw, 24px); }
:where(body[data-kpage]) .wiz-intro__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
:where(body[data-kpage]) .wiz-intro__meta { font-size: 13px; color: var(--muted); }
:where(body[data-kpage]) .wiz-intro__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 8px; }
:where(body[data-kpage]) .wiz-intro__imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); gap: 8px; justify-content: center; margin-bottom: 4px; }
:where(body[data-kpage]) .wiz-intro__imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
:where(body[data-kpage]) .wiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: clamp(18px, 2.4vw, 28px); }
@media (min-width: 768px) { :where(body[data-kpage]) .wiz-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } :where(body[data-kpage]) .wiz-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:where(body[data-kpage]) .wiz-opt { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; min-height: 112px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--bg-elev); transition: border-color .2s, background .2s, box-shadow .2s; }
@media (min-width: 768px) { :where(body[data-kpage]) .wiz-opt { padding: 16px; min-height: 128px; } }
:where(body[data-kpage]) .wiz-opt:hover { border-color: var(--text); }
:where(body[data-kpage]) .wiz-opt[aria-pressed="true"], :where(body[data-kpage]) .wiz-opt[aria-checked="true"] { border-color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--text); }
:where(body[data-kpage]) .wiz-opt__ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
:where(body[data-kpage]) .wiz-opt[aria-pressed="true"] .wiz-opt__ico, :where(body[data-kpage]) .wiz-opt[aria-checked="true"] .wiz-opt__ico { background: var(--bg-elev); }
:where(body[data-kpage]) .wiz-opt__name { font-size: 15px; font-weight: 600; line-height: 1.25; }
:where(body[data-kpage]) .wiz-opt__desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
:where(body[data-kpage]) .wiz-opt__check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg-elev); display: grid; place-items: center; transition: background .2s, border-color .2s; }
:where(body[data-kpage]) .wiz-opt__check .ico { width: 12px; height: 12px; opacity: 0; stroke-width: 2.2; }
:where(body[data-kpage]) .wiz-opt[aria-pressed="true"] .wiz-opt__check, :where(body[data-kpage]) .wiz-opt[aria-checked="true"] .wiz-opt__check { background: var(--text); border-color: var(--text); color: var(--bg); }
:where(body[data-kpage]) .wiz-opt[aria-pressed="true"] .wiz-opt__check .ico, :where(body[data-kpage]) .wiz-opt[aria-checked="true"] .wiz-opt__check .ico { opacity: 1; }
:where(body[data-kpage]) .wiz-opt--img { padding: 8px 8px 12px; }
:where(body[data-kpage]) .wiz-opt__img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--img-bg); margin-bottom: 4px; }
:where(body[data-kpage]) .wiz-opt__img img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-kpage]) .wiz-opt--img .wiz-opt__name, :where(body[data-kpage]) .wiz-opt--img .wiz-opt__desc { padding-inline: 6px; }
:where(body[data-kpage]) .wiz-opt--img .wiz-opt__check { top: 16px; right: 16px; }
:where(body[data-kpage]) .wiz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: clamp(20px, 2.6vw, 32px); padding-top: 18px; border-top: 1px solid var(--line); }
:where(body[data-kpage]) .wiz__foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin-left: auto; }
:where(body[data-kpage]) .wiz__skip { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
:where(body[data-kpage]) .wiz__skip:hover { color: var(--text); }
:where(body[data-kpage]) .wiz-res { display: grid; gap: clamp(16px, 2vw, 24px); }
:where(body[data-kpage]) .wiz-res__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 20px; }
:where(body[data-kpage]) .wiz-res__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
:where(body[data-kpage]) .wiz-note { display: grid; gap: 14px; align-items: center; }
@media (min-width: 768px) { :where(body[data-kpage]) .wiz-note { grid-template-columns: 1fr auto; gap: 24px; } }
@media (max-width: 599px) { :where(body[data-kpage]) .wiz__foot .btn { flex: 1; } :where(body[data-kpage]) .wiz__foot-end { width: 100%; margin-left: 0; } :where(body[data-kpage]) .wiz__foot [data-back] { flex: 0 0 auto; } }

/* ======================================================================
   ABOUT
   Ortak başlık (görselli panel) → yapışkan içindekiler + içerik kartları: manifesto, hikâye, değerler, atölye, rakamlar, basın, sorumluluk.
   ====================================================================== */
:where(body[data-view="about"]) .about-mani { font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; max-width: 40ch; }
:where(body[data-view="about"]) .about-cols { display: grid; gap: 14px; margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
@media (min-width: 768px) { :where(body[data-view="about"]) .about-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
:where(body[data-view="about"]) .about-sign { margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--muted); }
:where(body[data-view="about"]) .about-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); flex: none; }

/* Hikâye */
:where(body[data-view="about"]) .about-time { display: grid; gap: 12px; }
:where(body[data-view="about"]) .about-time li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 10px; border-radius: 14px; background: var(--panel); }
@media (min-width: 768px) { :where(body[data-view="about"]) .about-time li { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; } }
:where(body[data-view="about"]) .about-time img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
:where(body[data-view="about"]) .about-time__year { font-size: 12.5px; color: var(--muted); }
:where(body[data-view="about"]) .about-time__year strong { font-size: 14px; color: var(--text); }
:where(body[data-view="about"]) .about-time h3 { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="about"]) .about-time li p:last-child { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* Değerler */
:where(body[data-view="about"]) .about-values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 600px) { :where(body[data-view="about"]) .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
:where(body[data-view="about"]) .about-values article { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
:where(body[data-view="about"]) .about-values h3 { font-size: 16px; font-weight: 600; }
:where(body[data-view="about"]) .about-values p { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* Atölye */
:where(body[data-view="about"]) .about-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:where(body[data-view="about"]) .about-imgs figure { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--img-bg); }
@media (min-width: 768px) { :where(body[data-view="about"]) .about-imgs figure { aspect-ratio: 4 / 3; } }
:where(body[data-view="about"]) .about-imgs img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-view="about"]) .about-imgs figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.9); color: #1E1C1A; font-size: 11px; font-weight: 500; }
@media (max-width: 479px) { :where(body[data-view="about"]) .about-imgs figcaption { display: none; } }
:where(body[data-view="about"]) .about-facts { display: grid; margin-top: 16px; border-top: 1px solid var(--line); }
:where(body[data-view="about"]) .about-facts li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
:where(body[data-view="about"]) .about-facts strong { font-size: 20px; font-weight: 700; color: var(--text); }
:where(body[data-view="about"]) .about-more { margin-top: 16px; }

/* Rakamlar */
:where(body[data-view="about"]) .about-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { :where(body[data-view="about"]) .about-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:where(body[data-view="about"]) .about-nums > div { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="about"]) .about-nums strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
:where(body[data-view="about"]) .about-nums span { font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* Basın */
:where(body[data-view="about"]) .about-press { display: grid; gap: 10px; }
@media (min-width: 900px) { :where(body[data-view="about"]) .about-press { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
:where(body[data-view="about"]) .about-press figure { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
:where(body[data-view="about"]) .about-press blockquote { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
:where(body[data-view="about"]) .about-press cite { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Sorumluluk */
:where(body[data-view="about"]) .about-pledges { display: grid; gap: 10px; }
@media (min-width: 768px) { :where(body[data-view="about"]) .about-pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:where(body[data-view="about"]) .about-pledges li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="about"]) .about-pledges li .about-ico { background: var(--bg-elev); }
:where(body[data-view="about"]) .about-pledges strong { display: block; font-size: 14.5px; font-weight: 600; }
:where(body[data-view="about"]) .about-pledges p { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
:where(body[data-view="about"]) .about-note { margin-top: 12px; }
@media (min-width: 600px) { :where(body[data-view="about"]) .about-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================
   ACCOUNT
   Fakir düzeni: solda kullanıcı kartı + ikonlu menü (mobilde yatay kaydırmalı), sağda beyaz kenarlıklı kartlar.
   ====================================================================== */
:where(body[data-view="account"]) [hidden] { display: none !important; }
  :where(body[data-view="account"]) .accp { padding-block: 14px clamp(48px, 6vw, 80px); }
  :where(body[data-view="account"]) .acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
  @media (min-width: 1024px) { :where(body[data-view="account"]) .acc { grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; } }

  /* ---------- Kenar menü ---------- */
  :where(body[data-view="account"]) .aside { min-width: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  @media (min-width: 1024px) { :where(body[data-view="account"]) .aside { position: sticky; top: calc(var(--hdr-h) + 16px); } }
  :where(body[data-view="account"]) .aside__user { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
  :where(body[data-view="account"]) .aside__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 15px; font-weight: 600; letter-spacing: .04em; }
  :where(body[data-view="account"]) .aside__who { display: grid; min-width: 0; line-height: 1.35; }
  :where(body[data-view="account"]) .aside__who strong { font-size: 15px; font-weight: 600; }
  :where(body[data-view="account"]) .aside__who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(body[data-view="account"]) .aside__tier { display: grid; gap: 6px; margin: 0 16px 14px; padding: 12px; border-radius: 10px; background: var(--panel); }
  :where(body[data-view="account"]) .aside__tier-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 500; }
  :where(body[data-view="account"]) .aside__tier-row strong { font-weight: 700; }
  :where(body[data-view="account"]) .aside__bar { height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
  :where(body[data-view="account"]) .aside__bar span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--text); transition: width 1.2s var(--ease-out) .2s; }
  :where(body[data-view="account"]) .aside__bar span.is-in { width: var(--p, 0%); }

  :where(body[data-view="account"]) .anav { border-top: 1px solid var(--line); }
  :where(body[data-view="account"]) .anav__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 16px; overscroll-behavior-x: contain; }
  :where(body[data-view="account"]) .anav__list::-webkit-scrollbar { display: none; }
  :where(body[data-view="account"]) .anav a, :where(body[data-view="account"]) .anav button { flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--text); transition: background .2s, color .2s, border-color .2s; }
  :where(body[data-view="account"]) .anav .ico { width: 18px; height: 18px; }
  :where(body[data-view="account"]) .anav a[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }
  :where(body[data-view="account"]) .anav__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--panel); color: var(--text-2); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
  :where(body[data-view="account"]) .anav__count:empty { display: none; }
  :where(body[data-view="account"]) .anav a[aria-current="page"] .anav__count { background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); }
  :where(body[data-view="account"]) .anav__chev { display: none; }
  :where(body[data-view="account"]) .anav__out { color: var(--muted) !important; }
  @media (min-width: 1024px) {
    :where(body[data-view="account"]) .anav__list { flex-direction: column; gap: 0; overflow: visible; padding: 6px 0; }
    :where(body[data-view="account"]) .anav a, :where(body[data-view="account"]) .anav button { width: 100%; height: 46px; padding: 0 16px; border: 0; border-radius: 0; gap: 12px; font-size: 14px; }
    :where(body[data-view="account"]) .anav a:hover, :where(body[data-view="account"]) .anav button:hover { background: var(--panel); }
    :where(body[data-view="account"]) .anav a[aria-current="page"] { background: var(--panel); color: var(--text); font-weight: 600; }
    :where(body[data-view="account"]) .anav a[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--text); }
    :where(body[data-view="account"]) .anav a[aria-current="page"] .anav__count { background: var(--bg-elev); color: var(--text-2); }
    :where(body[data-view="account"]) .anav__label { flex: 1; text-align: left; }
    :where(body[data-view="account"]) .anav__chev { display: block; color: var(--muted); }
    :where(body[data-view="account"]) .anav__count + .anav__chev { margin-left: -4px; }
    :where(body[data-view="account"]) .anav__out { margin-top: 6px; border-top: 1px solid var(--line) !important; }
  }

  /* ---------- İçerik ---------- */
  :where(body[data-view="account"]) .view { min-width: 0; animation: account--view-in .4s var(--ease-out) both; }
  @keyframes account--view-in { from { opacity: 0; transform: translateY(6px); } }
  :where(body[data-view="account"]) .account-view:empty { min-height: 50vh; }
  :where(body[data-view="account"]) .vhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
  :where(body[data-view="account"]) .vhead__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.3vw, 31px); line-height: 1.1; letter-spacing: -.012em; }
  :where(body[data-view="account"]) .vhead__sub { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
  :where(body[data-view="account"]) .acard { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 2vw, 22px); min-width: 0; }
  :where(body[data-view="account"]) .acard + .acard, :where(body[data-view="account"]) .acard + .od-grid { margin-top: 16px; }
  :where(body[data-view="account"]) .acard__title { font-size: 16px; font-weight: 600; letter-spacing: -.005em; margin-bottom: 14px; }
  :where(body[data-view="account"]) .acard__lead { margin: -8px 0 6px; }
  :where(body[data-view="account"]) .vsec { margin-top: 24px; }
  :where(body[data-view="account"]) .vsec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
  :where(body[data-view="account"]) .vsec__title { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.1; }
  :where(body[data-view="account"]) .vsec__all { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  :where(body[data-view="account"]) .vsec__all:hover .ico { transform: translateX(2px); }
  :where(body[data-view="account"]) .vsec__all .ico { transition: transform .2s var(--ease-out); }

  /* Sayaç kutuları */
  :where(body[data-view="account"]) .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 768px) { :where(body[data-view="account"]) .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
  :where(body[data-view="account"]) .stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="account"]) a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
  :where(body[data-view="account"]) .stat__ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
  :where(body[data-view="account"]) .stat__txt { display: grid; min-width: 0; line-height: 1.25; }
  :where(body[data-view="account"]) .stat__txt strong { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
  :where(body[data-view="account"]) .stat__txt span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 399px) { :where(body[data-view="account"]) .stat { padding: 12px; gap: 10px; } :where(body[data-view="account"]) .stat__ico { width: 36px; height: 36px; } :where(body[data-view="account"]) .stat__ico .ico { width: 18px; height: 18px; } }

  /* Ürün ızgarası ve öneri rayı (sütun içinde) */
  :where(body[data-view="account"]) .agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 768px) { :where(body[data-view="account"]) .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
  @media (min-width: 1200px) { :where(body[data-view="account"]) .agrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  :where(body[data-view="account"]) .vrail { margin-top: 24px; }
  :where(body[data-view="account"]) .vrail .hsec { padding: 0; }
  :where(body[data-view="account"]) .vrail .container { padding-inline: 0; }
  :where(body[data-view="account"]) .vrail .shead__title { font-size: clamp(21px, 1.8vw, 24px); }
  :where(body[data-view="account"]) .vrail .rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  @media (min-width: 600px) { :where(body[data-view="account"]) .vrail .rail { grid-auto-columns: calc((100% - 2 * 12px) / 3); } }
  @media (min-width: 1200px) { :where(body[data-view="account"]) .vrail .rail { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }

  /* Boş durum */
  :where(body[data-view="account"]) .aempty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 32px 20px; }
  :where(body[data-view="account"]) .aempty__ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); margin-bottom: 4px; }
  :where(body[data-view="account"]) .aempty__title { font-size: 16px; font-weight: 600; }
  :where(body[data-view="account"]) .aempty .btn { margin-top: 8px; }

  /* ---------- Siparişler ---------- */
  :where(body[data-view="account"]) .ofilters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
  :where(body[data-view="account"]) .ofilters::-webkit-scrollbar { display: none; }
  :where(body[data-view="account"]) .ofilters .chip { flex: none; background: var(--bg-elev); }
  :where(body[data-view="account"]) .ofilters .chip[aria-pressed="true"] { background: var(--text); }
  :where(body[data-view="account"]) .chip__n { font-size: 11.5px; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
  :where(body[data-view="account"]) .olist { display: grid; gap: 12px; }
  :where(body[data-view="account"]) .ocard { min-width: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  :where(body[data-view="account"]) .ocard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
  :where(body[data-view="account"]) .ocard__meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
  :where(body[data-view="account"]) .ocard__meta div { display: grid; line-height: 1.3; }
  :where(body[data-view="account"]) .ocard__meta dt { font-size: 11.5px; color: var(--muted); }
  :where(body[data-view="account"]) .ocard__meta dd { margin: 0; font-size: 13.5px; font-weight: 600; }
  :where(body[data-view="account"]) .ocard__body { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pics info" "acts acts"; gap: 12px 14px; align-items: center; padding: 14px 16px; }
  @media (min-width: 900px) { :where(body[data-view="account"]) .ocard__body { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pics info acts"; } }
  :where(body[data-view="account"]) .ocard__pics { grid-area: pics; }
  :where(body[data-view="account"]) .ocard__info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
  :where(body[data-view="account"]) .ocard__state { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
  :where(body[data-view="account"]) .ocard__acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 8px; }
  @media (max-width: 899.98px) { :where(body[data-view="account"]) .ocard__acts .btn { flex: 1 1 auto; } }
  :where(body[data-view="account"]) .thumbs { display: flex; }
  :where(body[data-view="account"]) .thumbs img, :where(body[data-view="account"]) .thumbs__more { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 2px solid var(--bg-elev); }
  :where(body[data-view="account"]) .thumbs > * + * { margin-left: -12px; }
  :where(body[data-view="account"]) .thumbs__more { display: grid; place-items: center; background: var(--panel); font-size: 12.5px; font-weight: 600; }
  :where(body[data-view="account"]) .status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--bg-elev); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
  :where(body[data-view="account"]) .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  :where(body[data-view="account"]) .status--Shipped { background: var(--text); color: var(--bg); box-shadow: none; }
  :where(body[data-view="account"]) .status--Shipped::before { animation: account--blink 1.6s var(--ease) infinite; }
  :where(body[data-view="account"]) .status--Delivered { background: color-mix(in srgb, var(--success) 14%, var(--bg-elev)); color: var(--success); box-shadow: none; }
  :where(body[data-view="account"]) .status--Confirmed, :where(body[data-view="account"]) .status--Preparing { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); color: var(--accent); box-shadow: none; }
  @keyframes account--blink { 50% { opacity: .3; } }

  /* ---------- Sipariş detayı ---------- */
  :where(body[data-view="account"]) .back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
  :where(body[data-view="account"]) .back:hover { color: var(--text); }
  :where(body[data-view="account"]) .tl { display: grid; }
  :where(body[data-view="account"]) .tl__item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 18px; font-size: 14px; }
  :where(body[data-view="account"]) .tl__item:last-child { padding-bottom: 0; }
  :where(body[data-view="account"]) .tl__item::before { content: ''; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: var(--line-strong); }
  :where(body[data-view="account"]) .tl__item.is-done::before { background: var(--text); }
  :where(body[data-view="account"]) .tl__item:last-child::before { display: none; }
  :where(body[data-view="account"]) .tl__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--bg-elev); }
  :where(body[data-view="account"]) .tl__item.is-done .tl__dot { background: var(--text); border-color: var(--text); color: var(--bg); }
  :where(body[data-view="account"]) .tl__item.is-now .tl__dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 12%, transparent); }
  :where(body[data-view="account"]) .tl__txt { display: grid; line-height: 1.35; padding-top: 3px; }
  :where(body[data-view="account"]) .tl__label { font-weight: 600; }
  :where(body[data-view="account"]) .tl__item:not(.is-done) .tl__label { color: var(--muted); font-weight: 500; }
  :where(body[data-view="account"]) .tl__date { font-size: 12.5px; color: var(--muted); }
  @media (min-width: 768px) {
    :where(body[data-view="account"]) .tl { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    :where(body[data-view="account"]) .tl__item { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding-bottom: 0; }
    :where(body[data-view="account"]) .tl__item::before { left: calc(50% + 14px); right: calc(-50% + 14px); top: 14px; bottom: auto; width: auto; height: 1px; }
    :where(body[data-view="account"]) .tl__txt { padding-top: 0; }
  }
  :where(body[data-view="account"]) .cargo { display: grid; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
  @media (min-width: 768px) { :where(body[data-view="account"]) .cargo { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } }
  :where(body[data-view="account"]) .cargo__k { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
  :where(body[data-view="account"]) .cargo__v { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 500; }
  :where(body[data-view="account"]) .cargo__go { justify-self: start; }
  :where(body[data-view="account"]) .copy { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); transition: background .2s, color .2s, border-color .2s; }
  :where(body[data-view="account"]) .copy:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
  :where(body[data-view="account"]) .copy.is-ok { background: var(--success); border-color: var(--success); color: #fff; }
  :where(body[data-view="account"]) .od-grid { display: grid; gap: 16px; }
  @media (min-width: 1024px) { :where(body[data-view="account"]) .od-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
  :where(body[data-view="account"]) .od-side { display: grid; gap: 16px; min-width: 0; }
  :where(body[data-view="account"]) .oitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
  :where(body[data-view="account"]) .acard__title + .oitem { border-top: 0; padding-top: 0; }
  :where(body[data-view="account"]) .oitem:last-child { padding-bottom: 0; }
  :where(body[data-view="account"]) .oitem img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
  :where(body[data-view="account"]) .oitem__txt { display: grid; gap: 2px; min-width: 0; }
  :where(body[data-view="account"]) .oitem__name { font-weight: 500; }
  :where(body[data-view="account"]) .oitem__name:hover { text-decoration: underline; text-underline-offset: 3px; }
  :where(body[data-view="account"]) .oitem__again { justify-self: start; margin-top: 4px; }
  :where(body[data-view="account"]) .oitem__price { font-weight: 600; }
  :where(body[data-view="account"]) .od-card { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  :where(body[data-view="account"]) .rows { display: grid; gap: 8px; font-size: 14px; }
  :where(body[data-view="account"]) .rows div { display: flex; justify-content: space-between; gap: 16px; }
  :where(body[data-view="account"]) .rows div > span:first-child { color: var(--text-2); }
  :where(body[data-view="account"]) .rows .tot { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); align-items: baseline; }
  :where(body[data-view="account"]) .rows .tot > span:first-child { color: var(--text); font-weight: 600; }
  :where(body[data-view="account"]) .rows .tot strong { font-size: 19px; font-weight: 700; }
  :where(body[data-view="account"]) .od-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  @media (max-width: 559px) { :where(body[data-view="account"]) .od-actions .btn { flex: 1 1 100%; } }

  /* ---------- Adresler / kartlar ---------- */
  :where(body[data-view="account"]) .tiles { display: grid; gap: 12px; }
  @media (min-width: 640px) { :where(body[data-view="account"]) .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { :where(body[data-view="account"]) .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  :where(body[data-view="account"]) .atile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
  :where(body[data-view="account"]) .atile.is-default { border-color: var(--text); }
  :where(body[data-view="account"]) .atile__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  :where(body[data-view="account"]) .atile__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; min-width: 0; }
  :where(body[data-view="account"]) .atile__body { display: grid; gap: 2px; font-size: 13.5px; color: var(--text-2); }
  :where(body[data-view="account"]) .atile__body .fw5 { color: var(--text); }
  :where(body[data-view="account"]) .atile__actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
  :where(body[data-view="account"]) .atile__actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-size: 13px; font-weight: 500; color: var(--text-2); }
  :where(body[data-view="account"]) .atile__actions button:hover { color: var(--text); }
  :where(body[data-view="account"]) .atile__actions .ui-account-address-delete:hover, :where(body[data-view="account"]) .atile__actions .ui-account-card-delete:hover { color: var(--accent); }
  :where(body[data-view="account"]) .add-tile { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 168px; padding: 16px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--text-2); font-size: 14px; font-weight: 500; transition: border-color .2s, color .2s, background .2s; }
  :where(body[data-view="account"]) .add-tile:hover { border-color: var(--text); color: var(--text); background: var(--bg-elev); }
  :where(body[data-view="account"]) .add-tile__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
  :where(body[data-view="account"]) .pcc { position: relative; aspect-ratio: 1.586; max-width: 300px; border-radius: 12px; padding: 16px 18px; background: #1E1C1A; color: #F4EFE8; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
  :where(body[data-view="account"]) .pcc::before { content: 'ELAY'; position: absolute; right: -6px; bottom: -22px; font-family: var(--serif); font-size: 64px; line-height: 1; opacity: .06; }
  :where(body[data-view="account"]) .pcc--alt { background: #3A332D; }
  :where(body[data-view="account"]) .pcc__top { display: flex; justify-content: space-between; align-items: center; }
  :where(body[data-view="account"]) .pcc__chip { width: 32px; height: 23px; border-radius: 5px; background: #C9A55A; opacity: .85; }
  :where(body[data-view="account"]) .pcc__brand { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
  :where(body[data-view="account"]) .pcc__num { font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: .08em; }
  :where(body[data-view="account"]) .pcc__row { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
  :where(body[data-view="account"]) .anote { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--panel); font-size: 13px; color: var(--text-2); }
  :where(body[data-view="account"]) .anote .ico { margin-top: 2px; }

  /* ---------- Bilgilerim / bildirimler ---------- */
  :where(body[data-view="account"]) .fgrid { display: grid; gap: 12px; }
  @media (min-width: 640px) { :where(body[data-view="account"]) .fgrid { grid-template-columns: 1fr 1fr; } :where(body[data-view="account"]) .fgrid .span2 { grid-column: 1 / -1; } }
  :where(body[data-view="account"]) .field__hint:empty { display: none; }
  :where(body[data-view="account"]) .pref { display: grid; gap: 10px; }
  :where(body[data-view="account"]) .pref__label { font-size: 13.5px; font-weight: 600; }
  :where(body[data-view="account"]) .pref__label .muted { font-weight: 400; }
  :where(body[data-view="account"]) .pref .chip .ico { width: 16px; height: 16px; }
  :where(body[data-view="account"]) .pills .pill { min-width: 52px; }
  :where(body[data-view="account"]) .srows { display: grid; }
  :where(body[data-view="account"]) .srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
  :where(body[data-view="account"]) .srow:first-child { border-top: 0; padding-top: 0; }
  :where(body[data-view="account"]) .srow:last-child { padding-bottom: 0; }
  :where(body[data-view="account"]) .srow > span { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; min-width: 0; }
  :where(body[data-view="account"]) .srow > span .ico { margin-top: 3px; }
  :where(body[data-view="account"]) .srow small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
  :where(body[data-view="account"]) .form-foot { display: flex; justify-content: flex-end; }
  @media (max-width: 559px) { :where(body[data-view="account"]) .form-foot .btn { width: 100%; } }
  :where(body[data-view="account"]) .nrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
  :where(body[data-view="account"]) .acard__lead + .nrow { border-top: 0; }
  :where(body[data-view="account"]) .nrow:last-child { padding-bottom: 0; }
  :where(body[data-view="account"]) .nrow__t { display: grid; gap: 2px; font-size: 14px; font-weight: 500; cursor: pointer; }
  :where(body[data-view="account"]) .nrow__t small { font-size: 12.5px; font-weight: 400; color: var(--muted); }

  /* ---------- Pencereler (AccountModal) ---------- */
  :where(body[data-view="account"]) .modal__panel { width: min(580px, 100%); }
  :where(body[data-view="account"]) .mtitle { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2vw, 27px); line-height: 1.1; padding-right: 40px; }
  :where(body[data-view="account"]) .msub { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
  :where(body[data-view="account"]) .mform { display: grid; gap: 14px; margin-top: 18px; }
  :where(body[data-view="account"]) .ritem { display: grid; grid-template-columns: auto 56px 1fr; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
  :where(body[data-view="account"]) .ritem + .ritem { border-top: 1px solid var(--line); }
  :where(body[data-view="account"]) .ritem img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
  :where(body[data-view="account"]) .msuccess { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0; }
  :where(body[data-view="account"]) .msuccess .mtitle { padding-right: 0; }
  :where(body[data-view="account"]) .msuccess__ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); animation: bump .6s var(--ease-out); }
  :where(body[data-view="account"]) .help-opts { display: grid; gap: 8px; margin-top: 18px; }
  :where(body[data-view="account"]) .help-opts button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); text-align: left; font-size: 14px; font-weight: 500; transition: border-color .2s, background .2s; }
  :where(body[data-view="account"]) .help-opts button:hover { border-color: var(--line-strong); background: var(--panel); }
  :where(body[data-view="account"]) .help-opts small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }

  /* ---------- Razor: satır içi stillerin karşılıkları ---------- */
  :where(body[data-view="account"]) .g8 { --g: 8px; } :where(body[data-view="account"]) .g10 { --g: 10px; } :where(body[data-view="account"]) .g16 { --g: 16px; }
  :where(body[data-view="account"]) .fw5 { font-weight: 500; }
  :where(body[data-view="account"]) .acc-text2 { color: var(--text-2); }
  :where(body[data-view="account"]) .acc-block { display: block; }
  :where(body[data-view="account"]) .acc-err { color: var(--accent); }
  :where(body[data-view="account"]) .acc-err:empty { display: none; }
  :where(body[data-view="account"]) .acc-center { text-align: center; }
  :where(body[data-view="account"]) .acc-strong { color: var(--text); font-weight: 500; }
  :where(body[data-view="account"]) .acc-self-center { align-self: center; }


/* ======================================================================
   BAG-FINDER
   Ortak başlık → ortalanmış kart sihirbazı (.wiz, görselli seçenek kartları) → sonuç: cevap çipleri + uyum yüzdeli ürün kartları + alternatifler rayı.
   ====================================================================== */
:where(body[data-view="bag-finder"]) .bf-sumbox { display: grid; gap: 14px; }
@media (min-width: 900px) { :where(body[data-view="bag-finder"]) .bf-sumbox { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; } }
:where(body[data-view="bag-finder"]) .bf-sumbox .ktitle { outline: none; }
:where(body[data-view="bag-finder"]) .bf-sum { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { :where(body[data-view="bag-finder"]) .bf-sum { justify-content: flex-end; } }
:where(body[data-view="bag-finder"]) .bf-sum .chip { min-height: 42px; background: var(--bg-elev); }
@media (min-width: 768px) { :where(body[data-view="bag-finder"]) .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { :where(body[data-view="bag-finder"]) .picks { grid-template-columns: minmax(0, 1fr); } }
:where(body[data-view="bag-finder"]) .picks .pcard__media { aspect-ratio: 4 / 3; }
:where(body[data-view="bag-finder"]) .bf-also { padding-top: clamp(8px, 1.6vw, 16px); }

/* ======================================================================
   BRANDS
   ====================================================================== */
/* Fakir düzeni: başlık paneli, kutular, ızgara ve çekmece ortak liste düzeninde (LISTING). Burada yalnızca A–Z satırı. */
  :where(body[data-view="brands"]) .baz { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  :where(body[data-view="brands"]) .baz a, :where(body[data-view="brands"]) .baz span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
  :where(body[data-view="brands"]) .baz a { background: var(--bg-elev); border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s; }
  :where(body[data-view="brands"]) .baz a:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
  :where(body[data-view="brands"]) .baz span { font-weight: 500; color: var(--line-strong); }
  @media (max-width: 767px) { :where(body[data-view="brands"]) .baz span { display: none; } }


/* ======================================================================
   CAREERS
   Ortak başlık (görselli panel, istatistik çipleri) → yapışkan içindekiler + kartlar: çalışma şekli, yan haklar, ELAY'de hayat,
   açık pozisyonlar (filtre + akordeon), işe alım süreci → başvuru penceresi.
   ====================================================================== */
:where(body[data-view="careers"]) #main .field__input, :where(body[data-view="careers"]) .modal .field__input { font-size: 16px; }

/* Çalışma şekli */
:where(body[data-view="careers"]) .princ { display: grid; gap: 10px; }
@media (min-width: 900px) { :where(body[data-view="careers"]) .princ { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
:where(body[data-view="careers"]) .princ li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="careers"]) .princ__n { font-size: 12px; font-weight: 600; color: var(--muted); }
:where(body[data-view="careers"]) .princ h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="careers"]) .princ p { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* Yan haklar */
:where(body[data-view="careers"]) .perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1200px) { :where(body[data-view="careers"]) .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:where(body[data-view="careers"]) .perk { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 14px; border: 1px solid var(--line); }
:where(body[data-view="careers"]) .perk__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
:where(body[data-view="careers"]) .perk strong { font-size: 14.5px; font-weight: 600; }
:where(body[data-view="careers"]) .perk p { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ELAY'de hayat */
:where(body[data-view="careers"]) .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:where(body[data-view="careers"]) .strip figure { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--img-bg); }
@media (min-width: 768px) { :where(body[data-view="careers"]) .strip figure { aspect-ratio: 4 / 3; } }
:where(body[data-view="careers"]) .strip img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-view="careers"]) .strip figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.9); color: #1E1C1A; font-size: 11px; font-weight: 500; }
@media (max-width: 479px) { :where(body[data-view="careers"]) .strip figcaption { display: none; } }

/* Açık pozisyonlar */
:where(body[data-view="careers"]) .careers-roles { transition: opacity .25s var(--ease-out); }
:where(body[data-view="careers"]) .careers-roles.is-swapping { opacity: .45; }
:where(body[data-view="careers"]) .rtool { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
@media (min-width: 1200px) { :where(body[data-view="careers"]) .rtool { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
:where(body[data-view="careers"]) .rtool .seg { justify-self: start; background: var(--panel); }
:where(body[data-view="careers"]) .rtool .seg button { height: 38px; }
:where(body[data-view="careers"]) .rcount { font-size: 13px; color: var(--muted); padding: 12px 0 2px; }
:where(body[data-view="careers"]) .role { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 16px); animation: page-in .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
:where(body[data-view="careers"]) .role summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 16px 0; cursor: pointer; }
:where(body[data-view="careers"]) .role summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) { :where(body[data-view="careers"]) .role summary { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.1fr) 40px; } }
:where(body[data-view="careers"]) .role__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="careers"]) .role summary:hover .role__title { text-decoration: underline; text-underline-offset: 3px; }
:where(body[data-view="careers"]) .role__meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
@media (min-width: 900px) { :where(body[data-view="careers"]) .role__meta { display: contents; } }
:where(body[data-view="careers"]) .role__meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
:where(body[data-view="careers"]) .role__meta .ico { color: var(--muted); }
:where(body[data-view="careers"]) .role__toggle { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: transform .3s var(--ease-out), background .2s, color .2s; }
@media (min-width: 900px) { :where(body[data-view="careers"]) .role__toggle { grid-column: 4; grid-row: 1; } }
:where(body[data-view="careers"]) .role[open] .role__toggle { transform: rotate(45deg); background: var(--text); color: var(--bg); border-color: var(--text); }
:where(body[data-view="careers"]) .role__body { display: grid; gap: 20px; padding: 2px 0 22px; animation: acc-in .4s var(--ease-out); }
@media (min-width: 1100px) { :where(body[data-view="careers"]) .role__body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; } }
:where(body[data-view="careers"]) .role__body h4 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
:where(body[data-view="careers"]) .role__body h4:first-child { margin-top: 0; }
:where(body[data-view="careers"]) .role__body p, :where(body[data-view="careers"]) .role__body li { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
:where(body[data-view="careers"]) .role__body ul li { position: relative; padding-left: 16px; }
:where(body[data-view="careers"]) .role__body ul li + li { margin-top: 4px; }
:where(body[data-view="careers"]) .role__body ul li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--warm-gray); }
:where(body[data-view="careers"]) .role__side { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="careers"]) .role__side dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13.5px; }
:where(body[data-view="careers"]) .role__side dt { color: var(--muted); }
:where(body[data-view="careers"]) .role__side dd { margin: 0; }
:where(body[data-view="careers"]) .role__share { justify-self: center; }
:where(body[data-view="careers"]) .role.is-flash { animation: careers--rflash 1.8s var(--ease-out); }
@keyframes careers--rflash { 0%, 30% { background: color-mix(in srgb, var(--text) 5%, transparent); } 100% { background: transparent; } }
:where(body[data-view="careers"]) .careers-empty-text { max-width: 44ch; }
:where(body[data-view="careers"]) .careers-empty-actions { --g: 12px; justify-content: center; }

/* İşe alım süreci */
:where(body[data-view="careers"]) .proc { display: grid; gap: 8px; }
@media (min-width: 900px) { :where(body[data-view="careers"]) .proc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } }
:where(body[data-view="careers"]) .proc li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); }
:where(body[data-view="careers"]) .proc__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; }
:where(body[data-view="careers"]) .proc li strong { font-size: 14px; font-weight: 600; }
:where(body[data-view="careers"]) .proc li p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
:where(body[data-view="careers"]) .openapp { display: grid; gap: 14px; margin-top: 16px; padding: 18px; border-radius: 14px; background: var(--panel); }
@media (min-width: 768px) { :where(body[data-view="careers"]) .openapp { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; } }
:where(body[data-view="careers"]) .openapp__title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }

/* Başvuru penceresi */
:where(body[data-view="careers"]) .modal__panel { width: min(600px, 100%); padding: clamp(22px, 3vw, 32px); }
:where(body[data-view="careers"]) .apply { display: grid; gap: 14px; }
:where(body[data-view="careers"]) .apply__row { display: grid; gap: 14px; }
@media (min-width: 560px) { :where(body[data-view="careers"]) .apply__row { grid-template-columns: 1fr 1fr; } }
:where(body[data-view="careers"]) .drop { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--bg-elev); cursor: pointer; transition: border-color .2s, background .2s; }
:where(body[data-view="careers"]) .drop:hover, :where(body[data-view="careers"]) .drop.is-over { border-color: var(--text); background: var(--panel); }
:where(body[data-view="careers"]) .drop:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
:where(body[data-view="careers"]) .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
:where(body[data-view="careers"]) .drop__ico { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
:where(body[data-view="careers"]) .drop strong { font-weight: 600; font-size: 14px; display: block; }
:where(body[data-view="careers"]) .drop span.small { color: var(--muted); }
:where(body[data-view="careers"]) .drop.is-error { border-color: var(--accent); }
:where(body[data-view="careers"]) .file { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 10px 10px 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); }
:where(body[data-view="careers"]) .file .drop__ico { background: var(--text); color: var(--bg); }
:where(body[data-view="careers"]) .file__meta { min-width: 0; }
:where(body[data-view="careers"]) .file__name { font-weight: 600; font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(body[data-view="careers"]) .err-text { font-size: 12px; color: var(--accent); }
:where(body[data-view="careers"]) .check a { text-decoration: underline; text-underline-offset: 3px; }
:where(body[data-view="careers"]) .check.is-error input { border-color: var(--accent); }
:where(body[data-view="careers"]) .apply__consent { align-items: flex-start; }
:where(body[data-view="careers"]) .apply__consent-text { color: var(--text-2); }
:where(body[data-view="careers"]) .asuccess { display: grid; gap: 12px; justify-items: start; padding: 8px 0; animation: page-in .5s var(--ease-out) both; }
:where(body[data-view="careers"]) .asuccess__check { width: 52px; height: 52px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; }
:where(body[data-view="careers"]) .asuccess__text { color: var(--text-2); }
:where(body[data-view="careers"]) .asuccess__ref { color: var(--text); font-weight: 600; }
:where(body[data-view="careers"]) .asuccess__acts { --g: 16px; }

/* ======================================================================
   CART (Fakir düzeni)
   Solda: kargo çubuğu · ürün listesi kartı (başlık satırı, adet, tutar, sil / favorilere taşı) · indirim kodu + hediye paketi.
   Sağda: yapışkan sipariş özeti. Mobilde: altta toplam + "Siparişi tamamla" çubuğu.
   ====================================================================== */
:where(body[data-view="cart"]) [hidden] { display: none !important; }
  :where(body[data-view="cart"]) .cartp { padding-top: 14px; }
  :where(body[data-view="cart"]) .cartp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 10px 0 16px; }
  :where(body[data-view="cart"]) .cartp__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.015em; }
  :where(body[data-view="cart"]) .cartp__count { font-family: var(--sans); font-size: 14px; color: var(--muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  :where(body[data-view="cart"]) .cartp__continue { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
  :where(body[data-view="cart"]) .cartp__continue:hover { color: var(--text); }
  @media (max-width: 559px) { :where(body[data-view="cart"]) .cartp__continue span { display: none; } }

  /* ---------- Kart yüzeyi ---------- */
  :where(body[data-view="cart"]) .cbox { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; }

  /* ---------- Yerleşim ---------- */
  :where(body[data-view="cart"]) .cartp__layout { display: grid; gap: 16px; align-items: start; }
  :where(body[data-view="cart"]) .cartp__main { display: grid; gap: 12px; min-width: 0; }
  @media (min-width: 1024px) {
    :where(body[data-view="cart"]) .cartp__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
    :where(body[data-view="cart"]) .cartp__aside { position: sticky; top: calc(var(--hdr-h) + 16px); }
  }

  /* ---------- Ürün listesi ---------- */
  :where(body[data-view="cart"]) .clist { overflow: hidden; }
  :where(body[data-view="cart"]) .clist__head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
  :where(body[data-view="cart"]) .clist__title { font-size: 15px; font-weight: 600; }
  :where(body[data-view="cart"]) .clist__title .muted { font-weight: 400; font-size: 13.5px; }
  :where(body[data-view="cart"]) .clist__col { display: none; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="cart"]) .clist__col--qty { text-align: center; }
  :where(body[data-view="cart"]) .clist__col--price { text-align: right; }

  :where(body[data-view="cart"]) .bline {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img qty price";
    gap: 10px 14px; align-items: start; padding: 16px; border-top: 1px solid var(--line);
  }
  :where(body[data-view="cart"]) .bline:first-child { border-top: 0; }
  @media (min-width: 768px) {
    :where(body[data-view="cart"]) .clist__head { grid-template-columns: minmax(0, 1fr) 132px 120px; }
    :where(body[data-view="cart"]) .clist__col { display: block; }
    :where(body[data-view="cart"]) .bline { grid-template-columns: 96px minmax(0, 1fr) 132px 120px; grid-template-areas: "img info qty price"; gap: 16px; padding: 18px; }
  }
  :where(body[data-view="cart"]) .cart-body.is-first .bline { animation: page-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
  :where(body[data-view="cart"]) .bline.is-removing { animation: cart--bline-out .38s var(--ease) forwards; pointer-events: none; }
  @keyframes cart--bline-out { to { opacity: 0; transform: translateX(24px); } }
  :where(body[data-view="cart"]) .bline__img { grid-area: img; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--img-bg); }
  :where(body[data-view="cart"]) .bline__img img { width: 100%; height: 100%; object-fit: cover; }
  :where(body[data-view="cart"]) .bline__info { grid-area: info; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  :where(body[data-view="cart"]) .bline__brand { font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  :where(body[data-view="cart"]) .bline__name { font-size: 14.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  :where(body[data-view="cart"]) .bline__name:hover { text-decoration: underline; text-underline-offset: 3px; }
  :where(body[data-view="cart"]) .bline__opts { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--text-2); }
  :where(body[data-view="cart"]) .bline__opts:empty { display: none; }
  :where(body[data-view="cart"]) .bline__opts > span { display: inline-flex; align-items: center; gap: 6px; }
  :where(body[data-view="cart"]) .bline__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); }
  :where(body[data-view="cart"]) .bline__stock.is-low { color: var(--accent); }
  :where(body[data-view="cart"]) .bline__actions { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 2px; }
  :where(body[data-view="cart"]) .bline__act { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-size: 12.5px; color: var(--text-2); transition: color .2s; }
  :where(body[data-view="cart"]) .bline__act:hover { color: var(--text); }
  :where(body[data-view="cart"]) .bline__act[data-bag-remove]:hover { color: var(--accent); }
  :where(body[data-view="cart"]) .bline__act .heart { width: 16px; height: 16px; }
  :where(body[data-view="cart"]) .bline__act[aria-pressed="true"] .heart { --ico-fill: 1; }
  :where(body[data-view="cart"]) .bline__qty { grid-area: qty; display: flex; align-items: center; }
  @media (min-width: 768px) { :where(body[data-view="cart"]) .bline__qty { justify-content: center; align-self: center; } :where(body[data-view="cart"]) .bline__price { align-self: center; } }
  :where(body[data-view="cart"]) .bline .qty { height: 38px; border-radius: 10px; }
  :where(body[data-view="cart"]) .bline .qty button { width: 36px; border-radius: 9px; }
  :where(body[data-view="cart"]) .bline .qty button[disabled] { opacity: .3; pointer-events: none; }
  :where(body[data-view="cart"]) .bline__price { grid-area: price; display: grid; justify-items: end; align-content: center; gap: 2px; text-align: right; min-height: 38px; }
  :where(body[data-view="cart"]) .bline__price .price { display: grid; justify-items: end; font-size: 16px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
  :where(body[data-view="cart"]) .bline__price .price s { font-size: 12.5px; font-weight: 400; color: var(--muted); }
  :where(body[data-view="cart"]) .bline__price .is-sale { color: var(--accent); }
  :where(body[data-view="cart"]) .bline__each { font-size: 11.5px; color: var(--muted); }

  /* ---------- İndirim kodu + hediye paketi ---------- */
  :where(body[data-view="cart"]) .cextras { display: grid; gap: 12px; }
  @media (min-width: 768px) { :where(body[data-view="cart"]) .cextras { grid-template-columns: 1fr 1fr; align-items: start; } }
  :where(body[data-view="cart"]) .cextra { padding: 16px 18px; display: grid; gap: 12px; }
  :where(body[data-view="cart"]) .cextra__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
  :where(body[data-view="cart"]) .promo__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
  :where(body[data-view="cart"]) .promo__form .field__input { text-transform: uppercase; }
  :where(body[data-view="cart"]) .promo__form .btn { min-height: 48px; }
  :where(body[data-view="cart"]) .promo__form .field__hint { grid-column: 1 / -1; margin-top: 0; }
  :where(body[data-view="cart"]) .field--sm .field__input { height: 48px; padding-top: 18px; }
  :where(body[data-view="cart"]) .field--sm .field__label { top: 14px; }
  :where(body[data-view="cart"]) .field--sm .field__input:focus + .field__label, :where(body[data-view="cart"]) .field--sm .field__input:not(:placeholder-shown) + .field__label { top: 6px; }
  :where(body[data-view="cart"]) .promo__applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); font-size: 13.5px; }
  :where(body[data-view="cart"]) .promo__applied strong { font-weight: 600; }
  :where(body[data-view="cart"]) .promo__applied button { min-height: 32px; padding: 0 6px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--text-2); }
  :where(body[data-view="cart"]) .gift__check { align-items: flex-start; }
  :where(body[data-view="cart"]) .gift__check input { margin-top: 1px; }
  :where(body[data-view="cart"]) .gift__label { display: block; font-size: 14px; }
  :where(body[data-view="cart"]) .gift__sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  :where(body[data-view="cart"]) .gift__note { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
  :where(body[data-view="cart"]) .gift__note > div { overflow: hidden; min-height: 0; }
  :where(body[data-view="cart"]) .gift__note.is-open { grid-template-rows: 1fr; }
  :where(body[data-view="cart"]) .gift__note textarea.field__input { min-height: 84px; }

  /* ---------- Sipariş özeti ---------- */
  :where(body[data-view="cart"]) .bsum { padding: 18px 20px 20px; display: grid; gap: 14px; }
  :where(body[data-view="cart"]) .bsum__title { font-size: 17px; font-weight: 600; }
  :where(body[data-view="cart"]) .bsum__rows { display: grid; gap: 10px; font-size: 14px; }
  :where(body[data-view="cart"]) .bsum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  :where(body[data-view="cart"]) .bsum__row > span:first-child { color: var(--text-2); }
  :where(body[data-view="cart"]) .is-save { color: var(--accent); }
  :where(body[data-view="cart"]) .is-free { color: var(--success); font-weight: 600; }
  :where(body[data-view="cart"]) .bsum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; }
  :where(body[data-view="cart"]) .bsum__vat { font-size: 12px; font-weight: 400; color: var(--muted); }
  :where(body[data-view="cart"]) .bsum__total strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  :where(body[data-view="cart"]) .bsum__inst { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: -6px; }
  :where(body[data-view="cart"]) .bsum__trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
  :where(body[data-view="cart"]) .bsum__trust li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--text-2); }
  :where(body[data-view="cart"]) .bsum__trust .ico { width: 20px; height: 20px; }
  :where(body[data-view="cart"]) .bsum__pay { justify-content: center; margin-top: 12px; }

  /* ---------- Mobil: altta toplam + buton ---------- */
  :where(body[data-view="cart"]) .bbar { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 65; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-elev); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(20, 16, 12, .4); transition: transform .4s var(--ease-out), opacity .3s; }
  :where(body[data-view="cart"]) .bbar__total { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
  :where(body[data-view="cart"]) .bbar__label { font-size: 12px; color: var(--muted); }
  :where(body[data-view="cart"]) .bbar__total strong { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
  :where(body[data-view="cart"]) .bbar .btn { flex: none; }
  :where(body[data-view="cart"]) .bbar.is-off { transform: translateY(calc(100% + 80px)); opacity: 0; pointer-events: none; }
  body:where([data-view="cart"]):has(.bnav.is-hidden) .bbar:not(.is-off) { transform: translateY(62px); }
  @media (min-width: 1024px) { :where(body[data-view="cart"]) .bbar { display: none; } }
  @media (max-width: 1023px) { :where(body[data-view="cart"]) .cartp { padding-bottom: 72px; } }

  /* ---------- Boş sepet ---------- */
  :where(body[data-view="cart"]) .cempty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(32px, 6vw, 64px) 20px; }
  :where(body[data-view="cart"]) .cempty__art { width: 84px; height: 84px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; margin-bottom: 6px; }
  :where(body[data-view="cart"]) .cempty__title { font-size: 19px; font-weight: 600; }
  :where(body[data-view="cart"]) .cempty__lead { color: var(--text-2); font-size: 14px; max-width: 44ch; }
  :where(body[data-view="cart"]) .cempty__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

  :where(body[data-view="cart"]) .cart-body:empty { min-height: 50vh; }
  :where(body[data-view="cart"]) .field__hint:empty { display: none; }


/* ======================================================================
   LISTING — kategori · arama · koleksiyon · marka ortak liste düzeni (Fakir)
   Başlık paneli (.lhead) → görselli alt kategori kutuları (.subtiles) → ızgara üstü (.ltool: sayı, çipler,
   masaüstü sıralama) → ürün ızgarası (.lgrid) · yüzen "Filtrele & Sırala" düğmesi (.lfab) → çekmece (.lfd).
   ====================================================================== */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lpage { padding-top: 14px; }
  @media (min-width: 1024px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lpage { padding-top: 18px; } }

  /* ---------- Başlık paneli ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead { display: grid; gap: 6px; padding: 14px 16px 16px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead { grid-template-columns: minmax(0, 1fr); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead > * { min-width: 0; }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead { padding: 18px 24px 20px; } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead .crumbs { gap: 6px; font-size: 12px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead .crumbs li + li::before { content: '›'; margin-right: 6px; opacity: .6; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__body { display: grid; gap: 6px; align-content: center; min-width: 0; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__kicker { font-size: 12px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.015em; overflow-wrap: anywhere; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__title .bmark { font-size: .8em; white-space: normal; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__title .bmark--serif, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__title .bmark--serif-italic, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__title .bmark--serif-upper { font-size: 1em; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__count { font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__text { font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
  @media (max-width: 767px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__text { -webkit-line-clamp: 2; } }
  /* Küçük banner görselli başlık (koleksiyon, marka) */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead--media { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__media { order: -1; aspect-ratio: 21 / 8; border-radius: 12px; overflow: hidden; background: var(--img-bg); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__media img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 768px) {
    :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead--media { grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); gap: 28px; align-items: center; padding-right: 14px; }
    :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lhead__media { order: 0; aspect-ratio: 16 / 8; max-height: 176px; width: 100%; }
  }

  /* ---------- Görselli alt kategori kutuları (masaüstünde ~7 kutu, mobilde yatay kaydırma) ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtiles { display: grid; grid-auto-flow: column; grid-auto-columns: 100px; gap: 10px; margin: 14px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 4px; overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtiles::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtiles { grid-auto-columns: 128px; gap: 12px; } }
  @media (min-width: 1024px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtiles { grid-auto-columns: min(150px, calc((100% - 6 * 14px) / 7)); gap: 14px; margin-inline: 0; padding-inline: 0; } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 6px 6px 9px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); text-align: center; transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile:hover { border-color: var(--line-strong); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile.is-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile.is-disabled { opacity: .4; pointer-events: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile__img { width: 100%; aspect-ratio: 1; margin-bottom: 2px; border-radius: 10px; overflow: hidden; background: var(--img-bg); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
  @media (hover: hover) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile:hover .subtile__img img { transform: scale(1.05); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile__label { max-width: 100%; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .subtile__n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* Sarılan kutu ızgarası (arama: kategoriler, popüler kategoriler) */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; } }
  @media (min-width: 1280px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltiles { grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); } }

  /* ---------- Izgara üstü: sayı + aktif çipler · sıralama ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltool { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 18px 0 12px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltool__info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltool__count { flex: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltool__chips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .ltool__chips::-webkit-scrollbar { display: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lchip { flex: none; height: 32px; padding: 0 12px; gap: 6px; font-size: 12.5px; background: var(--bg-elev); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lchip .x { opacity: .55; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lchip:hover .x { opacity: 1; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lclear { flex: none; padding: 0 4px; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lclear:hover { color: var(--text); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lsort { display: none; }
  @media (min-width: 1024px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lsort { display: inline-flex; flex: none; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lsort select { height: 40px; padding: 0 36px 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857D73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text); font-size: 13.5px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lsort select:hover, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lsort select:focus-visible { border-color: var(--text); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lsort select option { background: var(--bg-elev); color: var(--text); }

  /* ---------- Ürün ızgarası (çerçeveli kartlar için sıkı aralık) ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lgrid { gap: 10px; transition: opacity .25s var(--ease); }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lgrid { gap: 16px; } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lgrid > .pcard { animation: listing--card-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
  @keyframes listing--card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .is-loading .lgrid, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lgrid.is-swapping { opacity: .35; pointer-events: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lempty { grid-column: 1 / -1; gap: 10px; padding: 40px 16px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lempty .empty__art { width: 76px; height: 76px; background: var(--panel); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lempty__title { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lempty__text { max-width: 46ch; font-size: 14px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lempty__subs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lend { display: grid; justify-items: center; gap: 6px; margin-top: 28px; font-size: 13px; color: var(--muted); text-align: center; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lend__link { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Yüzen "Filtrele & Sırala" düğmesi (mobilde alt menünün üstünde) ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfab { position: fixed; left: 16px; bottom: calc(62px + 14px + env(safe-area-inset-bottom)); z-index: 64; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px -12px rgba(20, 16, 12, .6); transition: transform .2s var(--ease), background .2s; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfab:hover { background: var(--ink); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfab:active { transform: scale(.96); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfab__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg); color: var(--text); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfab__badge:empty { display: none; }
  @media (min-width: 1024px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfab { left: 24px; bottom: 24px; height: 46px; padding: 0 18px 0 16px; font-size: 14px; } }

  /* ---------- Filtre & sıralama çekmecesi ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfd { width: min(420px, 100%); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfd .drawer__head { padding: 14px 16px 14px 20px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfd__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfd .drawer__body { padding: 0 20px 16px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfd__foot { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet summary { padding: 15px 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet summary .ico { color: var(--muted); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet[open] summary .ico { transform: rotate(180deg); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__sel { margin-left: 6px; color: var(--muted); font-weight: 400; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet .acc__body { padding-bottom: 16px; font-size: 14px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__list { display: grid; gap: 2px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__opt { display: flex; width: 100%; gap: 12px; padding: 7px 0; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__opt > span:nth-child(2) { flex: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__opt .ico { width: 16px; height: 16px; color: var(--muted); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__opt.is-disabled, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch[disabled] { opacity: .38; pointer-events: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__colors { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 4px; border-radius: 10px; font-size: 13.5px; text-align: left; transition: background .2s; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch:hover { background: var(--panel); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch .swatch { width: 22px; height: 22px; flex: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch .swatch::after { inset: -4px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch[aria-pressed="true"] .swatch::after { border-color: var(--text); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch[aria-pressed="true"] > span:nth-child(2) { font-weight: 600; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .cswatch .facet__count { margin-left: auto; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet .pills { gap: 8px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet .pill { min-width: 0; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet .pill[aria-pressed="true"] .facet__count { color: inherit; opacity: .7; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet .pill[disabled] { opacity: .45; pointer-events: none; border-style: dashed; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange { position: relative; height: 32px; margin: 6px 4px 0; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line-strong); border-radius: 2px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__fill { position: absolute; top: 0; bottom: 0; left: var(--a, 0%); right: var(--b, 0%); background: var(--text); border-radius: 2px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange input { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; background: transparent; pointer-events: none; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange input::-webkit-slider-thumb { pointer-events: auto; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange input::-moz-range-thumb { pointer-events: auto; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__vals { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__vals span { min-width: 88px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-elev); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__vals span:last-child { text-align: right; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .prange__presets .chip { height: 32px; padding: 0 12px; font-size: 12px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .facet__switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--text); cursor: pointer; }

  /* ---------- Marka kutusu (_brandCard: dizin, marka sayfası, arama) ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
  @media (min-width: 1280px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + 16px); transition: border-color .2s, box-shadow .2s; }
  @media (hover: hover) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--img-bg); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
  @media (hover: hover) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile:hover .btile__img img { transform: scale(1.04); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile__body { display: grid; gap: 6px; padding: 12px 12px 14px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile .bmark { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile .bmark--serif, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile .bmark--serif-italic, :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile .bmark--serif-upper { font-size: 20px; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--muted); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile__text { font-size: 13px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  @media (max-width: 599px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .btile__text { display: none; } }

  /* ---------- Bulucu paneli (kategori) ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 16px; padding: 16px 18px; transition: box-shadow .2s; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder:hover { box-shadow: var(--shadow-soft); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-elev); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder__text { display: grid; gap: 2px; min-width: 0; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder__text strong { font-size: 15px; font-weight: 600; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder__text small { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder__cta { grid-column: 1 / -1; justify-self: start; pointer-events: none; }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder { grid-template-columns: auto minmax(0, 1fr) auto; padding: 18px 24px; } :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lfinder__cta { grid-column: auto; } }

  /* ---------- Koleksiyon kartı (arama sonuçları, diğer koleksiyonlar) ---------- */
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 768px) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
  @media (hover: hover) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--img-bg); }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
  @media (hover: hover) { :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol:hover .lcol__img img { transform: scale(1.04); } }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol__body { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol__kicker { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol strong { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; }
  :where(body[data-view="category"], body[data-view="search"], body[data-view="collection"], body[data-view="brands"]) .lcol small { font-size: 12px; color: var(--muted); }


/* ======================================================================
   CATEGORY
   ====================================================================== */
/* Fakir düzeni: başlık paneli, görselli alt kategori kutuları, ızgara, yüzen "Filtrele & Sırala" düğmesi ve çekmece
   ortak liste düzeninde (LISTING). Kategoriye özel ek stil yok. */


/* ======================================================================
   CHECKOUT (Fakir düzeni)
   Sade üst bar (logo · güvenli ödeme · sepete dön) → adım çubuğu (1 Teslimat · 2 Kargo · 3 Ödeme · 4 Onay)
   → solda beyaz kartlarda akordeon adımlar, sağda yapışkan özet → onay ekranı. Mobilde altta toplam + adım butonu.
   ====================================================================== */
:where(body[data-view="checkout"]) [hidden] { display: none !important; }
  :where(body[data-view="checkout"]) { background: var(--bg); }
  :where(body[data-view="checkout"]) .cbox { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; }
  :where(body[data-view="checkout"]) .co-link { font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); white-space: nowrap; }
  :where(body[data-view="checkout"]) .co-link:hover { text-decoration-color: currentColor; }

  /* ---------- Üst bar ---------- */
  :where(body[data-view="checkout"]) .co-hdr { position: relative; z-index: 31; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
  :where(body[data-view="checkout"]) .co-hdr__in { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  @media (min-width: 1024px) { :where(body[data-view="checkout"]) .co-hdr__in { height: 68px; } }
  :where(body[data-view="checkout"]) .co-hdr__end { display: flex; align-items: center; gap: 6px 20px; }
  :where(body[data-view="checkout"]) .co-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--success); }
  :where(body[data-view="checkout"]) .co-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; transition: background .2s; }
  :where(body[data-view="checkout"]) .co-back:hover { background: var(--panel); }
  @media (max-width: 559px) { :where(body[data-view="checkout"]) .co-back span { display: none; } :where(body[data-view="checkout"]) .co-back { width: 40px; padding: 0; justify-content: center; } }

  /* ---------- Adım çubuğu ---------- */
  :where(body[data-view="checkout"]) .co { padding-bottom: clamp(32px, 5vw, 64px); min-height: calc(100svh - 200px); }
  :where(body[data-view="checkout"]) .co-prog { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 680px; margin: 18px auto 18px; }
  @media (min-width: 1024px) { :where(body[data-view="checkout"]) .co-prog { margin: 24px auto 24px; } }
  :where(body[data-view="checkout"]) .co-prog li { position: relative; display: grid; justify-items: center; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="checkout"]) .co-prog li::before, :where(body[data-view="checkout"]) .co-prog li::after { content: ''; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; border-radius: 1px; background: var(--line); }
  :where(body[data-view="checkout"]) .co-prog li::after { background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
  :where(body[data-view="checkout"]) .co-prog li:first-child::before, :where(body[data-view="checkout"]) .co-prog li:first-child::after { display: none; }
  :where(body[data-view="checkout"]) .co-prog li.is-done::after, :where(body[data-view="checkout"]) .co-prog li.is-active::after { transform: scaleX(1); }
  :where(body[data-view="checkout"]) .co-prog button { display: grid; justify-items: center; gap: 6px; font: inherit; color: inherit; }
  :where(body[data-view="checkout"]) .co-prog button[disabled] { cursor: default; }
  :where(body[data-view="checkout"]) .co-prog__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg-elev); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: all .3s var(--ease); }
  :where(body[data-view="checkout"]) .co-prog li.is-active { color: var(--text); }
  :where(body[data-view="checkout"]) .co-prog li.is-active .co-prog__dot { border-color: var(--text); background: var(--text); color: var(--bg); }
  :where(body[data-view="checkout"]) .co-prog li.is-done { color: var(--text-2); }
  :where(body[data-view="checkout"]) .co-prog li.is-done .co-prog__dot { border-color: var(--success); background: var(--success); color: #fff; }
  :where(body[data-view="checkout"]) .co-prog li.is-done button:not([disabled]):hover .co-prog__label { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Yerleşim ---------- */
  :where(body[data-view="checkout"]) .co__grid { display: grid; gap: 16px; align-items: start; }
  @media (min-width: 1024px) {
    :where(body[data-view="checkout"]) .co__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
    :where(body[data-view="checkout"]) .co-sum { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
    :where(body[data-view="checkout"]) .co-steps { grid-column: 1; grid-row: 1; }
  }

  /* ---------- Adım kartları (akordeon) ---------- */
  :where(body[data-view="checkout"]) .co-steps { display: grid; gap: 12px; min-width: 0; }
  :where(body[data-view="checkout"]) .cstep { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; scroll-margin-top: 16px; transition: border-color .3s, opacity .3s; }
  :where(body[data-view="checkout"]) .cstep.is-open { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
  :where(body[data-view="checkout"]) .cstep.is-locked { opacity: .6; }
  :where(body[data-view="checkout"]) .cstep__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 20px; }
  :where(body[data-view="checkout"]) .cstep__num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: all .3s; }
  :where(body[data-view="checkout"]) .cstep.is-open .cstep__num { background: var(--text); color: var(--bg); border-color: var(--text); }
  :where(body[data-view="checkout"]) .cstep.is-done .cstep__num { background: var(--success); color: #fff; border-color: var(--success); }
  :where(body[data-view="checkout"]) .cstep__headtxt { min-width: 0; }
  :where(body[data-view="checkout"]) .cstep__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
  :where(body[data-view="checkout"]) .cstep__sum { font-size: 13px; color: var(--text-2); margin-top: 2px; display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(body[data-view="checkout"]) .cstep.is-done .cstep__sum { display: block; }
  :where(body[data-view="checkout"]) .cstep__edit { display: none; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; }
  :where(body[data-view="checkout"]) .cstep__edit:hover { background: var(--panel); }
  :where(body[data-view="checkout"]) .cstep.is-done .cstep__edit { display: inline-flex; align-items: center; }
  :where(body[data-view="checkout"]) .cstep__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
  :where(body[data-view="checkout"]) .cstep.is-open .cstep__body { grid-template-rows: 1fr; }
  :where(body[data-view="checkout"]) .cstep__inner { overflow: hidden; min-height: 0; }
  :where(body[data-view="checkout"]) .cstep:not(.is-open) .cstep__inner { visibility: hidden; transition: visibility 0s .5s; }
  :where(body[data-view="checkout"]) .cstep__pad { padding: 0 20px 20px; display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
  :where(body[data-view="checkout"]) .cstep__cta { justify-self: start; min-width: 220px; }
  @media (max-width: 1023px) { :where(body[data-view="checkout"]) .cstep__cta { display: none !important; } :where(body[data-view="checkout"]) .cstep__pad { padding-inline: 16px; } :where(body[data-view="checkout"]) .cstep__head { padding: 14px 16px; } }
  :where(body[data-view="checkout"]) .cgroup { display: grid; gap: 12px; }
  :where(body[data-view="checkout"]) .cgroup + .cgroup { padding-top: 16px; border-top: 1px dashed var(--line); }
  :where(body[data-view="checkout"]) .cgroup__title { font-size: 14px; font-weight: 600; }

  /* ---------- Alanlar ---------- */
  :where(body[data-view="checkout"]) .fgrid { display: grid; gap: 12px; }
  @media (min-width: 560px) { :where(body[data-view="checkout"]) .fgrid { grid-template-columns: 1fr 1fr; } :where(body[data-view="checkout"]) .fgrid .span2 { grid-column: 1 / -1; } }
  :where(body[data-view="checkout"]) .field__hint:empty { display: none; }
  :where(body[data-view="checkout"]) .field__input::placeholder { color: transparent; }
  :where(body[data-view="checkout"]) .field__input:focus::placeholder { color: var(--warm-gray); }
  :where(body[data-view="checkout"]) .field__pre { position: absolute; left: 16px; top: 27px; font-size: 15px; color: var(--muted); pointer-events: none; opacity: 0; transition: opacity .2s; }
  @media (max-width: 1023.98px) { :where(body[data-view="checkout"]) .field__pre { font-size: 16px; top: 26px; } }
  :where(body[data-view="checkout"]) .field--pre .field__input { padding-left: 52px; }
  :where(body[data-view="checkout"]) .field--pre .field__label { left: 52px; }
  :where(body[data-view="checkout"]) .field--pre .field__input:focus ~ .field__pre, :where(body[data-view="checkout"]) .field--pre .field__input:not(:placeholder-shown) ~ .field__pre { opacity: 1; }
  :where(body[data-view="checkout"]) .check { font-size: 14px; }
  :where(body[data-view="checkout"]) .co-check-center { align-self: center; }

  :where(body[data-view="checkout"]) .me { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel); }
  :where(body[data-view="checkout"]) .me__av { width: 40px; height: 40px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 16px; font-weight: 600; flex: none; }
  :where(body[data-view="checkout"]) .me__txt { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
  :where(body[data-view="checkout"]) .me__txt strong { font-weight: 600; font-size: 14px; }
  :where(body[data-view="checkout"]) .guest-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel); font-size: 13.5px; }

  /* ---------- Seçim kartları (adres, kargo, kayıtlı kart) ---------- */
  :where(body[data-view="checkout"]) .opts { display: grid; gap: 10px; }
  @media (min-width: 640px) { :where(body[data-view="checkout"]) .opts--2 { grid-template-columns: 1fr 1fr; } }
  :where(body[data-view="checkout"]) .opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
  :where(body[data-view="checkout"]) .opt:hover { border-color: var(--warm-gray); }
  :where(body[data-view="checkout"]) .opt:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: color-mix(in srgb, var(--panel) 60%, var(--bg-elev)); }
  :where(body[data-view="checkout"]) .opt:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
  :where(body[data-view="checkout"]) .opt.is-disabled { opacity: .5; cursor: not-allowed; }
  :where(body[data-view="checkout"]) .opt__radio { appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg-elev); display: grid; place-items: center; transition: border-color .2s; }
  :where(body[data-view="checkout"]) .opt__radio:checked { border-color: var(--text); }
  :where(body[data-view="checkout"]) .opt__radio:checked::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
  :where(body[data-view="checkout"]) .opt__main { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
  :where(body[data-view="checkout"]) .opt__title { font-size: 14.5px; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  :where(body[data-view="checkout"]) .opt__side { text-align: right; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  :where(body[data-view="checkout"]) .opt__eta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--text); font-size: 13px; }
  :where(body[data-view="checkout"]) .opt--new { align-items: center; border-style: dashed; }
  :where(body[data-view="checkout"]) .is-free { color: var(--success); font-weight: 600; }
  :where(body[data-view="checkout"]) .is-save { color: var(--accent); }

  :where(body[data-view="checkout"]) .reveal-box { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
  :where(body[data-view="checkout"]) .reveal-box > div { overflow: hidden; min-height: 0; }
  :where(body[data-view="checkout"]) .reveal-box.is-open { grid-template-rows: 1fr; }
  :where(body[data-view="checkout"]) .reveal-box.is-open > div { overflow: visible; }
  :where(body[data-view="checkout"]) .reveal-box:not(.is-open) > div { visibility: hidden; }
  :where(body[data-view="checkout"]) .reveal-box__pad { padding-top: 4px; display: grid; gap: 12px; }

  :where(body[data-view="checkout"]) .co-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel); font-size: 13px; color: var(--text-2); }
  :where(body[data-view="checkout"]) .co-note .ico { flex: none; }
  :where(body[data-view="checkout"]) .co-note strong { font-weight: 600; color: var(--text); }
  :where(body[data-view="checkout"]) .co-text2 { color: var(--text-2); font-size: 14px; }

  /* ---------- Ödeme ---------- */
  :where(body[data-view="checkout"]) .pm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  :where(body[data-view="checkout"]) .pm-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); font-size: 13.5px; font-weight: 500; text-align: center; line-height: 1.25; transition: border-color .2s, box-shadow .2s, background .2s; }
  :where(body[data-view="checkout"]) .pm-tab:hover { border-color: var(--warm-gray); }
  :where(body[data-view="checkout"]) .pm-tab.is-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: color-mix(in srgb, var(--panel) 60%, var(--bg-elev)); }
  @media (max-width: 559px) { :where(body[data-view="checkout"]) .pm-tab { flex-direction: column; gap: 4px; font-size: 12.5px; min-height: 64px; } }
  :where(body[data-view="checkout"]) .pm-pane { display: grid; gap: 14px; }

  :where(body[data-view="checkout"]) .ccard-wrap { display: grid; gap: 16px; align-items: start; }
  @media (min-width: 768px) { :where(body[data-view="checkout"]) .ccard-wrap { grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; } }
  @media (max-width: 767px) { :where(body[data-view="checkout"]) .ccard { display: none; } }
  :where(body[data-view="checkout"]) .ccard { perspective: 1200px; width: 100%; aspect-ratio: 1.586; }
  :where(body[data-view="checkout"]) .ccard__inner { position: relative; width: 100%; height: 100%; transition: transform .7s var(--ease-out); transform-style: preserve-3d; }
  :where(body[data-view="checkout"]) .ccard.is-flipped .ccard__inner { transform: rotateY(180deg); }
  :where(body[data-view="checkout"]) .ccard__face { position: absolute; inset: 0; border-radius: 14px; padding: 16px 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #1E1C1A; color: #F4EFE8; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-soft); overflow: hidden; }
  :where(body[data-view="checkout"]) .ccard__back { transform: rotateY(180deg); justify-content: flex-start; padding: 18px 0; }
  :where(body[data-view="checkout"]) .ccard__strip { height: 34px; background: #0b0a09; margin-bottom: 14px; }
  :where(body[data-view="checkout"]) .ccard__cvc { margin: 0 18px; height: 30px; border-radius: 6px; background: #F4EFE8; color: #1E1C1A; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; font-family: ui-monospace, monospace; letter-spacing: .2em; font-size: 13px; }
  :where(body[data-view="checkout"]) .ccard__top { display: flex; justify-content: space-between; align-items: center; }
  :where(body[data-view="checkout"]) .ccard__chip { width: 32px; height: 24px; border-radius: 5px; background: #C9A55A; opacity: .85; }
  :where(body[data-view="checkout"]) .ccard__brand { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
  :where(body[data-view="checkout"]) .ccard__num { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
  :where(body[data-view="checkout"]) .ccard__row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
  :where(body[data-view="checkout"]) .ccard__row small { display: block; font-size: 8.5px; opacity: .6; margin-bottom: 2px; }
  :where(body[data-view="checkout"]) .ccard__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }

  :where(body[data-view="checkout"]) .saved-card { display: flex; align-items: center; gap: 10px; }
  :where(body[data-view="checkout"]) .mini-cc { width: 42px; height: 28px; border-radius: 5px; background: #1E1C1A; color: #F4EFE8; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; flex: none; }

  :where(body[data-view="checkout"]) .inst { border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
  :where(body[data-view="checkout"]) .inst__head, :where(body[data-view="checkout"]) .inst__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 92px 92px; gap: 12px; align-items: center; padding: 12px 14px; }
  :where(body[data-view="checkout"]) .inst__head { padding-block: 9px; background: var(--panel); font-size: 12px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="checkout"]) .inst__head span:nth-child(n+3), :where(body[data-view="checkout"]) .inst__mo, :where(body[data-view="checkout"]) .inst__total { text-align: right; }
  :where(body[data-view="checkout"]) .inst__row { border-top: 1px solid var(--line); cursor: pointer; font-size: 14px; transition: background .2s; }
  :where(body[data-view="checkout"]) .inst__row:has(input:checked) { background: color-mix(in srgb, var(--panel) 60%, var(--bg-elev)); }
  :where(body[data-view="checkout"]) .inst__name { display: grid; line-height: 1.3; }
  :where(body[data-view="checkout"]) .inst__note { font-size: 12px; color: var(--muted); }
  :where(body[data-view="checkout"]) .inst__mo { font-weight: 600; font-variant-numeric: tabular-nums; }
  :where(body[data-view="checkout"]) .inst__total { color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
  @media (max-width: 479px) { :where(body[data-view="checkout"]) .inst__head, :where(body[data-view="checkout"]) .inst__row { grid-template-columns: 20px minmax(0, 1fr) 76px 76px; gap: 8px; padding-inline: 12px; } }
  :where(body[data-view="checkout"]) .iban { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); font-family: ui-monospace, monospace; font-size: 13.5px; letter-spacing: .03em; flex-wrap: wrap; }
  :where(body[data-view="checkout"]) .iban__bank { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: 0; }
  :where(body[data-view="checkout"]) .iban__copy { font-family: var(--sans); }
  :where(body[data-view="checkout"]) .terms { align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
  :where(body[data-view="checkout"]) .terms input { margin-top: 1px; }
  :where(body[data-view="checkout"]) .terms button { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  :where(body[data-view="checkout"]) .terms-err { color: var(--accent); font-size: 12.5px; margin-top: -8px; }
  :where(body[data-view="checkout"]) .terms-err:empty { display: none; }
  :where(body[data-view="checkout"]) .co-shake { animation: checkout--shake .45s var(--ease); }
  @keyframes checkout--shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

  /* ---------- Özet ---------- */
  :where(body[data-view="checkout"]) .co-sum { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; }
  :where(body[data-view="checkout"]) .co-sum__toggle { display: none; }
  :where(body[data-view="checkout"]) .co-sum__body { padding: 18px 20px 20px; display: grid; gap: 14px; }
  :where(body[data-view="checkout"]) .checkout-summary:empty { min-height: 240px; }
  :where(body[data-view="checkout"]) .co-sum__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  :where(body[data-view="checkout"]) .co-sum__title { font-size: 16px; font-weight: 600; }
  :where(body[data-view="checkout"]) .co-sum__title .muted { font-size: 13px; font-weight: 400; }
  :where(body[data-view="checkout"]) .sitems { display: grid; gap: 12px; max-height: 280px; overflow-y: auto; padding: 6px 4px 2px 0; }
  :where(body[data-view="checkout"]) .sitem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
  :where(body[data-view="checkout"]) .sitem__img { position: relative; }
  :where(body[data-view="checkout"]) .sitem__img img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
  :where(body[data-view="checkout"]) .sitem__q { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
  :where(body[data-view="checkout"]) .sitem__txt { min-width: 0; display: grid; }
  :where(body[data-view="checkout"]) .sitem__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(body[data-view="checkout"]) .sitem__opts { font-size: 12px; color: var(--muted); }
  :where(body[data-view="checkout"]) .sitem__price { font-weight: 600; }
  :where(body[data-view="checkout"]) .srows { display: grid; gap: 8px; font-size: 13.5px; padding-top: 14px; border-top: 1px solid var(--line); }
  :where(body[data-view="checkout"]) .srow { display: flex; justify-content: space-between; gap: 16px; }
  :where(body[data-view="checkout"]) .srow > span:first-child { color: var(--text-2); }
  :where(body[data-view="checkout"]) .stotal { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; }
  :where(body[data-view="checkout"]) .stotal__vat { font-size: 12px; font-weight: 400; color: var(--muted); }
  :where(body[data-view="checkout"]) .stotal strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  :where(body[data-view="checkout"]) .spromo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  :where(body[data-view="checkout"]) .spromo .field__input { height: 48px; padding-top: 18px; text-transform: uppercase; }
  :where(body[data-view="checkout"]) .spromo .field__label { top: 14px; }
  :where(body[data-view="checkout"]) .spromo .field__input:focus + .field__label, :where(body[data-view="checkout"]) .spromo .field__input:not(:placeholder-shown) + .field__label { top: 6px; }
  :where(body[data-view="checkout"]) .spromo .btn { min-height: 48px; padding: 0 16px; }
  :where(body[data-view="checkout"]) .spromo .field__hint { grid-column: 1 / -1; margin-top: 0; }
  :where(body[data-view="checkout"]) .spromo.is-error .field__hint { color: var(--accent); }
  :where(body[data-view="checkout"]) .sapplied { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); font-size: 13px; }
  :where(body[data-view="checkout"]) .sapplied strong { font-weight: 600; }
  :where(body[data-view="checkout"]) .sapplied button { font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--text-2); min-height: 32px; }
  :where(body[data-view="checkout"]) .g8 { --g: 8px; }
  :where(body[data-view="checkout"]) .strust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
  :where(body[data-view="checkout"]) .strust li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--text-2); }

  @media (max-width: 1023px) {
    :where(body[data-view="checkout"]) .co-sum { position: sticky; top: 0; z-index: 30; margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-width: 0 0 1px; }
    :where(body[data-view="checkout"]) .co-sum__toggle { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 52px; padding: 0 var(--gutter); font-size: 14px; font-weight: 500; }
    :where(body[data-view="checkout"]) .co-sum__toggle strong { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
    :where(body[data-view="checkout"]) .co-sum__toggle .chev { transition: transform .35s var(--ease-out); }
    :where(body[data-view="checkout"]) .co-sum__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
    :where(body[data-view="checkout"]) .co-sum__body { display: none; max-height: min(70vh, 640px); overflow-y: auto; padding: 14px var(--gutter) 20px; border-top: 1px solid var(--line); }
    :where(body[data-view="checkout"]) .co-sum.is-open .co-sum__body { display: grid; animation: page-in .4s var(--ease-out); }
    :where(body[data-view="checkout"]) .co-sum__head { display: none; }
    :where(body[data-view="checkout"]) .cstep { scroll-margin-top: 64px; }
    :where(body[data-view="checkout"]) .co-prog { margin-top: 14px; }
    :where(body[data-view="checkout"]) .co__grid > .co-sum { order: -1; }
  }

  /* ---------- Mobil alt çubuk ---------- */
  :where(body[data-view="checkout"]) .co-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--bg-elev); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(20, 16, 12, .4); }
  :where(body[data-view="checkout"]) .co-cta__total { display: grid; line-height: 1.2; flex: none; }
  :where(body[data-view="checkout"]) .co-cta__total span { font-size: 12px; color: var(--muted); }
  :where(body[data-view="checkout"]) .co-cta__total strong { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  :where(body[data-view="checkout"]) .co-cta .btn { flex: 1; min-width: 0; padding: 0 14px; }
  @media (min-width: 1024px) { :where(body[data-view="checkout"]) .co-cta { display: none; } }
  @media (max-width: 1023px) { body:where([data-view="checkout"]).has-cta { padding-bottom: 76px; } }

  /* ---------- Yükleniyor ---------- */
  :where(body[data-view="checkout"]) .co-wait { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  :where(body[data-view="checkout"]) .co-wait.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
  :where(body[data-view="checkout"]) .co-wait__box { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
  :where(body[data-view="checkout"]) .co-wait__spin { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--text); animation: spin .9s linear infinite; }
  :where(body[data-view="checkout"]) .co-wait__text { font-size: 17px; font-weight: 600; }

  /* ---------- Onay ---------- */
  :where(body[data-view="checkout"]) .co-done { display: grid; gap: 16px; max-width: 980px; margin-inline: auto; animation: page-in .5s var(--ease-out) both; }
  :where(body[data-view="checkout"]) .co-done__hero { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(24px, 4vw, 40px) 20px; }
  :where(body[data-view="checkout"]) .co-done__check { width: 64px; height: 64px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; margin-bottom: 4px; animation: bump .6s var(--ease-out) .1s both; }
  :where(body[data-view="checkout"]) .co-done__check .ico { stroke-width: 2.2; }
  :where(body[data-view="checkout"]) .co-done__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.015em; outline: none; }
  :where(body[data-view="checkout"]) .co-done__lead { color: var(--text-2); font-size: 14.5px; }
  :where(body[data-view="checkout"]) .co-done__lead strong { color: var(--text); font-weight: 600; word-break: break-all; }
  :where(body[data-view="checkout"]) .co-done__no { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 6px; padding: 10px 16px; border-radius: 12px; background: var(--panel); font-size: 13.5px; }
  :where(body[data-view="checkout"]) .co-done__no strong { font-size: 15px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  :where(body[data-view="checkout"]) .co-done__grid { display: grid; gap: 16px; }
  @media (min-width: 860px) { :where(body[data-view="checkout"]) .co-done__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
  :where(body[data-view="checkout"]) .co-done__panel { padding: 18px 20px 20px; display: grid; gap: 14px; }
  :where(body[data-view="checkout"]) .co-done__h { font-size: 16px; font-weight: 600; }
  :where(body[data-view="checkout"]) .co-done__dl { display: grid; gap: 4px; font-size: 14px; }
  :where(body[data-view="checkout"]) .co-done__dl dt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="checkout"]) .co-done__dl dt:not(:first-child) { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
  :where(body[data-view="checkout"]) .co-done__dl dd { margin: 0; color: var(--text); line-height: 1.5; }
  :where(body[data-view="checkout"]) .co-done__items { display: grid; gap: 14px; }
  :where(body[data-view="checkout"]) .co-done__items .sitems { max-height: none; }
  :where(body[data-view="checkout"]) .co-done__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 4px; }
  @media (max-width: 559px) { :where(body[data-view="checkout"]) .co-done__ctas .btn { flex: 1 1 100%; } }

  /* ---------- Boş sepet ---------- */
  :where(body[data-view="checkout"]) .co-empty { display: grid; justify-items: center; text-align: center; gap: 10px; max-width: 640px; margin: 24px auto 0; padding: clamp(32px, 6vw, 56px) 20px; }
  :where(body[data-view="checkout"]) .co-empty__art { width: 84px; height: 84px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; margin-bottom: 6px; }
  :where(body[data-view="checkout"]) .co-empty__title { font-size: 19px; font-weight: 600; }
  :where(body[data-view="checkout"]) .co-empty__lead { color: var(--text-2); font-size: 14px; }
  :where(body[data-view="checkout"]) .co-empty__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

  /* ---------- Alt bilgi, sözleşme ---------- */
  :where(body[data-view="checkout"]) .co-ftr { border-top: 1px solid var(--line); padding-block: 18px; font-size: 12px; color: var(--muted); background: var(--bg-elev); }
  :where(body[data-view="checkout"]) .co-ftr .container { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
  :where(body[data-view="checkout"]) .co-ftr a:hover, :where(body[data-view="checkout"]) .co-ftr button:hover { color: var(--text); }
  :where(body[data-view="checkout"]) .contract__title { font-size: 18px; font-weight: 600; padding-right: 40px; }
  :where(body[data-view="checkout"]) .contract { font-size: 14px; color: var(--text-2); line-height: 1.65; display: grid; gap: 10px; }
  :where(body[data-view="checkout"]) .contract h3 { font-size: 14px; color: var(--text); font-weight: 600; margin-top: 4px; }


/* ======================================================================
   COLLECTION
   ====================================================================== */
/* Fakir düzeni: başlık paneli (küçük banner), kutular, ızgara ve çekmece ortak liste düzeninde (LISTING).
   Burada: lookbook rayı ve tam ekran görünüm. */
  :where(body[data-view="collection"]) .look { position: relative; display: block; min-width: 0; text-align: left; }
  :where(body[data-view="collection"]) .look__img { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--img-bg); }
  :where(body[data-view="collection"]) .look__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1.2s var(--ease-out); }
  @media (hover: hover) { :where(body[data-view="collection"]) .look:hover .look__img img { transform: scale(1.04); } }
  :where(body[data-view="collection"]) .look__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; }
  :where(body[data-view="collection"]) .look__cap strong { flex: none; font-weight: 600; }
  :where(body[data-view="collection"]) .look__cap span { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(body[data-view="collection"]) .look__zoom { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.1); opacity: 0; transition: opacity .25s; }
  :where(body[data-view="collection"]) .look:hover .look__zoom, :where(body[data-view="collection"]) .look:focus-visible .look__zoom { opacity: 1; }
  @media (hover: none) { :where(body[data-view="collection"]) .look__zoom { opacity: 1; } }
  :where(body[data-view="collection"]) #lookbook { scroll-margin-top: calc(var(--hdr-h) + 8px); }

  /* Lightbox */
  :where(body[data-view="collection"]) .lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); }
  :where(body[data-view="collection"]) .lb__name { color: rgba(255,255,255,.7); }
  :where(body[data-view="collection"]) .lb__count { font-size: 12px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); }
  :where(body[data-view="collection"]) .lb__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 var(--gutter); touch-action: pan-y; }
  :where(body[data-view="collection"]) .lb__stage img { position: absolute; top: 0; left: var(--gutter); width: calc(100% - var(--gutter) * 2); height: 100%; object-fit: contain; background: transparent; transition: opacity .35s var(--ease), transform .5s var(--ease-out); }
  :where(body[data-view="collection"]) .lb__stage img.is-swap { opacity: 0; transform: scale(.98); }
  :where(body[data-view="collection"]) .lb__nav { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: #fff; display: grid; place-items: center; background: rgba(0,0,0,.25); backdrop-filter: blur(8px); transition: background .25s, color .25s; }
  :where(body[data-view="collection"]) .lb__nav:hover { background: #fff; color: #111; }
  :where(body[data-view="collection"]) .lb__nav--prev { left: var(--gutter); } :where(body[data-view="collection"]) .lb__nav--next { right: var(--gutter); }
  @media (max-width: 767px) { :where(body[data-view="collection"]) .lb__nav { display: none; } }
  :where(body[data-view="collection"]) .lb__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); }
  :where(body[data-view="collection"]) .lb__foot .serif { font-size: clamp(20px, 2vw, 26px); }
  :where(body[data-view="collection"]) .lb__foot .link { color: #fff; }
  :where(body[data-view="collection"]) .lightbox .icon-btn { color: #fff; }
  :where(body[data-view="collection"]) .lightbox .icon-btn:hover { background: rgba(255,255,255,.12); }


/* ======================================================================
   DESIGN-SYSTEM
   Ortak başlık → yapışkan bölüm listesi + bileşen kartları (header, ürün kartı, bölüm başlığı, hizmet şeridi, sayfa başlığı…).
   ====================================================================== */
:where(body[data-view="design-system"]) .ds-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
:where(body[data-view="design-system"]) .ds-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
:where(body[data-view="design-system"]) .ds-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
:where(body[data-view="design-system"]) .ds-grid--tokens { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
:where(body[data-view="design-system"]) .ds-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
:where(body[data-view="design-system"]) .ds-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
:where(body[data-view="design-system"]) .ds-span-all { grid-column: 1 / -1; }
:where(body[data-view="design-system"]) .ds-panel { padding: 20px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="design-system"]) .ds-panel--dark { background: #1a1816; color: #fff; }
:where(body[data-view="design-system"]) .ds-panel--dark .ds-label { color: rgba(255,255,255,.6); }
:where(body[data-view="design-system"]) .principle { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="design-system"]) .principle strong { font-size: 15.5px; font-weight: 600; }

/* Renk */
:where(body[data-view="design-system"]) .tok { display: grid; gap: 6px; }
:where(body[data-view="design-system"]) .tok__sw { height: 72px; border-radius: 12px; background: var(--sw); box-shadow: inset 0 0 0 1px var(--line); }
:where(body[data-view="design-system"]) .tok__name { font-size: 13px; font-weight: 600; }
:where(body[data-view="design-system"]) .tok__val { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* Tipografi */
:where(body[data-view="design-system"]) .type-row { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
:where(body[data-view="design-system"]) .type-row:last-child { border-bottom: 0; }
@media (min-width: 768px) { :where(body[data-view="design-system"]) .type-row { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: 24px; } }
:where(body[data-view="design-system"]) .type-row > * { min-width: 0; }
:where(body[data-view="design-system"]) .type-row code { font-size: 11.5px; color: var(--muted); }
:where(body[data-view="design-system"]) .type-row__name { font-weight: 600; }
:where(body[data-view="design-system"]) .ds-type-page { font-family: var(--serif); font-size: clamp(30px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.02em; }
:where(body[data-view="design-system"]) .ds-range-val { color: var(--text); font-weight: 600; }
:where(body[data-view="design-system"]) .ds-switch { --g: 12px; }

/* Header önizlemesi: gerçek header sınıfları, yapışkan değil */
:where(body[data-view="design-system"]) .ds-hdr { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
:where(body[data-view="design-system"]) .ds-hdr .hdr { position: relative; z-index: auto; border-bottom: 0; }
:where(body[data-view="design-system"]) .ds-hdr .hdr__top { padding-inline: 16px; }
:where(body[data-view="design-system"]) .ds-hdr .hdr__cats-in { padding-inline: 12px; }
@media (min-width: 1024px) { :where(body[data-view="design-system"]) .ds-hdr .hdr__top { gap: 20px; } }
:where(body[data-view="design-system"]) .ds-crumbs li + li::before { content: '›'; }
:where(body[data-view="design-system"]) .bnav-demo { position: relative; left: auto; right: auto; bottom: auto; z-index: auto; display: grid; max-width: 420px; height: 62px; padding-bottom: 0; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
:where(body[data-view="design-system"]) .ds-trust { margin-top: 0; }
:where(body[data-view="design-system"]) .ds-rail .rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
@media (min-width: 1200px) { :where(body[data-view="design-system"]) .ds-rail .rail { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }

/* Durumlar */
:where(body[data-view="design-system"]) .ds-states { display: grid; gap: 12px; }
@media (min-width: 1100px) { :where(body[data-view="design-system"]) .ds-states { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:where(body[data-view="design-system"]) .state-card { display: grid; place-items: center; min-height: 300px; padding: 16px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="design-system"]) .state-card .empty { padding: 24px 8px; }
:where(body[data-view="design-system"]) .state-card .empty__art { background: var(--bg-elev); }
:where(body[data-view="design-system"]) .state-card--stretch { place-items: stretch; }
:where(body[data-view="design-system"]) .ds-skel-grid { grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
:where(body[data-view="design-system"]) .ds-skel { --g: 10px; }
:where(body[data-view="design-system"]) .ds-modal-actions { --g: 12px; justify-content: flex-end; }

/* ======================================================================
   EDITORIAL
   Ortak başlık (960px) → kapak görseli (en fazla 360px) → 720px metin sütunu → hikâyedeki ürünler (ray) → yazar → diğer hikâyeler.
   ====================================================================== */
/* Okuma çubuğu: sabit header'ın hemen altında */
:where(body[data-view="editorial"]) .rprog { position: fixed; left: 0; right: 0; top: calc(var(--hdr-h) - 1px); z-index: 61; height: 3px; pointer-events: none; }
:where(body[data-view="editorial"]) .rprog span { display: block; height: 100%; width: 100%; background: var(--text); transform-origin: left; transform: scaleX(0); }
:where(body[data-view="editorial"]) .ewrap { max-width: 960px; }

/* Başlık */
:where(body[data-view="editorial"]) .ahead__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; width: 100%; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
:where(body[data-view="editorial"]) .byline { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
:where(body[data-view="editorial"]) .byline__name { font-weight: 600; color: var(--text); }
:where(body[data-view="editorial"]) .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); font-family: var(--serif); font-size: 17px; color: var(--text); flex: none; }
:where(body[data-view="editorial"]) .share { display: flex; gap: 6px; }
:where(body[data-view="editorial"]) .share .icon-btn { width: 42px; height: 42px; background: var(--bg-elev); border: 1px solid var(--line); }

/* Kapak */
:where(body[data-view="editorial"]) .ecover { margin-top: 12px; }
:where(body[data-view="editorial"]) .ecover__img { height: clamp(200px, 30vw, 360px); border-radius: 18px; overflow: hidden; background: var(--img-bg); }
:where(body[data-view="editorial"]) .ecover__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
:where(body[data-view="editorial"]) .ecover figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Metin */
:where(body[data-view="editorial"]) .prose { padding-block: clamp(24px, 3.4vw, 44px) clamp(12px, 2vw, 24px); }
:where(body[data-view="editorial"]) .prose > * { max-width: 720px; margin-inline: auto; }
:where(body[data-view="editorial"]) .prose p { font-size: 17px; line-height: 1.75; color: var(--text-2); margin-top: 1.1em; }
:where(body[data-view="editorial"]) .prose p strong { color: var(--text); font-weight: 600; }
:where(body[data-view="editorial"]) .prose p a:not(.btn):not(.link) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--text); }
:where(body[data-view="editorial"]) .prose .lede { margin-top: 0; font-size: 19px; line-height: 1.65; color: var(--text); }
:where(body[data-view="editorial"]) .prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.01em; margin-top: clamp(32px, 4vw, 48px); scroll-margin-top: calc(var(--hdr-h) + 24px); }
:where(body[data-view="editorial"]) .prose h2 .no { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
:where(body[data-view="editorial"]) .prose h2 + p { margin-top: 12px; }
:where(body[data-view="editorial"]) .pull { margin-block: 32px !important; padding: 24px 28px; border-radius: 16px; background: var(--panel); border-left: 3px solid var(--text); }
:where(body[data-view="editorial"]) .pull blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2vw, 26px); line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
:where(body[data-view="editorial"]) .pull figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
:where(body[data-view="editorial"]) .ipair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block: 32px !important; }
@media (min-width: 600px) { :where(body[data-view="editorial"]) .ipair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:where(body[data-view="editorial"]) .ipair .rounded { aspect-ratio: 4 / 4.4; border-radius: 14px; }
:where(body[data-view="editorial"]) .ipair img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-view="editorial"]) .ipair figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Metin içi ürün */
:where(body[data-view="editorial"]) .shopit { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 24px !important; padding: 10px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
:where(body[data-view="editorial"]) .shopit__img { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--img-bg); }
:where(body[data-view="editorial"]) .shopit__img img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-view="editorial"]) .shopit__info { min-width: 0; display: grid; gap: 2px; }
:where(body[data-view="editorial"]) .shopit__brand { font-size: 11.5px; font-weight: 500; color: var(--muted); }
:where(body[data-view="editorial"]) .shopit__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="editorial"]) .shopit__name:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(body[data-view="editorial"]) .shopit .price strong, :where(body[data-view="editorial"]) .shopit .price { font-weight: 600; }
:where(body[data-view="editorial"]) .shopit__acts { display: flex; align-items: center; gap: 6px; }
:where(body[data-view="editorial"]) .shopit__acts .icon-btn { width: 38px; height: 38px; border: 1px solid var(--line-strong); }
@media (max-width: 479px) { :where(body[data-view="editorial"]) .shopit { grid-template-columns: 60px minmax(0, 1fr); } :where(body[data-view="editorial"]) .shopit__acts { grid-column: 2; } }

/* Aileler, piramit, günler, çağrı */
:where(body[data-view="editorial"]) .fams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px !important; }
@media (min-width: 768px) { :where(body[data-view="editorial"]) .fams { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:where(body[data-view="editorial"]) .fam { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="editorial"]) .fam strong { font-size: 15px; font-weight: 600; }
:where(body[data-view="editorial"]) .fam span { font-size: 13px; line-height: 1.5; color: var(--text-2); }
:where(body[data-view="editorial"]) .pyr { display: grid; gap: 8px; margin-top: 24px !important; }
:where(body[data-view="editorial"]) .pyr__row { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--panel); }
:where(body[data-view="editorial"]) .pyr__row b { font-size: 15px; font-weight: 600; }
:where(body[data-view="editorial"]) .pyr__row em { font-style: normal; font-size: 12px; color: var(--muted); }
:where(body[data-view="editorial"]) .pyr__row span { font-size: 13.5px; color: var(--text-2); }
:where(body[data-view="editorial"]) .prose .pyr__note { margin-top: 4px; text-align: right; }
:where(body[data-view="editorial"]) .days { margin-top: 20px !important; border-top: 1px solid var(--line); }
:where(body[data-view="editorial"]) .days li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
:where(body[data-view="editorial"]) .days li > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px; }
:where(body[data-view="editorial"]) .days strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
:where(body[data-view="editorial"]) .prose .days p { margin: 0; font-size: 15px; line-height: 1.65; }
:where(body[data-view="editorial"]) .acta { display: grid; gap: 10px; justify-items: start; margin-top: 32px !important; padding: clamp(20px, 3vw, 28px); border-radius: 18px; background: var(--panel); }
:where(body[data-view="editorial"]) .acta__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); }
:where(body[data-view="editorial"]) .acta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 26px); line-height: 1.15; }
:where(body[data-view="editorial"]) .prose .acta__text { margin: 0 0 6px; font-size: 15px; }

/* Yazar */
:where(body[data-view="editorial"]) .author { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 720px; margin-inline: auto; }
:where(body[data-view="editorial"]) .author .avatar { width: 56px; height: 56px; font-size: 22px; }
:where(body[data-view="editorial"]) .author__text { display: grid; gap: 4px; }
:where(body[data-view="editorial"]) .author__name { font-size: 18px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="editorial"]) .author__bio { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
:where(body[data-view="editorial"]) .author__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
:where(body[data-view="editorial"]) .author__share { display: inline-flex; align-items: center; gap: 10px; }

/* ======================================================================
   FRAGRANCE-FINDER
   Ortak başlık → ortalanmış kart sihirbazı (.wiz, ortak bölümde) → sonuç: profil paneli + uyum yüzdeli ürün kartları.
   ====================================================================== */
:where(body[data-view="fragrance-finder"]) .ff-dots { display: flex; gap: 4px; height: 38px; align-items: center; }
:where(body[data-view="fragrance-finder"]) .ff-dots i { width: 22px; height: 5px; border-radius: 3px; background: currentColor; opacity: .2; }
:where(body[data-view="fragrance-finder"]) .ff-dots i.on { opacity: 1; }

/* Bütçe */
:where(body[data-view="fragrance-finder"]) .ff-budget { margin-top: clamp(18px, 2.4vw, 28px); max-width: 560px; }
:where(body[data-view="fragrance-finder"]) .ff-budget__val { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:where(body[data-view="fragrance-finder"]) .ff-budget .range { margin-top: 20px; height: 4px; background: linear-gradient(to right, var(--text) var(--fill, 100%), var(--line-strong) var(--fill, 100%)); }
:where(body[data-view="fragrance-finder"]) .ff-budget .range::-webkit-slider-thumb { width: 24px; height: 24px; }
:where(body[data-view="fragrance-finder"]) .ff-budget__scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }
:where(body[data-view="fragrance-finder"]) .ff-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
:where(body[data-view="fragrance-finder"]) .ff-presets .chip { min-height: 42px; }

/* Sonuç */
:where(body[data-view="fragrance-finder"]) .ffr__profile { display: grid; gap: 20px; }
@media (min-width: 900px) { :where(body[data-view="fragrance-finder"]) .ffr__profile { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } }
:where(body[data-view="fragrance-finder"]) .ffr__who { display: grid; gap: 8px; justify-items: start; }
:where(body[data-view="fragrance-finder"]) .ffr__name { outline: none; }
:where(body[data-view="fragrance-finder"]) .ffr__name .italic { margin-left: .2em; }
:where(body[data-view="fragrance-finder"]) .notes { display: grid; gap: 6px; margin-top: 6px; width: 100%; }
:where(body[data-view="fragrance-finder"]) .notes > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--text-2); }
:where(body[data-view="fragrance-finder"]) .notes__h { font-weight: 600; color: var(--text); }
:where(body[data-view="fragrance-finder"]) .chart { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--bg-elev); }
:where(body[data-view="fragrance-finder"]) .chart__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 13px; }
:where(body[data-view="fragrance-finder"]) .chart__label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
:where(body[data-view="fragrance-finder"]) .chart__row > span:last-child { text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
:where(body[data-view="fragrance-finder"]) .chart__track { height: 8px; border-radius: 4px; background: var(--panel); overflow: hidden; }
:where(body[data-view="fragrance-finder"]) .chart__track i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--warm-gray); transition: width 1.1s var(--ease-out); }
:where(body[data-view="fragrance-finder"]) .chart__row.is-pick .chart__label { font-weight: 600; }
:where(body[data-view="fragrance-finder"]) .chart__row.is-pick .chart__track i { background: var(--text); }
:where(body[data-view="fragrance-finder"]) .ffr.is-drawn .chart__track i { width: var(--w); }
:where(body[data-view="fragrance-finder"]) .ffr__ai { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--panel); font-size: 13px; color: var(--text-2); }
:where(body[data-view="fragrance-finder"]) .ffr__ai strong { font-weight: 600; color: var(--text); }
:where(body[data-view="fragrance-finder"]) .ffr__ai .ico { flex: none; margin-top: 1px; }

/* ======================================================================
   HELP
   Fakir düzeni: açık panelde arama, ikonlu konu kutuları, beyaz kartlarda sipariş takibi / iade / kargo / bakım / S.S.S.,
   iletişim kartları. Çapalar header yüksekliği kadar payla açılır.
   ====================================================================== */
/* Inputs ≥16px → no iOS focus zoom */
  :where(body[data-view="help"]) #main .field__input, :where(body[data-view="help"]) #main select, :where(body[data-view="help"]) #main textarea, :where(body[data-view="help"]) #main input { font-size: 16px; }
  :where(body[data-view="help"]) .anchor { scroll-margin-top: calc(var(--hdr-h) + 16px); }
  :where(body[data-view="help"]) .hc { padding-block: 14px clamp(48px, 6vw, 80px); }

  /* ---------- Arama paneli ---------- */
  :where(body[data-view="help"]) .hhero { margin-top: 14px; padding: clamp(20px, 3vw, 36px); border-radius: 18px; background: var(--panel); }
  :where(body[data-view="help"]) .hhero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.015em; }
  :where(body[data-view="help"]) .hhero__lead { margin-top: 6px; font-size: 14.5px; color: var(--text-2); }
  :where(body[data-view="help"]) .hsearch { margin-top: 16px; max-width: 760px; }
  :where(body[data-view="help"]) .hsearch__box { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 6px 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="help"]) .hsearch__box > .ico { color: var(--muted); }
  :where(body[data-view="help"]) .hsearch__box:focus-within { border-color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 8%, transparent); }
  :where(body[data-view="help"]) .hsearch__box input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; }
  :where(body[data-view="help"]) .hsearch__box input::-webkit-search-cancel-button { display: none; }
  :where(body[data-view="help"]) .hsearch__clear { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
  :where(body[data-view="help"]) .hsearch__clear:hover { background: var(--panel); color: var(--text); }
  :where(body[data-view="help"]) .hsearch__go { flex: none; min-height: 42px; padding: 0 18px; border-radius: 9px; }
  :where(body[data-view="help"]) .hpop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
  :where(body[data-view="help"]) .hpop .chip { height: 34px; padding: 0 14px; font-size: 12.5px; background: var(--bg-elev); border-color: var(--line); }
  :where(body[data-view="help"]) .hpop .chip:hover { border-color: var(--text); }
  :where(body[data-view="help"]) .hres { max-width: 760px; margin-top: 14px; padding: 6px 16px 10px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
  :where(body[data-view="help"]) .hres__meta { padding: 8px 0; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
  :where(body[data-view="help"]) .hres__empty { display: grid; justify-items: start; gap: 8px; padding: 16px 0 6px; }
  :where(body[data-view="help"]) .hres__empty .empty__title { font-family: var(--sans); font-size: 15px; font-weight: 600; }
  :where(body[data-view="help"]) .hres__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  :where(body[data-view="help"]) .hres .acc:last-child { border-bottom: 0; }
  :where(body[data-view="help"]) mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
  :where(body[data-view="help"]) .hstatus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 16px; font-size: 13px; color: var(--text-2); }
  :where(body[data-view="help"]) .hstatus > span { display: inline-flex; align-items: center; gap: 6px; }
  :where(body[data-view="help"]) .hstatus .ico { color: var(--muted); }
  :where(body[data-view="help"]) .hstatus strong { font-weight: 600; color: var(--text); }
  :where(body[data-view="help"]) .live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--success); }
  :where(body[data-view="help"]) .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: help--live 2s var(--ease) infinite; }
  @keyframes help--live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
  :where(body[data-view="help"]) .live.is-off { color: var(--muted); }
  :where(body[data-view="help"]) .live.is-off::before { animation: none; }

  /* ---------- Konu kutuları ---------- */
  :where(body[data-view="help"]) .hsec2 { margin-top: 20px; }
  :where(body[data-view="help"]) .topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 900px) { :where(body[data-view="help"]) .topics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
  :where(body[data-view="help"]) .topic { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; padding: 14px 8px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="help"]) .topic:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
  :where(body[data-view="help"]) .topic__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); margin-bottom: 4px; transition: background .2s, color .2s; }
  :where(body[data-view="help"]) .topic:hover .topic__ico { background: var(--text); color: var(--bg); }
  :where(body[data-view="help"]) .topic__title { font-size: 14px; font-weight: 600; line-height: 1.25; }
  :where(body[data-view="help"]) .topic__text { font-size: 12px; color: var(--muted); line-height: 1.35; }
  @media (max-width: 479px) { :where(body[data-view="help"]) .topic__text { display: none; } :where(body[data-view="help"]) .topic { padding: 12px 6px; } :where(body[data-view="help"]) .topic__title { font-size: 13px; } }

  /* ---------- Kartlar ---------- */
  :where(body[data-view="help"]) .hgrid { display: grid; gap: 16px; margin-top: 16px; }
  :where(body[data-view="help"]) .hgrid > * { min-width: 0; }
  @media (min-width: 1024px) { :where(body[data-view="help"]) .hgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } :where(body[data-view="help"]) .hgrid--contact { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
  :where(body[data-view="help"]) .hcard { min-width: 0; padding: clamp(16px, 2.2vw, 24px); border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
  :where(body[data-view="help"]) .hc > .hcard { margin-top: 16px; }
  :where(body[data-view="help"]) .hcard__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  :where(body[data-view="help"]) .hcard__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
  :where(body[data-view="help"]) .hcard__title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; }
  :where(body[data-view="help"]) .hcard__sub { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
  :where(body[data-view="help"]) .hcard__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
  :where(body[data-view="help"]) .hcard__note .ico { margin-top: 2px; color: var(--muted); }
  :where(body[data-view="help"]) .form { display: grid; gap: 12px; }
  :where(body[data-view="help"]) .form__row { display: grid; gap: 12px; }
  @media (min-width: 640px) { :where(body[data-view="help"]) .form__row { grid-template-columns: 1fr 1fr; } }
  :where(body[data-view="help"]) .form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
  :where(body[data-view="help"]) .form__title { font-size: 16px; font-weight: 600; }
  :where(body[data-view="help"]) .checks { display: grid; gap: 10px; }
  :where(body[data-view="help"]) .checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13.5px; color: var(--text-2); }
  :where(body[data-view="help"]) .checks li .ico { margin-top: 2px; color: var(--success); }
  :where(body[data-view="help"]) .checks li.no .ico { color: var(--accent); }
  :where(body[data-view="help"]) .linklike { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  :where(body[data-view="help"]) .hacc { border-bottom: 0; border-top: 1px solid var(--line); }
  :where(body[data-view="help"]) .hcard > .hacc { margin-top: 16px; }
  :where(body[data-view="help"]) .hacc + .hacc { margin-top: 0; }
  :where(body[data-view="help"]) .hacc summary { padding: 14px 0; font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  :where(body[data-view="help"]) .hacc summary .ico { width: 18px; height: 18px; }
  :where(body[data-view="help"]) .hacc .acc__body { padding-bottom: 16px; font-size: 13.5px; }
  :where(body[data-view="help"]) .haccs { margin-top: 16px; }

  /* ---------- Sipariş takibi ---------- */
  :where(body[data-view="help"]) .tres { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); animation: page-in .45s var(--ease-out) both; }
  :where(body[data-view="help"]) .tres__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  :where(body[data-view="help"]) .tres__no { margin-top: 2px; }
  :where(body[data-view="help"]) .tres__cargo { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  :where(body[data-view="help"]) .tres__cargo .topic__ico { width: 40px; height: 40px; margin: 0; }
  :where(body[data-view="help"]) .tres__cargo strong, :where(body[data-view="help"]) .terr strong { font-weight: 600; }
  :where(body[data-view="help"]) .tl { display: grid; margin-top: 16px; }
  :where(body[data-view="help"]) .tl__step { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding-bottom: 16px; font-size: 14px; }
  :where(body[data-view="help"]) .tl__step:last-child { padding-bottom: 0; }
  :where(body[data-view="help"]) .tl__step:not(:last-child)::before { content: ''; position: absolute; left: 11.5px; top: 18px; bottom: -2px; width: 1px; background: var(--line-strong); }
  :where(body[data-view="help"]) .tl__step.is-filled::before { background: var(--text); }
  :where(body[data-view="help"]) .tl__dot { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 4px; justify-self: center; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg-elev); }
  :where(body[data-view="help"]) .tl__step.is-done .tl__dot { background: var(--text); border-color: var(--text); }
  :where(body[data-view="help"]) .tl__step.is-current .tl__dot { box-shadow: 0 0 0 5px color-mix(in srgb, var(--text) 12%, transparent); }
  :where(body[data-view="help"]) .tl__step:not(.is-done) .tl__label { color: var(--muted); }
  :where(body[data-view="help"]) .tl__date { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  :where(body[data-view="help"]) .tres__items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  :where(body[data-view="help"]) .tres__item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border-radius: 12px; background: var(--panel); font-size: 13px; }
  :where(body[data-view="help"]) .tres__item img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
  :where(body[data-view="help"]) .tres__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
  :where(body[data-view="help"]) .terr { display: grid; grid-template-columns: 20px 1fr; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 13.5px; animation: page-in .4s var(--ease-out) both; }
  :where(body[data-view="help"]) .terr .ico { color: var(--accent); }

  /* ---------- İade ---------- */
  :where(body[data-view="help"]) .steps { display: grid; gap: 8px; margin-bottom: 16px; }
  @media (min-width: 640px) and (max-width: 1023.98px) { :where(body[data-view="help"]) .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  :where(body[data-view="help"]) .step { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border-radius: 12px; background: var(--panel); }
  :where(body[data-view="help"]) .step__n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; }
  :where(body[data-view="help"]) .step h3 { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  :where(body[data-view="help"]) .step p { margin-top: 2px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
  :where(body[data-view="help"]) #return-form { padding-top: 16px; border-top: 1px solid var(--line); }
  :where(body[data-view="help"]) .recent-orders { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(body[data-view="help"]) .recent-orders__label { align-self: center; }
  :where(body[data-view="help"]) .recent-orders .chip { height: 34px; padding: 0 12px; font-size: 12.5px; }
  :where(body[data-view="help"]) .radios { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 2px; }
  :where(body[data-view="help"]) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  :where(body[data-view="help"]) legend { margin-bottom: 8px; padding: 0; font-size: 13px; color: var(--muted); }
  :where(body[data-view="help"]) .rsuccess, :where(body[data-view="help"]) .csuccess { display: grid; justify-items: start; gap: 12px; animation: page-in .45s var(--ease-out) both; }
  :where(body[data-view="help"]) .rsuccess__check { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
  :where(body[data-view="help"]) .rsuccess__summary { color: var(--text-2); }
  :where(body[data-view="help"]) .rcode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-strong); }
  :where(body[data-view="help"]) .rcode strong { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
  :where(body[data-view="help"]) .help-ref { color: var(--text); font-weight: 600; }

  /* ---------- Kargo ---------- */
  :where(body[data-view="help"]) .ship { display: grid; gap: 16px; }
  @media (min-width: 1024px) { :where(body[data-view="help"]) .ship { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
  :where(body[data-view="help"]) .methods { display: grid; gap: 10px; }
  @media (min-width: 640px) { :where(body[data-view="help"]) .methods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  :where(body[data-view="help"]) .method { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
  :where(body[data-view="help"]) .method__eyebrow { font-size: 11.5px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="help"]) .method__name { font-size: 14.5px; font-weight: 600; }
  :where(body[data-view="help"]) .method__price { font-size: 19px; font-weight: 700; }
  :where(body[data-view="help"]) .method__text { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
  :where(body[data-view="help"]) .method__cut { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
  :where(body[data-view="help"]) .est { display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--panel); }
  :where(body[data-view="help"]) .est__title { font-size: 14.5px; font-weight: 600; }
  :where(body[data-view="help"]) .est .seg { display: flex; width: 100%; background: var(--bg-elev); }
  :where(body[data-view="help"]) .est .seg button { flex: 1; height: 36px; padding: 0 6px; }
  :where(body[data-view="help"]) .est .seg button.is-active { background: var(--text); color: var(--bg); }
  :where(body[data-view="help"]) .est .seg button[disabled] { opacity: .4; pointer-events: none; }
  :where(body[data-view="help"]) .est__out { display: grid; gap: 2px; min-height: 86px; padding: 12px 14px; border-radius: 10px; background: var(--bg-elev); }
  :where(body[data-view="help"]) .est__date { font-size: 17px; font-weight: 700; line-height: 1.3; }
  :where(body[data-view="help"]) .tscroll { overflow-x: auto; }
  :where(body[data-view="help"]) .dtable { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13.5px; }
  :where(body[data-view="help"]) .dtable th { padding: 8px 12px 8px 0; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line-strong); }
  :where(body[data-view="help"]) .dtable td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
  :where(body[data-view="help"]) .dtable td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
  :where(body[data-view="help"]) .cutoffs { display: grid; }
  :where(body[data-view="help"]) .cutoffs li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  :where(body[data-view="help"]) .cutoffs li:first-child { padding-top: 0; }
  :where(body[data-view="help"]) .cutoffs strong { font-size: 15px; font-weight: 700; color: var(--text); }

  /* ---------- Ürün bakımı ---------- */
  :where(body[data-view="help"]) .cares { display: grid; gap: 16px; }
  @media (min-width: 900px) { :where(body[data-view="help"]) .cares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  :where(body[data-view="help"]) .care { min-width: 0; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
  :where(body[data-view="help"]) .care__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
  :where(body[data-view="help"]) .care__media img { width: 100%; height: 100%; object-fit: cover; }
  :where(body[data-view="help"]) .care__tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 6px; background: var(--bg-elev); color: var(--text); font-size: 11.5px; font-weight: 600; }
  :where(body[data-view="help"]) .care__body { display: grid; gap: 8px; padding: 16px; }
  :where(body[data-view="help"]) .care__title { font-size: 16px; font-weight: 600; }
  :where(body[data-view="help"]) .care__lead { font-size: 13.5px; color: var(--text-2); }
  :where(body[data-view="help"]) .care .shead__all { justify-self: start; margin-top: 4px; }
  :where(body[data-view="help"]) .tips { display: grid; }
  :where(body[data-view="help"]) .tips li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
  :where(body[data-view="help"]) .tips li > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); font-size: 11.5px; font-weight: 700; }
  :where(body[data-view="help"]) .tips strong { display: block; font-size: 13.5px; font-weight: 600; }
  :where(body[data-view="help"]) .tips p { font-size: 12.5px; color: var(--text-2); }

  /* ---------- S.S.S. ---------- */
  :where(body[data-view="help"]) .faq-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(body[data-view="help"]) .faq-nav .chip { height: 36px; padding: 0 14px; }
  :where(body[data-view="help"]) .faq-group { margin-top: 20px; }
  :where(body[data-view="help"]) .faq-group__title { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); font-size: 14.5px; font-weight: 600; }
  :where(body[data-view="help"]) .faq .acc summary, :where(body[data-view="help"]) .hres .acc summary { padding: 14px 0; font-size: 14.5px; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-transform: none; }
  :where(body[data-view="help"]) .faq .acc summary .ico, :where(body[data-view="help"]) .hres .acc summary .ico { width: 18px; height: 18px; }
  :where(body[data-view="help"]) .faq .acc summary:hover, :where(body[data-view="help"]) .hres .acc summary:hover { color: var(--text-2); }
  :where(body[data-view="help"]) .faq .acc__body, :where(body[data-view="help"]) .hres .acc__body { padding-bottom: 16px; font-size: 13.5px; }
  :where(body[data-view="help"]) .faq .acc__body a, :where(body[data-view="help"]) .hres .acc__body a { text-decoration: underline; text-underline-offset: 3px; }
  :where(body[data-view="help"]) .acc__group { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="help"]) .acc.is-flash { animation: help--flash 1.6s var(--ease-out); }
  @keyframes help--flash { 0%, 30% { background: color-mix(in srgb, var(--text) 6%, transparent); } 100% { background: transparent; } }

  /* ---------- İletişim ---------- */
  :where(body[data-view="help"]) .hsec2.anchor { margin-top: 28px; }
  :where(body[data-view="help"]) .channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 1024px) { :where(body[data-view="help"]) .channels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
  :where(body[data-view="help"]) .channel { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="help"]) a.channel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
  :where(body[data-view="help"]) .channel__ico { width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); }
  :where(body[data-view="help"]) .channel strong { font-size: 14.5px; font-weight: 600; }
  :where(body[data-view="help"]) .channel__v { font-size: 13.5px; overflow-wrap: anywhere; }
  :where(body[data-view="help"]) .channel__m { font-size: 12px; color: var(--muted); }
  :where(body[data-view="help"]) .store { padding: 0; overflow: hidden; }
  :where(body[data-view="help"]) .store__img { aspect-ratio: 16 / 7; overflow: hidden; }
  :where(body[data-view="help"]) .store__img img { width: 100%; height: 100%; object-fit: cover; }
  :where(body[data-view="help"]) .store__body { display: grid; gap: 10px; padding: 16px; }
  :where(body[data-view="help"]) .store__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  :where(body[data-view="help"]) .help-store-addr { color: var(--text-2); }
  :where(body[data-view="help"]) .hours { display: grid; font-size: 13px; }
  :where(body[data-view="help"]) .hours div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
  :where(body[data-view="help"]) .hours div.is-today { color: var(--text); font-weight: 600; }
  :where(body[data-view="help"]) .counter { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: var(--muted); pointer-events: none; }

  /* ---------- Razor dönüşümü: satır içi stillerin karşılıkları ---------- */
  :where(body[data-view="help"]) .help-search.is-swapping, :where(body[data-view="help"]) .help-track-out.is-swapping { opacity: .45; transition: opacity .2s; }


/* ======================================================================
   HOME (Fakir düzeni)
   Slider + hizmet şeridi → kategori kutuları → raylar → kategori rafları (banner + ray) → bannerlar → bülten.
   ====================================================================== */
/* ---------- Slider ---------- */
.hslider-wrap { padding-top: 12px; }
@media (min-width: 1024px) { .hslider-wrap { padding-top: 20px; } }
.hslider { position: relative; height: clamp(440px, 118vw, 560px); border-radius: 18px; overflow: hidden; background: #1A1816; color: #fff; isolation: isolate; }
@media (min-width: 768px) { .hslider { height: clamp(380px, 38vw, 540px); border-radius: 22px; } }
.hslide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s .8s; }
.hslide.is-active { opacity: 1; visibility: visible; transition: opacity .8s var(--ease); }
.hslide__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); background: none; transform: scale(1.02); }
.hslide.is-active .hslide__img { animation: hslide-zoom 9s var(--ease-out) both; }
@keyframes hslide-zoom { from { transform: scale(1.08); } to { transform: scale(1.02); } }
.hslide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 11, 10, .82) 0%, rgba(12, 11, 10, .35) 50%, rgba(12, 11, 10, .05) 80%); }
@media (min-width: 768px) { .hslide::after { background: linear-gradient(90deg, rgba(12, 11, 10, .78) 0%, rgba(12, 11, 10, .45) 40%, rgba(12, 11, 10, 0) 72%); } }
.hslide__body { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 48px; display: grid; gap: 12px; justify-items: start; }
@media (min-width: 768px) { .hslide__body { left: clamp(40px, 6vw, 96px); right: auto; bottom: auto; top: 50%; transform: translateY(-50%); max-width: 500px; gap: 14px; } }
.hslide__eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.hslide__title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.hslide__text { font-size: 14.5px; line-height: 1.55; opacity: .86; max-width: 44ch; }
.hslide__feats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 2px; }
.hslide__feats li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
.hslide__feats li > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.hslide__cta { margin-top: 6px; }
@media (max-width: 479px) { .hslide__text { display: none; } }
.hslider__arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: var(--bg-elev); color: var(--text); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); display: none; place-items: center; transition: transform .2s; }
.hslider__arrow:hover { transform: scale(1.06); }
.hslider__arrow--prev { left: 16px; }
.hslider__arrow--next { right: 16px; }
@media (min-width: 768px) { .hslider__arrow { display: grid; } }
.hslider__dots { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; }
.hslider__dots button { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .5); transition: width .35s var(--ease-out), background .25s; }
.hslider__dots button.is-active { width: 26px; background: #fff; }

/* ---------- Hizmet şeridi ---------- */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--panel); }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px; padding: 18px 8px; } .trust li { padding-inline: 20px; } .trust li + li { border-left: 1px solid var(--line-strong); } }
.trust li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trust__ico { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-elev); display: grid; place-items: center; flex: none; }
.trust strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.trust small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 479px) { .trust__ico { width: 36px; height: 36px; } .trust__ico .ico { width: 18px; height: 18px; } .trust li { gap: 8px; } }

/* ---------- Kategori kutuları ---------- */
.ctiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.ctile { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: var(--panel); overflow: hidden; transition: box-shadow .25s, transform .25s var(--ease-out); }
.ctile:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.ctile__img { order: -1; width: auto; aspect-ratio: 4 / 3; margin: 8px 8px 0; border-radius: 12px; object-fit: cover; }
.ctile__text { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 14px; flex: 1; }
.ctile__text strong { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.1; }
.ctile__text small { font-size: 12px; color: var(--muted); }
.ctile__go { display: none; }
.ctile__count { position: absolute; top: 16px; right: 16px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--bg-elev); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
@media (min-width: 768px) {
  .ctile { flex-direction: row; height: clamp(168px, 14vw, 210px); }
  .ctile__img { order: 0; width: 46%; height: auto; aspect-ratio: auto; margin: 10px 10px 10px 0; border-radius: 14px; min-height: 0; }
  .ctile__text { padding: 22px 20px; gap: 6px; }
  .ctile__text strong { font-size: clamp(21px, 1.9vw, 28px); }
  .ctile__text small { font-size: 13px; }
  .ctile__go { display: grid; place-items: center; margin-top: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-elev); transition: background .2s, color .2s; }
  .ctile:hover .ctile__go { background: var(--text); color: var(--bg); }
  .ctile__count { top: 20px; right: 20px; }
}

/* ---------- Kategori rafı: banner + ray ---------- */
.shelf__banner { position: relative; display: block; height: clamp(190px, 26vw, 340px); margin-bottom: 20px; border-radius: 20px; overflow: hidden; color: #fff; isolation: isolate; background: #1A1816; }
.shelf__banner img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.2s var(--ease-out); }
.shelf__banner:hover img { transform: scale(1.03); }
.shelf__banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 10, .74) 0%, rgba(12, 11, 10, .3) 50%, rgba(12, 11, 10, 0) 78%); }
.shelf__text { position: absolute; z-index: 1; left: clamp(20px, 5vw, 72px); right: 20px; top: 50%; transform: translateY(-50%); max-width: 440px; display: grid; gap: 10px; justify-items: start; }
.shelf__title { font-family: var(--serif); font-size: clamp(26px, 3vw, 44px); line-height: 1.04; letter-spacing: -.02em; }
.shelf__lead { font-size: 14px; line-height: 1.5; opacity: .86; max-width: 38ch; }
@media (max-width: 479px) { .shelf__lead { display: none; } }

/* ---------- Kampanya bannerları ---------- */
.promos { display: grid; gap: 12px; }
@media (min-width: 768px) { .promos { grid-template-columns: 1fr 1fr; gap: 16px; } }
.promo { position: relative; display: block; height: clamp(190px, 22vw, 300px); border-radius: 20px; overflow: hidden; color: #fff; isolation: isolate; background: #1A1816; }
.promo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.2s var(--ease-out); }
.promo:hover img { transform: scale(1.04); }
.promo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 11, 10, .72), rgba(12, 11, 10, 0) 65%); }
.promo__text { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 6px; justify-items: start; }
.promo__eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.promo__title { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.04; }
.promo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; font-weight: 600; }
.promo:hover .promo__cta .ico { transform: translateX(3px); }
.promo__cta .ico { transition: transform .25s var(--ease-out); }

/* ---------- Bülten ---------- */
.hnews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; padding: 22px; border-radius: 20px; background: var(--text); color: var(--bg); }
@media (min-width: 900px) { .hnews { grid-template-columns: 1fr minmax(340px, 480px); gap: 40px; padding: 28px 36px; } }
.hnews__text { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hnews__text > div { min-width: 0; }
.hnews__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 14%, transparent); flex: none; }
.hnews h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.hnews p { font-size: 13.5px; opacity: .75; margin-top: 4px; max-width: 52ch; }
.hnews__form { display: flex; gap: 8px; min-width: 0; }
.hnews__form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--bg); color: var(--text); font-size: 16px; outline: none; }
.hnews__form .btn { --btn-bg: var(--bg); --btn-fg: var(--text); min-height: 50px; }
.hnews__form .btn::before { background: var(--panel); }

/* ======================================================================
   JOURNAL
   Ortak başlık + bölüm çipleri → kapak hikâyesi (.kcard--feat) + makale kartları (.kgrid) → deneyimler.
   ====================================================================== */
:where(body[data-view="journal"]) .journal-chips { margin-bottom: 16px; }
:where(body[data-view="journal"]) .journal-stories { transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
:where(body[data-view="journal"]) .journal-stories.is-swapping { opacity: 0; transform: translateY(10px); }
:where(body[data-view="journal"]) .journal-grid { margin-top: 16px; }
@media (min-width: 1024px) { :where(body[data-view="journal"]) .journal-grid { margin-top: 20px; } }

/* ======================================================================
   LEGAL
   Ortak başlık (not + güncelleme + yazdır) → yapışkan içindekiler (masaüstü) / yapışkan bölüm seçimi (mobil) + bölüm kartları.
   ====================================================================== */
:where(body[data-view="legal"]) .lnote { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, var(--bg-elev)); font-size: 13.5px; line-height: 1.5; max-width: 760px; }
:where(body[data-view="legal"]) .lnote .ico { color: var(--accent); margin-top: 1px; }
:where(body[data-view="legal"]) .lnote strong { font-weight: 600; }
:where(body[data-view="legal"]) .lhead__meta .small { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }

/* Mobil bölüm seçimi: header'ın hemen altında yapışkan */
:where(body[data-view="legal"]) .mtoc { position: sticky; top: var(--hdr-h); z-index: 40; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { :where(body[data-view="legal"]) .mtoc { display: none; } }
:where(body[data-view="legal"]) .mtoc select { width: 100%; height: 46px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: 16px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857D73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* Metin */
:where(body[data-view="legal"]) .ldoc { display: grid; gap: 16px; }
:where(body[data-view="legal"]) .lsec { scroll-margin-top: calc(var(--hdr-h) + 16px); }
@media (max-width: 1023.98px) { :where(body[data-view="legal"]) .lsec { scroll-margin-top: calc(var(--hdr-h) + 72px); } }
:where(body[data-view="legal"]) .lsec > * { max-width: 76ch; }
:where(body[data-view="legal"]) .lsec .ktitle { margin-top: 4px; }
:where(body[data-view="legal"]) .lsec__sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
:where(body[data-view="legal"]) .lsec h3 { font-size: 15.5px; font-weight: 600; margin-top: 24px; }
:where(body[data-view="legal"]) .lsec p, :where(body[data-view="legal"]) .lsec li { font-size: 15px; line-height: 1.75; color: var(--text-2); }
:where(body[data-view="legal"]) .lsec p { margin-top: 10px; }
:where(body[data-view="legal"]) .lsec strong { color: var(--text); font-weight: 600; }
:where(body[data-view="legal"]) .lsec ul, :where(body[data-view="legal"]) .lsec ol.list { margin-top: 10px; display: grid; gap: 6px; }
:where(body[data-view="legal"]) .lsec ul li { position: relative; padding-left: 18px; }
:where(body[data-view="legal"]) .lsec ul li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--warm-gray); }
:where(body[data-view="legal"]) .lsec ol.list { counter-reset: li; }
:where(body[data-view="legal"]) .lsec ol.list li { position: relative; padding-left: 26px; counter-increment: li; }
:where(body[data-view="legal"]) .lsec ol.list li::before { content: counter(li, lower-alpha) ')'; position: absolute; left: 0; top: .15em; font-size: 13px; color: var(--muted); }
:where(body[data-view="legal"]) .lsec a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--text); }
:where(body[data-view="legal"]) .lsec dl { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 8px 18px; margin: 12px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); font-size: 14px; }
:where(body[data-view="legal"]) .lsec dt { color: var(--muted); }
:where(body[data-view="legal"]) .lsec dd { margin: 0; color: var(--text); }
:where(body[data-view="legal"]) .lsec .lsec__top { display: inline-flex; margin-top: 18px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
:where(body[data-view="legal"]) .lsec .lsec__top:hover { color: var(--text); }

/* Çerez tercihleri */
:where(body[data-view="legal"]) .cpanel { margin-top: 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; }
:where(body[data-view="legal"]) .cpanel__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
:where(body[data-view="legal"]) .cpanel__head .ico { color: var(--muted); }
:where(body[data-view="legal"]) .cpanel__title { font-weight: 600; }
:where(body[data-view="legal"]) .crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
:where(body[data-view="legal"]) .crow strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
:where(body[data-view="legal"]) .lsec .crow p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }
:where(body[data-view="legal"]) .crow .badge { margin-left: 8px; vertical-align: 2px; }
:where(body[data-view="legal"]) .switch input:disabled + span { opacity: .55; cursor: not-allowed; }
:where(body[data-view="legal"]) .switch input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
:where(body[data-view="legal"]) .cpanel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; background: var(--panel); }
:where(body[data-view="legal"]) .cpanel__status { margin-left: auto; font-size: 12.5px; color: var(--muted); }
@media (max-width: 559.98px) { :where(body[data-view="legal"]) .cpanel__status { margin-left: 0; width: 100%; } :where(body[data-view="legal"]) .cpanel__foot .btn { flex: 1 1 100%; } :where(body[data-view="legal"]) .cpanel__foot #ck-all, :where(body[data-view="legal"]) .cpanel__foot #ck-none { flex: 1 1 calc(50% - 5px); padding-inline: 10px; } }

@media print {
  :where(body[data-view="legal"]) .hdr, :where(body[data-view="legal"]) .ftr, :where(body[data-view="legal"]) .bnav, :where(body[data-view="legal"]) .mnav, :where(body[data-view="legal"]) .skip-link, :where(body[data-view="legal"]) .ktoc, :where(body[data-view="legal"]) .mtoc, :where(body[data-view="legal"]) .lhead__meta .btn, :where(body[data-view="legal"]) .crumbs, :where(body[data-view="legal"]) .lsec__top, :where(body[data-view="legal"]) .cpanel__foot, :where(body[data-view="legal"]) .toasts, :where(body[data-view="legal"]) .credit { display: none !important; }
  body:where([data-view="legal"]) { background: #fff; color: #000; padding: 0 !important; animation: none; }
  :where(body[data-view="legal"]) main { animation: none; }
  :where(body[data-view="legal"]) .klay { display: block; }
  :where(body[data-view="legal"]) .khead__in, :where(body[data-view="legal"]) .kbox { background: none; border: 0; padding: 0; }
  :where(body[data-view="legal"]) .lsec { break-inside: auto; padding-top: 24px; }
  :where(body[data-view="legal"]) .lsec h2 { break-after: avoid; }
  :where(body[data-view="legal"]) .lsec p, :where(body[data-view="legal"]) .lsec li { color: #222; font-size: 11pt; }
  :where(body[data-view="legal"]) a { text-decoration: none !important; }
}

/* ======================================================================
   LOGIN (Fakir düzeni)
   Sade üst bar → ortada sekmeli beyaz kart (Giriş yap / Üye ol) · masaüstünde sağda üyelik avantajları + misafir ödeme.
   ====================================================================== */
:where(body[data-view="login"]) [hidden] { display: none !important; }
  :where(body[data-view="login"]) .lg-hdr { background: var(--bg-elev); border-bottom: 1px solid var(--line); }
  :where(body[data-view="login"]) .lg-hdr__in { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  @media (min-width: 1024px) { :where(body[data-view="login"]) .lg-hdr__in { height: 68px; } }
  :where(body[data-view="login"]) .lg-hdr__back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; transition: background .2s; }
  :where(body[data-view="login"]) .lg-hdr__back:hover { background: var(--panel); }

  :where(body[data-view="login"]) .lg { padding-block: clamp(20px, 4vw, 48px); min-height: calc(100svh - 60px - 60px); }
  :where(body[data-view="login"]) .lg__wrap { display: grid; gap: 16px; max-width: 980px; }
  @media (min-width: 900px) { :where(body[data-view="login"]) .lg__wrap { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 24px; align-items: start; justify-content: center; } }

  /* ---------- Kart + sekmeler ---------- */
  :where(body[data-view="login"]) .lg__card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  :where(body[data-view="login"]) .lg__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  :where(body[data-view="login"]) .lg__tabs button { position: relative; height: 52px; font-size: 15px; font-weight: 600; color: var(--muted); background: var(--panel); transition: color .2s, background .2s; }
  :where(body[data-view="login"]) .lg__tabs button + button { border-left: 1px solid var(--line); }
  :where(body[data-view="login"]) .lg__tabs button:hover { color: var(--text); }
  :where(body[data-view="login"]) .lg__tabs button.is-active { color: var(--text); background: var(--bg-elev); }
  :where(body[data-view="login"]) .lg__tabs button.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); }
  :where(body[data-view="login"]) .lg__panel { padding: clamp(20px, 3.4vw, 32px); }

  :where(body[data-view="login"]) .pane { display: grid; gap: 14px; animation: page-in .4s var(--ease-out) both; }
  :where(body[data-view="login"]) .pane__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.015em; }
  :where(body[data-view="login"]) .pane__lead { color: var(--text-2); font-size: 14px; margin-top: -6px; }
  :where(body[data-view="login"]) .pane form { display: grid; gap: 12px; }
  :where(body[data-view="login"]) .pane__switch { text-align: center; font-size: 13.5px; color: var(--text-2); }
  :where(body[data-view="login"]) .pane__switch .tlink { font-weight: 600; color: var(--text); min-height: 32px; }
  :where(body[data-view="login"]) .fgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  :where(body[data-view="login"]) .field__hint:empty { display: none; }
  :where(body[data-view="login"]) .field__hint button { text-decoration: underline; text-underline-offset: 3px; color: inherit; font-size: inherit; }
  :where(body[data-view="login"]) .pw .field__input { padding-right: 56px; }
  :where(body[data-view="login"]) .pw__toggle { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: color .2s, background .2s; }
  :where(body[data-view="login"]) .pw__toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
  :where(body[data-view="login"]) .auth__row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-height: 40px; }
  :where(body[data-view="login"]) .auth__row .check { font-size: 13.5px; }
  :where(body[data-view="login"]) .tlink { display: inline-flex; align-items: center; min-height: 40px; font-size: 13.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
  :where(body[data-view="login"]) .tlink:hover { text-decoration-color: currentColor; }
  :where(body[data-view="login"]) .login-center { text-align: center; }
  :where(body[data-view="login"]) .login-strong { font-weight: 600; color: var(--text); }
  :where(body[data-view="login"]) .login-resend { min-height: 0; }
  :where(body[data-view="login"]) .or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
  :where(body[data-view="login"]) .or::before, :where(body[data-view="login"]) .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  :where(body[data-view="login"]) .social { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  :where(body[data-view="login"]) .social .btn { padding: 0 12px; font-weight: 500; }
  :where(body[data-view="login"]) .social svg { width: 18px; height: 18px; }

  :where(body[data-view="login"]) .meter { display: grid; gap: 6px; margin-top: -2px; }
  :where(body[data-view="login"]) .meter__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  :where(body[data-view="login"]) .meter__bars i { height: 4px; border-radius: 2px; background: var(--line); transition: background .3s var(--ease); }
  :where(body[data-view="login"]) .meter[data-s="1"] i:nth-child(-n+1) { background: var(--accent); }
  :where(body[data-view="login"]) .meter[data-s="2"] i:nth-child(-n+2) { background: var(--warm-gray); }
  :where(body[data-view="login"]) .meter[data-s="3"] i:nth-child(-n+3) { background: var(--text-2); }
  :where(body[data-view="login"]) .meter[data-s="4"] i { background: var(--success); }
  :where(body[data-view="login"]) .meter__row { display: flex; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
  :where(body[data-view="login"]) .meter__rules { display: flex; gap: 4px 12px; flex-wrap: wrap; }
  :where(body[data-view="login"]) .meter__rules span { display: inline-flex; align-items: center; gap: 4px; transition: color .25s; }
  :where(body[data-view="login"]) .meter__rules span.ok { color: var(--success); }
  :where(body[data-view="login"]) .meter__label { font-weight: 600; color: var(--text-2); }
  :where(body[data-view="login"]) .consent { display: grid; gap: 10px; }
  :where(body[data-view="login"]) .consent .check { align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-2); }
  :where(body[data-view="login"]) .consent .check input { margin-top: 1px; }
  :where(body[data-view="login"]) .consent a { text-decoration: underline; text-underline-offset: 3px; color: var(--text); }
  :where(body[data-view="login"]) .check.is-error input { border-color: var(--accent); }
  :where(body[data-view="login"]) .cerr { color: var(--accent); font-size: 12.5px; margin-top: -4px; }
  :where(body[data-view="login"]) .cerr:empty { display: none; }
  :where(body[data-view="login"]) .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); min-height: 40px; justify-self: start; }
  :where(body[data-view="login"]) .back:hover { color: var(--text); }
  :where(body[data-view="login"]) .sent { justify-items: start; }
  :where(body[data-view="login"]) .sent__art { width: 64px; height: 64px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
  :where(body[data-view="login"]) .shake { animation: login--shake .45s var(--ease); }
  @keyframes login--shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

  /* ---------- Yan: avantajlar + misafir ---------- */
  :where(body[data-view="login"]) .lg__side { display: grid; gap: 12px; }
  :where(body[data-view="login"]) .lg__perks { padding: 20px 22px; border-radius: 14px; background: var(--panel); }
  @media (max-width: 899px) { :where(body[data-view="login"]) .lg__perks { display: none; } }
  :where(body[data-view="login"]) .lg__perks-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
  :where(body[data-view="login"]) .lg__list { display: grid; gap: 14px; }
  :where(body[data-view="login"]) .lg__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
  :where(body[data-view="login"]) .lg__list strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
  :where(body[data-view="login"]) .lg__ico { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--bg-elev); display: grid; place-items: center; }
  :where(body[data-view="login"]) .lg__guest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); font-size: 13px; color: var(--text-2); transition: border-color .2s; }
  :where(body[data-view="login"]) .lg__guest:hover { border-color: var(--line-strong); }
  :where(body[data-view="login"]) .lg__guest strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
  :where(body[data-view="login"]) .lg__guest .ico { transition: transform .3s var(--ease-out); }
  :where(body[data-view="login"]) .lg__guest:hover .ico { transform: translateX(3px); }
  :where(body[data-view="login"]) .lg__legal { font-size: 12px; color: var(--muted); padding-inline: 4px; }


/* ======================================================================
   NOT-FOUND
   Fakir düzeni: açık panelde ortalanmış sade mesaj, arama, butonlar, popüler kategoriler; altında ürün rayı.
   ====================================================================== */
:where(body[data-view="not-found"]) .nfw { padding-top: 16px; }
  :where(body[data-view="not-found"]) .nf { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px); border-radius: 18px; background: var(--panel); }
  :where(body[data-view="not-found"]) .nf__code { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 8vw, 104px); line-height: .9; letter-spacing: -.03em; color: var(--warm-gray); }
  :where(body[data-view="not-found"]) .nf__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); }
  :where(body[data-view="not-found"]) .nf__eyebrow { font-size: 12.5px; font-weight: 500; color: var(--muted); }
  :where(body[data-view="not-found"]) .nf__title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
  :where(body[data-view="not-found"]) .nf__lead { max-width: 52ch; font-size: 14.5px; color: var(--text-2); }
  :where(body[data-view="not-found"]) .nf__search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; height: 54px; margin-top: 8px; padding: 0 6px 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="not-found"]) .nf__search > .ico { color: var(--muted); }
  :where(body[data-view="not-found"]) .nf__search:focus-within { border-color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 8%, transparent); }
  :where(body[data-view="not-found"]) .nf__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 16px; }
  :where(body[data-view="not-found"]) .nf__search input::-webkit-search-cancel-button { display: none; }
  :where(body[data-view="not-found"]) .nf__search .btn { flex: none; min-height: 42px; padding: 0 18px; border-radius: 9px; }
  :where(body[data-view="not-found"]) .nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
  :where(body[data-view="not-found"]) .nf__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
  :where(body[data-view="not-found"]) .nf__chips .chip { height: 36px; padding: 0 14px; background: var(--bg-elev); border-color: var(--line); }
  :where(body[data-view="not-found"]) .nf__chips .chip:hover { border-color: var(--text); }

  /* Genel hata varyantı */
  :where(body[data-view="not-found"]) .safe { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
  :where(body[data-view="not-found"]) .safe > span { display: inline-flex; align-items: center; gap: 6px; }
  :where(body[data-view="not-found"]) .safe .ico { color: var(--success); }
  :where(body[data-view="not-found"]) .err__ref { display: grid; gap: 4px; margin-top: 10px; padding: 12px 16px; border-radius: 12px; background: var(--bg-elev); font-size: 12.5px; color: var(--text-2); }
  :where(body[data-view="not-found"]) .err__ref code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
  :where(body[data-view="not-found"]) main > .hsec { padding-block: clamp(24px, 3vw, 36px) clamp(40px, 5vw, 64px); }


/* ======================================================================
   PRODUCT (Fakir düzeni)
   Kırıntı → galeri (dikey küçük resimler + büyük görsel) | bilgi sütunu (.pinfo, ortak bölümde) →
   açıklama bloğu → değerlendirmeler → raylar. Mobilde alt menü yerine fiyat + "Sepete Ekle" çubuğu.
   ====================================================================== */
  :where(body[data-view="product"]) .bnav { display: none !important; }

  :where(body[data-view="product"]) .pdp-wrap { padding-top: 12px; }
  :where(body[data-view="product"]) .pdp-crumbs { margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
  :where(body[data-view="product"]) .pdp-crumbs::-webkit-scrollbar { display: none; }
  :where(body[data-view="product"]) .pdp-crumbs .crumbs { flex-wrap: nowrap; white-space: nowrap; }
  :where(body[data-view="product"]) .pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  :where(body[data-view="product"]) .pdp > * { min-width: 0; }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .pdp { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(32px, 3.6vw, 56px); align-items: start; } }

  /* ---------- Galeri ---------- */
  :where(body[data-view="product"]) .gal { --c: transparent; position: relative; margin-inline: calc(var(--gutter) * -1); }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .gal { position: sticky; top: calc(var(--hdr-h) + 16px); margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; } }
  :where(body[data-view="product"]) .gal__thumbs { display: none; }
  @media (min-width: 1024px) {
    :where(body[data-view="product"]) .gal__thumbs { display: grid; gap: 8px; }
    :where(body[data-view="product"]) .gal__thumb { position: relative; display: block; width: 72px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
    :where(body[data-view="product"]) .gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
    :where(body[data-view="product"]) .gal__thumb:hover { border-color: var(--line-strong); }
    :where(body[data-view="product"]) .gal__thumb.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
    :where(body[data-view="product"]) .gal__thumb .ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; --ico-fill: 1; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
    :where(body[data-view="product"]) .gal__thumb:first-child::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
    :where(body[data-view="product"]) .gal.is-tinted .gal__thumb:first-child img { filter: grayscale(1) brightness(1.18) contrast(1.05); }
    :where(body[data-view="product"]) .gal.is-tinted .gal__thumb:first-child::after { opacity: .92; }
  }
  :where(body[data-view="product"]) .gal__stage { position: relative; background: var(--panel); }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .gal__stage { border-radius: 16px; overflow: hidden; container-type: inline-size; } }
  :where(body[data-view="product"]) .gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  :where(body[data-view="product"]) .gal__track::-webkit-scrollbar { display: none; }
  :where(body[data-view="product"]) .gal__tile { position: relative; flex: 0 0 100%; aspect-ratio: 1; overflow: hidden; background: var(--panel); scroll-snap-align: center; cursor: zoom-in; }
  :where(body[data-view="product"]) .gal__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out), opacity .2s; user-select: none; -webkit-user-drag: none; }
  :where(body[data-view="product"]) .gal__tile:focus-visible { outline-offset: -3px; }
  :where(body[data-view="product"]) .gal__tile img.is-dim { opacity: .35; }
  @media (min-width: 1024px) {
    /* Masaüstü: tek büyük görsel (kare, ekran yüksekliğine sığar); küçük resim / okla değişir */
    :where(body[data-view="product"]) .gal__track { overflow: hidden; }
    :where(body[data-view="product"]) .gal__tile { aspect-ratio: auto; height: min(100cqw, calc(100vh - var(--hdr-h) - 32px)); }
  }
  @media (hover: hover) and (min-width: 1024px) {
    :where(body[data-view="product"]) .gal__tile.is-zoom img { transform: scale(2.1); transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .45s var(--ease-out); }
  }
  /* Renk seçimi: renge özel görsel yoksa ana kadraj renk tonuyla boyanır */
  :where(body[data-view="product"]) .gal__tint { position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity .3s; }
  :where(body[data-view="product"]) .gal.is-tinted .gal__tile--hero img { filter: grayscale(1) brightness(1.18) contrast(1.05); }
  :where(body[data-view="product"]) .gal.is-tinted .gal__tint { opacity: .92; }
  :where(body[data-view="product"]) .gal__badges { position: absolute; top: 12px; left: 12px; z-index: 4; display: flex; gap: 6px; pointer-events: none; }
  :where(body[data-view="product"]) .gal__tile--video { cursor: pointer; }
  :where(body[data-view="product"]) .gal__tile--video img { animation: product--kb 14s ease-in-out infinite alternate; }
  @keyframes product--kb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.22) translate(-3%, -2%); } }
  :where(body[data-view="product"]) .gal__tile--video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,.45), transparent 50%); pointer-events: none; }
  :where(body[data-view="product"]) .gal__play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; color: #fff; transition: transform .35s var(--ease-out), background .3s; pointer-events: none; }
  :where(body[data-view="product"]) .gal__play .ico { --ico-fill: 1; color: #fff; width: 22px; height: 22px; margin-left: 3px; }
  :where(body[data-view="product"]) .gal__tile--video:hover .gal__play { transform: scale(1.08); background: rgba(255,255,255,.3); }
  :where(body[data-view="product"]) .gal__vlabel { position: absolute; left: 16px; bottom: 16px; z-index: 2; color: #fff; font-size: 12px; font-weight: 500; }
  :where(body[data-view="product"]) .gal__tools { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; gap: 6px; }
  :where(body[data-view="product"]) .gal__tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--bg-elev); color: var(--text); font-size: 12px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.1); transition: background .2s, color .2s; }
  :where(body[data-view="product"]) .gal__tool:hover, :where(body[data-view="product"]) .gal__tool[aria-pressed="true"] { background: var(--text); color: var(--bg); }
  :where(body[data-view="product"]) #btn-full { padding: 0; }
  :where(body[data-view="product"]) .gal__hud { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4; display: flex; justify-content: center; pointer-events: none; }
  :where(body[data-view="product"]) .gal__dots { display: flex; gap: 5px; padding: 5px 8px; border-radius: var(--r-pill); background: rgba(15,14,13,.28); }
  :where(body[data-view="product"]) .gal__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.6); transition: width .3s var(--ease-out), background .2s; }
  :where(body[data-view="product"]) .gal__dots i.is-active { width: 16px; background: #fff; }
  :where(body[data-view="product"]) .gal__count { display: none; position: absolute; left: 12px; bottom: 12px; z-index: 4; padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-elev); color: var(--text-2); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .gal__hud { display: none; } :where(body[data-view="product"]) .gal__count { display: block; } }
  :where(body[data-view="product"]) .gal__arrow { position: absolute; top: 50%; z-index: 4; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; display: none; place-items: center; background: var(--bg-elev); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: background .2s, color .2s; }
  :where(body[data-view="product"]) .gal__arrow:hover { background: var(--text); color: var(--bg); }
  :where(body[data-view="product"]) .gal__arrow--prev { left: 12px; } :where(body[data-view="product"]) .gal__arrow--next { right: 12px; }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .gal__arrow { display: grid; } }
  :where(body[data-view="product"]) .gal.is-360 .gal__arrow { display: none; }

  /* 360° */
  :where(body[data-view="product"]) .gal.is-360 .gal__tile--hero { cursor: ew-resize; touch-action: pan-y; }
  :where(body[data-view="product"]) .gal.is-360 .gal__tile--hero img { transition: transform .25s var(--ease-out), opacity .12s; transform: perspective(1400px) rotateY(var(--ry, 0deg)) scale(1.02); }
  :where(body[data-view="product"]) .gal.is-360 .gal__track { overflow: hidden; }
  :where(body[data-view="product"]) .gal__360hint { position: absolute; left: 50%; bottom: 18px; z-index: 5; transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(15,14,13,.62); color: #fff; font-size: 12px; white-space: nowrap; backdrop-filter: blur(8px); pointer-events: none; }
  :where(body[data-view="product"]) .gal.is-360 .gal__360hint { display: inline-flex; animation: product--hint-in .5s var(--ease-out); }
  @keyframes product--hint-in { from { opacity: 0; transform: translate(-50%, 8px); } }
  :where(body[data-view="product"]) .gal__ticks { display: inline-flex; gap: 4px; }
  :where(body[data-view="product"]) .gal__ticks i { width: 12px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.35); transition: background .2s; }
  :where(body[data-view="product"]) .gal__ticks i.is-on { background: #fff; }
  :where(body[data-view="product"]) .gal.is-360 .gal__hud, :where(body[data-view="product"]) .gal.is-360 .gal__count { display: none; }

  /* ---------- Bilgi sütunu (ortak .pinfo stillerine ek) ---------- */
  :where(body[data-view="product"]) .pdp__notify { display: grid; gap: 12px; margin-top: 12px; padding: 18px; border-radius: 14px; background: var(--panel); }
  :where(body[data-view="product"]) .pdp__notify form { display: flex; gap: 10px; flex-wrap: wrap; }
  :where(body[data-view="product"]) .pdp__notify .field { flex: 1 1 200px; }
  :where(body[data-view="product"]) .pdp__notify-form, :where(body[data-view="product"]) .pdp__notify-done { display: grid; gap: 10px; }
  :where(body[data-view="product"]) .pdp__notify-form[hidden], :where(body[data-view="product"]) .pdp__notify-done[hidden] { display: none; }
  :where(body[data-view="product"]) .pdp__notify-h { font-size: 15px; font-weight: 600; }
  :where(body[data-view="product"]) .pdp__notify-title { --g: 8px; }
  :where(body[data-view="product"]) #acc-spec, :where(body[data-view="product"]) #acc-inst { scroll-margin-top: calc(var(--hdr-h) + 16px); }

  /* ---------- Açıklama bloğu ---------- */
  :where(body[data-view="product"]) #pdp-sections { margin-top: clamp(16px, 2.4vw, 32px); }
  :where(body[data-view="product"]) .pdesc { display: grid; gap: 20px; padding: clamp(20px, 3vw, 36px); }
  @media (min-width: 900px) { :where(body[data-view="product"]) .pdesc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; } }
  :where(body[data-view="product"]) .pdesc__lead { margin-top: 12px; max-width: 68ch; font-size: 16px; line-height: 1.65; color: var(--text); }
  :where(body[data-view="product"]) .pdesc__short { margin-top: 8px; max-width: 68ch; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
  :where(body[data-view="product"]) .pdesc__feats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
  @media (min-width: 600px) { :where(body[data-view="product"]) .pdesc__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  :where(body[data-view="product"]) .pdesc__feats li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; background: var(--bg-elev); }
  :where(body[data-view="product"]) .pdesc__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel); }
  :where(body[data-view="product"]) .pdesc__feats strong { display: block; font-size: 13.5px; font-weight: 600; }
  :where(body[data-view="product"]) .pdesc__feats small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
  :where(body[data-view="product"]) .pdesc__col { margin-top: 18px; }
  :where(body[data-view="product"]) .pdesc__media { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--img-bg); }
  :where(body[data-view="product"]) .pdesc__media img { width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 900px) { :where(body[data-view="product"]) .pdesc__media { aspect-ratio: 1; } }

  /* ---------- Değerlendirmeler ---------- */
  :where(body[data-view="product"]) #reviews { scroll-margin-top: calc(var(--hdr-h) + 12px); }
  :where(body[data-view="product"]) .revs { display: grid; gap: 14px; }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .revs { grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; } }
  :where(body[data-view="product"]) .revs .stars { color: #C9932E; }
  :where(body[data-view="product"]) .revs__sum { padding: 22px; }
  :where(body[data-view="product"]) .revs__score { display: flex; align-items: center; gap: 14px; }
  :where(body[data-view="product"]) .revs__big { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
  :where(body[data-view="product"]) .revs__score-meta { display: grid; gap: 4px; }
  :where(body[data-view="product"]) .revs__bars { display: grid; gap: 8px; margin-top: 18px; }
  :where(body[data-view="product"]) .revs__bar { display: grid; grid-template-columns: 30px 1fr 38px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
  :where(body[data-view="product"]) .revs__bar > span:nth-child(2) { height: 6px; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 3px; overflow: hidden; }
  :where(body[data-view="product"]) .revs__bar > span:nth-child(2) i { display: block; height: 100%; width: 0; background: #C9932E; border-radius: 3px; transition: width 1.2s var(--ease-out); }
  :where(body[data-view="product"]) .revs.is-in .revs__bar > span:nth-child(2) i { width: var(--w); }
  :where(body[data-view="product"]) .revs__bar > span:last-child { text-align: right; color: var(--muted); }
  :where(body[data-view="product"]) .revs__list { display: grid; gap: 10px; }
  :where(body[data-view="product"]) .rev { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); }
  :where(body[data-view="product"]) .rev__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  :where(body[data-view="product"]) .rev__who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
  :where(body[data-view="product"]) .rev__av { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
  :where(body[data-view="product"]) .rev__who small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
  :where(body[data-view="product"]) .rev__title { font-size: 15px; font-weight: 600; }
  :where(body[data-view="product"]) .rev__text { max-width: 80ch; font-size: 14px; line-height: 1.6; color: var(--text-2); }
  :where(body[data-view="product"]) .rev__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
  :where(body[data-view="product"]) .rev__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-weight: 500; }
  :where(body[data-view="product"]) .revs__more { justify-self: start; }

  /* ---------- Lightbox ---------- */
  :where(body[data-view="product"]) .lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 20px; padding-top: calc(10px + env(safe-area-inset-top)); }
  :where(body[data-view="product"]) .lb__count { font-size: 12.5px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
  :where(body[data-view="product"]) .lb__name { font-family: var(--serif); font-size: 20px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(body[data-view="product"]) .lightbox .icon-btn:hover { background: rgba(255,255,255,.1); }
  :where(body[data-view="product"]) .lb__stage { position: relative; flex: 1; min-height: 0; }
  :where(body[data-view="product"]) .lb__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
  :where(body[data-view="product"]) .lb__track::-webkit-scrollbar { display: none; }
  :where(body[data-view="product"]) .lb__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; padding: 0 clamp(0px, 5vw, 96px); }
  :where(body[data-view="product"]) .lb__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: none; cursor: zoom-in; transition: transform .45s var(--ease-out); user-select: none; -webkit-user-drag: none; }
  :where(body[data-view="product"]) .lb__slide.is-zoom img { transform: scale(2.2); cursor: zoom-out; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .45s var(--ease-out), transform-origin 0s; }
  :where(body[data-view="product"]) .lb__video { position: relative; height: 100%; aspect-ratio: 4/5; max-width: 100%; overflow: hidden; border-radius: 6px; }
  :where(body[data-view="product"]) .lb__video img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
  :where(body[data-view="product"]) .lb__video.is-playing img { animation: product--kb 18s linear forwards; }
  :where(body[data-view="product"]) .lb__video .gal__play { pointer-events: auto; cursor: pointer; transition: opacity .3s, transform .3s; }
  :where(body[data-view="product"]) .lb__video.is-playing .gal__play { opacity: 0; }
  :where(body[data-view="product"]) .lb__vbar { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 2px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
  :where(body[data-view="product"]) .lb__vbar i { display: block; height: 100%; width: 0; background: #fff; }
  :where(body[data-view="product"]) .lb__video.is-playing .lb__vbar i { animation: product--vbar 18s linear forwards; }
  @keyframes product--vbar { to { width: 100%; } }
  :where(body[data-view="product"]) .lb__vtext { position: absolute; left: 16px; top: 16px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
  :where(body[data-view="product"]) .lb__arrow { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; color: #fff; transition: background .25s, border-color .25s; }
  :where(body[data-view="product"]) .lb__arrow:hover { background: #fff; color: #111; border-color: #fff; }
  :where(body[data-view="product"]) .lb__arrow--prev { left: 20px; } :where(body[data-view="product"]) .lb__arrow--next { right: 20px; }
  :where(body[data-view="product"]) .lb__arrow[disabled] { opacity: .25; pointer-events: none; }
  @media (hover: none) { :where(body[data-view="product"]) .lb__arrow { display: none; } }
  :where(body[data-view="product"]) .lb__thumbs { display: flex; justify-content: center; gap: 8px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overflow-x: auto; }
  :where(body[data-view="product"]) .lb__thumbs button { flex: none; width: 44px; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; opacity: .4; transition: opacity .25s; }
  :where(body[data-view="product"]) .lb__thumbs button.is-active { opacity: 1; box-shadow: 0 0 0 1px #fff; }
  :where(body[data-view="product"]) .lb__thumbs img { width: 100%; height: 100%; object-fit: cover; background: #222; }

  /* ---------- Mobil alt çubuk: fiyat + Sepete Ekle ---------- */
  :where(body[data-view="product"]) .pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-elev); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgba(20,16,12,.25); transform: translateY(calc(100% + 12px)); transition: transform .4s var(--ease-out); }
  :where(body[data-view="product"]) .pdp-bar.is-visible { transform: none; }
  :where(body[data-view="product"]) .pdp-bar__txt { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.2; }
  :where(body[data-view="product"]) .pdp-bar__price { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
  :where(body[data-view="product"]) .pdp-bar__price s { font-size: 12px; color: var(--muted); }
  :where(body[data-view="product"]) .pdp-bar__price strong { font-size: 18px; font-weight: 700; }
  :where(body[data-view="product"]) .pdp-bar__price strong.is-sale { color: var(--accent); }
  :where(body[data-view="product"]) .pdp-bar__opt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
  :where(body[data-view="product"]) .pdp-bar .btn { flex: none; min-width: 52%; }
  @media (min-width: 1024px) { :where(body[data-view="product"]) .pdp-bar { display: none; } }

  :where(body[data-view="product"]) .nf { padding-block: clamp(48px, 10vw, 140px); }
  :where(body[data-view="product"]) .nf__ctas { --g: 12px; justify-content: center; }


/* ======================================================================
   SCREENS
   Ortak başlık (ekran / dil / ürün sayıları) → grup başına bölüm başlığı + çerçeveli ekran kartları.
   ====================================================================== */
:where(body[data-view="screens"]) .map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { :where(body[data-view="screens"]) .map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { :where(body[data-view="screens"]) .map-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
:where(body[data-view="screens"]) .scr { display: flex; flex-direction: column; min-width: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
@media (hover: hover) { :where(body[data-view="screens"]) .scr:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); } }
:where(body[data-view="screens"]) .scr__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--img-bg); }
:where(body[data-view="screens"]) .scr__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
:where(body[data-view="screens"]) .scr:hover .scr__media img { transform: scale(1.04); }
:where(body[data-view="screens"]) .scr__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px; }
:where(body[data-view="screens"]) .scr__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="screens"]) .scr__meta { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
:where(body[data-view="screens"]) .scr__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:where(body[data-view="screens"]) .scr__path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
:where(body[data-view="screens"]) .scr__go { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12.5px; font-weight: 600; }
:where(body[data-view="screens"]) .scr__go .ico { transition: transform .25s var(--ease-out); }
:where(body[data-view="screens"]) .scr:hover .scr__go .ico { transform: translateX(3px); }

/* ======================================================================
   SEARCH
   ====================================================================== */
/* Fakir düzeni: başlık paneli (sayfa yolu, “sorgu” + adet, arama kutusu), öneri çipleri, sonuç türü çipleri, ürün ızgarası.
   Izgara, kutular, yüzen "Filtrele & Sırala" düğmesi ve çekmece ortak liste düzeninde (LISTING). */
  /* ---------- Başlık paneli + arama kutusu ---------- */
  :where(body[data-view="search"]) .srch-head { gap: 8px; }
  :where(body[data-view="search"]) .srch-q { font-style: italic; }
  :where(body[data-view="search"]) .sbar { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 720px; height: 50px; margin-top: 4px; padding: 0 5px 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-elev); transition: border-color .2s, box-shadow .2s; }
  :where(body[data-view="search"]) .sbar:focus-within { border-color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 6%, transparent); }
  :where(body[data-view="search"]) .sbar > .ico { flex: none; color: var(--muted); }
  :where(body[data-view="search"]) .sbar__input { flex: 1; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: transparent; outline: none; font-size: 16px; color: var(--text); text-overflow: ellipsis; }
  :where(body[data-view="search"]) .sbar__input::placeholder { color: var(--muted); opacity: 1; transition: opacity .3s; }
  :where(body[data-view="search"]) .sbar__input.is-swapping::placeholder { opacity: 0; }
  :where(body[data-view="search"]) .sbar__input::-webkit-search-cancel-button, :where(body[data-view="search"]) .sbar__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
  :where(body[data-view="search"]) .sbar__clear { flex: none; width: 36px; height: 36px; }
  :where(body[data-view="search"]) .sbar__go { flex: none; }

  /* ---------- Yazmadan önce ---------- */
  :where(body[data-view="search"]) .sidle { display: grid; gap: 20px; margin-top: 20px; }
  :where(body[data-view="search"]) .sidle__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  :where(body[data-view="search"]) .sidle__h { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
  :where(body[data-view="search"]) .sidle__head .sidle__h { margin-bottom: 0; }
  :where(body[data-view="search"]) .schips { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(body[data-view="search"]) .schip { height: 36px; padding: 0 14px; gap: 6px; font-size: 13px; background: var(--bg-elev); white-space: normal; text-align: left; line-height: 1.25; }
  :where(body[data-view="search"]) .schip .ico { color: var(--muted); }
  :where(body[data-view="search"]) .schip:hover .ico { color: currentColor; }

  /* ---------- Sonuçlar ---------- */
  :where(body[data-view="search"]) .sresults { margin-top: 16px; }
  :where(body[data-view="search"]) .search-results { transition: opacity .25s var(--ease); }
  :where(body[data-view="search"]) .search-results.is-loading { opacity: .5; }
  :where(body[data-view="search"]) .stabs { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  :where(body[data-view="search"]) .stabs::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) { :where(body[data-view="search"]) .stabs { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; } }
  :where(body[data-view="search"]) .stab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: 13.5px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
  :where(body[data-view="search"]) .stab:hover { border-color: var(--text); }
  :where(body[data-view="search"]) .stab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  :where(body[data-view="search"]) .stab__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--panel); color: var(--text-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
  :where(body[data-view="search"]) .stab[aria-selected="true"] .stab__n { background: color-mix(in srgb, var(--bg) 22%, transparent); color: inherit; }
  :where(body[data-view="search"]) .spanel { animation: search--panel-in .35s var(--ease-out) both; }
  :where(body[data-view="search"]) .spanel:not([data-panel="products"]) { padding-top: 16px; }
  @keyframes search--panel-in { from { opacity: 0; transform: translateY(8px); } }
  :where(body[data-view="search"]) .smore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
  :where(body[data-view="search"]) .sstories { display: grid; gap: 28px 16px; }
  @media (min-width: 768px) { :where(body[data-view="search"]) .sstories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  :where(body[data-view="search"]) .srelated { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
  :where(body[data-view="search"]) .snone { padding-block: 28px 4px; }
  :where(body[data-view="search"]) .snone__chips { justify-content: center; margin-top: 6px; }


/* ======================================================================
   SHOP-THE-LOOK
   Ortak başlık + görünüm çipleri → solda noktalı görsel (masaüstünde yapışkan), sağda parça listesi (Ekle) + kombini sepete ekle → AI Styling.
   ====================================================================== */
/* Görünüm seçici (başlık panelinde) */
:where(body[data-view="shop-the-look"]) .stl-side { display: grid; gap: 12px; min-width: 0; }
:where(body[data-view="shop-the-look"]) .stl-thumb { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 5px 14px 5px 5px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); text-align: left; font-size: 13px; font-weight: 500; line-height: 1.3; transition: border-color .2s, box-shadow .2s; }
:where(body[data-view="shop-the-look"]) .stl-thumb img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
:where(body[data-view="shop-the-look"]) .stl-thumb small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
:where(body[data-view="shop-the-look"]) .stl-thumb:hover { border-color: var(--line-strong); }
:where(body[data-view="shop-the-look"]) .stl-thumb[aria-current="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

/* Düzen */
:where(body[data-view="shop-the-look"]) .stl-wrap { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
:where(body[data-view="shop-the-look"]) .stl-wrap > * { min-width: 0; }
@media (min-width: 1024px) { :where(body[data-view="shop-the-look"]) .stl-wrap { grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; } }

/* Görsel + noktalar */
:where(body[data-view="shop-the-look"]) .stl-media { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--img-bg); touch-action: pan-y; }
@media (min-width: 1024px) { :where(body[data-view="shop-the-look"]) .stl-media { position: sticky; top: calc(var(--hdr-h) + 16px); width: auto; height: min(calc(100svh - var(--hdr-h) - 40px), 680px); } }
:where(body[data-view="shop-the-look"]) .stl-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
:where(body[data-view="shop-the-look"]) .stl-layer.is-in { opacity: 1; }
:where(body[data-view="shop-the-look"]) .stl-layer.is-out { opacity: 0; }
:where(body[data-view="shop-the-look"]) .stl-layer:not(.is-in), :where(body[data-view="shop-the-look"]) .stl-layer.is-out { pointer-events: none; }
:where(body[data-view="shop-the-look"]) .stl-layer > img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-view="shop-the-look"]) .stl-layer .hotspot { opacity: 0; transition: opacity .4s var(--ease) .3s, transform .3s var(--ease-out); }
:where(body[data-view="shop-the-look"]) .stl-layer.is-in .hotspot { opacity: 1; }
:where(body[data-view="shop-the-look"]) .stl-hint { position: absolute; top: 12px; left: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: #1E1C1A; font-size: 12px; font-weight: 500; }
:where(body[data-view="shop-the-look"]) .stl-ui { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
:where(body[data-view="shop-the-look"]) .stl-ui > * { pointer-events: auto; }
:where(body[data-view="shop-the-look"]) .stl-count { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: #1E1C1A; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
:where(body[data-view="shop-the-look"]) .stl-arrows { display: flex; gap: 6px; }
:where(body[data-view="shop-the-look"]) .stl-arrows button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1E1C1A; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .2s; }
:where(body[data-view="shop-the-look"]) .stl-arrows button:hover { transform: scale(1.06); }

:where(body[data-view="shop-the-look"]) .hotspot { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 14px rgba(0,0,0,.25); color: #111; }
:where(body[data-view="shop-the-look"]) .hotspot::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); animation: shop-the-look--pulse 2.4s var(--ease-out) infinite; }
:where(body[data-view="shop-the-look"]) .hotspot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #111; transition: transform .3s; }
:where(body[data-view="shop-the-look"]) .hotspot:hover, :where(body[data-view="shop-the-look"]) .hotspot.is-active { transform: scale(1.15); z-index: 5; }
:where(body[data-view="shop-the-look"]) .hotspot.is-active::after { transform: scale(1.4); }
@keyframes shop-the-look--pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
:where(body[data-view="shop-the-look"]) .hotspot__tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); min-width: 200px; padding: 10px 10px 10px 14px; border-radius: 12px; background: #fff; color: #1E1C1A; box-shadow: var(--shadow-float); text-align: left; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .3s var(--ease-out); display: none; }
@media (min-width: 1024px) { :where(body[data-view="shop-the-look"]) .hotspot__tip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; } }
:where(body[data-view="shop-the-look"]) .hotspot__tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
:where(body[data-view="shop-the-look"]) .hotspot.is-active .hotspot__tip { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
:where(body[data-view="shop-the-look"]) .hotspot.tip-r .hotspot__tip { left: -12px; transform: translate(0, 6px); } :where(body[data-view="shop-the-look"]) .hotspot.tip-r.is-active .hotspot__tip { transform: none; } :where(body[data-view="shop-the-look"]) .hotspot.tip-r .hotspot__tip::after { left: 26px; }
:where(body[data-view="shop-the-look"]) .hotspot.tip-l .hotspot__tip { left: auto; right: -12px; transform: translate(0, 6px); } :where(body[data-view="shop-the-look"]) .hotspot.tip-l.is-active .hotspot__tip { transform: none; } :where(body[data-view="shop-the-look"]) .hotspot.tip-l .hotspot__tip::after { left: auto; right: 20px; }
:where(body[data-view="shop-the-look"]) .hotspot.tip-b .hotspot__tip { bottom: auto; top: calc(100% + 12px); } :where(body[data-view="shop-the-look"]) .hotspot.tip-b .hotspot__tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
:where(body[data-view="shop-the-look"]) .hotspot__tip .eyebrow { grid-column: 1; font-size: 10px; letter-spacing: .08em; color: #857D73; }
:where(body[data-view="shop-the-look"]) .hotspot__tip strong { grid-column: 1; display: block; font-size: 14px; font-weight: 600; }
:where(body[data-view="shop-the-look"]) .hotspot__tip .small { grid-column: 1; }
:where(body[data-view="shop-the-look"]) .hotspot__add { grid-column: 2; grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: 10px; background: #1E1C1A; color: #F7F4EF; display: grid; place-items: center; }

/* Parça listesi */
:where(body[data-view="shop-the-look"]) .stl-copy { transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
:where(body[data-view="shop-the-look"]) .stl-copy.is-swapping { opacity: 0; transform: translateY(8px); }
:where(body[data-view="shop-the-look"]) .stl-title { margin-top: 4px; }
:where(body[data-view="shop-the-look"]) .stl-story { margin-top: 8px; }
:where(body[data-view="shop-the-look"]) .stl-list { display: grid; gap: 8px; margin-top: 18px; }
:where(body[data-view="shop-the-look"]) .stl-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); transition: border-color .2s, background .2s; }
:where(body[data-view="shop-the-look"]) .stl-item.is-active { border-color: var(--text); background: var(--panel); }
:where(body[data-view="shop-the-look"]) .stl-item__img { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--img-bg); }
:where(body[data-view="shop-the-look"]) .stl-item__img img { width: 100%; height: 100%; object-fit: cover; }
:where(body[data-view="shop-the-look"]) .stl-item__n { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 10.5px; font-weight: 600; }
:where(body[data-view="shop-the-look"]) .stl-item__info { display: grid; gap: 2px; min-width: 0; }
:where(body[data-view="shop-the-look"]) .stl-item__label { font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body[data-view="shop-the-look"]) .stl-item__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:where(body[data-view="shop-the-look"]) .stl-item__name:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(body[data-view="shop-the-look"]) .stl-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
:where(body[data-view="shop-the-look"]) .stl-item__meta .price { font-weight: 600; color: var(--text); }
:where(body[data-view="shop-the-look"]) .stl-item__variant { display: inline-flex; align-items: center; gap: 6px; }
:where(body[data-view="shop-the-look"]) .stl-item__acts { display: flex; align-items: center; gap: 6px; }
:where(body[data-view="shop-the-look"]) .stl-item__acts .icon-btn { width: 38px; height: 38px; border: 1px solid var(--line-strong); }
@media (max-width: 479px) { :where(body[data-view="shop-the-look"]) .stl-item { grid-template-columns: 64px minmax(0, 1fr); } :where(body[data-view="shop-the-look"]) .stl-item__acts { grid-column: 2; } }
:where(body[data-view="shop-the-look"]) .stl-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
:where(body[data-view="shop-the-look"]) .stl-total strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
:where(body[data-view="shop-the-look"]) .stl-ship { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--success); }
:where(body[data-view="shop-the-look"]) .stl-ctas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; }

/* Mobil ürün paneli */
:where(body[data-view="shop-the-look"]) .spot { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
:where(body[data-view="shop-the-look"]) .spot img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
:where(body[data-view="shop-the-look"]) .spot__info { --g: 4px; min-width: 0; }
:where(body[data-view="shop-the-look"]) .spot .spot__name { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; }
:where(body[data-view="shop-the-look"]) .spot__short { color: var(--text-2); }
:where(body[data-view="shop-the-look"]) .spot__variant { --g: 6px; }
:where(body[data-view="shop-the-look"]) .spot__acts { --g: 10px; }
:where(body[data-view="shop-the-look"]) .spot__acts .spot__add { flex: 1; }
:where(body[data-view="shop-the-look"]) .spot__acts .spot__wish { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--line-strong); }

/* AI Styling */
:where(body[data-view="shop-the-look"]) .stl-ai { display: grid; gap: 14px; align-items: center; }
@media (min-width: 900px) { :where(body[data-view="shop-the-look"]) .stl-ai { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; } }
:where(body[data-view="shop-the-look"]) .stl-ai__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); }
:where(body[data-view="shop-the-look"]) .stl-ai__text { display: grid; gap: 6px; justify-items: start; }
:where(body[data-view="shop-the-look"]) .stl-ai__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* ======================================================================
   WISHLIST
   Fakir düzeni: "Favorilerim (n)" başlığı, sade sekmeler, sıralama seçimi, .pcard ızgarası, boş durumda öneri rayı.
   ====================================================================== */
:where(body[data-view="wishlist"]) [hidden] { display: none !important; }
  :where(body[data-view="wishlist"]) .wl { padding-block: 14px clamp(48px, 6vw, 80px); }
  :where(body[data-view="wishlist"]) .wl__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-top: 14px; }
  :where(body[data-view="wishlist"]) .wl__title { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.5vw, 34px); line-height: 1.1; letter-spacing: -.015em; }
  :where(body[data-view="wishlist"]) .wl__count { color: var(--muted); font-variant-numeric: tabular-nums; }
  :where(body[data-view="wishlist"]) .wl__lead { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
  :where(body[data-view="wishlist"]) .wl__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(body[data-view="wishlist"]) .wl__tabs { margin-top: 16px; gap: 24px; }
  :where(body[data-view="wishlist"]) .wl__tabs .tab { font-size: 14px; padding: 12px 0; }
  :where(body[data-view="wishlist"]) .tab .n { margin-left: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
  :where(body[data-view="wishlist"]) .tab .n:not(:empty)::before { content: '('; }
  :where(body[data-view="wishlist"]) .tab .n:not(:empty)::after { content: ')'; }
  :where(body[data-view="wishlist"]) .wl__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; }
  :where(body[data-view="wishlist"]) .wl__hint { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
  :where(body[data-view="wishlist"]) .wl__hint .ico { color: var(--muted); }
  :where(body[data-view="wishlist"]) .wl__bar .link { min-height: 36px; }
  :where(body[data-view="wishlist"]) .wsort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  :where(body[data-view="wishlist"]) .wsort select { height: 40px; padding: 0 36px 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857D73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
  :where(body[data-view="wishlist"]) .wsort select:hover { border-color: var(--warm-gray); }
  @media (max-width: 1023.98px) { :where(body[data-view="wishlist"]) .wsort select { font-size: 16px; } }
  :where(body[data-view="wishlist"]) .panel-in { animation: page-in .45s var(--ease-out) both; }

  /* ---------- Ürünler ---------- */
  :where(body[data-view="wishlist"]) .wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  @media (min-width: 768px) { :where(body[data-view="wishlist"]) .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; } }
  @media (min-width: 1024px) { :where(body[data-view="wishlist"]) .wgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { :where(body[data-view="wishlist"]) .wgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  :where(body[data-view="wishlist"]) .witem { display: grid; gap: 6px; align-content: start; min-width: 0; transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
  :where(body[data-view="wishlist"]) .witem.is-leaving { opacity: 0; transform: scale(.95); pointer-events: none; }
  :where(body[data-view="wishlist"]) .witem.is-entering { animation: page-in .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  :where(body[data-view="wishlist"]) .whint { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 12px; }
  :where(body[data-view="wishlist"]) .whint--drop { color: var(--accent); font-weight: 500; }
  :where(body[data-view="wishlist"]) .whint--low { color: var(--text-2); }
  :where(body[data-view="wishlist"]) .whint--low::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  :where(body[data-view="wishlist"]) .whint--ok { color: var(--muted); }
  :where(body[data-view="wishlist"]) .wnotify { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
  :where(body[data-view="wishlist"]) .wnotify:hover { border-color: var(--text); }
  :where(body[data-view="wishlist"]) .wnotify[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
  :where(body[data-view="wishlist"]) .wnotify[aria-pressed="true"] .wnotify__off, :where(body[data-view="wishlist"]) .wnotify:not([aria-pressed="true"]) .wnotify__on { display: none; }

  /* ---------- Koleksiyonlar ---------- */
  :where(body[data-view="wishlist"]) .cgrid { display: grid; gap: 12px; margin-top: 16px; }
  @media (min-width: 768px) { :where(body[data-view="wishlist"]) .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
  :where(body[data-view="wishlist"]) .citem { position: relative; transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
  :where(body[data-view="wishlist"]) .citem.is-leaving { opacity: 0; transform: scale(.97); }
  :where(body[data-view="wishlist"]) .citem.panel-in { animation-delay: calc(var(--i, 0) * 60ms); }
  :where(body[data-view="wishlist"]) .citem .ecard { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  @media (min-width: 1024px) { :where(body[data-view="wishlist"]) .citem .ecard { aspect-ratio: 16 / 9; } }
  :where(body[data-view="wishlist"]) .citem .ecard__body .h2 { font-size: clamp(26px, 2.4vw, 36px); }
  :where(body[data-view="wishlist"]) .citem .ecard__body p:not(.eyebrow) { color: rgba(255,255,255,.85); font-size: 13.5px; max-width: 46ch; }
  :where(body[data-view="wishlist"]) .citem__save { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); color: #1E1C1A; box-shadow: 0 1px 4px rgba(0,0,0,.12); transition: transform .2s; }
  :where(body[data-view="wishlist"]) .citem__save:hover { transform: scale(1.08); }
  :where(body[data-view="wishlist"]) .citem__save[aria-pressed="true"] .heart { --ico-fill: 1; color: var(--accent); }
  :where(body[data-view="wishlist"]) .citem__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  :where(body[data-view="wishlist"]) .citem__count { font-size: 12px; color: rgba(255,255,255,.78); }
  :where(body[data-view="wishlist"]) .wsugg { margin-top: 32px; }
  :where(body[data-view="wishlist"]) .sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  @media (min-width: 900px) { :where(body[data-view="wishlist"]) .sugg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
  :where(body[data-view="wishlist"]) .scard { display: grid; gap: 4px; align-content: start; padding: 8px 8px 12px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); }
  :where(body[data-view="wishlist"]) .scard__img { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--img-bg); margin-bottom: 6px; }
  :where(body[data-view="wishlist"]) .scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
  :where(body[data-view="wishlist"]) .scard:hover .scard__img img { transform: scale(1.04); }
  :where(body[data-view="wishlist"]) .scard .citem__save { top: 8px; right: 8px; width: 36px; height: 36px; }
  :where(body[data-view="wishlist"]) .scard .eyebrow { padding-inline: 4px; }
  :where(body[data-view="wishlist"]) .scard__name { padding-inline: 4px; font-size: 14.5px; font-weight: 600; line-height: 1.3; }

  /* ---------- Boş durum ---------- */
  :where(body[data-view="wishlist"]) .wempty { display: grid; justify-items: center; text-align: center; gap: 10px; margin-top: 16px; padding: clamp(32px, 5vw, 56px) 20px; border-radius: 18px; background: var(--panel); }
  :where(body[data-view="wishlist"]) .wempty__ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elev); color: var(--accent); margin-bottom: 4px; }
  :where(body[data-view="wishlist"]) .wempty__ico .heart { width: 30px; height: 30px; color: var(--accent); }
  :where(body[data-view="wishlist"]) .wempty__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
  :where(body[data-view="wishlist"]) .wempty__lead { max-width: 46ch; font-size: 14px; color: var(--text-2); }
  :where(body[data-view="wishlist"]) .wempty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
  :where(body[data-view="wishlist"]) .wrail .hsec { padding-block: 28px 0; }
  :where(body[data-view="wishlist"]) .wrail .hsec > .container { padding-inline: 0; }

  /* ---------- Razor: satır içi stillerin karşılıkları ---------- */
  :where(body[data-view="wishlist"]) .wishlist-panel:empty { min-height: 40vh; }
  :where(body[data-view="wishlist"]) .wl-block { display: block; }