:root {
  /* The site is light-only: no prefers-color-scheme override below, and
     color-scheme pins UA-rendered widgets (inputs, selects, scrollbars) light
     so they don't flip to dark chrome on a dark-mode OS. */
  color-scheme: light;

  /* Kartsever brand */
  --brand-purple: #7B2FF7;
  --brand-purple-dark: #5318B0;
  --brand-ink: #1B142E;
  --brand-lilac: #C9B6F7;
  --brand-offwhite: #F5F4F8;

  --bg: var(--brand-offwhite);
  --card-bg: #ffffff;
  --text: #1B142E;
  --muted: #6b7280;
  --border: #e6e3ef;
  --accent: var(--brand-purple);
  --radius: 14px;
  --shadow: 0 8px 24px rgba(83, 24, 176, .12);
  --maximum: #004a8f;
  --bonus: #00854a;
  --worldcard: #c8102e;
  --bankkart: #e30613;
  --vakifkart: #b8860b;
  --axess: #3a4553;
  --crystal: #6b4e9e;
  --adios: #24406b;
  --play: #ef6c00;
  --paraf: #13bff1;
  --qnb: #870052;
  --wings: #0e6e63;
  --milesqnb: #6d2150;
  --milesgaranti: #0f7a43;
  --maximiles: #8a1e2d;
  --mileskuveyt: #15597a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* -- hero ------------------------------------------------------------------ */
.hero {
  color: #fff;
  background:
    radial-gradient(1200px 320px at 12% -50%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(120deg, var(--brand-ink) 0%, var(--brand-purple-dark) 48%, var(--brand-purple) 100%);
}
.hero-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px; padding: 30px 20px 34px;
}
.hero-brand { display: flex; align-items: center; gap: 16px; }
.hero-logo {
  line-height: 1; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 16px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.hero-logo img { display: block; width: 34px; height: 34px; }
.hero-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.hero-tag { margin: 5px 0 0; font-size: 14px; color: rgba(255,255,255,.82); max-width: 42ch; }

.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hero-stats { display: flex; gap: 12px; }
.stat {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 8px 16px; text-align: center; min-width: 92px;
  backdrop-filter: blur(4px);
}
.stat-num { display: block; font-size: 22px; font-weight: 750; line-height: 1.1; }
.stat-label { font-size: 11px; color: rgba(255,255,255,.8); }
.hero-meta { font-size: 12px; color: rgba(255,255,255,.7); }

/* -- layout ---------------------------------------------------------------- */
.layout {
  display: grid; grid-template-columns: 268px 1fr; gap: 26px;
  align-items: start; padding-top: 24px; padding-bottom: 40px;
}

.sidebar { position: sticky; top: 18px; }
.sidebar-inner {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 16px 18px;
  max-height: calc(100vh - 36px); overflow-y: auto;
}
.filter-head { display: flex; align-items: center; gap: 10px; }
.filter-head h2 { margin: 0; font-size: 16px; flex: 1; }
#clear-filters {
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
}
#clear-filters:hover { color: var(--text); border-color: var(--muted); }
.filter-toggle { display: none; }

.search-wrap { position: relative; }
.filter-head { margin-top: 14px; }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .6; pointer-events: none;
}
#search {
  width: 100%; padding: 10px 12px 10px 34px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
#search:focus { outline: 2px solid var(--accent); border-color: transparent; background: var(--card-bg); }

.filter-group { margin-top: 18px; }
.filter-group h3 {
  margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--border); background: var(--card-bg);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
  color: var(--text); transition: border-color .12s, background .12s, color .12s;
}
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] {
  color: var(--on-fill, #fff); border-color: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--muted) 40%, transparent);
}
.chip-maximum[aria-pressed="true"] { background: var(--maximum); }
.chip-bonus[aria-pressed="true"] { background: var(--bonus); }
.chip-worldcard[aria-pressed="true"] { background: var(--worldcard); }
.chip-bankkart[aria-pressed="true"] { background: var(--bankkart); }
.chip-vakifkart[aria-pressed="true"] { background: var(--vakifkart); }
.chip-axess[aria-pressed="true"] { background: var(--axess); }
.chip-crystal[aria-pressed="true"] { background: var(--crystal); }
.chip-adios[aria-pressed="true"] { background: var(--adios); }
.chip-play[aria-pressed="true"] { background: var(--play); }
.chip-paraf[aria-pressed="true"] { background: var(--paraf); }
.chip-qnb[aria-pressed="true"] { background: var(--qnb); }
.chip-wings[aria-pressed="true"] { background: var(--wings); }
.chip-milesqnb[aria-pressed="true"] { background: var(--milesqnb); }
.chip-milesgaranti[aria-pressed="true"] { background: var(--milesgaranti); }
.chip-maximiles[aria-pressed="true"] { background: var(--maximiles); }
.chip-mileskuveyt[aria-pressed="true"] { background: var(--mileskuveyt); }
.chip[data-kind="benefit"][aria-pressed="true"] { background: var(--accent); }

.checklist { display: flex; flex-direction: column; gap: 2px; max-height: 244px; overflow-y: auto; }
.check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 6px; border-radius: 8px; font-size: 13px;
}
.check:hover { background: var(--bg); }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
.check .count { margin-left: auto; font-size: 11px; color: var(--muted); }

#sort {
  width: 100%; padding: 9px 10px; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.toggle { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 13px; cursor: pointer; }
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }

/* -- results --------------------------------------------------------------- */
.result-count { font-size: 13px; color: var(--muted); margin: 2px 2px 14px; }

.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

.load-more {
  display: block; margin: 26px auto 8px; cursor: pointer;
  padding: 11px 26px; font-size: 14px; font-weight: 600;
  color: var(--accent); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 999px;
  transition: border-color .15s, background .15s;
}
/* Class specificity ties [hidden]'s but wins on source order, so `display`
   above would defeat the `hidden` attribute — restore it explicitly. */
.load-more[hidden] { display: none; }
.load-more:hover { border-color: var(--accent); background: var(--bg); }
.load-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cards are filled with their bank's brand colour (--fill). --on-fill is the
   readable text colour (black or white), computed per bank in app.js from the
   brand colour's luminance; every text/chip tone below derives from it so the
   card stays legible whatever the fill. */
.card {
  --fill: var(--card-bg);
  --on-fill: var(--text);
  display: flex; flex-direction: column; text-decoration: none;
  color: var(--on-fill); background: var(--fill);
  border: 1.5px solid color-mix(in srgb, var(--fill) 74%, #000);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .13s ease, box-shadow .13s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card.maximum   { --fill: var(--maximum); }
.card.bonus     { --fill: var(--bonus); }
.card.worldcard { --fill: var(--worldcard); }
.card.bankkart  { --fill: var(--bankkart); }
.card.vakifkart { --fill: var(--vakifkart); }
.card.axess     { --fill: var(--axess); }
.card.crystal   { --fill: var(--crystal); }
.card.adios     { --fill: var(--adios); }
.card.play      { --fill: var(--play); }
.card.paraf     { --fill: var(--paraf); }
.card.qnb       { --fill: var(--qnb); }
.card.wings     { --fill: var(--wings); }
.card.milesqnb     { --fill: var(--milesqnb); }
.card.milesgaranti { --fill: var(--milesgaranti); }
.card.maximiles    { --fill: var(--maximiles); }
.card.mileskuveyt  { --fill: var(--mileskuveyt); }

/* Cropped landscape media keeps cards rectangular (not tall) — the image is cut
   to a wide ratio rather than given a fixed pixel height. */
.card-media {
  position: relative; aspect-ratio: 16 / 9; flex: none; overflow: hidden;
  background: color-mix(in srgb, var(--on-fill) 12%, var(--fill));
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Benefit + category chips exist twice in every card: overlaid on the image and
   in the body under the title. Wide cards show the body copy (room to spare,
   and the chips read as part of the text); narrow cards show the overlay so the
   body stays logo + two-line title. Exactly one is displayed at a time, and the
   hidden one is display:none, so screen readers announce it only once. */
.media-tags {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: none; flex-wrap: wrap; gap: 5px;
  padding: 24px 8px 8px;
  /* The chips sit on whatever artwork the bank published — often pale. The
     fade guarantees contrast underneath them regardless of the image. */
  background: linear-gradient(to top, rgba(17, 12, 28, .78), rgba(17, 12, 28, 0));
}
.media-tags .tag {
  font-size: 10.5px; font-weight: 600; line-height: 1; padding: 4px 8px;
  border-radius: 6px; color: #fff; letter-spacing: .01em;
  background: rgba(17, 12, 28, .88);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.media-tags .tag.benefit { font-weight: 700; background: rgba(17, 12, 28, .94); }

/* Default (wide): chips live under the promo name. */
.card-body .tag-row { display: flex; }

.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.brand-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; max-width: 60%; height: 24px; box-sizing: border-box;
  background: #fff; border: 1px solid rgba(0,0,0,.09);
  border-radius: 7px; padding: 3px 8px; overflow: hidden;
}
/* height:100% + max-width:100% + contain => the logo scales to fit the chip on
   both axes and can never overflow (fixes wide marks like Maximum spilling out). */
.brand-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.brand-fallback {
  font-size: 12.5px; font-weight: 700; color: var(--on-fill);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.days-left {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  color: var(--on-fill);
  background: color-mix(in srgb, var(--on-fill) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-fill) 30%, transparent);
}
/* urgent inverts to the text colour for a high-contrast alert on any fill */
.card .days-left.urgent { background: var(--on-fill); color: var(--fill); border-color: transparent; }

.card-title { font-size: 14px; line-height: 1.45; margin: 0; font-weight: 600; color: var(--on-fill); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }
.tag {
  font-size: 11px; color: var(--on-fill); border-radius: 6px; padding: 3px 8px;
  background: color-mix(in srgb, var(--on-fill) 15%, transparent);
}
.tag.benefit {
  font-weight: 600;
  background: color-mix(in srgb, var(--on-fill) 26%, transparent);
}

.empty { text-align: center; color: var(--muted); padding: 60px 0; }

.footer {
  border-top: 1px solid var(--border); background: var(--card-bg);
  color: var(--muted); font-size: 12px; padding: 20px 0 30px; line-height: 1.6;
}

/* -- responsive ------------------------------------------------------------ */
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; gap: 14px; }
  /* One normal document scroll: the sidebar is not sticky and nothing inside it
     traps touch scroll — the old sticky sidebar + nested checklist scroll made
     the page hard to scroll once filters were open. */
  .sidebar { position: static; margin: 0 -20px; }
  .sidebar-inner { border-radius: 0; border-left: 0; border-right: 0; max-height: none; overflow: visible; }
  .checklist { max-height: none; overflow: visible; }
  .filter-toggle {
    display: inline-block; margin-left: auto; padding: 7px 16px; font-size: 13px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg); color: var(--text);
  }
  /* Search stays visible on top; only the filter groups collapse. */
  .filter-head { margin-top: 12px; }
  .filter-body { display: none; padding-top: 4px; }
  .sidebar.open .filter-body { display: block; }
  .hero-inner { padding: 22px 20px 24px; }
}

@media (max-width: 560px) {
  .hero-side { align-items: flex-start; width: 100%; }
  .hero-title { font-size: 23px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .card-title { font-size: 12.5px; }
  .card-body { padding: 10px 11px 12px; }
  /* Cards are half a screen wide here — move the chips back onto the image so
     the body isn't three stacked rows of text. */
  .media-tags { display: flex; }
  .card-body .tag-row { display: none; }
}

/* ===========================================================================
   SEO / generated pages (bank, category, bank×category, detail, guide, 404).
   Additive only — the homepage app above is untouched.
   =========================================================================== */

/* compact sub-page hero */
.hero--sub .hero-inner { padding: 16px 20px; }
.hero-brand { text-decoration: none; color: inherit; }
.hero--sub .hero-logo { width: 44px; height: 44px; border-radius: 12px; }
.hero--sub .hero-logo img { width: 26px; height: 26px; }
.hero--sub .hero-title { font-size: 21px; }
.hero-alllink {
  margin-left: auto; color: rgba(255,255,255,.9); text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1);
}
.hero-alllink:hover { background: rgba(255,255,255,.2); }

/* breadcrumb */
.breadcrumb {
  background: var(--card-bg); border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.breadcrumb .container { padding-top: 10px; padding-bottom: 10px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--muted); }
.crumb-sep { margin: 0 8px; color: var(--muted); }

/* generic page shell */
.page { padding-top: 22px; padding-bottom: 40px; }
.page h1 { font-size: 26px; line-height: 1.25; margin: 6px 0 10px; letter-spacing: -.4px; }
.page-intro { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 72ch; margin: 0 0 12px; }
.updated { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; }

/* pill quick-links (bank↔category cross links) */
.pill-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.pill-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; text-decoration: none;
  color: var(--text); background: var(--card-bg); border: 1px solid var(--border);
}
.pill-link span { color: var(--muted); font-size: 12px; }
.pill-link:hover { border-color: var(--accent); color: var(--accent); }

/* buttons */
.btn-primary, .btn-secondary {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 12px; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--brand-purple-dark); }
.btn-secondary { background: var(--card-bg); color: var(--accent); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); }

/* -- detail page ----------------------------------------------------------- */
/* Mobile-first: one column in DOM order — header card, then the rail
   ("Ne kazanırsınız?" + kart başvurusu), then the detailed info and the link to
   the bank's own page. The desktop rule further down turns .detail-cols into
   two columns and flips the rail to the right, where it sticks. */
.detail-page {
  padding-top: 20px; padding-bottom: 40px; max-width: 1100px;
  display: flex; flex-direction: column; gap: 16px; align-items: stretch;
}
.detail-cols { display: flex; flex-direction: column; gap: 16px; }
.detail-rail,
.detail-main {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 16px; min-width: 0;
}
.detail-card {
  --fill: var(--card-bg);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 22px; overflow: hidden;
}
.detail-head { padding-bottom: 18px; }
/* Small application link — sits right under the benefits box. */
.detail-apply {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  text-decoration: none; font-weight: 600; font-size: 13.5px; line-height: 1;
  color: var(--accent); background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px; padding: 10px 18px;
  transition: border-color .13s, background .13s;
}
.detail-apply:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}
.detail-info > :first-child { margin-top: 0; }
.detail-info > :last-child { margin-bottom: 0; }
.detail-card .brand-row { margin-bottom: 12px; }
.detail-card h1 { font-size: 24px; line-height: 1.3; margin: 0 0 12px; color: var(--text); }
.detail-card .tag-row { margin: 0 0 12px; }
.detail-card .tag { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.detail-card .tag.benefit { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.detail-card .days-left {
  color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent);
  border: 1px solid var(--border); margin-left: 0;
}
.detail-card .brand-row .brand-logo { background:#fff; }
.detail-dates { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.detail-media {
  margin: 4px 0 18px; border-radius: 10px; overflow: hidden; background: var(--bg);
  aspect-ratio: 16 / 9;
}
.detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* -- detail: campaign summary + plain-text facts --------------------------- */
.detail-summary { margin: 6px 0 20px; }
.detail-summary h2 { font-size: 18px; margin: 0 0 8px; }
.detail-summary p { font-size: 15px; line-height: 1.75; color: var(--text); margin: 0; }
.detail-kosullar { margin: 6px 0 20px; }
.detail-kosullar h2 { font-size: 18px; margin: 0 0 8px; }
.detail-kosullar p { font-size: 15px; line-height: 1.75; color: var(--text); margin: 0; }
.detail-facts { margin: 0 0 20px; display: flex; flex-direction: column; gap: 14px; }
.fact { margin: 0; font-size: 14.5px; line-height: 1.65; }
.fact-label {
  display: block; font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.fact-val { color: var(--text); }
.detail-terms p { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.detail-goto {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
}
.detail-goto a { color: var(--accent); text-decoration: none; font-weight: 600; }
.detail-goto a:hover { text-decoration: underline; }

/* -- detail: benefits box (prominent, sticky rail) ------------------------- */
.benefits-box {
  border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 18px 18px 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
}
.benefits-box h2 { font-size: 16px; margin: 0 0 12px; color: var(--accent); }
.benefit-list { list-style: none; padding: 0; margin: 0; }
.benefit-list li {
  padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--border);
}
.benefit-list li:last-child { border-bottom: 0; }
.benefit-key {
  display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px;
}
.benefit-ozet { display: block; font-size: 14px; line-height: 1.55; color: var(--text); }
.notice {
  padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  margin: 0 0 18px;
}
.notice--expired {
  background: color-mix(in srgb, var(--worldcard) 12%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--worldcard) 40%, transparent);
}
.notice--expired a { color: var(--accent); }
.expired-badge {
  background: var(--worldcard) !important; color: #fff !important; border-color: transparent !important;
}
/* -- detail: two columns from tablet up ------------------------------------ */
/* Same breakpoint as the homepage sidebar. The rail is ordered after the main
   column visually but stays first in the DOM (mobile order), and sticks to the
   viewport while the longer left column scrolls past it. max-height keeps a
   rail taller than the screen scrollable instead of clipped. */
@media (min-width: 881px) {
  .detail-cols { flex-direction: row; align-items: flex-start; gap: 24px; }
  .detail-main { order: 1; flex: 1 1 auto; }
  .detail-rail {
    order: 2; flex: 0 0 336px; width: 336px;
    position: sticky; top: 18px;
    max-height: calc(100vh - 36px); overflow-y: auto;
  }
}

.detail-aside { margin: 24px 0; display: grid; gap: 18px; }
/* The detail page is a flex column with its own 16px gap, so this only adds the
   extra breathing room that separates "related" from the campaign itself. */
.related { margin-top: 10px; }
.related h2, .guide-section h2, .faq h2 { font-size: 18px; margin: 0 0 14px; }

/* -- guide ----------------------------------------------------------------- */
.guide-body p { font-size: 15px; line-height: 1.7; color: var(--text); max-width: 72ch; }
.guide-section { margin: 28px 0; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.link-list a { color: var(--accent); text-decoration: none; font-size: 14px; }
.link-list a:hover { text-decoration: underline; }
.faq-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px; background: var(--card-bg);
}
.faq-item summary { font-weight: 600; cursor: pointer; font-size: 14.5px; }
.faq-item p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }

/* -- affiliate box (sponsored) --------------------------------------------- */
.affiliate-card {
  position: relative; --fill: var(--card-bg); --on-fill: var(--text);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--fill) 8%, var(--card-bg)), var(--card-bg));
  border: 1.5px dashed color-mix(in srgb, var(--fill) 55%, var(--border));
  min-height: 220px;
}
.affiliate-card .card-body { justify-content: flex-start; gap: 8px; }
.affiliate-card .card-title { color: var(--text); font-size: 15px; }
.ad-label {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
.aff-text { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.aff-cta {
  margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 13px;
  color: #fff; background: var(--fill); border-radius: 9px; padding: 8px 14px;
}
.aff-link { position: absolute; inset: 0; z-index: 1; }

/* -- AdSense slots --------------------------------------------------------- */
/* Only ever in the DOM once ads are actually enabled (see ad_slot_html); the
   min-heights below reserve space for the real <ins> so a slow ad load doesn't
   shift the page. While ads are off nothing is emitted, so no blank gap. */
.ad-slot { display: block; width: 100%; margin: 8px 0 22px; overflow: hidden; }
.ad-slot--in_feed { min-height: 100px; }
.ad-slot--in_article { min-height: 280px; }
.ad-slot ins { display: block; }

/* -- internal-link footer (link farm) -------------------------------------- */
.linkfarm { border-top: 1px solid var(--border); background: var(--card-bg); }
.linkfarm-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; padding-top: 30px; padding-bottom: 30px;
}
.linkcol h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin: 0 0 12px; }
.linkcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.linkcol a { color: var(--text); text-decoration: none; font-size: 13.5px; }
.linkcol a:hover { color: var(--accent); }

.notfound { text-align: center; padding: 60px 0 70px; }
.notfound h1 { font-size: 30px; }

@media (max-width: 560px) {
  .page h1 { font-size: 22px; }
  .detail-page, .detail-cols, .detail-rail, .detail-main { gap: 12px; }
  .detail-card { padding: 16px 15px 18px; }
  .detail-card h1 { font-size: 20px; }
  .benefits-box { padding: 15px 15px 6px; }
}