/* =====================================================================
   Free Fire di beranda
   1) Pita merah (model sama dengan "Akun Terbaru"): judul kiri, 3 karakter berdiri
      di kanan dan menyembul dari tepi atas pita, lalu panel kartu akun FF yang ready.
   2) Slide Free Fire di carousel atas (.hero-ff).
   Palet sama dengan halaman /freefire: merah, hitam, kuning, putih.
   Karakter 3 lapisan (img/ff/tim-*.webp) masuk bergantian saat pita terlihat.
   ===================================================================== */
.ffp { --m: #e3262b; --h: #18181b; --k: #ffc400; --tepi: 26px; --sembul: 44px;
  position: relative; margin-top: 40px; color: #fff; isolation: isolate; }
@media (min-width: 768px) { .ffp { --tepi: 40px; --sembul: 40px; margin-top: 56px; } }

/* ---------- latar pita (hanya lapisan ini yang dipotong miring, jadi karakter bebas menyembul) ---------- */
.ffp-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 80% 22%, rgba(255, 196, 0, .30) 0, rgba(255, 196, 0, 0) 38%), linear-gradient(200deg, #f03a40 0%, #e3262b 42%, #b9151b 100%);
  clip-path: polygon(0 var(--tepi), calc(54% - var(--tepi)) var(--tepi), 54% 0, 100% 0, 100% calc(100% - var(--tepi)), calc(46% + var(--tepi)) calc(100% - var(--tepi)), 46% 100%, 0 100%); }
/* nuansa medan tempur: grid peta taktis, zona aman yang menyusut, jalur pesawat, airdrop, asap, siluet medan */
.ffp-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 38%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 72% 38%, #000 10%, transparent 75%); }
.ffp-zona { position: absolute; right: -70px; top: 10px; width: 250px; aspect-ratio: 1; }
.ffp-zona b { display: none; }
.ffp-zona i { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .30); animation: ffpPutar 50s linear infinite; }
.ffp-zona i + i { inset: 17%; border: 1.5px solid rgba(255, 196, 0, .55); box-shadow: 0 0 22px rgba(255, 196, 0, .25), inset 0 0 22px rgba(255, 196, 0, .18); animation: ffpZona 7s ease-in-out infinite; }
.ffp-zona b { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffc400; box-shadow: 0 0 0 0 rgba(255, 196, 0, .6); animation: ffpPing 2.4s ease-out infinite; }
.ffp-jalur { position: absolute; left: -10%; top: 22px; width: 120%; height: 0; border-top: 2px dashed rgba(255, 255, 255, .13); transform: rotate(-2.5deg); }
.ffp-pesawat { position: absolute; top: -9px; left: 0; width: 30px; height: 18px; opacity: .55; animation: ffpTerbang 18s linear infinite; }
.ffp-pesawat svg { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
.ffp-drop { position: absolute; left: 41%; top: 0; width: 30px; opacity: 0; animation: ffpJatuh 14s linear 2s infinite; }
.ffp-drop-ayun { display: block; transform-origin: 50% 0; animation: ffpAyun 3s ease-in-out infinite alternate; }
.ffp-drop svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(60, 0, 0, .3)); }
.ffp-asap { position: absolute; bottom: 12%; width: 420px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 230, 220, .16), rgba(255, 230, 220, 0)); filter: blur(6px); animation: ffpAsap 16s ease-in-out infinite alternate; }
.ffp-asap.a { left: -80px; }
.ffp-asap.b { right: 10%; bottom: 4%; width: 520px; animation-duration: 21s; animation-direction: alternate-reverse; }
.ffp-medan { position: absolute; left: 0; bottom: 0; width: 100%; height: 46%; transform: translateX(calc(var(--px, 0) * -10px)); transition: transform .4s ease-out; }
.ffp-medan .jauh { fill: rgba(120, 0, 14, .24); }
.ffp-medan .dekat { fill: rgba(70, 0, 8, .34); }
@media (min-width: 900px) {
  .ffp-zona { right: 5%; top: -4%; width: 470px; }
  .ffp-zona b { display: block; }
  .ffp-jalur { top: 34px; }
  .ffp-drop { left: 45%; width: 38px; }
  .ffp-medan { height: 40%; }
}
.ffp-bara { position: absolute; left: var(--x); bottom: -6px; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: #ffd84d; box-shadow: 0 0 6px 1px rgba(255, 196, 0, .8); animation: ffpBara var(--t) linear var(--d) infinite; }
.ffp-bara:nth-of-type(even) { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, .8); }

.ffp-dalam { position: relative; padding-top: calc(var(--tepi) + 20px); padding-bottom: calc(var(--tepi) + 24px); }
@media (min-width: 768px) { .ffp-dalam { padding-top: calc(var(--tepi) + 28px); padding-bottom: calc(var(--tepi) + 34px); } }

/* ---------- bagian atas: teks kiri, karakter kanan (HP juga landscape) ---------- */
.ffp-kepala { position: relative; }
.ffp-teks { position: relative; z-index: 2; width: 54%; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.ffp-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 'Sora', sans-serif; letter-spacing: .05em; color: var(--h); background: var(--k); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.ffp-chip i { width: 6px; height: 6px; border-radius: 99px; background: var(--m); animation: ffpKedip 1.6s ease-in-out infinite; }
.ffp-judul { margin: 9px 0 0; font: 800 24px/1.08 'Sora', sans-serif; letter-spacing: -.02em; color: #fff; }
.ffp-sub { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.ffp-ig { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; font-weight: 700; color: #fff; text-decoration: none; opacity: .95; }
.ffp-ig svg { width: 15px; height: 15px; flex: none; }
.ffp-ig .ffp-ig-ket { font-weight: 500; opacity: .85; }
.ffp-ig:hover { opacity: 1; text-decoration: underline; }

.ffp-tokoh { container-type: size; position: absolute; z-index: 1; right: -16px; bottom: 0; width: calc(46% + 16px); height: calc(100% + var(--tepi) + 20px + var(--sembul)); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 74%, transparent 99%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 74%, transparent 99%);
  transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -6px), 0); transition: transform .3s ease-out; }
.ffp-panggung { position: absolute; bottom: 0; left: 50%; height: 100%; aspect-ratio: 1674 / 1253; translate: -50% 0; transform-origin: 50% 100%; filter: drop-shadow(0 10px 16px rgba(80, 0, 0, .28)); }
.ffp-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ffp-l-tengah { z-index: 2; transform-origin: 50% 100%; }
.ffp-l-kiri, .ffp-l-kanan { z-index: 1; }
.ffp-kilau { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  -webkit-mask: url(../img/ff/tim-kecil.webp) center / 100% 100% no-repeat; mask: url(../img/ff/tim-kecil.webp) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .45) 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: soft-light; }
/* di HP karakter samping terpotong tepi kotak: dipudarkan supaya tidak terlihat seperti terpotong kasar */
@media (max-width: 899px) {
  .ffp-tokoh { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 72%, transparent 99%), linear-gradient(to right, transparent 0, transparent 5%, #000 30%, #000 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 72%, transparent 99%), linear-gradient(to right, transparent 0, transparent 5%, #000 30%, #000 100%); mask-composite: intersect; }
}

/* animasi karakter hanya jalan setelah pita terlihat (kelas dipasang JS) */
.ffp.ffp-tunggu .ffp-l { opacity: 0; }
.ffp.ffp-main .ffp-l-tengah { animation: ffpTengah .85s cubic-bezier(.34, 1.45, .64, 1) .05s both, ffpDada 5s ease-in-out 1.8s infinite; }
.ffp.ffp-main .ffp-l-kiri { animation: ffpKiri .8s cubic-bezier(.2, .9, .3, 1.1) .4s both; }
.ffp.ffp-main .ffp-l-kanan { animation: ffpKanan .8s cubic-bezier(.2, .9, .3, 1.1) .55s both; }
.ffp.ffp-main .ffp-panggung { animation: ffpNapas 6s ease-in-out 1.6s infinite; }
.ffp.ffp-main .ffp-kilau { animation: ffpKilau 6.5s ease-in-out 1.8s infinite; }

/* ---------- tombol ---------- */
.ffp-aksi { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ffp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: 999px; font: 700 12.5px/1 'Sora', sans-serif; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s; }
.ffp-btn:active { transform: scale(.97); }
.ffp-btn .material-symbols-outlined { font-size: 17px; }
.ffp-btn.putih { background: #fff; color: var(--m); box-shadow: 0 6px 16px rgba(90, 0, 0, .18); }
.ffp-btn.putih:hover { background: #fff5f5; }
.ffp-btn.hitam { background: rgba(24, 24, 27, .88); color: #fff; }
.ffp-btn.hitam:hover { background: var(--h); }
.ffp-btn:focus-visible, .ffp-ig:focus-visible, .ffp-semua:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }

/* ---------- panel akun (sama seperti panel Akun Terbaru) ---------- */
.ffp-panel { position: relative; z-index: 2; margin-top: 16px; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .2);
}
.ffp-panel-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; }
.ffp-panel-kepala h3 { margin: 0; font: 800 14px/1.2 'Sora', sans-serif; color: #fff; display: flex; align-items: center; gap: 7px; }
.ffp-panel-kepala h3::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--k); box-shadow: 0 0 0 4px rgba(255, 196, 0, .25); animation: ffpKedip 1.6s ease-in-out infinite; }
.ffp-angka { display: block; margin: 3px 0 0 15px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.ffp-angka b { color: #fff; font-weight: 800; }
.ffp-semua { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; padding: 7px 8px 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .32); transition: background-color .2s, border-color .2s; }
.ffp-semua .material-symbols-outlined { font-size: 18px; }
.ffp-semua:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.ffp-panel .dot-scroll.bg-outline-variant { background-color: rgba(255, 255, 255, .35); }
.ffp-panel .dot-scroll.bg-primary { background-color: var(--k); }
.ffp-skel { flex: 0 0 auto; width: 9rem; height: 262px; border-radius: 16px; background: linear-gradient(90deg, rgba(255, 255, 255, .16) 25%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .16) 75%); background-size: 200% 100%; animation: ffpSkel 1.4s ease-in-out infinite; }
.ffp-kosong { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; color: #6b6b74; font-size: 12px; line-height: 1.45; }
.ffp-kosong .material-symbols-outlined { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fdecec; color: var(--m); }
.ffp-kosong b { display: block; color: var(--h); font-size: 13px; margin-bottom: 2px; }
.ffp-kosong a { color: var(--m); font-weight: 700; }

@keyframes ffpKedip { 50% { opacity: .35; } }
@keyframes ffpNapas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ffpTengah { 0% { opacity: 0; transform: translateY(46px) scale(.94); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ffpKiri { 0% { opacity: 0; transform: translateX(-46px) rotate(-2deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ffpKanan { 0% { opacity: 0; transform: translateX(46px) rotate(2deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ffpDada { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
@keyframes ffpKilau { 0% { background-position: 140% 0; } 22%, 100% { background-position: -40% 0; } }
@keyframes ffpBara { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: .95; } 70% { opacity: .7; } 100% { transform: translate(var(--g), -240px) scale(.4); opacity: 0; } }
@keyframes ffpPutar { to { transform: rotate(360deg); } }
@keyframes ffpZona { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.82); opacity: .6; } }
@keyframes ffpPing { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .6); } 100% { box-shadow: 0 0 0 16px rgba(255, 196, 0, 0); } }
@keyframes ffpTerbang { from { left: -6%; } to { left: 104%; } }
@keyframes ffpJatuh { 0% { transform: translateY(-90px); opacity: 0; } 8% { opacity: .9; } 70% { opacity: .9; } 85%, 100% { transform: translateY(260px); opacity: 0; } }
@keyframes ffpAyun { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes ffpAsap { from { transform: translateX(0) scale(1); } to { transform: translateX(70px) scale(1.12); } }
@keyframes ffpSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* HP kecil: ketiga karakter harus tampil utuh (dipasang selebar kotak, bukan dipotong) */
@media (max-width: 639px) {
  .ffp-teks { width: 47%; }
  .ffp-tokoh { right: -12px; width: calc(53% + 12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); }
  .ffp-panggung { left: 0; width: 100%; height: auto; translate: none; }
}
@media (max-width: 359px) {
  .ffp-judul { font-size: 21px; }
  .ffp-sub { font-size: 11.5px; }
  .ffp-btn { padding: 10px 10px; font-size: 11.5px; }
}
@media (min-width: 640px) {
  .ffp-teks { min-height: 190px; }
  .ffp-judul { font-size: 32px; }
  .ffp-sub { font-size: 13px; max-width: 40ch; }
  .ffp-aksi { display: flex; flex-wrap: wrap; }
  .ffp-panel { padding: 16px; border-radius: 30px; }
  .ffp-panel-kepala h3 { font-size: 16px; }
  .ffp-semua { font-size: 14px; padding: 9px 10px 9px 18px; }
}
/* desktop: karakter mengisi tinggi teks + tombol, lebih besar dan menyembul dari tepi pita */
@media (min-width: 768px) { .ffp-skel { width: 12rem; height: 330px; } }
@media (min-width: 900px) {
  .ffp { --sembul: 64px; }
  .ffp-kepala { position: static; }
  .ffp-atas { position: relative; }
  .ffp-teks { width: 52%; min-height: 0; }
  .ffp-aksi { width: 52%; }
  .ffp-tokoh { right: 0; width: 48%; height: calc(100% + var(--tepi) + 28px + var(--sembul)); }
  .ffp-panggung { left: auto; right: 0; translate: none; }
  .ffp-judul { margin-top: 12px; font-size: 46px; }
  .ffp-sub { font-size: 15px; margin-top: 10px; }
  .ffp-ig { font-size: 12.5px; margin-top: 12px; }
  .ffp-aksi { margin-top: 18px; }
  .ffp-btn { padding: 13px 20px; font-size: 13.5px; }
  .ffp-panel { margin-top: 26px; }
}

/* ---------- slide Free Fire di carousel atas ---------- */
.hero-ff { background: radial-gradient(circle at 80% 30%, rgba(255, 196, 0, .32) 0, rgba(255, 196, 0, 0) 42%), linear-gradient(135deg, #f03a40 0%, #c3181e 100%); }
.hero-ff::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(240deg, #000 0%, transparent 60%); mask-image: linear-gradient(240deg, #000 0%, transparent 60%); pointer-events: none; }
.hero-ff .hero-ff-teks { padding-right: 46%; }
.hero-ff-badge { background: #ffc400; color: #18181b; }
.hero-ff-btn { color: #e3262b; }
.hero-ff-tokoh { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.hero-ff-tokoh::before { content: ''; position: absolute; right: -14%; top: 10%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hero-ff-tokoh img { position: absolute; bottom: 0; left: 50%; height: 94%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 10px 16px rgba(80, 0, 0, .3)); }
.hero-slide.is-active .hero-ff-tokoh img { animation: ffpSlideNaik .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
@keyframes ffpSlideNaik { from { transform: translateY(24px); } to { transform: none; } }
@media (min-width: 768px) {
  .hero-ff .hero-ff-teks { padding-right: 56px; max-width: 54%; }
  .hero-ff-tokoh { width: 52%; -webkit-mask-image: none; mask-image: none; }
  .hero-ff-tokoh img { left: auto; right: 4%; translate: none; height: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  .ffp .ffp-l, .ffp .ffp-panggung, .ffp .ffp-kilau, .ffp-zona i, .ffp-zona b, .ffp-asap, .ffp-drop-ayun, .ffp-chip i, .ffp-panel-kepala h3::before, .ffp-skel, .hero-ff-tokoh img { animation: none !important; opacity: 1 !important; }
  .ffp-tokoh { transform: none !important; }
  .ffp-bara, .ffp-kilau, .ffp-pesawat, .ffp-drop { display: none; }
}
/* panel tanpa kartu (stok kosong / gagal dimuat): panah & titik disembunyikan */
.ffp-panel.ffp-polos #ffb-prev, .ffp-panel.ffp-polos #ffb-next { display: none; }
.ffp-panel.ffp-polos .ffp-panel-kepala { display: none; }

/* karakter selalu utuh: panggung diperkecil kalau kotaknya lebih sempit dari gambar (layar 640–1100px) */
.ffp-panggung { height: auto; width: min(100cqw, 133.6cqh); }

/* ---------- Dropi: maskot peti airdrop (gambar orisinal) yang mendarat di tepi atas pita ---------- */
.ffp { margin-top: 44px; }
@media (min-width: 768px) { .ffp { margin-top: 64px; } }
/* svg 100x150: kaki peti ada di y=146, jadi wadah digeser supaya kaki pas di tepi pita */
.dp-wadah { --dp-w: 70px; position: absolute; z-index: 3; left: 29%; top: calc(var(--tepi) - var(--dp-w) * 1.46); width: var(--dp-w); height: calc(var(--dp-w) * 1.5); }
@media (min-width: 640px) { .dp-wadah { --dp-w: 80px; left: 34%; } }
@media (min-width: 900px) { .dp-wadah { --dp-w: 92px; left: 37%; } }
.dp { position: relative; z-index: 2; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transform-origin: 50% 97%; }
.dp:focus-visible { outline: 2px solid #ffc400; outline-offset: 3px; border-radius: 14px; }
.dp svg { display: block; width: 100%; height: auto; overflow: visible; }
.dp-badan { transform-box: view-box; transform-origin: 50px 146px; }
.dp-parasut { transform-box: view-box; transform-origin: 50px 78px; }
.dp-mata { transform-box: fill-box; transform-origin: 50% 50%; animation: dpKedip 4.8s infinite; }
.dp-lirik { transform-box: view-box; }
.dp-pupil { transition: transform .15s ease-out; }
.dp-alis { transform-box: view-box; transition: transform .25s; }
.dp-mata-senang, .dp-mulut.buka { opacity: 0; }
.dp-mulut { transform-box: fill-box; transform-origin: 50% 50%; }
.dp-tangan { transform-box: fill-box; }
.dp-tangan.kiri { transform-origin: 100% 100%; }
.dp-tangan.kanan { transform-origin: 0 0; }
.dp-lampu { animation: dpLampu 1.4s steps(1) infinite; }
.dp-bayang { position: absolute; left: 50%; bottom: calc(var(--dp-w) * .02); width: 84%; height: calc(var(--dp-w) * .1); margin-left: -42%; border-radius: 50%; background: rgba(0, 0, 0, .22); filter: blur(1.5px); transform-origin: 50% 50%; }
.dp-debu { position: absolute; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #f1f1f3; opacity: 0; pointer-events: none; }
.dp-debu.d1 { left: 4%; } .dp-debu.d2 { left: 44%; width: 9px; height: 9px; } .dp-debu.d3 { right: 4%; }

/* sebelum mendarat: belum terlihat. Saat turun: parasut terbuka & berayun, bayangan membesar mendekati tanah */
.dp-wadah.dp-siap:not(.dp-turun):not(.dp-darat) .dp, .dp-wadah.dp-siap:not(.dp-turun):not(.dp-darat) .dp-bayang { opacity: 0; }
.dp-wadah:not(.dp-siap) .dp-parasut, .dp-wadah.dp-darat .dp-parasut { opacity: 0; transform: translateY(-6px) scale(.3, 0); }
.dp-wadah.dp-turun .dp { animation: dpTurun 1.6s cubic-bezier(.25, .55, .35, 1) both; }
.dp-wadah.dp-turun .dp-bayang { animation: dpBayangTurun 1.6s cubic-bezier(.25, .55, .35, 1) both; }
.dp-wadah.dp-turun:not(.dp-darat) .dp-parasut { animation: dpAyun .8s ease-in-out infinite alternate; }
.dp-wadah.dp-darat .dp-parasut { transition: opacity .35s, transform .45s cubic-bezier(.5, 0, .7, .4); }
.dp-wadah.dp-darat .dp-badan { animation: dpPenyet .55s ease-out, dpNapas 3.2s ease-in-out .7s infinite; }
.dp-wadah.dp-debuan .dp-debu { animation: dpDebu .8s ease-out both; }
.dp-wadah.dp-debuan .dp-debu.d1 { --dx: -16px; } .dp-wadah.dp-debuan .dp-debu.d2 { --dx: 0; animation-delay: .05s; } .dp-wadah.dp-debuan .dp-debu.d3 { --dx: 16px; }

/* gerakan saat diam & interaksi */
.dp-wadah.dp-lihat .dp-lirik { animation: dpLirik 1.6s ease-in-out; }
.dp-wadah.dp-hop .dp { animation: dpHop .7s cubic-bezier(.3, .7, .4, 1); }
.dp-wadah.dp-goyang .dp { animation: dpGoyang .9s ease-in-out; }
.dp-wadah.dp-loncat .dp { animation: dpLoncat .9s cubic-bezier(.3, .7, .4, 1); }
.dp-wadah.dp-putar .dp { animation: dpPutar .9s cubic-bezier(.3, .7, .4, 1); }
.dp-wadah.dp-senang .dp-mata { opacity: 0; }
.dp-wadah.dp-senang .dp-mata-senang { opacity: 1; }
.dp-wadah.dp-bicara .dp-alis { transform: translateY(-2px); }
.dp-wadah.dp-ngomong .dp-mulut.senyum { opacity: 0; }
.dp-wadah.dp-ngomong .dp-mulut.buka { opacity: 1; animation: dpMulut .28s ease-in-out infinite alternate; }
.dp-wadah.dp-bicara .dp-tangan.kiri { animation: dpLambai .45s ease-in-out 4 alternate; }
.dp:hover .dp-tangan.kanan { animation: dpLambai2 .5s ease-in-out 2 alternate; }
.dp-percik { position: absolute; left: 50%; top: 66%; width: 8px; height: 8px; margin: -4px; z-index: 3; pointer-events: none; background: #ffc400;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: dpPercik .8s ease-out forwards; }
.dp-percik:nth-of-type(even) { background: #fff; }

/* gelembung chat */
.dp-gelembung { position: absolute; z-index: 4; left: calc(100% + 6px); bottom: 42%; width: max-content; max-width: min(220px, calc(71vw - var(--dp-w) - 20px)); padding: 9px 12px; border-radius: 16px 16px 16px 5px;
  background: #fff; color: #18181b; box-shadow: 0 10px 26px rgba(24, 24, 27, .18); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.94); transform-origin: 0 100%; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .3s; }
.dp-wadah.dp-bicara .dp-gelembung { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dp-wadah.dp-menu .dp-gelembung { pointer-events: auto; }
.dp-teks { margin: 0; font: 700 11px/1.4 'Sora', sans-serif; }
.dp-x { display: none; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #18181b; color: #fff; font: 700 14px/22px sans-serif; cursor: pointer; }
.dp-wadah.dp-menu .dp-x { display: block; }
.dp-pilihan { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-pilihan:not(:empty) { margin-top: 8px; }
.dp-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 0; background: #fdecec; color: #c8161c; font: 700 10.5px/1 'Sora', sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s; }
.dp-chip:hover { background: #fbd5d5; }
.dp-chip.utama { background: #e3262b; color: #fff; }
.dp-chip.utama:hover { background: #c8161c; }
.dp-chip:focus-visible, .dp-x:focus-visible { outline: 2px solid #ffc400; outline-offset: 2px; }
@media (max-width: 639px) {
  /* di HP menu dibuka melebar di bawah Dropi supaya tidak keluar layar */
  .dp-wadah.dp-menu .dp-gelembung { left: calc(16px - 29vw); bottom: auto; top: calc(100% + 4px); max-width: none; width: calc(100vw - 32px); border-radius: 16px; transform-origin: 30% 0; }
}
@media (min-width: 900px) {
  .dp-gelembung { left: auto; right: calc(100% + 8px); max-width: 260px; padding: 10px 14px; border-radius: 16px 16px 5px 16px; transform-origin: 100% 100%; }
  .dp-teks { font-size: 12px; }
  .dp-chip { font-size: 11.5px; padding: 7px 11px; }
}

@keyframes dpTurun { 0% { opacity: 0; transform: translateY(-190px) rotate(-8deg); } 10% { opacity: 1; } 40% { transform: translateY(-110px) rotate(7deg); } 70% { transform: translateY(-30px) rotate(-4deg); } 88% { transform: translateY(3px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes dpBayangTurun { 0% { opacity: 0; transform: scale(.25); } 100% { opacity: 1; transform: none; } }
@keyframes dpAyun { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes dpPenyet { 0% { transform: scale(1.2, .78); } 45% { transform: scale(.92, 1.08); } 75% { transform: scale(1.04, .97); } 100% { transform: none; } }
@keyframes dpNapas { 0%, 100% { transform: none; } 50% { transform: scale(1.03, .972); } }
@keyframes dpKedip { 0%, 93%, 100% { transform: none; } 95% { transform: scaleY(.08); } }
@keyframes dpLampu { 0%, 55% { fill: #ff3b30; } 56%, 100% { fill: #7a1118; } }
@keyframes dpDebu { 0% { opacity: .9; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), -10px) scale(1.6); } }
@keyframes dpLirik { 0%, 100% { transform: none; } 25%, 40% { transform: translateX(-3px); } 60%, 75% { transform: translateX(3px); } }
@keyframes dpHop { 0%, 100% { transform: none; } 30% { transform: translateY(-12px); } 55% { transform: scale(1.06, .94); } }
@keyframes dpGoyang { 0%, 100% { transform: none; } 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
@keyframes dpLoncat { 0% { transform: none; } 20% { transform: scale(1.1, .88); } 50% { transform: translateY(-28px) scale(.95, 1.06); } 80% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
@keyframes dpPutar { 0% { transform: none; } 50% { transform: translateY(-26px) rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes dpMulut { from { transform: scaleY(.45); } to { transform: scaleY(1.05); } }
@keyframes dpLambai { from { transform: rotate(0); } to { transform: rotate(-30deg); } }
@keyframes dpLambai2 { from { transform: rotate(0); } to { transform: rotate(-24deg); } }
@keyframes dpPercik { 0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .dp, .dp-badan, .dp-mata, .dp-parasut, .dp-tangan, .dp-lampu, .dp-lirik, .dp-mulut, .dp-bayang, .dp-debu, .dp-percik { animation: none !important; }
}