/* ========================================
   ATURLA RESPONSIVE STYLES - PROFESSIONAL
   Overrides inline styles with !important
   ======================================== */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ====== MOBILE NAV ====== */
@media (max-width: 1024px) {
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .mobile-menu-btn { 
    display: flex !important; 
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
  }
  .nav-inner { 
    padding: 0 16px !important; 
    height: 56px !important;
  }
}

/* ====== MOBILE (max 768px) ====== */
@media (max-width: 768px) {

  /* --- Global --- */
  * { box-sizing: border-box; }
  .container { 
    padding: 0 16px !important; 
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  body {
    padding-bottom: 64px !important;
  }

  /* --- HERO (gambar 3 fix) --- */
  .hero { 
    min-height: auto !important; 
    padding: 80px 0 40px !important; 
    overflow: hidden !important;
  }
  .hero-grid { 
    grid-template-columns: 1fr !important; 
    gap: 24px !important; 
    width: 100% !important;
  }
  .hero-content { 
    max-width: 100% !important; 
    text-align: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .hero-badge {
    font-size: 10px !important;
    padding: 5px 12px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .hero h1 { 
    font-size: 26px !important; 
    letter-spacing: -0.5px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  .hero-subtitle { 
    font-size: 14px !important; 
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }
  .hero-actions { 
    justify-content: center !important; 
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
  }
  .hero-trust { 
    justify-content: center !important; 
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .trust-item {
    font-size: 11px !important;
  }
  .hero-visual { 
    display: block !important; 
    width: 100% !important;
    margin-top: 24px !important;
    padding: 0 !important;
    position: relative !important;
  }
  .floating-card {
    display: flex !important;
  }
  .dashboard-preview {
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .stats-row {
    gap: 8px !important;
  }
  .stat-card {
    padding: 10px !important;
  }
  .stat-card-label {
    font-size: 9px !important;
  }
  .stat-card-value {
    font-size: 18px !important;
  }
  .stat-card-change {
    font-size: 9px !important;
  }
  
  /* --- Live Stats --- */
  .live-stats { 
    flex-wrap: nowrap !important; 
    gap: 20px !important; 
    padding: 16px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: center !important;
  }
  .live-stats::-webkit-scrollbar { display: none; }
  .stat-item { 
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
  }
  .stat-number { font-size: 22px !important; }
  .stat-label { font-size: 10px !important; }
  
  /* --- Comparison Grid --- */
  .comparison-grid { 
    grid-template-columns: 1fr !important; 
    gap: 12px !important; 
    width: 100% !important;
  }
  .comparison-card { 
    padding: 20px 16px !important; 
    width: 100% !important;
    overflow: hidden !important;
  }
  .comparison-header {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .comparison-header h3 {
    font-size: 16px !important;
  }
  .comparison-list {
    gap: 12px !important;
  }
  .comparison-item {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  /* --- POS Section --- */
  .pos-showcase-section {
    padding: 48px 0 !important;
    overflow: hidden !important;
  }
  .pos-display { 
    max-width: 100% !important; 
    width: 100% !important;
    border-radius: 12px !important;
  }
  .pos-toggle {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .pos-body-retail.active { 
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .pos-products { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 8px !important;
    width: 100% !important;
  }
  .pos-product { 
    padding: 10px !important;
    min-width: 0 !important;
  }
  .prod-name { 
    font-size: 12px !important; 
    word-wrap: break-word !important;
  }
  .prod-price { font-size: 13px !important; }
  .pos-cart { 
    width: 100% !important; 
  }
  
  /* --- F&B Section --- */
  .fnb-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 8px !important;
    width: 100% !important;
  }
  .fnb-item { 
    padding: 10px 8px !important; 
    min-width: 0 !important;
  }
  .fnb-img { font-size: 24px !important; }
  .fnb-name { font-size: 11px !important; }
  .fnb-price { font-size: 12px !important; }
  .fnb-cart-summary { 
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 12px !important;
  }
  .fnb-checkout {
    width: 100% !important;
    padding: 12px !important;
  }
  
  /* --- Features Grid --- */
  .features-grid { 
    grid-template-columns: 1fr !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  .feature-card { 
    padding: 20px 16px !important; 
  }
  .feature-icon { 
    width: 44px !important; 
    height: 44px !important; 
    font-size: 18px !important;
  }
  .feature-card h3 { font-size: 15px !important; }
  .feature-card p { font-size: 13px !important; }
  .feature-tag { font-size: 10px !important; padding: 2px 8px !important; }
  
  /* --- Integrations (marquee auto-scroll) --- */
  .integrations-section {
    padding: 48px 0 !important;
    overflow: hidden !important;
  }
  .integrations-marquee-container::before,
  .integrations-marquee-container::after {
    width: 60px !important;
  }
  .integrations-marquee-track {
    gap: 8px !important;
  }
  .integration-pill { 
    padding: 8px 14px !important; 
    font-size: 12px !important;
  }
  .integration-pill i { font-size: 14px !important; }
  
  /* --- Offline Section --- */
  .offline-container { 
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .desktop-only { display: none !important; }
  .mobile-sync-cards { display: block !important; }
  .offline-visual { padding: 16px !important; width: 100% !important; }
  .offline-stat-value { font-size: 20px !important; }
  
  /* --- Testimonials --- */
  .testimonials-grid { 
    gap: 16px !important;
  }
  .testimonial-card { 
    padding: 20px 16px !important; 
  }
  .testimonial-text { font-size: 14px !important; }
  .testimonial-author {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .author-metric {
    margin-left: 0 !important;
  }
  
  /* --- Video Section --- */
  .video-container { 
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .play-button {
    width: 56px !important;
    height: 56px !important;
    font-size: 18px !important;
  }
  
  /* --- Calculator --- */
  .calculator-container { 
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .calculator-card { padding: 20px 16px !important; }
  .calc-highlight { font-size: 24px !important; }
  
  /* --- Pricing --- */
  .pricing-grid { 
    gap: 12px !important;
  }
  .pricing-card { padding: 20px 16px !important; }
  .plan-price { font-size: 28px !important; }
  
  /* --- FAQ --- */
  .faq-grid { 
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .faq-item { padding: 16px !important; }
  
  /* --- CTA Section --- */
  .cta-inner { 
    padding: 32px 20px !important; 
  }
  .cta-inner h2 { 
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .cta-actions { 
    flex-direction: column !important; 
    gap: 10px !important;
    width: 100% !important;
  }
  .cta-actions .btn { width: 100% !important; }
  .cta-guarantees { 
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  /* --- Footer --- */
  .footer-grid { 
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom { 
    flex-direction: column !important; 
    gap: 16px !important;
    text-align: center !important;
  }
  
  /* --- Mobile Navigation Menu (gambar 1 fix: compact) --- */
  .mobile-nav {
    top: 56px !important;
    padding: 8px 16px 100px !important;
    gap: 0 !important;
  }
  .mobile-nav a {
    padding: 12px 12px !important;
    font-size: 14px !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .mobile-nav a::before {
    display: none !important;
  }
  .mobile-nav a i {
    width: 20px !important;
    text-align: center;
  }
  .mobile-nav .btn {
    margin-top: 12px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    width: 100% !important;
  }
  .mobile-nav .btn + .btn {
    margin-top: 8px !important;
  }
  
  /* --- Sticky CTA --- */
  .sticky-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }
  .sticky-content { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 16px !important;
  }
  .sticky-text { 
    font-size: 11px !important;
    line-height: 1.3 !important;
    flex: 1 !important;
  }
  .sticky-content .btn {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  
  /* --- Modal --- */
  .modal-content { 
    width: 100% !important;
    max-width: 100% !important; 
    padding: 20px 16px !important;
    border-radius: 16px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  
  /* --- Section headers --- */
  .section-header {
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }
  .section-title { 
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .section-subtitle { 
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* --- Builder section --- */
  .builder-container { 
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  /* --- Table scroll --- */
  .table-container { 
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  .comparison-table { 
    min-width: 500px !important; 
    font-size: 12px !important;
  }
  
  /* --- Trust badges --- */
  .trust-badges { 
    flex-wrap: wrap !important; 
    justify-content: center !important;
    gap: 8px !important;
  }
}

/* ====== SMALL MOBILE (max 480px) ====== */
@media (max-width: 480px) {
  .hero h1 { font-size: 24px !important; }
  .hero-badge { font-size: 9px !important; }
  .section-title { font-size: 20px !important; }
  
  .comparison-card { padding: 16px 12px !important; }
  .comparison-item { font-size: 12px !important; }
  
  .feature-card { padding: 16px 12px !important; }
  .feature-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; }
  .feature-card h3 { font-size: 14px !important; }
  .feature-card p { font-size: 12px !important; }
}

/* ====== EXTRA SMALL (max 360px) ====== */
@media (max-width: 360px) {
  .hero h1 { font-size: 22px !important; }
  .hero-subtitle { font-size: 13px !important; }
  .section-title { font-size: 18px !important; }
  
  .btn-large { 
    padding: 12px 16px !important; 
    font-size: 13px !important; 
  }
}

/* ====== LANDSCAPE ====== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto !important; padding-top: 70px !important; }
  .mobile-nav { top: 56px !important; }
  .sticky-cta { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ====== SAFE AREA (notched phones) ====== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .sticky-cta {
      padding-bottom: env(safe-area-inset-bottom);
    }
    body {
      padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ====== PRINT ====== */
@media print {
  .sticky-cta, .whatsapp-float, .mobile-nav, nav { display: none !important; }
  .hero { min-height: auto !important; padding: 20px 0 !important; }
  body { background: white !important; color: black !important; padding-bottom: 0 !important; }
}