:root {
    font-family:"Segoe UI",Arial,sans-serif;
    color:#26374b;
    background:#f5f7fa;
    font-synthesis:none;
    line-height:1.6;
    color-scheme:light;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
}
button,input {
    font:inherit;
}
a {
    color:inherit;
}
.page {
    max-width:1120px;
    min-height:100svh;
    margin:auto;
    padding:42px 40px 22px;
    display:flex;
    flex-direction:column;
}
.brand {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:44px;
}
.brand-logo {
    display:block;
    width:280px;
    max-width:100%;
    height:auto;
}
main {
    flex:1;
    display:grid;
    align-content:center;
}
.login-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid #dce4ed;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 12px 40px #203a5510;
}
.intro {
    background:#eaf2fa;
    padding:58px 46px;
    display:flex;
    flex-direction:column;
}
.eyebrow {
    font-size:11px;
    font-weight:700;
    letter-spacing:1.9px;
    color:#456b91;
    margin:0 0 23px;
}
h1,h2 {
    color:#20354d;
    line-height:1.25;
    letter-spacing:-.7px;
    margin:0;
    font-weight:650;
}
.intro h1 {
    font-size:34px;
}
.intro-copy {
    font-size:15px;
    color:#4e6680;
    max-width:300px;
    margin:24px 0 48px;
}
.intro-note {
    display:flex;
    gap:14px;
    align-items:center;
    margin-top:auto;
    color:#526d88;
    font-size:12px;
}
.intro-note p {
    margin:0;
}
.note-line {
    width:30px;
    height:1px;
    background:#7f9fbe;
}
.form-panel {
    padding:54px 46px;
}
.form-panel .eyebrow {
    margin-bottom:14px;
}
h2 {
    font-size:26px;
}
.form-copy {
    font-size:14px;
    color:#617084;
    margin:13px 0 29px;
}
.field {
    margin-bottom:20px;
}
label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
}
input {
    width:100%;
    height:47px;
    padding:10px 13px;
    border:1px solid #b9c7d6;
    border-radius:6px;
    background:#fff;
    color:#26374b;
    min-width:0;
}
input[aria-invalid=true] {
    border-color:#a64545;
}
input:focus-visible,button:focus-visible,a:focus-visible {
    outline:3px solid #96bde4;
    outline-offset:3px;
}
input:focus-visible {
    border-color:#356b9e;
}
.button {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:12px 18px;
    min-height:47px;
    border:1px solid #35638d;
    border-radius:6px;
    background:#35638d;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
}
.button:hover {
    background:#294e71;
}
.access-note {
    font-size:12px;
    text-align:center;
    color:#66768a;
    margin:21px 0 0;
}
.footer {
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#69798c;
    font-size:11px;
    letter-spacing:.4px;
    padding-top:36px;
}
.notice {
    padding:12px 14px;
    margin:0 0 20px;
    font-size:13px;
    border:1px solid #b9d1e8;
    border-radius:6px;
    background:#f0f6fc;
    color:#33577b;
    overflow-wrap:anywhere;
}
.notice-error {
    background:#fff6f5;
    border-color:#e3b9b4;
    color:#8b3232;
}
.destination {
    max-width:640px;
    width:100%;
    margin:auto;
    padding:40px;
    background:#fff;
    border:1px solid #dce4ed;
    border-radius:14px;
}
.destination h1 {
    font-size:30px;
}
.identity {
    margin:26px 0;
    border-top:1px solid #e1e8f0;
}
.identity div {
    padding:13px 0;
    border-bottom:1px solid #e1e8f0;
    display:grid;
    grid-template-columns:110px 1fr;
    gap:14px;
    font-size:14px;
}
.identity dt {
    color:#617084;
}
.identity dd {
    margin:0;
    font-weight:600;
    overflow-wrap:anywhere;
}
.temporary-note {
    font-size:13px;
    color:#617084;
    margin:24px 0;
}
.button-secondary {
    background:#fff;
    color:#35638d;
}
.button-secondary:hover {
    background:#edf4fb;
}
@media(min-width:1500px) {
    .page {
        padding-top:60px;
        padding-bottom:30px;
    }
}
@media(max-width:850px) {
    .page {
        padding:30px 24px 20px;
    }
    .intro {
        padding:40px 28px;
    }
    .intro h1 {
        font-size:28px;
    }
    .form-panel {
        padding:40px 28px;
    }
    .brand {
        margin-bottom:28px;
    }
    h2 {
        font-size:24px;
    }
}
@media(max-width:620px) {
    .page {
        padding:24px 18px 18px;
    }
    .brand {
        gap:9px;
        margin-bottom:27px;
    }
    .login-panel {
        grid-template-columns:1fr;
    }
    .intro {
        padding:25px 26px;
    }
    .intro h1 {
        font-size:25px;
    }
    .intro h1 br {
        display:none;
    }
    .intro .eyebrow {
        margin-bottom:12px;
    }
    .intro-copy {
        font-size:13px;
        max-width:none;
        margin:14px 0 0;
    }
    .intro-note {
        display:none;
    }
    .form-panel {
        padding:30px 26px;
    }
    .form-panel .eyebrow {
        display:none;
    }
    .form-copy {
        margin-bottom:24px;
    }
    h2 {
        font-size:23px;
    }
    .footer {
        padding-top:24px;
    }
    .destination {
        padding:27px 24px;
    }
    .destination h1 {
        font-size:25px;
    }
    .identity div {
        grid-template-columns:85px 1fr;
    }
    main {
        align-content:start;
    }
}


/* Halaman login saja; stylesheet ini juga dipakai layout aplikasi dan sesi berakhir. */
.login-page { background: radial-gradient(ellipse at 15% 15%, #dcefff, transparent 55%), #f3f9fd; }
.login-page .page { max-width: 1184px; padding: 32px; }
.login-page main { min-width: 0; }
.login-page .login-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(660px, calc(100svh - 104px)); border-color: #dce9f5; border-radius: 24px; box-shadow: 0 16px 48px #315f861c; }
.login-page .intro { position: relative; isolation: isolate; overflow: hidden; justify-content: center; gap: 48px; padding: 56px; background: linear-gradient(145deg, #176eaf, #213b5a); }
.login-page .intro::before, .login-page .intro::after { content: ''; position: absolute; z-index: -1; width: 280px; height: 280px; border: 36px solid #ffffff0d; border-radius: 50%; pointer-events: none; }
.login-page .intro::before { top: -160px; right: -120px; }
.login-page .intro::after { bottom: -190px; left: -110px; }
/* Mempertahankan seluruh piksel logo resmi putih; hanya kanvas transparan di luar y=202..850. */
.login-page .intro .brand-logo { width: 100%; max-width: 360px; aspect-ratio: 1672 / 648; object-fit: cover; object-position: center 68.94198%; }
.login-page .intro h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.15; letter-spacing: -.7px; white-space: nowrap; color: #fff; }
.login-page .intro h1 span { color: #8cddff; }
.login-page .intro-copy { color: #e7f2fc; font-size: 18px; max-width: 340px; margin: 18px 0 0; }
.login-page .form-panel { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 56px 52px; }
.login-page #login-title { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -.8px; }
.login-page #login-title span { color: #176eaf; }
.login-page .form-copy { margin: 12px 0 36px; }
.login-page .form-copy::after { content: ''; display: block; width: 64px; height: 4px; margin-top: 20px; background: #2386cf; border-radius: 2px; }
.login-page label { font-size: 14px; }
.login-page .field { margin-bottom: 24px; }
.login-page input { height: 54px; border-color: #bbcbdc; border-radius: 8px; background: #fbfcfe; font-size: 16px; }
.login-page input::placeholder { color: #67778b; opacity: 1; }
.login-page input[aria-invalid=true] { border-color: #a64545; }
.login-page input:focus-visible { border-color: #176eaf; }
.login-page .password-control { display: flex; align-items: center; gap: 4px; border: 1px solid #bbcbdc; border-radius: 8px; background: #fbfcfe; }
.login-page .password-control:has(input[aria-invalid=true]) { border-color: #a64545; }
.login-page .password-control:focus-within { border-color: #176eaf; }
.login-page .password-control input { flex: 1; width: 0; height: 52px; border: 0; background: transparent; }
.login-page .password-control input:focus-visible { outline-offset: -3px; }
.login-page .password-toggle { flex: 0 0 auto; min-height: 44px; margin-right: 4px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: #315f86; font-size: 12px; cursor: pointer; }
.login-page .password-toggle[hidden] { display: none; }
.login-page .password-toggle:hover { background: #eaf3fb; }
.login-page .password-toggle:focus-visible { outline-offset: -3px; }
.login-page .button { min-height: 54px; margin-top: 12px; border-color: #176eaf; border-radius: 8px; background: #176eaf; font-size: 16px; }
.login-page .button:hover { background: #155b91; }
.login-page .access-note { margin-top: 32px; }
.login-page .footer { padding-top: 20px; }
@media (max-width: 850px) {
    .login-page .page { padding: 24px; }
    .login-page .intro, .login-page .form-panel { padding: 32px 28px; }
    .login-page .intro-copy { font-size: 16px; }
    .login-page .intro h1 { font-size: clamp(24px, 3.5vw, 30px); white-space: normal; }
}
@media (max-width: 700px) {
    .login-page .page { padding: 16px; }
    .login-page main { align-content: center; }
    .login-page .login-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 18px; }
    .login-page .intro { padding: 20px 28px; gap: 0; }
    .login-page .intro .brand-logo { width: 220px; }
    .login-page .welcome-copy { display: none; }
    .login-page .form-panel { padding: 28px; }
    .login-page #login-title { font-size: 26px; }
    .login-page .form-copy { margin-bottom: 24px; }
    .login-page .field { margin-bottom: 20px; }
    .login-page .access-note { margin-top: 24px; }
}
@media (max-width: 380px) {
    .login-page .page { padding: 12px; }
    .login-page .intro, .login-page .form-panel { padding-inline: 20px; }
    .login-page #login-title { font-size: 24px; }
}