/* ==========================================================================
   MERKEZİ HAVALANDIRMA SİSTEMLERİ — responsive.css
   Breakpoints covered: 320 / 375 / 414 / 768 / 1024 / 1280 / 1440+
   Mobile-first tokens already scale via clamp() in style.css; this file
   handles structural reflow (grid → stack) and navigation behaviour.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Navigation — desktop vs. mobile switch at 1024px
   ----------------------------------------------------------------------- */
.nav-toggle{ display: flex; }
.main-nav > ul{ display: none; }

@media (min-width: 1024px){
  .nav-toggle{ display: none; }
  .main-nav > ul{ display: flex; }
}

/* ≤1279px — tighten container edge padding slightly, collapse dropdown mega-panel width */
@media (max-width: 1279.98px){
  .nav-dropdown-panel{ min-width: 280px; }
}

/* -----------------------------------------------------------------------
   ≤1023px — Laptop/tablet landscape: collapse asymmetric splits to a
   single column, reduce section rhythm
   ----------------------------------------------------------------------- */
@media (max-width: 1023.98px){
  .split,
  .split--7-5,
  .split--5-7,
  .split--8-4,
  .split--4-8{
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .split > *{ min-width: 0; }

  .grid-12{ grid-template-columns: repeat(6, 1fr); }
  .grid-12 > [style*="span 4"]{ grid-column: span 3 !important; }
  .grid-12 > [style*="span 6"]{ grid-column: span 6 !important; }

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

  .solutions-grid{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, minmax(220px, 1fr)); min-height: auto; }
  .solutions-grid .cluster.is-lead{ grid-column: span 2; grid-row: span 1; }
  .solutions-grid .cluster.is-wide{ grid-column: span 2; }

  .projects-grid{ grid-template-columns: repeat(2, 1fr); }
  .projects-grid .proj-lead{ grid-column: span 2; grid-row: span 1; }
  .projects-grid .proj-lead .media-frame{ aspect-ratio: 16/9; }

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

  .mini-steps{ grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-5); }

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

/* -----------------------------------------------------------------------
   ≤767px — Tablet portrait and below: full stacking, mobile component
   sizing, reduced hero height
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px){
  :root{
    --section-pad: clamp(3rem, 2.4rem + 6vw, 5rem);
  }

  .hero{ min-height: 92vh; }
  .hero .hero-content{ padding-top: var(--sp-8); }
  .page-hero{ padding-top: calc(var(--sp-8) + var(--sp-3)); padding-bottom: var(--sp-6); }

  .grid-12{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .grid-12 > [style*="span 4"],
  .grid-12 > [style*="span 6"]{ grid-column: span 2 !important; }

  .text-cols-2{ grid-template-columns: 1fr; gap: var(--sp-5); }

  .cap-step{ grid-template-columns: 44px 1fr; row-gap: var(--sp-3); }
  .cap-step .cap-thumb{ display: none; }

  .timeline-item .timeline-body{ grid-template-columns: 1fr; }
  .timeline-item .timeline-thumb{ width: 100%; height: 180px; order: -1; }
  .timeline::before{ left: 24px; }
  .timeline-num{ width: 48px; height: 48px; font-size: 0.8rem; }
  .timeline-item{ grid-template-columns: 48px 1fr; }

  .service-detail-item{ grid-template-columns: 40px 1fr; }

  .solutions-grid{ grid-template-columns: 1fr; grid-template-rows: none; gap: var(--sp-4); }
  .solutions-grid .cluster{ min-height: 320px; }
  .solutions-grid .cluster.is-lead,
  .solutions-grid .cluster.is-wide{ grid-column: span 1; grid-row: span 1; }

  .projects-grid{ grid-template-columns: 1fr; }
  .projects-grid .proj-lead{ grid-column: span 1; }
  .projects-grid .media-frame{ aspect-ratio: 4/3; }

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

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

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

  .industry-slide{ height: 440px; }

  .cta-banner .contact-meta{ flex-direction: column; gap: var(--sp-3); }

  .main-nav{ gap: var(--sp-3); }
}

/* -----------------------------------------------------------------------
   ≤414px — Large phones
   ----------------------------------------------------------------------- */
@media (max-width: 414.98px){
  .brand img{ height: 44px; max-width: min(240px, 58vw); }
  .industry-slide{ height: 380px; }
  .service-row,
  .service-detail-item{ grid-template-columns: 32px 1fr; gap: var(--sp-3); }
  .mini-steps{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .contact-info-card{ padding: var(--sp-4); }
  .filter-row{ gap: var(--sp-2); }
  .filter-btn{ padding: 0.42rem 0.9rem; font-size: 0.8rem; }
}

/* -----------------------------------------------------------------------
   ≤375px — Standard small phones
   ----------------------------------------------------------------------- */
@media (max-width: 375.98px){
  .mobile-nav a{ font-size: clamp(1.4rem, 8vw, 1.9rem); }
  .trust-grid{ grid-template-columns: 1fr; }
  .btn-primary, .btn-secondary{ padding: 0.85rem 1.5rem; font-size: 0.86rem; }
}

/* -----------------------------------------------------------------------
   ≤320px — Smallest supported width
   ----------------------------------------------------------------------- */
@media (max-width: 320px){
  :root{ --container-pad: 1.1rem; }
  .cluster-count,
  .index-num{ font-size: 0.72rem; }
  .industry-slide{ height: 340px; }
  .nav-dropdown-panel{ min-width: 240px; }
}

/* -----------------------------------------------------------------------
   WhatsApp floating button — mobile sizing
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px){
  .whatsapp-float{
    left: var(--sp-4);
    bottom: var(--sp-4);
    width: 50px; height: 50px;
    font-size: 1.4rem;
  }
}

/* -----------------------------------------------------------------------
   No-horizontal-scroll safety net
   ----------------------------------------------------------------------- */
html, body{ max-width: 100%; overflow-x: hidden; }
img, svg, iframe, video{ max-width: 100%; }