/* ===== Klien Kami: marquee ===== */
@keyframes marquee-x {
    0% {
      transform: translateX(0);
    }
    /* Geser sejauh 1/3 lebar total UL, karena kita mereplikasi 2x */
    100% {
      transform: translateX(-50%);
    }
  }
  .marquee {
    width: fit-content;
    white-space: nowrap;
    flex-wrap: nowrap; 
    animation: marquee-x 50s linear infinite;
  }
  @media (hover: hover) and (pointer: fine) {
    .marquee:hover {
      animation-play-state: paused;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee {
      animation: none;
    }
  }
  /* style logo */
  .client-item {
    display: inline-flex;
    align-items: center;
    margin-right: 5rem;
    flex-shrink: 0; 
  }
  .client-logo {
    height: clamp(48px, 6vw, 60px);
    width: auto;
    filter: grayscale(100%);
    opacity: 0.85;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  }
  .client-item:hover .client-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }