/* Menggunakan @apply dari Tailwind untuk membuat komponen kustom jika diperlukan */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Styles */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Loading Spinner Animation */
.spinner {
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Welcome Popup Animation */
.popup-enter {
    opacity: 0;
    transform: scale(0.9);
}
.popup-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}
.popup-exit {
    opacity: 1;
    transform: scale(1);
}
.popup-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 300ms, transform 300ms;
}

/* Banner Slider (Swiper.js) */
.swiper-button-next,
.swiper-button-prev {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px !important;
}

.swiper-pagination-bullet-active {
    background-color: #3b82f6 !important;
}

/* Navbar */
.nav-link {
    @apply block py-2 px-4 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors;
}

/* Floating Action Button (FAB) */
.fab {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}