/*
  Pastikan Anda telah menyimpan file 'background.png' dan 'logo.png' 
  di folder yang sama dengan 'index.html' dan 'style.css'.
*/

/* 1. Body Styling (Background dan Font) */
body {
    /* Menggunakan background.png seperti permintaan */
    background-size: cover; /* Pastikan gambar menutupi seluruh area */
    background-position: center;
    background-repeat: no-repeat;
    /* Menggunakan font Inter dari Google Fonts */
    font-family: 'Inter', sans-serif; 
    /* Warna latar belakang fallback jika gambar gagal dimuat */
    background-color: #f0f8ff; 
}

/* New background div styling */
.quarter-screen-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25vh; /* Approximately one-quarter of the viewport height */
    background-image: url('../images/bg1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Set z-index to 1 */
}

/* Wrapper for the login content to control stacking */
.login-wrapper {
    position: relative;
    z-index: 2; /* Set z-index higher than the background div */
}


/* 2. Custom Shadow untuk Card Login */
/* Menggunakan box-shadow yang kuat dan lembut, mirip dengan screenshot */
.custom-shadow {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15), /* Shadow standar */
                0 0 1rem rgba(0, 0, 0, 0.05);  /* Tambahan shadow untuk efek lebih soft */
    border-radius: 10px;
    border: none;
}

/* 3. Input Group Customization */
/* Membuat input group lebih bersih, sesuai dengan desain modern di screenshot */
.input-group-text {
    background-color: #fff;
    border-right: none;
    color: #495057; /* Warna ikon */
}

.form-control {
    border-left: none;
}

.custom-input-group input:focus {
    box-shadow: none !important; /* Menghilangkan shadow default saat fokus */
    border-color: #ced4da; /* Warna border tetap normal saat fokus */
}

/* 4. Login Button Styling */
/* Sesuaikan warna biru agar mirip dengan yang ada di screenshot */
.btn-login {
    background-color: #007bff; /* Warna biru standar, sesuaikan ke #187bcd atau sejenisnya jika ingin lebih mirip */
    border-color: #007bff;
    font-weight: 600;
}

.btn-login:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* 5. Header Styling (Text 'PUSPENDIK CBT APPLICATION') */
.app-title {
    color: #007bff; /* Atau warna biru yang ada di header screenshot */
    font-weight: 600;
    margin-top: -10px; /* Atur posisi agar dekat dengan logo */
}

/* 6. Logo Sizing */
.logo-img {
    height: 50px; /* Sesuaikan ukuran logo */
    width: auto;
}

/* 7. Welcome Text Styling */
.welcome-text {
    font-weight: 700;
}

/* 8. Error Area/Footer Text Styling */
.error-area p {
    line-height: 1.2;
}

.error-area i {
    margin-right: 5px;
}

/* Tambahkan di style.css */

/* Hapus border dan background default tombol ikon mata */
.toggle-password {
    background-color: #fff;
    border-left: none;
    border-radius: 0 0.375rem 0.375rem 0; /* Sesuaikan border-radius Bootstrap */
    cursor: pointer; /* Menandakan bahwa elemen dapat diklik */
    padding: 0.375rem 0.75rem; /* Sesuaikan padding agar sama dengan input group text */
}

/* Pastikan saat fokus, tombol tidak memiliki outline/shadow yang aneh */
.toggle-password:focus {
    box-shadow: none !important; 
    border-color: #ced4da; /* Warna border tetap normal saat fokus */
}