/* Smooth GPU Rendering */
.parallax-layer,
.glow-bg,
#kategori .animate-float img,
#beranda img {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Smooth transition */
#beranda img,
.glow-bg,
#kategori .animate-float {
    transition: transform 0.1s linear;
}

/* Penguncian Layout agar tidak meluber penyebab offset */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    background-color: #FFFFFF;
    color: #111827;
    margin: 0;
    padding: 0;
}

/* Custom Scrollbar Clean Theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #F8F9FA;
}
::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* Glassmorphism Light */
.glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-card {
    background: #FFFFFF;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}
.glass-card:hover {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
    border-color: #E5E7EB;
}

/* Ambient Glows Light Mode */
.glow-bg {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

/* Mengubah logo teks putih menjadi gelap/hitam agar terlihat di background terang */
.logo-invert {
    filter: invert(1) brightness(0);
}

/* Hide scrollbar for inline menu on mobile */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Scroll Animation Core Classes */
.scroll-anim {
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}