/* ============================================
   MOBILE RESPONSIVE STYLES - COMPREHENSIVE
   ============================================ */

/* TABLET & MOBILE (max-width: 768px) */
@media (max-width: 768px) {
    
    /* ===== FIX HORIZONTAL SCROLL - CRITICAL ===== */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100% !important;
    }
    
    /* ===== HEADER & NAVIGATION ===== */
    header {
        height: 70px !important;
        padding: 0 var(--space-16) !important;
    }
    
    header nav {
        padding: 0 var(--space-16) !important;
        gap: var(--space-12) !important;
    }
    
    /* Hide desktop navigation on mobile */
    #desktopNav {
        display: none !important;
    }
    
    /* Logo on left */
    .logo-link {
        display: flex !important;
        align-items: center !important;
        gap: var(--space-8) !important;
    }
    
    .logo-container {
        width: 36px !important;
        height: 36px !important;
    }
    
    .logo-text {
        font-size: 0.9rem !important;
        display: inline !important;
    }
    
    /* Right side: Language + Login */
    .header-right {
        gap: var(--space-8) !important;
        flex-shrink: 0;
    }
    
    /* Language toggle - compact */
    .lang-toggle {
        flex-shrink: 0;
    }
    
    #langToggleBtn {
        padding: var(--space-6) var(--space-8) !important;
        min-width: 40px;
    }
    
    #langToggleBtn img {
        width: 18px !important;
        height: 13px !important;
    }
    
    /* Login button - icon only */
    #loginBtn {
        padding: var(--space-8) var(--space-12) !important;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-text {
        display: none !important;
    }
    
    .login-icon {
        display: inline !important;
        font-size: 1.2rem;
    }
    
    /* ===== HERO SECTION ===== */
    #hero {
        padding: 100px var(--space-20) var(--space-48) !important;
        min-height: 600px !important;
    }
    
    #hero h1 {
        font-size: var(--font-size-3xl) !important;
        line-height: 1.2 !important;
    }
    
    #hero p {
        font-size: var(--font-size-base) !important;
        margin-bottom: var(--space-24) !important;
    }
    
    /* Hero buttons stack vertically */
    #hero .cta-buttons {
        flex-direction: column !important;
        gap: var(--space-16) !important;
        width: 100% !important;
    }
    
    #hero .cta-buttons a,
    #hero .cta-buttons button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* ===== SERVICES SECTION ===== */
    #servis {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    .service-card {
        margin-bottom: var(--space-24) !important;
    }
    
    /* Service grid to single column */
    .services-grid,
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-24) !important;
    }
    
    /* ===== CARA KERJA SECTION ===== */
    #cara-kerja {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    .step-flow-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-32) !important;
    }
    
    .step-item {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Hide flow line and arrows on mobile */
    .flow-line,
    .arrow-animate {
        display: none !important;
    }
    
    /* Add vertical connector instead */
    .step-flow-container::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, var(--primary-yellow) 0%, #FFE55C 100%);
        transform: translateX(-50%);
        z-index: 0;
    }
    
    /* ===== TENTANG KAMI SECTION ===== */
    #tentang-kami {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    /* About grid to single column */
    #tentang-kami [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-32) !important;
    }
    
    /* Images stack vertically */
    #tentang-kami img {
        height: 250px !important;
    }
    
    /* Stats section */
    .about-stats-animate,
    [style*="justify-content: space-evenly"] {
        flex-direction: column !important;
        gap: var(--space-24) !important;
        padding: var(--space-24) !important;
    }
    
    /* ===== WHY CHOOSE US SECTION ===== */
    #why-choose-us {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    .why-choose-carousel {
        flex-direction: column !important;
    }
    
    .why-choose-card {
        min-width: 100% !important;
        margin-bottom: var(--space-24) !important;
    }
    
    /* ===== PARTNERS SECTION ===== */
    .partners-section {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    .partners-logos {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .partner-logo {
        width: 150px !important;
        height: 80px !important;
        margin: var(--space-12) !important;
    }
    
    .partners-stats {
        flex-direction: column !important;
        gap: var(--space-24) !important;
    }
    
    /* ===== TESTIMONIALS SECTION ===== */
    .testimonials-section {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    .testimonial-card {
        min-width: 280px !important;
        margin-right: var(--space-16) !important;
    }
    
    /* ===== CONTACT SECTION ===== */
    #hubungi-kami {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    /* Contact grid to single column */
    #hubungi-kami [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-32) !important;
    }
    
    /* ===== FOOTER ===== */
    footer {
        padding: var(--space-48) var(--space-20) var(--space-32) !important;
    }
    
    footer [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-32) !important;
        text-align: center !important;
    }
    
    /* ===== WHATSAPP FLOAT - ALWAYS VISIBLE ===== */
    #whatsappFloat {
        display: flex !important;
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        z-index: 997 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* WhatsApp Modal */
    .whatsapp-modal-content {
        width: 95% !important;
        max-width: 400px !important;
        margin: var(--space-20) !important;
    }
    
    /* ===== LANGUAGE TOGGLE FLOATING - HIDE ON MOBILE ===== */
    .language-toggle {
        display: none !important;
    }
    
    /* ===== TYPOGRAPHY ADJUSTMENTS ===== */
    h1 {
        font-size: var(--font-size-3xl) !important;
    }
    
    h2 {
        font-size: var(--font-size-2xl) !important;
    }
    
    h3 {
        font-size: var(--font-size-xl) !important;
    }
    
    /* Section titles */
    [data-translate="section-servis"],
    [data-translate="section-cara-kerja"],
    [data-translate="section-tentang"],
    [data-translate="why-choose-us-title"] {
        font-size: var(--font-size-2xl) !important;
    }
    
    /* ===== SPACING ADJUSTMENTS ===== */
    section {
        padding-top: var(--space-48) !important;
        padding-bottom: var(--space-48) !important;
        text-align: center !important;
    }
    
    /* Center all section content */
    section > div,
    section > div > div {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Center text content */
    h1, h2, h3, h4, h5, h6, p {
        text-align: center !important;
    }
    
    /* Center images */
    img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* Center buttons */
    .cta-buttons,
    button,
    a[href] {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* ===== ANIMATIONS - REDUCE MOTION ON MOBILE ===== */
    .about-image-animate,
    .about-text-animate,
    .step-item-animate {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* SMALL PHONES (max-width: 480px) */
@media (max-width: 480px) {
    
    /* Even smaller header */
    header {
        height: 60px !important;
        padding: 0 var(--space-12) !important;
    }
    
    header nav {
        padding: 0 var(--space-12) !important;
    }
    
    .logo-container {
        width: 32px !important;
        height: 32px !important;
    }
    
    .logo-text {
        font-size: 0.85rem !important;
    }
    
    /* Hero adjustments */
    #hero {
        padding: 80px var(--space-16) var(--space-32) !important;
    }
    
    #hero h1 {
        font-size: var(--font-size-2xl) !important;
    }
    
    /* Reduce all section padding */
    section {
        padding: var(--space-32) var(--space-16) !important;
    }
    
    /* Smaller cards */
    .service-card,
    .why-choose-card,
    .testimonial-card {
        padding: var(--space-20) !important;
    }
    
    /* Smaller buttons */
    button,
    .cta-button,
    a[style*="padding"] {
        padding: var(--space-12) var(--space-24) !important;
        font-size: var(--font-size-sm) !important;
    }
    
    /* Stats numbers smaller */
    .count-up {
        font-size: var(--font-size-3xl) !important;
    }
    
    /* Step numbers smaller */
    .step-number {
        width: 60px !important;
        height: 60px !important;
        font-size: var(--font-size-xl) !important;
    }
    
    .step-icon-bounce {
        width: 70px !important;
        height: 70px !important;
        font-size: var(--font-size-xl) !important;
    }
    
    /* WhatsApp button smaller */
    #whatsappFloat {
        width: 50px !important;
        height: 50px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* LANDSCAPE MOBILE (max-height: 500px) */
@media (max-height: 500px) and (orientation: landscape) {
    
    #hero {
        min-height: 400px !important;
        padding: 80px var(--space-20) var(--space-32) !important;
    }
    
    header {
        height: 60px !important;
    }
}