/* ==========================================================================
   MAĞAZA — Kategori kartı, güven şeridi, iskelet satırları (filtre paneli ve çipler common.css'te).
   ========================================================================== */

/* ===== Kategori kartı =================================================== */
.k-cat {
  position: relative; display: block; border-radius: var(--k-radius);
  overflow: hidden; background: var(--k-surface-2); aspect-ratio: 3 / 4;
}
.k-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.k-cat:hover img { transform: scale(1.05); }
.k-cat-body {
  position: absolute; inset: auto 0 0 0; padding: 1.1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 100%); color: #fff;
}
.k-cat-body strong { font-size: 16px; font-weight: 600; display: block; }
.k-cat-body small { opacity: .82; font-size: 12.5px; }

.k-cat-chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .6rem .4rem .8rem;
  border: 1px solid var(--k-line); border-radius: 999px; background: #fff; font-size: 13.5px;
}
.k-cat-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.k-cat-chip:hover { border-color: var(--k-ink); }
.k-cat-wide { aspect-ratio: 16 / 10; }

/* ===== Güven şeridi ===================================================== */
.k-trust { border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); background: var(--k-surface); }
.k-trust-item { display: flex; gap: .85rem; align-items: flex-start; padding: 1.6rem .5rem; }
.k-trust-item i { font-size: 19px; color: var(--k-ink); margin-top: 2px; }
.k-trust-item strong { display: block; font-size: 14px; font-weight: 600; }
.k-trust-item span { font-size: 13px; color: var(--k-muted); }

/* Yüklenirken kart iskeleti (filtre paneli ve çipler ortak katmanda: common.css) */
.k-skeleton-cat { height: 11px; width: 45%; }
.k-skeleton-title { height: 13px; width: 85%; }
.k-skeleton-price { height: 13px; width: 35%; }
