/* =============================================================================
 * mo.css — Studio Gerak & Katalog (etalase pembeli)
 * -----------------------------------------------------------------------------
 * Berkas STATIS: di-cache peramban & service worker, berversi cap waktu berkas
 * (?v=mtime) sehingga pembaruan langsung terpakai tanpa bersihkan cache.
 *
 * Nilai yang bisa diatur penjual datang dari dua sumber saja:
 *   - variabel CSS di <style id="mo-vars"> (durasi, kurva, warna, ukuran)
 *   - atribut <html data-mo-* data-fs* data-cat-*> (pilihan enum)
 *
 * ATURAN PERFORMA: hanya transform & opacity yang dianimasikan di daftar
 * panjang. filter:blur hanya pada karakter "Sinematik/Mewah" dan hanya selama
 * kemunculan. Tidak ada will-change permanen.
 *
 * ATURAN GAGAL-AMAN: kelas penyembunyi (.mo-rv) dipasang HANYA oleh mo.js.
 * Bila skrip itu tidak jalan, tidak ada satu elemen pun yang tersembunyi.
 * ========================================================================== */

:root {
  --mo-dur: 560ms; --mo-dur-s: 300ms; --mo-ease: cubic-bezier(.22,1,.36,1);
  --mo-dist: 18px; --mo-scale: .985; --mo-rot: 0deg; --mo-blur: 0px; --mo-stagger: 50ms;
  --mo-brand: #10b981; --mo-brand-rgb: 16,185,129; --mo-accent: #10b981;
  --fs-c1: #f43f5e; --fs-c2: #ec4899; --fs-ink: #fff; --fs-card-w: 150px;
  --mo-search-h: 36px; --mo-search-fs: 13.5px;
  --mo-kf: mo-rv-rise;
  --mo-spring: cubic-bezier(.34,1.56,.64,1);
}

/* -----------------------------------------------------------------------------
 * 1. KEMUNCULAN (reveal)
 * -------------------------------------------------------------------------- */
html[data-mo-rv="fade"]  { --mo-kf: mo-rv-fade; }
html[data-mo-rv="rise"]  { --mo-kf: mo-rv-rise; }
html[data-mo-rv="zoom"]  { --mo-kf: mo-rv-zoom; }
html[data-mo-rv="pop"]   { --mo-kf: mo-rv-pop; }
html[data-mo-rv="slide"] { --mo-kf: mo-rv-slide; }
html[data-mo-rv="flip"]  { --mo-kf: mo-rv-flip; }
html[data-mo-rv="blur"]  { --mo-kf: mo-rv-blur; }

@keyframes mo-rv-rise  { from { opacity: 0; transform: translate3d(0, var(--mo-dist), 0) scale(var(--mo-scale)); } to { opacity: 1; transform: none; } }
@keyframes mo-rv-fade  { from { opacity: 0; transform: translate3d(0, calc(var(--mo-dist) * .4), 0); } to { opacity: 1; transform: none; } }
@keyframes mo-rv-zoom  { from { opacity: 0; transform: scale(var(--mo-scale)) rotate(var(--mo-rot)); } to { opacity: 1; transform: none; } }
@keyframes mo-rv-pop   { 0% { opacity: 0; transform: translate3d(0, var(--mo-dist), 0) scale(var(--mo-scale)) rotate(var(--mo-rot)); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mo-rv-slide { from { opacity: 0; transform: translate3d(calc(var(--mo-dist) * var(--mo-dir, 1)), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mo-rv-flip  { from { opacity: 0; transform: perspective(900px) rotateX(-58deg) scale(var(--mo-scale)); } to { opacity: 1; transform: none; } }
@keyframes mo-rv-blur  { from { opacity: 0; filter: blur(var(--mo-blur)); transform: translate3d(0, var(--mo-dist), 0) scale(var(--mo-scale)); } to { opacity: 1; filter: none; transform: none; } }

/* Menunggu giliran: tak terlihat, tapi tetap menempati ruang (tanpa geser tata letak). */
html.mo-ready .mo-rv:not(.mo-in) { opacity: 0 !important; }
/* fill-mode BACKWARDS, bukan both: setelah selesai elemen kembali ke gaya
   aslinya, jadi efek hover/tekan milik kartu tetap bekerja. !important perlu
   karena index.php mematikan animasi `.fade-slide` dengan !important. */
html.mo-ready .mo-rv.mo-in {
  animation-name: var(--mo-kf) !important;
  animation-duration: var(--mo-dur) !important;
  animation-timing-function: var(--mo-ease) !important;
  animation-delay: var(--mo-d, 0ms) !important;
  animation-fill-mode: backwards !important;
  animation-iteration-count: 1 !important;
}
html[data-mo-rv="flip"].mo-ready .mo-rv.mo-in { transform-origin: 50% 0; }
html[data-mo-rv="slide"] .mo-rv:nth-child(even) { --mo-dir: -1; }

/* Pengaman muat pertama: kartu yang sudah di layar ditahan SEBENTAR sampai
   mo.js menandainya (dilepas pewaktu sebaris 1,6 dtk walau skrip gagal). */
html.mo-pre:not(.mo-ready) [data-regular-card]:not(.hidden),
html.mo-pre:not(.mo-ready) .fs-card { opacity: 0; }

/* -----------------------------------------------------------------------------
 * 2. FOTO: kerangka berkilau lalu memudar masuk
 * -------------------------------------------------------------------------- */
html.mo-ready .mo-img-wait {
  background-color: #eef1f5 !important;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.65) 42%, rgba(255,255,255,0) 64%) !important;
  background-size: 220% 100% !important;
  animation: mo-shimmer 1.25s ease-in-out infinite;
}
html.mo-ready .mo-img-wait > img { opacity: 0; }
html.mo-ready .mo-img-in { animation: mo-img-in .5s var(--mo-ease) backwards; }
@keyframes mo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes mo-img-in  { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------------------
 * 3. UMPAN BALIK SENTUH
 * -------------------------------------------------------------------------- */
html[data-mo-tap="scale"] [data-regular-card],
html[data-mo-tap="scale"] .fs-card,
html[data-mo-tap="jelly"] [data-regular-card],
html[data-mo-tap="jelly"] .fs-card { -webkit-tap-highlight-color: transparent; }
html[data-mo-tap="scale"] [data-regular-card]:active,
html[data-mo-tap="scale"] .fs-card:active { transform: scale(.975) !important; transition: transform .16s ease !important; }
html[data-mo-tap="glow"] [data-regular-card]:active,
html[data-mo-tap="glow"] .fs-card:active { box-shadow: 0 0 0 3px rgba(var(--mo-brand-rgb), .35), 0 10px 30px -10px rgba(var(--mo-brand-rgb), .55) !important; }

.mo-jelly { animation: mo-jelly .55s cubic-bezier(.28,.84,.42,1) !important; }
@keyframes mo-jelly {
  0% { transform: scale(1,1); } 28% { transform: scale(.965,1.025); } 52% { transform: scale(1.022,.988); }
  74% { transform: scale(.992,1.008); } 100% { transform: scale(1,1); }
}
.mo-glow-tap { animation: mo-glow-tap .6s ease-out; }
@keyframes mo-glow-tap { from { box-shadow: 0 0 0 0 rgba(var(--mo-brand-rgb), .55); } to { box-shadow: 0 0 0 14px rgba(var(--mo-brand-rgb), 0); } }

/* Kartu 3D miring mengikuti kursor (desktop, diatur mo.js). */
.mo-tilt { transform-style: preserve-3d; transition: transform .25s ease-out !important; }
.mo-tilt-on { transition: transform .08s linear !important; }

/* -----------------------------------------------------------------------------
 * 4. HALAMAN PRODUK — terbang dari kartu, isi bertahap
 * -------------------------------------------------------------------------- */
.mo-morph {
  position: fixed; z-index: 2147483000; pointer-events: none; overflow: hidden; margin: 0;
  background: #fff; box-shadow: 0 24px 60px -20px rgba(15,23,42,.45);
}
.mo-morph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-pd-hide { visibility: hidden !important; }
/* Selama foto terbang, layar baru cukup memudar: gerak geser bawaan kerangka
   membuat titik pendaratan ikut bergeser di tengah jalan. */
html.mo-morphing .nsh-screen.nsh-anim-fade-in,
html.mo-morphing .nsh-screen.nsh-anim-push-in,
html.mo-morphing .nsh-screen.nsh-anim-pop-in { animation-name: mo-screen-fade !important; }
@keyframes mo-screen-fade { from { opacity: 0; } to { opacity: 1; } }

.mo-pd-i { animation: mo-rv-rise var(--mo-dur) var(--mo-ease) var(--mo-d, 0ms) backwards; }
.mo-pd-zoom { animation: mo-pd-zoom calc(var(--mo-dur) * 1.1) var(--mo-ease) backwards; }
.mo-pd-sheet { animation: mo-pd-sheet calc(var(--mo-dur) * 1.1) cubic-bezier(.32,.72,0,1) backwards; }
@keyframes mo-pd-zoom  { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes mo-pd-sheet { from { opacity: .3; transform: translate3d(0, 38vh, 0); } to { opacity: 1; transform: none; } }
.mo-plx { will-change: transform; }

/* -----------------------------------------------------------------------------
 * 5. KATALOG PRODUK
 * -------------------------------------------------------------------------- */
.mo-cat-title { letter-spacing: -.01em; }
html:not([data-mo-hide~="pulse"]) .mo-cat-badge svg { animation: mo-twinkle 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes mo-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.22) rotate(18deg); } }

html[data-mo-hide~="labels"] #labelTabs { display: none !important; }
html[data-mo-hide~="sort"] .mo-cat-sort { display: none !important; }
html[data-mo-hide~="badge"] .mo-cat-badge { display: none !important; }
html[data-mo-hide~="sticky"] .mo-cat-bar { position: relative !important; top: auto !important; }
html[data-mo-hide~="labels"] .mo-cat-bar { justify-content: flex-end !important; }

/* Tab label: penanda aktif memantul, bukan sekadar berganti warna. */
#labelTabs .label-tab { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--mo-spring) !important; }
#labelTabs .label-tab.active { animation: mo-chip-on .4s var(--mo-spring); }
#labelTabs .label-tab:active { transform: scale(.94); }
@keyframes mo-chip-on { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: none; } }

@media (max-width: 767px) {
  html[data-cat-layout="feed"] [data-tkc="product-grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-cat-layout="feed"] [data-regular-card] > a:first-child { aspect-ratio: 4 / 3 !important; }
}

.mo-cat-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px auto 6px; padding: 0 16px; }
.mo-cat-foot[hidden] { display: none !important; }
.mo-cat-bar[hidden] { display: none !important; }
.mo-cat-count { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #64748b; font-variant-numeric: tabular-nums; }
.mo-cat-count:empty { display: none; }
.mo-cat-meter { width: 120px; height: 3px; border-radius: 99px; background: rgba(100,116,139,.18); overflow: hidden; }
.mo-cat-meter i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--sty-accent, var(--mo-brand)); transition: width .5s var(--mo-ease); }

.mo-load-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px;
  border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: -.005em; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; font-family: inherit;
  transition: transform .18s var(--mo-spring), box-shadow .2s ease, background-color .2s ease, color .2s ease;
  color: var(--sty-accent, var(--mo-brand)); background: rgba(var(--mo-brand-rgb), .1); border: 1px solid rgba(var(--mo-brand-rgb), .18);
}
.mo-load-btn svg { transition: transform .3s var(--mo-spring); }
.mo-load-btn:hover svg { transform: translateY(2px); }
.mo-load-btn:active { transform: scale(.95); }
html[data-cat-btn="solid"] .mo-load-btn { color: #fff; background: var(--sty-accent, var(--mo-brand)); border-color: transparent; box-shadow: 0 10px 22px -12px rgba(var(--mo-brand-rgb), .8); }
html[data-cat-btn="outline"] .mo-load-btn { background: transparent; border: 1.5px solid currentColor; }
html[data-cat-btn="ghost"] .mo-load-btn { background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.mo-load-btn.is-busy svg { animation: mo-spin .8s linear infinite; }
@keyframes mo-spin { to { transform: rotate(360deg); } }

.mo-loader { display: none; align-items: center; justify-content: center; gap: 6px; height: 40px; }
.mo-loader i { width: 7px; height: 7px; border-radius: 50%; background: var(--sty-accent, var(--mo-brand)); animation: mo-dot 1s ease-in-out infinite; }
.mo-loader i:nth-child(2) { animation-delay: .15s; } .mo-loader i:nth-child(3) { animation-delay: .3s; }
@keyframes mo-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.mo-cat-foot.is-auto .mo-loader { display: flex; }
.mo-cat-foot.is-auto.is-done .mo-loader { display: none; }
.mo-cat-foot.is-auto #regularLoadBtn { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.mo-cat-foot { position: relative; }

.mo-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mo-pager[hidden] { display: none !important; }
.mo-pager button {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 11px; border: 1px solid rgba(15,23,42,.1); background: #fff;
  color: #334155; font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: transform .18s var(--mo-spring), background-color .2s, color .2s, box-shadow .2s;
}
.mo-pager button:active { transform: scale(.92); }
.mo-pager button[aria-current="page"] { background: var(--sty-accent, var(--mo-brand)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--mo-brand-rgb), .9); }
.mo-pager button:disabled { opacity: .4; cursor: default; }
.mo-pager .mo-gap { align-self: center; color: #94a3b8; font-weight: 700; padding: 0 2px; }

/* -----------------------------------------------------------------------------
 * 6. FLASH SALE — dasar untuk semua model
 * -------------------------------------------------------------------------- */
.fs-hero { position: relative; overflow: hidden; isolation: isolate; }
.fs-hero > * { position: relative; z-index: 1; }
.fs-hero .fs-title, .fs-hero .fs-sub { color: var(--fs-ink) !important; }
.fs-hero .fs-bolt { animation: mo-bolt 1.8s ease-in-out infinite !important; transform-origin: 50% 60%; }
@keyframes mo-bolt { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 12% { transform: scale(1.28) rotate(-10deg); } 24% { transform: scale(1) rotate(0); } 50% { opacity: .75; } }
html:not([data-mo-hide~="fs-shine"]) .fs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.3) 46%, rgba(255,255,255,0) 60%);
  transform: translateX(-130%); animation: mo-shine 3.6s ease-in-out infinite;
}
@keyframes mo-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

html[data-fs] .fs-hero { background: linear-gradient(90deg, var(--fs-c1), var(--fs-c2)) !important; color: var(--fs-ink) !important; }

/* Jam hitung mundur */
.fs-timer .fs-dig { display: inline-block; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; color: var(--fs-ink) !important; }
.fs-timer .fs-col { color: var(--fs-ink) !important; opacity: .75; }
.fs-dig.mo-tick { animation: mo-tick .42s cubic-bezier(.2,.9,.3,1.2); }
@keyframes mo-tick { from { transform: translateY(-55%) scale(.9); opacity: .2; } to { transform: none; opacity: 1; } }
html[data-fs-timer="pill"] .fs-timer { background: rgba(0,0,0,.2); border-radius: 999px; padding: 2px 8px; }
html[data-fs-timer="pill"] .fs-timer .fs-dig { background: transparent !important; padding: 0 1px !important; min-width: 16px; }
html[data-fs-timer="plain"] .fs-timer .fs-dig { background: transparent !important; font-size: 14px !important; padding: 0 !important; min-width: 18px; }

html[data-mo-hide~="fs-timer"] #fsTimer, html[data-mo-hide~="fs-timer"] .fs-sub { display: none !important; }
html[data-mo-hide~="fs-counter"] #fsCounter { display: none !important; }
html[data-mo-hide~="fs-toggle"] #fsToggleBtn { display: none !important; }
html[data-mo-hide~="fs-stock"] .flashsale-stock { display: none !important; }
html[data-mo-hide~="fs-discount"] .flashsale-discount { display: none !important; }

/* Kartu */
#flashsaleTrack.flex .fs-card { width: var(--fs-card-w) !important; min-width: var(--fs-card-w) !important; }
@media (min-width: 768px) { #flashsaleTrack.flex .fs-card { width: calc(var(--fs-card-w) + 30px) !important; min-width: calc(var(--fs-card-w) + 30px) !important; } }
.fs-card { --fs-price: var(--fs-c1); --fs-btn: linear-gradient(90deg, var(--fs-c1), var(--fs-c2)); --fs-btn-ink: var(--fs-ink); }
.fs-card .flashsale-price { color: var(--fs-price) !important; }
.fs-card .flashsale-badge { background: var(--fs-btn) !important; color: var(--fs-btn-ink) !important; }
.fs-card .flashsale-discount { background: #fff1f2 !important; background: color-mix(in srgb, var(--fs-price) 13%, #fff) !important; color: var(--fs-price) !important; }
.fs-card .flashsale-actions button.flex-1 { background: var(--fs-btn) !important; color: var(--fs-btn-ink) !important; box-shadow: 0 8px 16px -10px var(--fs-c2) !important; }
.fs-card .flashsale-actions button.w-8 { color: var(--fs-price) !important; border-color: rgba(0,0,0,.08) !important; background: #fff5f7 !important; background: color-mix(in srgb, var(--fs-price) 8%, #fff) !important; }
.fs-card .flashsale-name:hover { color: var(--fs-price) !important; }
.fs-card .flashsale-stock { background: #ffe4e6 !important; background: color-mix(in srgb, var(--fs-c1) 16%, #fff) !important; border-color: transparent !important; }
.fs-card .fs-bar { background: linear-gradient(90deg, var(--fs-c1), var(--fs-c2)) !important; overflow: hidden; }
.fs-card .fs-bar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 6px, rgba(255,255,255,0) 6px 12px);
  background-size: 17px 17px; animation: mo-stripes .8s linear infinite;
}
@keyframes mo-stripes { from { background-position: 0 0; } to { background-position: 17px 0; } }
html:not([data-mo-hide~="pulse"]) .fs-card .fs-low .fs-bar { animation: mo-low 1.1s ease-in-out infinite; }
@keyframes mo-low { 0%, 100% { filter: none; } 50% { filter: brightness(1.18) saturate(1.2); } }
html:not([data-mo-hide~="pulse"]) .fs-card .flashsale-badge { animation: mo-badge 2.6s ease-in-out infinite; }
@keyframes mo-badge { 0%, 88%, 100% { transform: none; } 92% { transform: scale(1.12) rotate(-3deg); } 96% { transform: scale(.98); } }
.fs-urgent { position: absolute; left: 8px; bottom: 8px; z-index: 11; font-size: 9px; font-weight: 800; letter-spacing: .02em; padding: 3px 7px; border-radius: 99px; color: #fff; background: rgba(15,23,42,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: mo-rv-pop .5s var(--mo-spring) both; }

/* --- MEGA: satu panel besar menyatukan kepala & kartu --- */
html[data-fs="mega"] .fs-hero,
html[data-fs="neon"] .fs-hero,
html[data-fs="luxe"] .fs-hero,
html[data-fs="cute"] .fs-hero { margin: 16px 0 0 !important; border-radius: 22px 22px 0 0; padding: 16px 16px 14px !important; }
html[data-fs="mega"] .fs-body,
html[data-fs="neon"] .fs-body,
html[data-fs="luxe"] .fs-body,
html[data-fs="cute"] .fs-body { margin: 0 0 10px !important; border-radius: 0 0 22px 22px; overflow: hidden; }
html[data-fs="mega"] .fs-hero { background: radial-gradient(130% 160% at 0% 0%, var(--fs-c1) 0%, var(--fs-c2) 72%) !important; box-shadow: 0 18px 38px -24px var(--fs-c2); }
html[data-fs="mega"] .fs-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 22px); background-size: 200% 100%;
  animation: mo-stripes-slow 14s linear infinite;
}
@keyframes mo-stripes-slow { from { background-position: 0 0; } to { background-position: -300px 0; } }
html[data-fs="mega"] .fs-title { font-size: 21px !important; letter-spacing: .06em !important; }
html[data-fs="mega"] .fs-timer .fs-dig { font-size: 12.5px !important; padding: 4px 6px !important; background: rgba(0,0,0,.24) !important; border-radius: 8px !important; }
html[data-fs="mega"] .fs-body { background: #faf5ff; background: linear-gradient(180deg, color-mix(in srgb, var(--fs-c2) 16%, #fff), #fff 70%); }
html[data-fs="mega"] .fs-card { border-color: transparent !important; box-shadow: 0 12px 26px -16px rgba(15,23,42,.45) !important; }

/* --- MEMBARA --- */
html[data-fs="fire"] .fs-hero { background: linear-gradient(100deg, var(--fs-c1), var(--fs-c2), var(--fs-c1)) !important; background-size: 220% 100% !important; animation: mo-fire-bg 6s ease-in-out infinite; }
@keyframes mo-fire-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
html[data-fs="fire"] .fs-hero::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -60%; height: 120%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,230,120,.55), rgba(255,230,120,0)); filter: blur(6px);
  animation: mo-flame 2.4s ease-in-out infinite alternate;
}
@keyframes mo-flame { from { transform: translate3d(-6%, 8%, 0) scale(1); } to { transform: translate3d(6%, -4%, 0) scale(1.12); } }
html[data-fs="fire"] .fs-title { text-shadow: 0 2px 10px rgba(120,20,0,.35); }

/* --- KUPON --- */
html[data-fs="ticket"] .fs-hero {
  margin: 16px 0 6px !important; border-radius: 14px; padding: 14px 20px !important;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
}
html[data-fs="ticket"] .fs-hero::before { content: ""; position: absolute; inset: 6px 14px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 9px; z-index: 0; pointer-events: none; }
html[data-fs="ticket"] .fs-card { --fs-price: var(--fs-c2); border-style: dashed !important; }
html[data-fs="ticket"] .fs-card .flashsale-content { border-top: 1.5px dashed rgba(0,0,0,.08); }

/* --- MINIMALIS --- */
html[data-fs="minimal"] .fs-hero { background: transparent !important; color: #0f172a !important; box-shadow: none !important; border-bottom: 1px solid rgba(15,23,42,.07); }
html[data-fs="minimal"] .fs-hero .fs-title { color: #0f172a !important; font-style: normal !important; letter-spacing: .02em !important; }
html[data-fs="minimal"] .fs-hero .fs-sub { color: #64748b !important; }
html[data-fs="minimal"] .fs-hero .fs-bolt { color: var(--fs-c1) !important; }
html[data-fs="minimal"] .fs-timer .fs-dig { background: var(--fs-c1) !important; color: #fff !important; border-radius: 6px; }
html[data-fs="minimal"] .fs-timer .fs-col { color: var(--fs-c1) !important; }
html[data-fs="minimal"] #fsCounter { background: rgba(15,23,42,.06) !important; color: #334155 !important; }
html[data-fs="minimal"] #fsToggleBtn { background: transparent !important; color: var(--fs-c1) !important; box-shadow: inset 0 0 0 1.5px currentColor !important; }
html[data-fs="minimal"] .fs-hero::after { display: none; }
html[data-fs="minimal"] .fs-card { --fs-btn-ink: #fff; border-color: rgba(15,23,42,.08) !important; }
html[data-fs="minimal"][data-fs-timer="pill"] .fs-timer { background: color-mix(in srgb, var(--fs-c1) 12%, #fff); }
html[data-fs="minimal"][data-fs-timer="pill"] .fs-timer .fs-dig { color: var(--fs-c1) !important; }

/* --- IMUT --- */
html[data-fs="cute"] .fs-hero { background: linear-gradient(120deg, var(--fs-c1), var(--fs-c2)) !important; border-radius: 26px 26px 0 0; }
html[data-fs="cute"] .fs-hero::before {
  content: ""; position: absolute; right: 12px; top: 6px; width: 64px; height: 64px; z-index: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 30% 30%, #fff 0 4px, transparent 5px), radial-gradient(circle at 70% 60%, #fff 0 3px, transparent 4px), radial-gradient(circle at 45% 80%, #fff 0 2.5px, transparent 3.5px);
  animation: mo-float-y 3s ease-in-out infinite;
}
@keyframes mo-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html[data-fs="cute"] .fs-title { font-style: normal !important; letter-spacing: .03em !important; }
html[data-fs="cute"] .fs-timer .fs-dig { background: rgba(255,255,255,.55) !important; border-radius: 10px !important; }
html[data-fs="cute"] .fs-body { background: #fff7fb; background: linear-gradient(180deg, color-mix(in srgb, var(--fs-c1) 22%, #fff), #fff 80%); border-radius: 0 0 26px 26px; }
html[data-fs="cute"] .fs-card { --fs-price: #be185d; --fs-btn: linear-gradient(90deg, #f472b6, #a78bfa); --fs-btn-ink: #fff; border-radius: 22px !important; border-color: #fbcfe8 !important; }
html[data-fs="cute"] #fsToggleBtn { color: #be185d !important; }

/* --- NEON --- */
html[data-fs="neon"] .fs-hero { background: #0b1020 !important; border: 1px solid rgba(34,211,238,.28); border-bottom: 0; box-shadow: inset 0 0 40px -18px var(--fs-c2); }
html[data-fs="neon"] .fs-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(transparent 0 48%, rgba(34,211,238,.1) 50%, transparent 52% 100%); background-size: 100% 200%; animation: mo-scan 3.2s linear infinite; }
@keyframes mo-scan { from { background-position: 0 -100%; } to { background-position: 0 100%; } }
html[data-fs="neon"] .fs-title { color: #fff !important; text-shadow: 0 0 8px var(--fs-c1), 0 0 22px var(--fs-c2); }
html[data-fs="neon"] .fs-hero .fs-bolt { color: var(--fs-c1) !important; filter: drop-shadow(0 0 6px var(--fs-c1)); }
html[data-fs="neon"] .fs-timer .fs-dig { background: rgba(34,211,238,.1) !important; box-shadow: inset 0 0 0 1px var(--fs-c1), 0 0 10px -2px var(--fs-c1); border-radius: 6px !important; color: #e0faff !important; }
html[data-fs="neon"] .fs-body { background: linear-gradient(180deg, #0b1020, #141a33); border: 1px solid rgba(34,211,238,.28); border-top: 0; }
html[data-fs="neon"] .fs-card { --fs-price: #7c3aed; --fs-btn: linear-gradient(90deg, #0891b2, #7c3aed); --fs-btn-ink: #fff; border-color: rgba(34,211,238,.35) !important; box-shadow: 0 0 0 1px rgba(168,85,247,.2), 0 10px 26px -14px var(--fs-c2) !important; }
html[data-fs="neon"] #fsDots button { background: rgba(34,211,238,.35) !important; }

/* --- MEWAH --- */
html[data-fs="luxe"] .fs-hero { background: linear-gradient(135deg, #0c0a09, #292524) !important; border: 1px solid rgba(212,175,55,.35); border-bottom: 0; }
html[data-fs="luxe"] .fs-title {
  color: var(--fs-c1) !important; font-style: normal !important; letter-spacing: .22em !important; font-weight: 800 !important;
  background: linear-gradient(90deg, var(--fs-c1), var(--fs-c2), var(--fs-c1)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mo-gold 5s linear infinite;
}
@keyframes mo-gold { to { background-position: -200% 0; } }
html[data-fs="luxe"] .fs-hero .fs-sub { color: #d6d3d1 !important; }
html[data-fs="luxe"] .fs-hero .fs-bolt { color: var(--fs-c1) !important; }
html[data-fs="luxe"] .fs-timer .fs-dig { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(212,175,55,.6); color: #f5e6a8 !important; border-radius: 4px !important; }
html[data-fs="luxe"] .fs-timer .fs-col { color: #d4af37 !important; }
html[data-fs="luxe"] #fsCounter { background: rgba(212,175,55,.14) !important; color: #f5e6a8 !important; }
html[data-fs="luxe"] #fsToggleBtn { background: linear-gradient(90deg, #d4af37, #f5e6a8) !important; color: #1c1917 !important; }
html[data-fs="luxe"] .fs-body { background: linear-gradient(180deg, #1c1917, #fafaf9 38%); border: 1px solid rgba(212,175,55,.35); border-top: 0; }
html[data-fs="luxe"] .fs-card { --fs-price: #8a6d1d; --fs-btn: linear-gradient(90deg, #b8912f, #e8cf7a); --fs-btn-ink: #1c1917; border-color: rgba(212,175,55,.35) !important; border-radius: 10px !important; }

/* -----------------------------------------------------------------------------
 * 7. KOTAK PENCARIAN
 * -------------------------------------------------------------------------- */
/* AKAR "kotak cari terlalu besar": pembungkus model Studio dulu ikut membawa
   kelas lama .app-search (padding 14px 20px + garis 2px + huruf 16px tebal),
   sehingga kotak ramping 36px terbungkus bingkai kedua setinggi ~66px. */
#searchWrapper.app-search, .sty-search.app-search { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; }
html[data-mo-ss] #searchWrapper #productSearch {
  height: var(--mo-search-h) !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  font-size: var(--mo-search-fs) !important; font-weight: 500 !important; line-height: normal !important; letter-spacing: -.005em;
  box-sizing: border-box !important; text-overflow: ellipsis;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease !important;
}
html[data-mo-ss] #searchWrapper #productSearch::placeholder { font-weight: 450; opacity: .9; }
/* iOS memperbesar layar bila huruf kotak isian < 16px. Hanya Safari iOS yang
   mengenal -webkit-touch-callout, jadi perangkat lain tetap ramping. */
@supports (-webkit-touch-callout: none) { html[data-mo-ss] #searchWrapper #productSearch { font-size: 16px !important; } }
html[data-mo-sf="glow"] #searchWrapper #productSearch:focus,
html[data-mo-sf="expand"] #searchWrapper #productSearch:focus { border-color: rgba(var(--mo-brand-rgb), .55) !important; box-shadow: 0 0 0 3.5px rgba(var(--mo-brand-rgb), .16) !important; outline: none !important; }
#searchWrapper { transition: flex-basis .32s var(--mo-ease); }
html[data-mo-sf="expand"] #searchWrapper ~ * { transition: max-width .32s var(--mo-ease), opacity .2s ease, margin .32s var(--mo-ease) !important; }
html.mo-sfocus[data-mo-sf="expand"] #searchWrapper ~ * { max-width: 0 !important; min-width: 0 !important; flex-basis: 0 !important; opacity: 0 !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-width: 0 !important; overflow: hidden !important; pointer-events: none !important; }
html[data-mo-ss] .search-dropdown { padding: 14px !important; border-radius: 18px !important; top: calc(100% + 8px) !important; transform: translateY(-6px) scale(.985); transform-origin: 50% 0; transition: opacity .2s ease, transform .3s var(--mo-ease) !important; }
html[data-mo-ss] .search-dropdown.open { transform: none; }
html[data-mo-ss] .search-dropdown [data-search-suggest] { transition: transform .15s ease, background-color .15s ease, color .15s ease !important; }
html[data-mo-ss] .search-dropdown [data-search-suggest]:active { transform: scale(.96); }

/* -----------------------------------------------------------------------------
 * 8. KERANGKA: kepala halaman saat digulir, bilah menu, bilah proses
 * -------------------------------------------------------------------------- */
html.mo-hdr [data-tkc="header"] { transition: box-shadow .3s ease, background-color .3s ease !important; }
html.mo-hdr.mo-scrolled [data-tkc="header"] { box-shadow: 0 8px 22px -16px rgba(15,23,42,.4) !important; }
.bottom-nav a.active svg { animation: mo-nav-pop .5s var(--mo-spring); }
@keyframes mo-nav-pop { 0% { transform: scale(.72); } 60% { transform: translateY(-2px) scale(1.16); } 100% { transform: translateY(-1px) scale(1.08); } }
.bottom-nav a:active svg { transform: scale(.86) !important; transition: transform .1s ease !important; }

#mo-progress { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2.5px; z-index: 2147483600; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, var(--mo-brand), var(--mo-accent)); box-shadow: 0 0 10px rgba(var(--mo-brand-rgb), .6); }
#mo-progress.is-run { opacity: 1; transform: scaleX(.86); transition: transform 7s cubic-bezier(.08,.8,.1,1), opacity .15s; }
#mo-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform .2s ease, opacity .35s ease .12s; }

/* -----------------------------------------------------------------------------
 * 9. AMBIENT MOTION — non-figuratif, GPU-friendly
 * -------------------------------------------------------------------------- */
.mo-amb {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  contain: strict; opacity: 0; transition: opacity .45s ease;
}
html.mo-amb-on .mo-amb { opacity: 1; }
html.mo-amb-deep .mo-amb, html.mo-sfocus .mo-amb, html.mo-morphing .mo-amb { opacity: 0; }
.mo-amb i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  opacity: var(--o,.22); transform: translate3d(0,0,0); will-change: transform;
}
html.mo-tab-hidden .mo-amb i, html:not(.mo-amb-on) .mo-amb i, html.mo-amb-deep .mo-amb i { animation-play-state: paused; }

.mo-amb-halo i {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(var(--mo-brand-rgb),.18), rgba(var(--mo-brand-rgb),.07) 38%, rgba(var(--mo-brand-rgb),0) 72%);
  animation: mo-amb-float var(--t) ease-in-out var(--d) infinite alternate;
}
.mo-amb-mesh i {
  border-radius: 42% 58% 62% 38% / 52% 38% 62% 48%;
  background: radial-gradient(circle at 34% 28%, rgba(var(--mo-brand-rgb),.17), rgba(var(--mo-brand-rgb),.055) 48%, rgba(var(--mo-brand-rgb),0) 74%);
  animation: mo-amb-mesh var(--t) cubic-bezier(.45,0,.55,1) var(--d) infinite alternate;
}
.mo-amb-sheen i {
  width: calc(var(--s) * .34); height: 120vh; top: -10vh;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(var(--mo-brand-rgb),.085), rgba(255,255,255,.13), rgba(255,255,255,0));
  transform: translate3d(-35vw,0,0) rotate(17deg);
  animation: mo-amb-sheen var(--t) cubic-bezier(.4,0,.2,1) var(--d) infinite;
}
.mo-amb-grid::before {
  content:""; position:absolute; inset:-18%; opacity:.32;
  background-image: linear-gradient(rgba(var(--mo-brand-rgb),.07) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(var(--mo-brand-rgb),.07) 1px,transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 18%,#000 0 22%,transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 18%,#000 0 22%,transparent 68%);
  animation: mo-amb-grid 18s linear infinite;
}
.mo-amb-grid i { display:none; }
.mo-amb-drift i {
  border-radius:50%;
  background: rgba(var(--mo-brand-rgb),.22);
  box-shadow: 0 0 0 4px rgba(var(--mo-brand-rgb),.035);
  animation: mo-amb-drift var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes mo-amb-float {
  from { transform: translate3d(0,0,0) scale(.94); opacity:.11; }
  to   { transform: translate3d(var(--dx),var(--dy),0) scale(1.06); opacity:var(--o,.22); }
}
@keyframes mo-amb-mesh {
  from { transform: translate3d(0,0,0) rotate(0deg) scale(.92); opacity:.10; }
  to   { transform: translate3d(var(--dx),var(--dy),0) rotate(var(--r)) scale(1.08); opacity:var(--o,.22); }
}
@keyframes mo-amb-sheen {
  0%,12% { transform: translate3d(-38vw,0,0) rotate(17deg); opacity:0; }
  28%    { opacity:var(--o,.2); }
  72%    { opacity:var(--o,.2); }
  88%,100% { transform: translate3d(138vw,0,0) rotate(17deg); opacity:0; }
}
@keyframes mo-amb-grid {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(34px,34px,0); }
}
@keyframes mo-amb-drift {
  from { transform: translate3d(0,0,0) scale(.8); opacity:.08; }
  to   { transform: translate3d(var(--dx),var(--dy),0) scale(1.12); opacity:var(--o); }
}
html.mo-tab-hidden .mo-amb-grid::before, html:not(.mo-amb-on) .mo-amb-grid::before, html.mo-amb-deep .mo-amb-grid::before { animation-play-state:paused; }

/* -----------------------------------------------------------------------------
 * 10. RAYAKAN: konfeti & kartu pesanan berhasil
 * -------------------------------------------------------------------------- */
.mo-confetti { position: fixed; inset: 0; z-index: 2147483100; pointer-events: none; overflow: hidden; }
.mo-confetti i { position: absolute; top: 0; left: 0; width: 8px; height: 12px; border-radius: 2px; will-change: transform, opacity; }
.mo-success { animation: mo-success-in .7s var(--mo-spring) both; transform-origin: 50% 20%; }
@keyframes mo-success-in { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 100% { opacity: 1; transform: none; } }
.mo-success .chat-card-header span:first-child svg { animation: mo-check-pop .8s var(--mo-spring) .15s both; }
@keyframes mo-check-pop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }
.mo-success #payNowBtn { animation: mo-cta-breathe 2.2s ease-in-out 1s infinite; }
@keyframes mo-cta-breathe { 0%, 100% { box-shadow: 0 10px 20px -12px rgba(5,150,105,.7); transform: none; } 50% { box-shadow: 0 14px 28px -10px rgba(5,150,105,.9); transform: translateY(-1px) scale(1.012); } }

/* -----------------------------------------------------------------------------
 * 11. KERANJANG & CHECKOUT
 * -------------------------------------------------------------------------- */
.mo-bump { animation: mo-bump .38s var(--mo-spring); }
@keyframes mo-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.mo-roll { display: inline-block; animation: mo-roll .45s var(--mo-ease); }
@keyframes mo-roll { from { transform: translateY(-40%); opacity: .35; } to { transform: none; opacity: 1; } }
#checkoutBtn[data-submitting="1"] { position: relative; overflow: hidden; }
#checkoutBtn[data-submitting="1"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 80%); transform: translateX(-100%); animation: mo-sweep 1.1s ease-in-out infinite; }
@keyframes mo-sweep { to { transform: translateX(100%); } }

/* -----------------------------------------------------------------------------
 * 12. TINGKAT GERAK & AKSESIBILITAS
 * -------------------------------------------------------------------------- */
html[data-mo="off"] .fs-hero::after, html[data-mo="off"] .fs-hero::before,
html[data-mo="off"] .fs-card .fs-bar::after, html[data-mo="off"] .mo-amb { display: none !important; }
html[data-mo="off"] .fs-hero .fs-bolt, html[data-mo="off"] .fs-card .flashsale-badge,
html[data-mo="off"] .mo-cat-badge svg, html[data-mo="off"] .bottom-nav a.active svg { animation: none !important; }
html[data-mo="subtle"] .fs-hero::before, html[data-mo="subtle"] .mo-amb { display: none !important; }
/* Tingkat "Halus" milik Studio memendekkan SEMUA animasi (*{animation-duration:.18s!important}).
   Hiasan yang berulang tanpa henti akan berkedip cepat bila ikut dipendekkan,
   jadi di tingkat ini hiasan berulang dimatikan; gerak kemunculan tetap ada. */
html[data-mo="subtle"] .fs-hero::after, html[data-mo="subtle"] .fs-hero .fs-bolt, html[data-mo="subtle"] .fs-card .fs-bar::after,
html[data-mo="subtle"] .fs-card .flashsale-badge, html[data-mo="subtle"] .fs-card .fs-low .fs-bar, html[data-mo="subtle"] .mo-cat-badge svg,
html[data-mo="subtle"] .mo-img-wait, html[data-mo="subtle"] .mo-loader i, html[data-mo="subtle"][data-fs="fire"] .fs-hero,
html[data-mo="subtle"][data-fs="luxe"] .fs-title, html[data-mo="subtle"] .mo-success #payNowBtn, html[data-mo="subtle"] #checkoutBtn[data-submitting="1"]::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html .mo-rv, html .mo-pd-i, html .mo-pd-zoom, html .mo-pd-sheet, html .mo-img-in, html .mo-success { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
  .mo-amb, .mo-confetti, #mo-progress, .fs-hero::after, .fs-hero::before, .fs-card .fs-bar::after { display: none !important; }
  .fs-hero .fs-bolt, .fs-card .flashsale-badge, .mo-cat-badge svg, .bottom-nav a.active svg, .fs-dig.mo-tick, .mo-jelly { animation: none !important; }
}
@media print { .mo-amb, .mo-confetti, #mo-progress, .mo-morph { display: none !important; } }

/* History restores a visible catalog immediately; never replay reveal delays. */
html.mo-ready [data-nsh-restored] .mo-rv {
  opacity: 1 !important;
  animation: none !important;
}