:root{
  --bg:#fff; --fg:#1a1d22; --muted:#667085; --line:#e2e6ec;
  --accent:#2f6fed; --ok:#1b845a; --bad:#c0392b; --card:#f8fafc;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f1115; --fg:#e6e8ec; --muted:#9aa3b2; --line:#2a2f3a;
    --accent:#6ea8fe; --ok:#4ade80; --bad:#f87171; --card:#161a21;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

main{max-width:26rem; margin:0 auto; padding:9vh 1.5rem 5rem}
main.lebar{max-width:40rem}

.brand{font-size:1.5rem; font-weight:700; letter-spacing:-.02em}
.brand a{color:inherit; text-decoration:none}
.tagline{color:var(--accent); font-size:.9rem; font-weight:500; margin-left:.4rem}
h1{font-size:1.5rem; margin:1.8rem 0 .3rem; letter-spacing:-.01em}
.sub{color:var(--muted); font-size:.92rem; margin:0 0 1.8rem}

label{display:block; font-size:.85rem; color:var(--muted); margin:1rem 0 .35rem}
input{
  width:100%; padding:.6rem .75rem; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--fg); font:inherit;
}
input:focus{outline:2px solid var(--accent); outline-offset:-1px}
button{
  font:inherit; cursor:pointer; border-radius:8px; border:1px solid transparent;
  padding:.6rem 1.1rem; background:var(--accent); color:#fff; font-weight:600;
}
button:disabled{opacity:.55; cursor:default}
button.blok{width:100%; margin-top:1.5rem}
button.ghost{background:transparent; color:var(--fg); border-color:var(--line); font-weight:500}
button.kecil{padding:.4rem .8rem; font-size:.85rem}

.pesan{
  margin:1.1rem 0 0; padding:.65rem .8rem; border-radius:8px; font-size:.88rem; line-height:1.5;
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);
}
.pesan.baik{
  background:color-mix(in srgb, var(--ok) 12%, transparent);
  color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent);
}
.tautan{margin-top:1.5rem; font-size:.9rem; color:var(--muted)}
.tautan a{color:var(--accent)}

/* --- katalog paket --- */
.paket-list{display:grid; gap:.7rem; margin:1.5rem 0}
.paket{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:1rem 1.1rem; border-radius:11px;
  border:1px solid var(--line); background:var(--card); color:inherit; font:inherit;
}
.paket:hover{border-color:var(--accent)}
.paket-nama{font-weight:600}
.paket-harga{font-size:1.4rem; font-weight:700; margin:.15rem 0; letter-spacing:-.02em}
.paket-per{font-size:.9rem; font-weight:500; color:var(--muted); letter-spacing:0}
.paket-jatah{font-size:.83rem; color:var(--muted)}

/* --- tagihan --- */
.tagihan{text-align:center; margin-top:1.5rem}
.tagihan-paket{color:var(--muted); font-size:.88rem}
/*
 * Nominal sengaja sebesar ini. QRIS-nya statis — angkanya TIDAK ikut di dalam QR,
 * jadi inilah satu-satunya tempat pembayar melihat berapa yang harus diketik.
 */
.tagihan-nominal{font-size:2.3rem; font-weight:700; letter-spacing:-.03em; margin:.15rem 0 .6rem}
.tagihan-catatan{font-size:.85rem; color:var(--muted); line-height:1.55; margin:.5rem 0}
.qr{
  width:100%; max-width:17rem; display:block; margin:1rem auto .4rem;
  background:#fff; border-radius:12px; padding:.5rem;
}
.aksi{display:flex; gap:.5rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap}

.kop{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.kop .spacer{flex:1}
.akun-email{font-size:.85rem; color:var(--muted)}

/* --- tombol Google --- */
.google{margin-top:1.4rem}
#googleBtn{display:flex; justify-content:center; min-height:2.6rem}
.pemisah{
  display:flex; align-items:center; gap:.8rem;
  color:var(--muted); font-size:.82rem; margin:1.3rem 0 .2rem;
}
.pemisah::before,.pemisah::after{
  content:""; flex:1; height:1px; background:var(--line);
}