/* ==========================================================================
   1. GLOBAL THEME & FONTS (Premium Cinema Dark Gold)
   ========================================================================== */
@import url('https://googleapis.com');

body { 
    background-color: #030303; 
    color: #ffffff; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0; 
    padding-top: 140px !important; 
    padding-bottom: 95px;
    position: relative;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* 1. Efek Gradasi Ambient Sinematik (Mewah & Tidak Polos Pekat) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Memberikan efek pencahayaan emas redup yang memancar dari tengah atas layar */
    background: 
        radial-gradient(circle at 50% 0%, rgba(189, 154, 95, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 30%, #120e08 0%, #030303 70%); 
    z-index: -3; 
}

/* 2. Efek Pola Grid Geometris Tipis (Menjaga Struktur Tetap Rapi) */
.bg-grid-pattern {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(189, 154, 95, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(189, 154, 95, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center;
    z-index: -2;
}

/* 3. Efek Partikel Cahaya Emas Asimetris (Bergerak Lambat & Sangat Halus) */
.bg-particles {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    /* Penempatan posisi bintik cahaya emas yang menyebar alami */
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(223, 186, 107, 0.2) 1.5px, transparent 10px),
        radial-gradient(circle at 80% 20%, rgba(223, 186, 107, 0.15) 2px, transparent 12px),
        radial-gradient(circle at 35% 65%, rgba(223, 186, 107, 0.22) 1px, transparent 8px),
        radial-gradient(circle at 85% 75%, rgba(223, 186, 107, 0.12) 2.5px, transparent 15px),
        radial-gradient(circle at 50% 85%, rgba(223, 186, 107, 0.18) 1.5px, transparent 10px);
    background-size: 100% 100%;
    animation: floatingAtmosphere 15s infinite ease-in-out;
}

/* Animasi Parallax Melayang Lambat (Sangat Ringan, Bebas Lag di HP) */
@keyframes floatingAtmosphere {
    0%, 100% { 
        transform: translateY(0px) scale(1); 
        opacity: 0.6; 
    }
    50% { 
        transform: translateY(-25px) scale(1.03); 
        opacity: 1; 
        filter: blur(0.5px); /* Memberikan efek sinematik blur tipis saat melayang */
    }
}
/* ==========================================================================
   2. HEADER & ADVANCED LOGO ANIMATION (Luxury Metallic & Gold Glow)
   ========================================================================== */
header {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 75px; 
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.96), rgba(8, 8, 8, 0.98));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; 
    border-bottom: 2px solid #dfba6b;
    /* Memberikan efek bayangan tajam di bawah header agar konten game terlihat terpisah */
    box-shadow: 0 4px 25px rgba(0,0,0,0.9), inset 0 -1px 0 rgba(223, 186, 107, 0.2);
}

/* Wadah Logo Utama dengan Efek Detak Jantung Sinematik */
.logo-link {
    display: inline-block;
    position: relative;
    overflow: hidden; /* Mengunci efek kilatan cahaya agar hanya berada di dalam area logo */
    padding: 4px 10px;
    border-radius: 8px;
    animation: detakLogoPremium 2.5s infinite ease-in-out; 
}

/* Efek Lapisan Kilatan Cahaya Perak yang Menyapu Logo Secara Berkala */
.logo-link::after {
    content: "";
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Membuat garis kilatan menjadi miring elegan */
    animation: logamMenyapu 4s infinite ease-in-out;
    animation-delay: 1s; /* Jeda waktu agar kilatan muncul bergantian dengan detakan */
}

/* Pengaturan Visual Gambar Logo */
.header-logo {
    max-height: 48px; 
    width: auto; 
    object-fit: contain; 
    display: block;
    /* Aura cahaya emas lembut di belakang logo */
    filter: drop-shadow(0 0 8px rgba(223, 186, 107, 0.5));
    transition: filter 0.3s ease;
}

/* ==========================================================================
   LOGIKA ANIMASI HEADER LOGO (Hardware Accelerated)
   ========================================================================== */

/* 1. Animasi Detak Mewah & Aura Menyala */
@keyframes detakLogoPremium {
    0%, 100% { 
        transform: scale(1); 
        filter: drop-shadow(0 0 6px rgba(189, 154, 95, 0.4)); 
    }
    50% { 
        transform: scale(1.03); /* Membesar sangat halus (tidak berlebihan) */
        filter: drop-shadow(0 0 16px rgba(223, 186, 107, 0.8)); /* Aura emas melebar terang */
    }
}

/* 2. Animasi Kilatan Perak Menyapu (Metallic Sweep Effect) */
@keyframes logamMenyapu {
    0% { left: -150%; }
    30%, 100% { left: 150%; } /* Menyapu cepat dari kiri ke kanan lalu istirahat */
}

/* Efek Interaktif: Saat Logo Disentuh Jari Member */
.logo-link:hover .header-logo, .logo-link:active .header-logo {
    filter: drop-shadow(0 0 20px rgba(223, 186, 107, 1)) brightness(1.1);
    transform: scale(1.02);
}

/* ==========================================================================
   3. RUNNING TEXT & UPDATE INFO
   ========================================================================== */
.running-text-container {
    position: fixed; top: 75px; left: 0; width: 100%;
    background: #090909; color: #dfba6b; font-size: 11px; font-weight: 800;
    padding: 8px 0; border-bottom: 1px solid #1f1f1f; z-index: 999;
    letter-spacing: 1px; text-transform: uppercase;
    box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5);
}

.update-info {
    text-align: center; font-size: 12px; color: #aaaaaa;
    margin: 15px 0 20px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   4. NAVIGATION TAB PROVIDER (Modern Button Layout)
   ========================================================================== */
.tab-menu { 
    display: flex; gap: 10px; justify-content: flex-start; 
    margin-bottom: 25px; overflow-x: auto; padding: 5px 15px;
    scrollbar-width: none;
}
.tab-menu::-webkit-scrollbar { display: none; }

.btn-tab { 
    background: rgba(20, 20, 20, 0.6); 
    color: #999999; 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 12px 24px; 
    border-radius: 8px; 
    cursor: pointer; 
    white-space: nowrap; 
    font-weight: 800; 
    font-size: 13px; 
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.btn-tab:hover {
    color: #ffffff;
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(223, 186, 107, 0.4);
}

.btn-tab.active { 
    background: linear-gradient(135deg, #dfba6b 0%, #a38243 100%); 
    color: #000000; 
    border-color: #ffe39d;
    box-shadow: 0 4px 15px rgba(163, 130, 67, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ==========================================================================
   5. GAME GRID CONTAINER & KARTU MODERN (Glow Effect)
   ========================================================================== */
.container { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* Tetap 2 kolom presisi di Mobile */
    gap: 14px; 
    padding: 0 14px; 
}

@media (min-width: 600px) {
    .container { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; padding: 0 20px; }
    .tab-menu { justify-content: center; }
}

.card { 
    background: rgba(18, 18, 18, 0.8); 
    border-radius: 14px; 
    overflow: hidden; 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    position: relative; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.card:hover { 
    transform: translateY(-6px);
    border-color: #dfba6b; 
    box-shadow: 0 12px 30px rgba(223, 186, 107, 0.25);
}

.image-container { 
    position: relative; width: 100%; aspect-ratio: 1/1; background: #121212; 
}
.image-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Kabut hitam transparan tipis di kaki gambar */
    background: linear-gradient(to top, rgba(19, 19, 19, 0.9) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.image-container img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.5s ease;
}
.card:hover .image-container img {
    transform: scale(1.06); /* Efek zoom gambar halus saat dihover */
}
.overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.85) !important; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
    opacity: 0 !important; /* WAJIB AWALNYA NOL (TERSEMBUNYI) */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; 
    z-index: 10; 
}

/* Muncul hanya saat kartu benar-benar disentuh / dihover kursor */
.card:hover .overlay { 
    opacity: 1 !important; 
    visibility: visible;
}

.btn-gold { 
    background: linear-gradient(135deg, #ffe39d 0%, #b38600 100%); 
    color: #000000; border: none; padding: 10px 0; border-radius: 25px; 
    font-weight: 900; text-decoration: none; font-size: 11px; text-align: center; width: 85%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); letter-spacing: 0.5px;
    transition: transform 0.2s, filter 0.2s;
}
.btn-gold:hover { transform: scale(1.05); filter: brightness(1.1); }

/* ==========================================================================
   6. AREA DATA RTP BAR GRADIENT (Clean, Neon-Style & Animated)
   ========================================================================== */
.rtp-area { 
    padding: 14px 12px; 
    background: #131313; 
    border-top: 1px solid rgba(255,255,255,0.03); 
}
.game-title { 
    font-size: 11px !important; 
    font-weight: 800 !important; 
    color: #ffffff !important; 
    text-align: center; 
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    padding: 0 6px !important;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}


.game-title::before {
    content: "🔥 ";
    font-size: 11px;
    filter: drop-shadow(0 0 3px #ff4b2b);
}

.rtp-bar-bg { 
    background: #080808; 
    height: 20px; 
    border-radius: 30px; 
    overflow: hidden; 
    position: relative; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.rtp-bar-fill {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 30px;
    background-size: 30px 30px; /* Ukuran pola garis bergerak */
    transition: width 1.2s cubic-bezier(0.1, 0.8, 0.3, 1);
}

/* efek kilatan cahaya menyapu bar dari kiri ke kanan */
.rtp-bar-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, 0) 25%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0) 75%
    );
    z-index: 2;
    background-size: 200% 100%;
    animation: shineBarEffect 3s infinite linear;
}

/* 3 Kategori Kode Warna Neon Berpola Garis Bergerak */
.rtp-high { 
    background-image: linear-gradient(
        45deg, 
        #00ff87 25%, #27ae60 25%, #27ae60 50%, 
        #00ff87 50%, #00ff87 75%, #27ae60 75%, #27ae60
    );
    box-shadow: 0 0 12px rgba(0, 255, 135, 0.5); 
    animation: moveBarStripes 2s infinite linear; /* Pastikan nama & durasi benar */
} /* HIJAU BERGERAK (76% - 100%) */

.rtp-mid { 
    background-image: linear-gradient(
        45deg, 
        #ff9f43 25%, #ffb142 25%, #ffb142 50%, 
        #ff9f43 50%, #ff9f43 75%, #ffb142 75%, #ffb142
    );
    box-shadow: 0 0 15px rgba(255, 159, 67, 0.6); 
    animation: moveBarStripes 2s infinite linear;
}  /* SEKARANG MENJADI ORANGE AMBER / EMAS SEGAR (51% - 75%) */

.rtp-low { 
    background-image: linear-gradient(
        45deg, 
        #ff2a2a 25%, #990000 25%, #990000 50%, 
        #ff2a2a 50%, #ff2a2a 75%, #990000 75%, #990000
    );
    box-shadow: 0 0 15px rgba(255, 42, 42, 0.5); 
    animation: moveBarStripes 2s infinite linear; /* Kecepatan disamakan menjadi 2s agar gerakannya lincah */
} /* SEKARANG MENJADI MERAH NEON BERGARIS TEGAS (50% Ke Bawah) */
/* KEYFRAMES ANIMASI BERGERAK (PASTIKAN NAMANYA SAMA PERSIS) */
@keyframes moveBarStripes {
    0% { background-position: 0 0; }
    100% { background-position: 30px 0; }
}

.rtp-text-center {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; 
    font-size: 11px; font-weight: 900; color: #ffffff; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.9); z-index: 3; /* Naikkan z-index ke 3 agar teks di atas kilatan */
}

/* KEYFRAMES ANIMASI BERGERAK (Taruh di sini agar rapi) */
@keyframes moveBarStripes {
    0% { background-position: 0 0; }
    100% { background-position: 30px 0; }
}

@keyframes shineBarEffect {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   7. FOOTER NAVIGATION (Glassmorphism Modern)
   ========================================================================== */
footer { 
    position: fixed; bottom: 0; left: 0; width: 100%; height: 68px; 
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex; justify-content: space-around; align-items: center; 
    z-index: 1000; border-top: 1px solid rgba(189, 154, 95, 0.4); 
    box-shadow: 0 -5px 25px rgba(0,0,0,0.7);
}

.nav-item { 
    text-align: center; text-decoration: none; width: 25%; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    font-size: 10px; font-weight: 800; color: #ffffff !important; letter-spacing: 0.3px;
    transition: transform 0.2s;
}
.nav-item:active { transform: scale(0.95); }
/* ==========================================================================
   PERBAIKAN FOOTER: EFEK DENYUT NEON INTERAKTIF (PULSE EFFECTS)
   ========================================================================== */

/* Pengaturan Dasar Ikon Menu Footer Navigasi */
.nav-item img { 
    width: 24px; 
    height: 24px; 
    object-fit: contain; 
    border-radius: 50%; /* Membuat area denyut melingkar rapi */
    transition: all 0.3s ease;
}

/* 1. Efek Denyut Khusus WHATSAPP (Hijau Neon Menyala) */
.nav-item:nth-child(1) img {
    animation: pulseWhatsapp 2s infinite ease-in-out;
}

/* 2. Efek Denyut Khusus DAFTAR (Emas Berkilau) */
.nav-item:nth-child(2) img {
    animation: pulseGold 2s infinite ease-in-out;
}

/* 3. Efek Denyut Khusus LOGIN (Emas Berkilau) */
.nav-item:nth-child(3) img {
    animation: pulseGold 2s infinite ease-in-out;
}

/* 4. Efek Denyut Khusus VIP ACCESS (Putih Perak / Silver) */
.nav-item:nth-child(4) img {
    animation: pulseSilver 2s infinite ease-in-out;
}

/* ==========================================================================
   LOGIKA TIMING TIMELINE ANIMASI BERDENYUT (Murni CSS - Super Ringan)
   ========================================================================== */
   
/* Keyframes Denyut Hijau WhatsApp */
@keyframes pulseWhatsapp {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Keyframes Denyut Emas Daftar & Login */
@keyframes pulseGold {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(223, 186, 107, 0.7); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(223, 186, 107, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(223, 186, 107, 0); }
}

/* Keyframes Denyut Silver VIP Access */
@keyframes pulseSilver {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Efek Tambahan: Saat Tombol Ditahan Jari Member, Animasi Berhenti Sejenak */
.nav-item:hover img, .nav-item:active img {
    animation-play-state: paused;
    transform: scale(1.12);
    filter: brightness(1.2);
}

/* ==========================================================================
   8. RESPONSIVE ADJUSTMENT MOBILE SIZES
   ========================================================================== */
@media (max-width: 480px) {
    body { padding-top: 120px !important; }
    header { height: 65px; }
    .running-text-container { top: 65px; padding: 6px 0; font-size: 10px; }
    .btn-tab { padding: 10px 18px; font-size: 12px; border-radius: 6px; }
    .container { gap: 10px; padding: 0 10px; }
    .card { border-radius: 10px; }
    .rtp-bar-bg { height: 18px; }
    .rtp-text-center { font-size: 10px; }
    footer { height: 62px; }
}
/* ==========================================================================
   9. STYLING SEPARATOR PROVIDER (Luxury Desktop & Mobile Divider)
   ========================================================================= */
.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 14px;
}

/* 1. Pengaturan Judul Pembatas Provider yang Super Tegas & Mewah */
.provider-section-title {
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    
    /* Tambahkan spasi vertikal yang lebar agar tidak menempel dengan game di atasnya */
    margin: 60px 0 20px 0; 
    padding: 0 0 12px 14px;
    
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(223, 186, 107, 0.4);
    clear: both;
    position: relative;
}

/* Garis Tegak Emas di Samping Kiri Tulisan */
.provider-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #dfba6b, #a38243);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(223, 186, 107, 0.6);
}

/* 2. Garis Horizontal Transparan Menyala di Bawah Tulisan Kategori */
.provider-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 14px; /* Sejajar dengan teks judul */
    width: calc(100% - 14px);
    height: 1px;
    /* Garis memudar halus ke arah kanan */
    background: linear-gradient(90deg, rgba(223, 186, 107, 0.4) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
}

/* 3. Pengaturan Jarak Wadah Barisan Kartu */
.provider-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom di HP */
    gap: 14px;
    margin-bottom: 40px; /* Jarak aman di kaki grid sebelum masuk judul berikutnya */
}

/* Penyesuaian jumlah kolom otomatis di Layar Desktop PC Monitor */
@media (min-width: 600px) { .provider-grid-wrapper { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .provider-grid-wrapper { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .provider-grid-wrapper { grid-template-columns: repeat(5, 1fr); } }

/* Khusus untuk judul provider pertama (PRAGMATIC), kurangi spasi atas agar tidak terlalu turun */
.provider-section-title:first-of-type {
    margin-top: 25px;
}

/* ==========================================================================
   10. EFEK PETIR EMAS SINEMATIK (Cinematic Gold Thunder Flash)
   ========================================================================== */
.bg-thunder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Berada di belakang kartu game, di atas kabut hitam */
    pointer-events: none;
    
    /* Menggunakan gradasi cahaya putih-emas abstrak sebagai kilatan petir */
    background: radial-gradient(circle at 50% 20%, rgba(223, 186, 107, 0.25) 0%, rgba(255, 255, 255, 0.15) 30%, transparent 70%);
    opacity: 0;
    mix-blend-mode: screen;
    animation: thunderLightningStrike 7s infinite ease-in-out;
}

/* Logika Tempo Sambaran Petir Ganda Secara Acak (Realistis) */
@keyframes thunderLightningStrike {
    0%, 15%, 20%, 55%, 60%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    /* Sambaran Pertama (Cepat) */
    16% {
        opacity: 0.8;
        transform: scale(1.1);
        filter: brightness(1.5) blur(1px);
    }
    18% {
        opacity: 0.2;
        transform: scale(1);
    }
    /* Sambaran Kedua / Susulan (Lebih Terang) */
    19% {
        opacity: 1;
        transform: scale(1.15);
        filter: brightness(2) blur(0px);
    }
    22% {
        opacity: 0;
        transform: scale(1);
    }
}

.search-icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #dfba6b;
}

/* Master Wrapper untuk Komponen Tab + Panah */
.tab-navigation-master {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    position: relative;
}

/* Pembungkus Menu Geser */
.tab-scroll-wrapper {
    flex: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Menghilangkan scrollbar di semua browser */
.tab-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.tab-scroll-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.tab-scroll-menu {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    padding: 5px 0;
}

/* Tombol Tab Minimalis */
.btn-modern-tab {
    background: transparent !important;
    border: none !important;
    color: #aaaaaa !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative;
    letter-spacing: 0.5px;
}

.btn-modern-tab:hover {
    color: #ffffff !important;
}

.btn-modern-tab.active {
    color: #dfba6b !important;
    text-shadow: 0 0 8px rgba(223, 186, 107, 0.3);
}

.nav-arrow-btn {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(223, 186, 107, 0.3) !important;
    color: #dfba6b !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    user-select: none;
    flex-shrink: 0;
}

.nav-arrow-btn:hover {
    background: #dfba6b !important;
    color: #141414 !important;
    border-color: #dfba6b !important;
    box-shadow: 0 0 8px rgba(223, 186, 107, 0.5);
}

/* ==========================================================================
   OPTIMALISASI KHUSUS LAYAR HP / MOBILE (RESPONSIVE MASTER)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Sesuaikan Lebar Maksimal Container di HP Agar Sejajar Konten */
    .modern-filter-container,
    div.modern-filter-container {
        max-width: 100% !important;
        padding: 0 20px !important; /* Memberikan jarak aman di kanan-kiri layar HP */
        margin-bottom: 20px !important;
    }

    /* 2. Sembunyikan Tombol Panah Kanan-Kiri di HP (Biar Menu Lega) */
    .nav-arrow-btn,
    button.nav-arrow-btn {
        display: none !important; /* Tombol panah hilang di HP, tapi tetap ada di PC */
    }

    /* 3. Maksimalkan Ruang Geser Menu Provider Setelah Panah Dihilangkan */
    .tab-scroll-wrapper {
        padding: 5px 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .tab-scroll-menu {
        gap: 18px !important; /* Jarak antar nama provider yang pas di jempol */
    }
    
    /* 4. Sesuaikan Ukuran Teks dan Tinggi Kolom Cari Agar Pas di Layar HP */
    .fake-search-input {
        font-size: 13.5px !important; /* Teks sedikit lebih kecil agar muat banyak */
        min-height: 38px !important;
        padding: 8px 10px 8px 30px !important;
    }
    
    .search-icon-final {
        font-size: 12px !important;
        left: 3px !important;
    }
}
/* ==========================================================================
   PENINGKATAN VISUAL PREMIUM: GLASSMORPHISM FILTER CARD
   ========================================================================== */
.modern-filter-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(223, 186, 107, 0.1) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 
                inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
}


/* Teks placeholder dibuat sedikit abu-abu metalik agar elegan */
.fake-search-input:empty:before {
    color: #8a8a8a !important;
    font-weight: 500 !important;
}

/* Animasi indikator garis bawah menu provider agar tidak kaku */
.btn-modern-tab.active::after {
    height: 4px !important;
    bottom: -6px !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, #dfba6b 0%, #ffffff 100%) !important; /* Gradasi emas ke putih mengkilap */
    box-shadow: 0 0 12px #dfba6b !important;
}

/* Aturan khusus penyesuaian di layar HP agar kartu filter tidak terlalu memakan ruang */
@media screen and (max-width: 768px) {
    .modern-filter-container {
        margin: 10px 15px 25px 15px !important; /* Memberikan space elegan dari pinggir layar HP */
        padding: 15px !important;
    }
    
    .search-box-wrapper-final {
        margin-bottom: 15px !important;
    }
}
/* ==========================================================================
   PERBAIKAN TOTAL: MEMAKSA FAKE-SEARCH-INPUT MUNCUL SEMPURNA
   ========================================================================== */

/* 1. Desain Wadah Pembungkus Utama */
.search-box-wrapper-final {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 10px auto 25px auto !important;
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid rgba(223, 186, 107, 0.2) !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* 2. Paksa Elemen Div Editable Timbul & Memiliki Tinggi Ruang Ketik */
.fake-search-input {
    display: inline-block !important; /* Memaksa elemen memiliki dimensi lebar dan tinggi */
    width: 100% !important;
    min-height: 42px !important; /* Mengunci tinggi minimal agar ruang ketik timbul */
    line-height: 24px !important;
    padding: 9px 10px 9px 38px !important; /* Ruang padding kiri disesuaikan agar tidak menumpuk dengan ikon kaca pembesar */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* 3. Trik CSS Menampilkan Teks Placeholder Saat Div Kosong */
.fake-search-input:empty::before {
    content: attr(data-placeholder) !important;
    color: #666666 !important;
    font-weight: 500 !important;
    display: inline-block !important;
    pointer-events: none !important; /* Mencegah gangguan kursor saat teks petunjuk disentuh */
}

/* 4. Pengaturan Posisi Ikon Kaca Pembesar */
.search-icon-final {
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: #dfba6b !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Garis bawah menyala emas penuh saat member aktif mengetik */
.search-box-wrapper-final:focus-within {
    border-bottom-color: #dfba6b !important;
}
/* ==========================================================================
   STYLE BARU: 1 BLOK UTUH DIBELAH TENAH (KIRI & KANAN SIMETRIS)
   ========================================================================== */

/* Kerangka Utama Blok Bersudut Tumpul */
.pattern-item-split {
    display: flex !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 14px !important; /* Membuat sudut luar melengkung rapi */
    margin-bottom: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Mengikat Warna Garis Tepi (Border) Blok Mengikuti Status Gacor */
.pattern-item-split.status-on {
    border: 1px solid rgba(0, 255, 135, 0.15) !important;
}
.pattern-item-split.status-off {
    border: 1px solid rgba(255, 65, 108, 0.15) !important;
}

/* Struktur Kerangka Kotak Mini Status */
.badge-status-box {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    background: rgba(20, 20, 20, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    flex: 1;
    min-width: 0;
}

/* Ukuran Teks Label Kecil di Samping Ikon */
.badge-status-box small {
    font-family: 'Inter', sans-serif !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    white-space: nowrap;
}

/* Desain Kotak Lingkaran Bulat untuk Ikon Simbol ✓ / ✗ */
.badge-status-box span {
    width: 15px !important;
    height: 15px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    flex-shrink: 0;
}

/* 1. Kondisi Warna Merah (Silang / Nonaktif) */
.badge-status-box.st-off {
    border-color: rgba(255, 65, 108, 0.2) !important;
}
.badge-status-box.st-off span {
    background: #ff416c !important; /* Warna merah pekat */
    color: #ffffff !important;
}

/* 2. Kondisi Warna Hijau (Centang / Aktif) */
.badge-status-box.st-on,
.badge-status-box.st-active-green {
    border-color: rgba(0, 255, 135, 0.2) !important;
}
.badge-status-box.st-on span,
.badge-status-box.st-active-green span {
    background: #00ff87 !important; /* Warna hijau neon cerah */
    color: #111111 !important;
}
/* ==========================================================================
   STYLE TAMBAHAN: DOUBLE CHANCE SPLIT INDIKATOR (ON & OFF JEJER)
   ========================================================================== */

/* Pastikan garis tepi luar Double Chance berwarna biru cyan khas */
.pattern-item-split.status-dc {
    border: 1px solid rgba(0, 180, 219, 0.2) !important;
}

/* Modifikasi tombol kecil yang sedang dalam posisi redup/tidak aktif */
.badge-status-box.st-off-dim {
    border-color: rgba(255, 255, 255, 0.03) !important;
    background: rgba(10, 10, 10, 0.4) !important;
    opacity: 0.4; /* Membuatnya tampak pudar semitransparan */
}

.badge-status-box.st-off-dim span {
    background: #333333 !important; /* Silang abu-abu mati */
    color: #888888 !important;
}
/* ==========================================================================
   STYLE BARU: EFEK CORET GARIS INTERAKTIF (AUTO VS MANUAL)
   ========================================================================== */

/* 1. Jika Posisi MANUAL: Kata 'Auto' dicoret dan dibuat agak redup */
.txt-manual span:nth-child(1) {
    text-decoration: line-through !important;
    text-decoration-color: #ff416c !important; /* Warna garis coret merah terang agar jelas */
    color: #666666 !important; /* Teks yang dicoret dibuat abu-abu redup */
    opacity: 0.6;
}
/* Kata 'Manual' tetap menyala putih tebal */
.txt-manual span:nth-child(2) {
    text-decoration: none !important;
    color: #ffffff !important;
}

/* 2. Jika Posisi AUTO: Kata 'Manual' dicoret dan dibuat agak redup */
.txt-auto span:nth-child(2) {
    text-decoration: line-through !important;
    text-decoration-color: #ff416c !important; /* Warna garis coret merah */
    color: #666666 !important;
    opacity: 0.6;
}
/* Kata 'Auto' tetap menyala putih tebal */
.txt-auto span:nth-child(1) {
    text-decoration: none !important;
    color: #ffffff !important;
}

/* Perbaikan gaya teks yang dicoret agar tetap lurus di jalurnya */
.txt-manual span:nth-child(1),
.txt-auto span:nth-child(2) {
    text-decoration: line-through !important;
    text-decoration-color: #ff416c !important;
    color: #555555 !important;
    opacity: 0.5;
    display: inline-block !important;
}

/* Gaya teks yang aktif */
.txt-manual span:nth-child(2),
.txt-auto span:nth-child(1) {
    text-decoration: none !important;
    color: #ffffff !important;
    display: inline-block !important;
}

.dc-status-wrapper {
    display: flex !important;
    width: auto !important; /* Mencegah kotak melebar paksa */
    max-width: 100% !important;
    gap: 8px !important; /* Jarak proporsional antar tombol ON dan OFF */
    justify-content: flex-end !important; /* Mengunci posisi stiker rapat ke kanan */
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Mengunci ukuran fisik stiker kotak mini ON dan OFF agar seragam */
.dc-status-wrapper .badge-status-box {
    flex: 0 0 auto !important; /* Menonaktifkan fungsi auto-grow dari flexbox */
    width: 65px !important;    /* Mengunci lebar tombol ON/OFF agar simetris */
    min-width: 65px !important;
    height: 25px !important;   /* Menyeimbangkan tinggi stiker */
    padding: 2px 6px !important;
    justify-content: center !important; /* Membuat ikon dan teks ON/OFF pas di tengah */
}

/* Penyesuaian teks label kecil di dalam tombol ON/OFF */
.dc-status-wrapper .badge-status-box small {
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
}
/* ==========================================================================
   STYLE MASTER: GRID SEJAJAR LURUS VERTIKAL KEBAWAH & KESAMPING
   ========================================================================== */

/* 1. Pengaturan Sisi Kiri (Area Teks): Lebar Dikunci Sama Rata 45% */
.split-side-left {
    width: 45% !important;
    flex: 0 0 45% !important; /* Mengunci lebar sisi kiri di semua baris */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important; /* Garis pembelah vertikal tengah */
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Khusus Teks Double Chance Dibuat Berwarna Hijau Sesuai Desain */
.status-dc .split-side-left {
    color: #00ff87 !important;
}

/* 2. Pengaturan Sisi Kanan (Area Stiker): Lebar Dikunci Sama Rata 55% */
.split-side-right {
    width: 55% !important;
    flex: 0 0 55% !important; /* Mengunci lebar sisi kanan di semua baris */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Membagi ruang 3 stiker secara rata ke samping */
    padding: 6px 10px !important;
    gap: 6px !important; /* Jarak antar stiker kecil */
    box-sizing: border-box !important;
}

/* 3. Mengunci Ukuran Fisik Setiap Stiker Kotak Kecil */
.split-side-right .badge-status-box,
.split-side-right .badge-status-box-placeholder {
    flex: 1 !important; /* Membuat 3 stiker memiliki lebar kolom yang sama besar */
    width: 100% !important;
    min-width: 0 !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

/* Memperbaiki Posisi Teks Angka Spin Gacor */
.split-side-left .spin-count-text {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}
/* FORCE RESET UKURAN TEKS KOTAK POP-UP POLA TUNAISLOT */
.badge-status-box small, 
div.badge-status-box small,
.split-side-right div.badge-status-box small {
    font-size: 7px !important; /* Memaksa ukuran huruf mengecil drastis */
    line-height: 1.0 !important; /* Mempersempit spasi antar baris */
    letter-spacing: 0.2px !important;
    display: inline-block !important;
    transform: scale(0.9) !important; /* Trik tambahan: memaksa menciutkan teks jika font-size diblokir browser */
    transform-origin: left center !important;
}

/* Merampingkan padding kotak mini agar teks tidak terasa sesak */
.badge-status-box {
    padding: 3px 5px !important;
    gap: 3px !important;
}
/* ==========================================================================
   PERBAIKAN FINAL: MEMPERKECIL TEKS DI DALAM KOTAK STATUS INDIKATOR
   ========================================================================== */
.split-side-right .badge-status-box small {
    font-family: 'Inter', sans-serif !important;
    font-size: 7px !important;    /* Diperkecil menjadi 7.5px agar teks memiliki ruang longgar */
    font-weight: 800 !important;   /* Tetap super bold agar jelas terbaca */
    line-height: 1.1 !important;    /* Mengatur jarak spasi antar-baris teks atas-bawah */
    color: #ffffff !important;
    white-space: nowrap !important; /* Mencegah teks terpotong atau turun berantakan */
    letter-spacing: 0.2px !important; /* Memberikan sedikit jeda kerapian antar-huruf */
    text-transform: uppercase !important; /* Memastikan semua teks otomatis menjadi huruf besar */
}

/* Sedikit longgarkan jarak ikon tanda centang/silang dengan teksnya */
.split-side-right .badge-status-box span {
    width: 15px !important;
    height: 15px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    margin-right: 2px !important; /* Memberikan jarak halus sebelum teks dimulai */
}
/* ==========================================================================
   STYLE BARU: STRUKTUR TRIPLE-KOLOM (NAMA | SAKELAR ON/OFF | FORMULASI CORET)
   ========================================================================== */

/* Kerangka Utama Blok Bersudut Tumpul Khusus Non-Pragmatic */
.pattern-item-triple {
    display: flex !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

/* Penentu Garis Tepi Bingkai Luar Sesuai Status Kegacoran */
.pattern-item-triple.status-on { border: 1px solid rgba(0, 255, 135, 0.15) !important; }
.pattern-item-triple.status-dc { border: 1px solid rgba(255, 221, 0, 0.15) !important; }
.pattern-item-triple.status-off { border: 1px solid rgba(255, 65, 108, 0.15) !important; }

/* KOLOM 1: Nama Fitur (Turbo, Quick, dll) - Lebar 25% */
.triple-col-1 {
    width: 25% !important;
    flex: 0 0 25% !important;
    padding: 12px 10px 12px 14px !important;
    color: #dfba6b !important; /* Warna teks fitur dibuat emas elegan */
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
    white-space: nowrap;
}

/* KOLOM 2: Sakelar ON / OFF Berjejer - Lebar 33% */
.triple-col-2 {
    width: 33% !important;
    flex: 0 0 33% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-sizing: border-box !important;
}

/* Mengunci ukuran box ON/OFF di dalam kolom kedua agar rapat simetris */
.triple-col-2 .badge-status-box {
    flex: 1 !important;
    max-width: 52px !important;
    min-width: 0 !important;
    height: 24px !important;
    padding: 2px 4px !important;
    justify-content: center !important;
    gap: 2px !important;
}

/* KOLOM 3: Pola Coret Teks Manual | Auto - Lebar 42% */
.triple-col-3 {
    width: 42% !important;
    flex: 0 0 42% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 12px 10px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   PERBAIKAN: TEKS YANG DICORET DIBUAT JAUH LEBIH TERANG & KONTRAS
   ========================================================================== */

/* 1. Pengaturan untuk Modul Pragmatic Play (Dua Baris Pertama) */
.txt-manual span:nth-child(1),
.txt-auto span:nth-child(2) {
    text-decoration: line-through !important;
    text-decoration-color: #ff416c !important; /* Garis coret tetap merah neon tegas */
    color: #ffffff !important; /* Warna teks diubah ke abu-abu terang mengkilap agar kontras */
    opacity: 0.85 !important;  /* Menaikkan transparansi dari 0.5 menjadi 0.85 agar sangat terang */
    display: inline-block !important;
}

/* 2. Pengaturan untuk Modul 3 Kolom Non-Pragmatic (PG Soft, Habanero, dll) */
.triple-col-3.txt-manual span:nth-child(1),
.triple-col-3.txt-auto span:nth-child(2) {
    text-decoration: line-through !important;
    text-decoration-color: #ff416c !important; /* Garis coret merah */
    color: #ffffff !important; /* Teks abu-abu terang, sangat mudah dibaca */
    opacity: 0.85 !important;  /* Dibuat terang dan tegas */
    display: inline-block !important;
}