:root { --ink:#16182a; --muted:#687087; --line:#e8e8ed; --accent:#6d4aff; --bg:#fbfbfc; --lavender:#f4f1ff; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(135deg,#fbfbfc 0%,#f9f8ff 100%); color:var(--ink); font:16px/1.72 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.nav { max-width:1120px; min-height:78px; padding:16px 24px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }.nav:after { content:"GAMBARAN / LEGAL"; order:2; color:#8981b5; font:600 10px/1 Inter,sans-serif; letter-spacing:.12em; }.back { order:3; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }.brand-mark { padding:4px; border:1px solid #dbe2ec; border-radius:8px; background:#f8fafc; display:flex; }.brand-mark img { height:16px; width:auto; }.brand-full { height:20px; width:auto; }.back { color:#4d5570; text-decoration:none; font-size:13px; font-weight:700; padding:9px 12px; border-radius:999px; transition:background .15s,color .15s; }.back:hover { color:var(--accent); background:var(--lavender); }
main { max-width:800px; padding:58px 30px 96px; margin:14px auto 64px; background:#fff; border:1px solid #eceaf3; border-radius:28px; box-shadow:0 22px 55px rgba(54,43,101,.06); }.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#6048de; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.eyebrow:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #eeeaff; } h1 { font-size:clamp(39px,6vw,60px); line-height:1; letter-spacing:-.07em; margin:17px 0 15px; } .updated { color:var(--muted); font-size:13px; margin:0 0 35px; font-weight:600; } h2 { margin:43px 0 13px; letter-spacing:-.045em; font-size:22px; line-height:1.2; } p,li { color:#464c60; } p { margin:0; } h2 + p { margin-top:0; } ul { padding-left:22px; } a { color:#5140cf; font-weight:600; } .notice { border:1px solid #ddd7fb; background:linear-gradient(120deg,#f5f2ff,#faf9ff); border-radius:17px; padding:19px 21px; color:#484095; font-size:14px; line-height:1.65; box-shadow:inset 3px 0 0 #8e78ff; } footer { border-top:1px solid var(--line); padding:28px 24px; color:#7c8090; font-size:12px; } footer div { max-width:1120px; margin:auto; display:flex; justify-content:space-between; gap:18px; } footer a { color:inherit; text-decoration:none; } footer a:hover { color:var(--accent); } @media(max-width:600px) { .brand-full,.nav:after { display:none; } .nav { min-height:64px; } main { margin:0 12px 36px; padding:42px 22px 64px; border-radius:21px; } footer div { flex-direction:column; } }