/* Efek gerak E-Library IAI Yapnas (v1.24). Semua efek mati bila perangkat memilih "kurangi gerakan". */
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fx-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fx-zoom-in{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes fx-kb{from{scale:1.09}to{scale:1}}
@keyframes fx-flare{0%{transform:translateX(-130%) skewX(-18deg);opacity:0}25%{opacity:.55}100%{transform:translateX(230%) skewX(-18deg);opacity:0}}
main#main{animation:fx-fade .55s ease both}
.site-header{animation:fx-drop .6s cubic-bezier(.2,.8,.2,1) both}
.el-topbar{animation:fx-fade .8s ease both}
.el-hero-in>*{animation:fx-rise .75s cubic-bezier(.2,.8,.2,1) both}
.el-hero-in>.el-badge{animation-delay:.05s}
.el-hero-in>.el-h1{animation-delay:.15s}
.el-hero-in>.el-h2{animation-delay:.28s}
.el-hero-in>.el-desc{animation-delay:.4s}
.el-hero-in>.el-btns{animation-delay:.52s}
.el-hero-in>.el-os{animation-delay:.68s;animation-name:fx-zoom-in}
.el-btns .el-btn{animation:fx-zoom-in .55s cubic-bezier(.2,.9,.3,1.3) both}
.el-btns .el-btn:nth-child(1){animation-delay:.6s}.el-btns .el-btn:nth-child(2){animation-delay:.72s}
.el-btns .el-btn:nth-child(3){animation-delay:.84s}.el-btns .el-btn:nth-child(4){animation-delay:.96s}
.el-hero .slide{transform:translateX(4%) scale(1.04);transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.2,.7,.2,1)}
.el-hero .slide.active{transform:none;animation:fx-kb 9s ease-out both}
.el-hero{position:relative;overflow:hidden}
.el-hero::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);pointer-events:none;animation:fx-flare 5.5s ease-in-out 1.2s infinite;z-index:1}
.el-hero-in{position:relative;z-index:2}
.el-badge{animation:fx-pulse 3.4s ease-in-out 1.4s infinite}
@keyframes fx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}50%{box-shadow:0 0 0 8px rgba(249,115,22,.18)}}
#dots button{transition:transform .25s,background .25s,width .25s}
#dots button.on{transform:scale(1.25)}
.sl-btn{transition:transform .2s,background .2s}.sl-btn:hover{transform:scale(1.12)}
html.fx-on .fx{opacity:0;transform:translateY(28px);transition:opacity .7s ease var(--fxd,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--fxd,0s);will-change:opacity,transform}
html.fx-on .fx[data-fx=left]{transform:translateX(-42px)}
html.fx-on .fx[data-fx=right]{transform:translateX(42px)}
html.fx-on .fx[data-fx=zoom]{transform:scale(.9)}
html.fx-on .fx.fx-in{opacity:1;transform:none}
@keyframes fx-wiggle{0%{transform:rotate(0)}18%{transform:rotate(-5deg) scale(1.05)}36%{transform:rotate(4deg) scale(1.05)}54%{transform:rotate(-3deg) scale(1.03)}72%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.btn,.btn-cari{position:relative;overflow:hidden}
.fx-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:fx-rip .6s ease-out forwards;pointer-events:none}
@keyframes fx-rip{to{transform:scale(4);opacity:0}}
.el-card:hover .el-card-ic,.jcard:hover .jicon{animation:fx-wiggle .7s ease both}
.el-card-more i{transition:transform .25s}.el-card:hover .el-card-more i{transform:translateX(5px)}
.cover-wave{transition:transform .3s,box-shadow .3s}.cover-wave:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 16px 30px rgba(0,0,0,.2)}
@media print{html.fx-on .fx{opacity:1!important;transform:none!important}.el-hero::after{display:none}}
@media(prefers-reduced-motion:reduce){
  main#main,.site-header,.el-topbar,.el-hero-in>*,.el-btns .el-btn,.el-hero .slide.active,.el-hero::after,.el-badge{animation:none!important}
  html.fx-on .fx{opacity:1!important;transform:none!important;transition:none!important}
  .el-hero .slide{transform:none}
}