/* BHS-CMS Node kategori carousel kesin 8'li görünüm v1.9.13 */

/* Ana slider ile aynı parent genişliğini kullanır. */
.builder-home-category-carousel[data-home-category-carousel] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 42px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 9. ve sonraki öğeler viewport dışına taşsa bile görünmez. */
.builder-home-category-carousel[data-home-category-carousel]
  .builder-home-category-carousel-viewport {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.builder-home-category-carousel[data-home-category-carousel]
  .builder-home-category-carousel-track[data-home-category-track] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 4px 0 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.builder-home-category-carousel[data-home-category-carousel]
  .builder-home-category-carousel-track[data-home-category-track]::-webkit-scrollbar {
  display: none !important;
}

/* Masaüstünde viewport içine tam 8 kategori sığar. */
@media (min-width: 901px) {
  .builder-home-category-carousel[data-home-category-carousel]
    .builder-home-category-carousel-item {
    flex: 0 0 calc((100% - 168px) / 8) !important;
    width: calc((100% - 168px) / 8) !important;
    min-width: calc((100% - 168px) / 8) !important;
    max-width: calc((100% - 168px) / 8) !important;
    box-sizing: border-box !important;
  }

  .builder-home-category-carousel[data-home-category-carousel]
    .builder-home-category-carousel-image {
    width: min(100px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}

/* Oklar dışarı taşmadan carousel içinde görünür. */
.builder-home-category-carousel[data-home-category-carousel]
  .builder-home-category-carousel-arrow {
  z-index: 8 !important;
  display: grid !important;
  visibility: visible !important;
}

.builder-home-category-carousel[data-home-category-carousel]
  .builder-home-category-carousel-arrow.prev {
  left: 2px !important;
}

.builder-home-category-carousel[data-home-category-carousel]
  .builder-home-category-carousel-arrow.next {
  right: 2px !important;
}

@media (max-width: 900px) {
  .builder-home-category-carousel[data-home-category-carousel] {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  .builder-home-category-carousel[data-home-category-carousel]
    .builder-home-category-carousel-track[data-home-category-track] {
    gap: 16px !important;
  }

  .builder-home-category-carousel[data-home-category-carousel]
    .builder-home-category-carousel-item {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
}

@media (max-width: 560px) {
  .builder-home-category-carousel[data-home-category-carousel] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .builder-home-category-carousel[data-home-category-carousel]
    .builder-home-category-carousel-track[data-home-category-track] {
    gap: 12px !important;
  }

  .builder-home-category-carousel[data-home-category-carousel]
    .builder-home-category-carousel-item {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }
}