/* ==========================================================================
   CYBERPUNK RGB THEME — NUSANTARATOTO
   Murni CSS: tidak mengubah struktur HTML, konten, meta, maupun JSON-LD
   (SEO tetap terjaga). File ini di-link TERAKHIR di setiap halaman agar
   menang atas stylesheet/atribut yang sudah ada.
   ========================================================================== */

/* ---------- FLIP VARIABEL: me-retheme semua komponen otomatis ---------- */
:root {
    --white: #0d1326 !important;           /* permukaan kartu (gelap) */
    --black: #e8ecff !important;           /* teks utama (terang) */
    --grey-light: #0b0f1e !important;      /* latar sekunder */
    --grey-border: rgba(0, 229, 255, 0.18) !important;  /* border neon cyan */
    --grey-text: #9aa5c9 !important;       /* teks sekunder */
    --grey-dark: #c7d0e8 !important;       /* teks paragraf */
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
    --transition: all 0.3s ease !important;
}

/* ---------- LATAR CYBERPUNK: RGB glow + grid perspektif ---------- */
html {
    background: #05060f;
}
body {
    background-color: #070a16 !important;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse at 18% -10%, rgba(124, 58, 237, 0.30), transparent 52%),
        radial-gradient(ellipse at 82% 0%, rgba(0, 229, 255, 0.24), transparent 48%),
        radial-gradient(ellipse at 50% 115%, rgba(255, 0, 200, 0.16), transparent 55%),
        linear-gradient(#070a16, #0b0f1e);
    background-size: 46px 46px, 46px 46px, auto, auto, auto, auto;
    background-attachment: fixed;
    color: #e8ecff !important;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0, 229, 255, 0.08), transparent 40%);
    pointer-events: none;
    z-index: 1;
}
* { scrollbar-color: #00e5ff #0b0f1e; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0f1e; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00e5ff, #ff00c8); border-radius: 6px; }
::selection { background: rgba(0, 229, 255, 0.35); color: #fff; }

/* ---------- TYPO & LINK ---------- */
h1, h2, h3, h4 { color: #f2f5ff !important; }
h1 { text-shadow: 0 0 22px rgba(0, 229, 255, 0.30); }
h2 { text-shadow: 0 0 14px rgba(255, 0, 200, 0.18); }
p, li, td, th { color: #c7d0e8; }
.page-content a, .seo-box a, .breadcrumb a, .footer-col a, .mega-col li a {
    color: #4dd8ff !important;
}
.page-content a:hover, .seo-box a:hover, .breadcrumb a:hover, .footer-col a:hover { color: #ff5fd6 !important; }

/* ---------- HEADER / NAV ---------- */
.main-header {
    background: rgba(10, 14, 28, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.logo { color: #f2f5ff !important; text-shadow: 0 0 18px rgba(0, 229, 255, 0.45); }
.search-form {
    border: 2px solid #00e5ff !important;
    border-radius: 8px !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}
.search-form input { background: #0b0f1e !important; color: #e8ecff !important; }
.search-form input::placeholder { color: #6b7699; }
.search-form button {
    background: linear-gradient(135deg, #00e5ff, #7c3aed) !important;
    color: #05060f !important;
}
.top-bar { background: rgba(7, 10, 22, 0.9) !important; border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important; color: #9aa5c9 !important; }
.country-trigger { color: #e8ecff !important; }

.category-nav {
    background: rgba(10, 14, 28, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
}
.nav-inner .menu > li > a { color: #e8ecff !important; }
.nav-inner .menu > li > a:hover { color: #00e5ff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.6); }
.all-cat-btn {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(255, 0, 200, 0.15)) !important;
    border-left: 1px solid rgba(0, 229, 255, 0.25) !important;
    border-right: 1px solid rgba(0, 229, 255, 0.25) !important;
    color: #e8ecff !important;
}
.mega-menu, .country-mega-menu {
    background: rgba(11, 15, 30, 0.97) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(124, 58, 237, 0.25) !important;
}
.mega-title { color: #ff5fd6 !important; border-bottom: 2px solid rgba(0, 229, 255, 0.35) !important; }
.mega-col li a:hover, .country-col a:hover { background: rgba(0, 229, 255, 0.08) !important; color: #00e5ff !important; }

/* ---------- KARTU & KONTEN ---------- */
.page-content, .seo-box, .table-container, .reviews-faq-grid {
    background: rgba(13, 19, 38, 0.92) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 229, 255, 0.03) !important;
}
.page-content h1, .page-content h2, .seo-box h3 { color: #f2f5ff !important; }
.page-content h2, .section-heading { border-bottom: 2px solid rgba(255, 0, 200, 0.5) !important; }
.lead { color: #e8ecff !important; }

.pasaran-card, .adv-card, .facility-box, .delivery-notice, .product-checkout {
    background: rgba(13, 19, 38, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pasaran-card:hover, .adv-card:hover, .facility-box:hover {
    border-color: #00e5ff !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.35) !important;
    transform: translateY(-4px);
}
.price-box { color: #00e5ff !important; text-shadow: 0 0 16px rgba(0, 229, 255, 0.5); }
.stock-status { color: #4ade80 !important; }
.model-box { border: 1px solid rgba(0, 229, 255, 0.25) !important; color: #e8ecff !important; }
.model-box.active { border: 2px solid #00e5ff !important; background: rgba(0, 229, 255, 0.12) !important; }

/* ---------- TABEL ---------- */
.specs-table td, .schedule-table td, .table-keunggulan td, table td { border-bottom: 1px solid rgba(0, 229, 255, 0.14) !important; }
.specs-table .table-header td, .schedule-table th {
    background: rgba(0, 229, 255, 0.08) !important;
    border-bottom: 2px solid rgba(255, 0, 200, 0.45) !important;
    color: #f2f5ff !important;
}
.schedule-table th { background: rgba(0, 229, 255, 0.08) !important; }
.table-keunggulan tr:hover { background: rgba(0, 229, 255, 0.06) !important; }

/* ---------- TOMBOL ---------- */
.btn-primary, .action-btn:hover {
    background: linear-gradient(135deg, #00e5ff, #7c3aed, #ff00c8) !important;
    color: #05060f !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.55) !important;
    border-radius: 8px !important;
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.7) !important; transform: translateY(-2px); }
.btn-outline {
    background: transparent !important;
    color: #4dd8ff !important;
    border: 1px solid #00e5ff !important;
    border-radius: 8px !important;
}
.btn-outline:hover { background: rgba(0, 229, 255, 0.12) !important; box-shadow: 0 0 16px rgba(0, 229, 255, 0.4); }
.cta-box {
    background: linear-gradient(135deg, #0b0f1e, #1a1033) !important;
    border: 1px solid rgba(255, 0, 200, 0.35) !important;
    box-shadow: 0 0 40px rgba(255, 0, 200, 0.2) !important;
}
.cta-box .btn-primary { background: linear-gradient(135deg, #ff00c8, #7c3aed) !important; color: #fff !important; }
.cta-box .btn-outline { border-color: #ff5fd6 !important; color: #ff9de3 !important; }

/* ---------- ALT LINKS / CTA ROW ---------- */
.alt-link {
    background: rgba(13, 19, 38, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    color: #e8ecff !important;
    border-radius: 50px !important;
}
.alt-link:hover {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(255, 0, 200, 0.2)) !important;
    border-color: #ff5fd6 !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255, 0, 200, 0.4) !important;
    transform: translateY(-2px);
}

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid rgba(0, 229, 255, 0.2) !important; border-radius: 10px !important; }
.faq-q {
    background: linear-gradient(135deg, #131a33, #1a1033) !important;
    color: #f2f5ff !important;
}
.faq-a, .faq-a.active {
    background: rgba(11, 15, 30, 0.95) !important;
    color: #c7d0e8 !important;
    border-top: 1px solid rgba(0, 229, 255, 0.15) !important;
}

/* ---------- FOOTER ---------- */
.main-footer {
    background: rgba(8, 11, 22, 0.97) !important;
    border-top: 2px solid transparent !important;
    border-image: linear-gradient(90deg, #00e5ff, #7c3aed, #ff00c8) 1 !important;
}
.footer-col h4 { color: #ff5fd6 !important; border-bottom: 1px solid rgba(0, 229, 255, 0.25) !important; }
.footer-bottom {
    background: #05060f !important;
    border-top: 1px solid rgba(0, 229, 255, 0.25) !important;
    color: #c7d0e8 !important;
}
.footer-legal p { color: #9aa5c9 !important; }
.legal-links a { color: #4dd8ff !important; }
.legal-links a:hover { color: #ff5fd6 !important; }
.pay-icon {
    background: rgba(13, 19, 38, 0.9) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    color: #e8ecff !important;
}
.social-icons a { color: #9aa5c9 !important; }
.social-icons a:hover { color: #00e5ff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.8); }

/* ---------- LIVE DRAW (halaman live-draw.html) ---------- */
.live-toolbar {
    background: rgba(10, 14, 28, 0.92) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.15) !important;
}
.live-search-input { background: #0b0f1e !important; border-color: #334155 !important; color: #e8ecff !important; }
.live-search-input:focus { border-color: #00e5ff !important; box-shadow: 0 0 12px rgba(0, 229, 255, 0.4); }
.live-chip { background: #131a33 !important; color: #c7d0e8 !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; }
.live-chip:hover { border-color: #00e5ff !important; }
.live-chip.active { background: linear-gradient(135deg, #00e5ff, #7c3aed) !important; color: #05060f !important; }
.pool-card {
    background: rgba(13, 19, 38, 0.92) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}
.pool-card:hover { border-color: #00e5ff !important; box-shadow: 0 0 26px rgba(0, 229, 255, 0.4) !important; }
.pool-card[data-status="live"] {
    border-color: #ff2d95 !important;
    background: linear-gradient(180deg, rgba(255, 0, 200, 0.12), rgba(13, 19, 38, 0.95)) !important;
}
.pool-card .pool-name, .pool-card .pool-sched strong { color: #f2f5ff !important; }
.pool-sched { color: #8b93b8 !important; }
.pool-result, .pool-countdown { background: rgba(7, 10, 22, 0.8) !important; border: 1px solid rgba(0, 229, 255, 0.12) !important; }
.pool-result-live { background: rgba(255, 0, 200, 0.1) !important; border-color: rgba(255, 0, 200, 0.4) !important; }
.countdown-digits { color: #00e5ff !important; text-shadow: 0 0 14px rgba(0, 229, 255, 0.6); }
.result-digits span {
    background: #0b0f1e !important;
    color: #00e5ff !important;
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}
.pool-card[data-status="live"] .result-digits span { background: #ff00c8 !important; color: #fff !important; border-color: #ff5fd6; }
.pool-foot a { color: #4dd8ff !important; }
.live-empty { background: rgba(13, 19, 38, 0.9) !important; border: 1px dashed rgba(0, 229, 255, 0.3) !important; color: #9aa5c9 !important; }

/* ---------- PREVIEW BOX (beranda) ---------- */
.preview-box {
    background: linear-gradient(135deg, #0b0f1e, #150a2e) !important;
    border: 1px solid rgba(0, 229, 255, 0.25) !important;
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.25) !important;
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb { color: #9aa5c9 !important; }
.breadcrumb a { color: #4dd8ff !important; }
.breadcrumb a:hover { color: #ff5fd6 !important; }

/* ---------- LAIN-LAIN ---------- */
.badge.border { border: 1px solid rgba(0, 229, 255, 0.4) !important; background: rgba(13, 19, 38, 0.9) !important; color: #e8ecff !important; }
.product-badges .badge { background: rgba(0, 229, 255, 0.1) !important; color: #c7d0e8 !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; }
.review-card { border-bottom: 1px solid rgba(0, 229, 255, 0.14) !important; }
.rating-big { color: #00e5ff !important; text-shadow: 0 0 18px rgba(0, 229, 255, 0.5); }
.stars { color: #ffd700 !important; text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }

/* ---------- TABEL JADWAL (live-draw) ---------- */
.schedule-table { border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 10px; overflow: hidden; }

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
    body {
        background-size: 30px 30px, 30px 30px, auto, auto, auto, auto;
        background-attachment: scroll; /* hindari jank repaint di mobile */
    }
}