/* ══════════════════════════════════════════════════════
   TEMA MERAH & EMAS — polish tambahan
   ══════════════════════════════════════════════════════ */

body {
    background-color: var(--color-1);
    color: var(--color-4);
}

/* Accent text */
.cl-2 { color: var(--color-2) !important; }
.cl-4 { color: var(--color-4) !important; }

/* Gold shimmer on headings */
h1 span[style*="color-2"],
h2 span[style*="color-2"],
h2 .cl-2 {
    text-shadow: 0 0 20px rgba(240, 192, 64, 0.25);
}

/* Buttons & CTA */
button[style*="color-header"],
a[style*="color-header"] {
    box-shadow: 0 2px 8px rgba(139, 21, 21, 0.4);
}

/* ── Mobile nav login button — 3D + animasi ───────── */
.btn-mobile-nav-3d-wrap {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-mobile-nav-3d {
    --btn-size: 3.65rem;
    position: relative;
    width: var(--btn-size);
    height: var(--btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #e8b923 0%, #c9a227 18%, #8b1515 55%, #5a0a0a 100%);
    box-shadow:
        0 0 0 2px rgba(240, 192, 64, 0.35),
        0 6px 0 #4a0808,
        0 10px 22px rgba(139, 21, 21, 0.55),
        0 0 28px rgba(240, 192, 64, 0.28);
    transform-style: preserve-3d;
    animation: nav3d-float 2.8s ease-in-out infinite;
    overflow: visible;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-mobile-nav-3d::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%);
    pointer-events: none;
    z-index: 2;
}

.btn-mobile-nav-3d__shine {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.btn-mobile-nav-3d__shine::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -160%;
    width: 55%;
    height: 160%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: nav3d-shine 3.6s ease-in-out infinite;
}

.btn-mobile-nav-3d__ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(240, 192, 64, 0.65);
    pointer-events: none;
    animation: nav3d-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.btn-mobile-nav-3d__ring--delay {
    animation-delay: 1.2s;
    border-color: rgba(232, 185, 35, 0.4);
}

.btn-mobile-nav-3d svg {
    position: relative;
    z-index: 4;
    width: 1.65rem !important;
    height: 1.65rem !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    animation: nav3d-icon 2.2s ease-in-out infinite;
}

.btn-mobile-nav-3d-wrap:hover .btn-mobile-nav-3d {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 0 0 3px rgba(240, 192, 64, 0.45),
        0 8px 0 #4a0808,
        0 14px 28px rgba(139, 21, 21, 0.6),
        0 0 36px rgba(240, 192, 64, 0.42);
}

.btn-mobile-nav-3d-wrap:active .btn-mobile-nav-3d {
    animation: none;
    transform: translateY(5px) scale(0.96);
    box-shadow:
        0 0 0 2px rgba(240, 192, 64, 0.3),
        0 1px 0 #4a0808,
        0 4px 12px rgba(139, 21, 21, 0.45),
        0 0 18px rgba(240, 192, 64, 0.2);
}

@keyframes nav3d-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes nav3d-pulse {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }
    70%, 100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes nav3d-shine {
    0%, 72%, 100% {
        left: -160%;
        opacity: 0;
    }
    10% { opacity: 1; }
    48% {
        left: 185%;
        opacity: 1;
    }
    58% { opacity: 0; }
}

@keyframes nav3d-icon {
    0%, 100% {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35))
                drop-shadow(0 0 4px rgba(255, 255, 255, 0.25));
    }
    50% {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35))
                drop-shadow(0 0 10px rgba(240, 192, 64, 0.75));
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-mobile-nav-3d,
    .btn-mobile-nav-3d svg,
    .btn-mobile-nav-3d__ring,
    .btn-mobile-nav-3d__shine::after {
        animation: none !important;
    }
}

/* Active menu item */
#menu .active,
#menu a.active {
    color: var(--color-2) !important;
}

#menu a.active svg {
    color: var(--color-2);
    filter: drop-shadow(0 0 6px rgba(240, 192, 64, 0.5));
}

/* Announcement bar */
.pengumuman + marquee,
.bg-black .pengumuman {
    color: var(--color-2);
}

/* Jackpot counter */
#jackpot-mobile,
#jackpot-desktop {
    color: var(--color-2) !important;
    text-shadow: 0 0 12px rgba(240, 192, 64, 0.4);
}

/* Cards & sections */
.bg-\[var\(--color-6\)\] {
    border-color: rgba(240, 192, 64, 0.08);
}

/* Swiper */
.swiper-pagination-bullet-active {
    background: var(--color-2) !important;
    box-shadow: 0 0 6px rgba(240, 192, 64, 0.6);
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--color-2) !important;
}

/* Form inputs focus */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-2) !important;
    box-shadow: 0 0 0 2px rgba(240, 192, 64, 0.2);
}

/* Legacy footer bar (non-site-footer sections) */
.bg-\[var\(--color-3\)\] {
    background: linear-gradient(to right, #3a1010, #2a0c0c, #3a1010) !important;
}

/* Social floating button — merah emas */
.menu-area .toggle-icon {
    background: linear-gradient(135deg, #8b1515 0%, #e8b923 50%, #8b1515 100%) !important;
    box-shadow: 0 0 8px rgba(240, 192, 64, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.menu-area li:hover a {
    box-shadow: 0 0 6px rgba(240, 192, 64, 0.5) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-1); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #8b1515, #e8b923);
    border-radius: 3px;
}

/* Selection highlight */
::selection {
    background: rgba(240, 192, 64, 0.35);
    color: #fff;
}