/* ============================================================
   Tambahan halaman: FAQ, Ulasan, Popup Promo
   Semua pemilih diawali .bb- agar tidak bentrok dengan CSS
   bawaan tema. Warna mengikuti --main-theme-color milik tema,
   jadi ikut berubah kalau temanya diganti.
   ============================================================ */

.bb-sec{max-width:1200px;margin:0 auto;padding:44px 16px}
.bb-sec+.bb-sec{padding-top:0}
.bb-head{text-align:center;margin-bottom:26px}
.bb-head h2{
  font-size:26px;font-weight:800;color:#fff;margin:0 0 7px;letter-spacing:-.01em;
}
.bb-head h2 span{color:var(--main-theme-color,#ff8a00)}
.bb-head p{font-size:14px;color:#9a9086;margin:0}

/* ---------- FAQ ---------- */
.bb-faq{display:flex;flex-direction:column;gap:9px}
.bb-faq details{
  background:#17130e;border:1px solid #2e261c;border-radius:10px;overflow:hidden;
}
.bb-faq details[open]{border-color:var(--main-theme-color,#ff8a00)}
.bb-faq summary{
  list-style:none;cursor:pointer;padding:15px 48px 15px 17px;position:relative;
  font-size:14.5px;font-weight:700;color:#efe6da;
}
.bb-faq summary::-webkit-details-marker{display:none}
.bb-faq summary::after{
  content:'';position:absolute;right:19px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--main-theme-color,#ff8a00);
  border-bottom:2px solid var(--main-theme-color,#ff8a00);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.bb-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.bb-faq summary:hover{color:#fff;background:#1d1811}
.bb-faq .bb-ans{padding:0 17px 16px;font-size:13.5px;line-height:1.7;color:#a79c8f}
.bb-faq .bb-ans b{color:#efe6da}

/* ---------- Ulasan ---------- */
.bb-ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bb-card{
  background:#17130e;border:1px solid #2e261c;border-radius:10px;padding:18px;
  display:flex;flex-direction:column;gap:11px;
}
.bb-quote{font-size:13.5px;line-height:1.65;color:#a79c8f;margin:0;flex:1}
.bb-who{display:flex;align-items:center;gap:10px;padding-top:11px;border-top:1px solid #2e261c}
.bb-ava{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(var(--main-theme-color,#ff8a00),var(--main-theme-dark-color,#ff6c00));
  color:#2a1a00;font-weight:800;font-size:14px;
}
.bb-who b{display:block;font-size:13px;color:#efe6da;font-weight:700}
.bb-who span{display:block;font-size:11px;color:#8a8075}


/* ---------- Popup ---------- */
.bb-pop{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.72);
}
.bb-pop.on{display:flex}
.bb-pop-box{
  position:relative;width:100%;max-width:380px;
  background:#17130e;border:1px solid var(--main-theme-color,#ff8a00);
  border-radius:14px;overflow:hidden;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:bb-in .28s ease both;
}

/* ---- banner promo ----
   Gambarnya persegi 1080x1080 dan seluruh pesannya sudah tercetak di dalam
   gambar, jadi tidak boleh dipotong: object-fit contain menjaga proporsinya
   utuh. max-height menahan tinggi pada layar pendek — bannernya mengecil,
   bukan menerobos keluar layar. */
.bb-pop-gbr{display:block;line-height:0;background:#0c0a07}
.bb-pop-gbr img{
  display:block;width:100%;height:auto;
  max-height:min(56vh,380px);object-fit:contain;background:#0c0a07;
}
.bb-pop-isi{padding:16px 20px 18px}
@keyframes bb-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bb-pop-box{animation:none}}
/* Tombol tutup kini berada di atas banner, jadi diberi alas gelap
   sendiri supaya tetap terlihat di bagian gambar yang terang. */
.bb-pop-x{
  position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;
  background:rgba(0,0,0,.55);border:0;color:#fff;font-size:18px;line-height:1;
  cursor:pointer;border-radius:50%;
}
.bb-pop-x:hover{background:rgba(0,0,0,.8)}
.bb-pop-cta{
  display:block;padding:13px;border-radius:999px;text-decoration:none;
  background:linear-gradient(var(--main-theme-color,#ff8a00),var(--main-theme-dark-color,#ff6c00));
  color:#fff;font-size:15px;font-weight:800;
}
.bb-pop-cta:hover{filter:brightness(1.1);color:#fff;text-decoration:none}
.bb-pop-skip{
  display:block;margin-top:12px;background:none;border:0;cursor:pointer;
  color:#8a8075;font-size:12px;text-decoration:underline;width:100%;
}
.bb-pop-skip:hover{color:#c9c0b4}

/* Situs ini memang dibangun untuk desktop. Aturan di bawah hanya menjaga
   agar tiga bagian tambahan ini tidak rusak kalau tetap dibuka di HP. */
@media (max-width:900px){
  .bb-ul{grid-template-columns:1fr}
  .bb-head h2{font-size:21px}
  .bb-sec{padding:30px 16px}
}

/* Bagian ini berada di dalam .container milik footer, yang sudah punya
   padding samping sendiri. Tanpa aturan ini lebarnya jadi menyempit dua kali. */
.site-footer .bb-sec{max-width:none;padding-left:0;padding-right:0}
.site-footer .bb-sec:first-of-type{padding-top:34px}

/* ==========================================================================
   MENU HEADER 3D

   Tebalnya dibuat dari box-shadow padat di sisi bawah, bukan gambar.
   Saat ditekan, tombol turun 4px dan bayangan tebalnya hilang — jadi
   terlihat masuk ke dalam dirinya sendiri.

   PENTING: transform hanya dipasang pada <a>, tidak pernah pada <li>.
   Setiap <li> menampung dropdown daftar game, dan elemen ber-transform
   menjadi containing block baru — posisi dropdown-nya akan melenceng.
   Dropdown di situs ini digerakkan JavaScript, bukan :hover CSS, jadi
   aturan di bawah tidak menyentuh perilakunya sama sekali.
   ========================================================================== */

/* Garis pemisah tidak cocok lagi begitu tiap menu jadi tombol timbul.
   Menghapusnya sekaligus membebaskan 21px per item (1px garis + 20px
   margin), yang langsung terpakai untuk padding tombol — jadi lebar
   keseluruhan menu praktis tidak berubah. */
.site-header .top-menu > li + li:before{display:none}

.site-header .top-menu > li > a{
  width:auto;
  padding:10px 12px;
  margin:7px 0 10px;
  border-radius:9px;
  font-weight:800;
  letter-spacing:.3px;
  color:#f2dcbd;
  background:linear-gradient(#5d3603,#3a2000);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),   /* kilau tipis di bibir atas */
    0 4px 0 #1f0e00,                       /* sisi tebal tombol */
    0 5px 8px rgba(0,0,0,.45);             /* bayangan jatuh */
  transition:transform .12s ease, box-shadow .12s ease, background .16s ease;
}

.site-header .top-menu > li > a:hover{
  color:#2b1400;
  background:linear-gradient(var(--main-theme-color,#ff8a00),var(--main-theme-dark-color,#ff6c00));
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 6px 0 #97400a,
    0 8px 12px rgba(0,0,0,.5);
}

/* ditekan: turun masuk ke dalam tebalnya sendiri */
.site-header .top-menu > li > a:active{
  transform:translateY(4px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.45),
    0 0 0 #1f0e00,
    0 1px 2px rgba(0,0,0,.4);
}

/* menu yang sedang aktif tetap timbul dengan warna tema */
.site-header .top-menu > li[data-active="true"] > a{
  color:#2b1400;
  background:linear-gradient(var(--main-theme-color,#ff8a00),var(--main-theme-dark-color,#ff6c00));
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 4px 0 #97400a,
    0 5px 8px rgba(0,0,0,.45);
}

/* fokus papan ketik harus tetap terlihat */
.site-header .top-menu > li > a:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .site-header .top-menu > li > a{transition:none}
  .site-header .top-menu > li > a:hover,
  .site-header .top-menu > li > a:active{transform:none}
}

/* ==========================================================================
   TEKS BERJALAN (announcement bar)

   Gulirannya dijalankan JavaScript bawaan situs, bukan CSS. Karena itu di
   sini hanya warna dan tipografi yang disentuh — tidak ada posisi, lebar,
   animasi, maupun transform yang diubah, supaya jalannya teks tidak rusak.
   ========================================================================== */

/* warna disamakan dengan .site-header (#351d00), sebelumnya abu-abu #2c2c2c */
.announcement-outer-container{
  background-color:#351d00;
  padding:9px 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.45);
}

/* Pil teks dibuat cekung ke dalam. Ini yang membuat ikon di sebelahnya
   terbaca timbul — dua arah kedalaman yang berlawanan saling menegaskan. */
.announcement-container > [data-section="announcements"]{
  background-color:#140900;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.06);
}

/* tulisan dipertegas: lebih terang, lebih tebal, dan diberi bayangan tipis
   supaya tepinya tidak lumer di atas alas gelap */
.announcement-container .announcement-list,
.announcement-container .announcement-list li{
  color:#ffe6c2;
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}

.announcement-container > [data-section="date"]{
  color:#f0cf9a;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}

/* ---- ikon suara ----
   Berkas aslinya hanya 22x23 px. Diperbesar sedikit saja sudah pecah, jadi
   ikonnya dibiarkan pada ukuran asli agar tetap tajam; kesan 3D-nya datang
   dari lencana bundar yang timbul di belakangnya — bahasa bentuk yang sama
   dengan tombol menu di header. */
.announcement-container [data-icon="news"]{
  flex:none;
  width:34px;height:34px;
  margin-right:12px;
  border-radius:50%;
  background-image:var(--image-src), linear-gradient(#6a3e04,#3a2000);
  background-size:20px auto, 100% 100%;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  filter:saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),   /* kilau bibir atas */
    0 3px 0 #1f0e00,                       /* sisi tebal lencana */
    0 4px 7px rgba(0,0,0,.5);              /* bayangan jatuh */
}

/* ==========================================================================
   KOTAK DESKRIPSI FOOTER

   Sebelumnya teks deskripsi menggantung begitu saja di atas latar footer.
   Sekarang dibungkus panel cekung — arah kedalaman yang sama dengan pil
   teks berjalan, jadi terbaca sebagai wadah bacaan, bukan tombol.
   ========================================================================== */

.footer-description-section h4{
  color:#f5e3c8;
  font-weight:800;
  line-height:1.4;
  margin:0 0 12px;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

.footer-description-section .site-description{
  background:#1c1006;
  border:1px solid #4a2d08;
  border-radius:12px;
  padding:16px 20px;
  /* naik dari 12px — pada teks sepanjang ini 12px terlalu rapat dibaca */
  font-size:13px;
  line-height:1.75;
  color:#cdbda9;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.05);
}

.footer-description-section .site-description p{margin:0}
.footer-description-section .site-description p + p{margin-top:10px}

/* tautan di dalam deskripsi dibedakan dengan warna tema */
.footer-description-section .site-description a{
  color:var(--main-theme-color,#ff8a00);
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-description-section .site-description a:hover{
  color:var(--main-theme-dark-color,#ff6c00);
}