/* ==========================================================================
   Balcı teması — katalog sayfaları (kategori / arama)
   Markup: default/kategoridetay.php · arama.php · parcalar/katalog.php
   Yükleme: sayfa.css'ten SONRA (sayfa gövdesinde bir kez, bpbKatalogVarliklar) — ortak bileşenler
   (.bpb-layout, .bpb-sidebar-cats, .bpb-filters, .bpb-toolbar, .bpb-chip, .bpb-pagination, .bpb-table--stack) sayfa.css'te;
   burada yalnız katalog'a özgü parçalar: ürün ızgarası (4 → 3 → 2) + liste görünümü, filtre altlığı, sayaç rozeti,
   boş durum eylemleri, kategori açıklaması, son görüntülenenler.
   Token'lar balci.css :root; kırılımlar 1199 / 991 / 767 / 575.
   ========================================================================== */

/* ---------- 1. Ürün ızgarası ---------- */
.bpb-katalog__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bpb-s5);
  list-style: none; margin: 0; padding: 0;
}
.bpb-katalog__grid > li { min-width: 0; display: flex; }
.bpb-katalog__grid > li > .bpb-product { width: 100%; }

/* Liste görünümü (kategori.js: [data-bpb-view="list"] → .bpb-katalog__grid--list) — kart yatay: görsel sol, bilgi sağ */
/* Çift sınıf: kırılımlardaki .bpb-katalog__grid sütun kurallarından (aynı özgüllük, sonra gelir) üstün olsun */
.bpb-katalog__grid.bpb-katalog__grid--list { grid-template-columns: minmax(0, 1fr); gap: var(--bpb-s3); }
.bpb-katalog__grid--list .bpb-product { flex-direction: row; align-items: stretch; min-height: 152px; }
/* Görsel kutusu statik + taşma serbest → mutlak konumlu etiketler ve düğmeler karta göre yerleşir:
   düğmeler kartın sağ kenarında (dar görselde kırpılmaz), etiketler görselin sol üstünde kalır. */
.bpb-katalog__grid--list .bpb-product__image { position: static; display: flex; flex: 0 0 200px; width: 200px; height: auto; min-height: 200px; padding-top: 0; overflow: visible; }
.bpb-katalog__grid--list .bpb-product__link { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: flex; flex: 1 1 auto; align-items: center; width: 100%; }
.bpb-katalog__grid--list .bpb-product__image img { width: 100%; height: auto; }
.bpb-katalog__grid--list .bpb-product__actions { top: var(--bpb-product-inset); right: var(--bpb-product-inset); }
.bpb-katalog__grid--list .bpb-product__info { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0; padding: var(--bpb-s4) calc(40px + var(--bpb-product-inset) * 2) var(--bpb-s4) var(--bpb-s5); }
.bpb-katalog__grid--list .bpb-product__name { margin: 0 0 var(--bpb-s2); font-size: var(--bpb-fs-lg); }
.bpb-katalog__grid--list .bpb-product .bpb-truncate { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bpb-katalog__grid--list .bpb-product__prices { padding-right: 0; gap: var(--bpb-s3); }
.bpb-katalog__grid--list .bpb-product .bpb-badge { position: static; transform: none; }

/* ---------- 2. Filtre altlığı: masaüstünde de görünür (uygula/temizle); sayfa.css yalnız çekmecede açar ---------- */
.bpb-katalog .bpb-filters__foot { display: flex; }
.bpb-katalog .bpb-filters__foot .bpb-btn { min-width: 0; }
.bpb-katalog .bpb-filter__list a .bpb-ico { flex: 0 0 auto; color: var(--bpb-text-3); }
.bpb-katalog .bpb-sidebar-cats__link .bpb-ico { flex: 0 0 auto; color: var(--bpb-text-3); }
.bpb-katalog .bpb-sidebar-cats__link.is-active .bpb-ico { color: var(--bpb-primary); }

/* ---------- 3. Araç çubuğu ekleri ---------- */
.bpb-katalog .bpb-toolbar__count { white-space: nowrap; }
.bpb-toolbar__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: var(--bpb-fs-xs); font-weight: 600; line-height: 1; color: #fff;
  background: var(--bpb-primary); border-radius: var(--bpb-radius);
}
.bpb-chip__label { color: var(--bpb-text-3); }

/* ---------- 4. Uyarı / boş durum ---------- */
.bpb-katalog__alert { margin-bottom: var(--bpb-s5); }
.bpb-katalog .bpb-empty h3 { margin: 0 0 var(--bpb-s2); }
.bpb-katalog .bpb-empty p { max-width: 520px; margin: 0 auto var(--bpb-s5); }
.bpb-empty__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--bpb-s3); }

/* ---------- 5. Kategori açıklaması / son görüntülenenler ---------- */
.bpb-katalog__desc { margin-top: var(--bpb-s7); }
.bpb-katalog__recent .bpb-list__item--link > a { padding-left: 0; padding-right: 0; }
.bpb-katalog__recent .bpb-list__item--link > a:hover { background: transparent; }
.bpb-katalog__recent .bpb-table__thumb { flex: 0 0 auto; object-fit: contain; }
.bpb-katalog__recent .bpb-list__title { font-weight: 400; line-height: 1.4; }
.bpb-katalog__recent .bpb-list__meta.bpb-price { font-size: var(--bpb-fs-sm); color: var(--bpb-primary); }

/* ---------- 6. Kırılımlar ---------- */
@media (max-width: 1199px) {
  .bpb-katalog__grid { gap: var(--bpb-s4); }
  .bpb-katalog__grid--list .bpb-product__image { flex-basis: 180px; width: 180px; min-height: 180px; }
}
@media (max-width: 991px) {
  .bpb-katalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Çekmecede altlık sayfa.css kuralıyla zaten görünür; kategori listesi yatay çip şeridi olduğundan üst boşluk kalkar */
  .bpb-katalog .bpb-sidebar-cats + .bpb-filters { margin-top: 0; }
}
@media (max-width: 767px) {
  .bpb-katalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpb-katalog__grid--list .bpb-product__image { flex-basis: 140px; width: 140px; min-height: 140px; }
  .bpb-katalog__grid--list .bpb-product__info { padding: var(--bpb-s3) calc(40px + var(--bpb-product-inset) * 2) var(--bpb-s3) var(--bpb-s4); }
}
@media (max-width: 575px) {
  .bpb-katalog__grid { gap: var(--bpb-s3); }
  .bpb-katalog__grid.bpb-katalog__grid--list { gap: var(--bpb-s2); }
  .bpb-katalog__grid--list .bpb-product__image { flex-basis: 120px; width: 120px; min-height: 120px; }
  .bpb-katalog__grid--list .bpb-product__name { font-size: var(--bpb-fs-md); }
  .bpb-empty__actions { flex-direction: column; align-items: stretch; }
  .bpb-empty__actions .bpb-btn { width: 100%; }
}

/* ---------- 7. Hareket / yazdırma ---------- */
@media (prefers-reduced-motion: reduce) {
  .bpb-katalog .bpb-btn, .bpb-katalog .bpb-select, .bpb-katalog .bpb-chip { transition: none; }
}
@media print {
  .bpb-katalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
