/* ============================================================
GOLD PREMIUM THEME OVERRIDE
Tambahkan file ini SETELAH semua CSS di
Contoh:
============================================================ */
:root {
/* ── GOLD PALETTE ── */
--gold-bright: #FFD700;
--gold-main: #D4AF37;
--gold-soft: #C9A84C;
--gold-dark: #8B6914;
--gold-deep: #5A4100;
--gold-shine: #FFF0A0;
--gold-gradient: linear-gradient(to right, #8B6914 0%, #D4AF37 40%, #FFD700 60%, #D4AF37 80%, #8B6914 100%);
--gold-gradient-v: linear-gradient(to bottom, #FFD700 0%, #D4AF37 50%, #8B6914 100%);
--gold-gradient-btn: linear-gradient(135deg, #C9A84C 0%, #FFD700 45%, #D4AF37 55%, #8B6914 100%);
/* ── DARK BACKGROUND PALETTE ── */
--bg-black: #050300;
--bg-dark: #0D0900;
--bg-card: #120D02;
--bg-surface: #1A1200;
--bg-elevated: #241900;
--bg-overlay: rgba(5, 3, 0, 0.95);
/* ── TEXT ── */
--text-gold: #D4AF37;
--text-gold-bright: #FFD700;
--text-muted: #8B7A3A;
--text-white: #FFF8E7;
/* ── BORDER ── */
--border-gold: #8B6914;
--border-gold-bright:#D4AF37;
--border-glow: 0 0 8px #D4AF3766, 0 0 20px #D4AF3733;
}
/* ════════════════════════════════════════
BODY & GLOBAL BACKGROUND
════════════════════════════════════════ */
body {
background-color: var(--bg-dark) !important;
}
/* ════════════════════════════════════════
TOPBAR
════════════════════════════════════════ */
.topbar-container {
background: var(--bg-black) !important;
border-bottom: 1px solid var(--gold-dark) !important;
}
.topbar-left-section .topbar-item a,
.topbar-left-section .topbar-item span {
color: var(--gold-soft) !important;
}
.topbar-left-section .topbar-item a:hover {
color: var(--gold-bright) !important;
}
/* Language dropdown */
.language-selector {
background: var(--bg-surface) !important;
border: 1px solid var(--border-gold) !important;
}
.language-selector li:hover {
background: var(--gold-deep) !important;
}
/* ════════════════════════════════════════
LOGIN / REGISTER BUTTON
════════════════════════════════════════ */
.login-button {
background: transparent !important;
border: 1px solid var(--gold-main) !important;
color: var(--gold-main) !important;
border-radius: 4px;
transition: all 0.3s ease;
}
.login-button:hover {
background: var(--gold-deep) !important;
color: var(--gold-bright) !important;
}
.register-button {
background: var(--gold-gradient-btn) !important;
color: #0D0900 !important;
font-weight: 700 !important;
border: none !important;
border-radius: 4px;
text-shadow: none !important;
transition: all 0.3s ease;
box-shadow: 0 2px 10px #D4AF3766 !important;
}
.register-button:hover {
filter: brightness(1.15) !important;
box-shadow: 0 4px 20px #FFD70099 !important;
}
/* ════════════════════════════════════════
SITE HEADER (NAVBAR BG)
════════════════════════════════════════ */
.site-header {
background: linear-gradient(to right, #0D0900 0%, #1A1200 50%, #0D0900 100%) !important;
border-bottom: 1px solid var(--border-gold) !important;
box-shadow: 0 2px 15px #D4AF3733 !important;
}
/* ════════════════════════════════════════
TOP MENU NAV
════════════════════════════════════════ */
.top-menu > li > a {
color: var(--text-white) !important;
transition: color 0.2s ease;
}
.top-menu > li > a:hover,
.top-menu > li[data-active="true"] > a {
color: var(--gold-bright) !important;
}
.top-menu > li::before,
.top-menu > li .before-bg {
background: var(--gold-dark) !important;
}
/* Glyphicon chevron warna gold */
.top-menu .glyphicon,
.menu-slide .glyphicon {
color: var(--gold-main) !important;
}
/* Dropdown game list container */
.top-menu .game-list-container {
background: rgba(13, 9, 0, 0.98) !important;
border-top: 2px solid var(--gold-main) !important;
border-color: var(--gold-dark) !important;
}
.top-menu .games-container li a:hover {
background: rgba(212, 175, 55, 0.15) !important;
}
/* ════════════════════════════════════════
ANNOUNCEMENT BAR
════════════════════════════════════════ */
.announcement-outer-container {
background: var(--bg-black) !important;
color: var(--gold-soft) !important;
border-bottom: 1px solid var(--gold-deep) !important;
}
.announcement-container [data-section="announcements"] {
background: var(--bg-black) !important;
}
/* ════════════════════════════════════════
HOME INNER CONTAINER
════════════════════════════════════════ */
.home-inner-container,
.home-outer-container {
background: transparent !important;
}
/* ════════════════════════════════════════
PROGRESSIVE JACKPOT
════════════════════════════════════════ */
.home-progressive-jackpot {
background: linear-gradient(#1A1200, #2E1F00, #1A1200) !important;
}
.home-progressive-jackpot .outer-container {
background: #000 !important;
}
.home-progressive-jackpot .inner-container {
background: linear-gradient(#5A4100, #20150000) !important;
}
.home-progressive-jackpot .border-container {
background: rgba(0,0,0,0.6) !important;
border: 1px solid var(--gold-main) !important;
box-shadow: var(--border-glow) !important;
}
.home-progressive-jackpot .jackpot-container {
background: var(--gold-gradient-v) !important;
box-shadow: 0px 5px 15px #D4AF3780 !important;
}
.home-progressive-jackpot .jackpot-inner-container {
background: #000 !important;
}
.home-progressive-jackpot .jackpot-border-container {
border-color: var(--gold-dark) !important;
text-shadow: 0px 2px 22px #FFD700 !important;
}
#progressive_jackpot,
.jackpot-currency {
color: var(--gold-bright) !important;
text-shadow: 0 0 15px #FFD70099 !important;
}
.jackpot-play-text,
.jackpot-play-text label {
color: var(--gold-main) !important;
}
/* ════════════════════════════════════════
POPULAR GAME TITLE
════════════════════════════════════════ */
.popular-game-title-container {
color: var(--text-white) !important;
}
.popular-game-title-container i {
border-bottom-color: var(--gold-dark) !important;
border-top-color: var(--bg-dark) !important;
}
.popular-game-title-container a {
background: var(--gold-deep) !important;
color: var(--gold-main) !important;
border: 1px solid var(--border-gold) !important;
transition: all 0.2s ease;
}
.popular-game-title-container a:hover {
background: var(--gold-dark) !important;
color: var(--gold-bright) !important;
}
/* Game list container bg */
.popular-game-title-container + .game-list-container,
.popular-game-title-container ~ .game-list-container {
background: #0A0700 !important;
border-color: var(--border-gold) !important;
}
/* ════════════════════════════════════════
GAME ITEMS
════════════════════════════════════════ */
.game-item .wrapper-container {
background: linear-gradient(to bottom, #1A1200 0%, #0D0900 100%) !important;
}
.game-item .link-container a.play-now,
.play-now {
background: var(--gold-gradient-btn) !important;
color: #0D0900 !important;
font-weight: 700 !important;
text-shadow: none !important;
border: none !important;
}
.game-item .link-container a.play-now:hover {
filter: brightness(1.2) !important;
}
.game-item .game-name,
.game-item .provider-name {
color: var(--text-white) !important;
}
.game-item .provider-name {
color: var(--gold-main) !important;
}
/* Large game list */
.large-game-list-cntr {
background: rgba(26, 18, 0, 0.74) !important;
}
.large-game-list-cntr .section-heading h4 {
color: var(--text-white) !important;
}
.large-game-list-cntr .play-now {
background: var(--gold-soft) !important;
color: #0D0900 !important;
}
.large-game-list-cntr .play-now:hover {
background: var(--gold-bright) !important;
}
/* ════════════════════════════════════════
DOWNLOAD APK SECTION
════════════════════════════════════════ */
.download-apk-container {
background-color: var(--bg-dark) !important;
}
.download-apk {
color: var(--text-white) !important;
}
.download-apk .h2 span,
.download-apk-section i {
color: var(--gold-main) !important;
}
/* ════════════════════════════════════════
FOOTER
════════════════════════════════════════ */
.site-footer {
background: var(--bg-black) !important;
border-top: 1px solid var(--border-gold) !important;
}
.footer-separator {
border-color: var(--gold-dark) !important;
}
/* Footer headings */
.site-footer h4,
.footer-sitemap-section h4,
.footer-section-title,
.site-info-img-header h4 {
color: var(--gold-main) !important;
}
/* Footer links */
.footer-links li a,
.site-info-inner-container .footer-links a,
.site-info-inner-cntr .footer-links a {
color: var(--text-muted) !important;
transition: color 0.2s ease;
}
.footer-links li a:hover {
color: var(--gold-bright) !important;
}
/* Footer description text */
.footer-description-section,
.footer-description-section p,
.footer-description-section span {
color: var(--text-muted) !important;
}
.footer-description-section a {
color: var(--gold-main) !important;
}
.footer-description-section a:hover {
color: var(--gold-bright) !important;
}
/* Provider container */
.provider-container {
border-color: var(--border-gold) !important;
}
.provider-container legend {
color: var(--gold-main) !important;
}
/* Copyright */
.footer-copyright-section .copyright {
color: var(--text-muted) !important;
}
/* Featured product */
.footer-featured-product-section {
background: var(--bg-card) !important;
}
.site-info-description p {
color: #8B7A3A !important;
}
/* Banking section */
.banking-footer-section {
background: var(--bg-card) !important;
}
/* ════════════════════════════════════════
MODALS
════════════════════════════════════════ */
.modal-header {
background: linear-gradient(to right, #0D0900 0%, #1A1200 100%) !important;
border-bottom: 1px solid var(--border-gold) !important;
}
.modal-header .modal-title {
color: var(--gold-main) !important;
}
.modal-content {
background: var(--bg-surface) !important;
border: 1px solid var(--border-gold) !important;
box-shadow: 0 0 30px #D4AF3733 !important;
}
.modal-body {
background: var(--bg-surface) !important;
color: var(--text-white) !important;
}
.modal-footer {
background: var(--bg-card) !important;
border-top: 1px solid var(--gold-deep) !important;
}
.modal-footer .btn-primary {
background: var(--gold-gradient-btn) !important;
color: #0D0900 !important;
font-weight: 700 !important;
border: none !important;
}
.modal-footer .btn-secondary {
color: var(--gold-main) !important;
border-color: var(--gold-main) !important;
background: transparent !important;
}
/* ════════════════════════════════════════
SITE CONTENT / MAIN BG
════════════════════════════════════════ */
[data-container-background="home"] {
background-color: var(--bg-dark) !important;
}
/* ════════════════════════════════════════
THEME COLOR VARIABLES OVERRIDE
(menimpa semua CSS variable ungu ke gold)
════════════════════════════════════════ */
:root {
--primary-button-bg: #C9A84C;
--theme-text-color: #D4AF37;
--site-header-bg: linear-gradient(to right, #0D0900 0%, #1A1200 100%);
--site-header-bs: inset 0px 2px 1px rgba(255, 215, 0, 0.1);
--topbar-cntr-bg: #050300;
--topbar-cntr-border: #2E1F00;
--topbar-left-section-item-color: #C9A84C;
--topbar-left-section-item-a-color: #C9A84C;
--topbar-left-section-item-a-hover-color: #FFD700;
--topbar-left-section-lang-sel-bg: #0D0900;
--topbar-left-section-lang-sel-li-bg: #1A1200;
--topbar-left-section-lang-sel-li-hover-bg: #C9A84C;
--top-menu-li-color: #FFF8E7;
--top-menu-li-before-bg: #5A4100;
--top-menu-li-true-hover-color: #FFD700;
--top-menu-game-list-cntr-bg: rgba(13, 9, 0, 0.98);
--top-menu-game-list-cntr-border: #8B6914;
--top-menu-games-cntr-li-bg: linear-gradient(180deg, rgba(0,0,0,0) 25%, #8B6914 100%);
--top-menu-games-cntr-li-hover-a-bg: rgba(90, 65, 0, 0.3);
--top-menu-games-cntr-li-a-img-bg: linear-gradient(180deg, #0A0700 25%, #2E1F00 100%);
--login-panel-btn-bg: #2E1F00;
--login-panel-btn-hover-bg: #1A1200;
--login-panel-reg-btn-bg: linear-gradient(to right, #C9A84C 0%, #8B6914 100%);
--login-panel-reg-btn-hover-bg: linear-gradient(to right, #8B6914 0%, #C9A84C 100%);
--announcement-outer-cntr-bg: #050300;
--announcement-outer-cntr-color: #C9A84C;
--announcement-cntr-data-section-announcements-bg: #0D0900;
--home-progressive-jackpot-bg: linear-gradient(#1A1200, #2E1F00, #1A1200);
--home-progressive-jackpot-border-cntr-border: #D4AF37;
--home-progressive-jackpot-jackpot-cntr-bg: linear-gradient(#D4AF37, #000);
--home-progressive-jackpot-jackpot-border-cntr-border: #8B6914;
--home-progressive-jackpot-jackpot-border-cntr-text-shadow: 0px 2px 22px #FFD700;
--home-progressive-jackpot-jackpot-currency-color: #8B6914;
--home-progressive-jackpot-jackpot-play-text-color: #D4AF37;
--home-progressive-jackpot-jackpot-play-text-label-color: #C9A84C;
--home-inner-cntr-bg: rgba(26, 18, 0, 0.9);
--popular-game-title-cntr-a-bg: #2E1F00;
--popular-game-title-cntr-a-color: #D4AF37;
--popular-game-title-cntr-game-list-cntr-bg: #0A0700;
--popular-game-title-cntr-game-list-cntr-border: #3D2D00;
--play-now-bg: linear-gradient(to right, #8B6914 0%, #D4AF37 100%);
--play-now-hover-bg: linear-gradient(to right, #D4AF37 0%, #8B6914 100%);
--game-list-cntr-bg: rgba(26, 18, 0, 0.74);
--game-list-cntr-filter-section-bg: linear-gradient(to right, #2E1F00 0%, #2E1F00 100%);
--game-list-cntr-filter-section-input-text-border: #5A4100;
--game-list-cntr-filter-section-after-bg: #C9A84C;
--game-list-cntr-category-filter-link-active-hover-bg: #8B6914;
--game-list-game-item-bg: linear-gradient(to bottom, #1E1500 0%, #0D0900 100%);
--game-list-provider-name-color: #D4AF37;
--large-game-list-cntr-play-now-bg: #C9A84C;
--large-game-list-cntr-play-now-hover-bg: #8B6914;
--large-game-list-li-bg: linear-gradient(180deg, rgba(0,0,0,0) 25%, #8B6914 100%);
--large-game-list-img-bg: linear-gradient(180deg, #0A0700 25%, #2E1F00 100%);
--large-game-list-li-a-game-info-color: #C9A84C;
--large-game-list-li-a-game-info-hover-focus-color: #FFD700;
--body-bg: #0D0900;
--site-content-cntr-bg: #0A0700;
--site-info-cntr-bg: #050300;
--site-info-inner-cntr-color: #8B7A3A;
--site-info-inner-cntr-site-links-cntr-border: #2E1F00;
--site-info-inner-cntr-footer-links-li-a-color: #8B7A3A;
--site-info-inner-cntr-footer-links-li-a-hover-color: #FFD700;
--site-info-inner-cntr-supp-list-li-border: #3D2D00;
--copyright-info-cntr-border: #0D0900;
--footer-separator-border: #8B7A3A;
--site-desc-color: #8B7A3A;
--site-info-title-h3-color: #C9A84C;
--provider-cntr-border: #8B7A3A;
--provider-cntr-legend-color: #C9A84C;
--site-footer-bg: #050300;
--modal-header-bg: linear-gradient(to right, #0D0900 0%, #1A1200 100%);
--modal-body-bg: #120D02;
--modal-footer-bg: #0D0900;
--modal-footer-border: #2E1F00;
--modal-footer-btn-primary-bg: linear-gradient(to right, #C9A84C 0%, #8B6914 100%);
--modal-footer-btn-primary-hover-bg: linear-gradient(to right, #8B6914 0%, #C9A84C 100%);
--modal-footer-btn-secondary-color: #D4AF37;
--modal-footer-btn-secondary-hover-color: #FFD700;
--std-form-title-color: #D4AF37;
--std-form-sub-title-border: #C9A84C;
--std-form-note-bg: #5A4100;
--std-form-content-bg: rgba(18, 13, 2, 0.98);
--std-form-note-a-color: #FFD700;
--otp-hr-color: #D4AF37;
--std-outline-btn-border: #D4AF37;
--promotion-item-bg: #2E1F00;
--promotion-item-get-promo-button-bg: #C9A84C;
--promotion-item-get-promo-button-hover-bg: #FFD700;
--promotion-side-menu-a-active-border-left: #D4AF37;
--jackpot-cntr-bg: linear-gradient(#D4AF37, #000);
--jackpot-cntr-box-shadow: 0px 5px 15px #D4AF3780;
--jackpot-border-cntr-border: #8B6914;
--jackpot-currency-color: #8B6914;
--jackpot-play-section-text-color: #D4AF37;
--jackpot-play-section-text-label-color: #C9A84C;
--footer-featured-product-bg: #120D02;
--footer-card-container-border: #2E1F00;
--footer-hero-icon-bg: #2E1F00;
--footer-banking-card-bg: #0D0900;
--footer-sitemap-icon-bg: #2E1F00;
--download-apk-color: #FFF8E7;
--download-apk-h2-span-color: #D4AF37;
--download-apk-section-i-color: #D4AF37;
}
/* ════════════════════════════════════════
GOLD GLOW EFFECT UNTUK ELEMEN PENTING
════════════════════════════════════════ */
.site-header,
.navbar-fixed-top {
box-shadow: 0 2px 20px #D4AF3722 !important;
}
.register-button,
.modal-footer .btn-primary,
.play-now {
box-shadow: 0 2px 12px #D4AF3755 !important;
transition: all 0.25s ease !important;
}
.register-button:hover,
.modal-footer .btn-primary:hover,
.play-now:hover {
box-shadow: 0 4px 25px #FFD70099 !important;
transform: translateY(-1px);
}
/* ════════════════════════════════════════
SCROLLBAR GOLD
════════════════════════════════════════ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-black);
}
::-webkit-scrollbar-thumb {
background: var(--gold-dark);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold-main);
}