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

        :root {
        --gold: #b89a6a;
        --gold-light: #d4b896;
        --gold-pale: #f5ede0;
        --dark: #1a1612;
        --dark-soft: #2e2820;
        --mid: #6b5f52;
        --light: #faf9f6;
        --white: #ffffff;
        --border: rgba(184,154,106,0.25);
        --error: #c0392b;
        }

        body {
        font-family: 'DM Sans', sans-serif;
        background: var(--light);
        color: var(--dark);
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        }

        /* ── Left Panel ── */
        .left-panel {
        background: var(--dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        position: relative;
        overflow: hidden;
        }

        .left-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 70%, rgba(184,154,106,0.15) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 20%, rgba(184,154,106,0.08) 0%, transparent 50%);
        }

        .left-logo {
        position: relative;
        text-align: center;
        margin-bottom: 3rem;
        }

        .left-logo img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        margin-bottom: 1rem;
        }

        .left-logo-name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.8rem;
        font-weight: 300;
        letter-spacing: 0.25em;
        color: var(--gold-pale);
        }

        .left-logo-sub {
        font-family: 'DM Sans', sans-serif;
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.45);
        margin-top: 4px;
        }

        .left-tagline {
        position: relative;
        text-align: center;
        }

        .left-tagline h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.2rem;
        font-weight: 300;
        color: var(--gold-pale);
        line-height: 1.3;
        margin-bottom: 1rem;
        }

        .left-tagline h2 em {
        font-style: italic;
        color: var(--gold);
        }

        .left-tagline p {
        font-size: 13px;
        color: rgba(240,232,216,0.5);
        font-weight: 300;
        line-height: 1.7;
        max-width: 280px;
        margin: 0 auto;
        }

        .left-deco {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        }

        .left-deco span {
        width: 24px;
        height: 1px;
        background: rgba(184,154,106,0.4);
        }

        .left-deco span:nth-child(2) {
        width: 8px;
        background: var(--gold);
        }

        /* ── Right Panel ── */
        .right-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 4rem;
        overflow-y: auto;
        }

        .auth-box {
        width: 100%;
        max-width: 400px;
        }

        /* ── Tabs ── */
        .auth-tabs {
        display: flex;
        border-bottom: 0.5px solid var(--border);
        margin-bottom: 2rem;
        }

        .auth-tab {
        flex: 1;
        padding: 10px;
        background: none;
        border: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: #aaa;
        cursor: pointer;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        border-bottom: 1.5px solid transparent;
        margin-bottom: -0.5px;
        transition: all 0.2s;
        }

        .auth-tab.active {
        color: var(--dark);
        border-bottom-color: var(--dark);
        }

        /* ── Forms ── */
        .auth-form { display: none; }
        .auth-form.active { display: block; }

        .auth-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2rem;
        font-weight: 400;
        color: var(--dark);
        margin-bottom: 0.4rem;
        }

        .auth-subtitle {
        font-size: 13px;
        color: var(--mid);
        font-weight: 300;
        margin-bottom: 1.8rem;
        }

        .form-group {
        margin-bottom: 14px;
        position: relative;
        }

        .form-label {
        display: block;
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--mid);
        margin-bottom: 6px;
        }

        .form-input {
        width: 100%;
        padding: 11px 14px;
        border: 0.5px solid #ddd;
        border-radius: 6px;
        font-family: 'DM Sans', sans-serif;
        /* RWD: 16px minimum agar iOS Safari tidak auto-zoom saat input di-tap */
        font-size: 16px;
        color: var(--dark);
        background: var(--white);
        outline: none;
        transition: border-color 0.2s;
        min-height: 44px; /* RWD: touch target */
        }

        .form-input:focus { border-color: var(--gold); }
        .form-input::placeholder { color: #ccc; }
        .form-input.error { border-color: var(--error); }

        .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        }

        .password-wrap {
        position: relative;
        }

        .password-wrap .form-input {
        padding-right: 44px;
        }

        .toggle-pw {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #aaa;
        padding: 4px;
        transition: color 0.2s;
        }

        .toggle-pw:hover { color: var(--dark); }

        .error-msg {
        font-size: 11px;
        color: var(--error);
        margin-top: 4px;
        }

        /* Login method toggle */
        .login-method {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        }

        .method-btn {
        flex: 1;
        padding: 8px;
        border: 0.5px solid #ddd;
        border-radius: 6px;
        background: transparent;
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        color: var(--mid);
        cursor: pointer;
        transition: all 0.2s;
        }

        .method-btn.active {
        background: var(--dark);
        color: var(--gold-pale);
        border-color: var(--dark);
        }

        .forgot-link {
        display: block;
        text-align: right;
        font-size: 12px;
        color: var(--mid);
        text-decoration: none;
        margin-top: -8px;
        margin-bottom: 16px;
        transition: color 0.2s;
        }

        .forgot-link:hover { color: var(--dark); }

        /* Submit button */
        .btn-submit {
        width: 100%;
        padding: 13px;
        min-height: 48px; /* RWD: touch target nyaman, sedikit lebih tinggi dari minimum 44px */
        background: var(--dark);
        color: var(--gold-pale);
        border: none;
        border-radius: 6px;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s, transform 0.1s;
        margin-top: 8px;
        }

        .btn-submit:hover { background: var(--dark-soft); }
        .btn-submit:active { transform: scale(0.98); }

        .btn-submit.loading {
        opacity: 0.7;
        cursor: not-allowed;
        }

        /* Divider */
        .auth-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 20px 0;
        font-size: 11px;
        color: #ccc;
        letter-spacing: 1px;
        }

        .auth-divider::before,
        .auth-divider::after {
        content: '';
        flex: 1;
        height: 0.5px;
        background: #eee;
        }

        /* Switch */
        .auth-switch {
        text-align: center;
        font-size: 13px;
        color: var(--mid);
        margin-top: 1.5rem;
        }

        .auth-switch button {
        background: none;
        border: none;
        color: var(--dark);
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: underline;
        padding: 0;
        }

        /* Forgot Password Form */
        .back-btn {
        background: none;
        border: none;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        color: var(--mid);
        cursor: pointer;
        padding: 0;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
        }

        .back-btn:hover { color: var(--dark); }

        /* Success state */
        .success-box {
        text-align: center;
        padding: 2rem 0;
        }

        .success-icon {
        width: 56px;
        height: 56px;
        background: #f0faf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        }

        .success-box h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.6rem;
        font-weight: 400;
        margin-bottom: 0.5rem;
        }

        .success-box p {
        font-size: 13px;
        color: var(--mid);
        line-height: 1.6;
        }

        /* Back to home */
        .back-home {
        position: fixed;
        top: 1.5rem;
        right: 2rem;
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        color: var(--mid);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
        z-index: 10;
        }

        .back-home:hover { color: var(--dark); }

        /* Responsive */
        @media (max-width: 768px) {
        body { grid-template-columns: 1fr; }
        .left-panel { display: none; }

        /* RWD FIX: ruang kosong sangat besar di atas tab LOGIN/REGISTER —
           sebelumnya .right-panel pakai justify-content:center (dari base
           rule) sehingga form terdorong jauh ke bawah viewport. Mobile:
           konten mulai dari atas agar langsung terlihat tanpa scroll. */
        .right-panel {
            padding: 1.8rem 1.5rem;
            padding-top: calc(1.8rem + env(safe-area-inset-top, 0px));
            min-height: 100dvh;
            justify-content: flex-start;
        }

        /* RWD FIX: form-row (Nama + Tanggal Lahir) collapse ke 1 kolom di mobile.
           Sebelumnya 2 input berdampingan sangat sempit di layar HP. */
        .form-row { grid-template-columns: 1fr; gap: 0; }

        /* RWD FIX: "Back to Shop" sebelumnya position:fixed — di layar sempit
           ini menimpa tombol "SIGN UP NOW" karena keduanya jatuh di area yang
           sama saat form discroll. Kembalikan ke alur dokumen normal: di
           mobile, .back-home & .right-panel adalah dua grid item berurutan
           (body grid-template-columns:1fr di atas), jadi ini otomatis
           tampil sebagai baris sendiri di atas form — tidak mungkin menimpa
           elemen lain. */
        .back-home {
            position: static;
            justify-self: end;
            margin: calc(1rem + env(safe-area-inset-top, 0px)) 1.2rem 0 0;
            font-size: 11px;
            background: rgba(250,249,246,0.9);
            padding: 4px 8px;
            border-radius: 4px;
        }
        }

        /* RWD FIX: HP sangat kecil */
        @media (max-width: 400px) {
        .right-panel { padding: 1.5rem 1.2rem; }
        .auth-title { font-size: 1.6rem; }
        }

        /* ═══════════════════════════════════════════════════════════════════
           GOOGLE SSO BUTTON — Luxury Aesthetic
           ═══════════════════════════════════════════════════════════════════ */

        /* Tombol utama "Continue with Google" */
        .btn-google {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 13px 20px;
        border: 1.5px solid #1a1612;
        border-radius: 0;               /* Sharp corners — sesuai estetika Shem */
        background: #fff;
        color: #1a1612;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
        min-height: 48px;               /* Touch target */
        margin-bottom: 4px;
        position: relative;
        overflow: hidden;
        }

        .btn-google::before {
        content: '';
        position: absolute;
        inset: 0;
        background: #1a1612;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
        z-index: 0;
        }

        .btn-google:hover::before {
        transform: scaleX(1);
        }

        .btn-google:hover {
        color: #fff;
        box-shadow: 0 4px 20px rgba(26, 22, 18, 0.2);
        }

        .btn-google svg,
        .btn-google span {
        position: relative;
        z-index: 1;
        transition: filter 0.22s ease;
        }

        /* Saat hover, logo Google bisa sedikit redup karena background gelap */
        .btn-google:hover svg {
        filter: brightness(0) invert(1);
        }

        .btn-google:active {
        transform: scale(0.98);
        }

        /* ── Divider "OR" ──────────────────────────────────────────────── */
        .sso-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 16px;
        }

        .sso-divider-line {
        flex: 1;
        height: 0.5px;
        background: #e8e0d6;
        }

        .sso-divider-text {
        font-size: 11px;
        color: #aaa;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
        font-family: 'DM Sans', sans-serif;
        }

        /* ── Form label optional tag ──────────────────────────────────── */
        .form-label-optional {
        font-size: 10px;
        color: #bbb;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        margin-left: 4px;
        }

        /* ── Responsive: Google button di layar kecil ─────────────────── */
        @media (max-width: 480px) {
        .btn-google {
            font-size: 12px;
            padding: 12px 16px;
            gap: 8px;
        }
        .sso-divider {
            margin: 14px 0 12px;
        }
        }