/* Gaya bersama halaman informasi (Ketentuan Layanan & Kebijakan Privasi).
   Token warna/tipografi mengikuti Landing v3 + takedown.html. */
:root {
  --purple-300: #A78BFA; --purple-500: #6C3CFF; --purple-700: #4A21C9;
  --ink-900: #0B0D14; --ink-800: #11141F; --ink-700: #1A1F2E;
  --ink-500: #4A5066; --ink-400: #6E7488; --ink-100: #E4E2EC;
  --bg-page: #F4F5F7; --white: #fff;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background: var(--bg-page); color: #14121F; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--purple-700); }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(11,13,20,.88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-in { max-width: 1120px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav-in img { height: 30px; width: auto; display: block; }
.nav-in .back { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.62); text-decoration: none; }
.nav-in .back:hover { color: #fff; }

.hd { position: relative; overflow: hidden; background: var(--ink-900); }
.hd-glow { position: absolute; inset: 0; background: radial-gradient(900px 520px at 78% -25%, rgba(108,60,255,.42), transparent 62%); pointer-events: none; }
.hd-in { max-width: 760px; margin: 0 auto; padding: 60px 28px 52px; position: relative; z-index: 1; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-300); margin-bottom: 14px; }
.hd h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 40px); line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.hd p { font-size: 16px; color: rgba(255,255,255,.72); margin-top: 14px; }
.upd { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 18px; }

main { max-width: 760px; margin: 0 auto; padding: 48px 28px 80px; }
section { margin-bottom: 38px; }
h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 12px; }
h3 { font-size: 15.5px; font-weight: 700; margin: 18px 0 6px; }
p { margin-bottom: 12px; color: var(--ink-500); }
ul { margin: 0 0 12px 20px; color: var(--ink-500); }
li { margin-bottom: 7px; }
strong { color: #14121F; font-weight: 700; }
code { font-family: var(--font-mono); font-size: 13px; background: #ECE6FF; color: var(--purple-700); padding: 2px 6px; border-radius: 5px; }

.note { background: var(--white); border: 1px solid var(--ink-100); border-left: 3px solid var(--purple-500); border-radius: 12px; padding: 18px 20px; margin-bottom: 34px; }
.note p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-100); vertical-align: top; color: var(--ink-500); }
th { font-weight: 700; color: #14121F; font-size: 13px; letter-spacing: .01em; }
.tw { overflow-x: auto; }

footer { border-top: 1px solid var(--ink-100); }
.ft-in { max-width: 760px; margin: 0 auto; padding: 26px 28px 40px; font-size: 13.5px; color: var(--ink-400); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.ft-in a { color: var(--ink-400); text-decoration: none; margin-right: 14px; }
.ft-in a:hover { color: var(--purple-700); }
@media (max-width: 640px) { .hd-in { padding: 44px 22px 40px; } main { padding: 36px 22px 64px; } }