/* PENJELASAN: Reset margin dan box-sizing dasar */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background-color: #f0fdf4; color: #333; }

/* PENJELASAN: Pewarnaan tema hijau untuk bank sampah */
header { background-color: #15803d; color: white; padding: 25px; text-align: center; }
nav { background-color: #166534; }

/* PENJELASAN: Flexbox untuk menengahkan menu navigasi */
nav ul { list-style: none; display: flex; justify-content: center; }
nav a { display: block; color: white; text-decoration: none; padding: 15px 25px; }

/* PENJELASAN: Hover effect saat menu ditunjuk mouse */
nav a:hover, nav a.active { background-color: #22c55e; }

main { max-width: 900px; margin: 25px auto; padding: 0 15px; min-height: 50vh; }
section { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
h2 { color: #15803d; border-bottom: 2px solid #22c55e; padding-bottom: 10px; margin-bottom: 20px; }

/* PENJELASAN: Flexbox untuk gambar & iframe bersebelahan */
.multimedia-container { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px; }
.multimedia-container img, .video-wrapper iframe { flex: 1; min-width: 300px; max-width: 100%; border-radius: 8px; }

.daftar-sampah { margin-left: 20px; line-height: 2; font-size: 1.1rem; }

/* PENJELASAN: Styling tabel (border-collapse agar garis menyatu) */
.data-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.data-table th, .data-table td { padding: 12px; border: 1px solid #dcfce7; text-align: left; }
.data-table th { background-color: #15803d; color: white; }
.data-table tr:hover { background-color: #f0fdf4; }

.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 8px; color: #166534; }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; }

.btn-submit { background-color: #22c55e; color: white; padding: 12px 20px; border: none; cursor: pointer; border-radius: 6px; font-weight: bold; }
.btn-reset { background-color: #ef4444; color: white; padding: 10px 15px; border: none; cursor: pointer; border-radius: 6px; }

/* PENJELASAN: Desain kotak notifikasi sukses */
#notifikasi { margin-top: 15px; padding: 15px; background: #dcfce7; color: #166534; border-radius: 6px; border: 1px solid #86efac; }

/* PENJELASAN: Class khusus untuk menyembunyikan elemen */
.hidden { display: none !important; }

footer { text-align: center; padding: 20px; background-color: #15803d; color: white; margin-top: 20px; }