/* --- DASAR --- */
:root {
    --bg-body: #0c0a08;
    --bg-panel: #1a1612;
    --border-gold: #5c4d32;
    --text-gold: #f0c45c;
    --btn-promo-start: #ffca28;
    --btn-promo-end: #ff6f00;
    --btn-event-start: #42a5f5;
    --btn-event-end: #1565c0;
}
body { background-color: var(--bg-body); color: #fff; font-family: sans-serif; }
.navbar { background-color: var(--bg-panel); border-bottom: 1px solid var(--border-gold); }
.text-warning { color: var(--text-gold) !important; }

/* Buttons & Scroll */
.btn-login { background: linear-gradient(90deg, var(--btn-event-start), var(--btn-event-end)); color: white; border: none; }
.btn-daftar { background: linear-gradient(90deg, var(--btn-promo-start), var(--btn-promo-end)); color: #000; border: none; }
.provider-scroll::-webkit-scrollbar { height: 4px; }
.provider-scroll::-webkit-scrollbar-thumb { background: var(--text-gold); border-radius: 10px; }
.btn-provider { background: var(--bg-panel); color: #aaa; border: 1px solid var(--border-gold); white-space: nowrap; font-size: 0.85rem; border-radius: 20px; }
.btn-provider.active { background: var(--text-gold); color: #000; border-color: var(--text-gold); font-weight: bold; }

/* Marquee */
.marquee-box { background-color: var(--bg-panel); border: 1px solid var(--border-gold); border-radius: 6px; padding: 6px; }
.marquee-badge { background: linear-gradient(180deg, #ffca28 0%, #ff6f00 100%); color: #000; font-weight: bold; font-size: 0.75rem; padding: 4px 10px; border-radius: 4px; margin-right: 10px; white-space: nowrap; }

/* --- GAME CARD & HOVER EFFECT (PENTING) --- */
.game-card { background: transparent; border: none; cursor: pointer; }
.game-card .position-relative { overflow: hidden; } /* Menahan efek agar rapi */
.game-card img { border: 1px solid var(--border-gold); border-bottom: none; }
.bg-card-dark { background-color: var(--bg-panel); border: 1px solid var(--border-gold); border-top: none; }
.game-title { font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-gold); }
.progress { background: #000; border-radius: 5px; border: 1px solid #333; }
.overlay-hot { position: absolute; top: 0; right: 0; background: red; color: white; font-size: 0.6rem; padding: 2px 5px; font-weight: bold; border-bottom-left-radius: 5px; z-index: 2; }

/* Layer Gelap Hover */
.overlay-pola {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: all 0.3s ease; z-index: 3;
}
/* Tombol Lihat Pola */
.btn-pola {
    background-color: #00c853; color: white; font-weight: bold;
    padding: 5px 15px; border-radius: 4px; font-size: 0.8rem;
    transform: translateY(20px); transition: all 0.3s ease;
}
/* Aksi Hover */
.game-card:hover .overlay-pola { opacity: 1; }
.game-card:hover .btn-pola { transform: translateY(0); }

/* --- POPUP MODAL STYLING --- */
.modal-pola-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 9999;
    display: none; justify-content: center; align-items: center;
}
.pola-box {
    background: #000; border: 1px solid #fff; width: 90%; max-width: 350px;
    border-radius: 10px; overflow: hidden; position: relative;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); animation: popUp 0.3s ease-out;
}

/* --- FOOTER COPYRIGHT (VERSI KECIL & ELEGAN) --- */
.footer-copyright {
    background-color: #000;
    text-align: center;
    padding: 15px 0;      /* Jarak atas bawah diperkecil biar ramping */
    margin-top: 40px;
    border-top: 1px solid #333;
}

.text-gold-gradient {
    /* Warna Gradasi */
    background: linear-gradient(to right, #ffe53b 0%, #ff7400 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* Pengaturan Ukuran Huruf */
    font-weight: 700;       /* Tebal tapi pas (Bold) */
    font-size: 0.75rem;     /* Ukuran kecil standar footer (sekitar 12px) */
    letter-spacing: 0.5px;  /* Jarak antar huruf dirapatkan sedikit */
    display: inline-block;
}

@keyframes popUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pola-header { background: linear-gradient(180deg, #0d47a1 0%, #000 100%); padding: 15px; text-align: center; border-bottom: 1px solid #555; }
.pola-body { padding: 20px; text-align: center; color: white; font-size: 0.9rem; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.step-item { margin-bottom: 8px; font-weight: 500; }
.step-item span { color: #ffd700; font-weight: bold; }
.pola-footer { padding: 10px; display: flex; gap: 10px; background: #111; border-top: 1px solid #333; }
.btn-close-modal {
    position: absolute; top: 10px; left: 10px;
    background: red; color: white; width: 25px; height: 25px;
    border-radius: 50%; font-size: 0.8rem; cursor: pointer;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}