/* ============================================
   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 Us carousel - keep horizontal on mobile */
    .why-choose-carousel-container {
        height: 380px !important;
        overflow: hidden !important;
        padding: var(--space-16) 0 !important;
    }
    
    .why-choose-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--space-24) !important;
        animation: whyChooseSlide 60s linear infinite !important;
        width: max-content !important;
        will-change: transform !important;
    }
    
    /* Why Choose Us cards - smaller on mobile */
    .why-choose-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        width: 280px !important;
        padding: var(--space-24) !important;
    }
    
    /* Why Choose Us card icon */
    .why-choose-card div[style*="font-size: 48px"] {
        font-size: 40px !important;
    }
    
    /* Why Choose Us card title */
    .why-choose-card h3 {
        font-size: var(--font-size-lg) !important;
    }
    
    /* Why Choose Us CTA section */
    #why-choose-us div[style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        gap: var(--space-16) !important;
    }
    
    #why-choose-us a[class*="btn"] {
        width: 100% !important;
        justify-content: center !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 {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    /* Testimonials carousel - keep horizontal on mobile */
    .testimonials-carousel-container {
        height: 350px !important;
        overflow: hidden !important;
        padding: var(--space-16) 0 !important;
    }
    
    .testimonials-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--space-24) !important;
        animation: testimonialsSlide 50s linear infinite !important;
        width: max-content !important;
        will-change: transform !important;
    }
    
    /* Testimonial cards - smaller on mobile */
    .testimonial-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        width: 280px !important;
        padding: var(--space-24) !important;
    }
    
    /* Testimonial header */
    .testimonial-header {
        flex-direction: row !important;
        gap: var(--space-16) !important;
    }
    
    /* Testimonial avatar */
    .testimonial-avatar {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0 !important;
    }
    
    /* Testimonial info */
    .testimonial-info {
        flex: 1 !important;
        text-align: left !important;
    }
    
    /* Testimonial name */
    .testimonial-name {
        font-size: var(--font-size-base) !important;
    }
    
    /* Testimonial position */
    .testimonial-position {
        font-size: var(--font-size-xs) !important;
    }
    
    /* Testimonial text */
    .testimonial-text {
        font-size: var(--font-size-sm) !important;
        line-height: 1.6 !important;
    }
    
    /* Testimonial rating */
    .testimonial-rating {
        margin-top: var(--space-8) !important;
    }
    
    /* ===== CONTACT SECTION ===== */
    #hubungi-kami {
        padding: var(--space-48) var(--space-20) !important;
    }
    
    /* Contact main grid - stack vertically */
    #hubungi-kami > div > div[style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-32) !important;
    }
    
    /* Contact cards grid - 1 column on mobile */
    #hubungi-kami div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-20) !important;
    }
    
    /* Contact card links - full width */
    #hubungi-kami a[style*="display: flex; flex-direction: column"] {
        width: 100% !important;
        padding: var(--space-24) !important;
    }
    
    /* CTA card - full width */
    #hubungi-kami div[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
        padding: var(--space-24) !important;
    }
    
    /* Map container - CENTER ALIGNED */
    #hubungi-kami > div > div > div[style*="position: relative"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    #hubungi-kami iframe {
        height: 300px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Map wrapper div */
    #hubungi-kami div[style*="border-radius"][style*="overflow: hidden"] {
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Quick info cards below map */
    #hubungi-kami div[style*="grid-template-columns: 1fr 1fr"]:last-child {
        grid-template-columns: 1fr !important;
        gap: var(--space-16) !important;
    }
    
    .contact-info-card {
        width: 100% !important;
        padding: var(--space-16) !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 {
        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;
    }
    
    /* Contact section - smaller padding */
    #hubungi-kami {
        padding: var(--space-32) var(--space-16) !important;
    }
    
    #hubungi-kami a[style*="display: flex; flex-direction: column"] {
        padding: var(--space-20) !important;
    }
    
    #hubungi-kami div[style*="width: 60px; height: 60px"] {
        width: 50px !important;
        height: 50px !important;
    }
    
    #hubungi-kami div[style*="grid-column: span 2"] {
        padding: var(--space-20) !important;
    }
    
    /* Ensure maps container is properly centered */
    #hubungi-kami > div > div[style*="flex-direction: column"] {
        width: 100% !important;
        padding: 0 !important;
    }
    
    #hubungi-kami div[style*="border-radius"][style*="box-shadow"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Testimonials - smaller cards on small phones */
    .testimonials-carousel-container {
        height: 320px !important;
    }
    
    .testimonial-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
        width: 260px !important;
        padding: var(--space-20) !important;
    }
    
    .testimonial-avatar {
        width: 45px !important;
        height: 45px !important;
    }
    
    /* Why Choose Us - smaller cards on small phones */
    .why-choose-carousel-container {
        height: 350px !important;
    }
    
    .why-choose-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
        width: 260px !important;
        padding: var(--space-20) !important;
    }
    
    .why-choose-card div[style*="font-size: 48px"] {
        font-size: 36px !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;
    }
}