:root {
    color-scheme: light;
    --login-navy: #101b35;
    --login-blue: #315ee8;
    --login-teal: #119b8e;
    --login-ink: #172139;
    --login-muted: #738097;
    --login-line: #dce4ef;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: #eef4ff; }
body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--login-ink); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }

.login-body { position: relative; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: linear-gradient(135deg, #f8faff, #edf4ff); }
.login-stage { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100vh; min-height: 100dvh; padding: clamp(18px, 4vh, 42px) clamp(14px, 3vw, 36px); }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); width: min(1050px, 100%); margin: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, .8); border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(16, 27, 63, .15); }
.login-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(42px, 5vw, 58px) clamp(34px, 4.5vw, 50px); overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--login-navy) 0%, #1a3473 58%, #187e82 130%); }
.login-visual::after { position: absolute; right: -120px; bottom: -130px; width: 300px; height: 300px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; content: ""; }
.login-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin-bottom: 30px; padding: 7px 11px 7px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.login-badge img { width: 44px; height: 31px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain; }
.login-badge span { white-space: nowrap; }
.login-visual h1 { max-width: 470px; margin: 0; font-size: clamp(29px, 3.2vw, 36px); line-height: 1.13; letter-spacing: -1.4px; }
.login-visual > p { max-width: 470px; margin: 15px 0 34px; color: #c9d6ef; font-size: 13px; line-height: 1.7; }
.login-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.login-metrics > div { min-width: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .06); }
.login-metrics b, .login-metrics span { display: block; }
.login-metrics b { font-size: 15px; }
.login-metrics span { margin-top: 2px; color: #b8c9e7; font-size: 9px; line-height: 1.35; }

.login-card { position: relative; align-self: center; min-width: 0; padding: clamp(30px, 4vw, 42px); }
.login-card::before { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #124c86, #0fa9b4, #73bf44); content: ""; }
.partner-logos { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 54px; margin-bottom: 29px; padding-bottom: 14px; border-bottom: 1px solid #edf0f5; }
.partner-logos img { display: block; width: auto; max-width: 31%; height: auto; object-fit: contain; }
.partner-logos .partner-danantara { width: 104px; max-height: 32px; }
.partner-logos .partner-idsurvey { width: 96px; max-height: 30px; }
.partner-logos .partner-sucofindo { width: 65px; max-height: 44px; }
.login-title { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.login-title h2 { margin: 0; font-size: 22px; font-weight: 800; }
.login-title p { margin: 2px 0 0; color: var(--login-muted); font-size: 12px; }
.login-brand-logo { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; padding: 7px; border: 1px solid #dbe4f1; border-radius: 17px; background: linear-gradient(145deg, #f7faff, #edf7f6); box-shadow: 0 8px 22px rgba(25, 55, 94, .08); }
.login-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.login-alert { margin-bottom: 16px; padding: 11px 13px; border: 1px solid; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.login-alert.danger { border-color: #f0cbd4; background: #fff1f4; color: #94364d; }
.login-alert.info { border-color: #cddcf6; background: #eff5ff; color: #345b98; }
.field-group { margin-bottom: 15px; }
.field-group > label { display: block; margin-bottom: 6px; color: #566278; font-size: 11px; font-weight: 750; }
.field-group input { display: block; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--login-line); border-radius: 11px; outline: 0; background: #fff; color: #263149; font-size: 14px; transition: border-color .16s, box-shadow .16s; }
.field-group input:focus { border-color: #6989ec; box-shadow: 0 0 0 3px rgba(49, 94, 232, .1); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 78px; }
.pass-toggle { position: absolute; top: 7px; right: 7px; min-width: 62px; height: calc(100% - 14px); padding: 0 9px; border: 0; border-radius: 7px; background: #eff3fa; color: #536078; font-size: 10px; font-weight: 800; cursor: pointer; }
.pass-toggle:focus-visible, .login-button:focus-visible { outline: 3px solid rgba(49, 94, 232, .24); outline-offset: 2px; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 24px; }
.remember-option { display: inline-flex; align-items: center; gap: 6px; color: #6c7890; font-size: 11px; cursor: pointer; }
.remember-option input { width: 16px; height: 16px; accent-color: var(--login-blue); }
.security-note { display: inline-flex; align-items: center; gap: 6px; color: #78839b; font-size: 9px; }
.security-note i { width: 7px; height: 7px; border-radius: 50%; background: #25b47e; box-shadow: 0 0 0 4px rgba(37, 180, 126, .1); }
.login-button { width: 100%; min-height: 48px; padding: 11px 15px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--login-blue), #3568ec); box-shadow: 0 8px 18px rgba(33, 85, 217, .18); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .16s, opacity .16s; }
.login-button:hover { transform: translateY(-1px); }
.login-button:disabled { cursor: wait; opacity: .72; transform: none; }
.login-foot { margin: 20px 0 0; color: #929db0; font-size: 9px; line-height: 1.5; text-align: center; }
.login-orb { position: fixed; border-radius: 50%; filter: blur(4px); opacity: .5; pointer-events: none; }
.orb-a { top: -100px; left: -120px; width: 350px; height: 350px; background: #dfe8ff; }
.orb-b { right: -100px; bottom: -100px; width: 300px; height: 300px; background: #d9f6f2; }

@media (max-width: 760px) {
    .login-stage { align-items: center; padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .login-shell { grid-template-columns: 1fr; width: min(510px, 100%); border-radius: 22px; }
    .login-visual { display: none; }
    .login-card { width: 100%; padding: 28px 24px; }
}

@media (max-width: 390px) {
    .login-card { padding: 24px 18px; }
    .partner-logos { gap: 9px; margin-bottom: 22px; }
    .partner-logos .partner-danantara { width: 78px; }
    .partner-logos .partner-idsurvey { width: 72px; }
    .partner-logos .partner-sucofindo { width: 50px; }
    .login-brand-logo { width: 52px; height: 52px; flex-basis: 52px; }
    .login-options { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (max-height: 680px) and (min-width: 761px) {
    .login-stage { align-items: flex-start; }
    .login-shell { margin-block: auto; }
    .login-visual { padding-block: 34px; }
    .login-card { padding-block: 27px; }
    .partner-logos { margin-bottom: 18px; }
    .login-title { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}