/* ========================================================= NEON ELECTRIC BLUE / MAGENTA / VIOLET OVERRIDE THEME Tempel di bagian PALING BAWAH file CSS lama Class tetap sama, struktur tetap sama, animasi ringan ========================================================= */ :root { --bg-main: #070b17; --bg-secondary: #0d1224; --bg-card: rgba(15, 22, 42, 0.82); --bg-soft: rgba(255, 255, 255, 0.04); --text-main: #eef6ff; --text-soft: #a9b6d3; --text-dim: #7f8db0; --neon-blue: #00eaff; --neon-cyan: #54f7ff; --neon-magenta: #ff2bd6; --neon-pink: #ff58e6; --neon-violet: #8b5cff; --neon-purple: #6f3cff; --line-glow: rgba(84, 247, 255, 0.28); --shadow-blue: 0 0 10px rgba(0, 234, 255, 0.20), 0 0 22px rgba(0, 234, 255, 0.12); --shadow-magenta: 0 0 12px rgba(255, 43, 214, 0.18), 0 0 28px rgba(255, 43, 214, 0.10); --shadow-violet: 0 0 12px rgba(139, 92, 255, 0.20), 0 0 26px rgba(139, 92, 255, 0.10); --grad-primary: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-magenta) 52%, var(--neon-violet) 100%); --grad-dark: linear-gradient(135deg, rgba(10,16,33,0.96) 0%, rgba(17,13,35,0.96) 100%); --grad-button: linear-gradient(135deg, #0cf1ff 0%, #2f7bff 30%, #b638ff 72%, #ff39c9 100%); --grad-button-hover: linear-gradient(135deg, #6ff7ff 0%, #5395ff 30%, #ca66ff 72%, #ff6adf 100%); --grad-secondary: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --transition-fast: .22s ease; --transition-smooth: .32s ease; } /* ---------- BASE ---------- */ body, .site-header, .site-footer, .topbar-container, .standard-form-container, .standard-form-content, .info-center, .info-center-content, .tab-content-container, .standard-side-menu, .claim-container, .modal-content, .banner, .home-info-container, .telegram-banner-container, .sports-container, [data-container-background="sports"], [data-container-background="casino"], [data-container-background="race"], [data-container-background="slots"], [data-container-background="poker"], [data-container-background="others"], [data-container-background="promotions"], .slots-games-container, .casino-games-container, .race-games-container, .arcade-games-container, .crash-game-games-container, .promotion-list, .provider-page .large-game-list-container, .provider-info, .large-game-list-container, .claim-item-container .claim-item, .bank-info, .user-info .user-main-info, .standard-content-info .standard-content-block, .notification-list .notification-item, .pending-transactions-container .pending-transactions-item, .modal-body .pending-transaction-details-container { background: var(--grad-dark) !important; color: var(--text-main) !important; } a { color: var(--neon-cyan); transition: color var(--transition-fast), text-shadow var(--transition-fast); } a:hover, a:focus { color: var(--neon-pink); text-decoration: none; text-shadow: 0 0 10px rgba(255, 88, 230, 0.30); } .site-header, .site-footer, .topbar-container, .standard-form-container, .info-center-content, .tab-content-container, .large-game-list-container, .standard-content-info, .provider-container, .top-tab-container, .home-info-container, .telegram-banner-container, .promotion-list, .bank-info, .notification-list .notification-item, .claim-item-container .claim-item, .user-info .user-main-info, .standard-profile-bar, .messaging-side-menu { border: 1px solid rgba(84, 247, 255, 0.14) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03); border-radius: var(--radius-md); } /* ---------- LIGHTWEIGHT ANIMATION ---------- */ @keyframes neonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes neonPulse { 0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 18px rgba(84, 247, 255, 0.12); } } @keyframes glowShift { 0% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(10deg); } 100% { filter: hue-rotate(0deg); } } /* ---------- HEADINGS / TITLES ---------- */ .site-info .site-info-title h3, .site-info .site-info-description h4, .info-center-title, .standard-form-title, .sports-platform-title, .claim-info-modal h4, .standard-content-info h2, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .info-center-content-title, .game-list-title>div, .panel-primary>.panel-heading.emailbox-heading { background-image: var(--grad-primary) !important; -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; letter-spacing: .4px; } .standard-form-title, .info-center-title, .home-game-list-container .container-title span, .popular-game-title-container .container-title span, .info-center-content-title { position: relative; isolation: isolate; } .standard-form-title::after, .info-center-title::after, .home-game-list-container .container-title span::before, .popular-game-title-container .container-title span::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: linear-gradient(135deg, rgba(0,234,255,.14), rgba(255,43,214,.10), rgba(139,92,255,.16)); box-shadow: var(--shadow-blue), var(--shadow-violet); } /* ---------- MENU / NAV ---------- */ .top-menu>li, .nav-tabs>li>a, .panel-heading.emailbox-heading .panel-tabs>li>a, .top-tab-container a, .standard-side-menu a, .standard-side-menu-group-label { color: var(--text-main) !important; transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .top-menu>li:hover, .top-menu>li[data-active="true"], .nav-tabs>li>a:hover, .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .panel-heading.emailbox-heading .panel-tabs>li.active>a, .panel-heading.emailbox-heading .panel-tabs>li.active>a:hover, .panel-heading.emailbox-heading .panel-tabs>li.active>a:focus, .top-tab-container a[data-active="true"], .top-tab-container a:hover, .standard-side-menu a[data-active="true"], .standard-side-menu a:hover, .standard-side-menu .menu-section a:hover, .standard-side-menu .menu-section a:focus, .standard-side-menu .menu-section a[data-active="true"] { color: var(--neon-cyan) !important; background: rgba(84, 247, 255, 0.08) !important; border-color: rgba(84, 247, 255, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(84,247,255,0.10), 0 0 16px rgba(84,247,255,0.08); } .top-menu .game-list, .standard-side-menu, .messaging-side-menu, .user-info .dropdown-menu, .user-info .dropdown-menu.vendor-balances-container { background: rgba(8, 12, 24, 0.96) !important; backdrop-filter: blur(6px); border: 1px solid rgba(84, 247, 255, 0.12) !important; } /* ---------- PANELS / BOXES ---------- */ .announcement-container, .popular-games .tab-pane, .promotion-info, .standard-form-note, .remarks-container, .payment-maintenance-container, .claim-item-container .claim-item, .notification-list .notification-item[data-seen="false"], .replied-message[data-creator="true"] .replied-message-content, .modal-body .pending-transaction-summary-container, .claim-info-modal .alert-container, .payment-account-creation-remarks, .register-done-container .register-verification-done, .referral-box-container .referral-box, .standard-profile-bar .referral-code-container { background: linear-gradient(135deg, rgba(9, 19, 37, 0.95), rgba(24, 13, 42, 0.94)) !important; border: 1px solid rgba(139, 92, 255, 0.18) !important; box-shadow: var(--shadow-violet); color: var(--text-main) !important; } .announcement-container>[data-section="announcements"], .popular-games [data-section="left"] .section-title, .lottery-result-container .lottery-result-title, .info-center-content .panel-default>.panel-heading { background: linear-gradient(135deg, rgba(0, 234, 255, 0.13), rgba(139, 92, 255, 0.12), rgba(255, 43, 214, 0.11)) !important; color: var(--text-main) !important; border-color: rgba(84, 247, 255, 0.16) !important; } /* ---------- BUTTONS ---------- */ .standard-button-group .btn-primary, .messaging-side-menu .support-ticket>a, .deposit-container .reveal-bank-account-button, .standard-reporting-control-group .btn-primary, .promotion-item .click-for-get-promo-button, .promotion-item-details .click-for-get-promo-button, .register-done-container .btn-deposit, .notification-tabs .notification-tab-item[data-active="true"], .notification-popup-body .notification-footer, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button, .daily-reward-container .standard-secondary-button, .loyalty-available-rank-up-modal .standard-secondary-button, .referral-section .referral-code-copy-btn, .notification-list .notification-item .notification-play-button, [data-payment-gateway] .download-qr-button, .whitelisted-domains-link, .referral-verification-container [data-is-contact-verified="false"] .profile-link, .payment-method-selection input[type="radio"]:checked+label { background: var(--grad-button) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 18px rgba(84, 247, 255, 0.15); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .standard-button-group .btn-primary:hover, .messaging-side-menu .support-ticket>a:hover, .deposit-container .reveal-bank-account-button:hover, .standard-reporting-control-group .btn-primary:hover, .promotion-item .click-for-get-promo-button:hover, .promotion-item-details .click-for-get-promo-button:hover, .register-done-container .btn-deposit:hover, .mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button:hover, .daily-reward-container .standard-secondary-button:hover, .loyalty-available-rank-up-modal .standard-secondary-button:hover, .referral-verification-container [data-is-contact-verified="false"] .profile-link:hover { background: var(--grad-button-hover) !important; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.30), 0 0 24px rgba(255, 43, 214, 0.18), 0 0 14px rgba(84, 247, 255, 0.14); } .play-now, .free-play, .login-panel .login-button, .login-panel .register-button, .download-apk .btn, .modal-footer .btn-primary, .modal-footer .btn-secondary, .simple-modal .btn-secondary, .standard-outline-button, .request-otp-button, .contact-verification-link, .set-as-default-button { position: relative; border-radius: 999px !important; overflow: hidden; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .play-now { background: var(--grad-button) !important; color: #fff !important; border: 1px solid rgba(84, 247, 255, 0.30) !important; box-shadow: var(--shadow-blue), var(--shadow-magenta); } .play-now:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(84, 247, 255, 0.20), 0 0 24px rgba(255, 43, 214, 0.18); } .free-play, .login-panel .register-button, .standard-outline-button, .simple-modal .btn-secondary, .request-otp-button, .contact-verification-link, .set-as-default-button { background: rgba(255,255,255,0.03) !important; color: var(--neon-cyan) !important; border: 1px solid rgba(84, 247, 255, 0.30) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } .free-play:hover, .login-panel .register-button:hover, .standard-outline-button:hover, .simple-modal .btn-secondary:hover, .request-otp-button:hover, .contact-verification-link:hover, .set-as-default-button:hover { background: rgba(84, 247, 255, 0.08) !important; color: #fff !important; text-shadow: none !important; box-shadow: 0 0 18px rgba(84, 247, 255, 0.16); } /* ---------- FORMS ---------- */ .form-control, .mobile-app-container .mobile-app-select, .login-panel input[type=text], .login-panel input[type=password], .slots-games-container .filter-section input[type=text], .casino-games-container .filter-section input[type=text], .race-games-container .filter-section input[type=text], .claim-filter-container select.form-control, .referral-verification-container input.form-control, .standard-inline-form-group .form-control[readonly] { background: rgba(9, 15, 30, 0.94) !important; color: var(--text-main) !important; border: 1px solid rgba(84, 247, 255, 0.16) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); border-radius: 12px !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .form-control:focus, .login-panel input[type=text]:focus, .login-panel input[type=password]:focus, .claim-filter-container select.form-control:focus { border-color: rgba(255, 43, 214, 0.42) !important; box-shadow: 0 0 0 3px rgba(255, 43, 214, 0.08), 0 0 16px rgba(84, 247, 255, 0.10) !important; outline: none; } /* ---------- LOGIN PANEL ---------- */ .login-panel, .user-info, .hot-match-container, .mobile-app-container .text-container, .standard-form-content label, .standard-inline-form-group label, .deposit-container .deposit-form-group label, .withdrawal-container .withdrawal-form-group label, .contact-verification-section label, .contact-verification-section ul li, .contact-us-list li p, .poker-game-types ul li p, .sport-match-item, .hot-match-container, .lottery-result-container, .info-center-content, .table thead>tr>th, .table tbody>tr>td, .message-table-header, .message-table-body { color: var(--text-main) !important; } .login-panel .forgot-password-link, .copyright, .footer-section-title, .site-description, .site-info .site-info-title p, .provider-container, .level-progress-info span, .benefit-container .benefit-list .benefit-card p, .notification-list .notification-item .notification-content p, .modal-body p, .mobile-app-container .tab-pane p, .register-page-reminder, .contact-us-list li h6, .jackpot-winners .jackpot-winner-title { color: var(--text-soft) !important; } .login-panel .login-button { background: var(--grad-button) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 18px rgba(84, 247, 255, 0.14); } .login-panel .login-button:hover { background: var(--grad-button-hover) !important; transform: translateY(-1px); } /* ---------- TABS / SLIDERS / INDICATORS ---------- */ .banner .carousel-indicators .active, .banner .carousel-indicators .slick-active, .bank-info-container .carousel-indicators .active, .bank-info-container .carousel-indicators li:hover, [data-container-background="sports"] .carousel-indicators li.active, [data-container-background="casino"] .carousel-indicators li.active, [data-container-background="race"] .carousel-indicators li.active, [data-container-background="poker"] .carousel-indicators li.active, [data-container-background="others"] .carousel-indicators li.active, [data-container-background="slots"] .carousel-indicators li.active, .introjs-bullets ul li a.active, .introjs-bullets ul li a:hover { background: var(--grad-primary) !important; border-color: rgba(84, 247, 255, 0.60) !important; box-shadow: 0 0 12px rgba(84, 247, 255, 0.18); } .scrtabs-tab-container, .poker-game-types, .jackpot-winners, .home-progressive-jackpot .inner-container, .home-progressive-jackpot .jackpot-container { background: linear-gradient(135deg, rgba(8, 13, 26, 0.94), rgba(20, 12, 35, 0.92)) !important; border-color: rgba(139, 92, 255, 0.16) !important; } /* ---------- JACKPOT / SPECIAL HIGHLIGHT ---------- */ .home-progressive-jackpot { background-image: radial-gradient(circle at 15% 50%, rgba(0,234,255,0.18), transparent 35%), radial-gradient(circle at 85% 40%, rgba(255,43,214,0.16), transparent 30%), linear-gradient(135deg, #081223 0%, #120d25 100%) !important; border: 1px solid rgba(84, 247, 255, 0.18); box-shadow: var(--shadow-blue), var(--shadow-magenta); animation: neonPulse 4.5s ease-in-out infinite; } .home-progressive-jackpot .border-container, .home-progressive-jackpot .jackpot-border-container { border-color: rgba(255, 43, 214, 0.30) !important; } .progressive-jackpot .jackpot-currency, .progressive-jackpot .jackpot-container, .user-info .wallet-container .balance, .user-info .wallet-container .locked-balance, .deposit-amount-container .real-deposit-amount, .deposit-amount-container .deposit-amount .currency-suffix, .deposit-amount-container .deposit-amount input.form-control, .withdrawal-container .real-withdrawal-amount, .withdrawal-container .withdrawal-amount input.form-control, .withdrawal-container .withdrawal-amount .currency-suffix, .withdrawal-summary-container .withdrawal-summary-header .summary-transfer-amount, .deposit-summary-container .deposit-summary-header .summary-transfer-amount, .deposit-container .formatted-balance, .withdrawal-container .formatted-balance { color: var(--neon-cyan) !important; text-shadow: 0 0 12px rgba(84, 247, 255, 0.12); } /* ---------- GAME CARD / LIST ---------- */ .game-list, .game-list-title, .provider-slide, .provider-slide>main>.slide-item, .game-list .game-item, .sport-match-item, .sport-match-item .match-info-container, .notification-tabs .notification-tab-item, .bonus-selection-container, .bonus-selection-list .bonus-selection-card.selected { background: linear-gradient(135deg, rgba(10,16,31,0.94), rgba(18,12,32,0.94)) !important; border-color: rgba(84,247,255,0.12) !important; } .game-list .game-item, .provider-slide>main>.slide-item, .sport-match-item, .notification-tabs .notification-tab-item { transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .game-list .game-item:hover, .provider-slide>main>.slide-item:hover, .sport-match-item:hover, .notification-tabs .notification-tab-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.22), 0 0 18px rgba(139, 92, 255, 0.10); border-color: rgba(255,43,214,0.18) !important; } .game-list .game-name, .home-game-list-container .container-content .game-list .game-item .game-name, .popular-game-title-container .container-content .game-list .game-item .game-name, .provider-slide>main>.slide-item h5 { color: var(--text-main) !important; } /* ---------- BADGES / SMALL ACCENTS ---------- */ .sport-match-item .match-teams>span, .hot-match-container .live-streaming-link, .contact-us-list li a, .deposit-container .standard-form-note a, .copy-input-button-field .copy-input-button, .standard-form-note span, .standard-form-note strong, .standard-profile-bar .user-field div .username, .standard-side-menu .player-account-section .username, .topbar-left-section .topbar-item a:hover, .footer-links>li>a:hover, .add-new-payment-account-container a { color: var(--neon-cyan) !important; } .hot-match-container .live-streaming-link, .request-otp-button, .contact-verification-link, .unread-announcements-popup, .user-info .vendor-balances-container, .user-info .vendor-balances-container .vendor-balances-header { border-color: rgba(84, 247, 255, 0.36) !important; } .info-center-title, .notification-list .notification-item .notification-header .notification-label, .referral-box-container .referral-box .referral-box-icon, .claim-item-type>div, .claim-item-type .expiration-countdown [data-section], .mobile-app-container .mobile-app-select .active a, .mobile-app-container .mobile-app-select a:hover { background: var(--grad-primary) !important; color: #fff !important; } /* ---------- MODAL ---------- */ .modal-content, .bonus-slider-modal .modal-content, .bonus-slider-modal .bonus-form, .confirmation-message-modal .modal-body { background: linear-gradient(135deg, rgba(8, 11, 20, 0.98), rgba(18, 12, 32, 0.98)) !important; border: 1px solid rgba(84,247,255,0.14) !important; color: var(--text-main) !important; } .modal-header, .bonus-slider-modal .modal-header, .confirmation-message-modal .modal-header { background: rgba(255,255,255,0.03) !important; border-bottom-color: rgba(84, 247, 255, 0.10) !important; } .modal-content h4, .download-popup-modal .modal-header .modal-title, .bonus-slider-modal .modal-title, .confirmation-message-modal h4.modal-title { color: var(--text-main) !important; text-shadow: 0 0 10px rgba(84,247,255,0.08); } /* ---------- TABLE / CONTENT ---------- */ .white-panel.emailbox table, .inbox-table-body a, .message-detail-title a, .white-panel.emailbox .panel, .white-panel.emailbox .checkbox:before, .inbox-table-header div, .inbox-table-body div, .standard-content-info table, .standard-content-info table>thead>tr>th { background-color: transparent !important; color: var(--text-main) !important; border-color: rgba(84,247,255,0.10) !important; } /* ---------- GLOW DETAILS ---------- */ .banner, .provider-slide, .home-game-list-container .container-content, .popular-game-title-container .container-content, .standard-content-info, .lottery-result-container, .sports-matches-container, .notification-list, .info-center-content, .claim-container { position: relative; overflow: hidden; } .banner::before, .provider-slide::before, .home-game-list-container .container-content::before, .popular-game-title-container .container-content::before, .standard-content-info::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, transparent 0%, rgba(84,247,255,0.08) 20%, transparent 40%, rgba(255,43,214,0.05) 60%, transparent 100%); opacity: .75; } /* ---------- SCROLLBAR ---------- */ .game-list::-webkit-scrollbar, .home-game-list-container .container-content .game-list::-webkit-scrollbar, .popular-game-title-container .container-content .game-list::-webkit-scrollbar { height: 8px; width: 8px; } .game-list::-webkit-scrollbar-track, .home-game-list-container .container-content .game-list::-webkit-scrollbar-track, .popular-game-title-container .container-content .game-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); } .game-list::-webkit-scrollbar-thumb, .home-game-list-container .container-content .game-list::-webkit-scrollbar-thumb, .popular-game-title-container .container-content .game-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-blue), var(--neon-violet)); border-radius: 999px; } /* ---------- MOBILE PERFORMANCE SAFE ---------- */ @media (max-width: 768px) { .play-now:hover, .free-play:hover, .login-panel .login-button:hover, .standard-button-group .btn-primary:hover, .game-list .game-item:hover, .provider-slide>main>.slide-item:hover, .sport-match-item:hover { transform: none; } .banner::before, .provider-slide::before, .home-game-list-container .container-content::before, .popular-game-title-container .container-content::before, .standard-content-info::before { opacity: .45; } }