/* --- Global Style dan Background --- */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e5f1e5; /* Warna latar belakang hijau muda/pastel */
    display: flex;
    justify-content: center; /* Memposisikan konten di tengah horizontal */
    align-items: center; /* Memposisikan konten di tengah vertikal */
    min-height: 100vh; /* Memastikan tinggi minimum adalah tinggi viewport */
    color: #333;
}

.login-container {
    width: 100%;
    max-width: 400px; /* Lebar maksimum area login */
    text-align: center;
}

/* --- Header / Logo Aplikasi --- */
.app-header {
    margin-bottom: 30px;
}

.logo {
    font-size: 28px;
    font-weight: 700;
    color: #4CAF50; /* Warna hijau khas Kontaksiapa */
    margin: 0;
}

/* --- Kotak Login (Card) --- */
.login-box {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.login-box h2 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 600;
}

/* --- Tombol Umum --- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none; /* Untuk tombol yang menggunakan <a> */
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

/* --- Tombol Google --- */
.btn-google {
    background-color: #4285f4; /* Warna biru Google */
    color: white;
}

.btn-google:hover {
    background-color: #357ae8;
}

.icon-google {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    /* Ganti dengan URL/path ikon Google yang sebenarnya */
    background-color: white;
    padding: 2px;
    border-radius: 50%;
}

/* --- Tombol QR Code --- */
.btn-qr {
    background-color: #f0f0f0; /* Warna abu-abu muda */
    color: #555;
    border: 1px solid #ddd;
}

.btn-qr:hover {
    background-color: #e0e0e0;
}

.icon-qr {
    /* Placeholder untuk ikon QR - gunakan font awesome atau svg di produksi */
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-color: #555;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 80c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM128 416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32zM416 80H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32zM320 416h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm48-288c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H368zM32 288v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32H64c-17.7 0-32 14.3-32 32zM288 160V288c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32zM192 128H288v96H192V128zM192 288h96v96H192V288z"/></svg>') no-repeat 50% 50%;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 80c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM128 416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32zM416 80H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32zM320 416h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm48-288c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H368zM32 288v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32H64c-17.7 0-32 14.3-32 32zM288 160V288c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-32c-17.7 0-32 14.3-32 32zM192 128H288v96H192V128zM192 288h96v96H192V288z"/></svg>') no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- Pemisah "ATAU" --- */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #999;
    font-size: 14px;
}

.separator::before,
.separator::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #ddd;
}

.separator::before {
    margin-right: 10px;
}

.separator::after {
    margin-left: 10px;
}

/* --- Area QR Code --- */
.qr-code-area {
    display: flex;
    justify-content: center;
    margin: 25px 0 15px 0;
}

.qr-placeholder {
    width: 150px;
    height: 150px;
    background-color: #f0f0f0; /* Latar belakang placeholder */
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.instruction {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

/* --- Link Sekunder --- */
.links {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-secondary-n {
    color: #4CAF50; /* Warna hijau Kontaksiapa */
    text-decoration: none;
    font-size: 14px;
}

.link-secondary-n:hover {
    text-decoration: underline;
}

.link-register {
    font-weight: 600; /* Membuat link daftar lebih menonjol */
}


.icon-google-e {
    margin-right: 5px;
    margin-top: -5px;
}