/* APSA — sistem gerak. Satu set durasi & easing untuk seluruh situs.
   Prinsip: gerak = umpan balik / penunjuk arah. Hanya transform & opacity. Mati total bila "kurangi gerakan" aktif. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--t-fast:160ms;--t-base:240ms;--t-slow:420ms}

/* 1. Umpan balik tekan: semua tombol & CTA mengecil sedikit saat ditekan (berfungsi juga di layar sentuh) */
.apsa-btn,.btn,.hub-go,.hub-tab,.hub-mode button,.hub-chips button,.chip-btn,.tabs button,.tv-wa,.tv-item,.xs-card,.opt button,.apsa-ctl,.apsa-thumb{-webkit-tap-highlight-color:transparent}
.apsa-btn:active,.btn:active,.hub-go:active,.hub-mode button:active,.hub-chips button:active,.chip-btn:active,.tabs button:active,.tv-wa:active,.opt button:active,.apsa-ctl:active{transform:scale(.97);transition-duration:80ms}
.hub-tab:active .hub-ic{transform:scale(.92)}
.btn,.chip-btn,.tabs button,.opt button,.hub-chips button{transition:transform var(--t-fast) var(--ease),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.tv-item{transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.tv-item svg{transition:transform var(--t-base) var(--ease)}
.tv-item:hover svg{transform:translateY(-1px)}

/* 2. Fokus keyboard yang jelas & seragam */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #7FD8FF;outline-offset:2px;border-radius:10px}
.hub-f :focus-visible{outline:none}

/* 3. Kartu: angkat halus + gambar zoom ringan — hanya di perangkat dengan hover sungguhan */
.card .ph,.apsa-card [role=img]{overflow:hidden}
.card .ph img,.apsa-card img{transition:transform .7s var(--ease)}
@media (hover:hover){
  .card:hover .ph img,.apsa-card:hover img{transform:scale(1.045)}
  .card,.apsa-card{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
  .card:hover,.apsa-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(14,20,24,.12)}
  .xs-card:hover .xs-go{transform:translateX(3px)}
}
.xs-go{transition:transform var(--t-base) var(--ease)}

/* 4. Hero: masuk berurutan sekali saat halaman dibuka; foto latar bergerak sangat pelan */
.hub-hi>*,.hub-card{animation:apIn .6s var(--ease) both}
.hub-hi>:nth-child(2){animation-delay:.06s}.hub-hi>:nth-child(3){animation-delay:.12s}.hub-card{animation-delay:.18s}
main.wrap>.hero>*{animation:apIn .5s var(--ease) both}
main.wrap>.hero>:nth-child(2){animation-delay:.05s}main.wrap>.hero>:nth-child(3){animation-delay:.1s}
@keyframes apIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hub-band::before{animation:apDrift 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes apDrift{from{transform:scale(1)}to{transform:scale(1.07) translate3d(-1%,-1%,0)}}

/* 5. Muncul saat di-scroll — CSS murni (tanpa JS), konten tetap terlihat di browser yang belum mendukung */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv,.card,.xs-card,.apsa-card,.apsa-tile,main>section:not(#cari):not([aria-roledescription]) h2{animation:apRise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes apRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* 6. Perpindahan halaman yang lembut (browser modern), tidak menghambat navigasi */
@view-transition{navigation:auto}
::view-transition-old(root){animation:apFadeOut .16s var(--ease-in) both}
::view-transition-new(root){animation:apFadeIn .22s var(--ease) both}
@keyframes apFadeOut{to{opacity:0}}
@keyframes apFadeIn{from{opacity:0}}

/* 7. Status memuat harga: kilau halus pada teks "Menghitung…" */
#rule.busy{background:linear-gradient(90deg,#3A4651 0%,#9FB3C2 50%,#3A4651 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:apShimmer 1.2s linear infinite}
@keyframes apShimmer{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}