html, body {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
}

.font-cinzel { font-family: 'Cinzel Decorative', cursive; }
.font-serif-cormorant { font-family: 'Cormorant Garamond', serif; }
.font-sans-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Glassmorphism Styles */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 192, 203, 0.4);
}
.dark .glass-card {
    background: rgba(26, 16, 22, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(244, 114, 182, 0.2);
}

.glass-nav {
    background: rgba(255, 245, 247, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 182, 193, 0.3);
}
.dark .glass-nav {
    background: rgba(20, 10, 16, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(244, 114, 182, 0.2);
}

.glass-bottom-bar {
    background: rgba(255, 245, 247, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 182, 193, 0.4);
}
.dark .glass-bottom-bar {
    background: rgba(22, 10, 18, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(244, 114, 182, 0.25);
}

/* Canvas & Interaktif Cursor */
#particleCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

#cursorFollower {
    pointer-events: none;
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
    font-size: 1.2rem;
    color: #f472b6;
    filter: drop-shadow(0 2px 5px rgba(244, 114, 182, 0.5));
}

.click-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    font-size: 1rem;
    color: #f472b6;
    animation: burstAndFade 0.8s ease-out forwards;
}

@keyframes burstAndFade {
    0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(180deg); }
}

/* Quotes Slider */
.quote-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0.25rem 0;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.quote-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.quote-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 0 0.25rem;
    box-sizing: border-box;
}

.quote-slide-inner {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(244, 114, 182, 0.3);
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 15px -2px rgba(244, 114, 182, 0.15);
    text-align: center;
}

.dark .quote-slide-inner {
    background: rgba(36, 14, 27, 0.7);
    border-color: rgba(244, 114, 182, 0.25);
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.4);
}

/* Animasi */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
.animate-float { animation: floatSlow 6s ease-in-out infinite; }

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(244, 114, 182, 0.4); }
    50% { box-shadow: 0 0 22px rgba(244, 114, 182, 0.75); }
}
.glow-btn { animation: pulseGlow 3s infinite; }

@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin-vinyl { animation: spinVinyl 6s linear infinite; }
.paused-spin { animation-play-state: paused; }

#dodgingBtn { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1016; }
::-webkit-scrollbar-thumb { background: #f472b6; border-radius: 4px; }

/* FIX CUSTOM MAP PIN UNTUK LEAFLET */
.custom-map-pin {
    background: transparent !important;
    border: none !important;
}