/* 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: kobalt = fırsat puanı ve bilgi, mercan = uyarı (gizli vade farkı, zam) */
  --accent: #d9bf87; /* krem (açıkta kum tonu): fırsat puanı, bilgi, kart kampanyası */
  --accent-soft: #f3e9d2;
  --accent-text: #6b5320;
  --on-accent: #0f100d;
  --warn: #d63d22;
  --warn-soft: #fde8e2;
  --warn-text: #a3290f;
  /* Olumlu yeşil: fırsat puanı kademeleri ve kazanç (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;
  /* Koyu fiyat kutusu (.deal) her iki temada da koyu: puan renkleri orada sabit */
  --score-night-top: #45c985;
  --score-night-good: #86dfae;
  --score-night-fair: #f0bf5a;
  --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;
    --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;
  --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.27em; height: 0.066em; margin-left: -0.115em; border-radius: 0.03em; background: currentColor; }
.lg-s::before { bottom: 0.125em; }
.lg-s::after { bottom: 0.02em; }
.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; }
.hero-stats { display: flex; gap: 40px; margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column-reverse; }
.hero-stats dt { font-size: 13px; color: var(--night-muted); }
.hero-stats dd { margin: 0; font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-stats dd em { font-style: normal; color: var(--lime); }
.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) {
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .hero-stats dt { font-size: 11px; line-height: 1.3; }
  .hero-stats dd { font-size: 28px; }
  .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; }
.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; }
}

/* "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); }
.deck-slide:not([data-pos='0']):not([data-pos='1']):not([data-pos='2']) { 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-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 yeşil) ve çok iyi (dolu yeşil) 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(--good-soft); color: var(--good-text); }
.card-score.s-top { background: var(--good); color: var(--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; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--paper); padding: 12px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1); font-weight: 600; z-index: 50; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.show.has-action { pointer-events: auto; padding-right: 8px; }
.toast-action { border: 0; background: var(--paper); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; 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; }
  .purchase { grid-template-columns: minmax(0, 1fr) auto; }
  .purchase-actions { grid-column: 1 / -1; }
  .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 */
.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(--lime-text); }
.purchase-actions { display: flex; gap: 6px; }
/* Ö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); }
.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); border-radius: 4px 4px 0 0; }
.paychart-col:hover .paychart-bar, .paychart-col:focus .paychart-bar { background: var(--lime-text); }
.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-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: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 16px; padding: 18px 18px 8px; }
.rail-sig .rail-head { border-bottom-color: color-mix(in srgb, var(--accent-text) 45%, transparent); 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 yeşil, iyi = yeşil çerçeve, makul = kehribar, sıradan = soluk.
   Koyu fiyat kutusunda --score-night-*, açık zeminde (karşılaştırma, ürün kartı) --good / --fair (koyu temada açık tonlar). */
.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, .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(--good); color: var(--good-on); border-color: var(--good); }
.score-light.score-good > b { background: var(--good-soft); color: var(--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, .score-light.score-good > span small { color: var(--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-good); }
.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); }
.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)); }
.budget-form .money-input input { width: 100%; padding-right: 56px; }
.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; }

/* 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; }

/* "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; }
}