/* ==========================================================================
   Honda Özel Servis – Ulu Otomotiv | responsive.css
   Mobil ve tablet uyum kuralları
   ========================================================================== */

/* Large tablets / small desktop */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .hero__grid { gap: 30px; }
}

/* Tablet */
/* Medium desktop: compact nav + icon-only CTA to prevent header overflow */
@media (max-width: 1200px) and (min-width: 1025px) {
  .nav__link { padding: 8px 8px; font-size: .85rem; }
  .header__cta .btn span.label { display: none; }
  .header__cta .btn { padding: 10px 12px; }
  .header .container { gap: 10px; }
}

/* Tablet & below: nav becomes off-canvas with accordion submenus */
@media (max-width: 1024px) {
  :root { --header-h: 62px; }

  .topbar { display: none; }

  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    bottom: 0;
    background: var(--surface);
    padding: 8px 16px 30px;
    border-top: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    overflow-y: auto;
    z-index: 899;
  }
  .nav.open { transform: none; }
  body.nav-open { overflow: hidden; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--border); }
  .nav__item.has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav__item.has-sub::after { display: none; }
  .nav__link { padding: 14px 10px; font-size: 1rem; grid-column: 1; }
  .nav__link .nav__chev { display: none; }
  .nav__item:not(.has-sub) .nav__link.is-active::after { display: none; }

  .nav__sub-toggle {
    display: flex; align-items: center; justify-content: center;
    grid-column: 2; width: 46px; height: 46px;
    background: none; border: 0; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--secondary);
  }
  .nav__sub-toggle .nav__chev { width: 20px; height: 20px; transition: transform .2s var(--ease); }
  .nav__sub-toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

  .nav__sub {
    display: block; grid-column: 1 / -1; position: static;
    box-shadow: none; border: 0; border-radius: 0; background: var(--background);
    min-width: 0; margin: 0 -16px; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .28s var(--ease);
    animation: none;
  }
  .nav__item.has-sub.sub-open .nav__sub { max-height: 720px; padding: 6px 16px 10px; }
  .nav__sub a { padding: 11px 10px; font-size: .95rem; }
  .nav__sub-all { border-top: 1px solid var(--border); }

  .header__cta .btn span.label { display: none; }
  .header__cta .btn { padding: 10px 12px; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__card { order: 2; }

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

  .layout-with-aside { grid-template-columns: 1fr; }
  .aside-card { position: static; }

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

/* Mobile */
@media (max-width: 620px) {
  body { padding-bottom: 62px; } /* space for mobile bar */

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }

  .mobile-bar { display: grid; }
  .wa-float { display: none; }
  .to-top { bottom: 78px; right: 16px; }

  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .hero .btn-row .btn { flex: 1 1 100%; }

  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  h1 { font-size: 1.7rem; }
  .section { padding: 44px 0; }
  .cookie { left: 10px; right: 10px; bottom: 70px; }
}

@media (max-width: 380px) {
  .logo__sub { display: none; }
  .container { padding-inline: 15px; }
}