/* public/assets/css/landing/marquee.css */
:root{
  --marquee-duration-1: 28s;
  --marquee-duration-2: 34s;
}

.marquee{
  padding: 14px 0 6px;
  background: #ffffff;
}

/* bingkai agar terlihat rapi */
.marquee__wrap{
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 8%, rgba(255,255,255,.92) 92%, rgba(255,255,255,1) 100%);
}

/* jalur berjalan */
.marquee__track{
  display: flex;
  gap: 14px;
  padding: 12px;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 26s) linear infinite;
  will-change: transform;
}

/* item gambar */
.marquee__item{
  flex: 0 0 auto;
  width: 170px;
  height: 95px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: #f8fafc;
}

.marquee__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* animasi: geser setengah track (karena itemnya dobel) */
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* hover: pause (opsional, enak buat user) */
.marquee:hover .marquee__track{
  animation-play-state: paused;
}

/* aksesibilitas */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* responsive */
@media (max-width: 992px){
  .marquee__item{ width: 150px; height: 86px; }
}

@media (max-width: 576px){
  .marquee__item{ width: 130px; height: 76px; }
}