@font-face{font-family:"Plus Jakarta Sans";src:url("/font/PlusJakartaSans-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/font/BricolageGrotesque-latin.woff2") format("woff2");font-weight:700 800;font-display:swap}
:root{--navy:#0b1d45;--biru:#0a3fa6;--hijau:#3ddc84;--garis:#c6cfde;--teks:#1b2433;--redup:#4a5568;--merah:#b42318;--latar:#f3f5f9}
*{box-sizing:border-box}
body{margin:0;color:var(--teks);font:400 16px/1.55 "Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.latar-gelap{background:var(--navy)}.latar-terang{background:var(--latar)}
h1,h2{margin:0;font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;font-weight:800;color:var(--navy);line-height:1.12}
h1{font-size:30px}h2{font-size:19px}p{margin:0}
a{color:var(--biru)}a:hover{color:#072f7e}
:focus-visible{outline:3px solid #9dbcf2;outline-offset:2px}
.tengah{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.kartu{width:100%;max-width:420px;background:#fff;border-radius:22px;padding:clamp(24px,5vw,38px);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.kartu.lebar-sedang{max-width:600px}
.logo{display:block;border-radius:12px;margin-bottom:20px}.kartu.susun .logo{margin-bottom:0}
.susun{display:flex;flex-direction:column;gap:18px}
.ruas{display:flex;flex-direction:column;gap:8px}
label{font-size:14px;font-weight:600;color:var(--navy)}
input{width:100%;height:50px;padding:0 14px;font:inherit;color:var(--teks);background:#fff;border:1px solid var(--garis);border-radius:12px}
input:focus{outline:3px solid #9dbcf2;outline-offset:1px;border-color:var(--biru)}
.masukan-kode{height:66px;text-align:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:30px;letter-spacing:.18em}
.masukan-kode::placeholder{color:#c6cfde}
.tombol-utama,.tombol-kedua{display:inline-flex;align-items:center;justify-content:center;min-height:52px;width:100%;padding:0 22px;border-radius:12px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.tombol-utama{border:0;background:var(--biru);color:#fff}.tombol-utama:hover{background:#072f7e}
.tombol-kedua{border:1px solid var(--garis);background:#fff;color:var(--navy)}.tombol-kedua:hover{background:var(--latar)}
.kecil-tombol{min-height:42px;width:auto;padding:0 16px;font-size:15px}
.baris-tombol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}
.sub{margin-top:8px;color:var(--redup)}.kecil{font-size:14px;color:var(--redup)}
.label-kecil{display:block;margin-bottom:8px;font-size:13px;font-weight:700;color:#0f6b32}
.galat{padding:11px 14px;background:#fef3f2;color:var(--merah);border-radius:10px;font-size:15px;font-weight:600}
.galat-baik{background:#e3f5ea;color:#0f6b32}.pilih{width:100%;height:50px;padding:0 12px;font:inherit;color:var(--teks);background:#fff;border:1px solid var(--garis);border-radius:12px}
.galat-ruas{color:var(--merah);font-size:14px;font-weight:600}
.langkah-akun{list-style:none;counter-reset:l;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.langkah-akun>li{counter-increment:l;position:relative;display:flex;flex-direction:column;gap:10px;padding-left:44px}
.langkah-akun>li::before{content:counter(l);position:absolute;left:0;top:-3px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:14px}
.qr{width:232px;max-width:100%;padding:0;border:1px solid var(--garis);border-radius:12px;overflow:hidden;background:#fff}.qr svg{display:block;width:100%;height:auto}
.kode-penyiapan{display:block;padding:11px 14px;background:var(--latar);border-radius:10px;font:600 15px/1.5 ui-monospace,Consolas,monospace;word-break:break-word;color:var(--navy)}
.daftar-cadangan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px}
.daftar-cadangan li{padding:12px;text-align:center;background:var(--latar);border-radius:10px;font:700 15px/1.2 ui-monospace,Consolas,monospace;color:var(--navy)}
.kepala-akun{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,32px);background:#fff;border-bottom:1px solid #dfe5ef}
.merek-akun{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:20px;color:var(--navy)}.merek-akun em{font-style:normal;color:#0f6b32;margin-left:-10px}.merek-akun img{border-radius:9px}
.isi-akun{max-width:900px;margin:0 auto;padding:clamp(28px,5vw,48px) clamp(16px,4vw,32px)}
.catatan-akun{margin-top:24px;padding:18px 20px;background:#fff;border:1px solid #dfe5ef;border-radius:14px}
@media print{body{background:#fff}.jangan-cetak{display:none!important}.kartu{box-shadow:none;max-width:none}.tengah{display:block;min-height:0;padding:0}}