/* ============================================================
   TextLoop: pita teks berjalan (dipasang di bagian atas footer).
   Skala: pada layar lebar memakai ukuran asli (--tl-font px); makin sempit
   layar, font & tinggi pita mengecil proporsional (minimal 16px).
   ============================================================ */
.text-loop {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--tl-color, var(--orange, #ff6b00));
  color: #fff;
  font-size: min(calc(var(--tl-font, 22) * 1px), max(12px, calc(var(--tl-font, 22) / 1200 * 100vw)));
  font-weight: var(--tl-weight, 800);
  letter-spacing: calc(var(--tl-spacing, 0.0435) * 1em);
  line-height: 1;
  height: calc(var(--tl-band, 2) * 1em);
}

.text-loop--draggable {
  cursor: grab;
  touch-action: pan-y;
}

.text-loop-track {
  display: flex;
  flex: none;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.text-loop-group {
  display: flex;
  flex: none;
}

.text-loop-unit {
  flex: none;
  display: inline-block;
}

/* Di footer: pita menempel di tepi paling atas (absolute), dan konten footer
   digeser turun setinggi pita. Tinggi pita dipublikasikan oleh JS lewat
   --text-loop-h; nilai cadangan di bawah sama dengan ukuran bawaan (30px /
   pita 56px) supaya tidak ada lompatan layout sebelum JS jalan. */
footer > .text-loop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
footer > .text-loop + .container {
  /* !important: style.css memaksa .container { margin: 0 auto !important } */
  margin-top: var(--text-loop-h, calc(2 * min(22px, max(12px, 1.8333vw)))) !important;
}

@media (prefers-reduced-motion: reduce) {
  .text-loop-track { will-change: auto; }
}