/* ============================================
   KLIJENTI BLOK
   Stranica: index.html
   ============================================ */

.klijenti {
  background: var(--color-background-alt);
  padding: 56px 0;
  overflow: hidden;
}

.klijenti__label {
  text-align: center;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaaaaa;
  margin-bottom: 36px;
  font-family: var(--font-body);
}

/* ── Animirani scroll track ── */
.klijenti__track-wrap {
  position: relative;
  overflow: hidden;
}

/* Fade efekt na ivicama */
.klijenti__track-wrap::before,
.klijenti__track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.klijenti__track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-background-alt), transparent);
}
.klijenti__track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-background-alt), transparent);
}

.klijenti__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: klijenti-scroll 22s linear infinite;
}

/* Pauza na hover */
.klijenti__track:hover {
  animation-play-state: paused;
}

/* Svaki set ima razmake između stavki */
.klijenti__set {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px; /* isti razmak između kraja i početka seta */
}

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

.klijenti__item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: #aaaaaa;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  flex-shrink: 0;
  transition: color var(--transition);
}

.klijenti__item svg {
  opacity: 0.45;
  transition: opacity var(--transition);
  flex-shrink: 0;
}

.klijenti__item:hover {
  color: var(--color-text);
}
.klijenti__item:hover svg {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .klijenti { padding: 44px 0; }
  .klijenti__set { gap: 48px; padding-right: 48px; }
  .klijenti__track-wrap::before,
  .klijenti__track-wrap::after { width: 60px; }
}