/* ==========================================================================
   11. STYLING COMPONENTS MEGA FOOTER (Luxury Grid System)
   ========================================================================== */
.mega-footer-wrapper {
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.9) 0%, rgba(5, 5, 5, 0.98) 100%);
    border-top: 1px solid rgba(189, 154, 95, 0.2);
    padding: 40px 20px 20px 20px;
    margin-top: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mega-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default di HP bertumpuk ke bawah */
    gap: 30px;
}

/* Mengatur sebaran kolom menjadi 3 sejajar mendatar khusus layar monitor PC */
@media (min-width: 768px) {
    .mega-footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-sub-title {
    font-size: 13px;
    font-weight: 900;
    color: #dfba6b; /* Warna Emas Mewah */
    letter-spacing: 1.5px;
    margin: 0;
    text-shadow: 0 0 8px rgba(223, 186, 107, 0.2);
    border-bottom: 1px solid rgba(223, 186, 107, 0.15);
    padding-bottom: 8px;
}

.footer-desc-text-small {
    font-size: 12px;
    color: #999999;
    line-height: 1.6;
    margin: 0;
}

/* Grid Khusus Untuk Kumpulan Tautan Link Navigasi */
.footer-link-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Terbagi 2 kolom sejajar kiri-kanan */
    gap: 10px;
}

.footer-link-grid a {
    font-size: 12px;
    color: #cccccc;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-link-grid a:hover {
    color: #dfba6b;
    padding-left: 4px; /* Efek bergeser tipis saat disentuh */
}

/* Baris Wadah Ikon Logo Bank & E-Wallet Resmi */
.payment-logo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    width: fit-content;
}
.pay-icon-img {
    height: 18px; 
    width: auto;
    object-fit: contain;
    filter: grayscale(40%) brightness(0.8); /* Terlihat redup menyatu dengan background di awal */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efek Buruan Cahaya Emas Saat Logo Disentuh Member */
.pay-icon-img:hover, .pay-icon-img:active {
    filter: grayscale(0%) brightness(1.2) drop-shadow(0 0 5px rgba(223, 186, 107, 0.8));
    transform: scale(1.08); /* Logo otomatis membesar sedikit secara halus */
}

/* Baris Hak Cipta Paling Bawah */
.footer-bottom-copyright {
    max-width: 1200px;
    margin: 30px auto 0 auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-bottom-copyright p {
    font-size: 11px;
    color: #666666;
    margin: 0;
    letter-spacing: 0.5px;
}

.footer-bottom-copyright strong {
    color: #aaa;
}

/* Penyesuaian Ruang Tekan Tombol Navigasi khusus Layar Kecil Handphone */
@media (max-width: 480px) {
    .mega-footer-wrapper {
        padding: 30px 15px 30px 15px; /* Memberikan ruang tambahan agar tidak terpotong tombol menu floating */
    }
}
/* ==========================================================================
   12. GLASSMORPHISM MODAL POP-UP SYSTEM (Luxury Design)
   ========================================================================== */
.modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-backdrop.modal-active { opacity: 1; pointer-events: auto; }

.modal-content {
    background: linear-gradient(135deg, #161616 0%, #0d0d0d 100%);
    border: 1px solid #dfba6b; border-radius: 16px; width: 90%; max-width: 360px;
    padding: 25px; position: relative; box-shadow: 0 15px 35px rgba(223, 186, 107, 0.2);
    transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-active .modal-content { transform: scale(1); }

.modal-close-btn {
    position: absolute; top: 12px; right: 16px; color: #aaa; font-size: 24px; cursor: pointer;
}
.modal-close-btn:hover { color: #dfba6b; }

.modal-game-title {
    font-size: 16px; font-weight: 900; color: #ffffff; text-align: center; margin: 0 0 15px 0; letter-spacing: 0.5px;
}
.modal-sub-label { font-size: 11px; font-weight: 800; color: #dfba6b; text-align: center; margin: 0 0 10px 0; }

.modal-pattern-box {
    background: #060606; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px;
    padding: 15px; color: #00ff87; font-size: 12px; font-weight: 700; line-height: 1.8;
    font-family: monospace; margin-bottom: 15px; text-shadow: 0 0 4px rgba(0, 255, 135, 0.3);
}

.btn-copy-pattern {
    background: linear-gradient(135deg, #dfba6b 0%, #a38243 100%); color: #000;
    border: none; width: 100%; padding: 12px 0; border-radius: 8px; font-weight: 900;
    font-size: 12px; cursor: pointer; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.copy-success-alert {
    font-size: 11px; color: #00ff87; text-align: center; margin: 10px 0 0 0;
    opacity: 0; transition: opacity 0.3s;
}
.copy-success-alert.alert-show { opacity: 1; }
/* ==========================================================================
   13. PREMIUM PATTERN LIST BADGES (Modern UI Layout)
   ========================================================================== */
/* Hilangkan background bawaan box lama agar digantikan oleh baris badge */
.modal-pattern-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Jarak antar baris pola */
}

/* Desain Dasar Baris Pola */
.pattern-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 14px;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.pattern-icon {
    margin-right: 8px;
    font-size: 14px;
}

/* Desain Kotak Status ON / OFF di Sebelah Kanan */
.badge-status {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* Variasi Warna Kondisi Status (Menyala Neon) */
.status-on { border-color: rgba(0, 255, 135, 0.15); background: rgba(0, 255, 135, 0.02); }
.status-on .badge-status { background: rgba(0, 255, 135, 0.15); color: #00ff87; text-shadow: 0 0 4px rgba(0, 255, 135, 0.5); }
.status-on .pattern-icon { filter: drop-shadow(0 0 4px #00ff87); }

.status-off { border-color: rgba(255, 65, 108, 0.15); background: rgba(255, 65, 108, 0.02); }
.status-off .badge-status { background: rgba(255, 65, 108, 0.15); color: #ff416c; text-shadow: 0 0 4px rgba(255, 65, 108, 0.5); }
.status-off .pattern-icon { filter: drop-shadow(0 0 4px #ff416c); }

.status-dc { border-color: rgba(255, 221, 0, 0.15); background: rgba(255, 221, 0, 0.02); }
.status-dc .badge-status { background: rgba(255, 221, 0, 0.15); color: #ffdd00; text-shadow: 0 0 4px rgba(255, 221, 0, 0.5); }
.status-dc .pattern-icon { filter: drop-shadow(0 0 4px #ffdd00); }
#gameSearch {
    max-width: 450px !important;
    padding: 14px 24px !important; /* Dibuat sedikit lebih tebal vertikal */
    font-size: 13px !important;
    background: rgba(15, 15, 15, 0.8) !important;
    border: 1px solid rgba(223, 186, 107, 0.25) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 4px 15px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
}
#gameSearch:focus {
    border-color: #dfba6b !important;
    box-shadow: 0 0 12px rgba(223, 186, 107, 0.3), inset 0 2px 4px rgba(0,0,0,0.5) !important;
}