/* Bar promo, berdiri sendiri.
 *
 * Berkas terpisah karena dipakai tiga tempat yang tidak berbagi CSS: halaman studio dan
 * shell utilitas memuat style.css, sedangkan landing page memuat landing.css saja.
 * Menaruhnya di sini menghindari menyalin aturan yang sama ke dua berkas.
 *
 * Semua nama kelas berawalan .vpromo supaya tidak mungkin bentrok dengan aturan mana pun
 * di style.css maupun landing.css.
 */

.vpromo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px 44px 9px 14px;   /* ruang kanan untuk tombol tutup */
  position: relative;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(255, 42, 135, .16), rgba(255, 138, 61, .14) 55%, rgba(196, 255, 61, .10));
  border-bottom: 1px solid rgba(255, 138, 61, .38);
  color: #fff;
  font: 600 13px/1.35 'Space Grotesk', system-ui, -apple-system, sans-serif;
  text-align: center;
}

.vpromo-text { min-width: 0; }
.vpromo-text strong { color: #ffd24a; font-weight: 800; }

/* Angka hitung mundur dibedakan supaya kebaca sekilas tanpa membaca kalimatnya. */
.vpromo-count {
  display: inline-block;
  min-width: 9.5ch;             /* lebar tetap: teks tidak bergetar tiap detik berganti */
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 210, 74, .45);
  color: #ffd24a;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .02em;
}

.vpromo-cta {
  color: #c4ff3d;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.vpromo-cta:hover { text-decoration: underline; }

.vpromo-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
}
.vpromo-x:hover { color: #fff; background: rgba(255, 255, 255, .10); }

/* Layar sempit: kalimat dipendekkan lewat pembungkus, bukan dikecilkan sampai tak terbaca.
   Bagian .vpromo-long disembunyikan supaya inti pesan dan hitungannya tetap muat satu baris. */
@media (max-width: 640px) {
  .vpromo {
    padding: 8px 38px 8px 10px;
    font-size: 11.5px;
    gap: 7px;
    flex-wrap: wrap;
    row-gap: 3px;
  }
  .vpromo-long { display: none; }
  .vpromo-count { min-width: 8.5ch; padding: 1px 6px; }
}

@media (pointer: coarse) {
  .vpromo-x { width: 44px; height: 44px; }   /* target sentuh layak jari */
}


/* Penanda "BARU" untuk pengumuman fitur, dibedakan dari promo yang oranye. */
.ann-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(196, 255, 61, .16); color: #c4ff3d;
  font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.ann-tag .ann-ico { flex: none; }
.vpromo-sep { color: rgba(255,255,255,.32); }
/* Kalimat pendek hanya untuk layar sempit, pasangan dari .vpromo-long. */
.vpromo-shortonly { display: none; }
@media (max-width: 640px) { .vpromo-shortonly { display: inline; } }

/* Bar promo di dalam bar pengumuman lama (halaman studio).
   Animasi marquee dimatikan: hitung mundur harus DIAM supaya kebaca. Track aslinya
   width:max-content untuk kebutuhan menggulir; di sini dikembalikan ke lebar normal
   supaya isinya rata tengah dan tidak terpotong tombol tutup. */
/* Animasi marquee DIBIARKAN hidup (aturan aslinya di style.css). Isinya digandakan dua
   kali di template, syarat mutlak supaya translateX(-50%) menyambung tanpa berkedip.
   Hitung mundur tetap benar karena promo.js memperbarui SEMUA salinan, bukan yang pertama. */
.aff-mbar-track.vpromo-mtrack,
.aff-ticker-track.vpromo-dtrack {
  gap: 22px;
}
.vpromo-mlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .aff-mbar .vpromo-count { min-width: 8ch; padding: 1px 5px; font-size: 11px; }
  .vpromo-mlink { gap: 4px; font-size: 11px; }
}