/* === Premium Theme Upgrade (tanpa ubah HTML) === */
:root{
  --bg1:#0b1220;
  --bg2:#0f1629;
  --ink:#e6eef9;
  --muted:#9fb1d1;
  --pri:#5ba8ff;
  --pri2:#67e8f9;
  --ok:#16c47f;
  --warn:#f59e0b;
  --err:#ef4444;
  --radius:22px;
  --shadow-lg:0 18px 50px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --shadow-md:0 10px 30px rgba(0,0,0,.25), 0 1px 8px rgba(0,0,0,.18);
  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
}

/* Latar global */
body{
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(91,168,255,.18), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(103,232,249,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    linear-gradient(120deg,#0b1220,#0f1629 70%);
  margin:0;
}

/* Card utama */
.box,.card,.wrap{
  border-radius: var(--radius) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border:1px solid var(--stroke) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--ink);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* highlight */
.box::before,.card::before,.wrap::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(600px 200px at -10% -20%, rgba(255,255,255,.18), transparent 40%),
              radial-gradient(600px 200px at 110% -10%, rgba(255,255,255,.10), transparent 50%);
  pointer-events:none;
}

/* Heading */
h1, h2, h3{
  color:#eaf3ff !important;
  letter-spacing:.2px;
  text-shadow: 0 4px 20px rgba(0,0,0,.35);
  text-align:center;
}

/* Label & teks kecil */
label,.label,.note,.syarat,.hint,.msg,.desc,.brand, footer, .ft, .vol-time{
  color: var(--muted) !important;
}

/* Input & Select */
input[type="text"], input[type="email"], select{
  background: rgba(255,255,255,.06) !important;
  color: #eaf3ff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: .18s ease;
}
input::placeholder{ color:#bcd0ea !important; }
select option{ color:#0b1220; }

input:focus, select:focus{
  outline: none;
  border-color: rgba(103,232,249,.55) !important;
  box-shadow: 0 0 0 3px rgba(103,232,249,.20), 0 6px 20px rgba(0,0,0,.25);
}

/* Checkbox */
.checkline input[type="checkbox"]{
  accent-color: var(--pri);
  box-shadow: 0 0 0 2px rgba(103,232,249,.25);
}

/* Tombol */
button, .btn, .btnwa, .button-home{
  background: linear-gradient(135deg, var(--pri), var(--pri2)) !important;
  color:#07101f !important; font-weight:800 !important;
  border:none !important; border-radius:14px !important;
  box-shadow: var(--shadow-md) !important;
  letter-spacing:.2px; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover, .btn:hover, .btnwa:hover, .button-home:hover{
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.05);
}
button[disabled]{ background: #a9b8c5 !important; color:#1b263b !important; box-shadow:none !important }

/* Chip nominal harga */
.nominal{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  color:#fff !important;
  font-size: 1.4em;
  font-weight: 800;
  padding: 10px 16px;
  border:1px solid rgba(123,176,255,.35) !important;
  text-shadow: 0 2px 10px rgba(20,60,140,.45);
  text-align: center;
}

/* Rekap blok */
.rekap{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#dbe9ff !important;
}

/* Gambar QRIS */
img.qris{
  border-radius: 18px !important;
  border:1.5px solid rgba(123,176,255,.45) !important;
  box-shadow: 0 10px 30px rgba(40,80,160,.35) !important;
}

/* State sukses */
.success{
  background: linear-gradient(180deg, rgba(22,196,127,.20), rgba(22,196,127,.10)) !important;
  border:1px solid rgba(22,196,127,.35) !important;
  color:#d9ffe9 !important;
}

/* Footer */
footer, .ft{
  border-top:1px solid var(--stroke) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
}

/* Animasi */
@media (prefers-reduced-motion:no-preference){
  .box,.card,.wrap{ animation: rise .35s ease both }
  @keyframes rise{ from{ opacity:0; transform:translateY(8px) scale(.995) } to{ opacity:1; transform:none } }
}

/* Kontras fix */
body, p, a {
  color: var(--ink) !important;
}
a { text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.25); }
a:hover { border-bottom-color: rgba(255,255,255,.5); }
input, select, textarea { caret-color: #e6eef9 !important; color:#e6eef9 !important; }
::selection { background:#205eaa; color:#fff; }

/* === HOTFIX: Form compact & center === */
body:has(.box), body:has(.card){
  display:flex; justify-content:center; align-items:flex-start;
  min-height:100vh; margin:0; padding:32px 12px;
}
.box, .card{
  max-width: 440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 26px 22px !important;
  border-radius: 20px !important;
  box-sizing: border-box;
}
form{ display:flex; flex-direction:column; gap:12px; }
label{ font-weight:600; margin:4px 0 2px; }
input[type="text"], input[type="email"], select{
  height:44px; border-radius:10px !important;
}
.checkline{ gap:10px; align-items:center; }
button{ height:48px; border-radius:12px !important; font-weight:800; }
.box *{ max-width:100%; }