/* ============================================================
   Prime Food - Responsive CSS (Mobile-First)
   ============================================================ */

/* ─── Tablet: max 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {
  .topbar__notices .topbar__notice:nth-child(3) { display: none; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-main__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col--brand { grid-column: 1 / -1; }
}

/* ─── Tablet: max 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --header-h: 60px; }

  /* Topbar */
  .topbar { padding: 0 var(--sp-md); }
  .topbar__notices { display: none; }
  .topbar__contacts { gap: var(--sp-sm); font-size: 11px; }

  /* Header */
  .site-header__inner { padding: 8px var(--sp-md); }
  .site-logo-img { width: var(--logo-w-mob, 110px) !important; }
  .site-nav {
    position: fixed; top: 0; right: -100%; bottom: 0;
    width: 280px; background: var(--c-bg); z-index: 495;
    flex-direction: column; align-items: flex-start;
    padding: 80px var(--sp-xl) var(--sp-xl);
    box-shadow: var(--shadow-lg); transition: right var(--tr-normal);
    gap: var(--sp-xs);
  }
  .site-nav.open { right: 0; }
  .site-nav__link { width: 100%; padding: 12px 16px; font-size: 15px; border-radius: var(--r-sm); }
  .hamburger { display: flex; }
  .mobile-nav-overlay { display: block; }

  /* Hero */
  .hero { height: 480px; }
  .hero-content { right: 5%; left: 5%; max-width: 100%; }
  .hero-title { font-size: 30px; }
  .hero-subtitle { font-size: 13px; }
  .hero-nav-btn { display: none; }
  /* Mobilde normal gradient de tam kaplar */
  .hero-gradient {
    background: linear-gradient(to top, rgba(13,43,9,.92) 0%, rgba(13,43,9,.55) 50%, rgba(13,43,9,.2) 100%);
  }

  /* About */
  .about-strip { padding: var(--sp-2xl) var(--sp-md) var(--sp-xl); }
  .section-title { font-size: 28px; }

  /* Stats */
  .stats-row { flex-wrap: wrap; }
  .stat-item { min-width: 50%; border-right: none; border-bottom: 1px solid var(--c-border); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--c-border); }

  /* Categories */
  .categories-section { padding: var(--sp-2xl) var(--sp-md); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { height: 200px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }

  /* Showcase */
  .showcase { height: 200px; }
  .showcase-divider { display: none; }
  .showcase-item:not(:first-child) { display: none; }

  /* Products */
  .products-section { padding: var(--sp-2xl) var(--sp-md); }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tab-bar { overflow-x: auto; width: 100%; }

  /* Contact */
  .contact-section { grid-template-columns: 1fr; }
  .contact-visual { min-height: 0; height: auto; }
  .contact-visual-content { position: relative; padding: 40px 24px; }
  .contact-visual-bg, .contact-visual-overlay { position: absolute; inset: 0; }
  .contact-form-side { padding: var(--sp-2xl) var(--sp-md); }
  .form-row { grid-template-columns: 1fr; }

  /* Trust */
  .trust-bar__grid { grid-template-columns: 1fr; }
  .trust-bar__item { border-right: none; border-bottom: 1px solid var(--c-border); padding: var(--sp-lg) var(--sp-md); }
  .trust-bar__item:last-child { border-bottom: none; }

  /* Footer */
  .footer-main { padding: var(--sp-2xl) 0 0; }
  .footer-main__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .footer-col--brand { grid-column: auto; }
  .footer-bottom .container { flex-direction: column; gap: var(--sp-sm); text-align: center; }
  .footer-bottom__links { flex-wrap: wrap; justify-content: center; }
}

/* ─── Mobile: max 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 var(--sp-md); }
  .hero { height: 420px; }
  .hero-title { font-size: 26px; }
  .products-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .contact-form-side { padding: var(--sp-xl) var(--sp-md); }
  .contact-visual-content { padding: var(--sp-xl); }
  .contact-visual-content h3 { font-size: 24px; }
}