/* ==========================================================================
   Tabipler Market — Responsive davranışlar
   Masaüstü düzeni style.css içinde varsayılandır (≥ 1024px).
   Aşağıdaki media query'ler tablet (< 1024px) ve mobil (< 760px) için
   orijinal tasarımdaki sütun mantığını birebir yeniden üretir.
   ========================================================================== */

/* Görünürlük yardımcıları */
.u-mobile { display: none !important; }
.u-desktop { display: flex; }

/* --------------------------------------------------------------------------
   TABLET  (760px – 1023px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hero,
    .story {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .hero { padding-top: 44px; padding-bottom: 48px; }

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

/* --------------------------------------------------------------------------
   MOBİL  (< 760px)
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {

    /* Görünürlük değişimi: masaüstü öğelerini gizle, mobil öğeleri göster */
    .u-desktop { display: none !important; }
    .u-mobile { display: flex !important; }

    /* Header sadeleştirme */
    .header-bar { gap: 12px; }
    .brand__sub { display: none; }
    .brand__name { font-size: 18px; }
    .mobile-search .live-search { width: 100%; }
    .mobile-search .live-search__panel {
        max-height: calc(100vh - 155px);
    }
    .live-search__option {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 9px;
    }
    .live-search__thumb { width: 44px; height: 44px; }

    /* Mobil alt navigasyon görünür; içerik onun altında kalmasın */
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 64px; }

    /* Bölüm boşlukları */
    .section { padding-top: 52px; }
    .section--lg { padding-top: 60px; }
    .newsletter-section { padding-top: 60px; padding-bottom: 60px; }
    .section__title { font-size: 26px; }

    /* Hero */
    .hero__title { font-size: 34px; }
    .hero__lead { font-size: 16px; }

    /* Grid'ler — mobilde 2 sütun */
    .trust__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .cat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .steps { grid-template-columns: 1fr 1fr; gap: 14px; }

    /* Tek sütuna düşenler */
    .seasonal__grid { grid-template-columns: 1fr; }
    .articles { grid-template-columns: 1fr; }
    .producer { grid-template-columns: 1fr; gap: 28px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

    /* Yumuşak dolgu değişimi (storyPad) */
    .story,
    .seasonal,
    .newsletter { padding: 28px 22px; }

    /* Üretici alıntı boyutu */
    .producer__quote { font-size: 20px; }
    .seasonal__title { font-size: 26px; }

    /* Ürün kartı — mobilde daha kompakt */
    .product-card { padding: 10px; gap: 10px; }
    .product-card__name { font-size: 14px; }
    .btn--add { padding: 8px 12px; font-size: 12px; }
    .product-card__foot { flex-wrap: wrap; }

    /* Footer markası tam genişlik */
    .footer-brand { grid-column: 1 / -1; max-width: none; }
}

/* --------------------------------------------------------------------------
   ÇOK DAR EKRAN  (< 400px) — içerik sıkışırsa tek sütun
   -------------------------------------------------------------------------- */
@media (max-width: 399px) {
    .cat-grid,
    .product-grid,
    .steps,
    .trust__grid,
    .footer-grid { grid-template-columns: 1fr; }
    .hero__title { font-size: 30px; }
    .live-search__option { grid-template-columns: 42px minmax(0, 1fr); }
    .live-search__thumb { width: 42px; height: 42px; grid-row: 1 / span 2; }
    .live-search__price { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .live-search__status[data-state="loading"]::before { animation: none; }
}