/* =========================================
   TEMA: NAVY BLUE SEA & WHITE CLEAN
   ========================================= */

:root {
    --navy-dark: #0a192f;    /* Dongker Gelap (Header) */
    --navy-light: #112240;   /* Dongker Terang (Aksen) */
    --white-bg: #f4f6f8;     /* Background Putih Kebiruan (Biar mata adem) */
    --pure-white: #ffffff;   /* Putih Bersih (Card) */
    --blue-btn: #007bff;     /* Warna Tombol Utama */
    --blue-shadow: #0056b3;  /* Bayangan Tombol (Efek Timbul) */
    --gold: #ffc107;         /* Aksen Emas Dikit Aja */
    --text-dark: #333;       /* Warna Tulisan */
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }

body { 
    background-color: var(--white-bg); 
    color: var(--text-dark); 
    padding-bottom: 80px; 
}

/* === TOMBOL 3D (TIMBUL) === */
.btn-3d {
    border: none;
    background: var(--blue-btn);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.1s;
    /* RAHASIA EFEK TIMBUL */
    box-shadow: 0 5px 0 var(--blue-shadow), 0 10px 10px rgba(0,0,0,0.1); 
    transform: translateY(0);
}

.btn-3d:active {
    /* Pas dipencet dia turun */
    transform: translateY(5px); 
    box-shadow: 0 0 0 var(--blue-shadow), 0 0 0 rgba(0,0,0,0); 
}

/* BUTTON CHECKOUT KHUSUS (GOLD/ORANGE) */
.btn-checkout {
    width: 100%;
    padding: 15px;
    background: #ff9800; /* Orange Segar */
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    font-size: 16px;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 0 5px 0 #e65100, 0 10px 10px rgba(0,0,0,0.1); 
    transition: all 0.1s;
}
.btn-checkout:active { transform: translateY(5px); box-shadow: none; }


/* === LANDING PAGE (NAVY) === */
#landing-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: linear-gradient(135deg, var(--navy-dark) 0%, #004e92 100%);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.landing-content { z-index: 2; padding: 20px; color: white; }
.landing-title { font-size: 38px; font-weight: 800; margin-bottom: 10px; }
.btn-enter {
    background: white; color: var(--navy-dark);
    padding: 15px 40px; font-size: 16px; font-weight: bold;
    border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 5px 0 #ccc, 0 10px 20px rgba(0,0,0,0.2);
    margin-top: 20px;
    transition: 0.1s;
}
.btn-enter:active { transform: translateY(5px); box-shadow: none; }


/* === NAVBAR === */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; 
    background: var(--navy-dark); /* Dongker */
    color: white;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.logo { font-size: 20px; font-weight: 800; letter-spacing: 1px; }

/* === CONTAINER UTAMA === */
.container { padding: 20px; max-width: 600px; margin: 0 auto; }

/* BANNER PROMO */
.hero-banner {
    background: linear-gradient(to right, #2193b0, #6dd5ed); /* Biru Laut Segar */
    padding: 20px; border-radius: 15px;
    margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center;
    color: white;
    box-shadow: 0 5px 15px rgba(33, 147, 176, 0.3);
}

.section-title { 
    font-size: 18px; margin-bottom: 15px; color: var(--navy-dark); font-weight: 700;
    border-left: 5px solid var(--navy-dark); padding-left: 10px;
}

/* === CARD GAME (PUTIH BERSIH) === */
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card-game {
    position: relative;
    height: 130px; /* Tinggi kotak */
    border-radius: 15px; 
    overflow: hidden; /* Biar foto gak keluar batas */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid white;
    transition: transform 0.2s;
}
.card-game:hover { transform: translateY(-5px); border-color: var(--gold); }
.bg-member {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Biar muka gak gepeng */
    display: block;
}
.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 5px 8px 5px; /* Padding atas besar buat efek gradasi */
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    text-align: center;
}
.game-name { 
    font-size: 11px; 
    font-weight: bold; 
    color: white; /* Tulisan jadi Putih */
    text-shadow: 0 1px 3px black; /* Biar kebaca kalau backgroundnya terang */
    display: block;
    line-height: 1.2;
}
.game-icon { display: none; }
.game-name { font-size: 12px; font-weight: 600; color: #555; }

/* === MODAL (POPUP) === */
.modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,10,30,0.8); backdrop-filter: blur(5px); }
.modal-content { 
    background: #fff; /* Modal Putih */
    margin: 10% auto; width: 90%; max-width: 500px; height: 80vh; 
    border-radius: 20px; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header { padding: 15px; background: var(--navy-light); color: white; display: flex; justify-content: space-between; align-items: center;}
.modal-body { padding: 20px; overflow-y: auto; flex: 1; background: #f9f9f9; }
.close-btn { font-size: 28px; color: #fff; cursor: pointer; }

/* ITEM PRODUK */
.produk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item-produk { 
    background: white; padding: 15px; border-radius: 12px; 
    border: 2px solid #eee; cursor: pointer; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.item-produk.selected { 
    border-color: var(--blue-btn); 
    background: #e3f2fd; /* Biru muda banget pas dipilih */
    box-shadow: 0 0 10px rgba(0,123,255,0.2);
}
.item-name { font-size: 13px; color: #333; font-weight: 600; }
.item-price { color: var(--navy-dark); font-weight: 800; display: block; margin-top: 5px; font-size: 14px;}

/* FORM INPUT */
.input-modern { 
    width: 100%; padding: 15px; 
    background: #fff; border: 2px solid #ddd; 
    color: #333; margin-bottom: 10px; border-radius: 12px; font-size: 14px;
}
.input-modern:focus { border-color: var(--blue-btn); outline: none; }

/* === CARD BANK (PEMBAYARAN) === */
.card-bank {
    background: white; padding: 15px; border-radius: 15px;
    border: 1px solid #eee; margin-bottom: 15px; text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* === NAVIGASI BAWAH (PUTIH) === */
.bottom-nav { 
    position: fixed; bottom: 0; width: 100%; 
    background: white; /* Nav Putih */
    display: flex; justify-content: space-around; padding: 10px 0; 
    border-top: 1px solid #eee; z-index: 90; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.nav-item { text-align: center; color: #aaa; font-size: 10px; cursor: pointer; }
.nav-item.active { color: var(--navy-dark); font-weight: bold; }
.nav-item i { font-size: 24px; display: block; margin-bottom: 2px; }

/* HISTORY CARD */
.history-card { 
    background: white; padding: 15px; margin-bottom: 10px; 
    border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 5px solid #ccc;
}
.status-success { border-left-color: #28a745; }
.status-pending { border-left-color: #ffc107; }
.status-failed { border-left-color: #dc3545; }

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

/* =========================================
   FITUR TAMBAHAN: RUNNING TEXT
   ========================================= */
.running-text-container {
    background: var(--navy-light); /* Pakai variabel warna yang udah ada */
    color: var(--gold);            
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 90;
    font-family: 'Poppins', sans-serif; /* Biar fontnya sama kayak yang lain */
}

.running-text-content {
    display: inline-block;
    padding-left: 100%;            
    animation: jalanTerus 20s linear infinite; /* 20 detik biar bacanya enak */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Animasi jalan dari kanan ke kiri */
@keyframes jalanTerus {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* GAYA UNTUK BA LANDING PAGE */
.ba-wrapper {
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.img-ba-landing {
    width: 150px; /* Ukuran foto */
    height: 150px;
    object-fit: cover;
    border-radius: 50%; /* Jadi bulat */
    border: 4px solid var(--gold); /* Bingkai emas */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6); /* Efek bersinar */
    animation: floating 3s ease-in-out infinite;
}

.badge-ba {
    background: var(--navy-dark);
    color: var(--gold);
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    border: 1px solid var(--gold);
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* GAYA UNTUK BA DI DALAM TOKO */
.ba-store-banner {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.ba-text h3 {
    color: white;
    font-weight: 900;
    font-size: 24px;
    margin: 0;
    line-height: 1;
    font-style: italic;
}

.ba-text p {
    color: #eee;
    font-size: 10px;
    margin-top: 5px;
}

.ba-img-store {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: -5px 0 10px rgba(0,0,0,0.2);
}

/* === TOMBOL MUSIK === */
.music-control {
    position: fixed;
    bottom: 90px; /* Sejajar sama tombol Telegram */
    left: 20px;   /* Di Kiri */
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #ff00cc, #333399); /* Warna Disko */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(255, 0, 204, 0.5);
    z-index: 9999;
    cursor: pointer;
    border: 2px solid white;
    transition: transform 0.3s;
}

/* Animasi Muter (Pas Lagu Nyala) */
.music-control.playing {
    animation: muterTerus 3s linear infinite;
    box-shadow: 0 0 20px rgba(255, 0, 204, 0.8);
}

.music-control:active { transform: scale(0.9); }

@keyframes muterTerus {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === GAYA BARU (HEADER & MUSIK) === */

/* 1. Tombol Telegram di Header */
.tele-header {
    background: #0088cc;
    color: white;
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.2s;
}

.tele-header:active {
    transform: scale(0.95);
}

/* 2. Baris Judul & Musik */
.baris-judul-musik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-left: 5px solid var(--navy-dark);
    padding-left: 10px;
}

/* 3. Tombol Musik Inline */
.music-inline {
    background: linear-gradient(45deg, #ff00cc, #333399);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.music-inline:active {
    transform: scale(0.95);
}

/* Hapus yang lama biar gak nongol */
.floating-telegram, .music-control {
    display: none !important;
}

/* =========================================
   GAYA UNTUK HASIL GACHA
   ========================================= */
.voucher-card {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    color: #000;
    border: 5px solid #fff;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    animation: goyangVoucher 0.5s ease-in-out infinite alternate;
    width: 90%;
    max-width: 350px;
}
.voucher-card h2 { 
    font-weight: 900; 
    font-size: 28px; 
    margin: 15px 0; 
    text-shadow: 2px 2px 0px #fff; 
}
.voucher-card p { font-size: 13px; font-weight: bold; }

.zonk-card {
    background: #222; 
    color: white; 
    border: 5px solid #555; 
    animation: none; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.zonk-card h2 { text-shadow: none; color: #ff4d4d; }

@keyframes goyangVoucher {
    0% { transform: scale(1) rotate(-1deg); }
    100% { transform: scale(1.05) rotate(1deg); }
}