/* Login Page Styles */
body {
    font-family: 'Arial', sans-serif; /* Mengatur jenis huruf pada seluruh halaman menjadi Arial, dengan sans-serif sebagai alternatif */
    margin: 0; /* Menghapus margin default dari elemen body */
    padding: 0; /* Menghapus padding default dari elemen body */
    background-color: #4e6378; /* Mengatur warna latar belakang halaman menjadi warna abu-abu muda */
}

.login-container {
    display: flex; /* Menggunakan Flexbox untuk layout */
    flex-direction: column; /* Mengatur arah layout menjadi kolom */
    justify-content: center; /* Menyelaraskan elemen secara vertikal di tengah */
    align-items: center; /* Menyelaraskan elemen secara horizontal di tengah */
    height: 75vh; /* Mengatur tinggi kontainer menjadi 100% dari tinggi viewport */
    color: #f9f9f9;
}

.login-logo img {
    height: 140px; /* Mengatur tinggi gambar logo menjadi 200 piksel */
}

.login-form {
    width: 280px; /* Mengatur lebar form login menjadi 300 piksel */
    background-color: #283747; /* Mengatur warna latar belakang form menjadi putih */
    padding: 20px; /* Memberikan ruang di dalam form sebesar 20 piksel di semua sisi */
    border-radius: 6px; /* Memberikan sudut melingkar pada form sebesar 8 piksel */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan halus di bawah form */
    text-align: center; /* Mengatur teks di dalam form agar terpusat */
    font-size: 11pt;
}

input[type="text"], input[type="password"] {
    width: 90%; /* Mengatur lebar input menjadi 100% dari elemen induknya */
    padding: 6px; /* Memberikan ruang di dalam input sebesar 10 piksel */
    margin-bottom: 5px; /* Memberikan jarak bawah sebesar 15 piksel */
    border: 1px solid #ddd; /* Mengatur border input menjadi 1 piksel dengan warna abu-abu muda */
    border-radius: 4px; /* Memberikan sudut melingkar pada input sebesar 5 piksel */
    margin-top: 5px;
}

button {
    background-color: #3498db; /* Mengatur warna latar belakang tombol menjadi biru */
    color: #fff; /* Mengatur warna teks tombol menjadi putih */
    border: none; /* Menghapus border default pada tombol */
    padding: 10px 30px; /* Memberikan ruang di dalam tombol sebesar 10 piksel vertikal dan 20 piksel horizontal */
    border-radius: 5px; /* Memberikan sudut melingkar pada tombol sebesar 5 piksel */
    cursor: pointer; /* Mengubah kursor menjadi pointer saat mengarahkan mouse ke tombol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Menambahkan bayangan pada tombol */
}

button:hover {
    background-color: #2980b9; /* Mengubah warna latar belakang tombol saat dihover menjadi biru lebih gelap */
}