/* =====================================================
   MBG366 GAME LIST / CATEGORY THEME
   Untuk Populer, 100 RP, Terbaru, Slot, Casino
===================================================== */

/* Judul kategori: Populer / Terbaru / Slot / Casino / 100 RP */
html body .d-flex.justify-content-between.align-items-center,
html body .d-flex.justify-content-between.align-items-center.mt-1,
html body .d-flex.justify-content-between.align-items-center.mt-3 {
  background:
    linear-gradient(90deg,
      rgba(0, 191, 255, 0.18) 0%,
      rgba(8, 8, 18, 0.88) 38%,
      rgba(138, 43, 226, 0.20) 100%
    ) !important;
  border-left: 2px solid #00bfff !important;
  border-right: 2px solid #b14cff !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  margin-top: 8px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.45),
    0 0 14px rgba(177, 76, 255, 0.38) !important;
}

/* Text judul kategori */
html body .d-flex.justify-content-between.align-items-center h1,
html body .d-flex.justify-content-between.align-items-center h2,
html body .d-flex.justify-content-between.align-items-center h3,
html body .d-flex.justify-content-between.align-items-center h4,
html body .d-flex.justify-content-between.align-items-center h5,
html body .d-flex.justify-content-between.align-items-center div:first-child,
html body .d-flex.justify-content-between.align-items-center span:first-child {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow:
    0 0 5px #ffffff,
    0 0 10px #00bfff,
    0 0 18px #8a2be2 !important;
}

/* Link Lihat lebih banyak */
html body .d-flex.justify-content-between.align-items-center a,
html body a[href*="game"],
html body a[href*="slot"],
html body a[href*="casino"] {
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow:
    0 0 5px #00bfff,
    0 0 10px #8a2be2 !important;
}

/* Search box wrapper */
html body form[action="/game"],
html body form[action*="game"] {
  background:
    linear-gradient(90deg, rgba(0,191,255,0.18), rgba(138,43,226,0.18)) !important;
  border: 1px solid rgba(177, 76, 255, 0.75) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  box-shadow:
    0 0 8px rgba(0,191,255,0.55),
    0 0 16px rgba(177,76,255,0.45) !important;
}

/* Input cari game */
html body form[action="/game"] input,
html body form[action*="game"] input,
html body input[name="q"].form-control {
  background: #050510 !important;
  color: #ffffff !important;
  border: 1px solid rgba(0,191,255,0.80) !important;
  border-radius: 6px 0 0 6px !important;
  box-shadow:
    inset 0 0 8px rgba(0,191,255,0.25),
    0 0 8px rgba(177,76,255,0.35) !important;
}

html body form[action="/game"] input::placeholder,
html body form[action*="game"] input::placeholder,
html body input[name="q"].form-control::placeholder {
  color: rgba(255,255,255,0.58) !important;
}

/* Tombol search */
html body form[action="/game"] button,
html body form[action*="game"] button,
html body button.btn.btn-primary {
  background:
    linear-gradient(180deg, #e6f7ff 0%, #00bfff 42%, #8a2be2 100%) !important;
  color: #050510 !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow:
    0 0 8px rgba(0,191,255,0.75),
    0 0 16px rgba(177,76,255,0.65) !important;
}

/* Area carousel game */
html body .owl-carousel.game-list-carousel,
html body .owl-carousel,
html body .owl-stage-outer {
  background:
    linear-gradient(180deg, rgba(3,3,10,0.98), rgba(8,8,20,0.94)) !important;
  border-radius: 8px !important;
}

/* Stage carousel */
html body .owl-stage {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Item game di carousel */
html body .owl-carousel .owl-item,
html body .game-list-carousel .owl-item {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Gambar game */
html body .owl-carousel .owl-item img,
html body .game-list-carousel .owl-item img {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 191, 255, 0.55) !important;
  box-shadow:
    0 0 6px rgba(0,191,255,0.45),
    0 0 12px rgba(177,76,255,0.35) !important;
  transition: all 0.22s ease !important;
}

/* Hover gambar game */
html body .owl-carousel .owl-item img:hover,
html body .game-list-carousel .owl-item img:hover {
  transform: translateY(-2px) scale(1.03) !important;
  filter: brightness(1.12) saturate(1.15) !important;
  box-shadow:
    0 0 8px rgba(255,255,255,0.70),
    0 0 16px rgba(0,191,255,0.95),
    0 0 26px rgba(177,76,255,0.85) !important;
}

/* Section my-3 agar tidak polos */
html body .my-3 {
  background:
    radial-gradient(circle at top left, rgba(0,191,255,0.08), transparent 35%),
    radial-gradient(circle at bottom right, rgba(177,76,255,0.10), transparent 35%) !important;
  border-radius: 10px !important;
}

/* Provider Kami / Online Banks / Social Link / Articles */
html body .my-5,
html body .my-5.p-3,
html body .rounded-3.glassmorphism {
  background:
    radial-gradient(circle at 20% 0%, rgba(0,191,255,0.18), transparent 36%),
    radial-gradient(circle at 85% 100%, rgba(177,76,255,0.22), transparent 40%),
    linear-gradient(180deg, #080814 0%, #03030a 100%) !important;
  border: 1px solid rgba(177,76,255,0.72) !important;
  box-shadow:
    0 0 10px rgba(0,191,255,0.50),
    0 0 20px rgba(177,76,255,0.42),
    inset 0 0 14px rgba(0,191,255,0.14) !important;
}

/* Navbar bawah lebih violet */
html body nav.menubar,
html body nav.navbar.fixed-bottom,
html body .navbar.fixed-bottom {
  background:
    linear-gradient(180deg,
      rgba(8, 10, 24, 0.96) 0%,
      rgba(3, 3, 10, 1) 100%
    ) !important;
  border-top: 1px solid rgba(177,76,255,0.80) !important;
  box-shadow:
    0 -4px 12px rgba(0,191,255,0.35),
    0 -4px 24px rgba(177,76,255,0.45) !important;
}

/* Text menu bawah */
html body nav.menubar a,
html body nav.navbar.fixed-bottom a,
html body .navbar.fixed-bottom a {
  color: #ffffff !important;
  text-shadow:
    0 0 5px #00bfff,
    0 0 12px #8a2be2 !important;
}

/* Floating fan menu kiri */
html body #mbg-fan-menu,
html body .mbg-fan-menu,
html body [class*="fan-menu"] {
  background:
    linear-gradient(180deg, #050510 0%, #000000 100%) !important;
  border: 1px solid rgba(0,191,255,0.85) !important;
  box-shadow:
    0 0 10px rgba(0,191,255,0.95),
    0 0 20px rgba(177,76,255,0.75) !important;
}

/* =====================================================
   MBG366 POPUP MODAL THEME
   Untuk popupModal / popup gambar / tombol OK
===================================================== */

/* Background overlay saat popup muncul */
html body .modal-backdrop,
html body .modal-backdrop.show {
  background:
    radial-gradient(circle at 20% 10%, rgba(0, 191, 255, 0.38), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(177, 76, 255, 0.38), transparent 35%),
    linear-gradient(180deg, rgba(3, 3, 10, 0.86), rgba(3, 3, 10, 0.94)) !important;
  opacity: 0.88 !important;
}

/* Kotak popup */
html body #popupModal .modal-dialog,
html body .modal-dialog {
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Isi popup */
html body #popupModal .modal-content,
html body .modal-content {
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 191, 255, 0.20), transparent 35%),
    radial-gradient(circle at 85% 100%, rgba(177, 76, 255, 0.28), transparent 42%),
    linear-gradient(180deg, #101018 0%, #070710 48%, #03030a 100%) !important;
  border: 1px solid rgba(177, 76, 255, 0.95) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.45),
    0 0 18px rgba(0, 191, 255, 0.85),
    0 0 34px rgba(177, 76, 255, 0.85),
    0 18px 38px rgba(0, 0, 0, 0.88) !important;
  overflow: hidden !important;
}

/* Area gambar popup */
html body #popupModal .modal-body,
html body .modal-body {
  background: #03030a !important;
  padding: 0 !important;
}

/* Gambar popup */
html body #popupModal .modal-body img,
html body .modal-body img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 1px solid rgba(0, 191, 255, 0.75) !important;
  box-shadow:
    0 0 10px rgba(0, 191, 255, 0.65),
    0 0 22px rgba(177, 76, 255, 0.55) !important;
}

/* Area tombol bawah popup */
html body #popupModal .d-grid,
html body .modal-content .d-grid {
  background:
    linear-gradient(90deg, rgba(0, 191, 255, 0.14), rgba(177, 76, 255, 0.20)) !important;
  padding: 10px !important;
}

/* Tombol OK popup */
html body #popupModal button.btn.btn-primary,
html body #popupModal .btn-primary,
html body .modal-content button.btn.btn-primary,
html body .modal-content .btn-primary {
  width: 100% !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.60) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #e6f7ff 18%, #00bfff 42%, #8a2be2 72%, #b14cff 100%) !important;
  color: #050510 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  box-shadow:
    0 4px 0 #050510,
    0 0 10px rgba(0, 191, 255, 0.95),
    0 0 22px rgba(177, 76, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* Hover tombol OK */
html body #popupModal button.btn.btn-primary:hover,
html body #popupModal .btn-primary:hover,
html body .modal-content button.btn.btn-primary:hover,
html body .modal-content .btn-primary:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.12) !important;
  box-shadow:
    0 5px 0 #050510,
    0 0 14px rgba(0, 191, 255, 1),
    0 0 30px rgba(177, 76, 255, 1) !important;
}

/* Mobile popup */
@media (max-width: 480px) {
  html body #popupModal .modal-dialog,
  html body .modal-dialog {
    max-width: calc(100% - 24px) !important;
  }

  html body #popupModal .modal-content,
  html body .modal-content {
    border-radius: 12px !important;
  }

  html body #popupModal button.btn.btn-primary,
  html body .modal-content button.btn.btn-primary {
    height: 40px !important;
    font-size: 15px !important;
  }
}

/* =====================================================
   MBG366 TOP MOBILE MENU + LONGTAIL CONTENT THEME
   Untuk menu atas, kategori icon, dan artikel SEO bawah
===================================================== */

/* Top mobile menubar */
html body nav.menubar.navbar.navbar-dark.bg-dark,
html body nav.menubar.navbar,
html body #navbar-top-wrapper nav.menubar {
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 191, 255, 0.26), transparent 34%),
    radial-gradient(circle at 85% 100%, rgba(177, 76, 255, 0.28), transparent 38%),
    linear-gradient(180deg, #101018 0%, #070710 48%, #03030a 100%) !important;
  border-bottom: 1px solid rgba(177, 76, 255, 0.85) !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.65),
    0 0 18px rgba(177, 76, 255, 0.55),
    inset 0 -1px 0 rgba(255,255,255,0.12) !important;
}

/* Icon menu kategori atas */
html body nav.menubar.navbar a,
html body nav.menubar.navbar .nav-link,
html body #navbar-top-wrapper a {
  color: #ffffff !important;
  text-shadow:
    0 0 5px rgba(255,255,255,0.80),
    0 0 10px rgba(0,191,255,0.90),
    0 0 18px rgba(177,76,255,0.78) !important;
}

/* Gambar/icon kategori di top menu */
html body nav.menubar.navbar img,
html body #navbar-top-wrapper img {
  filter:
    drop-shadow(0 0 5px rgba(0,191,255,0.85))
    drop-shadow(0 0 8px rgba(177,76,255,0.65)) !important;
}

/* Wrapper top menu */
html body #navbar-top-wrapper,
html body .fixed-top {
  background:
    linear-gradient(180deg, rgba(3,3,10,0.98), rgba(8,8,20,0.94)) !important;
  border-bottom: 1px solid rgba(177,76,255,0.65) !important;
}

/* =====================================================
   LONGTAIL CONTENT / ARTIKEL SEO BAWAH
===================================================== */

html body #longtail-content {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 191, 255, 0.18), transparent 35%),
    radial-gradient(circle at 88% 100%, rgba(177, 76, 255, 0.24), transparent 42%),
    linear-gradient(180deg, #101018 0%, #070710 50%, #03030a 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(177, 76, 255, 0.82) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.55),
    0 0 18px rgba(177, 76, 255, 0.55),
    inset 0 0 16px rgba(0, 191, 255, 0.12) !important;
  overflow: hidden !important;
}

/* Judul artikel */
html body #longtail-content h1,
html body #longtail-content h2,
html body #longtail-content h3,
html body #longtail-content h4 {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow:
    0 0 5px #ffffff,
    0 0 12px #00bfff,
    0 0 22px #8a2be2 !important;
}

/* Paragraf artikel */
html body #longtail-content p,
html body #longtail-content li,
html body #longtail-content div,
html body #longtail-content span {
  color: rgba(255,255,255,0.90) !important;
  line-height: 1.65 !important;
  text-shadow:
    0 0 4px rgba(0,191,255,0.35) !important;
}

/* Bold / keyword MBG366 */
html body #longtail-content strong,
html body #longtail-content b {
  color: #d7a8ff !important;
  text-shadow:
    0 0 6px rgba(177,76,255,0.95),
    0 0 12px rgba(0,191,255,0.65) !important;
}

/* Link di artikel */
html body #longtail-content a {
  color: #00d9ff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-shadow:
    0 0 6px rgba(0,191,255,0.90),
    0 0 12px rgba(177,76,255,0.65) !important;
}

/* List bullet */
html body #longtail-content ul,
html body #longtail-content ol {
  padding-left: 20px !important;
}

html body #longtail-content li::marker {
  color: #b14cff !important;
}

/* Garis pemisah jika ada */
html body #longtail-content hr {
  border-color: rgba(177,76,255,0.65) !important;
  box-shadow:
    0 0 8px rgba(0,191,255,0.45) !important;
}

/* Mobile longtail */
@media (max-width: 480px) {
  html body #longtail-content {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  html body #longtail-content h1 {
    font-size: 24px !important;
  }

  html body #longtail-content h2 {
    font-size: 21px !important;
  }

  html body #longtail-content h3 {
    font-size: 18px !important;
  }

  html body #longtail-content p,
  html body #longtail-content li {
    font-size: 14px !important;
  }
}

/* =====================================================
   MBG366 MAIN SLIDER / BANNER THEME
   Untuk banner promo atas / carousel utama
===================================================== */

/* Wrapper slider utama */
html body #main-slider,
html body .carousel.slide,
html body .carousel.pointer-event {
  position: relative !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 191, 255, 0.22), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(177, 76, 255, 0.26), transparent 42%),
    linear-gradient(180deg, #101018 0%, #070710 50%, #03030a 100%) !important;
  border: 1px solid rgba(177, 76, 255, 0.85) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.65),
    0 0 18px rgba(177, 76, 255, 0.60),
    0 0 28px rgba(0, 191, 255, 0.22) !important;
  overflow: hidden !important;
  padding: 2px !important;
}

/* Efek garis neon dalam slider */
html body #main-slider::before,
html body .carousel.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(0,191,255,0.16), transparent 42%, rgba(177,76,255,0.20)),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 36%);
  pointer-events: none;
  z-index: 2;
}

/* Area isi slider */
html body #main-slider .carousel-inner,
html body .carousel .carousel-inner {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #03030a !important;
}

/* Item slider */
html body #main-slider .carousel-item,
html body .carousel .carousel-item {
  background: #03030a !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Gambar banner slider */
html body #main-slider img.w-100,
html body #main-slider img,
html body .carousel img.w-100,
html body .carousel-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 191, 255, 0.65) !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.60),
    0 0 18px rgba(177, 76, 255, 0.55),
    inset 0 0 12px rgba(255,255,255,0.12) !important;
}

/* Hover banner */
html body #main-slider img:hover,
html body .carousel-item img:hover {
  filter: brightness(1.08) saturate(1.12) !important;
  box-shadow:
    0 0 10px rgba(255,255,255,0.65),
    0 0 18px rgba(0,191,255,0.95),
    0 0 30px rgba(177,76,255,0.85) !important;
}

/* Tombol next / prev jika ada */
html body #main-slider .carousel-control-prev,
html body #main-slider .carousel-control-next,
html body .carousel-control-prev,
html body .carousel-control-next {
  opacity: 0.95 !important;
  filter:
    drop-shadow(0 0 6px rgba(0,191,255,0.95))
    drop-shadow(0 0 12px rgba(177,76,255,0.75)) !important;
}

/* Indicator slider jika ada */
html body #main-slider .carousel-indicators button,
html body .carousel-indicators button {
  background-color: #b14cff !important;
  box-shadow:
    0 0 6px rgba(0,191,255,0.80),
    0 0 12px rgba(177,76,255,0.85) !important;
}

html body #main-slider .carousel-indicators .active,
html body .carousel-indicators .active {
  background-color: #00bfff !important;
}

/* Mobile adjustment */
@media (max-width: 480px) {
  html body #main-slider,
  html body .carousel.slide,
  html body .carousel.pointer-event {
    border-radius: 10px !important;
    padding: 2px !important;
  }

  html body #main-slider img,
  html body .carousel-item img {
    border-radius: 8px !important;
  }
}

/* =====================================================
   MBG366 JACKPOT + LIVE CHAT IMAGE THEME
   Untuk mbg366-jackpot-wrap-auto dan jackpot overlay
===================================================== */

/* Wrapper jackpot + live chat */
html body .mbg366-jackpot-wrap-auto {
  position: relative !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 191, 255, 0.20), transparent 35%),
    radial-gradient(circle at 85% 100%, rgba(177, 76, 255, 0.24), transparent 42%),
    linear-gradient(180deg, #101018 0%, #070710 48%, #03030a 100%) !important;
  border: 1px solid rgba(177, 76, 255, 0.88) !important;
  border-radius: 12px !important;
  padding: 2px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.70),
    0 0 18px rgba(177, 76, 255, 0.62),
    0 0 28px rgba(0, 191, 255, 0.24),
    inset 0 0 12px rgba(255, 255, 255, 0.10) !important;
  overflow: hidden !important;
}

/* Efek garis neon di atas gambar jackpot */
html body .mbg366-jackpot-wrap-auto::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(0,191,255,0.18), transparent 44%, rgba(177,76,255,0.22)),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 35%);
  pointer-events: none;
  z-index: 3;
}

/* Gambar jackpot/live chat */
html body .mbg366-jackpot-wrap-auto img,
html body .mbg366-jackpot-wrap-auto img.w-100,
html body .mbg366-jackpot-wrap-auto img.img-3d {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0, 191, 255, 0.68) !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.65),
    0 0 18px rgba(177, 76, 255, 0.58),
    inset 0 0 12px rgba(255,255,255,0.12) !important;
  filter: brightness(1.05) saturate(1.12) !important;
}

/* Hover gambar jackpot/live chat */
html body .mbg366-jackpot-wrap-auto img:hover {
  filter: brightness(1.14) saturate(1.18) !important;
  box-shadow:
    0 0 10px rgba(255,255,255,0.65),
    0 0 20px rgba(0,191,255,0.95),
    0 0 34px rgba(177,76,255,0.90) !important;
}

/* Overlay angka jackpot */
html body #mbg366-jackpot-overlay {
  position: absolute !important;
  left: 50% !important;
  top: 34% !important;
  transform: translate(-50%, -50%) !important;
  width: 78% !important;
  height: 22% !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* Kalau angka jackpot berada di dalam overlay */
html body #mbg366-jackpot-overlay,
html body #mbg366-jackpot-overlay * {
  color: #d8f8ff !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 5px #ffffff,
    0 0 10px #00bfff,
    0 0 18px #00bfff,
    0 0 28px #8a2be2,
    0 0 38px #b14cff !important;
}

/* Mobile adjustment */
@media (max-width: 480px) {
  html body .mbg366-jackpot-wrap-auto {
    border-radius: 10px !important;
    padding: 2px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  html body .mbg366-jackpot-wrap-auto img {
    border-radius: 8px !important;
  }

  html body #mbg366-jackpot-overlay {
    top: 34% !important;
    width: 78% !important;
    height: 22% !important;
  }
}

/* =====================================================
   MBG366 TOGEL MARKET / PASARAN TOGEL THEME
   Untuk row-togel dan carousel-togel
===================================================== */

/* Wrapper utama Pasaran Togel */
html body #row-togel {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 191, 255, 0.18), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(177, 76, 255, 0.22), transparent 42%),
    linear-gradient(180deg, #101018 0%, #070710 48%, #03030a 100%) !important;
  border: 1px solid rgba(177, 76, 255, 0.86) !important;
  border-radius: 12px !important;
  padding: 8px 6px !important;
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.62),
    0 0 18px rgba(177, 76, 255, 0.55),
    inset 0 0 12px rgba(0, 191, 255, 0.12) !important;
  overflow: hidden !important;
}

/* Header Pasaran Togel */
html body #row-togel .d-flex.justify-content-between.align-items-center,
html body #row-togel .d-flex {
  background:
    linear-gradient(90deg,
      rgba(0, 191, 255, 0.22) 0%,
      rgba(8, 8, 18, 0.90) 45%,
      rgba(177, 76, 255, 0.24) 100%
    ) !important;
  border-left: 2px solid #00bfff !important;
  border-right: 2px solid #b14cff !important;
  border-radius: 9px !important;
  padding: 5px 8px !important;
  margin-bottom: 7px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.50),
    0 0 16px rgba(177, 76, 255, 0.42) !important;
}

/* Text Pasaran Togel dan Lihat lebih banyak */
html body #row-togel,
html body #row-togel h1,
html body #row-togel h2,
html body #row-togel h3,
html body #row-togel h4,
html body #row-togel span,
html body #row-togel a {
  color: #ffffff !important;
  text-shadow:
    0 0 5px #ffffff,
    0 0 10px #00bfff,
    0 0 18px #8a2be2 !important;
}

html body #row-togel a {
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Carousel togel */
html body #carousel-togel,
html body #row-togel #carousel-togel,
html body #row-togel .owl-carousel {
  background:
    linear-gradient(180deg, rgba(3, 3, 10, 0.98), rgba(8, 8, 20, 0.94)) !important;
  border-radius: 10px !important;
  padding: 4px 0 !important;
  box-shadow:
    inset 0 0 12px rgba(0, 191, 255, 0.14),
    inset 0 0 18px rgba(177, 76, 255, 0.12) !important;
}

/* Stage outer */
html body #carousel-togel .owl-stage-outer {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Stage */
html body #carousel-togel .owl-stage {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* Item pasaran togel */
html body #carousel-togel .owl-item {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Kotak di dalam item togel */
html body #carousel-togel .owl-item > *,
html body #carousel-togel .owl-item div,
html body #carousel-togel .owl-item a {
  border-color: rgba(177, 76, 255, 0.85) !important;
}

/* Card pasaran togel: angka 8178 / 0271 / 9668 */
html body #carousel-togel .owl-item .card,
html body #carousel-togel .owl-item [class*="card"],
html body #carousel-togel .owl-item [class*="togel"],
html body #carousel-togel .owl-item [class*="pasaran"] {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, #3d4350 0%, #161720 52%, #050510 100%) !important;
  border: 1px solid rgba(177, 76, 255, 0.90) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 6px rgba(255,255,255,0.35),
    0 0 10px rgba(0,191,255,0.65),
    0 0 18px rgba(177,76,255,0.70),
    inset 0 0 8px rgba(255,255,255,0.10) !important;
}

/* Kalau struktur card togel pakai div langsung */
html body #carousel-togel .owl-item > div {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.15), transparent 35%),
    linear-gradient(180deg, #3d4350 0%, #171821 55%, #050510 100%) !important;
  border: 1px solid rgba(177, 76, 255, 0.82) !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 6px rgba(0,191,255,0.55),
    0 0 14px rgba(177,76,255,0.60) !important;
}

/* Angka togel besar */
html body #carousel-togel .owl-item,
html body #carousel-togel .owl-item * {
  color: #ffffff !important;
}

html body #carousel-togel .owl-item strong,
html body #carousel-togel .owl-item b,
html body #carousel-togel .owl-item .number,
html body #carousel-togel .owl-item [class*="number"],
html body #carousel-togel .owl-item [class*="angka"] {
  color: #d8f8ff !important;
  font-weight: 900 !important;
  text-shadow:
    0 0 5px #ffffff,
    0 0 10px #00bfff,
    0 0 18px #8a2be2 !important;
}

/* Nama pasaran */
html body #carousel-togel .owl-item small,
html body #carousel-togel .owl-item .small,
html body #carousel-togel .owl-item [class*="title"],
html body #carousel-togel .owl-item [class*="name"] {
  color: rgba(255,255,255,0.92) !important;
  text-shadow:
    0 0 5px rgba(0,191,255,0.85),
    0 0 10px rgba(177,76,255,0.60) !important;
}

/* Timer pasaran */
html body #carousel-togel .owl-item [class*="time"],
html body #carousel-togel .owl-item [class*="timer"],
html body #carousel-togel .owl-item [class*="jam"] {
  color: #d7a8ff !important;
  text-shadow:
    0 0 6px rgba(177,76,255,0.90),
    0 0 12px rgba(0,191,255,0.65) !important;
}

/* Hover card pasaran */
html body #carousel-togel .owl-item:hover > div,
html body #carousel-togel .owl-item:hover .card {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.12) saturate(1.12) !important;
  box-shadow:
    0 0 8px rgba(255,255,255,0.65),
    0 0 16px rgba(0,191,255,0.95),
    0 0 28px rgba(177,76,255,0.90) !important;
}

/* Navigation owl jika aktif */
html body #carousel-togel .owl-nav button,
html body #carousel-togel .owl-prev,
html body #carousel-togel .owl-next {
  background:
    linear-gradient(180deg, #ffffff 0%, #00bfff 42%, #8a2be2 100%) !important;
  color: #050510 !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 8px rgba(0,191,255,0.75),
    0 0 16px rgba(177,76,255,0.70) !important;
}

/* Dots owl jika aktif */
html body #carousel-togel .owl-dots .owl-dot span {
  background: #b14cff !important;
  box-shadow:
    0 0 6px rgba(0,191,255,0.70),
    0 0 12px rgba(177,76,255,0.85) !important;
}

html body #carousel-togel .owl-dots .owl-dot.active span {
  background: #00bfff !important;
}

/* Mobile */
@media (max-width: 480px) {
  html body #row-togel {
    border-radius: 10px !important;
    padding: 6px 4px !important;
  }

  html body #row-togel .d-flex {
    border-radius: 8px !important;
    padding: 4px 7px !important;
  }

  html body #carousel-togel .owl-item > div {
    border-radius: 10px !important;
  }
}

/* =====================================================
   MBG366 THEME - ANNOUNCEMENT BAR
===================================================== */

#announcement,
.announcement-bar {
  background: linear-gradient(90deg, #0a2238 0%, #0b1330 45%, #34104a 100%) !important;
  border-top: 1px solid rgba(0, 191, 255, 0.75) !important;
  border-bottom: 1px solid rgba(177, 76, 255, 0.75) !important;
  box-shadow:
    0 0 10px rgba(0, 191, 255, 0.30),
    0 0 16px rgba(177, 76, 255, 0.28),
    inset 0 0 10px rgba(255, 255, 255, 0.05) !important;
  color: #eaf6ff !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Glow tipis */
#announcement::before,
.announcement-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 191, 255, 0.08) 0%,
      rgba(0, 191, 255, 0.03) 25%,
      rgba(177, 76, 255, 0.08) 75%,
      rgba(177, 76, 255, 0.12) 100%
    );
  pointer-events: none;
}

/* Text di dalam announcement */
#announcement,
#announcement *,
.announcement-bar,
.announcement-bar * {
  color: #eaf6ff !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 6px rgba(0, 191, 255, 0.25),
    0 0 10px rgba(177, 76, 255, 0.18) !important;
}

/* Link di dalam announcement */
#announcement a,
.announcement-bar a {
  color: #7fe7ff !important;
  text-decoration: none !important;
}

#announcement a:hover,
.announcement-bar a:hover {
  color: #f3b7ff !important;
}

/* Kalau ada icon speaker di kiri */
#announcement i,
#announcement svg,
.announcement-bar i,
.announcement-bar svg {
  color: #7fe7ff !important;
  filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.45));
}

/* Mobile */
@media (max-width: 768px) {
  #announcement,
  .announcement-bar {
    background: linear-gradient(90deg, #0a2238 0%, #101733 45%, #34104a 100%) !important;
    border-top: 1px solid rgba(0, 191, 255, 0.65) !important;
    border-bottom: 1px solid rgba(177, 76, 255, 0.65) !important;
    box-shadow:
      0 0 8px rgba(0, 191, 255, 0.22),
      0 0 12px rgba(177, 76, 255, 0.20) !important;
  }

  #announcement,
  #announcement *,
  .announcement-bar,
  .announcement-bar * {
    font-size: 13px !important;
  }
}

/* =====================================================
   MBG366 TOP NAVBAR / LOGO HEADER THEME
   Untuk navbar-top-wrapper dan navbar-top
   Tidak mengubah layout / posisi
===================================================== */

html body #navbar-top-wrapper,
html body #navbar-top {
  background:
    linear-gradient(
      90deg,
      rgba(0, 191, 255, 0.18) 0%,
      rgba(3, 3, 10, 0.96) 32%,
      rgba(8, 8, 18, 0.98) 55%,
      rgba(177, 76, 255, 0.20) 100%
    ) !important;
  border-bottom: 1px solid rgba(177, 76, 255, 0.85) !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.55),
    0 0 18px rgba(177, 76, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Container di dalam navbar: hanya warna, tidak ubah posisi */
html body #navbar-top .container,
html body #navbar-top-wrapper .container {
  background:
    linear-gradient(
      90deg,
      rgba(0, 191, 255, 0.12) 0%,
      rgba(3, 3, 10, 0.35) 45%,
      rgba(177, 76, 255, 0.14) 100%
    ) !important;
  border-bottom: 1px solid rgba(0, 191, 255, 0.35) !important;
  box-shadow:
    inset 0 0 10px rgba(0, 191, 255, 0.10),
    inset 0 0 14px rgba(177, 76, 255, 0.10) !important;
}

/* Logo MBG366 di header */
html body #navbar-top img,
html body #navbar-top-wrapper img {
  filter:
    drop-shadow(0 0 6px rgba(0, 191, 255, 0.85))
    drop-shadow(0 0 12px rgba(177, 76, 255, 0.75)) !important;
}

/* Tombol hamburger kiri */
html body #navbar-top button,
html body #navbar-top .navbar-toggler,
html body #navbar-top-wrapper button,
html body #navbar-top-wrapper .navbar-toggler {
  background:
    linear-gradient(180deg, #101018 0%, #03030a 100%) !important;
  border: 1px solid rgba(0, 191, 255, 0.85) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 8px rgba(0, 191, 255, 0.75),
    0 0 16px rgba(177, 76, 255, 0.55) !important;
}

/* Icon hamburger */
html body #navbar-top .navbar-toggler-icon,
html body #navbar-top-wrapper .navbar-toggler-icon {
  filter:
    drop-shadow(0 0 5px rgba(0, 191, 255, 0.95))
    drop-shadow(0 0 9px rgba(177, 76, 255, 0.85)) !important;
}

/* Link / text jika ada di navbar */
html body #navbar-top a,
html body #navbar-top span,
html body #navbar-top-wrapper a,
html body #navbar-top-wrapper span {
  color: #ffffff !important;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.80),
    0 0 10px rgba(0, 191, 255, 0.90),
    0 0 18px rgba(177, 76, 255, 0.75) !important;
}

/* =====================================================
   FIX MOBILE CLICK / MODAL POPUP LAYER
===================================================== */

/* Pastikan popup berada di atas backdrop */
html body .modal {
  z-index: 999999 !important;
}

html body .modal-dialog,
html body .modal-content {
  position: relative !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

/* Tombol OK wajib bisa diklik */
html body #popupModal button,
html body #popupModal .btn,
html body .modal-content button,
html body .modal-content .btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1000001 !important;
}

/* Backdrop di belakang popup */
html body .modal-backdrop {
  z-index: 999998 !important;
}

/* Jangan sampai elemen dekorasi menutup klik */
html body::before,
html body::after,
html body #maincontent::before,
html body #maincontent::after,
html body .mbg366-jackpot-wrap-auto::before,
html body .carousel.slide::before,
html body #main-slider::before {
  pointer-events: none !important;
}

/* Saat modal sudah tertutup, jangan ada layer yang menghalangi klik */
html body:not(.modal-open) .modal-backdrop {
  display: none !important;
  pointer-events: none !important;
}

/* Kalau ada overlay sidebar, jangan blokir kalau tidak aktif */
html body .overlay:not(.active) {
  display: none !important;
  pointer-events: none !important;
}

/* Pastikan menu, navbar, dan fan menu tetap bisa diklik */
html body nav,
html body .navbar,
html body .menubar,
html body #mbg-fan-menu,
html body .mbg-fan-menu,
html body [class*="fan-menu"],
html body button,
html body a {
  pointer-events: auto !important;
}

/* =====================================================
   MBG366 POPUP CLICK FIX - WEBSITE TIDAK TERKUNCI
===================================================== */

html body #popupModal {
  z-index: 999999 !important;
  pointer-events: auto !important;
}

html body #popupModal .modal-dialog,
html body #popupModal .modal-content,
html body #popupModal .modal-body {
  pointer-events: auto !important;
}

html body #popupModal button,
html body #popupModal .btn,
html body #popupModal .btn-primary {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1000001 !important;
  touch-action: manipulation !important;
}

html body .modal-backdrop {
  z-index: 999998 !important;
}

html body:not(.modal-open) .modal-backdrop {
  display: none !important;
  pointer-events: none !important;
}

html body::before,
html body::after,
html body #maincontent::before,
html body #maincontent::after,
html body .carousel::before,
html body #main-slider::before,
html body .mbg366-jackpot-wrap-auto::before {
  pointer-events: none !important;
}

/* =====================================================
   MBG366 WALLPAPER FIX FINAL
   Desktop wallpaper tampil lagi
   Mobile & tablet tidak ubah layout
===================================================== */

html,
body {
  min-height: 100% !important;
}

/* =========================
   DESKTOP WALLPAPER
========================= */
@media (min-width: 769px) {
  body {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.00) 0%,
        rgba(0, 0, 0, 0.00) 16%,
        rgba(0, 0, 0, 0.12) 34%,
        rgba(0, 0, 0, 0.12) 66%,
        rgba(0, 0, 0, 0.00) 84%,
        rgba(0, 0, 0, 0.00) 100%
      ),
      url("https://supportmbg366.site/assets/img/mbg366-fifa-wallpaper.png") !important;

    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  /* Supaya wallpaper desktop terlihat */
  html body .wrapper,
  html body #content,
  html body #maincontent {
    background: transparent !important;
  }
}

/* =========================
   TABLET
========================= */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.00) 0%,
        rgba(0, 0, 0, 0.00) 18%,
        rgba(0, 0, 0, 0.12) 36%,
        rgba(0, 0, 0, 0.12) 64%,
        rgba(0, 0, 0, 0.00) 82%,
        rgba(0, 0, 0, 0.00) 100%
      ),
      url("https://supportmbg366.site/assets/img/mbg366-fifa-wallpaper.png") !important;

    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 480px) {
  body {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.00) 0%,
        rgba(0, 0, 0, 0.00) 18%,
        rgba(0, 0, 0, 0.10) 36%,
        rgba(0, 0, 0, 0.10) 64%,
        rgba(0, 0, 0, 0.00) 82%,
        rgba(0, 0, 0, 0.00) 100%
      ),
      url("https://supportmbg366.site/assets/img/mbg366-fifa-wallpaper.png") !important;

    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
}