/* [codex] Motion overlay: native states work without this enhancement. / Animasi tambahan tanpa library. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:160ms;animation-timing-function:var(--ease-out)}
::view-transition-old(root),::view-transition-new(root){animation-duration:160ms;animation-timing-function:var(--ease-out)}
::view-transition{pointer-events:none}
[data-motion-disclosure] [data-motion-panel]{animation:none!important;transform-origin:top left}
.nav-disclosure summary>span:last-child{transition:transform 180ms var(--ease-out)}
.nav-disclosure[data-disclosure-state=closing] summary>span:last-child{transform:none}
.nav-disclosure[data-disclosure-state=closing] summary{font-weight:400}
.mobile-menu[data-motion-drawer]{animation:none!important}
.mobile-menu[data-motion-drawer]::backdrop{opacity:0;transition:opacity 240ms var(--ease-drawer)}
.mobile-menu[data-drawer-state=open]::backdrop{opacity:1}
.disclosure-panel{transform-origin:top left}
html[data-motion-input=keyboard] .nav-disclosure summary>span:last-child,html[data-motion-input=keyboard] .mobile-menu::backdrop{transition:none}
html[data-motion-input=keyboard]::view-transition-group(root),html[data-motion-input=keyboard]::view-transition-old(root),html[data-motion-input=keyboard]::view-transition-new(root){animation-duration:0s}
@media(prefers-reduced-motion:reduce){
 .nav-disclosure summary>span:last-child,.mobile-menu::backdrop{transition:none}
 ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:0s}
}
/* [codex] Native menu state feedback; JS controls an interruptible opacity/transform transition. */
.mobile-menu[data-motion-drawer]{transform-origin:right center}
.mobile-menu[data-motion-drawer]::backdrop{transition:opacity 250ms var(--ease-drawer)}
.mobile-toggle>span{transform-origin:center;transition:transform 180ms var(--ease-out)}
.mobile-toggle[aria-expanded=true]>span:first-child{transform:translateY(3.75px) rotate(45deg)}
.mobile-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav-disclosure>summary{transition:color 180ms ease}
.nav-disclosure[data-disclosure-state=open]>summary{color:#315d48}
html[data-motion-input=keyboard] .mobile-toggle>span,html[data-motion-input=keyboard] .mobile-menu[data-motion-drawer]::backdrop{transition:none}
.mobile-menu[data-motion-instant=true]::backdrop{transition:none}
@starting-style{.mobile-menu[data-motion-drawer][open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){.mobile-toggle>span,.mobile-menu[data-motion-drawer]::backdrop,.nav-disclosure>summary{transition:none}}
/* [claude] Keyboard focus scrolls instantly so validation focus is not carried away by a pending smooth scroll. / Scroll fokus keyboard langsung, tanpa animasi. */
html[data-motion-input=keyboard]{scroll-behavior:auto}