:root {
  --bs-primary: #F5C542;
  --bs-primary-rgb: 245, 197, 66;
  --bs-secondary: #9B111E;
  --bs-secondary-rgb: 155, 17, 30;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #F7C71B;
  --bs-warning-rgb: 247, 199, 27;
  --bs-danger: #9B111E;
  --bs-danger-rgb: 155, 17, 30;
  --bs-light: #FFF8E7;
  --bs-light-rgb: 255, 248, 231;
  --bs-dark: #0E0803;
  --bs-dark-rgb: 14, 8, 3;
  --bs-body-bg: #0E0803;
  --bs-body-bg-rgb: 14, 8, 3;
  --bs-body-color: #FFF8E7;
  --bs-body-color-rgb: 255, 248, 231;
  --theme-gold: #F5C542;
  --theme-gold-light: #FFEC80;
  --theme-gold-cream: #FFF4CC;
  --theme-gold-dark: #C9962B;
  --theme-gold-darker: #8B6914;
  --theme-gold-deep: #6B4F00;
  --theme-border: #5C4000;
  --theme-card: #2A1A0A;
  --theme-card-hover: #3A2510;
  --theme-surface: #1C1105;
  --theme-surface-2: #130C04;
  --theme-maroon: #9B111E;
  --theme-maroon-dark: #760C17;
  --theme-maroon-deep: #51080F;
  --theme-text: #FFF8E7;
  --theme-text-muted: #CDB587;
  --theme-text-dark: #1C1105;
}

html,
body {
  background: radial-gradient(circle at top, #2A1908 0%, #0E0803 100%) !important;
  background-attachment: fixed !important;
  color: var(--theme-text) !important;
}

body {
  background-color: #0E0803 !important;
}

.site-header {
  background: linear-gradient(180deg, #FFF2A8 0%, #FAD040 30%, #F5C542 60%, #E4A600 100%) !important;
  border-bottom: 4px solid #5C4000 !important;
  box-shadow: 0 6px 24px rgba(245, 197, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container-fluid {
  background: transparent !important;
}

.site-navbar {
  background: transparent !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

@media (min-width: 992px) {
  body .site-header {
    background: linear-gradient(180deg, #FFF2A8 0%, #FAD040 30%, #F5C542 60%, #E4A600 100%) !important;
    background-color: #F5C542 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  html body header.site-header > .header-buttons-container,
  html body .site-header .header-buttons-container,
  body .site-header > .header-buttons-container,
  body .site-header .header-buttons-container,
  body .header-buttons-container {
    background-color: #2A1908 !important;
    background-image: linear-gradient(145deg,
      #3A2510 0%,
      #2A1908 28%,
      #1C1105 60%,
      #0E0803 100%) !important;
    background: linear-gradient(145deg,
      #3A2510 0%,
      #2A1908 28%,
      #1C1105 60%,
      #0E0803 100%) !important;
    border-top: 1.5px solid rgba(255, 236, 128, 0.28) !important;
    border-bottom: 2.5px solid #5C4000 !important;
    border-left: none !important;
    border-right: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      0 4px 14px rgba(0, 0, 0, 0.35) !important;
    position: relative;
    overflow: visible;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 40px !important;
  }

  html body header.site-header > .header-buttons-container a,
  html body .site-header .header-buttons-container a,
  body .site-header > .header-buttons-container a,
  body .site-header .header-buttons-container a,
  body .header-buttons-container a {
    color: #FFF4CC !important;
    text-shadow:
      -0.6px -0.6px 0 rgba(0, 0, 0, 0.78),
       0.6px -0.6px 0 rgba(0, 0, 0, 0.78),
      -0.6px  0.6px 0 rgba(0, 0, 0, 0.78),
       0.6px  0.6px 0 rgba(0, 0, 0, 0.78),
       0 0 7px rgba(255, 236, 128, 0.55) !important;
    border-bottom: 1px solid transparent !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html body header.site-header > .header-buttons-container a:hover,
  html body .site-header .header-buttons-container a:hover,
  body .site-header > .header-buttons-container a:hover,
  body .site-header .header-buttons-container a:hover,
  body .header-buttons-container a:hover {
    color: #FFEC80 !important;
    border-bottom-color: #F5C542 !important;
    text-shadow:
      -0.6px -0.6px 0 rgba(0, 0, 0, 0.85),
       0.6px -0.6px 0 rgba(0, 0, 0, 0.85),
      -0.6px  0.6px 0 rgba(0, 0, 0, 0.85),
       0.6px  0.6px 0 rgba(0, 0, 0, 0.85),
       0 0 12px rgba(255, 236, 128, 0.95) !important;
    background-color: rgba(245, 197, 66, 0.08) !important;
    border-radius: 10px 10px 0 0 !important;
  }
}

.logo-container .light-version-logo {
  filter: drop-shadow(0 2px 6px rgba(92, 27, 0, 0.55)) !important;
  content: url("https://cdn.robotaset.com/assets/tpl/7712b75dfd/images/logo.gif") !important;
  -webkit-mask: none !important;
  mask: none !important;
  object-fit: contain !important;
  max-width: 100% !important;
}

@media (-webkit-min-device-pixel-ratio: 0) {
  .logo-container .light-version-logo {
    content: url("https://cdn.robotaset.com/assets/tpl/7712b75dfd/images/logo.gif");
  }
}

@media (max-width: 991.98px) {
  .site-header {
    background: linear-gradient(180deg, #FAD040 0%, #F5C542 45%, #B78200 100%) !important;
    border-bottom: 3px solid #5C4000 !important;
  }

  .mobile-menu-icon {
    background: linear-gradient(180deg, #5C0002 0%, #2D0408 100%) !important;
    border-color: var(--theme-gold) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(245, 197, 66, 0.3) !important;
    color: var(--theme-gold-light) !important;
  }

  .mobile-menu-icon:hover,
  .mobile-menu-icon:focus-visible {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 197, 66, 0.45) !important;
  }

  .header-buttons-container {
    background: linear-gradient(145deg, #3A2510 0%, #0E0803 100%) !important;
    border-color: rgba(245, 197, 66, 0.5) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(92, 64, 0, 0.6) !important;
  }

  .header-buttons-container a {
    background: rgba(42, 26, 10, 0.92) !important;
    color: var(--theme-gold-light) !important;
    border-color: rgba(245, 197, 66, 0.32) !important;
    text-shadow: none !important;
  }

  .header-buttons-container a:hover,
  .header-buttons-container a:focus-visible {
    background: linear-gradient(90deg, rgba(155, 17, 30, 0.9) 0%, rgba(92, 64, 0, 0.95) 100%) !important;
    color: #FFF4CC !important;
    border-color: var(--theme-gold) !important;
  }
}

.home-progressive-jackpot {
  background-image: none !important;
  background: radial-gradient(ellipse at center top, rgba(245, 197, 66, 0.22) 0%, rgba(14, 8, 3, 0.95) 70%),
    linear-gradient(180deg, #1C1105 0%, #0E0803 100%) !important;
  border: 2px solid rgba(245, 197, 66, 0.4) !important;
  border-radius: 20px !important;
  color: var(--theme-text) !important;
  margin: 12px 0 !important;
  padding: 18px 28px !important;
  box-shadow: 0 0 28px rgba(245, 197, 66, 0.15), inset 0 0 0 1px rgba(255, 236, 128, 0.08) !important;
}

.home-progressive-jackpot .jackpot-currency {
  color: var(--theme-gold-light) !important;
  text-shadow: 0 0 12px rgba(245, 197, 66, 0.65), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.home-progressive-jackpot .jackpot-container {
  background-image: none !important;
  background: linear-gradient(180deg, rgba(42, 26, 10, 0.9) 0%, rgba(14, 8, 3, 0.95) 100%) !important;
  border: 2px solid rgba(245, 197, 66, 0.55) !important;
  border-radius: 16px !important;
  color: #FFEC80 !important;
  text-shadow: 0 0 16px rgba(245, 197, 66, 0.7), 0 2px 6px rgba(0, 0, 0, 0.55) !important;
  padding: 16px 30px 22px !important;
  box-shadow: inset 0 2px 6px rgba(255, 236, 128, 0.08), 0 0 20px rgba(245, 197, 66, 0.25) !important;
}

.home-inner-container {
  background-color: rgba(42, 26, 10, 0.88) !important;
  background: linear-gradient(180deg, rgba(58, 37, 16, 0.92) 0%, rgba(28, 17, 5, 0.95) 100%) !important;
  border: 1px solid rgba(245, 197, 66, 0.35) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 236, 128, 0.06) !important;
}

.popular-game-title-container {
  color: var(--theme-gold-light) !important;
}

.popular-game-title-container .title {
  color: #FFEC80 !important;
  text-shadow: 0 2px 6px rgba(92, 27, 0, 0.6) !important;
}

.popular-game-title-container > i {
  border-top: 2px solid var(--theme-gold-dark) !important;
  border-bottom: 2px solid var(--theme-border) !important;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 197, 66, 0.25) 50%, transparent 100%) !important;
}

.popular-game-title-container a {
  background: linear-gradient(180deg, #9B111E 0%, #51080F 100%) !important;
  color: #FFF4CC !important;
  border: 1px solid var(--theme-gold-dark) !important;
  box-shadow: 0 4px 12px rgba(155, 17, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.popular-game-title-container a:hover {
  background: linear-gradient(180deg, #B71325 0%, #760C17 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(155, 17, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.popular-game-title-container+.game-list-container {
  background-color: #0E0803 !important;
  background: linear-gradient(180deg, rgba(28, 17, 5, 0.98) 0%, rgba(14, 8, 3, 0.98) 100%) !important;
  border: 2px solid rgba(245, 197, 66, 0.4) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 236, 128, 0.05) !important;
}

.announcement-outer-container {
  background-color: var(--theme-maroon-deep) !important;
  background: linear-gradient(90deg, #51080F 0%, #760C17 50%, #51080F 100%) !important;
  border-top: 2px solid var(--theme-gold-dark) !important;
  border-bottom: 2px solid var(--theme-gold-dark) !important;
  color: #FFF4CC !important;
}

.announcement-container>[data-section=announcements] {
  background-color: #0E0803 !important;
  background: linear-gradient(180deg, #1C1105 0%, #0E0803 100%) !important;
  border: 1px solid rgba(245, 197, 66, 0.35) !important;
  color: var(--theme-gold-light) !important;
}

.marquee-text {
  background: linear-gradient(180deg, rgba(58, 37, 16, 0.96) 0%, rgba(28, 17, 5, 0.96) 100%) !important;
  border-color: rgba(245, 197, 66, 0.5) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 128, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.marquee-text::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 11.75V8.5a2 2 0 0 1 2-2h1.4c1.1 0 2.19-.26 3.18-.76L15.3 3.4a1.2 1.2 0 0 1 1.7 1.1v12.95a1.2 1.2 0 0 1-1.7 1.1l-4.72-2.34c-.99-.5-2.08-.76-3.18-.76H6a2 2 0 0 1-2-2v-1.7Z' stroke='%23FFF4CC' stroke-width='1.6'/%3E%3Cpath d='M9.6 15.7 10.9 20a1.6 1.6 0 0 0 3.06-.94l-.95-3.13' stroke='%23FFF4CC' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M18.3 8.2a4.8 4.8 0 0 1 0 6.8' stroke='%23FFF4CC' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/15px 15px no-repeat,
    radial-gradient(circle at 35% 30%, var(--theme-maroon) 0%, var(--theme-maroon-deep) 60%, #2D0408 100%) !important;
  box-shadow: 0 0 0 1px var(--theme-gold), 0 0 10px rgba(155, 17, 30, 0.5) !important;
}

.btn,
button,
.btn-primary {
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

.btn-primary,
.bg-primary {
  background: linear-gradient(180deg, #FAD040 0%, #F5C542 30%, #E4A600 70%, #B78200 100%) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-dark) !important;
  box-shadow: 0 4px 14px rgba(245, 197, 66, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(92, 64, 0, 0.4) !important;
}

.btn-primary:hover,
.bg-primary:hover,
button:hover {
  background: linear-gradient(180deg, #FFEC80 0%, #FAD040 30%, #F5C542 70%, #E4A600 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 197, 66, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(92, 64, 0, 0.45) !important;
}

.btn-danger,
.bg-danger {
  background: linear-gradient(180deg, #B71325 0%, #9B111E 30%, #760C17 70%, #51080F 100%) !important;
  border-color: var(--theme-maroon-deep) !important;
  color: #FFF4CC !important;
  box-shadow: 0 4px 14px rgba(155, 17, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.btn-danger:hover,
.bg-danger:hover {
  background: linear-gradient(180deg, #D12838 0%, #B71325 30%, #9B111E 70%, #760C17 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(155, 17, 30, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn-secondary,
.bg-secondary {
  background: linear-gradient(180deg, #51080F 0%, #3A2510 50%, #2A1A0A 100%) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-gold-light) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 128, 0.1) !important;
}

.btn-secondary:hover,
.bg-secondary:hover {
  background: linear-gradient(180deg, #760C17 0%, #5C4000 50%, #3A2510 100%) !important;
  border-color: var(--theme-gold) !important;
}

.bg-dark {
  background-color: #0E0803 !important;
  background: linear-gradient(180deg, #1C1105 0%, #0E0803 100%) !important;
}

.bg-light {
  background-color: var(--theme-card) !important;
  background: linear-gradient(180deg, #3A2510 0%, #2A1A0A 100%) !important;
  color: var(--theme-text) !important;
  border-color: rgba(245, 197, 66, 0.25) !important;
}

.text-primary {
  color: var(--theme-gold) !important;
}

.text-primary:hover {
  color: var(--theme-gold-light) !important;
}

.text-secondary {
  color: var(--theme-maroon) !important;
}

.text-dark {
  color: var(--theme-text-dark) !important;
}

.text-light {
  color: var(--theme-text) !important;
}

.text-muted,
.text-body-secondary {
  color: var(--theme-text-muted) !important;
}

a {
  color: var(--theme-gold) !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--theme-maroon) !important;
}

.card,
.card-body {
  background-color: var(--theme-card) !important;
  background: linear-gradient(180deg, rgba(58, 37, 16, 0.95) 0%, rgba(42, 26, 10, 0.98) 100%) !important;
  color: var(--theme-text) !important;
  border: 1px solid rgba(245, 197, 66, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 236, 128, 0.05) !important;
  transition: all 0.2s ease !important;
}

.card:hover {
  border-color: rgba(245, 197, 66, 0.6) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 22px rgba(245, 197, 66, 0.18), inset 0 0 0 1px rgba(255, 236, 128, 0.08) !important;
  transform: translateY(-2px);
}

.card-header,
.card-footer {
  background: linear-gradient(180deg, rgba(92, 64, 0, 0.4) 0%, rgba(42, 26, 10, 0.6) 100%) !important;
  border-color: rgba(245, 197, 66, 0.25) !important;
  color: var(--theme-gold-light) !important;
}

input,
select,
textarea,
.form-control,
.form-select {
  background-color: rgba(28, 17, 5, 0.95) !important;
  background: linear-gradient(180deg, rgba(28, 17, 5, 0.95) 0%, rgba(14, 8, 3, 0.98) 100%) !important;
  color: var(--theme-text) !important;
  border: 1px solid rgba(245, 197, 66, 0.35) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--theme-gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.28), 0 0 14px rgba(245, 197, 66, 0.18) !important;
  outline: none !important;
  background-color: rgba(58, 37, 16, 0.95) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--theme-text-muted) !important;
  opacity: 0.8;
}

.modal-content,
.popup-modal {
  background: linear-gradient(180deg, #3A2510 0%, #1C1105 100%) !important;
  color: var(--theme-text) !important;
  border: 2px solid var(--theme-gold-dark) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 36px rgba(245, 197, 66, 0.2) !important;
}

.modal-header,
.modal-footer {
  border-color: rgba(245, 197, 66, 0.35) !important;
  color: var(--theme-gold-light) !important;
}

.modal-title {
  color: #FFEC80 !important;
  text-shadow: 0 2px 6px rgba(92, 27, 0, 0.5) !important;
  font-weight: 800 !important;
}

.dropdown-menu {
  background: linear-gradient(180deg, #3A2510 0%, #1C1105 100%) !important;
  border: 1px solid var(--theme-gold-dark) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 16px rgba(245, 197, 66, 0.15) !important;
}

.dropdown-item {
  color: var(--theme-gold-light) !important;
  border-radius: 8px !important;
  margin: 2px 4px !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: linear-gradient(90deg, rgba(155, 17, 30, 0.85) 0%, rgba(92, 64, 0, 0.9) 100%) !important;
  color: #FFF4CC !important;
}

.table,
table {
  color: var(--theme-text) !important;
  background-color: transparent !important;
}

.table thead th,
th {
  background: linear-gradient(180deg, rgba(92, 64, 0, 0.55) 0%, rgba(58, 37, 16, 0.65) 100%) !important;
  color: var(--theme-gold-light) !important;
  border-color: rgba(245, 197, 66, 0.35) !important;
  font-weight: 800 !important;
}

.table tbody td,
td {
  border-color: rgba(245, 197, 66, 0.18) !important;
  background-color: rgba(28, 17, 5, 0.4) !important;
}

.table-striped tbody tr:nth-of-type(odd) td,
.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(42, 26, 10, 0.65) !important;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover {
  background-color: rgba(155, 17, 30, 0.2) !important;
  color: var(--theme-gold-light) !important;
}

hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, var(--theme-gold-dark) 30%, var(--theme-gold) 50%, var(--theme-gold-dark) 70%, transparent 100%) !important;
  opacity: 1 !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--theme-gold-light) !important;
  border-color: rgba(245, 197, 66, 0.3) !important;
  background: rgba(42, 26, 10, 0.6) !important;
  border-radius: 10px 10px 0 0 !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  background: rgba(92, 64, 0, 0.6) !important;
  border-color: var(--theme-gold) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: linear-gradient(180deg, #FAD040 0%, #E4A600 100%) !important;
  color: var(--theme-text-dark) !important;
  border-color: var(--theme-border) !important;
  font-weight: 700 !important;
}

.badge,
.bg-success,
.text-bg-success {
  background: linear-gradient(180deg, #9B111E 0%, #51080F 100%) !important;
  color: #FFF4CC !important;
  border: 1px solid var(--theme-gold-dark) !important;
}

.bg-info,
.text-bg-info {
  background: linear-gradient(180deg, #F7C71B 0%, #B78200 100%) !important;
  color: var(--theme-text-dark) !important;
}

.badge.bg-warning,
.bg-warning,
.text-bg-warning {
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 100%) !important;
  color: var(--theme-text-dark) !important;
  border-color: var(--theme-border) !important;
}

.alert {
  border-radius: 14px !important;
  border: 1px solid !important;
}

.alert-primary {
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.18) 0%, rgba(245, 197, 66, 0.08) 100%) !important;
  border-color: rgba(245, 197, 66, 0.5) !important;
  color: var(--theme-gold-light) !important;
}

.alert-danger {
  background: linear-gradient(180deg, rgba(155, 17, 30, 0.2) 0%, rgba(155, 17, 30, 0.1) 100%) !important;
  border-color: rgba(155, 17, 30, 0.55) !important;
  color: #FFCDD2 !important;
}

.alert-warning {
  background: linear-gradient(180deg, rgba(247, 199, 27, 0.2) 0%, rgba(247, 199, 27, 0.08) 100%) !important;
  border-color: rgba(247, 199, 27, 0.55) !important;
  color: var(--theme-gold-cream) !important;
}

.alert-success,
.alert.alert-success {
  background: linear-gradient(135deg,
    rgba(155, 17, 30, 0.38) 0%,
    rgba(183, 19, 37, 0.32) 25%,
    rgba(228, 139, 0, 0.28) 60%,
    rgba(245, 197, 66, 0.22) 100%) !important;
  border: 2px solid #C9962B !important;
  border-radius: 16px !important;
  color: #FFF8E7 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.22),
    0 0 16px rgba(245, 197, 66, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.42) !important;
  position: relative;
  overflow: hidden;
}

.alert-success::before,
.alert.alert-success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.alert-success > *,
.alert.alert-success > * {
  position: relative;
  z-index: 2;
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  font-weight: 700 !important;
}

.alert-info,
.alert.alert-info {
  background: linear-gradient(135deg,
    rgba(245, 197, 66, 0.34) 0%,
    rgba(228, 139, 0, 0.28) 30%,
    rgba(183, 130, 0, 0.22) 65%,
    rgba(155, 17, 30, 0.18) 100%) !important;
  border: 2px solid #C9962B !important;
  border-radius: 16px !important;
  color: #FFF4CC !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.25),
    0 0 16px rgba(245, 197, 66, 0.3),
    0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.alert-info > *,
.alert.alert-info > * {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
  font-weight: 700 !important;
}

.info,
div.info,
section.info,
.info-box,
.update-info,
.last-update,
.update-box,
.last-update-box,
.time-update,
.date-update,
.update-info-box,
.top-update,
.topbar-update,
.topbar-info,
.notification,
.notification-box,
.notif-box,
.notice-box,
.notice-board,
.announcement,
.announcement-box,
.pengumuman,
.pengumuman-box,
.update-container,
.updated-info {
  background: linear-gradient(135deg,
    #9B111E 0%,
    #B71325 22%,
    #D12838 45%,
    #E48B00 72%,
    #F5C542 100%) !important;
  border: 2.5px solid #FFEC80 !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
  text-shadow:
    -0.7px -0.7px 0 rgba(0, 0, 0, 0.85),
     0.7px -0.7px 0 rgba(0, 0, 0, 0.85),
    -0.7px  0.7px 0 rgba(0, 0, 0, 0.85),
     0.7px  0.7px 0 rgba(0, 0, 0, 0.85),
     0 1px 0 rgba(0, 0, 0, 0.4),
     0 2px 5px rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 0 rgba(92, 0, 2, 0.55),
    0 0 0 1.5px rgba(92, 0, 2, 0.6),
    0 0 18px rgba(209, 40, 56, 0.55),
    0 0 32px rgba(245, 197, 66, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 14px 22px !important;
  font-weight: 700 !important;
}

.info::before,
.info-box::before,
.update-info::before,
.last-update::before,
.update-box::before,
.notification-box::before,
.notice-box::before,
.announcement-box::before,
.pengumuman::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 3%;
  width: 94%;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 78%, transparent 100%);
  border-radius: 14px 14px 50% 50% / 70% 70% 30% 30%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.info > *,
.info-box > *,
.update-info > *,
.last-update > *,
.update-box > *,
.time-update > *,
.date-update > *,
.top-update > *,
.topbar-update > *,
.topbar-info > *,
.notification > *,
.notification-box > *,
.notif-box > *,
.notice-box > *,
.notice-board > *,
.announcement > *,
.announcement-box > *,
.pengumuman > *,
.pengumuman-box > *,
.update-container > *,
.updated-info > *,
.text-updated {
  position: relative;
  z-index: 2;
  color: #FFFFFF !important;
  text-shadow: inherit !important;
  font-weight: inherit !important;
}

.text-updated,
span.text-updated,
p.text-updated,
div.text-updated {
  font-weight: 800 !important;
  color: #FFF8E7 !important;
  text-shadow:
    -0.6px -0.6px 0 rgba(0, 0, 0, 0.9),
     0.6px -0.6px 0 rgba(0, 0, 0, 0.9),
    -0.6px  0.6px 0 rgba(0, 0, 0, 0.9),
     0.6px  0.6px 0 rgba(0, 0, 0, 0.9),
     0 0 12px rgba(255, 236, 128, 0.6) !important;
}

.suntikan-modal-body,
.modal-body.suntikan-modal-body {
  background: linear-gradient(180deg,
    #1C1105 0%,
    #2A1908 30%,
    #3A2510 65%,
    #2A1A0A 100%) !important;
  border: 1px solid #8B6914 !important;
  color: #FFF8E7 !important;
}

div[class*="bg-green"],
div[class*="success"]:not(.btn):not(.badge):not(.progress-bar):not(.alert-link) {
  background-color: transparent !important;
  background-image: linear-gradient(135deg,
    rgba(155, 17, 30, 0.35) 0%,
    rgba(209, 40, 56, 0.3) 35%,
    rgba(228, 139, 0, 0.28) 68%,
    rgba(245, 197, 66, 0.24) 100%) !important;
  border-color: #C9962B !important;
  color: #FFFFFF !important;
}

/* =========================================================
   AGGRESSIVE OVERRIDE - Banner UPDATE TERAKHIR (green div with NO class)
   Catch by green inline style + container position
   ========================================================= */
html body div[style*="rgb(10, 106, 23)"],
html body div[style*="rgb(10,106,23)"],
html body div[style*="#0a6a17"],
html body div[style*="#0A6A17"],
html body div[style*="#098a1a"],
html body div[style*="background-color: rgb(10"],
body div[style*="background:#0a6a17"],
body div[style*="background: #0a6a17"],
main div[style*="rgb(10, 106, 23)"],
main div[style*="rgb(10,106,23)"],
section div[style*="rgb(10, 106, 23)"],
section div[style*="rgb(10,106,23)"] {
  background-color: #8B0A18 !important;
  background-image: linear-gradient(135deg,
    #9B111E 0%,
    #B71325 22%,
    #D12838 45%,
    #E48B00 72%,
    #F5C542 100%) !important;
  background: linear-gradient(135deg,
    #9B111E 0%,
    #B71325 22%,
    #D12838 45%,
    #E48B00 72%,
    #F5C542 100%) !important;
  border: 2.5px solid #FFEC80 !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 0 rgba(92, 0, 2, 0.55),
    0 0 0 1.5px rgba(92, 0, 2, 0.6),
    0 0 18px rgba(209, 40, 56, 0.55),
    0 0 32px rgba(245, 197, 66, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 22px !important;
  font-weight: 700 !important;
}

html body div[style*="rgb(10, 106, 23)"] > *,
html body div[style*="rgb(10,106,23)"] > *,
html body div[style*="#0a6a17"] > *,
html body div[style*="#0A6A17"] > * {
  color: #FFFFFF !important;
  text-shadow:
    -0.7px -0.7px 0 rgba(0, 0, 0, 0.85),
     0.7px -0.7px 0 rgba(0, 0, 0, 0.85),
    -0.7px  0.7px 0 rgba(0, 0, 0, 0.85),
     0.7px  0.7px 0 rgba(0, 0, 0, 0.85),
     0 1px 0 rgba(0, 0, 0, 0.4),
     0 2px 5px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 2 !important;
  font-weight: 800 !important;
}

/* =========================================================
   TARGET PRECISION: Banner UPDATE TERAKHIR
   REAL class dari DOM live: div.date-display.mb-3.white-text
   inside SECTION (no class) di bawah area provider filter.
   ========================================================= */
html body main div.date-display,
html body section div.date-display,
html body div.date-display.mb-3,
html body div.date-display.white-text,
html body div.date-display.mb-3.white-text,
body div.date-display,
body section div[class*="date-display"],
div.date-display {
  background-color: #8B0A18 !important;
  background-image: linear-gradient(135deg,
    #9B111E 0%,
    #B71325 22%,
    #D12838 45%,
    #E48B00 72%,
    #F5C542 100%) !important;
  background: linear-gradient(135deg,
    #9B111E 0%,
    #B71325 22%,
    #D12838 45%,
    #E48B00 72%,
    #F5C542 100%) !important;
  border: 2.5px solid #FFEC80 !important;
  border-radius: 16px !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 0 rgba(92, 0, 2, 0.55),
    0 0 0 1.5px rgba(92, 0, 2, 0.6),
    0 0 18px rgba(209, 40, 56, 0.55),
    0 0 32px rgba(245, 197, 66, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 22px !important;
  font-weight: 800 !important;
}

html body main div.date-display::before,
html body section div.date-display::before,
html body div.date-display.mb-3.white-text::before {
  content: '';
  position: absolute !important;
  top: 5%;
  left: 3%;
  width: 94%;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 78%, transparent 100%) !important;
  border-radius: 14px 14px 50% 50% / 70% 70% 30% 30% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.85 !important;
}

/* =========================================================
   SWIPER CAROUSEL - Provider Navigation Arrows (Kiri/Kanan)
   REAL: div.swiper-button-prev/next (circle OUTER golden)
   PROBLEM: ::before inner = radial-gradient HIJAU (rgb(0,178,19), rgb(10,106,23))
   FIX: Ganti ::before jadi gradien EMAS-MERAH agar selaras tema.
   ========================================================= */
html body main div.swiper-button-prev,
html body section div.swiper-button-prev,
html body div.swiper-button-prev,
html body main div.swiper-button-next,
html body section div.swiper-button-next,
html body div.swiper-button-next,
div.swiper-button-prev,
div.swiper-button-next {
  background-color: transparent !important;
  background-image: radial-gradient(circle at 35% 35%,
    #FFE066 0%, #F5C542 28%, #C9962B 62%, #6B4F00 100%) !important;
  background: radial-gradient(circle at 35% 35%,
    #FFE066 0%, #F5C542 28%, #C9962B 62%, #6B4F00 100%) !important;
  border: 2px solid #FFEC80 !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(92, 0, 2, 0.35),
    0 0 0 1.5px rgba(92, 0, 2, 0.35),
    0 0 12px rgba(245, 197, 66, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.45) !important;
  color: #FFF8E7 !important;
}

html body div.swiper-button-prev::before,
html body div.swiper-button-next::before,
div.swiper-button-prev::before,
div.swiper-button-next::before,
[data-provider-arrow="1"]::before,
[data-provider-arrow]::before {
  background-color: #5C1A00 !important;
  background-image:
    radial-gradient(95.17% 95.17%, #C9962B 0%, #8B4A00 40%, #5C1A00 80%, #3A0C00 100%) !important;
  background:
    radial-gradient(95.17% 95.17%, #C9962B 0%, #8B4A00 40%, #5C1A00 80%, #3A0C00 100%) !important;
  border: 1px solid rgba(255, 236, 128, 0.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 10px rgba(201, 150, 43, 0.35) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html body .control-arrow.control-prev,
html body .control-arrow.control-next,
.control-arrow.control-prev,
.control-arrow.control-next {
  background-color: #2A1908 !important;
  background-image: linear-gradient(145deg,
    #3A2510 0%, #2A1908 35%, #1C1105 75%, #0E0803 100%) !important;
  background: linear-gradient(145deg,
    #3A2510 0%, #2A1908 35%, #1C1105 75%, #0E0803 100%) !important;
  border: 1.5px solid #C9962B !important;
  border-radius: 12px !important;
  color: #FFEC80 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 128, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 0 10px rgba(201, 150, 43, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4) !important;
  opacity: 1 !important;
}

/* =========================================================
   FLOATING LIVE CHAT - ICON BARU MODERN SELARAS DENGAN WHATSAPP
   Struktur asli: a[aria-label='Open the LiveChat modal'] > img.livechat.webp (70x70)
   Target replace: WAJIB SAMA PERSIS dengan WhatsApp floating button
   - Outer: flex column, fixed left:15px, size 64x78
   - ::before = Badge Circle: MAROON gradient (sama WA), SVG chat msg modern putih flat
   - ::after  = Text label "LIVE CHAT" putih cream bold 800, di bawah badge
   - img.child → display:none (tidak pakai gambar jadul lagi)
   ========================================================= */
html body a[aria-label='Open the LiveChat modal'],
body a[aria-label='Open the LiveChat modal'],
a[aria-label='Open the LiveChat modal'] {
  position: fixed !important;
  left: 15px !important;
  bottom: 148px !important;
  z-index: 99999 !important;
  width: 64px !important;
  height: 82px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  max-width: 64px !important;
  max-height: 82px !important;
  overflow: visible !important;
  margin: 0 !important;
}

html body a[aria-label='Open the LiveChat modal'] img,
body a[aria-label='Open the LiveChat modal'] img,
a[aria-label='Open the LiveChat modal'] img,
a[aria-label='Open the LiveChat modal'] .img-fluid {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
}

html body a[aria-label='Open the LiveChat modal']::before,
body a[aria-label='Open the LiveChat modal']::before,
a[aria-label='Open the LiveChat modal']::before {
  content: '' !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  display: block !important;
  flex: 0 0 auto !important;
  background-color: #8B0A18 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M24.6 7.2A11.9 11.9 0 0 0 16 3.8C9.4 3.8 4 9.2 4 15.8c0 2.2.6 4.3 1.7 6.1L3.5 28l6.2-2c1.7 1 3.7 1.6 5.8 1.6 6.6 0 12-5.3 12-11.9 0-3.1-1.2-6.1-3.3-8.3Zm-8.6 14.9c-2.1 0-3.8-1-4.6-1.5l-.7-.4-3.2 1l.7-3.1-.6-.6c-1-1.3-1.6-2.8-1.6-4.6 0-4.3 3.5-7.8 7.8-7.8 2.1 0 4 .8 5.5 2.2 1.5 1.5 2.3 3.4 2.3 5.5.1 4.3-3.4 8.8-7.8 8.8Z'/%3E%3Cpath fill='%23ffffff' d='M14.3 14.1a1 1 0 0 1-1.4 0l-.8-.8a1 1 0 0 1 1.4-1.4l.8.8a1 1 0 0 1 0 1.4Zm3.4 0a1 1 0 0 1-1.4 0 1 1 0 0 1 0-1.4l.8-.8a1 1 0 0 1 1.4 1.4l-.8.8Zm3.3 0a1 1 0 1 1-1.4-1.4l.6-.5.2-.2.8-.8a1 1 0 0 1 1.4 1.4l-.9.9-.8.8Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center, center !important;
  background-size: auto, 30px 30px !important;
  border: 3px solid #fff4cc !important;
  box-shadow:
    0 0 0 2px #6B4F00,
    0 10px 18px rgba(0, 0, 0, 0.38) !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 auto !important;
}

html body a[aria-label='Open the LiveChat modal']::after,
body a[aria-label='Open the LiveChat modal']::after,
a[aria-label='Open the LiveChat modal']::after {
  content: 'LIVE CHAT' !important;
  display: block !important;
  margin-top: -7px !important;
  padding: 0 !important;
  color: #fff4cc !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  font-family: inherit !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 2px rgba(0, 0, 0, 0.7) !important;
  position: relative !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 991.98px) {
  html body a[aria-label='Open the LiveChat modal'],
  body a[aria-label='Open the LiveChat modal'],
  a[aria-label='Open the LiveChat modal'] {
    bottom: calc(196px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   MODAL TIPS POLA GACOR - FULL THEME DARK GOLD + DARK RED (NO GREEN)
   Struktur DOM hasil inspect:
   div.gds-modal-overlay (fixed, z:99999) >
   div.gds-modal (bg hijau + border hijau) >
   - div.gds-modal-head (TIPS POLA GACOR + close button)
   - div.gds-pola-title (TANGGAL: KAMIS, 6 AGUSTUS 2026)
   - div.gds-modal-body >
     - div.gds-pola-layout > (dua kolom: left STEP, right INFO)
       - LEFT: > div > div.gds-step > div.gds-step-top (STEP 1..4 + sub title)
       - RIGHT: > div > div.gds-info-cover + game details
   ========================================================= */

/* 1. OUTER BACKGROUND OVERLAY (keep transparan gelap, cuma upgrade shadow + border pinggir) */
html body div.gds-modal-overlay,
body div.gds-modal-overlay,
div.gds-modal-overlay {
  background-color: rgba(5, 2, 12, 0.82) !important;
  backdrop-filter: blur(6px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
  z-index: 99999 !important;
}

/* 2. MODAL CONTAINER UTAMA - BACKGROUND HIJAU → DARK GOLD + DARK RED GRADIENT + BORDER EMAS NEON + RIGHT/LEFT NEON */
html body div.gds-modal-overlay div.gds-modal,
body div.gds-modal-overlay div.gds-modal,
div.gds-modal {
  background-color: #1C1105 !important;
  background-image: linear-gradient(145deg, #2A1908 0%, #3A2510 20%, #1C1105 50%, #2A0910 82%, #3A0C14 100%) !important;
  background: linear-gradient(145deg, #2A1908 0%, #3A2510 20%, #1C1105 50%, #2A0910 82%, #3A0C14 100%) !important;
  border: 2.5px solid #FFEC80 !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,64,0,0.85),
    inset 0 1px 0 rgba(255,244,204,0.28),
    inset 0 -3px 0 rgba(58,12,20,0.55),
    0 0 0 1.5px rgba(92,0,2,0.55),
    0 0 22px rgba(209,40,56,0.55),
    0 0 42px rgba(245,197,66,0.55),
    0 12px 36px rgba(0,0,0,0.7) !important;
  color: #FFF8E7 !important;
  overflow: visible !important;
  position: relative !important;
  max-height: 94vh !important;
  min-height: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

/* PSEUDO ELEMENT BORDER KANAN-KIRI NEON (ganti yang tadinya hijau solid) */
html body div.gds-modal-overlay div.gds-modal::before,
body div.gds-modal-overlay div.gds-modal::before,
div.gds-modal::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: -12px !important;
  width: 10px !important;
  height: 100% !important;
  background-color: #FFEC80 !important;
  background-image: linear-gradient(180deg, #FFEC80 0%, #F5C542 35%, #D12838 72%, #9B111E 100%) !important;
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 35%, #D12838 72%, #9B111E 100%) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow:
    0 0 0 1px rgba(92,64,0,0.7),
    0 0 14px rgba(255,236,128,0.7),
    0 0 28px rgba(209,40,56,0.5) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body div.gds-modal-overlay div.gds-modal::after,
body div.gds-modal-overlay div.gds-modal::after,
div.gds-modal::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -12px !important;
  width: 10px !important;
  height: 100% !important;
  background-color: #FFEC80 !important;
  background-image: linear-gradient(180deg, #FFEC80 0%, #F5C542 35%, #D12838 72%, #9B111E 100%) !important;
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 35%, #D12838 72%, #9B111E 100%) !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow:
    0 0 0 1px rgba(92,64,0,0.7),
    0 0 14px rgba(255,236,128,0.7),
    0 0 28px rgba(209,40,56,0.5) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* 3. HEADER MODAL - JUDUL TIPS POLA GACOR + TOMBOL X CLOSE */
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head,
body div.gds-modal-overlay div.gds-modal div.gds-modal-head,
div.gds-modal div.gds-modal-head {
  padding: 14px 24px 10px 24px !important;
  border-bottom: 2px solid rgba(255,236,128,0.35) !important;
  background: linear-gradient(90deg, rgba(155,17,30,0.35) 0%, rgba(245,197,66,0.18) 50%, rgba(155,17,30,0.35) 100%) !important;
  border-radius: 16px 16px 0 0 !important;
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  box-sizing: border-box !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head h2,
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head h1,
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head h3,
div.gds-modal div.gds-modal-head > *:first-child,
div.gds-modal-head .gds-modal-title,
div.gds-modal-head [class*="title"],
div.gds-modal-head [class*="judul"] {
  color: #FFF8E7 !important;
  font-weight: 900 !important;
  font-size: 30px !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  margin: 0 !important;
  text-shadow:
    0 0 2px rgba(0,0,0,0.8),
    0 2px 6px rgba(0,0,0,0.65),
    0 0 14px rgba(255,236,128,0.65),
    0 0 28px rgba(209,40,56,0.55) !important;
  -webkit-text-stroke: 0.6px #1C1105 !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
}

/* 4. CLOSE BUTTON X (MAROON + EMAS) */
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head button,
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head [role="button"],
html body div.gds-modal-overlay div.gds-modal .gds-close,
html body div.gds-modal-overlay div.gds-modal [class*="close"],
div.gds-modal .gds-close-btn,
div.gds-modal button.close-modal,
div.gds-modal-head > button:last-child,
div.gds-modal-head > span:last-child {
  background-color: #8B0A18 !important;
  background-image: radial-gradient(circle at 35% 30%, #D12838 0%, #9B111E 45%, #5C0A12 100%) !important;
  background: radial-gradient(circle at 35% 30%, #D12838 0%, #9B111E 45%, #5C0A12 100%) !important;
  color: #FFEC80 !important;
  border: 2px solid #FFEC80 !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  line-height: 34px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,0,2,0.7),
    inset 0 1px 0 rgba(255,244,204,0.45),
    inset 0 -2px 0 rgba(92,0,2,0.5),
    0 0 0 1.5px rgba(92,64,0,0.65),
    0 0 12px rgba(245,197,66,0.55),
    0 0 22px rgba(209,40,56,0.55),
    0 3px 8px rgba(0,0,0,0.55) !important;
  cursor: pointer !important;
  padding: 0 !important;
  top: 14px !important;
  right: 16px !important;
  position: absolute !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-modal-head button:hover,
html body div.gds-modal-overlay div.gds-modal .gds-close:hover,
div.gds-modal .gds-close-btn:hover,
div.gds-modal button.close-modal:hover,
div.gds-modal-head > button:last-child:hover {
  transform: scale(1.08) rotate(90deg) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,0,2,0.7),
    inset 0 1px 0 rgba(255,244,204,0.55),
    inset 0 -2px 0 rgba(92,0,2,0.5),
    0 0 0 1.5px rgba(92,64,0,0.65),
    0 0 20px rgba(255,236,128,0.85),
    0 0 36px rgba(209,40,56,0.75),
    0 4px 12px rgba(0,0,0,0.6) !important;
  color: #fff4cc !important;
}

/* 5. TANGGAL TITLE (KAMIS, 6 AGUSTUS 2026) */
html body div.gds-modal-overlay div.gds-modal div.gds-pola-title,
body div.gds-modal-overlay div.gds-modal div.gds-pola-title,
div.gds-modal div.gds-pola-title {
  padding: 8px 24px 6px 24px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #FFEC80 !important;
  background: transparent !important;
  border-bottom: 1.5px dashed rgba(255,236,128,0.25) !important;
  text-shadow:
    0 0 2px rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,236,128,0.5) !important;
  flex: 0 0 auto !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 6. BODY + LAYOUT KIRI-KANAN */
html body div.gds-modal-overlay div.gds-modal div.gds-modal-body,
body div.gds-modal-overlay div.gds-modal div.gds-modal-body,
div.gds-modal div.gds-modal-body {
  padding: 14px 24px 16px 24px !important;
  background: transparent !important;
  color: #FFF8E7 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  scroll-behavior: smooth !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout,
body div.gds-modal-overlay div.gds-modal div.gds-pola-layout,
div.gds-modal div.gds-pola-layout {
  gap: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: auto !important;
}
div.gds-modal div.gds-pola-layout > div:first-child /* LEFT STEP COLUMN */,
div.gds-modal div.gds-pola-layout > div:nth-child(1) {
  padding: 0 !important;
  background: transparent !important;
}
div.gds-modal div.gds-pola-layout > div:last-child /* RIGHT INFO COLUMN */,
div.gds-modal div.gds-pola-layout > div:nth-child(2) {
  padding: 0 !important;
  background: transparent !important;
}

/* 7. STEP CARDS - AREA HIJAU TERANG DAN HIJAU DARK → DARK GOLD + MAROON STRIPE */
/* Step outer card (background gelap + border emas muda) */
html body div.gds-modal-overlay div.gds-modal div.gds-step,
body div.gds-modal-overlay div.gds-modal div.gds-step,
div.gds-modal div.gds-step {
  background-color: #2A1908 !important;
  background-image: linear-gradient(155deg, #3A2510 0%, #2A1908 45%, #1C0F10 100%) !important;
  background: linear-gradient(155deg, #3A2510 0%, #2A1908 45%, #1C0F10 100%) !important;
  border: 1.5px solid rgba(255,236,128,0.55) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(58,37,16,0.7),
    inset 0 1px 0 rgba(255,244,204,0.2),
    0 0 0 1px rgba(92,64,0,0.35),
    0 0 12px rgba(92,0,2,0.25),
    0 5px 14px rgba(0,0,0,0.45) !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  color: #FFF8E7 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-step:last-child,
body div.gds-modal-overlay div.gds-modal div.gds-step:last-child,
div.gds-modal div.gds-step:last-child {
  margin-bottom: 0 !important;
}

/* Step TOP AREA (HIJAU CERAH ASLI → MAROON KE EMAS GRADIENT = judul STEP X + subtitle) */
html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top,
body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top,
div.gds-modal div.gds-step div.gds-step-top {
  background-color: #8B0A18 !important;
  background-image: linear-gradient(135deg, #9B111E 0%, #B71325 28%, #D12838 52%, #E48B00 78%, #F5C542 100%) !important;
  background: linear-gradient(135deg, #9B111E 0%, #B71325 28%, #D12838 52%, #E48B00 78%, #F5C542 100%) !important;
  padding: 10px 16px !important;
  border-bottom: 2px solid rgba(255,236,128,0.55) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(92,0,2,0.55), inset 0 1px 0 rgba(255,244,204,0.32) !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 68px !important;
}
/* Shine effect top */
html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top::before,
body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top::before,
div.gds-modal div.gds-step div.gds-step-top::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -35% !important;
  width: 70% !important;
  height: 100% !important;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,244,204,0.35) 52%, transparent 100%) !important;
  transform: skewX(-14deg) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
}

/* Text STEP (STEP 1, STEP 2, dst) + Subtitle (Pancing Freespin!, Naikkan Taruhan, dll) */
html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top > div:first-child,
html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top > span:first-child,
div.gds-modal div.gds-step div.gds-step-top [class*="step-no"],
div.gds-modal div.gds-step div.gds-step-top > *:nth-child(1) {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #fff4cc !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  text-shadow:
    -1px -1px 0 #1C1105, 1px -1px 0 #1C1105, -1px 1px 0 #1C1105, 1px 1px 0 #1C1105,
    0 0 2px #1C1105,
    0 2px 6px rgba(0,0,0,0.55),
    0 0 14px rgba(255,236,128,0.85),
    0 0 24px rgba(209,40,56,0.65) !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top > div:last-child,
html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top > span:last-child,
div.gds-modal div.gds-step div.gds-step-top [class*="step-sub"],
div.gds-modal div.gds-step div.gds-step-top > *:last-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #FFF8E7 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-shadow:
    -1px -1px 0 rgba(28,17,5,0.85), 1px -1px 0 rgba(28,17,5,0.85), -1px 1px 0 rgba(28,17,5,0.85), 1px 1px 0 rgba(28,17,5,0.85),
    0 1px 4px rgba(0,0,0,0.55),
    0 0 10px rgba(255,236,128,0.55) !important;
  position: relative !important;
  z-index: 2 !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Step BOTTOM CONTENT (dark gold / checklist area) */
html body div.gds-modal-overlay div.gds-modal div.gds-step > div:last-child,
html body div.gds-modal-overlay div.gds-modal div.gds-step > :not(.gds-step-top),
div.gds-modal div.gds-step div.gds-step-bottom,
div.gds-modal div.gds-step > div:not([class*="step-top"]):not([class*="gds-modal-head"]),
div.gds-modal div.gds-step .gds-checklist,
div.gds-modal div.gds-step [class*="check"] {
  padding: 10px 16px 12px 16px !important;
  background: transparent !important;
  color: #FFF8E7 !important;
  line-height: 1.5 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Checklist / Spin Label text di step bottom (mis: "59X Spin Checklist") */
html body div.gds-modal-overlay div.gds-modal div.gds-step strong,
html body div.gds-modal-overlay div.gds-modal div.gds-step b,
div.gds-modal div.gds-step span[class*="label"],
div.gds-modal div.gds-step div[class*="checklist-label"],
div.gds-modal div.gds-step > div:last-child > *:first-child {
  color: #FFEC80 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-shadow: 0 0 2px #1C1105, 0 1px 4px rgba(0,0,0,0.6), 0 0 10px rgba(255,236,128,0.45) !important;
  margin-bottom: 2px !important;
  display: block !important;
  line-height: 1.3 !important;
  padding: 0 !important;
}

/* Step deskripsi text dibawah checklist label */
html body div.gds-modal-overlay div.gds-modal div.gds-step p,
html body div.gds-modal-overlay div.gds-modal div.gds-step > div:last-child > *:not(:first-child),
div.gds-modal div.gds-step div[class*="step-desc"],
div.gds-modal div.gds-step span[class*="desc"] {
  color: #fff4cc !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

/* 8. KANAN INFO DETAIL GAME (Gates of Olympus 1000) */
html body div.gds-modal-overlay div.gds-modal div.gds-info-cover,
body div.gds-modal-overlay div.gds-modal div.gds-info-cover,
div.gds-modal div.gds-info-cover {
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  background-color: #2A1908 !important;
  background-image: linear-gradient(135deg, #3A2510 0%, #2A1908 55%, #1C1105 100%) !important;
  background: linear-gradient(135deg, #3A2510 0%, #2A1908 55%, #1C1105 100%) !important;
  border: 2px solid rgba(255,236,128,0.6) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(58,37,16,0.7),
    inset 0 1px 0 rgba(255,244,204,0.22),
    0 0 0 1.5px rgba(92,64,0,0.45),
    0 0 16px rgba(92,0,2,0.35),
    0 6px 16px rgba(0,0,0,0.5) !important;
  text-align: center !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-info-cover img,
html body div.gds-modal-overlay div.gds-modal div.gds-info-cover [class*="thumb"],
div.gds-modal div.gds-info-cover img,
div.gds-modal div.gds-info-cover [class*="cover-img"] {
  border-radius: 12px !important;
  border: 2px solid #FFEC80 !important;
  box-shadow:
    0 0 0 1px rgba(92,64,0,0.65),
    0 0 14px rgba(255,236,128,0.55),
    0 0 26px rgba(209,40,56,0.45),
    0 4px 10px rgba(0,0,0,0.5) !important;
  margin-bottom: 10px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* NAMA GAME JUDUL INFO KANAN */
html body div.gds-modal-overlay div.gds-modal div.gds-info-cover + div,
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child h3,
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child h2,
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child > div:nth-child(2) > *:first-child,
div.gds-modal div.gds-pola-layout > div:last-child .gds-nama-game {
  color: #fff4cc !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  margin: 6px 0 18px 0 !important;
  text-shadow:
    -1px -1px 0 #1C1105, 1px -1px 0 #1C1105, -1px 1px 0 #1C1105, 1px 1px 0 #1C1105,
    0 0 2px #1C1105,
    0 2px 6px rgba(0,0,0,0.6),
    0 0 16px rgba(255,236,128,0.85),
    0 0 28px rgba(209,40,56,0.6) !important;
  font-family: inherit !important;
}

/* ROW DETAIL INFO (PROVIDER, STAKE, PERSENTASE, VOLATILITY, JAM GACOR) */
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child div[class*="info-row"],
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child > div:not(.gds-info-cover):not([class*="nama-game"]),
div.gds-modal div.gds-info-row,
div.gds-modal div[class*="detail-row"] {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 18px !important;
  margin-bottom: 9px !important;
  background-color: #1C1105 !important;
  background-image: linear-gradient(90deg, rgba(155,17,30,0.35) 0%, rgba(42,25,8,0.9) 35%, rgba(42,25,8,0.9) 65%, rgba(155,17,30,0.35) 100%) !important;
  background: linear-gradient(90deg, rgba(155,17,30,0.35) 0%, rgba(42,25,8,0.9) 35%, rgba(42,25,8,0.9) 65%, rgba(155,17,30,0.35) 100%) !important;
  border: 1.5px solid rgba(255,236,128,0.5) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(28,17,5,0.8), 0 2px 8px rgba(0,0,0,0.35) !important;
}
/* Label kiri (PROVIDER:, STAKE BET:, dst) */
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child div[class*="info-row"] > *:first-child,
div.gds-modal div.gds-info-row > *:first-child,
div.gds-modal div[class*="detail-row"] > *:first-child {
  color: #FFEC80 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 0 2px #1C1105, 0 1px 4px rgba(0,0,0,0.6), 0 0 10px rgba(255,236,128,0.45) !important;
  font-family: inherit !important;
}
/* Value kanan (Pragmatic Play, 100-200, 57%, 19:00 - 20:00, dst) */
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child div[class*="info-row"] > *:last-child,
div.gds-modal div.gds-info-row > *:last-child,
div.gds-modal div[class*="detail-row"] > *:last-child {
  color: #FFF8E7 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.55), 0 0 10px rgba(255,236,128,0.35) !important;
  font-family: inherit !important;
}
/* PERSENTASE (%) - highlight warna emas */
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child div[class*="info-row"] > *:last-child:contains('%'),
div.gds-modal div.gds-info-row > *:last-child:contains('%') {
  color: #FFEC80 !important;
}

/* NOTE / CATATAN TERAKHIR (teks italic biru → putih-cream dengan border bawah) */
html body div.gds-modal-overlay div.gds-modal div.gds-pola-layout > div:last-child > div:last-child,
div.gds-modal div.gds-pola-layout > div:last-child [class*="note"],
div.gds-modal div.gds-pola-layout > div:last-child [class*="catatan"] {
  color: #fff4cc !important;
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  margin-top: 6px !important;
  text-align: left !important;
  border-left: 4px solid #D12838 !important;
  background: rgba(28,17,5,0.85) !important;
  border-radius: 0 10px 10px 0 !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255,236,128,0.25), -4px 0 12px rgba(209,40,56,0.35) !important;
}

/* TOMBOL CTA "MAIN SEKARANG" (sisa border hijau → ganti tema emas-merah gradient) */
html body div.gds-modal-overlay div.gds-modal a.gds-cta,
html body div.gds-modal-overlay div.gds-modal div.gds-info-cover a.gds-cta,
div.gds-modal a.gds-cta {
  border-top-color: #FFEC80 !important;
  border-right-color: #FFEC80 !important;
  border-bottom-color: #FFEC80 !important;
  border-left-color: #FFEC80 !important;
  border-color: #FFEC80 !important;
  background-color: #9B111E !important;
  background-image: linear-gradient(135deg, #8B0A18 0%, #B71325 28%, #D12838 52%, #E48B00 76%, #F5C542 100%) !important;
  background: linear-gradient(135deg, #8B0A18 0%, #B71325 28%, #D12838 52%, #E48B00 76%, #F5C542 100%) !important;
  color: #fff4cc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 6px rgba(255,236,128,0.45) !important;
  box-shadow: 0 0 14px rgba(255,236,128,0.45), 0 0 10px rgba(209,40,56,0.6), inset 0 1px 0 rgba(255,244,204,0.35), inset 0 -2px 6px rgba(92,0,2,0.5) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.22s ease !important;
}
html body div.gds-modal-overlay div.gds-modal a.gds-cta:hover,
div.gds-modal a.gds-cta:hover {
  filter: brightness(1.14) saturate(1.1) !important;
  transform: translateY(-1.5px) scale(1.015) !important;
  border-color: #fff4cc !important;
  box-shadow: 0 0 22px rgba(255,236,128,0.75), 0 0 16px rgba(209,40,56,0.9), inset 0 1px 0 rgba(255,244,204,0.5), inset 0 -2px 6px rgba(92,0,2,0.5) !important;
}

/* 9. SCROLLBAR MODAL (yang tadinya HIJAU solid di pojok kanan bawah) → EMAS-MERAH GRADIENT */
div.gds-modal::-webkit-scrollbar,
div.gds-modal-overlay::-webkit-scrollbar,
div.gds-modal div.gds-modal-body::-webkit-scrollbar,
div.gds-modal *::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}
div.gds-modal::-webkit-scrollbar-track,
div.gds-modal div.gds-modal-body::-webkit-scrollbar-track,
div.gds-modal *::-webkit-scrollbar-track {
  background: #1C1105 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(92,64,0,0.6) !important;
}
div.gds-modal::-webkit-scrollbar-thumb,
div.gds-modal div.gds-modal-body::-webkit-scrollbar-thumb,
div.gds-modal *::-webkit-scrollbar-thumb {
  background-color: #F5C542 !important;
  background-image: linear-gradient(180deg, #FFEC80 0%, #F5C542 40%, #E48B00 62%, #D12838 82%, #9B111E 100%) !important;
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 40%, #E48B00 62%, #D12838 82%, #9B111E 100%) !important;
  border-radius: 10px !important;
  border: 2px solid #1C1105 !important;
  box-shadow: 0 0 8px rgba(255,236,128,0.75), 0 0 16px rgba(209,40,56,0.55) !important;
}
div.gds-modal::-webkit-scrollbar-thumb:hover,
div.gds-modal div.gds-modal-body::-webkit-scrollbar-thumb:hover,
div.gds-modal *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fff4cc 0%, #FFEC80 40%, #F5C542 62%, #B71325 82%, #8B0A18 100%) !important;
}

/* 10. SAFETY AGGRESSIVE OVERRIDE: semua element DALAM MODAL yang inline-style BERWARNA HIJAU RGB (pola RGB hijau umum), paksa overwrite! */
html body div.gds-modal div[style*="rgb(0, 10"],
html body div.gds-modal div[style*="rgb(0,10"],
html body div.gds-modal div[style*="rgb(1, 4"],
html body div.gds-modal div[style*="rgb(1,4"],
html body div.gds-modal div[style*="rgb(5, 107"],
html body div.gds-modal div[style*="rgb(5,107"],
html body div.gds-modal div[style*="rgb(0, 100"],
html body div.gds-modal div[style*="rgb(77, 255"],
html body div.gds-modal div[style*="rgb(6, 143"],
html body div.gds-modal div[style*="rgb(6,143"],
html body div.gds-modal div[style*="rgba(77, 255"] {
  background-image: none !important;
}

/* 11. MODAL RESPONSIVE - Mobile */
@media (max-width: 991.98px) {
  html body div.gds-modal-overlay div.gds-modal,
  body div.gds-modal-overlay div.gds-modal,
  div.gds-modal {
    border-radius: 14px !important;
    margin: 10px !important;
  }
  html body div.gds-modal-overlay div.gds-modal::before,
  html body div.gds-modal-overlay div.gds-modal::after,
  div.gds-modal::before,
  div.gds-modal::after {
    width: 7px !important;
  }
  html body div.gds-modal-overlay div.gds-modal div.gds-modal-head,
  body div.gds-modal-overlay div.gds-modal div.gds-modal-head,
  div.gds-modal div.gds-modal-head {
    padding: 14px 16px 10px 16px !important;
  }
  html body div.gds-modal-overlay div.gds-modal div.gds-modal-head h2,
  div.gds-modal div.gds-modal-head > *:first-child {
    font-size: 22px !important;
  }
  html body div.gds-modal-overlay div.gds-modal div.gds-modal-body,
  body div.gds-modal-overlay div.gds-modal div.gds-modal-body,
  div.gds-modal div.gds-modal-body {
    padding: 12px 16px !important;
  }
  html body div.gds-modal-overlay div.gds-modal div.gds-step div.gds-step-top > *:nth-child(1),
  div.gds-modal div.gds-step div.gds-step-top > *:nth-child(1) {
    font-size: 20px !important;
  }
}

/* =========================================================
   POPUP CHEAT GACOR (Intro page + Wizard V.49.6) - FULL NO GREEN
   Struktur DOM:
   - POPUP 1 (INTRO): .gds-cheat-center > cover + h4 + gds-cheat-sub + gds-cheat-hero + gds-cheat-list > button.gds-cheat-open-features
   - POPUP 2 (WIZARD): .gds-cheat-wizard-wrap > gds-cheat-logo + gds-cheat-meta + gds-cheat-warning + 4 pill steps + progress track + 4 dot circles + button.gds-cheat-next
   Semua warna HIJAU (wrapper rgb(2,31,8), gradient hijau, border hijau, progress fill hijau)
   diganti TEMA DARK GOLD + DARK RED MAROON.
   ========================================================= */

/* -------- POPUP 1 - CHEAT INTRO -------- */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center,
body div.gds-modal-overlay div.gds-modal div.gds-cheat-center,
div.gds-modal div.gds-cheat-center {
  padding: 18px 14px 18px 14px !important;
  background-color: #1C1105 !important;
  background-image: linear-gradient(160deg, #2A1908 0%, #1C1105 45%, #0E0803 70%, #2A0910 100%) !important;
  background: linear-gradient(160deg, #2A1908 0%, #1C1105 45%, #0E0803 70%, #2A0910 100%) !important;
  border: 2px solid rgba(255,236,128,0.5) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(58,37,16,0.7),
    inset 0 1px 0 rgba(255,244,204,0.2),
    0 0 14px rgba(209,40,56,0.25),
    0 0 24px rgba(245,197,66,0.35) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  color: #FFF8E7 !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center img.gds-cheat-cover,
div.gds-modal div.gds-cheat-center img.gds-cheat-cover,
div.gds-modal div.gds-cheat-center [class*="cheat-cover"] {
  border-radius: 14px !important;
  border: 2.5px solid #FFEC80 !important;
  box-shadow:
    0 0 0 1.5px rgba(92,64,0,0.7),
    0 0 16px rgba(255,236,128,0.55),
    0 0 30px rgba(209,40,56,0.5),
    0 4px 14px rgba(0,0,0,0.55) !important;
  margin: 4px 0 14px 0 !important;
  max-width: 220px !important;
  height: auto !important;
  display: block !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center h4,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center h3,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center h2,
div.gds-modal div.gds-cheat-center > *:nth-child(2),
div.gds-modal div.gds-cheat-center h4 {
  color: #fff4cc !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  margin: 2px 0 6px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  text-shadow:
    -1px -1px 0 #1C1105, 1px -1px 0 #1C1105, -1px 1px 0 #1C1105, 1px 1px 0 #1C1105,
    0 0 2px #1C1105,
    0 2px 6px rgba(0,0,0,0.6),
    0 0 14px rgba(255,236,128,0.85),
    0 0 28px rgba(209,40,56,0.6) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center div.gds-cheat-sub,
div.gds-modal div.gds-cheat-center [class*="cheat-sub"] {
  color: #FFEC80 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 2px #1C1105, 0 1px 4px rgba(0,0,0,0.6), 0 0 10px rgba(255,236,128,0.45) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center div.gds-cheat-hero,
div.gds-modal div.gds-cheat-center [class*="cheat-hero"] {
  color: #fff4cc !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  margin: 6px 0 12px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  letter-spacing: 0.03em !important;
  text-shadow:
    -0.5px -0.5px 0 rgba(28,17,5,0.9), 0.5px -0.5px 0 rgba(28,17,5,0.9), -0.5px 0.5px 0 rgba(28,17,5,0.9), 0.5px 0.5px 0 rgba(28,17,5,0.9),
    0 1px 4px rgba(0,0,0,0.55),
    0 0 12px rgba(209,40,56,0.5),
    0 0 22px rgba(255,236,128,0.45) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center ul.gds-cheat-list,
div.gds-modal div.gds-cheat-center ul,
div.gds-modal div.gds-cheat-center [class*="cheat-list"] {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 18px 0 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center ul.gds-cheat-list li,
div.gds-modal div.gds-cheat-center ul li,
div.gds-modal div.gds-cheat-center [class*="cheat-list"] li {
  background: linear-gradient(90deg, rgba(58,37,16,0.85) 0%, rgba(28,17,5,0.85) 60%, rgba(42,9,16,0.8) 100%) !important;
  border: 1px solid rgba(255,236,128,0.32) !important;
  border-left: 4px solid #D12838 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  color: #fff4cc !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,244,204,0.1), -4px 0 12px rgba(209,40,56,0.25) !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* TOMBOL "CHEAT SEKARANG" - Hijau solid → gradient emas-merah */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center button.gds-cheat-open-features,
body div.gds-modal-overlay div.gds-modal div.gds-cheat-center button.gds-cheat-open-features,
div.gds-modal div.gds-cheat-center button.gds-cheat-open-features,
div.gds-modal div.gds-cheat-center [class*="cheat-open-features"] {
  background-color: #9B111E !important;
  background-image: linear-gradient(135deg, #8B0A18 0%, #B71325 28%, #D12838 52%, #E48B00 76%, #F5C542 100%) !important;
  background: linear-gradient(135deg, #8B0A18 0%, #B71325 28%, #D12838 52%, #E48B00 76%, #F5C542 100%) !important;
  border-top-color: #FFEC80 !important;
  border-right-color: #FFEC80 !important;
  border-bottom-color: #FFEC80 !important;
  border-left-color: #FFEC80 !important;
  border-color: #FFEC80 !important;
  border-width: 2.5px !important;
  color: #fff4cc !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 8px rgba(255,236,128,0.55) !important;
  box-shadow:
    0 0 18px rgba(255,236,128,0.5),
    0 0 12px rgba(209,40,56,0.65),
    inset 0 1px 0 rgba(255,244,204,0.4),
    inset 0 -2px 6px rgba(92,0,2,0.55) !important;
  border-radius: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px 18px !important;
  margin: 2px 0 0 0 !important;
  min-height: 56px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  box-sizing: border-box !important;
  display: block !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-center button.gds-cheat-open-features:hover,
div.gds-modal div.gds-cheat-center button.gds-cheat-open-features:hover {
  filter: brightness(1.15) saturate(1.12) !important;
  transform: translateY(-1.5px) scale(1.012) !important;
  border-color: #fff4cc !important;
  box-shadow:
    0 0 28px rgba(255,236,128,0.85),
    0 0 20px rgba(209,40,56,0.95),
    inset 0 1px 0 rgba(255,244,204,0.55),
    inset 0 -2px 6px rgba(92,0,2,0.55) !important;
}

/* -------- POPUP 2 - CHEAT WIZARD V.49.6 -------- */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap,
body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap,
div.gds-modal div.gds-cheat-wizard-wrap {
  padding: 18px 20px 18px 20px !important;
  background-color: #1C1105 !important;
  background-image: linear-gradient(155deg, #2A1908 0%, #1C1105 42%, #0E0803 68%, #2A0910 100%) !important;
  background: linear-gradient(155deg, #2A1908 0%, #1C1105 42%, #0E0803 68%, #2A0910 100%) !important;
  border: 2px solid rgba(255,236,128,0.48) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(58,37,16,0.7),
    inset 0 1px 0 rgba(255,244,204,0.2),
    0 0 14px rgba(209,40,56,0.25),
    0 0 24px rgba(245,197,66,0.35) !important;
  color: #FFF8E7 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* Logo Placeholder (gds-cheat-logo src ./logo.png yang broken image) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap img.gds-cheat-logo,
div.gds-modal div.gds-cheat-wizard-wrap img.gds-cheat-logo,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-logo"] {
  display: none !important;
}

/* Meta boxes (Lisensi V.49.6 + Nama Game) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta {
  padding: 12px 16px !important;
  background-color: #2A1908 !important;
  background-image: linear-gradient(90deg, rgba(155,17,30,0.25) 0%, rgba(58,37,16,0.85) 50%, rgba(155,17,30,0.25) 100%) !important;
  background: linear-gradient(90deg, rgba(155,17,30,0.25) 0%, rgba(58,37,16,0.85) 50%, rgba(155,17,30,0.25) 100%) !important;
  border: 1.5px solid rgba(255,236,128,0.4) !important;
  border-radius: 12px !important;
  margin: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,244,204,0.12) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta h4,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta h4,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta > *:first-child {
  color: #fff4cc !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-shadow:
    -0.5px -0.5px 0 #1C1105, 0.5px -0.5px 0 #1C1105, -0.5px 0.5px 0 #1C1105, 0.5px 0.5px 0 #1C1105,
    0 1px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,236,128,0.7),
    0 0 22px rgba(209,40,56,0.55) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta p,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta p {
  color: #FFEC80 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  text-shadow: 0 0 2px #1C1105, 0 1px 3px rgba(0,0,0,0.55), 0 0 10px rgba(255,236,128,0.4) !important;
}

/* OTOMATIS: Ganti text "ghosthackers.net" di lisensi meta box → SESUAI NAMA BRAND SITUS (RTP LogonSlot dari title)
   Hide original text + inject ::after dengan nama brand otomatis */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:first-of-type p,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:nth-of-type(1) p,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:first-of-type p,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:nth-of-type(1) p {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  min-height: 20px !important;
  height: auto !important;
  color: transparent !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:first-of-type p::after,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:nth-of-type(1) p::after,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:first-of-type p::after,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-meta:nth-of-type(1) p::after {
  content: "Permata123 selaku pemegang lisensi atas penggunaan program ini." !important;
  display: block !important;
  text-indent: 0 !important;
  color: #FFEC80 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-align: center !important;
  text-shadow: 0 0 2px #1C1105, 0 1px 3px rgba(0,0,0,0.55), 0 0 10px rgba(255,236,128,0.4) !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  word-break: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* Warning box (Segera hubungi kami / Blokir akun) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-warning,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-warning,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-warning"] {
  padding: 12px 16px !important;
  background: rgba(28,17,5,0.9) !important;
  border-left: 4px solid #D12838 !important;
  border-top: 1px solid rgba(255,236,128,0.25) !important;
  border-right: 1px solid rgba(255,236,128,0.25) !important;
  border-bottom: 1px solid rgba(255,236,128,0.25) !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 0 !important;
  color: #fff4cc !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  text-align: center !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 0 0 1px rgba(58,37,16,0.55), -4px 0 12px rgba(209,40,56,0.3) !important;
  text-shadow: 0 0 2px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.55) !important;
}

/* 4 STEP PILL CARDS (PROVIDER / ENGINE / FITUR / SELESAI) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-steps,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 4px 0 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-step-pill"] {
  background-color: #2A1908 !important;
  background-image: linear-gradient(155deg, #3A2510 0%, #2A1908 55%, #1C1105 100%) !important;
  background: linear-gradient(155deg, #3A2510 0%, #2A1908 55%, #1C1105 100%) !important;
  border: 1.5px solid rgba(255,236,128,0.5) !important;
  border-radius: 14px !important;
  padding: 10px 8px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 0 0 1px rgba(58,37,16,0.65), 0 4px 12px rgba(0,0,0,0.4) !important;
  color: #fff4cc !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 110px !important;
  text-align: center !important;
}
/* PILL ACTIVE (yang tadinya hijau 90deg gradient PROVIDER) → merah-emas */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill.is-active,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill.is-active {
  background-color: #9B111E !important;
  background-image: linear-gradient(90deg, #8B0A18 0%, #B71325 22%, #D12838 48%, #E48B00 74%, #F5C542 100%) !important;
  background: linear-gradient(90deg, #8B0A18 0%, #B71325 22%, #D12838 48%, #E48B00 74%, #F5C542 100%) !important;
  border-color: #FFEC80 !important;
  border-width: 2px !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,0,2,0.6),
    inset 0 1px 0 rgba(255,244,204,0.4),
    0 0 0 1.5px rgba(92,64,0,0.6),
    0 0 18px rgba(255,236,128,0.65),
    0 0 28px rgba(209,40,56,0.6),
    0 4px 14px rgba(0,0,0,0.5) !important;
}
/* Step Icon Circle di dalam pill (tadinya bg hijau tua rgb(11,56,21)) → dark gold radial dengan border emas */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-step-icon,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-step-icon,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-step-icon"] {
  background-color: #2A1908 !important;
  background-image: radial-gradient(circle at 35% 30%, #5C4000 0%, #3A2510 45%, #1C1105 100%) !important;
  background: radial-gradient(circle at 35% 30%, #5C4000 0%, #3A2510 45%, #1C1105 100%) !important;
  border: 2px solid rgba(255,236,128,0.75) !important;
  border-radius: 50% !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,64,0,0.75),
    inset 0 1px 0 rgba(255,244,204,0.35),
    0 0 10px rgba(255,236,128,0.55),
    0 0 18px rgba(209,40,56,0.5) !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill.is-active span.gds-cheat-step-icon,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill.is-active span.gds-cheat-step-icon {
  background-image: radial-gradient(circle at 35% 30%, #D12838 0%, #9B111E 45%, #5C0A12 100%) !important;
  background: radial-gradient(circle at 35% 30%, #D12838 0%, #9B111E 45%, #5C0A12 100%) !important;
  border-color: #fff4cc !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,0,2,0.75),
    inset 0 1px 0 rgba(255,244,204,0.5),
    0 0 16px rgba(255,236,128,0.8),
    0 0 28px rgba(209,40,56,0.75) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-step-icon img.gds-cheat-step-image,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-step-icon img.gds-cheat-step-image {
  max-width: 32px !important;
  max-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  display: block !important;
}
/* Step Label text di bawah icon */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-step-label,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-step-label,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-step-label"] {
  color: #FFEC80 !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 2px #1C1105, 0 1px 3px rgba(0,0,0,0.6), 0 0 10px rgba(255,236,128,0.45) !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  display: block !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill.is-active span.gds-cheat-step-label,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-pill.is-active span.gds-cheat-step-label {
  color: #fff4cc !important;
  text-shadow:
    -0.5px -0.5px 0 #1C1105, 0.5px -0.5px 0 #1C1105, -0.5px 0.5px 0 #1C1105, 0.5px 0.5px 0 #1C1105,
    0 1px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(255,236,128,0.75) !important;
}

/* PROGRESS TRACK + FILL + DOT CIRCLES (4 tahap) - BERSIH TANPA GLOW/HALO + JARAK BAWAH NYAMAN DENGAN TOMBOL NEXT */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress {
  position: relative !important;
  padding: 14px 0 10px 0 !important;
  margin: 4px 0 28px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-image: none !important;
  background-color: rgba(0,0,0,0) !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress::before,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress::after,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress::before,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  background: none !important;
  filter: none !important;
}
/* Track (garis horizontal) - LEBih TEBAL 8px + CENTER TEPAT di tengah dot (29px dari atas dots container 58px, +4px thickness => 25px top + 8px height = 33px, center line 29px persis) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress span.gds-cheat-track,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-track,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress span.gds-cheat-track,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-track,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-track"] {
  position: absolute !important;
  top: 44px !important;
  left: 6% !important;
  right: 6% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  height: 10px !important;
  min-height: 10px !important;
  line-height: 10px !important;
  background-color: #1C1105 !important;
  background-image: linear-gradient(90deg, #2A1908 0%, #3A2510 30%, #2A1908 70%, #2A0910 100%) !important;
  background: linear-gradient(90deg, #2A1908 0%, #3A2510 30%, #2A1908 70%, #2A0910 100%) !important;
  border: 1px solid rgba(255,236,128,0.45) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(0,0,0,0.35) !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  filter: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Fill Progress (garis progress) - TEBAL SAMA 10px + TENGAH PERSIS dot */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress span.gds-cheat-fill,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-fill,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-progress span.gds-cheat-fill,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-fill,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-fill"] {
  position: absolute !important;
  top: 44px !important;
  left: 6% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  height: 10px !important;
  min-height: 10px !important;
  line-height: 10px !important;
  background-color: #F5C542 !important;
  background-image: linear-gradient(90deg, #FFEC80 0%, #F5C542 30%, #E48B00 55%, #D12838 82%, #9B111E 100%) !important;
  background: linear-gradient(90deg, #FFEC80 0%, #F5C542 30%, #E48B00 55%, #D12838 82%, #9B111E 100%) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,244,204,0.7), inset 0 -1px 0 rgba(92,0,2,0.25) !important;
  z-index: 2 !important;
  transition: width 0.35s ease !important;
  display: block !important;
  filter: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Container Dots (4 lingkaran step) - PENTING: border-radius:0 HAPUS bentuk oval/lens bulatan panjang */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dots,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dots {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 6% !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-image: none !important;
  background-color: rgba(0,0,0,0) !important;
  height: 60px !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top: 0 none !important;
  border-right: 0 none !important;
  border-bottom: 0 none !important;
  border-left: 0 none !important;
  border: 0 none transparent !important;
  border-color: transparent !important;
  border-width: 0 !important;
  outline: 0 none transparent !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  filter: none !important;
}
/* Dot individual - BERSIH TANPA GLOW/HALO, hanya inset border + drop shadow lembut bawah */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-dot"] {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 50% !important;
  background-color: #2A1908 !important;
  background-image: radial-gradient(circle at 35% 30%, #5C4000 0%, #3A2510 45%, #1C1105 100%) !important;
  background: radial-gradient(circle at 35% 30%, #5C4000 0%, #3A2510 45%, #1C1105 100%) !important;
  border-top: 2.5px solid #FFEC80 !important;
  border-right: 2.5px solid rgba(255,236,128,0.85) !important;
  border-bottom: 2.5px solid rgba(255,236,128,0.7) !important;
  border-left: 2.5px solid rgba(255,236,128,0.85) !important;
  border-color: #FFEC80 !important;
  border-width: 2.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,64,0,0.75),
    inset 0 1px 0 rgba(255,244,204,0.4),
    0 3px 7px rgba(0,0,0,0.4) !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  filter: none !important;
  -webkit-filter: none !important;
}
/* Dot ACTIVE / DONE - BERSIH, TANPA GLOW LUAR */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot.is-active,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot.is-done,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot.is-active,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot.is-done {
  background-color: #8B0A18 !important;
  background-image: radial-gradient(circle at 35% 30%, #FFEC80 0%, #E48B00 22%, #D12838 50%, #9B111E 78%, #5C0A12 100%) !important;
  background: radial-gradient(circle at 35% 30%, #FFEC80 0%, #E48B00 22%, #D12838 50%, #9B111E 78%, #5C0A12 100%) !important;
  border-color: #fff4cc !important;
  box-shadow:
    inset 0 0 0 1px rgba(92,0,2,0.75),
    inset 0 1px 0 rgba(255,244,204,0.55),
    0 3px 8px rgba(0,0,0,0.45) !important;
  filter: none !important;
  -webkit-filter: none !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot img.gds-cheat-dot-image,
div.gds-modal div.gds-cheat-wizard-wrap span.gds-cheat-dot img.gds-cheat-dot-image {
  max-width: 36px !important;
  max-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  display: block !important;
  filter:
    hue-rotate(-108deg)
    saturate(1.5)
    brightness(1.2)
    contrast(1.12)
    sepia(0.2) !important;
}

/* TOMBOL NEXT (Hijau gradient → emas-merah CHEAT SEKARANG style) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-next-wrap,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-next-wrap {
  padding: 0 !important;
  margin: 2px 0 0 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next,
body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next,
div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-next"] {
  background-color: #9B111E !important;
  background-image: linear-gradient(135deg, #8B0A18 0%, #B71325 28%, #D12838 52%, #E48B00 76%, #F5C542 100%) !important;
  background: linear-gradient(135deg, #8B0A18 0%, #B71325 28%, #D12838 52%, #E48B00 76%, #F5C542 100%) !important;
  border-top-color: #FFEC80 !important;
  border-right-color: #FFEC80 !important;
  border-bottom-color: #FFEC80 !important;
  border-left-color: #FFEC80 !important;
  border-color: #FFEC80 !important;
  border-width: 2.5px !important;
  color: #fff4cc !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 8px rgba(255,236,128,0.55) !important;
  box-shadow:
    0 0 18px rgba(255,236,128,0.5),
    0 0 12px rgba(209,40,56,0.65),
    inset 0 1px 0 rgba(255,244,204,0.4),
    inset 0 -2px 6px rgba(92,0,2,0.55) !important;
  border-radius: 14px !important;
  padding: 12px 22px !important;
  margin: 0 !important;
  min-height: 52px !important;
  min-width: 140px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next:hover,
div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next:hover {
  filter: brightness(1.15) saturate(1.12) !important;
  transform: translateY(-1.5px) scale(1.02) !important;
  border-color: #fff4cc !important;
  box-shadow:
    0 0 28px rgba(255,236,128,0.85),
    0 0 20px rgba(209,40,56,0.95),
    inset 0 1px 0 rgba(255,244,204,0.55),
    inset 0 -2px 6px rgba(92,0,2,0.55) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next img,
div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-next img {
  max-width: 18px !important;
  max-height: 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 3px rgba(255,236,128,0.65)) !important;
}

/* TOMBOL PREVIOUS (sisa spot hijau rgb(5,65,18)) → tema sama seperti Next tapi posisi kiri / normal flex */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev,
body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev,
div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev,
div.gds-modal div.gds-cheat-wizard-wrap [class*="cheat-prev"] {
  background-color: #8B0A18 !important;
  background-image: linear-gradient(135deg, #8B0A18 0%, #9B111E 26%, #B71325 50%, #C9962B 76%, #F5C542 100%) !important;
  background: linear-gradient(135deg, #8B0A18 0%, #9B111E 26%, #B71325 50%, #C9962B 76%, #F5C542 100%) !important;
  border-top-color: #FFEC80 !important;
  border-right-color: #FFEC80 !important;
  border-bottom-color: #FFEC80 !important;
  border-left-color: #FFEC80 !important;
  border-color: #FFEC80 !important;
  border-width: 2.5px !important;
  color: #fff4cc !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 8px rgba(255,236,128,0.55) !important;
  box-shadow:
    0 0 18px rgba(255,236,128,0.5),
    0 0 12px rgba(209,40,56,0.65),
    inset 0 1px 0 rgba(255,244,204,0.4),
    inset 0 -2px 6px rgba(92,0,2,0.55) !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  min-height: 52px !important;
  min-width: 140px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev:hover,
div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev:hover {
  filter: brightness(1.15) saturate(1.12) !important;
  transform: translateY(-1.5px) scale(1.02) !important;
  border-color: #fff4cc !important;
  box-shadow:
    0 0 28px rgba(255,236,128,0.85),
    0 0 20px rgba(209,40,56,0.95),
    inset 0 1px 0 rgba(255,244,204,0.55),
    inset 0 -2px 6px rgba(92,0,2,0.55) !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev img,
div.gds-modal div.gds-cheat-wizard-wrap button.gds-cheat-prev img {
  max-width: 18px !important;
  max-height: 18px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 3px rgba(255,236,128,0.65)) !important;
}

/* Pastikan next-wrap jika ada both prev + next → space-between */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-next-wrap:has(button.gds-cheat-prev),
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-next-wrap:has(button.gds-cheat-prev) {
  justify-content: space-between !important;
  align-items: center !important;
}

/* FILTER HAPUS HIJAU DI DALAM ASSET GAMBAR (step icon & dot PNG/webp)
   Ubah pixel hijau di dalam gambar asli → warna emas-merah konsisten tema */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-icon img,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-icon svg,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap .gds-cheat-step-icon img,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-icon img,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-step-icon svg {
  filter:
    hue-rotate(-108deg)
    saturate(1.55)
    brightness(1.18)
    contrast(1.12)
    sepia(0.18)
    drop-shadow(0 0 3px rgba(255,236,128,0.55)) !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap .gds-cheat-step-icon.is-active img,
div.gds-modal div.gds-cheat-wizard-wrap .gds-cheat-step-icon.is-active img {
  filter:
    hue-rotate(-108deg)
    saturate(1.75)
    brightness(1.25)
    contrast(1.18)
    sepia(0.12)
    drop-shadow(0 0 4px rgba(255,244,204,0.85))
    drop-shadow(0 0 8px rgba(255,236,128,0.5)) !important;
}

/* 4 Dot circle di progress track (icon dot PNG/webp) */
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot img,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot svg,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap .gds-cheat-dot img,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot img,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot svg {
  filter:
    hue-rotate(-108deg)
    saturate(1.5)
    brightness(1.2)
    contrast(1.12)
    sepia(0.2)
    drop-shadow(0 0 3px rgba(255,236,128,0.55)) !important;
  display: block !important;
  max-width: 68% !important;
  height: auto !important;
}
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot.is-active img,
html body div.gds-modal-overlay div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot.is-done img,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot.is-active img,
div.gds-modal div.gds-cheat-wizard-wrap div.gds-cheat-dot.is-done img {
  filter:
    hue-rotate(-108deg)
    saturate(1.8)
    brightness(1.28)
    contrast(1.2)
    sepia(0.1)
    drop-shadow(0 0 5px rgba(255,244,204,0.9))
    drop-shadow(0 0 10px rgba(255,236,128,0.6)) !important;
}

/* AGGRESSIVE SAFETY OVERRIDE - Tangkap inline style hijau specific cheat */
html body div.gds-modal div.gds-cheat-wizard-wrap div[style*="rgb(2, 31"],
html body div.gds-modal div.gds-cheat-wizard-wrap div[style*="rgb(2,31"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(15, 200"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(15,200"],
html body div.gds-modal div.gds-cheat-wizard-wrap button[style*="rgb(7, 146"],
html body div.gds-modal div.gds-cheat-wizard-wrap button[style*="rgb(7,146"],
html body div.gds-modal div.gds-cheat-wizard-wrap div[style*="linear-gradient(rgb(7"],
html body div.gds-modal div.gds-cheat-wizard-wrap div[style*="rgb(9, 93"],
html body div.gds-modal div.gds-cheat-wizard-wrap div[style*="rgb(10, 160"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(11, 56"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(11,56"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(10, 61"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(10,61"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(15, 157"],
html body div.gds-modal div.gds-cheat-wizard-wrap span[style*="rgb(15,157"] {
  background-image: none !important;
}

.filter-wrapper,
.filter-container,
.filters-container,
.filter-section,
.filter-wrap,
.filters-wrap,
.search-filter-wrap,
.search-filter-container,
.game-filter,
.game-filters,
.search-wrapper,
.search-container,
.search-section,
.search-wrap,
.fugu-search-wrap,
.provider-filter,
.filter-panel,
.search-panel,
div[class*="filter-box"],
div[class*="filter-wrap"],
div[class*="search-box"],
div[class*="search-wrap"],
div[class*="filter-container"],
div[class*="filter-wrapper"],
div[class*="search-container"],
div[class*="search-wrapper"] {
  background: linear-gradient(135deg,
    #FCDD77 0%,
    #FAD040 15%,
    #F5C542 35%,
    #E4A600 58%,
    #C9962B 78%,
    #8B6914 100%) !important;
  border: 2.5px solid #FFEC80 !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 64, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 0 rgba(92, 64, 0, 0.55),
    0 0 0 1.5px rgba(92, 64, 0, 0.6),
    0 0 18px rgba(245, 197, 66, 0.45),
    0 0 32px rgba(245, 197, 66, 0.3),
    0 8px 22px rgba(0, 0, 0, 0.45) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 18px 20px !important;
}

.filter-wrapper::before,
.filter-container::before,
.filters-container::before,
.filter-section::before,
.filter-wrap::before,
.filters-wrap::before,
.search-filter-wrap::before,
.search-filter-container::before,
.game-filter::before,
.game-filters::before,
.search-wrapper::before,
.search-container::before,
.search-section::before,
.search-wrap::before,
.fugu-search-wrap::before,
.provider-filter::before,
.filter-panel::before,
.search-panel::before {
  content: '';
  position: absolute;
  top: 4%;
  left: 3%;
  width: 94%;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.08) 78%, transparent 100%);
  border-radius: 14px 14px 50% 50% / 70% 70% 30% 30%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

.filter-wrapper > *,
.filter-container > *,
.filters-container > *,
.filter-section > *,
.filter-wrap > *,
.filters-wrap > *,
.search-filter-wrap > *,
.search-filter-container > *,
.game-filter > *,
.game-filters > *,
.search-wrapper > *,
.search-container > *,
.search-section > *,
.search-wrap > *,
.fugu-search-wrap > *,
.provider-filter > *,
.filter-panel > *,
.search-panel > * {
  position: relative;
  z-index: 2;
}

.filter-wrapper .form-control,
.filter-container .form-control,
.filters-container .form-control,
.filter-section .form-control,
.filter-wrap .form-control,
.filters-wrap .form-control,
.search-filter-wrap .form-control,
.search-filter-container .form-control,
.game-filter .form-control,
.game-filters .form-control,
.search-wrapper .form-control,
.search-container .form-control,
.search-section .form-control,
.search-wrap .form-control,
.fugu-search-wrap .form-control,
.provider-filter .form-control,
.filter-panel .form-control,
.search-panel .form-control,
.form-control,
input[type="text"].form-control,
input[type="search"].form-control,
select.form-select,
select.form-control,
.form-select,
.search-input,
.filter-input,
.game-search-input,
.game-filter-select,
input[placeholder*="cari"],
input[placeholder*="Cari"],
input[placeholder*="search"],
input[placeholder*="Search"],
input[placeholder*="Pencarian"],
input[placeholder*="pencarian"] {
  background-color: #2A1908 !important;
  background-image: linear-gradient(180deg,
    #3A2510 0%,
    #2A1908 35%,
    #1C1105 70%,
    #0E0803 100%) !important;
  background: linear-gradient(180deg,
    #3A2510 0%,
    #2A1908 35%,
    #1C1105 70%,
    #0E0803 100%) !important;
  border: 2px solid #8B6914 !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245, 197, 66, 0.2),
    inset 0 2px 6px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(245, 197, 66, 0.15) !important;
  padding: 12px 46px 12px 16px !important;
  min-height: 54px !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  transition: all 0.22s ease !important;
}

.filter-wrapper .form-control::placeholder,
.filter-container .form-control::placeholder,
.search-wrapper .form-control::placeholder,
.search-wrap .form-control::placeholder,
.game-filters .form-control::placeholder,
.fugu-search-wrap .form-control::placeholder,
.provider-filter .form-control::placeholder,
.form-control::placeholder,
input[type="text"].form-control::placeholder,
input[type="search"].form-control::placeholder,
.search-input::placeholder,
.filter-input::placeholder,
.game-search-input::placeholder {
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.filter-wrapper .form-control:hover,
.filter-container .form-control:hover,
.search-wrapper .form-control:hover,
.search-wrap .form-control:hover,
.game-filters .form-control:hover,
.fugu-search-wrap .form-control:hover,
.form-control:hover,
input[type="text"].form-control:hover,
input[type="search"].form-control:hover,
select.form-select:hover,
select.form-control:hover,
.form-select:hover,
.search-input:hover,
.filter-input:hover,
.game-search-input:hover,
.game-filter-select:hover {
  background: linear-gradient(180deg,
    #4A3219 0%,
    #3A2510 35%,
    #2A1908 70%,
    #1C1105 100%) !important;
  background-color: #3A2510 !important;
  border-color: #F5C542 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.3),
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(255, 236, 128, 0.4),
    0 0 28px rgba(245, 197, 66, 0.32) !important;
}

.filter-wrapper .form-control:focus,
.filter-container .form-control:focus,
.search-wrapper .form-control:focus,
.search-wrap .form-control:focus,
.game-filters .form-control:focus,
.fugu-search-wrap .form-control:focus,
.form-control:focus,
input[type="text"].form-control:focus,
input[type="search"].form-control:focus,
select.form-select:focus,
select.form-control:focus,
.form-select:focus,
.search-input:focus,
.filter-input:focus,
.game-search-input:focus,
.game-filter-select:focus {
  outline: none !important;
  background: linear-gradient(180deg,
    #4A3219 0%,
    #3A2510 35%,
    #2A1908 70%,
    #1C1105 100%) !important;
  background-color: #3A2510 !important;
  border-color: #FFEC80 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.58),
    0 0 0 3px rgba(245, 197, 66, 0.45),
    0 0 22px rgba(255, 236, 128, 0.55),
    0 0 36px rgba(245, 197, 66, 0.45) !important;
}

.form-control option,
.form-select option,
select.form-control option,
select option {
  background: #2A1A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #C9962B !important;
  padding: 8px 12px !important;
}

.filter-wrapper select.form-select,
.filter-container select.form-select,
.search-wrapper select.form-select,
.filter-wrap select.form-select,
.game-filter select.form-select,
.provider-filter select.form-select,
.search-panel select.form-select,
select.form-select,
select.form-control,
.game-filter-select {
  background-color: #2A1908 !important;
  background-image:
    linear-gradient(180deg, #3A2510 0%, #2A1908 35%, #1C1105 70%, #0E0803 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") right 16px center / 22px 22px no-repeat,
    linear-gradient(180deg, #3A2510 0%, #2A1908 35%, #1C1105 70%, #0E0803 100%) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 22px 22px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 54px !important;
}

.filter-wrapper select.form-select:hover,
.filter-container select.form-select:hover,
.search-wrapper select.form-select:hover,
.game-filter select.form-select:hover,
select.form-select:hover,
select.form-control:hover,
.game-filter-select:hover {
  background-color: #3A2510 !important;
  background-image:
    linear-gradient(180deg, #4A3219 0%, #3A2510 35%, #2A1908 70%, #1C1105 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFEC80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFEC80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") right 16px center / 22px 22px no-repeat,
    linear-gradient(180deg, #4A3219 0%, #3A2510 35%, #2A1908 70%, #1C1105 100%) !important;
}

select.form-select svg,
select option svg,
select ~ svg,
.input-group svg,
.form-group svg,
.filter-wrapper svg,
.filter-container svg,
.search-wrapper svg,
.game-filter svg,
.fa-chevron-down,
.fa-caret-down,
.fas.fa-chevron-down,
svg.chevron,
svg.dropdown-icon,
svg.select-icon,
.search-icon svg,
svg.search-icon,
button.search-btn svg,
.search-form svg {
  stroke: #FFFFFF !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) !important;
}

button[type="submit"].search-btn:hover svg,
button.search-btn:hover svg,
.btn-search:hover svg,
.search-button:hover svg,
.filter-button:hover svg,
.filter-btn:hover svg,
select.form-select:hover ~ svg,
select.form-select:hover + svg {
  stroke: #FFEC80 !important;
  fill: #FFEC80 !important;
  color: #FFEC80 !important;
  filter: drop-shadow(0 0 6px rgba(255,236,128,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.45)) !important;
}

/* ============================================================
   FILTER GAME 3 ICON (Hijau → EMAS Sesuai Tema Gold-Red)
   V.62 🔧 Fix 2 critical bugs user:
   BUG 1 (repeated 3x): Kolom1 "Pencarian game" SELALU jadi ▽ padahal 🔍
      → AKAR: Specificity nth-child/first-of-type tidak reliable karena
               struktur DOM React ada elemen wrapper yang tidak terduga.
      → FIX:   💥 CSS :has() SELECTOR (SUPER ACCURATE!)
               Bedakan IKON BERDASARKAN ANAK ELEMEN DI DALAMNYA:
               - parent:has(input[type=text]) → SEARCH 🔍 (100% kolom pencarian)
               - parent:has(select) → DROPDOWN ▽ (100% kolom urutan/menang)
               Tidak peduli urutan DOM / kolom keberapa!
   BUG 2: Icon effect gerakan kiri→kanan saat cursor hover / klik
      → AKAR: transition & transform bawaan library (hover translate).
      → FIX: force transition: NONE + transform TETAP = translateY(-50%) saja.
   Tetap 100% CSS ONLY. Tidak butuh JS sedikitpun!
   ============================================================ */

/* ============================================================
   🔴 STEP -1 (HARUS PALING ATAS):
   HAPUS PERMANEN ::before pseudo-element ASLI DARI LIBRARY
   Inilah penyebab PANAH DOUBLE saat HOVER user!
   Force DELETE di SEMUA state (default/hover/fokus/active).
   ============================================================ */
html body .search-container .row > div .position-relative::before,
html body .search-container .row > div .position-relative:hover::before,
html body .search-container .row > div .position-relative:focus-within::before,
html body .search-container .row > div .position-relative:active::before,
html body .search-container .position-relative::before,
html body .search-container .position-relative:hover::before,
html body .search-container .position-relative:focus-within::before,
html body .search-container .position-relative:active::before,
html body [class*="filter"] .position-relative::before,
html body [class*="filter"] .position-relative:hover::before,
html body [class*="Filter"] .position-relative::before,
html body div.row > div > div.position-relative::before,
html body div.row > div > div.position-relative:hover::before,
html body div.row > div > div.position-relative:focus-within::before,
html body div.row > div > div.position-relative:active::before,
html body .row > .position-relative::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: circle(0) !important;
  z-index: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  /* === STEP -1b: CEGAH EFEK GERAKAN (BUG 2) === */
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  animation: none !important;
  -webkit-animation: none !important;
}

/* === STEP 0: Pastikan parent .position-relative punya position:relative (anchor pseudo) === */
/* V.63b 🔧 HAPUS width:100% dan padding:0 di STEP 0!
   Itu penyebab layout col-md-4 hancur (3 kolom horizontal → stack vertikal).
   Hanya LOCK property yang menyebabkan GESER SAAT HOVER (transition/transform).
   JANGAN sentuh width, padding, box-sizing milik Bootstrap grid! */
html body .search-container .row > div .position-relative,
html body .search-container .position-relative,
html body [class*="filter"] .position-relative,
html body [class*="Filter"] .position-relative,
/* V.63b: Tetap hook semua state (hover/focus/active) tapi HANYA LOCK YANG AMAN */
html body .search-container .row > div .position-relative:hover,
html body .search-container .row > div .position-relative:focus-within,
html body .search-container .row > div .position-relative:active,
html body .search-container .position-relative:hover,
html body .search-container .position-relative:focus-within,
html body .search-container .position-relative:active,
html body [class*="filter"] .position-relative:hover,
html body [class*="filter"] .position-relative:focus-within,
html body [class*="filter"] .position-relative:active {
  position: relative !important;
  /* ⚡ V.63b SAFE LOCK:
     Transition NONE & transform NONE = tidak ada animasi geser ke kanan saat hover.
     Ini SUDAH CUKUP menghentikan efek "didorong" user, tanpa merusak layout! */
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  /* ⚠️ JANGAN ADA width:100% disini (merusak col-md-4)!
     ⚠️ JANGAN ADA padding:0 disini (merusak gutter Bootstrap grid)! */
}

/* === STEP 1: HAPUS SEMUA gambar lama search.webp & dropdown.svg SECARA TOTAL === */
html body img[src*="search.webp"],
html body img[src*="search.png"],
html body img[src*="dropdown.svg"],
html body img[src*="dropdown.png"],
html body .search-container img.search-icon,
html body select.form-control ~ img,
html body .row > .position-relative > img,
html body img.search-icon,
html body img[alt*="search" i],
html body img[alt*="dropdown" i],
html body img[alt*="select" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: circle(0) !important;
  z-index: 0 !important;
  transition: none !important;
  -webkit-transition: none !important;
  transform: none !important;
  animation: none !important;
  -webkit-animation: none !important;
}

/* ============================================================
   🔴 STEP 2 (💥 MAGIC :has() SELECTOR!)
   Universal base style ::after SEMUA parent filter.
   Base style TANPA background-image (dipisah per :has() di bawah).
   Force opacity 1 + no animation / no slide transition!
   ============================================================ */
html body .search-container .row > div .position-relative::after,
html body .search-container .position-relative::after,
html body [class*="filter"] .position-relative::after,
html body [class*="Filter"] .position-relative::after,
html body div.row > div > div.position-relative::after,
/* Specificity boost (duplicate selector) agar menang :hover library */
html body .search-container.search-container .position-relative.position-relative::after,
html body [class*="filter"][class*="filter"] .position-relative.position-relative::after {
  content: '' !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  right: 24px !important; /* === V.62b: GESER KE KIRI 12px dari 12px → 24px === */
  top: 50% !important;
  /* === STEP 2a: CEGAH EFEK GERAKAN KIRI→KANAN SAAT HOVER (BUG 2!) === */
  /* SELALU transform HANYA translateY(-50%). Tidak boleh ada translateX apapun! */
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
  transition: filter 0.2s ease !important; /* HANYA BOLEH ada transisi FILTER (glow) */
  -webkit-transition: filter 0.2s ease !important;
  transition-property: filter !important;
  -webkit-transition-property: filter !important;
  /* SELALU FORMAT TIDAK ADA transition-property: all atau transform apapun! */
  transition-delay: 0ms !important;
  -webkit-transition-delay: 0ms !important;
  animation: none !important;
  -webkit-animation: none !important;
  animation-duration: 0ms !important;
  -webkit-animation-duration: 0ms !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  z-index: 99 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border: 0 !important;
  outline: 0 !important;
  pointer-events: none !important;
  /* Base filter glow emas (dipakai untuk search & dropdown) */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 3px rgba(255,215,0,0.8)) drop-shadow(0 0 5px rgba(255,193,7,0.35)) !important;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 3px rgba(255,215,0,0.8)) drop-shadow(0 0 5px rgba(255,193,7,0.35)) !important;
}

/* ============================================================
   🔴 STEP 3 (💥 :has() SELECTOR #1) — PANAH DROPDOWN (default)
   Parent YANG PUNYA ANAK <select> di dalamnya → 100% kolom URUTAN / MENANG.
   Specificity DOUBLE CLASS untuk PASTI MENANG.
   ============================================================ */
html body .search-container.search-container .position-relative.position-relative:has(select.form-control)::after,
html body .search-container.search-container .row > div .position-relative:has(select)::after,
html body .search-container .position-relative:has(select)::after,
html body [class*="filter"][class*="filter"] .position-relative.position-relative:has(select)::after,
html body [class*="filter"] .position-relative:has(select.form-control)::after,
html body div.row.row > div > div.position-relative.position-relative:has(select)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23FFD700' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23FFEC80' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9'/%3E%3C/svg%3E") !important;
  /* V.63 🔧 KHUSUS DROPDOWN: GESER KE KIRI SEDIKIT LAGI dari posisi search
     Search icon = right:24px (tetap). Dropdown = +8px ke kiri → right:32px */
  right: 32px !important;
  left: auto !important;
}

/* ============================================================
   🔴 STEP 4 (💥 :has() SELECTOR #2) — KACA PEMBESAR SEARCH
   Parent YANG PUNYA ANAK <input type="text"> → 100% KOLOR PENCARIAN.
   Specificity DOUBLE CLASS + ditulis PALING BAWAH = LATTER WINS!
   TULIS PALING AKHIR AGAR SELALU MENANG atas rule dropdown!
   ============================================================ */
html body .search-container.search-container .position-relative.position-relative:has(input.form-control)::after,
html body .search-container.search-container .row > div .position-relative:has(input[type="text"])::after,
html body .search-container .position-relative:has(input.form-control)::after,
html body .search-container .position-relative:has(input)::after,
html body [class*="filter"][class*="filter"] .position-relative.position-relative:has(input[type="text"])::after,
html body [class*="filter"] .position-relative:has(input.form-control)::after,
html body div.row.row > div > div.position-relative.position-relative:has(input)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Ccircle cx='10.5' cy='10.5' r='7' stroke='%23FFD700' stroke-width='2.6' fill='rgba(255,215,0,0.12)'/%3E%3Cpath d='M16 16L20.5 20.5' stroke='%23FFD700' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='10.5' cy='10.5' r='7' stroke='%23FFEC80' stroke-width='1' fill='none' opacity='0.9'/%3E%3Cpath d='M16 16L20.5 20.5' stroke='%23FFEC80' stroke-width='1.2' stroke-linecap='round' opacity='0.9'/%3E%3C/svg%3E") !important;
  /* Search icon = glow sedikit lebih kencang (beda visual dari dropdown) */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255,215,0,0.92)) drop-shadow(0 0 7px rgba(255,193,7,0.42)) !important;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255,215,0,0.92)) drop-shadow(0 0 7px rgba(255,193,7,0.42)) !important;
  /* === V.62b: Pastikan search icon posisi SAMA dengan dropdown (geser kiri 24px) === */
  right: 24px !important;
  left: auto !important;
  /* Pastikan transform tetap HANYA translateY (tidak ada slide) */
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transition: filter 0.2s ease !important;
  -webkit-transition: filter 0.2s ease !important;
}

/* === STEP 5: HOVER STATE (GLOW LEBIH TERANG, TANPA TRANSFORM SLIDE!) === */
/* HANYA filter yang berubah (glow). transform TETAP = translateY(-50%)! JANGAN ADA translateX apapun! */
html body .search-container:hover .row > div .position-relative::after,
html body .search-container .row > div .position-relative:hover::after,
html body .search-container.search-container .position-relative.position-relative:hover::after,
html body [class*="filter"][class*="filter"] .position-relative.position-relative:hover::after {
  /* NO transform change! NO left/right change! NO animation! */
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  left: auto !important;
  right: 24px !important; /* === V.62b: Pastikan hover posisi SAMA dengan default (geser kiri) === */
  top: 50% !important;
  transition: filter 0.2s ease !important;
  -webkit-transition: filter 0.2s ease !important;
  transition-property: filter !important;
  -webkit-transition-property: filter !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)) drop-shadow(0 0 7px rgba(255,236,128,0.95)) drop-shadow(0 0 13px rgba(255,215,0,0.7)) !important;
  -webkit-filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)) drop-shadow(0 0 7px rgba(255,236,128,0.95)) drop-shadow(0 0 13px rgba(255,215,0,0.7)) !important;
}

/* V.63 🔧 HOVER KHUSUS DROPDOWN: Pastikan posisi dropdown tetap 32px saat hover
   (tidak tertimpa oleh rule hover universal yang right:24px).
   TULIS PALING AKHIR agar specificity WIN! */
html body .search-container.search-container .position-relative.position-relative:has(select):hover::after,
html body .search-container.search-container .row > div .position-relative:has(select.form-control):hover::after,
html body [class*="filter"][class*="filter"] .position-relative.position-relative:has(select):hover::after,
html body div.row.row > div > div.position-relative.position-relative:has(select):hover::after {
  right: 32px !important;
  left: auto !important;
}

/* === GUARD: SVG inline V.56 (kalau-kalau JS inject juga) → TETAP BAIK === */
html body svg.gold-search-svg,
html body svg.gold-chevron-svg,
html body svg.gold-svg-icon,
html body svg[data-filter-gold="1"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  z-index: 10 !important;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255, 215, 0, 0.95)) !important;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)) drop-shadow(0 0 4px rgba(255, 215, 0, 0.95)) !important;
}

.portfolio-item,
.card.bg-cb,
.bg-shadow-white,
.game-card,
.game-card-item,
.slot-card,
.provider-game-card,
div[class*="game-card"],
div[class*="slot-card"],
div[class*="card-item"] {
  background: linear-gradient(180deg,
    rgba(42, 26, 10, 0.98) 0%,
    rgba(28, 17, 5, 0.98) 55%,
    rgba(14, 8, 3, 0.98) 100%) !important;
  background-color: #1C1105 !important;
  border: 2px solid #6B0B14 !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.15),
    0 0 10px rgba(107, 11, 20, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.35) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 7px 7px 9px !important;
  gap: 5px !important;
  height: auto !important;
  min-height: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.portfolio-item > a,
.card.bg-cb > a,
.game-card > a,
.slot-card > a {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.portfolio-item:hover,
.card.bg-cb:hover,
.bg-shadow-white:hover,
.game-card:hover,
.game-card-item:hover,
.slot-card:hover,
.provider-game-card:hover {
  border-color: #9B111E !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.22),
    0 0 16px rgba(155, 17, 30, 0.7),
    0 0 28px rgba(245, 197, 66, 0.22),
    0 10px 20px rgba(0, 0, 0, 0.45) !important;
}

.portfolio-item::before,
.card.bg-cb::before,
.game-card::before,
.slot-card::before,
.provider-game-card::before,
.portfolio-item::after,
.card.bg-cb::after,
.game-card::after,
.slot-card::after,
.provider-game-card::after {
  display: none !important;
  content: none !important;
}

.fugu-grid-item,
.fugu-grid-item-w2,
.fugu-grid-item-w3,
.col-4 > .portfolio-item,
.col-md-4 > .portfolio-item,
.col-lg-2 > .portfolio-item {
  padding: 4px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fugu-grid-item .portfolio-item,
.fugu-grid-item-w2 .portfolio-item,
.fugu-grid-item-w3 .portfolio-item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.card.bg-cb img.card-img-top,
.portfolio-item img.card-img-top,
.game-card img,
.slot-card img,
.provider-game-card img {
  border-radius: 14px 14px 0 0 !important;
  border-bottom: 1.5px solid #6B0B14 !important;
  box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.35) !important;
}

.portfolio-item .bg-cb,
.portfolio-item .card,
.game-card-body {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.animated-progress,
.progress,
.rtp-progress,
.rtp-bar,
.progress-blue {
  height: 20px !important;
  max-height: 20px !important;
  min-height: 20px !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 999px !important;
  background: #0D0D0D !important;
  background-color: #0D0D0D !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  display: flex !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.progress-bar {
  height: 100% !important;
  min-height: 100% !important;
  border: none !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  line-height: 20px !important;
  letter-spacing: 0.01em !important;
  text-align: right !important;
  padding: 0 10px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -1px  0   0 #000000,
     1px  0   0 #000000,
     0   -1px 0 #000000,
     0    1px 0 #000000,
     0   1px 2px rgba(0,0,0,0.6) !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  animation: slidebar 1s linear infinite !important;
}

.bg-progress-rtp,
.progress-blue > span,
.progress > .progress-bar,
.animated-progress span {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border: none !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  line-height: 20px !important;
  letter-spacing: 0.01em !important;
  text-align: right !important;
  padding: 0 10px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -1px  0   0 #000000,
     1px  0   0 #000000,
     0   -1px 0 #000000,
     0    1px 0 #000000,
     0   1px 2px rgba(0,0,0,0.6) !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  animation: slidebar 1s linear infinite normal none running !important;
  background-image: unset;
  background-color: unset;
}

button[type="submit"].search-btn,
button.search-btn,
.btn-search,
.search-button,
.filter-button,
.filter-btn,
.search-form button,
.input-group-append button,
.input-group button[type="submit"] {
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 50%, #C9962B 100%) !important;
  border: 2px solid #FFEC80 !important;
  color: #1C1105 !important;
  min-height: 54px !important;
  min-width: 54px !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(92, 64, 0, 0.55),
    0 0 12px rgba(255, 236, 128, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

button[type="submit"].search-btn:hover,
button.search-btn:hover,
.btn-search:hover,
.search-button:hover,
.filter-button:hover,
.filter-btn:hover {
  background: linear-gradient(180deg, #FFF8E7 0%, #FFEC80 50%, #F5C542 100%) !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(92, 64, 0, 0.5),
    0 0 22px rgba(255, 236, 128, 0.9),
    0 0 38px rgba(245, 197, 66, 0.7),
    0 8px 18px rgba(0, 0, 0, 0.45) !important;
}

.input-group-text,
.input-group-prepend span,
.input-group .input-group-text {
  background: linear-gradient(180deg, #FCDD77 0%, #C9962B 100%) !important;
  border: 2px solid #C9962B !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

::-webkit-scrollbar {
  width: 11px !important;
  height: 11px !important;
}

::-webkit-scrollbar-track {
  background: #1C1105 !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FAD040 0%, #F5C542 30%, #C9962B 60%, #8B6914 100%) !important;
  border-radius: 10px !important;
  border: 2px solid #1C1105 !important;
  box-shadow: 0 0 8px rgba(245, 197, 66, 0.3) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FFEC80 0%, #FAD040 30%, #F5C542 60%, #B78200 100%) !important;
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.45) !important;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: #F5C542 #1C1105 !important;
}

::selection {
  background: var(--theme-gold) !important;
  color: var(--theme-text-dark) !important;
}

::-moz-selection {
  background: var(--theme-gold) !important;
  color: var(--theme-text-dark) !important;
}

.text-gold-gradient {
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 25%, #E48B00 55%, #C9962B 80%, #892E00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 0 #5C1B00) drop-shadow(0 4px 12px rgba(245, 197, 66, 0.5));
  font-weight: 900;
  -webkit-text-stroke: 1px rgba(92, 27, 0, 0.75);
  display: inline-block;
}

.containerwd {
  background: linear-gradient(180deg, rgba(155, 17, 30, 0.18) 0%, rgba(28, 17, 5, 0.95) 100%) !important;
  border: 3px dashed rgba(245, 197, 66, 0.5) !important;
  border-radius: 16px !important;
}

.jackpotwd {
  border: 3px dashed rgba(245, 197, 66, 0.55) !important;
  border-radius: 16px !important;
}

.progressive-jackpot {
  background-image: none !important;
  background: radial-gradient(ellipse at 50% 10%, rgba(245, 197, 66, 0.3) 0%, transparent 55%),
    linear-gradient(180deg, rgba(28, 17, 5, 0.96) 0%, rgba(14, 8, 3, 0.98) 100%) !important;
  border: 2px solid rgba(245, 197, 66, 0.5) !important;
  border-radius: 20px !important;
  color: var(--theme-text) !important;
  text-shadow: 0 0 14px rgba(155, 17, 30, 0.7) !important;
}

.progressive-jackpot .jackpot-currency {
  color: var(--theme-gold-light) !important;
  text-shadow: 0 0 14px rgba(245, 197, 66, 0.75), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.progressive-jackpot .jackpot-container {
  background-image: none !important;
  background: linear-gradient(180deg, rgba(58, 37, 16, 0.95) 0%, rgba(28, 17, 5, 0.96) 100%) !important;
  border: 2px solid rgba(245, 197, 66, 0.6) !important;
  border-radius: 14px !important;
  color: #FFEC80 !important;
  text-shadow: 0 0 18px rgba(245, 197, 66, 0.8), 0 2px 6px rgba(0, 0, 0, 0.55) !important;
  box-shadow: inset 0 2px 6px rgba(255, 236, 128, 0.1), 0 0 24px rgba(245, 197, 66, 0.3) !important;
}

.download-apk-container {
  background-image: none !important;
  background: linear-gradient(135deg, #2A1A0A 0%, #51080F 50%, #1C1105 100%) !important;
  border: 2px solid rgba(245, 197, 66, 0.45) !important;
  border-radius: 22px !important;
}

.download-apk-info .download-apk-section i,
.download-apk-section i {
  color: var(--theme-gold) !important;
  text-shadow: 0 0 8px rgba(245, 197, 66, 0.55) !important;
  font-weight: 700 !important;
}

.download-apk .h2 {
  color: var(--theme-gold-light) !important;
  text-shadow: 0 3px 10px rgba(92, 27, 0, 0.65) !important;
}

.download-apk .h2 span {
  color: #FF7A7A !important;
  text-shadow: 0 3px 10px rgba(155, 17, 30, 0.6) !important;
}

.game-list::-webkit-scrollbar-track {
  background: rgba(14, 8, 3, 0.6) !important;
  border-radius: 8px !important;
}

.game-list::-webkit-scrollbar {
  height: 8px !important;
}

.game-list::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #F5C542 0%, #C9962B 100%) !important;
  border: none !important;
  border-radius: 8px !important;
}

.site-footer,
footer,
.footer {
  background: linear-gradient(180deg, #1C1105 0%, #0E0803 60%, #080501 100%) !important;
  border-top: 4px solid var(--theme-gold-dark) !important;
  color: var(--theme-text-muted) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 197, 66, 0.12) !important;
  padding-top: 28px !important;
}

.site-footer h5,
footer h5,
.footer h5,
.site-footer h4,
footer h4,
.footer h4 {
  color: var(--theme-gold-light) !important;
  text-shadow: 0 2px 6px rgba(92, 27, 0, 0.4) !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

.site-footer a,
footer a,
.footer a {
  color: var(--theme-gold) !important;
}

.site-footer a:hover,
footer a:hover,
.footer a:hover {
  color: var(--theme-maroon) !important;
}

.standard-container-with-sidebar,
.sidebar,
aside {
  background: linear-gradient(180deg, rgba(42, 26, 10, 0.92) 0%, rgba(28, 17, 5, 0.96) 100%) !important;
  border: 1px solid rgba(245, 197, 66, 0.3) !important;
  border-radius: 18px !important;
  color: var(--theme-text) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 236, 128, 0.05) !important;
}

.game-item {
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  border: 2px solid rgba(245, 197, 66, 0.28) !important;
  background: linear-gradient(180deg, #2A1A0A 0%, #1C1105 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38) !important;
}

.game-item:hover {
  border-color: var(--theme-maroon) !important;
  box-shadow: 0 0 0 1px var(--theme-maroon), 0 10px 26px rgba(155, 17, 30, 0.45), 0 0 22px rgba(245, 197, 66, 0.18) !important;
  transform: translateY(-2px) scale(1.01);
}

.game-item img {
  border-radius: 10px !important;
}

.popup-modal[data-title] .modal-title:before {
  background-color: var(--theme-gold) !important;
  color: var(--theme-text-dark) !important;
}

.j0x73fx,
.j0x73winner {
  background-image: none !important;
  background: radial-gradient(ellipse at center, rgba(155, 17, 30, 0.4) 0%, rgba(14, 8, 3, 0.95) 70%) !important;
  border: 2px solid var(--theme-gold) !important;
  color: #FFF4CC !important;
}

.nomwd {
  color: var(--theme-gold-light) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(245, 197, 66, 0.6) !important;
}

.txtwd {
  color: var(--theme-text) !important;
}

.winnerlist {
  color: var(--theme-gold-light) !important;
}

.tickercontainer .mask {
  background: linear-gradient(90deg, rgba(14, 8, 3, 0) 0%, rgba(28, 17, 5, 0.95) 5%, rgba(28, 17, 5, 0.95) 95%, rgba(14, 8, 3, 0) 100%) !important;
}

ul.newsticker li {
  color: var(--theme-gold-light) !important;
}

.mobile-dock {
  background: linear-gradient(180deg, #2A1A0A 0%, #0E0803 100%) !important;
  border-top: 3px solid var(--theme-gold-dark) !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(245, 197, 66, 0.18) !important;
}

.mobile-dock::before {
  border-top-color: rgba(255, 236, 128, 0.45) !important;
}

.mobile-dock-item {
  color: var(--theme-gold-cream) !important;
}

.mobile-dock-item:not(.mobile-dock-item-center) svg {
  color: var(--theme-gold) !important;
  filter: drop-shadow(0 0 5px rgba(245, 197, 66, 0.45)) !important;
}

.mobile-dock-item-center .mobile-dock-icon {
  background: radial-gradient(circle at 35% 25%, var(--theme-maroon) 0%, var(--theme-maroon-dark) 45%, var(--theme-maroon-deep) 100%) !important;
  border-color: #13110d !important;
  box-shadow: 0 0 0 2px var(--theme-gold), 0 10px 20px rgba(155, 17, 30, 0.55) !important;
}

.mobile-dock-item-center svg {
  color: var(--theme-gold-light) !important;
  filter: drop-shadow(0 0 4px rgba(255, 236, 128, 0.5)) !important;
}

.mobile-dock-item.is-active {
  color: #FFEC80 !important;
}

.mobile-dock-item.is-active svg {
  color: var(--theme-gold-light) !important;
  filter: drop-shadow(0 0 6px rgba(255, 236, 128, 0.7)) !important;
}

.floating-whatsapp-badge {
  background-color: var(--theme-maroon) !important;
  border-color: #FFF4CC !important;
  box-shadow: 0 0 0 2px var(--theme-gold-dark), 0 10px 20px rgba(0, 0, 0, 0.45) !important;
}

.floating-whatsapp-text {
  color: #FFF4CC !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

[aria-label='Open the Temukan Ramalan modal']::before {
  background-color: var(--theme-maroon) !important;
  border-color: #FFF4CC !important;
  box-shadow: 0 0 0 2px var(--theme-gold-dark), 0 10px 20px rgba(0, 0, 0, 0.45) !important;
}

[aria-label='Open the Temukan Ramalan modal']::after {
  color: #FFF4CC !important;
}

.banner,
.carousel-root,
.carousel,
.carousel-slider,
.slider-wrapper,
.slide img {
  border-radius: 18px !important;
}

.container.banner-margin .carousel-root,
.container.banner-margin .carousel.carousel-slider {
  border: 2px solid rgba(245, 197, 66, 0.5) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 30px rgba(245, 197, 66, 0.15), inset 0 0 0 1px rgba(255, 236, 128, 0.08) !important;
  overflow: hidden !important;
}

@keyframes running-border {
  0% {
    border-color: var(--theme-gold-dark);
  }
  25% {
    border-color: var(--theme-gold-light);
  }
  50% {
    border-color: var(--theme-maroon);
  }
  75% {
    border-color: var(--theme-gold);
  }
  to {
    border-color: var(--theme-gold-dark);
  }
}

html :root,
body :root {
  --bs-primary: #F5C542 !important;
  --bs-primary-rgb: 245, 197, 66 !important;
  --bs-secondary: #9B111E !important;
  --bs-secondary-rgb: 155, 17, 30 !important;
  --bs-warning: #F7C71B !important;
  --bs-warning-rgb: 247, 199, 27 !important;
  --bs-danger: #9B111E !important;
  --bs-danger-rgb: 155, 17, 30 !important;
  --bs-light: #FFF8E7 !important;
  --bs-light-rgb: 255, 248, 231 !important;
  --bs-dark: #0E0803 !important;
  --bs-dark-rgb: 14, 8, 3 !important;
  --bs-body-bg: #0E0803 !important;
  --bs-body-bg-rgb: 14, 8, 3 !important;
  --bs-body-color: #FFF8E7 !important;
  --bs-body-color-rgb: 255, 248, 231 !important;
  --bs-link-color: #F5C542 !important;
  --bs-link-hover-color: #9B111E !important;
  --provider-bg: #1a1205 !important;
  --provider-card: radial-gradient(120% 180% at 20% 20%, #e6b340 0%, #9B111E 58%, #3D2B00 100%) !important;
  --provider-ring: #FFD700 !important;
  --provider-ring-soft: rgba(255, 215, 0, 0.45) !important;
  --provider-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 20px rgba(155, 17, 30, 0.3) !important;
}

.btn-login,
.btn-register,
.btn-masuk,
.btn-daftar,
.button-primary-red,
.btn-red-gold,
a[href*="login"],
a[href*="register"],
a[href*="daftar"],
a[href*="masuk"],
button[data-action="login"],
button[data-action="register"] {
  background: linear-gradient(90deg, #760C17 0%, #9B111E 18%, #B71325 38%, #D12838 55%, #E48B00 78%, #F5C542 100%) !important;
  border: 2px solid #5C0002 !important;
  color: #FFF4CC !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  border-radius: 14px !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 18px rgba(155, 17, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(92, 0, 2, 0.45), 0 0 0 1px rgba(245, 197, 66, 0.5) !important;
  transition: all 0.22s ease !important;
  position: relative;
  overflow: hidden;
}

.btn-login:hover,
.btn-register:hover,
.btn-masuk:hover,
.btn-daftar:hover,
.button-primary-red:hover,
.btn-red-gold:hover,
a[href*="login"]:hover,
a[href*="register"]:hover,
a[href*="daftar"]:hover,
a[href*="masuk"]:hover,
button[data-action="login"]:hover,
button[data-action="register"]:hover {
  background: linear-gradient(90deg, #9B111E 0%, #B71325 18%, #D12838 38%, #E48B00 55%, #F5C542 78%, #FFEC80 100%) !important;
  border-color: #F5C542 !important;
  transform: translateY(-2px) scale(1.02);
  color: #FFF8E7 !important;
  box-shadow: 0 10px 28px rgba(155, 17, 30, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(92, 0, 2, 0.45), 0 0 22px rgba(245, 197, 66, 0.45), 0 0 0 1px rgba(255, 236, 128, 0.6) !important;
}

.btn-login::after,
.btn-register::after,
.btn-masuk::after,
.btn-daftar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transition: left 0.6s ease;
}

.btn-login:hover::after,
.btn-register:hover::after,
.btn-masuk:hover::after,
.btn-daftar:hover::after {
  left: 150%;
}

.hero-section,
.hero,
.hero-banner,
main > .container:first-of-type,
section.hero,
.home-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 197, 66, 0.32) 0%, rgba(155, 17, 30, 0.12) 35%, transparent 65%),
    radial-gradient(ellipse at 20% 30%, rgba(245, 197, 66, 0.22) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(155, 17, 30, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, #2A1908 0%, #1C1105 40%, #0E0803 100%) !important;
  border-radius: 20px !important;
}

.hero-title,
.hero h1,
.hero h2,
.hero-section h1,
.hero-section h2,
.home-hero h1,
.home-hero h2,
h1.page-title,
h2.section-title {
  background: linear-gradient(180deg, #FFEC80 0%, #F5C542 25%, #E48B00 55%, #C9962B 80%, #892E00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 3px 0 #5C1B00) drop-shadow(0 4px 14px rgba(245, 197, 66, 0.55)) !important;
  font-weight: 900 !important;
  -webkit-text-stroke: 1px rgba(92, 27, 0, 0.8) !important;
}

.menu-item-has-badge,
.header-buttons-container a.has-badge,
.nav-item-badge {
  position: relative !important;
}

.menu-promo-badge,
.badge-promo,
.promo-label {
  position: absolute;
  top: -4px;
  right: -6px;
  z-index: 5;
  background: linear-gradient(180deg, #D12838 0%, #9B111E 55%, #51080F 100%) !important;
  color: #FFF4CC !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1.5px solid #F5C542 !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(155, 17, 30, 0.6), 0 0 10px rgba(245, 197, 66, 0.4) !important;
  line-height: 1.3 !important;
}

.pagination .page-link,
.page-link {
  background: linear-gradient(180deg, #3A2510 0%, #1C1105 100%) !important;
  border-color: rgba(245, 197, 66, 0.4) !important;
  color: var(--theme-gold-light) !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.pagination .page-link:hover,
.page-link:hover {
  background: linear-gradient(180deg, #F5C542 0%, #B78200 100%) !important;
  color: var(--theme-text-dark) !important;
  border-color: var(--theme-border) !important;
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link,
.page-link.active {
  background: linear-gradient(180deg, #9B111E 0%, #51080F 100%) !important;
  color: #FFF4CC !important;
  border-color: var(--theme-gold) !important;
  box-shadow: 0 0 14px rgba(155, 17, 30, 0.5) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--theme-gold) !important;
}

.breadcrumb-item a {
  color: var(--theme-gold) !important;
}

.breadcrumb-item.active {
  color: var(--theme-text-muted) !important;
}

.list-group-item {
  background: rgba(42, 26, 10, 0.7) !important;
  border-color: rgba(245, 197, 66, 0.22) !important;
  color: var(--theme-text) !important;
}

.list-group-item:hover {
  background: rgba(92, 64, 0, 0.75) !important;
  color: var(--theme-gold-light) !important;
}

.list-group-item.active {
  background: linear-gradient(90deg, rgba(155, 17, 30, 0.92) 0%, rgba(92, 64, 0, 0.92) 100%) !important;
  color: #FFF4CC !important;
  border-color: var(--theme-gold) !important;
}

.accordion-button {
  background: linear-gradient(180deg, #3A2510 0%, #2A1A0A 100%) !important;
  color: var(--theme-gold-light) !important;
  border-color: rgba(245, 197, 66, 0.35) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, #760C17 0%, #3A2510 100%) !important;
  color: #FFEC80 !important;
  box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.4) !important;
}

.accordion-button::after {
  filter: invert(75%) sepia(60%) saturate(450%) hue-rotate(5deg) brightness(105%) contrast(102%) !important;
}

.accordion-item {
  background: rgba(28, 17, 5, 0.85) !important;
  border-color: rgba(245, 197, 66, 0.3) !important;
  color: var(--theme-text) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.progress {
  height: 20px !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 999px !important;
  background: #0D0D0D !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
}

.progress-bar {
  height: 100% !important;
  min-height: 100% !important;
  border: none !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 0.82rem !important;
  line-height: 20px !important;
  letter-spacing: 0.01em !important;
  padding: 0 10px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
    -1px  0   0 #000000,
     1px  0   0 #000000,
     0   -1px 0 #000000,
     0    1px 0 #000000,
     0   1px 2px rgba(0,0,0,0.6) !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  animation: slidebar 1s linear infinite !important;
}

.toast,
.toast-body {
  background: linear-gradient(180deg, #3A2510 0%, #1C1105 100%) !important;
  color: var(--theme-text) !important;
  border: 1px solid rgba(245, 197, 66, 0.5) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(245, 197, 66, 0.2) !important;
}

.toast-header {
  background: linear-gradient(180deg, rgba(92, 64, 0, 0.75) 0%, rgba(58, 37, 16, 0.75) 100%) !important;
  color: var(--theme-gold-light) !important;
  border-bottom: 1px solid rgba(245, 197, 66, 0.3) !important;
  border-radius: 14px 14px 0 0 !important;
}

.spinner-border,
.spinner-grow {
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border-color: var(--theme-gold) !important;
  border-right-color: transparent !important;
  color: var(--theme-gold) !important;
}

button.pola-main,
button.suntikan-gacor,
.btn.pola-main,
.btn.suntikan-gacor,
.btn-none.pola-main,
.btn-none.suntikan-gacor,
.pola-main,
.suntikan-gacor {
  background: linear-gradient(90deg, #760C17 0%, #9B111E 15%, #B71325 32%, #D12838 50%, #E48B00 75%, #F5C542 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  border: 2px solid #FFEC80 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow:
    -0.8px -0.8px 0 rgba(0, 0, 0, 0.85),
     0.8px -0.8px 0 rgba(0, 0, 0, 0.85),
    -0.8px  0.8px 0 rgba(0, 0, 0, 0.85),
     0.8px  0.8px 0 rgba(0, 0, 0, 0.85),
     0 1px 0 rgba(0, 0, 0, 0.4),
     0 2px 4px rgba(0, 0, 0, 0.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(92, 0, 2, 0.55),
    0 0 0 1.5px rgba(92, 0, 2, 0.6),
    0 0 12px rgba(155, 17, 30, 0.65),
    0 0 22px rgba(245, 197, 66, 0.4),
    0 5px 14px rgba(0, 0, 0, 0.42) !important;
  transition: all 0.22s ease !important;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100%;
  height: auto !important;
  white-space: nowrap !important;
  isolation: isolate;
  margin-top: 5px;
  margin-bottom: 5px;
}

button.pola-main > *,
button.suntikan-gacor > *,
.btn.pola-main > *,
.btn.suntikan-gacor > * {
  position: relative;
  z-index: 2;
  color: #FFFFFF !important;
  text-shadow: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  white-space: nowrap !important;
}

button.pola-main::before,
button.suntikan-gacor::before,
.btn.pola-main::before,
.btn.suntikan-gacor::before {
  content: '';
  position: absolute;
  top: 6%;
  left: 5%;
  width: 90%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.07) 75%, transparent 100%);
  border-radius: 999px 999px 50% 50% / 80% 80% 30% 30%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

button.pola-main::after,
button.suntikan-gacor::after,
.btn.pola-main::after,
.btn.suntikan-gacor::after {
  content: '';
  position: absolute;
  top: 0;
  left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 3;
}

button.pola-main:hover,
button.suntikan-gacor:hover,
.btn.pola-main:hover,
.btn.suntikan-gacor:hover,
.pola-main:hover,
.suntikan-gacor:hover {
  background: linear-gradient(90deg, #9B111E 0%, #B71325 15%, #D12838 32%, #E48B00 50%, #F5C542 75%, #FFEC80 100%) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-1.5px) scale(1.015);
  opacity: 1 !important;
  filter: none !important;
  text-shadow:
    -0.8px -0.8px 0 rgba(0, 0, 0, 0.9),
     0.8px -0.8px 0 rgba(0, 0, 0, 0.9),
    -0.8px  0.8px 0 rgba(0, 0, 0, 0.9),
     0.8px  0.8px 0 rgba(0, 0, 0, 0.9),
     0 1px 0 rgba(0, 0, 0, 0.45),
     0 0 10px rgba(255, 236, 128, 0.7),
     0 2px 6px rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(92, 0, 2, 0.48),
    0 0 0 1.5px rgba(255, 236, 128, 0.75),
    0 0 20px rgba(209, 40, 56, 0.85),
    0 0 38px rgba(245, 197, 66, 0.7),
    0 9px 22px rgba(0, 0, 0, 0.5) !important;
}

button.pola-main:hover::after,
button.suntikan-gacor:hover::after,
.btn.pola-main:hover::after,
.btn.suntikan-gacor:hover::after {
  left: 150%;
}

button.pola-main:focus,
button.pola-main:focus-visible,
button.suntikan-gacor:focus,
button.suntikan-gacor:focus-visible,
.btn.pola-main:focus,
.btn.suntikan-gacor:focus {
  outline: none !important;
  border-color: #FFEC80 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.5),
    0 0 0 3px rgba(245, 197, 66, 0.5),
    0 0 22px rgba(209, 40, 56, 0.8),
    0 0 44px rgba(245, 197, 66, 0.7),
    0 8px 20px rgba(0, 0, 0, 0.48) !important;
}

button.pola-main:active,
button.suntikan-gacor:active,
.btn.pola-main:active,
.btn.suntikan-gacor:active {
  transform: translateY(1px) scale(0.985);
  opacity: 1 !important;
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.38),
    inset 0 2px 5px rgba(0, 0, 0, 0.38),
    0 0 0 1.5px rgba(92, 0, 2, 0.65),
    0 0 12px rgba(155, 17, 30, 0.65),
    0 0 20px rgba(245, 197, 66, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.42) !important;
}

.fugu-grid-item .portfolio-item,
.portfolio-item,
.fugu-grid-item,
.bg-cb,
.bg-shadow-white {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  overflow: hidden !important;
  position: relative !important;
}

.portfolio-item .pola-main,
.portfolio-item .suntikan-gacor {
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10;
  overflow: hidden !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  clip-path: inset(0 0 0 0 round 999px) !important;
  isolation: isolate;
}

button.pola-main,
button.suntikan-gacor,
.btn.pola-main,
.btn.suntikan-gacor,
.btn-none.pola-main,
.btn-none.suntikan-gacor,
.pola-main,
.suntikan-gacor {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  background: linear-gradient(90deg, #760C17 0%, #9B111E 15%, #B71325 32%, #D12838 50%, #E48B00 75%, #F5C542 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  border: 1.8px solid #FFEC80 !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  margin: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  text-shadow:
    -0.7px -0.7px 0 rgba(0, 0, 0, 0.85),
     0.7px -0.7px 0 rgba(0, 0, 0, 0.85),
    -0.7px  0.7px 0 rgba(0, 0, 0, 0.85),
     0.7px  0.7px 0 rgba(0, 0, 0, 0.85),
     0 1px 0 rgba(0, 0, 0, 0.38),
     0 2px 4px rgba(0, 0, 0, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1.5px 0 rgba(92, 0, 2, 0.55),
    0 0 0 1.2px rgba(92, 0, 2, 0.55),
    0 0 9px rgba(155, 17, 30, 0.55),
    0 0 16px rgba(245, 197, 66, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.38) !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  cursor: pointer;
  z-index: 10;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  isolation: isolate;
  left: auto !important;
  top: auto !important;
  transform: scale(1) !important;
  min-height: 0 !important;
  max-height: none !important;
}

button.pola-main > *,
button.suntikan-gacor > *,
.btn.pola-main > *,
.btn.suntikan-gacor > * {
  position: relative;
  z-index: 2;
  color: #FFFFFF !important;
  text-shadow: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  white-space: nowrap !important;
}

button.pola-main::before,
button.suntikan-gacor::before,
.btn.pola-main::before,
.btn.suntikan-gacor::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 6%;
  width: 88%;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.05) 78%, transparent 100%);
  border-radius: 999px 999px 50% 50% / 80% 80% 30% 30%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
  display: block !important;
  overflow: hidden !important;
  max-width: 88%;
  max-height: 40%;
  clip-path: inset(0 0 0 0 round 999px);
}

button.pola-main::after,
button.suntikan-gacor::after,
.btn.pola-main::after,
.btn.suntikan-gacor::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  max-width: 50%;
  max-height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.34) 50%, transparent 100%);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 3;
  display: block !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0 round 999px);
  opacity: 0.9;
}

button.pola-main:hover,
button.suntikan-gacor:hover,
.btn.pola-main:hover,
.btn.suntikan-gacor:hover,
.pola-main:hover,
.suntikan-gacor:hover {
  background: linear-gradient(90deg, #9B111E 0%, #B71325 15%, #D12838 32%, #E48B00 50%, #F5C542 75%, #FFEC80 100%) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-1.2px) !important;
  opacity: 1 !important;
  filter: none !important;
  display: inline-flex !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0 round 999px) !important;
  text-shadow:
    -0.7px -0.7px 0 rgba(0, 0, 0, 0.9),
     0.7px -0.7px 0 rgba(0, 0, 0, 0.9),
    -0.7px  0.7px 0 rgba(0, 0, 0, 0.9),
     0.7px  0.7px 0 rgba(0, 0, 0, 0.9),
     0 1px 0 rgba(0, 0, 0, 0.4),
     0 0 8px rgba(255, 236, 128, 0.7),
     0 2px 5px rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1.5px 0 rgba(92, 0, 2, 0.45),
    0 0 0 1.2px rgba(255, 236, 128, 0.7),
    0 0 14px rgba(209, 40, 56, 0.75),
    0 0 28px rgba(245, 197, 66, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

button.pola-main:hover::after,
button.suntikan-gacor:hover::after,
.btn.pola-main:hover::after,
.btn.suntikan-gacor:hover::after {
  left: 115%;
}

button.pola-main:focus,
button.pola-main:focus-visible,
button.suntikan-gacor:focus,
button.suntikan-gacor:focus-visible,
.btn.pola-main:focus,
.btn.suntikan-gacor:focus {
  outline: none !important;
  border-color: #FFEC80 !important;
  opacity: 1 !important;
  filter: none !important;
  display: inline-flex !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0 round 999px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.5),
    0 0 0 2.5px rgba(245, 197, 66, 0.45),
    0 0 18px rgba(209, 40, 56, 0.7),
    0 0 34px rgba(245, 197, 66, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.45) !important;
}

button.pola-main:active,
button.suntikan-gacor:active,
.btn.pola-main:active,
.btn.suntikan-gacor:active {
  transform: translateY(1px) !important;
  opacity: 1 !important;
  filter: none !important;
  display: inline-flex !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  clip-path: inset(0 0 0 0 round 999px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.35),
    inset 0 2px 4px rgba(0, 0, 0, 0.38),
    0 0 0 1.2px rgba(92, 0, 2, 0.6),
    0 0 10px rgba(155, 17, 30, 0.55),
    0 0 16px rgba(245, 197, 66, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.fugu-grid-item .portfolio-item,
.portfolio-item,
.fugu-grid-item,
.bg-cb,
.bg-shadow-white {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.bg-progress-rtp,
.progress > .progress-bar,
.animated-progress span,
.progress-bar,
.progress-blue > span {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.bg-progress-rtp::before,
.progress > .progress-bar::before,
.animated-progress span::before,
.progress-bar::before,
.progress-blue > span::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 200% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 0px,
    rgba(255, 255, 255, 0.18) 10px,
    rgba(0, 0, 0, 0.14) 10px,
    rgba(0, 0, 0, 0.14) 20px
  ) !important;
  background-repeat: repeat !important;
  background-size: 40px 40px !important;
  background-position: 0 0 !important;
  animation: slidebar 0.9s linear infinite !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.bg-progress-rtp::after,
.animated-progress span::after,
.progress-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 45% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.03) 100%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border-radius: 999px 999px 0 0 !important;
}

@keyframes slidebar {
  0%   { background-position: 0px 0px;   transform: translateX(0); }
  100% { background-position: 40px 0px; transform: translateX(-40px); }
}

@-webkit-keyframes slidebar {
  0%   { background-position: 0px 0px;   -webkit-transform: translateX(0); }
  100% { background-position: 40px 0px; -webkit-transform: translateX(-40px); }
}

/* ============================================================
   HERO BANNER: Auto-slide support + Universal image format
   (PNG / WebP / JPG / JPEG / GIF / SVG / BMP / AVIF)
   ============================================================ */
div.carousel-root,
div.d-none.d-md-block div.carousel-root,
div.d-block.d-md-none div.carousel-root {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1.8px solid rgba(255, 236, 128, 0.55) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(139, 10, 24, 0.45) !important;
  background: #0E0803 !important;
  position: relative !important;
  isolation: isolate !important;
}

div.carousel-slider,
.carousel-root .carousel.carousel-slider {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

div.slider-wrapper.axis-horizontal {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

div.slider-wrapper.axis-horizontal > div,
div.slider-wrapper.axis-horizontal {
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-transition: -webkit-transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform !important;
}

div.carousel__item,
.slider-wrapper .slide,
.slider-wrapper .carousel__item {
  width: 100% !important;
  height: auto !important;
  min-height: 210px !important;
  max-height: 430px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #0E0803 !important;
  display: block !important;
}

/* Universal image render (semua ext: png, webp, jpg, jpeg, gif, svg, avif, bmp) */
div.carousel__item img,
.slider-wrapper img,
.carousel-root .slide img,
div.banner-margin img,
div.carousel-slider img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 210px !important;
  max-height: 430px !important;
  object-fit: cover !important;
  -o-object-fit: cover !important;
  object-position: center center !important;
  -o-object-position: center center !important;
  display: block !important;
  position: relative !important;
  background:
    linear-gradient(90deg, #1C1105 0%, #0E0803 50%, #1C1105 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 none transparent !important;
  outline: 0 !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  box-sizing: border-box !important;
}

/* SVG di banner: paksa size natural */
div.carousel__item img[src$=".svg"],
.slider-wrapper img[src$=".svg"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  -o-object-fit: contain !important;
  background: transparent !important;
}

/* GIF animate: pastikan smooth play */
div.carousel__item img[src$=".gif"],
.slider-wrapper img[src$=".gif"] {
  image-rendering: auto !important;
}

/* Arrow control tema emas-merah (tambahan fallback jika arrow disabled) */
.carousel-root .control-arrow.control-prev,
.carousel-root .control-arrow.control-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 10 !important;
}
.carousel-root .control-arrow.control-prev { left: 10px !important; }
.carousel-root .control-arrow.control-next { right: 10px !important; }

@media (max-width: 767px) {
  div.carousel__item,
  .slider-wrapper .slide {
    min-height: 200px !important;
    max-height: 300px !important;
  }
  div.carousel__item img,
  .slider-wrapper img {
    min-height: 200px !important;
    max-height: 300px !important;
  }
  .carousel-root .control-arrow.control-prev,
  .carousel-root .control-arrow.control-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* ================================================================ */
/* LOGO HEADER: Universal format .png .webp .jpg .jpeg .gif .svg    */
/* ================================================================ */
a.logo-link,
a.logo-link * {
  text-decoration: none !important;
  outline: none !important;
}
img.light-version-logo,
.logo-link img,
a[href="./"] img[alt="Logo"],
a[href="/"] img[alt="Logo"],
img[alt="Logo"],
header img[class*="logo"],
nav img[class*="logo"],
[class*="header"] img[alt*="logo" i] {
  width: auto !important;
  max-width: 240px !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  display: inline-block !important;
  vertical-align: middle !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
}
/* PNG: khusus extra tajam */
img.light-version-logo[src$=".png"],
.logo-link img[src$=".png"],
img[alt="Logo"][src$=".png"] {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}
/* SVG: vector jangan dipotong, bg transparan */
img.light-version-logo[src$=".svg"],
.logo-link img[src$=".svg"],
img[alt="Logo"][src$=".svg"] {
  object-fit: contain !important;
  background: transparent !important;
  image-rendering: auto !important;
}
/* GIF: animasi smooth */
img.light-version-logo[src$=".gif"],
.logo-link img[src$=".gif"],
img[alt="Logo"][src$=".gif"] {
  image-rendering: auto !important;
  image-rendering: optimizeQuality !important;
}
/* JPG/JPEG: compress */
img.light-version-logo[src$=".jpg"],
img.light-version-logo[src$=".jpeg"],
.logo-link img[src$=".jpg"],
.logo-link img[src$=".jpeg"] {
  image-rendering: optimizeQuality !important;
}
@media (max-width: 575.98px) {
  img.light-version-logo,
  .logo-link img,
  img[alt="Logo"] {
    max-width: 170px !important;
    max-height: 42px !important;
    min-height: 32px !important;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  img.light-version-logo,
  .logo-link img,
  img[alt="Logo"] {
    max-width: 200px !important;
    max-height: 48px !important;
  }
}
/* ========= EXTRA GUARD: SUPRES BEKAS IMAGE BROKEN FLOATING LIVE CHAT & WA ==========
   JIKA file gambar chat dihapus / 404 → CSS di bawah PASTIKAN img di dalam float chat button
   100% INVISIBLE & TIDAK MEMAKAI RUANG (width=0 height=0 overflow:hidden position absolute clip-path)
   Supaya tidak muncul SVG INLINE BESAR 412x88 (bekas fallback IIFE logo).
   Layout chat tetap pakai ::before + ::after (SVG inline CSS) yang aman. */
html body a[aria-label='Open the LiveChat modal'] img,
body a[aria-label='Open the LiveChat modal'] img,
a[aria-label='Open the LiveChat modal'] img,
a[aria-label='Open the LiveChat modal'] .img-fluid,
a[aria-label='Open the LiveChat modal'] > * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  clip-path: circle(0 at 0 0) !important;
  -webkit-clip-path: circle(0 at 0 0) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: hidden !important;
}
/* WA floating button (tidak pakai img child, tapi .floating-whatsapp-badge + text) */
.floating-whatsapp img,
.floating-whatsapp .img-fluid,
.floating-whatsapp > img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
}

/* ============================================================
   NO GREEN FINAL GLOBAL OVERRIDE - SEMUA TEXT HIJAU -> EMAS CREAM / MERAH TEMA
   Tujuan: 100% TIDAK ADA WARNA HIJAU YANG TERLIHAT DI PAGE MANAPUN
   ============================================================ */

/* 1. MARQUEE / PENGUMUMAN BAR (user screenshot text hijau rgb(0,178,19) di class .marquee-content) */
html body .marquee-text,
body .marquee-text,
.marquee-text,
html body .marquee-content,
body .marquee-content,
.marquee-content,
.swiper-wrapper-marquees,
.swiper-wrapper-marquees p,
.swiper-wrapper-marquees .game-name-color,
p.game-name-color,
.announcement-container [data-section=announcements] > *,
.announcement-text,
.notice-text,
.ticker-text {
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
  text-shadow:
    0 1px 0 rgba(92, 64, 0, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* 2. BOOTSTRAP UTILITY "SUCCESS" CLASS = SEMUA ASALNYA WARNA HIJAU -> DI-OVERRIDE TEMA EMAS-MERAH */

/* TEXT-SUCCESS = tadinya font hijau -> text GOLD #FFE680 */
html body .text-success,
body .text-success,
.text-success,
.text-success *,
[class*="text-success"] {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
}

/* BTN-SUCCESS = tadinya background hijau -> GRADIENT REDGOLD seperti btn-danger tema */
html body .btn-success,
body .btn-success,
.btn-success,
button.btn-success,
a.btn.btn-success,
input[type="button"].btn-success,
[class*="btn-success"] {
  background: linear-gradient(180deg, #D12838 0%, #B71325 30%, #9B111E 70%, #760C17 100%) !important;
  background-color: #B71325 !important;
  background-image: linear-gradient(180deg, #D12838 0%, #B71325 30%, #9B111E 70%, #760C17 100%) !important;
  border-color: #6B4F00 !important;
  border: 1.5px solid #FFEC80 !important;
  color: #FFF4CC !important;
  -webkit-text-fill-color: #FFF4CC !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 0 rgba(92, 0, 2, 0.5),
    0 0 0 1.5px rgba(92, 64, 0, 0.55),
    0 0 10px rgba(245, 197, 66, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
}
html body .btn-success:hover,
body .btn-success:hover,
.btn-success:hover,
button.btn-success:hover,
a.btn.btn-success:hover {
  background: linear-gradient(180deg, #E43B47 0%, #D12838 30%, #B71325 70%, #9B111E 100%) !important;
  background-image: linear-gradient(180deg, #E43B47 0%, #D12838 30%, #B71325 70%, #9B111E 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 0 rgba(92, 0, 2, 0.55),
    0 0 0 1.5px rgba(92, 64, 0, 0.6),
    0 0 16px rgba(245, 197, 66, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.55) !important;
  color: #FFF8E7 !important;
  -webkit-text-fill-color: #FFF8E7 !important;
}
html body .btn-success:active,
.btn-success:active {
  transform: translateY(0px) !important;
  filter: brightness(0.96) !important;
}
html body .btn-success:focus,
.btn-success:focus {
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(92, 0, 2, 0.55),
    0 0 0 3px rgba(245, 197, 66, 0.38),
    0 0 12px rgba(245, 197, 66, 0.5) !important;
}
html body .btn-outline-success,
.btn-outline-success,
button.btn-outline-success,
a.btn.btn-outline-success {
  background: linear-gradient(180deg, rgba(28, 17, 5, 0.98) 0%, rgba(14, 8, 3, 0.98) 100%) !important;
  background-color: #1C1105 !important;
  border: 1.5px solid #F5C542 !important;
  border-color: #FFEC80 !important;
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.12),
    0 0 0 1px rgba(92, 64, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
html body .btn-outline-success:hover,
.btn-outline-success:hover {
  background: linear-gradient(180deg, #3A2510 0%, #2A1908 55%, #1C1105 100%) !important;
  background-color: #2A1908 !important;
  border-color: #FFE680 !important;
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
}

/* BORDER-SUCCESS = tadinya border warna hijau -> GOLD BORDER */
html body .border-success,
body .border-success,
.border-success,
[class*="border-success"] {
  border-color: #F5C542 !important;
  border: 1px solid #FFEC80 !important;
  box-shadow: 0 0 0 1px rgba(92, 64, 0, 0.55) !important;
}

/* BG-SUCCESS / TEXT-BG-SUCCESS = background hijau -> GRADIENT BROWN-GOLD tema (sudah ada L577, tapi pastikan menang specificity) */
html body .bg-success,
body .bg-success,
.bg-success,
html body .text-bg-success,
body .text-bg-success,
.text-bg-success,
[class*="bg-success"],
[class*="text-bg-success"] {
  background: linear-gradient(180deg, #B71325 0%, #9B111E 30%, #51080F 100%) !important;
  background-color: #9B111E !important;
  background-image: linear-gradient(180deg, #B71325 0%, #9B111E 30%, #51080F 100%) !important;
  color: #FFF4CC !important;
  -webkit-text-fill-color: #FFF4CC !important;
  border-color: #FFEC80 !important;
  border: 1px solid rgba(255, 236, 128, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(92, 0, 2, 0.5),
    0 0 0 1px rgba(92, 64, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ALERT-SUCCESS = tadinya hijau -> bg dark gold text cream emas */
html body .alert-success,
body .alert-success,
.alert-success,
[class*="alert-success"] {
  background: linear-gradient(180deg, rgba(58, 37, 16, 0.95) 0%, rgba(28, 17, 5, 0.95) 100%) !important;
  background-color: #2A1908 !important;
  background-image: linear-gradient(180deg, rgba(58, 37, 16, 0.95) 0%, rgba(28, 17, 5, 0.95) 100%) !important;
  border-color: #F5C542 !important;
  border: 1.5px solid rgba(255, 236, 128, 0.7) !important;
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 128, 0.18),
    0 0 0 1px rgba(92, 64, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.5) !important;
}
html body .alert-success strong,
.alert-success b,
.alert-success h1, .alert-success h2, .alert-success h3, .alert-success h4, .alert-success h5,
.alert-success .alert-heading,
.alert-success .alert-link {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
}

/* LIST-GROUP-ITEM-SUCCESS / TABLE-SUCCESS = tadinya row hijau -> row BROWN EMAS tema */
html body .list-group-item-success,
body .list-group-item-success,
.list-group-item-success,
html body .table-success,
body .table-success,
.table-success,
.table-success > thead > tr > th,
.table-success > tbody > tr > td,
.table-success > tr > th,
.table-success > tr > td,
[class*="table-success"],
[class*="list-group-item-success"] {
  background: linear-gradient(180deg, rgba(42, 25, 8, 0.98) 0%, rgba(28, 17, 5, 0.98) 100%) !important;
  background-color: #2A1908 !important;
  color: #FFF4CC !important;
  -webkit-text-fill-color: #FFF4CC !important;
  border-color: rgba(245, 197, 66, 0.45) !important;
}

/* BADGE SUCCESS = sudah L577 override, tapi tambah specificity global */
html body .badge.bg-success,
body .badge.bg-success,
.badge.bg-success,
html body .badge.text-bg-success,
.badge.text-bg-success,
span.badge.text-bg-success {
  background: linear-gradient(180deg, #9B111E 0%, #51080F 100%) !important;
  background-color: #760C17 !important;
  background-image: linear-gradient(180deg, #9B111E 0%, #51080F 100%) !important;
  color: #FFF4CC !important;
  -webkit-text-fill-color: #FFF4CC !important;
  border: 1px solid #FFEC80 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(92, 64, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* RIPPLE / ACCENT EFFECT hijau -> gold (efek focus/select hijau) */
::selection {
  background: rgba(255, 230, 128, 0.32) !important;
  color: #FFF8E7 !important;
}
::-moz-selection {
  background: rgba(255, 230, 128, 0.32) !important;
  color: #FFF8E7 !important;
}

/* FOCUS RING hijau -> GOLD ring */
*:focus-visible,
*:focus {
  outline-color: #FFEC80 !important;
  outline: 2px solid #FFE680 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px rgba(255, 236, 128, 0.3) !important;
}

/* SVG FILL warna hijau -> fill gold #FFE680. Catch SVG inline/use tag fill hijau */
svg path[fill="#00b213"], svg *[fill="#00B213"],
svg path[fill="#00C851"], svg *[fill="#00c851"],
svg path[fill="#198754"], svg *[fill="#198754"],
svg path[fill="#22c55e"], svg *[fill="#22c55e"],
svg path[fill="#16a34a"], svg *[fill="#16a34a"],
svg path[fill="#059669"], svg *[fill="#059669"],
svg path[fill="rgb(0,178,19)"], svg *[fill="rgb(0,178,19)"],
svg path[fill="green"], svg *[fill="green"],
svg path[fill="lime"], svg *[fill="lime"] {
  fill: #FFE680 !important;
}
svg path[stroke="#00b213"], svg *[stroke="#00B213"],
svg path[stroke="#198754"], svg *[stroke="#198754"],
svg path[stroke="#22c55e"], svg *[stroke="#22c55e"],
svg path[stroke="green"], svg *[stroke="green"] {
  stroke: #FFEC80 !important;
}
svg circle[fill="#00b213"], svg rect[fill="#00b213"] { fill: #FFE680 !important; }

/* H1-H6 PENGGUNAAN UTAMA: Kalau ada class text-success (warna hijau) paksa jadi emas */
h1.text-success, h2.text-success, h3.text-success, h4.text-success, h5.text-success, h6.text-success,
p.text-success, span.text-success, a.text-success, div.text-success, li.text-success {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
}

/* CATATAN: progress-bar.bg-success, checkmark, border VISUAL (BUKAN TEXT)
   = JANGAN di-override warnanya! User minta HANYA TEXT WARNA HIJAU yang dihilangkan.
   Progress bar hijau visual indicator DIBIARKAN TETAP HIJAU SESUAI ASLI. */

/* ============================================================
   3. FOOTER / COPYRIGHT & BAGIAN BAWAH PAGE - PAKSA WARNA EMAS
   MASALAH: Footer Copyright "Copyright 2026... LogonSlot" TETAP HIJAU
   karena di-render LAZY (setelah user scroll ke bawah).
   SOLUSI: CSS specificity TERTINGGI rule ini = LIVE BINDING, akan
   ter-apply OTOMATIS KETIKA footer baru nongol di DOM (tanpa nunggu JS).
   Targetkan HANYA selector yang spesifik, JANGAN gunakan selector luas
   seperti [class*=footer] > * (bisa men-trigger paint hit seluruh halaman
   menyebabkan first load BERAT / ERROR layout shift).
   ============================================================ */
footer,
footer > p, footer > span, footer > div, footer > small, footer > h1, footer > h2,
footer > h3, footer > h4, footer > h5, footer > h6, footer a, footer li,
footer strong, footer b, footer small {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
  text-shadow:
    0 1px 0 rgba(92, 64, 0, 0.78),
    0 2px 8px rgba(0, 0, 0, 0.65) !important;
}
footer a:visited, footer a:hover, footer a:active {
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
}

/* EXPLICIT CLASS .copyright (spesifik, tidak luas) */
.copyright,
.copyright > *,
[class="copyright"] *,
.copyright-text,
.copyright-text > * {
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
  text-shadow:
    0 1px 0 rgba(92, 64, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.72) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

/* Footer tag/container eksplisit (tidak pakai [class*="footer"] yang terlalu luas) */
footer,
.page-footer,
.site-footer,
.main-footer,
.app-footer,
.footer-bottom,
.footer-top,
#footer,
#page-footer,
#site-footer,
#main-footer,
#copyright,
[data-footer],
[data-copyright] {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
}
.page-footer > *, .site-footer > *, .main-footer > *, .app-footer > *,
.footer-bottom > *, .footer-top > *,
#footer > *, #page-footer > *, #site-footer > *, #main-footer > *,
#copyright > *,
[data-footer] > *, [data-copyright] > * {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
}

/* Text small / muted di footer - spesifik, tidak global */
footer .text-muted,
footer .text-secondary,
footer .text-light,
footer .text-dark,
footer small,
.copyright small,
#copyright small {
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
}
.copyright .text-muted,
.copyright .text-secondary,
.page-footer small,
.page-footer .text-muted {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
}

/* Class footer-text-color (YANG SEBENARNYA DIPAKAI DI INDEKX HTML untuk Copyright!) */
.footer-text-color,
.footer-text-color *,
.footer-text-color > span,
.footer-text-color > small,
.footer-text-color.m-4,
.footer-text-color.pb-4,
.footer-text-color .nameBrand,
small.footer-text-color,
.nameBrand {
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
  text-shadow:
    0 1px 0 rgba(92, 64, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.72) !important;
  font-weight: 700 !important;
}

/* ==================================================================== */
/*  V.33  FIX LAYOUT CARD GAME RAPI SEPERTI REFERENSI USER              */
/*  Akar error sebelumnya: img game dipotong max-height ~54px,           */
/*  flex-direction & spacing tidak seragam, vertical padding tidak rata */
/* ==================================================================== */

/* --- 1. COLUMN WIDTH (6 per row desktop, 3 tablet, 2 mobile) --- */
html body div.fugu-grid-item.col-lg-2,
html body div.fugu-grid-item-w2.col-lg-2 {
  flex: 0 0 16.666667% !important;
  max-width: 16.666667% !important;
  width: 16.666667% !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}
@media (max-width: 1199.98px) {
  html body div.fugu-grid-item.col-lg-2,
  html body div.fugu-grid-item-w2.col-lg-2 {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    width: 20% !important;
  }
}
@media (max-width: 991.98px) {
  html body div.fugu-grid-item.col-md-4,
  html body div.fugu-grid-item-w2.col-md-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
  }
}
@media (max-width: 575.98px) {
  html body div.fugu-grid-item.col-4,
  html body div.fugu-grid-item-w2.col-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding: 6px 8px !important;
  }
}

/* --- 2. CARD BODY (portfolio-item): flex column, padding seragam, gap konsisten --- */
html body .fugu-grid-item .portfolio-item,
html body .fugu-grid-item-w2 .portfolio-item,
html body .fugu-grid-item-w3 .portfolio-item {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  margin: 0 0 16px !important;
  padding: 10px 10px 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
  text-align: center !important;
}

/* --- 3. ✅ FIX KRITIS: GAMBAR THUMBNAIL TIDAK DIPOTONG LAGI (54px bug)! --- */
html body .fugu-grid-item .portfolio-item > img,
html body .fugu-grid-item .portfolio-item > a:first-of-type > img,
html body .fugu-grid-item .portfolio-item > a > img,
html body .fugu-grid-item .portfolio-item img.card-img-top,
html body .fugu-grid-item .portfolio-item img.provider-thumb,
html body .fugu-grid-item .portfolio-item .thumb-wrap img,
html body .fugu-grid-item .portfolio-item .thumb img,
html body .fugu-grid-item .portfolio-item > div:first-child img,
html body .fugu-grid-item .portfolio-item .card-img img {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  max-height: none !important;    /* hapus batas 54px yang hancurkan layout */
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 236, 128, 0.28) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(107, 11, 20, 0.4) !important;
  display: block !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  translate: 0 !important;
}

/* wrapper gambar (jika ada div/link parent) */
html body .fugu-grid-item .portfolio-item > a:first-of-type,
html body .fugu-grid-item .portfolio-item > div:first-child,
html body .fugu-grid-item .portfolio-item .thumb-wrap,
html body .fugu-grid-item .portfolio-item .thumb,
html body .fugu-grid-item .portfolio-item .card-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

/* --- 4. TITLE / NAMA GAME (di bawah gambar) --- */
html body .fugu-grid-item .portfolio-item h3,
html body .fugu-grid-item .portfolio-item h4,
html body .fugu-grid-item .portfolio-item h5,
html body .fugu-grid-item .portfolio-item .game-name,
html body .fugu-grid-item .portfolio-item .game-name-color,
html body .fugu-grid-item .portfolio-item .game-title,
html body .fugu-grid-item .portfolio-item .slot-name,
html body .fugu-grid-item .portfolio-item .slot-title,
html body .fugu-grid-item .portfolio-item .product-name,
html body .fugu-grid-item .portfolio-item .title-game,
html body .fugu-grid-item .portfolio-item > [class*="name"],
html body .fugu-grid-item .portfolio-item > [class*="title"] {
  width: 100% !important;
  margin: 2px 0 6px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  min-height: 32px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
}

/* --- 5. PROGRESS BAR RTP: tinggi + margin seragam --- */
html body .fugu-grid-item .portfolio-item .animated-progress,
html body .fugu-grid-item .portfolio-item .progress,
html body .fugu-grid-item .portfolio-item .progress-blue,
html body .fugu-grid-item .portfolio-item .rtp-progress,
html body .fugu-grid-item .portfolio-item .rtp-bar {
  width: 100% !important;
  margin: 2px 0 6px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* --- 6. TOMBOL Pola Main & Cheat Gacor (suntikan-gacor): lebar, tinggi, spasi RAPI --- */
html body .fugu-grid-item .portfolio-item .pola-main,
html body .fugu-grid-item .portfolio-item .btn-pola,
html body .fugu-grid-item .portfolio-item .pola-main-btn {
  margin: 4px auto 0 !important;
}
html body .fugu-grid-item .portfolio-item .suntikan-gacor,
html body .fugu-grid-item .portfolio-item .cheat-gacor,
html body .fugu-grid-item .portfolio-item .cheat-btn,
html body .fugu-grid-item .portfolio-item .cheat-main {
  margin: 8px auto 0 !important;
}
html body .fugu-grid-item .portfolio-item .pola-main,
html body .fugu-grid-item .portfolio-item .suntikan-gacor,
html body .fugu-grid-item .portfolio-item .btn-pola,
html body .fugu-grid-item .portfolio-item .cheat-gacor,
html body .fugu-grid-item .portfolio-item .cheat-btn,
html body .fugu-grid-item .portfolio-item .pola-main-btn,
html body .fugu-grid-item .portfolio-item .cheat-main,
html body .fugu-grid-item .portfolio-item button.pola-main,
html body .fugu-grid-item .portfolio-item button.suntikan-gacor,
html body .fugu-grid-item .portfolio-item a.pola-main,
html body .fugu-grid-item .portfolio-item a.suntikan-gacor {
  width: 96% !important;
  max-width: 240px !important;
  min-width: 140px !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  position: relative !important;
  overflow: visible !important;
}

/* --- EXTRA GUARD: hapus style inline yang kadang di-inject JS (max-height 54px dsb) --- */
html body .fugu-grid-item .portfolio-item img[style] {
  max-height: none !important;
  max-width: 100% !important;
  height: auto !important;
  width: 100% !important;
}

/* --- 7. FIX WRAPPER .card.bg-cb + p-2 (title terpotong / layout kurang lebar) --- */
html body .fugu-grid-item .portfolio-item > a,
html body .fugu-grid-item .portfolio-item > a.item,
html body .fugu-grid-item .portfolio-item > a.text-decoration-none {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  text-decoration: none !important;
  outline: none !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}
html body .fugu-grid-item .portfolio-item .card.bg-cb,
html body .fugu-grid-item .portfolio-item .card.h-100,
html body .fugu-grid-item .portfolio-item div.card {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
}
html body .fugu-grid-item .portfolio-item .card-body,
html body .fugu-grid-item .portfolio-item .p-2,
html body .fugu-grid-item .portfolio-item .p-3,
html body .fugu-grid-item .portfolio-item .p-1,
html body .fugu-grid-item .portfolio-item [class*="p-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 2px 2px 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* --- 8. Title game: JANGAN terpotong kiri/kanan! text-align center + 1 line truncate elipsis --- */
html body .fugu-grid-item .portfolio-item h3,
html body .fugu-grid-item .portfolio-item h4,
html body .fugu-grid-item .portfolio-item h5,
html body .fugu-grid-item .portfolio-item .game-name,
html body .fugu-grid-item .portfolio-item .game-name-color,
html body .fugu-grid-item .portfolio-item .game-title,
html body .fugu-grid-item .portfolio-item .slot-name,
html body .fugu-grid-item .portfolio-item .slot-title,
html body .fugu-grid-item .portfolio-item .product-name,
html body .fugu-grid-item .portfolio-item .title-game,
html body .fugu-grid-item .portfolio-item > [class*="name"],
html body .fugu-grid-item .portfolio-item > [class*="title"],
html body .fugu-grid-item .portfolio-item .p-2 > h4,
html body .fugu-grid-item .portfolio-item .p-2 .game-name-color {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 4px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  font-size: 12.5px !important;
  line-height: 1.22 !important;
  min-height: 30px !important;
  max-height: 40px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --- 9. GUARD card ke-6 paling kanan tidak border hitam extra / tidak tumpang tindih --- */
html body .fugu-grid-item,
html body .fugu-grid-item-w2,
html body .fugu-grid-item-w3 {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
}

/* ==================================================================== */
/*  V.36  FIX PROVIDER MENU HIJAU VISUAL ERROR (FIRST LOAD / REFRESH)   */
/*  Akar masalah: elemen .active-bg punya BOX-SHADOW DEFAULT           */
/*  rgb(0,178,19) HIJAU CERAH yang FOUC sebelum CSS rule display:none  */
/*  Apply juga anti hijau visual KE SELURUH area swiper provider menu  */
/* ==================================================================== */

/* --- 1. PENGHANCUR ABADI .active-bg (JANGAN PERNAH NAMPAK LAGI!) --- */
html body .active-bg,
html body img.active-bg,
html body .active-bg-img,
html body img-fluid.active-bg,
html body .image-wrapper .active-bg,
html body .provider-active-bg,
html body [class*="active-bg"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  z-index: -99999 !important;
  pointer-events: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  clip-path: circle(0 at 0 0) !important;
  overflow: hidden !important;
}

/* --- 2. GUARD SELURUH image-wrapper provider: JANGAN PERNAH ada visual hijau! --- */
html body .mySwiper .image-wrapper,
html body .provider-enhanced .image-wrapper,
html body .provider-enhanced .image-wrapper.active,
html body .swiper-slide .image-wrapper,
html body .swiper-container .image-wrapper,
html body [class*="provider-enhanced"] .image-wrapper,
html body [class*="mySwiper"][class*="provider"] .image-wrapper {
  background: radial-gradient(120% 180% at 20% 20%, #e6b340 0%, #9B111E 58%, #3D2B00 100%) !important;
  background-color: #4A2D00 !important;
  border: 1.5px solid #F5C542 !important;
  border-color: #F5C542 !important;
  outline: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  transform: none !important;
  translate: 0 !important;
}
html body .mySwiper .image-wrapper:hover,
html body .mySwiper .image-wrapper:focus-visible,
html body .provider-enhanced .image-wrapper:hover,
html body .provider-enhanced .image-wrapper:focus-visible {
  border-color: #FFEC80 !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.22),
    0 0 0 1px rgba(245, 197, 66, 0.6),
    0 0 14px rgba(245, 197, 66, 0.45),
    0 0 22px rgba(155, 17, 30, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.5) !important;
}
html body .provider-enhanced .image-wrapper.active,
html body .mySwiper .image-wrapper.active {
  border-color: #FFEC80 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.3),
    0 0 0 1px rgba(255, 236, 128, 0.88),
    0 0 18px rgba(245, 197, 66, 0.55),
    0 0 30px rgba(155, 17, 30, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.45) !important;
  background: radial-gradient(120% 180% at 20% 20%, #ffd870 0%, #B71325 60%, #2A1700 100%) !important;
  filter: none !important;
}

/* --- 3. Guard hijau di tombol Pilih provider + arrow prev/next swiper --- */
html body .provider-enhanced button[type="button"][aria-label="Pilih provider"],
html body .provider-enhanced .btn-provider,
html body .swiper-slide button[aria-label="Pilih provider"] {
  background: linear-gradient(90deg, #760C17 0%, #9B111E 15%, #B71325 32%, #D12838 50%, #E48B00 75%, #F5C542 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1.8px solid #FFEC80 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 128, 0.3),
    0 0 0 1px rgba(92, 0, 2, 0.5),
    0 0 10px rgba(155, 17, 30, 0.55),
    0 0 16px rgba(245, 197, 66, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.4) !important;
  outline: none !important;
  filter: none !important;
}

/* --- 4. Hapus box-shadow hijau rgb(0,178,19) di SEMUA elemen ancestor provider area (lawan inline) --- */
html body .image-wrapper *,
html body .swiper-slide *,
html body [class*="provider-enhanced"] *,
html body .provider-thumb *,
html body .provider-item * {
  box-shadow:
    var(--no-green-shadow, 0 0 0 rgba(0,0,0,0)) !important;
  -webkit-box-shadow:
    var(--no-green-shadow, 0 0 0 rgba(0,0,0,0)) !important;
}
html body .image-wrapper[style],
html body .image-wrapper.active[style],
html body [class*="active-bg"][style],
html body .provider-thumb[style] {
  box-shadow: none !important;
  background-color: transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
  outline: none !important;
  border-color: #F5C542 !important;
  color: inherit !important;
}
html body .image-wrapper .image-wrapper-inner-bg,
html body .image-wrapper::before,
html body .image-wrapper::after {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* --- 5. Hapus warna hijau text / visual hijau BORDER-BOX area provider --- */
html body .provider-enhanced .image-wrapper span,
html body .provider-enhanced .image-wrapper .provider-label,
html body .provider-enhanced .image-wrapper div,
html body .provider-enhanced .image-wrapper p,
html body .provider-enhanced .image-wrapper small {
  color: #FFE680 !important;
  -webkit-text-fill-color: #FFE680 !important;
  text-shadow: 0 1px 0 rgba(92, 64, 0, 0.85), 0 2px 10px rgba(0,0,0,0.72) !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  background: transparent !important;
  border-color: #F5C542 !important;
  outline: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* --- EXTRA ANTI GLOW HIJAU rgb(0,178,19) VISUAL DI SELURUH PAGE KHUSUS PROVIDER SWIPER AREA --- */
html body .mySwiper.provider-enhanced,
html body .swiper.provider-enhanced,
html body [class*="provider"][class*="swiper"] {
  background: linear-gradient(180deg, rgba(22,12,2,0.95) 0%, rgba(14,7,2,0.98) 100%) !important;
  filter: none !important;
  box-shadow: inset 0 0 0 1px rgba(245,197,66,0.25) !important;
  border: 1px solid rgba(107,11,20,0.55) !important;
  outline: none !important;
}

/* ============================================================
   V.41 HERO: User SUDAH UPLOAD banner1 banner2 mobile_banner1 mobile_banner2.png di folder /banner, MAU DITAMPILKAN LAGI!
   (V.40 dulu hide semua gambar karena user complaint gambar dihapus masih muncul bekas).
   Rule baru:
   - GAMBAR HERO (banner1 banner2 png / webp / jpg) = DIIZINKAN TAMPIL normal, border-radius sesuai container.
   - PSEUDO TEXT ::before / ::after = DIHAPUS karena di dalam gambar banner user upload sudah ada text promo sendiri.
   - FALLBACK = Background GRADIENT MERAH-EMAS tetap di carousel-root, jika gambar gagal load (slot banner3 banner4 banner5 user belum upload) → nampak gradient tidak putih blank.
   - MOBILE BANNER = hanya visible di viewport ≤640px, DESKTOP BANNER = hanya visible di >640px.
   ============================================================ */

/* HANYA INNER CAROUSEL / BANNER yang jadi area HERO BENAR. Container .banner-margin = area luar dihapus styling.
   ⚡ EXTRA SPECIFICITY 2x (parent banner-margin + double class .carousel-root) supaya MENANG lawan inline rule L37-L180 di index.html HEAD.
*/
html body .container.banner-margin .carousel-root.carousel-root,
html body [class*=banner-margin] .carousel-root.carousel-root,
html body .container.banner-margin .carousel-root,
html body [class*=banner-margin] .carousel-root,
html body .carousel-root.carousel-root,
html body [class*=carousel-root][class*=carousel-root],
html body [class*=hero][class*=banner][class*=hero][class*=banner],
html body section[class*=hero][class*=hero],
html body div[class*=hero-section][class*=hero-section],
html body .banner-container.banner-container,
html body [class*=banner-container][class*=banner-container] {
  background-color: #8B0A18 !important;
  background-image: linear-gradient(135deg, #9B111E 0%, #B71325 22%, #D12838 45%, #E48B00 72%, #F5C542 100%) !important;
  background:      linear-gradient(135deg, #9B111E 0%, #B71325 22%, #D12838 45%, #E48B00 72%, #F5C542 100%) !important;
  border: 2.5px solid #FFEC80 !important;
  border-radius: 16px !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(92,0,2,0.85) !important,
              inset 0 1px 0 rgba(255,255,255,0.25) !important,
              inset 0 -3px 0 rgba(92,0,2,0.55) !important,
              0 0 0 1.5px rgba(92,0,2,0.6) !important,
              0 0 18px rgba(209,40,56,0.55) !important,
              0 0 32px rgba(245,197,66,0.45) !important,
              0 8px 22px rgba(0,0,0,0.5) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 210px !important;
  max-height: 520px !important;
  height: auto !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  outline: none !important;
  filter: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 8px auto !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* HERO WRAPPER INNER harus transparan + TIDAK FORCE DISPLAY BLOCK! (V.42 FIX: display:block * → semua slide stacked vertikal error user lihat gambar "kecil di bawah")
   Biarkan library carousel asli handle display slide active/inactive. Kita hanya override style visual (bg/border/shadow).
*/
html body .carousel-root .slider-wrapper,
html body .carousel-root .carousel,
html body .carousel-root .slider,
html body .carousel-root .carousel__item,
html body .carousel-root .carousel__slider,
html body [class*=hero][class*=banner] > *,
html body section[class*=hero] > *,
html body .banner-container > *,
html body .carousel-root > * {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  background-blend-mode: normal !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
}
html body .carousel-root .slide {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* V.44 KRITIS: slider-wrapper / carousel / slide HEIGHT TIDAK BOLEH 0px! (V.43 height 0 collapse semua gambar hilang)
   Inherit parent height, min-height wajib minimal 210px desktop, 180px mobile
*/
html body .carousel-root .slider-wrapper,
html body [class*=banner-margin] .carousel-root .slider-wrapper,
html body .container.banner-margin .carousel-root .carousel,
html body .carousel-root .carousel,
html body .carousel-root .carousel__slider,
html body .carousel-root .slider {
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  display: block !important;
  z-index: 6 !important;
  min-height: 210px !important;
  max-height: 520px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .carousel-root .slide,
html body .carousel-root .carousel__item {
  width: 100% !important;
  min-height: 210px !important;
  max-height: 520px !important;
  height: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media only screen and (max-width: 640px) {
  html body .carousel-root .slider-wrapper,
  html body .carousel-root .carousel,
  html body .carousel-root .carousel__slider,
  html body .carousel-root .slider,
  html body .carousel-root .slide {
    min-height: 180px !important;
    max-height: 320px !important;
  }
}

/* V.43 Extra Guard: Gambar HERO USER UPLOAD (banner1.png banner2.png mobile_banner*.png) = TIDAK PERNAH dihide! specificity menang lawan @media lama yang salah.
   Jika ada error slide "stuck di svg fallback", ini yang force banner user PAKSA DISPLAY:BLOCK di dalam slide active.
*/
html body .carousel-root img[src*="banner1.png"],
html body .carousel-root img[src*="banner2.png"],
html body .carousel-root img[src*="banner3.png"],
html body .carousel-root img[src*="banner4.png"],
html body .carousel-root img[src*="banner5.png"],
html body .carousel img[src*="banner1.png"],
html body .slide img[src*="banner1.png"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  z-index: 8 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  min-height: 210px !important;
  max-height: 520px !important;
  pointer-events: auto !important;
}
html body .carousel-root img[src*="mobile_banner1.png"],
html body .carousel-root img[src*="mobile_banner2.png"],
html body .carousel img[src*="mobile_banner1.png"],
html body .slide img[src*="mobile_banner1.png"] {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  z-index: 8 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  min-height: 180px !important;
  max-height: 320px !important;
  pointer-events: auto !important;
}

/* ⭐ V.41 BARU: GAMBAR BANNER HERO = DIIZINKAN TAMPIL PENUH SESUAI UPLOAD USER!
   (Sebelumnya V.40 display:none total, sekarang dimunculkan kembali dengan styling rapi border-radius)
*/
html body .carousel-root img,
html body .carousel img,
html body .slider-wrapper img,
html body .slider img,
html body .slide img,
html body .carousel__slider img,
html body .carousel__item img,
html body [class*=hero][class*=banner] img,
html body section[class*=hero] img,
html body div[class*=hero-section] img,
html body .banner-container img,
html body [class*=banner-container] img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 100% !important;
  min-height: 210px !important;
  max-height: 520px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  outline: 0 !important;
  pointer-events: auto !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  z-index: 5 !important;
  background: transparent !important;
  background-image: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
  -webkit-filter: none !important;
  border-radius: 13.5px !important;
  border-top-left-radius: 13.5px !important;
  border-top-right-radius: 13.5px !important;
  border-bottom-left-radius: 13.5px !important;
  border-bottom-right-radius: 13.5px !important;
  box-shadow: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* Guard inline style jika JS inject (contoh: IIFE inject style display:none / clip-path circle 0)
   → specificity menang lawan inline style JS
*/
html body .carousel-root img[style],
html body .carousel img[style],
html body .slide img[style],
html body .banner-container img[style],
html body [class*=hero][class*=banner] img[style] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: auto !important;
  top: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  z-index: 5 !important;
  background: transparent !important;
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 210px !important;
  max-height: 520px !important;
  border-radius: 13.5px !important;
}

/* V.41 HAPUS PSEUDO TEXT V.40 (karena di gambar banner user upload sudah ada text promo sendiri! Jangan sampai tumpang tindih double text!) */
html body .container.banner-margin .carousel-root.carousel-root::before,
html body .container.banner-margin .carousel-root::before,
html body [class*=banner-margin] .carousel-root::before,
html body .carousel-root.carousel-root::before,
html body [class*=carousel-root][class*=carousel-root]::before,
html body [class*=hero][class*=banner][class*=hero][class*=banner]::before,
html body section[class*=hero][class*=hero]::before,
html body .banner-container.banner-container::before,
html body [class*=banner-container][class*=banner-container]::before,
html body .carousel-root::before, html body .carousel::before, html body .banner-container::before,
html body .container.banner-margin .carousel-root.carousel-root::after,
html body .container.banner-margin .carousel-root::after,
html body [class*=banner-margin] .carousel-root::after,
html body .carousel-root.carousel-root::after,
html body [class*=carousel-root][class*=carousel-root]::after,
html body [class*=hero][class*=banner][class*=hero][class*=banner]::after,
html body section[class*=hero][class*=hero]::after,
html body .banner-container.banner-container::after,
html body [class*=banner-container][class*=banner-container]::after,
html body .carousel-root::after, html body .carousel::after, html body .banner-container::after {
  content: "" !important;
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
  z-index: -99999 !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  clip-path: circle(0) !important;
  -webkit-clip-path: circle(0) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* V.41 RAPIHKAN SISA RULE TEXT H1-H6 DAN P/SPAN DI DALAM HERO AREA:
   Kalau ada text node native TANPA gambar (fallback error slide), tetap format emas/putih. Tapi user upload gambar → text ini jarang muncul.
*/
html body .carousel-root h1, html body .carousel-root h2, html body .carousel-root h3, html body .carousel-root h4, html body .carousel-root h5, html body .carousel-root h6,
html body .carousel h1, html body .carousel h2, html body .carousel h3, html body .carousel h4, html body .carousel h5, html body .carousel h6,
html body .slider-wrapper h1, html body .slider-wrapper h2, html body .slider-wrapper h3, html body .slider-wrapper h4, html body .slider-wrapper h5, html body .slider-wrapper h6 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 40px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 2px 0 rgba(92, 0, 2, 0.85), 0 4px 16px rgba(0,0,0,0.75), 0 0 10px rgba(92,0,2,0.55) !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 24px 12px 8px 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
}

html body .carousel-root p, html body .carousel-root span, html body .carousel-root small, html body .carousel-root div[class*=promo], html body .carousel-root .banner-subtitle, html body .carousel-root .promo-label,
html body .slide p, html body .slide span, html body .slide small, html body .slide .banner-subtitle, html body .slide .promo-label {
  color: #FFEC80 !important;
  -webkit-text-fill-color: #FFEC80 !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  margin: 8px auto 24px auto !important;
  padding: 0 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  text-shadow: 0 1px 0 rgba(92, 64, 0, 0.9), 0 2px 10px rgba(0,0,0,0.72) !important;
  position: relative !important;
  z-index: 5 !important;
  display: block !important;
  background: transparent !important;
}

/* Carousel arrow / dots / status: SEMBUNYIKAN, karena gambar banner user promo tidak butuh indikator. */
html body .carousel-root .swiper-button-prev, html body .carousel-root .swiper-button-next,
html body .carousel-root .control-arrow, html body .carousel-root .carousel__arrow,
html body .carousel-root .control-dots, html body .carousel-root .carousel-status,
html body .carousel-root .carousel__back-button, html body .carousel-root .carousel__next-button,
html body .carousel .control-arrow, html body .carousel .carousel__arrow,
html body .carousel .control-dots, html body .carousel .carousel-status,
html body .banner-container .control-arrow, html body .banner-container .swiper-button-prev, html body .banner-container .swiper-button-next {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -99999 !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  clip-path: circle(0) !important;
  height: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* V.41 Mobile breakpoint banner: DESKTOP banner = visible DESKTOP, MOBILE banner = visible MOBILE.
   User upload mobile_banner1.png & mobile_banner2.png khusus ukuran HP.
   Strategy: img yang src mengandung /mobile_banner → display:none di desktop, visible di <640px.
   img yang src mengandung /banner (TANPA mobile_) → display:none di <640px, visible di >641px.
*/
@media only screen and (min-width: 641px) {
  html body .carousel-root img[src*="mobile_banner"],
  html body .carousel img[src*="mobile_banner"],
  html body .slide img[src*="mobile_banner"],
  html body .banner-container img[src*="mobile_banner"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    clip-path: circle(0) !important;
    z-index: -99999 !important;
  }
}

@media only screen and (max-width: 640px) {
  html body .carousel-root img[src*="banner/"]:not([src*="mobile_banner"]),
  html body .carousel img[src*="banner/"]:not([src*="mobile_banner"]),
  html body .slide img[src*="banner/"]:not([src*="mobile_banner"]),
  html body .banner-container img[src*="banner/"]:not([src*="mobile_banner"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    clip-path: circle(0) !important;
    z-index: -99999 !important;
  }
  html body .carousel-root,
  html body .carousel,
  html body .banner-container {
    min-height: 180px !important;
    max-height: 320px !important;
    border-width: 2px !important;
    border-radius: 14px !important;
  }
  html body .carousel-root img,
  html body .carousel img,
  html body .slide img,
  html body .banner-container img {
    min-height: 180px !important;
    max-height: 320px !important;
    border-radius: 12px !important;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  html body .carousel-root,
  html body .carousel,
  html body .banner-container {
    min-height: 190px !important;
    max-height: 400px !important;
  }
  html body .carousel-root img,
  html body .carousel img,
  html body .slide img,
  html body .banner-container img {
    min-height: 190px !important;
    max-height: 400px !important;
  }
}