/* ==========================================================================
   Tutsy ID — Running Text Marquee (sticky, gradient colorful, seamless loop)
   --------------------------------------------------------------------------
   • Bar tipis horizontal sticky di paling atas halaman (top: 0).
   • z-index 10000 (di atas konten; widget WA kanan-bawah z 9990 tidak tabrakan).
   • Element: #tutsy-marquee, class prefix tutsy-marquee-*.
   • Konten diulang 2x → loop seamless translateX(0 → -50%).
   • Hormati prefers-reduced-motion: animasi dimatikan (bar tetap tampil statis).
   ========================================================================== */

/* ---- Bar marquee: sticky, penuh, gradient colorful yang bergeser halus ---- */
.tutsy-marquee {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;          /* tidak menghalangi klik pada konten di bawahnya */
  background: linear-gradient(90deg, #E75480, #8B5CF6, #06B6D4, #F59E0B, #E75480);
  background-size: 300% 100%;
  animation: tutsyMarqueeGradient 4s ease infinite;
}

/* ---- Track: flex nowrap, lebar menyesuaikan isi, digeser -50% ---- */
.tutsy-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: tutsyMarqueeScroll 20s linear infinite;
}

/* ---- Satu segmen konten (diulang 2x). Padding kanan = jarak antar segmen,
        identik di kedua segmen agar loop -50% mulus tanpa lompatan. ---- */
.tutsy-marquee-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 3rem;
}

/* ---- Teks utama: kapital, putih, tebal, letter-spacing, shadow halus ---- */
.tutsy-marquee-text {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 15px;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  padding: 9px 0;
}

/* ---- Separator / highlight: emas supaya kontras di gradient ---- */
.tutsy-marquee-sep {
  color: #FDE68A;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0.6em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ---- Animasi geser gradient (background-size 300%) ---- */
@keyframes tutsyMarqueeGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Animasi scroll seamless: -50% = lebar tepat satu segmen ---- */
@keyframes tutsyMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   RESPONSIF & AKSESIBILITAS
   ========================================================================== */

/* Layar kecil: teks lebih kecil + scroll lebih cepat agar tidak kepanjangan */
@media (max-width: 768px) {
  .tutsy-marquee-text {
    font-size: 12px;
    padding: 7px 0;
  }
  .tutsy-marquee-sep {
    font-size: 12px;
  }
  .tutsy-marquee-track {
    animation-duration: 12s;
  }
}

/* Hormati prefers-reduced-motion: bar tetap tampil, animasi dimatikan */
@media (prefers-reduced-motion: reduce) {
  .tutsy-marquee {
    animation: none;
  }
  .tutsy-marquee-track {
    animation: none;
  }
}