/* best-extra — tambahan di atas build Tailwind live (best.css). Animasi hanya opacity/transform; tanpa JS / reduced-motion = konten langsung tampil. */
html{scroll-behavior:smooth}
/* animasi masuk kiri/kanan (±50 px) tidak boleh melebarkan halaman di HP */
#root{overflow-x:hidden;overflow-x:clip}
/* header: sembunyi saat gulir ke bawah >150 px, muncul saat gulir ke atas (live: framer y 0 ↔ -100%, .35 s easeInOut) */
[data-best-header]{transition:transform .35s ease-in-out;will-change:transform}
[data-best-header].best-header-hidden{transform:translateY(-100%)}
/* tombol live (<button>) kini <a>: rata tengah seperti tombol, tanpa garis bawah */
a[data-best-wa],#home a.inline-flex,header a.inline-flex,#contact a.inline-flex,#services a.inline-flex{cursor:pointer;text-decoration:none}
:where(a.inline-flex.justify-center){text-align:center}
/* animasi masuk ala framer-motion (state tersembunyi HANYA bila html.js-anim dari skrip inline <head>) */
.js-anim [data-anim]{opacity:0;transform:translate3d(0,20px,0);transition:opacity .5s ease-out,transform .5s ease-out}
.js-anim [data-anim="left"]{transform:translate3d(-50px,0,0);transition-duration:.8s}
.js-anim [data-anim="right"]{transform:translate3d(50px,0,0);transition-duration:.8s}
.js-anim [data-anim].anim-in{opacity:1;transform:none}
.js-anim [data-anim].anim-done{transition:none}
/* kartu layanan: angkat saat hover (live: whileHover y -5) */
@media (hover:hover){#services .grid>[data-anim].anim-done{transition:transform .25s ease}#services .grid>[data-anim]:hover{transform:translateY(-5px)}}
/* tombol WA melayang: muncul (scale 0→1, delay 1 s) + hover 1.1 (live framer) */
[data-best-float]{animation:bestPop .5s ease-out 1s both;transition:transform .2s ease}
[data-best-float]:hover{transform:scale(1.1)}
[data-best-float]:active{transform:scale(.9)}
@keyframes bestPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
/* panel menu mobile (live: framer opacity/height) */
[data-best-panel].best-panel-in{animation:bestPanel .25s ease-out}
@keyframes bestPanel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* select asli pengganti Radix Select */
form[data-best-form] select{appearance:auto;-webkit-appearance:menulist;cursor:pointer}
form[data-best-form] select:invalid{color:hsl(var(--muted-foreground))}
form[data-best-form] select option{color:initial}
form[data-best-form] .best-err{border-color:hsl(var(--destructive))}
/* toast (live: shadcn Toaster kanan bawah) */
.best-toast-region{position:fixed;z-index:100;bottom:0;right:0;display:flex;flex-direction:column;gap:.5rem;padding:1rem;width:100%;max-width:420px;pointer-events:none}
.best-toast{pointer-events:auto;border-radius:.375rem;border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground));padding:1rem 1.5rem;box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);animation:bestToast .25s ease-out}
.best-toast.destructive{border-color:hsl(var(--destructive));background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.best-toast b{display:block;font-size:.875rem;font-weight:600}
.best-toast span{display:block;font-size:.875rem;opacity:.9;margin-top:.25rem}
@keyframes bestToast{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-anim]{opacity:1!important;transform:none!important;transition:none!important}
[data-best-float],[data-best-panel].best-panel-in,.best-toast{animation:none!important}
[data-best-header]{transition:none}
}