/* =========================================================
   MARQUEE - MITRA / JEJARING (SEAMLESS)
   - Full width
   - Loop halus tanpa putus
   - Gambar full (cover)
   ========================================================= */

:root{
  --mq-gutter: clamp(12px, 2vw, 18px);
  --mq-gap: 16px;
  --mq-item-w: 220px;     /* kamu bisa ubah */
  --mq-item-h: 120px;     /* tinggi kartu */
  --mq-radius: 16px;
  --mq-speed: 28s;        /* makin besar makin pelan */
}

/* wrapper */
.aak-marquee{
  width: 100%;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow-x: clip;
}
@supports not (overflow: clip){
  .aak-marquee{ overflow-x: hidden; }
}

.aak-marquee__inner{
  position: relative;
  padding: 14px var(--mq-gutter);
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  contain: paint;
}

/* fade kiri-kanan */
.aak-marquee__inner::before,
.aak-marquee__inner::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 84px;
  z-index: 3;
  pointer-events: none;
}
.aak-marquee__inner::before{
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.aak-marquee__inner::after{
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* track (isi harus DIDUPLIKASI 2x di HTML) */
.aak-marquee__track{
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  width: max-content;

  will-change: transform;
  transform: translate3d(0,0,0);
  animation: mqScroll var(--mq-speed) linear infinite;
}

/* pause saat hover */
.aak-marquee:hover .aak-marquee__track{
  animation-play-state: paused;
}

/* item */
.aak-marquee__item{
  flex: 0 0 auto;
  width: var(--mq-item-w);
  height: var(--mq-item-h);
  border-radius: var(--mq-radius);
  overflow: hidden;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(12, 28, 58, 0.08);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.aak-marquee__item:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 12px 28px rgba(12, 28, 58, 0.12);
}

/* ✅ gambar FULL (cover) */
.aak-marquee__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* dari contain → cover */
  object-position: center;
  filter: grayscale(1) contrast(1.02) opacity(.82);
  transition: filter .18s ease, transform .18s ease;
}

.aak-marquee__item:hover img{
  filter: grayscale(0) contrast(1.06) opacity(1);
  transform: scale(1.02);
}

/* ✅ kunci loop: geser tepat 1/2 track (karena isi 2x) */
@keyframes mqScroll{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}

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

/* responsive */
@media (max-width: 980px){
  :root{
    --mq-item-w: 200px;
    --mq-item-h: 110px;
  }
  .aak-marquee__inner::before,
  .aak-marquee__inner::after{ width: 72px; }
}

@media (max-width: 760px){
  :root{
    --mq-gap: 12px;
    --mq-speed: 24s;
    --mq-item-w: 170px;
    --mq-item-h: 96px;
  }
  .aak-marquee__inner{ padding: 12px var(--mq-gutter); }
  .aak-marquee__inner::before,
  .aak-marquee__inner::after{ width: 58px; }
}

@media (max-width: 420px){
  :root{
    --mq-speed: 22s;
    --mq-item-w: 150px;
    --mq-item-h: 88px;
  }
}