/*
Theme Name: KPSJITU
Theme URI: https://kpsjitu.com
Author: KPSJITU
Author URI: https://kpsjitu.com
Description: Dark gold modern theme for KPSJITU slot online site. SEO-optimized with AMP support.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kpsjitu
Tags: one-column, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, news
*/

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================
   UTILITY CLASSES
   ============================================ */
.gold-text {
    background: linear-gradient(135deg, #f5c518, #ffd54f, #f5c518);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gold-border { border: 1px solid rgba(245,197,24,0.2); }
.gold-border-hover { transition: all 0.3s ease; }
.gold-border-hover:hover {
    border-color: rgba(245,197,24,0.5);
    box-shadow: 0 0 30px rgba(245,197,24,0.15);
}
.nav-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gold-500 { color: #f5c518; }
.text-gold-400 { color: #ffd54f; }
.text-green-400 { color: #4ade80; }
.text-white { color: #ffffff; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-7xl { font-size: 4.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.1; }
.text-center { text-align: center; }
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f5c518, #e6b800);
    color: #0a0a0a;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #ffd54f, #f5c518);
    box-shadow: 0 0 30px rgba(245,197,24,0.5);
    transform: translateY(-2px);
}
.btn-outline-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid #f5c518;
    color: #f5c518;
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
}
.btn-outline-gold:hover {
    background: #f5c518;
    color: #0a0a0a;
}

/* ============================================
   LAYOUT
   ============================================ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 20px rgba(245,197,24,0.3); } 50% { box-shadow: 0 0 40px rgba(245,197,24,0.6); } }
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes glow-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.8; } }
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-gold { animation: pulse-gold 2s ease-in-out infinite; }
.animate-shimmer {
    background: linear-gradient(90deg, #f5c518 0%, #ffd54f 25%, #ffffff 50%, #ffd54f 75%, #f5c518 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ============================================
   NAVIGATION
   ============================================ */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(10,10,10,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(245,197,24,0.1);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
@media (min-width: 1024px) { .nav-inner { height: 80px; } }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo img { height: 36px; width: auto; display: block; }
.nav-logo span { font-size: 1.25rem; font-weight: 700; }
.nav-menu { display: none; }
@media (min-width: 768px) { .nav-menu { display: flex; align-items: center; gap: 2rem; } }
.nav-menu a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    transition: color 0.2s ease;
}
.nav-menu a:hover,
.nav-menu a.current-menu-item a { color: #f5c518; }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-actions .btn-outline-gold { display: none; }
@media (min-width: 640px) { .nav-actions .btn-outline-gold { display: inline-flex; } }
.mobile-menu-btn { display: flex; padding: 0.5rem; color: #9ca3af; }
.mobile-menu-btn:hover { color: #f5c518; }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }

.mobile-menu {
    display: none;
    background: rgba(13,13,13,0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(245,197,24,0.1);
    padding: 1rem 0;
}

.mobile-menu a {
    display: block;
    padding: 0.625rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    transition: color 0.2s ease;
}

.mobile-menu a:hover {
    color: #f5c518;
}

.mobile-menu .btn-outline-gold {
    margin-top: 0.75rem;
    text-align: center;
    display: block;
}
.mobile-menu.open { display: block; }

/* Announcement Bar */
.announce-bar {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 40;
    background: #000000;
    border-bottom: 1px solid rgba(245,197,24,0.2);
    overflow: hidden;
    padding: 0.5rem 0;
}
@media (min-width: 1024px) { .announce-bar { top: 80px; } }
.announce-bar .inner {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}
.announce-bar span {
    font-size: 0.8rem;
    font-weight: 500;
    color: #f5c518;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
}
.live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 128px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(245,197,24,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245,197,24,0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(245,197,24,0.04) 0%, transparent 50%);
}
@media (min-width: 1024px) { .hero-section { padding-top: 144px; } }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245,197,24,0.1);
    border: 1px solid rgba(245,197,24,0.2);
    border-radius: 999px;
    padding: 6px 16px;
    margin-bottom: 1.5rem;
}
.hero-badge span { font-size: 0.75rem; font-weight: 600; color: #f5c518; text-transform: uppercase; letter-spacing: 0.1em; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.hero-stats .stat-num { font-size: 1.875rem; font-weight: 900; }
@media (min-width: 640px) { .hero-stats .stat-num { font-size: 2.25rem; } }
.hero-stats .stat-label { font-size: 0.75rem; color: #6b7280; margin-top: 4px; }
.hero-image-wrap {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(245,197,24,0.2);
}
.hero-image-wrap img { width: 100%; height: auto; object-fit: cover; }
.hero-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
}
.hero-rtp-card {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(245,197,24,0.2);
}
.rtp-bar-bg { width: 100%; background: #1a1a1a; border-radius: 999px; height: 6px; }
.rtp-bar-fill { background: linear-gradient(90deg, #f5c518, #e6b800); border-radius: 999px; height: 6px; }
.hero-float-badge {
    position: absolute;
    top: -1rem;
    right: -1rem;
    background: #f5c518;
    color: #0a0a0a;
    border-radius: 1rem;
    padding: 12px 16px;
    font-weight: 900;
    font-size: 0.875rem;
    text-align: center;
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(245,197,24,0.3);
}
.hero-decor-circle {
    position: absolute;
    border: 1px solid rgba(245,197,24,0.05);
    border-radius: 50%;
    animation: spin-slow 20s linear infinite;
}

/* ============================================
   SECTION COMMON
   ============================================ */
.section { padding: 80px 0; }
@media (min-width: 1024px) { .section { padding: 112px 0; } }
.section-alt { background: rgba(13,13,13,0.5); }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .tag {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f5c518;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
.section-header h2 { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.025em; }
@media (min-width: 640px) { .section-header h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .section-header h2 { font-size: 3rem; } }
.section-header p { color: #9ca3af; margin-top: 1rem; max-width: 672px; margin-left: auto; margin-right: auto; }

/* ============================================
   PROVIDERS
   ============================================ */
.providers-section { padding: 48px 0; border-top: 1px solid rgba(245,197,24,0.1); border-bottom: 1px solid rgba(245,197,24,0.1); background: rgba(13,13,13,0.5); }
.providers-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
}
.providers-grid .provider-item {
    flex: 1 1 0;
    min-width: 0;
}
@media (max-width: 639px) {
    .providers-grid {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .providers-grid .provider-item {
        flex: 0 0 calc(50% - 0.375rem);
        font-size: 0.75rem;
        padding: 0 8px;
        height: 56px;
    }
    .providers-grid .provider-item img {
        height: 28px;
    }
}
.provider-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    font-size: 0.875rem;
    font-weight: 700;
    color: #d1d5db;
    cursor: pointer;
    gap: 6px;
    padding: 0 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.provider-item:hover {
    border-color: rgba(245,197,24,0.4);
    box-shadow: 0 0 15px rgba(245,197,24,0.15);
}

/* ============================================
   GAME CARDS
   ============================================ */
.game-card {
    border-radius: 1rem;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}
.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(245,197,24,0.15);
    border-color: rgba(245,197,24,0.4);
}
.game-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.game-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.game-card:hover .game-card-image img { transform: scale(1.1); }
.game-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
}
.game-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.game-card-badge.hot { background: rgba(239,68,68,0.9); color: white; }
.game-card-badge.new { background: rgba(245,197,24,0.9); color: #0a0a0a; }
.game-card-rtp {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(10,10,10,0.8);
    backdrop-filter: blur(8px);
    color: #f5c518;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}
.game-card-play {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.game-card:hover .game-card-play { opacity: 1; }
.game-card-info { padding: 1rem; }
.game-card-info h3 { font-size: 0.875rem; font-weight: 700; color: white; }
.game-card-info p { font-size: 0.75rem; color: #6b7280; margin-top: 4px; }

/* ============================================
   FEATURE CARDS
   ============================================ */
.feature-card {
    padding: 2rem;
    border-radius: 1rem;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    transition: all 0.3s ease;
}
.feature-card:hover {
    border-color: rgba(245,197,24,0.5);
    box-shadow: 0 0 30px rgba(245,197,24,0.15);
}
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(245,197,24,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #f5c518;
}
.feature-card h3 { font-size: 1.125rem; font-weight: 700; color: white; margin-bottom: 0.75rem; }
.feature-card p { font-size: 0.875rem; color: #9ca3af; line-height: 1.625; }

/* ============================================
   PROMO CARDS
   ============================================ */
.promo-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(245,197,24,0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}
.promo-card:hover {
    border-color: rgba(245,197,24,0.5);
    box-shadow: 0 0 30px rgba(245,197,24,0.15);
}
.promo-card:hover img { transform: scale(1.05); }
.promo-card img {
    width: 100%;
    height: 256px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.promo-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,10,10,0.95), rgba(10,10,10,0.7), transparent);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.promo-card .tag { margin-bottom: 0.5rem; }
.promo-card h3 { font-size: 1.5rem; font-weight: 900; color: white; margin-bottom: 0.5rem; }
.promo-card p { font-size: 0.875rem; color: #d1d5db; margin-bottom: 1rem; max-width: 320px; }

/* ============================================
   WINNER CARDS
   ============================================ */
.winner-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #1a1a1a;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(245,197,24,0.2);
}
.winner-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(245,197,24,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5c518;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.winner-name { font-size: 0.875rem; font-weight: 700; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-game { font-size: 0.75rem; color: #6b7280; }
.winner-amount { font-size: 0.875rem; font-weight: 700; color: #4ade80; margin-top: 4px; }

/* ============================================
   BLOG CARDS
   ============================================ */
.blog-card {
    border-radius: 1rem;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    transition: all 0.3s ease;
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(245,197,24,0.15);
    border-color: rgba(245,197,24,0.4);
}
.blog-card-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img { transform: scale(1.05); }
.blog-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #f5c518;
    color: #0a0a0a;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}
.blog-card-info { padding: 1.25rem; }
.blog-card-date { font-size: 0.75rem; color: #6b7280; }
.blog-card-info h3 {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-top: 0.5rem;
    transition: color 0.2s ease;
}
.blog-card:hover .blog-card-info h3 { color: #f5c518; }
.blog-card-excerpt { font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem; }

/* Featured Blog Post */
.blog-featured {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 1rem;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    transition: all 0.3s ease;
}
@media (min-width: 768px) { .blog-featured { grid-template-columns: 1fr 1fr; } }
.blog-featured:hover {
    border-color: rgba(245,197,24,0.5);
    box-shadow: 0 20px 40px rgba(245,197,24,0.15);
}
.blog-featured-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
@media (min-width: 768px) { .blog-featured-image { aspect-ratio: auto; } }
.blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.blog-featured:hover .blog-featured-image img { transform: scale(1.05); }
.blog-featured-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-featured-content h2 {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    margin-top: 0.75rem;
    transition: color 0.2s ease;
}
.blog-featured:hover .blog-featured-content h2 { color: #f5c518; }
.blog-featured-content p { font-size: 0.875rem; color: #9ca3af; margin-top: 0.75rem; line-height: 1.625; }
.blog-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f5c518;
    margin-top: 1.5rem;
    transition: gap 0.2s ease;
}
.blog-featured:hover .blog-featured-link { gap: 0.75rem; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, rgba(245,197,24,0.1), #0a0a0a, rgba(245,197,24,0.05));
}
.cta-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: rgba(245,197,24,0.1);
    border-radius: 50%;
    filter: blur(100px);
}
.cta-content { position: relative; z-index: 1; text-align: center; }
.cta-content h2 { font-size: 1.875rem; font-weight: 900; letter-spacing: -0.025em; }
@media (min-width: 640px) { .cta-content h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .cta-content h2 { font-size: 3rem; } }
.cta-content p { color: #9ca3af; font-size: 1.125rem; margin-top: 1rem; max-width: 672px; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ============================================
   FAQ
   ============================================ */
.faq-item {
    border-radius: 1rem;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    overflow: hidden;
    margin-bottom: 1rem;
}
.faq-btn {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.faq-btn svg { transition: transform 0.3s ease; flex-shrink: 0; }
.faq-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-content { display: none; padding: 0 1.5rem 1.5rem; }
.faq-content.open { display: block; }
.faq-content p { font-size: 0.875rem; color: #9ca3af; line-height: 1.625; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: #0d0d0d;
    border-top: 1px solid rgba(245,197,24,0.1);
    padding-top: 64px;
    padding-bottom: 32px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 48px;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand p { font-size: 0.875rem; color: #6b7280; line-height: 1.625; margin-top: 1rem; margin-bottom: 1rem; }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: all 0.2s ease;
}
.footer-social a:hover { color: #f5c518; border-color: rgba(245,197,24,0.5); }
.footer-col h4 { font-size: 0.875rem; font-weight: 700; color: white; margin-bottom: 1rem; }
.footer-col ul li { margin-bottom: 0.75rem; }
.footer-col ul a { font-size: 0.875rem; color: #6b7280; transition: color 0.2s ease; }
.footer-col ul a:hover { color: #f5c518; }
.footer-col .contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}
.footer-col .contact-item svg { color: #f5c518; flex-shrink: 0; }
.footer-col .contact-item a:hover { color: #f5c518; }
.footer-bottom {
    border-top: 1px solid rgba(245,197,24,0.1);
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom p { font-size: 0.75rem; color: #4b5563; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 0.75rem; color: #4b5563; transition: color 0.2s ease; }
.footer-bottom-links a:hover { color: #f5c518; }

/* ============================================
   FLOATING CTA (MOBILE)
   ============================================ */
.floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(245,197,24,0.2);
    padding: 12px;
    display: flex;
    gap: 12px;
}
@media (min-width: 768px) { .floating-cta { display: none; } }
.floating-cta a { flex: 1; text-align: center; padding: 12px; font-size: 0.875rem; font-weight: 700; border-radius: 12px; }

/* ============================================
   BLOG PAGE SPECIFIC
   ============================================ */
.blog-header {
    padding: 0 0 24px 0;
}
.blog-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 50%, rgba(245,197,24,0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(245,197,24,0.04) 0%, transparent 50%);
}
.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    position: relative;
}
.blog-breadcrumb a:hover { color: #f5c518; }
.blog-breadcrumb .current { color: #f5c518; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; position: relative; }
.blog-filter button {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(245,197,24,0.2);
    background: #1a1a1a;
    color: #9ca3af;
    transition: all 0.2s ease;
    cursor: pointer;
}
.blog-filter button:hover,
.blog-filter button.active {
    background: #f5c518;
    color: #0a0a0a;
    border-color: #f5c518;
}

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination a,
.pagination span {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    color: #9ca3af;
    transition: all 0.2s ease;
}
.pagination a:hover { color: #f5c518; border-color: rgba(245,197,24,0.5); }
.pagination .current { background: #f5c518; color: #0a0a0a; font-weight: 700; border-color: #f5c518; }

/* ============================================
   SINGLE POST
   ============================================ */
.single-header { margin-bottom: 2rem; }
.single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.single-meta .cat-badge {
    font-size: 10px;
    font-weight: 700;
    color: #f5c518;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.single-meta time { font-size: 0.75rem; color: #6b7280; }
.single-title { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; }
@media (min-width: 640px) { .single-title { font-size: 3rem; } }
@media (min-width: 1024px) { .single-title { font-size: 3.75rem; } }
.single-featured { border-radius: 1rem; overflow: hidden; border: 1px solid rgba(245,197,24,0.2); margin-bottom: 2.5rem; }
.single-featured img { width: 100%; height: auto; }

/* Prose (Article Content) */
.prose h2 { font-size: 1.5rem; font-weight: 800; color: white; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { font-size: 1.125rem; font-weight: 700; color: white; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p { color: #9ca3af; font-size: 0.9375rem; line-height: 1.8; margin-bottom: 1.25rem; }
.prose strong { color: #f5c518; font-weight: 600; }
.prose ul, .prose ol { color: #9ca3af; font-size: 0.9375rem; line-height: 1.8; margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { color: #f5c518; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #ffd54f; }
.prose blockquote { border-left: 3px solid #f5c518; padding-left: 1.25rem; margin: 1.5rem 0; font-style: italic; color: #d1d5db; }
.prose img { border-radius: 1rem; margin: 2rem 0; }
.prose .wp-block-image img { border-radius: 1rem; }
.prose .callout {
    background: rgba(245,197,24,0.05);
    border: 1px solid rgba(245,197,24,0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.prose .callout p { color: #d1d5db; margin-bottom: 0; }

/* Single Layout */
.single-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .single-layout { grid-template-columns: 1fr 280px; } }

/* Sidebar */
.sidebar { display: none; }
@media (min-width: 1024px) { .sidebar { display: block; } }
.sidebar-sticky { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 2rem; }
.sidebar-card {
    background: #1a1a1a;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(245,197,24,0.2);
}
.sidebar-card h4 { font-size: 0.875rem; font-weight: 700; color: white; margin-bottom: 1rem; }
.toc a {
    display: block;
    font-size: 0.875rem;
    color: #9ca3af;
    padding: 6px 0 6px 1rem;
    border-left: 2px solid rgba(245,197,24,0.1);
    transition: all 0.2s ease;
}
.toc a:hover, .toc a.active { color: #f5c518; border-left-color: #f5c518; }
.sidebar-cta { text-align: center; background: linear-gradient(to bottom right, rgba(245,197,24,0.1), #1a1a1a); }
.sidebar-cta .icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(245,197,24,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: #f5c518;
}
.sidebar-cta h4 { margin-bottom: 0.5rem; }
.sidebar-cta p { font-size: 0.75rem; color: #9ca3af; margin-bottom: 1rem; }
.sidebar-popular a { display: block; margin-bottom: 1rem; }
.sidebar-popular a:last-child { margin-bottom: 0; }
.sidebar-popular h5 { font-size: 0.75rem; font-weight: 700; color: #d1d5db; transition: color 0.2s ease; }
.sidebar-popular a:hover h5 { color: #f5c518; }
.sidebar-popular span { font-size: 10px; color: #4b5563; margin-top: 4px; display: block; }

/* Tags & Share */
.post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(245,197,24,0.1); }
.post-tags span { font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-right: 0.5rem; }
.post-tags a {
    font-size: 0.75rem;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    padding: 4px 12px;
    border-radius: 999px;
    color: #9ca3af;
    transition: all 0.2s ease;
}
.post-tags a:hover { color: #f5c518; border-color: rgba(245,197,24,0.5); }
.post-share { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.post-share span { font-size: 0.75rem; font-weight: 600; color: #6b7280; }
.post-share a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: all 0.2s ease;
}
.post-share a:hover { color: #f5c518; border-color: rgba(245,197,24,0.5); }

/* Related Posts */
.related-posts { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(245,197,24,0.1); }
.related-posts h3 { font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 1.5rem; }
.related-post {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    transition: all 0.3s ease;
}
.related-post:hover { border-color: rgba(245,197,24,0.5); box-shadow: 0 0 20px rgba(245,197,24,0.1); }
.related-post img { width: 112px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.related-post h4 { font-size: 0.875rem; font-weight: 700; color: white; transition: color 0.2s ease; }
.related-post:hover h4 { color: #f5c518; }
.related-post span { font-size: 10px; color: #4b5563; margin-top: 4px; display: block; }

/* ============================================
   SEARCH & 404
   ============================================ */
.search-form { display: flex; gap: 0.5rem; }
.search-form input {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid rgba(245,197,24,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    color: white;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}
.search-form input:focus { border-color: #f5c518; }
.search-form input::placeholder { color: #6b7280; }
.error-page { text-align: center; padding: 120px 0; }
.error-page h1 { font-size: 6rem; font-weight: 900; }
.error-page p { color: #9ca3af; margin-top: 1rem; margin-bottom: 2rem; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #f5c518; border-radius: 4px; }

/* ============================================
   BODY PADDING FOR FLOATING CTA
   ============================================ */
@media (max-width: 767px) {
    body { padding-bottom: 70px; }
    .hero-section { padding-bottom: 100px; }
}
/* ============================================
   WORDPRESS DEFAULT OVERRIDE (FORCE DARK)
   Ini menangkap semua sisa style WordPress
   yang lolos dan membuat elemen putih
   ============================================ */

/* Body & Html — pastikan tidak ada override */
html, body {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

/* WordPress admin bar (kalau login) */
#wpadminbar {
    background: #111111 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(245,197,24,0.1) !important;
}
#wpadminbar * {
    color: #d1d5db !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus {
    background: #1a1a1a !important;
    color: #f5c518 !important;
}

/* Gutenberg/Block editor leftover — hapus semua background putih */
.wp-block, .entry-content, .post-content,
article .entry-content, .page-content,
.wp-block-group, .wp-block-column,
.wp-block-cover, .wp-block-media-text {
    background: transparent !important;
    color: #ffffff !important;
}

/* Links di content */
.entry-content a, .post-content a, .prose a {
    color: #f5c518 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.entry-content a:hover, .prose a:hover {
    color: #ffd54f !important;
}

/* Paragraph di content */
.entry-content p, .post-content p {
    color: #9ca3af !important;
    line-height: 1.8 !important;
    margin-bottom: 1.25rem !important;
}

/* Headings di content */
.entry-content h1, .post-content h1,
.entry-content h2, .post-content h2,
.entry-content h3, .post-content h3,
.entry-content h4, .post-content h4,
.entry-content h5, .post-content h5,
.entry-content h6, .post-content h6 {
    color: #ffffff !important;
}

/* Lists */
.entry-content ul, .post-content ul {
    list-style: disc !important;
    padding-left: 1.5rem !important;
    color: #9ca3af !important;
}
.entry-content ol, .post-content ol {
    list-style: decimal !important;
    padding-left: 1.5rem !important;
    color: #9ca3af !important;
}
.entry-content li, .post-content li {
    color: #9ca3af !important;
    margin-bottom: 0.5rem !important;
}

/* Blockquote */
.entry-content blockquote, .post-content blockquote {
    border-left: 3px solid #f5c518 !important;
    padding-left: 1.25rem !important;
    margin: 1.5rem 0 !important;
    color: #d1d5db !important;
    background: transparent !important;
}

/* Images di content */
.entry-content img, .post-content img {
    border-radius: 1rem !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Tables */
.entry-content table, .post-content table {
    border-collapse: collapse !important;
    width: 100% !important;
    color: #d1d5db !important;
}
.entry-content th, .post-content th {
    background: #1a1a1a !important;
    color: #f5c518 !important;
    border: 1px solid rgba(245,197,24,0.2) !important;
    padding: 0.75rem 1rem !important;
}
.entry-content td, .post-content td {
    background: #111111 !important;
    color: #d1d5db !important;
    border: 1px solid rgba(245,197,24,0.1) !important;
    padding: 0.75rem 1rem !important;
}

/* Pre & Code */
.entry-content pre, .post-content pre {
    background: #111111 !important;
    border: 1px solid rgba(245,197,24,0.15) !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
    color: #d1d5db !important;
    overflow-x: auto !important;
}
.entry-content code, .post-content code {
    background: rgba(245,197,24,0.1) !important;
    color: #f5c518 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.875em !important;
}
.entry-content pre code, .post-content pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Comments — force dark */
#comments, .comments-area, .comment-list,
.comment-respond, .comment-form,
.comment-author, .comment-content,
.comment-meta, .comment-notes,
#respond, .logged-in-as {
    background: transparent !important;
    color: #d1d5db !important;
}
#comments h2, .comments-area h2, .comments-title {
    color: #ffffff !important;
}
.comment-form input, .comment-form textarea {
    background: #1a1a1a !important;
    border: 1px solid rgba(245,197,24,0.2) !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    font-family: inherit !important;
}
.comment-form input:focus, .comment-form textarea:focus {
    border-color: #f5c518 !important;
    outline: none !important;
}
.comment-form input::placeholder, .comment-form textarea::placeholder {
    color: #6b7280 !important;
}
.comment-form .submit {
    background: linear-gradient(135deg, #f5c518, #e6b800) !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 2rem !important;
    cursor: pointer !important;
}
.comment-form label {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.comment-author a {
    color: #f5c518 !important;
}

/* Pagination — dark */
.nav-links, .pagination, .page-numbers {
    color: #9ca3af !important;
}
.page-numbers.current, .nav-links .current {
    background: #f5c518 !important;
    color: #0a0a0a !important;
    border-color: #f5c518 !important;
}
.page-numbers, .nav-links a, .nav-links span {
    background: #1a1a1a !important;
    border: 1px solid rgba(245,197,24,0.2) !important;
    color: #9ca3af !important;
}
.page-numbers:hover, .nav-links a:hover {
    color: #f5c518 !important;
    border-color: rgba(245,197,24,0.5) !important;
}

/* Screen reader text — hide but accessible */
.screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

/* Remove any white horizontal rules */
.entry-content hr, .post-content hr {
    border-color: rgba(245,197,24,0.15) !important;
    background: rgba(245,197,24,0.15) !important;
}

/* Captions */
.wp-caption, .wp-caption-text {
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    padding: 0.5rem 0 !important;
}
/* ============================================
   COLOR SYSTEM: GOLD + BLUE
   ============================================ */
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }

.btn-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}
.btn-blue:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 30px rgba(59,130,246,0.5);
    transform: translateY(-2px);
}
.btn-outline-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid #3b82f6;
    color: #3b82f6;
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 28px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
}
.btn-outline-blue:hover {
    background: #3b82f6;
    color: #ffffff;
}

.blue-text {
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blue-border { border: 1px solid rgba(59,130,246,0.2); }
.blue-border-hover:hover {
    border-color: rgba(59,130,246,0.5);
    box-shadow: 0 0 30px rgba(59,130,246,0.15);
}

/* ============================================
   HERO IMAGE — MOBILE RESPONSIVE FIX
   ============================================ */
.hero-image-wrap {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(245,197,24,0.2);
}

.hero-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Mobile: banner lebih pendek */
@media (max-width: 767px) {
    .hero-image-wrap {
        border-radius: 1rem;
        max-height: 280px;
        overflow: hidden;
    }
    .hero-image-wrap img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        object-position: center top;
    }

    /* RTP card di mobile lebih kecil */
    .hero-rtp-card {
        padding: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
    }
    .hero-rtp-card .flex.justify-between.items-center {
        margin-bottom: 0.25rem;
    }
    .hero-rtp-card .text-sm {
        font-size: 0.75rem;
    }
    .hero-rtp-card .text-xs {
        font-size: 0.6875rem;
    }
    .hero-rtp-card .flex.justify-between.text-xs {
        margin-bottom: 0.25rem;
    }

    /* Float badge di mobile lebih kecil */
    .hero-float-badge {
        top: -0.5rem;
        right: -0.5rem;
        padding: 8px 12px;
        font-size: 0.75rem;
        border-radius: 0.75rem;
    }

    /* Hero grid stack */
    .hero-section {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: center;
    }

    /* Hero title mobile */
    .hero-grid h1 {
        font-size: 1.75rem !important;
        line-height: 1.1;
    }
    .hero-grid h1 span:last-child {
        font-size: 1.375rem !important;
    }

    /* Hero stats mobile */
    .hero-stats {
        gap: 1rem;
        margin-top: 1.5rem;
    }
    .hero-stats .stat-num {
        font-size: 1.5rem;
    }

    /* Hero buttons mobile */
    .hero-grid .flex.flex-wrap.gap-4 {
        flex-direction: column;
        gap: 0.75rem;
    }
    .hero-grid .flex.flex-wrap.gap-4 a {
        text-align: center;
        justify-content: center;
        padding: 14px 24px;
        font-size: 0.9375rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-image-wrap {
        max-height: 400px;
        overflow: hidden;
    }
    .hero-image-wrap img {
        height: 400px;
        object-fit: cover;
    }
}

/* Desktop — tetap natural */
@media (min-width: 1024px) {
    .hero-image-wrap img {
        height: auto;
    }
    @media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .hero-text-top { grid-column: 1; grid-row: 1; }
    .hero-slideshow-wrap { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
    .hero-text-bottom { grid-column: 1; grid-row: 2; }
    }
}

/* ============================================
   UPDATE EXISTING ELEMENTS WITH BLUE
   ============================================ */

/* Blog card category badge — alternating gold & blue */
.blog-card-cat.alt-blue {
    background: #3b82f6;
    color: #ffffff;
}

/* Game card badge — blue variant */
.game-card-badge.blue {
    background: rgba(59,130,246,0.9);
    color: white;
}

/* Provider items — blue glow on hover */
.provider-item:hover {
    filter: grayscale(0%) brightness(1);
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 0 15px rgba(59,130,246,0.15);
}

/* Feature card — blue icon variant */
.feature-icon.blue {
    background: rgba(59,130,246,0.1);
    color: #3b82f6;
}

/* Winner amount — keep green but add blue variant */
.winner-amount.blue {
    color: #60a5fa;
}

/* Section tag — blue variant */
.section-header .tag.blue {
    color: #60a5fa;
}

/* Blog filter button blue */
.blog-filter button.active-blue,
.blog-filter button.active-blue:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Promo card — blue glow */
.promo-card.blue-glow:hover {
    box-shadow: 0 0 30px rgba(59,130,246,0.2);
}

/* Announcement bar — blue accent */
.announce-bar .inner span {
    color: #f5c518;
}

/* Footer bottom link — blue on hover sudah ada, tambah glow */
.footer-bottom-links a:hover {
    color: #3b82f6;
}

/* Sidebar TOC active — blue variant */
.toc a.active-blue {
    color: #3b82f6;
    border-left-color: #3b82f6;
}

/* Pagination current — blue variant */
.pagination .current-blue {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* CTA section — gold + blue gradient */
.cta-section-blue {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(245,197,24,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(59,130,246,0.08) 0%, transparent 50%),
        #0a0a0a;
}
.cta-glow-blue {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: rgba(59,130,246,0.08);
    border-radius: 50%;
    filter: blur(100px);
}

/* Hero section — add subtle blue */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(59,130,246,0.03), transparent);
    pointer-events: none;
}

/* Decorative circles — add blue one */
.hero-decor-circle.blue {
    border-color: rgba(59,130,246,0.05);
}

/* Float badge — blue variant */
.hero-float-badge.blue {
    background: #3b82f6;
    box-shadow: 0 10px 30px rgba(59,130,246,0.3);
}

/* Scrollbar — gold + blue gradient */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f5c518, #3b82f6);
    border-radius: 4px;
}

/* ============================================
   HERO SLIDESHOW
   ============================================ */
.hero-slideshow {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(245,197,24,0.2);
    aspect-ratio: 700 / 467;
    width: 100%;
}

.hero-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slideshow .slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-slideshow .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hero-slideshow .slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.6), transparent 50%);
    z-index: 2;
}

.hero-slideshow-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-slideshow-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-slideshow-dots button.active {
    background: #f5c518;
    width: 24px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .hero-slideshow {
        border-radius: 1rem;
        aspect-ratio: 700 / 467;
    }
    .hero-slideshow-dots {
        bottom: 12px;
    }
    .hero-slideshow-dots button {
        width: 6px;
        height: 6px;
    }
    .hero-slideshow-dots button.active {
        width: 18px;
        height: 6px;
    }
}
/* ============================================
   NAVIGATION MENU STYLES
   ============================================ */
.nav-menu a {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #f5c518, #3b82f6);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-menu a:hover {
    color: #ffffff;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Active state — HANYA untuk link yang bukan hash (#) */
.nav-menu li.current-menu-item > a[href^="http"],
.nav-menu li.current-page-item > a[href^="http"] {
    color: #f5c518;
}

.nav-menu li.current-menu-item > a[href^="http"]::after,
.nav-menu li.current-page-item > a[href^="http"]::after {
    width: 100%;
}

/* Focus state */
.nav-menu a:focus-visible {
    outline: 2px solid #f5c518;
    outline-offset: 4px;
    border-radius: 4px;
}