/* =====================================================================
   Pita gelap bersama + para tokoh: Cibi (robot), Gembi (gembok), Koin, Pado (gamepad)
   Dipakai: beranda (Akun Terbaru, Jual & Transaksi Aman, footer) dan footer customer-service.
   Semua animasi hanya transform/opacity, berhenti di luar layar (.anim-off)
   dan mati total untuk prefers-reduced-motion.
   ===================================================================== */

/* ---------- latar: titik halus + cahaya pelan + kilau kecil ---------- */
.pl-latar { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pl-titik { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.17) 1px, transparent 1.6px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 78%); }
.pl-garis { position: absolute; top: 0; right: 0; width: 46%; height: 100%; background: repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 30px);
    -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 60%); mask-image: linear-gradient(225deg, #000 0%, transparent 60%); }
.pl-garis.kiri { right: auto; left: 0; -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 60%); mask-image: linear-gradient(135deg, #000 0%, transparent 60%); }
.pl-cahaya { position: absolute; width: 420px; height: 420px; border-radius: 50%; will-change: transform; }
.pl-cahaya.a { left: -170px; top: -150px; background: radial-gradient(circle, rgba(41,118,199,.55) 0, rgba(41,118,199,0) 66%); animation: plCahayaA 24s ease-in-out infinite alternate; }
.pl-cahaya.b { right: -170px; bottom: -190px; background: radial-gradient(circle, rgba(110,196,255,.20) 0, rgba(110,196,255,0) 64%); animation: plCahayaB 30s ease-in-out infinite alternate; }
@media (min-width: 768px) { .pl-cahaya { width: 620px; height: 620px; } .pl-cahaya.a { left: -220px; top: -240px; } .pl-cahaya.b { right: -220px; bottom: -280px; } }
@keyframes plCahayaA { to { transform: translate(140px, 70px) scale(1.12); } }
@keyframes plCahayaB { to { transform: translate(-160px, -50px) scale(1.08); } }
.pl-kilau { position: absolute; width: 12px; height: 12px; opacity: 0; animation: plKilau 5.5s ease-in-out infinite; }
.pl-kilau svg { display: block; width: 100%; height: 100%; }
@keyframes plKilau { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45%, 55% { opacity: .75; transform: scale(1) rotate(45deg); } }
@media (max-width: 640px) { .pl-kilau.jauh { display: none; } }
/* kanvas interaktif (js/latar-pita.js) menggantikan kilau statis */
.pl-kanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-latar.pakai-kanvas .pl-kilau { display: none; }
.pl-latar.pakai-kanvas .pl-titik { opacity: .45; }

/* ---------- para tokoh ----------
   Satu .mk-wadah membungkus satu pita (pita = .mk-pita, z 1).
   Tokoh "ngintip" (Cibi si robot, Gembi si gembok): kepala .mk di BELAKANG pita (z 0),
   tangan + gelembung di .mk-depan (z 2) di DEPAN pita, jadi tampak berpegangan di tepi.
   Tokoh "berdiri" (Koin, Pado si gamepad): .mk-diri berdiri di atas tepi pita (z 2).
   Posisi lewat variabel: --mk (lebar), --mk-kanan / --mk-kiri, --mk-dasar (garis pijakan, bawaan = --tepi).
   Saat diam, js/maskot.js memutar aksi acak lewat class .aksi-<nama>. */
.mk-wadah { position: relative; --isi-tepi: 16px; }
@media (min-width: 768px) { .mk-wadah { --isi-tepi: calc(max(0px, (100% - 72rem) / 2) + 3rem); } }
.mk-wadah > .mk-pita { position: relative; z-index: 1; }
.mk, .mk-depan, .mk-diri { position: absolute; width: var(--mk, 60px); left: var(--mk-kiri, auto); right: var(--mk-kanan, auto); }
.mk-cibi { --mk-rasio: .958; --mk-intip: .75; }
.mk-gembi { --mk-rasio: 1.042; --mk-intip: .8; }
.mk-koin { --mk-rasio: 1.208; --mk-lirik: .7; }
.mk-pado { --mk-rasio: .844; --mk-lirik: .45; }
.mk, .mk-diri { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.mk { z-index: 0; top: calc(var(--mk-atas, 0px) + var(--tepi) - var(--mk) * var(--mk-rasio) * var(--mk-intip)); height: calc(var(--mk) * var(--mk-rasio)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk-depan { z-index: 2; top: calc(var(--mk-atas, 0px) + var(--tepi)); height: 0; pointer-events: none; }
.mk-diri { z-index: 2; top: calc(var(--mk-atas, 0px) + var(--mk-dasar, var(--tepi)) - var(--mk) * var(--mk-rasio) + 3px); height: calc(var(--mk) * var(--mk-rasio)); cursor: pointer; -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(8px) scale(.5); transform-origin: 50% 100%; transition: opacity .25s .55s, transform .55s .55s cubic-bezier(.34, 1.7, .6, 1); }
.mk-wadah.muncul .mk-diri { opacity: 1; transform: none; }
.mk svg, .mk-diri svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-senang, .mk-merem, .mk-mangap, .mk-gelem, .mk-cinta, .pd-getar, .mk-pusing, .mk-bola-hati { display: none; }

/* ---------- gerak dasar (selalu, pelan) ---------- */
/* muncul: naik dari balik tepi dengan efek kenyal */
.mk-naik { height: 100%; transform-origin: 50% 100%; transform: translateY(calc(var(--mk-intip) * 100% - 12%)); }
.mk-wadah.muncul .mk-naik { transform: none; animation: mkNaik .95s cubic-bezier(.3, 1.2, .5, 1) both; }
.mk-wadah.muncul.siap .mk-naik { animation: none; }
@keyframes mkNaik { 0% { transform: translateY(calc(var(--mk-intip) * 100% - 12%)) scale(1, 1); } 50% { transform: translateY(-7%) scale(.9, 1.12); } 72% { transform: translateY(0) scale(1.08, .92); } 88% { transform: scale(.98, 1.02); } 100% { transform: none; } }
.mk-gerak { height: 100%; transform-origin: 50% 100%; }
.mk-wadah.muncul .mk-gerak { animation: mkAyun 6s ease-in-out 1s infinite; }
.mk-wadah.muncul .mk-gembi .mk-gerak { animation-duration: 7.2s; animation-delay: 2s; }
@keyframes mkAyun { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-5deg) translateY(-2px); } 65% { transform: rotate(4deg) translateY(1px); } }
.mk-loncat, .mk-putar { height: 100%; transform-origin: 50% 100%; }
.mk-putar { transform-origin: 50% 50%; }
.mk-wadah.muncul .mk-diri svg { transform-origin: 50% 100%; animation: mkNafas 3.4s ease-in-out infinite; }
.mk-wadah.muncul .mk-pado svg { animation-duration: 2.9s; }
@keyframes mkNafas { 0%, 100% { transform: none; } 50% { transform: scale(1.03, .97); } }
.mk-bayang { position: absolute; left: 20%; right: 20%; bottom: -3px; height: 6px; border-radius: 50%; background: rgba(8, 14, 34, .35); }

/* mata: kedip ganda, lirik kiri-kanan, ikut kursor (--mx/--my dari js/maskot.js) */
.mk-mata { transform-box: fill-box; transform-origin: center; animation: mkKedip 5.2s infinite; }
.mk-gembi .mk-mata { animation-duration: 6.3s; } .mk-koin .mk-mata { animation-duration: 4.4s; } .mk-pado .mk-mata { animation-duration: 5.8s; animation-delay: -2s; }
@keyframes mkKedip { 0%, 84%, 100% { transform: scaleY(1); } 86% { transform: scaleY(.1); } 88% { transform: scaleY(1); } 90.5% { transform: scaleY(.1); } 93% { transform: scaleY(1); } }
.mk-pupil { transform: translate(calc(var(--mx, 0px) * var(--mk-lirik, 1)), calc(var(--my, 0px) * var(--mk-lirik, 1))); transition: transform .18s ease-out; }
.mk-wadah.muncul:not(.ikut-kursor):not(.tidur) .mk-pupil { animation: mkLirik 9s ease-in-out 1.5s infinite; }
.mk-wadah.muncul:not(.ikut-kursor) .mk-gembi .mk-pupil { animation-delay: 4s; }
@keyframes mkLirik { 0%, 36%, 100% { transform: translate(0, 0); } 40%, 50% { transform: translate(calc(-2.6px * var(--mk-lirik, 1)), calc(.4px * var(--mk-lirik, 1))); } 55%, 65% { transform: translate(calc(2.6px * var(--mk-lirik, 1)), calc(-.6px * var(--mk-lirik, 1))); } 70% { transform: translate(0, 0); } }
.mk-halo { transform-box: fill-box; transform-origin: center; animation: mkHalo 2.6s ease-out infinite; }
@keyframes mkHalo { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.3); opacity: 0; } }
.mk-lampu { animation: mkLampu 2.4s steps(1) infinite; } .mk-lampu.b { animation-delay: -1.2s; }
@keyframes mkLampu { 0% { fill: #8fd3ff; } 50% { fill: #feb300; } }
.mk-tombol { animation: pdTombol 2.8s ease-in-out infinite; }
.mk-tombol.t2 { animation-delay: -.7s; } .mk-tombol.t3 { animation-delay: -1.4s; } .mk-tombol.t4 { animation-delay: -2.1s; }
@keyframes pdTombol { 0%, 60%, 100% { opacity: 1; } 75% { opacity: .35; } }
.mk-antena, .gb-gagang, .kn-lengan, .mk-cinta, .mk-pusing, .kn-bintang { transform-box: fill-box; }
.mk-antena { transform-origin: 50% 100%; }
.gb-gagang { transform-origin: 0% 100%; }
.kn-lengan { transform-origin: 0% 0%; }
.mk-cinta { transform-origin: center; }

/* tangan di tepi pita */
.mk-tgn { position: absolute; top: -9px; width: 26%; opacity: 0; transform: translateY(8px); transform-origin: 50% 100%; transition: opacity .3s .4s, transform .45s .35s cubic-bezier(.34, 1.56, .64, 1); }
.mk-tgn.kiri { left: 6%; } .mk-tgn.kanan { right: 6%; }
.mk-gembi .mk-tgn { width: 24%; } .mk-gembi .mk-tgn.kiri { left: 9%; } .mk-gembi .mk-tgn.kanan { right: 9%; }
.mk-tgn svg { display: block; width: 100%; height: auto; }
.mk-wadah.muncul .mk-tgn { opacity: 1; transform: none; }

/* ---------- aksi saat diam (dipilih acak) + "sapa" tiap kali gelembung muncul ---------- */
/* sapa: tangan melambai, mata tersenyum */
.aksi-sapa .mk-mata { display: none; } .aksi-sapa .mk-senang { display: inline; }
.mk-depan.aksi-sapa .mk-tgn.kanan { animation: mkSapa 1.7s ease-in-out; }
/* gelembung di kanan: yang melambai tangan kiri supaya tidak menutupi gelembung */
.mk-depan.gelembung-kanan.aksi-sapa .mk-tgn.kanan { animation: none; }
.mk-depan.gelembung-kanan.aksi-sapa .mk-tgn.kiri { animation: mkSapaKiri 1.7s ease-in-out; }
@keyframes mkSapaKiri { 0%, 100% { transform: none; } 14%, 30%, 46%, 62% { transform: translate(calc(var(--mk) * -.2), calc(var(--mk) * -.32)) rotate(26deg); } 22%, 38%, 54%, 70% { transform: translate(calc(var(--mk) * -.2), calc(var(--mk) * -.32)) rotate(-18deg); } 84% { transform: none; } }
@keyframes mkSapa { 0%, 100% { transform: none; } 14%, 30%, 46%, 62% { transform: translate(calc(var(--mk) * .2), calc(var(--mk) * -.32)) rotate(-26deg); } 22%, 38%, 54%, 70% { transform: translate(calc(var(--mk) * .2), calc(var(--mk) * -.32)) rotate(18deg); } 84% { transform: none; } }
.mk-koin.aksi-sapa .kn-lengan { animation: knSapa 1.6s ease-in-out; }
@keyframes knSapa { 0%, 100% { transform: none; } 15%, 39%, 63% { transform: rotate(-158deg); } 27%, 51%, 75% { transform: rotate(-118deg); } 88% { transform: none; } }

/* ngumpet: menunduk ke balik tepi, cuma mata yang ngintip, lalu "cilukba" */
.mk-wadah.siap .mk.aksi-ngumpet .mk-naik { animation: mkNgumpet 1.9s cubic-bezier(.4, 0, .3, 1); }
@keyframes mkNgumpet { 0%, 100% { transform: none; } 22% { transform: translateY(22%) scale(1.04, .96); } 60% { transform: translateY(22%); } 74% { transform: translateY(-10%) scale(.92, 1.1); } 87% { transform: scale(1.05, .95); } }
/* tengok: menoleh kiri-kanan */
.mk-wadah.siap .mk.aksi-tengok .mk-gerak, .mk-wadah.siap .mk-diri.aksi-tengok .mk-putar { animation: mkTengok 2.2s ease-in-out; }
.mk-wadah.muncul.siap .aksi-tengok .mk-pupil { animation: mkTengokMata 2.2s ease-in-out !important; }
@keyframes mkTengok { 0%, 100% { transform: none; } 20%, 42% { transform: rotate(-9deg) translateX(-2px); } 58%, 80% { transform: rotate(9deg) translateX(2px); } }
@keyframes mkTengokMata { 0%, 100% { transform: none; } 20%, 42% { transform: translateX(calc(-3px * var(--mk-lirik, 1))); } 58%, 80% { transform: translateX(calc(3px * var(--mk-lirik, 1))); } }
/* loncat (tokoh ngintip): dua lompatan kecil */
.mk-wadah.siap .mk.aksi-loncat .mk-gerak { animation: mkHop2 .9s ease-in-out; }
@keyframes mkHop2 { 0%, 100% { transform: none; } 20% { transform: translateY(-14%) scale(.95, 1.06); } 40% { transform: scale(1.06, .94); } 60% { transform: translateY(-10%) scale(.97, 1.04); } 80% { transform: scale(1.03, .97); } }
/* goyang: geleng-geleng gemas */
.mk-wadah.siap .mk.aksi-goyang .mk-gerak { animation: mkGoyang 1.2s ease-in-out; }
@keyframes mkGoyang { 0%, 100% { transform: none; } 15% { transform: rotate(-9deg); } 35% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(5deg); } }
/* cinta: mata jadi hati berdegup */
.aksi-cinta .mk-mata { display: none; }
.aksi-cinta .mk-cinta { display: inline; animation: mkDegup .45s ease-in-out 4 alternate; }
@keyframes mkDegup { from { transform: scale(.9); } to { transform: scale(1.18); } }
/* tepuk: jari mengetuk-ngetuk tepi pita */
.mk-depan.aksi-tepuk .mk-tgn.kiri { animation: mkTepuk .3s ease-in-out 6 alternate; }
.mk-depan.aksi-tepuk .mk-tgn.kanan { animation: mkTepuk .3s ease-in-out .15s 6 alternate; }
@keyframes mkTepuk { from { transform: none; } to { transform: translateY(-6px) rotate(-7deg); } }
/* Cibi: antena "boing" */
.mk-wadah.siap .mk.aksi-antena .mk-antena { animation: mkBoing 1.3s ease-out; }
.aksi-antena .mk-bola { fill: #ffe066; }
@keyframes mkBoing { 0%, 100% { transform: none; } 14% { transform: scaleY(1.35); } 28% { transform: scaleY(.9) rotate(-20deg); } 44% { transform: rotate(15deg); } 60% { transform: rotate(-9deg); } 76% { transform: rotate(5deg); } }
/* Gembi: gagang klik-klik */
.mk-wadah.siap .mk.aksi-klik .gb-gagang { animation: gbKlik 1s ease-in-out; }
@keyframes gbKlik { 0%, 100% { transform: none; } 20% { transform: translateY(-6px); } 40% { transform: none; } 60% { transform: translateY(-4px); } 80% { transform: none; } }
/* tokoh berdiri: loncat (Koin berputar, Pado salto) */
.mk-wadah.siap .mk-diri.aksi-loncat .mk-loncat, .mk-wadah.muncul .mk-diri.lompat .mk-loncat { animation: mkLoncatSekali .9s cubic-bezier(.3, 1.3, .5, 1); }
.mk-wadah.siap .mk-diri.aksi-loncat .mk-bayang, .mk-wadah.muncul .mk-diri.lompat .mk-bayang { animation: mkBayangSekali .9s ease-in-out; }
.mk-wadah.siap .mk-koin.aksi-loncat .mk-putar, .mk-wadah.muncul .mk-koin.lompat .mk-putar { animation: knPutarSekali .9s ease-in-out; }
.mk-wadah.siap .mk-pado.aksi-loncat .mk-putar, .mk-wadah.muncul .mk-pado.lompat .mk-putar { animation: pdPutarSekali .9s ease-in-out; }
@keyframes mkLoncatSekali { 0% { transform: none; } 18% { transform: scale(1.14, .84); } 50% { transform: translateY(-70%) scale(.92, 1.1); } 80% { transform: scale(1.1, .9); } 100% { transform: none; } }
@keyframes mkBayangSekali { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.5); opacity: .4; } }
@keyframes knPutarSekali { 0%, 22% { transform: scaleX(1); } 34% { transform: scaleX(.08); } 46% { transform: scaleX(-1); } 58% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
@keyframes pdPutarSekali { 0%, 20% { transform: none; } 55% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
/* Koin: kilap menyapu, berputar di tempat, jalan bebek */
.kn-kilap { transform: translateX(0); }
.aksi-kilau .kn-kilap { animation: knKilap 1.1s ease-in-out; }
@keyframes knKilap { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(66px); } }
.mk-wadah.siap .mk-koin.aksi-putar .mk-putar { animation: knPutar2 1.1s ease-in-out; }
@keyframes knPutar2 { 0%, 100% { transform: scaleX(1); } 12% { transform: scaleX(.08); } 25% { transform: scaleX(-1); } 37% { transform: scaleX(.08); } 50% { transform: scaleX(1); } 62% { transform: scaleX(.08); } 75% { transform: scaleX(-1); } 87% { transform: scaleX(.08); } }
.mk-wadah.siap .mk-diri.aksi-goyang .mk-loncat { animation: mkBebek 1.5s ease-in-out; }
@keyframes mkBebek { 0%, 100% { transform: none; } 12%, 37%, 62% { transform: rotate(-10deg) translateX(-2px); } 25%, 50%, 75% { transform: rotate(10deg) translateX(2px); } 88% { transform: none; } }
/* Pado: getar (rumble), joget */
.mk-wadah.siap .mk-pado.aksi-getar .mk-putar { animation: pdGetar .09s linear 11; }
.aksi-getar .pd-getar { display: inline; animation: pdGaris .18s steps(1) infinite; }
.aksi-getar .mk-mata { display: none; } .aksi-getar .mk-senang { display: inline; }
@keyframes pdGetar { 0%, 100% { transform: translate(-1.5px, 0) rotate(-2deg); } 50% { transform: translate(1.5px, 0) rotate(2deg); } }
@keyframes pdGaris { 0% { opacity: 1; } 50% { opacity: .2; } }
.mk-wadah.siap .mk-pado.aksi-dansa .mk-loncat { animation: pdDansa 2s ease-in-out; }
@keyframes pdDansa { 0%, 100% { transform: none; } 12.5%, 62.5% { transform: translate(-3px, -14%) rotate(-10deg); } 25%, 75% { transform: translate(-3px, 0) rotate(-5deg); } 37.5%, 87.5% { transform: translate(3px, -14%) rotate(10deg); } 50% { transform: translate(3px, 0) rotate(5deg); } }
.mk-not { position: absolute; top: -6px; width: 11px; display: none; pointer-events: none; opacity: 0; }
.mk-not svg { display: block; width: 100%; height: auto; }
.mk-not { left: 4%; } .mk-not.dua { left: auto; right: 2%; }
.aksi-dansa .mk-not { display: block; animation: mkNot 1s ease-out 2; } .aksi-dansa .mk-not.dua { animation-delay: .5s; }
@keyframes mkNot { 0% { transform: translate(0, 4px) scale(.5); opacity: 0; } 25% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { transform: translate(6px, -22px) rotate(15deg); opacity: 0; } }

/* ---------- diketuk / diklik: senang, mulut terbuka, lompat, hati beterbangan ---------- */
.mk:hover .mk-mata, .mk-diri:hover .mk-mata, .lompat .mk-mata { display: none; }
.mk:hover .mk-senang, .mk-diri:hover .mk-senang, .lompat .mk-senang { display: inline; }
.lompat .mk-mulut { display: none; } .lompat .mk-mangap { display: inline; }
.mk-wadah .mk.lompat .mk-gerak { animation: mkLompat .65s cubic-bezier(.3, 1.5, .5, 1) !important; }
@keyframes mkLompat { 0% { transform: none; } 35% { transform: translateY(-16%) rotate(-7deg) scale(.95, 1.06); } 70% { transform: scale(1.05, .95); } 100% { transform: none; } }
.mk-wadah .mk-gembi.lompat .gb-gagang { animation: gbBuka 1.1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes gbBuka { 0% { transform: none; } 25%, 70% { transform: translateY(-9px) rotate(-26deg); } 100% { transform: none; } }
.mk-hati { position: absolute; left: 50%; width: 15px; pointer-events: none; z-index: 3; animation: mkHati 1.15s ease-out forwards; }
.mk-hati svg { display: block; width: 100%; height: auto; }
.mk-depan .mk-hati { top: calc(var(--mk) * -.85); } .mk-diri .mk-hati { top: calc(var(--mk) * -.7); }
@keyframes mkHati { 0% { transform: translate(-50%, 6px) scale(.3); opacity: 0; } 18% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx, 0px)), -48px) scale(.8) rotate(var(--rot, 0deg)); opacity: 0; } }

/* ---------- gelembung kata ---------- */
.mk-gelembung { position: absolute; z-index: 3; right: calc(100% + 4px); bottom: calc(var(--mk) * .34); white-space: nowrap; padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: #feb300; color: #1e2a4f; font-size: 11px; font-weight: 800; line-height: 1.2;
    box-shadow: 0 8px 20px -10px rgba(30,42,79,.6); opacity: 0; transform: translateX(calc(var(--gx, 0px) + var(--geser, 0px))) translateY(6px) scale(.85); transform-origin: 100% 100%; transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.mk-diri .mk-gelembung { right: calc(100% - 6px); bottom: 70%; }
.mk-depan.gelembung-kanan .mk-gelembung { right: auto; left: calc(100% + 4px); border-radius: 14px 14px 14px 4px; transform-origin: 0 100%; }
@media (min-width: 768px) { .mk-gelembung { font-size: 12.5px; padding: 8px 14px; } }
.bicara > .mk-gelembung { opacity: 1; transform: translateX(calc(var(--gx, 0px) + var(--geser, 0px))); }
/* gelembung reaksi (tokoh tanpa sapaan): di atas kepala */
.mk-gelembung.reaksi { --gx: -50%; right: auto; left: 50%; bottom: calc(var(--mk) * .78); border-radius: 14px; transform-origin: 50% 100%; }
.mk-diri .mk-gelembung.reaksi { bottom: 104%; }
.bicara > .mk-gelembung.bisa-klik { pointer-events: auto; cursor: pointer; }
.mk-gelembung.bisa-klik::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.mk-wadah.tidur .mk-gelembung { opacity: 0 !important; }

/* ---------- lebih imut: pipi merona, antena jadi hati, bintang Koin, hati Pado ---------- */
.mk-pipi { transform-box: fill-box; transform-origin: center; }
.lompat .mk-pipi, .aksi-cinta .mk-pipi, .aksi-sapa .mk-pipi, .elus .mk-pipi { animation: mkMerona .45s ease-in-out 4 alternate; }
@keyframes mkMerona { from { transform: scale(1); } to { transform: scale(1.35); } }
.lompat .mk-bola, .aksi-cinta .mk-bola, .elus .mk-bola { display: none; }
.lompat .mk-bola-hati, .aksi-cinta .mk-bola-hati, .elus .mk-bola-hati { display: inline; }
.kn-bintang { transform-origin: center; opacity: 0; animation: knBintang 3.4s ease-in-out infinite; }
@keyframes knBintang { 0%, 68%, 100% { transform: scale(.3) rotate(0); opacity: 0; } 80% { transform: scale(1.15) rotate(45deg); opacity: 1; } 92% { transform: scale(.5) rotate(90deg); opacity: .4; } }
.pd-hati { transform-box: fill-box; transform-origin: 50% 0%; animation: pdAyun 2.6s ease-in-out infinite; }
@keyframes pdAyun { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.gb-pita { transform-box: fill-box; transform-origin: 50% 50%; }
.mk-wadah.siap .mk-gembi.aksi-goyang .gb-pita, .mk-gembi.lompat .gb-pita { animation: gbPita .5s ease-in-out 2; }
@keyframes gbPita { 0%, 100% { transform: none; } 50% { transform: rotate(-14deg) scale(1.12); } }

/* hover = kenyal */
.mk-naik { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.mk-wadah.siap .mk:hover .mk-naik { transform: scale(1.05, .95); }
.mk-loncat { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.mk-wadah.siap .mk-diri:hover .mk-loncat { transform: scale(1.08, .92); }

/* elus: dibelai (gosok kursor di desktop, tekan lama di HP) */
.elus .mk-mata, .elus .mk-mulut, .elus .mk-cinta { display: none; }
.elus .mk-senang, .elus .mk-mangap { display: inline; }
.mk-wadah.siap .mk.elus .mk-gerak, .mk-wadah.siap .mk-diri.elus .mk-putar { animation: mkElus .42s ease-in-out infinite alternate !important; }
@keyframes mkElus { from { transform: rotate(-6deg) scale(1.03, .97); } to { transform: rotate(6deg) scale(.97, 1.03); } }

/* pusing: 5x ketuk cepat → mata spiral + bintang mengitari kepala */
.pusing .mk-mata, .pusing .mk-senang, .pusing .mk-cinta, .pusing .mk-mulut { display: none !important; }
.pusing .mk-mangap { display: inline; }
.pusing .mk-pusing { display: inline; transform-origin: center; animation: mkPutarMata .7s linear infinite; }
@keyframes mkPutarMata { to { transform: rotate(360deg); } }
.mk-wadah.siap .mk.pusing .mk-gerak, .mk-wadah.siap .mk-diri.pusing .mk-putar { animation: mkPusing 1.1s ease-in-out 2 !important; }
@keyframes mkPusing { 0%, 100% { transform: none; } 25% { transform: rotate(-11deg) translateX(-3px); } 75% { transform: rotate(11deg) translateX(3px); } }
.mk-orbit { position: absolute; left: 50%; top: 4%; width: 0; height: 0; display: none; pointer-events: none; z-index: 3; }
.mk-diri .mk-orbit { top: -4%; }
.pusing > .mk-orbit { display: block; }
.mk-orbit i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #feb300; box-shadow: 0 0 6px rgba(254,179,0,.7); animation: mkOrbit 1s linear infinite; }
.mk-orbit i:nth-child(2) { animation-delay: -.33s; background: #8fd3ff; box-shadow: 0 0 6px rgba(143,211,255,.8); }
.mk-orbit i:nth-child(3) { animation-delay: -.66s; background: #ff8fa3; box-shadow: 0 0 6px rgba(255,143,163,.8); }
@keyframes mkOrbit {
    0%, 100% { transform: translate(calc(var(--mk) * .38), 0) scale(1); }
    12.5% { transform: translate(calc(var(--mk) * .27), calc(var(--mk) * .07)) scale(1.1); }
    25% { transform: translate(0, calc(var(--mk) * .1)) scale(1.2); }
    37.5% { transform: translate(calc(var(--mk) * -.27), calc(var(--mk) * .07)) scale(1.1); }
    50% { transform: translate(calc(var(--mk) * -.38), 0) scale(1); }
    62.5% { transform: translate(calc(var(--mk) * -.27), calc(var(--mk) * -.07)) scale(.8); }
    75% { transform: translate(0, calc(var(--mk) * -.1)) scale(.65); }
    87.5% { transform: translate(calc(var(--mk) * .27), calc(var(--mk) * -.07)) scale(.8); }
}

/* ---------- tidur: di luar jam admin (dibaca dari titik status footer) ---------- */
.mk-wadah.tidur .mk-mata, .mk-wadah.tidur .mk-senang, .mk-wadah.tidur .mk-mangap, .mk-wadah.tidur .mk-cinta { display: none !important; }
.mk-wadah.tidur .mk-merem { display: inline; }
.mk-wadah.tidur .mk-mulut { display: inline !important; }
.mk-wadah.tidur .mk-halo { display: none; }
.mk-wadah.tidur .mk-bola { fill: #b58f2e; }
.mk-wadah.tidur .mk-lampu { animation: none; fill: #3c4f7c; }
.mk-wadah.tidur.muncul .mk-gerak { animation: mkNapas 4.5s ease-in-out infinite; }
.mk-wadah.tidur.muncul .mk-gembi .mk-gerak { animation-delay: -1.6s; }
.mk-wadah.tidur .mk.lompat .mk-gerak { animation: mkGeliat .7s ease-in-out !important; }
@keyframes mkNapas { 0%, 100% { transform: rotate(5deg) translateY(2px); } 50% { transform: rotate(7deg) translateY(4px) scale(1.02, .98); } }
@keyframes mkGeliat { 0%, 100% { transform: rotate(5deg) translateY(2px); } 30% { transform: rotate(-4deg) translateY(0); } 65% { transform: rotate(9deg) translateY(2px); } }
.mk-wadah.tidur .mk-gelem { display: inline; transform-box: fill-box; transform-origin: 0% 50%; animation: mkGelem 3.2s ease-in-out infinite; }
@keyframes mkGelem { 0% { transform: scale(.4); opacity: .55; } 70% { transform: scale(1.7); opacity: .6; } 74% { transform: scale(1.9); opacity: 0; } 76%, 100% { transform: scale(.4); opacity: 0; } }
.mk-z { position: absolute; display: none; right: -4px; top: 4%; font-size: 13px; font-weight: 800; color: #28376b; opacity: 0; animation: mkZ 3.4s ease-out infinite; pointer-events: none; }
.mk-z.dua { animation-delay: 1.7s; font-size: 10px; }
.mk-wadah.tidur.muncul .mk-z { display: block; }
@keyframes mkZ { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .75; } 100% { transform: translate(14px, -26px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .pl-cahaya, .pl-kilau, .mk-naik, .mk-gerak, .mk-mata, .mk-pupil, .mk-halo, .mk-lampu, .mk-antena, .gb-gagang, .mk-tgn, .mk-z, .mk-loncat, .mk-bayang, .mk-putar, .mk-tombol, .mk-gelem,
    .mk-diri svg, .kn-lengan, .kn-kilap, .mk-cinta, .mk-pusing, .kn-bintang, .mk-pipi, .mk-not, .pd-getar { animation: none !important; }
    .pl-kilau { opacity: .5; }
    .mk-tgn, .mk-gelembung, .mk-diri, .mk-naik, .mk-loncat { transition: none !important; }
    .mk-orbit i, .pd-hati { animation: none !important; }
}

/* ---------- footer berbentuk pita (pengganti gelombang) ---------- */
.ft-wadah { --tepi: 26px; margin-top: 8px; }
@media (min-width: 768px) { .ft-wadah { --tepi: 40px; margin-top: 16px; } }
.ft-cibi { --mk: 60px; --mk-kanan: 76px; }
.ft-gembi { --mk: 52px; --mk-kanan: 18px; }
@media (min-width: 768px) { .ft-cibi { --mk: 92px; --mk-kanan: calc(var(--isi-tepi) + 104px); } .ft-gembi { --mk: 70px; --mk-kanan: calc(var(--isi-tepi) + 20px); } }
.ft.ft-pita { background: linear-gradient(200deg, #123a6b 0%, #1e2a4f 50%, #18213f 100%);
    clip-path: polygon(0 0, 46% 0, calc(46% + var(--tepi)) var(--tepi), 100% var(--tepi), 100% 100%, 0 100%); }
.ft.ft-pita .ft-isi { padding-top: calc(var(--tepi) + 26px); }
@media (min-width: 768px) { .ft.ft-pita .ft-isi { padding-top: calc(var(--tepi) + 34px); } }
/* footer lebih tenang: maskot jadi satu-satunya fokus gerak */
.ft.ft-pita .ft-shimmer { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.ft.ft-pita .ft-logo::after { display: none; }
.ft.ft-pita .ft-top .material-symbols-outlined { animation: none; }