@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    overflow-x: hidden;
    background-color: #1e1b4b;
    background-image: url('dishub morut.jpeg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: #f8fafc;
    transition: background-image 0.5s ease-in-out;
}

/* KETEBALAN KACA FILM LATAR BELAKANG: 80% (0.80) */
.body-overlay { position: fixed; inset: 0; background-color: rgba(30, 27, 75, 0.80); z-index: -1; }

.bg-dishub-dark { background-color: rgba(30, 27, 75, 0.7); backdrop-filter: blur(10px); } 
.bg-dishub-cyan { background-color: #22d3ee; }
.text-dishub-cyan { color: #0ea5e9; }
.text-dishub-yellow { color: #eab308; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.section-glass { background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.card-glass { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); color: white; }
.card-glass img { border-radius: 0.75rem 0.75rem 0 0; }
@media (min-width: 640px) { .card-glass img { border-radius: 0.75rem 0 0 0.75rem; } }
.progress-bar-fill { transition: width 1.5s ease-in-out; }

/* ANIMASI KHUSUS BANNER PIALA DUNIA PREMIUM */
@keyframes FloatBall {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-12px) rotate(15deg) scale(1.05); }
}
.animate-football { animation: FloatBall 3.5s ease-in-out infinite; }

@keyframes PulseGlow {
    0%, 100% { opacity: 0.3; transform: scale(1) translateX(-50%); }
    50% { opacity: 0.6; transform: scale(1.2) translateX(-40%); }
}
.animate-glow { animation: PulseGlow 4s ease-in-out infinite; }

/* Animasi kilauan tombol piala dunia */
@keyframes shimmer {
    100% { transform: translateX(100%) skew(-12deg); }
}