/* Login is intentionally isolated from authenticated Backoffice surfaces. */
.login-page {
    --login-purple: #6c4df6;
    --login-purple-deep: #5034d8;
    --login-pink: #c950d7;
    --login-coral: #f06f84;
    --login-ink: #29233d;
    --login-muted: #827c94;
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    overflow-x: hidden;
    padding: 36px 20px;
    color: var(--login-ink);
    background-color: #f7f5ff;
    background-image: url('/images/login-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.login-page::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 18%, rgb(255 255 255 / 74%) 0 13%, transparent 36%),
        linear-gradient(135deg, rgb(250 248 255 / 48%), rgb(245 241 255 / 18%));
}

.login-page .login-overlay {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgb(108 77 246 / 10%) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.login-page .login-shell {
    position: relative;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    width: min(1040px, 100%);
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 34px;
    background: rgb(255 255 255 / 70%);
    box-shadow: 0 30px 80px rgb(71 45 137 / 18%), 0 8px 30px rgb(71 45 137 / 10%);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.login-page .login-brand-side {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    place-items: center;
    padding: 42px 46px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(circle at 20% 16%, rgb(255 255 255 / 22%), transparent 28%),
        radial-gradient(circle at 86% 82%, rgb(255 120 181 / 27%), transparent 30%),
        linear-gradient(145deg, #5b42e6 0%, #7c4be7 43%, #ae4ed9 72%, #e266a4 100%);
}

.login-page .login-brand-side::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .2;
    background-image: radial-gradient(#fff 1px, transparent 1px);
    background-position: 12px 12px;
    background-size: 24px 24px;
    mask-image: linear-gradient(130deg, #000, transparent 38%, transparent 66%, #000);
}

.login-page .login-decoration {
    position: absolute;
    display: block;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 50%;
    background: rgb(255 255 255 / 9%);
}

.login-page .login-decoration-one {
    inset-block-start: -70px;
    inset-inline-start: -74px;
    width: 230px;
    height: 230px;
}

.login-page .login-decoration-two {
    inset-inline-end: -90px;
    inset-block-end: -105px;
    width: 290px;
    height: 290px;
}

.login-page .login-decoration-three {
    inset-inline-end: 52px;
    inset-block-start: 62px;
    width: 64px;
    height: 64px;
}

.login-page .login-brand-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.login-page .login-brand-lockup,
.login-page .login-mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.login-page .login-brand-mark {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 56%);
    border-radius: 16px;
    color: #6547e9;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 12px 30px rgb(45 20 106 / 19%);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.login-page .login-brand-words {
    display: grid;
    text-align: start;
}

.login-page .login-brand-words strong {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
}

.login-page .login-brand-words small {
    margin-block-start: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    opacity: .78;
}

.login-page .login-illustration {
    display: grid;
    width: min(340px, 96%);
    min-height: 274px;
    flex: 1;
    place-items: center;
    margin-block: 12px 4px;
}

.login-page .login-illustration svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 285px;
}

.login-page .login-brand-message {
    width: min(355px, 100%);
}

.login-page .login-brand-message h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(21px, 2.1vw, 27px);
    font-weight: 800;
    line-height: 1.45;
}

.login-page .login-brand-message p {
    margin: 10px auto 0;
    color: rgb(255 255 255 / 77%);
    font-size: 13px;
    line-height: 1.8;
}

.login-page .login-form-side {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 42px 46px;
    background: rgb(255 255 255 / 77%);
}

.login-page .login-box {
    display: flex;
    width: min(390px, 100%);
    min-width: 0;
    flex-direction: column;
}

.login-page .login-mobile-brand {
    display: none;
    margin-block-end: 26px;
    color: var(--login-ink);
}

.login-page .login-mobile-brand .login-brand-mark {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg, var(--login-purple), var(--login-pink));
}

.login-page .login-mobile-brand small {
    color: var(--login-muted);
}

.login-page .login-language {
    display: flex;
    justify-content: flex-end;
    margin-block-end: 30px;
}

.login-page .language-switch {
    display: inline-flex;
    direction: ltr;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 0;
    border-radius: 14px;
    background: #f4f1ff;
    box-shadow: inset 0 0 0 1px rgb(108 77 246 / 4%);
}

.login-page .language-switch a {
    display: grid;
    min-width: 66px;
    min-height: 34px;
    place-items: center;
    padding: 6px 12px;
    border: 0;
    border-radius: 10px;
    color: #807991;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.login-page .language-switch a:hover {
    color: var(--login-purple-deep);
    background: rgb(255 255 255 / 66%);
}

.login-page .language-switch a:focus-visible {
    outline: 3px solid rgb(108 77 246 / 23%);
    outline-offset: 2px;
}

.login-page .language-switch a.selected {
    color: #fff;
    background: linear-gradient(135deg, var(--login-purple), #8b51e9);
    box-shadow: 0 6px 15px rgb(108 77 246 / 25%);
}

.login-page .login-copy {
    margin: 0 0 27px;
}

.login-page .login-welcome {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-block-end: 14px;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--login-purple-deep);
    background: linear-gradient(135deg, #eee9ff, #f9eafb);
    font-size: 12px;
    font-weight: 800;
}

.login-page .login-copy h1 {
    margin: 0;
    color: var(--login-ink);
    font-size: 30px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.login-page .login-copy h1:focus {
    outline: 0;
}

[dir="rtl"] .login-page .login-copy h1 {
    letter-spacing: 0;
}

.login-page .login-copy p {
    margin: 9px 0 0;
    color: var(--login-muted);
    font-size: 13px;
    line-height: 1.75;
}

.login-page .login-alert {
    margin: -8px 0 20px;
    padding: 11px 13px;
    border: 1px solid #f6c5cd;
    border-radius: 12px;
    color: #a7293b;
    background: #fff2f4;
    font-size: 12px;
    line-height: 1.6;
}

.login-page .login-form {
    display: grid;
    gap: 20px;
    margin: 0;
}

.login-page .login-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.login-page .login-field > label {
    margin: 0;
    color: #504a60;
    font-size: 13px;
    font-weight: 750;
}

.login-page .login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-page .login-input-icon {
    position: absolute;
    z-index: 1;
    inset-inline-start: 17px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #a29cab;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    pointer-events: none;
    transition: stroke .18s ease;
}

.login-page .login-input-wrap:focus-within .login-input-icon {
    stroke: var(--login-purple);
}

.login-page .login-field input {
    width: 100%;
    height: 56px;
    min-width: 0;
    padding-block: 0;
    padding-inline: 49px 16px;
    border: 1.5px solid #ebe8f4;
    border-radius: 15px;
    outline: 0;
    color: var(--login-ink);
    background: rgb(250 249 255 / 88%);
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.login-page .login-field input::placeholder {
    color: #aea8b8;
    opacity: 1;
}

.login-page .login-field input:hover {
    border-color: #dcd5ee;
    background: #fff;
}

.login-page .login-field input:focus {
    border-color: var(--login-purple);
    background: #fff;
    box-shadow: 0 0 0 4px rgb(108 77 246 / 11%);
}

.login-page .login-input-wrap:has(.login-password-toggle) input {
    padding-inline-end: 52px;
}

.login-page .login-password-toggle.barang-icon-button {
    position: absolute;
    z-index: 2;
    inset-inline-end: 10px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #928ba0;
    background: transparent;
    box-shadow: none;
}

.login-page .login-password-toggle.barang-icon-button:hover {
    color: var(--login-purple);
    background: #eeeaff;
}

.login-page .login-password-toggle.barang-icon-button:focus-visible {
    color: var(--login-purple);
    outline: 3px solid rgb(108 77 246 / 21%);
    outline-offset: 1px;
    background: #f2efff;
}

.login-page .login-submit.primary-button {
    display: inline-flex;
    width: 100%;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-block-start: 4px;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(110deg, var(--login-purple) 0%, #8d4fe5 38%, var(--login-pink) 70%, var(--login-coral) 100%);
    box-shadow: 0 12px 25px rgb(130 68 215 / 26%);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.login-page .login-submit.primary-button:hover:not(:disabled) {
    filter: saturate(1.05);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgb(130 68 215 / 31%);
}

.login-page .login-submit.primary-button:focus-visible {
    outline: 3px solid rgb(108 77 246 / 28%);
    outline-offset: 3px;
}

.login-page .login-submit.primary-button:disabled {
    cursor: wait;
    filter: grayscale(.12);
    opacity: .7;
    transform: none;
}

.login-page .login-footer {
    display: grid;
    gap: 5px;
    margin-block-start: 27px;
    color: #a09aaa;
    text-align: center;
}

.login-page .login-footer strong {
    color: #6f687d;
    font-size: 11px;
    font-weight: 800;
}

.login-page .login-footer span {
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .login-page .login-shell {
        grid-template-columns: 1fr;
        width: min(520px, 100%);
        min-height: 0;
        border-radius: 28px;
    }

    .login-page .login-brand-side {
        display: none;
    }

    .login-page .login-form-side {
        padding: 38px 32px;
    }

    .login-page .login-mobile-brand {
        display: flex;
    }
}

@media (max-width: 520px) {
    .login-page {
        align-items: start;
        padding: 16px;
    }

    .login-page .login-shell {
        margin-block: auto;
        border-radius: 24px;
    }

    .login-page .login-form-side {
        padding: 28px 21px 30px;
    }

    .login-page .login-mobile-brand {
        margin-block-end: 22px;
    }

    .login-page .login-mobile-brand .login-brand-mark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
        font-size: 24px;
    }

    .login-page .login-language {
        margin-block-end: 24px;
    }

    .login-page .language-switch {
        width: 100%;
    }

    .login-page .language-switch a {
        min-width: 0;
        flex: 1;
        padding-inline: 7px;
    }

    .login-page .login-copy h1 {
        font-size: 25px;
    }

    .login-page .login-copy {
        margin-block-end: 23px;
    }
}

@media (max-height: 690px) and (min-width: 901px) {
    .login-page {
        align-items: start;
        padding-block: 20px;
    }

    .login-page .login-shell {
        min-height: 590px;
    }

    .login-page .login-brand-side,
    .login-page .login-form-side {
        padding-block: 30px;
    }
}

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