/*
 * İDOOR — Responsive Kırılım Noktaları (CLAUDE.md Bölüm 9)
 * 320 · 375 · 430 · 768 · 1024 · 1280 · 1440 · 1920px+
 * style.css masaüstü (1280px+) taban alınarak yazıldı; burada kademeli olarak
 * tablet ve mobil için YENİDEN DÜZENLENİR (yalnızca küçültme değil).
 * style.css'ten SONRA yüklenir.
 */

/* ---------- 1024px ve altı: küçük masaüstü / büyük tablet ---------- */
@media (max-width: 1024px) {
  .container {
    padding-inline: var(--space-4);
  }

  .main-nav ul {
    gap: var(--space-4);
  }

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

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

  .heading-xl {
    font-size: var(--fs-3xl);
  }
}

/* ---------- 768px ve altı: tablet ---------- */
@media (max-width: 768px) {
  .header__inner {
    height: 4.25rem;
  }

  .main-nav {
    position: fixed;
    inset: 4.25rem 0 0 0;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--color-border-on-dark);
    padding: var(--space-6) var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav ul {
    flex-direction: column;
    gap: var(--space-5);
  }

  .header__phone span {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero {
    min-height: 70vh;
  }

  .hero__content {
    max-width: 100%;
  }

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

  .hero__ctas .btn {
    justify-content: center;
  }

  .categories-section__grid,
  .premium-section__grid,
  .projects-section__grid,
  .blog-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-section__grid {
    grid-template-columns: 1fr;
  }

  .icon-feature-row {
    justify-content: center;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer__col--brand {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .contact-fab-group {
    left: var(--space-3);
    bottom: var(--space-3);
  }

  [dir="rtl"] .contact-fab-group {
    left: auto;
    right: var(--space-3);
  }

  .product-detail__hero {
    grid-template-columns: 1fr;
  }

  .product-detail__specs th {
    width: 9rem;
  }

  .contact-page__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 430px ve altı: telefon ---------- */
@media (max-width: 430px) {
  .header__inner {
    height: 3.75rem;
  }

  .brand__word {
    font-size: var(--fs-base);
  }

  .lang-switch {
    display: none;
  }

  .heading-xl {
    font-size: var(--fs-2xl);
  }

  .heading-lg {
    font-size: var(--fs-xl);
  }

  .section {
    padding-block: var(--space-7);
  }

  .categories-section__grid,
  .premium-section__grid,
  .projects-section__grid,
  .blog-section__grid {
    grid-template-columns: 1fr;
  }

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

  .contact-fab {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* ---------- 375px ve altı: küçük telefon ---------- */
@media (max-width: 375px) {
  .container {
    padding-inline: var(--space-3);
  }

  .hero__ctas {
    gap: var(--space-2);
  }

  .btn {
    padding: var(--space-2) var(--space-4);
  }
}

/* ---------- 320px: en küçük desteklenen genişlik ---------- */
@media (max-width: 320px) {
  .heading-xl {
    font-size: var(--fs-xl);
  }

  .kicker {
    font-size: var(--fs-xs);
  }
}