/* Optimasi CSS dengan pendekatan mobile-first dan performa */
:root {
    --primary-color: #4267FF;
    --secondary-color: #7E34F3;
    --accent-color: #25D366;
    --dark-color: #1E293B;
    --light-color: #F8FAFC;
    --transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar {
    transform: translateZ(0);
    will-change: transform;
    transition: var(--transition);
    backface-visibility: hidden;
    contain: layout style paint;
}

/* Ekstensi file .cs seharusnya .css */
/* Perbaikan syntax error */
.navbar.scrolled {
    background-color: var(--dark-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);  // Pindahkan ke dalam kurung kurawal
}

/* Optimasi komponen umum */
.btn-primary {
    background: linear-gradient(90deg, var(--primary-color), #6B8AFF);
    color: white;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: var(--transition);
    transform: translateZ(0);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(66, 103, 255, 0.2);
}

/* Optimasi animasi */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Optimasi responsive design */
@media (max-width: 768px) {
    .mobile-menu {
        transition: max-height 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
    }

    .mobile-menu.show {
        max-height: 100vh;
    }
}

/* Optimasi loading */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Optimasi performa */
* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Perbaikan untuk tampilan mobile */
/* Tambahkan di akhir file */
@media (max-width: 768px) {
    #mobileMenu {
        transition: transform 0.3s ease-in-out;
    }
    
    #mobileMenu.show {
        transform: translateX(0);
    }
    
    .mobile-menu-item {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Optimasi komponen umum */
.btn-primary {
    background: linear-gradient(90deg, var(--primary-color), #6B8AFF);
    color: white;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: var(--transition);
    transform: translateZ(0);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(66, 103, 255, 0.2);
}

/* Optimasi animasi */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Optimasi responsive design */
@media (max-width: 768px) {
    .mobile-menu {
        transition: max-height 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
    }

    .mobile-menu.show {
        max-height: 100vh;
    }
}

/* Optimasi loading */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Optimasi performa */
* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}