/* Additional CSS for better mobile experience and debugging */

/* Debug styles - remove these in production */
.debug-mobile {
    border: 2px solid red !important;
}

/* Mobile menu improvements */
@media (max-width: 768px) {
    #mobileMenu {
        animation: slideDown 0.3s ease-out;
    }
    
    #mobileMenu.hidden {
        animation: slideUp 0.3s ease-out;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Ensure mobile menu is properly positioned */
@media (max-width: 768px) {
    #mobileMenu {
        position: relative;
        width: 100%;
        background: inherit;
    }
    
    #mobileMenu a {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #mobileMenu a:last-child {
        border-bottom: none;
    }
}

/* Ensure dark mode icons are visible */
.dark #darkModeToggle i {
    color: #9CA3AF !important;
}

#darkModeToggle i {
    color: #4B5563 !important;
}

/* Mobile responsiveness improvements */
@media (max-width: 640px) {
    .hero-bg h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-bg p {
        font-size: 1.25rem !important;
    }
    
    .hero-bg .flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .hero-bg button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Floating buttons positioning */
.floating-buttons {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Increased default gap */
}

/* Mobile optimizations for floating buttons */
@media (max-width: 768px) {
    .floating-buttons {
        bottom: 1.25rem;
        right: 1rem;
        gap: 0.375rem; /* Diperkecil untuk jarak yang lebih kompak */
    }
    
/* Samakan ukuran SEMUA floating buttons */
#darkModeToggleMobile,
#backToTop,
.floating-buttons a[href*="wa.me"] {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
}

/* Dark mode button khusus */
#darkModeToggleMobile {
    margin-bottom: 0.125rem; /* Diperkecil untuk jarak yang lebih rapat */
}
    
    /* Back to top button positioning adjustment */
    #backToTop {
        margin-bottom: 0.125rem; /* Diperkecil untuk konsistensi */
        /* Hilangkan transform untuk positioning yang lebih natural */
    }
    
    /* WhatsApp button - ensure it stays at bottom */
    .floating-buttons a[href*="wa.me"] {
        order: 1; /* Ensure WhatsApp stays at bottom */
    }
    
    /* Dark mode button order */
    #darkModeToggleMobile {
        order: 2; /* Middle position */
    }
    
    /* Back to top button order */
    #backToTop {
        order: 1; /* Top position when visible */
    }
}

/* Logo responsive adjustments */
@media (max-width: 480px) {
    .logo-container {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .logo-container img {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Footer logo adjustment */
    footer .logo-container {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    footer .logo-container img {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}