/* ==========================================================================
   RESPONSIVE.CSS — Mobile-first breakpoint overrides
   Breakpoints: 1280 / 1024 / 768 / 480
   ========================================================================== */

@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-grid .footer-col:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --header-height: 76px; }

  .main-nav__list { display: none; }
  .nav-toggle { display: inline-flex; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-grid .footer-brand { grid-column: 1 / -1; }

  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-grid .hero-media { order: -1; max-width: 520px; margin-inline: auto; }

  .cta-band { padding: var(--space-7) var(--space-5); }
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-8); }
  .section--tight { padding-block: var(--space-7); }

  /* Genel güvenlik ağı: içerik/sayfa dosyalarında satır-içi (inline)
     grid-template-columns tanımlı bölümler (ör. hizmet detay + kenar çubuğu,
     bölge açıklaması + mahalle kartı, iletişim formu) mobilde tek sütuna
     düşer. Inline style'ları ezmek için !important gereklidir; bu, mobilde
     yatay taşmaya (horizontal overflow) neden olan asıl sebeplerden biriydi. */
  .grid { grid-template-columns: 1fr !important; }
  .process-steps { grid-template-columns: 1fr 1fr !important; }

  .hide-mobile { display: none !important; }
  .show-mobile { display: initial !important; }

  .mobile-action-bar { display: flex; }
  body { padding-bottom: 64px; }

  .form-row { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .about-split, .split-block { grid-template-columns: 1fr !important; }
  .split-block .split-block__media { order: -1; }

  .scroll-top { bottom: 80px; right: var(--space-4); }
}

@media (max-width: 480px) {
  :root { --container-pad: 18px; }
  .process-steps { grid-template-columns: 1fr; }
  .btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-sm); }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; white-space: normal; line-height: 1.3; }
  .stat__value { font-size: var(--fs-xl); }
}

/* Large screens: allow more breathing room */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}