/* CSS Document By Am Hijau Final
Menambah transparansi dengan memberikan penjelasan di setiap bagian untuk memudahkan pemahaman kode di masa depan.*/

body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/* Mengatur latar belakang dan teks utama */
body {
  background: #e8f5e9; /* Background hijau muda lebih segar */
  font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins */
  font-size: 16px;
  color: #388e3c; /* Teks lebih gelap agar kontras dengan latar belakang */
}

/* Gaya untuk tautan (link) */
a {
  color: #2e7d32; /* Warna link hijau lebih segar dan tegas */
  text-decoration: none; /* Menghilangkan garis bawah pada tautan */
}

/* Warna link saat hover */
a:hover {
  color: #1b5e20; /* Warna link saat hover, lebih gelap untuk efek */
}

/* Header dengan background gambar dan gradasi */
#header {
  background: linear-gradient(to right, #388e3c, #66bb6a), url('images/headerbg.png') repeat-x bottom; /* Gradasi hijau lebih gelap ke lebih cerah untuk efek 3D */
  margin: 0;
  padding: 0;
  color: #fff; /* Warna teks putih */
  text-align: center; /* Teks ditengah */
  font-weight: bold;
}

#header h1 {
  margin: 0;
  padding: 0;
  font-size: 1.7em; /* Ukuran font header */
}

/* Tambahan judul putih di dalam header */
#header a {
  display: block;
  padding: 8px 0px;
  color: #fff; /* Warna teks putih untuk link */
}

/* Top navigation dengan background gambar dan gradasi */
.topnav {
  background: linear-gradient(to bottom, #66bb6a, #43a047), url("images/navbg.png"); /* Gradasi hijau cerah ke hijau lebih tua */
  font-weight: 700;
  text-align: center;
  border: 1px solid #388e3c;
  border-radius: 0.3em;
  padding: 7px 3px;
}

/* Link dalam navigation */
.topnav a {
  border: 1px solid #388e3c;
  background: #ffffff url("images/navbg.png");
  color: #2e7d32; /* Warna teks link hijau lebih gelap */
  border-radius: 0.3em;
  padding: 5px;
}

/* Mengatur clear float */
.clear {
  clear: both;
}

/* Wrapper untuk layout */
#wrapper {
  margin: 0 auto;
  padding: 0;
}

/* Content area dengan background putih dan border hijau pastel */
.content {
  background: #ffffff;
  border: 5px solid #a5d6a7; /* Border hijau pastel */
  padding: 10px;
  border-radius: 0.3em;
  overflow: auto;  /* <-- Ditambahkan untuk scrollbar jika teks melebihi area */
}

.content pre { /* <-- Ditambahkan untuk menangani tampilan kode sumber */
  white-space: pre-wrap; /* Menjaga spasi dan baris baru, mencegah teks keluar area */
  word-break: break-all; /* Opsional: Jika ada baris sangat panjang, putus di akhir baris */
  max-width: 100%; /* Pastikan lebar maksimum tidak melebihi container */
}

#content h2 {
  font-size: 1.2em;
  color: #388e3c; /* Warna judul konten hijau gelap */
  margin: 0;
  padding: 0 0 6px 0;
}

#content p {
  font: 0.85em/1.4 Arial, Helvetica, sans-serif;
  color: #666; /* Warna teks paragraf lebih gelap */
  margin: 0 0 10px 0;
}

/* Gaya untuk elemen alternatif (misalnya, pesan atau elemen khusus) */
.alt {
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  padding: 6px;
  border-radius: 0.3em;
}

/* Gaya untuk daftar file dan direktori */
#files,
#directories {
  padding: 2px;
  border-bottom: 1px solid #ced4da;
}

/* Link dalam daftar file */
#files a {
  font-weight: bold;
  color: #388e3c; /* Warna hijau segar */
}

/* Link dalam daftar direktori */
#directories a {
  color: #2e7d32; /* Warna hijau lebih gelap */
  font-weight: bold;
}

/* Link dalam elemen span pada daftar file/direktori */
#files span a,
#directories span a {
  color: #5d8b60;
}

/* Gaya untuk elemen error (pesan error) */
.red,
.error {
  color: #d32f2f; /* Warna merah untuk error */
  border: 1px solid #d32f2f;
  padding: 5px;
}

/* Gaya untuk elemen sukses (pesan sukses) */
.green,
.success {
  color: #388e3c; /* Warna hijau untuk sukses */
  border: 1px solid #388e3c;
  padding: 5px;
}

/* Gaya untuk elemen info (pesan informasi) */
.info {
  border: 1px solid #43a047;
  padding: 5px;
  color: #388e3c;
}

/* Gaya untuk elemen gagal */
#fail_code {
  background: #d32f2f;
  color: #fff;
  padding: 2px;
}

/* Gaya untuk form input */
input[type="text"],
input[type="file"],
input[type="password"],
select,
textarea {
  padding: 5px;
  margin: 1px;
  border: 1px solid #c8e6c9;
  color: #388e3c; /* Warna teks form hijau */
  border-radius: 0.2em;
}

/* Gaya untuk tombol submit dan reset */
input[type="submit"],
input[type="reset"] {
  text-align: center;
  background: linear-gradient(to bottom, #66bb6a, #4caf50), url('images/navbg.png') repeat-x top; /* Gradasi hijau segar */
  color: #fff;
  font-weight: bold;
  border: 1px solid #2e7d32;
  padding: 5px 10px;
  border-radius: 0.3em;
}

/* Menu dengan background gambar dan gradasi */
.menu {
  background: #ffffff;
  border: 5px solid #a5d6a7;
  padding: 6px;
  border-radius: 0.3em;
}

/* Menu list tanpa bullet */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Link dalam menu */
.menu li a {
  display: block;
  border-bottom: 1px solid #c8e6c9;
  background: linear-gradient(to right, #e8f5e9, #c8e6c9), url('images/menu.png') repeat-x;
  padding: 10px;
  font: 100% Arial, Helvetica, sans-serif;
  color: #388e3c; /* Warna hijau lebih gelap */
  text-decoration: none;
  border-radius: 0.3em;
}

/* Pagination dengan background gambar dan gradasi */
.pagination {
  font-weight: bold;
  margin: 2px;
  padding: 2px;
}

.pagination span,
.pagination a {
  background: linear-gradient(to bottom, #66bb6a, #43a047), url('images/navbg.png') repeat-x;
  margin: 1px;
  padding: 5px;
  color: #388e3c;
  border-radius: 0.3em;
}

/* Footer */
#footer {
  border-top: 2px solid #66bb6a;
  background: #e8f5e9;
  padding: 0px;
  margin: 0px;
  color: #388e3c;
}

#footer p {
  font-weight: 700;
  background-color: #f1f8e9;
  text-align: center;
  padding: 5px 3px;
  font-size: 16px;
}