/* assets/css/auth.css - REVISI MOBILE CENTER & ANIMASI */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

:root {
    --primary: #2c3e50;    
    --accent: #e67e22;     
    --bg: #f4f7f6;
    --white: #ffffff;
}

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

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; /* Menjaga tetap di tengah secara vertikal */
    padding: 20px; 
}

/* --- ANIMASI FADE IN EASE --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Mulai dari sedikit ke bawah */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Posisi normal */
    }
}

.auth-container {
    background: var(--white);
    width: 900px;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    display: flex;
    overflow: hidden;
    position: relative;
    /* Terapkan Animasi */
    animation: fadeInUp 0.8s ease-out forwards;
}

.auth-left {
    flex: 1;
    background: linear-gradient(135deg, var(--primary), #34495e);
    color: var(--white);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.auth-left h1 { font-size: 2.2rem; margin-bottom: 10px; }
.auth-left p { font-size: 1rem; opacity: 0.9; line-height: 1.6; }

.auth-right {
    flex: 1.2;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo { width: 120px; margin-bottom: 20px; }

.auth-title {
    font-size: 1.8rem; font-weight: bold; color: var(--primary);
    margin-bottom: 20px;
}

.input-group { position: relative; margin-bottom: 20px; }
.input-group label {
    display: block; margin-bottom: 8px; font-weight: bold; color: #555; font-size: 0.9rem;
}
.input-group i {
    position: absolute; top: 42px; left: 15px; color: #999;
}
.input-group input {
    width: 100%; padding: 12px 15px 12px 40px;
    border: 2px solid #eee; border-radius: 10px;
    font-size: 1rem; outline: none; transition: 0.3s;
}
.input-group input:focus { border-color: var(--accent); }

.btn-primary {
    background-color: var(--accent); color: var(--white);
    border: none; padding: 14px; border-radius: 10px;
    font-size: 1rem; font-weight: bold; cursor: pointer;
    width: 100%; transition: 0.3s; margin-top: 10px;
}
.btn-primary:hover { background-color: #d35400; transform: translateY(-2px); }

.auth-footer { margin-top: 20px; text-align: center; font-size: 0.9rem; color: #777; }
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: bold; }

.section-header { 
    color: var(--primary); 
    border-bottom: 2px solid #eee; 
    padding-bottom: 5px; 
    margin-bottom: 15px; 
    margin-top: 20px;
    font-weight: bold;
    display: flex; align-items: center; gap: 10px;
}

.alert {
    padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem;
}
.alert-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }

/* --- TAMPILAN MOBILE DIPERBAIKI --- */
@media (max-width: 768px) {
    body {
        /* Memastikan body tetap centering di mobile */
        display: flex;
        justify-content: center;
        align-items: center; 
        padding: 20px;
    }

    .auth-container {
        flex-direction: column; 
        width: 100%;
        max-width: 450px; /* Batasi lebar agar terlihat seperti kartu melayang */
        border-radius: 20px; /* Sudut membulat kartu */
        box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Bayangan lebih lembut */
    }

       
        /* Tampilkan Logo di Atas */
    .auth-left {
        padding: 20px;
        flex: none; /* Jangan melar, sesuai isi saja */
        min-height: auto;
    }

    /* Perkecil Logo di HP */
    .auth-logo {
        width: 100px; 
        margin-bottom: 10px;
    }

    /* Sembunyikan teks deskripsi di HP biar tidak menuh-menuhin layar */
    .auth-left h1, 
    .auth-left p {
        display: none;
    }

    .auth-right {
        padding: 25px;
    }

    .auth-right { 
        padding: 30px; /* Padding sedikit dikecilkan agar pas */
    }
    
    .auth-title { font-size: 1.5rem; text-align: center; }
}