/* Satu panel identitas dan autentikasi dengan logo berukuran proporsional. */
body.login-consistent {
    padding: 0;
    --accent: #d9aa16;
    --text: #29251d;
    --muted: #716e66;
    background-color: #20201c;
    background-image: linear-gradient(rgba(20, 20, 17, .36), rgba(20, 20, 17, .36)), url('../login-branding/bg-tepas-bkpsdm.png');
}
.auth-card {
    width: min(800px, 100%);
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid #ffffff70;
    border-radius: 16px;
    box-shadow: 0 24px 80px #17150f66;
}
.login-identity {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid #e4eae6;
}
.login-government { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.login-government img { width: 36px; height: 46px; object-fit: contain; flex-shrink: 0; }
.login-government span { display: block; color: #716e66; font-size: 9px; letter-spacing: .4px; line-height: 1.5; white-space: nowrap; }
.login-government strong { display: block; color: #29251d; font-size: 17px; line-height: 1.35; }
.login-bkpsdm { display: block; width: 116px; height: auto; max-width: 100%; object-fit: contain; justify-self: end; flex-shrink: 0; }
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 28px 26px 88px;
    background: linear-gradient(145deg, #191919, #302a1b);
    color: #fff;
}
.login-eyebrow { font-size: 10px; letter-spacing: 1.8px; line-height: 1.6; color: #e6dfc9; }
.login-product { margin-top: 16px; color: #ffd619; font-size: 44px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.auth-brand h2 { margin: 14px 0 0; color: #fff; font-size: 22px; line-height: 1.4; font-weight: 600; }
.auth-brand h2::after { content: ''; display: block; width: 44px; height: 3px; margin: 18px 0 12px; background: #ffd619; }
.auth-brand p { margin: 0; color: #e6dfc9; font-size: 13px; line-height: 1.7; }
.auth-brand .login-credit { position: absolute; right: 26px; bottom: 20px; left: 26px; margin: 0; padding-top: 10px; border-top: 1px solid rgba(230, 223, 201, .35); color: #e6dfc9; font-size: 13px; line-height: 1.6; }
.auth-body { width: 100%; max-width: none; padding: 24px 26px; border: 0; border-radius: 0; box-shadow: none; }
.auth-form-title { margin: 0 0 6px; font-size: 24px; }
.auth-form-subtitle { font-size: 13px; line-height: 1.7; margin-bottom: 16px; }
.auth-card .auth-footer { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4eae6; font-size: 11px; line-height: 1.6; color: #716e66; text-align: left; }
/* Desktop treats the three logos as separate items so all four header gaps match. */
.login-values { display: contents; }
/* The SVG viewBoxes remove source canvas margins without changing logo pixels. */
.login-values img { display: block; width: auto; height: 36px; max-width: none; object-fit: contain; flex-shrink: 0; }
@media (max-width: 760px) {
    .login-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .login-bkpsdm { grid-column: 2; grid-row: 1; }
    .login-values { display: flex; justify-content: center; align-items: center; gap: 20px; min-width: 0; grid-column: 1 / -1; grid-row: 2; width: 100%; padding-top: 12px; border-top: 1px solid #e4eae6; }
}
@media (max-width: 720px) {
    .auth-shell { padding: 20px 16px; }
    .auth-card { max-width: 460px; grid-template-columns: minmax(0, 1fr); }
    .login-identity { padding: 14px 20px; gap: 12px; }
    .login-government { gap: 10px; }
    .login-government img { width: 34px; height: 44px; }
    .login-government span { font-size: 8px; letter-spacing: .3px; white-space: normal; }
    .login-government strong { font-size: 17px; }
    .login-bkpsdm { width: 118px; }
    .auth-brand { padding: 20px 24px; }
    .auth-brand .login-credit { position: static; margin-top: 20px; }
    .login-eyebrow { font-size: 9px; }
    .login-product { margin-top: 12px; font-size: 34px; }
    .auth-brand h2 { margin-top: 10px; font-size: 20px; }
    .auth-brand h2::after { margin: 18px 0 12px; }
    .auth-body { padding: 24px; }
    .login-values { gap: 16px; flex-wrap: wrap; }
    .login-values img { height: 32px; }
}
@media (max-width: 380px) {
    .login-identity { padding: 16px; gap: 12px; }
    .login-government span { max-width: 115px; }
    .login-values img { height: 26px; }
    .login-bkpsdm { width: 100px; }
    .auth-brand, .auth-body { padding: 20px; }
    .login-values { gap: 12px; flex-wrap: wrap; }

}

/* Adaptation for the existing login forms; their fields and scripts are unchanged. */
body.login-consistent { margin: 0; min-height: 100vh; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.5; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
body.login-consistent::before { content: none; }
.auth-shell { position: relative; z-index: 1; min-height: 100vh; padding: 28px 20px; display: flex; justify-content: center; align-items: center; }
.auth-card { max-width: 800px; color: #29251d; }
.auth-brand { min-height: 0; gap: 0; }
.auth-brand .login-product { margin-bottom: 0; font-weight: 700; }
.auth-brand h2 { letter-spacing: 0; }
.auth-brand p { margin-bottom: 0; }
.auth-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #29251d); }
.auth-form-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.auth-form-subtitle { margin: 0 0 16px; color: var(--bs-secondary-color, #716e66); }
.auth-body .form-label { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.auth-body .mb-3, .auth-body .mb-4 { margin-bottom: 14px !important; }
.auth-card .form-control, .auth-card .input-group-text, .auth-card .password-toggle, .auth-submit { min-height: 42px; font-size: 14px; }
.auth-card .form-control { padding: 9px 12px; }
.auth-card .input-group-text { padding: 9px 12px; }
.password-toggle { min-width: 42px; }
.auth-submit { padding: 9px 16px; font-weight: 600; background: #f6c900; border-color: #f6c900; color: #242015; --bs-btn-bg: #f6c900; --bs-btn-border-color: #f6c900; --bs-btn-color: #242015; --bs-btn-hover-bg: #e4b900; --bs-btn-hover-border-color: #e4b900; --bs-btn-hover-color: #242015; --bs-btn-active-bg: #d4ac00; --bs-btn-active-border-color: #d4ac00; --bs-btn-active-color: #242015; --bs-btn-disabled-bg: #e7dba9; --bs-btn-disabled-border-color: #e7dba9; --bs-btn-disabled-color: #5d5540; }
.auth-submit:hover:not(:disabled) { background: #e4b900; border-color: #e4b900; color: #242015; }
.auth-submit:disabled { background: #e7dba9; border-color: #e7dba9; color: #5d5540; }
.auth-body .form-control:focus { border-color: #d9aa16; box-shadow: 0 0 0 .2rem rgba(217,170,22,.2); }
.auth-body .auth-footer { display: block; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e4eae6; font-size: 11px; line-height: 1.6; color: var(--bs-secondary-color, #716e66); }
[data-bs-theme="dark"] .auth-body .auth-footer { border-color: #495057; }
@media (max-width: 720px) { .auth-shell { padding: 20px 16px; } .auth-card { max-width: 460px; } .auth-brand { gap: 0; } }
@media (max-width: 420px) { .auth-shell { padding: 20px 12px; } }

/* Keep the existing e-KGB theme switch clear of the mobile logo header. */
@media (max-width: 720px) { .auth-theme-toggle + .auth-shell { padding-top: 64px; } }