:root{--v:#7c3aed;--c:#06b6d4;--p:#ec4899;--ink:#1e1b4b;--mut:#6b7280;--g:linear-gradient(120deg,#7c3aed,#06b6d4 60%,#ec4899);--glass:rgba(255,255,255,.72);--bd:rgba(124,58,237,.14);--sh:0 14px 40px -14px rgba(124,58,237,.28)}
*{box-sizing:border-box}
body.wm-body,body.fi-body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,#f5f3ff 0%,#ecfeff 48%,#fff1f2 100%) fixed!important;min-height:100vh}
a{color:inherit;text-decoration:none}
@keyframes gl{0%,91%,100%{text-shadow:none;transform:none}92%{text-shadow:3px 0 var(--c),-3px 0 var(--p);transform:translateX(1px)}94%{text-shadow:-3px 0 var(--c),3px 0 var(--p);transform:translateX(-1px)}96%{text-shadow:2px 1px var(--c),-2px -1px var(--p)}}
.wm-logo,.fi-logo,.wm-grad{font-weight:800;letter-spacing:.14em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;animation:gl 5s infinite}
.wm-grad{font-style:normal;letter-spacing:-.02em}
.fi-logo{font-size:1.35rem}
/* Filament */
.fi-section,.fi-ta-ctn,.fi-wi-stats-overview-stat,.fi-simple-main{background:var(--glass)!important;backdrop-filter:blur(14px);border:1px solid var(--bd)!important;box-shadow:var(--sh)!important;border-radius:1.1rem!important}
.fi-sidebar,.fi-topbar>nav{background:rgba(255,255,255,.65)!important;backdrop-filter:blur(16px);border-color:var(--bd)!important}
.fi-btn.fi-color-primary:not(.fi-outlined){background-image:var(--g)!important;border:0;box-shadow:0 8px 20px -8px rgba(124,58,237,.6)}
.fi-simple-layout{background:transparent!important}
.fi-sidebar-item-active>a{background:linear-gradient(90deg,rgba(124,58,237,.14),rgba(6,182,212,.08))!important}
/* Public */
.wm-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.wm-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.7);backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.wm-nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.wm-nav nav{display:flex;gap:10px;align-items:center;font-weight:600;font-size:.92rem}
.wm-nav nav>a:not(.wm-btn):not(.wm-ghost){padding:8px 12px}
.wm-btn{display:inline-block;text-align:center;border:0;cursor:pointer;background:var(--g);color:#fff!important;font:700 .92rem inherit;padding:11px 20px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(124,58,237,.7);transition:.2s}
.wm-btn:hover{transform:translateY(-2px)}
.wm-btn:active{transform:scale(.97)}
.wm-ghost{display:inline-block;text-align:center;border:1px solid var(--bd);background:#fff;padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9rem}
.wm-full{display:block;width:100%;margin-top:10px}
.wm-hero{padding:52px 0 24px;text-align:center}
.wm-hero h1{font-size:clamp(2rem,5.5vw,3.8rem);line-height:1.08;margin:18px 0;font-weight:800;letter-spacing:-.03em}
.wm-hero p{max-width:620px;margin:0 auto 28px;color:var(--mut);font-size:1.05rem}
.wm-chip{display:inline-block;background:#fff;border:1px solid var(--bd);padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--v)}
.wm-search{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--bd);box-shadow:var(--sh);padding:12px;border-radius:1.4rem;max-width:900px;margin:auto}
.wm-search input,.wm-search select,.wm-form input,.wm-form textarea{border:1px solid var(--bd);background:#fff;border-radius:.9rem;padding:12px 14px;font:inherit;width:100%;outline:none}
.wm-search input:focus,.wm-form input:focus,.wm-form textarea:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.wm-sec{padding:28px 20px 60px}
.wm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.wm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:900px){.wm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){.wm-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.wm-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:.8rem;overflow:hidden;box-shadow:var(--sh);transition:.25s}
.wm-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -16px rgba(124,58,237,.4)}
.wm-img{position:relative;aspect-ratio:1/1;overflow:hidden}
.wm-img::before{content:"";position:absolute;inset:0;background:var(--bg,var(--g)) center/cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.wm-big{aspect-ratio:auto;height:340px;border-radius:1.2rem}
.wm-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--v);font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px}
.wm-box .wm-badge{position:static;display:inline-block;background:#f5f3ff}
.wm-star{left:auto;right:12px;background:#fde68a;color:#92400e}
.wm-cb{padding:10px 10px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.wm-cb h3{margin:0;font-size:.84rem;font-weight:600;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wm-card .wm-price{font-size:1rem}
.wm-tags{display:flex;flex-wrap:wrap;gap:4px}.wm-tags span{font-size:.68rem;color:var(--v);background:#f5f3ff;border:1px solid var(--bd);padding:1px 6px;border-radius:4px}
.wm-loc{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:4px;color:var(--mut);font-size:.72rem}.wm-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-card .wm-badge{top:8px;left:8px;font-size:.65rem;padding:3px 8px}.wm-card .wm-star{left:auto;right:8px}
.wm-price{font-weight:800;color:var(--v)}.wm-xl{font-size:1.8rem;margin:10px 0}
.wm-meta{color:var(--mut);font-size:.85rem}
.wm-empty{grid-column:1/-1;text-align:center;color:var(--mut)}
.wm-pager{display:flex;justify-content:center;gap:12px;margin-top:30px}
.wm-detail{display:grid;grid-template-columns:1.7fr 1fr;gap:28px;margin-top:14px}
.wm-gallery{display:grid;gap:10px}.wm-gallery img{width:100%;border-radius:1.2rem;max-height:420px;object-fit:cover}
.wm-h1{font-size:1.9rem;letter-spacing:-.02em;margin:20px 0 6px}
.wm-chips{display:flex;flex-wrap:wrap;gap:8px}
.wm-box{position:sticky;top:84px;align-self:start;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--bd);box-shadow:var(--sh);border-radius:1.3rem;padding:22px}
.wm-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.9rem}.wm-dl dt{color:var(--mut)}.wm-dl dd{margin:0;text-align:right;font-weight:600}
.wm-form{display:grid;gap:10px}
.wm-ok{background:#dcfce7;color:#166534;padding:10px 14px;border-radius:.8rem;margin-bottom:10px;font-size:.9rem}
.wm-err{color:#be123c;font-size:.85rem}
.wm-foot{padding:28px 0;text-align:center;color:var(--mut);font-size:.85rem;border-top:1px solid var(--bd)}
@media(max-width:820px){.wm-search{grid-template-columns:1fr 1fr}.wm-search input[name=q],.wm-search .wm-btn{grid-column:1/-1}.wm-detail{grid-template-columns:1fr}.wm-box{position:static}.wm-nav .wm-ghost{display:none}}

/* ===== Animasi ringan (hanya opacity & transform => GPU, tidak berat) ===== */
@keyframes wm-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes wm-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes wm-left{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes wm-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes wm-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(46px,32px,0)}}
@keyframes wm-ring{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.14,1.55);opacity:0}}
.wm-nav{animation:wm-down .5s ease backwards}
/* hero: bola cahaya melayang + teks masuk bergantian */
.wm-hero{position:relative;overflow:hidden}
.wm-hero::before,.wm-hero::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;pointer-events:none;will-change:transform;animation:wm-float 14s ease-in-out infinite alternate}
.wm-hero::before{left:-140px;top:-120px;background:radial-gradient(circle,rgba(124,58,237,.20),transparent 65%)}
.wm-hero::after{right:-140px;bottom:-160px;background:radial-gradient(circle,rgba(6,182,212,.22),transparent 65%);animation-duration:19s;animation-direction:alternate-reverse}
.wm-hero .wm-wrap{position:relative;z-index:1}
.wm-hero .wm-wrap>*{animation:wm-up .65s cubic-bezier(.2,.7,.2,1) backwards}
.wm-hero .wm-wrap>:nth-child(1){animation-delay:.05s}
.wm-hero .wm-wrap>:nth-child(2){animation-delay:.15s}
.wm-hero .wm-wrap>:nth-child(3){animation-delay:.25s}
.wm-hero .wm-wrap>:nth-child(4){animation-delay:.35s}
/* muncul saat di-scroll (class .wm-in ditambah oleh JS kecil di layout) */
.js .wm-rv:not(.wm-in){opacity:0}
.js .wm-rv.wm-in{animation:wm-up .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}
/* kartu */
.wm-card:hover .wm-img::before{transform:scale(1.08)}
.wm-card:active{transform:scale(.99)}
/* halaman detail */
.wm-detail>div:first-child{animation:wm-up .6s .05s cubic-bezier(.2,.7,.2,1) backwards}
.wm-box{animation:wm-left .6s .15s cubic-bezier(.2,.7,.2,1) backwards}
.wm-gallery img{animation:wm-zoom .7s cubic-bezier(.2,.7,.2,1) backwards}
.wm-gallery img:nth-child(2){animation-delay:.12s}
.wm-gallery img:nth-child(3){animation-delay:.24s}
/* tombol WhatsApp: cincin berdenyut halus */
.wm-wa{position:relative}
.wm-wa::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid var(--v);pointer-events:none;animation:wm-ring 2.6s ease-out infinite}
.wm-wa:hover::after{animation:none}
@media(max-width:820px){.wm-hero::after{display:none}.wm-box{animation-name:wm-up}}
/* hormati pengaturan "kurangi gerakan" di perangkat */
@media(prefers-reduced-motion:reduce){.wm-body *,.wm-body *::before,.wm-body *::after{animation:none!important;transition:none!important}.js .wm-rv:not(.wm-in){opacity:1}}

@media(max-width:560px){.wm-wrap{padding:0 12px}.wm-sec{padding:14px 12px 40px}.wm-hero{padding:30px 0 14px}.wm-hero h1{margin:12px 0}.wm-hero p{font-size:.92rem;margin-bottom:18px}.wm-big{height:260px}}