@layer components {
    /* Navigasi */
    .nav-link {
        @apply text-slate-600 dark:text-slate-400 font-medium font-['Manrope'] 
               hover:text-[#008080] transition-colors duration-300 outline-none 
               rounded-sm py-2 focus-visible:ring-2 focus-visible:ring-primary;
    }

    .nav-link-dropdown {
        @apply px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 
               hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-[#006565] 
               dark:hover:text-[#008080] transition-colors;
    }

    /* Buttons */
    .btn-primary {
        @apply bg-primary text-on-primary px-6 py-2 rounded-xl font-semibold 
               hover:opacity-90 transition-all active:scale-[0.98] 
               focus-visible:ring-4 focus-visible:ring-primary-container outline-none;
    }

    .btn-outline {
        @apply bg-white/10 backdrop-blur-md text-white border border-white/20 
               px-8 py-4 rounded-xl font-bold text-lg hover:bg-white 
               hover:text-primary transition-all duration-300;
    }

    /* Cards */
    .card-base {
        @apply bg-surface-container-lowest p-6 rounded-xl editorial-shadow 
               group hover:bg-surface-container-low transition-all duration-300;
    }

    .card-icon-wrapper {
        @apply w-12 h-12 bg-secondary-container rounded-full flex items-center 
               justify-center mb-6 text-on-secondary-container 
               group-hover:scale-110 transition-transform;
    }

    /* Event Cards */
    .event-card {
        @apply group relative flex flex-col h-full bg-surface p-6 rounded-xl 
               border border-outline-variant/10 hover:bg-secondary-container/10 
               transition-all duration-300;
    }

    /* Mobile Menu Utilities */
    .mobile-menu-closed {
        transform: translateX(-100%);
    }
    .mobile-menu-open {
        transform: translateX(0);
    }
}

/* Custom Utilities for Transitions */
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}