/* =========================================================
   LANGKAH KUDA — AUTHENTICATION + RECOVERY
   3X-B5-A4-B
   ========================================================= */

.lk-auth-shell,
.lk-recovery-shell {
    width: min(
        calc(100% - 32px),
        1040px
    );

    margin:
        clamp(28px, 5vw, 64px)
        auto;

    color:
        var(--lk-ink);
}


.lk-auth-shell {
    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(340px, 1.08fr);

    gap:
        clamp(24px, 5vw, 60px);

    align-items: start;
}


.lk-auth-brand {
    padding:
        clamp(12px, 2vw, 24px)
        0;
}


.lk-auth-brand-link {
    display: inline-flex;

    margin-bottom: 34px;
}


.lk-auth-logo,
.lk-recovery-logo {
    display: block;

    width: auto;

    max-width: 100%;

    object-fit: contain;
}


.lk-auth-logo {
    max-height: 64px;
}


.lk-recovery-logo {
    max-height: 58px;

    margin-bottom: 24px;
}


.lk-auth-eyebrow {
    display: block;

    margin-bottom: 9px;

    color:
        var(--lk-brand-burgundy);

    font-size: .73rem;

    font-weight: 800;

    letter-spacing: .12em;
}


.lk-auth-brand h1,
.lk-recovery-card h1 {
    margin:
        0 0 14px;

    max-width: 640px;

    color:
        var(--lk-ink);

    font-size:
        clamp(
            2.05rem,
            4.6vw,
            3.45rem
        );

    line-height: 1.02;

    letter-spacing: -.04em;
}


.lk-auth-brand > p,
.lk-recovery-card > p {
    max-width: 600px;

    color:
        var(--lk-ink-soft);

    line-height: 1.7;
}


.lk-auth-role-switch {
    grid-column: 1;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin-top: 28px;
}


.lk-auth-role {
    min-width: 0;

    padding: 14px 12px;

    color:
        var(--lk-ink-soft);

    text-decoration: none;

    border:
        1px solid
        var(--lk-border);

    border-radius:
        var(--lk-radius-sm);

    background:
        var(--lk-surface);
}


.lk-auth-role span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--lk-brand-gold);

    font-size: .68rem;

    font-weight: 800;
}


.lk-auth-role b {
    display: block;

    color:
        var(--lk-ink);

    font-size: .9rem;
}


.lk-auth-role small {
    display: block;

    margin-top: 5px;

    font-size: .72rem;

    line-height: 1.4;
}


.lk-auth-role.is-active {
    border-color:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            44%,
            var(--lk-border)
        );

    background:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            5%,
            var(--lk-surface)
        );

    box-shadow:
        inset 0 3px 0
        var(--lk-brand-burgundy);
}


.lk-auth-card {
    grid-column: 2;

    grid-row:
        1 / span 2;

    padding:
        clamp(24px, 4vw, 38px);

    border:
        1px solid
        var(--lk-border);

    border-top:
        3px solid
        var(--lk-brand-burgundy);

    border-radius:
        var(--lk-radius-lg);

    background:
        var(--lk-surface);

    box-shadow:
        var(--lk-shadow-md);
}


.lk-auth-card-head > span {
    color:
        var(--lk-brand-gold);

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .11em;
}


.lk-auth-card-head h2 {
    margin:
        7px 0 24px;

    font-size:
        clamp(
            1.5rem,
            3vw,
            2rem
        );

    letter-spacing: -.025em;
}


.lk-auth-form {
    display: grid;

    gap: 18px;
}


.lk-auth-field {
    display: grid;

    gap: 8px;
}


.lk-auth-field label {
    margin: 0;

    color:
        var(--lk-ink);

    font-size: .84rem;

    font-weight: 750;
}


.lk-auth-field input {
    width: 100%;

    min-height: 48px;

    padding:
        0 13px;

    color:
        var(--lk-ink);

    background:
        var(--lk-surface);

    border:
        1px solid
        var(--lk-border-strong);

    border-radius:
        var(--lk-radius-sm);

    font: inherit;

    transition:
        border-color
        var(--lk-transition-fast),
        box-shadow
        var(--lk-transition-fast);
}


.lk-auth-field input:focus {
    outline: none;

    border-color:
        var(--lk-brand-burgundy-soft);

    box-shadow:
        var(--lk-focus-ring);
}


.lk-auth-label-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;
}


.lk-auth-forgot {
    font-size: .79rem;

    font-weight: 700;
}


.lk-auth-password-wrap {
    position: relative;
}


.lk-auth-password-wrap input {
    padding-right: 96px;
}


.lk-auth-password-toggle {
    position: absolute;

    top: 50%;
    right: 8px;

    transform:
        translateY(-50%);

    min-height: 32px;

    padding:
        0 8px;

    color:
        var(--lk-brand-burgundy);

    background:
        transparent;

    border: 0;

    border-radius:
        var(--lk-radius-xs);

    font: inherit;

    font-size: .74rem;

    font-weight: 750;

    cursor: pointer;
}


.lk-auth-submit {
    width: 100%;

    min-height: 48px;

    margin-top: 2px;
}


.lk-auth-alert {
    margin-bottom: 20px;

    padding:
        14px 16px;

    color:
        var(--lk-danger);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--lk-danger)
            30%,
            var(--lk-border)
        );

    border-radius:
        var(--lk-radius-sm);

    background:
        color-mix(
            in srgb,
            var(--lk-danger)
            5%,
            var(--lk-surface)
        );
}


.lk-auth-alert strong,
.lk-auth-alert p,
.lk-auth-alert small {
    display: block;

    margin: 0;
}


.lk-auth-alert p {
    margin-top: 5px;
}


.lk-auth-alert small {
    margin-top: 7px;

    color:
        var(--lk-ink-soft);

    line-height: 1.45;
}


.lk-auth-field-error {
    color:
        var(--lk-danger);

    line-height: 1.45;
}


.lk-auth-help {
    color:
        var(--lk-ink-muted);

    line-height: 1.5;
}


.lk-auth-help ul {
    margin:
        6px 0 0;

    padding-left: 20px;
}


.lk-auth-foot {
    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid
        var(--lk-border);
}


.lk-auth-foot p {
    margin:
        0 0 8px;
}


.lk-auth-foot small {
    color:
        var(--lk-ink-muted);

    line-height: 1.5;
}


/* Recovery */

.lk-recovery-shell {
    max-width: 660px;
}


.lk-recovery-card {
    padding:
        clamp(28px, 5vw, 46px);

    border:
        1px solid
        var(--lk-border);

    border-top:
        3px solid
        var(--lk-brand-burgundy);

    border-radius:
        var(--lk-radius-lg);

    background:
        var(--lk-surface);

    box-shadow:
        var(--lk-shadow-md);
}


.lk-recovery-card
.lk-auth-form {
    margin-top: 26px;
}


.lk-recovery-back {
    display: inline-flex;

    margin-top: 22px;

    font-weight: 700;
}


.lk-recovery-mark {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    margin-bottom: 20px;

    color:
        var(--lk-brand-burgundy-deep);

    background:
        var(--lk-brand-gold-soft);

    border-radius: 50%;

    font-weight: 900;
}


.lk-recovery-security-note {
    padding:
        12px 14px;

    border:
        1px solid
        var(--lk-border);

    border-radius:
        var(--lk-radius-sm);

    background:
        var(--lk-paper-soft);

    font-size: .84rem;
}


/* Dark */

html[data-theme="malam"]
.lk-auth-card,
html[data-theme="malam"]
.lk-auth-role,
html[data-theme="malam"]
.lk-recovery-card {
    background:
        var(--lk-surface);
}


/* Responsive */

@media (
    max-width: 820px
) {
    .lk-auth-shell {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .lk-auth-card {
        grid-column: 1;

        grid-row: auto;
    }

    .lk-auth-role-switch {
        grid-column: 1;

        margin-top: 6px;
    }

    .lk-auth-brand-link {
        margin-bottom: 22px;
    }
}


@media (
    max-width: 560px
) {
    .lk-auth-shell,
    .lk-recovery-shell {
        width:
            calc(100% - 22px);

        margin:
            20px auto 34px;
    }

    .lk-auth-role-switch {
        grid-template-columns: 1fr;
    }

    .lk-auth-role {
        display: grid;

        grid-template-columns:
            auto 1fr;

        column-gap: 10px;

        align-items: center;

        padding: 10px 12px;
    }

    .lk-auth-role span {
        grid-row:
            1 / span 2;

        margin: 0;
    }

    .lk-auth-role small {
        margin-top: 2px;
    }

    .lk-auth-card,
    .lk-recovery-card {
        padding:
            22px 18px;

        border-radius:
            var(--lk-radius-md);
    }

    .lk-auth-label-row {
        align-items: baseline;
    }
}


/* =========================================================
   3X-B5-A4-B2
   COMPACT PASSWORD RECOVERY
   ========================================================= */

.lk-recovery-shell {
    width:
        min(
            calc(100% - 32px),
            610px
        );

    margin:
        clamp(24px, 4vw, 46px)
        auto;
}


.lk-recovery-card {
    padding:
        clamp(
            26px,
            4vw,
            36px
        );

    border-radius:
        var(--lk-radius-lg);
}


.lk-recovery-logo {
    width: 118px;

    max-width: 36%;

    height: auto;

    max-height: none;

    margin-bottom: 20px;
}


.lk-recovery-card h1 {
    margin-bottom: 11px;

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );
}


.lk-recovery-card > p {
    margin:
        0 0 18px;

    line-height: 1.62;
}


.lk-recovery-card
.lk-auth-form {
    margin-top: 20px;
}


.lk-recovery-card
.lk-auth-submit {
    margin-top: 2px;
}


.lk-recovery-back {
    margin-top: 18px;

    font-size: .9rem;
}


.lk-recovery-security-note {
    margin:
        16px 0 18px;

    padding:
        11px 13px;

    line-height: 1.5;
}


.lk-recovery-mark {
    width: 42px;
    height: 42px;

    margin-bottom: 16px;
}


@media (
    max-width: 560px
) {
    .lk-recovery-shell {
        width:
            calc(100% - 22px);

        margin:
            16px auto 30px;
    }

    .lk-recovery-card {
        padding:
            22px 18px;
    }

    .lk-recovery-logo {
        width: 104px;

        margin-bottom: 16px;
    }
}


/* =========================================================
   3X-B5-A4-B2-C
   RECOVERY SECONDARY ACTION
   ========================================================= */

.lk-recovery-return {
    display: inline-flex;

    gap: 8px;

    align-items: center;

    min-height: 42px;

    margin-top: 2px;

    color:
        var(--lk-brand-burgundy-deep);

    background:
        var(--lk-paper-soft);

    border:
        1px solid
        var(--lk-border-strong);

    box-shadow:
        none;
}


.lk-recovery-return:hover {
    color:
        var(--lk-brand-burgundy);

    background:
        var(--lk-surface);

    border-color:
        var(--lk-brand-burgundy-soft);
}

/* B4-AUTH-A2 REGISTRATION UX START */

.lk-register-shell {
    align-items: center;
}


.lk-register-card {
    position: relative;
    overflow: hidden;
}


.lk-register-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 120px;
    height: 120px;

    border-radius:
        0 0 0 100%;

    background:
        color-mix(
            in srgb,
            var(--lk-brand-gold)
            9%,
            transparent
        );

    pointer-events: none;
}


.lk-register-intro {
    margin:
        -14px 0 24px;

    color:
        var(--lk-ink-soft);

    font-size: .88rem;
    line-height: 1.55;
}


.lk-register-points {
    display: grid;

    gap: 12px;

    margin-top: 30px;

    max-width: 520px;
}


.lk-register-point {
    display: grid;

    grid-template-columns:
        34px minmax(0, 1fr);

    gap: 12px;

    align-items: start;

    padding:
        12px 0;

    border-top:
        1px solid
        var(--lk-border);
}


.lk-register-point > span {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    color:
        var(--lk-brand-burgundy);

    border:
        1px solid
        var(--lk-border-strong);

    border-radius:
        999px;

    font-size: .65rem;
    font-weight: 800;
}


.lk-register-point strong,
.lk-register-point small {
    display: block;
}


.lk-register-point strong {
    color:
        var(--lk-ink);

    font-size: .88rem;
}


.lk-register-point small {
    margin-top: 3px;

    color:
        var(--lk-ink-soft);

    font-size: .76rem;
    line-height: 1.45;
}


.lk-auth-field-note {
    margin-top: -2px;

    color:
        var(--lk-ink-soft);

    font-size: .73rem;
    line-height: 1.45;
}


.lk-auth-password-help {
    color:
        var(--lk-ink-soft);

    font-size: .73rem;
    line-height: 1.5;
}


.lk-auth-password-help ul {
    margin:
        4px 0 0;

    padding-left: 18px;
}


.lk-auth-password-help li + li {
    margin-top: 3px;
}


.lk-auth-password-wrap input {
    padding-right: 54px;
}


.lk-auth-eye-toggle {
    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;
    min-height: 36px;

    right: 7px;

    padding: 0;

    border:
        1px solid
        transparent;

    border-radius: 999px;
}


.lk-auth-eye-toggle:hover {
    background:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            7%,
            transparent
        );
}


.lk-auth-eye-toggle:focus-visible {
    outline: none;

    border-color:
        var(--lk-brand-burgundy-soft);

    box-shadow:
        var(--lk-focus-ring);
}


.lk-auth-eye-toggle svg {
    width: 19px;
    height: 19px;

    fill: none;

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


.lk-auth-eye-toggle
[data-password-hide-icon] {
    display: none;
}


.lk-auth-eye-toggle[aria-pressed="true"]
[data-password-show-icon] {
    display: none;
}


.lk-auth-eye-toggle[aria-pressed="true"]
[data-password-hide-icon] {
    display: block;
}


.lk-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


.lk-register-foot {
    padding-top: 18px;

    border-top:
        1px solid
        var(--lk-border);
}


.lk-recovery-brand-link {
    display: inline-flex;

    text-decoration: none;
}


@media (max-width: 760px) {

    .lk-register-shell {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .lk-register-shell
    .lk-auth-brand {
        grid-column: 1;
    }


    .lk-register-shell
    .lk-auth-card {
        grid-column: 1;
        grid-row: auto;
    }


    .lk-register-points {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        margin-top: 20px;
    }


    .lk-register-point {
        display: block;

        padding:
            12px 8px 0;
    }


    .lk-register-point > span {
        margin-bottom: 10px;
    }

}


@media (max-width: 540px) {

    .lk-register-points {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .lk-register-point {
        display: grid;

        grid-template-columns:
            34px minmax(0, 1fr);

        padding:
            10px 0;
    }


    .lk-register-point > span {
        margin-bottom: 0;
    }


    .lk-register-card {
        padding:
            22px 18px;
    }


    .lk-auth-password-help ul {
        padding-left: 16px;
    }

}

/* B4-AUTH-A2 REGISTRATION UX END */