/* =========================================
   RESPONSIVE — Mobile-first breakpoints
   ========================================= */

/* Prevent overflow everywhere */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

*, *::before, *::after {
  max-width: 100%;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero-content {
    max-width: 100%;
  }

  .service-item {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .service-item:nth-child(even) {
    direction: ltr;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }

  .process-timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-timeline::before {
    display: none;
  }

  .gallery-grid {
    grid-auto-rows: 260px;
  }

  h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }

  h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }

  .section-header {
    max-width: 100%;
  }
}

/* ── Mobile Large (≤768px) ── */
@media (max-width: 768px) {
  .section {
    padding: var(--sp-10) 0;
  }

  .brand-values {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: var(--sp-3);
  }

  .gallery-item.wide {
    grid-column: span 1;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .process-timeline {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }

  .process-step p {
    max-width: 100%;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .mobile-cta-bar {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  /* Position floating whatsapp button cleanly on mobile */
  .floating-whatsapp {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  }

  .floating-whatsapp svg {
    width: 28px;
    height: 28px;
  }

  /* Prevent iOS Safari auto-zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }

  .cta-section {
    padding: var(--sp-12) 0;
  }

  .testimonial-quote {
    font-size: var(--fs-xl);
  }

  .contact-form-wrap {
    padding: var(--sp-5) var(--sp-4);
  }

  .contact-info {
    padding: var(--sp-5) var(--sp-4);
  }

  .ba-container {
    aspect-ratio: 16/10;
  }

  /* Hero typography mobile fix */
  .hero h1 {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    line-height: 1.12;
  }

  .hero-text {
    font-size: var(--fs-base);
    max-width: 100%;
  }

  /* Prevent buttons from overflowing */
  .btn {
    font-size: var(--fs-xs);
    padding: 12px var(--sp-4);
    white-space: normal;
  }

  .filter-btn {
    font-size: var(--fs-xs);
    padding: 8px 14px;
  }

  .area-tag {
    padding: 8px 14px;
    font-size: var(--fs-xs);
  }

  /* Service number fix */
  .service-number::after {
    display: none;
  }

  .about-content h2 {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }

  .scroll-indicator {
    display: none;
  }
}

/* ── Mobile Small (≤480px) ── */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--sp-3);
  }

  .section {
    padding: var(--sp-8) 0;
  }

  .hero {
    padding-top: 80px;
  }

  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .brand-values {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .brand-value {
    padding: var(--sp-4) var(--sp-3);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .process-timeline {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .cta-buttons .btn {
    width: 100%;
  }

  .ba-container {
    aspect-ratio: 4/3;
  }

  .testimonial-quote {
    font-size: var(--fs-lg);
    line-height: 1.5;
  }

  /* Logo mobile size */
  .logo-aurora {
    font-size: 0.9rem;
    letter-spacing: 0.25em;
  }

  .logo-havuz {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
  }

  /* Contact form full width */
  .contact-form-wrap,
  .contact-info {
    padding: var(--sp-4) var(--sp-3);
  }

  /* Footer mobile */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  .footer-legal {
    justify-content: center;
  }

  .social-links {
    justify-content: center;
  }

  /* CTA section text */
  .cta-section p {
    font-size: var(--fs-base);
  }

  /* Process step text */
  .process-step h3 {
    font-size: var(--fs-sm);
  }

  .process-step p {
    font-size: var(--fs-xs);
  }
}

/* ── Large screens (≥1440px) ── */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--sp-6);
  }
}

/* ── Safe area for notched phones ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-cta-bar {
    padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
  }
}