/* ==========================================================================
   Nissan Özel Servis – Ulu Otomotiv | responsive.css
   ========================================================================== */

/* Full nav collapses to hamburger before it can crowd the header */
@media (max-width: 1180px) {
  .nav { display: none; }
  .icon-btn { display: inline-flex; }
}

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

/* Tablet */
@media (max-width: 960px) {
  :root { --header-h: 64px; }

  .header__actions .btn span.hide-sm { display: none; }

  .layout { grid-template-columns: 1fr; gap: 32px; }
  .sidebar { position: static; }

  .split { grid-template-columns: 1fr; gap: 28px; }
  .split .media-frame { order: -1; }

  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__media { max-width: 400px; animation: none; }

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

  .topbar__item.hide-md { display: none; }
}

/* Small tablet / large phone */
@media (max-width: 720px) {
  body { padding-bottom: 64px; }

  .topbar { display: none; }

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

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

  .mobilebar { display: flex; }
  .float-wa { bottom: 78px; }
  .to-top { bottom: 146px; }
  .cookie { bottom: 74px; }

  .hero__cta .btn { flex: 1 1 100%; }

  .footer__bar { flex-direction: column; align-items: flex-start; }

  .header__actions .btn.only-icon-sm {
    padding: 10px;
  }
}

/* Phones */
@media (max-width: 480px) {
  body { font-size: 15.5px; }

  .container { padding: 0 16px; }

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

  .hero__trust li { font-size: 0.8rem; }

  .footer__grid { grid-template-columns: 1fr; gap: 26px; }

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

  .modal__box { border-radius: var(--radius); }

  .logo__main { font-size: 1.04rem; }
  .logo__sub { font-size: 0.62rem; }

  .header__actions .btn--dark { display: none; }
}

/* Very small */
@media (max-width: 360px) {
  .header__actions .btn span { display: none; }
}