/* ============================================================
   RESPONSIVE STYLES - Mobile First Premium Design
   ============================================================ */

/* ==================== SMALL MOBILE (<= 359px) ==================== */
@media (max-width: 359px) {
  :root { font-size: 14px; }

  .header-inner { padding: 10px 12px; }
  .nav-menu, .header-cta { display: none; }
  .mobile-toggle { display: flex; }

  .hero { padding-top: 70px; }
  .hero-features { grid-template-columns: 1fr; gap: 12px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; }

  .pasaran-grid { grid-template-columns: 1fr; }
  .promo-grid { grid-template-columns: 1fr; }
  .payment-categories { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }

  .app-section-inner { flex-direction: column; }
  .app-preview { flex: none; width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 25px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-legal { justify-content: center; }

  #unclosable-popup { padding: 20px; width: 95%; }
  .popup-cta a { padding: 12px 20px; font-size: 0.9rem; }
}

/* ==================== MOBILE (360px - 479px) ==================== */
@media (min-width: 360px) and (max-width: 479px) {
  :root { font-size: 15px; }

  .nav-menu, .header-cta { display: none; }
  .mobile-toggle { display: flex; }

  .hero { padding-top: 70px; }
  .hero-features { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; }

  .pasaran-grid { grid-template-columns: 1fr; }
  .promo-grid { grid-template-columns: 1fr; }
  .payment-categories { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }

  .app-section-inner { flex-direction: column; }
  .app-preview { flex: none; width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 25px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* ==================== TABLET (480px - 767px) ==================== */
@media (min-width: 480px) and (max-width: 767px) {
  :root { font-size: 15px; }

  .nav-menu, .header-cta { display: none; }
  .mobile-toggle { display: flex; }

  .hero { padding-top: 75px; }
  .hero-features { grid-template-columns: 1fr 1fr; gap: 15px; }

  .pasaran-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: 1fr; }
  .payment-categories { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }

  .app-section-inner { flex-direction: column; }
  .app-preview { flex: none; width: 100%; max-width: 400px; margin: 0 auto; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* ==================== SMALL DESKTOP (768px - 1023px) ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { font-size: 16px; }

  .nav-menu { display: flex; }
  .header-cta { display: flex; }
  .mobile-toggle { display: none; }

  .hero-features { grid-template-columns: repeat(2, 1fr); }

  .pasaran-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: repeat(2, 1fr); }
  .payment-categories { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

/* ==================== DESKTOP (1024px - 1439px) ==================== */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { font-size: 16px; }

  .nav-menu { display: flex; }
  .header-cta { display: flex; }
  .mobile-toggle { display: none; }

  .hero-features { grid-template-columns: repeat(4, 1fr); }
  .pasaran-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-grid { grid-template-columns: repeat(3, 1fr); }
  .payment-categories { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== LARGE DESKTOP (>= 1440px) ==================== */
@media (min-width: 1440px) {
  :root { font-size: 17px; }

  .container { max-width: 1300px; }

  .hero-features { grid-template-columns: repeat(4, 1fr); }
  .pasaran-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-grid { grid-template-columns: repeat(3, 1fr); }
  .payment-categories { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== TOUCH OPTIMIZATION ==================== */
a, button, input[type="submit"], select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Minimum touch targets (44x44px WCAG) */
@media (pointer: coarse) {
  .btn, button, a {
    min-height: 44px;
  }
}

/* ==================== PRINT STYLES ==================== */
@media print {
  body { background: #fff; color: #000; }
  .header, .footer, #popup-overlay, #unclosable-popup, .mobile-nav, .floating-particles { display: none !important; }
  .section { page-break-inside: avoid; }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}