/* File: aset/css/login.css (Versi Final dengan Layout Sempurna) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #5850E6;
    --secondary-color: #746EF1;
    --text-dark: #232243;
    --text-light: #8A899A;
    --white: #FFFFFF;
    --error-bg: #FEE2E2;
    --error-text: #B91C1C;
    --body-bg: #F0F2F5;
}

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

body.login-page {
    font-family: 'Poppins', sans-serif;
    background-color: var(--body-bg);
    margin: 0;
}

/* Container utama yang membungkus semuanya */
.auth-container {
    width: 100%;
    max-width: 450px;
    min-height: 100vh;
    height: 100vh; /* Kunci #1: Paksa tinggi 100% agar tidak bisa scroll */
    margin: 0 auto;
    background-color: var(--white);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Latar belakang abstrak */
.auth-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 280px; /* Kunci #2: Beri tinggi yang pasti untuk header */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-bottom-left-radius: 80px;
    z-index: 2; /* Posisikan di atas form, di bawah splash */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    transition: transform 0.6s ease-in-out;
}
.auth-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.auth-header-content img {
    width: 80px;
    height: 80px;
}
.auth-header-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Halaman Sapaan (Splash Screen) */
.splash-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem; /* Mengurangi padding agar pas */
    z-index: 3;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
.splash-screen h1 { font-size: 2.2rem; margin-bottom: 0.5rem; color: var(--text-dark); }
.splash-screen p { color: var(--text-light); margin-bottom: 2rem; }
.splash-buttons { display: flex; gap: 1rem; }
.splash-buttons .btn { flex: 1; padding: 1rem; border-radius: 50px; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.splash-buttons .btn-primary { background-color: var(--primary-color); color: var(--white); }
.splash-buttons .btn-secondary { background-color: #E9E7FD; color: var(--primary-color); }
.splash-buttons .btn:hover { transform: translateY(-3px); }

/* Halaman Form Login */
.login-form-container {
    position: absolute;
    left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    top: 240px; /* Kunci #3: Posisikan form di bawah header ungu */
    transform: translateY(100%); /* Sembunyikan di bawah layar */
    transition: transform 0.6s ease-in-out;
}
.login-card {
    background: var(--white);
    height: 100%;
    border-radius: 40px 40px 0 0;
    padding: 2rem;
    overflow-y: auto; /* Aktifkan scroll jika formnya panjang */
}
.login-card .back-btn { background: none; border: none; color: var(--text-light); font-weight: 500; cursor: pointer; margin-bottom: 1rem; }
.login-card h2 { font-size: 1.75rem; color: var(--text-dark); margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; color: var(--text-light); font-size: 0.9rem; margin-bottom: 0.5rem; }
.form-group input { width: 100%; padding: 1rem; border: 1px solid #F0F0F0; background: #F8F8F8; border-radius: 12px; font-size: 1rem; }
.form-group input:focus { outline: none; border-color: var(--primary-color); background: var(--white); }
.login-btn { width: 100%; padding: 1rem; border: none; border-radius: 12px; background: var(--primary-color); color: var(--white); font-size: 1rem; font-weight: 600; cursor: pointer; }
.error-message { background-color: var(--error-bg); color: var(--error-text); padding: 0.85rem; border-radius: 8px; margin-bottom: 1.5rem; text-align: center; font-weight: 500; font-size: 0.9rem; }

/* Logika Animasi dengan JavaScript */
.auth-container.show-login .splash-screen {
    transform: translateY(-100%);
    opacity: 0;
}
.auth-container.show-login .login-form-container {
    transform: translateY(0);
}
.auth-container.show-login .auth-background {
    /* Logo dan nama akan sedikit naik saat form muncul */
    transform: translateY(-120px);
}


/* --- GAYA TAMPILAN DESKTOP --- */
@media (min-width: 992px) {
    body.login-page {
        align-items: center;
        padding: 0;
    }
    .auth-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 960px;
        height: auto;
        min-height: 600px;
        margin: auto;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .splash-screen, .login-card .back-btn {
        display: none;
    }
    .login-form-container {
        position: relative;
        transform: none;
        padding: 0;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        top: 0;
    }
    .login-card {
        border-radius: 16px 0 0 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem;
    }
    .auth-background {
        position: relative;
        height: 100%;
        border-radius: 0 16px 16px 0;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        transform: none !important; /* Hapus semua animasi transform di desktop */
    }
    .auth-container.show-login .login-form-container {
        transform: none;
    }
}