/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

body { 
    font-family: 'Roboto', sans-serif; 
    background-color: #031123; 
}

/* Background Utama WDBOS - Menggunakan warna biru laut dalam */
.bg-wdbos-main {
    background-color: #061930;
    background-image: radial-gradient(circle at top, #0f365f 0%, #031123 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Tombol Cyan (DAFTAR) */
.btn-cyan { 
    background: linear-gradient(180deg, #1fa2ff 0%, #005c97 100%); 
    border: 1px solid #4df2ff; 
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 0 10px rgba(31, 162, 255, 0.5); 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6); 
}

/* HEADER BACKGROUND */
.header-bg { 
    background: #081d36;
    border-bottom: 1px solid #1a3c6d; 
}

/* SIDEBAR KIRI (Persis seperti Screenshot) */
.menu-left-item { 
    background: linear-gradient(180deg, #09203f 0%, #041020 100%); 
    border: 2px solid #1fa2ff; /* Border Biru Neon */
    border-radius: 14px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    padding: 10px 4px; margin-bottom: 8px; cursor: pointer; 
    box-shadow: inset 0 0 15px rgba(31, 162, 255, 0.4), 0 4px 6px rgba(0,0,0,0.5); 
    position: relative; overflow: hidden; transition: all 0.2s ease; 
}
.menu-left-item.active { 
    border-color: #4df2ff; 
    box-shadow: inset 0 0 25px rgba(77, 242, 255, 0.8), 0 0 12px rgba(31, 162, 255, 0.8); 
    transform: scale(1.05); 
}

/* KOTAK EMAS DI BAWAH CARD PROVIDER (Persis warna WDBOS) */
.card-gold { 
    background: linear-gradient(180deg, #ffef96 0%, #f9b800 40%, #c48a00 100%); 
    border-top: 1px solid #fff9c4;
}

/* NAVIGASI BAWAH */
.nav-bottom-bg { 
    background: linear-gradient(180deg, #1ea0ff 0%, #005288 100%); 
    border-top: 2px solid #4df2ff;
}
.fab-promosi { 
    background: linear-gradient(180deg, #1fa2ff 0%, #005c97 100%); 
    border: 4px solid #031123; 
    box-shadow: 0 -4px 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(255,255,255,0.4); 
}

/* SPINNER & LOADER */
.loader-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* CSS untuk titik-titik animasi splash screen */
.splash-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
}

.splash-dots span {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    animation: splash-pulse 1.4s infinite ease-in-out both;
}

.splash-dots span:nth-child(1) { animation-delay: -0.32s; }
.splash-dots span:nth-child(2) { animation-delay: -0.16s; }
.splash-dots span:nth-child(3) { animation-delay: 0; }

@keyframes splash-pulse {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* Warna titik navigasi swiper */
.swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    background: #1fa2ff;
    opacity: 1;
}