/* Mengatur gaya untuk elemen body */
body {
    background-color: #2D9C9E; /* Warna latar belakang */
    background-image: url('../images/background_login_admin.png'); /* Gambar latar belakang */
    background-size: cover, auto; /* Ukuran gambar latar belakang */
    background-position: center, center; /* Posisi gambar latar belakang */
    background-repeat: no-repeat, repeat; /* Mengatur pengulangan gambar latar belakang */
    background-attachment: fixed, fixed; /* Mengatur gambar latar belakang tetap */
    height: 100vh; /* Tinggi body 100% dari viewport */
    display: flex; /* Menggunakan flexbox untuk tata letak */
    align-items: center; /* Menyelaraskan item secara vertikal di tengah */
    justify-content: center; /* Menyelaraskan item secara horizontal di tengah */
}

/* Mengatur gaya untuk kontainer login */
.login-container {
    background-color: white; /* Warna latar belakang kontainer */
    border-radius: 10px; /* Sudut melengkung */
    padding: 30px 40px 40px; /* Padding di dalam kontainer */
    width: 100%; /* Lebar 100% */
    max-width: 500px; /* Lebar maksimum 500px */
    margin: auto; /* Margin otomatis untuk pusat */
    margin-top: 60px; /* Margin atas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan untuk efek kedalaman */
}

/* Mengatur gaya untuk judul login admin */
.admin-login-title {
    color: #1A7476; /* Warna teks */
    font-weight: 700; /* Ketebalan font */
    margin-bottom: 3rem; /* Margin bawah */
}

/* Mengatur gaya untuk kontrol formulir */
.form-control {
    background-color: #F4F8F7; /* Warna latar belakang kontrol */
    border: 1px solid #E0E0E0; /* Border kontrol */
}

/* Mengatur gaya untuk tombol primer */
.btn-primary {
    background-color: #1A7476; /* Warna latar belakang tombol */
    border-color: #1A7476; /* Warna border tombol */
}

/* Mengatur gaya untuk tombol primer saat hover */
.btn-primary:hover {
    background-color: #145E60; /* Warna latar belakang saat hover */
    border-color: #145E60; /* Warna border saat hover */
}

/* Mengatur gaya untuk input checkbox yang dicentang */
.form-check-input:checked {
    background-color: #1A7476; /* Warna latar belakang saat dicentang */
    border-color: #1A7476; /* Warna border saat dicentang */
}

/* Mengatur gaya untuk kontainer password */
.password-container {
    position: relative; /* Posisi relatif untuk elemen anak */
    margin-bottom: 1rem; /* Margin bawah */
}

/* Mengatur gaya untuk meter kekuatan password */
.password-strength-meter {
    display: flex; /* Menggunakan flexbox untuk tata letak */
    justify-content: space-between; /* Menyebar item secara merata */
    margin-top: 5px; /* Margin atas */
}

/* Mengatur gaya untuk bagian kekuatan */
.strength-section {
    height: 4px; /* Tinggi bagian kekuatan */
    flex-grow: 1; /* Membiarkan bagian tumbuh */
    margin-right: 2px; /* Margin kanan */
    background-color: #ddd; /* Warna latar belakang bagian kekuatan */
    transition: background-color 0.3s ease; /* Transisi untuk perubahan warna */
}

/* Mengatur gaya untuk bagian kekuatan terakhir */
.strength-section:last-child {
    margin-right: 0; /* Menghapus margin kanan untuk bagian terakhir */
}

/* Mengatur gaya untuk pesan validasi */
.validation-message {
    font-size: 0.875rem; /* Ukuran font */
    color: #dc3545; /* Warna teks */
    margin-top: 0.25rem; /* Margin atas */
    opacity: 0; /* Opasitas awal */
    transform: translateY(-10px); /* Menggeser posisi ke atas */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transisi untuk opasitas dan transformasi */
}

/* Mengatur gaya untuk pesan validasi yang ditampilkan */
.validation-message.show {
    opacity: 1; /* Opasitas penuh */
    transform: translateY(0); /* Mengembalikan posisi */
}

/* Animasi goyang */
@keyframes shake {
    0%, 100% { transform: translateX(0); } /* Posisi awal dan akhir */
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } /* Menggeser ke kiri */
    20%, 40%, 60%, 80% { transform: translateX(5px); } /* Menggeser ke kanan */
}

/* Mengatur gaya untuk elemen yang goyang */
.shake {
    animation: shake 0.6s; /* Menjalankan animasi goyang */
}

/* Gaya untuk tombol Kembali */
.btn-secondary {
    background-color: #1A7476; /* Warna latar belakang putih */
    color: #000000; /* Warna teks hitam */
    border: 1px solid #ffffff; /* Border hitam */
}

.btn-secondary:hover {
    background-color: #156668; /* Warna latar belakang saat hover */
    color: #000000; /* Warna teks saat hover */
}

.custom-back-button {
    position: absolute;
    bottom: 20px; /* Jarak dari bawah */
    left: 20px; /* Jarak dari kiri */
}