/* V16 — Kategori / alt kategori / ürün kartları için EŞİT boyutlu, hizalı
 * kart ızgarası.
 *
 * Not: Bu dosya önceki bir sürümde "Masonry" (farklı yükseklikte, boşluksuz
 * şelale) düzeni uyguluyordu. Gerçek sonuç incelendiğinde kartların
 * hizasız/dağınık durması istenmediği için bu yaklaşımdan vazgeçildi.
 * Artık klasik, sıradan bir CSS Grid kullanılıyor: her satırdaki kartlar
 * birbirine eşit yükseklikte; görseller sabit oranlı bir çerçeveyi
 * (object-fit:cover ile) boşluksuz doldurur. JS gerekmiyor.
 */

.catalog-grid,
.catalog-products,
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}
.catalog-products{gap:35px 18px}
.product-grid{gap:42px 20px}

/* Görsel çerçevesi: sabit en-boy oranı — kart alanını tamamen doldurur,
 * kenarlarda boşluk kalmaz. Görselin tamamını kırpılmadan görmek isteyen
 * kullanıcı için ürün detay sayfasındaki büyütme (lightbox) zaten orijinal
 * görseli kırpmadan gösteriyor; burada amaç kartların düzgün, boşluksuz
 * ve birbirine eşit görünmesi. */
.catalog-grid .catalog-card>img,
.catalog-products .catalog-product>img,
.product-grid .product-card>div>img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  height:auto;
  object-fit:cover;
}

/* Kartın kendisi: içerik (görsel + metin) dikeyde eşit dağılsın, buton
 * her kartta aynı hizada (alt kenarda) dursun. */
.catalog-grid .catalog-card,
.catalog-products .catalog-product,
.product-grid .product-card{
  display:flex;
  flex-direction:column;
  margin:0;
}
.catalog-grid .catalog-card>div{flex:1;display:flex;flex-direction:column}
.catalog-grid .catalog-card>div>.btn,
.catalog-products .catalog-product>.btn{margin-top:auto}
.catalog-grid .catalog-card h3,
.catalog-products .catalog-product h3{min-height:52px}

/* Hover: yalnızca gölge + hafif kaldırma — görsel oranını bozmaz */
.catalog-grid .catalog-card,
.catalog-products .catalog-product{transition:box-shadow .25s,transform .25s}
.catalog-grid .catalog-card:hover,
.catalog-products .catalog-product:hover{
  box-shadow:0 26px 60px #3b21102c;
  transform:translateY(-4px);
}
.catalog-grid .catalog-card small{color:var(--wood)}

/* Responsive sütun sayısı — 4 / 3 / 2 / 1 */
@media(max-width:1050px){
  .catalog-grid,.catalog-products,.product-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .catalog-grid,.catalog-products,.product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:430px){
  .catalog-grid,.catalog-products,.product-grid{grid-template-columns:1fr}
}