/* SPMB At Tasfiyah — gaya dasar (tanpa build step) */
:root {
  --navy: #12305F;
  --blue: #1D4A9E;
  --blue-soft: #EEF2FA;
  --gold: #E8A928;
  --gold-soft: #FBF1D9;
  --gold-text: #8A6100;
  --green: #1F7A4D;
  --green-soft: #E3F3EA;
  --red: #A3361F;
  --red-soft: #FCE8E3;
  --ink: #1B2333;
  --muted: #5B6475;
  --line: #E8E2D4;
  --line-strong: #CFC7B5;
  --cream: #FBF8F1;
  --white: #fff;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--blue); }
a:hover { color: var(--navy); }
img { max-width: 100%; }

.wrap { max-width: 520px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--cream); }
@media (min-width: 560px) { .wrap { box-shadow: 0 0 0 1px var(--line); } }

/* Header */
.hdr { position: sticky; top: 0; z-index: 10; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr img { width: 36px; height: 39px; object-fit: contain; }
.hdr-title { display: flex; flex-direction: column; flex: 1; line-height: 1.25; text-decoration: none; }
.hdr-title b { font-size: 15px; font-weight: 800; color: var(--navy); }
.hdr-title span { font-size: 12px; color: var(--muted); }

main { flex: 1; padding: 20px 16px 120px; display: flex; flex-direction: column; gap: 18px; }

/* Bottom action bar */
.foot { position: sticky; bottom: 0; z-index: 9; padding: 12px 16px 16px; background: var(--white); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.foot-row { display: flex; gap: 10px; }
.foot-row > * { flex: 1; }

/* Type */
.h1 { font-size: 24px; font-weight: 800; line-height: 1.25; margin: 0; color: var(--navy); }
.h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--navy); }
.h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--navy); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.muted { font-size: 14px; color: var(--muted); margin: 0; }
.hint { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack-lg { display: flex; flex-direction: column; gap: 12px; }

/* Buttons */
.btn { min-height: 50px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; width: 100%; }
.btn-gold { background: var(--gold); color: #1A2238; }
.btn-gold:hover { background: #D99A1C; color: #1A2238; }
.btn-navy { background: var(--blue); color: var(--white); }
.btn-navy:hover { background: var(--navy); color: var(--white); }
.btn-line { background: var(--white); color: var(--blue); border: 1.5px solid var(--blue); }
.btn-ghost { background: transparent; color: var(--blue); min-height: 44px; }
.btn-sm { min-height: 40px; font-size: 13px; width: auto; border-radius: 10px; }
.btn:focus-visible, .chip input:focus-visible + span, .inp:focus-visible { outline: 3px solid rgba(29, 74, 158, .35); outline-offset: 2px; }

/* Forms */
.fld { display: flex; flex-direction: column; gap: 8px; }
.lbl { font-size: 14px; font-weight: 600; color: var(--ink); }
.opt-tag { font-weight: 500; color: #6B7280; }
.inp { height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; background: var(--white); color: var(--ink); width: 100%; }
.inp:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
textarea.inp { height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.inp.is-invalid { border-color: var(--red); background: #FFFBFA; }
.err { font-size: 13px; color: var(--red); font-weight: 600; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
.unit { position: relative; }
.unit .inp { padding-right: 40px; }
.unit span { position: absolute; right: 12px; top: 14px; font-size: 13px; color: var(--muted); pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chips (radio) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
.chip input:checked + span { background: var(--blue); color: var(--white); border-color: var(--blue); font-weight: 600; }

/* Cards & info */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.info { border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; background: var(--blue-soft); color: #1B3566; }
.info svg { flex: none; margin-top: 1px; }
.info-gold { background: var(--gold-soft); color: #5E4300; }
.info-green { background: var(--green-soft); color: #17603C; }
.info-red { background: var(--red-soft); color: #7A2414; }

.hero { background: var(--navy); border-radius: 18px; padding: 22px 18px; color: var(--white); display: flex; flex-direction: column; gap: 10px; }
.hero h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; }
.hero p { margin: 0; font-size: 14px; color: #D6E0F5; }
.badge { align-self: flex-start; background: var(--gold); color: #1A2238; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }

.step { display: flex; gap: 12px; align-items: flex-start; }
.num { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.num.ok { background: var(--green); color: var(--white); }

/* Progress segments */
.segs { display: grid; gap: 4px; }
.seg { height: 6px; border-radius: 3px; background: #E3DCCB; }
.seg.on { background: var(--gold); }

/* Dashboard */
.welcome { background: var(--navy); color: var(--white); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.welcome small { font-size: 13px; color: #D6E0F5; }
.sec { width: 100%; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.sec:hover { border-color: var(--blue); color: var(--ink); }
.sec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sec-body b { font-size: 15px; color: var(--navy); }
.sec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill-ok { background: var(--green-soft); color: #17603C; }
.pill-todo { background: #F3EEE2; color: #6B5B33; }
.pill-wip { background: var(--gold-soft); color: #6B4C00; }

/* Section progress header */
.sechead { background: var(--white); padding: 12px 16px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; position: sticky; top: 60px; z-index: 8; }

/* Nomor */
.nomor-card { align-items: center; text-align: center; gap: 6px; border: 1.5px dashed var(--gold); background: #FFFBF1; }
.nomor { font-size: 26px; font-weight: 800; letter-spacing: .02em; color: var(--navy); }
.done-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* Timeline */
.tl { display: flex; gap: 12px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--white); border: 1.5px solid var(--line-strong); color: #6B7280; }
.tl-dot.done { background: var(--green); border-color: var(--green); color: var(--white); }
.tl-dot.now { background: var(--gold); border-color: var(--gold); color: #1A2238; }
.tl-line { width: 2px; flex: 1; min-height: 22px; background: #E3DCCB; }
.tl-body { display: flex; flex-direction: column; gap: 3px; padding: 5px 0 18px; flex: 1; }
.tl-body b { font-size: 15px; color: var(--navy); }

/* Tombol WhatsApp di header */
.hdr-wa { width: 40px; height: 40px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
.hdr-wa:hover { background: var(--green); color: var(--white); }

/* (lama) Floating WhatsApp */
.wa { position: fixed; right: max(16px, calc(50vw - 244px)); bottom: 96px; width: 52px; height: 52px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(18, 48, 95, .25); z-index: 20; }
.wa:hover { color: var(--white); background: #17603C; }

[hidden] { display: none !important; }

/* Kotak centang */
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; padding: 4px 0; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); flex: none; }

/* Unggah berkas */
.inp-file { width: 100%; font: inherit; font-size: 14px; color: var(--muted); padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: var(--cream); }
.inp-file::file-selector-button { font: inherit; font-weight: 700; border: 0; border-radius: 8px; padding: 8px 14px; margin-right: 10px; background: var(--blue); color: var(--white); cursor: pointer; }
.inp-file.is-invalid { border-color: var(--red); }

/* Rincian biaya */
.fee { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-bottom: 1px dashed #E3DCCB; }
.fee small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.fee b { white-space: nowrap; }
.total { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }