@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');:root{--navy:#182441;--navy2:#101a30;--blue:#1558ed;--purple:#3823da;--orange:#ff7410;--line:#dce3ef;--ink:#101d3a;--muted:#6d7d9d;--bg:#f8faff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:14px/1.45 Inter,'Segoe UI',Arial,sans-serif}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{display:flex;min-height:100vh}.side{width:205px;flex:none;background:linear-gradient(160deg,var(--navy),var(--navy2));color:#eef1ff;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.sidebrand{height:84px;display:flex;align-items:center;gap:11px;padding:16px 17px}.logo{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;color:white;background:linear-gradient(135deg,#2420c9,#6650f3);border:3px solid white;font-size:19px;font-weight:800;box-shadow:0 1px 5px #0002}.sidebrand b{display:block;font-size:20px;letter-spacing:-.5px}.sidebrand small{display:block;font-size:11px}.sidenav{padding:6px 8px;display:grid;gap:5px}.sidenav a{display:flex;gap:12px;align-items:center;padding:12px 13px;border-radius:5px;font-weight:600;font-size:13px}.sidenav a:hover,.sidenav a.on{background:#e1dcff;color:#3021bc}.navico{width:19px;text-align:center;font-size:17px}.sidebottom{margin-top:auto;padding:20px 15px;color:#aebbd7;font-size:11px;border-top:1px solid #394665}.sidebottom small{font-size:10px}.work{flex:1;min-width:0;background:#fff}.topbar{height:72px;border-bottom:1px solid #e5e8f1;display:flex;justify-content:space-between;align-items:center;padding:0 29px;background:#fff}.crumb{font-size:12px;font-weight:700;color:#536583}.crumb span{padding:0 10px;color:#a7b2c9}.who{display:flex;gap:8px;align-items:center;font-size:12px}.userico{color:#0b1840;font-size:22px}.page{width:min(960px,calc(100% - 56px));margin:0 auto;padding:30px 0 54px}.page>h1{font-size:25px;letter-spacing:-.6px;margin:0 0 17px;font-weight:800}.panel{border:1px solid #dfe4ee;border-radius:10px;background:white;padding:20px 22px;margin-bottom:16px;box-shadow:0 2px 6px #15274a0b}.panel h2{font-size:16px;margin:0 0 14px;font-weight:800}.muted{color:var(--muted)}.welcome{background:linear-gradient(100deg,#e4edff,#f2f6ff);border-radius:9px;padding:20px 24px;display:flex;align-items:center;gap:20px;margin-bottom:20px}.welcome h2{font-size:23px;margin:2px 0}.welcome span{font-size:12px}.bigavatar{background:#d0e1ff;border-radius:50%;height:77px;width:77px;display:grid;place-items:center;color:#113d9d;font-size:55px;line-height:1}.timeline{display:grid;grid-template-columns:repeat(5,1fr);position:relative;padding:14px 0 5px;gap:4px}.timeline:before{content:'';position:absolute;left:10%;right:10%;top:33px;height:2px;background:#d7dfea}.tstep{z-index:1;text-align:center}.tdot{width:39px;height:39px;margin:0 auto 10px;border-radius:50%;background:#aebad0;color:white;display:grid;place-items:center;font-weight:800;border:4px solid #fff;box-shadow:0 0 0 1px #d8e0ed}.tstep.current .tdot{background:#2367ed;box-shadow:0 0 0 5px #dce8ff}.tstep.done .tdot{background:#0db56e}.tstep b{display:block;font-size:12px}.tstep small{font-size:11px;color:var(--muted);display:block}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.activity{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid #edf0f7}.activity:last-child{border:0}.activity b{font-size:12px;display:block}.activity small{font-size:11px;color:var(--muted);display:block;margin-top:4px}.act{height:25px;width:25px;flex:none;border-radius:50%;display:grid;place-items:center;color:white}.act.green{background:#09ac72}.act.blue{background:#2673ff}.act.grey{background:#b1bdd0}.announcements{background:linear-gradient(#fff,#fff0f0)}.announcements h2{color:#ef2935}.announcements>div{border-bottom:1px solid #f1d9dd;padding:9px 0}.announcements small{color:#697995}.announcements p{margin:3px 0;font-size:12px}.regsteps{display:flex;align-items:center;justify-content:center;gap:15px;margin:6px 0 23px;flex-wrap:wrap}.regstep{color:#4c5f87;font-weight:600;font-size:12px}.regstep.active{color:#f96a0c}.regstep.grey{color:#9faac0}.registration{max-width:680px;margin:0 auto}.formfields{display:grid;gap:13px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:block;font-size:12px;font-weight:700;margin:0 0 14px}label input,label select,label textarea{display:block;width:100%;margin-top:6px;border:1px solid #d7dfed;border-radius:6px;background:#fff;padding:11px 12px;outline-color:#4e41e4;color:#273854;font-size:13px}label input[readonly]{background:#f4f6fa;color:#65728c}em{color:#ed2535;font-style:normal}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:6px;border:1px solid transparent;font-weight:700;font-size:12px;min-height:42px}.btn.primary{background:linear-gradient(95deg,#4931e9,#3320cf);color:white}.btn.light{border-color:#aab8d7;color:#273a65;background:#fff}.btn:disabled{background:#b5c1d4;color:#fff;cursor:not-allowed}.btn.full{width:100%}.formactions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}.hint{font-size:11px;color:#b66b25;margin-top:13px}.pillwarning{display:inline-block;border:1px solid #ffdb98;background:#fff5e3;color:#9d5800;padding:7px 11px;border-radius:22px;font-size:11px;font-weight:800;margin-bottom:15px}.paymentpanel{max-width:730px}.methods{display:grid;grid-template-columns:1fr 1fr;gap:13px}.method{background:#f0f5ff;border:1px solid #cddcf9;border-radius:8px;padding:25px 12px;display:grid;justify-items:center;gap:5px;color:#0c2868}.method span{font-size:35px}.method b{font-size:13px}.method small{font-size:11px}.method.selected{border:2px solid #4b50f5;background:#e7edff}.hidden{display:none!important}.uploadzone{border:1px dashed #8ca9ff;border-radius:7px;background:#fafcff;text-align:center;padding:22px;position:relative;margin:12px 0 15px;display:grid;justify-items:center;gap:5px}.uploadzone .cloud{font-size:32px;color:#526fe3}.uploadzone b{font-size:12px}.uploadzone small{font-size:11px;color:var(--muted)}.uploadzone input{font-size:11px;margin-top:5px;max-width:100%}.notice{padding:14px;border-radius:8px;background:#fff7e8;color:#9a611d;font-size:12px;margin-top:14px}.notice a,.textlink{color:#3528d6;font-weight:700}.softnotice{background:#eff4ff;padding:13px;border-radius:7px;font-size:12px;color:#566f9d;margin-bottom:18px}.subpanel{border:1px solid #e0e7f0;padding:15px;border-radius:9px;margin:12px 0}.docgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.doc{border:1px solid #dce4ef;border-radius:8px;padding:12px}.dochead{display:flex;gap:9px;align-items:center;margin-bottom:12px}.dochead b{font-size:12px;display:block}.dochead small{font-size:10px;color:#6c7891}.docicon{display:grid;place-items:center;background:#e5edff;color:#1454d5;width:34px;height:34px;border-radius:6px;font-size:22px}.drop{border:1px dashed #a6bff0;background:#f7faff;border-radius:6px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:#234dba}.drop>span:first-child{font-size:29px}.drop>span:nth-child(2){font-size:11px}.drop input{width:90%;font-size:10px;margin:6px 0}.summaryrow{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #edf0f5;gap:10px}.summaryrow span{color:#6b7d9c}.summaryrow b{text-align:right}.home{min-height:100vh;background:#5a8cbb}.homehead{height:70px;position:relative;z-index:1;max-width:1400px;margin:0 auto;background:#fff;border-radius:0 0 9px 9px;display:flex;align-items:center;justify-content:space-between;padding:0 35px;box-shadow:0 3px 14px #09265c1c}.homebrand{display:flex;align-items:center;gap:11px}.homebrand strong{display:block;color:#101d60;font-size:19px}.homebrand small{display:block;color:#1e2b74;font-size:10px}.homehead nav{display:flex;gap:22px;font-size:12px;font-weight:700;color:#14225c}.homebuttons{display:flex;gap:8px}.homebuttons a{font-size:12px;font-weight:700;padding:9px 17px;border-radius:5px}.homebuttons .outline{border:1px solid #9d9cef;color:#1c1d9e}.homebuttons .solid{background:#4232d5;color:white}.homehero{min-height:calc(100vh - 100px);background:linear-gradient(90deg,rgba(26,87,154,.85) 0%,rgba(43,113,182,.78) 37%,rgba(35,97,155,.06) 79%),url('kampus-hero.jpg') center right/cover no-repeat;display:flex;align-items:center}.herotext{color:white;padding:60px clamp(25px,6vw,110px);width:min(650px,80%)}.herotext h1{font-size:clamp(30px,3.6vw,52px);line-height:1.18;margin:0 0 8px}.herotext h2{font-size:clamp(17px,1.7vw,24px);margin:0 0 10px}.herotext p{font-size:16px;max-width:440px}.benefits{display:flex;gap:26px;margin:30px 0 42px}.benefits>div{display:grid;justify-items:center;gap:8px;font-size:12px}.benefits span{width:47px;height:47px;background:white;color:#3b2de0;border-radius:50%;display:grid;place-items:center;font-size:26px}.heroactions{display:flex;gap:14px}.heroactions a{padding:16px 28px;border-radius:6px;font-weight:800;font-size:13px}.heroactions .orange{background:#ff790a;color:white}.heroactions .white{background:#fff;color:#0b1a3b}.homefooter{text-align:center;color:white;padding:10px;font-size:11px;background:#244978}@media(max-width:820px){.side{width:66px}.sidebrand{justify-content:center;padding:8px}.sidebrand span:last-child,.sidenav a span:last-child,.sidebottom{display:none}.sidenav a{justify-content:center;padding:12px 5px}.page{width:calc(100% - 30px)}.topbar{padding:0 15px}.two{grid-template-columns:1fr}.homehead nav{display:none}.homehead{padding:0 16px}}@media(max-width:550px){.page{padding-top:18px}.page>h1{font-size:21px}.panel{padding:15px}.formgrid,.docgrid{grid-template-columns:1fr}.timeline{gap:1px}.tdot{width:30px;height:30px}.timeline:before{top:28px}.tstep b{font-size:9px}.tstep small{font-size:9px}.homehero{background-position:65% center}.herotext{width:100%;padding:50px 22px;background:#13468180}.benefits{gap:13px}.heroactions a{padding:13px 18px}.who{font-size:10px}.crumb{display:none}}
/* MOCKUP 2026: visual matching layer */
:root{--navy:#18223b;--navy2:#17233d;--blue:#1b5cf0;--purple:#3420d5;--ink:#0c1734;--bg:#fff}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px;background:#fff}
.side{width:186px;background:linear-gradient(165deg,#1b2642,#19243b);box-shadow:1px 0 0 #d9dfeb}
.sidebrand{height:74px;padding:12px 13px}
.sidebrand b{font-size:19px}.sidebrand small{font-size:10px}
.logo{background:linear-gradient(135deg,#2712b8,#4c43dc);font-size:18px;width:35px;height:35px}
.sidenav{padding:4px 8px;gap:3px}
.sidenav a{padding:11px 10px;border-radius:4px;font-size:12px}
.sidenav a.on{background:linear-gradient(90deg,#f0eaff,#d9d2ff);color:#2213be}
.topbar{height:54px;padding:0 24px}.crumb{color:#a1abc0;font-weight:500}
.page{width:min(790px,calc(100% - 54px));padding:24px 0 42px}
.page>h1{font-size:24px;margin-bottom:16px}
.panel{padding:18px 19px;border-radius:9px;box-shadow:0 2px 5px #101d3a08}
.panel h2{font-size:15px}
.registration{max-width:660px;border:0;box-shadow:none;padding:0 12px}
.registration .formfields{gap:5px}
.registration label{margin-bottom:7px}
.registration label input,.registration label select,.registration label textarea{padding:9px 11px;margin-top:4px;border-radius:5px}
.regsteps{gap:10px;margin:0 0 25px;justify-content:flex-start}
.regstep{display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap}
.regstep i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font-size:12px;background:#245cf1;color:white;font-style:normal}
.regstep.active i{background:#ff7210}
.regstep.grey i{background:#cbd3e2;color:white}
.stepdash{width:24px;height:2px;background:#d8e0ee}
.formactions{margin-top:16px}
.btn{min-height:38px;padding:9px 16px}
.welcome{padding:18px 20px;margin-bottom:15px}
.welcome h2{font-size:22px}
.bigavatar{height:72px;width:72px;font-size:45px}
.timeline{padding-top:13px}
.timeline:before{top:32px}
.tstep b{font-size:11px}
.tstep small{font-size:10px}
.paymentpanel{max-width:790px}
.methods .method{min-height:115px}
.method span{font-size:32px}
.docgrid{gap:12px}
.doc{padding:11px}
.drop{min-height:105px}
.homehead{max-width:none;margin:8px 14px 0;border-radius:8px;height:57px}
.homehero{min-height:calc(100vh - 95px);background-position:center right}
.herotext{padding-left:clamp(24px,5vw,80px)}
.herotext h1{font-size:clamp(32px,3.2vw,48px)}
@media(min-width:1150px){.page{width:min(790px,calc(100% - 120px))}}
@media(max-width:820px){.side{width:62px}.page{width:calc(100% - 32px)}}
@media(max-width:550px){.registration{padding:0}.regsteps{gap:5px}.regstep{font-size:9px}.stepdash{width:12px}.regstep i{width:20px;height:20px}}

.region-error{padding:10px 12px;background:#fff1ec;color:#b13b1e;border:1px solid #ffccba;border-radius:6px;font-size:12px;line-height:1.5;margin:5px 0 12px}
.region-error.hidden{display:none}
select:disabled{background:#f0f2f7!important;color:#8992a6;cursor:not-allowed}

/* Ikon pembayaran presisi: SVG, tanpa ketergantungan font simbol */
.paymentpanel .methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:15px}
.paymentpanel .method{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:128px;gap:7px;padding:18px 12px;border:1px solid #cfddfa;border-radius:8px;background:#edf3ff;color:#102b77;transition:background .15s,border-color .15s}
.paymentpanel .method:hover{background:#e6eeff;border-color:#9bb6f8}
.paymentpanel .method.selected{border:2px solid #4c4aff;background:#e7edff;padding:17px 11px}
.paymentpanel .payment-method-icon{display:block;width:37px;height:37px;flex:none;color:#102d80}
.paymentpanel .method b{font-size:13px;font-weight:700}
.paymentpanel .method small{font-size:11px;color:#1e3a78;text-align:center}
.paymentpanel .qris-unavailable-icon{display:flex;justify-content:center;margin-bottom:12px;color:#7438ec}
.paymentpanel .qris-unavailable-icon .payment-method-icon{width:44px;height:44px;color:#7438ec}
@media(max-width:420px){.paymentpanel .method{min-height:112px;padding:14px 6px}.paymentpanel .method.selected{padding:13px 5px}.paymentpanel .payment-method-icon{width:31px;height:31px}}