/* Variabel CSS untuk tema warna */
:root {
  --primary-color: #188B67; /* Warna utama, contoh: kuning keemasan */
  --background-color: #333; /* Warna latar belakang body, contoh: abu-abu gelap */
  --content-background: #282828; /* Warna latar belakang konten, contoh: lebih gelap dari background */
  --text-color: #ebebeb; /* Warna teks utama, contoh: abu-abu sangat terang hampir putih */
  --text-color-secondary: #999; /* Warna teks secondary */
  --border-color: #333; /* Warna border/garis tepi, contoh: abu-abu gelap */
}

/* Reset dasar dan box-sizing untuk semua elemen */
* {
  margin: 0; /* Menghilangkan margin default */
  padding: 0; /* Menghilangkan padding default */
  box-sizing: border-box; /* Mengatur perhitungan lebar dan tinggi elemen termasuk border dan padding */
  font-family: "Lexend", sans-serif; /* Mengatur font default, menggunakan Lexend jika tersedia, jika tidak menggunakan sans-serif */
}

/* Style untuk body */
body {
  min-height: 100vh; /* Tinggi minimum body 100% dari viewport height, memastikan body selalu setidaknya setinggi layar */
  display: flex; /* Menggunakan flexbox untuk layout */
  flex-direction: column; /* Mengatur arah flex menjadi kolom, menata elemen dari atas ke bawah */
  background-color: var(
      --background-color
  ); /* Menggunakan variabel warna latar belakang dari :root */
}

/* Style untuk link (<a>) */
a {
  text-decoration: none; /* Menghilangkan garis bawah default pada link */
  color: var(
      --primary-color
  ); /* Menggunakan variabel warna utama untuk warna link */
}

/* Style untuk wrapper, kontainer utama yang membungkus konten */
.wrapper {
  width: 100%; /* Lebar wrapper 100% dari parent */
  margin: 0 auto; /* Membuat wrapper berada di tengah horizontal */
  display: flex; /* Menggunakan flexbox */
  flex-direction: column; /* Arah flex kolom */
  min-height: 100vh; /* Tinggi minimum 100vh, sama seperti body */
  flex-grow: 1; /* Memungkinkan wrapper untuk tumbuh memenuhi ruang yang tersedia di flex container body */
}

/* Media query untuk layar desktop (lebar minimum 1080px) */
@media (min-width: 1080px) {
  .wrapper {
      width: 480px; /* Membatasi lebar wrapper menjadi 480px pada layar desktop, untuk tampilan mobile-first */
  }
}

/* Style untuk container-top, bagian atas yang sticky */
.container-top {
  position: sticky; /* Membuat elemen menjadi sticky */
  top: 0; /* Menempel di bagian atas viewport */
  z-index: 1; /* Mengatur z-index untuk memastikan berada di atas konten lain jika diperlukan */
}

/* Style untuk marquee-container, kontainer untuk teks berjalan */
.marquee-container {
  position: absolute; /* Diposisikan absolut terhadap container-top */
  top: 0; /* Menempel di bagian atas container-top */
  left: 0; /* Menempel di bagian kiri container-top */
  width: 100%; /* Lebar 100% dari parent */
  background-color: rgba(
      0,
      0,
      0,
      0.5
  ); /* Warna latar belakang semi-transparan hitam */
  color: white; /* Warna teks putih */
  padding: 10px; /* Padding 10px di semua sisi */
  box-sizing: border-box; /* Memastikan padding termasuk dalam perhitungan lebar */
  z-index: 1; /* Z-index */
}

/* Style untuk marquee (teks berjalan) */
marquee {
  white-space: nowrap; /* Mencegah teks untuk wrap, memaksa menjadi satu baris */
}

/* Dukungan khusus untuk Webkit (browser berbasis Chromium dan Safari) */
@supports (-webkit-marquee-increment: 0) {
  marquee {
      -webkit-marquee-increment: auto; /* Menggunakan increment otomatis untuk marquee di Webkit */
  }
}

/* Style untuk video-container, kontainer untuk video responsif */
.video-container {
  position: relative; /* Posisi relatif untuk anak absolut (iframe) */
  padding-bottom: 56.25%; /* Rasio aspek 16:9 untuk video (9/16 * 100%) */
  height: 0; /* Tinggi diatur menjadi 0, tinggi sebenarnya dikontrol oleh padding-bottom */
  overflow: hidden; /* Menyembunyikan overflow, untuk memastikan video tetap dalam kontainer */
}

/* Style untuk iframe dalam video-container */
.video-container iframe {
  position: absolute; /* Posisi absolut untuk mengisi video-container */
  top: 0; /* Menempel di atas */
  left: 0; /* Menempel di kiri */
  width: 100%; /* Lebar 100% dari parent */
  height: 100%; /* Tinggi 100% dari parent */
}

/* Style untuk container-content, bagian konten utama */
.container-content {
  flex-grow: 1; /* Memungkinkan container-content tumbuh untuk memenuhi ruang yang tersedia dalam wrapper */
  padding: 20px; /* Padding 20px di semua sisi */
  background-color: var(
      --content-background
  ); /* Menggunakan variabel warna latar belakang konten */
  z-index: 2; /* Z-index */
  border-radius: 30px 30px 10px 10px; /* Border radius, atas kiri dan kanan lebih bulat */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow tipis */
  color: var(--text-color); /* Warna teks */
}

/* Style untuk heading (h1, h2, h3) */
h1,
h2,
h3 {
  text-align: center; /* Teks rata tengah */
  margin-bottom: 0.1em; /* Margin bawah sedikit */
  font-weight: normal; /* Berat font normal, tidak bold default */
}

/* Style khusus untuk h1 */
h1 {
  font-size: 1.5em; /* Ukuran font 1.5 kali ukuran font default */
}
/* Style khusus untuk h2 */
h2 {
  font-size: 1.1em; /* Ukuran font 1.1 kali ukuran font default */
}
/* Style khusus untuk h3 */
h3 {
  color: var(--text-color-secondary);
  font-size: 1em; /* Ukuran font sama dengan ukuran font default */
  margin-bottom: 2em; /* Margin bawah lebih besar dari h1 dan h2 */
}
/* Style khusus untuk h4 */
h4 {
  font-size: 0.9em; /* Ukuran font sedikit lebih kecil dari default */
  color: var(--primary-color); /* Warna menggunakan variabel warna utama */
  margin: 3em 0 1em 0; /* Margin atas, kanan, bawah, kiri */
  font-weight: bold; /* Berat font bold */
}

/* Style untuk paragraf (p) */
p {
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  line-height: 1.5; /* Line height 1.5 untuk keterbacaan */
  margin-bottom: 3em; /* Margin bawah besar */
  font-weight: normal; /* Berat font normal */
}

/* Class untuk menghilangkan margin bawah */
.no-margin-bottom {
  margin-bottom: 0 !important; /* Menghilangkan margin bawah, penting untuk override style lain */
}

/* Style untuk site-info, bagian informasi situs */
.site-info {
  display: grid; /* Menggunakan grid layout */
  grid-template-columns: 2fr 3fr; /* Dua kolom, kolom pertama 2 bagian, kolom kedua 3 bagian */
  gap: 10px; /* Gap antar grid item */
  width: 100%; /* Lebar 100% dari parent */
  max-width: 720px; /* Lebar maksimum 720px */
  margin: 0 auto; /* Membuat di tengah horizontal */
  background-color: var(
      --content-background
  ); /* Warna latar belakang konten */
  color: var(--text-color); /* Warna teks */
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
}

/* Style untuk dt (definition term) dalam site-info */
.site-info dt {
  font-weight: bold; /* Berat font bold */
  padding: 8px; /* Padding 8px */
  background-color: var(--border-color); /* Warna latar belakang border */
  border: 1px solid var(--border-color); /* Border 1px solid */
  border-radius: 5px; /* Border radius 5px */
}

/* Style untuk dd (definition description) dalam site-info */
.site-info dd {
  padding: 8px; /* Padding 8px */
  border: 1px solid var(--border-color); /* Border 1px solid */
  background-color: #222; /* Warna latar belakang sedikit lebih terang dari content-background */
  margin: 0; /* Menghilangkan margin default */
}

/* Style untuk ul (unordered list) dalam site-info */
.site-info ul {
  list-style: none; /* Menghilangkan bullet list default */
  margin: 0; /* Menghilangkan margin default */
  padding: 0; /* Menghilangkan padding default */
}

/* Style untuk ul bersarang dalam site-info */
.site-info ul ul {
  margin-left: 10px; /* Margin kiri untuk indentasi list bersarang */
}

/* Style untuk li (list item) dalam site-info */
.site-info li {
  padding-bottom: 10px; /* Padding bawah 10px antar list item */
}

/* Style khusus untuk dt pertama dalam site-info */
.site-info dt:first-child {
  grid-column: 1 / 3; /* Mengatur dt pertama agar menempati 2 kolom grid */
  text-align: center; /* Teks rata tengah */
  background-color: var(
      --primary-color
  ); /* Warna latar belakang menggunakan variabel warna utama */
  color: var(
      --content-background
  ); /* Warna teks menggunakan variabel warna latar belakang konten */
}

/* Class untuk highlight-text */
.highlight-text {
  color: var(
      --primary-color
  ); /* Warna teks menggunakan variabel warna utama, untuk menandai/highlight teks */
}

/* Style untuk image-section, bagian gambar-gambar */
.image-section {
  display: flex; /* Menggunakan flexbox */
  justify-content: center; /* Menata item di tengah horizontal */
  gap: 10px; /* Gap antar item */
  margin-top: 20px; /* Margin atas 20px */
}

/* Style untuk div dalam image-section */
.image-section > div {
  text-align: center; /* Teks rata tengah dalam div */
}

/* Style untuk image-item, item gambar individual */
.image-item {
  display: flex; /* Menggunakan flexbox */
  flex-direction: column; /* Arah flex kolom */
  align-items: center; /* Item flex rata tengah horizontal */
  text-align: center; /* Teks rata tengah */
  width: 200px; /* Lebar item 200px */
}

/* Style untuk img dalam image-item */
.image-item img {
  max-width: 100%; /* Lebar maksimum gambar 100% dari parent */
  height: 125px; /* Tinggi gambar 125px */
  object-fit: cover; /* Mengatur bagaimana gambar mengisi area, cover akan memenuhi dan memotong jika perlu */
  margin-bottom: 10px; /* Margin bawah 10px */
  border-radius: 8px; /* Border radius 8px */
}

/* Style untuk p dalam image-item */
.image-item p {
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  color: var(--text-color); /* Warna teks */
  margin: 0; /* Menghilangkan margin default */
}

/* Style untuk container-bottom, bagian tombol-tombol bottom sticky */
.container-bottom {
  position: sticky; /* Sticky position */
  bottom: 30px; /* Jarak dari bawah 30px */
  margin-top: auto; /* Mendorong container-bottom ke bawah sejauh mungkin dalam wrapper */
  border-radius: 100px; /* Border radius bulat */
  display: grid; /* Menggunakan grid layout */
  grid-template-columns: 1fr 1fr 1fr; /* Tiga kolom dengan lebar sama */
  width: 90%; /* Lebar 90% dari parent */
  margin: 0 auto; /* Membuat di tengah horizontal */
  overflow: hidden; /* Menyembunyikan overflow untuk border radius */
  background: linear-gradient(
      #4d4d4d 0%,
      #383838 100%
  ); /* Gradient background */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Box shadow ke atas tipis */
  z-index: 3; /* Z-index */
}

/* Style untuk sticky-button-container, container tombol sticky bawah */
.sticky-button-container {
  position: fixed; /* Fixed position, menempel pada viewport */
  bottom: 0; /* Menempel di bawah */
  left: 0; /* Menempel di kiri */
  width: 100%; /* Lebar 100% viewport */
  z-index: 3; /* Z-index */
  display: flex; /* Flexbox */
  justify-content: center; /* Item flex rata tengah horizontal */
  padding-bottom: 100px; /* Padding bawah 100px */
  background-color: rgba(255, 255, 255, 0); /* Latar belakang transparan */
  pointer-events: none; /* Mencegah container ini untuk menerima event pointer, agar event dapat diteruskan ke elemen di bawahnya */
  animation: pulse-bottom-section 2s infinite; /* Animasi pulse */
}

/* Style untuk sticky-button, tombol sticky */
.sticky-button {
  background-color: #188B67; /* Warna latar belakang merah */
  color: white; /* Warna teks putih */
  border: none; /* Tanpa border */
  padding: 10px 20px; /* Padding vertikal 10px, horizontal 20px */
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  font-weight: normal; /* Berat font normal */
  border-radius: 100px; /* Border radius bulat */
  cursor: pointer; /* Cursor pointer */
  display: inline-flex; /* Inline flex untuk tata letak item dalam tombol */
  align-items: center; /* Item flex rata tengah vertikal */
  justify-content: center; /* Item flex rata tengah horizontal */
  gap: 5px; /* Gap antar item dalam tombol */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Box shadow tipis ke bawah */
  transition: background-color 0.3s ease; /* Transisi warna latar belakang */
  pointer-events: auto; /* Mengaktifkan kembali pointer events untuk tombol ini */
}

/* Style hover untuk sticky-button */
.sticky-button:hover {
  background-color: #A9A9A9; /* Warna latar belakang berubah saat hover */
}

/* Style untuk bottom-section, bagian bawah tombol menu */
.bottom-section {
  display: flex; /* Flexbox */
  flex-direction: column; /* Arah flex kolom */
  justify-content: center; /* Item flex rata tengah vertikal */
  align-items: center; /* Item flex rata tengah horizontal */
  padding: 10px 0; /* Padding vertikal 10px */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Transisi warna latar belakang dan box shadow */
}

/* Style untuk bottom-section saat active */
.bottom-section.active {
  background-color: var(
      --primary-color
  ); /* Warna latar belakang menggunakan variabel warna utama */
  box-shadow: 0 0 10px #111; /* Box shadow saat aktif */
}

/* Style untuk bottom-section saat tidak active */
.bottom-section:not(.active) {
  background-color: transparent; /* Latar belakang transparan saat tidak aktif */
}

/* Style hover untuk bottom-section saat tidak active */
.bottom-section:not(.active):hover {
  background-color: rgba(
      119,
      119,
      119,
      0.2
  ); /* Warna latar belakang berubah saat hover saat tidak aktif */
}

/* Style untuk menu-item, item menu bottom */
.menu-item {
  display: flex; /* Flexbox */
  flex-direction: column; /* Arah flex kolom */
  align-items: center; /* Item flex rata tengah horizontal */
  justify-content: center; /* Menengahkan horizontal */
  color: #fff; /* Warna teks putih */
  font-size: 1em; /* Ukuran font default */
  font-weight: 900; /* Berat font extra bold */
  cursor: pointer; /* Cursor pointer */
  text-decoration: none; /* Menghilangkan dekorasi teks link */
}

/* Style untuk menu-logo, logo menu bottom */
.menu-logo {
  max-height: 30px; /* Tinggi maksimum logo 30px */
  max-width: 65%; /* Lebar maksimum logo 100% dari parent */
  height: auto; /* Tinggi otomatis mengikuti aspek rasio */
  display: block; /* Display block untuk menghilangkan spacing inline default */
  margin-bottom: 5px; /* Margin bawah 5px */
}

/* Style untuk i (icon) dalam menu-item */
.menu-item i {
  font-size: 1.2em; /* Ukuran font icon sedikit lebih besar dari default */
  margin-bottom: 5px; /* Margin bawah 5px */
}

/* Style untuk menu-text, teks menu bottom */
.menu-text {
  font-size: 0.7em; /* Ukuran font lebih kecil dari default */
}

/* Keyframes untuk animasi pulse-bottom-section */
@keyframes pulse-bottom-section {
  0% {
      transform: scale(1); /* Skala awal 1 */
      opacity: 1; /* Opacity awal 1 */
  }
  50% {
      transform: scale(1.1); /* Skala membesar sedikit */
      opacity: 0.9; /* Opacity sedikit menurun */
  }
  100% {
      transform: scale(1); /* Kembali ke skala awal */
      opacity: 1; /* Kembali ke opacity awal */
  }
}

/* Style untuk Live RTP (Return To Player) */
/* Style untuk tanggalLengkap (ID elemen tanggal lengkap) */
#tanggalLengkap {
  text-align: center; /* Teks rata tengah */
}

/* Style untuk p-rtp, paragraf RTP */
.p-rtp {
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  line-height: 1.5; /* Line height 1.5 */
  margin-bottom: 1em; /* Margin bawah 1em */
  font-weight: normal; /* Berat font normal */
}

/* Style untuk slot-container, container slot RTP */
.slot-container {
  display: flex; /* Flexbox */
  align-items: center; /* Item flex rata tengah vertikal */
}

/* Style untuk h4 dalam slot-container */
.slot-container h4 {
  display: flex; /* Flexbox untuk h4 agar gambar dan teks bisa rata vertikal */
  align-items: center; /* Item flex rata tengah vertikal */
}

/* Style untuk img dalam h4 dalam slot-container (logo slot) */
.slot-container h4 img {
  height: 2em; /* Tinggi gambar 2 kali ukuran font default */
  margin-right: 5.5px; /* Margin kanan 5.5px */
  vertical-align: middle; /* Vertical align middle untuk meratakan gambar dengan teks */
}

/* Style untuk image-sections-container, container section gambar RTP */
.image-sections-container {
  display: flex; /* Flexbox */
  justify-content: space-around; /* Menata item dengan jarak yang sama */
  padding: 20px 0; /* Padding vertikal 20px */
}

/* Style untuk image-section-item, item section gambar RTP */
.image-section-item {
  width: 30%; /* Lebar item 30% dari parent */
  border-radius: 5px; /* Border radius 5px */
  overflow: hidden; /* Menyembunyikan overflow */
}

/* Style untuk img dalam image-section-item */
.image-section-item img {
  display: block; /* Display block untuk gambar */
  width: 100%; /* Lebar 100% dari parent */
  height: auto; /* Tinggi otomatis */
}

/* Style untuk item gambar RTP yang memiliki progress bar danger (merah), gambar menjadi grayscale */
.image-section-item:has(.progress:has(.progress-bar.bg-danger)) img {
  filter: grayscale(100%); /* Efek grayscale 100% */
}

/* Style untuk progress bar */
.progress {
  margin-top: 15px; /* Margin atas 15px */
  height: 20px; /* Tinggi progress bar 20px */
  background-color: #e0e0e0; /* Warna latar belakang progress bar abu-abu muda */
  border-radius: 5px; /* Border radius 5px */
  overflow: hidden; /* Menyembunyikan overflow */
}

/* Style untuk progress-bar, bar progress */
.progress-bar {
  height: 100%; /* Tinggi 100% dari parent */
  width: 0%; /* Lebar awal 0%, akan diubah menggunakan JavaScript */
  background-color: #4caf50; /* Warna latar belakang hijau default */
  text-align: center; /* Teks rata tengah */
  line-height: 20px; /* Line height sama dengan tinggi progress bar untuk vertikal align teks */
  color: white; /* Warna teks putih */
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  border-radius: 5px; /* Border radius 5px */
  transition: width 2.5s ease; /* Transisi lebar selama 2.5 detik dengan easing ease */
}

/* Style untuk progress-bar dengan class bg-danger (merah) */
.progress-bar.bg-danger {
  background-color: #dc3545; /* Warna latar belakang merah */
}

/* Style untuk progress-bar dengan class bg-warning (kuning) */
.progress-bar.bg-warning {
  background-color: #ffc107; /* Warna latar belakang kuning */
  color: #333; /* Warna teks hitam untuk kontras dengan kuning */
}

/* Style untuk progress-bar dengan class bg-success (hijau) */
.progress-bar.bg-success {
  background-color: #28a745; /* Warna latar belakang hijau lebih gelap */
}

/* Style untuk progress-bar dengan class animated-stripes (garis animasi) */
.progress-bar.animated-stripes {
  background-image: linear-gradient(
      /* Gradient linear untuk garis */ 45deg,
      /* Sudut gradient 45 derajat */ rgba(255, 255, 255, 0.15) 25%,
      /* Warna garis putih semi-transparan */ transparent 25%,
      /* Transparan */ transparent 50%,
      /* Transparan */ rgba(255, 255, 255, 0.15) 50%,
      /* Warna garis putih semi-transparan */ rgba(255, 255, 255, 0.15) 75%,
      /* Warna garis putih semi-transparan */ transparent 75%,
      /* Transparan */ transparent /* Transparan */
  );
  background-size: 20px 20px; /* Ukuran background gradient */
  animation: progress-stripes 1s linear infinite; /* Animasi stripes */
}

/* Keyframes untuk animasi progress-stripes */
@keyframes progress-stripes {
  0% {
      background-position: 0 0; /* Posisi awal background */
  }
  100% {
      background-position: 40px 0; /* Posisi akhir background, membuat ilusi garis bergerak */
  }
}

/* Keyframes untuk animasi progress-shimmer (tidak digunakan dalam kode ini) */
@keyframes progress-shimmer {
  0% {
      background-position: -100% 0; /* Posisi awal background */
  }
  100% {
      background-position: 100% 0; /* Posisi akhir background */
  }
}

/* Style untuk Promosi */
/* Style untuk image-sections-container-pro, container section gambar promosi */
.image-sections-container-pro {
  display: flex; /* Flexbox */
  justify-content: space-around; /* Menata item dengan jarak yang sama */
  padding: 10px 0; /* Padding vertikal 10px */
}

/* Style untuk image-section-item-pro, item section gambar promosi */
.image-section-item-pro {
  width: 100%; /* Lebar 100% dari parent */
  max-width: 1200px; /* Lebar maksimum 1200px */
  margin: 20px auto; /* Margin atas dan bawah 20px, kanan kiri auto untuk tengah horizontal */
  border-radius: 5px; /* Border radius 5px */
  overflow: hidden; /* Menyembunyikan overflow */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow sedang */
}

/* Style untuk img dalam image-section-item-pro */
.image-section-item-pro img {
  display: block; /* Display block untuk gambar */
  width: 100%; /* Lebar 100% dari parent */
  height: auto; /* Tinggi otomatis */
  object-fit: cover; /* Mengatur bagaimana gambar mengisi area, cover akan memenuhi dan memotong jika perlu */
}

/* Style untuk h1-pro, heading h1 promosi */
.h1-pro {
  margin-bottom: 2em; /* Margin bawah 2em */
}

/* Style untuk h4-pro, heading h4 promosi */
.h4-pro {
  font-size: 0.9em; /* Ukuran font lebih kecil dari default */
  color: var(--text-color); /* Warna teks */
  margin: 0; /* Menghilangkan margin default */
  font-weight: bold; /* Berat font bold */
  text-align: center; /* Teks rata tengah */
}

/* Style untuk p-pro, paragraf promosi */
.p-pro {
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  line-height: 1.5; /* Line height 1.5 */
  margin-bottom: 1em; /* Margin bawah 1em */
  font-weight: normal; /* Berat font normal */
}

.p-pro-date {
  font-size: 0.8em; /* Ukuran font lebih kecil dari default */
  line-height: 1.5; /* Line height 1.5 */
  margin-bottom: 1em; /* Margin bawah 1em */
  font-weight: normal; /* Berat font normal */
  text-align: center; /* Teks rata tengah */
  color: var(--text-color-secondary); /* Warna teks */
}

/* Style untuk hr.tebal-tengah, garis horizontal tebal di tengah */
hr.tebal-tengah {
  border: none; /* Menghilangkan border default */
  height: 2px; /* Ketebalan garis 2px */
  background: linear-gradient(
      to right,
      #12121200,
      #121212 50%,
      #12121200
  ); /* Gradient linear dari transparan ke tebal di tengah, lalu transparan lagi */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Box shadow untuk efek 3D */
}