/* ==========================================================================
   Eren Reference Scroll — Sonsuz Kayan Referans Logoları
   ========================================================================== */

.ecc-ref-scroll {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  position: relative;
}

/* Kenar solması */
.ecc-ref-scroll--fade::before,
.ecc-ref-scroll--fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.ecc-ref-scroll--fade::before {
  left: 0;
  background: linear-gradient(to right, #fff, transparent);
}

.ecc-ref-scroll--fade::after {
  right: 0;
  background: linear-gradient(to left, #fff, transparent);
}

/* Track */
.ecc-ref-scroll__track {
  display: flex;
  align-items: center;
  gap: 50px;
  width: max-content;
}

/* Sola kayma */
.ecc-ref-scroll--left .ecc-ref-scroll__track {
  animation: ecc-scroll-left var(--ecc-scroll-speed, 30s) linear infinite;
}

/* Sağa kayma */
.ecc-ref-scroll--right .ecc-ref-scroll__track {
  animation: ecc-scroll-right var(--ecc-scroll-speed, 30s) linear infinite;
}

/* Hover'da dur */
.ecc-ref-scroll--pause-hover:hover .ecc-ref-scroll__track {
  animation-play-state: paused;
}

/* Logo item */
.ecc-ref-scroll__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ecc-ref-scroll__item img {
  height: 50px;
  width: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.3s, filter 0.3s;
}

.ecc-ref-scroll__item:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

/* Animasyonlar */
@keyframes ecc-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes ecc-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive */
@media (max-width: 767px) {
  .ecc-ref-scroll--fade::before,
  .ecc-ref-scroll--fade::after {
    width: 40px;
  }

  .ecc-ref-scroll__item img {
    height: 35px;
  }
}