:root{--ink-900:#0A0A0F;--ink-700:#1C1C28;--ink-500:#4B4B63;--ink-300:#8E8EA8;--ink-100:#E8E8F0;--ink-050:#F4F4F8;--white:#FFFFFF;--violet:#4F3EF5;--violet-lt:#EEECFF;--amber:#D97A28;--amber-lt:#FDF1E7;--sage:#1B7B4B;--sage-lt:#EAF4EF;--s1:0 1px 3px rgba(10,10,15,.06);--s2:0 3px 12px rgba(10,10,15,.08);--max:680px;--r-s:10px;--r-m:16px;--r-l:20px;--r-xl:26px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-family:'Inter',system-ui,sans-serif;background:var(--ink-050);color:var(--ink-700);-webkit-font-smoothing:antialiased;font-size:15px}
body{min-height:100dvh;padding-bottom:110px}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.page{max-width:var(--max);margin:0 auto;padding:0 18px}
.ap{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.ap.in{opacity:1;transform:none}
/* TOPBAR */
.topbar{position:sticky;top:0;z-index:50;background:rgba(250,250,252,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--ink-100)}
.tb{max-width:var(--max);margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:10px}
.back-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--ink-100);background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--ink-500);flex-shrink:0;box-shadow:var(--s1);transition:all .18s}
.back-btn:hover{border-color:var(--violet);color:var(--violet)}
.tb-title{font-size:15px;font-weight:700;color:var(--ink-900);flex:1}
main{padding-top:20px}
section{margin-bottom:20px}
.cc{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-l);padding:18px;box-shadow:var(--s1)}
.sec-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-300);margin-bottom:12px}
/* PROG SUMMARY */
.prog-sum{display:flex;gap:12px;align-items:center}
.prog-sum-img{width:72px;height:60px;border-radius:var(--r-m);overflow:hidden;flex-shrink:0}
.prog-sum-img img{width:100%;height:100%;object-fit:cover}
.prog-sum-info{flex:1;min-width:0}
.prog-sum-cat{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-300)}
.prog-sum-title{font-size:13px;font-weight:700;color:var(--ink-900);margin:3px 0 4px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-sum-pct{font-size:11px;color:var(--sage);font-weight:600}
.prog-track{height:3px;background:var(--ink-100);border-radius:99px;overflow:hidden;margin-top:5px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--sage),#34C76B);border-radius:99px}
/* NOMINAL CHIPS */
.nom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.nom-chip{padding:10px 6px;border:1.5px solid var(--ink-100);border-radius:var(--r-m);background:var(--white);text-align:center;cursor:pointer;transition:all .18s;font-family:inherit}
.nom-chip:hover{border-color:var(--sage);background:var(--sage-lt)}
.nom-chip.on{border-color:var(--sage);background:var(--sage-lt)}
.nom-chip .nc-amt{font-size:13px;font-weight:700;color:var(--ink-700);display:block}
.nom-chip.on .nc-amt{color:var(--sage)}
.nom-chip .nc-unit{font-size:9px;color:var(--ink-300);margin-top:2px;display:block}
.nom-chip.on .nc-unit{color:var(--sage)}
/* CUSTOM NOMINAL */
.inp-wrap{position:relative;margin-bottom:0}
.inp-prefix{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:var(--ink-500);pointer-events:none}
.inp{width:100%;border:1.5px solid var(--ink-100);border-radius:var(--r-m);padding:11px 13px 11px 40px;font-size:14px;font-weight:600;color:var(--ink-700);background:var(--ink-050);font-family:inherit;outline:none;transition:border-color .18s}
.inp:focus{border-color:var(--sage);background:var(--white)}
/* ANONIM TOGGLE */
.anon-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ink-100)}
.anon-info{font-size:13px;font-weight:500;color:var(--ink-700)}
.anon-sub{font-size:11px;color:var(--ink-300);margin-top:2px}
.toggle{width:40px;height:22px;border-radius:99px;background:var(--ink-100);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;border:none}
.toggle.on{background:var(--sage)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.toggle.on::after{transform:translateX(18px)}
/* NAMA FIELD */
.field-group{margin-top:14px}
.field-lbl{font-size:12px;font-weight:500;color:var(--ink-500);margin-bottom:6px;display:block}
.inp-plain{width:100%;border:1.5px solid var(--ink-100);border-radius:var(--r-m);padding:11px 13px;font-size:14px;color:var(--ink-700);background:var(--ink-050);font-family:inherit;outline:none;transition:border-color .18s}
.inp-plain:focus{border-color:var(--sage);background:var(--white)}
textarea.inp-plain{resize:none;min-height:80px;line-height:1.55;font-size:13px}
/* METODE BAYAR */
.pay-list{display:flex;flex-direction:column;gap:8px}
.pay-item{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--ink-100);border-radius:var(--r-l);cursor:pointer;transition:all .18s;background:var(--white)}
.pay-item:hover{border-color:var(--sage);background:var(--sage-lt)}
.pay-item.on{border-color:var(--sage);background:var(--sage-lt)}
.pay-ico{width:36px;height:36px;border-radius:10px;background:var(--ink-050);display:flex;align-items:center;justify-content:center;color:var(--ink-500);flex-shrink:0;font-size:16px;transition:all .18s}
.pay-item.on .pay-ico{background:var(--sage);color:white}
.pay-info{flex:1}
.pay-name{font-size:13px;font-weight:600;color:var(--ink-700)}
.pay-desc{font-size:11px;color:var(--ink-300);margin-top:2px}
.pay-item.on .pay-name{color:var(--sage)}
.pay-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-100);flex-shrink:0;transition:all .18s;position:relative}
.pay-item.on .pay-radio{border-color:var(--sage);background:var(--sage)}
.pay-item.on .pay-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:white}
/* RINGKASAN */
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--ink-100)}
.sum-row:last-child{border-bottom:none}
.sum-lbl{font-size:12px;color:var(--ink-500)}
.sum-val{font-size:12px;font-weight:600;color:var(--ink-700)}
.sum-total-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0 0}
.sum-total-lbl{font-size:13px;font-weight:600;color:var(--ink-700)}
.sum-total-val{font-size:16px;font-weight:700;color:var(--sage);letter-spacing:-.3px}
/* STICKY CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:90;padding:14px 18px;background:rgba(250,250,252,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--ink-100)}
.sticky-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:8px}
.sticky-summary{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.ss-lbl{color:var(--ink-300)}
.ss-val{font-weight:700;color:var(--sage);font-size:14px}
.cta-btn{width:100%;padding:14px;background:var(--sage);color:white;font-size:14px;font-weight:600;border-radius:var(--r-l);border:none;cursor:pointer;font-family:inherit;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px}
.cta-btn:hover{background:var(--ink-900);transform:translateY(-1px)}
.cta-btn:disabled{opacity:.5;pointer-events:none;cursor:default}
/* SUKSES OVERLAY */
.sukses{position:fixed;inset:0;z-index:200;background:rgba(10,10,15,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.sukses.show{opacity:1;pointer-events:all}
.sukses-sheet{background:var(--white);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:28px 24px 44px;max-width:var(--max);width:100%;transform:translateY(60px);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sukses.show .sukses-sheet{transform:none}
.sukses-ico{width:60px;height:60px;border-radius:50%;background:var(--sage-lt);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--sage)}
.sukses-title{text-align:center;font-size:18px;font-weight:700;color:var(--ink-900);margin-bottom:6px}
.sukses-sub{text-align:center;font-size:13px;color:var(--ink-500);line-height:1.6;margin-bottom:20px}
.sukses-info{background:var(--ink-050);border-radius:var(--r-m);padding:14px;margin-bottom:20px}
.sukses-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--ink-100)}
.sukses-row:last-child{border-bottom:none}
.sukses-row-lbl{color:var(--ink-300)}
.sukses-row-val{font-weight:600;color:var(--ink-700)}
.sukses-btn{width:100%;padding:13px;background:var(--sage);color:white;font-size:13px;font-weight:600;border-radius:var(--r-l);border:none;cursor:pointer;font-family:inherit}