/* Sticky ticker di bawah halaman */
.ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: 42px;
  background: #0f172a;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.15);
  font: 500 14px/42px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

.ticker__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ticker__track {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  transform: translateX(0);
  /* animation akan di-set via JS */
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0 1.25rem;
  border-right: 1px dashed rgba(255,255,255,.15);
}

.ticker__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #38bdf8; /* sky-400 */
}

/* Fade kiri/kanan */
.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  top: 0;
  width: 48px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.ticker::before { left: 0; background: linear-gradient(to right, #0f172a, transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left, #0f172a, transparent); }

/* State pause saat hover */
.ticker--paused .ticker__track { animation-play-state: paused !important; }

/* Keyframes — jarak akhir akan diisi via var dari JS */
@keyframes ticker-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--ticker-end, -50%)); }
}

/* Pause saat hover/fokus */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

/* Hormati preferensi reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none !important; transform: translateX(0) !important; }
}