/* Touch-friendly styles for mobile devices */

/* Increase touch target sizes */
@media (max-width: 768px) {
    /* Make buttons easier to tap */
    .btn-primary, .btn-small {
        padding: 12px 24px !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 300px;
    }
    
    /* Increase space between navigation items */
    nav ul li {
        margin: 20px 0 !important;
    }
    
    /* Make form elements more touch-friendly */
    input, select, textarea, button {
        min-height: 44px;
        font-size: 16px !important; /* Prevent zoom on iOS */
        width: 100%;
    }
    
    /* Increase tap area for dots in slider */
    .dot {
        width: 12px !important;
        height: 12px !important;
        margin: 0 6px !important;
    }
    
    /* Add extra padding to cards */
    .why-card, .feature, .step, .testimonial {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Improve scroll performance */
    body {
        -webkit-overflow-scrolling: touch;
    }

    /* Make footer links more tappable */
    .footer-links-column ul li {
        margin-bottom: 16px !important;
    }
    
    .footer-links-column ul li a {
        display: inline-block;
        padding: 5px 0;
        width: auto;
    }
    
    /* Prevent double-tap to zoom */
    * {
        touch-action: manipulation;
    }
    
    /* Make sure images are responsive */
    img {
        max-width: 100%;
        height: auto;
        width: auto;
    }
    
    /* Khusus untuk gambar hero di mobile */
    .hero-image img {
        max-width: 70%;
        margin: 0 auto;
        display: block;
    }
    
    /* Container width adjustment */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Grid items width */
    .features-grid, .why-cards {
        width: 100% !important;
    }
    
    /* Fix testimonials width */
    .testimonial-slider {
        width: 100% !important;
    }
    
    .testimonial {
        margin: 0 !important;
    }
}

/* Better tap feedback */
@media (max-width: 768px) {
    a, button, .btn-primary, .btn-small, .dot {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    
    a:active, button:active, .btn-primary:active, .btn-small:active {
        opacity: 0.7;
    }
    
    /* Add subtle active state feedback */
    .why-card:active, .feature:active, .step:active {
        transform: scale(0.98);
    }
}

/* Handle device-specific issues */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific fixes */
    body {
        /* Fix for 100vh issue on iOS Safari */
        min-height: -webkit-fill-available;
    }
    
    /* Fix for position:fixed issues on iOS */
    nav.active {
        position: absolute;
    }
    
    /* Fix for width issues on iOS */
    .container, .features-grid, .why-cards, .testimonial {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix for input zoom issues on iOS */
    input[type="text"], input[type="email"], input[type="tel"], textarea {
        font-size: 16px !important;
    }
}