/* =====================================================================
   animasi.css — animasi & penyempurnaan tampilan ponsel
   Dimuat SETELAH gaya.css di index.html dan en/index.html
   ===================================================================== */

/* ---------- progres gulir ---------- */
.progres-gulir { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--oranye), #ffb076); z-index: 70; transition: width .12s linear; }

/* ---------- header mengecil saat digulir ---------- */
.header { transition: box-shadow .25s, background .25s; }
.header .wadah { transition: min-height .25s; }
.header.kecil { box-shadow: 0 6px 24px rgba(11,42,74,.10); background: rgba(255,255,255,.97); }
.header.kecil .wadah { min-height: 62px; }
.merek img { transition: transform .25s; }
.header.kecil .merek img { transform: scale(.88); }

/* ---------- keyframes ---------- */
@keyframes naik { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kanan { from { opacity: 0; transform: translateX(34px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes apung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes orbit { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8%, 6%) scale(1.15); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes kilau { 0% { transform: translateX(-140%) skewX(-20deg); } 100% { transform: translateX(240%) skewX(-20deg); } }
@keyframes denyut { 0%, 100% { box-shadow: 0 10px 25px rgba(37,211,102,.45); } 50% { box-shadow: 0 10px 25px rgba(37,211,102,.45), 0 0 0 12px rgba(37,211,102,.12); } }
@keyframes geser { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- hero: masuk bertahap & latar bergerak ---------- */
.hero::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; right: -25vmax; top: -30vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242,107,29,.28), transparent 70%); animation: orbit 18s ease-in-out infinite; }
.hero .wadah > div:first-child > * { animation: naik .8s cubic-bezier(.2,.7,.2,1) both; }
.hero .label { animation-delay: .05s; }
.hero h1 { animation-delay: .18s; }
.hero p.pengantar { animation-delay: .32s; }
.hero .aksi { animation-delay: .46s; }
.hero .angka { animation-delay: .6s; }
.kolase { animation: kanan 1s cubic-bezier(.2,.7,.2,1) .35s both; }
.kolase img { animation: kenburns 16s ease-in-out infinite alternate; }
.kolase figure:nth-child(2) img { animation-delay: -5s; }
.kolase figure:nth-child(3) img { animation-delay: -10s; }
.kolase .stempel { animation: apung 4s ease-in-out infinite; }

/* ---------- kilau tombol utama & denyut WA ---------- */
.tombol-utama { position: relative; overflow: hidden; }
.tombol-utama::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-140%) skewX(-20deg); }
.tombol-utama:hover::after { animation: kilau .8s ease; }
.wa-apung { animation: denyut 2.4s ease-in-out infinite; transition: transform .2s; }

/* ---------- judul seksi: garis tumbuh saat terlihat ---------- */
.kepala h2 { position: relative; padding-bottom: .55rem; }
.kepala h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 56px; border-radius: 2px; background: var(--oranye); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1) .25s; }
.kepala.tengah h2::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; }
.kepala.tampak h2::after { transform: scaleX(1); }
.kepala.tengah.tampak h2::after { transform: translateX(-50%) scaleX(1); }

/* ---------- pita klien berjalan (marquee) ---------- */
.pita-klien .wadah { flex-direction: column; gap: .9rem; }
.pita-klien .jalur { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pita-klien .logo-klien { display: flex; flex-wrap: nowrap; width: max-content; gap: 3.5rem; padding-right: 3.5rem; animation: geser 28s linear infinite; }
.pita-klien .jalur:hover .logo-klien { animation-play-state: paused; }
.pita-klien .logo-klien > * { flex: none; white-space: nowrap; }

/* ---------- kartu: reaksi sentuh ---------- */
.layanan .ikon, .kartu-vm article h3 i, .kontak-daftar i { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s; }
.layanan:hover .ikon { transform: translateY(-3px) rotate(-6deg); }
.unggul { transition: transform .25s, background .25s, border-color .25s; }
.unggul:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.jabatan { transition: transform .25s, box-shadow .25s; }
.jabatan:hover { transform: translateY(-3px); box-shadow: var(--bayang); }
.muncul { transition-duration: .75s; }

/* ---------- lightbox: muncul halus ---------- */
.lightbox { opacity: 0; transition: opacity .25s; }
.lightbox.tampil { opacity: 1; }
.lightbox img { transform: scale(.96); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.lightbox.tampil img { transform: scale(1); }

/* ---------- menu ponsel: tirai & tombol tutup ---------- */
.tirai { position: fixed; inset: 0; background: rgba(7,26,48,.55); backdrop-filter: blur(3px); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .25s; }
.tirai.tampil { opacity: 1; pointer-events: auto; }
.nav .tutup-menu { display: none; }

/* ---------- bar aksi bawah (hanya ponsel) ---------- */
.bar-aksi { display: none; }

/* =========================== PONSEL / TABLET =========================== */
@media (max-width: 820px) {
  body { padding-bottom: 66px; }
  /* backdrop-filter pada header membuat nav fixed terkurung di kotak header -> matikan di ponsel */
  .header, .header.kecil { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.98); }
  .tombol-menu { width: 44px; height: 44px; border-radius: 12px; background: var(--latar-2); display: grid; place-items: center; }
  .nav { width: min(340px, 88vw); padding: 1.2rem 1.4rem 2rem; gap: .2rem; background: #fff; box-shadow: -20px 0 60px rgba(0,0,0,.25); transition: transform .32s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
  .nav .tutup-menu { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 1rem; border-bottom: 1px solid var(--garis); margin-bottom: .6rem; }
  .nav .tutup-menu b { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teks-2); }
  .nav .tutup-menu button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--garis); background: #fff; color: var(--navy); font-size: 1.4rem; line-height: 1; cursor: pointer; }
  .nav a { border-bottom: 1px solid var(--garis); padding: .85rem .2rem; font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateX(18px); transition: opacity .35s, transform .35s; }
  .nav a::after { content: "\203A"; color: var(--oranye); font-size: 1.3rem; }
  .nav a.tombol { border: 0; justify-content: center; margin-top: 1.2rem; width: 100%; }
  .nav a.tombol::after { content: none; }
  .nav.terbuka a { opacity: 1; transform: none; }
  .nav.terbuka a:nth-child(2) { transition-delay: .05s; } .nav.terbuka a:nth-child(3) { transition-delay: .09s; } .nav.terbuka a:nth-child(4) { transition-delay: .13s; }
  .nav.terbuka a:nth-child(5) { transition-delay: .17s; } .nav.terbuka a:nth-child(6) { transition-delay: .21s; } .nav.terbuka a:nth-child(7) { transition-delay: .25s; }
  .nav.terbuka a:nth-child(8) { transition-delay: .29s; } .nav.terbuka a:nth-child(9) { transition-delay: .33s; }

  .bar-aksi { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--garis); box-shadow: 0 -8px 30px rgba(11,42,74,.08); }
  .bar-aksi a { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 46px; border-radius: 12px; font-weight: 700; font-size: .85rem; text-decoration: none !important; border: 1px solid var(--garis); color: var(--navy); background: #fff; }
  .bar-aksi a svg { width: 18px; height: 18px; flex: none; }
  .bar-aksi a.wa { background: #25d366; border-color: #25d366; color: #fff; }
  .bar-aksi a.utama { background: var(--oranye); border-color: var(--oranye); color: #fff; box-shadow: 0 6px 16px rgba(242,107,29,.35); }
  .wa-apung { display: none; }
  body.menu-terbuka .bar-aksi { display: none; }
  .lightbox .keterangan { bottom: 84px; }

  .hero .wadah { padding: 2.6rem 0 2.4rem; gap: 2rem; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero p.pengantar { font-size: 1rem; }
  .hero .aksi .tombol { flex: 1 1 auto; justify-content: center; }
  .hero .angka { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem; margin-top: 2rem; }
  .hero .angka div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .8rem .9rem; }
  .hero .angka div b { font-size: 1.6rem; }
  .kolase { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 22px; margin: 0 -4px; grid-template-columns: none; grid-template-rows: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .kolase::-webkit-scrollbar { display: none; }
  .kolase figure { flex: 0 0 78%; height: 230px; scroll-snap-align: start; grid-row: auto; }
  .kolase .stempel { right: 8px; bottom: 0; }

  .seksi { padding: 3.4rem 0; }
  .kepala { margin-bottom: 1.8rem; }
  .kepala p { font-size: .98rem; }
  .layanan, .produk .isi, .proyek .isi { padding: 1.25rem 1.15rem; }
  .produk .gambar, .proyek .gambar { height: 190px; }
  .galeri { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 140px; gap: 8px; }
  .galeri a span { opacity: 1; }
  .tabel-bungkus { margin-top: 1.6rem; }
  th, td { padding: .7rem .8rem; font-size: .85rem; white-space: nowrap; }
  .bagan .baris { gap: .6rem; }
  .jabatan { min-width: 0; flex: 1 1 42%; padding: .7rem .6rem; }
  .ajakan .wadah { padding: 2.4rem 0; }
  .ajakan .tombol { width: 100%; justify-content: center; }
  .formulir { padding: 1.3rem 1.1rem; }
  .peta iframe { height: 260px; }
  .footer .wadah { padding: 2.6rem 0 1.8rem; gap: 1.6rem; }
}
@media (max-width: 560px) {
  .bar-atas .wadah { min-height: 34px; justify-content: space-between; flex-wrap: nowrap; }
  .bar-atas .kontak-mini span:nth-child(2), .bar-atas .kontak-mini span:nth-child(3), .bar-atas .kanan-atas > span:first-child { display: none; }
  .merek b { font-size: .92rem; }
  .merek small { font-size: .62rem; }
  .pita-klien .logo-klien { gap: 2.2rem; animation-duration: 20s; }
  .pita-klien img { height: 28px; }
  .logo-teks { font-size: .9rem; }
  .fakta { gap: .7rem; }
}

/* ---------- hormati preferensi gerak minimal ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .wadah > div:first-child > *, .kolase, .kolase img, .kolase .stempel, .hero::after, .wa-apung, .pita-klien .logo-klien { animation: none !important; }
  .kepala h2::after { transform: none !important; transition: none; }
  .nav a { opacity: 1 !important; transform: none !important; transition: none !important; }
}