/* Seluruh @keyframes yang dipakai template, dikumpulkan jadi satu. */

@keyframes DB5JR5rS {
  to {
    transform: rotate(1turn)
  }
}

@keyframes _SrKw_cP {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px
}
to {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}

@keyframes nh9b15mN {
  0%,
  to {
    stroke: currentColor
  }
}

@keyframes CNSE1egU {
  0%,
  to {
    stroke: #fff
  }
}

@keyframes oFJaYFS9 {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes tFDZvVbE {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes iyARpPD3 {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes Kp7J_DoE {
  to {
    transform: rotate(1turn)
  }
}

@keyframes A7_CYqVJ {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px
}
to {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}

@keyframes _zcZpP1Q {
  0%,
  to {
    stroke: currentColor
  }
}

@keyframes TTK0oVIc {
  0%,
  to {
    stroke: #fff
  }
}

@keyframes cFVx366_ {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes CIYqMosV {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes ZRw5CMl8 {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes gqQFMEPn {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes Lv0cAfQn {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes tqxxwQJ0 {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes LVjJcPro {
  0% {
    transform: translateX(-100%)
  }
to {
  transform: translateX(100%)
}
}

@keyframes kf6sgoqw {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes nyKTtSembakos {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes WKKPMZqe {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes d_uUoZRT {
  to {
    transform: rotate(1turn)
  }
}

@keyframes LdC3g5d4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px
}
to {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}

@keyframes IDCgX1Lp {
  0%,
  to {
    stroke: var(--local-color, var(--color-content-primary))
  }
}

@keyframes Hgf6zKcU {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes MfZhtliK {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes pQqqETvI {
  to {
    opacity: 1;
    visibility: visible
  }
}

@keyframes MHXEm6JE {
  to {
    transform: translate(0)
  }
}

@keyframes s2Zyfokd {
  0% {
    opacity: 0;
    transform: translateX(-100%)
  }
to {
  opacity: 1;
  transform: translateX(0)
}
}

@keyframes ebOGikSu {
  0% {
    opacity: 1;
    transform: translateX(0)
  }
to {
  opacity: 0;
  transform: translateX(-100%)
}
}

@keyframes KoBZmmt7 {
  0% {
    opacity: 0;
    transform: translateY(100%)
  }
to {
  opacity: 1;
  transform: translateY(0)
}
}

@keyframes IiI1H7HJ {
  0% {
    opacity: 1
  }
to {
  opacity: 0
}
}

@keyframes IQiGAIQg {
  1% {
    opacity: 1;
    transform: translateY(-100%)
  }
to {
  opacity: 1;
  transform: translateY(0)
}
}

@keyframes fUPrNGet {
  0%,
  to {
    opacity: 1
  }
50% {
  opacity: .5
}
}

@keyframes YhE0lmXB {
  0%,
  to {
    opacity: .5;
    transform: scale(1)
  }
50% {
  opacity: 1;
  transform: scale(1.2)
}
}

@keyframes X53O0cTP {
  0%,
  to {
    opacity: 1
  }
50% {
  opacity: .5
}
}

@keyframes ds-1cbewnf1 {
  0% {
    transform: rotate(0deg)
  }
to {
  transform: rotate(1turn)
}
}

@keyframes ds-1cbewnf2 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }
50% {
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -35px
}
to {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px
}
}

@keyframes ds-1cbewnf3 {
  to {
    stroke: var(--ds-1cbewnf0, var(--color-content-primary))
  }
}

@keyframes RxH12UOi {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes MIs5GiHz {
  0% {
    opacity: 1
  }
50% {
  opacity: 0
}
to {
opacity: 1
}
}

@keyframes FsLTOiia {
  0% {
    left: -20%;
    right: 100%
  }
to {
  left: 0;
  right: 0
}
}

@keyframes PMPMzBDa {
  0% {
    background: var(--color-border-tertiary);
    left: 50%;
    right: 50%
  }
to {
  background: var(--color-border-primary);
  left: 0;
  right: 0
}
}

/* Animasi masuk modal promo.

   Versi lama hanya scale(0.7) -> 1 dengan opacity: kotak seolah "meletus" dari
   tengah tanpa arah. Diganti gerak naik-halus yang lebih tenang: kotak muncul
   sedikit dari bawah sambil membesar tipis (0.96, bukan 0.7) supaya terasa
   mendekat, bukan melompat. Skala ekstrem juga membuat teks sempat buram.

   translate3d dipakai agar komposisi ditangani GPU dan tidak memicu reflow. */
@keyframes popupShow{
  from{
    opacity:0;
    transform:translate3d(0,16px,0) scale(.96);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

/* Overlay gelap ikut memudar masuk. Sebelumnya latar hitam 70% muncul mendadak
   satu frame penuh, jadi transisinya terasa kasar meski kotaknya beranimasi. */
@keyframes popupOverlayIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Isi kotak naik berurutan (gambar, judul, deskripsi, tombol) dengan jeda kecil.
   Jarak geser sengaja hanya 8px: cukup untuk memberi kesan berurutan, tidak
   cukup untuk terbaca sebagai elemen yang "berpindah tempat". */
@keyframes popupItemIn{
  from{
    opacity:0;
    transform:translate3d(0,8px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

/* Kilau tipis yang menyapu tombol aksi sekali saat modal terbuka, menarik mata
   ke aksi utama tanpa gerak yang mengganggu. */
@keyframes popupCtaSheen{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(220%); }
}