/* style-detail-berita.css */

body {
  /* Hanya mengatur font dan warna background umum untuk halaman ini */
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
  margin: 0;
  padding: 0;
}

main {
  /* Kontainer utama untuk konten berita */
  max-width: 1200px; /* Batasi lebar maksimum */
  margin: 20px auto; /* Pusatkan konten horizontal dan beri margin atas/bawah */
  padding: 20px; /* Beri ruang di dalam main */
  background-color: #fff; /* Latar belakang putih untuk konten */
  border-radius: 8px; /* Sudut membulat */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Efek bayangan lembut */
}

main h1 {
  /* Judul berita di dalam main */
  color: #c02828; /* Warna biru gelap */
  font-size: 2.5em; /* Ukuran font besar */
  margin-top: 0; /* Hapus margin atas default */
  text-align: left; /* Rata kiri */
  word-wrap: break-word; /* Memastikan teks panjang pecah baris */
}

main .tanggal {
  /* Tanggal berita di dalam main */
  color: #666; /* Warna abu-abu */
  font-size: 0.9em; /* Ukuran font lebih kecil */
  margin-bottom: 20px; /* Ruang di bawah tanggal */
  text-align: left; /* Rata kiri */
}

main img {
  /* Gambar berita di dalam main */
  display: block; /* Pastikan gambar menjadi blok untuk margin auto */
  max-width: 100%; /* Pastikan gambar tidak melebihi lebar kontainer */
  height: auto; /* Pertahankan rasio aspek gambar */
  margin: 0 auto 20px auto; /* Pusatkan gambar horizontal dan beri margin bawah */
  border-radius: 8px; /* Sudut membulat untuk gambar */
  box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Bayangan ringan pada gambar */
}

main p {
  /* Paragraf isi berita di dalam main */
  text-align: justify; /* Rata kanan kiri */
  margin-bottom: 1em; /* Ruang antar paragraf */
  line-height: 1.8; /* Jarak baris yang lebih nyaman dibaca */
}

main a {
  /* Link kembali di dalam main */
  display: inline-block; /* Agar bisa diberi margin dan padding */
  margin-top: 20px; /* Ruang di atas link */
  text-decoration: none; /* Hapus garis bawah default */
  color: #007bff; /* Warna biru standar untuk link */
  font-weight: bold; /* Teks tebal */
  padding: 8px 15px; /* Sedikit padding untuk area klik */
  border: 1px solid #007bff; /* Garis tepi */
  border-radius: 5px; /* Sudut membulat */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transisi halus saat hover */
}

main a:hover {
  /* Efek hover untuk link kembali */
  background-color: #007bff; /* Ganti latar belakang saat hover */
  color: #fff; /* Ganti warna teks saat hover */
  text-decoration: none; /* Pastikan tidak ada garis bawah saat hover */
}

/* --- Media Queries untuk Responsivitas --- */
@media (max-width: 1000px) {
  main {
      margin: 10px; /* Kurangi margin di layar kecil */
      padding: 15px; /* Kurangi padding di layar kecil */
      border-radius: 0; /* Hilangkan border-radius di layar sangat kecil jika diinginkan */
  }
  
  main h1 {
      font-size: 2em; /* Ukuran font judul yang lebih kecil */
  }

  main .tanggal {
      font-size: 0.8em; /* Ukuran font tanggal yang lebih kecil */
  }
}

@media (max-width: 480px) {
  main {
      padding: 10px; /* Padding lebih kecil lagi untuk ponsel */
  }

  main h1 {
      font-size: 1.8em;
  }
}