/* --- Global Style --- */
body {
    font-family: "Poppins", sans-serif;
    background-color: #fff;
    color: #444; /* Abu tua agar tidak terlalu kontras menyakitkan mata */
}

a {
    transition: .3s all ease;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* --- Layout Split Screen (Relative Device) --- */
.half {
    width: 100%;
    min-height: 100vh; /* Full layar */
}

/* Bagian Gambar (Kanan pada desktop, atas pada mobile jika diatur) */
.half .bg {
    width: 45%; /* Gambar mengambil 45% layar */
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: #f8f9fa; /* Fallback color jika gambar gagal load */
}

/* Overlay halus di atas gambar agar teks (jika ada) terbaca, atau memberikan kesan soft */
.half .bg .layer-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.1); /* Sedikit overlay putih */
}

/* Bagian Konten Form */
.half .contents {
    width: 55%; /* Form mengambil 55% layar */
    background: #ffffff;
    display: flex;
    align-items: center; /* Vertically Center */
    justify-content: center;
}

.half .contents .container {
    width: 100%; /* Memastikan responsif */
}

/* --- Typography --- */
h3 {
    font-weight: 600;
    color: #2c3e50;
    font-size: 24px;
}

.text-muted {
    color: #8898aa !important;
    font-size: 14px;
}

/* --- Form Styling (Clean Look) --- */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    font-size: 13px;
    color: #8898aa;
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
}

.form-control {
    height: 50px;
    background: #fbfbfb; /* Sedikit abu sangat muda */
    border: 1px solid #e1e4e8;
    color: #495057;
    font-size: 15px;
    border-radius: 8px; /* Sudut membulat */
    padding-left: 20px;
    transition: all 0.3s ease;
}

.form-control:focus {
    background: #fff;
    border-color: #20c997; /* Warna Teal Medis saat diklik */
    box-shadow: 0 0 0 4px rgba(32, 201, 151, 0.1); /* Glow effect */
    color: #333;
}

/* Mengubah placeholder agar terlihat rapi */
.form-control::placeholder {
    color: #adb5bd;
    font-size: 14px;
}

/* --- Button Styling --- */
.btn-primary {
    background-color: #20c997; /* Teal Medis (Ganti hex ini jika ingin warna biru klinik lain) */
    border-color: #20c997;
    color: #fff;
    height: 50px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #1aa179; /* Warna sedikit lebih gelap saat hover */
    border-color: #1aa179;
    transform: translateY(-2px); /* Efek naik sedikit saat hover */
    box-shadow: 0 5px 15px rgba(32, 201, 151, 0.3);
}

.forgot-pass {
    font-size: 13px;
    color: #8898aa;
}
.forgot-pass:hover {
    color: #20c997;
}

/* --- Custom Checkbox Styling (Modern) --- */
.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 14px;
    color: #8898aa;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border-radius: 4px;
    transition: all 0.2s;
}

.control:hover input ~ .control__indicator {
    background: #ccc;
}

.control input:checked ~ .control__indicator {
    background: #20c997; /* Warna checkbox aktif */
}

/* Icon Checkmark */
.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control .control__indicator:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- RESPONSIVE DEVICE (Mobile & Tablet) --- */
@media (max-width: 991.98px) {
    .half .bg {
        height: 200px; /* Gambar jadi pendek di atas pada mobile */
        width: 100%;
        display: none; /* Opsi: Hapus baris ini jika ingin gambar tetap muncul di HP */
    }

    .half .contents {
        width: 100%;
        padding-top: 50px; /* Jarak atas di HP */
        padding-bottom: 50px;
    }

    h3 {
        font-size: 20px;
    }
}