/* style.css */

/* Mengatur latar belakang dan warna teks untuk seluruh halaman */
body {
    background-color: #f8fafc; /* Warna latar belakang yang lembut */
    color: #374151; /* Warna teks gelap */
    font-family: 'Arial', sans-serif; /* Font default */
}

/* Mengatur margin dan padding untuk kontainer */
.container {
    margin-top: 20px; /* Jarak atas untuk kontainer */
    padding: 20px; /* Padding untuk kontainer */
    border-radius: 8px; /* Sudut melengkung */
    background-color: #ffffff; /* Warna latar belakang putih untuk kontainer */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Bayangan halus */
}

/* Gaya untuk tombol */
.btn {
    border-radius: 5px; /* Sudut melengkung untuk tombol */
    transition: background-color 0.3s, color 0.3s; /* Transisi halus untuk hover */
}

/* Gaya untuk tombol saat hover */
.btn:hover {
    background-color: #1d4ed8; /* Warna latar belakang saat hover */
    color: #ffffff; /* Warna teks saat hover */
}

/* Gaya untuk alert */
.alert {
    border-radius: 5px; /* Sudut melengkung untuk alert */
}

/* Gaya untuk tabel */
.table {
    margin-top: 20px; /* Jarak atas untuk tabel */
    border-collapse: collapse; /* Menghilangkan jarak antara sel */
}

.table th, .table td {
    padding: 12px; /* Padding untuk sel tabel */
    text-align: left; /* Rata kiri untuk teks */
    border-bottom: 1px solid #e5e7eb; /* Garis bawah untuk sel tabel */
}

.table th {
    background-color: #f1f5f9; /* Warna latar belakang untuk header tabel */
}

/* Gaya untuk input */
input[type="text"], input[type="number"], select {
    border-radius: 5px; /* Sudut melengkung untuk input */
    border: 1px solid #d1d5db; /* Garis border untuk input */
    padding: 10px; /* Padding untuk input */
    transition: border-color 0.3s; /* Transisi halus untuk border */
}

/* Gaya untuk input saat fokus */
input[type="text"]:focus, input[type="number"]:focus, select:focus {
    border-color: #1d4ed8; /* Warna border saat fokus */
    outline: none; /* Menghilangkan outline default */
}

/* Gaya untuk iframe */
iframe {
    border-radius: 8px; /* Sudut melengkung untuk iframe */
}

/* Gaya untuk navbar */
.navbar {
    background-color: #ffffff; /* Warna latar belakang navbar */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Bayangan halus untuk navbar */
}

/* Gaya untuk tombol di navbar */
.navbar .btn-link {
    color: #374151; /* Warna teks untuk tombol di navbar */
    font-weight: bold; /* Tebal untuk teks tombol */
}

/* Gaya untuk tombol navbar saat hover */
.navbar .btn-link:hover {
    color: #1d4ed8; /* Warna saat hover */
}

/* Gaya untuk footer */
footer {
    margin-top: 20px; /* Jarak atas untuk footer */
    padding: 10px; /* Padding untuk footer */
    background-color: #f1f5f9; /* Warna latar belakang footer */
    border-radius: 5px; /* Sudut melengkung untuk footer */
}

/* Gaya untuk teks footer */
footer p {
    margin: 0; /* Menghilangkan margin default */
    color: #6b7280; /* Warna teks footer */
}