.auth-body { min-height:100vh; background:#f0f7fb; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(21rem,42%) minmax(0,1fr); }
.auth-visual { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:1.5rem; color:#fff; background:linear-gradient(145deg,rgba(10,53,80,.85),rgba(26,116,173,.75)), url('../images/silat-pantai-2026-poster.webp') center/cover; }
.auth-visual::after { content:""; position:absolute; inset:auto -8rem -9rem auto; width:28rem; height:28rem; border:3rem solid rgba(255,255,255,.05); border-radius:50%; }
.auth-visual-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,53,80,.15),rgba(10,53,80,.65)); }
.auth-brand,.auth-visual-copy { position:relative; z-index:1; }.auth-brand { display:flex; align-items:center; gap:.75rem; width:fit-content; }.auth-logo { width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:.85rem; overflow:hidden; }
.auth-logo img { width:100%; height:100%; object-fit:contain; }.auth-brand > span:last-child { display:flex; flex-direction:column; }.auth-brand strong { font-size:.9rem; }.auth-brand small { color:rgba(255,255,255,.65); font-size:.68rem; }
.auth-visual-copy { max-width:35rem; padding:2rem .5rem 1.5rem; }.auth-visual-copy h1 { margin:.8rem 0 .7rem; font-size:clamp(2rem,4vw,3.5rem); line-height:1.08; letter-spacing:-.055em; }.auth-visual-copy p { max-width:31rem; margin:0; color:rgba(255,255,255,.72); font-size:.9rem; }.auth-feature-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }.auth-feature-row span { padding:.42rem .65rem; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.07); font-size:.67rem; font-weight:700; }
.auth-main { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); }.auth-mobile-brand { display:none; width:100%; max-width:48rem; margin-bottom:1rem; }.dark-brand .brand-copy strong { color:var(--ink-950); }.dark-brand .brand-copy small { color:var(--ink-500); }

.auth-card { width:min(100%,31rem); padding:clamp(1.5rem,3vw,2.25rem); border:1px solid var(--line); border-radius:var(--radius-xl); background:#fff; box-shadow:0 1px 3px rgba(10,53,80,.04),0 8px 32px rgba(10,53,80,.07); }
.auth-card-register { width:min(100%,52rem); }
.auth-card-heading { margin-bottom:1.35rem; }
.auth-card-heading h2 { margin:0; font-size:clamp(1.35rem,2.2vw,1.7rem); letter-spacing:-.035em; color:var(--ink-950); }
.auth-card-heading p { margin:.3rem 0 0; color:var(--ink-500); font-size:.82rem; line-height:1.5; }

.auth-form { display:grid; gap:1.15rem; }
.input-with-icon { position:relative; }
.input-with-icon > svg { position:absolute; top:50%; left:.85rem; width:1.05rem; height:1.05rem; color:var(--ink-500); transform:translateY(-50%); }
.input-with-icon > .ui-input { padding-left:2.55rem; }
.password-input { position:relative; }
.password-input .ui-input { padding-right:4rem; }
.password-input .pwd-icon { position:absolute; top:50%; left:.85rem; width:1.05rem; height:1.05rem; color:var(--ink-500); transform:translateY(-50%); }
.password-input .pwd-icon svg { width:100%; height:100%; }
.password-input .pwd-icon + .ui-input { padding-left:2.55rem; }
.password-toggle { position:absolute; top:50%; right:.6rem; padding:.3rem .5rem; border:0; border-radius:.45rem; color:var(--brand-700); background:transparent; font-size:.68rem; font-weight:800; cursor:pointer; transform:translateY(-50%); transition:background .15s,color .15s; }
.password-toggle:hover { background:var(--brand-50); color:var(--brand-800); }
.label-row { display:flex; justify-content:space-between; }
.auth-divider { display:flex; align-items:center; gap:.7rem; margin:1.2rem 0; color:var(--ink-500); font-size:.7rem; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.back-link,.auth-switch { display:block; margin-top:1.25rem; color:var(--ink-500); text-align:center; font-size:.75rem; }
.auth-switch a { color:var(--brand-700); font-weight:800; transition:color .15s; }
.auth-switch a:hover { color:var(--brand-600); }
.auth-footer { margin-top:1rem; color:var(--ink-500); font-size:.68rem; }
.auth-message-stack { width:min(100%,52rem); margin-bottom:.7rem; }
.auth-message { padding:.75rem .9rem; border-radius:.8rem; color:#17623f; background:var(--success-soft); font-size:.78rem; }
.auth-message.error { color:#902828; background:var(--danger-soft); }

.wizard-progress { display:flex; align-items:center; margin-bottom:1.75rem; padding:.25rem 0; }
.wizard-dot { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:0; border:0; color:var(--ink-500); background:transparent; cursor:pointer; transition:color .25s; position:relative; z-index:1; }
.wizard-dot > span { width:2.25rem; height:2.25rem; display:grid; place-items:center; border:2px solid var(--line-strong); border-radius:50%; background:#fff; font-size:.73rem; font-weight:800; transition:all .3s; }
.wizard-dot small { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.wizard-dot.active,.wizard-dot.done { color:var(--brand-700); }
.wizard-dot.active > span,.wizard-dot.done > span { border-color:var(--brand-700); color:#fff; background:var(--brand-700); }
.wizard-dot.done > span { background:var(--brand-600); border-color:var(--brand-600); box-shadow:0 0 0 4px rgba(43,143,201,.14); }
.wizard-dot.active > span { box-shadow:0 0 0 4px rgba(43,143,201,.12); }
.wizard-dot:hover:not(.active):not(.done) > span { border-color:#b9cfe0; }
.wizard-dot:hover:not(.active):not(.done) small { color:var(--ink-800); }
.wizard-line { flex:1; height:2px; margin:0 .5rem; margin-bottom:1.2rem; background:var(--line); border-radius:2px; position:relative; overflow:hidden; }
.wizard-line::before { content:''; position:absolute; left:0; top:0; height:100%; width:0; background:var(--brand-600); border-radius:2px; transition:width .4s ease; }
.wizard-progress[data-done="1"] .wizard-line:nth-of-type(1)::before,
.wizard-progress[data-done="2"] .wizard-line:nth-of-type(1)::before,
.wizard-progress[data-done="2"] .wizard-line:nth-of-type(2)::before { width:100%; }

.form-step { display:none; }
.form-step.active { display:block; animation:stepIn .28s ease both; }
@keyframes stepIn { from { opacity:0; transform:translateY(8px); } }

.step-title { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.step-title > span { width:2.1rem; height:2.1rem; display:grid; place-items:center; flex:0 0 auto; border-radius:.65rem; color:#fff; background:var(--brand-800); font-size:.68rem; font-weight:900; }
.step-title h3 { margin:0; font-size:.93rem; color:var(--ink-950); }
.step-title p { margin:.15rem 0 0; color:var(--ink-500); font-size:.68rem; }

.file-drop { display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem; border:1px dashed var(--line-strong); border-radius:.78rem; background:var(--surface-soft); transition:border-color .18s,background .18s; cursor:pointer; }
.file-drop:hover { border-color:#b9cfe0; background:#eef5fb; }
.file-drop span { color:var(--ink-500); font-size:.7rem; }

.agreement-box { padding:.85rem 1rem; border:1px solid var(--line); border-radius:.8rem; background:var(--brand-50); transition:border-color .18s,box-shadow .18s,background .18s; }
.agreement-box:focus-within { border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(43,143,201,.1); background:#e8f4fd; }
.agreement-box .check-row { font-size:.82rem; line-height:1.55; color:var(--ink-800); }
.agreement-box .check-row input { margin-top:.18rem; }

.wizard-actions { display:flex; align-items:center; gap:.7rem; margin-top:1.5rem; padding-top:1.15rem; border-top:1px solid var(--line); }
.wizard-actions > :first-child { margin-right:auto; }
.wizard-actions > :only-child { margin-right:0; margin-left:auto; }

.pwd-strength { margin-top:.55rem; }
.pwd-bar { height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.pwd-bar-fill { height:100%; width:0; border-radius:99px; transition:width .35s,background .35s,box-shadow .35s; }
.pwd-bar-fill.weak { width:25%; background:#d74b4b; box-shadow:0 0 6px rgba(215,75,75,.3); }
.pwd-bar-fill.medium { width:50%; background:#e8993d; box-shadow:0 0 6px rgba(232,153,61,.3); }
.pwd-bar-fill.strong { width:75%; background:#54b683; box-shadow:0 0 6px rgba(84,182,131,.3); }
.pwd-bar-fill.very-strong { width:100%; background:#2b8c5c; box-shadow:0 0 6px rgba(43,140,92,.3); }
.pwd-rules { display:flex; flex-wrap:wrap; gap:.25rem .85rem; margin-top:.5rem; }
.pwd-rules span { display:flex; align-items:center; gap:.35rem; color:var(--ink-500); font-size:.65rem; font-weight:600; transition:color .25s; }
.pwd-rules span::before { content:''; width:.4rem; height:.4rem; border-radius:50%; background:var(--line-strong); transition:background .25s,box-shadow .25s; }
.pwd-rules span.met { color:#2b8c5c; }
.pwd-rules span.met::before { background:#2b8c5c; box-shadow:0 0 4px rgba(43,140,92,.35); }

.select2-container--default .select2-selection--single {
    height: 2.85rem;
    display: flex;
    align-items: center;
    padding: 0 .82rem;
    border: 1px solid var(--line-strong);
    border-radius: .78rem;
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: .88rem;
    transition: border-color .18s, box-shadow .18s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--ink-950);
    line-height: 1.5;
    font-size: .88rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ink-500);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    height: auto;
    width: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ink-500) transparent transparent;
    border-width: 5px 4px 0;
    transition: transform .25s;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(180deg);
}
.select2-container--default .select2-selection--single:hover {
    border-color: #b9cfe0;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 4px rgba(43,143,201,.12);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--brand-50);
    color: var(--brand-700);
}
.select2-container--default .select2-results__option--selected {
    background: var(--surface-muted);
    font-weight: 700;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background: #d9edfb;
}
.select2-container--default .select2-results__option {
    padding: .58rem .75rem;
    font-size: .86rem;
    transition: background .12s;
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 16rem;
    scrollbar-width: thin;
}
.select2-dropdown {
    border: 1px solid var(--line-strong);
    border-radius: .78rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(10,53,80,.14);
    animation: select2DropIn .2s ease both;
}
@keyframes select2DropIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.select2-search--dropdown {
    padding: .55rem .6rem .35rem;
}
.select2-search--dropdown .select2-search__field {
    min-height: 2.35rem;
    padding: .5rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: .6rem;
    font-size: .84rem;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(43,143,201,.12);
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--surface-muted);
    cursor: not-allowed;
    opacity: .65;
}
.has-select2-error + .select2-container--default .select2-selection--single {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(189,52,52,.1);
}
.form-field.has-error .select2-container--default .select2-selection--single {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(189,52,52,.1);
}
.select2-container--default .select2-results__option--disabled {
    color: var(--ink-500);
    font-style: italic;
    font-size: .82rem;
}

.button:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.button.is-loading { position:relative; pointer-events:none; color:transparent !important; }
.button.is-loading::after { content:''; position:absolute; inset:0; margin:auto; width:1.1rem; height:1.1rem; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .55s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.button.is-loading .spinner { display:none; }

@media (max-width: 920px) {
    .auth-shell { grid-template-columns:1fr; }
    .auth-visual { display:none; }
    .auth-main { justify-content:flex-start; padding:1rem; }
    .auth-mobile-brand { display:block; }
    .auth-card { margin:auto; }
    .auth-footer { padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width: 620px) {
    .auth-main { padding:.75rem; }
    .auth-card { padding:1.15rem; border-radius:1.15rem; box-shadow:0 1px 3px rgba(10,53,80,.04),0 4px 16px rgba(10,53,80,.06); }
    .auth-card-heading h2 { font-size:1.25rem; }
    .wizard-progress { padding-inline:.2rem; }
    .wizard-dot > span { width:2rem; height:2rem; font-size:.67rem; }
    .wizard-actions { position:sticky; bottom:.5rem; z-index:5; padding:.65rem .75rem; margin-inline:0; border:1px solid var(--line); border-radius:.85rem; background:rgba(255,255,255,.96); box-shadow:0 4px 16px rgba(10,53,80,.08); backdrop-filter:blur(12px); }
    .wizard-actions .button { flex:1; }
    .file-drop { align-items:flex-start; flex-direction:column; }
}