/* Custom CSS Reset & Layout Base */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    padding-top: 32px; /* Jarak untuk Marquee Banner Atas */
}

/* Pola Titik Latar Belakang Estetik (Dot Pattern Background) */
.bg-pattern {
    background-color: #fdfbf7;
    background-image: radial-gradient(#fecdd3 0.6px, transparent 0.6px), radial-gradient(#fecdd3 0.6px, #fdfbf7 0.6px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}
html.dark .bg-pattern {
    background-color: #0f172a;
    background-image: radial-gradient(#334155 0.6px, transparent 0.6px), radial-gradient(#334155 0.6px, #0f172a 0.6px);
}

/* Kaca Transparan Mewah (Glassmorphism Effect) */
.glassmorphism {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(244, 63, 94, 0.08);
}
html.dark .glassmorphism {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.04);
}

/* Garis Bawah Navigasi Indikator */
.nav-link {
    position: relative;
    color: #64748b;
    transition: all 0.3s ease;
}
html.dark .nav-link { color: #94a3b8; }
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: #f43f5e;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 4px;
}
.nav-link.active-nav::after, .nav-link:hover::after {
    width: 100%;
}
.nav-link.active-nav {
    color: #f43f5e !important;
}
html.dark .nav-link.active-nav { color: #f43f5e !important; }

/* ANIMASI REVEAL ON SCROLL SYSTEMS */
.reveal {
    opacity: 0;
    transition: all 0.85s cubic-bezier(0.25, 1, 0.3, 1);
    will-change: transform, opacity;
}
.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.9); }

.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Efek Jelly Hover Animasi */
@keyframes jelly {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(0.95, 1.05); }
    50% { transform: scale(1.05, 0.95); }
    80% { transform: scale(0.98, 1.02); }
}
.hover-jelly:hover {
    animation: jelly 0.5s ease-in-out;
}

/* Animasi Denyut Tombol / Icon Pop */
@keyframes pop-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); background-color: #e11d48; color: #fff; }
    100% { transform: scale(1); }
}
.animate-pop {
    animation: pop-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* SISTEM BANNER JALAN (INFINITE MARQUEE CSS) */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.marquee-content {
    display: flex;
    animation: marquee 25s linear infinite;
    width: max-content;
}
.marquee-content:hover {
    animation-play-state: paused; /* Berhenti sebentar saat disentuh mouse mouse pointer */
}

/* ANIMASI ICON HUJAN JATUH (FALLING ICONS) */
.sprinkle {
    position: absolute;
    pointer-events: none;
    animation: fall linear infinite;
    user-select: none;
    z-index: 0;
}
@keyframes fall {
    0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
    15% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}

/* BAR PEMUTAR AUDIO VISUALIZER GAUGE */
.v-bar {
    width: 2px;
    height: 3px;
    background-color: #f43f5e;
    border-radius: 1px;
}
@keyframes wave {
    0%, 100% { height: 3px; }
    50% { height: 12px; }
}
.visualizing { animation: wave 0.5s ease-in-out infinite; }
.visualizing:nth-child(2) { animation-delay: 0.1s; }
.visualizing:nth-child(3) { animation-delay: 0.2s; }
.visualizing:nth-child(4) { animation-delay: 0.3s; }

/* ANIMASI TIMELINE PROGRESS BAR LOADING SCREEN */
@keyframes loadProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}
.loading-bar {
    animation: loadProgress 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Custom CSS Global Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fdfbf7; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #fda4af; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #fb7185; }

/* Filter Tab Highlight Button Active */
.tab-btn.active {
    background-color: #f43f5e !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}
.btn-glow:hover { box-shadow: 0 0 20px rgba(244, 63, 94, 0.5); }