/* ============================================
   MACWAG Türkiye — Responsive Design
   Mobile-first breakpoints
   ============================================ */

/* =====================
   TABLET (max-width: 1024px)
   ===================== */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .hero-section {
    min-height: 80vh;
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

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

  .about-content {
    grid-template-columns: 1fr;
  }

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

/* =====================
   TABLET PORTRAIT (max-width: 768px)
   ===================== */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  /* Menü gerçekte 80px kalıyordu (16px dolgu + 48px logo): --nav-height ile
     uyuşmadığı için sayfa başlıkları menünün 16px altına giriyordu. */
  .navbar {
    padding: var(--space-sm) 0;
  }

  .container {
    padding: 0 var(--space-md);
  }

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

  .hero-section {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero-section h1 {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .page-hero {
    min-height: 200px;
  }

  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stat-number {
    font-size: 2rem;
  }

  /* Tablette 3 sütun: 2:3 dikey görselde 2 sütun kartı gereğinden iri yapıyordu. */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  /* Product Detail */
  .product-detail-image {
    max-height: 400px;
  }

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

  /* Category Cards */
  .category-card {
    min-height: 220px;
  }

  /* Timeline */
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    padding-left: 50px;
  }
}

/* =====================
   MOBILE (max-width: 480px)
   ===================== */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }

  .btn {
    padding: 12px 24px;
    font-size: var(--fs-xs);
    width: 100%;
    justify-content: center;
  }

  .btn-lg {
    padding: 14px 28px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  /* Telefonda 2 sütun: tek sütunda 2:3 görsel neredeyse tüm ekranı kaplıyordu. */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card-body {
    padding: var(--space-md);
  }

  .product-card-title {
    font-size: 1rem;
  }

  /* İki sütunlu ızgarada "DETAYLARI İNCELE" dar karta sığmıyor, kenardan taşıyordu: düğme kart
     genişliğini alır, harf aralığı daralır, gerekirse yazı iki satıra iner. */
  .product-footer .btn {
    width: 100%;
    padding-inline: var(--space-sm);
    letter-spacing: 0.04em;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }

  /* Category Cards stacked */
  .categories-grid {
    grid-template-columns: 1fr;
  }

  .category-card {
    min-height: 180px;
  }

  /* Footer */
  .footer {
    padding: var(--space-2xl) 0 var(--space-md);
  }

  /* Search */
  .search-bar {
    max-width: 100%;
  }

  /* Products top bar */
  .products-top {
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Stat items */
  .stat-item {
    padding: var(--space-md);
  }

  .stat-number {
    font-size: 1.75rem;
  }

  /* Contact info cards */
  .contact-info-card {
    padding: var(--space-lg);
  }

  /* Feature cards */
  .feature-card {
    padding: var(--space-lg);
  }

  /* Back to top */
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }

  /* Mobile menu links */
  .mobile-menu a {
    font-size: 1.5rem;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: var(--fs-xs);
  }

  /* Toast */
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

/* =====================
   LARGE DESKTOP (min-width: 1440px)
   ===================== */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--space-3xl);
  }

  .hero-section h1 {
    font-size: 5rem;
  }
}

/* =====================
   HOVER MEDIA QUERY
   ===================== */
@media (hover: none) {
  .product-card-overlay {
    opacity: 1;
  }

  .product-card:hover {
    transform: none;
  }

  .feature-card:hover {
    transform: none;
  }

  .category-card:hover {
    transform: none;
  }
}

/* =====================
   PRINT STYLES
   ===================== */
@media print {
  .navbar,
  .footer,
  .back-to-top,
  .mobile-menu {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section {
    padding: 1rem 0;
  }
}