/* GAN89 Moonlit Gold theme — visual overrides only; structural CSS remains intact. */
:root {
  --gan-void: #03060b;
  --gan-night: #07111f;
  --gan-panel: rgba(8, 16, 29, .92);
  --gan-panel-soft: rgba(15, 27, 45, .86);
  --gan-gold: #e8b84a;
  --gan-gold-bright: #ffe7a0;
  --gan-gold-deep: #9b6518;
  --gan-moon: #f4f7ff;
  --gan-silver: #b9c5d8;
  --gan-line: rgba(232, 184, 74, .28);
  --gan-glow: 0 0 0 1px rgba(232,184,74,.12), 0 18px 48px rgba(0,0,0,.42);
  --brand-500: #dca636;
  --brand-600: #b87920;
  --pd-bg: var(--gan-panel);
  --pd-border: var(--gan-line);
  --pd-soft: rgba(255,255,255,.045);
  --pd-soft-border: rgba(232,184,74,.18);
  --pd-muted: #aebbd0;
  --pd-dark: #f5f7fc;
  --pd-accent: var(--gan-gold);
  --pd-shadow: var(--gan-glow);
}

html { color-scheme: dark; background: var(--gan-void); }

body {
  color: var(--gan-moon);
  background:
    radial-gradient(circle at 84% 5%, rgba(131,163,220,.16), transparent 25rem),
    radial-gradient(circle at 10% 25%, rgba(232,184,74,.08), transparent 28rem),
    linear-gradient(145deg, var(--gan-void) 0%, var(--gan-night) 48%, #03070d 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image:
    radial-gradient(circle, rgba(255,231,160,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(190,210,244,.5) 0 1px, transparent 1.4px);
  background-position: 0 0, 43px 61px;
  background-size: 113px 113px, 173px 173px;
}

.topbar {
  color: #f2d993;
  background: linear-gradient(90deg, #030507, #101727 52%, #030507);
  border-bottom: 1px solid var(--gan-line);
}
.topbar a { color: var(--gan-gold-bright); }

.navbar,
.navbar-logo {
  background: rgba(4, 9, 16, .9) !important;
  border-color: var(--gan-line) !important;
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 10px 34px rgba(0,0,0,.32);
}
.navbar a, .navbar button, .nav-link { color: #e8edf7 !important; }
.navbar a:hover, .navbar button:hover, .nav-link:hover { color: var(--gan-gold-bright) !important; }
.logo img, .logo-mobile img { filter: drop-shadow(0 0 12px rgba(232,184,74,.38)); }

.product-single {
  --pd-bg: var(--gan-panel);
  --pd-dark: var(--gan-moon);
  --pd-muted: var(--gan-silver);
  --pd-accent: var(--gan-gold);
}
.pd-breadcrumb, .pd-breadcrumb .current { color: #8492aa; }
.pd-breadcrumb a { color: #e7bd60; }

.pd-media-card,
.pd-info-card,
.pd-side-card,
.pd-installment-card,
.pd-installment-card2,
.pd-full-description,
.pd-related-full,
.pd-related-card,
.pd-sticky-header,
.review-card,
.modal-content {
  color: var(--gan-moon) !important;
  background: linear-gradient(145deg, rgba(15,27,45,.94), rgba(5,11,20,.97)) !important;
  border-color: var(--gan-line) !important;
  box-shadow: var(--gan-glow) !important;
}

.pd-media-card,
.pd-info-card,
.pd-side-card,
.pd-full-description,
.pd-related-card,
.artikel-glow-KT,
.KT-faq-rainbow,
.tnt-review-mecha {
  position: relative;
  overflow: hidden;
}

.pd-media-card::before,
.pd-info-card::before,
.artikel-glow-KT::before,
.KT-faq-rainbow::before,
.tnt-review-mecha::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -65%;
  width: 42%;
  pointer-events: none;
  opacity: .34;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,231,160,.14), transparent);
  animation: gan-shimmer 9s ease-in-out infinite;
}

.pd-main-image,
.pd-thumb-btn,
.pd-mobile-slider {
  background: #090f1a !important;
  border-color: rgba(232,184,74,.25) !important;
}
.pd-main-image img { filter: saturate(.94) contrast(1.04); }
.pd-thumb-btn.active {
  border-color: var(--gan-gold) !important;
  box-shadow: 0 0 0 2px rgba(232,184,74,.16), 0 0 20px rgba(232,184,74,.22) !important;
}

.pd-title, .pd-sticky-title, .pd-full-desc-title, .pd-related-title,
.pd-side-card h3, .artikel-glow-KT h1, .KT-faq-top h2, .tnt-header h2 {
  color: var(--gan-moon) !important;
  text-shadow: 0 0 9px rgba(255,231,160,.34), 0 2px 18px rgba(232,184,74,.22) !important;
}
.pd-price-current, .pd-related-card .price, .pd-related-card .price .final {
  color: var(--gan-gold-bright) !important;
  text-shadow: 0 0 18px rgba(232,184,74,.22);
}
.pd-short-desc, .pd-full-desc-body, .pd-side-card li, .pd-related-card h3,
.pd-related-card .sold, .pd-extra-meta, .pd-variant-summary { color: #c6d0df !important; }

.btn-add-cart, .pd-sticky-btn-buy, .mf-buy, .ft-wa-btn,
.toast .btn.primary, .modal-btn-primary {
  color: #160e02 !important;
  background: linear-gradient(115deg, #9f671b 0%, #f7d477 42%, #bd7c22 100%) !important;
  border: 1px solid #ffe38b !important;
  box-shadow: 0 8px 24px rgba(191,126,32,.26), inset 0 1px rgba(255,255,255,.38) !important;
}
.btn-buy, .pd-sticky-btn-cart, .mf-cart, .bank-tab.active, .inst-tab.active {
  color: var(--gan-gold-bright) !important;
  background: rgba(232,184,74,.09) !important;
  border-color: rgba(232,184,74,.62) !important;
}
.btn-add-cart:hover, .btn-buy:hover, .ft-wa-btn:hover, .pd-sticky-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

input, select, textarea, .v-chip, .bank-tab, .tenor-btn, .inst-month-item,
.pd-extra-meta, .pay-logos span, .stock-badge, .pd-related-card .sold {
  color: #e6ebf4 !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(232,184,74,.2) !important;
}
input:focus, select:focus, textarea:focus, .v-chip.selected {
  border-color: var(--gan-gold) !important;
  box-shadow: 0 0 0 3px rgba(232,184,74,.12) !important;
}

.artikel-glow-KT, .KT-faq-rainbow, .tnt-review-mecha {
  color: #d7deea !important;
  background:
    radial-gradient(circle at 90% 0, rgba(123,153,207,.13), transparent 24rem),
    linear-gradient(145deg, rgba(12,23,39,.96), rgba(4,9,16,.98)) !important;
  border: 1px solid var(--gan-line) !important;
  box-shadow: var(--gan-glow) !important;
}
.artikel-glow-KT a { color: var(--gan-gold-bright) !important; }
.KT-rainbow-item {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(232,184,74,.19) !important;
}
.KT-rainbow-item button { color: #f1d894 !important; }
.KT-rainbow-answer, .KT-rainbow-answer p { color: #c7d0de !important; }
.KT-faq-top span {
  color: var(--gan-gold-bright) !important;
  background: rgba(232,184,74,.07) !important;
  border-color: rgba(255,231,160,.42) !important;
  box-shadow: inset 0 0 14px rgba(232,184,74,.12), 0 0 16px rgba(232,184,74,.08) !important;
}
.KT-rainbow-item button {
  color: #fff0be !important;
  background: linear-gradient(105deg, rgba(112,70,14,.94), rgba(191,132,35,.96) 52%, rgba(119,73,13,.96)) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
}
.KT-rainbow-item button:hover,
.KT-rainbow-item.active button {
  background: linear-gradient(105deg, #805017, #d6a43f 52%, #875417) !important;
}
.KT-rainbow-item button::after,
.KT-rainbow-item.active button::after {
  color: #170f03 !important;
  background: linear-gradient(135deg,#ffe49a,#bd7d20) !important;
  box-shadow: 0 0 15px rgba(255,226,139,.48), inset 0 -4px 8px rgba(98,58,8,.2) !important;
}
.tnt-slide { background: rgba(255,255,255,.035) !important; border-color: var(--gan-line) !important; }
.tnt-name { color: var(--gan-gold-bright) !important; }
.tnt-comment { color: #d7deea !important; }

/* Override legacy red accents loaded by late page-level component styles. */
.artikel-glow-KT {
  border-color: rgba(232,184,74,.58) !important;
  box-shadow: 0 0 24px rgba(232,184,74,.20), 0 0 52px rgba(155,101,24,.13), 0 20px 45px rgba(0,0,0,.34) !important;
}
.artikel-glow-KT::before {
  border-color: rgba(255,231,160,.28) !important;
  box-shadow: inset 0 0 18px rgba(232,184,74,.10) !important;
}
.artikel-glow-KT h1, .artikel-glow-KT h2 {
  color: var(--gan-gold-bright) !important;
  text-shadow: 0 0 8px rgba(232,184,74,.42), 0 0 20px rgba(155,101,24,.28) !important;
}
.artikel-glow-KT a {
  color: var(--gan-gold-bright) !important;
  text-shadow: 0 0 8px rgba(232,184,74,.35) !important;
}
.tnt-review-mecha {
  border-color: rgba(232,184,74,.5) !important;
  animation: gan-review-gold 3.4s ease-in-out infinite !important;
}
.tnt-review-mecha::before {
  background: repeating-linear-gradient(to bottom, rgba(232,184,74,.045), rgba(232,184,74,.045) 1px, transparent 2px, transparent 4px) !important;
}
.tnt-header h2, .tnt-name {
  color: var(--gan-gold-bright) !important;
  text-shadow: 0 0 10px rgba(232,184,74,.42), 0 0 20px rgba(155,101,24,.25) !important;
}
.tenor-badge, .KT-rainbow-item.active button::after {
  color: #160e02 !important;
  background: linear-gradient(135deg,#f5d477,#a96b19) !important;
  box-shadow: 0 3px 12px rgba(232,184,74,.3) !important;
}

.sbo-top-fixed-footer {
  color: var(--gan-gold-bright) !important;
  background: linear-gradient(90deg, #020407 0%, #0b101a 48%, #171006 100%) !important;
  border-top-color: rgba(232,184,74,.72) !important;
  box-shadow: 0 -8px 28px rgba(0,0,0,.56), 0 -1px 14px rgba(232,184,74,.22) !important;
}
.sbo-top-fixed-footer::before {
  background: repeating-linear-gradient(to right, rgba(232,184,74,.06), rgba(232,184,74,.06) 1px, transparent 1px, transparent 8px) !important;
}
.sbo-top-fixed-footer::after {
  background: linear-gradient(90deg, transparent, rgba(255,231,160,.23), transparent) !important;
}
.sbo-top-fixed-footer a {
  color: #d9ad46 !important;
  text-shadow: 0 0 9px rgba(232,184,74,.24) !important;
}
.sbo-top-fixed-footer a:hover, .sbo-top-fixed-footer a.is-active {
  color: var(--gan-gold-bright) !important;
  background: rgba(232,184,74,.09) !important;
  box-shadow: inset 0 0 0 1px rgba(232,184,74,.25) !important;
  filter: drop-shadow(0 0 12px rgba(232,184,74,.18)) !important;
}
.sbo-top-fixed-footer img,
.sbo-top-fixed-footer a:hover img,
.sbo-top-fixed-footer a.is-active img {
  filter: drop-shadow(0 0 11px rgba(232,184,74,.56)) !important;
}
.sbo-top-fixed-footer .tada {
  color: #fff3c5 !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,218,112,.55), transparent 70%), rgba(232,184,74,.09) !important;
  border-color: rgba(255,225,140,.55) !important;
  box-shadow: 0 0 20px rgba(232,184,74,.45), inset 0 0 16px rgba(255,225,140,.13) !important;
}
.sbo-top-fixed-footer .tada img { filter: drop-shadow(0 0 16px rgba(255,222,126,.7)) !important; }
.sbo-top-fixed-footer .hud-corner {
  border-color: rgba(255,225,140,.55) !important;
  filter: drop-shadow(0 0 10px rgba(232,184,74,.28)) !important;
}
.sbo-top-fixed-footer .tada::before {
  background: radial-gradient(circle, rgba(232,184,74,.2), transparent 70%), radial-gradient(circle, rgba(255,231,160,.08), transparent 72%) !important;
}

.gan89-container, .cyber-mecha {
  color: #edf1f8 !important;
  background: radial-gradient(circle at top, rgba(38,49,68,.96), rgba(5,10,18,.98) 72%) !important;
  border-color: rgba(232,184,74,.52) !important;
  box-shadow: 0 0 24px rgba(232,184,74,.22), inset 0 0 20px rgba(232,184,74,.07) !important;
}
.gan89-header, .gan89-controls label, .gan89-disclaimer,
.cyber-mecha .pd-full-desc-title, .mecha-header h3, .glow, .glow-strong {
  color: var(--gan-gold-bright) !important;
  text-shadow: 0 0 10px rgba(232,184,74,.4) !important;
}
.gan89-controls select, .gan89-controls input, .gan89-result,
.mecha-image img, .final-line {
  border-color: rgba(232,184,74,.42) !important;
  background: rgba(232,184,74,.055) !important;
  box-shadow: 0 0 16px rgba(232,184,74,.12) !important;
}
#btnGenerate {
  color: #160e02 !important;
  background: linear-gradient(135deg,#f5d477,#a96b19) !important;
  box-shadow: 0 0 16px rgba(232,184,74,.34) !important;
}
#gan89AltList div { background: rgba(232,184,74,.07) !important; border-left-color: var(--gan-gold) !important; }
.mecha-content p, .final-line { color: #d8dfeb !important; }

/* Specific GAN89 simulator overrides: legacy component CSS uses high-specificity red rules. */
.togel-machine-v3 {
  color: #e8edf5 !important;
  background: radial-gradient(circle at 15% 0%, rgba(232,184,74,.16), transparent 48%), radial-gradient(circle at 85% 100%, rgba(117,143,188,.13), transparent 55%), linear-gradient(135deg,#07101c,#03070d) !important;
  border-color: rgba(232,184,74,.58) !important;
  box-shadow: inset 0 0 20px rgba(232,184,74,.08), 0 0 22px rgba(232,184,74,.24) !important;
}
.togel-machine-v3::before {
  background: linear-gradient(120deg, transparent 40%, rgba(255,231,160,.12), transparent 65%) !important;
}
.togel-title-v3 {
  color: var(--gan-gold-bright) !important;
  text-shadow: 0 0 8px rgba(232,184,74,.44), 0 0 18px rgba(155,101,24,.25) !important;
}
.togel-controls-v3, .togel-main-result-v3, .togel-alts-v3 {
  background: rgba(7,13,23,.84) !important;
  border-color: rgba(232,184,74,.45) !important;
  box-shadow: inset 0 0 14px rgba(232,184,74,.08) !important;
}
.togel-controls-v3 label, .togel-status-v3, .k-small, .k-detail,
.togel-alts-title-v3, .togel-alt-item .p, .togel-alt-item .r {
  color: #e6bc5b !important;
}
.togel-controls-v3 select, .togel-controls-v3 input {
  color: #f2f5fa !important;
  background: #0b1422 !important;
  border-color: rgba(232,184,74,.48) !important;
  box-shadow: inset 0 0 10px rgba(232,184,74,.1) !important;
}
#btnTogelRandom {
  color: #160e02 !important;
  background: linear-gradient(115deg,#a66b18,#f5d477 48%,#aa6d19) !important;
  border: 1px solid #ffe49a !important;
  box-shadow: 0 0 18px rgba(232,184,74,.34) !important;
}
.togel-highlight-box { border-bottom-color: rgba(232,184,74,.24) !important; }
.v-rtp-huge { color: var(--gan-gold-bright) !important; text-shadow: 0 0 12px rgba(232,184,74,.36) !important; }
.togel-alt-item {
  background: rgba(232,184,74,.055) !important;
  border-left-color: var(--gan-gold) !important;
}
.togel-tip-v3, .togel-note-v3, .k, .k-rtp, .provider-info,
.v-small, .v-detail, .togel-alt-item .g { color: #d6deea !important; }

/* Gold identity banner replacing the remaining legacy red banner. */
.qoala-banner {
  color: #fff4ca !important;
  background: linear-gradient(120deg,#6f4510,#c48a28 48%,#8b5915) !important;
  border: 1px solid rgba(255,229,150,.5) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.2) !important;
}
.qoala-cta, .qoala-cta:hover {
  color: #fff5d2 !important;
  background: rgba(10,13,18,.25) !important;
  border-color: rgba(255,231,160,.48) !important;
}

/* Readability fixes visible on dark cards. */
.inst-month-item .amount { color: #dce5f2 !important; opacity: 1 !important; }
.inst-month-item .tenor-badge { color: #171005 !important; }
.login-btn, .icon-btn {
  color: #f3d98d !important;
  background: linear-gradient(145deg,rgba(21,31,46,.98),rgba(7,13,22,.98)) !important;
  border-color: rgba(232,184,74,.42) !important;
}
.login-btn .login-text { color: #f3d98d !important; opacity: 1 !important; }

.tnt-slider { height: 150px !important; min-height: 150px !important; overflow: hidden; }
.tnt-slide { inset: 0 !important; height: auto !important; }
.tnt-name { line-height: 1.35 !important; }
.tnt-comment { color: #e1e7f0 !important; line-height: 1.55 !important; }

@media (max-width: 640px) {
  .tnt-slider { height: 190px !important; min-height: 190px !important; }
}

@keyframes gan-review-gold {
  0%, 100% { box-shadow: 0 0 12px rgba(232,184,74,.2), inset 0 0 18px rgba(232,184,74,.05); }
  50% { box-shadow: 0 0 28px rgba(232,184,74,.34), inset 0 0 24px rgba(232,184,74,.09); }
}

.site-footer {
  color: #b9c4d5 !important;
  background: linear-gradient(180deg, #07101d, #020407) !important;
  border-top: 1px solid var(--gan-line) !important;
}
.site-footer h4, .site-footer .company { color: #f0d58b !important; }
.site-footer a { color: #cbd4e2 !important; }
.site-footer a:hover { color: var(--gan-gold-bright) !important; }

.bottom-nav {
  background: rgba(4,9,16,.94) !important;
  border-color: var(--gan-line) !important;
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 -12px 30px rgba(0,0,0,.38) !important;
}
.bottom-nav-item { color: #9da9bb !important; }
.bottom-nav-item.active, .bottom-nav-item:hover { color: var(--gan-gold-bright) !important; }
.bottom-nav-center-icon { background: linear-gradient(135deg,#9f671b,#f4d06f,#ad6d18) !important; }

@keyframes gan-shimmer {
  0%, 24% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  36% { opacity: .38; }
  55%, 100% { transform: translateX(410%) skewX(-18deg); opacity: 0; }
}
@keyframes gan-glow-breathe {
  0%, 100% { box-shadow: 0 8px 24px rgba(191,126,32,.20), inset 0 1px rgba(255,255,255,.3); }
  50% { box-shadow: 0 10px 34px rgba(232,184,74,.38), 0 0 18px rgba(232,184,74,.12), inset 0 1px rgba(255,255,255,.45); }
}
.btn-add-cart, .ft-wa-btn { animation: gan-glow-breathe 3.8s ease-in-out infinite; }

@media (hover:hover) {
  .pd-related-card, .pd-side-card, .KT-rainbow-item, .tnt-slide {
    transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease;
  }
  .pd-related-card:hover, .pd-side-card:hover, .KT-rainbow-item:hover, .tnt-slide:hover {
    transform: translateY(-4px);
    border-color: rgba(232,184,74,.48) !important;
    box-shadow: 0 20px 42px rgba(0,0,0,.42), 0 0 24px rgba(232,184,74,.08) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media print {
  body { color: #111 !important; background: #fff !important; }
  body::before { display: none !important; }
}