/* ============================================================
   MOBİL OTO LASTİK — responsive.css
   Mobil öncelikli. Tüm kurallar yukarı doğru (min-width) genişler.
   Bu dosya diğer CSS dosyalarından SONRA yüklenir.
   ============================================================ */

/* ---- ≥ 480px — büyük telefonlar -------------------------- */
@media (min-width: 480px) {
  :root {
    --fs-h2:  2rem;
    --fs-dev: 2.75rem;
  }

  .cta-stack { gap: var(--sp-4); }
}


/* ---- ≥ 600px — küçük tabletler --------------------------- */
@media (min-width: 600px) {
  :root {
    --fs-govde: 1.0625rem;
    --fs-lead:  1.125rem;
  }

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

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

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

  .sign__plate { padding: var(--sp-6) var(--sp-5) var(--sp-5); }

  .final .cta-stack {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }

  .final .btn { flex: 0 1 300px; }
}


/* ---- ≥ 780px — tabletler --------------------------------- */
@media (min-width: 780px) {
  :root {
    --fs-h2:  2.25rem;
    --fs-dev: 3.25rem;
  }

  .section { padding-block: var(--sp-8); }

  .section--hero {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

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

  .why-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }

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

  .slider__track { grid-auto-columns: 46%; }

  .cta-stack { flex-direction: row; }

  .cta-stack .btn { flex: 1 1 0; }
}


/* ---- ≥ 940px — masaüstü ---------------------------------- */
@media (min-width: 940px) {
  :root {
    --fs-dev: 3.75rem;
    --fs-h2:  2.5rem;
  }

  html { scroll-padding-top: 88px; }

  /* Hero iki sütuna açılır: levha solda, çağrı sağda */
  .hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-7);
    align-items: center;
  }

  .sign { grid-row: span 3; }

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

  .slider__track { grid-auto-columns: 31.5%; }

  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }

  .topbar__inner { min-height: 64px; }

  /* Masaüstünde sabit çubuğa gerek yok — CTA'lar zaten görünür */
  .dockbar { display: none; }

  body { padding-bottom: 0; }
}


/* ---- ≥ 1140px — geniş ekran ------------------------------ */
@media (min-width: 1140px) {
  .corridor__svg {
    width: 100%;
    min-width: 0;
  }

  .corridor__hint { display: none; }
}


/* ---- Yatay mobil (alçak ekran) --------------------------- */
@media (max-height: 460px) and (orientation: landscape) {
  .section--hero {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
  }

  .sign__title-lg { font-size: 1.75rem; }

  .btn { min-height: 58px; }
}


/* ---- Çok dar ekranlar (≤ 340px) -------------------------- */
@media (max-width: 340px) {
  .wrap { padding-inline: var(--sp-4); }

  .btn__label { font-size: 1.1875rem; }

  .dockbar__btn { font-size: 0.9375rem; }

  .dockbar__btn span { letter-spacing: 0; }
}


/* ---- Yazdırma -------------------------------------------- */
@media print {
  .topbar,
  .dockbar,
  .chevron { display: none; }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .sign__plate,
  .card,
  .stat { border: 1px solid #999; background: #fff; }

  .sign__title-lg,
  .sign__title-sm,
  .dest__name,
  .card__title { color: #000; }
}