/* ══════════════════════════════════════════════════
   Nova Capital — Shared styles untuk halaman /fitur/*
   Dual theme: :root = light, .dark = dark (default app)
   Token sinkron dengan src/index.css.
   ══════════════════════════════════════════════════ */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --border:#dde3ec;
  --text:#1b2534;
  --text-muted:#55627a;
  --text-dim:#5b6a82;
  --gold:#96751b;
  --gold-soft:rgba(150,117,27,.10);
  --green:#0f7a52;
  --red:#b91c1c;
  --radius:0px;
}
.dark{
  --bg:#060a14;
  --card:#0a0f1e;
  --border:#1c2a4a;
  --text:#eef3ff;
  --text-muted:#8aa0b8;
  --text-dim:#64789a;
  --gold:#ffc94d;
  --gold-soft:rgba(255,201,77,.12);
  --green:#00e68a;
  --red:#ff4d6a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:32px 20px 64px}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  position:sticky;top:0;backdrop-filter:blur(10px);z-index:10;
}
.brand{font-weight:700;color:var(--gold);letter-spacing:2px;font-size:14px;text-decoration:none}
.theme-toggle{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:inherit;
}
.theme-toggle:hover{color:var(--gold);border-color:var(--gold)}
h1{color:var(--gold);font-size:1.6rem;line-height:1.3;margin:0 0 16px}
h2{color:var(--text);font-size:1.05rem;margin:32px 0 12px;text-transform:uppercase;letter-spacing:.08em}
p{color:var(--text-muted);margin:0 0 16px}
ul{padding-left:20px;margin:0 0 20px}
li{color:var(--text-muted);margin-bottom:8px}
li strong{color:var(--text)}
a{color:var(--gold)}
.pill{
  display:inline-block;padding:4px 10px;border:1px solid var(--border);
  background:var(--gold-soft);color:var(--gold);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;
}
.cta{
  display:inline-block;margin-top:24px;padding:12px 20px;min-height:44px;
  border:1px solid var(--gold);color:var(--gold);text-decoration:none;
  font-weight:600;font-size:.9rem;
}
.cta:hover{background:var(--gold-soft)}
.back{display:inline-block;margin-top:16px;color:var(--text-dim);text-decoration:none;font-size:.85rem}
.back:hover{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:480px){
  body{font-size:15px}
  h1{font-size:1.3rem}
  .wrap{padding:20px 16px 48px}
}