/*
 * CategoryScroll — "Shop by Category (Horizontal Scroll)" section.
 * Stitch reference: ana-sayfa.html, between the Hero Banner and New Arrivals.
 *
 * Header row: title (left) + prev/next arrows (right). Cards scroll
 * horizontally with the native scrollbar hidden; touch/trackpad swipe is the
 * primary mobile interaction, so arrows are desktop-only (Stitch never shows
 * them being used on the mobile mock, and a touch device doesn't need them).
 *
 * IkasComponentRenderer renders its wrapper with `display: contents`, so each
 * CategoryScrollItem's own root element becomes a direct flex child of
 * `.mh-category-scroll__track` — the fixed 240px card width lives in
 * CategoryScrollItem/styles.css.
 */

/* Skipped (covered by shared chunk CSS): ../../sub-components/CategoryStrip/styles.css */

/* Dikey dolgu: YARIM ritim (--mh-section-gap), iki yonde de.
 *
 * Onceki hali `padding: 0` idi — "ustteki bolumun alt dolgusuna guven"
 * yaklasimi. Bosluk iki kere sayilmiyordu ama SIRAYA bagimliydi: bu
 * bolumun ALTINA gelen bolum hicbir sey almiyordu. Ana sayfada altinda
 * tam kanama CategoryImages banner'i var ve aradaki bosluk 0.5rem'e
 * dusuyordu. Yarim ritimde her iki komsu da dogru boslugu aliyor ve
 * bolum sayfanin en ustune tasinsa bile header'a yapismiyor.
 * Yatay padding .kombos-container'dan geliyor. */
.cc_t2dowgyg_VWn4byusMp .mh-category-scroll {
  width: 100%;
}

.cc_t2dowgyg_VWn4byusMp .mh-category-scroll__container {
  width: 100%;
  padding-top: var(--mh-section-gap);
  padding-bottom: var(--mh-section-gap);
}

/* Masaustunde ayri bir dikey dolgu YOK — ust bolumun alt dolgusu yetiyor.
 * DIKKAT: buraya yatay padding de VERME. Onceki surumde `4rem 2.5rem 0`
 * vardi ve container'in kendi 1.5rem padding'inin ustune biniyordu; serit
 * urun izgarasindan 40px daha iceride duruyordu. */

/* ===== Mobil: kucuk kartli serit =====
 *
 * Referans ekran goruntusunde ekrana ~4 kart siğiyor; bizde 240px kart
 * 390px'lik telefonda tek basina yerin %60'ini kapliyordu ve bolum
 * gereginden buyuk duruyordu. Kart genisligi viewport'un ~%25'i
 * (referanstaki oran), yazi/rozet/yaricap da ayni oranda kuculuyor.
 *
 * Kurallar bilincli olarak `.mh-category-scroll` altina yaziliyor:
 * ikas her bilesenin CSS'ini `.cc_<id> <secici>` diye sardigi icin bu
 * blok SADECE ana sayfadaki bagimsiz seridi etkiliyor; kategori
 * sayfasindaki `--compact` serit ile CategoryScrollItem'in kendi
 * varsayilanlari oldugu gibi kaliyor.
 */

@media (max-width: 767px) {
  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-cat-strip__title {
    font-size: 20px;
    line-height: 26px;
  }

  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-cat-strip__track {
    gap: 0.5rem;
  }

  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-category-scroll-item {
    flex: 0 0 min(25vw, 120px);
    width: min(25vw, 120px);
    aspect-ratio: 6 / 7;
    border-radius: 8px;   /* TASARIM-DILI: "kategori karesi" */
  }

  /* Kart alcaldi: yazinin okunmasi icin gradyan daha yukari cikmali. */
  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-category-scroll-item__gradient {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0) 75%
    );
  }

  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-category-scroll-item__title {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    font-size: 12px;
    line-height: 15px;
  }

  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-category-scroll-item__badge {
    top: 0.375rem;
    right: 0.375rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-category-scroll-item__badge-top {
    font-size: 8px;
  }

  .cc_t2dowgyg_VWn4byusMp .mh-category-scroll .mh-category-scroll-item__badge-bottom {
    font-size: 10px;
  }
}