/* ============================================================
   ZOBU — tanıtım sayfası
   Tasarım dili eklentinin popup arayüzüyle (popup.html) birebir
   aynı token setini kullanır: sıcak turuncu tek vurgu, koyu lacivert
   üst bant, sistem fontu. Build aracı yok — saf HTML/CSS/JS.
   ============================================================ */

:root{
  /* --- marka renkleri (popup.html ile birebir aynı) --- */
  --bg:#eef1f4; --surface:#ffffff; --sunk:#f6f8fa; --line:#dde3e8; --line-2:#c9d2da;
  /* Açık temada metin olarak kullanılan tonlar WCAG AA (4.5:1) için koyulaştırıldı:
     ink-3 #7b8a97→#5f6d7a, accent-2 #b85e0b→#a3520a, good #1e8e5a→#1a7a4d, warn #a86a12→#8a560c, bad #c2412d→#b03a28 */
  --ink:#15202b; --ink-2:#4a5a68; --ink-3:#5f6d7a;
  --accent:#f08a24; --accent-ink:#1b1206; --accent-2:#a3520a; --accent-soft:#fff3e6;
  --good:#1a7a4d; --good-soft:#e5f5ec; --warn:#8a560c; --warn-soft:#fdf3e2; --bad:#b03a28; --bad-soft:#fdecea;
  --head:#15202b; --head-2:#24333f; --head-ink:#ffffff;

  /* --- tipografi --- */
  --f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem; --fs-lg:1.25rem;
  --fs-xl:1.5rem; --fs-2xl:2rem; --fs-3xl:2.75rem; --fs-4xl:3.5rem;

  /* --- aralık (4px taban) --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;

  /* --- yarıçap / gölge / geçiş --- */
  --r-s:10px; --r:16px; --r-lg:24px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(15,22,29,.06);
  --shadow-md:0 8px 24px rgba(15,22,29,.08);
  --shadow-lg:0 24px 60px rgba(15,22,29,.16);
  --t-fast:150ms ease; --t-normal:260ms cubic-bezier(.2,.7,.2,1);

  --container:1180px;
  --header-h:72px;            /* sticky header yüksekliği: menü konumu ve kaydırma payı buradan */
  --on-dark-muted:rgba(255,255,255,.62); /* koyu zeminde ikincil metin (AA) */
  color-scheme: light;
}

@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f161d; --surface:#17212b; --sunk:#121a22; --line:#26323d; --line-2:#33424f;
  --ink:#e8eef3; --ink-2:#a9b7c3; --ink-3:#7d8c99;
  --accent:#f59a3c; --accent-ink:#1b1206; --accent-2:#f7b26b; --accent-soft:#2a1d10;
  --good:#3fbf83; --good-soft:#13281e; --warn:#e3a547; --warn-soft:#2a2112; --bad:#ef7462; --bad-soft:#2d1714;
  --head:#0a1016; --head-2:#1a252f; --head-ink:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --bg:#0f161d; --surface:#17212b; --sunk:#121a22; --line:#26323d; --line-2:#33424f;
  --ink:#e8eef3; --ink-2:#a9b7c3; --ink-3:#7d8c99;
  --accent:#f59a3c; --accent-ink:#1b1206; --accent-2:#f7b26b; --accent-soft:#2a1d10;
  --good:#3fbf83; --good-soft:#13281e; --warn:#e3a547; --warn-soft:#2a2112; --bad:#ef7462; --bad-soft:#2d1714;
  --head:#0a1016; --head-2:#1a252f; --head-ink:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font:400 var(--fs-base)/1.6 var(--f);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
@media (min-width:768px){.container{padding-inline:var(--sp-8)}}

.skip-link{position:fixed;top:-60px;left:var(--sp-4);z-index:100;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--r-s);font-weight:800;transition:top var(--t-fast)}
.skip-link:focus{top:var(--sp-4)}

section{padding-block:var(--sp-20)}
section[id],#top{scroll-margin-top:var(--header-h)}
@media (max-width:640px){section{padding-block:var(--sp-12)}}
.eyebrow .eyebrow-ico{width:15px;height:15px}
.section-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);background:var(--accent-soft);border-radius:var(--r-full);padding:6px 14px}
.h2{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:var(--sp-4)}
.lede{font-size:var(--fs-lg);color:var(--ink-2);margin-top:var(--sp-4);max-width:62ch}
.section-head{max-width:720px;margin-bottom:var(--sp-12)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .lede{margin-inline:auto}
@media (max-width:640px){.h2{font-size:var(--fs-2xl)}}

/* ---------- butonlar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:var(--fs-sm);border-radius:var(--r-s);padding:13px 22px;min-height:48px;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),background var(--t-fast);white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 var(--accent-2), var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 var(--accent-2), var(--shadow-md)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2)}
.btn-sm{padding:9px 14px;min-height:44px;font-size:var(--fs-sm)}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;flex:none}
.btn-ghost:active{background:var(--sunk)}

/* ---------- ortak durumlar: active · disabled · aria-disabled · loading ----------
   Odak halkası tüm öğelerde global :focus-visible kuralından gelir (turuncu, 2px). */
:is(.btn,.theme-btn,.nav-toggle,.acct-btn,.acct-close,.seg-btn,.acct-plan-btn):active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn[data-idle-label]{opacity:.75;cursor:progress}          /* account.js setBusy(): istek sürüyor */
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .ext-ico{width:16px;height:16px}
/* Pasif bağlantı-buton (ör. mağaza linki yokken "Yakında"): okunur, ama tıklanabilir görünmez */
.btn[aria-disabled="true"]{background:transparent;color:inherit;border:1px dashed color-mix(in srgb,currentColor 55%,transparent);box-shadow:none;transform:none;cursor:not-allowed}
a[aria-disabled="true"]:not(.btn){cursor:not-allowed}

/* ---------- ikonlar (popup ile aynı çizgi stili) ---------- */
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:40;background:var(--head);color:var(--head-ink);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .bar{display:flex;align-items:center;gap:var(--sp-6);min-height:calc(var(--header-h) - 1px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em;font-size:var(--fs-base)}
.brand img{width:30px;height:30px;border-radius:9px}
.nav{display:flex;align-items:center;gap:var(--sp-6);flex:1}
.nav a{white-space:nowrap;font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.78);padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{color:#fff;border-color:var(--accent)}
.hdr-actions{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.theme-btn{width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08)}
.theme-btn:hover{background:rgba(255,255,255,.16)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-sun{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .i-moon{display:none} :root:not([data-theme="light"]) .theme-btn .i-sun{display:block} }
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r-s);color:#fff;background:rgba(255,255,255,.08);align-items:center;justify-content:center}
@media (max-width:860px){
  /* Kapalı menü visibility:hidden ile gizlenir: Tab gizli linklere gitmez */
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--head);padding:var(--sp-2) var(--sp-5) var(--sp-5);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform var(--t-normal),opacity var(--t-normal),visibility 0s linear 260ms}
  .nav.open{transform:translateY(0);opacity:1;visibility:visible;transition:transform var(--t-normal),opacity var(--t-normal),visibility 0s}
  .nav a{display:flex;align-items:center;min-height:48px;padding:0 2px;border-bottom:1px solid rgba(255,255,255,.08);border-left:3px solid transparent;padding-left:var(--sp-3)}
  .nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{border-bottom-color:rgba(255,255,255,.08);border-left-color:var(--accent)}
  .nav-toggle{display:inline-flex}
}

/* ============ HERO ============ */
.hero{padding-top:var(--sp-24);padding-bottom:var(--sp-24);background:
  radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
  linear-gradient(180deg, var(--head), var(--head-2) 120%);
  color:var(--head-ink);position:relative;overflow:clip}
@media (max-width:640px){.hero{padding-top:var(--sp-12);padding-bottom:var(--sp-12)}}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr;gap:var(--sp-10)}}
.hero h1{font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-top:var(--sp-5)}
@media (max-width:640px){.hero h1{font-size:var(--fs-3xl)}}
.hero .lede{color:rgba(255,255,255,.76);font-size:var(--fs-lg)}
.hero .eyebrow{background:rgba(255,255,255,.1);color:#ffd9ad}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-8)}
.cta-note{font-size:var(--fs-sm);color:rgba(255,255,255,.66);margin-top:var(--sp-3);max-width:52ch}
.hero .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.hero .btn-ghost:hover{border-color:var(--accent);color:#ffd9ad}

.trust-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-10)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:700;color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-full);padding:7px 13px}
.pill svg{width:14px;height:14px;color:var(--accent)}

/* ---- popup mockup (dekoratif) ---- */
.mock-wrap{display:flex;justify-content:center}
.mock{width:100%;max-width:360px;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform:rotate(1.2deg);border:1px solid rgba(255,255,255,.12)}
.mock .mtop{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(120deg,var(--head),var(--head-2));color:#fff}
.mock .mtop img{width:20px;height:20px;border-radius:6px}
.mock .mtop b{font-size:12px;letter-spacing:.12em;font-weight:800}
.mock .mstate{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;background:rgba(255,255,255,.12);padding:3px 8px;border-radius:99px}
.mock .mstate i{width:6px;height:6px;border-radius:50%;background:var(--good)}
.mock .mtabs{display:flex;gap:4px;padding:8px 10px 0;background:var(--bg)}
.mock .mtab{flex:1;text-align:center;padding:7px 4px;border-radius:8px 8px 0 0;font-size:11px;font-weight:700;color:var(--ink-3)}
.mock .mtab.on{background:var(--surface);color:var(--ink)}
.mock .mbody{padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}
.mock .mshield{display:flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));background:linear-gradient(135deg,var(--good-soft),var(--surface) 70%);border-radius:12px;padding:8px 9px}
.mock .mshield .sh{width:26px;height:26px;border-radius:8px;background:var(--good);color:#fff;display:grid;place-items:center;flex:none}
.mock .mshield .sh svg{width:14px;height:14px}
.mock .mshield b{display:block;font-size:11px;color:var(--good)}
.mock .mshield small{display:block;font-size:9.5px;color:var(--ink-3)}
.mock .mtiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mock .mtile{border:1.5px solid var(--line);border-radius:11px;padding:8px 9px;text-align:left;background:var(--surface)}
.mock .mtile.on{border-color:var(--accent);background:var(--accent-soft)}
.mock .mtile .ic{width:20px;height:20px;border-radius:6px;background:var(--sunk);display:grid;place-items:center;color:var(--accent-2);margin-bottom:4px}
.mock .mtile.on .ic{background:var(--accent);color:#fff}
.mock .mtile .ic svg{width:12px;height:12px}
.mock .mtile b{display:block;font-size:11px}
.mock .mtile small{display:block;font-size:9px;color:var(--ink-3);line-height:1.25;margin-top:1px}
.mock .mgo{background:var(--accent);color:var(--accent-ink);border-radius:11px;padding:11px;text-align:center;font-weight:800;font-size:12.5px;box-shadow:0 1px 0 var(--accent-2)}
.mock-float{position:absolute;background:var(--surface);color:var(--ink);border-radius:var(--r-s);box-shadow:var(--shadow-md);padding:9px 12px;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:7px;border:1px solid var(--line)}
.mock-float svg{width:15px;height:15px;color:var(--good);flex:none}
.mock-float.f1{top:6%;left:-8%}
.mock-float.f2{bottom:9%;right:-9%}
@media (max-width:980px){.mock-float{display:none}}

/* ============ LOGO/STAT STRIP ============ */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip .row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);padding-block:var(--sp-10)}
@media (max-width:760px){.strip .row{grid-template-columns:1fr 1fr;row-gap:var(--sp-8)}}
.stat{text-align:center}
.stat b{display:block;font-size:var(--fs-2xl);font-weight:800;color:var(--ink)}
.stat span{display:block;font-size:var(--fs-sm);color:var(--ink-2);font-weight:700;margin-top:4px}
.stat small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);margin-top:2px}

/* ============ FEATURES ============ */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media (max-width:980px){.features-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features-grid{grid-template-columns:1fr}}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-5);display:flex;align-items:flex-start;gap:var(--sp-4);transition:border-color var(--t-fast)}
.feature:hover{border-color:var(--line-2)}
.feature .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;flex:none}
.feature .ic svg{width:20px;height:20px}
.feature-body{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.feature h3{font-size:var(--fs-base);font-weight:800;line-height:1.3}
.feature p{flex-basis:100%;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.feature.is-key{border-color:color-mix(in srgb, var(--good) 40%, var(--line))}
.feature.is-key .ic{background:var(--good-soft);color:var(--good)}
.feat-badge{font-size:var(--fs-xs);font-weight:800;line-height:1;color:var(--ink-2);background:var(--sunk);border:1px solid var(--line-2);border-radius:var(--r-full);padding:4px 8px;white-space:nowrap}

/* ============ NASIL ÇALIŞIR ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);list-style:none}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:var(--sp-2)}
.step .num{width:40px;height:40px;border-radius:12px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:var(--fs-base);margin-bottom:var(--sp-4)}
:root[data-theme="dark"] .step .num{background:var(--accent);color:var(--accent-ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step .num{background:var(--accent);color:var(--accent-ink)}}
.step h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--sp-2)}
.step p{color:var(--ink-2)}
.step .step-note{display:flex;gap:10px;align-items:flex-start;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-sm)}
.step-note .ico{width:18px;height:18px;color:var(--accent-2);margin-top:3px}
@media (min-width:861px){
  .steps{position:relative}
  .steps::before{content:"";position:absolute;top:20px;left:16.6%;right:16.6%;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 14px);z-index:0}
}

/* ============ GÜVENLİK / KORUMA ============ */
.security{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:start}
@media (max-width:900px){.sec-grid{grid-template-columns:1fr;gap:var(--sp-10)}}
.sec-list{display:flex;flex-direction:column;gap:var(--sp-5)}
.sec-item{display:flex;gap:var(--sp-4)}
.sec-lede{margin-bottom:var(--sp-8)}
.sec-item .ic{width:38px;height:38px;border-radius:10px;background:var(--good-soft);color:var(--good);display:grid;place-items:center;flex:none}
.sec-item .ic .ico{width:20px;height:20px}
.sec-item h3{font-size:var(--fs-base);font-weight:800;margin-bottom:2px}
.sec-item p{color:var(--ink-2);font-size:var(--fs-sm)}
.sec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.sec-card :is(.sec-card-title,h4){font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--sp-4)}
.sec-card h4{margin-bottom:var(--sp-2)}
.sec-card .vk{display:flex;gap:8px;margin-bottom:var(--sp-4)}
.sec-card .seg-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-align:center;font-size:var(--fs-xs);font-weight:700;line-height:1.2;padding:8px 6px;min-height:44px;border-radius:9px;background:var(--sunk);color:var(--ink-2);border:1px solid var(--line);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.sec-card .seg-btn:hover{border-color:var(--line-2);color:var(--ink)}
/* Seçili sekme renge ek olarak tik ikonu ve kalın kenarla belli olur */
.seg-btn .seg-check{width:14px;height:14px;stroke-width:2.6;display:none}
.seg-btn[aria-selected="true"] .seg-check{display:block}
.sec-card .seg-btn:focus-visible{outline-offset:2px}
.sec-card .seg-btn.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-2)}
.vk-panel{animation:vkIn .25s ease}
@keyframes vkIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.vk-desc{color:var(--ink-2);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}
.vk-legend{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:var(--sp-3)}
.vk-legend .ico,.sec-tag .ico{width:14px;height:14px;stroke-width:2.2}
.vk-legend .ico{color:var(--bad)}
.vk-empty{font-size:var(--fs-sm);font-weight:700;color:var(--ink);background:var(--sunk);border:1px dashed var(--line-2);border-radius:var(--r-s);padding:10px 12px}
.sec-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.sec-tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700;background:var(--sunk);color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r-full);padding:5px 11px}
.sec-tag.on{background:var(--bad-soft);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.vk-note{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);font-weight:600;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.vk-note .ico{width:18px;height:18px;margin-top:2px}
.vk-note.good{color:var(--good)}
.vk-note.warn{color:var(--warn)}

/* ============ PLANLAR ============ */
.trial-badge .ico{width:18px;height:18px}
.plans-asin{max-width:62ch;margin:var(--sp-5) auto 0;font-size:var(--fs-sm);color:var(--ink-2);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-3) var(--sp-4)}
.plans-asin strong{color:var(--ink)}
.trial-badge{display:inline-flex;align-items:center;gap:7px;margin-top:var(--sp-5);font-size:var(--fs-sm);font-weight:700;color:var(--good);background:var(--good-soft);border-radius:var(--r-full);padding:8px 16px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);max-width:1180px;margin-inline:auto}
@media (max-width:1080px){.plans{grid-template-columns:1fr 1fr;max-width:760px}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
/* Turuncu vurgu: varsayılan olarak 1000 ASIN'de; fare hangi kartın üstündeyse (mobilde hangi karta dokunulduysa) o karta geçer.
   .is-touched sınıfını script.js ekler (dokunmatik ekranlarda :hover güvenilir değil). */
.plans .plan,.js .plans .plan.reveal{transition:opacity .6s ease, transform .6s ease, border-color .2s ease, box-shadow .2s ease}
.plan.pop,
.plans .plan:not(.is-current):is(:hover,.is-touched){border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
/* Başka kart vurgulanınca önerilen kartın kenarı soluk turuncu kalır; "en uygun" etiketi her zaman görünür */
.plans:has(.plan:is(:hover,.is-touched)) .plan.pop:not(:hover):not(.is-touched):not(.is-current){border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:none}
/* Buton da vurguyu takip eder: seçili kartın butonu turuncu, 1000 ASIN'inki sade olur */
.plans .plan:not(.is-current):is(:hover,.is-touched) .foot .btn-ghost:not([aria-disabled="true"]){background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 1px 0 var(--accent-2), var(--shadow-sm)}
.plans:has(.plan:is(:hover,.is-touched)) .plan.pop:not(:hover):not(.is-touched):not(.is-current) .foot .btn-primary:not([aria-disabled="true"]){background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.plan .tag{align-self:flex-start;font-size:var(--fs-xs);font-weight:800;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-full);padding:3px 10px}
.plan h3{font-size:var(--fs-lg);font-weight:800}
.plan .price{display:flex;align-items:baseline;gap:4px;margin-top:calc(var(--sp-3) * -1)}
.plan .price b{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.plan .price span{font-size:var(--fs-base);font-weight:600;color:var(--ink-2)}
.plan .quota{margin-top:calc(var(--sp-3) * -1);font-size:var(--fs-sm);font-weight:700;color:var(--accent-2)}
.plan .quota b{font-size:var(--fs-base)}
.plan .desc{color:var(--ink-2);font-size:var(--fs-sm);min-height:48px}
.plan ul{display:flex;flex-direction:column;gap:9px;font-size:var(--fs-sm);color:var(--ink-2);list-style:none}
.plan li{display:flex;gap:8px;align-items:flex-start}
.plan li svg{width:15px;height:15px;color:var(--good);flex:none;margin-top:2px}
.plan .foot{margin-top:auto;padding-top:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.plan .trial-note{font-size:var(--fs-sm);color:var(--ink-3);text-align:center}
.price-note{text-align:center;font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-6)}

/* Karşılaştırma tablosu: mobilde yatay kaydırmalı kap */
.table-scroll{position:relative;margin-top:var(--sp-10);overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);-webkit-overflow-scrolling:touch}
.compare{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--fs-sm)}
.compare caption{text-align:left;font-size:var(--fs-base);font-weight:800;padding:var(--sp-4) var(--sp-5)}
.compare th,.compare td{padding:12px var(--sp-4);border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.compare thead th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);background:var(--sunk)}
.compare thead th.is-pop{color:var(--accent-2)}
.compare tbody th,.compare thead th:first-child{text-align:left}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare th:first-child{position:sticky;left:0;min-width:200px}
.compare tbody th{background:var(--surface)}
.compare .yes{width:18px;height:18px;color:var(--good);stroke-width:2.4;vertical-align:middle}
.compare .no{color:var(--ink-3)}

/* ============ SSS ============ */
.faq-section{background:var(--surface);border-top:1px solid var(--line)}
.faq-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-16);align-items:start}
.faq-aside{position:sticky;top:calc(var(--header-h) + var(--sp-8))}
.faq-aside .h2{font-size:var(--fs-4xl);line-height:1.05;letter-spacing:-.03em;max-width:12ch}
.faq-lede{font-size:var(--fs-lg);color:var(--ink-2);margin-top:var(--sp-5);max-width:40ch}
.faq-support{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid var(--line);max-width:40ch}
.faq-support b{font-weight:800}
.faq-support p{color:var(--ink-2);font-size:var(--fs-sm);margin-top:var(--sp-1)}
.faq-support-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-4);font-weight:800;font-size:var(--fs-sm);color:var(--accent-2);border-radius:var(--r-s)}
.faq-support-link .ico{width:18px;height:18px;transition:transform var(--t-fast)}
.faq-support-link:hover .ico{transform:translateX(3px)}

.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);transition:background var(--t-fast)}
.faq-q{font:inherit;margin:0}
.faq-btn{width:100%;display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-6) var(--sp-2);text-align:left;font-size:var(--fs-lg);font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink);border-radius:var(--r-s);transition:color var(--t-fast)}
.faq-num{font:700 var(--fs-xs)/1 var(--mono);color:var(--ink-3);min-width:2ch;transition:color var(--t-fast)}
.faq-text{flex:1;min-width:0;overflow-wrap:anywhere;transition:color var(--t-fast)}
.faq-icon{width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;flex:none;color:var(--accent-2);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);transition:transform var(--t-normal),background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.faq-icon .ico{width:16px;height:16px;stroke-width:2.2}
.faq-btn:hover .faq-text{color:var(--accent-2)}
.faq-btn:hover .faq-num{color:var(--accent-2)}
.faq-btn:hover .faq-icon{border-color:var(--accent)}
.faq-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-btn[aria-expanded="true"] .faq-num{color:var(--accent-2)}
.faq-btn[aria-expanded="true"] .faq-icon{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Cevap paneli: JS yüklenmezse açık kalır; JS varsa yükseklik 0fr ↔ 1fr animasyonu */
.faq-panel{display:grid;grid-template-rows:1fr}
.faq-panel-inner{overflow:hidden;min-height:0}
.faq .a a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.faq .a{padding:0 calc(var(--sp-2) + 36px + var(--sp-5)) var(--sp-6) calc(var(--sp-2) + 2ch + var(--sp-5));color:var(--ink-2);font-size:var(--fs-base);line-height:1.7;max-width:68ch}
.faq.is-ready .faq-panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--t-normal),visibility 0s linear 260ms}
.faq.is-ready .faq-item.is-open .faq-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--t-normal),visibility 0s}
.faq.is-ready .faq-panel-inner>.a{opacity:0;transform:translateY(-4px);transition:opacity var(--t-fast),transform var(--t-normal)}
.faq.is-ready .faq-item.is-open .faq-panel-inner>.a{opacity:1;transform:none;transition-delay:60ms}
@media (prefers-reduced-motion: reduce){
  .faq-panel,.faq-panel-inner>.a,.faq-icon{transition:none!important}
}

@media (max-width:900px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}
  .faq-aside{position:static}
  .faq-aside .h2{font-size:var(--fs-3xl);max-width:none}
  .faq-support{margin-top:var(--sp-6)}
}
@media (max-width:640px){
  .faq-aside .h2{font-size:var(--fs-2xl)}
  .faq-lede{font-size:var(--fs-base)}
  .faq-btn{gap:var(--sp-3);padding:var(--sp-5) 0;font-size:var(--fs-base)}
  .faq-num{display:none}
  .faq-icon{width:32px;height:32px}
  .faq .a{padding:0 0 var(--sp-5);font-size:var(--fs-sm)}
}

/* ============ SON CTA ============ */
.cta-band{background:linear-gradient(135deg,var(--head),var(--head-2));color:#fff;border-radius:var(--r-lg);padding:var(--sp-16) var(--sp-10);text-align:center;position:relative;overflow:clip}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 15% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.cta-band p{color:rgba(255,255,255,.76);font-size:var(--fs-lg);margin-top:var(--sp-4);max-width:52ch;margin-inline:auto}
.cta-band .cta-row{justify-content:center;margin-top:var(--sp-8)}
.cta-band .btn{min-height:52px;padding-inline:28px;font-size:var(--fs-base)}
@media (max-width:640px){.cta-band h2{font-size:var(--fs-2xl)}.cta-band p{font-size:var(--fs-base)}.cta-band .btn{width:100%}}
.cta-band .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
@media (max-width:640px){.cta-band{padding:var(--sp-10) var(--sp-5)}}

/* ============ FOOTER ============ */
.site-footer{background:var(--head);color:rgba(255,255,255,.7);padding-block:var(--sp-12)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-10)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;letter-spacing:.06em}
.foot-brand img{width:28px;height:28px;border-radius:8px}
.site-footer p{font-size:var(--fs-sm);margin-top:var(--sp-3);max-width:40ch}
.foot-title{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark-muted);margin-bottom:var(--sp-3)}
.foot-col ul{display:flex;flex-direction:column;gap:9px;font-size:var(--fs-sm)}
.foot-col a[href]:hover{color:#fff}
.site-footer .foot-disclaimer{margin-top:var(--sp-10);max-width:none;font-size:var(--fs-xs);color:var(--on-dark-muted)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;align-items:center;margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-xs);color:var(--on-dark-muted)}

/* ============ HESAP / ABONELİK (account.js) ============ */
/* Supabase yapılandırılmışsa buton yeri baştan ayrılır (acct-pending, <head>'deki script), header kaymaz */
.acct-pending .acct-btn[hidden]{display:inline-flex!important;visibility:hidden}
.acct-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:var(--r-s);color:#fff;background:rgba(255,255,255,.08);font-size:var(--fs-xs);font-weight:800;position:relative}
.acct-btn:hover{background:rgba(255,255,255,.16)}
.acct-btn .ico{width:18px;height:18px}
/* Dar header'da "Giriş yap / Hesabım" yazısı görsel olarak gizlenir ama ekran okuyucu için kalır */
@media (max-width:1100px){.acct-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.acct-plan{font-size:var(--fs-xs);font-weight:800;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-full);padding:2px 8px}
@media (max-width:560px){
  .acct-btn{width:44px;padding:0;justify-content:center}
  .acct-plan{position:absolute;top:-6px;right:-10px;padding:1px 6px;font-size:11px}
  /* hesap butonuna yer açmak için: aynı CTA hero'da hemen aşağıda var */
  :is(.acct-on,.acct-pending) .hdr-actions>.btn-primary{display:none}
}


html:has(.acct-dialog[open]){overflow:hidden}
.acct-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);overflow:auto}
.acct-dialog::backdrop{background:rgba(10,16,22,.62);backdrop-filter:blur(2px)}
.acct-dialog[open]{animation:acctIn .2s ease}
@keyframes acctIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.acct-head{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;background:linear-gradient(120deg,var(--head),var(--head-2));color:var(--head-ink)}
.acct-head img{width:24px;height:24px;border-radius:7px}
.acct-head b{font-size:var(--fs-sm);letter-spacing:.04em}
.acct-close{margin-left:auto;width:44px;height:44px;border-radius:9px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08)}
.acct-close:hover{background:rgba(255,255,255,.16)}
.acct-close svg{width:16px;height:16px}

.acct-view{padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.acct-view h3{font-size:var(--fs-lg);font-weight:800;line-height:1.25}
.acct-view .btn{width:100%}
.acct-sub{color:var(--ink-2);font-size:var(--fs-sm);overflow-wrap:anywhere}
.acct-sub b{color:var(--ink)}
.acct-note{font-size:var(--fs-xs);font-weight:700;color:var(--accent-2);background:var(--accent-soft);border-radius:var(--r-s);padding:8px 12px}
.acct-error{font-size:var(--fs-xs);font-weight:700;color:var(--bad);background:var(--bad-soft);border-radius:var(--r-s);padding:8px 12px}
.acct-fine{font-size:var(--fs-xs);color:var(--ink-3);text-align:center;margin-top:6px}

.field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.field input{font-size:var(--fs-base);font-weight:500;color:var(--ink);background:var(--sunk);border:1px solid var(--line-2);border-radius:var(--r-s);padding:12px 14px;min-height:48px;width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input::placeholder{color:var(--ink-3)}
.field input:hover{border-color:var(--ink-3)}
.field input:disabled{opacity:.6;cursor:not-allowed}
.field input[aria-invalid="true"]{border-color:var(--bad)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field .code-input{font-family:var(--mono);font-size:var(--fs-xl);letter-spacing:.4em;text-align:center}

.acct-links{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.link-btn{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm);font-weight:700;color:var(--accent-2);padding:0 2px;border-radius:6px}
.link-btn:hover{text-decoration:underline}
.link-btn:disabled{color:var(--ink-3);cursor:not-allowed;text-decoration:none}
.acct-fine a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

.acct-user{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-2);overflow-wrap:anywhere}
.acct-status{display:flex;align-items:flex-start;gap:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;background:var(--sunk)}
.acct-status[data-tone="good"]{border-color:color-mix(in srgb,var(--good) 35%,var(--line));background:linear-gradient(135deg,var(--good-soft),var(--surface) 80%)}
.acct-status[data-tone="warn"]{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:var(--warn-soft)}
.acct-status[data-tone="bad"]{border-color:color-mix(in srgb,var(--bad) 30%,var(--line));background:var(--bad-soft)}
.acct-badge{flex:none;min-width:46px;text-align:center;font-size:var(--fs-xs);font-weight:800;border-radius:9px;padding:8px 10px;background:var(--accent);color:var(--accent-ink)}
/* Rozet yazısı zemin rengiyle: açık temada beyaz, koyu temada koyu (her iki temada da AA) */
.acct-status[data-tone="good"] .acct-badge{background:var(--good);color:var(--surface)}
.acct-status[data-tone="bad"] .acct-badge{background:var(--bad);color:var(--surface)}
.acct-status>div{min-width:0}
.acct-status b{display:block;font-size:var(--fs-base);line-height:1.35}
.acct-status small{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}
.acct-status .acct-quota{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line);font-weight:700;color:var(--ink)}

.acct-buy{display:flex;flex-direction:column;gap:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.acct-buy h4{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.acct-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:420px){.acct-plans{grid-template-columns:1fr}}
.acct-plan-btn{text-align:left;border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;min-height:56px;background:var(--surface);transition:border-color var(--t-fast),background var(--t-fast)}
.acct-plan-btn:hover{border-color:var(--line-2)}
.acct-plan-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.acct-plan-btn b{display:block;font-size:var(--fs-sm)}
.acct-plan-btn small{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.3;margin-top:2px}

.plan.is-current{border-color:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}

.toasts{position:fixed;left:50%;bottom:var(--sp-5);transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--head);color:#fff;border-radius:var(--r-s);padding:12px 16px;font-size:var(--fs-sm);font-weight:700;box-shadow:var(--shadow-lg);border-left:4px solid var(--accent);animation:toastIn .25s ease;transition:opacity .3s,transform .3s}
.toast-good{border-left-color:var(--good)}
.toast-warn{border-left-color:var(--warn)}
.toast-error{border-left-color:var(--bad)}
.toast.out{opacity:0;transform:translateY(6px)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ reveal animasyonu ============ */
/* Yalnızca JS çalışıyorsa gizlenir (html.js sınıfını <head>'deki satır içi script ekler) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

/* ============ YASAL SAYFALAR (gizlilik.html, kullanim-sartlari.html, iade.html) ============ */
.legal{padding-block:var(--sp-12) var(--sp-16)}
.legal .container{max-width:780px}
.legal h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-top:var(--sp-4)}
.legal .updated{color:var(--ink-3);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.legal h2{font-size:var(--fs-lg);font-weight:800;margin-top:var(--sp-10)}
.legal p,.legal ul{margin-top:var(--sp-3);color:var(--ink-2)}
.legal ul{padding-left:var(--sp-6)}
.legal li+li{margin-top:var(--sp-2)}
.legal a{color:var(--accent-2);text-decoration:underline}
.legal-draft{background:var(--warn-soft);color:var(--warn);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:600;margin-top:var(--sp-6)}

/* Yasal sayfalar ve 404: sade footer */
.site-footer-simple{padding-block:var(--sp-10)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);font-size:var(--fs-sm)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
.foot-links a:hover,.foot-links a[aria-current="page"]{color:#fff}
.foot-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.site-footer-simple .foot-disclaimer{margin-top:var(--sp-4)}

/* ============ 404 ============ */
.notfound{padding-block:var(--sp-24);min-height:calc(100dvh - var(--header-h) - 220px)}
.notfound h1{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:var(--sp-4)}
@media (max-width:640px){.notfound{padding-block:var(--sp-16)}.notfound h1{font-size:var(--fs-2xl)}}