/* peşintaksit — görsel dil
   Mürekkep siyahı + kırık beyaz zemin, tek imza rengi: "vade farkı sıfır" yeşili (lime).
   Başlıklar Bricolage Grotesque, metin Geist, rakam/veri Geist Mono (tablo rakamları hizalı).
   İmza öğesi: taksit şeridi (.strip).
   Tip ölçeği: display 88/50 · h1 52/34 · h2 32/24 · h3 20/18 · gövde 15-16 · küçük 13 · etiket 11 (büyük harf).
   Ağırlık 800 yalnızca ana başlıklarda; harf aralığı boyutla azalır (-0.035em → 0). */

:root {
  --paper: #f3f1ea;
  --surface: #fbfaf7;
  --text: #0f100d;
  --text-2: #3a3b35;
  --muted: #6d6c64;
  --line: #d9d6cb;
  --line-soft: #e7e4da;
  --lime: #d4ff3f;
  --lime-soft: #ecf7c4;
  --lime-text: #3f5a00;
  --night: #0f100d;
  --night-2: #1b1c18;
  --night-text: #efede6;
  --night-muted: #9d9c92;
  --danger: #b3261e;
  /* 3. ve 4. renk: krem = bilgi, mercan = uyarı (gizli vade farkı, zam); fırsat puanı ayrı, --score-good…/--score-night-… (limon) */
  --accent: #d9bf87; /* krem (açıkta kum tonu): bilgi, kart kampanyası */
  --accent-soft: #f3e9d2;
  --accent-text: #6b5320;
  --on-accent: #0f100d;
  --warn: #d63d22;
  --warn-soft: #fde8e2;
  --warn-text: #a3290f;
  /* Olumlu yeşil: KAZANÇ (Hesapla bölümü, detail.css .gx-*) rengi, lime değil (lime yalnızca "peşin fiyatına", "=",
     "0" ve dolu taksit kutusu; mercan değil: mercan yalnızca uyarı). *-on dolu zemin üstündeki yazı, *-soft açık zemin. */
  --good: #17804a;
  --good-on: #ffffff;
  --good-text: #17663d;
  --good-soft: #dcefe2;
  --fair-text: #8a5a00; /* "Makul": nötr kehribar */
  --fair-soft: #f6e7c6;
  /* 28 Eylül (sahip): fırsat puanı yeniden YEŞİL (limon değil); çok iyi = dolu yeşil, iyi = açık yeşil, makul = kehribar. */
  /* Fırsat puanı (26 Eylül, sahibin isteği: yeşil yerine marka limonu, --good ailesinden ayrı — kazanç yeşil kalır).
     27 Eylül, sahip "Çok iyi" ve "İyi" ayırt edilsin dedi: "Çok iyi" dolu limon (marka rengi) olarak kaldı, "İyi"
     --good (yeşil) ailesine döndü, "Makul" kehribar aynen kaldı. Açık zeminde limon ZEMİN + mürekkep (koyu) yazı
     (limon açık zeminde yazı olarak okunmaz); koyu zeminde limon yazı/çubuk olabilir. --score-night-*: koyu fiyat
     kutusu (.deal, her iki temada da koyu, sabit — bu yüzden --score-night-good sabit hex, --good gibi temaya göre
     değişmez). --score-good*: açık zeminde "Çok iyi" (kart, karşılaştırma); "İyi" doğrudan --good-soft/--good-text
     kullanır (bkz. .card-score, .score-light.score-good). */
  --score-night-top: #45c985;
  --score-night-good: #45c985;
  --score-night-fair: #f0bf5a;
  --score-good: var(--good);
  --score-good-on: var(--good-on);
  --score-good-text: var(--good-text);
  --score-good-soft: var(--good-soft);
  --radius: 10px;
  /* Ürün kartı ve ürün sayfası görseli: tonlu kuyu (beyaz zeminli fotoğraflar multiply ile bu tona oturur),
     kart çizgisi, taksit kutusundaki şeridin boş kutuları */
  --media-well: #f1eee6;
  --card-line: #d2cec1;
  --plan-off: rgba(63, 90, 0, 0.16);
  --chart-context: #8f8c80; /* grafikte "mevcut" (bağlam) serisi */
  --chart-accent: var(--lime-text); /* grafikte "bu ürün" serisi: açıkta yosun, koyuda lime */
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme: light;
}

/* Koyu tema: sistem koyuysa (kullanıcı "gündüz" seçmediyse) ya da kullanıcı "gece" seçtiyse */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0f100d;
    --surface: #171814;
    --text: #efede6;
    --text-2: #cfcdc4;
    --muted: #9d9c92;
    --line: #2d2e29;
    --line-soft: #23241f;
    --lime-soft: #26300d;
    --lime-text: #d4ff3f;
    --night: #070806;
    --night-2: #151612;
    --danger: #ff8a80;
    --accent: #f1e3c2;
    --accent-soft: #2b2517;
    --accent-text: #f1dcae;
    --on-accent: #0f100d;
    --warn: #ff7a59;
    --warn-soft: #3a1810;
    --warn-text: #ff8f73;
    --good: #45c985;
    --good-on: #0f100d;
    --good-text: #86dfae;
    --good-soft: #15301f;
    --fair-text: #f0bf5a;
    --fair-soft: #33270f;
    /* --score-good* burada tekrar edilmiyor: :root'taki tanım zaten var(--lime)/var(--lime-text)/var(--lime-soft)
       üzerinden referans veriyor, bunlar bu blokta yeniden tanımlandığı için --score-good* otomatik uyuyor */
    --chart-context: #5d5c55;
    --media-well: #d8d3c6;
    --card-line: #393a34;
    --plan-off: rgba(212, 255, 63, 0.16);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #0f100d;
  --surface: #171814;
  --text: #efede6;
  --text-2: #cfcdc4;
  --muted: #9d9c92;
  --line: #2d2e29;
  --line-soft: #23241f;
  --lime-soft: #26300d;
  --lime-text: #d4ff3f;
  --night: #070806;
  --night-2: #151612;
  --danger: #ff8a80;
  --accent: #f1e3c2;
  --accent-soft: #2b2517;
  --accent-text: #f1dcae;
  --on-accent: #0f100d;
  --warn: #ff7a59;
  --warn-soft: #3a1810;
  --warn-text: #ff8f73;
  --good: #45c985;
  --good-on: #0f100d;
  --good-text: #86dfae;
  --good-soft: #15301f;
  --fair-text: #f0bf5a;
  --fair-soft: #33270f;
  /* --score-good* burada tekrar edilmiyor, bkz. yukarıdaki :root:not([data-theme='light']) bloğundaki not */
  --chart-context: #5d5c55;
  --media-well: #d8d3c6;
  --card-line: #393a34;
  --plan-off: rgba(212, 255, 63, 0.16);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.018em; line-height: 1.08; }
/* Veri rakamları: Geist'in tablo rakamı yok, bu yüzden tutarlar ve tablolar Geist Mono ile hizalanır */
.mono, .receipt-row b, .plan-grid td, .offer-price, .ph-stats dd, .cmp-table td, .budget-facts dd,
.paychart-tip b, .filter-list .count, .sw-parts b, table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* --- Üst kısım ------------------------------------------------------------ */

.notice-strip { background: var(--night); color: var(--night-muted); font-size: 12px; text-align: center; padding: 6px 16px; letter-spacing: 0.01em; }
.topbar { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar-inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -0.045em; text-decoration: none; white-space: nowrap; line-height: 1; }
.logo span { background: var(--lime); color: var(--night); padding: 1px 6px 3px; margin-left: 2px; border-radius: 6px; display: inline-block; transform: rotate(-2deg); }
/* Seçilen logo (26 Eylül 2026): "ş"nin çengeli yerine "=" (taksitlerin toplamı = peşin fiyat). Harf "s" yazılır,
   altına iki çizgi çizilir; boyut em ile, her logo boyunda aynı oranda. */
.lg-s { position: relative; font-style: normal; display: inline-block; line-height: 1; }
.lg-s::before, .lg-s::after { content: ''; position: absolute; left: 50%; width: 0.3em; height: 0.075em; margin-left: -0.13em; border-radius: 0.03em; background: currentColor; }
.lg-s::before { bottom: -0.1em; }
.lg-s::after { bottom: -0.22em; }
.search { flex: 1; max-width: 520px; position: relative; }
.search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 15px; }
.search input:focus { outline: none; border-color: var(--text); }
.search-icon { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.account-link { margin-left: auto; }
.menu-btn { display: none; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; place-items: center; padding: 0; }
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn[aria-expanded='true'] { background: var(--text); color: var(--paper); border-color: var(--text); }

/* Kategori şeridi: menü düğmesi + sığdığı kadar kategori (sığmayanlar ikinci satıra düşüp gizlenir) + Rehber */
.catbar { display: flex; align-items: center; gap: 4px; padding-top: 2px; padding-bottom: 10px; min-width: 0; }
.catbar-links { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; height: 34px; overflow: hidden; }
.catbar a, .catbar-menu { text-decoration: none; white-space: nowrap; font-size: 14px; color: var(--muted); padding: 6px 12px; border-radius: 999px; line-height: 22px; }
.catbar a:hover { color: var(--text); background: var(--line-soft); }
.catbar a[aria-current='true'] { color: var(--paper); background: var(--text); }
.catbar a.is-off { visibility: hidden; }
.catbar .catbar-guide { color: var(--text); font-weight: 600; flex-shrink: 0; }
.catbar-menu { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; padding: 5px 14px 5px 10px; margin-right: 6px; }
.catbar-menu svg { width: 16px; height: 16px; }
.catbar-menu:hover { border-color: var(--text); }
.catbar-menu[aria-expanded='true'] { background: var(--text); color: var(--paper); border-color: var(--text); }

/* Kategori menüsü: masaüstünde üst çubuğun altında geniş panel, mobilde soldan çekmece */
.catmenu[hidden] { display: none; }
.catmenu-scrim { position: fixed; inset: var(--menu-top, 0) 0 0 0; background: rgba(15, 16, 13, 0.28); z-index: 28; animation: fade 0.16s ease; }
.catmenu.is-mega .catmenu-panel { position: fixed; top: var(--menu-top, 0); left: 0; right: 0; z-index: 29; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); max-height: calc(100vh - var(--menu-top, 0px)); overflow: auto; animation: drop 0.16s ease; }
.catmenu-inner { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding-top: 22px; padding-bottom: 28px; }
.catmenu-list { list-style: none; margin: 0; padding: 0 0 0 0; border-right: 1px solid var(--line); padding-right: 16px; }
.catmenu-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-size: 15px; color: var(--text-2); }
.catmenu-item .cm-ico { width: 22px; height: 22px; color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .catmenu-scrim { background: rgba(0, 0, 0, 0.55); } }
:root[data-theme='dark'] .catmenu-scrim { background: rgba(0, 0, 0, 0.55); }
.catmenu-item .cm-count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.catmenu-item .cm-chev { width: 14px; height: 14px; color: var(--muted); opacity: 0; }
.catmenu-item:hover, .catmenu-item:focus-visible, .catmenu-item.is-active { background: var(--line-soft); color: var(--text); }
.catmenu-item.is-active .cm-chev { opacity: 1; }
.catmenu-item[aria-current='true'] .cm-name { font-weight: 600; }
.catmenu-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.catmenu-all .catmenu-item { grid-template-columns: minmax(0, 1fr) auto; font-weight: 600; color: var(--text); }
.catmenu-detail { min-width: 0; }
.cm-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--text); }
.cm-head > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-head-ico { width: 30px; height: 30px; flex-shrink: 0; }
.cm-head h2 { font-size: 28px; font-weight: 700; margin: 0; }
.cm-head .num { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.cm-all { font-weight: 600; font-size: 14px; text-underline-offset: 3px; white-space: nowrap; }
.cm-subs { list-style: none; margin: 0; padding: 12px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; }
.cm-subs a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; font-size: 15px; }
.cm-subs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cm-subs .num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cm-feat-title { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.cm-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cm-prod { display: grid; gap: 2px; text-decoration: none; min-width: 0; }
.cm-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); margin-bottom: 8px; }
.cm-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cm-thumb .ph { border-radius: 0; }
.cm-prod.is-loading .cm-thumb { background: var(--line-soft); border-color: var(--line-soft); }
.cm-prod-name { font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-prod-price { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.cm-prod-plan { font-size: 12.5px; line-height: 1.3; color: var(--text-2); }
.cm-prod-plan b { font-weight: 600; }
.cm-prod:hover .cm-prod-name { text-decoration: underline; text-underline-offset: 3px; }
/* Mobil çekmece */
.catmenu.is-drawer .catmenu-scrim { inset: 0; z-index: 60; }
.catmenu.is-drawer .catmenu-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); z-index: 61; background: var(--surface); display: flex; flex-direction: column; box-shadow: 20px 0 50px -20px rgba(0, 0, 0, 0.45); animation: slide 0.2s ease; }
/* Çekmecenin içi (iki seviye, kısayol kutuları, grup satırları): public/menu.css */
.catmenu-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; }
.catmenu-close svg, .onboard-close svg, .cardbar-close svg { width: 18px; height: 18px; }
body.menu-open { overflow: hidden; }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes slide { from { transform: translateX(-100%); } }
@media (max-width: 980px) {
  .catmenu-inner { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  .cm-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Taksit şeridi (imza öğesi) ------------------------------------------- */

.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; width: 100%; height: 8px; }
.strip i { border-radius: 2px; background: var(--line); }
.strip i.on { background: var(--text); }
.strip-lime i { background: rgba(255, 255, 255, 0.14); }
.strip-lime i.on { background: var(--lime); }

/* --- Hero ------------------------------------------------------------------ */
/* Kısa hero: başlık, tek cümle, büyük arama (asıl eylem), düz kanıt satırı; sağda fiş kartı */

.hero { background: var(--night); color: var(--night-text); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 75% 40%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 75% 40%, #000 15%, transparent 70%); pointer-events: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr); gap: 64px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 78px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; margin: 0 0 20px; }
.hero h1 .hl { color: var(--night); background: var(--lime); padding: 0 0.12em; border-radius: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Üç başlık yönü (ve alt cümleleri) aynı ızgara hücresinde üst üste; <html data-hero> hangisinin görüneceğini
   seçer, yoksa A. Seçilmeyenler visibility:hidden: ekran okuyucu okumaz, yükseklik hep aynı, yerleşim kaymaz. */
.hero-title, .hero-lead { display: grid; }
.hv { grid-area: 1 / 1; display: block; }
.hv-b, .hv-c, :root[data-hero='b'] .hv-a, :root[data-hero='c'] .hv-a { visibility: hidden; }
:root[data-hero='b'] .hv-b, :root[data-hero='c'] .hv-c { visibility: visible; }
.hero h1 .hv-c { font-size: 0.8em; line-height: 1.02; align-self: center; }
.hero-lead { font-size: 18px; color: var(--night-muted); max-width: 50ch; margin: 0 0 28px; }
.hero-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 620px; padding: 6px 6px 6px 50px; border-radius: 999px; background: #efede6; color: #0f100d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hero-search:focus-within { box-shadow: 0 0 0 3px var(--lime); }
.hero-search .search-icon { left: 19px; width: 20px; height: 20px; stroke: #6d6c64; }
.hero-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: #0f100d; font-size: 17px; padding: 0; }
.hero-search input::placeholder { color: #6d6c64; }
.hero-search input:focus { outline: none; }
.hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hero-search .btn { height: 48px; padding: 0 26px; flex-shrink: 0; }
.hero-search .suggest { top: calc(100% + 8px); color: var(--text); }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--night-muted); margin: 0 0 20px; letter-spacing: 0; }
.theme-btn { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.theme-btn:hover { border-color: var(--text); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-sun { display: none; }
:root[data-theme='dark'] .theme-btn .i-sun { display: block; }
:root[data-theme='dark'] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-btn .i-sun { display: block; }
  :root:not([data-theme='light']) .theme-btn .i-moon { display: none; }
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.how3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--text); margin: 72px 0 88px; }
.how3 > div { padding: 26px 28px 8px 0; }
.how3 > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.how3 b { width: 30px; height: 30px; border-radius: 7px; background: var(--lime); color: #0f100d; font-family: var(--display); font-weight: 800; font-size: 16px; display: grid; place-items: center; margin-bottom: 14px; }
.how3 h3 { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.how3 p { margin: 0; color: var(--muted); max-width: 36ch; }
.how3 .how-more { grid-column: 1 / -1; max-width: none; padding-top: 18px; }
@media (max-width: 760px) {
  .how3 { grid-template-columns: 1fr; }
  .how3 > div, .how3 > div + div { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}
.hero-proof { font-family: var(--mono); font-size: 13px; color: var(--night-muted); margin: 18px 0 0; letter-spacing: 0; }

/* Fiş kartı: günün fırsatı (tamamı tıklanır). Kısa fiş (kâğıt, mono rakam, kesikli çizgi, tırtıklı alt kenar) +
   logodaki "taksit" hapı gibi -2° eğik lime hap; hap fişin sağ alt köşesinden taşar. Lime yalnızca hapın içindeki
   sözde ("= peşin fiyat"); taksit ve toplam mürekkeple. --tilt fişin eğimi: hap her durumda ekranda -2° kalır. */
.receipt { --tilt: 1.5deg; display: block; container-type: inline-size; text-decoration: none; background: #efede6; color: #0f100d; border-radius: 4px 4px 0 0; padding: 16px 22px 18px; position: relative; transform: rotate(var(--tilt)); transition: transform 0.25s ease; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.receipt:hover, .receipt:focus-visible { --tilt: 0deg; transform: rotate(var(--tilt)) translateY(-4px); }
.receipt:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 7px 10px, transparent 6px, #efede6 6.5px) 0 0 / 14px 10px repeat-x; }
.receipt-head { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6d6c64; padding-bottom: 12px; border-bottom: 1px dashed #b9b6aa; }
.receipt-head span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.receipt-title-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.receipt-img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; flex-shrink: 0; }
.receipt-title { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.receipt-title small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0; color: #6d6c64; margin-bottom: 3px; }
/* Önce aylık ödeme (fişin en büyük rakamı), hemen altında taksit sayısı + şerit; --len ile tek satıra sığar */
.receipt-monthly { font-family: var(--display); font-size: 36px; font-size: min(36px, calc((100cqi - 4px) / (var(--len, 14) * 0.48))); font-weight: 750; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.receipt-monthly .per { color: #6d6c64; }
.receipt-plan { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.receipt-plan b { font-family: var(--mono); font-size: 15px; font-weight: 600; white-space: nowrap; }
.receipt .strip { flex: 1; min-width: 60px; height: 10px; }
.receipt .strip i { background: #d8d5ca; }
.receipt .strip i.on { background: #0f100d; }
.receipt-sum { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 11px 150px 0 0; border-top: 1px dashed #b9b6aa; font-size: 14px; color: #6d6c64; }
.receipt-sum > span { white-space: nowrap; }
.receipt-sum b { font-family: var(--mono); font-size: 17px; font-weight: 600; color: #0f100d; white-space: nowrap; }
/* R4 "fiyat düştü" (brand/vitrin/efekt-vitrini-1.html .drop/.old/.new): "Toplam ödeme"nin eski/yeni hâli.
   .receipt-drop-wait/-go public/deck.js ekler (görünüme girince bir kez); JS'siz ya da reduced-motion'da
   -wait hiç eklenmez, bu yüzden aşağıdaki iki kural devreye girmez ve eski/yeni her zaman sonuç hâlinde görünür. */
.receipt-drop { display: inline-flex; flex-direction: column; align-items: flex-end; align-self: flex-end; line-height: 1.25; white-space: nowrap; }
.receipt-drop .old { font-family: var(--mono); font-size: 12px; font-weight: 600; color: #6d6c64; position: relative; }
.receipt-drop .old::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--warn); transform: scaleX(1); transform-origin: left; }
.receipt-drop .new { font-family: var(--mono); font-size: 17px; font-weight: 600; color: #0f100d; }
.receipt-drop.receipt-drop-wait .old::after { transform: scaleX(0); }
.receipt-drop.receipt-drop-wait .new { opacity: 0; transform: translateY(6px); }
.receipt-drop.receipt-drop-wait.receipt-drop-go .old::after { transition: transform 0.4s 0.1s; transform: scaleX(1); }
.receipt-drop.receipt-drop-wait.receipt-drop-go .new { transition: opacity 0.4s 0.45s ease, transform 0.4s 0.45s ease; opacity: 1; transform: none; }
.receipt-pill { position: absolute; z-index: 1; right: -12px; bottom: -12px; background: var(--lime); color: #0f100d; border-radius: 10px; padding: 7px 14px 8px; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; white-space: nowrap; transform: rotate(calc(-2deg - var(--tilt))); transition: transform 0.25s ease; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .receipt, .card, .card-media img, .catmenu-panel, .catmenu-scrim { transition: none; animation: none; }
  /* Ek güvence: JS zaten -wait eklemiyor (public/deck.js), ama eklerse bile burada sonuç durum zorlanır */
  .receipt-drop.receipt-drop-wait .old::after, .receipt-drop.receipt-drop-wait .new { transition: none; transform: none; opacity: 1; }
}

/* "Günün fırsatı" destesi (parts.deckHtml, deck.js): fişler aynı ızgara hücresinde üst üste; öndeki kart (pos 0)
   ve arkasında hafif kaymış / eğik iki kart görünür, diğerleri gizli. Yükseklik en uzun fişe göre: kart değişince
   yerleşim kaymaz. Arkadaki kartların lime hapı gizli (lime yalnızca öndeki sözde). Sponsorlu etiket krem, lime değil. */
.deck { position: relative; min-width: 0; --deck-ms: 5s; }
.deck-stack { display: grid; padding-top: 24px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.deck-slide { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease; }
.deck-slide > .receipt { flex: 1; }
.deck-slide[data-pos='0'] { z-index: 3; }
.deck-slide[data-pos='1'] { z-index: 2; transform: translate(-14px, -12px) rotate(-3.5deg); }
.deck-slide[data-pos='2'] { transform: translate(12px, -22px) rotate(3deg); }
/* pos -1: pos 1'in aynası (önceki karta geçişte de yakın, görünür bir kart olsun — ileri/geri geçiş aynı tür hareket olsun) */
.deck-slide[data-pos='-1'] { z-index: 2; transform: translate(14px, -12px) rotate(3.5deg); }
.deck-slide:not([data-pos='0']):not([data-pos='1']):not([data-pos='2']):not([data-pos='-1']) { opacity: 0; visibility: hidden; transform: translateY(-22px) scale(0.96); }
.deck-slide:not([data-pos='0']) .receipt { box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7); }
.deck-slide:not([data-pos='0']) .receipt > * { opacity: 0.55; }
.deck-slide:not([data-pos='0']) .receipt-pill { opacity: 0; }
.deck-dragging .deck-slide[data-pos='0'] { transition: none; cursor: grabbing; }
.deck-slide.deck-fly { z-index: 4; animation: deck-fly 0.36s cubic-bezier(0.4, 0, 0.8, 0.6) forwards; }
@keyframes deck-fly {
  from { transform: translateX(var(--from, 0px)); opacity: 1; }
  to { transform: translateX(calc(var(--fx, -1) * 115%)) rotate(calc(var(--fx, -1) * 14deg)); opacity: 0; }
}
.receipt-spon { background: #d9bf87; color: #0f100d; border-radius: 4px; padding: 2px 7px 3px; margin: -2px 0; letter-spacing: 0.08em; }
.deck-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.deck:not(.deck-js) .deck-ctrl { visibility: hidden; } /* JavaScript yoksa yalnızca öndeki kart */
.deck-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: var(--night-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.deck-btn:hover { background: rgba(255, 255, 255, 0.08); }
.deck-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.deck-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck-meta { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.deck-pos { font-family: var(--mono); font-size: 13px; color: var(--night-muted); white-space: nowrap; }
.deck-pos b { color: var(--night-text); font-weight: 600; }
.deck-dots { display: flex; gap: 5px; justify-content: flex-end; }
.deck-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.2s, transform 0.2s; }
.deck-dots i.on { background: var(--night-text); transform: scale(1.25); }
.deck-bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.deck-bar i { display: block; height: 100%; width: 100%; background: rgba(239, 237, 230, 0.6); transform-origin: left; transform: scaleX(0); }
.deck-bar.run i { animation: deck-bar var(--deck-ms) linear forwards; }
.deck-paused .deck-bar.run i { animation-play-state: paused; }
@keyframes deck-bar { to { transform: scaleX(1); } }
@media (max-width: 980px) { .deck { max-width: 460px; } }
@media (max-width: 640px) {
  .deck-stack { padding-top: 26px; }
  .deck-slide[data-pos='1'] { transform: translateY(-14px) scale(0.95) rotate(-2.5deg); }
  .deck-slide[data-pos='2'] { transform: translateY(-26px) scale(0.9) rotate(2.5deg); }
  .deck-slide[data-pos='-1'] { transform: translateY(-14px) scale(0.95) rotate(2.5deg); }
  .deck-ctrl { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-slide, .deck-dots i { transition: none; }
  .deck-slide.deck-fly { animation: none; }
  .deck-bar { visibility: hidden; } /* kendiliğinden geçiş yok */
}

/* --- Katalog --------------------------------------------------------------- */

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 56px 0 24px; flex-wrap: wrap; }
.section-head h2, .list-head h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 750; margin: 0; letter-spacing: -0.026em; }
.section-head h2 sup { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; vertical-align: top; margin-left: 6px; }
.section-head p { margin: 8px 0 0; color: var(--muted); }
.list-head { margin-top: 40px; }
.list-head h1 { font-size: clamp(32px, 4.4vw, 52px); }
.section-head p.list-summary { font-family: var(--mono); font-size: 14px; color: var(--text-2); margin-top: 10px; letter-spacing: 0; }
.catalog { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; margin-bottom: 72px; }
.filters { align-self: start; position: sticky; top: 136px; max-height: calc(100vh - 150px); overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.filters h3, .filter-group summary { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 28px 0 10px; }
.filters h3:first-child { margin-top: 0; }
/* Kapalı başlayan filtre grupları (Marka, Mağaza) */
.filter-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0 0 8px; margin-bottom: 0; border-bottom: 1px solid var(--line-soft); }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s; }
.filter-group[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.filter-group summary:hover { color: var(--text); }
.filter-group[open] summary { margin-bottom: 4px; }
.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-list button { width: 100%; text-align: left; background: none; border: 0; padding: 7px 0; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.filter-list button:hover { color: var(--text); }
.filter-list button[aria-pressed='true'] { color: var(--text); font-weight: 600; }
.filter-list button[aria-pressed='true'] span:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--lime); border: 1px solid var(--text); border-radius: 2px; margin-right: 8px; }
.filter-list .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 400; }
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 0 6px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.1; }
.chip small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.chip:hover { border-color: var(--text); }
.chip[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: var(--paper); }
.chip[aria-pressed='true'] small { color: inherit; opacity: 0.7; }
.filters input[type='number'] { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.link-btn { background: none; border: 0; padding: 0; margin-top: 22px; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 14px; flex-wrap: wrap; }
.toolbar .sort { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 14px; color: var(--muted); }
.toolbar select { height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); min-width: 0; max-width: 100%; }
.btn.filter-toggle { display: none; }

/* Ürün ızgarası: ayrı kartlar; az sonuçta en fazla 3 sütun (boş delik kalmasın) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.grid-few { grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 32px) / 3)), 1fr)); }
/* --- Ürün kartı (public/parts.js productCardHtml; sunucu ve tarayıcı aynı HTML) -----------------------
   Çerçeve --card-line, görsel kenardan 6 px içeride tonlu bir kuyuda (beyaz zeminli fotoğraflar multiply ile
   kuyunun tonuna oturur; gölge yok). Gövde: tür + puan → ad (2 satır) → aylık ödeme (en büyük rakam) → taksit
   sayısı + toplam → ince şerit → mağaza. Tutarlar tek satır, bir sıradaki kartlar eşit boy. */
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; position: relative; transition: border-color 0.15s, transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1); }
.card:hover { border-color: var(--text); }
.card:hover .card-media img { transform: scale(1.04); }
@media (hover: hover) { .card:hover { transform: translateY(-2px); } }
.card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.card-media { position: relative; margin: 6px 6px 0; aspect-ratio: 5 / 4; border-radius: 8px; overflow: hidden; background: var(--media-well); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; mix-blend-mode: multiply; transition: transform 0.35s ease; }
/* Görseli olmayan ürün: yer tutucu kutu kendi zemininde (kuyu tonu ve multiply yok), ince çizgiyle */
.card-media.is-ph { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.card-media .ph-brand { left: 10px; top: 9px; }
.card-media .ph-strip { right: 10px; bottom: 10px; }
.card-media:has(.card-tag) .ph-strip { display: none; } /* etiketle çakışmasın */
.card-tag { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; container-type: inline-size; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
/* Ürün türü (alt kategori, yoksa kategori): küçük, büyük harf, soluk */
.card-kind { min-width: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fırsat puanı yalnızca iyi (açık limon) ve çok iyi (dolu limon) fırsatta; vasat / zayıf ürün sayfasında */
.card-score { flex: none; height: 20px; min-width: 34px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center; font-family: var(--display); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; border: 1px solid transparent; background: var(--score-good-soft); color: var(--score-good-text); }
.card-score.s-top { background: var(--score-good); color: var(--score-good-on); }
.card-title { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin: 5px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
/* Önce aylık ödeme (parts.js payTerms): kartın en büyük rakamı "1.825,83 TL/ay", hiç bölünmez. Tutar uzunsa ya da
   kart darsa yazı küçülür: --len karakter sayısı (parts.js monthlyText), bu yazıda bir karakter ≈ 0,5 em (kuruş ve
   "/ay" küçük olduğu için ortalama daha dar), 100cqi kart gövdesinin genişliği. Kuruş ve "/ay" küçük. */
.card-pay { margin-top: 8px; }
.card-monthly { display: block; font-family: var(--display); font-size: clamp(19px, 12cqi, 26px); font-size: min(clamp(19px, 12cqi, 26px), calc(100cqi / (var(--len, 14) * 0.48))); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.kurus { font-size: 0.68em; font-weight: 600; letter-spacing: 0; }
.per { font-family: var(--sans); font-size: 0.56em; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 0.18em; }
/* Hemen altında taksit sayısı ve TOPLAM (reklam kuralı: okunur büyüklükte, normal kontrast; gizlenmez / kesilmez).
   Parçalar (.nw) bölünmez, satır parça arasından kırılır; iki satırlık yer ayrılır ki bir sıradaki kartlarda şeritler
   aynı hizada kalsın. Lime yalnızca "= peşin" işaretinde. */
.card-terms { display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--text-2); min-height: 2.7em; font-variant-numeric: tabular-nums; }
.card-terms b { font-weight: 600; color: var(--text); }
.nw { white-space: nowrap; }
.card-terms mark, .buybar-info mark, .sg-plan mark, .gx-top mark { background: var(--lime); color: #0f100d; padding: 0 4px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
/* Hangi kartlar (parts.js cardLineHtml): taksit satırının altında TEK satır, yeri her durumda ayrılı (sunucu misafir
   halini çizer, tarayıcı seçilen kartlara göre değiştirir; kayma yok, bir sıradaki kartlar eşit boy). Her genişlik
   basamağının metni hazır gelir (.cw.w-a…w-f), kart gövdesinin genişliğine göre (container query) yalnızca biri görünür;
   yine de taşarsa üç noktayla kesilir (tam metin title'da ve sr-only). Misafir: nötr ("Geçerli:" soluk, adlar koyu).
   Seçilen kartla taksit: krem not (lime değil). Kartla taksit yok: nötr. */
.card-cards { display: block; height: 17px; margin-top: 5px; font-size: 12.5px; line-height: 17px; color: var(--text-2); }
.cc-v { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-cards .cw { display: none; }
.card-cards .w-c { display: inline; } /* container query desteklemeyen tarayıcı: masaüstü metni */
.card-cards b { font-weight: 600; color: var(--text); }
.cc-k { color: var(--muted); }
.is-mine .cc-v { width: fit-content; padding: 0 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-text); }
.is-mine b { color: inherit; font-weight: 650; }
.cc-row { display: inline-flex; max-width: 100%; vertical-align: top; }
.cc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cc-tail { flex: none; white-space: pre; }
@container (max-width: 139.98px) { .card-cards .cw { display: none; } .card-cards .w-a { display: inline; } }
@container (min-width: 140px) and (max-width: 199.98px) { .card-cards .cw { display: none; } .card-cards .w-b { display: inline; } }
@container (min-width: 200px) and (max-width: 279.98px) { .card-cards .cw { display: none; } .card-cards .w-c { display: inline; } }
@container (min-width: 280px) and (max-width: 329.98px) { .card-cards .cw { display: none; } .card-cards .w-d { display: inline; } }
@container (min-width: 330px) and (max-width: 459.98px) { .card-cards .cw { display: none; } .card-cards .w-e { display: inline; } }
@container (min-width: 460px) { .card-cards .cw { display: none; } .card-cards .w-f { display: inline; } }
.strip-plan { height: 4px; margin-top: 7px; }
.strip-plan i { background: var(--plan-off); }
.strip-plan i.on { background: var(--lime-text); }
.card-src { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Favori / karşılaştır: masaüstünde üzerine gelince ya da odakta görünür. Dokunmatikte yalnızca favori:
   28 px, çerçevesiz (karşılaştır ürün sayfasında) */
.card-ctrl { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.card-ctrl .fav, .card-ctrl .cmp { position: static; width: 32px; height: 32px; }
.card-ctrl .fav svg, .card-ctrl .cmp svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .card-ctrl { opacity: 0; transform: translateY(-2px); transition: opacity 0.15s, transform 0.15s; }
  .card:hover .card-ctrl, .card:focus-within .card-ctrl, .card-ctrl:has([aria-pressed='true']) { opacity: 1; transform: none; }
  .card:not(:hover):not(:focus-within) .card-ctrl [aria-pressed='false'] { visibility: hidden; }
}
@media (hover: none), (pointer: coarse) {
  .card-ctrl .cmp { display: none; }
  .card-ctrl .fav { width: 28px; height: 28px; border: 0; background: color-mix(in srgb, var(--surface) 78%, transparent); }
  .card-ctrl .fav svg { width: 15px; height: 15px; stroke: var(--text); }
  .card-ctrl .fav[aria-pressed='true'] { background: var(--lime); }
  .card-ctrl .fav[aria-pressed='true'] svg { stroke: #0f100d; }
}
@media (max-width: 760px) {
  .card-title { font-size: 14px; }
  .card-body { padding-inline: 10px; } /* dar kartta aylık ödeme ve toplam için birkaç piksel daha */
}
/* Çok dar telefonda (≤ 380 px) toplam satırı 12,5 px: yasal alt sınırın (12-13 px) içinde, çoğu kartta iki satır */
@media (max-width: 380px) {
  .card-terms { font-size: 12.5px; }
  .card-terms mark { padding: 0 3px; }
}
/* Marka adı (ürün sayfası başlığının üstü, karşılaştırma tablosu); kartta yok */
.card-brand { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }

.empty { text-align: center; padding: 72px 20px; border: 1px dashed var(--line); border-radius: var(--radius); margin: 24px 0 72px; }
.empty h2 { font-size: 30px; margin: 0 0 10px; }
.empty .btn { margin-top: 12px; }

/* Görseli olmayan ürün: nötr kutu, ortada kategori çizgi ikonu, solda üstte marka, sağ altta boş taksit şeridi */
.ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: var(--surface); color: var(--text); }
.ph-icon { width: 28%; height: auto; max-width: 96px; stroke-width: 1.1; margin-bottom: 4%; }
.ph-brand { position: absolute; left: 16px; top: 14px; font-size: 12px; font-weight: 600; color: var(--muted); max-width: calc(100% - 72px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-strip { position: absolute; right: 16px; bottom: 16px; width: 26%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 5px; }
.ph-strip i { background: var(--line); border-radius: 2px; }

/* --- Ana sayfa bölümleri ------------------------------------------------------ */

.home-sec { margin-top: 64px; }
.home-head { display: flex; justify-content: space-between; align-items: end; gap: 8px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--text); padding-bottom: 12px; margin-bottom: 18px; }
.home-head h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.home-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 90ch; }
.home-more { font-weight: 600; font-size: 14px; white-space: nowrap; text-underline-offset: 3px; }
.grid-feature { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* İnce kart seçimi çubuğu (kendiliğinden açılan panel yok) */
.cardbar { display: flex; align-items: center; gap: 12px 18px; margin-top: 24px; padding: 10px 10px 10px 18px; min-height: 56px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; }
.cardbar p { margin: 0; flex: 1; min-width: 0; color: var(--muted); }
.cardbar p b { color: var(--text); font-weight: 600; margin-right: 4px; }
.cardbar .link-btn { margin: 0; font-size: 14px; }
.cardbar-close { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.cardbar-close:hover { color: var(--text); background: var(--line-soft); }

/* Gizli vade farkı: gerçek örnekler, satır satır */
.hidden-list { list-style: none; margin: 0; padding: 0; }
.hidden-list li { border-bottom: 1px solid var(--line); }
.hidden-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; text-decoration: none; }
.hidden-thumb { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; display: block; }
.hidden-thumb img { width: 100%; height: 100%; object-fit: contain; }
.hidden-thumb .ph-brand, .mover-thumb .ph-brand, .cm-thumb .ph-brand, .sg-thumb .ph-brand { display: none; }
.hidden-thumb .ph-icon, .mover-thumb .ph-icon, .sg-thumb .ph-icon { width: 46%; margin: 0; }
.hidden-thumb .ph-strip, .mover-thumb .ph-strip, .sg-thumb .ph-strip { display: none; }
.hidden-body { display: grid; gap: 3px; min-width: 0; }
.hidden-name { font-family: var(--display); font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.hidden-text { color: var(--text-2); font-size: 15px; }
.hidden-amount { display: grid; justify-items: end; gap: 2px; text-align: right; }
.hidden-amount b { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--warn-text); letter-spacing: -0.02em; white-space: nowrap; }
.hidden-amount small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hidden-list a:hover .hidden-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hidden-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; max-width: 80ch; }

/* Fiyatı düşenler / taksiti artanlar: iki yarım genişlik satır listesi */
.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.movers-one { grid-template-columns: minmax(0, 1fr); }
.mover-head { border-bottom: 1px solid var(--text); padding-bottom: 10px; margin-bottom: 4px; }
.mover-head h2 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.mover-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.mover-list { list-style: none; margin: 0; padding: 0; }
.mover-list li + li { border-top: 1px solid var(--line-soft); }
.mover-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; text-decoration: none; }
.mover-thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #fff; display: block; }
.mover-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mover-name { min-width: 0; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover-name small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.mover-val { font-family: var(--mono); font-size: 13px; text-align: right; white-space: nowrap; }
.mover-val s { display: block; color: var(--muted); font-size: 12px; }
.mover-delta { font-family: var(--mono); font-size: 12px; font-weight: 600; min-width: 58px; text-align: center; padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.mover-delta.down, .mover-delta.up { background: var(--lime-soft); color: var(--lime-text); }
.mover-list a:hover .mover-name { text-decoration: underline; text-underline-offset: 3px; }
.movers-note { grid-column: 1 / -1; margin: 12px 0 0; }

/* Kategoriler: ikon + ad + sayı */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.cat-grid li { border-bottom: 1px solid var(--line); }
.cat-grid a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 14px 0; text-decoration: none; }
.cat-ico { width: 28px; height: 28px; grid-row: span 2; }
.cat-name { font-family: var(--display); font-size: 19px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.15; }
.cat-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cat-grid a:hover .cat-name { text-decoration: underline; text-underline-offset: 3px; }

/* Nasıl çalışıyoruz: kural (formül + örnek hesap) ve üç adım */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; border-top: 1px solid var(--text); padding-top: 28px; }
.how h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; margin: 0 0 18px; letter-spacing: -0.02em; }
.how-formula { display: inline-block; font-family: var(--mono); font-size: clamp(17px, 1.9vw, 22px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 12px; padding: 10px 16px; background: var(--night); color: var(--night-text); border-radius: 8px; }
.how-lead { margin: 0 0 18px; color: var(--text-2); max-width: 52ch; }
.how-example { max-width: 440px; border-top: 1px dashed var(--line); }
.how-example > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.how-example span { color: var(--muted); }
.how-example b { font-family: var(--mono); font-weight: 500; }
.how-example .how-verdict span { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how-example .how-verdict b { font-family: var(--sans); font-weight: 600; font-size: 13px; background: var(--lime); color: #0f100d; padding: 0 8px; border-radius: 4px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.how-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.how-steps li:first-child { padding-top: 4px; }
.how-no { width: 26px; height: 26px; border-radius: 6px; background: var(--lime); color: #0f100d; font-family: var(--display); font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-top: 2px; }
.how-steps h3 { font-size: 20px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
.how-steps p { margin: 0; color: var(--text-2); font-size: 15px; }
.how-more { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.how-more a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
.home-end { margin: 56px 0 88px; padding: 28px 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); text-align: center; }
.home-all { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.home-all .num { font-family: var(--mono); font-size: 0.6em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.home-all:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* --- Butonlar -------------------------------------------------------------- */

.btn { border: 1px solid transparent; border-radius: 999px; height: 46px; padding: 0 22px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.16s cubic-bezier(0.3, 0.7, 0.4, 1), background-color 0.16s, border-color 0.16s, box-shadow 0.16s, color 0.16s; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.btn:active:not([disabled]) { transform: translateY(1px) scale(0.98); }
/* Oklar: üstüne gelince gideceği yöne kayar */
.btn .arr { display: inline-block; transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1); }
.btn:hover .arr { transform: translateX(3px); }
.btn:hover .arr-out { transform: translate(2px, -2px); }
.btn-primary { background: var(--text); color: var(--paper); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.08); }
.btn-primary:hover { background: var(--text-2); }
/* Lime düğme: altta mürekkep "dudak"; basınca içeri gömülür (dokunsal his, gölge değil) */
.btn-lime { background: var(--lime); color: #0f100d; box-shadow: inset 0 -3px 0 rgba(15, 16, 13, 0.22); }
.btn-lime:hover { background: #dcff5c; box-shadow: inset 0 -4px 0 rgba(15, 16, 13, 0.26); }
.btn-lime:active:not([disabled]) { box-shadow: inset 0 -1px 0 rgba(15, 16, 13, 0.22); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text); background: var(--surface); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: var(--night-text); }
.btn-outline-light:hover { border-color: var(--night-text); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; height: 56px; font-size: 16px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.buy-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

/* --- Ürün detay ------------------------------------------------------------ */

.crumbs { font-size: 13px; color: var(--muted); margin: 26px 0 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-bottom: 64px; }
.detail-media { background: var(--media-well); border: 1px solid var(--card-line); border-radius: 12px; overflow: hidden; align-self: start; position: sticky; top: 136px; }
/* Ürün görseli kartlardaki gibi tonlu kuyuda: beyaz zemin multiply ile kuyunun tonuna oturur */
.detail-media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 4%; mix-blend-mode: multiply; }
.detail-media:has(> .ph) { background: var(--surface); }
.detail-media > .ph { aspect-ratio: 1; }
.detail-media > .ph .ph-icon { max-width: 150px; }
.detail h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 750; letter-spacing: -0.028em; line-height: 1.02; margin: 10px 0 18px; }
.specs { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.specs li { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--text-2); }
.deal { background: var(--night); color: var(--night-text); border-radius: 16px; padding: 28px; }
.deal-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--night-muted); flex-wrap: wrap; }
.deal-top b { color: var(--night-text); font-weight: 600; }
/* Fiyat kutusu: önce aylık ödeme (başlık rakamı; --len ile tek satır), hemen altında taksit sayısı + kart, şerit;
   sonra peşin fiyat / toplam ödeme büyük ve açıkça (mağazalar burada karşılaştırılır). Lime yalnızca "= peşin". */
.deal-monthly { flex: 1 1 auto; min-width: 0; container-type: inline-size; }
.deal-monthly b { display: block; font-family: var(--display); font-size: clamp(44px, 5vw, 60px); font-size: min(clamp(44px, 5vw, 60px), calc(100cqi / (var(--len, 14) * 0.48))); font-weight: 750; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deal-monthly .per { color: var(--night-muted); }
.deal .strip { height: 12px; }
/* Taksit sayısı aylığın hemen altında; fırsat puanı aynı satırın sağında (aylık ödeme tüm genişliği kullansın) */
.deal-plan { display: flex; align-items: center; gap: 8px 12px; margin: 0 0 12px; flex-wrap: wrap; }
.deal-plan > b { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
.deal-plan > span:not(.score) { color: var(--night-muted); font-size: 14px; }
.deal-plan > .deal-up { font-size: 12px; color: var(--accent-text); }
.deal-price-row > .score { margin-left: auto; flex: none; padding-left: 12px; }
.deal-plan:empty { display: none; }
.deal-cash { display: grid; gap: 4px; margin: 16px 0 22px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.deal-cash-label { font-size: 13px; color: var(--night-muted); }
.deal-cash mark { background: var(--lime); color: #0f100d; padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.deal-price { font-family: var(--display); font-size: clamp(30px, 3vw, 38px); font-weight: 750; letter-spacing: -0.025em; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-sum { font-size: 14px; color: var(--night-text); }
.deal-note { font-size: 12px; color: var(--night-muted); margin: 14px 0 0; }

.block { margin-bottom: 64px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--text); padding-bottom: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.block-head h2 { font-size: 32px; font-weight: 700; margin: 0; letter-spacing: -0.018em; }
.block-head p { margin: 0; color: var(--muted); font-size: 14px; }
.plan-grid th.c, .plan-grid td.plan { text-align: center; }

.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.pill-ok { background: var(--lime-soft); color: var(--lime-text); }
.pill-no { background: var(--line-soft); color: var(--muted); }

/* --- Tablolar, paneller, formlar (yönetim) ---------------------------------- */

.page-title { font-size: clamp(34px, 4vw, 52px); font-weight: 750; letter-spacing: -0.028em; margin: 40px 0 24px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel + .panel { margin-top: 16px; }
.panel:last-child { margin-bottom: 72px; }
.panel h2 { font-size: 24px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.015em; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap; }
th { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
textarea, input[type='text'], input[type='email'], input[type='password'] { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-weight: 400; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--text); }
.aff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: end; }
.notice-box { background: color-mix(in srgb, var(--lime) 18%, transparent); border: 1px solid color-mix(in srgb, var(--lime-text) 30%, transparent); border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 14px; }
.errors code, .notice-box code { background: rgba(0, 0, 0, 0.08); }
.errors { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
code { font-size: 0.9em; color: var(--text-2); background: var(--line-soft); padding: 1px 5px; border-radius: 4px; }

/* --- Alt kısım ------------------------------------------------------------- */

/* Alt bilgi: logo + tek cümle, 4 link sütunu (Kategoriler / Kartlar / Mağazalar / peşintaksit), yasal not, tarama satırı */
.footer { background: var(--night); color: var(--night-muted); padding: 64px 0 28px; font-size: 14px; }
.footer a { color: var(--night-text); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 56px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.logo-footer { font-size: 56px; color: var(--night-text); display: inline-block; }
.footer .logo-footer:hover { text-decoration: none; }
.logo-footer span { border-radius: 10px; }
.footer-lead { color: var(--night-muted); font-size: 15px; max-width: 34ch; margin: 18px 0 0; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-col h2 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); margin: 6px 0 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { display: inline-flex; gap: 8px; align-items: baseline; }
.footer-col .num { font-family: var(--mono); font-size: 11px; color: var(--night-muted); }
.footer-legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 56px; padding: 24px 0; font-size: 13px; }
.footer-legal p { margin: 0; max-width: 64ch; }
.footer-bottom { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--mono); font-size: 12px; letter-spacing: 0; }

/* Genişlik kesin (calc(100% - 32px), masaüstünde max-width ile sınırlı) — "width" verilmezse (eski hâl:
   sadece max-width + display:flex) kutu, konumu "fixed" ve yatayda yalnızca left:50% ile ortalandığı için
   içeriğe göre daralan (shrink-to-fit) bir genişlik alıyor; bu telefon genişliğinde neredeyse kare/daireye
   düşüp metnin kelime kelime alt alta kırılmasına yol açıyordu (tüm tarayıcılarda, yalnız Safari'de değil).
   Kesin genişlik bu taşmayı kökten engeller. */
.toast { position: fixed; bottom: 24px; left: 50%; width: calc(100% - 32px); max-width: 420px; box-sizing: border-box; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--paper); padding: 14px 18px; border-radius: 16px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); font-size: 14px; line-height: 1.35; font-weight: 600; z-index: 50; display: flex; align-items: center; gap: 12px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.show.has-action { pointer-events: auto; }
/* Metin daralabilir (1-2 satır), "Geri al" küçülmez/kırılmaz ve her zaman sağda sabit durur */
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-action { flex: 0 0 auto; border: 0; background: var(--paper); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; white-space: nowrap; }
.toast-action:hover { background: var(--lime-soft); }


/* --- Kullanıcı paneli ---------------------------------------------------------- */

.account-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 14px; height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); position: relative; white-space: nowrap; }
.account-link:hover { border-color: var(--text); }
.account-link:not(:has(.avatar)) { padding: 0 16px; background: var(--text); color: var(--paper); border-color: var(--text); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--night); color: var(--lime); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: 0; }
.avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.account-link .dot { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--lime); color: #0f100d; border: 2px solid var(--paper); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* Favori (kalp) düğmesi */
.fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); display: grid; place-items: center; cursor: pointer; transition: transform 0.15s; }
.fav:hover { transform: scale(1.08); }
.fav svg, .fav-wide svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 1.8; }
.fav[aria-pressed='true'] svg { stroke: #0f100d; }
.fav[aria-pressed='true'] { background: var(--lime); border-color: #0f100d; }
.fav[aria-pressed='true'] svg { fill: #0f100d; }
.fav-wide svg { stroke: currentColor; }
.fav-wide[aria-pressed='true'] { border-color: var(--lime); color: var(--lime); }
.fav-wide[aria-pressed='true'] svg { fill: var(--lime); stroke: var(--lime); }
.deal-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.deal-actions .btn-outline-light { height: 56px; }
.deal-mine { margin: 14px 0 0; font-size: 14px; color: var(--night-muted); }
.deal-mine b { color: var(--lime); font-weight: 600; }
.mycards { display: block; width: 100%; text-align: left; border: 1px dashed var(--text); border-radius: 10px; background: var(--surface); padding: 10px 12px; margin-bottom: 22px; cursor: pointer; text-decoration: none; }
.mycards b { display: block; font-size: 14px; }
.mycards small { color: var(--muted); font-size: 12px; }
.mycards[aria-pressed='true'] { background: var(--lime); border: 1px solid #0f100d; color: #0f100d; }
.mycards[aria-pressed='true'] small { color: #3a3b35; }

/* Giriş / kayıt */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; margin: 40px 0 80px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.auth-side { background: var(--night); color: var(--night-text); padding: 44px; display: flex; flex-direction: column; gap: 22px; }
.auth-side h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 750; letter-spacing: -0.025em; margin: 12px 0 0; }
.auth-side .strip { margin-top: auto; height: 12px; }
.logo-md { font-size: 30px; color: var(--night-text); }
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--night-muted); }
.auth-perks li { padding-left: 26px; position: relative; }
.auth-perks b { color: var(--night-text); }
.auth-main { padding: 44px; display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; }
.auth-main h1 { font-size: 44px; font-weight: 750; letter-spacing: -0.028em; margin: 0 0 6px; }
.auth-main > p { margin: 0 0 24px; }
.auth-social { display: grid; gap: 10px; margin-bottom: 18px; }
.btn-social { width: 100%; background: #fff; color: #1f1f1f; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 16, 13, 0.08); }
.btn-social:hover { background: #f5f5f5; }
/* Apple: .btn-primary ile aynı ters-renk numarası (koyu temada otomatik "kağıt" varyantı olur) */
.btn-social-apple { background: var(--text); color: var(--paper); border-color: transparent; }
.btn-social-apple:hover { filter: brightness(1.08); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 2px 0 4px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-form, .panel form, form.panel { display: grid; gap: 14px; }
.auth-form input, .settings input[type='text'], .settings input[type='email'], .settings input[type='password'], .alarm-form input, .alarm-form select { height: 46px; font-size: 15px; }
label small { font-weight: 400; font-size: 12px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; }
label.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: #0f100d; flex-shrink: 0; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

/* Hesabım */
.account { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; margin: 36px 0 80px; }
.account > * { min-width: 0; }
.account-nav { align-self: start; position: sticky; top: 136px; }
.account-id { display: flex; gap: 12px; align-items: center; padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.account-id b { display: block; }
.account-id small { display: block; font-size: 12px; word-break: break-all; }
.account-nav nav { display: grid; gap: 2px; }
.account-nav nav a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; padding: 9px 12px; border-radius: 8px; color: var(--text-2); font-size: 15px; }
.account-nav nav a:hover { background: var(--line-soft); color: var(--text); }
.account-nav nav a[aria-current='true'] { background: var(--text); color: var(--paper); font-weight: 600; }
.account-nav .count { font-size: 12px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--line-soft); color: var(--text-2); display: grid; place-items: center; }
.account-nav .count-hot { background: var(--lime); color: #0f100d; font-weight: 700; }
.account-nav a[aria-current='true'] .count { background: rgba(255, 255, 255, 0.2); color: inherit; }
.account-nav .link-btn { margin: 14px 12px 0; font-weight: 500; color: var(--muted); }
/* Sekme içeriği gelene kadar yer ayrılır: alt bilgi yukarı zıplamasın. Telefonda "Çıkış yap" sekmelerin arasında
   değil, sayfanın en altında (ve Ayarlar sekmesinde). */
.account-main { min-height: 60vh; }
.account-foot { display: none; }
.page-wait { min-height: 70vh; padding-top: 36px; }
.account-title { font-size: clamp(34px, 4vw, 52px); font-weight: 750; letter-spacing: -0.028em; margin: 0 0 22px; }
.sub-title { font-size: 20px; margin: 18px 0 12px; }
.notes, .rows { list-style: none; margin: 0; padding: 0; }
.notes li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.notes li a { text-decoration: none; }
.notes li a:hover { text-decoration: underline; }
.notes li small { display: block; font-size: 12px; margin-top: 2px; }
.notes li.unread { font-weight: 600; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.rows li small { display: block; font-size: 12px; }
.rows li a { text-decoration: none; }
.fav-item { display: flex; flex-direction: column; gap: 6px; }
.fav-item .card { flex: 1; }
.price-change { padding: 8px 16px 12px; font-size: 13px; font-weight: 600; }
.price-change small { font-weight: 400; color: var(--muted); }
.price-change.down { color: var(--lime-text); }
.price-change.up { color: var(--danger); }
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.settings .panel + .panel { margin-top: 0; }
.settings .panel h2 { margin-bottom: 4px; }
.settings .btn { justify-self: start; }
.alarm-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.alarm-form select { padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.alarm-form .errors { grid-column: 1 / -1; margin: 0; }
.legal { max-width: 760px; margin-bottom: 80px; }
.legal h2 { font-size: 24px; margin: 28px 0 8px; }

@media (max-width: 980px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 28px; }
  .auth-side .strip { display: none; }
  .account { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .account-nav { position: static; }
  .account-nav nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .account-nav nav a { white-space: nowrap; gap: 8px; }
  .account-nav .account-logout { display: none; }
  .account-foot { display: block; border-top: 1px solid var(--line); padding-top: 16px; }
  .account-foot .link-btn { font-weight: 500; color: var(--muted); }
  .rows li { grid-template-columns: 1fr auto; }
  .alarm-form { grid-template-columns: 1fr; }
  .overview-money { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .account-link .account-name { display: none; }
  .account-link { padding: 0 6px; margin-left: auto; }
  .account-link:not(:has(.avatar)) .account-name { display: inline; }
  .auth { margin-top: 20px; }
  .auth-main { padding: 24px 20px 28px; }
  .auth-side h2 { font-size: 24px; }
  .auth-perks { display: none; }
  .deal-actions { grid-template-columns: 1fr; }
  .purchase-form .span-2 { grid-column: auto; }
  .paychart-axis { font-size: 9px; }
}


/* Kart tipleri */
.card-search { width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-bottom: 14px; }
.card-search:focus { outline: none; border-color: var(--text); }
.program { position: relative; cursor: pointer; }
.program[hidden] { display: none; }
.program input { position: absolute; opacity: 0; }

/* Alışverişlerim */
/* Okunabilirlik geçişi (27 Eylül): 4 rakam artık ayrı kartlar (.acc-stats/.acc-stat), açıklamalar --text-2 +
   max ~65ch, bölümler arası ince ayraç; hepsi .acc-purchases içine scope'lu, sitedeki paylaşılan .stat/.block-head
   kurallarına dokunmadan. */
.acc-purchases .block-head p { color: var(--text-2); max-width: 65ch; }
.acc-purchases .budget-panel > div > p.muted,
.acc-purchases .how-box p { color: var(--text-2); max-width: 65ch; }
.acc-info { margin: 0 0 28px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acc-info .assumption { margin: 0; }
.acc-info .how-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.acc-purchases section.block { margin-bottom: 40px; }
.acc-info + section.block,
.acc-purchases section.block + section.block { border-top: 1px solid var(--line-soft); padding-top: 32px; }

.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.acc-stat { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 116px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acc-stat-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.acc-stat-ico { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 1.5; }
.acc-stat-num { display: block; font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.acc-stat-sub { font-size: 12.5px; color: var(--muted); }
.acc-stat-gain .acc-stat-num { color: var(--good-text); }
.acc-stat.flip { cursor: pointer; perspective: 800px; }
.acc-stat.flip .flip-ico { position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.acc-stat.flip:hover .flip-ico, .acc-stat.flip:focus-visible .flip-ico { color: var(--text); }
.acc-stat.flip .flip-in { position: relative; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.4, 1); transform-style: preserve-3d; }
.acc-stat.flip[aria-pressed='true'] .flip-in { transform: rotateY(180deg); }
.acc-stat.flip .flip-f, .acc-stat.flip .flip-b { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.acc-stat.flip .flip-b { transform: rotateY(180deg); }
.acc-stat.flip .flip-b p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .acc-stat.flip .flip-in { transition: none; } }

.assumption { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.assumption .link-btn { margin: 0; font-size: 13px; font-weight: 500; }
.how-box p { margin: 6px 0; }
.purchase-form .span-2 { grid-column: span 2; }
.purchase-form input[type='text'], .purchase-form input[type='date'], .purchase-form select { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-weight: 400; }
.purchase-form .errors { grid-column: 1 / -1; margin: 0; }
.purchase-form label { min-width: 0; }
.purchase-form input[type='text'], .purchase-form input[type='date'], .purchase-form select { width: 100%; min-width: 0; }
.gain-bought .btn { white-space: normal; height: auto; min-height: 46px; padding: 10px 18px; text-align: center; }
.purchases { list-style: none; margin: 0; padding: 0; }
.purchase { display: grid; grid-template-columns: minmax(0, 1fr) 150px 170px auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.purchase.done { opacity: 0.7; }
.purchase small { display: block; font-size: 12px; }
.purchase-main a { text-decoration: none; }
.purchase-main .strip { margin: 8px 0 4px; max-width: 360px; height: 7px; }
.purchase-num b, .purchase-gain b { font-family: var(--display); font-size: 19px; letter-spacing: -0.02em; }
.purchase-gain b { color: var(--good-text); }
.purchase-actions { display: flex; gap: 6px; }
/* Düzeltme: bu kural aynı seçiciyle yukarıdaki @media (max-width: 980px) bloğundan SONRA gelmezse, kaynak
   sırası yüzünden hep masaüstü 4 sütunu kazanıyordu (dar ekranda sütunlar sığmıyor, başlık kelime kelime
   satır atlıyordu). Aynı kural burada, temel .purchase kuralından SONRA tekrarlanıyor. */
@media (max-width: 980px) {
  .purchase { grid-template-columns: minmax(0, 1fr) auto; }
  .purchase-actions { grid-column: 1 / -1; }
}
/* Ödeme takvimi grafiği: tek seri, üstü yuvarlatılmış ince çubuklar, 2px boşluk, üzerine gelince değer */
.paychart-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 160px; align-items: end; border-bottom: 1px solid var(--line-soft); background-image: repeating-linear-gradient(to top, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent calc(100% / 3)); background-position: bottom; }
.paychart-col { height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; cursor: default; }
.paychart-col:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.paychart-bar { width: min(28px, 70%); background: var(--text-2); border-radius: 4px 4px 0 0; }
.paychart-col.cur .paychart-bar { background: var(--lime-text); }
.paychart-col.nopay .paychart-bar { background: var(--line); opacity: 0.5; }
.paychart-col:hover .paychart-bar, .paychart-col:focus .paychart-bar { background: var(--lime-text); }
.paychart-amt { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; pointer-events: none; }
.paychart-col.cur .paychart-amt { color: var(--lime-text); font-weight: 600; }
.paychart-col.nopay .paychart-amt { color: var(--muted); opacity: 0.6; }
.paychart-tip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--paper); padding: 6px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 2; text-align: center; }
.paychart-tip b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.paychart-col:hover .paychart-tip, .paychart-col:focus .paychart-tip { opacity: 1; }
.paychart-axis { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: 6px; font-size: 11px; color: var(--muted); text-align: center; text-transform: capitalize; }
.paychart-axis .dim { opacity: 0.45; }
.paychart-table { margin-top: 10px; font-size: 14px; }
.paychart-table summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.strip-progress i.on { background: var(--lime-text); }

/* Özet: para kartları */
.overview-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.money-card { display: flex; flex-direction: column; gap: 4px; background: var(--night); color: var(--night-text); border-radius: 14px; padding: 22px; text-decoration: none; }
.money-card small { color: var(--night-muted); }
.money-card b { font-family: var(--display); font-size: 44px; font-weight: 750; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; color: var(--lime); line-height: 1.1; }
.money-card span { font-size: 13px; color: var(--night-muted); }
.money-next > small { color: var(--muted); }
.money-next ul { list-style: none; margin: 8px 0 0; padding: 0; }
.money-next li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.money-next li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money-next li small { grid-column: 1 / -1; font-size: 12px; }

/* Ürün sayfası: kazanç hesaplayıcı */
.gain-bought { margin-top: 8px; }
.gain-bought .purchase-form { margin-top: 12px; }

/* --- Duyarlı düzen ---------------------------------------------------------- */

@media (max-width: 980px) {
  .catalog { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filters { position: static; max-height: none; display: none; padding: 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .filters.open { display: block; }
  .btn.filter-toggle { display: inline-flex; height: 40px; }
  .detail { grid-template-columns: 1fr; gap: 28px; }
  .detail-media { position: static; max-width: 520px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; padding-bottom: 56px; }
  .receipt { max-width: 460px; }
  .grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movers { grid-template-columns: 1fr; gap: 40px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  /* Mobil üst çubuk: tek satır (menü, logo, hesap) + arama; kategori şeridi çekmecede */
  .topbar-inner { height: auto; flex-wrap: wrap; gap: 8px 10px; padding-top: 8px; padding-bottom: 8px; }
  .menu-btn { display: grid; }
  .logo { font-size: 23px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search input { height: 40px; }
  .catbar { display: none; }
  .hero-inner { padding-top: 32px; padding-bottom: 48px; gap: 36px; }
  .hero h1 { font-size: 46px; }
  .hero-lead { font-size: 16px; margin-bottom: 22px; }
  .hero-search { padding: 5px 5px 5px 42px; }
  .hero-search .search-icon { left: 15px; }
  .hero-search input { height: 44px; font-size: 16px; }
  .hero-search .btn { height: 44px; padding: 0 18px; }
  .hero-proof { font-size: 12px; }
  .receipt { --tilt: 0deg; transform: none; padding: 14px 16px 16px; }
  .receipt:hover { transform: none; }
  .receipt-title { font-size: 20px; }
  .receipt-img { width: 56px; height: 56px; }
  .receipt-sum { padding-right: 128px; }
  .rs-long { display: none; }
  .receipt-pill { right: -6px; font-size: 19px; padding: 6px 12px 7px; }
  .proof-scan { display: none; }
  .grid, .grid-few, .grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .list-head { margin-top: 28px; }
  .section-head p.list-summary { font-size: 13px; }
  .home-sec { margin-top: 48px; }
  .home-more { font-size: 13px; }
  .cardbar { position: relative; border-radius: 14px; flex-wrap: wrap; padding: 14px; }
  .cardbar p { flex-basis: 100%; padding-right: 30px; }
  .cardbar p span { display: block; }
  .cardbar-close { position: absolute; top: 8px; right: 8px; }
  .hidden-list a { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
  .hidden-thumb { width: 52px; height: 52px; grid-row: span 2; }
  .hidden-name { font-size: 17px; }
  .hidden-text { font-size: 14px; }
  .hidden-amount { justify-items: start; text-align: left; grid-column: 2; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .hidden-amount b { font-size: 18px; }
  .mover-list a { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
  .mover-thumb { width: 40px; height: 40px; }
  .mover-delta { display: none; }
  .cat-grid { gap: 0 16px; }
  .cat-grid a { grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; padding: 12px 0; }
  .cat-ico { width: 24px; height: 24px; }
  .cat-name { font-size: 16px; }
  .cat-meta { font-size: 11px; }
  .how-formula { font-size: 14.5px; display: block; padding: 10px 12px; }
  .home-end { margin-bottom: 64px; }
  .footer { padding-top: 44px; }
  .logo-footer { font-size: 44px; }
  .footer-cols { gap: 28px 20px; }
  .footer-legal { grid-template-columns: 1fr; }
  .deal { padding: 22px; }
  .block-head h2 { font-size: 28px; }
}


/* === Fırsat içgörüleri, bütçe, karşılaştırma, arama önerileri ===================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Etiketler, karşılaştır düğmesi ------------------------------------------------------ */

.tag { font-size: 11px; font-weight: 600; line-height: 1.2; padding: 3px 7px; border-radius: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
/* "Fiyat düştü", "30 günün en düşüğü": olumlu bilgi ama lime değil (lime yalnızca "vade farkı sıfır") → krem çerçeve */
.tag-good { background: var(--surface); color: var(--text); border-color: var(--accent); }
.tag-new, .tag-info { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.tag-card { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tag-warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn); }
.cmp { position: absolute; top: 52px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); display: grid; place-items: center; cursor: pointer; transition: transform 0.15s; }
.cmp:hover { transform: scale(1.08); }
.cmp svg, .cmp-wide svg { width: 17px; height: 17px; fill: none; stroke: var(--text); stroke-width: 1.8; }
.cmp[aria-pressed='true'] svg { stroke: #0f100d; }
.cmp[aria-pressed='true'] { background: var(--lime); border-color: #0f100d; }
.cmp[aria-pressed='true'] svg { fill: #0f100d; }

/* --- Yatay ürün sıraları ----------------------------------------------------------- */

.rails { margin-top: 44px; }
.rail { margin-bottom: 40px; min-width: 0; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--text); padding-bottom: 10px; margin-bottom: 14px; }
.rail-head h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.018em; margin: 0; }
.rail-head p { margin: 0; color: var(--muted); font-size: 14px; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 4px 1px 10px; scrollbar-width: thin; }
.rail-track > .card { scroll-snap-align: start; }
.rails > .assumption { margin-top: -24px; margin-bottom: 8px; }
/* Sinyal sıraları (parts.SIGNAL_RAILS): "Taksit sayısı artanlar" ve "30 günün en düşüğü" normal sıralardan ayrışsın:
   krem zeminli panel, başlık üstünde simgeli etiket, her kartın üstünde büyük rozet. Krem = bilgi vurgusu; lime (yalnızca
   "peşin fiyatına", "=", "0", dolu taksit kutusu) ve mercan (yalnızca uyarı) burada kullanılmaz.
   Taksit arttı: mürekkep rozet, krem yazı · Fiyat dipte: krem rozet, mürekkep yazı. */
.rail-sig { background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 14%, var(--surface)) 0%, var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--lime) 35%, var(--line)); border-radius: 16px; padding: 18px 18px 8px; }
.rail-sig .rail-head { border-bottom-color: color-mix(in srgb, var(--lime) 30%, var(--line)); align-items: flex-end; }
.sig-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sig-title p { margin: 0; color: var(--text-2); font-size: 14px; max-width: 62ch; }
.sig-eyebrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px 4px 7px; border-radius: 999px; }
.sig-eyebrow .sig-ico { width: 15px; height: 15px; stroke-width: 2.2; }
.sig-up .sig-eyebrow { background: var(--night); color: var(--accent); }
.sig-low .sig-eyebrow { background: var(--accent); color: var(--on-accent); }
.rail-track > .sig-item { scroll-snap-align: start; }
.sig-item { position: relative; display: flex; flex-direction: column; min-width: 0; } /* relative: rozetteki .sr-only kaydırma alanının dışına taşmasın */
.sig-item > .card { flex: 1; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.sig-badge { margin: 0; padding: 9px 12px 10px; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; gap: 2px; min-height: 58px; justify-content: center; }
.sig-up .sig-badge { background: var(--night); color: var(--accent); }
.sig-low .sig-badge { background: var(--accent); color: var(--on-accent); }
.sig-main { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-low .sig-main { font-size: 17px; }
.sig-arr { font-family: var(--sans); font-weight: 500; opacity: 0.8; margin: 0 1px; }
.sig-sub { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-up .sig-sub { color: var(--night-text); opacity: 0.85; }
.sig-pct { font-weight: 500; opacity: 0.8; }
/* Kartın kendi etiketi rozetle aynıysa gizlenir (uyarı ve başka bilgi etiketleri görünür kalır) */
.sig-up .card-tag[data-tag='taksitUp'], .sig-low .card-tag[data-tag='low30'] { display: none; }
@media (max-width: 640px) {
  .rail-sig { padding: 14px 12px 4px; border-radius: 14px; }
  .sig-main { font-size: 18px; }
  .sig-low .sig-main { font-size: 16px; }
}

/* --- Filtreler: bütçe, bağlantılı listeler, alt kategoriler ---------------------------- */

.chips-4 { grid-template-columns: repeat(2, 1fr); }
.chip-money { font-size: 16px; }
.money-input { position: relative; margin-top: 6px; }
.filters .money-input input[type='number'] { padding-right: 56px; }
.money-input span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
.filter-list a { width: 100%; padding: 7px 0; display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); border-bottom: 1px solid var(--line-soft); font-size: 14px; text-decoration: none; }
.filter-list a:hover { color: var(--text); }
.filter-list a[aria-current='true'] { color: var(--text); font-weight: 600; }
.filter-list a[aria-current='true'] span:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--lime); border: 1px solid var(--text); border-radius: 2px; margin-right: 8px; }
.mycards-edit { margin: -14px 0 18px; font-size: 13px; font-weight: 500; color: var(--muted); }
.crumbs-list { margin: 30px 0 0; }
.section-head-tight { margin-top: 10px; }
.subchips { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 24px; }
.subchips a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.subchips a span { font-size: 12px; color: var(--muted); }
.subchips a:hover { border-color: var(--text); }
.subchips a[aria-current='true'] { background: var(--text); border-color: var(--text); color: var(--paper); }
.subchips a[aria-current='true'] span { color: inherit; opacity: 0.7; }

/* --- İlk ziyaret: kart tipi seçimi -------------------------------------------------- */

.onboard { position: relative; margin: 36px 0 8px; padding: 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 18px 32px; align-items: start; }
.onboard-text h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.018em; margin: 6px 0 10px; }
.onboard-text p:last-child { margin: 0; color: var(--muted); max-width: 44ch; }
.onboard-text b { color: var(--text); }
.onboard-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card-chip { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.card-chip:hover { border-color: var(--text); }
.card-chip b { font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; }
.card-chip small { font-size: 12px; color: var(--muted); }
.card-chip[aria-pressed='true'] { background: var(--night); border-color: var(--night); color: var(--night-text); }
.card-chip[aria-pressed='true'] small { color: var(--night-muted); }
.card-chip[aria-pressed='true'] b::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--lime); margin-right: 8px; flex-shrink: 0; }
.onboard-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.onboard-actions .link-btn { margin: 0; }
.onboard-actions small { font-size: 12px; }
@media (min-width: 981px) { .onboard-chips { margin-right: 34px; } }
.onboard-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.onboard-close:hover { border-color: var(--text); }

/* --- Ürün sayfası: fiyat kutusu, puan, paylaş -------------------------------------- */

.detail-info > .card-brand { text-decoration: none; }
.detail-info > .card-brand:hover { color: var(--text); }
.deal-price-row { display: flex; align-items: center; margin: 16px 0 8px; }
.score { display: inline-flex; align-items: center; gap: 10px; }
.score > b { min-width: 54px; height: 54px; padding: 0 8px; box-sizing: border-box; flex-shrink: 0; white-space: nowrap; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -0.03em; border: 2px solid rgba(255, 255, 255, 0.28); }
.score > span { font-size: 14px; font-weight: 600; line-height: 1.25; }
.score > span small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--night-muted); }
/* Puan kademeleri (insights-ui.js SCORE_TIERS): çok iyi = dolu limon (marka rengi), iyi = yeşil (--good ailesi),
   makul = kehribar, sıradan = soluk (27 Eylül, sahip: "çok iyi" ve "iyi" birbirinden ayırt edilsin — ikisi de
   limon olunca ayrışmıyordu). Koyu fiyat kutusunda --score-night-top (limon) / --score-night-good (yeşil, sabit
   hex — .deal her iki temada da koyu, --good gibi temaya göre dönmez) / --score-night-fair (kehribar). Açık
   zeminde (karşılaştırma, ürün kartı) --score-good* (limon zemin + mürekkep yazı, yalnızca "çok iyi") ve
   --good-soft/--good-text (yeşil, "iyi") / --fair (kehribar, "makul"). */
.score-top > b { background: var(--score-night-top); color: #0f100d; border-color: var(--score-night-top); }
.score-good > b { border-color: var(--score-night-good); color: var(--score-night-good); }
.score-ok > b { border-color: rgba(240, 191, 90, 0.6); color: var(--score-night-fair); }
.score-low > b { color: var(--night-muted); }
.score-top > span small { color: var(--score-night-top); }
.score-good > span small { color: var(--score-night-good); }
.score-light > b { border: 1px solid var(--line); color: var(--text); width: 46px; height: 46px; font-size: 22px; }
.score-light > span small { color: var(--muted); }
.score-light.score-top > b { background: var(--score-good); color: var(--score-good-on); border-color: var(--score-good); }
.score-light.score-good > b { background: var(--score-good-soft); color: var(--score-good-text); border-color: transparent; }
.score-light.score-ok > b { background: var(--fair-soft); color: var(--fair-text); border-color: transparent; }
.score-light.score-top > span small { color: var(--lime-text); }
.score-light.score-good > span small { color: var(--score-good-text); }
.score-light.score-low > b { color: var(--muted); }
.deal-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cmp-wide svg { stroke: currentColor; }
.cmp-wide[aria-pressed='true'] { border-color: var(--lime); color: var(--lime); }
.cmp-wide[aria-pressed='true'] svg { fill: var(--lime); }
.share { position: relative; }
.share > .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; display: grid; min-width: 200px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45); }
.share-menu[hidden] { display: none; }
.share-menu a, .share-menu button { display: block; text-align: left; padding: 10px 12px; border-radius: 8px; border: 0; background: none; text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible { background: var(--line-soft); }

/* "Neden bu puan?" (koyu kutu içinde) */
.score-why { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.score-why summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.score-why summary::-webkit-details-marker { display: none; }
.sw-body { margin-top: 14px; }
.sw-reasons { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.sw-reasons li { display: flex; gap: 8px; align-items: baseline; }
.sw-reasons i { font-style: normal; font-weight: 800; font-size: 13px; width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center; flex-shrink: 0; }
.sw-reasons .good i { background: var(--score-night-top); color: #0f100d; }
.sw-reasons .bad i { background: #ff8a80; color: #0f100d; }
.sw-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sw-parts li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 52px; gap: 12px; align-items: center; font-size: 13px; }
.sw-label small { display: block; font-size: 11px; color: var(--night-muted); }
.sw-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.sw-bar i { display: block; height: 100%; border-radius: 3px; background: var(--score-night-top); }
.sw-parts b { text-align: right; font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; }
.sw-parts b small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--night-muted); }
.sw-penalty b { color: #ff8a80; }
.sw-note { margin: 12px 0 0; font-size: 12px; color: var(--night-muted); }

/* Teklif uyarıları (açık zemin) */
.offer, #price-history, #load-box { scroll-margin-top: 150px; }

/* --- Fiyat geçmişi grafiği -------------------------------------------------------- */

.pill-demo { background: var(--line-soft); color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 4px; }
.ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 0 12px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ph-stats div { background: var(--surface); padding: 12px 16px; }
.ph-stats dt { font-size: 12px; color: var(--muted); }
.ph-stats dd { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ph-stats dd small { font-family: var(--sans); font-size: 13px; font-weight: 500; }
.ph-stats dd.down { color: var(--lime-text); }
.ph-stats dd.up { color: var(--danger); }
.ph-chart { position: relative; min-height: 230px; padding: 10px 0 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; touch-action: pan-y; cursor: crosshair; overflow: hidden; }
.ph-chart:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ph-svg { display: block; }
.ph-grid { stroke: var(--line-soft); }
.ph-base, .ph-tick { stroke: var(--line); }
.ph-ylab, .ph-xlab, .ph-30-lab { fill: var(--muted); font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.ph-xlab { text-transform: capitalize; }
.ph-30 { fill: var(--line-soft); opacity: 0.5; }
.ph-area { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.ph-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.ph-low { stroke: var(--lime-text); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ph-high { stroke: var(--muted); stroke-dasharray: 4 4; }
.ph-low-lab, .ph-high-lab { font-family: var(--sans); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ph-low-lab { fill: var(--lime-text); }
.ph-high-lab { fill: var(--muted); }
.ph-now { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.ph-t { fill: var(--line-soft); }
.ph-t.on { fill: var(--lime); }
.ph-t-lab.on { fill: #0f100d; }
.ph-cross { stroke: var(--text); stroke-dasharray: 2 3; }
.ph-dot { fill: var(--lime); stroke: var(--text); stroke-width: 2; }
.ph-tip { position: absolute; z-index: 2; pointer-events: none; padding: 7px 10px; border-radius: 8px; background: var(--text); color: var(--paper); font-size: 12px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.ph-tip small { display: block; opacity: 0.75; }
.ph-tip b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.ph-tip span { display: block; }
.ph-help { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ph-table { margin-top: 10px; font-size: 14px; }
.ph-table summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ph-table p { font-size: 13px; margin: 8px 0; }
.ph-table .table-wrap { max-height: 320px; overflow: auto; }

/* --- Aylık yük ------------------------------------------------------------------ */

.loadchart { margin: 4px 0 10px; }
.loadchart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.loadchart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg-ex { background: var(--chart-context); }
.lg-add { background: var(--chart-accent); }
.loadchart-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; height: 190px; padding-top: 24px; align-items: end; border-bottom: 1px solid var(--line); }
.loadchart-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.loadchart-col:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.loadchart-stack { width: min(28px, 72%); display: flex; flex-direction: column; gap: 2px; }
.loadchart-stack i { display: block; min-height: 2px; }
.loadchart-stack i:first-child { border-radius: 4px 4px 0 0; }
.seg-add { background: var(--chart-accent); }
.seg-ex { background: var(--chart-context); }
/* 28 Eylül: misafirin "Aylık yük" grafiğinde 4 örnek ürün (aynı gri ailesinin tonları) + bu ürün (vurgu rengi) */
.seg-s1 { background: var(--chart-context); }
.seg-s2 { background: color-mix(in srgb, var(--chart-context) 72%, var(--surface)); }
.seg-s3 { background: color-mix(in srgb, var(--chart-context) 50%, var(--surface)); }
.seg-s4 { background: color-mix(in srgb, var(--chart-context) 32%, var(--surface)); }
.loadchart-legend .lg-this { color: var(--text); font-weight: 600; }
.loadchart-legend .pill-demo { margin-right: 2px; }
.calc-lead-em { color: var(--text); font-weight: 650; background: color-mix(in srgb, var(--good) 14%, transparent); padding: 1px 4px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.loadchart-col:hover .loadchart-stack, .loadchart-col:focus .loadchart-stack { filter: brightness(1.15); }
.loadchart-peak { font-size: 11px; font-weight: 600; white-space: nowrap; margin-bottom: 4px; }
.loadchart-col:hover .paychart-tip, .loadchart-col:focus .paychart-tip { opacity: 1; }
.paychart-tip small { display: block; opacity: 0.8; font-size: 11px; }
.loadchart-col:nth-child(-n + 3) .paychart-tip, .paychart-col:nth-child(-n + 3) .paychart-tip { left: 0; transform: none; }
.loadchart-col:nth-last-child(-n + 3) .paychart-tip, .paychart-col:nth-last-child(-n + 3) .paychart-tip { left: auto; right: 0; transform: none; }

/* --- Karşılaştırma tepsisi ------------------------------------------------------ */

.cmp-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--night); color: var(--night-text); border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 -14px 30px -16px rgba(0, 0, 0, 0.5); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.cmp-tray[hidden] { display: none; }
.cmp-tray-inner { display: flex; align-items: center; gap: 16px; }
.cmp-tray-label b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; }
.cmp-tray-label small { color: var(--night-muted); font-size: 12px; }
.cmp-tray-items { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex: 1; min-width: 0; }
.cmp-tray-items li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; max-width: 280px; padding: 5px 4px 5px 5px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); position: relative; }
.cmp-tray-items img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 6px; flex-shrink: 0; }
.cmp-tray-items .ph { width: 38px; height: 38px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--line); }
.cmp-tray-items .ph-brand, .cmp-tray-items .ph-strip { display: none; }
.cmp-tray-items .ph-icon { width: 60%; margin: 0; }
.cmp-tray-title { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-tray-items button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--night-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.cmp-tray-items button:hover { color: var(--night-text); background: rgba(255, 255, 255, 0.1); }
.cmp-tray-items .cmp-slot { border-style: dashed; background: transparent; justify-content: center; color: var(--night-muted); min-height: 50px; }
.cmp-tray-actions { display: flex; align-items: center; gap: 14px; }
.cmp-tray-actions .link-btn { margin: 0; color: var(--night-muted); font-weight: 500; }
.cmp-tray .btn[aria-disabled='true'] { opacity: 0.5; }
body.has-tray { padding-bottom: 74px; }
body.has-tray .toast { bottom: 92px; }

/* --- Karşılaştırma sayfası ------------------------------------------------------ */

.cmp-head .page-title { margin: 0; }
.cmp-head p { max-width: 70ch; }
.cmp-wrap { margin-bottom: 72px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
.cmp-table { table-layout: fixed; }
.cmp-table th, .cmp-table td { white-space: normal; vertical-align: top; padding: 14px 16px; }
.cmp-table thead th { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--text); border-bottom: 1px solid var(--text); }
.cmp-corner, .cmp-table tbody th { width: 190px; }
.cmp-table tbody th { font-size: 11px; color: var(--muted); padding-top: 18px; }
.cmp-prod { display: grid; gap: 4px; text-decoration: none; }
.cmp-prod img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.cmp-title { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.cmp-remove { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.cmp-table td > b { display: block; }
.cmp-table td small { display: block; font-size: 12px; color: var(--muted); }
.cmp-table td .strip { max-width: 180px; margin-bottom: 6px; }
.cmp-price { font-family: var(--display); font-size: 24px; letter-spacing: -0.025em; }
.cmp-corner { border-bottom: 1px solid var(--text); }
.warn-text { color: var(--danger); }
.cmp-banks { font-size: 13px; }
.cmp-buy td { border-bottom: 0; }

/* --- Canlı arama önerileri ------------------------------------------------------ */

.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 35; list-style: none; margin: 0; padding: 6px; max-height: min(70vh, 480px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.45); }
.suggest[hidden] { display: none; }
.suggest li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; cursor: pointer; }
.suggest li[aria-selected='true'], .suggest li:hover { background: var(--line-soft); }
.sg-thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--line-soft); display: block; }
.sg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sg-text b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-text small { font-size: 12px; color: var(--muted); }
.sg-price { font-family: var(--display); font-weight: 700; font-size: 16px; }
.sg-plan { color: var(--text-2); font-size: 12.5px; }
.sg-text .sg-plan b { display: inline; font-size: inherit; font-weight: 600; color: var(--text); }
.suggest .sg-all { display: block; text-align: center; font-weight: 600; font-size: 14px; margin-top: 4px; border-top: 1px solid var(--line-soft); border-radius: 0 0 10px 10px; }
.suggest .sg-empty { display: block; color: var(--muted); font-size: 14px; cursor: default; }
.suggest .sg-empty:hover { background: none; }

/* --- Duyarlı düzen (yeni parçalar) ------------------------------------------------ */

@media (max-width: 980px) {
  .onboard { grid-template-columns: 1fr; }
  .chips-4 { grid-template-columns: repeat(4, 1fr); }
  .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rail-head h2 { font-size: 24px; }
  .rail-track { grid-auto-columns: min(236px, 62vw); }
  .onboard { padding: 20px 16px; margin-top: 24px; }
  .onboard-text h2 { font-size: 28px; padding-right: 36px; }
  .onboard-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-money { font-size: 14px; }
  .subchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tag { font-size: 11px; padding: 2px 6px; }
  .score > b { min-width: 46px; height: 46px; font-size: 19px; }
  .sw-parts li { grid-template-columns: minmax(0, 1fr) 56px 44px; gap: 8px; }
  .loadchart-bars { height: 160px; }
  .loadchart-peak { font-size: 10px; }
  .cmp-tray-label small, .cmp-tray-title, .cmp-tray-actions .link-btn { display: none; }
  .cmp-tray-label b { font-size: 15px; }
  .cmp-tray-items { gap: 10px; }
  .cmp-tray-items li { flex: 0 0 auto; padding: 0; border: 0; background: none; }
  .cmp-tray-items img, .cmp-tray-items .ph { width: 44px; height: 44px; }
  .cmp-tray-items button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; font-size: 14px; background: var(--night-2); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--night-text); }
  .cmp-tray-items .cmp-slot { width: 44px; height: 44px; min-height: 0; border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 6px; }
  .cmp-tray-inner { gap: 12px; }
  /* Karşılaştırma tablosu: etiket satırın üstünde, değerler yan yana */
  .cmp-table, .cmp-table thead, .cmp-table tbody { display: block; }
  .cmp-table tr { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); }
  .cmp-table .cmp-corner { display: none; }
  .cmp-table tbody th { grid-column: 1 / -1; width: auto; padding: 12px 10px 0; border: 0; }
  .cmp-table td, .cmp-table thead th { padding: 8px 10px 12px; border: 0; min-width: 0; }
  .cmp-title { font-size: 14px; }
  .cmp-price { font-size: 18px; }
  .cmp-table td > b { overflow-wrap: anywhere; }
  .cmp-table .score { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cmp-table .score > span small { display: none; }
  .cmp-table .score > span { font-size: 12px; }
  .cmp-buy .btn { white-space: normal; height: auto; min-height: 34px; padding: 6px 8px; font-size: 12px; width: 100%; }
}
.chip-money small { text-transform: none; letter-spacing: 0; font-size: 10px; }
.newsletter-meta { display: grid; gap: 4px; margin: 14px 0; font-size: 14px; }
.newsletter-frame { width: 100%; height: 600px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

/* --- Hesabım: aylık taksit bütçesi ---------------------------------------------------- */

.budget-panel { display: grid; gap: 14px; }
.budget-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.budget-amount { display: block; font-family: var(--display); font-size: 32px; letter-spacing: -0.03em; margin-top: 2px; }
.budget-amount small, .budget-facts small { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.budget-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.budget-facts > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.budget-facts > div:last-child { border-right: 0; }
.budget-facts dt { font-size: 12px; color: var(--muted); }
.budget-facts dd { margin: 4px 0 0; font-weight: 700; font-size: 18px; }
.budget-room { background: var(--lime-soft); }
.budget-panel > .btn { justify-self: start; }
.budget-warn { margin: 0; padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 14px; }
.budget-form { display: grid; gap: 10px; }
.budget-form .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.budget-form .chip { height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; }
.budget-form .chip[aria-pressed='true'] { background: var(--lime); border-color: var(--lime); color: var(--night); }
.budget-form .money-input { display: flex; align-items: center; }
.budget-form .money-input input { width: 100%; height: 48px; padding-right: 56px; }
.budget-form .buy-row .btn { height: 48px; }
.form-error { margin: 0; color: var(--danger); font-size: 14px; }
.paychart-bars { position: relative; }
.paychart-budget { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--danger); pointer-events: none; z-index: 1; }
.paychart-budget em { position: absolute; right: 0; bottom: 4px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--danger); background: var(--surface); padding: 0 4px; }
.paychart-bar.over { background: var(--danger); }
@media (max-width: 640px) {
  .budget-facts { grid-template-columns: 1fr; }
  .budget-facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .budget-facts > div:last-child { border-bottom: 0; }
  .budget-form .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Akıcılık: geçiş, ilerleme çubuğu, küçük yardımcılar ------------------------------------------------ */

/* Sayfa yüklenirken üstte ince mürekkep çizgi (lime değil: lime yalnızca "vade farkı sıfır") */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: var(--text); opacity: 0; }
.progress.run { opacity: 1; transform: scaleX(0.8); transition: transform 2.4s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0.1s; }
.progress.end { opacity: 0; transform: scaleX(1); transition: transform 0.2s ease-out, opacity 0.3s 0.15s; }

/* Yeni sayfa içeriği yumuşakça belirir */
@keyframes app-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#app.enter { animation: app-enter 0.28s cubic-bezier(0.3, 0.7, 0.4, 1) both; }

/* Taksit şeridi: kart ekrana girince kutular soldan sağa dolar */
@keyframes strip-fill { from { opacity: 0.18; transform: scaleY(0.45); } to { opacity: 1; transform: none; } }
.strip-wait i.on { opacity: 0.18; transform: scaleY(0.45); }
.strip-go i.on { animation: strip-fill 0.26s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
.strip-go i:nth-child(2) { animation-delay: 30ms; } .strip-go i:nth-child(3) { animation-delay: 60ms; } .strip-go i:nth-child(4) { animation-delay: 90ms; }
.strip-go i:nth-child(5) { animation-delay: 120ms; } .strip-go i:nth-child(6) { animation-delay: 150ms; } .strip-go i:nth-child(7) { animation-delay: 180ms; }
.strip-go i:nth-child(8) { animation-delay: 210ms; } .strip-go i:nth-child(9) { animation-delay: 240ms; } .strip-go i:nth-child(10) { animation-delay: 270ms; }
.strip-go i:nth-child(11) { animation-delay: 300ms; } .strip-go i:nth-child(12) { animation-delay: 330ms; } .strip-go i:nth-child(n + 13) { animation-delay: 360ms; }

/* Favori kalbi eklenince küçük bir "tık" */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.fav.pop, .fav-wide.pop svg { animation: pop 0.32s cubic-bezier(0.3, 0.7, 0.4, 1); }

/* Yukarı çık */
.to-top { position: fixed; right: 20px; bottom: 24px; z-index: 45; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.2s, transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1), border-color 0.15s; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--text); }
body.has-tray .to-top { bottom: 92px; }

/* Ürün sırası okları (yalnızca fareyle gezinen ekranlarda) */
.rail-head { align-items: center; justify-content: flex-start; }
.rail-head > p { margin-left: auto; }
.rail-nav { display: none; gap: 6px; margin-left: auto; }
.rail-head p + .rail-nav { margin-left: 0; }
@media (hover: hover) and (min-width: 761px) { .rail-nav { display: flex; } }
.rail-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color 0.15s, opacity 0.15s, transform 0.15s; }
.rail-nav button:hover:not([disabled]) { border-color: var(--text); }
.rail-nav button:active:not([disabled]) { transform: scale(0.94); }
.rail-nav button[disabled] { opacity: 0.35; cursor: default; }
.rail-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-nav [data-dir='-1'] svg { transform: rotate(180deg); }
.rail-track { scroll-behavior: smooth; }
.rail-clear { margin: 0 !important; font-size: 13px; font-weight: 500; color: var(--muted); }

/* Seçili filtreler: tek tek kaldırılabilir */
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; align-items: center; }
.active-filters a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--text); color: var(--paper); text-decoration: none; font-size: 13px; font-weight: 600; transition: background-color 0.15s; }
.active-filters a:hover { background: var(--text-2); }
.active-filters a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.75; }
.active-filters .af-clear { background: transparent; color: var(--muted); padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.active-filters .af-clear:hover { background: transparent; color: var(--text); }
/* "Bunu mu arıyorsun?": aramayı daraltan öneriler, seçili filtre haplarından ayrı (çerçeveli, kaldırma işareti yok) */
.active-filters .refine { display: contents; }
.active-filters .refine span { font-size: 13px; color: var(--muted); margin-left: 8px; }
.active-filters .refine a { padding: 0 12px; background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
.active-filters .refine a:hover { background: transparent; border-color: var(--text); }
.active-filters .refine small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  /* Telefonda öneriler tek satır, yana kaydırılır (satır satır yığılmasın); satır kutusu ekrandan taşmasın */
  .active-filters:has(.refine) { flex: 1 1 100%; min-width: 0; }
  .active-filters .refine { display: flex; flex: 1 0 100%; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .active-filters .refine::-webkit-scrollbar { display: none; }
  .active-filters .refine span { margin-left: 0; white-space: nowrap; }
  .active-filters .refine a { flex: none; white-space: nowrap; }
}
.toolbar { justify-content: space-between; }

/* Arama: son aramalar */
.suggest .sg-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 4px; font-size: 12px; color: var(--muted); cursor: default; grid-template-columns: none; }
.suggest .sg-head:hover { background: none; }
.suggest .sg-head button { border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0; }
.suggest .sg-recent { grid-template-columns: 20px minmax(0, 1fr); font-size: 14px; }
.suggest .sg-recent svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }

/* Ürün sayfası (telefon): satın al düğmesi ekrandan çıkınca altta sabit çubuk */
.buybar { display: none; }
@media (max-width: 760px) {
  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 42; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--night); color: var(--night-text); border-top: 1px solid rgba(255, 255, 255, 0.12); transform: translateY(110%); transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); }
  .buybar.show { transform: none; }
  .buybar-info { min-width: 0; flex: 1; }
  /* Önce aylık ödeme, altında taksit sayısı ve toplam: toplam kesilmez (reklam kuralı), gerekirse iki satır */
  .buybar-info > b { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
  .buybar-info b .per { color: var(--night-muted); }
  .buybar-info > small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--night-text); }
  .buybar-info > small b { display: inline; font-family: var(--sans); font-size: inherit; font-weight: 600; letter-spacing: 0; }
  .buybar .btn { height: 44px; padding: 0 18px; flex-shrink: 0; }
  body.has-buybar .toast, body.has-buybar .to-top { bottom: 118px; } /* çubuk iki satır olabilir (aylık + toplam) */
  body.has-buybar.has-tray .buybar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #app.enter, .strip-go i.on, .fav.pop, .fav-wide.pop svg { animation: none; }
  .strip-wait i.on { opacity: 1; transform: none; }
  .progress, .to-top, .buybar, .card, .btn, .btn .arr, .rail-track { transition: none; scroll-behavior: auto; }
  .card:hover { transform: none; }
}

/* === Hız ve mobil düzen: sayfalama, filtre paneli, kısa üst bilgi ======================== */

/* Üst veri notu: masaüstünde uzun cümle, telefonda tek satır */
.ds-short { display: none; }
@media (max-width: 640px) {
  .notice-strip { padding: 4px 12px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-strip .ds-long { display: none; }
  .notice-strip .ds-short { display: inline; }
}

/* Giriş yap: telefonda logo satırında yuvarlak ikon düğme */
.account-link .account-ico { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .topbar-inner { gap: 6px 8px; padding-top: 6px; padding-bottom: 6px; }
  .menu-btn, .theme-btn { width: 36px; height: 36px; }
  .account-link { height: 36px; }
  .account-link:not(:has(.avatar)) { width: 36px; padding: 0; justify-content: center; }
  .account-link:not(:has(.avatar)) .account-name { display: none; }
  .account-link:not(:has(.avatar)) .account-ico { display: block; }
  .search input { height: 38px; font-size: 15px; }
  /* Aşağı kaydırırken arama satırı gizlenir, yukarı kaydırınca geri gelir (ux.js). Başlığın sayfadaki yüksekliği
     değişmez, yalnızca görünen kısmı kırpılır (--compact-cut: arama satırı + alt boşluk): içerik kaymaz, tarayıcının
     kaydırma sabitlemesi (scroll anchoring) başlığı açıp kapatan bir döngüye girmez. */
  .topbar.is-compact { clip-path: inset(0 0 var(--compact-cut, 45px) 0); }
  .topbar.is-compact .search { visibility: hidden; }
  .topbar.is-compact::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--compact-cut, 45px); border-bottom: 1px solid var(--line); pointer-events: none; }
}

/* Ana sayfa: kısa vitrin ve "Tüm fırsatlar" bağlantısı */
.list-head .home-more { align-self: end; white-space: nowrap; }
.vitrin-more { display: flex; justify-content: center; margin: 28px 0 0; }
.hero-cta .cta-n { font-family: var(--mono); font-size: 12px; font-weight: 500; opacity: 0.75; margin-left: 2px; }
.hero-cta .cta-n::before { content: '·'; content: '·' / ''; margin-right: 6px; } /* "6 taksit ve üstü · 37.900 ürün"; ekran okuyucu okumaz */

/* Sayfalama: "Daha fazla göster" + sayfa numaraları */
.pager { display: grid; justify-items: center; gap: 14px; margin: 32px 0 8px; }
.pager-more { min-width: 240px; }
.pager-more .num { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.pager-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-size: 14px; }
.pager-n, .pager-step { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center; text-decoration: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pager-step { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--text); }
a.pager-n:hover, .pager-step:hover { background: var(--line-soft); color: var(--text); }
.pager-n[aria-current='page'] { background: var(--text); color: var(--paper); font-weight: 600; }
.pager-gap { color: var(--muted); padding: 0 2px; }
@media (max-width: 640px) {
  .pager-links { gap: 2px; font-size: 13px; }
  .pager-n, .pager-step { min-width: 30px; height: 34px; padding: 0 7px; }
}
.filter-toggle .ft-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-left: 6px; }

/* Filtre paneli: masaüstünde yan sütun; panel başlığı, alt düğme ve paneldeki sıralama yalnızca telefonda */
.sheet-head, .sheet-foot, .sheet-sort { display: none; }
.sheet-sort { gap: 6px; margin-bottom: 22px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.sheet-sort select { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.sheet-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.sheet-close svg { width: 18px; height: 18px; }
@media (max-width: 980px) {
  .filters, .filters.open { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; display: flex; flex-direction: column; max-height: 86vh; max-height: 86dvh; margin: 0; padding: 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--surface); box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.45); transform: translateY(105%); visibility: hidden; transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1), visibility 0s linear 0.25s; }
  .filters.open { transform: none; visibility: visible; transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .sheet-head h2 { margin: 0; font-size: 22px; }
  .sheet-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 18px 16px 8px; }
  .sheet-sort { display: grid; }
  .sheet-foot { display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
  .sheet-foot .btn { height: 48px; }
  .toolbar .sort { display: none; }
  .toolbar { justify-content: flex-start; }
  body.sheet-open { overflow: hidden; }
  body.sheet-open::before { content: ''; position: fixed; inset: 0; z-index: 69; background: rgba(15, 16, 13, 0.45); }
  body.sheet-open .to-top, body.sheet-open .buybar { display: none; }
}

/* Yukarı çık: telefonda sabit çubuklarla çakışmasın */
@media (max-width: 760px) {
  .to-top { right: 16px; bottom: 20px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .filters, .filters.open { transition: none; }
}

/* --- Erişilebilirlik: "İçeriğe geç" bağlantısı (klavyede ilk Tab ile görünür) ---------------------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--paper); font-weight: 600; font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 10px; outline: 2px solid var(--text); outline-offset: 2px; }
#app:focus { outline: none; }

/* --- Formlar: alan altında hata, şifreyi göster / gizle ------------------------------------------------ */
.field-error { display: block; margin-top: 2px; color: var(--danger); font-size: 13px; font-weight: 500; line-height: 1.35; text-transform: none; letter-spacing: 0; }
input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }
.check input[aria-invalid='true'] { outline: 2px solid var(--danger); outline-offset: 2px; }
.nt-row + .field-error { margin-top: 6px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.pw-toggle:hover { color: var(--text); background: var(--line-soft); }
.pw-toggle .ico { width: 20px; height: 20px; }

/* --- Bildirim: sayfadaki paneller ve yapışık çubukların üstünde (konum ux.js placeToast) ----------- */
.toast { z-index: 80; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1), bottom 0.2s; }
/* Bu kural yukarıdaki prefers-reduced-motion bloğundan SONRA geldiği için (aynı özgüllük, .toast) onu ezip
   transition'ı geri açardı; azaltılmış harekette gerçekten kapanması için buraya, bu satırın ardına konuldu */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* "6 × 1.234 TL" yazan her yerde tutar bölünmez (ürün kartının taksit kutusu kart bölümünde) */
.deal-plan > b, .deal-mine b, .receipt-row b, .sg-price, .offer-amount, .spark-stats > span { white-space: nowrap; }

/* --- Arama önerileri: kategori / marka / popüler arama satırları ------------------------------------- */
/* Ana sayfadaki büyük aramanın öneri listesi hero'nun altına taşabilsin (hero normalde taşanı gizler) */
.hero:has(.suggest:not([hidden])) { overflow: visible; }
.suggest .sg-facet { grid-template-columns: 20px minmax(0, 1fr) auto; }
.suggest .sg-facet .ico, .suggest .sg-recent .ico { width: 16px; height: 16px; color: var(--muted); }
.suggest .sg-facet .sg-text b { font-weight: 600; }
.sg-count { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.suggest .sg-empty { padding-bottom: 4px; }

/* iOS Safari 16 px'ten küçük yazılı alana odaklanınca sayfayı yakınlaştırır (ve geri uzaklaştırmaz). Telefonda
   tüm yazı alanları en az 16 px; yükseklikler sabit olduğundan düzen değişmez. */
@media (max-width: 640px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea { font-size: 16px !important; }
}

/* liste cümle filtresi */
/* Filtre panelinin (.filters) ÜSTÜNE eklenen ikinci kumanda: "Bana [Bonus] kartımla [6+] taksitli, ayda en
   fazla [1.500 TL] olan [Kulaklık ürünlerini] göster." Şablon: brand/sablonlar/kategori.html + sablon.css
   (yalnızca ilham; renkler ve ölçüler site token'larından, kopyalanmadı). */
.sentence-filter { margin: 22px 0 6px; }
.sf-sentence { margin: 0; padding: 20px 0 22px; border-top: 3px double var(--line); border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 650; font-size: clamp(19px, 2.3vw, 28px); letter-spacing: -0.02em; line-height: 1.6; max-width: 46em; }
.sf-w { color: var(--text-2); }
.sf-brk { display: none; }
.sf-slot { position: relative; display: inline-block; vertical-align: baseline; }
.sf-slot > summary,
.sf-slot-static { list-style: none; display: inline-flex; align-items: center; gap: 0.2em; min-height: 40px; padding: 0.05em 0.5em 0.1em; margin: 0 0.05em; border-radius: 8px; background: var(--text); color: var(--paper); line-height: 1.2; cursor: pointer; font: inherit; letter-spacing: inherit; }
.sf-slot-static { cursor: default; }
.sf-slot > summary::-webkit-details-marker { display: none; }
.sf-slot > summary::marker { content: ''; }
.sf-slot > summary:hover { background: var(--text-2); }
.sf-slot > summary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.sf-slot .sf-ico { width: 0.62em; height: 0.62em; opacity: 0.85; transition: transform 0.15s ease; flex: none; }
.sf-slot[open] > summary .sf-ico { transform: rotate(180deg); }
.sf-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; max-height: min(60vh, 360px); overflow: auto; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(0, 0, 0, 0.35); font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.sf-pop a, .sf-pop span { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.sf-pop a:hover { background: var(--line-soft); }
.sf-pop a[aria-current='true'] { font-weight: 650; }
.sf-pop a[aria-current='true']::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text); margin-left: 6px; }
/* Sonucu 0 olan seçenek: bağlantı değil, tıklanamaz düz metin (görünür kalır, pasif olduğu bellidir) */
.sf-pop span.is-zero { color: var(--muted); cursor: default; }
.sf-pop a .mono, .sf-pop span .mono { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-left: auto; }
.sf-alt { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); font-family: var(--sans); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.sf-alt a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sf-alt .mono { font-size: 12.5px; }
/* Hap açılınca seçeneklerin ÜSTÜNE eklenen serbest girdi kutusu (kendi tutarını yaz / ya da ara): sahibin isteği. */
.sf-pop-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 4px 10px; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
.sf-pop-form form { display: flex; align-items: center; gap: 6px; width: 100%; }
.sf-pop-form label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sf-pop-form input { flex: 1; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--text); font: inherit; font-size: 13.5px; }
.sf-pop-unit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sf-pop-form button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--text); color: var(--paper); font-size: 15px; cursor: pointer; }
.sf-pop-form button:hover { background: var(--text-2); }
/* "ya da ara" kutusunun canlı önerileri (public/cumle-filtre.js bindKindSearch): panelin (.sf-pop) içinde,
   kutunun altında; ekstra bir katman açmaz, panelin kendi kaydırmasına (overflow: auto) tabidir. */
.sf-suggest { list-style: none; width: 100%; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-suggest[hidden] { display: none; }
.sf-suggest li { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sf-suggest li[aria-selected='true'], .sf-suggest li:hover { background: var(--line-soft); }
@media (max-width: 640px) {
  .sf-sentence { font-size: 19px; line-height: 1.75; padding: 16px 0 18px; }
  .sf-brk { display: block; }
  .sf-slot > summary, .sf-slot-static { min-height: 44px; }
  .sf-pop-form input, .sf-pop-form button { min-height: 44px; }
  .sf-pop-form button { width: 44px; }
}

/* ana sayfa bütçe seçici ("Ayda X TL ayırırsan ne alırsın?"; public/parts.js budgetPickerHtml, public/butce.js) --- */
/* Not: .budget-band'e color verilmez (denetim, 1. tur): koyu bandın rengi .card'a miras geçip açık temada krem
   kart üstünde krem yazı (okunmaz) çıkarıyordu. Koyu renk yalnızca band metnini taşıyan öğelere (başlık, cümle,
   haplar) ayrı ayrı verilir; .budget-band .card kuralı da miras zincirini kesmek için ek güvence. */
.budget-band { background: var(--night); margin-top: 48px; padding: 48px 0 56px; }
.budget-band .card { color: var(--text); }
.budget-head { border-top: 1px solid var(--night-text); padding-top: 18px; }
.budget-head p { margin: 8px 0 0; color: var(--night-muted); }
.budget-q { color: var(--night-text); font-family: var(--display); font-weight: 750; letter-spacing: -0.03em; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.12; margin: 0; max-width: 24ch; }
.budget-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: var(--night-2); margin: 22px 0 16px; }
.budget-pill { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--night-text); font-family: var(--mono); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; }
.budget-pill:hover { background: rgba(255, 255, 255, 0.08); }
.budget-pill[aria-pressed='true'] { background: var(--night-text); color: var(--night); }
.budget-pill:focus-visible { outline-color: var(--night-text); outline-offset: 2px; }
/* Hazır hapların hemen yanında, hap satırının İÇİNDE, aynı boyut/görünümde yazılabilir bir hap (sahibin isteği,
   27 Eylül 2026): "Kendi tutarın" artık ayrı bir satır değil, .budget-pill ile aynı yükseklik/şekildeki bu
   <form>. JS'siz de çalışır (gerçek method="get", /firsatlar'a gider); JS varsa public/butce.js submit'i
   yakalayıp sayfa yenilemeden gider ya da (hazır hapa eşitse) kartları yerinde çizer. Seçili değilken düz hap
   gibi durur, yalnızca kutu odaklanınca lime çerçeve alır (kart numarası vb. hassas bilgi değil, sade giriş). */
.budget-pill-custom { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 14px; background: transparent; transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.budget-pill-custom:hover { background: rgba(255, 255, 255, 0.08); }
.budget-pill-custom:focus-within { box-shadow: 0 0 0 2px var(--lime); }
.budget-pill-custom input { width: 64px; min-width: 0; border: 0; background: transparent; color: var(--night-text); font: inherit; font-family: var(--mono); font-size: 15px; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.budget-pill-custom input::-webkit-outer-spin-button, .budget-pill-custom input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.budget-pill-custom input::placeholder { color: var(--night-muted); }
.budget-pill-unit { font-size: 13px; color: var(--night-muted); }
.budget-pill-go { width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: var(--night-text); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.budget-pill-go:hover { background: var(--night-text); color: var(--night); }
.budget-pill-go:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.budget-line { font-size: 15.5px; color: var(--night-muted); margin: 0 0 22px; max-width: 72ch; }
.budget-line b { color: var(--night-text); font-family: var(--mono); font-weight: 600; }
.budget-band .muted { color: var(--night-muted); }
.budget-empty { grid-column: 1 / -1; color: var(--night-muted); font-size: 14px; }
.budget-empty a { color: var(--night-text); text-decoration: underline; text-underline-offset: 3px; }
.budget-empty a:hover, .budget-empty a:focus-visible { text-decoration-thickness: 2px; }
/* 1440 px'te düzgün 4 sütun (.grid-feature, mevcut token; sitede zaten 980/640 px kırılım noktaları var) */
@media (max-width: 640px) {
  /* 5 hap (4 hazır + kendi tutarın) tek satıra sığmaz: düzgün 2x3 ızgara (son hücre boş), taşma olmasın */
  .budget-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 16px; }
  .budget-pill { padding: 0 4px; font-size: 12.5px; }
  .budget-pill-custom { padding: 0 4px 0 8px; }
  .budget-pill-custom input { width: auto; min-width: 0; flex: 1; font-size: 12.5px; }
  .budget-pill-unit { display: none; } /* dar hücrede yer kalmasın; birim placeholder'da (Sen yaz) örtük */
  /* H2 kayan seçim zemini (efektler.js/css) tek satır varsayımıyla kurulu (top/bottom sabit, yalnızca left/width
     hesaplanır); 2 satırlı ızgarada bu, seçili hapın üstüne uzun/yuvarlak bir şekil olarak taşıyordu (denetim).
     H2'nin kendi dosyasına (efektler.js/css) dokunmadan: burada zemini gizleyip pressed hapın rengini geri
     veriyoruz (H2'nin transparent yaptığı kuraldan daha spesifik seçiciyle, seçili hâl görünmez kalmasın). */
  .budget-seg .eff-glide { display: none; }
  .budget-seg.eff-h2 .budget-pill[data-budget][aria-pressed='true'] { background: var(--night-text); color: var(--night); }
}

/* ürün ödeme takvimi --------------------------------------------------------------------------------
   Sahibin isteği (27 Eylül): "peşin taksit zaten her şey peşin, bu kadar detaylı tablo anlamsız" — ürün
   sayfası artık kompakt bir özet gösterir (küçük başlık + kart hapları + tek satır + ince şerit, .paycal-line
   ve .strip). Lime YALNIZCA "= peşin fiyat" ibaresinde (mark); şerit, hap ve tutarlar nötr (koyu kutuda açık
   renk). 12 kutulu ay-ay ızgara (.paycal-months ve altındaki kurallar) SİLİNMEDİ — ürün sayfası artık onu
   çizmiyor, ama ileride Hesabım'daki alımlar için kullanılabilir (docs/KITAP.md), o yüzden CSS'i de duruyor. */
.paycal-block { margin-top: 8px; }
.paycal { background: var(--night); color: var(--night-text); border-radius: 16px; padding: 18px 20px; }
.paycal h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; letter-spacing: 0.01em; }
/* Kart hapları tek satırda, taşarsa yatay kaydırma (dikeyde büyümesin — bölüm mobilde ~150-200 px kalmalı) */
.paycal-cards { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 0 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; }
/* Görünür (ince) kaydırma çubuğu: kaç kart programı olursa olsun bölüm tek satırda kalır, çubuk daha fazlası
   olduğunu gösterir (bkz. dosya başı: bölüm yüksekliği mobilde ~150-200 px kalmalı). */
.paycal-cards::-webkit-scrollbar { height: 4px; }
.paycal-cards::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; }
.paycal-cards::-webkit-scrollbar-track { background: transparent; }
.paycal-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: var(--night-text); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.paycal-chip .mono { font-size: 11.5px; color: var(--night-muted); }
.paycal-chip:hover { border-color: var(--night-text); }
.paycal-chip[aria-checked='true'] { background: var(--night-text); color: var(--night); border-color: var(--night-text); }
.paycal-chip[aria-checked='true'] .mono { color: inherit; opacity: 0.72; }
.paycal-chip:focus-visible { outline: 2px solid var(--night-text); outline-offset: 2px; }
/* Mağazaya özel kart (Hepsiburada Premium Worldcard…): "yalnızca … ile" notu alt satırda, hap iki satıra uzar */
.paycal-chip-store { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 7px 12px 8px; }
.paycal-chip-note { font-size: 10.5px; font-weight: 400; color: var(--night-muted); white-space: nowrap; }
.paycal-chip-store[aria-checked='true'] .paycal-chip-note { color: inherit; opacity: 0.72; }

/* Kompakt özet satırı: "9 × 5.254,33 TL (son taksit …) · Ekim 2026 – Haziran 2027 · toplam = peşin fiyat" */
.paycal-line { margin: 0; font-size: 14.5px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.paycal-line .op { color: var(--night-muted); font-weight: 500; }
.paycal-line .sep { margin: 0 1px; }
/* İnce taksit şeridi (public/parts.js strip() — sitenin imza öğesi, aynı bileşen); burada nötr renkte, lime
   yalnızca "= peşin fiyat" ibaresinde kalsın diye (bkz. dosya başı notu). */
.paycal .strip { margin-top: 10px; height: 5px; }
.paycal .strip i { background: rgba(255, 255, 255, 0.16); }
.paycal .strip i.on { background: var(--night-text); }

/* --- Detaylı ay-ay görünüm (şimdilik çizilmiyor; ileride Hesabım için, bkz. paymentCalendarDetailedHtml) --- */
.paycal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 22px; }
.paycal-head h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0; }
.paycal-head p { color: var(--night-muted); font-size: 14px; max-width: 52ch; margin: 6px 0 0; }
.paycal-head .paycal-cards { flex-wrap: wrap; overflow-x: visible; }
.paycal-head .paycal-chip { padding: 0 14px; font-size: 14px; }

.paycal-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.paycal-month { position: relative; padding: 14px 6px 12px; border-radius: 6px; background: var(--night-2); min-height: 104px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.paycal-month::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, 0.1); }
.paycal-month.on::before { background: var(--lime); }
/* Ay adı ve yıl iki satırda, numara ("10/12") HER ZAMAN üçüncü, kendi satırında — hiçbir kutuda koşula
   bağlı yan yana/alt alta değişmez, hepsi aynı düzende (position:absolute KULLANILMAZ). Her satır tek
   başına kısa olduğundan (en uzun ay adı tek başına "Ağustos") 12 sütunda da, 320 px'te de taşmaz. */
.paycal-month-name { display: block; font-size: 12px; color: var(--night-muted); }
.paycal-month-name b { display: block; color: var(--night-text); font-weight: 600; font-size: 13px; }
.paycal-month-no { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--night-muted); }
/* Tutar: 12 sütun (geniş masaüstü DAHİL — sütun sayısı viewport'tan bağımsız dar kalır) ve 320 px gibi çok dar
   genişliklerde küçültülür; sütun başına düşen genişlik viewport'a değil sütun SAYISINA bağlı olduğundan
   vw tabanlı `clamp()` yerine sabit, sütun düzenine göre ayarlı boyutlar kullanılır (bkz. aşağıdaki medya
   sorguları — her biri 7 haneli bir tutarla (1.234.567,89 TL) da ölçülüp doğrulandı). */
.paycal-month-amt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; margin-top: auto; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap; }
.paycal-month-amt small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--night-muted); letter-spacing: 0; }
.paycal-month:not(.on) .paycal-month-amt { color: var(--night-muted); font-weight: 400; }
.paycal-rest { display: none; }
/* 12 taksitten uzun planlarda 12 kutulu görünümün dışında kalan taksitler ("13.–18. taksit: …") */
.paycal-more { font-size: 13.5px; color: var(--night-muted); margin: 12px 0 0; }
.paycal-more b { color: var(--night-text); font-weight: 600; }

.paycal-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.paycal-eq { font-weight: 700; font-size: clamp(16px, 2vw, 24px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.45; margin: 0; }
.paycal-eq .op { color: var(--night-muted); font-weight: 500; font-size: 0.85em; }
.paycal-diff { font-size: 0.55em; }
.paycal-note { font-size: 14px; color: var(--night-muted); text-align: right; margin: 0; line-height: 1.4; }
.paycal mark { background: var(--lime); color: #0f100d; padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; }

/* 12 sütun yalnızca kutunun gerçekten geniş olduğu genişliklerde: .wrap 1280 px'te sabitlendiğinden bu eşiğin
   altındaki her genişlik (tablet yatayı dahil, ör. 1112/1170 px) 6 sütunla daha geniş, taşmayan kutular alır.
   641–1279 px aralığı (6 sütun) sütun başına en bol yeri verir, bu yüzden tutar burada büyür; 1280 px ve üstü
   yine 12 sütuna döner (sütun genişliği viewport büyüse de artmaz, .wrap sabit kaldığından) ve tutar küçük kalır. */
@media (min-width: 641px) and (max-width: 1279px) {
  .paycal-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .paycal-month-amt { font-size: 10.5px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .paycal-month-amt { font-size: 13px; }
}
@media (max-width: 640px) {
  .paycal { padding: 20px 16px 18px; border-radius: 14px; }
  .paycal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .paycal-month:not(.on) { display: none; }
  .paycal-rest { display: block; grid-column: 1 / -1; padding: 12px 10px; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, 0.16); font-size: 13px; color: var(--night-muted); }
  .paycal-month { min-height: 86px; padding: 12px 6px 10px; }
  .paycal-sum { grid-template-columns: minmax(0, 1fr); }
  .paycal-note { text-align: left; }
}
@media (max-width: 360px) {
  .paycal-month { padding: 10px 3px 8px; }
  .paycal-month-name b { font-size: 11px; }
  .paycal-month-amt { font-size: 9px; letter-spacing: -0.04em; }
  .paycal-eq { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .paycal-chip { transition: none; }
}

/* ana sayfa kart ızgarası */
/* "Kartın hangisi?" (public/card-shortcuts.js): her genel kart programı için bir kutu, sonda "Kartlarını kaydet".
   Kart bilgisi (numara, son hane, limit) hiçbir yerde istenmez. Taksit şeridi public/parts.js strip(); öne çıkan
   (en çok 6+ taksitli ürünü olan) kutu koyu yüzeyde .strip-lime ile (üründeki .strip-lime kullanımıyla aynı kural). */
.card-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.card-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 148px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-line); text-decoration: none; color: inherit;
  container-type: inline-size; transition: box-shadow 0.15s;
}
.card-tile:hover, .card-tile:focus-visible { box-shadow: inset 0 0 0 1px var(--text); }
.card-tile-top { display: flex; flex-direction: column; }
.card-tile-name { font-family: var(--display); font-weight: 750; font-size: clamp(18px, 13cqi, 28px); letter-spacing: -0.03em; line-height: 1; }
.card-tile-bank { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 4px; }
.card-tile-bottom { display: flex; flex-direction: column; gap: 6px; }
.card-tile-fig { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.card-tile-fig b { font-weight: 600; color: var(--text); }
.card-tile-max { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.card-tile-max .strip { height: 5px; flex: 1; min-width: 40px; }
/* Öne çıkan kart: gece yüzü + her zaman görünür çerçeve (koyu modda diğer kutulardan ayırt edilsin diye; glow/gradyan
   yok), dolu kutular lime (.strip-lime, product-page/account'takiyle aynı kural). --night-muted temaya göre değişmez,
   bu yüzden çerçeve açık ve koyu modda aynı görünürlükte kalır. */
.card-tile-ink { background: var(--night); color: var(--night-text); box-shadow: inset 0 0 0 1.5px var(--night-muted); }
.card-tile-ink .card-tile-bank, .card-tile-ink .card-tile-fig, .card-tile-ink .card-tile-max { color: var(--night-muted); }
.card-tile-ink .card-tile-fig b { color: var(--night-text); }
.card-tile-ink:hover, .card-tile-ink:focus-visible { box-shadow: inset 0 0 0 1.5px var(--night-text); }
/* "Kartlarını kaydet": çerçeveli, saydam zemin; sağ altta artı düğmesi */
.card-tile-save { box-shadow: inset 0 0 0 1.5px var(--line); background: transparent; }
.card-tile-save .card-tile-name { font-size: 20px; }
.card-tile-save:hover, .card-tile-save:focus-visible { box-shadow: inset 0 0 0 1.5px var(--text); }
.card-tile-plus { margin-top: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.card-tile-plus svg { width: 17px; height: 17px; }
@media (max-width: 980px) { .card-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .card-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-tile { padding: 12px 14px; min-height: 132px; }
  /* Dar kutuda "N taksite kadar" şeridin altına düşer, tek satıra sıkışıp kırpılmaz */
  .card-tile-max { flex-direction: column; align-items: stretch; gap: 4px; white-space: normal; }
  .card-tile-max .strip { flex: none; min-width: 0; }
}

/* --- Mağaza ve kart logoları (public/logos.js logoHtml; dosyalar ve kaynakları public/logos/) ---------------------
   Logo küçük, açık zeminli, 6 px köşeli rozette: koyu temada siyah logolar kaybolmaz (--logo-well iki temada da
   açık; açık temada beyaz, koyu temada kırık beyaz: logolar beyaz zemine göre çizildiği için soluk renkler de okunur).
   Boyut HTML'de sabit (width/height): yüklenirken yerleşim kaymaz. Resmî logosu beyaz olan marka kendi zeminiyle
   gelir (--logo-bg, logos.js bg). */
:root { --logo-well: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --logo-well: #efede6; } }
:root[data-theme='dark'] { --logo-well: #efede6; }
.logo-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 3px 6px; border-radius: 6px; background: var(--logo-bg, var(--logo-well)); line-height: 0; vertical-align: middle; }
/* Açık temada beyaz rozet kağıt zeminde hafif bir çizgiyle ayrılır */
.logo-badge:not([style]) { box-shadow: inset 0 0 0 1px var(--line-soft); }
.logo-badge img { display: block; max-width: none; object-fit: contain; }
.logo-name { margin-left: 8px; }
/* Ürün kartının alt satırı: mağaza logosu + "3 mağaza" (satır yüksekliği rozetle aynı: logolu ve logosuz kartlar hizalı) */
.card-src { line-height: 18px; }
.card-src .logo-badge { height: 18px; padding: 0 5px; border-radius: 5px; vertical-align: top; }
.card-src .logo-badge img { max-width: 64px; }
/* Filtre paneli: mağaza ve kart listesi */
.filter-list :is(a, button) > span:first-child:has(.logo-badge) { display: inline-flex; align-items: center; min-width: 0; }
.filter-list .logo-badge { padding: 3px 6px; }
/* Ürün sayfası mağaza kartları: monogram yerine logo rozeti (monogramla aynı 44 px yükseklik) */
.offer-head .offer-logo { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; }
.offer-head .offer-logo img { max-width: 96px; }
/* "Hangi kartla kaç taksit?": tek kart satırında logo, gruplu satırda küçük logolar */
.cp-card b:has(.logo-badge) { display: inline-flex; align-items: center; }
.cp-card .cp-names { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.cp-card .cp-names .logo-badge { padding: 2px 5px; border-radius: 5px; }
.cp-card .cp-name { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--text-2); }
/* Kart seçici çipleri: logo + (logo adı okutmuyorsa) ad; dar çipte ad alt satıra iner, taşmaz */
.card-chip b:has(.logo-badge) { min-height: 26px; flex-wrap: wrap; gap: 4px 6px; }
.card-chip .logo-name { margin-left: 0; }
.card-chip .logo-badge { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.card-chip .logo-badge img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .offer-head .offer-logo { height: 40px; min-width: 40px; padding: 0 8px; border-radius: 11px; }
  .offer-head .offer-logo img { max-width: 84px; }
}