:root {
        --clr-dark: #2e3640;
        --clr-accent: #757159;
        --clr-soft: #d5d2c3;
        --clr-soft-light: #eceae3;
        --clr-soft-xlight: #f4f3ef;
        --clr-white: #ffffff;
        --clr-muted: #8a8070;
        --radius-input: 0.625rem;
        --transition: 0.22s ease;
    }

    .naku-page {
        height: 100vh;
        display: flex;
        overflow: hidden;
        font-family: 'Segoe UI', system-ui, sans-serif;
    }

    /* ── Left Panel ─────────────────────────── */
    .naku-left {
        flex: 0 0 55%;
        position: relative;
        display: none;
    }

    @media (min-width: 900px) {
        .naku-left {
            display: block;
        }
    }

    .naku-left-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

    .naku-left-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(170deg,
                rgba(46, 54, 64, .78) 0%,
                rgba(117, 113, 89, .40) 50%,
                rgba(46, 54, 64, .85) 100%);
    }

    .naku-left-inner {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3rem 3.5rem;
    }

    .naku-left-logo img {
        max-width: 130px;
        filter: brightness(0) invert(1);
    }

    .naku-left-tagline {
        color: #fff;
    }

    .naku-left-tagline h2 {
        font-size: clamp(1.6rem, 2.4vw, 2.4rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 .75rem;
        letter-spacing: -.02em;
    }

    .naku-left-tagline p {
        font-size: .92rem;
        opacity: .78;
        max-width: 320px;
        line-height: 1.65;
        margin: 0;
    }

    .naku-tagline-bar {
        width: 44px;
        height: 3px;
        background: var(--clr-accent);
        border-radius: 99px;
        margin-bottom: .9rem;
    }

    .naku-badge {
        position: absolute;
        bottom: 2.5rem;
        right: 2.5rem;
        background: rgba(255, 255, 255, .13);
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: .75rem;
        padding: .7rem 1.2rem;
        color: #fff;
        text-align: center;
        backdrop-filter: blur(6px);
    }

    .naku-badge span {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .naku-badge small {
        font-size: .68rem;
        opacity: .72;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    /* ── Right Panel ─────────────────────────── */
    .naku-right {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--clr-soft-xlight);
        padding: 2rem 2.5rem;
        overflow-y: auto;
    }

    .naku-form-wrap {
        width: 100%;
        max-width: 380px;
    }

    /* Logo (mobile only) */
    .naku-form-logo {
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .naku-form-logo img {
        max-width: 130px;
    }

    @media (min-width: 900px) {
        .naku-form-logo {
            display: none;
        }
    }

    /* Heading */
    .naku-form-heading {
        margin-bottom: 2rem;
    }

    .naku-form-heading h4 {
        font-size: 1.55rem;
        font-weight: 700;
        color: var(--clr-dark);
        margin: 0 0 .35rem;
        letter-spacing: -.02em;
    }

    .naku-form-heading p {
        color: var(--clr-muted);
        font-size: .875rem;
        margin: 0 0 .85rem;
    }

    .naku-heading-bar {
        width: 36px;
        height: 3px;
        background: linear-gradient(90deg, var(--clr-accent), var(--clr-soft));
        border-radius: 99px;
    }

    /* Labels */
    .naku-form .naku-label {
        display: block;
        font-size: .72rem;
        font-weight: 700;
        color: var(--clr-dark);
        letter-spacing: .05em;
        text-transform: uppercase;
        margin-bottom: .45rem;
    }

    /* Inputs */
    .naku-form .naku-input {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--clr-soft-light);
        border-radius: var(--radius-input);
        padding: .7rem 1rem;
        font-size: .92rem;
        color: var(--clr-dark);
        background: var(--clr-white);
        outline: none;
        transition: border-color var(--transition), box-shadow var(--transition);
    }

    .naku-form .naku-input::placeholder {
        color: var(--clr-soft);
    }

    .naku-form .naku-input:focus {
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 3px rgba(117, 113, 89, .14);
    }

    .naku-form .naku-input.is-invalid {
        border-color: #d9534f;
    }
    /* Border merah ikut ke tombol toggle mata saat input invalid */
    .naku-pw-group .naku-input.is-invalid ~ .naku-pw-toggle {
        border-color: #d9534f;
    }

    /* Style pesan error validasi — sebelumnya belum ada sama sekali */
    .invalid-feedback {
        display: none;
        color: #d9534f;
        font-size: .78rem;
        margin-top: .35rem;
        line-height: 1.3;
    }
    /* Password group */
    .naku-pw-group {
        display: flex;
        align-items: stretch;
        height: 44px;
    }

    .naku-pw-group .naku-input {
        flex: 1 1 auto;
        border-right: none;
        border-radius: var(--radius-input) 0 0 var(--radius-input);
        height: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .naku-pw-toggle {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--clr-soft-light);
        border-left: none;
        border-radius: 0 var(--radius-input) var(--radius-input) 0;
        background: var(--clr-white);
        color: var(--clr-muted);
        cursor: pointer;
        transition: color var(--transition), background var(--transition), border-color var(--transition);
        font-size: 1.05rem;
        line-height: 1;
    }

    .naku-pw-group:focus-within .naku-input,
    .naku-pw-group:focus-within .naku-pw-toggle {
        border-color: var(--clr-accent);
    }

    .naku-pw-group:focus-within .naku-pw-toggle {
        color: var(--clr-accent);
        background: var(--clr-soft-xlight);
    }

    /* Terms checkbox */
    .naku-terms {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        margin-bottom: 1.5rem;
    }

    .naku-terms input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        flex-shrink: 0;
        accent-color: var(--clr-accent);
        cursor: pointer;
    }

    .naku-terms label {
        font-size: .82rem;
        color: var(--clr-muted);
        line-height: 1.5;
        cursor: pointer;
    }

    .naku-terms label a {
        color: var(--clr-accent);
        font-weight: 600;
        text-decoration: none;
        transition: color var(--transition);
    }

    .naku-terms label a:hover {
        color: var(--clr-dark);
        text-decoration: underline;
    }

    /* Divider */
    .naku-form-divider {
        height: 1px;
        background: var(--clr-soft-light);
        margin: 1.5rem 0;
    }

    /* Submit Button */
    .naku-btn {
        width: 100%;
        padding: .78rem;
        background: var(--clr-dark);
        color: var(--clr-white);
        border: none;
        border-radius: var(--radius-input);
        font-size: .92rem;
        font-weight: 700;
        letter-spacing: .03em;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
        box-shadow: 0 4px 16px rgba(46, 54, 64, .20);
    }

    .naku-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, transparent 55%);
        pointer-events: none;
    }

    .naku-btn:hover {
        background: var(--clr-accent);
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(117, 113, 89, .30);
    }

    .naku-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .naku-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
    }

    /* Footer */
    .naku-form-footer {
        margin-top: 1.5rem;
        text-align: center;
        font-size: .83rem;
        color: var(--clr-muted);
    }

    .naku-form-footer a {
        color: var(--clr-accent);
        font-weight: 700;
        text-decoration: none;
        transition: color var(--transition);
    }

    .naku-form-footer a:hover {
        color: var(--clr-dark);
        text-decoration: underline;
    }

    /* Spacing helpers */
    .naku-field {
        margin-bottom: 1.15rem;
    }

    .naku-field-pw {
        margin-bottom: 1.25rem;
    }