/* Reset Dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* START ANIMASI LOADER DAN BODY */
body {
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    /* Campuran warna gelap: Hitam, Abu tua, dan sedikit aksen Deep #d4af37/Purple */
    background: #1a1a1a;
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    position: relative;
    overflow-x: hidden;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Layer Efek Kaca Glossy */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradasi tipis untuk efek pantulan permukaan kaca */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.02) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Efek Kilatan Cahaya (Shine Reflection) */
body::after {
    content: "";
    position: fixed;
    top: -150%;
    left: -150%;
    width: 400%; /* Dibuat lebar agar sapuan kilatan terlihat alami */
    height: 400%;
    background: linear-gradient(
        45deg, 
        transparent 45%, 
        rgba(212, 175, 55, 0.08) 48%, /* Kilatan warna emas tipis */
        rgba(255, 255, 255, 0.12) 50%, /* Inti kilatan putih glossy */
        rgba(212, 175, 55, 0.08) 52%, 
        transparent 55%
    );
    transform: rotate(-20deg);
    animation: shineBodyGlass 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 2;
}

/* Animasi Kilatan Kaca */
@keyframes shineBodyGlass {
    0% {
        transform: translate(-30%, -30%) rotate(-20deg);
    }
    40%, 100% {
        transform: translate(30%, 30%) rotate(-20deg);
    }
}

/* --- PRELOADER PREMIUM (LOGO BESAR) --- */
#vip-loader {
    position: fixed;
    inset: 0;
    background: #050505;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.6s;
}

#vip-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Tambahkan ini */
    transition: opacity 0.3s ease;
}

.loader-wrapper {
    position: relative;
    width: 250px;
    /* Ukuran container loader */
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Lingkaran Putar Emas */
.loader-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-top: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;
    border-radius: 50%;
    animation: spinVip 2s linear infinite;
}

/* Efek Cahaya Glow di Luar */
.loader-outer-ring {
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Logo Utama (Dibuat Besar) */
.loader-logo-container {
    z-index: 10;
    text-align: center;
}

.vip-main-logo {
    width: 150px;
    /* Logo jauh lebih besar */
    height: auto;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
    animation: logoEntrance 1.5s ease-in-out infinite alternate;
}

/* --- ANIMATIONS --- */
@keyframes spinVip {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

@keyframes logoEntrance {
    0% {
        transform: scale(0.9);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
    }

    100% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.8));
    }
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 768px) {
    .loader-wrapper {
        width: 180px;
        height: 180px;
    }

    .vip-main-logo {
        width: 100px;
        /* Ukuran HP tetap terlihat besar tapi proporsional */
    }

    /*body::after {
        animation-duration: 1s;
    }*/
}
/* END ANIMASI LOADER DAN BODY */

/* START TRANSAKSI PENDING DI MENU DEPOSIT */
/* Container Utama */
.trx-pending-container {
    max-width: 500px;
    margin: 20px auto;
    padding: 15px;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Steps Progress */
.trx-steps-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0 10px;
}

.trx-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.trx-step span {
    font-size: 11px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
}

.trx-step.done span,
.trx-step.active span {
    color: #bf953f;
}

.trx-step-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    border: 2px solid #333;
    font-size: 14px;
}

.trx-step.done .trx-step-icon {
    background: #bf953f;
    color: #000;
    border-color: #fcf6ba;
    box-shadow: #000 0px 4px 8px;
}

.trx-step.active .trx-step-icon {
    border-color: #bf953f;
    color: #bf953f;
}

.trx-line {
    flex-grow: 1;
    height: 2px;
    background: #333;
    margin-bottom: 20px;
    /* Sejajar dengan icon */
    box-shadow: #000 0px 4px 8px;
}

.trx-line.done {
    background: #bf953f;
    box-shadow: #000 0px 4px 8px;
}

/* Main Card */
.trx-main-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
}

.trx-header {
    padding: 30px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(191, 149, 63, 0.1) 0%, transparent 100%);
}

.trx-badge-red {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border-radius: 50px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 77, 77, 0.2);
    box-shadow: #000 0px 4px 8px;
}

.trx-header h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.trx-header p {
    color: #888;
    font-size: 13px;
    line-height: 1.5;
}

/* Details */
.trx-details-box {
    padding: 0 25px;
}

.trx-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #222;
    font-size: 13px;
}

.trx-row span {
    color: #777;
}

.text-white {
    color: #eee;
}

.text-gold {
    color: #bf953f;
}

.trx-payout-section {
    text-align: center;
    padding: 25px 0;
}

.trx-payout-label {
    color: #888;
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
}

.trx-amount {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Footer & Buttons */
.trx-footer {
    padding: 20px 25px 30px;
}

.trx-notice {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    box-shadow: #000 0px 4px 8px;
}

.trx-notice i {
    color: #bf953f;
    font-size: 1.1rem;
}

.trx-notice p {
    color: #999;
    font-size: 11px;
    margin: 0;
    line-height: 1.4;
}

.trx-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.trx-btn-primary,
.trx-btn-secondary {
    padding: 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.trx-btn-primary {
    background: #25d366;
    color: #fff;
    box-shadow: #000 0px 4px 8px;
}

.trx-btn-secondary {
    background: #333;
    color: #fff;
    border: 1px solid #444;
    box-shadow: #000 0px 4px 8px;
}

/* Animasi */
.trx-pulse-gold {
    animation: pulse-gold 2s infinite;
    box-shadow: 0 0 0 0 rgba(191, 149, 63, 0.4);
}

@keyframes pulse-gold {
    70% {
        box-shadow: 0 0 0 10px rgba(191, 149, 63, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(191, 149, 63, 0);
    }
}

@media (max-width: 480px) {
    .trx-amount {
        font-size: 1.5rem;
    }

    .trx-actions {
        grid-template-columns: 1fr;
    }
}

/* END TRANSAKSI PENDING DI MENU DEPOSIT */

/* START BAGIAN SLIDE/CAROUSEL INDEX.PHP */
/* Container Utama Carousel */
.bubble-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    /* Lebar maksimal desktop */
    margin: 20px auto;
    padding: 0 15px;
    /* Jarak aman kanan-kiri di mobile */
    overflow: hidden;
    box-sizing: border-box;
}

/* Wrapper Slide */
.bubble-slide {
    display: none;
    /* Sembunyikan slide secara default */
    width: 100%;
    border-radius: 15px;
    /* Sudut melengkung halus */
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
    /* Shadow sesuai permintaan */
    background: #1a1a1a;
    transition: opacity 0.6s ease-in-out;
    /* Animasi transisi ringan */
}

/* Slide yang Aktif */
.bubble-slide.active {
    display: block;
    animation: fadeInLight 0.8s ease-in-out;
}

/* Pengaturan Gambar di Dalam Slide */
.bubble-slide img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    /* Menghindari dragging gambar */
}

/* --- ANIMASI RINGAN & PREMIUM --- */
@keyframes fadeInLight {
    from {
        opacity: 0.8;
        transform: translateY(2px);
        /* Efek angkat sedikit saat muncul */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE DEKSTOP & MOBILE --- */

/* Pengaturan khusus Mobile (< 768px) */
@media (max-width: 767px) {
    .bubble-carousel-container {
        margin: 10px auto;
        padding: 0 10px;
    }

    .bubble-slide {
        border-radius: 10px;
        /* Melengkung lebih kecil di layar HP */
    }

    .bubble-slide img {
        aspect-ratio: 16 / 9;
        /* Menjaga proporsi gambar agar tidak gepeng di HP */
    }
}

/* Pengaturan khusus Desktop (>= 768px) */
@media (min-width: 768px) {
    .bubble-carousel-container {
        margin: 30px auto;
    }

    .bubble-slide img {
        /* Opsional: Anda bisa mengatur tinggi maksimal di desktop agar tidak terlalu memenuhi layar */
        max-height: 450px;
        aspect-ratio: 21 / 9;
        /* Slide lebih lebar ala sinematik di desktop */
    }
}

/* END BAGIAN SLIDE/CAROUSEL INDEX.PHP */

/* START BAGIAN INFO TERKINI RUN TEXT INDEX.PHP */
/* Container Utama Ticker */
.ticker-wrap {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    /* Background gelap premium */
    height: 40px;
    margin: 15px auto;
    max-width: 1200px;
    width: 95%;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: #000 0px 4px 8px;
    /* Sesuai permintaan Anda */
}

/* Bagian Judul (Info Terkini) */
.ticker-heading {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    /* Warna emas premium */
    color: #000;
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
    z-index: 2;
    position: relative;
    box-shadow: #000 0px 4px 8px;
}

/* Container untuk Teks Berjalan */
.ticker-container {
    flex-grow: 1;
    overflow: hidden;
    padding-left: 10px;
    display: flex;
    align-items: center;
}

/* Animasi Teks Berjalan */
.ticker-content {
    display: inline-block;
    white-space: nowrap;
    color: #eee;
    font-size: 13px;
    padding-left: 100%;
    /* Mulai dari luar kanan */
    animation: ticker-move 25s linear infinite;
    /* Animasi ringan */
}

/* Pause saat di-hover agar user bisa membaca */
.ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
}

/* Keyframes untuk pergerakan teks */
@keyframes ticker-move {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* --- RESPONSIVE DEKSTOP & MOBILE --- */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .ticker-wrap {
        height: 35px;
        margin: 10px auto;
        width: 98%;
    }

    .ticker-heading {
        padding: 0 10px;
        font-size: 10px;
    }

    .ticker-heading i {
        font-size: 11px;
    }

    .ticker-content {
        font-size: 11px;
        animation-duration: 20s;
        /* Di HP teks biasanya lebih pendek, percepat sedikit */
    }
}

/* Desktop (>= 768px) */
@media (min-width: 768px) {
    .ticker-wrap {
        margin: 20px auto;
    }
}

/* END BAGIAN INFO TERKINI RUN TEXT INDEX.PHP */

/* START BAGIAN JACKPOT INDEX.PHP */
/* Container Utama */
.jackpot-section {
    padding: 20px 0;
    perspective: 1000px;
    /* Memberikan efek kedalaman 3D */
    display: flex;
    justify-content: center;
}

.jackpot-container-3d {
    width: 95%;
    max-width: 800px;
    transform: rotateX(5deg);
    /* Sedikit kemiringan 3D */
    transition: transform 0.5s ease;
}

/* Bingkai Luar */
.jackpot-frame {
    background: linear-gradient(145deg, #222, #000);
    padding: 15px;
    border-radius: 20px;
    position: relative;
    border: 2px solid #bf953f;
    /* Border Emas */
    box-shadow: #000 0px 4px 8px;
    /* Sesuai instruksi */
}

/* Efek Kaca Dalam */
.jackpot-glass {
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 25px 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(191, 149, 63, 0.3);
}

/* Judul Jackpot */
.jackpot-title {
    color: #bf953f;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(191, 149, 63, 0.5);
}

/* Angka Jackpot */
.jackpot-number {
    font-family: 'Courier New', Courier, monospace;
    /* Gaya digital */
    font-size: 45px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Animasi Pantulan Cahaya di Kaca */
.glass-reflection {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: rotate(45deg);
    animation: shine 4s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
        top: -100%;
    }

    100% {
        left: 100%;
        top: 100%;
    }
}

/* Lampu LED Dekorasi */
.led-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.led-dots span {
    width: 6px;
    height: 6px;
    background: #bf953f;
    border-radius: 50%;
    box-shadow: 0 0 8px #bf953f;
    animation: blink 1s infinite alternate;
}

.led-dots span:nth-child(2n) {
    animation-delay: 0.5s;
}

@keyframes blink {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

/* --- RESPONSIVE --- */

@media (max-width: 767px) {
    .jackpot-title {
        font-size: 14px;
    }

    .jackpot-number {
        font-size: 28px;
    }

    .jackpot-frame {
        padding: 10px;
        border-radius: 15px;
    }

    .jackpot-glass {
        padding: 15px 5px;
    }
}

/* END BAGIAN JACKPOT INDEX.PHP */

/* START BAGIAN GAME GRID/GRID ITEM INDEX.PHP */
/* Container Utama Grid */
.game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Default Mobile: 4 kolom */
    gap: 15px 10px;
    /* Jarak antar item */
    padding: 20px 15px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Link Wrapper agar tidak merusak layout */
.grid-item-link {
    text-decoration: none;
    display: block;
}

/* Item Grid */
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.grid-item:hover {
    transform: translateY(-5px);
    /* Efek angkat saat hover */
}

/* Box Icon */
.icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 24px;
    color: #bf953f;
    /* Warna Emas Utama */
    border: 1px solid #333;
    box-shadow: #000 0px 4px 8px;
    /* Permintaan Box Shadow */
    position: relative;
    overflow: hidden;
}

/* Label Teks di bawah Icon */
.grid-item span {
    color: #eee;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Warna Khusus Icon (Opsional agar lebih hidup) --- */
.icon-box.hot {
    color: #ff4d4d;
}

/* Merah api */
.icon-box.wa {
    color: #25d366;
}

/* Hijau WA */
.icon-box.tg {
    color: #0088cc;
}

/* Biru TG */
.icon-box.live {
    color: #ffae00;
}

/* Kuning Chat */

/* --- Styling Khusus Black Naga --- */
.icon-box.naga {
    background: #000;
    border: 1px solid #ff0000;
}

.naga-img {
    width: 80%;
    z-index: 2;
}

.naga-aura {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.2) 0%, transparent 70%);
}

/* --- RESPONSIVE ADJUSTMENTS --- */

/* Layar Tablet (Misal: iPad) */
@media (min-width: 600px) {
    .game-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }

    .icon-box {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .grid-item span {
        font-size: 12px;
    }
}

/* Layar Desktop */
@media (min-width: 1024px) {
    .game-grid {
        grid-template-columns: repeat(8, 1fr);
        /* 8 kolom di PC agar rapi menyamping */
        padding: 40px 20px;
    }

    .icon-box {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
}

.category-container {
    width: 100%;
    overflow-x: auto; /* Agar bisa scroll ke samping di HP */
    padding: 10px 0;
    scrollbar-width: none; /* Hilangkan scrollbar Firefox */
}

.category-container::-webkit-scrollbar {
    display: none; /* Hilangkan scrollbar Chrome/Safari */
}

.category-tabs {
    display: flex;
    gap: 10px;
    padding: 0 15px;
    align-items: center;
}

.tab-item {
    flex: 0 0 auto; /* Mencegah tombol menyusut */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #343a42;
    border-radius: 8px;
    padding: 8px;
    min-width: 90px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Kotak Pembungkus Gambar agar seragam */
.tab-img-wrapper {
    width: 50px; /* Lebar tetap */
    height: 35px; /* Tinggi tetap */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.tab-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Gambar akan menyesuaikan tanpa terpotong atau gepeng */
    filter: grayscale(100%); /* Efek abu-abu saat tidak aktif (opsional) */
    opacity: 0.7;
}

.tab-text {
    font-size: 10px;
    font-weight: bold;
    color: #94a3b8;
    white-space: nowrap;
}

/* Style saat Aktif */
.tab-item.active {
    background: #343a42;
    border-color: #fbbf24; /* Warna kuning emas */
}

.tab-item.active img {
    filter: grayscale(0%);
    opacity: 1;
}

.tab-item.active .tab-text {
    color: #fbbf24;
}

.tab-item:hover {
    border-color: #fbbf24;
}
/* END BAGIAN GAME GRID/GRID ITEM INDEX.PHP */

/* START BAGIAN PROMOSI INDEX.PHP */
/* Container Utama */
.promo-carousel-wrapper {
    max-width: 1200px;
    margin: 25px auto;
    padding: 0 15px;
    overflow: hidden;
    /* Mencegah overflow keluar container utama */
}

/* Header */
.promo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-left: 4px solid #bf953f;
    padding-left: 12px;
}

/* Container yang Bisa Digeser */
.promo-scroll-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    /* Mengaktifkan geser kanan-kiri */
    overflow-y: hidden;
    padding: 10px 5px 25px 5px;
    scroll-behavior: smooth;
    /* Gerakan geser halus */
    scroll-snap-type: x mandatory;
    /* Kartu akan 'magnet' saat digeser */
    -webkit-overflow-scrolling: touch;
    /* Halus di iOS */
}

.gold-gradient-text {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-all {
    color: #888;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.3s;
}

.view-all:hover {
    color: #bf953f;
}

.promo-scroll-container::-webkit-scrollbar {
    display: none;
    /* Sembunyikan scrollbar Chrome/Safari */
}

.promo-scroll-container {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Kartu Promo */
.promo-card {
    min-width: 280px;
    /* Ukuran kartu di mobile */
    max-width: 280px;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #333;
    box-shadow: #000 0px 4px 8px;
    /* Shadow sesuai permintaan */
    transition: transform 0.3s ease;
    flex-shrink: 0;
    /* Penting: mencegah kartu mengecil */
    scroll-snap-align: start;
    /* Titik berhenti kartu */
}

.promo-card:hover {
    transform: translateY(-5px);
    border-color: #bf953f;
}

/* Box Gambar */
.promo-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.promo-img-box img {
    width: 100%;
    height: 100%;
}

/* Info & Judul */
.promo-info {
    padding: 12px;
    background: linear-gradient(to bottom, #1a1a1a, #111);
    text-align: center;
}

/* Badge New */
.promo-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4d4d;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.promo-title {
    color: #eee;
    font-size: 0.9rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Judul 1 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* No Data Styling */
.no-data-neon-box {
    border: 2px dashed #333;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.02);
}

/* --- RESPONSIVE DESKTOP --- */
/* Responsif Desktop (Jika ingin kartu lebih lebar) */
@media (min-width: 1024px) {
    .promo-card {
        min-width: 320px;
        max-width: 320px;
    }
}

/* END BAGIAN PROMOSI INDEX.PHP */

/* START BAGIAN POPUP BANNER INDEX.PHP */
/* Overlay Background */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    /* Dikontrol via JS */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

/* Kartu Utama */
.popup-card {
    position: relative;
    width: 100%;
    max-width: 450px;
    background: #111;
    border-radius: 20px;
    border: 1px solid #333;
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
    /* Sesuai instruksi */
    animation: popupAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efek Cahaya di Belakang */
.popup-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(191, 149, 63, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* Tombol Tutup */
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.popup-close:hover {
    background: #ff4d4d;
    border-color: #ff4d4d;
}

/* Image Container */
.popup-image-container {
    width: 100%;
    overflow: hidden;
}

.img-3d {
    width: 100%;
    height: auto;
    display: block;
    transition: 0.5s;
}

/* Content Area */
.popup-content {
    padding: 25px;
    text-align: center;
}

.gold-gradient-text {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.popup-description {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Features */
.popup-features {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

.feat {
    color: #bf953f;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Button Klaim 3D */
.btn-claim-3d {
    display: block;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    color: #000;
    text-decoration: none;
    padding: 15px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: #000 0px 4px 8px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-claim-3d:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Animasi Masuk */
@keyframes popupAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsif Mobile */
@media (max-width: 480px) {
    .popup-card {
        max-width: 90%;
    }

    .gold-gradient-text {
        font-size: 1.2rem;
    }

    .popup-description {
        font-size: 0.8rem;
    }
}

/* END BAGIAN POPUP BANNER INDEX.PHP */

/* START BAGIAN SWEETALERT PREMIUM */
.swal-premium-popup {
    border: 1px solid #333 !important;
    border-radius: 15px !important;
    box-shadow: #000 0px 4px 8px !important;
    /* Sesuai instruksi */
    padding: 20px !important;
}

.swal-premium-title {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    letter-spacing: 1px;
}

.swal-premium-btn {
    width: 100% !important;
    /* Lebar penuh di mobile agar mudah diklik */
    max-width: 200px;
    border-radius: 8px !important;
    font-weight: bold !important;
    box-shadow: #000 0px 4px 8px !important;
    text-transform: uppercase;
}

/* Responsif untuk layar kecil */
@media (max-width: 480px) {
    .swal-premium-popup {
        width: 90% !important;
        padding: 15px !important;
    }

    .swal-premium-title {
        font-size: 1.2rem !important;
    }
}

/* END BAGIAN SWEETALERT PREMIUM */

/* START KHUSUS ALERT SULTAN */
.sultan-alert-popup {
    border: 2px solid #d4af37 !important;
    border-radius: 15px !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4) !important;
    backdrop-filter: blur(10px);
    padding: 20px !important;
    width: 90% !important;
    max-width: 350px !important;
}

.swal2-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800 !important;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.swal2-timer-progress-bar {
    background: linear-gradient(to right, #d4af37, #fff) !important;
}

/* END KHUSUS ALERT SULTAN */

/* START BAGIAN HEADER DOWNLOAD APK DAN LOGO TOGGLE TOPBAR.PHP */
/* --- Root Wrapper & Global Header --- */
.sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-shadow: #000 0px 4px 8px;
    /* Shadow Utama */
}

/* --- Top App Banner (Android) --- */
.top-app-bar {
    background: #000;
    border-bottom: 1px solid #333;
    padding: 6px 15px;
}

.app-banner-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.close-banner {
    background: transparent;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.close-banner:hover {
    color: #fff;
}

.app-icon-box {
    width: 34px;
    height: 34px;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 18px;
}

.app-info-text {
    line-height: 1.2;
}

.app-name {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.app-desc {
    color: #bf953f;
    font-size: 10px;
    font-weight: 600;
}

.download-icon-btn {
    color: #bf953f;
    font-size: 18px;
    background: rgba(191, 149, 63, 0.1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #bf953f;
    transition: 0.3s;
    animation: goldPulse 2s infinite;
}

@keyframes goldPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

.download-icon-btn:hover {
    background: #bf953f;
    color: #000;
}

/* --- Main Header --- */
.top-header {
    background: #111;
    height: 60px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
}

.logo {
    display: flex;
    align-items: center;
}

.main-logo {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Tombol Header --- */
.btn-register-header,
.btn-balance-header {
    height: 36px;
    padding: 0 15px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: #000 0px 4px 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, filter 0.2s;
}

.btn-register-header {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    color: #000;
}

.btn-balance-header {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    font-family: 'Courier New', Courier, monospace;
}

.btn-register-header:active,
.btn-balance-header:active {
    transform: scale(0.95);
}

/* --- Burger Menu --- */
.burger-menu {
    color: #bf953f;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 5px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .top-header {
        height: 55px;
    }

    .main-logo {
        max-height: 50px;
    }

    .app-name {
        font-size: 11px;
    }

    .btn-register-header,
    .btn-balance-header {
        padding: 0 10px;
        font-size: 11px;
        height: 32px;
    }
}

@media (min-width: 1024px) {
    .top-header {
        padding: 0 40px;
    }
}

/* END BAGIAN HEADER DOWNLOAD APK DAN LOGO TOGGLE TOPBAR.PHP */

/* START BAGIAN SIDEBAR TOPBAR.PHP */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    /* Di bawah sidebar, di atas konten lain */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 350px;
    height: 100%;
    z-index: 99999;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.9);

    /* BACKGROUND DIAMOND GEOMETRIC */
    background: #111;
    /* Dasar Hitam */
    background-image:
        linear-gradient(115deg, #1a1a1a 0%, #1a1a1a 100%),
        linear-gradient(115deg, #222 0%, #111 100%);
    background-image:
        conic-gradient(from 120deg at 50% 50%, #1a1a1a 0deg 60deg, #111 60deg 120deg, #161616 120deg 180deg, #0d0d0d 180deg 240deg, #222 240deg 300deg, #1a1a1a 300deg 360deg);
    background-size: 60px 60px;
    /* Ukuran berlian */

    border-left: 1px solid rgba(212, 175, 55, 0.2);
    overflow: hidden;
}

/* Efek Overlay Kristal & Kilauan */
.sidebar-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Memberikan efek dimensi dan pencahayaan dari sudut */
    background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Content wrapper agar isi menu di atas background */
.sidebar-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

@keyframes shine {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.sidebar-menu {
    animation: shine 60s linear infinite;
}

.sidebar-menu.active {
    right: 0;
    /* Muncul ke layar */
}

/* Header Sidebar */
.sidebar-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.alert-badge {
    background-color: #111;
    border: 1px solid #d4af37;
    /* Border Emas */
    color: #eee;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.alert-badge i {
    color: #ffcc00;
    /* Ikon kuning */
}

.close-btn {
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    padding: 5px;
}

/* Konten Sidebar */
.sidebar-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
}

.welcome-text {
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Tombol Masuk & Daftar */
.sidebar-auth-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.sb-btn {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

.sb-btn.login {
    background: transparent;
    border: 1px solid #4CAF50;
    /* Hijau Outline */
    color: #4CAF50;
}

.sb-btn.register {
    background: #4CAF50;
    /* Hijau Solid */
    border: 1px solid #4CAF50;
    color: white;
}

/* User Profile Card Styling */
.user-profile-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    gap: 15px;
    box-shadow: 0 4px 8px #000;
}

.user-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #bf953f, #aa771c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #000;
    box-shadow: 0 4px 8px #000;
}

.user-details {
    display: flex;
    flex-direction: column;
}

.welcome-label {
    font-size: 11px;
    color: #bf953f;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.user-name-display {
    font-size: 18px;
    font-weight: 800;
    margin: 2px 0;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.user-status-tag {
    font-size: 10px;
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    padding: 2px 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 5px;
    border: 1px solid rgba(0, 255, 0, 0.2);
}

.user-status-tag .dot {
    width: 6px;
    height: 6px;
    background: #00ff00;
    border-radius: 50%;
    box-shadow: 0 0 5px #00ff00;
}

/* Horizontal Buttons Layout */
.auth-logged-wrapper-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Membagi dua kolom sama rata */
    gap: 10px;
    width: 100%;
}

.sb-btn-premium {
    padding: 10px 5px !important;
    /* Sedikit lebih ramping untuk kanan-kiri */
    font-size: 12px !important;
    border-radius: 10px !important;
}

/* Pastikan teks tombol muat */
.btn-content span {
    white-space: nowrap;
}

/* Container Wrapper */
.auth-logged-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 10px 0;
}

/* Base Style Tombol Premium */
.sb-btn-premium {
    position: relative;
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    position: relative;
}

/* Gaya Khusus Deposit (Gold Gradient) */
.deposit-premium {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fcf6ba, #aa771c);
    background-size: 200% auto;
    color: #000 !important;
    animation: goldShine 3s linear infinite;
}

/* Gaya Khusus Logout (Glass Red) */
.logout-premium {
    background: rgba(255, 0, 0, 0.1);
    color: #ff4d4d !important;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

.logout-premium:hover {
    background: rgba(255, 77, 77, 0.2);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
}

/* Efek Kilau (Shine) untuk Deposit */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform: skewX(-30deg);
    transition: none;
    animation: shineMove 3s infinite;
}

/* Animasi */
@keyframes goldShine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes shineMove {
    0% {
        left: -100%;
    }

    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* Hover Effect */
.sb-btn-premium:active {
    transform: scale(0.95);
}

/* Responsive Mobile */
@media (max-width: 480px) {
    .sb-btn-premium {
        padding: 10px;
        font-size: 13px;
    }
}

/* List Menu Item */
/* --- SIDEBAR LIST CONTAINER --- */
.sidebar-list {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Memberikan jarak antar item menu */
}

/* --- LIST ITEM --- */
.sidebar-list li {
    position: relative;
    padding: 0 12px;
    /* Memberikan ruang di sisi kanan-kiri */
}

/* --- MENU LINK (ANCHOR) --- */
.sidebar-list a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: #b5b5b5;
    /* Warna teks default yang soft */
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 12px;
    /* Membuat sudut membulat yang modern */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 14px;
    box-shadow: #000 0px 4px 8px;
}

/* --- ICON STYLING --- */
.sidebar-list a i {
    width: 24px;
    /* Lebar tetap agar semua ikon sejajar vertikal */
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bf953f;
    /* Warna emas ikon sesuai tema Anda */
    transition: transform 0.3s ease;
}

/* --- HOVER EFFECT --- */
.sidebar-list a:hover {
    background: rgba(191, 149, 63, 0.1);
    /* Background transparan emas */
    color: #ffffff;
    padding-left: 20px;
    /* Efek bergeser sedikit ke kanan saat hover */
}

.sidebar-list a:hover i {
    transform: scale(1.1);
    /* Ikon membesar sedikit saat hover */
    color: #fcf6ba;
    /* Ikon menjadi lebih terang */
}

/* --- ACTIVE STATE (Halaman yang sedang dibuka) --- */
.sidebar-list li.active a {
    background: linear-gradient(135deg, #bf953f, #aa771c);
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(191, 149, 63, 0.3);
}

.sidebar-list li.active a i {
    color: #000000;
}

/* --- SUBTITLE / LABEL (Opsional) --- */
.sidebar-list .menu-label {
    padding: 20px 28px 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #555;
    font-weight: 800;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 480px) {
    .sidebar-list a {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .sidebar-list a i {
        font-size: 1.1rem;
    }
}

.icon-#d4af37 {
    color: #d4af37;
    /* Ikon warna emas */
    width: 25px;
    text-align: center;
}

/* Bahasa Selector */
.sidebar-language {
    position: relative;
    padding: 10px 15px;
    border-top: 1px solid #333;
    margin-top: 10px;
}

.lang-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

.lang-dropdown {
    display: none;
    background: #1a1a1a;
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #d4af37;
    animation: fadeIn 0.3s ease;
}

.lang-dropdown.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.lang-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
}

.lang-item:hover {
    background: #d4af37;
    color: #000;
}

.lang-arrow.rotate {
    transform: rotate(180deg);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sembunyikan Bar Atas Google Translate */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

/* Sembunyikan Widget bawaan Google agar tidak merusak layout */
.goog-te-gadget {
    display: none !important;
}

/* Kembalikan posisi body ke paling atas (karena biasanya Google mendorong body ke bawah) */
body {
    top: 0 !important;
    position: static !important;
}

/* Sembunyikan Tooltip yang muncul saat teks di-hover */
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Container Utama */
.support-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center;
    z-index: 10005; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(5px);
}
.support-overlay.active { opacity: 1; visibility: visible; }

.support-content {
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Total tinggi maksimal modal */
    background: #1a1a1a; 
    width: 90%; 
    max-width: 400px; 
    border-radius: 20px;
    border: 1px solid #bf953f4d; 
    overflow: hidden; 
    position: relative;
    box-shadow: #000 0px 4px 15px;
}

.support-header { 
    padding: 20px; border-bottom: 1px solid #bf953f4d; text-align: center; 
    background: linear-gradient(to bottom, #222, #1a1a1a);
    box-shadow: #000 0px 4px 8px;
}
.support-header h3 { margin: 0; font-size: 16px; color: #b8860b; letter-spacing: 1px; }
.support-close { 
    position: absolute; top: 15px; right: 20px; background: none; 
    border: none; color: #888; font-size: 24px; cursor: pointer; 
}

/* FAQ Style */
.support-body { 
    padding: 20px; 
    max-height: 65vh; /* Batasi tinggi body agar header tetap terlihat */
    overflow-y: auto; /* Aktifkan scroll vertikal */
    scrollbar-width: thin; /* Untuk Firefox */
    scrollbar-color: #bf953f #1a1a1a; /* Untuk Firefox */
}

.support-body::-webkit-scrollbar {
    width: 6px;
}

.support-body::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}

.support-body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #bf953f, #fcf6ba);
    border-radius: 10px;
}

.faq-item { margin-bottom: 10px; border: 1px solid #333; border-radius: 10px; overflow: hidden; box-shadow: #000 0px 4px 8px; }
.faq-question {
    width: 100%; padding: 15px; background: #222; border: none; color: #ccc;
    text-align: left; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between;
}
.faq-answer { 
    padding: 0 15px; 
    background: #111; 
    max-height: 0; 
    overflow-y: auto; /* Ubah dari hidden menjadi auto agar bisa scroll jika mentok */
    transition: all 0.4s ease-in-out; 
}

.faq-answer p { padding: 15px 0; font-size: 13px; color: #888; line-height: 1.6; margin: 0; }

.faq-item.active .faq-answer { 
    max-height: 1500px; /* Nilai tinggi diperbesar agar muat semua teks */
    padding: 15px;
    overflow-y: visible; /* Biarkan mengalir mengikuti modal utama */
}

.faq-answer ul li {
    margin-bottom: 8px;
    list-style-type: circle;
}

.faq-answer strong {
    color: #b8860b; /* Memberi warna emas pada kata kunci */
}

.faq-answer span {
    font-weight: bold;
}

.faq-answer::-webkit-scrollbar {
    width: 4px;
}
.faq-answer::-webkit-scrollbar-thumb {
    background: #bf953f;
    border-radius: 10px;
}

/* Contact Style */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.contact-card {
    display: flex; flex-direction: column; align-items: center; padding: 20px;
    background: #222; border-radius: 15px; text-decoration: none; border: 1px solid #333;
    transition: 0.3s;
}
.contact-card:hover { border-color: #b8860b; background: #2a2a2a; transform: translateY(-3px); }
.contact-card i { font-size: 30px; margin-bottom: 10px; color: #b8860b; }
.contact-card span { color: #fff; font-weight: bold; font-size: 15px; }
.contact-card small { color: #666; font-size: 11px; margin-top: 4px; }
/* END BAGIAN SIDEBAR TOPBAR.PHP */

/* START POPUP MODAL LOGIN REGISTER KODE OTP TOPBAR.PHP */
/* ============================================================
   1. MODAL OVERLAY & CONTAINER 3D
   ============================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* Latar lebih gelap agar fokus */
    backdrop-filter: blur(10px);
    display: none;
    /* Munculkan via JS: .style.display = 'flex' */
    justify-content: center;
    align-items: center;
    z-index: 20000;
    padding: 15px;
}

.modal-content-3d {
    background: #111;
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    position: relative;
    border: 1px solid #333;
    box-shadow: #000 0px 4px 8px;
    /* Shadow Permintaan Anda */
    overflow: hidden;
    animation: sultanZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sultanZoom {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================================
   2. TABS NAVIGATION (LOGIN/REGISTER)
   ============================================================ */
.modal-tabs {
    display: flex;
    background: #000;
    border-bottom: 1px solid #222;
}

.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: transparent;
    color: #555;
    font-weight: 800;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    transition: 0.3s;
    text-transform: uppercase;
}

.tab-btn.active {
    color: #bf953f;
    border-bottom: 3px solid #bf953f;
    background: rgba(191, 149, 63, 0.05);
}

/* ============================================================
   3. FORM & INPUT LOGIC (ICON FIX)
   ============================================================ */
.auth-form {
    display: none;
    padding: 25px;
}

.auth-form.active {
    display: block;
    animation: sultanFade 0.4s ease;
}

@keyframes sultanFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-title {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 800;
}

/* Penataan Icon dan Input agar Sejajar Sempurna */
.input-group {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.input-group i {
    width: 45px;
    text-align: center;
    color: #bf953f;
}

.input-group input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding: 12px 10px;
    outline: none;
}

.input-group:focus-within {
    border-color: #bf953f;
    box-shadow: 0 0 10px rgba(191, 149, 63, 0.2);
}

.input-group i:not(.toggle-password) {
    width: 45px;
    color: #bf953f;
    text-align: center;
    font-size: 14px;
}

.input-group input,
.sultan-select {
    flex: 1;
    padding: 14px 15px 14px 0;
    background: #0a0a0a;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    outline: none;
    border: none;
}

.toggle-password {
    padding: 0 15px;
    color: #555;
    cursor: pointer;
    font-size: 14px;
}

/* ============================================================
   4. REGISTER SCROLL AREA
   ============================================================ */
.input-scroll-area {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 20px;
}

.input-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.input-scroll-area::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

/* ============================================================
   5. CAPTCHA & REFRESH (ALIGNED)
   ============================================================ */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.captcha-box {
    flex: 1;
    height: 48px;
    background: #1a1a1a;
    border: 1px dashed #bf953f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bf953f;
    font-weight: 900;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    letter-spacing: 4px;
    user-select: none;
}

.captcha-input {
    width: 100px !important;
    height: 48px !important;
    background: #0a0a0a !important;
    /* Warna gelap agar senada */
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-align: center;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.captcha-input:focus {
    border-color: #bf953f !important;
}

/* 3. Button Refresh (Sisi Kanan) - Gaya Premium 3D */
.refresh-captcha {
    width: 48px;
    height: 48px;
    background: linear-gradient(145deg, #222, #111);
    border: 1px solid #444;
    border-radius: 8px;
    color: #bf953f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: #000 0px 4px 8px;
    /* Shadow permintaan Anda */
    transition: 0.3s;
}

.refresh-captcha i {
    font-size: 18px;
}

.refresh-captcha:hover {
    background: #222;
    color: #fff;
    transform: rotate(90deg);
    /* Animasi putar tipis saat hover */
}

/* ============================================================
   6. OTP FIELD (SULTAN STYLE)
   ============================================================ */
#otpForm input[name="otpwa"] {
    width: 100% !important;
    background: #000 !important;
    border: 2px solid #bf953f !important;
    border-radius: 15px !important;
    color: #bf953f !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: 15px !important;
    text-align: center !important;
    padding: 15px !important;
    margin: 15px 0;
    box-shadow: inset 0 0 15px rgba(191, 149, 63, 0.2), #000 0px 4px 8px;
}

/* ============================================================
   7. BUTTONS & FOOTER
   ============================================================ */
.btn-sultan-auth {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    color: #000;
    font-weight: 900;
    font-size: 14px;
    cursor: pointer;
    box-shadow: #000 0px 4px 8px;
    /* Shadow Utama */
    text-transform: uppercase;
    transition: 0.2s;
}

.btn-sultan-auth:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
}

.auth-footer p {
    font-size: 11px;
    color: #666;
    margin-bottom: 5px;
}

.forgot-link {
    color: #bf953f;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
}

/* Info Box */
.wa-info-box {
    background: rgba(191, 149, 63, 0.05);
    border: 1px solid rgba(191, 149, 63, 0.15);
    padding: 12px;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 11px;
    color: #ccc;
    line-height: 1.4;
}

.wa-info-box i {
    color: #bf953f;
    font-size: 18px;
}

/* Close Button Fix */
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 100;
}

/* FORM SANDI BARU */
#resetPasswordArea {
    width: 100%;
    position: relative;
    z-index: 10;
}

#resetPasswordArea .auth-form.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* END POPUP MODAL LOGIN REGISTER KODE OTP TOPBAR.PHP */

/* START SERVICE SECTION FOOTER.PHP */
/* Container Utama */
.service-section {
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* Card Service dengan Efek Border Mengalir */
.service-card {
    background: #111;
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    padding: 25px;
    position: relative;
    border: 1px solid #222;
    box-shadow: #000 0px 4px 8px;
    /* Shadow Utama Permintaan Anda */
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Animasi Border Cahaya Mengalir */
.service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, transparent, transparent, #bf953f);
    animation: rotateBorder 4s linear infinite;
    z-index: 0;
}

.service-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    /* Menutupi bagian tengah agar hanya border yang terlihat */
    background: #111;
    border-radius: 18px;
    z-index: 1;
}

@keyframes rotateBorder {
    100% {
        transform: rotate(360deg);
    }
}

/* Memastikan konten berada di atas efek border */
.service-card>* {
    position: relative;
    z-index: 2;
}

/* Efek Teks Berkilau (Shimmer) */
.service-title {
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 25px;
    background: linear-gradient(90deg, #666, #fff, #666);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 3s linear infinite;
}

@keyframes shineText {
    to {
        background-position: 200% center;
    }
}

/* Item Transaksi */
.transaction-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trans-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #eee;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.time-val {
    color: #bf953f;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(191, 149, 63, 0.3);
}

.time-val small {
    font-size: 0.6rem;
    margin-left: 2px;
}

/* Progress Bar Animasi */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #222;
}

.progress-bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #bf953f, #fcf6ba);
    border-radius: 10px;
    position: relative;
    animation: progressLoad 2s ease-out forwards;
}

/* Efek Kilatan pada Fill Progress */
.progress-bar .fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: fillShine 2s infinite;
}

@keyframes progressLoad {
    from {
        width: 0;
    }
}

@keyframes fillShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.avg-text {
    font-size: 0.7rem;
    color: #555;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Browser Icons Area */
.responsibility {
    margin-top: 30px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #222;
}

.responsibility p {
    color: #666;
    font-size: 0.75rem;
    margin-bottom: 15px;
}

.res-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.res-icons img {
    width: 25px;
    height: 25px;
    filter: grayscale(1);
    opacity: 0.5;
    transition: 0.3s;
}

.res-icons img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .service-card {
        max-width: 100%;
        border-radius: 15px;
    }
}

/* END SERVICE SECTION FOOTER.PHP */

/* START HISTORY SECTION FOOTER.PHP */
/* Container Utama */
.history-section {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.history-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    width: 100%;
    max-width: 1100px;
}

/* --- Box History (Live Transaction) --- */
.history-box {
    background: #111;
    border-radius: 20px;
    padding: 2px;
    /* Ruang untuk border animasi */
    position: relative;
    overflow: hidden;
    box-shadow: #000 0px 4px 8px;
}

/* Efek Border Mengalir Dua Warna */
.history-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, #bf953f, transparent, #8a6d3b, transparent);
    animation: rotateDual 6s linear infinite;
}

.history-box::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #0f0f0f;
    border-radius: 18px;
    z-index: 1;
}

@keyframes rotateDual {
    100% {
        transform: rotate(360deg);
    }
}

/* Konten History */
.history-header {
    position: relative;
    z-index: 2;
    padding: 15px 20px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
}

.history-header h3 {
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.history-header i {
    color: #bf953f;
    margin-right: 10px;
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.history-list-wrapper {
    position: relative;
    z-index: 2;
    height: 300px;
    overflow: hidden;
    padding: 10px 20px;
}

/* --- Stat Card (Jackpot/WD Terbesar) --- */
.big-win-container {
    display: flex;
    flex-direction: column;
}

.jackpot-card {
    background: #111;
    border-radius: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 30px;
    border: 1px solid #333;
    box-shadow: #000 0px 4px 8px;
    text-align: center;
    overflow: hidden;
}

/* Background Efek Cahaya di Belakang Jackpot */
.jackpot-card::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: #bf953f;
    filter: blur(100px);
    opacity: 0.2;
    z-index: 0;
}

.terbesar-wd {
    position: relative;
    z-index: 1;
    color: #aaa;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.jackpot-amount {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(191, 149, 63, 0.6);
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGrow 2s ease-in-out infinite;
    margin: 5px 0;
}

@keyframes textGrow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.user-wd {
    position: relative;
    z-index: 1;
    background: #000;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid #bf953f;
    color: #bf953f;
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: 15px;
    box-shadow: 0 0 15px rgba(191, 149, 63, 0.2);
}

/* Animasi Entry List Item (Gunakan ini saat nambah data lewat JS) */
.history-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #222;
    animation: slideInLeft 0.5s ease forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .history-grid {
        grid-template-columns: 1fr;
    }

    .history-list-wrapper {
        height: 250px;
    }

    .jackpot-amount {
        font-size: 1.8rem;
    }
}

/* END HISTORY SECTION FOOTER.PHP */

/* START PAYMENT SECTION FOOTER.PHP */
/* Container Utama */
.payment-section {
    padding: 30px 20px;
    display: flex;
    justify-content: center;
}

/* Card Utama dengan Animasi Border Mengalir */
.payment-card {
    background: #111;
    width: 100%;
    max-width: 1100px;
    border-radius: 25px;
    padding: 30px;
    position: relative;
    border: 1px solid #222;
    box-shadow: #000 0px 4px 8px;
    /* Shadow permintaan Anda */
    overflow: hidden;
}

/* Judul dengan Efek Emas Berkilau */
.payment-title {
    color: #fff;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fcf6ba, #bf953f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: goldShine 4s linear infinite;
}

@keyframes goldShine {
    to {
        background-position: 200% center;
    }
}

/* Grid Layout Responsif */
.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 15px;
    position: relative;
    z-index: 2;
}

/* Item Pembayaran (Logo Bank) */
.pay-item {
    background: rgba(255, 255, 255, 0.03);
    /* Efek Glass */
    border: 1px solid #222;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    filter: grayscale(0.6);
    /* Sedikit redup saat normal */
}

.pay-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: 0.4s;
}

/* Animasi & Efek Saat Hover */
.pay-item:hover {
    background: rgba(191, 149, 63, 0.1);
    border-color: #bf953f;
    filter: grayscale(0);
    /* Berwarna penuh saat di-hover */
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(191, 149, 63, 0.2);
}

.pay-item:hover img {
    transform: scale(1.1);
}

/* Animasi Masuk Secara Berurutan (Stagger) */
.pay-item {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Variasi Delay Animasi (Agar Muncul Bergantian) */
.pay-item:nth-child(1) {
    animation-delay: 0.1s;
}

.pay-item:nth-child(2) {
    animation-delay: 0.15s;
}

.pay-item:nth-child(3) {
    animation-delay: 0.2s;
}

.pay-item:nth-child(4) {
    animation-delay: 0.25s;
}

.pay-item:nth-child(5) {
    animation-delay: 0.3s;
}

.pay-item:nth-child(n+6) {
    animation-delay: 0.4s;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .payment-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 10px;
    }

    .pay-item {
        height: 55px;
        padding: 10px;
    }

    .payment-title {
        font-size: 1.1rem;
    }
}

/* Efek Tambahan: Background Glow */
.payment-card::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    width: 60%;
    height: 40%;
    background: radial-gradient(circle, rgba(191, 149, 63, 0.15) 0%, transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* END PAYMENT SECTION FOOTER.PHP */

/* START FOOTER CONTENT FOOTER.PHP */
/* --- Footer Utama --- */
.footer-sultan {
    background: #0a0a0a;
    padding-top: 40px;
    position: relative;
    overflow: hidden;
    color: #ccc;
    border-top: 1px solid #1a1a1a;
}

/* Garis Pembatas Atas (Emas Tipis) */
.footer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #bf953f, transparent);
    position: absolute;
    top: 0;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}

/* Branding Area */
.footer-logo {
    max-height: 50px;
    width: auto;
    filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.3));
    margin-bottom: 15px;
    transition: 0.4s;
}

.footer-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(191, 149, 63, 0.6));
}

.footer-tagline {
    font-size: 0.85rem;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;
    line-height: 1.6;
}

/* Copyright & Warning Area */
.copyright-container {
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding: 20px 0;
    width: 100%;
}

.copyright-text {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.gold-text {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    text-shadow: 0 4px 8px #000;
}

.footer-warning {
    font-size: 0.75rem;
    color: #555;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
}

/* Bar Gradien Paling Bawah */
.bottom-gradient-bar {
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #8a6d3b, #fcf6ba, #bf953f, #fcf6ba, #8a6d3b);
    background-size: 200% auto;
    animation: goldMove 3s linear infinite;
}

@keyframes goldMove {
    to {
        background-position: 200% center;
    }
}

/* --- Responsif Mobile --- */
@media (max-width: 768px) {
    .footer-content {
        padding: 0 15px 30px;
        gap: 25px;
    }

    .footer-tagline {
        font-size: 0.75rem;
    }

    .footer-logo {
        max-height: 40px;
    }
}

/* END FOOTER CONTENT FOOTER.PHP */

/* START NAVBAR FOOTER.PHP */
/* Container Navigasi Utama */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: #0a0a0a;
    /* Hitam Pekat */
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #1a1a1a;
    z-index: 10000;
    padding-bottom: env(safe-area-inset-bottom);
    /* Support iPhone modern */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8);
}

/* Item Navigasi Standar */
.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.3s ease;
    flex: 1;
    gap: 4px;
    cursor: pointer;
}

.nav-item i {
    font-size: 1.2rem;
    transition: 0.3s;
}

.nav-item span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* State Aktif & Hover */
.nav-item.active,
.nav-item:hover {
    color: #bf953f;
}

.nav-item.active i {
    transform: translateY(-3px);
    text-shadow: 0 0 10px rgba(191, 149, 63, 0.5);
}

/* --- Bagian Tengah (Center Item) --- */
.center-item {
    position: relative;
    top: -20px;
    /* Membuatnya menonjol ke atas */
    z-index: 10001;
}

.center-circle {
    width: 55px;
    height: 55px;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: #000 0px 4px 8px, 0 0 15px rgba(191, 149, 63, 0.4);
    border: 4px solid #0a0a0a;
    /* Gap pemisah dengan nav utama */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.center-circle i {
    color: #000;
    font-size: 1.4rem;
}

.center-item span {
    margin-top: 5px;
    color: #bf953f;
    font-weight: 800;
}

/* Efek Hover Bagian Tengah */
.center-item:hover .center-circle {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2);
}

/* Background Curve di belakang Center Item (Opsional) */
.bottom-nav::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    background: #0a0a0a;
    border-radius: 50px 50px 0 0;
    z-index: -1;
    border-top: 1px solid #1a1a1a;
}

/* Animasi Indicator saat diklik */
.nav-item:active {
    transform: scale(0.9);
}

/* --- Responsif Full Cantik --- */
@media (max-width: 480px) {
    .bottom-nav {
        height: 65px;
    }

    .nav-item span {
        font-size: 9px;
    }

    .center-circle {
        width: 50px;
        height: 50px;
        top: -18px;
    }
}

/* END NAVBAR FOOTER.PHP */

/* START SECTION PROMO PROMO.PHP */
/* Container Utama */
.promo-title-section {
    padding: 50px 20px;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #222;
}

/* Efek Cahaya Emas di Belakang Teks */
.promo-title-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 80px;
    background: #bf953f;
    filter: blur(100px);
    opacity: 0.15;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* Judul Utama dengan Efek Logam Emas */
.gold-gradient-promo {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    /* Efek Gradasi Emas Mengkilap */
    background: linear-gradient(to right, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fcf6ba 75%, #bf953f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldReflect 4s linear infinite;
}

/* Animasi Refleksi Cahaya pada Teks */
@keyframes goldReflect {
    to {
        background-position: 200% center;
    }
}

/* Animasi Ikon Hadiah Sultan */
.gold-gradient-promo i {
    -webkit-text-fill-color: #bf953f;
    /* Mengembalikan warna ikon agar tidak transparan */
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(191, 149, 63, 0.6));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(10deg);
    }
}

/* Teks Deskripsi di Bawah */
.promo-title-section p {
    position: relative;
    z-index: 1;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 2px !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    margin: 0;
    opacity: 0.8;
}

/* Garis Aksen Emas Tipis */
.promo-title-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #bf953f, transparent);
    border-radius: 10px;
}

/* RESPONSIVE FULL RAPIH */
@media (max-width: 768px) {
    .promo-title-section {
        padding: 40px 15px;
    }

    .gold-gradient-promo {
        font-size: 1.5rem;
        letter-spacing: 2px;
        gap: 10px;
    }

    .gold-gradient-promo i {
        font-size: 1.4rem;
    }

    .promo-title-section p {
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
    }
}

/* END SECTION PROMO PROMO.PHP */

/* START FILTER PROMO PROMO.PHP */
/* Container Utama */
.promo-filter-container {
    padding: 15px 0;
    position: sticky;
    top: 60px;
    /* Sesuaikan dengan tinggi header Anda */
    z-index: 100;
    border-bottom: 1px solid #1a1a1a;
}

/* Area Scroll Halus */
.promo-filter-scroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 15px;
    gap: 10px;
    scrollbar-width: none;
    /* Hilangkan scrollbar di Firefox */
    -ms-overflow-style: none;
    /* Hilangkan scrollbar di IE/Edge */
}

/* Sembunyikan scrollbar di Chrome, Safari, dan Opera */
.promo-filter-scroll::-webkit-scrollbar {
    display: none;
}

/* Style Tombol Filter (Premium Glass) */
.filter-btn {
    background: #111;
    color: #888;
    border: 1px solid #333;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: #000 0px 4px 8px;
    /* Shadow permintaan Anda */
    flex-shrink: 0;
}

/* State Tombol Aktif (Sultan Glow) */
.filter-btn.active {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    color: #000;
    border-color: #fcf6ba;
    box-shadow: 0 0 15px rgba(191, 149, 63, 0.4), #000 0px 4px 8px;
    transform: scale(1.05);
}

/* Efek Hover untuk Desktop */
.filter-btn:hover:not(.active) {
    border-color: #bf953f;
    color: #fff;
    background: #1a1a1a;
}

/* Animasi Klik (Micro-interaction) */
.filter-btn:active {
    transform: scale(0.95);
}

/* Responsive Mobile */
@media (max-width: 480px) {
    .filter-btn {
        padding: 8px 20px;
        font-size: 10px;
    }
}

/* END FILTER PROMO PROMO.PHP */

/* START PAGE DATA PROMO PROMO.PHP */
/* Container Utama */
.vip-promo-wrapper {
    padding: 30px 15px;
    max-width: 1300px;
    margin: 0 auto;
    min-height: 500px;
}

/* Grid System */
.vip-grid-layer {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.vip-grid-layer.active {
    display: grid !important;
    opacity: 1;
    transform: translateY(0);
}

/* Card Design */
.vip-promo-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.vip-promo-card:hover {
    transform: translateY(-10px);
    border-color: #bf953f;
    box-shadow: 0 15px 40px rgba(191, 149, 63, 0.15);
}

/* Image Section */
.vip-card-image {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.vip-card-image img {
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
}

.vip-promo-card:hover .vip-card-image img {
    transform: scale(1.1);
}

.vip-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 17, 17, 1), transparent);
}

/* Body Section */
.vip-card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.vip-card-title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.vip-card-text {
    color: #999;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* Buttons Section */
.vip-card-footer {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 12px;
}

.vip-btn {
    padding: 12px 5px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
}

.vip-btn-gold {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    color: #000;
    border: none;
}

.vip-btn-outline {
    background: transparent;
    color: #bf953f;
    border: 1px solid #bf953f;
}

.vip-btn:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}

/* No Data */
.vip-no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #555;
}

.vip-no-data i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #333;
}

/* Container Utama Modal */
.vip-mini-popup {
    border: 1px solid #bf953f !important;
    border-radius: 12px !important;
    max-height: 85vh !important;
    /* Batas maksimal modal adalah 85% tinggi layar */
    display: flex !important;
    flex-direction: column !important;
}

/* Judul Kecil */
.vip-mini-title {
    color: #bf953f;
    font-size: 0.95rem !important;
    font-weight: 800;
    margin-bottom: 5px;
    padding: 10px 5px;
}

/* Bagian Scroll Teks (Penyelamat Tombol) */
.vip-mini-scroll {
    overflow-y: auto;
    max-height: 50vh;
    /* Batasi teks hanya boleh pakai 50% layar */
    text-align: left;
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0 15px;
    margin-bottom: 10px;
}

/* Tombol Tutup Tetap di Bawah */
.vip-mini-btn {
    width: 90% !important;
    font-size: 0.8rem !important;
    padding: 10px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    font-weight: 900 !important;
}

/* Gaya Scrollbar Minimalis */
.vip-mini-scroll::-webkit-scrollbar {
    width: 3px;
}

.vip-mini-scroll::-webkit-scrollbar-thumb {
    background: #bf953f;
}

/* Perbaikan khusus untuk layar HP pendek / Landscape */
@media (max-height: 500px) {
    .vip-mini-scroll {
        max-height: 35vh;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .vip-grid-layer {
        grid-template-columns: 1fr;
    }

    .vip-card-image {
        height: 160px;
    }
}

/* END PAGE DATA PROMO PROMO.PHP */

/* START SUKSES LOGOUT */
/* Container Utama Notifikasi Logout */
.vip-logout-popup {
    border: 1px solid #bf953f !important;
    /* Border Emas */
    border-radius: 20px !important;
    box-shadow: 0 0 30px rgba(191, 149, 63, 0.2) !important;
    padding: 20px !important;
}

/* Judul Logout */
.vip-swal-title-logout {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #bf953f;
    letter-spacing: 2px;
    font-size: 1.3rem;
}

/* Teks Deskripsi */
.vip-swal-text-logout {
    font-family: 'Montserrat', sans-serif;
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Tombol OK Emas Glossy */
.vip-logout-confirm-btn {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%) !important;
    color: #000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 12px 40px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    border: none !important;
    min-width: 120px;
}

.vip-logout-confirm-btn:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-2px);
}

/* Warna Timer Progress Bar */
.vip-timer-bar {
    background: #bf953f !important;
}

/* Penyesuaian Responsif */
@media (max-width: 480px) {
    .vip-logout-popup {
        width: 90% !important;
    }

    .vip-swal-title-logout {
        font-size: 1.1rem;
    }
}

/* END SUKSES LOGOUT */

/* START SEARCH GAME GAME.PHP */
/* --- SEARCH SECTION STYLE --- */
.search-section {
    padding: 40px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.search-container {
    width: 100%;
    max-width: 700px;
    /* Ukuran maksimal search bar */
}

.search-box-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    /* Efek Kaca */
    border: 1px solid rgba(191, 149, 63, 0.3);
    /* Border Emas Transparan */
    border-radius: 50px;
    padding: 5px 25px;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: #000 0px 4px 8px;
}

/* Icon Search */
.search-icon {
    color: #bf953f;
    font-size: 1.2rem;
    margin-right: 15px;
    transition: all 0.3s ease;
}

/* Input Field */
#gameSearch {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 15px 0;
}

#gameSearch::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Glow Effect Layer */
.search-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #bf953f, #fcf6ba, #bf953f);
    border-radius: 50px;
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.4s ease;
}

/* --- HOVER & FOCUS STATES --- */

/* Saat Wrapper di Hover */
.search-box-wrapper:hover {
    border-color: rgba(191, 149, 63, 0.8);
    transform: translateY(-3px);
    box-shadow: #000 0px 4px 8px;
}

/* Saat Input di Klik (Focus) */
.search-box-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.07);
    border-color: #fcf6ba;
    transform: scale(1.02);
}

.search-box-wrapper:focus-within .search-glow {
    opacity: 0.6;
    /* Memunculkan pendaran emas saat mengetik */
}

.search-box-wrapper:focus-within .search-icon {
    color: #fcf6ba;
    transform: rotate(90deg);
    /* Animasi kecil pada icon */
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .search-section {
        padding: 25px 15px;
    }

    .search-box-wrapper {
        padding: 2px 20px;
    }

    #gameSearch {
        font-size: 0.9rem;
        padding: 12px 0;
    }
}

/* END SEARCH GAME GAME.PHP */

/* START CATEGORY TAB GAME GAME.PHP */
/* Container Utama */
.category-container {
    width: 100%;
    max-width: 1300px;
    /*margin: 20px auto;*/
    overflow: hidden;
}

/* Scroll Wrapper */
.category-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 15px 5px;
    scrollbar-width: none;
    /* Sembunyikan scrollbar di Firefox */
    -ms-overflow-style: none;
    /* Sembunyikan scrollbar di IE/Edge */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Sembunyikan scrollbar Chrome/Safari */
.category-tabs::-webkit-scrollbar {
    display: none;
}

/* Desain Item Tab */
.tab-item {
    white-space: nowrap;
    /* Teks tidak turun ke bawah */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(191, 149, 63, 0.2);
    color: #aaa;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: #000 0px 4px 8px;
}

/* Hover Effect */
.tab-item:hover {
    color: #fff;
    border-color: #bf953f;
    background: rgba(191, 149, 63, 0.1);
}

/* Active State (Gold Glow) */
.tab-item.active {
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    color: #000;
    border: none;
    box-shadow: #000 0px 4px 8px;
    transform: translateY(-2px);
}

/* Efek Klik */
.tab-item:active {
    transform: scale(0.95);
}

/* Penyesuaian Responsif Desktop */
@media (min-width: 1024px) {
    .category-tabs {
        flex-wrap: wrap;
        /* Di desktop biarkan membungkus jika terlalu banyak */
        justify-content: center;
    }
}

/* END CATEGORY TAB GAME GAME.PHP */

/* START ALERT BELUM LOGIN JIKA KLIK GAME GAME.PHP */
/* Container Utama Modal */
.vip-alert-popup {
    border: 1px solid #bf953f !important;
    border-radius: 15px !important;
    box-shadow: 0 0 25px rgba(191, 149, 63, 0.2) !important;
    max-width: 400px !important;
    /* Agar lebih mungil dan rapi */
}

/* Judul Modal */
.vip-alert-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #bf953f;
    letter-spacing: 1px;
    font-size: 1.2rem;
}

/* Isi Pesan */
.vip-alert-content {
    font-family: 'Montserrat', sans-serif;
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Tombol Konfirmasi */
.vip-alert-btn {
    width: 80% !important;
    font-weight: 800 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%) !important;
    color: #000 !important;
    border: none !important;
    transition: 0.3s !important;
}

.vip-alert-btn:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

/* Progress bar warna emas jika ingin menggunakan timer */
.swal2-timer-progress-bar {
    background: #bf953f !important;
}

/* Responsivitas Mobile */
@media (max-width: 480px) {
    .vip-alert-popup {
        width: 85% !important;
    }
}

/* END ALERT BELUM LOGIN JIKA KLIK GAME GAME.PHP */

/* START GAME CONTAINER/DATA GAME GAME.PHP */
/* --- SECTION CONTAINER --- */
.game-list-section {
    padding: 10px;
    max-width: 1400px;
    margin: 0 auto;
}

.game-container {
    display: grid;
    /* Desktop: 6 kolom | Mobile: 3 kolom (Default) */
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    /* Gap kecil agar muat banyak tapi rapi */
}

/* --- GAME CARD --- */
.game-card {
    background: rgba(20, 20, 20, 0.8);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(191, 149, 63, 0.15);
    transition: transform 0.3s ease;
    /* Menggunakan shadow dari desain VIP Anda */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    will-change: transform;
    /* Optimasi performa */
}

.game-card:hover {
    transform: translateY(-5px);
    border-color: #bf953f;
    box-shadow: 0 0 15px rgba(191, 149, 63, 0.3);
}

/* --- IMAGE BOX --- */
.img-box {
    position: relative;
    aspect-ratio: 1/1;
    /* Kotak sempurna */
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* Label PLAY Kecil di Pojok (Static) */
.label-play-small {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(191, 149, 63, 0.85);
    color: #000;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 3;
}

/* Overlay saat Hover */
.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
}

.game-card:hover .play-overlay {
    opacity: 1;
}

.game-card:hover .img-box img {
    transform: scale(1.1);
}

/* Tombol Play SULTAN */
.btn-play-sultan {
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(191, 149, 63, 0.8);
}

/* --- GAME INFO & RTP --- */
.game-info {
    padding: 6px;
    background: #111;
}

.game-name {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Nama panjang dipotong ... */
    margin-bottom: 4px;
    text-transform: uppercase;
    text-align: center;
}

/* RTP WRAP */
.rtp-wrap {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 3px;
}

.rtp-top {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 900;
    margin-bottom: 2px;
}

.rtp-bar-bg {
    width: 100%;
    height: 4px;
    background: #222;
    border-radius: 10px;
    overflow: hidden;
}

.rtp-bar-fill {
    height: 100%;
    width: 0%;
    /* Diatur via JS */
    transition: width 1s ease-in-out;
}

/* --- NO DATA MESSAGE --- */
.no-data-neon-box {
    border: 2px dashed #bf953f;
    padding: 30px;
    border-radius: 20px;
    background: rgba(191, 149, 63, 0.05);
}

@keyframes pulseGreen {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

.rtp-top span:first-child {
    animation: pulseGreen 1.5s infinite;
}

.load-more-wrapper {
    text-align: center;
    margin: 40px 0;
}

.btn-load-more {
    background: transparent;
    color: #bf953f;
    border: 1px solid #bf953f;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.btn-load-more:hover {
    background: #bf953f;
    color: #000;
    box-shadow: 0 0 20px rgba(191, 149, 63, 0.4);
    transform: translateY(-3px);
}

.btn-load-more i {
    transition: transform 0.3s ease;
}

.btn-load-more:hover i {
    transform: translateY(3px);
}

/* Sembunyikan item awal */
.game-item-hidden {
    display: none;
}

/* --- RESPONSIVE MOBILE (3-4 KOLOM) --- */
@media (max-width: 768px) {
    .game-container {
        /* Menggunakan 3 kolom di HP medium */
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .game-container {
        /* Menggunakan 4 kolom untuk HP layar kecil (Mode Super Rapi) */
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 5px;
    }

    .game-name {
        font-size: 7px;
    }

    .rtp-num {
        font-size: 7px;
    }

    .rtp-top span:first-child {
        font-size: 6px;
    }

    .game-info {
        padding: 4px;
    }

    .btn-play-sultan {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }
}

/* END GAME CONTAINER/DATA GAME GAME.PHP */

/* START AGAR HREF TIDAK ADA GARIS BAWAH */
.grid-item-link {
    text-decoration: none;
    /* Menghilangkan garis bawah */
    color: inherit;
    /* Mengikuti warna teks asli (tidak jadi biru) */
    display: block;
    /* Membuat seluruh area kotak bisa diklik */
}

.grid-item-link:hover {
    text-decoration: none;
    /* Memastikan saat di-hover garis bawah tetap tidak ada */
}

/* END AGAR HREF TIDAK ADA GARIS BAWAH */

/* START PROFILE WRAPPER PROFIL.PHP */
.profile-wrapper {
    max-width: 900px;

    margin: 40px auto;

    padding: 0 20px;
}

/* HEADER PROFIL PREMIUM */

.profile-header-card {
    position: relative;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    padding: 35px;

    display: flex;

    align-items: center;

    gap: 30px;

    overflow: hidden;

    backdrop-filter: blur(15px);

    box-shadow: 0 4px 8px #000;

    margin-bottom: 25px;
}

.profile-header-card::after {
    content: "";

    position: absolute;

    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;

    background: radial-gradient(circle,
            rgba(191, 149, 63, 0.05) 0%,
            transparent 70%);

    z-index: 0;
}

/* --- VIP PROGRESS STYLING --- */
.vip-progress-wrapper {
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid rgba(191, 149, 63, 0.1);
    max-width: 350px;
    box-shadow: 0 4px 8px #000;
}

.vip-info-text {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 8px;
    display: block;
    letter-spacing: 0.3px;
}

.progress-container {
    width: 100%;
    height: 6px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 8px #000;
}

.progress-bar-glow {
    height: 100%;
    background: linear-gradient(90deg, #bf953f, #fcf6ba, #bf953f);
    background-size: 200% 100%;
    animation: shine-progress 2s linear infinite;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(191, 149, 63, 0.4);
}

.vip-unlocked {
    margin-top: 12px;
    font-size: 12px;
    color: #00ff80;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 128, 0.2);
}

/* Animasi mengalir pada progress bar */
@keyframes shine-progress {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* --- RESPONSIVE FIX --- */
@media (max-width: 768px) {
    .vip-progress-wrapper {
        max-width: 100%;
        margin: 15px auto 0;
    }

    .vip-info-text {
        font-size: 10px;
        text-align: center;
    }

    .vip-unlocked {
        justify-content: center;
    }
}

/* --- ICON GIFT ANIMATION --- */
.gift-reward-icon {
    color: #fcf6ba;
    margin-left: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.6));
    animation: giftTada 2s infinite;
    /* Animasi bergoyang */
}

@keyframes giftTada {
    0% {
        transform: scale(1);
    }

    10%,
    20% {
        transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.2) rotate(3deg);
    }

    40%,
    60%,
    80% {
        transform: scale(1.2) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

/* --- MODAL OVERLAY --- */
.reward-modal-overlay {
    position: fixed !important;
    /* Wajib fixed agar mengikuti layar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* Latar belakang lebih gelap */
    backdrop-filter: blur(10px);
    /* Efek blur kaca */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999 !important;
    /* Angka tertinggi agar di atas sidebar/header */
    padding: 20px;
    overflow-y: auto;
    /* Agar bisa di-scroll jika layar HP pendek */
}

/* --- MODAL CONTENT --- */
.reward-modal-content {
    background: linear-gradient(165deg, #1a1a1a 0%, #050505 100%);
    width: 100%;
    max-width: 400px;
    margin: auto;
    /* Memastikan posisi di tengah saat di-scroll */
    border-radius: 28px;
    border: 1px solid rgba(191, 149, 63, 0.4);
    padding: 30px 25px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1),
        inset 0 0 20px rgba(191, 149, 63, 0.05);
    animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reward-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.reward-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #bf953f, #fcf6ba);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.close-reward {
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

/* Container Body yang bisa di-scroll */
.reward-modal-body-scroll {
    padding: 15px 25px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: 450px; /* Batasi tinggi agar muncul scroll jika item banyak */
}

/* Scrollbar Style Emas (WebKit) */
.reward-modal-body-scroll::-webkit-scrollbar {
    width: 5px;
}
.reward-modal-body-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.reward-modal-body-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #bf953f, #fcf6ba);
    border-radius: 10px;
}

.fa-spin-hover {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reward-item:hover .fa-spin-hover {
    transform: rotate(360deg);
    color: #fcf6ba; /* Warna berubah menjadi emas terang saat berputar */
}

/* --- REWARD LIST --- */
.reward-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px; /* Jarak antar item lebih rapat agar muat banyak */
    background: rgba(255, 255, 255, 0.03);
    padding: 14px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, background 0.2s ease;
}

.reward-item:hover {
    background: rgba(191, 149, 63, 0.08);
    transform: scale(1.02);
}

.reward-item i {
    width: 42px;
    height: 42px;
    flex-shrink: 0; /* Mencegah icon gepeng */
    background: rgba(191, 149, 63, 0.1);
    border: 1px solid rgba(191, 149, 63, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bf953f;
    font-size: 1.2rem;
}

.reward-desc strong {
    display: block;
    color: #fff;
    font-size: 0.88rem;
    margin-bottom: 3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.reward-desc span {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.4;
    display: block;
}

/* Tombol tetap di bawah (Footer) */
.reward-modal-footer {
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-close-reward {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #bf953f, #fcf6ba);
    border: none;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 10px;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Tambahan agar body tidak goyang saat modal buka */
body.modal-open {
    overflow: hidden !important;
    height: 100vh;
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .reward-modal-content {
        padding: 20px;
    }

    .reward-modal-header h3 {
        font-size: 1rem;
    }
}

.header-glow {
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 2px;

    background: linear-gradient(90deg, transparent, #bf953f, transparent);
}

.avatar-box {
    position: relative;

    width: 120px;

    height: 120px;

    z-index: 2;
}

.avatar-box img {
    width: 100%;
    height: 100%;

    border-radius: 50%;

    border: 4px solid #1a1a1a;

    box-shadow: 0 4px 8px #000;

    object-fit: cover;
}

.level-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 50px;
    border: 3px solid #0f0f0f;
    box-shadow: 0 4px 8px #000;
}

.level-badge.vip {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    color: #000;
}

.level-badge.reguler {
    background: linear-gradient(135deg, #7f8c8d, #bdc3c7, #ffffff, #95a5a6);
    color: #000;
}

.vip i {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.reguler i {
    color: #2c3e50;
}

.user-info {
    z-index: 2;
    flex: 1;
}

.name-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.name-wrapper h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;

    background: linear-gradient(135deg,
            #bf953f,
            #fcf6ba,
            #b38728,
            #fbf5b7,
            #aa771c);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.verified-icon {
    color: #00d2ff;
    font-size: 1.3rem;
    text-shadow: 0 4px 8px #000;
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.6));
}

.user-status-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: rgba(0, 255, 128, 0.08);

    color: #00ff80;

    padding: 6px 16px;

    border-radius: 50px;

    font-size: 0.8rem;

    font-weight: 600;

    margin: 10px 0;

    border: 1px solid rgba(0, 255, 128, 0.15);

    box-shadow: 0 4px 8px #000;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #00ff80;

    border-radius: 50%;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 4px 8px #000;
    }

    70% {
        box-shadow: 0 4px 8px #000;
    }

    100% {
        box-shadow: 0 4px 8px #000;
    }
}

/* STATS GRID */

.stats-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 25px;
}

.stat-card {
    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    padding: 22px;

    text-align: center;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    backdrop-filter: blur(10px);

    box-shadow: 0 4px 8px #000;
}

.stat-card:hover {
    border-color: #bf953f;

    transform: translateY(-8px);

    box-shadow: 0 4px 8px #000;
}

.stat-card i {
    font-size: 1.6rem;

    background: linear-gradient(135deg,
            #bf953f,
            #fcf6ba,
            #b38728,
            #fbf5b7,
            #aa771c);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin-bottom: 12px;
}

.stat-val {
    display: block;
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* TABS */
.profile-tabs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    white-space: nowrap !important;
    gap: 12px;
    padding: 8px;
    margin-bottom: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 8px #000;

    /* Smooth Scroll untuk Mobile */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* Hilangkan scrollbar di Firefox & IE */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Hilangkan scrollbar di Chrome & Safari */
.profile-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Styling Tombol Tab */
.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    min-width: 90px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: #888;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn i {
    font-size: 1.2rem;
}

.tab-btn span {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.tab-btn.active {
    background: linear-gradient(135deg,
            #bf953f,
            #fcf6ba,
            #b38728,
            #fbf5b7,
            #aa771c);

    color: #000;

    box-shadow: 0 4px 8px #000;
}

.tab-btn.active i {
    filter: drop-shadow(0 0 5px rgba(191, 149, 63, 0.5));
}

/* Efek Hover di Desktop */
@media (hover: hover) {
    .tab-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.08);
        color: #ccc;
    }
}

/* --- CSS BARU UNTUK PENDING & HISTORY --- */
.pending-section {
    margin-bottom: 25px;
    animation: fadeInDown 0.6s ease-out;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ff4d4d;
    /* Warna merah peringatan */
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-left: 5px;
}

/* --- ANIMASI PULSE TITIK MERAH --- */
.pulse-red {
    width: 8px;
    height: 8px;
    background: #ff4d4d;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.pulse-red::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: pulseMerah 1.5s ease-out infinite;
}

/* --- CARD PENDING --- */
.pending-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid #f39c12;
    /* Aksen Oranye Pending */
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 8px #000;
}

.pending-card:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(243, 156, 18, 0.5);
}

/* --- IKON & INFO --- */
.p-icon {
    width: 40px;
    height: 40px;
    background: rgba(243, 156, 18, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f39c12;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px #000;
}

.p-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-type {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.p-date {
    color: #666;
    font-size: 0.7rem;
}

.p-amount {
    font-weight: 800;
    color: #fff;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 8px #000;
}

/* --- KEYFRAMES ANIMASI --- */
@keyframes pulseMerah {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE OPTIMIZATION --- */
@media (max-width: 768px) {
    .pending-card {
        padding: 12px;
        gap: 10px;
    }

    .p-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .p-type {
        font-size: 0.8rem;
    }

    .p-amount {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .p-date {
        font-size: 0.65rem;
    }

    .section-title {
        font-size: 0.7rem;
    }
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    font-size: 0.8rem;
}

.custom-table th {
    padding: 12px 10px;
    text-align: center;
    color: #bf953f;
    border-bottom: 2px solid #333;
}

.custom-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #222;
}

.badge-status {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    display: inline-block;
}

.badge-status.sukses {
    background: #27ae60;
    color: #fff;
}

.badge-status.berhasil {
    background: #27ae60;
    color: #fff;
}

.badge-status.ditolak {
    background: #c0392b;
    color: #fff;
}

.badge-status.gagal {
    background: #c0392b;
    color: #fff;
}

.badge-status.pending {
    background: #f39c12;
    color: #000;
}

.pulse-red {
    width: 8px;
    height: 8px;
    background: #ff4d4d;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
    }
}

/* CONTENT BOX */

.tab-content {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-card {

    border-radius: 24px;

    padding: 10px;

    backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px #000;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    color: #888;

    font-size: 0.8rem;
    font-weight: 600;

    margin-bottom: 10px;
    text-transform: uppercase;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;

    transform: translateY(-50%);
    color: #444;
}

.form-control {
    width: 100%;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid #333;

    padding: 14px 15px 14px 45px;

    border-radius: 12px;

    color: #fff;

    font-size: 0.95rem;

    transition: 0.3s;
}

.btn-otp {
    background: #bf953f;
    color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.btn-otp:disabled {
    background: #444;
    color: #888;
}

.form-control:focus {
    border-color: #bf953f;

    outline: none;

    background: rgba(0, 0, 0, 0.6);

    box-shadow: 0 4px 8px #000;
}

.btn-update {
    width: 100%;

    padding: 16px;

    background: linear-gradient(135deg,
            #bf953f,
            #fcf6ba,
            #b38728,
            #fbf5b7,
            #aa771c);

    border: none;

    border-radius: 14px;

    font-weight: 800;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-top: 10px;

    transition: 0.4s;
}

.btn-update:hover {
    transform: scale(1.02);

    filter: brightness(1.1);

    box-shadow: 0 4px 8px #000;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .name-wrapper {
        justify-content: center;
    }

    .profile-wrapper {
        margin: 20px auto;
    }
}

/* CSS Tambahan Khusus untuk Bank Card Premium */

.bank-card-visual {
    position: relative;

    width: 100%;

    max-width: 400px;

    height: 220px;

    margin: 0 auto 30px;

    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);

    border: 1px solid rgba(191, 149, 63, 0.3);

    border-radius: 20px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    box-shadow: 0 4px 8px #000;
}

.bank-card-glow {
    position: absolute;

    top: -50%;

    right: -20%;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle,
            rgba(191, 149, 63, 0.1) 0%,
            transparent 70%);
}

.bank-top {
    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 1;
}

.bank-name-label {
    font-size: 0.8rem;

    font-weight: 700;

    color: #bf953f;

    letter-spacing: 1px;
}

.bank-chip {
    width: 45px;

    height: 35px;

    background: linear-gradient(135deg, #d4af37, #fcf6ba);

    border-radius: 6px;

    position: relative;

    margin: 15px 0;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    padding: 5px;
}

.chip-line {
    width: 100%;

    height: 1px;

    background: rgba(0, 0, 0, 0.2);
}

.account-number-display {
    font-size: 1.4rem;

    font-family: "Courier New", Courier, monospace;

    letter-spacing: 3px;

    color: #fff;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    margin: 10px 0;

    z-index: 1;
}

.bank-bottom {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    z-index: 1;
}

.label-tiny {
    display: block;

    font-size: 0.6rem;

    color: #666;

    margin-bottom: 2px;
}

.holder-name {
    font-size: 0.9rem;

    font-weight: 600;

    color: #eee;

    text-transform: uppercase;
}

.status-bank-badge {
    background: rgba(0, 255, 128, 0.1);

    color: #00ff80;

    padding: 3px 12px;

    border-radius: 50px;

    font-size: 0.7rem;

    font-weight: 800;

    border: 1px solid rgba(0, 255, 128, 0.2);
}

/* Detail List Styling */

.bank-detail-list {
    background: rgba(0, 0, 0, 0.3);

    border-radius: 15px;

    padding: 10px 20px;

    margin-bottom: 20px;
    box-shadow: 0 4px 8px #000;
}

.detail-item {
    display: flex;

    justify-content: space-between;

    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    font-size: 0.9rem;
}

.detail-item:last-child {
    border: none;
}

.detail-item span {
    color: #888;
}

.detail-item strong {
    color: #fff;
    font-weight: 600;
}

.bank-note {
    background: rgba(191, 149, 63, 0.05);

    border-left: 3px solid #bf953f;

    padding: 15px;

    border-radius: 0 12px 12px 0;

    display: flex;

    gap: 12px;

    align-items: center;
    box-shadow: 0 4px 8px #000;
}

.bank-note i {
    color: #bf953f;
    font-size: 1.2rem;
}

.bank-note span {
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.4;
}

.bank-note strong {
    color: #bf953f;
}

@media (max-width: 480px) {
    .bank-card-visual {
        height: 200px;
        padding: 15px;
    }

    .account-number-display {
        font-size: 1.1rem;
    }
}

/* KYC ATAU REFFERAL */
.kyc-container {
    padding: 15px;
    max-width: 500px;
    margin: 0 auto;
}

.kyc-header {
    text-align: center;
    margin-bottom: 20px;
}

.kyc-icon-main {
    font-size: 40px;
    background: linear-gradient(135deg, #bf953f, #96c93d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.kyc-header h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kyc-header p {
    color: #aaa;
    font-size: 0.85rem;
}

.kyc-card {
    background: rgba(20, 25, 30, 0.8);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(191, 149, 63, 0.3);
    box-shadow: #000 0px 4px 8px;
    backdrop-filter: blur(10px);
}

.form-group-kyc {
    margin-bottom: 18px;
}

.form-group-kyc label {
    display: block;
    color: #bf953f;
    font-size: 0.8rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.input-wrapper-kyc {
    position: relative;
}

.form-control-kyc {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    color: #fff !important;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-control-kyc:focus {
    background: rgb(24 23 23) !important;
    border-color: #bf953f !important;
    box-shadow: #000 0px 4px 8px;
    outline: none;
}

.kyc-notice {
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    box-shadow: #000 0px 4px 8px
}

.kyc-notice i {
    color: #bf953f;
}

.kyc-notice span {
    color: #999;
    font-size: 0.75rem;
    line-height: 1.4;
}

.btn-kyc-submit {
    width: 100%;
    margin-top: 25px;
    padding: 15px;
    border-radius: 15px;
    border: none;
    background: linear-gradient(135deg, rgb(191, 149, 63), rgb(252, 246, 186), rgb(179, 135, 40), rgb(251, 245, 183), rgb(170, 119, 28));
    color: #000;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: #000 0px 4px 8px;
}

.btn-kyc-submit:hover {
    transform: translateY(-3px);
    box-shadow: #000 0px 4px 8px;
    filter: brightness(1.1);
}

.btn-kyc-submit:active {
    transform: translateY(1px);
}

.reff-td-member {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.reff-wa-link {
    color: #00b09b !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: 0.3s;
}

.reff-wa-link i {
    font-size: 14px;
    margin-right: 5px;
}

.reff-wa-link:hover {
    color: #96c93d !important;
    text-shadow: 0 0 8px rgba(0, 176, 155, 0.4);
}

/* Mengatur baris tabel agar lebih nyata */
.reff-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.reff-content-card {
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px #000;
}

/* Link Referral Section */
.reff-link-section {
    margin-bottom: 25px;
}

.reff-label {
    color: #bf953f;
    font-size: 12px;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.reff-copy-wrapper {
    display: flex;
    background: #0a0c0f;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid #333;
    box-shadow: 0 4px 8px #000;
}

.reff-input-url {
    flex: 1;
    background: transparent;
    border: none;
    color: #eee;
    padding: 10px;
    font-size: 13px;
    outline: none !important;
}

.reff-copy-btn {
    background: linear-gradient(135deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#aa771c);
    border: none;
    border-radius: 8px;
    color: #000;
    padding: 0 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 12px;
}

.reff-hint {
    font-size: 11px;
    color: #666;
    margin-top: 8px;
}

.reff-divider { border: 0; border-top: 1px solid #242b33; margin: 20px 0; }

/* Table Header & Search */
.reff-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.reff-title { color: #fff; margin: 0; font-size: 14px; }

.reff-search-box {
    position: relative;
    background: #0a0c0f;
    border-radius: 8px;
    padding: 5px 10px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px #000;
}

.reff-search-box i { color: #555; font-size: 12px; margin-right: 8px; }

.reff-filter-input {
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 12px;
    outline: none;
    width: 150px;
}

/* Table Styling */
.reff-table-container {
    width: 100%;
    overflow-x: auto; /* Memungkinkan scroll kanan-kiri di HP */
    overflow-y: hidden; 
    max-height: 500px; /* Opsional: batasi tinggi dan scroll atas-bawah jika data penuh */
    -webkit-overflow-scrolling: touch; /* Agar scroll di iPhone terasa halus */
}

.reff-custom-table {
    width: 100%;
    min-width: 600px; /* Paksa tabel memiliki lebar minimal agar bisa di-scroll di layar kecil */
    border-collapse: collapse;
}

.reff-custom-table th {
    text-align: left;
    padding: 12px 10px;
    font-size: 11px;
    color: #555;
    border-bottom: 1px solid #242b33;
}

.reff-custom-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #1a1f24;
}

.reff-td-time span { display: block; color: #fff; font-size: 13px; font-weight: bold; }
.reff-td-time small { color: #555; font-size: 10px; }

.reff-type { color: #bf953f; font-weight: bold; font-size: 12px; }
.reff-amount { color: #fff; font-weight: 800; font-size: 13px; }

/* Status Pills */
.reff-status-pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
}

.status-pending { background: rgba(255, 193, 7, 0.1); color: #ffc107; }
.status-success { background: rgba(0, 176, 155, 0.1); color: #00b09b; }
.status-failed { background: rgba(220, 53, 69, 0.1); color: #dc3545; }

/* Pagination */
.reff-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.reff-page-btn {
    background: rgba(191, 149, 63, 0.2);
    border: 1px solid #bf953f;
    color: #bf953f;
    padding: 6px 15px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
}

#pageIndicatorHistory { color: #555; font-size: 11px; }

.reff-no-data { text-align: center; color: #555; padding: 40px !important; }
/* END PROFILE WRAPPER PROFIL.PHP */

/* START CSS TRANSAKSI PENDING */
#pending-transaction-section {
    padding: 40px 15px;
    font-family: 'Outfit', sans-serif;
    min-height: 80vh;
}

.pending-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Status Steps Modified for Pending */
.depo-step.done .step-icon {
    background: #00ff80;
    color: #000;
    border-color: #00ff80;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

/* Card Styling */
.pending-card {
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
    text-align: center;
}

.status-badge {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.pending-header h3 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 800;
    margin-bottom: 10px;
}

.pending-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Details List */
.pending-details {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 25px;
    margin: 30px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.text-gold {
    color: #d4af37;
}

.text-white {
    color: #fff;
}

.total-payout {
    margin-top: 20px;
    padding-top: 20px;
}

.total-payout .label {
    color: #00ff80;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.total-payout .amount {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    margin-top: 5px;
}

/* Footer & Buttons */
.info-notice {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(79, 172, 254, 0.05);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 30px;
    text-align: left;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.info-notice i {
    color: #4facfe;
    font-size: 1.2rem;
}

.info-notice p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.btn-history,
.btn-wa {
    padding: 15px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.9rem;
}

.btn-history {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.btn-wa {
    background: #25d366;
    color: #fff;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.btn-history:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.btn-wa:hover {
    background: #1ebd5b;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

/* Animations */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
    }
}

.pulse-red {
    animation: pulse-red 2s infinite;
}

.pulse-gold {
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

@media (max-width: 500px) {
    .pending-card {
        padding: 10px;
    }

    .amount {
        font-size: 1.8rem;
    }

    .action-buttons {
        grid-template-columns: 1fr;
    }
}

/* END CSS TRANSAKSI PENDING */

/* START CSS TRANSAKSI NON PENDING */
#deposit-sultan-section {
    padding: 40px 15px;
    font-family: 'Outfit', sans-serif;
    background-attachment: fixed;
    min-height: 100vh;
}

#withdraw-sultan-section {
    padding: 40px 15px;
    font-family: 'Outfit', sans-serif;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Notice Box yang lebih cantik */
.trx-notice-box {
    margin-top: 20px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.trx-notice-box i { color: #ffd700; font-size: 18px; }
.trx-notice-box p { color: #eee; font-size: 12px; margin: 0; }

/* Wrapper Tab Utama */
.trx-tab-wrapper {
    display: flex;
    gap: 12px;
    margin: 20px auto;
    max-width: 450px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(191, 149, 63, 0.2);
}

.trx-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 10px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 600;
}

.trx-tab-btn .tab-icon {
    font-size: 18px;
    transition: 0.3s;
}

/* State Aktif (Warna Gold) */
.trx-tab-btn.active {
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728);
    color: #000;
    box-shadow: 0 4px 15px rgba(191, 149, 63, 0.4);
}

.trx-tab-btn.active .tab-icon {
    transform: scale(1.1);
}

.trx-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.trx-tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.trx-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sesuaikan input di Mobile */
@media (max-width: 480px) {
    .trx-tab-wrapper { width: 95%; }
    .trx-tab-btn { padding: 10px 5px; font-size: 12px; }
}

.depo-container {
    max-width: 700px;
    margin: 0 auto;
}

/* Steps Progress - Lebih Elegan */
.depo-steps-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

.depo-steps-wrapper::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.depo-step {
    position: relative;
    z-index: 2;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.5s ease;
}

.depo-step.active {
    color: #fff;
    transform: scale(1.1);
}

.step-icon {
    width: 45px;
    height: 45px;
    background: #1e1e1e;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    transition: 0.5s;
}

.depo-step.active .step-icon {
    background: linear-gradient(135deg, #876600 0%, #d4af37 100%);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
    border-color: #000;
    color: #fff;
}

/* Main Card - Glassmorphism v2 */
.depo-main-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.depo-header {
    text-align: center;
    margin-bottom: 30px;
}

.depo-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(to right, #fff, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

/* Input Styles - Realistic Glow */
.d-input-group {
    margin-bottom: 20px;
}

.d-input-group label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #d4af37;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d-control {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.d-control:focus {
    outline: none;
    border-color: #d4af37;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

/* Payment Confirmation Box - Animated */
/* Update di bagian .payment-box Anda */
.payment-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #1c1b1b;
    border-radius: 20px;
    padding: 25px;
    animation: fadeIn 0.5s ease;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.payment-timer {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 77, 77, 0.2);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

#depositCountdown {
    color: #00ff80;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
}

.bank-badge {
    background: #d4af37;
    color: #000;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.p-number {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px !important;
    border-radius: 15px;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

#copyRekBtn {
    background: #fff !important;
    color: #000 !important;
    border: none;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-weight: 400;
}

/* QRIS Styling */
.qris-wrapper {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
}

#qrisImage {
    width: 200px;
    height: auto;
    display: block;
}

.qris-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 10px 0;
}

.btn-download {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
}

.total-box {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 20px;
}

.unique-code {
    font-size: 0.75rem;
    color: #ffcc00;
    font-style: italic;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.p-number span {
    font-family: 'Monospace', 'Courier New';
    font-size: 1.3rem;
    font-weight: bold;
    color: #4facfe;
    letter-spacing: 1px;
}

.p-number button {
    background: #fff;
    color: #000;
    font-weight: 600;
    padding: 0 5px;
    border-radius: 8px;
    transition: 0.3s;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.p-number button:hover {
    background: #d4af37;
    color: #000;
}

.p-amount {
    font-size: 2rem;
    font-weight: 800;
    color: #00ff80;
    text-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

/* Submit Button - Pulsing Animation */
.btn-next-step {
    background: linear-gradient(to right, rgb(212, 175, 55), rgb(184, 134, 11));
    border: none;
    padding: 18px;
    border-radius: 15px;
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.btn-next-step:hover {
    background-position: right center;
    transform: translateY(-5px);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.btn-next-step-withdraw {
    background: linear-gradient(to right, rgb(212, 175, 55), rgb(184, 134, 11));
    border: none;
    padding: 18px;
    border-radius: 15px;
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.5s;
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

.btn-next-step-withdraw:hover {
    background-position: right center;
    transform: translateY(-5px);
    box-shadow: rgb(0, 0, 0) 0px 4px 8px;
}

/* Responsive */
@media (max-width: 500px) {
    .depo-main-card {
        padding: 20px;
    }

    .depo-step span {
        font-size: 0.7rem;
    }

    .p-amount {
        font-size: 1.5rem;
    }
}

/* END CSS TRANSAKSI NON PENDING */

/*START LOTTERY MODAL OVERLAY*/
.lottery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: none; /* Dikontrol JS */
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Lebih tinggi dari elemen standar */
    padding: 20px;
}

.lottery-content-wrapper {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    width: 100%;
    max-width: 500px;
    border-radius: 25px;
    border: 1px solid rgba(191, 149, 63, 0.3);
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
    animation: lotteryZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lottery-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(191, 149, 63, 0.1);
    padding-bottom: 15px;
}

.lottery-modal-header h3 {
    color: #bf953f;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.lottery-close-btn {
    color: #888;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: 0.3s;
}

.lottery-close-btn:hover {
    color: #ff4d4d;
    transform: rotate(90deg);
}

.lottery-game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-height: 450px;
    overflow-y: auto;
    padding: 5px;
}

.lottery-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 12px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.lottery-card:hover {
    background: rgba(191, 149, 63, 0.15);
    border-color: rgba(191, 149, 63, 0.5);
    transform: translateY(-8px);
}

.lottery-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.lottery-title {
    color: #fcf6ba;
    font-size: 0.7rem;
    font-weight: 800;
    display: block;
    text-transform: uppercase;
}

.lottery-live-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #25d366; /* Hijau untuk Live */
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(37, 211, 102, 0.3);
}

.lottery-pulse {
    width: 6px;
    height: 6px;
    background: #25d366;
    border-radius: 50%;
    animation: lotteryPulseEffect 1s infinite alternate;
}

@keyframes lotteryPulseEffect {
    from { opacity: 1; transform: scale(1); box-shadow: 0 0 2px #25d366; }
    to { opacity: 0.3; transform: scale(1.3); box-shadow: 0 0 8px #25d366; }
}

@keyframes lotteryZoom {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.lottery-game-grid::-webkit-scrollbar {
    width: 4px;
}
.lottery-game-grid::-webkit-scrollbar-thumb {
    background: #bf953f;
    border-radius: 10px;
}

/* Modal Container */
.lottery-overlay {
    position: fixed;
    top: -30px;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.85); */
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 10px;
}

.modal-backdrop {
    position: absolute;
    width: 100%; height: 100%;
}

/* 2. Container Utama Modal */
.lottery-content-wrapper {
    position: relative;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    border-radius: 15px;
    border: 1px solid rgba(191, 149, 63, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
    box-shadow: #000 0px 4px 8px;
    animation: lotteryZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* Header */
.lottery-modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(191, 149, 63, 0.3);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: #000 0px 4px 8px;
    border-radius: 50px;
}

.header-title { display: flex; align-items: center; gap: 10px; }
.header-title h3 { 
    color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: 1px; margin: 0;
}

.lottery-close-btn {
    background: #30363d;
    border: none;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}
.lottery-close-btn:hover { background: #f44336; transform: rotate(90deg); }

/* Grid System */
.lottery-game-grid {
    padding: 12px;
    display: grid;
    /* Menggunakan auto-fit agar grid menyesuaikan lebar kontainer tanpa overflow */
    grid-template-columns: repeat(3, 1fr); 
    gap: 8px; /* Gap lebih kecil untuk mobile agar tidak memakan ruang */
    overflow-y: auto;
    overflow-x: hidden; /* Pastikan tidak ada scroll kanan-kiri */
    -webkit-overflow-scrolling: touch; /* Scroll halus di iOS */
}

/* Desktop: 5 kolom */
@media (min-width: 768px) {
    .lottery-content-wrapper {
        width: 100%;
        max-height: 85vh;
    }
    .lottery-game-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
        padding: 20px;
    }
    .provider-logo-container {
        height: 80px;
    }
    .lottery-title {
        font-size: 10px;
    }
}

/* Card Utama */
.lottery-card {
    border-radius: 8px;
    border: 1px solid rgba(191, 149, 63, 0.3);
    position: relative;
    width: 100%;
    min-width: 0;
    box-shadow: #000 0px 4px 8px;
}

.lottery-card:hover img {
    transform: scale(1.1); /* Efek zoom halus saat di-hover */
}

.grid-item-link { text-decoration: none; display: block; }

/* Container Logo Provider */
.provider-logo-container {
    padding: 8px;
    height: 60px; /* Lebih kecil sedikit untuk mobile */
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-logo-container img {
    max-width: 85%; /* Beri ruang agar tidak mepet ke pinggir */
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain; /* Sangat penting agar gambar tidak terpotong/gepeng */
    display: block;
    /* Memberikan sedikit cahaya di belakang logo jika logo berwarna hitam */
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.1)); 
    transition: transform 0.3s ease;
}

/* Card Footer */
.lottery-footer {
    background: rgba(255,255,255,0.03);
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #30363d;
}

.lottery-title {
    font-size: 9px;
    font-weight: 700;
    color: #8b949e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-go { font-size: 8px; color: #30363d; transition: 0.3s; }
.lottery-card:hover .lottery-title { color: #fff; }
.lottery-card:hover .icon-go { color: #eab308; transform: translateX(3px); }

/* Memperbaiki posisi Tag HOT agar tidak menimpa logo secara berlebihan */
.lottery-live-tag {
    font-size: 6px;
    padding: 1px 4px;
}

.lottery-pulse {
    width: 4px; height: 4px; background: #fff;
    border-radius: 50%; animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/*END LOTTERY MODAL OVERLAY*/

/* START CSS TAMBAHAN GAMELOG DAN HISTORY PROFIL.PHP */
.filter-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(191, 149, 63, 0.1);
}
.filter-group label {
    display: block;
    font-size: 10px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.filter-control {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid rgba(191, 149, 63, 0.3);
    color: #ddd;
    padding: 8px;
    border-radius: 5px;
    font-size: 12px;
    outline: none;
}
.btn-filter {
    background: #bf953f;
    color: #000;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.btn-filter:hover { background: #e5c07b; }

/* Search Bar Styling */
.search-wrapper { margin-bottom: 15px; }
.search-control {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(191,149,63,0.2);
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 13px;
}

/* Pagination Styling */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 10px 0;
}
.page-btn {
    background: rgba(191, 149, 63, 0.2);
    border: 1px solid #bf953f;
    color: #bf953f;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.text-win { color: #2ecc71 !important; text-shadow: 0 0 5px rgba(46, 204, 113, 0.2); }
.custom-table td { white-space: nowrap; vertical-align: middle; }
/* START CSS TAMBAHAN GAMELOG DAN HISTORY PROFIL.PHP */

/* START POPUP INFO INDEX.PHP */
/* --- FULL CSS INFO MODAL ULTRA PREMIUM --- */

/* Overlay dengan Blur Mendalam */
.info-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.info-modal-overlay.active {
    opacity: 1; visibility: visible;
}

/* Kotak Konten dengan Border Gradient menyala */
.info-modal-content {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid #bf953f4d;
    position: relative;
    width: 90%; 
    max-width: 450px; 
    max-height: 70vh; /* Batasi tinggi modal agar tidak keluar layar */
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Mengatur header, body, footer secara vertikal */
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 20px #bf952f4d;
}

.info-modal-overlay.active .info-modal-content {
    transform: translateY(0) scale(1);
}

/* Header dengan Teks Chrome Gold */
.info-modal-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    padding: 18px 24px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #bf953f4d;
}

.info-modal-header h3 {
    margin: 0; font-size: 18px; 
    font-weight: 800;
    background: linear-gradient(180deg, #fcf6ba 0%, #bf953f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.info-modal-close {
    background: rgba(255,255,255,0.05);
    border: none; color: #bf953f;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 20px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
    box-shadow: #000 0px 4px 8px;
}

.info-modal-close:hover {
    background: rgba(255,255,255,0.05);
    color: #bf953f;
}

/* Body */
.info-modal-body {
    padding: 20px;
    display: grid; 
    gap: 12px;
    overflow-y: auto; /* Aktifkan scroll vertikal */
    flex-grow: 1; /* Body akan mengambil sisa ruang yang tersedia */
    scrollbar-width: thin;
    scrollbar-color: #bf953f #1a1a1a;
}

.info-modal-body::-webkit-scrollbar {
    width: 5px;
}
.info-modal-body::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.info-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #fcf6ba, #bf953f);
    border-radius: 10px;
}

/* Item dengan Efek Hover Menyala */
.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(191, 149, 63, 0.2);
    transition: 0.3s;
    will-change: transform;
}

.info-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateX(5px);
}

.info-item i {
    font-size: 20px; 
    color: #bf953f;
    margin-top: 3px;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.info-text strong {
    display: block;
    font-size: 14px;
    color: #ffd700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.info-text span {
    font-size: 13px;
    color: #bbb;
    line-height: 1.5;
}

/* --- RESPONSIVE MOBILE (Dibuat Lebih Kecil) --- */
@media (max-width: 480px) {
    .info-modal-content { 
        width: 85%; /* Lebih ramping di mobile */
        border-radius: 20px;
    }
    
    .info-modal-header { padding: 15px 20px; }
    .info-modal-header h3 { font-size: 15px; }

    .info-modal-body { padding: 15px; gap: 10px; }
    
    .info-item { padding: 10px 14px; }
    .info-item i { font-size: 18px; }
    
    .info-text strong { font-size: 12px; }
    .info-text span { font-size: 10px; }
    
    .info-btn-close { padding: 12px; font-size: 13px; }
}
/* END POPUP INFO INDEX.PHP */

/* START POPUP LUCKY INDEX.PHP */
.guest-card {
    background: #111;
    width: 85%;
    max-width: 340px;
    border-radius: 25px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    box-shadow: #000 0px 4px 8px;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.guest-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e63946;
    font-size: 30px;
    border: 2px dashed #e63946;
    box-shadow: #000 0px 4px 8px;
}

.guest-text h2 {
    color: #ccc;
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 800;
}

.guest-text p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.guest-text span {
    color: #b8860b;
    font-weight: bold;
}

.guest-footer {
    margin-top: 25px;
    padding-top: 15px;
}

.guest-footer small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}

/* Efek Animasi Gold Shine */
.gold-shine {
    background: linear-gradient(
        to right, 
        #bf953f 20%, 
        #fcf6ba 40%, 
        #b38728 50%, 
        #fcf6ba 60%, 
        #bf953f 80%
    );
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineGold 3s linear infinite;
}

@keyframes shineGold {
    to {
        background-position: 200% center;
    }
}

/* Tambahan efek pulse pada icon agar lebih hidup */
.guest-footer i {
    color: #b8860b;
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* Penyesuaian Responsif HP */
@media (max-width: 360px) {
    .guest-card { padding: 25px 15px; }
    .guest-text h2 { font-size: 19px; }
}

/* --- CSS DESIGN --- */
.lucky-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center;
    z-index: 1000; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(8px);
}
.lucky-overlay.active { opacity: 1; visibility: visible; }

.lucky-content {
    background: #1a1a1a; width: 90%; max-width: 360px; border-radius: 25px;
    border: 1px solid #333; overflow: hidden; position: relative;
    box-shadow: #000 0px 4px 8px;
}

.lucky-header { padding: 15px; border-bottom: 1px solid #222; text-align: center; }
.lucky-header h3 { margin: 0; font-size: 16px; color: #b8860b; letter-spacing: 2px; }
.lucky-close { position: absolute; top: 12px; right: 15px; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }

.lucky-body { padding: 25px 15px 15px; display: flex; flex-direction: column; align-items: center; }

.wheel-main-container {
    position: relative; width: 270px; height: 270px; 
    border-radius: 50%; border: 6px solid #b8860b; 
    box-shadow: #000 0px 4px 8px;
}
#wheelRotation { width: 100%; height: 100%; transition: transform 6s cubic-bezier(0.1, 0, 0.1, 1); }
#luckyWheel { width: 100%; height: 100%; display: block; }

.wheel-pointer {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
    border-top: 30px solid #b8860b; z-index: 100; drop-shadow: 0 4px 4px rgba(0,0,0,0.5);
}
.wheel-center-decoration {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 45px; height: 45px; background: #b8860b; border-radius: 50%; border: 4px solid #0d0d0d; z-index: 50;
}

.lucky-result-area { width: 100%; margin: 20px 0 10px; }
.notif-box {
    background: #161616; border-radius: 12px; height: 48px;
    display: flex; align-items: center; justify-content: center; border: 1px solid #bf953f4d;
    box-shadow: #000 0px 4px 8px;
}
#notifText { font-size: 15px; font-weight: bold; color: #b8860b; letter-spacing: 1px; }

.lucky-footer { padding: 0 25px 25px; }
.btn-spin-gold {
    width: 100%; padding: 15px; border: none; border-radius: 50px;
    background: linear-gradient(135deg, #b8860b 0%, #b8860b 100%);
    color: #000; font-weight: 900; font-size: 14px; cursor: pointer;
    box-shadow: #000 0px 4px 8px; text-transform: uppercase;
}
.btn-spin-gold:disabled { filter: grayscale(1); opacity: 0.6; cursor: not-allowed; }
/* END POPUP LUCKY INDEX.PHP */

/* START PENGADUAN TOPBAR.PHP */
.complaint-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; visibility: hidden; transition: 0.3s;
    backdrop-filter: blur(8px);
}
.complaint-overlay.active { opacity: 1; visibility: visible; }

/* Modal Content */
.complaint-content {
    background: #1a1a1a; width: 90%; max-width: 450px; border-radius: 15px;
    border: 1px solid #333; overflow: hidden; position: relative;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.complaint-header {
    padding: 20px; border-bottom: 1px solid #333; text-align: center;
    background: linear-gradient(to bottom, #222, #1a1a1a);
}
.complaint-header h3 { margin: 0; font-size: 16px; color: #b8860b; letter-spacing: 1px; }
.complaint-close {
    position: absolute; top: 15px; right: 20px; background: none;
    border: none; color: #888; font-size: 24px; cursor: pointer;
}

/* Form Styling */
.complaint-body { padding: 25px; }
.complaint-group { margin-bottom: 15px; }
.complaint-group label { display: block; color: #b8860b; font-size: 12px; margin-bottom: 8px; font-weight: bold; }

.complaint-group input, .complaint-group select, .complaint-group textarea {
    width: 100%; padding: 12px; background: #0f0f0f; border: 1px solid #333;
    border-radius: 8px; color: #fff; font-size: 14px; outline: none; transition: 0.3s;
}

.complaint-group input:focus, .complaint-group textarea:focus { border-color: #b8860b; }

/* Submit Button */
.complaint-footer { padding: 0 25px 25px; }
.btn-submit-complaint {
    width: 100%; padding: 12px; border: none; border-radius: 8px;
    background: linear-gradient(45deg, #b8860b, #b8860b);
    color: #000; font-weight: bold; font-size: 14px; cursor: pointer;
    transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit-complaint:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3); }

/* Responsive */
@media (max-width: 480px) {
    .complaint-content { width: 95%; }
}
/* END PENGADUAN TOPBAR.PHP */