/* PERKASA FAST OTP — Cute Premium Aesthetic Decoration
   Semua ornamen murni dekoratif: pointer-events none, aria-hidden, dan diletakkan di belakang konten
   (isolation + z-index -1) atau di tepi/margin, sehingga tidak menutupi teks atau tombol. */

/* ---------- lapisan latar tetap: pola pastel seamless + ornamen sisi ---------- */
.orn-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orn-layer::before { content: ""; position: absolute; inset: 0; background: url("/assets/svg/patterns/hearts-dots.svg") 0 0 / 64px 64px repeat; opacity: .22; }

.orn {
  display: none; position: absolute; width: var(--w, 72px); opacity: var(--o, .55); pointer-events: none; user-select: none;
  animation: orn-float var(--fd, 9s) ease-in-out var(--fdl, 0s) infinite; will-change: transform;
}
.orn img { display: block; width: 100%; height: auto; transform-origin: 50% 0; animation: orn-swing var(--sd, 6s) ease-in-out infinite; }
.orn.is-spin img { transform-origin: 50% 50%; animation: orn-spin var(--sd, 40s) linear infinite; }
.orn.is-rock img { animation: orn-rock var(--sd, 7s) ease-in-out infinite; }

.orn-tl { top: 96px; left: 10px; }
.orn-tr { top: 150px; right: 14px; }
.orn-tm { top: 30%; right: 20px; }
.orn-ml { top: 42%; left: 6px; }
.orn-mr { top: 60%; right: 6px; }
.orn-ml2 { top: 72%; left: 24px; }
.orn-bl { bottom: 26px; left: 14px; }
.orn-br { bottom: 56px; right: 16px; }

/* layar lebar (gutter >= 110px): semua ornamen sisi tampil di margin kosong */
@media (min-width: 1400px) { .orn { display: block; } }
/* dashboard punya sidebar 264px, jadi ornamen sisi hanya di layar sangat lebar */
@media (max-width: 1599px) { body.app .orn { display: none; } }
/* ponsel/tablet: hanya dua ornamen kecil yang mengintip dari tepi layar, di dalam padding halaman */
@media (max-width: 900px) {
  .orn-tl, .orn-tr { display: block; --w: 40px; --o: .4; }
  .orn-tl { left: -18px; top: 84px; }
  .orn-tr { right: -18px; top: 130px; }
}

/* ---------- hero: pita di margin kiri, blob pastel di belakang ---------- */
.hero { isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; }
.hero::before { display: none; left: -6px; top: 118px; width: 64px; height: 48px; background-image: url("/assets/svg/ornaments/ribbon-bow.svg"); opacity: .6; animation: orn-swing 6s ease-in-out infinite; transform-origin: 50% 0; }
.hero::after { right: -70px; bottom: -70px; width: 280px; height: 280px; background-image: url("/assets/svg/ornaments/blob-a.svg"); opacity: .5; }
@media (min-width: 1400px) { .hero::before { display: block; } }
@media (max-width: 900px) { .hero::after { width: 190px; height: 190px; right: -60px; bottom: -60px; } }

/* ---------- heading/page band ---------- */
.page-band { isolation: isolate; }
.page-band::before, .page-band::after { content: ""; position: absolute; pointer-events: none; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; }
.page-band::before { right: 22%; top: 18px; width: 46px; height: 46px; background-image: url("/assets/svg/ornaments/sparkle-stars.svg"); opacity: .55; animation: orn-float 8s ease-in-out infinite; }
.page-band::after { left: -50px; top: -60px; width: 170px; height: 170px; background-image: url("/assets/svg/ornaments/blob-b.svg"); opacity: .45; }
@media (max-width: 900px) { .page-band::before { width: 34px; height: 34px; right: 12px; top: 10px; } .page-band::after { width: 120px; height: 120px; } }

/* ---------- kartu layanan: cherry di sudut atas, di belakang konten ---------- */
.svc { isolation: isolate; }
.svc::after { content: ""; position: absolute; right: 12px; top: -14px; width: 26px; height: 30px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/cherry.svg") no-repeat center / contain; opacity: .75; animation: orn-rock 7s ease-in-out infinite; transform-origin: 50% 0; }

/* ---------- tombol utama besar: sparkle di sudut (jauh dari teks tombol) ---------- */
.btn-primary.btn-lg { position: relative; }
.btn-primary.btn-lg::after { content: ""; position: absolute; right: -9px; top: -11px; width: 22px; height: 22px; pointer-events: none; background: url("/assets/svg/ornaments/deco-sparkle.svg") no-repeat center / contain; opacity: .9; animation: orn-float 4s ease-in-out infinite; }
@media (max-width: 900px) { .btn-primary.btn-lg::after { width: 16px; height: 16px; right: -6px; top: -8px; } }

/* ---------- footer: hati di kanan atas, kucing di kanan bawah (di belakang teks) ---------- */
.footer::before, .footer::after { content: ""; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.footer::before { right: 18px; top: 4px; width: 56px; height: 56px; background-image: url("/assets/svg/ornaments/floating-hearts.svg"); opacity: .6; animation: orn-float 7s ease-in-out infinite; }
.footer::after { right: 20px; bottom: 58px; width: 54px; height: 54px; background-image: url("/assets/svg/ornaments/cat-sticker.svg"); opacity: .75; animation: orn-rock 8s ease-in-out infinite; transform-origin: 50% 100%; }
@media (max-width: 900px) { .footer::before { width: 40px; height: 40px; } .footer::after { width: 42px; height: 42px; bottom: 64px; } }

/* ---------- navbar & loading skeleton & empty state ---------- */
.nav::after { content: ""; position: absolute; right: 14%; bottom: -14px; width: 46px; height: 28px; pointer-events: none; background: url("/assets/svg/ornaments/sparkle-stars.svg") no-repeat center / contain; opacity: .5; animation: orn-float 9s ease-in-out infinite; }
.skeleton { position: relative; }
.skeleton::after { content: ""; position: absolute; right: 6px; top: -10px; width: 26px; height: 26px; pointer-events: none; background: url("/assets/svg/ornaments/deco-sparkle.svg") no-repeat center / contain; opacity: .8; animation: orn-rock 4s ease-in-out infinite; }
.empty-art { position: relative; }
.empty-art::before { content: ""; position: absolute; left: -8px; bottom: -4px; width: 46px; height: 46px; pointer-events: none; background: url("/assets/svg/ornaments/mini-flower.svg") no-repeat center / contain; opacity: .7; animation: orn-float 7s ease-in-out infinite; }
.empty.card { isolation: isolate; }
.empty.card::before, .empty.card::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; }
.empty.card::before { right: 14px; top: 12px; width: 40px; height: 40px; background-image: url("/assets/svg/ornaments/cute-doodle.svg"); opacity: .55; }
.empty.card::after { left: 14px; bottom: 12px; width: 34px; height: 34px; background-image: url("/assets/svg/ornaments/daisy.svg"); opacity: .7; }

/* ---------- error page ---------- */
.err-card { position: relative; overflow: visible; }
.err-orn { position: absolute; pointer-events: none; opacity: .75; animation: orn-float 8s ease-in-out infinite; }
.err-orn-l { left: -26px; bottom: -18px; width: 70px; height: auto; }
.err-orn-r { right: -22px; top: -22px; width: 64px; height: auto; animation-delay: -3s; }
@media (max-width: 600px) { .err-orn { display: none; } }

/* ---------- halaman beli NOKOS, saldo, detail pesanan, daftar negara ---------- */
.buy-head { position: relative; overflow: hidden; isolation: isolate; }
.buy-head::after { content: ""; position: absolute; right: -10px; bottom: -14px; width: 84px; height: 84px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/mini-flower.svg") no-repeat center / contain; opacity: .45; animation: orn-float 8s ease-in-out infinite; }
.kpi { position: relative; overflow: hidden; isolation: isolate; }
.kpi::after { content: ""; position: absolute; right: -6px; top: -8px; width: 74px; height: 74px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/glossy-pearl.svg") no-repeat center / contain; opacity: .5; animation: orn-float 9s ease-in-out infinite; }
.card.order { position: relative; overflow: hidden; isolation: isolate; }
.card.order::after { content: ""; position: absolute; right: -8px; bottom: -8px; width: 60px; height: 60px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/mini-flower.svg") no-repeat center / contain; opacity: .45; animation: orn-float 9s ease-in-out infinite; }
.search.sm { position: relative; }
.search.sm::after { content: ""; position: absolute; right: -10px; top: -14px; width: 26px; height: 26px; pointer-events: none; background: url("/assets/svg/ornaments/deco-sparkle.svg") no-repeat center / contain; opacity: .6; }

/* ---------- dashboard & profil & beranda ---------- */
.content { position: relative; isolation: isolate; }
.content::before { content: ""; position: absolute; right: 8px; top: 2px; width: 54px; height: 54px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/ribbon-bow.svg") no-repeat center / contain; opacity: .35; }
.content::after { content: ""; position: absolute; right: 14px; bottom: 2px; width: 36px; height: 36px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/glossy-heart.svg") no-repeat center / contain; opacity: .45; }
.sk-phero { position: relative; overflow: hidden; isolation: isolate; }
.sk-phero::after { content: ""; position: absolute; right: 84px; top: 12px; width: 52px; height: 52px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/butterfly.svg") no-repeat center / contain; opacity: .55; animation: orn-float 7s ease-in-out infinite; }
.stats { position: relative; }
.stats::before { content: ""; position: absolute; right: -4px; top: -26px; width: 56px; height: 56px; pointer-events: none; background: url("/assets/svg/ornaments/sparkle-stars.svg") no-repeat center / contain; opacity: .5; }
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::after { content: ""; position: absolute; right: 36%; top: 8px; width: 32px; height: 32px; z-index: -1; pointer-events: none; background: url("/assets/svg/ornaments/floating-hearts.svg") no-repeat center / contain; opacity: .45; animation: orn-float 8s ease-in-out infinite; }
@media (max-width: 900px) { .content::before { width: 36px; height: 36px; } .stats::before { width: 40px; height: 40px; top: -18px; } }

/* ---------- auth: sudut floral + washi tape ---------- */
.auth-card { position: relative; isolation: isolate; }
.auth-card::before, .auth-card::after { content: ""; position: absolute; pointer-events: none; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: contain; }
.auth-card::before { left: 50%; top: 2px; width: 78px; height: 24px; margin-left: -39px; transform: rotate(-3deg); background-image: url("/assets/svg/ornaments/washi-tape.svg"); opacity: .85; }
.auth-card::after { left: 0; bottom: 0; width: 96px; height: 96px; transform: scaleY(-1); background-image: url("/assets/svg/ornaments/floral-corner.svg"); opacity: .5; }
@media (max-width: 600px) { .auth-card::after { width: 70px; height: 70px; } }

/* ---------- loading screen (khusus layout publik): berakhir otomatis lewat CSS, tidak bisa macet ---------- */
.pfo-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; background: radial-gradient(600px 400px at 50% 40%, #FFF0F6, #FFFAFC); animation: pfo-loader-out .4s ease .55s forwards; }
.pfo-loader img { width: 96px; height: 96px; }
.pfo-loader span { font: 700 13px/1 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--deep-rose, #D94F8C); }

@keyframes orn-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes orn-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes orn-rock { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes orn-spin { to { transform: rotate(360deg); } }
@keyframes pfo-loader-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .orn, .orn img, .hero::before, .page-band::before, .svc::after, .btn-primary.btn-lg::after, .footer::before, .footer::after,
  .nav::after, .skeleton::after, .empty-art::before, .err-orn, .buy-head::after, .kpi::after, .card.order::after,
  .sk-phero::after, .cta::after { animation: none !important; }
  .pfo-loader { display: none; }
}
@media print { .orn-layer, .pfo-loader { display: none !important; } }