/* peşintaksit — ürün sayfası, karşılaştırma, hesap ve giriş sayfaları
   styles.css'teki kimliğin üstüne: kutu yerine çizgi (üst çizgi + boşluk), tek hüküm, tek ikon takımı.
   Kutulu yüzey yalnızca koyu fiyat kutusu (.deal), para kartı ve fişte kalır. */

/* --- İkon takımı (public/icons.js) ------------------------------------------------ */

.ico { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }

/* --- Ürün sayfası: fiyat kutusu ve tek hüküm ----------------------------------------- */

.verdict { margin: 0 0 22px; padding: 2px 0 20px 16px; border-left: 4px solid #ff7a59; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.verdict-ok { border-left-color: var(--lime); }
.verdict:not(.verdict-ok) p b { color: #ffab94; }
.verdict p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--night-muted); max-width: 60ch; }
.verdict p b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; color: var(--night-text); }
.verdict .verdict-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 0.8125rem; }
.verdict-foot a { color: var(--night-text); font-weight: 600; text-underline-offset: 3px; }
.verdict-foot span { color: var(--night-muted); }

.score > span small { font-size: 0.6875rem; letter-spacing: 0.06em; }
.deal-tools { align-items: center; }
.deal-stores { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--night-text); text-underline-offset: 3px; }

/* "Neden bu puan?": artı/eksi yazı karakteri yerine çizgi ok */
.score-why summary::after { content: ''; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.score-why[open] summary::after { transform: translateY(1px) rotate(-135deg); }

/* --- Mağazalar --------------------------------------------------------------------- */

.offer, #price-history, #calc, #stores, #alarm { scroll-margin-top: 150px; }

/* --- Taksit tablosu ---------------------------------------------------------------- */

/* Kaydırma kutusu konumlu olmalı: hücrelerdeki .sr-only (absolute) sayfayı yana taşırmasın */
.table-wrap, .cmp-wrap { position: relative; }
.plan-grid th, .plan-grid td { padding: 13px 14px; }
.plan-grid thead th { border-bottom: 1px solid var(--line); }
.plan-grid thead th.c, .plan-grid td.plan { text-align: right; }
.plan-grid thead th.longest { color: var(--text); box-shadow: inset 0 -4px 0 var(--lime); }
.plan-grid tbody th { text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.plan-grid tbody th small { display: block; font-size: 0.75rem; font-weight: 600; color: var(--lime-text); }
.plan-grid td.plan.zero { color: var(--text); font-size: 0.875rem; }
.plan-grid td.plan.interest { color: var(--muted); opacity: 0.55; cursor: help; }
.plan-grid tr.mine > * { background: var(--lime-soft); }
.plan-grid thead th:first-child, .plan-grid tbody th { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.plan-grid tr.mine > th { background: var(--lime-soft); }
.legend { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); max-width: 80ch; }
.legend-longest { color: var(--text); font-weight: 600; box-shadow: inset 0 -4px 0 var(--lime); }
.legend b { color: var(--text); }

/* --- Fiyat geçmişi: kutusuz --------------------------------------------------------- */

.ph-stats { gap: 0; margin: 0 0 12px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.ph-stats div { background: none; padding: 14px 16px 14px 0; }
.ph-stats div + div { padding-left: 16px; border-left: 1px solid var(--line-soft); }
.ph-stats dd .ico { width: 15px; height: 15px; vertical-align: -1px; margin-right: 2px; }

/* --- Hesapla: sekmeler (Aylık yük / Kazanç) ---------------------------------------------- */

/* Hesapla (30 Eylül gece, sahip: "minimal, anlaşılır, daha az aşağı kaydırılsın"): "Hangi kartla kaç taksit?" bölümünün içinde,
   kart listesinin altında tek zeminli kutu. Üst satır: başlık · sekmeler · taksit seçimi; altında iki rakam (aylık taksit, tahmini
   kazanç) ve ⓘ ile açılan kısa açıklama. Sağ alt köşede tam boy Denk (≥ 761 px; rakamların yanındaki boşlukta, metne binmez). */
.plans-calc .calc { position: relative; margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px 22px 16px; }
.calc .calc-count select { background: var(--paper); }
@media (max-width: 640px) { .plans-calc .calc { padding: 4px 14px 12px; border-radius: 14px; margin-left: -4px; margin-right: -4px; } }
.calc-bar { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.calc-bar h3 { margin: 0; font-family: var(--display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.tabs { display: flex; gap: 28px; }
.tabs [role='tab'] { position: relative; padding: 12px 0 13px; border: 0; background: none; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--muted); }
.calc .tabs { gap: 20px; }
.calc .tabs [role='tab'] { padding: 14px 0 13px; font-size: 0.9375rem; }
.tabs [role='tab']:hover { color: var(--text); }
.tabs [role='tab'][aria-selected='true'] { color: var(--text); }
.tabs [role='tab'][aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--text); }
.calc-count { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.calc-count select { height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--field-line); background: var(--surface); min-width: 120px; font-weight: 600; color: var(--text); }
.calc-panel[hidden] { display: none; }
.calc-lead { margin: 12px 0 0; color: var(--muted); font-size: 0.875rem; max-width: 62ch; }

.gain-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gain-result > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 16px 0; min-width: 0; }
.gain-result > div + div { padding-left: 20px; border-left: 1px solid var(--line-soft); }
.gain-result small { font-size: 0.8125rem; color: var(--muted); }
.gain-result span { font-size: 0.75rem; color: var(--muted); }
.gain-result b { font-family: var(--display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gain-result .hi b { color: var(--lime-text); }
.gain-result .hi small::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; background: var(--lime); border: 1px solid var(--text); vertical-align: 0; }
.gain-result b.load-cta-b { font-size: 1.25rem; }
.gain-result a { color: inherit; font-weight: 600; }
/* "Kazanç" sekmesi (product-page.js gainResultHtml): aylık taksit + toplam = peşin aynı karede, yanında tahmini kazanç (yeşil,
   --good; lime değil). Rakamlar içerik genişliğinde yan yana, arada ince çizgi; açıklama ⓘ panelinde (varsayılan kapalı). */
.gain-explain { margin: 0; }
.gx-top { display: flex; flex-wrap: wrap; gap: 12px 0; padding: 14px 0 2px; }
.gx-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 28px; }
.gx-top > div + div { padding-left: 28px; border-left: 1px solid var(--line-soft); }
.gx-top small { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 0.8125rem; color: var(--muted); }
.gx-top span { font-size: 0.8125rem; color: var(--text-2); }
.gx-top b { font-family: var(--display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.12; white-space: nowrap; }
.gx-gain b { color: var(--good-text); }
/* ⓘ düğmesi: 22 px daire (dokunma alanı ::before ile 32 px), açıkken dolu */
.gi-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--field-line); background: none; color: var(--text); font-family: var(--display); font-size: 0.75rem; font-weight: 700; font-style: italic; line-height: 1; cursor: pointer; }
.gi-btn::before { content: ''; position: absolute; inset: -5px; }
.gi-btn:hover { border-color: var(--text); }
.gi-btn[aria-expanded='true'] { background: var(--text); color: var(--paper); border-color: var(--text); }
/* Kazanç notu: rakamların hemen altında, hep görünür gri tek satır (telefonda sarar) */
.calc .kazanc-notu { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted); max-width: 72ch; }
/* ⓘ paneli (1 Ekim, sahip: "çok küçük oldu, bir tık detaylandır"): gövde boyutunda, rahat satır aralığı; üç numaralı adım,
   örnek taksit satırları (tutar → bugünkü değer), oran/varsayım künyesi ve bilgi notu. */
.gi-panel { margin: 12px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-soft); font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); max-width: 68ch; }
.gi-panel[hidden] { display: none; }
.gi-panel p { margin: 0; }
.gi-title { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.gi-panel b { color: var(--text); font-weight: 650; }
.gi-panel b.num { white-space: nowrap; }
.gi-steps { list-style: none; counter-reset: gi; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.gi-steps > li { counter-increment: gi; position: relative; padding-left: 32px; }
.gi-steps > li::before { content: counter(gi); position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--text); }
.gi-panel sup { font-size: 0.7em; }
.gi-rows { list-style: none; max-width: 26rem; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line-soft); font-size: 0.875rem; }
.gi-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.25em auto; align-items: baseline; gap: 0 8px; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.gi-rows li > span:first-child { color: var(--muted); }
.gi-rows .num { font-family: var(--mono); font-size: 0.8125rem; text-align: right; white-space: nowrap; color: var(--text); }
.gi-rows .gi-arrow { color: var(--muted); text-align: center; }
.gi-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; }
.gi-sum > span.num { font-family: var(--mono); font-size: 0.875rem; color: var(--text-2); }
.gi-panel .gi-sum b { color: var(--good-text); font-family: var(--display); font-size: 1.25rem; }
.gi-panel .gi-meta { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }
.gi-meta b { color: var(--text-2); font-weight: 600; }
@media (max-width: 640px) {
  .gi-panel { padding: 12px 14px; font-size: 0.875rem; line-height: 1.55; }
  .gi-title { display: none; }
  .gi-steps { margin-top: 0; gap: 8px; }
  .gi-steps > li { padding-left: 28px; }
  .gi-panel .gi-sum b { font-size: 1.125rem; }
}
.gain-bought { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.gain-bought p { margin: 0; font-size: 0.8125rem; }
.gain-bought .btn { height: 38px; font-size: 0.875rem; }
.gain-bought .btn .ico { width: 18px; height: 18px; }
.gain-bought .purchase-form { margin-top: 16px; }
/* Denk: kutunun sağ alt köşesinde, ayakları alt kenardan 14 px yukarıda; rakamlar solda, aralarında ≥ 200 px boşluk kalır.
   Aylık yük sekmesinde (geniş grafik) ve ≤ 760 px'te gizli. Mutlak konum, sabit boy: akışı değiştirmez (CLS 0). */
.calc > .denk-boy { --h: 118px; right: 26px; bottom: 14px; }
.calc:has(#panel-gain[hidden]) > .denk-boy { display: none; }
@media (max-width: 760px) { .calc > .denk-boy { display: none; } }
@media (min-width: 761px) { .calc .gain-bought { padding-right: calc(118px * 0.455 + 40px); } }
.bought-done { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 0.875rem; }
.bought-done .ico { color: var(--lime-text); width: 18px; height: 18px; }

/* --- Alarm: kutusuz ---------------------------------------------------------------- */

.alarm-form { margin-top: 18px; }
.alarm-guest { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; padding: 18px 0 0; }
.alarm-guest > .ico { width: 20px; height: 20px; color: var(--text); }
.alarm-guest p { flex: 1 1 320px; margin: 0; color: var(--text-2); }

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

.cmp-wrap { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--text); }
.cmp-table thead th { border-bottom: 1px solid var(--line); }
.cmp-corner { border-bottom: 1px solid var(--line); }
/* Hücre metni Geist; yalnızca tutarlar ve sayılar Geist Mono */
.cmp-table td { font-family: var(--sans); letter-spacing: 0; }
.cmp-table td b.num { font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; }
.cmp-table td .cmp-price { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
.cmp-table tbody th { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.cmp-prod img { width: 96px; max-width: 96px; margin-bottom: 10px; }
.cmp-prod .ph { width: 96px; height: 96px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; }
.cmp-prod .ph-brand, .cmp-prod .ph-strip { display: none; }
.cmp-prod .ph-icon { width: 46%; margin: 0; }
.cmp-table td.is-best > b:first-child, .cmp-table td.is-best > .cmp-banks { font-weight: 700; color: var(--text); }
.cmp-table td.is-best > b:first-child::before, .cmp-table td.is-best > .cmp-banks::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--lime); border: 1px solid var(--text); vertical-align: 2px; }
.cmp-table td .strip { margin: 6px 0 0; }

/* --- Giriş / kayıt ------------------------------------------------------------------ */

.auth-perks li { padding-left: 22px; }
.auth-perks li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }

/* --- Hesabım ------------------------------------------------------------------------ */

.account-id > div { min-width: 0; }
.account-id small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: normal; overflow-wrap: anywhere; }

/* Sayılar: kutu yerine çizgiler */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 0 0 28px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.stat { display: block; padding: 16px 20px 16px 0; min-width: 0; color: inherit; }
.stat + .stat { padding-left: 20px; border-left: 1px solid var(--line-soft); }
.stat b { display: block; font-family: var(--display); font-size: clamp(1.625rem, 2.3vw, 2rem); white-space: nowrap; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.block-head + .stat-row { border-top: 0; margin-top: 0; }
.stat span { color: var(--muted); font-size: 0.8125rem; }
a.stat { text-decoration: none; }
a.stat:hover span { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.stat-down b { color: var(--lime-text); }
.stat-gain b { color: var(--good-text); }

/* Başlarken: 3 adım */
.checklist { margin: 0 0 56px; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--text); }
.cl-head h2 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -0.018em; }
.cl-progress { display: inline-flex; align-items: center; gap: 10px; }
.cl-strip { width: 96px; height: 10px; }
.cl-strip i.on { background: var(--lime); box-shadow: inset 0 0 0 1px var(--text); }
.cl-progress small { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.checklist ol { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.checklist li b { display: block; font-family: var(--display); font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.01em; }
.checklist li p { margin: 2px 0 0; font-size: 0.875rem; color: var(--muted); max-width: 62ch; }
.cl-no { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.875rem; font-weight: 600; background: var(--lime); color: #0f100d; }
.checklist li.done .cl-no { background: var(--text); color: var(--lime); }
.checklist li.done b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cl-done { font-size: 0.8125rem; color: var(--muted); }

/* Boş durumlar: tek satır + küçük çizim + düğme */
.empty-state { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.es-text { flex: 1 1 280px; min-width: 0; }
.es-text b { display: block; font-weight: 600; }
.es-text p { margin: 2px 0 0; font-size: 0.875rem; color: var(--muted); max-width: 64ch; }
.es-art { flex-shrink: 0; }
.es-receipt { position: relative; width: 40px; height: 48px; padding: 9px 7px 0; display: grid; align-content: start; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0; }
.es-receipt::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -5px; height: 6px; background: radial-gradient(circle at 3px 6px, transparent 3px, var(--line) 3.5px, var(--surface) 4.5px) 0 0 / 6px 6px repeat-x; }
.es-receipt i { height: 2px; background: var(--line); }
.es-receipt i:last-child { width: 60%; background: var(--text); }

.callout { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 40px; padding: 4px 0 4px 16px; border-left: 3px solid var(--text); }
.callout .link-btn { margin: 0; }
.callout-lime { border-left-color: var(--lime-text); }
.callout-warn { border-left-color: var(--warn); }

/* Özet: para kartı koyu kalır; yanındaki liste kutusuz */
.overview-money { margin-bottom: 28px; }
.money-next { padding: 4px 0 0; border-top: 1px solid var(--text); }
.money-next > small { display: block; padding-top: 10px; color: var(--muted); }

/* Bildirim ikonları */
.note-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--line-soft); color: var(--text); }
.note-alert, .note-price-drop, .note-back { background: var(--lime); color: #0f100d; }
.notes li.unread .note-icon { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--text); }
.price-change .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* Kartlarım: düz satırlar */
.cards-privacy { margin: 14px 0 20px; font-size: 0.875rem; color: var(--muted); max-width: 72ch; }
.cards-privacy b { color: var(--text); }
.program-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0 0 8px; border-top: 1px solid var(--line); }
.program { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.program input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.program-box { width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid var(--text); display: grid; place-items: center; color: transparent; background: var(--surface); }
.program-box .ico { width: 15px; height: 15px; stroke-width: 2.4; }
.program input:checked + .program-box { background: var(--lime); border-color: #0f100d; color: #0f100d; }
.program input:focus-visible + .program-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.program-name { min-width: 0; }
.program-name b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.program-name small { display: block; font-size: 0.8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.program-stat { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.program:hover .program-box { border-width: 2px; }
.cards-save { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 8px; padding: 14px 0; background: var(--paper); border-top: 1px solid var(--text); }
.cards-save > span { font-size: 0.875rem; color: var(--muted); margin-right: auto; }
.cards-save .link-btn { margin: 0; font-weight: 500; }
body.has-tray .cards-save { bottom: 74px; }

/* Alışverişlerim */
.form-hint { margin: -4px 0 14px; font-size: 0.875rem; color: var(--muted); }
.how-box { margin: 0 0 12px; padding: 4px 0 4px 16px; border-left: 3px solid var(--line); font-size: 0.875rem; }
.how-box p { margin: 6px 0; }
.purchase-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; padding: 18px 0 4px; border-top: 1px solid var(--line); }
.paychart { padding: 8px 0 0; }
.paychart-empty .paychart-bars { display: grid; place-items: center; border-bottom: 1.5px dashed var(--muted); }
.paychart-empty .paychart-bars p { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; color: var(--muted); }
.budget-panel { padding-top: 4px; }

@media (max-width: 980px) {
  .gain-result { grid-template-columns: 1fr; }
  .gain-result > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .purchase-form { grid-template-columns: 1fr 1fr; }
  .program-list { grid-template-columns: 1fr; }
  .overview-money { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Görsel en fazla 240 px: fiyat ilk ekranda görünsün */
  .detail { gap: 20px; }
  .detail-media { max-width: none; height: 240px; }
  .detail-media img { height: 100%; width: 100%; aspect-ratio: auto; }
  .detail-media > .ph { aspect-ratio: auto; height: 100%; }
  .detail h1 { margin-bottom: 14px; }
  .specs { margin-bottom: 18px; }
  .verdict p b { font-size: 1.125rem; }
  .deal-stores { margin-left: 0; flex-basis: 100%; }
  .plan-grid th, .plan-grid td { padding: 11px 10px; }
  .tabs { gap: 22px; }
  /* Hesapla (telefon): üstte başlık + taksit seçimi, altında sekmeler; iki rakam yan yana (dikey alan yarıya iner) */
  .calc-bar { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding-top: 10px; }
  .calc-bar h3 { font-size: 1.125rem; }
  .calc-count { grid-column: 2; grid-row: 1; margin-left: 0; }
  .calc-count > span { display: none; }
  .calc .tabs { grid-column: 1 / -1; }
  .calc .tabs [role='tab'] { padding: 10px 0 11px; }
  .gx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 12px; }
  .gx-top > div { padding-right: 12px; }
  .gx-top > div + div { padding-left: 14px; }
  .gx-top b { font-size: 1.375rem; }
  .gx-top span { font-size: 0.75rem; }
  .ph-stats div + div { border-left: 0; padding-left: 0; }
  .ph-stats div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-soft); }
  .ph-stats div:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .loadchart-peak { font-size: 0.6875rem; }
  .paychart-axis { font-size: 0.6875rem; }
  .paychart-amt { font-size: 0.5rem; }
  .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tag { font-size: 0.6875rem; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .stat b { font-size: 1.5rem; }
  .checklist li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
  .cl-head h2 { font-size: 1.75rem; }
  .checklist li > .btn, .checklist li > .cl-done { grid-column: 2; justify-self: start; }
  .program { grid-template-columns: 22px minmax(0, 1fr); }
  .program-stat { grid-column: 2; margin-top: -8px; }
  .purchase-form { grid-template-columns: 1fr; }
  .purchase-form .span-2 { grid-column: auto; }
  .cmp-prod img { width: 72px; }
  .cmp-prod .ph { width: 72px; height: 72px; }
  .cmp-table tbody th { font-size: 0.75rem; }
}

@media (max-width: 640px) {
  .cards-save .link-btn { display: none; }
}

/* Koyu modda fiyat kutusu zeminle birleşmesin */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .deal { box-shadow: inset 0 0 0 1px var(--line); }
}
:root[data-theme='dark'] .deal { box-shadow: inset 0 0 0 1px var(--line); }

/* En küçük metin 12 px (11 yalnızca büyük harfli etiket) */
.sw-label small, .sw-parts b small, .paychart-tip small, .ph-ylab, .ph-xlab, .ph-30-lab, .ph-low-lab, .ph-high-lab { font-size: 0.75rem; }
.alarm-form select, .alarm-form input { font-weight: 400; }

/* Kart başına taksit listesi */
.cardplans { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cardplans li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.cp-card b { font-size: 1rem; }
.cp-card small { display: block; color: var(--muted); font-size: 0.8125rem; margin-top: 2px; }
/* Kullanıcının kartları: parlayan çerçeveli blok (ürün sayfası ve kampanyalar sayfası) */
.cp-mine-block, .camp-mine { position: relative; border: 1.5px solid var(--frame, var(--lime-text)); border-radius: 14px; padding: 4px 4px 0; margin-bottom: 22px; background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 18%, transparent), 0 10px 34px -12px color-mix(in srgb, var(--lime) 55%, transparent); }
.cp-mine-block .cardplans { border-top: 0; }
.cp-mine-block .cardplans li:last-child { border-bottom: 0; }
.cp-mine-title { display: flex; align-items: center; gap: 10px; margin: 8px 8px 4px; font-size: 0.8125rem; color: var(--muted); }
.cp-mine-title span { padding: 2px 9px; border-radius: 6px; background: var(--lime); color: #0f100d; font-size: 0.75rem; font-weight: 700; }
.cp-others-title { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) :is(.cp-mine-block, .camp-mine) { --frame: var(--lime); } }
:root[data-theme='dark'] :is(.cp-mine-block, .camp-mine) { --frame: var(--lime); }

.cardplans .strip { height: 8px; }
/* Mağazaya özel kart (src/cards.js storeCard, ör. Hepsiburada Premium Worldcard): genel kartlardan ayrı, krem kesik
   çerçeveli blok. Lime değil: bu taksit sitenin başlığı değil, yalnızca o kartı olana geçerli. */
.cp-store-block { margin-top: 22px; border: 1.5px dashed var(--accent); border-radius: 14px; padding: 4px 4px 0; background: var(--surface); }
.cp-store-block .cardplans { border-top: 0; }
.cp-store-block .cardplans li:last-child { border-bottom: 0; }
.cp-store-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 8px 8px 4px; font-size: 0.8125rem; color: var(--muted); }
.cp-store-title span { padding: 2px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; }
.cp-card .cp-store-note { color: var(--accent-text); font-weight: 600; }
.strip-store i.on { background: var(--accent); }
.cp-amount { text-align: right; display: grid; gap: 2px; }
.cp-amount b { font-family: var(--display); font-size: 1.125rem; }
.cp-amount span { font-family: var(--mono); font-size: 0.875rem; color: var(--text-2); }
@media (max-width: 640px) {
  .cardplans li { grid-template-columns: minmax(0, 1fr) auto; }
  .cardplans .strip { grid-column: 1 / -1; order: 3; }
}

/* Kart kampanyaları: fiyat kutusunda (koyu zemin) ve mağaza satırlarında */
.card-deals { margin: 16px 0 4px; padding: 14px 16px; border-radius: 10px; background: rgba(241, 227, 194, 0.08); border: 1px solid rgba(241, 227, 194, 0.3); }
.cd-title { margin: 0 0 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #e6d3a8; }
.cd-title small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--night-muted); margin-left: 6px; }
.card-deals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card-deals li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 2px 8px; font-size: 0.875rem; color: var(--night-text); }
.card-deals li b { font-weight: 700; }
.card-deals .cd-benefit { grid-column: 3; }
.card-deals small { grid-column: 1 / -1; color: var(--night-muted); font-size: 0.75rem; }
.cd-mine { padding: 0 6px; border-radius: 5px; background: var(--lime); color: #0f100d; font-size: 0.6875rem; font-weight: 700; }
.offer-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.perk { font-size: 0.75rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--lime-soft); color: var(--lime-text); }
.perk-card { background: var(--accent-soft); color: var(--accent-text); }



/* Mağaza güvenilirliği rozeti */
.trust { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.trust i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.trust-hi i { background: var(--text); }
.trust-ok i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-text); }
.trust-new { white-space: normal; font-weight: 500; }
.trust-new i { background: var(--line); box-shadow: inset 0 0 0 1px var(--muted); }

/* Mağaza kartı rozetleri: taksit doğrulandı (nötr) ve mağaza bazlı fiyat rozeti (iyi/yeşil, ürün kartındaki
   "30 günün en düşüğü" ile aynı ton). İkisi de .trust'ın hemen ardında, aynı satırda görünebilir. */
.offer-verified { display: inline-flex; align-items: center; margin-top: 6px; margin-right: 8px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.offer-pricebadge { display: inline-flex; align-items: center; margin-top: 6px; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; color: var(--good-text); background: var(--good-soft); white-space: nowrap; }

/* İki seçenekli düğme grubu (Mağazalar: Fiyat / Güvenilirlik) */
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed='true'] { background: var(--text); color: var(--paper); }
.block-head .seg { align-self: center; }
.block-head:has(.seg) > p { margin-left: auto; }

/* Sana uygunluk (fiyat kutusu koyu zeminde) */
.deal-fit { margin: 8px 0 0; font-size: 0.875rem; color: var(--night-muted); }
.deal-fit b { font-family: var(--display); font-size: 1.125rem; color: #f1e3c2; margin-left: 4px; }
.deal-fit small { color: var(--night-muted); }
.sw-fit { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sw-fit-head { margin: 0 0 10px; font-weight: 600; }
.sw-fit-head b { font-family: var(--display); font-size: 1.25rem; color: #f1e3c2; margin-left: 6px; }
.sw-fit-head small { color: var(--night-muted); }
.sw-fit-cta { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.875rem; color: var(--night-muted); }



/* === Mağazalar listesi ve ürün sayfası (telefon): fiyat ve satın al ilk ekranda ============== */

/* Mağazalar listesi: satıcı adı yalnızca mağaza adından farklıysa; tutar tek parça (TL alt satıra düşmez) */
.offers-note { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); max-width: 80ch; }
.offers-note b { color: var(--text-2); }
/* Mağaza kartları (parts.js offersListHtml): her mağaza ayrı kart. Başlıkta mağazanın baş harfli renkli rozeti
   (storeMarkHtml; gerçek logo değil), ad, satıcı ve güven notu; ortada aylık taksit (büyük) ve toplam aynı karede;
   altında taksit şeridi, geçerli kartlar ve düğmeler. Telefonda alt alta, genişte yan yana ızgara. */
.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.offer { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--surface); }
.offer.current { border: 2px solid var(--text); padding: 15px; }
.offer:target { border-color: var(--warn); background: var(--warn-soft); }
.offer-head { display: flex; align-items: flex-start; gap: 12px; }
.store-mark { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.02em; background: hsl(var(--sh) 55% 90%); color: hsl(var(--sh) 60% 26%); box-shadow: inset 0 0 0 1px hsl(var(--sh) 40% 78%); }
.offer-src { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.offer-src small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 400; font-size: 0.78125rem; color: var(--muted); letter-spacing: 0; }
.offer-src > .trust { display: flex; width: fit-content; margin-top: 5px; }
.offer-here { flex: none; align-self: flex-start; padding: 3px 8px; border-radius: 6px; background: var(--text); color: var(--paper); font-size: 0.71875rem; font-weight: 600; white-space: nowrap; }
.offer-figs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.offer-figs small { display: block; font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.offer-pay b { display: block; font-family: var(--display); font-size: 1.625rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.offer-pay b small { display: inline; font-size: 0.62em; font-weight: 600; color: inherit; }
.offer-pay b .per { color: var(--muted); }
.offer-pay b.offer-none { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; white-space: normal; color: var(--muted); }
.offer-pay > span { font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.offer-price { text-align: right; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.offer-amount { white-space: nowrap; }
.offer-diff, .offer-min, .offer-suspect { display: block; margin-top: 2px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.offer-diff { color: var(--muted); font-family: var(--mono); font-weight: 500; }
.offer-min { color: var(--lime-text); }
.offer-suspect { color: var(--warn-text); }
.offer-plan .strip { height: 7px; margin-bottom: 6px; }
.offer-plan small { font-size: 0.78125rem; color: var(--muted); }
.offer-plan .offer-storecard { display: block; margin-top: 4px; font-weight: 600; color: var(--accent-text); }
.offer-banks { font-size: 0.78125rem; line-height: 1.5; color: var(--muted); }
.offer-banks:empty { display: none; }
.offer-banks-l { font-weight: 600; color: var(--text-2); }
.offer-checked { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.offer-actions { display: flex; gap: 8px; margin-top: auto; }
.offer-actions .btn { flex: 1 1 0; }
.offer.not-eligible .offer-pay b, .offer.not-eligible .store-mark { opacity: 0.75; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .store-mark { background: hsl(var(--sh) 30% 20%); color: hsl(var(--sh) 70% 82%); box-shadow: inset 0 0 0 1px hsl(var(--sh) 30% 32%); }
}
:root[data-theme='dark'] .store-mark { background: hsl(var(--sh) 30% 20%); color: hsl(var(--sh) 70% 82%); box-shadow: inset 0 0 0 1px hsl(var(--sh) 30% 32%); }
@media (max-width: 640px) {
  .offers { gap: 12px; }
  .offer { padding: 14px; gap: 12px; }
  .offer.current { padding: 13px; }
  .store-mark { width: 40px; height: 40px; font-size: 1rem; border-radius: 11px; }
  .offer-src { font-size: 1.125rem; }
  .offer-pay b { font-size: 1.5rem; }
}

/* Hangi kartla kaç taksit: aynı planı veren kartlar tek satırda */
.cp-names { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; line-height: 1.4; margin-top: 2px; }

/* Ürün sayfası (telefon): görsel en fazla ~220 px, fiyat ve satın al ilk ekranda */
@media (max-width: 640px) {
  .detail { gap: 12px; margin-bottom: 40px; }
  .detail-media { max-width: none; height: 210px; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 10px 0 8px; }
  .detail h1 { font-size: 1.3125rem; line-height: 1.12; margin: 2px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .detail-info .specs { display: none; }
  /* Fiyat ve satın al önce; "en ucuz" gibi olumlu not satın al düğmesinin altına iner (uyarılar üstte kalır) */
  .deal { padding: 16px; display: flex; flex-direction: column; }
  .deal > .verdict-ok { order: 1; margin: 14px 0 0; padding: 12px 0 0 14px; border-bottom: 0; }
  .deal > .card-deals { order: 1; margin-top: 14px; }
  .deal > .deal-actions ~ * { order: 2; }
  .deal .verdict { margin-bottom: 12px; padding-bottom: 10px; }
  .deal .verdict p { font-size: 0.8125rem; }
  .deal .verdict p b { font-size: 1.0625rem; }
  .deal-price-row { margin: 8px 0 6px; }
  .deal-monthly b { font-size: clamp(1.875rem, 10vw, 2.5rem); font-size: min(clamp(1.875rem, 10vw, 2.5rem), calc(100cqi / (var(--len, 14) * 0.48))); }
  .deal-cash { margin: 12px 0 14px; padding-top: 10px; }
  .deal-price { font-size: clamp(1.5rem, 7.5vw, 1.875rem); }
  .deal-price-row .score { gap: 8px; }
  .deal-price-row .score > b { min-width: 44px; height: 44px; font-size: 1.0625rem; padding: 0 6px; }
  .deal-price-row .score > span { font-size: 0.75rem; max-width: 80px; }
  .deal-price-row .score > span small { font-size: 0.625rem; letter-spacing: 0.06em; white-space: nowrap; }
  .deal .strip { height: 10px; }
  .deal-plan { margin: 0 0 10px; }
  .deal-plan > b { font-size: 1.1875rem; }
  .deal-actions .btn-block { height: 50px; }
}


/* --- Fiyat kutusu: "Fiyat geçmişi" bağlantısı ve "Fiyat düşünce haber ver" -------------------------------
   30 Eylül (sahip): küçük 30 günlük grafik kaldırıldı; yerinde sade bir bağlantı, sayfanın altındaki fiyat grafiğine
   iner. Koyu kutunun içinde, fiyatın hemen altında (telefonda satın al düğmesi ilk ekranda kalsın diye düğmelerin
   altına iner). "X günün en düşük fiyatı" rozeti krem (bilgi). Lime yok: lime yalnızca "peşin fiyatına". */
.deal-cash + .deal-history { margin-top: -8px; }
.deal-history { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; padding: 11px 14px; min-height: 46px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; color: var(--night-text); text-decoration: none; }
.deal-history:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.03); }
.deal-history:focus-visible { outline: 2px solid var(--night-text); outline-offset: 2px; }
.deal-history > .ico { width: 18px; height: 18px; flex-shrink: 0; color: #f1e3c2; }
.dh-label { font-size: 0.875rem; font-weight: 650; }
.dh-meta { font-size: 0.8125rem; color: var(--night-muted); }
.dh-badge { padding: 2px 8px; border-radius: 6px; background: #f1e3c2; color: #0f100d; font-size: 0.75rem; font-weight: 700; }
.dh-demo { font-size: 0.6875rem; font-weight: 600; color: var(--night-muted); }
.deal-history .arr { margin-left: auto; color: var(--night-muted); transition: transform 0.18s ease; }
.deal-history:hover .arr { transform: translateY(2px); color: var(--night-text); }
@media (prefers-reduced-motion: reduce) { .deal-history .arr { transition: none; } }
.deal-alarm { height: 48px; }
.deal-alarm .ico { width: 18px; height: 18px; }
.alarm-short { display: none; }
/* Alarm düğmesi satın al / favori ile aynı ızgarada, tam genişlik (telefonda favorinin yanında) */
.deal-actions .deal-alarm { grid-column: 1 / -1; height: 48px; }
/* Fiyat geçmişi henüz yoksa: fiyat geçmişi bölümünde kısa not (fiyat kutusunda değil) */
.ph-new { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--muted); max-width: 70ch; }
.ph-new .ico { flex-shrink: 0; margin-top: 3px; }
/* Satıcı sitesi / doğrulama notları: fiyat kutusunun hemen altında, sayfa zemininde (hep görünür) */
.deal-notes { margin-top: 12px; padding: 0 4px; }
.deal-notes .deal-note { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.deal-notes .deal-note:first-child { margin-top: 0; }
.deal-notes .deal-note b { color: var(--text-2); font-weight: 600; }
@media (max-width: 640px) {
  .deal > .deal-history { order: 1; margin: 14px 0 0; }
  /* Favori ve alarm tek satırda, iki sütun (44 px); favori yoksa (sunucu sayfası) alarm tam genişlik */
  .deal-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .deal-actions > .btn-lime { grid-column: 1 / -1; }
  .deal-actions .fav-wide, .deal-actions .deal-alarm { height: 44px; padding: 0 10px; gap: 6px; font-size: 0.875rem; }
  .deal-actions:has(.fav-wide) .deal-alarm { grid-column: auto; }
  .deal-actions:has(.fav-wide) .alarm-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .deal-actions:has(.fav-wide) .alarm-short { display: inline; }
}

/* --- /kampanyalar: bitişe göre bölümler, kart görünümü (parts.js campaignsPageHtml) ----------------------
   Renk: krem = kart kampanyası (değer), mercan = yalnızca "bugün / N gün kaldı", lime = yalnızca "peşin fiyatına". */
.camp-head { margin-bottom: 20px; }
.camp-head .camp-lead { margin: 10px 0 0; color: var(--text-2); max-width: 100ch; }
.camp-filters { display: grid; gap: 12px; margin: 0 0 30px; }
.camp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.camp-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.camp-chip small { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.camp-chip:hover { border-color: var(--text); }
.camp-chip[aria-current='true'] { background: var(--text); border-color: var(--text); color: var(--paper); }
.camp-chip[aria-current='true'] small { color: inherit; opacity: 0.8; }
.camp-form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.camp-q { position: relative; display: block; }
.camp-q .search-icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.camp-q input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.9375rem; }
.camp-sel { display: block; min-width: 0; }
.camp-sel select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 500; min-width: 0; }
.camp-apply[hidden] { display: none; }

.camp-bucket { margin: 0 0 40px; }
.camp-bucket h2 { display: flex; align-items: baseline; gap: 10px; font-size: 1.375rem; font-weight: 700; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); letter-spacing: -0.01em; }
.camp-bucket h2 small { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* "Bugün son gün" bölümünde her kartta aynı rozeti tekrarlamayalım: başlık zaten söylüyor */
.camp-bucket-bugun .tag.camp-when { display: none; }
.camp-bucket-bugun h2::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); align-self: center; flex: none; }
.camp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.camp-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 4px; border: 1px solid var(--card-line); border-radius: 14px; background: var(--surface); }
.camp-card:hover { border-color: var(--field-line); }
.camp-card.is-mine { border-color: var(--accent); }
.camp-top { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 0.75rem; }
.camp-prog { font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); }
.camp-mine-tag { padding: 2px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.camp-when { margin-left: auto; color: var(--muted); white-space: nowrap; }
.camp-when b { font-family: var(--mono); color: var(--text-2); font-weight: 500; }
.camp-merchant { display: block; font-family: var(--display); font-size: 1.3125rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-merchant.is-general { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--muted); letter-spacing: 0; line-height: 1.6; }
.camp-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--text-2); font-size: 0.9375rem; }
.camp-value b { font-family: var(--mono); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-text); line-height: 1.2; }
.camp-value small { font-size: 0.75rem; color: var(--muted); }
.camp-pf { align-self: center; padding: 2px 7px; border-radius: 6px; background: var(--lime); color: #0f100d; font-size: 0.6875rem; font-weight: 700; }
.camp-title { color: var(--text-2); font-size: 0.875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Kartlar eşit boyda kalsın (ayrıntı açılınca yalnızca o kart uzar): başlık iki satırlık yer tutar, değeri olmayan kartta üç */
.camp-grid .camp-title { min-height: calc(2 * 1.45em); }
.camp-grid .no-value .camp-title { -webkit-line-clamp: 3; min-height: calc(3 * 1.45em + 17px); }
.camp-amt { color: var(--accent-text); font-weight: 700; }
.camp-more-info { margin-top: 4px; border-top: 1px solid var(--line-soft); }
.camp-more-info summary { display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.camp-more-info summary::-webkit-details-marker { display: none; }
.camp-more-info summary::after { content: '+'; margin-left: auto; font-family: var(--mono); color: var(--muted); }
.camp-more-info[open] summary::after { content: '−'; }
.camp-more-info dl { margin: 0 0 8px; display: grid; gap: 6px; font-size: 0.8125rem; }
.camp-more-info dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.camp-more-info dt { color: var(--muted); }
.camp-more-info dd { margin: 0; color: var(--text-2); }
.camp-note { font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
.camp-links { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 0 10px; }
.camp-link { font-size: 0.8125rem; font-weight: 600; }
.camp-rest > summary { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 12px; border: 1px dashed var(--field-line); border-radius: 12px; cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 600; }
.camp-rest > summary::-webkit-details-marker { display: none; }
.camp-rest > summary:hover { border-style: solid; }
.camp-rest[open] > summary { display: none; }
.camp-rest > .camp-grid { margin-top: 12px; }
.camp-pick-box { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--accent); border-radius: 14px; background: var(--surface); margin-bottom: 20px; }
.camp-pick-box p { margin: 0; max-width: 60ch; }
#camp-pick:not(:empty) { margin: 0 0 32px; }
.camp-about { margin: 56px 0 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 80ch; }
.camp-about h2 { font-size: 0.875rem; font-weight: 600; color: var(--text-2); margin: 0 0 6px; letter-spacing: 0; font-family: var(--sans); }
.camp-about p { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 760px) {
  .camp-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .camp-q { grid-column: 1 / -1; }
  .camp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .camp-chip { flex-shrink: 0; }
  .camp-apply { grid-column: 1 / -1; justify-self: start; }
  .camp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Telefonda sıkı kart: mağaza solda, değer sağda, başlık altta */
  .camp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'top top' 'merchant val' 'title title' 'more more'; gap: 4px 12px; align-items: baseline; padding: 12px 14px 0; }
  .camp-card .camp-top { grid-area: top; }
  .camp-card .camp-merchant { grid-area: merchant; font-size: 1.1875rem; }
  .camp-card .camp-value { grid-area: val; justify-self: end; flex-wrap: nowrap; white-space: nowrap; }
  .camp-card .camp-value b { font-size: 1.375rem; }
  .camp-card .camp-pf { display: none; }
  .camp-grid .camp-card .camp-title { grid-area: title; min-height: 0; }
  .camp-card .camp-merchant { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .camp-card .camp-more-info { grid-area: more; margin-top: 4px; }
  .camp-card .camp-more-info summary { min-height: 40px; }
  .camp-bucket h2 { font-size: 1.1875rem; }
}

/* --- Renk seçenekleri (ürün sayfası: teklif listesinin üstü, fiyat kutusu, satırlar) ------------------ */
/* Nokta ürünün gerçek rengini gösterir (marka rengi değil); ince iç çizgi beyaz/siyah noktaların iki temada da görünmesini sağlar. */
.renk-dot { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c, #999); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.6); }
/* .deal her iki temada koyu: orta gri halka koyu renkte (Siyah) zemine karışıyordu; koyu zeminde ince açık kontur */
.deal .renk-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.renk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; }
.renk-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.renk-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.renk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.renk-chip .num { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.renk-chip:hover { border-color: var(--text); }
.renk-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.renk-chip[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: var(--paper); }
.renk-chip[aria-pressed='true'] .num { color: inherit; opacity: 0.8; }
/* Fiyat kutusu üst satırı: "Aylık ödeme · Mağaza" solda, renk satırı ("en ucuz taksitli teklif: Beyaz, 58.499 TL") aynı satırda sağda;
   sığmazsa renk satırı bir alt satıra geçer (sola hizalı), satıcı notu ("Satıcı: … · Ücretsiz kargo") en sonda. Renk yoksa eskisi gibi: not sağda. */
.deal-top { container-type: inline-size; align-items: baseline; gap: 2px 8px; line-height: 1.5; }
.deal-seller { margin-left: auto; text-align: right; }
.deal-renk { font-size: 0.8125rem; line-height: 1.5; color: var(--night-muted); }
.deal-renk .renk-dot { margin-right: 6px; vertical-align: -2px; }
.deal-renk b { font-weight: 600; color: var(--night-text); }
.deal-renk .num { font-family: var(--mono); font-weight: 500; }
/* Dar kapta (telefon) tek satıra sığsın diye "taksitli teklif" görünmez olur (ekran okuyucuda kalır); yazı bir kademe küçük */
@container (max-width: 459px) {
  .deal-src, .deal-renk, .deal-seller { font-size: 0.75rem; }
  .deal-renk .renk-dot { margin-right: 4px; }
  .dr-uzun { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.offer-src small.offer-renk { display: flex; align-items: center; gap: 6px; }
@media (max-width: 480px) {
  .renk-row { flex-direction: column; align-items: flex-start; }
  .renk-chips { width: 100%; }
}

/* --- Denk maskotu (public/denk.js; 30 Eylül 2026, sahip onaylı 4 yer: 404, gizli vade farkı, Hesabım boş durumları, "Alarm kuruldu") ---
   Saçı (#36302B) koyu zeminde kaybolduğu için şeffaf WebP krem daire (#efe8d6) üzerinde durur; açık temada daireye 1 px --line halka,
   koyu temada halka yok. Boyut sınıfta sabit + <img width height> (CLS 0). Hareket yok. */
:root { --denk-disk: #efe8d6; --denk-ring: var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --denk-ring: transparent; } }
:root[data-theme='dark'] { --denk-ring: transparent; }
.denk { display: inline-block; flex: none; border-radius: 50%; background: var(--denk-disk); box-shadow: inset 0 0 0 1px var(--denk-ring); overflow: hidden; line-height: 0; }
.denk img { display: block; width: 100%; height: 100%; }
/* 404: başlığın üstünde tek, ortada */
.denk-404 { display: block; width: 88px; height: 88px; margin: 0 auto 14px; }
/* Hesabım boş durumları: eski şerit çiziminin yerinde */
.denk-psst { width: 56px; height: 56px; }
/* Gizli vade farkı uyarısı: başlık satırının sağında (yalnızca bu uyarıda; metin sütunu solda, yüz sağ üstte) */
.verdict[data-kind='hidden'] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.verdict[data-kind='hidden'] > .denk-vade { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
.verdict[data-kind='hidden'] > p { grid-column: 1; }
/* "Alarm kuruldu" bildirimi: yüz krem dairesini kendisi taşır (açık temada bildirim koyu; koyu temada zaten krem, daire görünmez), halkasız */
.toast .denk-toast { width: 34px; height: 34px; margin: -6px 0 -6px -6px; --denk-ring: transparent; }

/* --- Tam boy Denk (public/denk.js denkBoyHtml; 30 Eylül 2026, sahip onaylı: A ana sayfa "Nasıl çalışır", B günün fırsatı destesi,
   C liste sayfası (yalnız 1. sayfa), D rehber yazısı) ---
   Dairesiz, şeffaf WebP. Koyu temada saç ve pantolon zemine karışmasın diye 4 yönlü 1 px açık krem kontur (drop-shadow) ve ayak
   altında çok hafif krem ışık; açık temada kontur yok, ışık yerine hafif gölge. Hepsi position:absolute (akışı değiştirmez, CLS 0),
   boyut --h ile sabit; <img width height> en-boy oranını verir. Hareket yok. */
:root { --denk-kontur: transparent; --denk-isik: rgba(15, 16, 13, 0.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --denk-kontur: rgba(239, 232, 214, 0.42); --denk-isik: rgba(239, 232, 214, 0.1); } }
:root[data-theme='dark'] { --denk-kontur: rgba(239, 232, 214, 0.42); --denk-isik: rgba(239, 232, 214, 0.1); }
.denk-boy { position: absolute; display: block; height: var(--h, 140px); line-height: 0; pointer-events: none; }
.denk-boy img { display: block; height: 100%; width: auto; position: relative; z-index: 1;
  filter: drop-shadow(1px 0 0 var(--denk-kontur)) drop-shadow(-1px 0 0 var(--denk-kontur)) drop-shadow(0 1px 0 var(--denk-kontur)) drop-shadow(0 -1px 0 var(--denk-kontur)); }
.denk-boy::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: -7px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, var(--denk-isik), transparent); }

/* Yerleşim ölçüsü (30 Eylül 2026 gece, sahip: "çok büyük olmasın ama çok küçük de kalmasın; bir yerlere sıkışıp kalmasın;
   bazı yerlerde kafası kesiliyor"). Kural her yerde aynı: Denk kendi kutusunun İÇİNDE durur (kafa hiçbir çizgiye, üst menüye ya da
   hero kenarına değmez, üstünde ≥ 20 px boşluk), ayakları bir zemine basar (adımın/cümlenin tabanı, fişin alt kenarı, çift çizgi),
   metnin yanında ona ayrılmış boşlukta durur (padding ile yer açılır, yazıya/düğmeye binmez). Boyutlar 124-206 px; genişlik
   görselin en-boy oranından: normal 0,455, eğik 0,4675, selam 0,56 × --h. Hepsi sabit ölçü: CLS 0.
   Kabın dışına konan Denk'in (B, 720-980 px destenin sağı) kutusu 0 genişliğe düşüp görseli genel img { max-width:100% } ile
   silmesin diye genişlik görselin kendisinden gelir. */
.denk-boy { width: max-content; }
.denk-boy img { max-width: none; }

/* A · Ana sayfa "Nasıl çalışır", 2. adım: Denk adımın sağ altında, ayakları adımın tabanında; metin sağdan Denk kadar içeri çekilir,
   adım en az Denk + üst boşluk kadar uzun (kafa üstteki kalın çizgiye değmez). */
.how3 > div.how-denk { --h: 150px; position: relative; padding-right: calc(var(--h) * 0.455 + 22px); min-height: calc(var(--h) + 22px + 20px); }
.how3 > div.how-denk > .denk-boy { right: 4px; bottom: 20px; }
/* 761-980 px sütunlar dar (~215 px): metni daraltmak yerine Denk metnin altında, sağda durur (adım Denk kadar uzar). */
@media (min-width: 761px) and (max-width: 980px) {
  .how3 > div.how-denk { --h: 128px; padding-right: 28px; min-height: 0; padding-bottom: calc(var(--h) + 16px + 12px); }
  .how3 > div.how-denk > .denk-boy { right: 28px; bottom: 16px; }
}
@media (min-width: 981px) {
  .how3 > div.how-denk { --h: 156px; padding-right: calc(28px + var(--h) * 0.455 + 18px); min-height: calc(var(--h) + 26px + 18px); }
  .how3 > div.how-denk > .denk-boy { right: 28px; bottom: 18px; }
}

/* B · Günün fırsatı: Denk destenin arkasında/yanında, slayt değişince yerinde kalır (desteden bağımsız, mutlak konum).
   Telefonda destenin sağ üstünden bakar (ayakları fişin arkasında, düğmelerin altında); 620-980 px destenin sağında fişin
   tabanına basar; 981-1199 px destenin solunda, başlık ile açıklama metninin arasındaki boşlukta (açıklamaya inmez);
   ≥ 1200 px destenin solunda fişin tabanına basar. Hero taşanı kırpar (overflow:hidden): hiçbir genişlikte kafa hero'nun
   üst kenarına yaklaşmaz. */
.deck > .denk-boy { --h: 128px; z-index: 0; right: 26px; top: -88px; }
.deck > .deck-stack { position: relative; z-index: 1; }
.deck > .denk-boy::after { display: none; }
@media (min-width: 561px) and (max-width: 619px) { .deck > .denk-boy { --h: 120px; right: -8px; top: -80px; } } /* düğmeler yan yana: Denk destenin sağ köşesine kayar, düğmeye binmez */
@media (min-width: 620px) and (max-width: 980px) {
  .deck > .denk-boy { --h: 188px; right: auto; top: auto; left: calc(100% + 36px); bottom: 70px; }
  .deck > .denk-boy::after { display: block; }
}
@media (min-width: 981px) {
  .deck > .denk-boy { --h: 176px; right: auto; left: calc(var(--h) * -0.4675 - 12px); top: 12px; }
  .deck > .denk-boy::after { display: block; }
}
@media (min-width: 1200px) { .deck > .denk-boy { --h: 190px; left: calc(var(--h) * -0.4675 - 20px); top: auto; bottom: 70px; } }
@media (min-width: 1280px) { .deck > .denk-boy { --h: 206px; left: calc(var(--h) * -0.4675 - 24px); } }

/* C · Liste sayfası (yalnız 1. sayfa). Telefon/tablet: filtre cümlesinin sağında, ayakları cümlenin alt çizgisinin üstünde;
   cümle Denk'e yer açar (sağ boşluk) ve en az Denk kadar uzun (kafa üstteki çift çizgiye değmez).
   Masaüstü: başlık bloğunun sağ ucunda, ayakları filtre cümlesinin çift çizgisine basar; kafa üst menüden ≥ 22 px aşağıda
   (kırıntı satırı varsa blok daha aşağıda başlar, Denk biraz daha uzun olur). Başlık Denk'in altına girmesin diye blok sağdan içeri çekilir. */
/* Telefonda Denk sağ kenardan 10 px içeri alındı (sahip, 30 Eylül: bazı telefonlarda kenara yapışık/kopuk duruyordu; 360–430 px'te
   kenardan ≥ 24 px iç boşluk). Cümlenin sağ boşluğu buna uyup 92 px (eskiden 80): yazıya binmesin. Sabit px: yazı tipi yüklenince
   satır kırılımı değişip cümle kaymasın (CLS). */
.sf-sentence.has-denk { --h: 140px; position: relative; padding-right: 92px; min-height: calc(var(--h) + 18px + 16px); }
.sf-sentence.has-denk > .denk-boy { right: 8px; bottom: 18px; }
@media (min-width: 561px) {
  .sf-sentence.has-denk { --h: 156px; padding-right: calc(var(--h) * 0.56 + 24px); min-height: calc(var(--h) + 22px + 20px); }
  .sf-sentence.has-denk > .denk-boy { right: 8px; bottom: 22px; }
}
.lh-row > .denk-boy-c-baslik { display: none; }
@media (min-width: 981px) {
  .sf-sentence.has-denk { padding-right: 0; min-height: 0; }
  .sf-sentence.has-denk > .denk-boy { display: none; }
  .list-head { position: relative; }
  .list-head:has(.denk-boy-c-baslik) > div { padding-right: calc(var(--h-c, 118px) * 0.56 + 32px); }
  .list-head > div > .lh-row > .denk-boy-c-baslik { display: block; --h: var(--h-c, 118px); right: 8px; bottom: -20px; }
  .list-head.section-head-tight { --h-c: 140px; }
}
@media (min-width: 1200px) { .list-head.section-head-tight { --h-c: 146px; } }

/* D · Rehber (yalnız geniş masaüstü: sağ sütunda içindekiler yanında boşluk var): başlık görselinin altında, sağda;
   kafa görselin alt kenarından 20 px aşağıda (değmez). */
.guide-hero { position: relative; }
.guide-hero > .denk-boy-d { display: none; }
@media (min-width: 1200px) {
  .guide-hero > .denk-boy-d { display: block; --h: 176px; right: 28px; top: calc(100% + 20px); }
}