/* ==========================================================================
   BİLEŞEN — KATEGORİ RAYI
   Beyaz kart içinde yatay kaydırmalı kategori döşemeleri. Ana sayfa ve menü
   sayfasında ortak kullanılır; aktif kategori kırmızı çerçeveyle işaretlenir.
   ========================================================================== */

.mu-kat-bolum { background: var(--zemin); padding-block: 0 var(--sp-5); }
.mu-kat-ray {
  display: flex;
  gap: 4px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--sh-1);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mu-kat-ray::-webkit-scrollbar { display: none; }

.mu-kat {
  flex: 1 0 auto;
  min-width: 104px;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 10px 11px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color var(--t-2), background var(--t-2), transform var(--t-2) var(--e-cik);
}
.mu-kat:hover { background: var(--yuzey-2); transform: translateY(-2px); }
.mu-kat.is-aktif, .mu-kat[aria-current="page"] {
  border-color: var(--kirmizi-500);
  background: var(--kirmizi-sis);
}
.mu-kat__ikon { width: 46px; height: 46px; display: block; }
.mu-kat__ikon img { width: 100%; height: 100%; }
.mu-kat__ad { font-size: var(--fs-sm); font-weight: 700; color: var(--metin); line-height: 1.25; }
.mu-kat.is-aktif .mu-kat__ad { color: var(--kirmizi-500); }
.mu-kat__sayi { font-size: var(--fs-micro); font-weight: 700; color: var(--metin-3); letter-spacing: .04em; }

/* Ray taşarken kenarlarda yumuşak kesim ipucu */
@media (max-width: 1080px) {
  .mu-kat-ray {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}