@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: light;
    font-family: 'Inter', Arial, sans-serif;

    --login-yellow: #f6bf0a;
    --login-text: #193544;
    --login-muted: #7b8986;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #082b3b;
}

body.atlas-login {
    position: relative;
    isolation: isolate;

    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;

    color: #ffffff;
    background:
        radial-gradient(
            ellipse at 12% 20%,
            rgba(52, 115, 124, .30),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 95% 90%,
            rgba(5, 20, 32, .55),
            transparent 60%
        ),
        linear-gradient(125deg, #103b4d, #082b3b);

    -webkit-font-smoothing: antialiased;
}
/* POLA JARINGAN SAMAR — WARNA BACKGROUND TETAP */

body.atlas-login::before {
    content: "";

    position: fixed;
    z-index: -1;
    inset: 0;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'%3E%3Cg fill='none' stroke='%23b9d9df' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M40 100 190 55 340 145 545 70 745 175M40 100 135 300 340 145 420 355 745 175M135 300 240 525 420 355 650 490 745 175M190 55 135 300M545 70 420 355M240 525 650 490'/%3E%3C/g%3E%3Cg fill='%23c2dfe4' fill-opacity='.15'%3E%3Ccircle cx='40' cy='100' r='3'/%3E%3Ccircle cx='190' cy='55' r='3'/%3E%3Ccircle cx='340' cy='145' r='4'/%3E%3Ccircle cx='545' cy='70' r='3'/%3E%3Ccircle cx='745' cy='175' r='3'/%3E%3Ccircle cx='135' cy='300' r='4'/%3E%3Ccircle cx='420' cy='355' r='4'/%3E%3Ccircle cx='240' cy='525' r='3'/%3E%3Ccircle cx='650' cy='490' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c2dfe4' stroke-opacity='.06'%3E%3Ccircle cx='340' cy='145' r='11'/%3E%3Ccircle cx='420' cy='355' r='11'/%3E%3C/g%3E%3C/svg%3E");

    background-size: 800px 600px;
    background-position: center;
    background-repeat: repeat;

    pointer-events: none;
}

button,
input {
    font: inherit;
}

a,
button,
input,
summary {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid #e0b334;
    outline-offset: 4px;
}

::selection {
    color: #143243;
    background: #ffe392;
}

/* FULLSCREEN LAYOUT */

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    align-items: stretch;
    gap: clamp(32px, 6vw, 120px);

    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 40px clamp(32px, 6vw, 120px);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* IDENTITAS KIRI */

.login-identity {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 42px;

    min-width: 0;
    padding: 0;

    color: #ffffff;
    background: transparent;
    border: 0;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 12px;

    color: #ffffff;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 2px;
    text-decoration: none;
}

.login-brand svg {
    flex-shrink: 0;
    color: #f4d671;
}

.login-identity-content {
    width: 100%;
    max-width: 660px;
    padding: 28px 0;
}

.login-eyebrow {
    display: block;
    margin-bottom: 24px;

    color: #a6c1c8;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 2.2px;
}

.login-identity h2 {
    margin: 0;

    font-size: clamp(44px, 4.8vw, 78px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -2.5px;
}

.login-identity h2 span {
    color: #f7cc45;
}

.login-identity-content > p {
    max-width: 420px;
    margin: 25px 0 0;

    color: #b0c7ce;
    font-size: 14px;
    line-height: 1.95;
}

.login-identity-footer {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #95b3bd;
    font-size: 11px;
    line-height: 1.8;
}

.login-footer-mark {
    flex-shrink: 0;
    width: 6px;
    height: 6px;

    background: #f4cd65;
    border-radius: 50%;
}

/* ILUSTRASI JARINGAN */

.login-network-art {
    position: relative;

    width: 100%;
    max-width: 380px;
    height: 156px;
    margin-top: 38px;
}

.network-node {
    position: absolute;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: #b1cdd4;
    background: #153e4e;
    border: 1px solid #416573;
    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(0, 15, 25, .12);
}

.network-node svg {
    width: 24px;
    height: 24px;

    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.network-node--left {
    top: 18px;
    left: 0;
}

.network-node--center {
    top: 10px;
    left: calc(50% - 30px);

    width: 60px;
    height: 60px;

    color: #f5cf68;
    background: #294a50;
    border-color: #8b8054;

    box-shadow:
        0 0 0 8px rgba(246, 191, 10, .04),
        0 8px 24px rgba(0, 15, 25, .15);
}

.network-node--right {
    top: 18px;
    right: 0;
}

.network-node--bottom {
    top: 108px;
    left: calc(50% - 24px);
}

.network-line {
    position: absolute;
    background: #466773;
}

.network-line--left {
    top: 41px;
    left: 48px;
    width: calc(50% - 78px);
    height: 1px;
}

.network-line--right {
    top: 41px;
    right: 48px;
    width: calc(50% - 78px);
    height: 1px;
}

.network-line--bottom {
    top: 70px;
    left: 50%;
    width: 1px;
    height: 38px;
}

/* KARTU FORM MENGAMBANG */

.login-form-panel {
    position: relative;
    align-self: center;
    justify-self: center;

    display: flex;
    flex-direction: column;
    gap: 30px;

    width: 100%;
    max-width: 460px;
    min-width: 0;
    padding: 42px 38px 26px;

    color: var(--login-text);
    background: #fffefa;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 18px;

    box-shadow:
        0 35px 90px rgba(0, 15, 25, .30),
        0 8px 25px rgba(0, 15, 25, .12);
}

/* Aksen kecil di tepi atas kartu. */
.login-form-panel::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 38px;

    width: 48px;
    height: 4px;

    background: #f6bf0a;
    border-radius: 0 0 4px 4px;
}

.login-form-content {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.login-section-label {
    display: block;
    margin-bottom: 15px;

    color: #8b958b;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 1.8px;
}

.login-form-panel h1 {
    margin: 0 0 12px;

    color: #193544;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.9px;
}

.login-description {
    margin: 0 0 28px;

    color: var(--login-muted);
    font-size: 12px;
    line-height: 1.9;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

.login-field {
    min-width: 0;
}

.login-field > label,
.login-first-access-content > label {
    display: block;
    margin: 0 0 9px;

    color: #3b525d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap > svg {
    position: absolute;
    top: 50%;
    left: 14px;

    width: 18px;
    height: 18px;

    color: #8c9e9c;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform: translateY(-50%);
    pointer-events: none;
}

.login-input-wrap > input,
.login-first-access-content > input {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 13px 14px 13px 43px;

    color: #263e4a;
    background: #ffffff;
    border: 1px solid #dce3dc;
    border-radius: 7px;

    font-size: 13px;
    line-height: 1.5;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.login-input-wrap input::placeholder,
.login-first-access-content input::placeholder {
    color: #a3ada7;
    opacity: 1;
}

.login-input-wrap input:focus,
.login-first-access-content input:focus {
    border-color: #658d8a;
    outline: 2px solid rgba(67, 119, 114, .17);
    outline-offset: 1px;
    box-shadow: none;
}

.login-input-wrap:focus-within > svg {
    color: #416e74;
}

/* GANTI PASSWORD LOGIN PERTAMA */

.login-first-access {
    margin: -3px 0 0;
}

.login-first-access > summary {
    width: fit-content;

    color: #6e827e;
    font-size: 10px;
    line-height: 1.8;
    cursor: pointer;
}

.login-first-access > summary:hover {
    color: #234f5c;
}

.login-first-access-content {
    margin-top: 13px;
    padding: 14px;

    background: #f5f7f1;
    border: 1px solid #e3e8dc;
    border-radius: 7px;
}

.login-first-access-content > input {
    padding-left: 12px;
}

.login-first-access-content > p {
    margin: 9px 0 0;

    color: #819082;
    font-size: 10px;
    line-height: 1.8;
}

/* TOMBOL MASUK */

.login-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
    min-height: 48px;
    margin: 2px 0 0;
    padding: 13px 17px;

    color: #26353b;
    background: var(--login-yellow);
    border: 1px solid #e9b508;
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.login-submit:hover {
    background: #ffcd2d;
    border-color: #e5ae00;
}

.login-submit:active {
    background: #ebb709;
}

.login-submit svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* PESAN ERROR */

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 22px;
    padding: 12px 13px;

    color: #b44d57;
    background: #fff1ef;
    border: 1px solid #efd6d3;
    border-radius: 7px;

    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.login-error > svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* FOOTER KARTU */

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

.login-help-line {
    display: block;
    width: 36px;
    height: 1px;
    margin: 0 auto 15px;

    background: #dbe2d8;
}

.login-help p {
    margin: 0;

    color: #8e998e;
    font-size: 10px;
    line-height: 1.9;
}

.login-form-footer {
    color: #9aa49a;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 1.3px;
    text-align: center;
}

.login-form-footer span {
    margin: 0 6px;
    color: #c4ccc1;
}

/* TABLET */

@media (max-width: 1000px) {
    .login-shell {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
        gap: 35px;
        padding: 32px;
    }

    .login-identity h2 {
        font-size: 47px;
        letter-spacing: -1.8px;
    }

    .login-identity-content > p {
        font-size: 12px;
    }

    .login-form-panel {
        padding: 36px 28px 24px;
    }

    .login-form-panel::before {
        left: 28px;
    }
}

/* MOBILE */

@media (max-width: 760px) {
    .login-shell {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: 30px;

        padding: 28px 20px;
    }

    .login-identity {
        justify-self: center;
        gap: 24px;

        width: 100%;
        max-width: 460px;
    }

    .login-brand {
        font-size: 23px;
    }

    .login-brand svg {
        width: 29px;
        height: 29px;
    }

    .login-identity-content {
        padding: 0;
    }

    .login-eyebrow {
        margin-bottom: 13px;
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .login-identity h2 {
        font-size: 37px;
        line-height: 1.15;
        letter-spacing: -1.2px;
    }

    .login-identity h2 br {
        display: none;
    }

    .login-identity-content > p {
        max-width: 380px;
        margin-top: 15px;
        font-size: 11px;
    }

    .login-network-art,
    .login-identity-footer {
        display: none;
    }

    .login-form-panel {
        align-self: auto;
        padding: 32px 27px 23px;
        border-radius: 14px;
    }

    .login-form-panel::before {
        left: 27px;
    }

    .login-form-panel h1 {
        font-size: 27px;
    }

    .login-input-wrap > input,
    .login-first-access-content > input {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .login-shell {
        padding: 24px 14px;
    }

    .login-form-panel {
        padding: 30px 21px 22px;
    }

    .login-form-panel::before {
        left: 21px;
    }

    .login-identity h2 {
        font-size: 32px;
    }
}

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

/* FULLSCREEN — HENTIKAN LAYOUT MELEBAR KE BAWAH */

html {
    height: 100%;
}

body.atlas-login {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    align-items: center;
    gap: clamp(24px, 5vw, 90px);

    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 24px clamp(24px, 6vw, 110px);

    overflow: hidden;
}

.login-identity {
    align-self: stretch;
    min-height: 0;
    gap: 20px;
}

.login-identity-content {
    padding: 0;
}

.login-identity h2 {
    font-size: clamp(36px, 4.5vw, 68px);
}

.login-identity-content > p {
    margin-top: 18px;
}

.login-network-art {
    margin-top: 22px;
}

.login-form-panel {
    align-self: center;
    justify-self: center;

    width: 100%;
    max-width: 460px;
    min-height: 0;
    max-height: 100%;
    padding: 30px 32px 20px;
    gap: 20px;

    /* Jika error atau kolom password baru dibuka,
       hanya isi kartu yang boleh bergulir. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c5d0c4 transparent;
}

.login-description {
    margin-bottom: 22px;
}

.login-form {
    gap: 16px;
}

.login-help {
    margin-top: 20px;
}

/* LAYAR PENDEK / LAPTOP */
@media (max-height: 720px) {
    .login-shell {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .login-network-art {
        display: none;
    }

    .login-form-panel {
        padding-top: 25px;
        padding-bottom: 18px;
        gap: 15px;
    }

    .login-section-label {
        margin-bottom: 10px;
    }

    .login-description {
        margin-bottom: 18px;
    }

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

/* HP — FORM DI TENGAH, BUKAN MENUMPUK PANEL PANJANG */
@media (max-width: 760px) {
    .login-shell {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-content: normal;
        gap: 0;

        height: 100%;
        min-height: 0;
        padding: 76px 18px 20px;
    }

    .login-identity {
        position: absolute;
        top: 22px;
        left: 24px;

        display: block;
        width: auto;
        max-width: none;
    }

    .login-brand {
        font-size: 23px;
    }

    .login-identity-content,
    .login-identity-footer {
        display: none;
    }

    .login-form-panel {
        align-self: center;
        width: 100%;
        max-width: 430px;
        max-height: 100%;
        padding: 28px 24px 20px;
    }
}

/* INGAT SAYA */

.login-options {
    display: flex;
    align-items: center;
    margin: -2px 0 0;
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin: 0;
    padding: 3px 0;

    color: #6e827e;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

.login-remember > input[type="checkbox"] {
    flex: 0 0 auto;
    appearance: auto;

    width: 16px;
    height: 16px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;

    accent-color: #0c3547;
    cursor: pointer;
}

.login-remember > input[type="checkbox"]:focus-visible {
    outline: 2px solid #c69c24;
    outline-offset: 3px;
}

.login-remember:hover {
    color: #234f5c;
}

/* =========================================
   LOGIN — INTERACTIVE UX
========================================= */

body.atlas-login {
    --pointer-x: 50%;
    --pointer-y: 40%;
}

/* Cahaya lembut mengikuti pointer. */
body.atlas-login::after {
    content: "";

    position: fixed;
    z-index: -1;
    inset: 0;

    background: radial-gradient(
        440px circle at var(--pointer-x) var(--pointer-y),
        rgba(108, 172, 174, .10),
        transparent 75%
    );

    pointer-events: none;
}

/* Kartu bergerak sangat tipis, bukan mengambang terus-menerus. */
.login-form-panel {
    transform:
        perspective(1200px)
        rotateX(var(--card-rx, 0deg))
        rotateY(var(--card-ry, 0deg));

    transition:
        transform 320ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 320ms ease;
}

/* Respons ikon ketika input dipilih. */
.login-input-wrap > svg {
    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.login-input-wrap:focus-within > svg {
    color: #2d7479;
    opacity: 1;
}

.login-input-wrap > input,
.login-first-access-content > input {
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 220ms ease;
}

.login-input-wrap > input:focus,
.login-first-access-content > input:focus {
    background-color: #fefffc;
    border-color: #648c86;
    box-shadow: 0 0 0 4px rgba(67, 119, 114, .07);
}

/* Ruang untuk tombol tampilkan password. */
.login-input-wrap.has-password-toggle > input {
    padding-right: 48px;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;

    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;

    color: #82978f;
    background: transparent;
    border: 0;
    border-radius: 5px;

    transform: translateY(-50%);
    cursor: pointer;
}

.login-password-toggle:hover {
    color: #285765;
    background: #eef3ed;
}

.login-password-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tombol dengan sorotan singkat saat hover. */
.login-submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms ease,
        transform 180ms ease;
}

.login-submit::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset: -60% auto -60% -70%;

    width: 40%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .30),
        transparent
    );

    transform: skewX(-20deg);
    pointer-events: none;
}

@keyframes atlas-login-button-shine {
    to {
        left: 140%;
    }
}

@media (hover: hover) and (pointer: fine) {
    .login-submit:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 5px 16px rgba(153, 117, 9, .15);
    }

    .login-submit:hover:not(:disabled)::before {
        animation: atlas-login-button-shine 650ms ease;
    }
}

.login-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* Loading hanya setelah submit form valid. */
.login-submit:disabled {
    cursor: wait;
    opacity: .85;
}

.login-submit[aria-busy="true"] > svg {
    display: none;
}

.login-submit[aria-busy="true"]::after {
    content: "";

    flex: 0 0 auto;
    width: 17px;
    height: 17px;

    border: 2px solid rgba(38, 53, 59, .22);
    border-top-color: #26353b;
    border-radius: 50%;

    animation: atlas-login-spin 700ms linear infinite;
}

@keyframes atlas-login-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Peringatan Caps Lock, tidak mengubah ukuran layout. */
.login-caps-hint {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);

    margin: 0;

    color: #a17d24;
    font-size: 10px;
    line-height: 1.5;
}

.login-caps-hint[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    body.atlas-login .login-form-panel {
        transform: none !important;
        transition: none !important;
    }

    body.atlas-login .login-submit::before,
    body.atlas-login .login-submit::after {
        animation: none !important;
    }

    body.atlas-login .login-submit:hover {
        transform: none;
    }
}

/* =========================================
   LOGIN — ANIMASI SAAT DIBUKA / REFRESH
========================================= */

@keyframes login-brand-enter {
    from {
        opacity: 0;
        translate: 0 -8px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes login-copy-enter {
    from {
        opacity: 0;
        translate: 0 12px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes login-card-enter {
    from {
        opacity: 0;
        translate: 0 18px;
        scale: .985;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes login-detail-enter {
    from {
        opacity: 0;
        translate: 0 6px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* Logo */
body.atlas-login .login-brand {
    animation:
        login-brand-enter
        650ms
        cubic-bezier(.22, 1, .36, 1)
        40ms
        backwards;
}

/* Identitas kiri */
body.atlas-login .login-eyebrow {
    animation:
        login-copy-enter
        700ms
        cubic-bezier(.22, 1, .36, 1)
        100ms
        backwards;
}

body.atlas-login .login-identity h2 {
    animation:
        login-copy-enter
        800ms
        cubic-bezier(.22, 1, .36, 1)
        170ms
        backwards;
}

body.atlas-login .login-identity-content > p {
    animation:
        login-copy-enter
        800ms
        cubic-bezier(.22, 1, .36, 1)
        240ms
        backwards;
}

body.atlas-login .login-network-art,
body.atlas-login .login-identity-footer {
    animation:
        login-detail-enter
        850ms
        cubic-bezier(.22, 1, .36, 1)
        300ms
        backwards;
}

/*
 * Menggunakan translate dan scale terpisah.
 * Transform untuk efek kartu mengikuti mouse tetap dipakai.
 */
body.atlas-login .login-form-panel {
    animation:
        login-card-enter
        850ms
        cubic-bezier(.22, 1, .36, 1)
        120ms
        backwards;
}

/* Isi kartu menyusul secara ringan */
body.atlas-login .login-section-label,
body.atlas-login #login-title,
body.atlas-login .login-description {
    animation:
        login-detail-enter
        650ms
        cubic-bezier(.22, 1, .36, 1)
        220ms
        backwards;
}

body.atlas-login .login-field:nth-of-type(1) {
    animation:
        login-detail-enter
        650ms
        cubic-bezier(.22, 1, .36, 1)
        280ms
        backwards;
}

body.atlas-login .login-field:nth-of-type(2) {
    animation:
        login-detail-enter
        650ms
        cubic-bezier(.22, 1, .36, 1)
        340ms
        backwards;
}

body.atlas-login .login-options,
body.atlas-login .login-first-access,
body.atlas-login .login-submit,
body.atlas-login .login-help,
body.atlas-login .login-form-footer {
    animation:
        login-detail-enter
        700ms
        cubic-bezier(.22, 1, .36, 1)
        390ms
        backwards;
}

/* Error langsung terlihat, tidak ikut menunggu animasi. */
body.atlas-login:has(.login-error) .login-form-panel,
body.atlas-login:has(.login-error) .login-form-panel * {
    animation: none;
}

/* Hormati pengaturan aksesibilitas */
@media (prefers-reduced-motion: reduce) {
    body.atlas-login *,
    body.atlas-login *::before,
    body.atlas-login *::after {
        animation: none !important;
        transition: none !important;
    }
}