/* ============================================================
   marquee.css — Testimoni berjalan (1 baris, 8 kartu)
   Dipakai: index.html (section testimoni)

   Struktur HTML:
     .testi > .m-marquee > .m-track > .testi-card (x8,
     diduplikasi x2 = 16 total biar loop mulus tanpa loncat)

   Cara kerja:
     .m-track di-animate translateX(-50%) — karena isinya
     duplikat, track "kepotong tengah" tetap keliatan identik,
     jadi loop-nya gak keliatan jahitannya.

   Edit di sini kalau:
     - Ganti kecepatan: --m-speed di bawah
     - Hover berhenti: udah aktif default
     - prefers-reduced-motion: auto fallback grid statis
   ============================================================ */

.testi{position:relative}

.m-marquee{
  --m-speed:40s;              /* kecepatan 1 putaran penuh */
  --m-gap:18px;
  display:grid;
  overflow:hidden;            /* klip horizontal */
  /* fade kiri-kanan biar gak putus kasar */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.m-track{
  display:flex;
  gap:var(--m-gap);
  width:max-content;
  animation:m-scroll var(--m-speed) linear infinite;
  will-change:transform;
}
.m-track:hover{ animation-play-state:paused }

@keyframes m-scroll{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* kartu dipakai ulang dari home.css (.testi-card) —
   lebarnya dikunci biar ritme marquee konsisten */
.m-track .testi-card{
  width:330px;
  flex:0 0 auto;
  margin:0;
}
.m-track .testi-card .q{ line-height:1 }

/* ---- fallback statis kalau user setel "kurangi gerakan" ---- */
@media (prefers-reduced-motion:reduce){
  .m-marquee{ --m-speed:0s }
  .m-track{ animation:none;width:auto;flex-wrap:wrap }
  .m-track .testi-card{ width:min(330px,100%) }
  .m-track + .m-track{ display:none }
}