@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom Styles */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
    transition: background-color 0.3s ease, color 0.3s ease;    
}
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    @apply transition-colors duration-300;
}
/* Tambahkan di bagian atas file CSS */
body, html {
    width: 100%;
    max-width: 100vw;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
#mobile-menu {
    position: fixed;
    top: 60px; /* Sesuaikan dengan tinggi navbar */
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 999;
    overflow-y: auto;
    max-height: calc(100vh - 60px);
}

@media (max-width: 768px) {
    /* Pastikan semua elemen tidak melebihi viewport */
    * {
        max-width: 100%;
    }
    
    /* Perbaiki mobile menu */
    #mobile-menu {
        width: 100vw;
        left: 0;
        right: 0;
    }
}
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Swiper Navigation Customization */
.swiper-button-next,
.swiper-button-prev {
    @apply !w-10 !h-10 bg-white dark:bg-gray-700 rounded-full shadow-md !text-primary-500;
    --swiper-navigation-size: 20px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    @apply font-bold;
}

.swiper-pagination-bullet {
    @apply !w-3 !h-3;
}

.swiper-pagination-bullet-active {
    @apply !bg-primary-500;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Custom Components */
.hero-gradient {
    background: linear-gradient(135deg, #030712 0%, #1f2937 100%);
}

.project-card {
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.skill-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Contact Form */
#contact-form input,
#contact-form textarea {
    transition: all 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
    @apply ring-2 ring-primary-500 border-primary-500;
}

/* Theme Transition */
.theme-transition * {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Preloader Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}
/* Pastikan dark mode styling bekerja */
.dark {
    color-scheme: dark;
}

/* Tambahkan transition untuk smooth perubahan */