/* ==========================================================================
   Responsive — tablet 960px / mobil 720px / kis mobil 480px
   ========================================================================== */

/* ---- Tablet: max-width 960px ---- */
@media (max-width: 960px) {
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex;
    position: absolute;
    top: 70px;
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-mobile-menu);
    box-shadow: var(--sh-card);
  }

  .nav-links.open > a {
    text-align: left;
    justify-content: flex-start;
    padding: 12px 14px;
    border-radius: var(--r-menu-btn);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .two-col {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .floating-note {
    position: static;
    margin: 16px 0 0;
  }

  .nav-links > a {
    font-size: 14.08px;
  }

  .testimonial-slide {
    flex-basis: 50%;
  }

  .ask-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Mobil: max-width 720px ---- */
@media (max-width: 720px) {
  .site-header__logo {
    height: 36px;
  }

  .site-footer__logo {
    height: 40px;
  }

  .stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .pad-sm,
  .shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-card {
    border-radius: 26px;
    padding: 22px;
  }

  .service-grid {
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  }

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

  .testimonial-slide {
    flex-basis: 100%;
  }

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

/* ---- Kis mobil: max-width 480px ---- */
@media (max-width: 480px) {
  .trust-row {
    gap: 10px;
  }

  .mini-goal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}