@import url("/assets/css/base/tokens.css");

/* ===============================
   REFERANSLAR (hero üzerinde, şeffaf)
   =============================== */
#referanslar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 0;
  background: transparent;
  z-index: 3;
  overflow: hidden;
}
#referanslar .slider,
#referanslar .slide-track,
#referanslar .slide {
  background: transparent;
}

#referanslar .slider {
  height: var(--h);
  width: 100%;
  position: relative;
  overflow: hidden;
}
#referanslar .slide-track {
  display: flex;
  width: calc(var(--w) * var(--n) * 3);
  animation: rf-scroll var(--t) linear infinite;
}
#referanslar .slide {
  flex: 0 0 var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
}
#referanslar .slide img,
#referanslar .slide a img {
  max-width: calc(var(--w) - 24px);
  max-height: calc(var(--h) - 15px);
  object-fit: contain;
  filter: none;
  -webkit-filter: none;
  transition: transform 0.25s;
}
#referanslar .slide:hover img,
#referanslar .slide a:hover img {
  filter: none;
  -webkit-filter: none;
  transform: scale(1.04);
}
@keyframes rf-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--w) * var(--n)));
  }
}