/* Reset & Base Setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}

body {
    background-color: #ffffff; /* Putih full */
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.auth-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
}

.auth-card {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #ffffff;
    border-radius: 0; /* Tanpa lengkungan luaran karena ini fullscreen */
}

/* =========================================
   SECTION 1 (KIRI)
   ========================================= */
.left-section {
    flex: 1; /* Mengambil sisa layar (sekitar 62%) */
    /* Padding kiri 48px, kanan 18px, atas-bawah 32px sesuai instruksi */
    padding: 32px 18px 32px 48px;
    display: flex;
    align-items: center; /* Membuat konten di dalamnya berada di tengah secara vertikal */
}

/* Wrapper form & logo agar posisinya agak ke tengah secara horizontal */
.form-content {
    width: 100%;
    max-width: 500px;
    margin: 0 auto; /* Kunci untuk "agak tengahin" di area sebelah kiri */
    display: flex;
    flex-direction: column;
}

.brand-logo {
    height: auto;
    width: auto;
    align-self: flex-start;
    margin-bottom: 32px; /* Jarak 32px ke teks Selamat Datang */
}

.auth-title {
    font-size: 32px;
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 40px;
}

/* Button Google */
.btn-google {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 68px; 
    padding: 0 24px; 
    background-color: transparent;
    border: 1px solid #626262; 
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-google:hover { background-color: #f8f8f8; }
.btn-google .btn-text { color: #626262; font-size: 16px; font-weight: 600; }
.google-icon { width: 24px; height: 24px; }

/* Divider */
.divider { text-align: center; margin: 24px 0; }
.divider span { color: #888888; font-size: 14px; }

/* Input Form */
.form-group { margin-bottom: 24px; }

.input-form {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    border: 1px solid #C4C4C4; 
    border-radius: 12px;
    font-size: 16px;
    color: #333333;
}
.input-form::placeholder { color: #C4C4C4; }
.input-form:focus { outline: none; border-color: #EA4C89; }

/* Button Daftar */
.btn-primary {
    width: 100%;
    height: 56px; 
    background-color: #EA4C89; 
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 32px; 
    cursor: pointer;
    margin-bottom: 24px;
}
.btn-primary:hover { background-color: #d13d75; }

/* Footer */
.auth-footer { font-size: 14px; color: #333333; text-align: left; }
.login-link { color: #111111; font-weight: 800; text-decoration: none; }
.login-link:hover { text-decoration: underline; }

/* =========================================
   SECTION 2 (KANAN) - Ukuran Dipersempit
   ========================================= */
.right-section {
    flex: 0 0 38%; /* FIX: Membuat lebar gambar lebih kecil, memakan 38% layar saja */
    padding: 32px 48px 32px 0; 
    display: flex;
}

.auth-illustration {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* =========================================
   RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 860px) {
    .auth-wrapper { height: auto; min-height: 100vh; }
    .left-section { padding: 48px 24px; }
    .right-section { display: none; }
}