/* ===== Slider Arrow =====
 * Renkler --slider-arrow-* değişkenlerinden okunur. Bu bileşen sub-component
 * olduğu için kendi prop'u yok; değişkenleri onu barındıran section kökünde
 * ayarlıyoruz (HeroSlider, ProductSlider, ProductDetail). Böylece her bölüm
 * kendi ok rengini alabiliyor. Değişken yazılmazsa fallback devrede kalır. */
.cc_HPUOT9V5Zm_product_slider .kombos-slider-arrow, .cc_HPUOT9V5Zm_product_detail .kombos-slider-arrow, .cc_HPUOT9V5Zm_hero_slider .kombos-slider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 50%;
  border: 1px solid var(--slider-arrow-border, var(--kombos-gray-200));
  background: var(--slider-arrow-bg, rgba(255, 255, 255, 0.5));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--slider-arrow-icon, var(--kombos-gray-900));
  transition: background 0.2s;
}

.cc_HPUOT9V5Zm_product_slider .kombos-slider-arrow:hover:not(:disabled), .cc_HPUOT9V5Zm_product_detail .kombos-slider-arrow:hover:not(:disabled), .cc_HPUOT9V5Zm_hero_slider .kombos-slider-arrow:hover:not(:disabled) {
  background: var(--slider-arrow-hover-bg, rgba(255, 255, 255, 0.8));
}

.cc_HPUOT9V5Zm_product_slider .kombos-slider-arrow:disabled, .cc_HPUOT9V5Zm_product_detail .kombos-slider-arrow:disabled, .cc_HPUOT9V5Zm_hero_slider .kombos-slider-arrow:disabled {
  cursor: default;
  color: var(--kombos-gray-400);
}