/* Malaka PPDB — frontend (Fluent style) */
.mppdb{--mp:#0078d4;--tx:#201f1e;--mu:#605e5c;--bd:#e1dfdd;--bg:#faf9f8;--ok:#107c10;--er:#a4262c;--wr:#c27c0e;font-family:"Segoe UI","Segoe UI Web",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--tx);font-size:15px;line-height:1.5;max-width:1100px;margin:0 auto;box-sizing:border-box}
.mppdb *,.mppdb *:before,.mppdb *:after{box-sizing:border-box}
.mppdb-ic{display:inline-block;vertical-align:middle;flex:none}
.mppdb-muted{color:#605e5c}
.mppdb h2,.mppdb h3,.mppdb h4{font-family:inherit;letter-spacing:0;text-transform:none}

/* Hero */
.mppdb-hero{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:10px;background:linear-gradient(135deg,var(--mp),color-mix(in srgb,var(--mp) 70%,#000));color:#fff;margin:0 0 20px;position:relative;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.mppdb .mppdb-hero h2{margin:0!important;font-size:22px;font-weight:600;color:#fff!important;line-height:1.25}
.mppdb .mppdb-hero p{margin:2px 0 0!important;opacity:.92;font-size:14px;color:#fff!important}
.mppdb-hero-ic{width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none}
.mppdb-hero .mppdb-logout{margin-left:auto;color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.mppdb-hero .mppdb-logout:hover{background:rgba(255,255,255,.12);color:#fff}

/* Card */
.mppdb-card{background:#fff;border:1px solid var(--bd,#e1dfdd);border-radius:8px;padding:20px 22px;box-shadow:0 1.6px 3.6px rgba(0,0,0,.06),0 .3px .9px rgba(0,0,0,.05);margin-bottom:18px}
.mppdb-h{font-size:16px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px}

/* Buttons */
.mppdb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--mp);color:#fff!important;border:1px solid var(--mp);border-radius:6px;padding:10px 18px;font-weight:600;font-size:14px;line-height:1.2;font-family:inherit;cursor:pointer;text-decoration:none!important;transition:filter .15s,background .15s;white-space:nowrap}
.mppdb-btn:hover{filter:brightness(.92)}
.mppdb-btn.ghost{background:#fff;color:var(--mp)!important;border-color:#c8c6c4}
.mppdb-btn.ghost:hover{background:#f3f2f1;filter:none}
.mppdb-btn.success{background:#107c10;border-color:#107c10}
.mppdb-btn.wa{background:#25d366;border-color:#25d366}
.mppdb-btn.sm{padding:7px 12px;font-size:13px}
.mppdb-btn.block{width:100%}
.mppdb-btn.disabled{background:#f3f2f1;color:#a19f9d!important;border-color:#e1dfdd;cursor:not-allowed}
.mppdb-btn[disabled]{opacity:.7;cursor:wait}

/* Alerts & badges */
.mppdb-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:6px;margin:0 0 16px;font-size:14px;border-left:4px solid}
.mppdb-alert .mppdb-ic{margin-top:1px}
.mppdb-alert.ok{background:#dff6dd;border-color:#107c10;color:#0b5a0b}
.mppdb-alert.err{background:#fde7e9;border-color:#a4262c;color:#7a1b20}
.mppdb-alert.warn{background:#fff4ce;border-color:#c27c0e;color:#6b4a07}
.mppdb-alert.info{background:#deecf9;border-color:#0078d4;color:#004578}
.mppdb-alert a{color:inherit;font-weight:600}
.mppdb-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle}
.mppdb-state{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:#f3f2f1;color:#605e5c}
.mppdb-state.s-buka{background:#dff6dd;color:#107c10}
.mppdb-state.s-tutup,.mppdb-state.s-penuh{background:#fde7e9;color:#a4262c}
.mppdb-state.s-belum{background:#fff4ce;color:#8a5a00}
.mppdb-jcode{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 8px;border-radius:6px;background:var(--mp,#0078d4);color:#fff;font-weight:700;font-size:14px;letter-spacing:.3px}

/* Guest */
.mppdb-guest{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
.mppdb-auth{padding:0;overflow:hidden}
.mppdb-auth-tabs{display:flex;border-bottom:1px solid #e1dfdd}
.mppdb-auth-tabs button{flex:1;background:#faf9f8;border:0;border-bottom:3px solid transparent;padding:14px;font-weight:600;font-size:15px;font-family:inherit;color:#605e5c;cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center}
.mppdb-auth-tabs button.active{background:#fff;color:var(--mp);border-bottom-color:var(--mp)}
.mppdb-auth-pane{padding:20px 22px}
.mppdb-auth-pane p{margin:0 0 14px;font-size:14px}
.mppdb-row-between{display:flex;justify-content:space-between;align-items:center;margin:4px 0 16px;font-size:14px}
.mppdb-row-between a{color:var(--mp)}
.mppdb-check{display:inline-flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.mppdb-check input{margin-top:3px}
.mppdb-pass{position:relative}
.mppdb-pass input{padding-right:42px!important}
.mppdb-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:#605e5c;cursor:pointer;padding:6px}
.mppdb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.mppdb-steps-info ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mppdb-steps-info li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e1dfdd;border-radius:8px;padding:12px;font-size:14px;margin:0}
.mppdb-steps-info li b{width:26px;height:26px;border-radius:50%;background:var(--mp);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.mppdb-steps-info{margin-top:20px}

/* Jenjang cards */
.mppdb-jcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mppdb-jcard{background:#fff;border:1px solid #e1dfdd;border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1.6px 3.6px rgba(0,0,0,.05);transition:box-shadow .2s,transform .2s}
.mppdb-jcard.open:hover{box-shadow:0 6.4px 14.4px rgba(0,0,0,.1);transform:translateY(-2px)}
.mppdb-jcard.closed{opacity:.8}
.mppdb-jcard-top{display:flex;justify-content:space-between;align-items:center}
.mppdb-jcard h3{margin:8px 0 0;font-size:17px;font-weight:600}
.mppdb-jcard p{margin:0;font-size:13px}
.mppdb-meta{list-style:none;margin:6px 0 10px;padding:0;font-size:13px;color:#484644}
.mppdb-meta li{display:flex;gap:7px;align-items:center;margin:3px 0}
.mppdb-meta .mppdb-ic{color:var(--mp)}
.mppdb-jcard .mppdb-btn{margin-top:auto}
.mppdb-empty{text-align:center;padding:30px;background:#fff;border:1px dashed #c8c6c4;border-radius:8px;color:#605e5c}

/* Fields */
.mppdb-fgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px 16px}
.mppdb-fld{margin-bottom:12px;grid-column:span 6}
.mppdb-fld.w-half{grid-column:span 3}
.mppdb-fld.w-third{grid-column:span 2}
.mppdb-fld label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#323130}
.mppdb-fld .req{color:#a4262c;font-weight:700}
.mppdb-fld input[type=text],.mppdb-fld input[type=email],.mppdb-fld input[type=password],.mppdb-fld input[type=tel],.mppdb-fld input[type=number],.mppdb-fld input[type=date],.mppdb-fld select,.mppdb-fld textarea{width:100%;max-width:100%;border:1px solid #8a8886;border-radius:4px;padding:9px 11px;font-weight:400;font-size:15px;line-height:1.35;font-family:inherit;background:#fff;color:#201f1e;box-shadow:none;min-height:40px;margin:0}
.mppdb-fld textarea{min-height:64px;resize:vertical}
.mppdb-fld input:focus,.mppdb-fld select:focus,.mppdb-fld textarea:focus{outline:0;border-color:var(--mp);box-shadow:0 0 0 1px var(--mp)}
.mppdb-fld.has-err input,.mppdb-fld.has-err select,.mppdb-fld.has-err textarea{border-color:#a4262c;box-shadow:0 0 0 1px #a4262c}
.mppdb-hint{display:block;font-size:12px;color:#605e5c;margin-top:4px}
.mppdb-err{display:block;font-size:12px;color:#a4262c;margin-top:4px;font-weight:600}
.mppdb-radios{display:flex;gap:10px;flex-wrap:wrap}
.mppdb-radio{display:inline-flex!important;align-items:center;gap:8px;border:1px solid #8a8886;border-radius:4px;padding:8px 14px;cursor:pointer;font-weight:400!important;margin:0!important;min-height:40px;background:#fff}
.mppdb-radio input{margin:0;accent-color:var(--mp)}
.mppdb-radio:has(input:checked){border-color:var(--mp);background:color-mix(in srgb,var(--mp) 8%,#fff);color:var(--mp);font-weight:600!important}
.mppdb-fld.has-err .mppdb-radio{border-color:#a4262c}
.mppdb-subh{grid-column:1/-1;font-size:14px;font-weight:600;margin:8px 0 8px!important;padding-bottom:6px;border-bottom:1px solid #edebe9;color:var(--mp)}

/* Wizard */
.mppdb-progress{list-style:none;margin:0 0 22px;padding:0;display:flex;counter-reset:s}
.mppdb-progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12px;color:#605e5c;text-align:center;cursor:pointer;margin:0}
.mppdb-progress li:before{content:"";position:absolute;top:15px;left:-50%;right:50%;height:2px;background:#e1dfdd;z-index:0}
.mppdb-progress li:first-child:before{display:none}
.mppdb-progress .dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid #c8c6c4;display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;z-index:1;font-size:13px}
.mppdb-progress li.done .dot{background:var(--mp);border-color:var(--mp);color:#fff}
.mppdb-progress li.done:before,.mppdb-progress li.active:before{background:var(--mp)}
.mppdb-progress li.active .dot{border-color:var(--mp);color:var(--mp);box-shadow:0 0 0 4px color-mix(in srgb,var(--mp) 18%,transparent)}
.mppdb-progress li.active{color:var(--mp);font-weight:600}
.mppdb-wizard:not(.js) .mppdb-progress{display:none}
.mppdb-wizard.js .mppdb-step{display:none}
.mppdb-wizard.js .mppdb-step.active{display:block;animation:mppdbIn .25s ease}
.mppdb-wizard:not(.js) [data-nav=prev],.mppdb-wizard:not(.js) [data-nav=next],.mppdb-wizard:not(.js) .mppdb-wiz-count{display:none}
.mppdb-wizard:not(.js) .mppdb-step{margin-bottom:24px}
@keyframes mppdbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mppdb-step-title{font-size:18px;font-weight:600;margin:0 0 6px;display:flex;align-items:center;gap:8px;color:#201f1e}
.mppdb-step-title .mppdb-ic{color:var(--mp)}
.mppdb-note{font-size:13px;color:#605e5c;margin:0 0 14px;background:#faf9f8;border-left:3px solid var(--mp);padding:8px 12px;border-radius:0 4px 4px 0}
.mppdb-wiz-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edebe9;margin-top:10px;padding-top:16px;gap:10px}
.mppdb-wiz-count{font-size:13px;color:#605e5c}
.mppdb-agree{margin-top:14px;padding:12px;border:1px solid #e1dfdd;border-radius:6px;background:#faf9f8}
.mppdb-agree.shake{animation:mppdbShake .5s;border-color:#a4262c}
@keyframes mppdbShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.mppdb-review{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mppdb-rev-sec{border:1px solid #edebe9;border-radius:6px;overflow:hidden}
.mppdb-rev-h{display:flex;justify-content:space-between;align-items:center;width:100%;background:#faf9f8;border:0;border-bottom:1px solid #edebe9;padding:9px 12px;font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;color:#201f1e;text-align:left}
.mppdb-rev-h span{color:var(--mp);font-weight:600}
.mppdb-rev-sec p{padding:8px 12px;margin:0;font-size:13px}
.mppdb-backlink{margin:-6px 0 14px}
.mppdb-backlink a{display:inline-flex;align-items:center;gap:4px;color:var(--mp,#0078d4);text-decoration:none;font-weight:600;font-size:14px}
.mppdb-info-box{background:#f3f9fd;border-color:#c7e0f4}
.mppdb-info-box p:last-child{margin-bottom:0}

/* Foto */
.mppdb-foto{display:flex;gap:16px;align-items:center}
.mppdb-foto-prev{width:96px;height:128px;border:2px dashed #c8c6c4;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a19f9d;font-size:12px;overflow:hidden;background:#faf9f8;flex:none}
.mppdb-foto-prev img{width:100%;height:100%;object-fit:cover}
.mppdb-foto label.mppdb-btn{display:inline-flex!important;margin-bottom:6px;font-weight:600}

/* Data list */
.mppdb-dl{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.mppdb-dl td,.mppdb-dl th{padding:7px 12px;border:0;border-bottom:1px solid #f3f2f1;text-align:left;vertical-align:top}
.mppdb-dl td:first-child{color:#605e5c;width:42%}
.mppdb-dl tr.sub th{background:#faf9f8;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--mp,#0078d4)}
.mppdb-acc{border:1px solid #edebe9;border-radius:6px;margin-bottom:8px;overflow:hidden}
.mppdb-acc summary{cursor:pointer;padding:10px 12px;font-weight:600;font-size:14px;background:#faf9f8;display:flex;gap:8px;align-items:center;list-style:none}
.mppdb-acc summary::-webkit-details-marker{display:none}
.mppdb-acc[open] summary{border-bottom:1px solid #edebe9}

/* Status */
.mppdb-status-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start}
.mppdb-status-card{border-top:4px solid var(--mp)}
.mppdb-status-card.st-diterima{border-top-color:#107c10}
.mppdb-status-card.st-ditolak{border-top-color:#a4262c}
.mppdb-status-card.st-menunggu{border-top-color:#c27c0e}
.mppdb-status-card.st-cadangan{border-top-color:#5c2e91}
.mppdb-status-top{display:flex;gap:16px;align-items:center}
.mppdb-avatar{width:72px;height:96px;border-radius:6px;background:#f3f2f1;display:flex;align-items:center;justify-content:center;color:#a19f9d;overflow:hidden;flex:none}
.mppdb-avatar img{width:100%;height:100%;object-fit:cover}
.mppdb-nodaf{white-space:nowrap;font-size:20px;font-weight:700;color:var(--mp);letter-spacing:.5px;line-height:1.2}
.mppdb-nm{font-size:16px;font-weight:600;margin:2px 0}
.mppdb-status-big{margin:16px 0 6px}
.mppdb-status-big .mppdb-badge{font-size:15px;padding:6px 16px}
.mppdb-track{list-style:none;margin:14px 0 16px;padding:0;display:flex;gap:6px}
.mppdb-track li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#605e5c;text-align:center;margin:0;position:relative}
.mppdb-track li span{width:30px;height:30px;border-radius:50%;border:2px solid #c8c6c4;display:flex;align-items:center;justify-content:center;font-weight:700;background:#fff;z-index:1}
.mppdb-track li:before{content:"";position:absolute;top:14px;left:-50%;right:50%;height:2px;background:#e1dfdd}
.mppdb-track li:first-child:before{display:none}
.mppdb-track li.done{color:#107c10;font-weight:600}
.mppdb-track li.done span{background:#107c10;border-color:#107c10;color:#fff}
.mppdb-track li.done:before{background:#107c10}
.mppdb-note-box{background:#fff4ce;border-radius:6px;padding:12px 14px;font-size:14px;margin-bottom:14px}
.mppdb-actions{display:flex;flex-wrap:wrap;gap:8px}
.mppdb-peng{border-left:4px solid var(--mp)}

/* Responsive */
@media (max-width:860px){
	.mppdb-guest,.mppdb-status-grid{grid-template-columns:1fr}
	.mppdb-guest .mppdb-auth{order:-1}
	.mppdb-review{grid-template-columns:1fr}
}
@media (max-width:600px){
	.mppdb{font-size:14px}
	.mppdb-card{padding:16px}
	.mppdb-hero{padding:16px;flex-wrap:wrap}
	.mppdb-hero h2{font-size:18px}
	.mppdb-hero-ic{width:44px;height:44px}
	.mppdb-hero .mppdb-logout{margin-left:0}
	.mppdb-fld.w-half,.mppdb-fld.w-third{grid-column:span 6}
	.mppdb-progress .lbl{display:none}
	.mppdb-progress li.active .lbl{display:block;position:absolute;top:38px;white-space:nowrap}
	.mppdb-progress{margin-bottom:34px}
	.mppdb-steps-info ol,.mppdb-grid2{grid-template-columns:1fr}
	.mppdb-wiz-nav .mppdb-btn{padding:10px 12px}
	.mppdb-wiz-count{display:none}
	.mppdb-actions .mppdb-btn{flex:1 1 45%}
	.mppdb-foto{align-items:flex-start}
}