/* =========================================================
   PSA MSG AUTO — Responsive Breakpoints
   Desktop-first taban style.css içinde; burada mobil/tablet
   deneyimi ayrıca ele alınır.
   ========================================================= */

/* ---------- Tablet & below: 1080px ---------- */
@media (max-width: 1080px) {
  .navbar-links { display: none; }
  .navbar-burger { display: flex; }

  .brand-panels { height: 460px; }

  /* Sticky "liste + tek görsel" storytelling dar ekranda kafa karıştırıyor
     (liste kaydırılıp bitiyor, altında hangi hizmete ait olduğu belirsiz
     tek bir görsel kalıyor). Bunun yerine her hizmeti kendi numarası,
     başlığı, açıklaması ve fotoğrafıyla birlikte tam bir kart olarak
     art arda göster. */
  .services-story-grid { grid-template-columns: 1fr; }
  .services-story-list { display: none; }
  .services-story-visual {
    position: static;
    height: auto;
    top: auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .service-visual-panel {
    position: relative;
    height: 340px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .service-visual-title { display: block; }

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

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

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

  .location-section { grid-template-columns: 1fr; }
  .location-map { min-height: 360px; }

  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile: 720px ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }

  section { padding: 56px 0; }

  .hero { align-items: flex-end; padding-bottom: 10px; }
  .hero-content { padding-bottom: 120px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { flex-wrap: wrap; }

  /* Dar/uzun ekranlarda arka plan fotoğrafı daha fazla alan kaplıyor;
     başlık ve açıklamanın altındaki bölge (genelde fotoğrafın en yoğun/
     yazılı kısmı) okunaklı kalsın diye ek bir karartma katmanı eklenir. */
  .hero-gradient {
    background:
      linear-gradient(180deg, rgba(10,11,13,0.45) 0%, rgba(10,11,13,0.35) 22%, rgba(10,11,13,0.72) 50%, rgba(10,11,13,0.88) 75%, var(--bg) 100%);
  }

  .brand-panels { flex-direction: column; height: auto; gap: 10px; }
  .brand-panel { height: 90px; flex: none !important; }
  .brand-panel.is-active { height: 320px; }
  .brand-panel-name { writing-mode: horizontal-tb !important; top: auto !important; bottom: 20px; left: 20px; font-size: 22px !important; }
  .brand-panel.is-active .brand-panel-name { top: 20px; bottom: auto; }

  .process-steps { grid-template-columns: 1fr; }

  .reviews-grid { grid-template-columns: 1fr; }
  .trust-ratings { flex-direction: column; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item.wide { grid-column: span 2; }
  .gallery-item.tall { grid-row: span 1; }

  .form-row { flex-direction: column; }
  .form-field-sm { flex: 1; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cta-actions .btn, .location-actions .btn { width: 100%; }
  .footer-cta-actions, .location-actions { flex-direction: column; }

  .footer-bottom { flex-direction: column; text-align: center; }

  /* Mobil özel sticky bottom CTA + custom cursor kapatma */
  .mobile-cta-bar { display: flex; justify-content: space-around; }
  .whatsapp-float { bottom: 78px; right: 16px; width: 46px; height: 46px; }
  body { padding-bottom: 64px; }
}

/* Dokunmatik cihazlarda custom cursor tamamen kapalı (main.js ayrıca kontrol eder) */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

@media (max-width: 480px) {
  .services-grid-full { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(36px, 11vw, 60px); }
}