:root {
    --navy-950: #0c2538;
    --navy-900: #12364f;
    --navy-800: #174a68;
    --teal-600: #15947d;
    --teal-700: #107662;
    --ink: #203747;
    --muted: #6c7e8c;
    --line: #dce6ec;
    --surface: #ffffff;
    --background: #edf3f6;
    --danger: #a9362c;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 10%, rgba(21, 148, 125, .11), transparent 32%),
        radial-gradient(circle at 88% 88%, rgba(36, 104, 145, .12), transparent 33%),
        var(--background);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

button,
input {
    font: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-page {
    display: flex;
    min-height: calc(100vh - 58px);
    align-items: center;
    justify-content: center;
    padding: 34px 22px;
}

.login-shell {
    display: grid;
    width: min(1040px, 100%);
    overflow: hidden;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    border: 1px solid rgba(22, 61, 84, .11);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 22px 60px rgba(26, 55, 75, .16);
}

.login-brand {
    position: relative;
    display: flex;
    min-height: 620px;
    overflow: hidden;
    flex-direction: column;
    padding: 42px;
    background: linear-gradient(145deg, var(--navy-950), var(--navy-800));
    color: #fff;
}

.login-brand::before,
.login-brand::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}

.login-brand::before {
    top: -120px;
    right: -115px;
    width: 340px;
    height: 340px;
}

.login-brand::after {
    right: -70px;
    bottom: -185px;
    width: 430px;
    height: 430px;
}

.brand-heading,
.brand-copy,
.brand-features {
    position: relative;
    z-index: 1;
}

.brand-heading {
    display: flex;
    align-items: center;
}

.brand-heading img {
    width: 67px;
    height: auto;
    margin-right: 14px;
    object-fit: contain;
}

.brand-heading strong {
    display: block;
    color: #fff;
    font-size: 25px;
    letter-spacing: .2px;
}

.brand-kicker,
.brand-eyebrow,
.login-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.brand-kicker {
    margin-bottom: 1px;
    color: #9dd7ce;
}

.brand-copy {
    margin: auto 0;
    padding: 55px 0 48px;
}

.brand-eyebrow {
    margin-bottom: 12px;
    color: #8dd3c8;
}

.brand-copy h1 {
    max-width: 460px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.14;
}

.brand-copy p {
    max-width: 470px;
    margin: 0;
    color: #c8dce7;
    font-size: 14px;
    line-height: 1.75;
}

.brand-features {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 10px;
    color: #dceaf0;
    font-size: 12px;
    list-style: none;
}

.brand-features span {
    display: inline-flex;
    width: 21px;
    height: 21px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(70, 194, 164, .16);
    color: #83dac7;
    font-weight: 700;
}

.login-panel {
    display: flex;
    align-items: center;
    background: #fff;
}

.login-panel-inner {
    width: 100%;
    padding: 44px 46px;
}

.login-heading {
    margin-bottom: 26px;
}

.login-eyebrow {
    margin-bottom: 6px;
    color: var(--teal-700);
}

.login-heading h2 {
    margin: 0 0 7px;
    color: #183247;
    font-size: 25px;
    line-height: 1.25;
}

.login-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.login-alert {
    display: flex;
    margin-bottom: 20px;
    padding: 12px 13px;
    align-items: flex-start;
    border: 1px solid #f0c7c2;
    border-radius: 9px;
    background: #fff4f2;
    color: var(--danger);
    font-size: 12px;
}

.login-alert.success {
    color: #176b52;
    background: #e7f7f0;
    border-color: #bce6d5;
}

.login-alert.success .login-alert-icon {
    background: #16815f;
}

.reset-guidance {
    margin: 0 0 22px;
    padding: 13px 15px;
    color: #536b79;
    background: #f1f7fa;
    border-left: 3px solid #2b83a4;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.6;
}

.password-requirements {
    margin: 9px 0 0;
    padding-left: 18px;
    color: #71838f;
    font-size: 10px;
}

.password-strength {
    height: 5px;
    margin-top: 9px;
    overflow: hidden;
    background: #dce6ec;
    border-radius: 4px;
}

.password-strength span {
    display: block;
    width: 0;
    height: 100%;
    transition: width .2s ease, background .2s ease;
}

.password-strength-label {
    display: block;
    margin-top: 5px;
    color: #71838f;
    font-size: 10px;
}

/* Tema berbeza untuk aliran pemulihan supaya tidak disalah anggap sebagai halaman log masuk. */
.password-recovery-page {
    background:
        radial-gradient(circle at 10% 12%, rgba(170, 102, 35, .14), transparent 32%),
        radial-gradient(circle at 90% 88%, rgba(101, 61, 103, .14), transparent 34%),
        #f4f0e9;
}

.password-recovery-page .login-shell {
    border-color: rgba(91, 55, 88, .2);
    box-shadow: 0 22px 60px rgba(74, 48, 67, .2);
}

.password-recovery-page .login-brand {
    background: linear-gradient(145deg, #3c284b, #6b405f);
}

.password-recovery-page .brand-kicker,
.password-recovery-page .brand-eyebrow {
    color: #f3cb7a;
}

.password-recovery-page .brand-copy p,
.password-recovery-page .brand-features {
    color: #f2e7ee;
}

.password-recovery-page .brand-features {
    font-size: 13px;
}

.password-recovery-page .brand-features span {
    background: rgba(243, 193, 91, .18);
    color: #ffd98c;
}

.password-recovery-page .login-panel {
    background: #fffdfa;
}

.password-recovery-page .login-eyebrow {
    color: #8c4c10;
}

.password-recovery-page .login-heading h2 {
    color: #422b47;
    font-size: 28px;
}

.password-recovery-page .login-heading p {
    color: #5f6870;
    font-size: 14px;
}

.password-recovery-page .reset-guidance {
    color: #62440f;
    background: #fff5df;
    border-left-color: #bd721a;
    font-size: 13px;
}

.password-recovery-page .form-field label {
    color: #3f3142;
    font-size: 14px;
}

.password-recovery-page .form-field input {
    min-height: 51px;
    border-color: #bbaeb9;
    font-size: 16px;
}

.password-recovery-page .form-field input:focus {
    border-color: #a45c14;
    box-shadow: 0 0 0 4px rgba(164, 92, 20, .15);
}

.password-recovery-page .login-submit {
    min-height: 51px;
    background: linear-gradient(110deg, #8f4810, #ad641d);
    box-shadow: 0 8px 18px rgba(143, 72, 16, .23);
    font-size: 15px;
}

.password-recovery-page .login-submit:hover,
.password-recovery-page .login-submit:focus {
    background: linear-gradient(110deg, #773b0d, #945317);
    outline-color: rgba(164, 92, 20, .2);
}

.password-recovery-page .login-help a {
    color: #77410f;
    font-size: 13px;
}

.password-recovery-page .security-note p,
.password-recovery-page .password-requirements,
.password-recovery-page .password-strength-label {
    color: #64686d;
    font-size: 12px;
}

.password-recovery-page .password-toggle {
    top: 7px;
    height: 37px;
    color: #68411d;
    background: #f6eadc;
    font-size: 11px;
}

.password-recovery-page .password-toggle:hover,
.password-recovery-page .password-toggle:focus {
    background: #eedac4;
    outline-color: rgba(164, 92, 20, .2);
}

.login-alert-icon {
    display: inline-flex;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.form-field {
    margin-bottom: 17px;
}

.form-field label,
.captcha-field legend {
    display: block;
    margin-bottom: 7px;
    color: #314b5e;
    font-size: 12px;
    font-weight: 700;
}

.form-field input,
.captcha-field input {
    width: 100%;
    min-height: 45px;
    border: 1px solid #bccbd5;
    border-radius: 8px;
    background: #fff;
    color: #1f3748;
    padding: 10px 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-field input::placeholder,
.captcha-field input::placeholder {
    color: #9aa8b2;
}

.form-field input:focus,
.captcha-field input:focus {
    border-color: #238b78;
    box-shadow: 0 0 0 3px rgba(35, 139, 120, .13);
    outline: 0;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 73px;
}

.password-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 35px;
    border: 0;
    border-radius: 6px;
    background: #edf4f6;
    color: #31596d;
    padding: 0 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.password-toggle:hover,
.password-toggle:focus {
    background: #dfecef;
    outline: 2px solid rgba(35, 139, 120, .16);
}

.captcha-field {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 10px;
}

.captcha-equation {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: center;
    border: 1px dashed #9cb8c3;
    border-radius: 8px;
    background: #f1f7f8;
    color: #294f62;
    font-weight: 700;
}

.captcha-equation span {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #fff;
}

.captcha-equation b {
    margin: 0 5px;
    color: #6c8591;
}

.captcha-field small {
    display: block;
    margin-top: 6px;
    color: #7f8e99;
    font-size: 10px;
}

.login-submit {
    display: flex;
    width: 100%;
    min-height: 47px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(110deg, var(--teal-700), var(--teal-600));
    box-shadow: 0 8px 18px rgba(16, 118, 98, .19);
    color: #fff;
    padding: 11px 16px;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.login-submit:hover,
.login-submit:focus {
    background: linear-gradient(110deg, #0d6857, #117d69);
    outline: 3px solid rgba(21, 148, 125, .16);
}

.login-submit:disabled {
    cursor: wait;
    opacity: .72;
}

.submit-arrow {
    margin-left: 9px;
    font-size: 17px;
}

.login-help {
    margin-top: 15px;
    text-align: center;
}

.login-help a {
    color: #2b708f;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.login-help a:hover,
.login-help a:focus {
    text-decoration: underline;
}

.forgot-password-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid #9eb9c8;
    border-radius: 8px;
    background: #edf5f8;
    color: #245f7a !important;
    padding: 9px 15px;
    font-size: 12px !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.forgot-password-button span {
    display: inline-flex;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2b708f;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.forgot-password-button:hover,
.forgot-password-button:focus {
    border-color: #568ba4;
    background: #dfedf3;
    box-shadow: 0 0 0 3px rgba(43, 112, 143, .13);
    text-decoration: none !important;
    outline: 0;
}

.security-note {
    display: flex;
    margin-top: 25px;
    padding-top: 18px;
    align-items: flex-start;
    border-top: 1px solid #e6ecef;
}

.security-note-icon {
    margin-right: 8px;
    font-size: 13px;
}

.security-note p {
    margin: 0;
    color: #7c8b96;
    font-size: 10px;
    line-height: 1.55;
}

.login-footer {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #6d7e89;
    padding: 12px 20px;
    font-size: 10px;
    text-align: center;
}

.login-footer span + span::before {
    margin-right: 9px;
    color: #a2afb7;
    content: "•";
}

@media (max-width: 820px) {
    .login-page {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .login-shell {
        max-width: 560px;
        grid-template-columns: 1fr;
    }

    .login-brand {
        min-height: auto;
        padding: 27px;
    }

    .brand-copy {
        padding: 36px 0 27px;
    }

    .brand-copy h1 {
        font-size: 31px;
    }

    .brand-features {
        display: none;
    }

    .login-panel-inner {
        padding: 32px 28px;
    }
}

@media (max-width: 420px) {
    .login-page {
        padding: 0;
    }

    .login-shell {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-brand {
        padding: 22px;
    }

    .brand-copy {
        padding: 29px 0 10px;
    }

    .brand-copy p {
        display: none;
    }

    .login-panel-inner {
        padding: 29px 22px;
    }

    .captcha-row {
        grid-template-columns: 1fr;
    }
}

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