/* ============================================================
   Kunci 2FA — design system bersama (semua halaman)
   ============================================================ */
:root{
  color-scheme: light dark;
  --bg:#EEF1F4; --surface:#FFFFFF; --surface-2:#F5F7FA; --ink:#131720; --muted:#5A6472;
  --faint:#8A94A6; --border:#DDE3EA; --accent:#12A99B; --accent-strong:#0E8C81;
  --accent-wash:#E1F4F1; --danger:#E5533D; --danger-wash:#FBE7E3; --warn:#C77D1A; --ring-track:#E3E8EE;
  --shadow:0 1px 2px rgba(19,23,32,.04),0 10px 30px -14px rgba(19,23,32,.22);
  --shadow-lg:0 30px 70px -30px rgba(19,23,32,.4);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0E1117; --surface:#171C25; --surface-2:#1E2430; --ink:#E7ECF3; --muted:#96A0B1;
    --faint:#6B7686; --border:#29313F; --accent:#1FBFAF; --accent-strong:#34D3C2; --accent-wash:#10312E;
    --danger:#F06B54; --danger-wash:#331A16; --warn:#E0A64A; --ring-track:#29313F;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -18px rgba(0,0,0,.7);
    --shadow-lg:0 36px 80px -28px rgba(0,0,0,.8); }
}
:root[data-theme="light"]{ --bg:#EEF1F4;--surface:#FFFFFF;--surface-2:#F5F7FA;--ink:#131720;--muted:#5A6472;--faint:#8A94A6;--border:#DDE3EA;--accent:#12A99B;--accent-strong:#0E8C81;--accent-wash:#E1F4F1;--danger:#E5533D;--danger-wash:#FBE7E3;--warn:#C77D1A;--ring-track:#E3E8EE;--shadow:0 1px 2px rgba(19,23,32,.04),0 10px 30px -14px rgba(19,23,32,.22);--shadow-lg:0 30px 70px -30px rgba(19,23,32,.4); }
:root[data-theme="dark"]{ --bg:#0E1117;--surface:#171C25;--surface-2:#1E2430;--ink:#E7ECF3;--muted:#96A0B1;--faint:#6B7686;--border:#29313F;--accent:#1FBFAF;--accent-strong:#34D3C2;--accent-wash:#10312E;--danger:#F06B54;--danger-wash:#331A16;--warn:#E0A64A;--ring-track:#29313F;--shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -18px rgba(0,0,0,.7);--shadow-lg:0 36px 80px -28px rgba(0,0,0,.8); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); line-height:1.55;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
.mono{ font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }
a{ color:var(--accent-strong); }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
img{ max-width:100%; }

/* ---------- header / nav ---------- */
header.site{ border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; }
.nav{ max-width:960px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.glyph{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong)); box-shadow:0 5px 14px -6px var(--accent); }
.glyph svg{ width:19px; height:19px; }
.brand b{ font-size:16px; letter-spacing:-.01em; }
.brand small{ font-size:11px; color:var(--muted); display:block; margin-top:-2px; font-weight:400; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ text-decoration:none; color:var(--muted); font-size:13.5px; font-weight:600; padding:7px 11px; border-radius:9px; }
.nav-links a:hover{ background:var(--surface-2); color:var(--ink); }
.nav-links a.active{ color:var(--accent-strong); background:var(--accent-wash); }
.icon-btn{ width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; color:var(--muted); }
.icon-btn:hover{ color:var(--ink); background:var(--surface-2); }
.icon-btn svg{ width:17px; height:17px; }
@media(max-width:600px){ .nav-links a{ display:none; } .nav-links a.keep{ display:inline-block; } }

/* ---------- page shell ---------- */
main.page{ max-width:640px; margin:0 auto; padding:44px 20px 40px; }
.eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; font-weight:700; color:var(--accent); text-align:center; }
h1{ font-size:31px; line-height:1.15; text-align:center; margin:12px 0 10px; letter-spacing:-.02em; text-wrap:balance; }
.lede{ text-align:center; color:var(--muted); font-size:15px; margin:0 auto 30px; max-width:490px; text-wrap:balance; }

/* ---------- card / tool ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:26px; box-shadow:var(--shadow-lg); }
.card.flat{ box-shadow:var(--shadow); border-radius:18px; }

/* ---------- form ---------- */
.lbl{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:10px; }
.lbl label{ font-size:12.5px; font-weight:700; color:var(--muted); }
.lbl .mini{ font-size:12px; font-weight:600; color:var(--accent); background:none; border:none; padding:0; }
.lbl .mini:hover{ text-decoration:underline; }
.input,textarea.input,select.input{ width:100%; padding:12px 14px; border-radius:13px; border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--ink); font-size:15px; transition:border-color .15s, box-shadow .15s; }
textarea.input{ resize:vertical; }
select.input{ -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); }
.input::placeholder{ color:var(--faint); }
.field{ margin-bottom:14px; } .field>label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint{ font-size:12px; color:var(--faint); margin:8px 0 0; }
.err{ color:var(--danger); font-size:12.5px; font-weight:600; min-height:16px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); padding:11px 16px; border-radius:12px; font-size:14px; font-weight:600;
  transition:background .15s,border-color .15s,transform .05s,opacity .15s; }
.btn:hover{ background:var(--surface-2); } .btn:active{ transform:translateY(1px); }
.btn svg{ width:16px; height:16px; }
.btn-accent{ border-color:transparent; color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong)); box-shadow:0 8px 18px -8px var(--accent); }
.btn-accent:hover{ opacity:.92; background:var(--accent-strong); }
.btn-accent:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 12px; font-size:13px; border-radius:10px; }

/* ---------- range slider ---------- */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--ring-track); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 2px 6px -1px var(--accent); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border:none; border-radius:50%; background:var(--accent); cursor:pointer; }

/* ---------- output box ---------- */
.out{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:15px 16px;
  font-size:15px; word-break:break-all; min-height:54px; }
.out.mono{ letter-spacing:.02em; }
.copied-tag{ position:absolute; top:10px; right:10px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; padding:3px 8px; border-radius:999px; opacity:0; transform:translateY(-4px);
  transition:opacity .2s,transform .2s; pointer-events:none; text-transform:uppercase; }
.copied-tag.show{ opacity:1; transform:translateY(0); }

.trust{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:20px; font-size:12.5px; color:var(--muted); }
.trust svg{ width:15px; height:15px; color:var(--accent); flex:none; }

/* ---------- ad slot ---------- */
.ad{ max-width:640px; margin:8px auto 0; padding:0 20px; }
.ad-box{ border:1px dashed var(--border); border-radius:14px; min-height:90px; display:grid; place-items:center; color:var(--faint); font-size:12px; background:var(--surface); }

/* ---------- content blocks ---------- */
section.blk{ max-width:640px; margin:44px auto 0; padding:0 20px; }
.blk h2{ font-size:20px; margin:0 0 16px; letter-spacing:-.01em; }
.prose{ color:var(--muted); font-size:14.5px; }
.prose h3{ color:var(--ink); font-size:16px; margin:24px 0 8px; }
.prose p{ margin:0 0 12px; } .prose ul{ margin:0 0 12px; padding-left:20px; } .prose li{ margin:4px 0; }
.prose code{ font-family:ui-monospace,monospace; background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:13px; color:var(--ink); }
.steps{ display:grid; gap:12px; }
.step{ display:flex; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.step .n{ width:26px; height:26px; border-radius:8px; background:var(--accent-wash); color:var(--accent); font-weight:700; font-size:13px; display:grid; place-items:center; flex:none; }
.step p{ margin:0; font-size:13.5px; } .step b{ font-size:14px; }
.faq details{ border:1px solid var(--border); border-radius:13px; background:var(--surface); margin-bottom:10px; overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:14px 16px; font-weight:650; font-size:14px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ color:var(--accent); font-size:20px; font-weight:400; line-height:1; transition:transform .2s; }
.faq details[open] summary .pm{ transform:rotate(45deg); }
.faq .ans{ padding:0 16px 15px; font-size:13.5px; color:var(--muted); }

/* ---------- tools hub grid ---------- */
.tools-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.tool-card{ display:flex; gap:13px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:17px; box-shadow:var(--shadow);
  transition:transform .12s, border-color .15s; }
.tool-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.tool-card .ic{ width:40px; height:40px; border-radius:11px; background:var(--accent-wash); color:var(--accent);
  display:grid; place-items:center; flex:none; font-size:20px; }
.tool-card b{ font-size:14.5px; display:block; }
.tool-card span{ font-size:12.5px; color:var(--muted); }

/* ---------- footer ---------- */
footer.site{ max-width:640px; margin:52px auto 0; padding:24px 20px 48px; border-top:1px solid var(--border); text-align:center; color:var(--faint); font-size:12.5px; }
footer.site .flinks{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
footer.site .flinks a{ color:var(--muted); text-decoration:none; font-weight:600; }
footer.site .flinks a:hover{ color:var(--accent-strong); }
footer.site .warn{ color:var(--muted); margin:0 0 10px; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto; } }