/* GenZi - UX layer: menu seluler, sasaran sentuh, gerak masuk viewport.
   Dimuat sesudah style.css + inner.css supaya bisa menimpa keduanya. */

/* ------------------------------------------------------------ menu seluler */
/* perlu !important: .button.small (aturan lama) memakai !important dan menimpanya */
.nav-toggle{display:none!important;width:46px!important;height:46px!important;flex:0 0 auto;border:1px solid #e6def6;
  background:#ffffffcc;border-radius:13px;cursor:pointer;padding:0;
  transition:border-color .2s, background .2s}
.nav-toggle:hover{border-color:#cbbcef;background:#fff}
.nav-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.nav-toggle__bars{display:grid;gap:5px;width:18px}
.nav-toggle__bars i{display:block;height:2px;border-radius:2px;background:#4c4460;transition:transform .25s, opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav-panel{max-width:1360px;margin:0 auto;padding:16px 20px 22px;
  background:#fdfcff;border:1px solid #ece6f7;border-radius:0 0 22px 22px}
.nav-panel[hidden]{display:none}
.nav-panel nav{display:flex;flex-direction:column;gap:0}
.nav-panel nav a{display:flex;align-items:center;min-height:52px;font-size:15px;font-weight:600;
  color:var(--ink);border-bottom:1px solid #f0ebf8}
#navPanel nav a:last-of-type{border-bottom:0}
.nav-panel nav a:hover,.nav-panel nav a[aria-current="page"]{color:var(--purple)}
.nav-panel__cta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;margin-top:14px;padding:0 18px;border-radius:14px;
  background:linear-gradient(115deg,#8e59db,#7562e3);color:#fff;font-weight:600;font-size:14px}
.nav-panel__note{margin:12px 0 0;font-size:11.5px;color:var(--muted)}
.nav-panel.is-open{animation:gz-panel .28s ease-out both}
@keyframes gz-panel{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ sentuh */
@media(pointer:coarse){
  nav a,.button,select,textarea,summary,.card-foot a,.close,#copy,label[for]{min-height:44px}
}
.prose a,.panel a:not(.button),.note-card a,.facts a,.text-link{position:relative}
.prose a::after,.panel a:not(.button)::after,.note-card a::after,.text-link::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* ------------------------------------------------------------ teks terbaca */
/* tombol menu: dari lebar tablet ke bawah (nav belum muat penuh di 620-900) */
@media(max-width:900px){
  .nav-toggle{display:grid!important;place-items:center}
  .nav-panel{max-width:100%;margin:0;border-radius:0;border-left:0;border-right:0}
}

@media(max-width:620px){
  /* input di bawah 16px membuat Safari iOS memperbesar halaman saat diketik.
     !important + pemilih konkret perlu karena inner.css memakai `font:` shorthand
     pada `.field input` yang bobotnya lebih tinggi. */
  input,select,textarea,
  input[type=text],input[type=email],input[type=tel],.field input,.field select,.field textarea{
    font-size:16px!important}
  label{font-size:13px}
  .field label{font-size:13px}
  .eyebrow{font-size:9.5px;letter-spacing:1.3px}
  .hero-copy>p{font-size:14px}
  .hero-note p{font-size:11.5px}
  .intro,.section-heading>p,.steps p,.solutions>div>p,.contact p{font-size:13px}
  .faq details,.faq summary{font-size:14px}
  .faq p{font-size:13px}
  .panel p,.prose p,.prose ul,.prose ol{font-size:15px}
  .facts>div,.contact-facts>div{font-size:13px}
  .chips span,.svc-head .tag{font-size:12px}
  .svc-head .num{font-size:12.5px}
  .eyebrow.centered,.page-head .crumb{font-size:12px;letter-spacing:.2px}
  footer,footer p{font-size:12.5px}
  footer small{font-size:11px}
  .hero-bottom{display:none}
}

/* ------------------------------------------------------ gerak saat menggulir */
.gz-anim{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1) var(--gz-delay,0ms),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--gz-delay,0ms);
  will-change:opacity, transform}
.gz-anim.is-in{opacity:1;transform:none}

/* kartu dan ikon ikut bernafas halus, hanya kalau pengguna tidak memintanya berhenti */
@media(prefers-reduced-motion:no-preference){
  .float-tag{animation:gz-float 7s ease-in-out infinite}
  .tag2{animation-delay:-3.4s}
  .hero-note>span{animation:gz-pulse 4.5s ease-in-out infinite}
  .hero-note>span:nth-child(2){animation-delay:-1.6s}
  .hero-art img{animation:gz-tilt 12s ease-in-out infinite}
  .card:hover,.service:hover{transform:translateY(-4px)}
  .card,.service{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
}
@keyframes gz-float{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-9px) rotate(2deg)}
}
@keyframes gz-tilt{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(5deg) translateY(-12px)}}
@keyframes gz-pulse{0%,100%{box-shadow:0 0 0 0 #a082e23d}50%{box-shadow:0 0 0 7px #a082e200}}

/* tertutup tombol menu saat panel terbuka: kunci gulir latar */
html.nav-open{overflow:hidden}
@media(max-width:620px){
  html.nav-open body{overflow:hidden}
}

/* ------------------------------------------------------------- kurangi gerak */
@media(prefers-reduced-motion:reduce){
  .gz-anim{opacity:1;transform:none;transition:none}
  .float-tag,.tag2,.hero-note>span,.hero-art img{animation:none}
  .nav-panel.is-open{animation:none}
}