/* Semua animasi aplikasi. Dimuat setelah app.css. */
:root {
  --pegas: cubic-bezier(.34, 1.56, .64, 1);
  --luncur: cubic-bezier(.2, .8, .2, 1);
}

.tombol, .tambah, .tab a { position: relative; overflow: hidden; }
.sapa { position: relative; overflow: hidden; }

/* Layar pembuka: tampil sekali tiap aplikasi dibuka, lalu menutup sendiri lewat CSS. */
.pembuka { display: none; }
.buka-pertama .pembuka { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #fff 0, #f1f4fa 55%, #dfe4f1 100%); animation: pembuka-tutup .5s 2.15s var(--luncur) forwards; }
.pembuka__isi { display: grid; justify-items: center; gap: 14px; }
.pembuka__logo { width: 112px; height: auto; transform-origin: 50% 70%; animation: pb-logo .8s var(--pegas) both; }
.pembuka__nama { display: grid; justify-items: center; font-style: italic; font-weight: 800; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.02em; }
.pembuka__nama span { display: block; animation: pb-teks .55s var(--luncur) both; }
.pembuka__nama span:first-child { color: var(--aksen); animation-delay: .95s; }
.pembuka__nama span:last-child { color: #003092; animation-delay: 1.07s; }
.pembuka__garis { position: relative; width: 120px; height: 4px; border-radius: 4px; background: #d5dbe9; overflow: hidden; animation: pb-teks .4s 1.15s both; }
.pembuka__garis::after { content: ''; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--utama), #fc6c18); transform-origin: 0 50%; animation: pb-isi .85s 1.2s var(--luncur) both; }

@keyframes pb-logo { from { opacity: 0; transform: translateY(22px) scale(.55) rotate(-10deg); } 55% { opacity: 1; } }
@keyframes pb-teks { from { opacity: 0; transform: translateY(14px); } }
@keyframes pb-isi { from { transform: scaleX(0); } }
@keyframes pembuka-tutup { to { opacity: 0; transform: scale(1.08); visibility: hidden; } }

@keyframes naik { from { opacity: 0; transform: translateY(18px); } }
@keyframes muncul { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@keyframes lompat { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(8px); } }
@keyframes denyut { 0% { box-shadow: 0 0 0 0 rgba(26, 163, 90, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(26, 163, 90, 0); } }
@keyframes denyut-utama { 0% { box-shadow: 0 0 0 0 rgba(0, 48, 146, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(0, 48, 146, 0); } }
@keyframes melayang { 50% { transform: translate(14px, -18px) scale(1.12); } }
@keyframes melaju { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-12px) rotate(-3deg); } }
@keyframes riak { to { transform: scale(2.6); opacity: 0; } }
@keyframes roti-masuk { from { opacity: 0; transform: translate(-50%, 16px) scale(.94); } }
@keyframes halaman-keluar { to { opacity: 0; transform: translateY(-8px); } }
@keyframes halaman-masuk { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  /* Perpindahan halaman: halaman lama memudar, halaman baru meluncur naik;
     kepala, tab, dan gambar produk berpindah mulus antarhalaman. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: halaman-keluar .16s ease-in both; }
  ::view-transition-new(root) { animation: halaman-masuk .34s var(--luncur) both; }
  ::view-transition-group(*) { animation-duration: .38s; animation-timing-function: var(--luncur); }
  .kepala, .bar { view-transition-name: kepala; }
  .tab { view-transition-name: tab; }
  .tab__tanda { view-transition-name: tab-tanda; }
  .aksi-bawah, .chat__tulis { view-transition-name: aksi; }

  /* Isi halaman masuk berurutan. */
  .layanan a, .kategori a, .kisi .kp, .geser .kp, .daftar-dokter .kd, .baris-pesanan, .baris-chat, .isi-keranjang li, .menu-baris, .angka a {
    animation: naik .5s var(--luncur) both;
    animation-delay: calc(var(--n, 0) * 38ms + 60ms);
  }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(2) { --n: 1; }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(3) { --n: 2; }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(4) { --n: 3; }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(5) { --n: 4; }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(6) { --n: 5; }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(7) { --n: 6; }
  :is(.layanan, .kategori, .kisi, .geser, .daftar-dokter, .isi-keranjang, .angka) > :nth-child(n + 8) { --n: 7; }
  .sapa > * { position: relative; z-index: 1; animation: naik .55s var(--luncur) both; }
  .sapa > :nth-child(2) { animation-delay: 70ms; }
  .sapa > :nth-child(3) { animation-delay: 140ms; }
  .layanan, .spanduk, .kelompok, .kepala-pesanan, .pd, .profil, .masuk > * { animation: naik .5s var(--luncur) both; }
  .pd { animation-delay: 80ms; }

  /* Bagian di bawah layar muncul saat digulir. */
  @supports (animation-timeline: view()) {
    .blok__judul, .kartu-resep, .cabang { animation: muncul linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }

  .sapa::before, .sapa::after { content: ''; position: absolute; border-radius: 50%; animation: melayang 9s ease-in-out infinite; }
  .sapa::before { width: 190px; height: 190px; right: -60px; top: -70px; background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 70%); }
  .sapa::after { width: 150px; height: 150px; left: -50px; bottom: -70px; background: radial-gradient(circle, rgba(255, 138, 61, .3), transparent 70%); animation-delay: -4s; }
  .spanduk__gambar { animation: melaju 3.2s ease-in-out infinite; }
  .kd__foto .on { animation: denyut 2s infinite; }
  .alur li.lewat:not(:has(~ li.lewat)) i { animation: denyut-utama 1.8s infinite; }
  .gelembung { animation: pop .28s var(--luncur) both; transform-origin: 0 100%; }
  .gelembung--saya { transform-origin: 100% 100%; }
  .roti:not([hidden]) { animation: roti-masuk .3s var(--pegas) both; }
  .kilat { animation: naik .4s var(--luncur) both; }
  .thumb .ik { transition: transform .35s var(--pegas); }
  .kp:hover .thumb .ik, .kp:active .thumb .ik { transform: scale(1.12) rotate(-6deg); }
  .layanan a:hover .layanan__ikon, .kategori a:hover span { transform: translateY(-3px); }
  .kategori a span { transition: transform var(--gerak); }
  .kp, .kd, .baris-pesanan, .baris-chat, .menu-baris { transition: transform var(--gerak), box-shadow var(--gerak); }
  .kp:active, .kd:active, .baris-pesanan:active, .baris-chat:active, .menu-baris:active { transform: scale(.98); }
}

/* Umpan balik sentuhan */
.riak { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: riak .55s ease-out forwards; }
.tambah.sukses { background: var(--utama); color: #fff; animation: lompat .4s var(--pegas); }
.lencana-angka.goyang { animation: lompat .45s var(--pegas); }
.terbang { position: fixed; z-index: 90; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--aksen); box-shadow: 0 4px 12px rgba(252, 108, 24, .5); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .buka-pertama .pembuka { animation: pembuka-tutup .2s .7s forwards !important; }
  .pembuka * { animation: none !important; }
}

/* Iklan popup: latar meredup, kartu masuk membal, tombol tutup menyusul. */
.iklan { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: rgba(8, 16, 36, 0); transition: background .28s ease-out, backdrop-filter .28s ease-out; }
.iklan[hidden] { display: none; }
.iklan.tampil { background: rgba(8, 16, 36, .62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.iklan__kartu { position: relative; width: min(100%, 400px, calc(100dvh - 120px)); opacity: 0; transform: translateY(36px) scale(.82); transition: transform .5s var(--pegas), opacity .24s ease-out; }
.iklan.tampil .iklan__kartu { opacity: 1; transform: none; }
.iklan__gambar { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px -12px rgba(0, 12, 48, .55), 0 0 0 1px rgba(255, 255, 255, .18); }
.iklan__gambar img { display: block; width: 100%; height: auto; }
.iklan__gambar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%); transform: translateX(-120%); pointer-events: none; }
.iklan.tampil .iklan__gambar::after { animation: iklan-kilau 1s .45s ease-out both; }
.iklan__tutup { position: absolute; top: -14px; right: -14px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--utama); color: #fff; box-shadow: 0 6px 16px rgba(0, 12, 48, .4); opacity: 0; transform: scale(.3) rotate(-90deg); transition: transform .4s .32s var(--pegas), opacity .2s .32s, background .18s; }
.iklan.tampil .iklan__tutup { opacity: 1; transform: none; }
.iklan__tutup:hover { background: var(--utama-tua); }
.iklan__tutup:active { transform: scale(.9); transition-delay: 0s; }
/* Menutup lebih singkat daripada membuka. */
.iklan.tutup { background: rgba(8, 16, 36, 0); -webkit-backdrop-filter: none; backdrop-filter: none; transition-duration: .2s; }
.iklan.tutup .iklan__kartu { opacity: 0; transform: translateY(14px) scale(.94); transition: transform .2s ease-in, opacity .2s ease-in; }
@keyframes iklan-kilau { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .iklan, .iklan__kartu, .iklan__tutup { transition-duration: .01s; transition-delay: 0s; }
  .iklan.tampil .iklan__gambar::after { animation: none; }
}

/* Banner pasang aplikasi: meluncur naik dari bawah, di atas bilah tab. */
.pasang { position: fixed; left: 50%; bottom: calc(var(--tab) + env(safe-area-inset-bottom) + 10px); z-index: 40; width: min(calc(100% - 24px), 456px); opacity: 0; transform: translate(-50%, calc(100% + var(--tab) + 30px)); transition: transform .55s var(--pegas), opacity .25s ease-out; }
.pasang[hidden] { display: none; }
.pasang.tampil { opacity: 1; transform: translate(-50%, 0); }
.pasang.tutup { opacity: 0; transform: translate(-50%, 40px); transition: transform .22s ease-in, opacity .22s ease-in; }
.pasang__gambar { display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fbfbfb; box-shadow: 0 14px 34px -10px rgba(0, 12, 48, .45), 0 0 0 1px rgba(0, 48, 146, .08); cursor: pointer; transition: transform .18s var(--luncur); }
.pasang__gambar:active { transform: scale(.975); }
.pasang__gambar img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; }
.pasang__tutup { position: absolute; top: -12px; right: -6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--tinta); color: #fff; box-shadow: 0 4px 10px rgba(0, 12, 48, .35); }
/* Bidang sentuh tombol tutup dibuat 44 px walau tampilannya 32 px. */
.pasang__tutup::after { content: ''; position: absolute; inset: -6px; }
/* Selagi banner pasang tampil, sisakan ruang di dasar halaman supaya tombol terakhir (misalnya "Berikutnya" di toko) tidak tertutup. */
body:has(.pasang.tampil) .app { padding-bottom: calc(var(--tab) + env(safe-area-inset-bottom) + 190px); }
body:has(.pasang.tampil) .roti { bottom: calc(var(--tab) + env(safe-area-inset-bottom) + 180px); }

/* Petunjuk memasang, untuk peramban yang tidak punya dialog pasang otomatis. */
.cara { position: fixed; inset: 0; z-index: 96; display: grid; align-items: end; justify-items: center; background: rgba(8, 16, 36, 0); transition: background .25s ease-out; }
.cara[hidden] { display: none; }
.cara.tampil { background: rgba(8, 16, 36, .6); }
.cara__lembar { width: min(100%, 480px); padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: #fff; text-align: center; transform: translateY(100%); transition: transform .4s var(--luncur); }
.cara.tampil .cara__lembar { transform: none; }
.cara__lembar img { margin: 0 auto 12px; border-radius: 16px; box-shadow: var(--bayang); }
.cara__lembar h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 14px; }
.cara__lembar ol { display: grid; gap: 10px; margin: 0 0 20px; text-align: left; counter-reset: langkah; }
.cara__lembar li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; counter-increment: langkah; }
.cara__lembar li::before { content: counter(langkah); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--utama-muda); color: var(--utama); font-weight: 800; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) {
  .pasang, .cara, .cara__lembar { transition-duration: .01s; }
}

/* Slide promo di beranda: geser sendiri, bisa diusap, karakter masuk tiap slide tampil. */
.promo-geser { margin-top: 18px; }
.promo-geser__rel { display: flex; gap: 12px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 20px; }
.promo-geser__rel::-webkit-scrollbar { display: none; }
.promo { position: relative; flex: 0 0 100%; scroll-snap-align: center; overflow: hidden; display: flex; min-height: 186px; padding: 18px 43% 18px 18px; border-radius: 20px; color: #fff; isolation: isolate; }
.promo--oranye { background: linear-gradient(125deg, #d94f08, #ff8a3d); }
.promo--biru { background: linear-gradient(125deg, #00226b, #1f55c4); }
.promo::before { content: ''; position: absolute; z-index: -1; right: -40px; top: -30px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 68%); }
.promo::after { content: ''; position: absolute; z-index: -1; right: 26%; bottom: -46px; width: 110px; height: 110px; border-radius: 50%; border: 14px solid rgba(255, 255, 255, .1); }
.promo__teks { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.promo h2 { font-size: 1.08rem; font-weight: 800; line-height: 1.22; margin: 2px 0 4px; }
.promo__teks > p:not(.spanduk__atas) { font-size: .84rem; line-height: 1.4; margin-bottom: 12px; opacity: .95; }
.promo .tombol--putih { color: var(--tinta); }
.promo__orang { position: absolute; right: 4px; bottom: -8px; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22)); transform-origin: 50% 100%; }
.promo-geser__titik { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.promo-geser__titik button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: #c3cadb; transition: width .3s var(--luncur), background .3s; }
.promo-geser__titik button::after { content: ''; position: absolute; inset: -12px -4px; }
.promo-geser__titik button[aria-selected="true"] { width: 24px; background: var(--utama); }
@media (prefers-reduced-motion: no-preference) {
  .promo.aktif .promo__orang { animation: orang-masuk .7s var(--pegas) both, orang-napas 4.5s .8s ease-in-out infinite; }
  .promo.aktif .promo__teks > * { animation: naik .5s var(--luncur) both; }
  .promo.aktif .promo__teks > :nth-child(2) { animation-delay: 70ms; }
  .promo.aktif .promo__teks > :nth-child(3) { animation-delay: 140ms; }
  .promo.aktif .promo__teks > :nth-child(4) { animation-delay: 210ms; }
  .promo.aktif::before { animation: promo-sinar 5s ease-in-out infinite; }
}
@keyframes orang-masuk { from { opacity: 0; transform: translate(46px, 18px) scale(.92); } }
@keyframes orang-napas { 50% { transform: translateY(-5px); } }
@keyframes promo-sinar { 50% { transform: scale(1.16); opacity: .75; } }

/* Menu bawah bergaya kaca: bilah kecil mengambang, tembus pandang dan buram, dengan pendar biru-oranye di tepinya.
   Menu yang terbuka ditandai ubin putih (.tab__tanda) yang ikut bergeser saat pindah halaman. */
.tab { bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 456px; padding: 0; border: 0; border-radius: 20px;
  background: linear-gradient(100deg, rgba(228, 236, 255, .8), rgba(255, 255, 255, .74) 50%, rgba(255, 234, 220, .8));
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: -12px 6px 24px -10px rgba(47, 107, 255, .55), 12px 6px 24px -10px rgba(255, 122, 31, .55), 0 10px 22px -10px rgba(0, 28, 90, .3), inset 0 1px 0 rgba(255, 255, 255, .9); }
/* Garis tepi bergradasi biru-oranye. Pseudo-elemen bernilai z negatif tetap tergambar DI ATAS latar induknya,
   jadi bagian tengahnya dilubangi dengan mask supaya kaca tidak ikut terwarnai. */
.tab::before { content: ''; position: absolute; inset: -1.5px; padding: 2px; border-radius: 21.5px; background: linear-gradient(100deg, #2f6bff, #a9c0ff 35%, #ffc9a6 65%, #ff7a1f); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; opacity: .75; }
.tab a { height: var(--tab-tinggi); gap: 1px; font-size: .64rem; color: #4d5568; overflow: visible; -webkit-tap-highlight-color: transparent; }
.tab a > * { position: relative; z-index: 1; }
/* Riak sentuh harus tetap di luar tata letak; aturan di atas lebih kuat daripada .riak dan dulu membuat menu melebar tiap ditekan. */
.tab a > .riak { position: absolute; z-index: 0; }
.tab__ikon { display: grid; place-items: center; width: 23px; height: 23px; transition: transform .28s var(--pegas); }
.tab__ikon img { width: 100%; height: 100%; filter: grayscale(.25) opacity(.8); transition: filter .25s; }
.tab__nama { transition: color .2s; white-space: nowrap; }
.tab a .tab__tanda { position: absolute; z-index: 0; inset: 5px 3px; top: 5px; bottom: 5px; left: 3px; width: auto; height: auto; margin: 0; border-radius: 15px; background: #fff; box-shadow: 0 4px 12px -3px rgba(0, 28, 90, .28), inset 0 0 0 1px rgba(0, 48, 146, .06); }
.tab a[aria-current] { color: var(--utama); }
.tab a[aria-current] .tab__ikon { transform: scale(1.12); }
.tab a[aria-current] .tab__ikon img { filter: none; }
.tab a[aria-current] .tab__nama { font-weight: 800; }
.tab a:active .tab__ikon { transform: scale(.8); transition-duration: .08s; }
.tab a:not([aria-current]):hover .tab__ikon img { filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tab { background: rgba(255, 255, 255, .96); } }
@media (prefers-reduced-motion: no-preference) {
  /* Menu yang sedang terbuka: ubin putih mengembang, ikon melompat masuk. */
  .tab a[aria-current] .tab__ikon { animation: tab-buka .55s var(--pegas) both; }
  .tab a[aria-current] .tab__tanda { animation: tab-ubin .45s var(--pegas) both; }
  /* Saat ditekan: ikon memantul sebelum halaman berpindah. */
  .tab a.ketuk .tab__ikon { animation: tab-ketuk .4s var(--pegas) both; }
  .tab a.ketuk .tab__ikon img { filter: none; }
  /* Pendar di tepi bilah berdenyut pelan, penanda bahwa ada menu di bawah. */
  .tab::before { animation: tab-pendar 4s ease-in-out infinite; }
  /* Pertama kali aplikasi dibuka: bilah naik dari bawah dan ikon muncul berurutan. */
  .buka-pertama .tab { animation: tab-naik .7s 2.3s var(--pegas) both; }
  .buka-pertama .tab a { animation: tab-muncul .5s var(--pegas) both; animation-delay: calc(2.5s + var(--n, 0) * 70ms); }
  .tab a:nth-child(2) { --n: 1; } .tab a:nth-child(3) { --n: 2; } .tab a:nth-child(4) { --n: 3; } .tab a:nth-child(5) { --n: 4; }
}
@keyframes tab-buka { 0% { transform: translateY(8px) scale(.5); } 55% { transform: translateY(-4px) scale(1.3); } 100% { transform: scale(1.12); } }
@keyframes tab-ubin { from { opacity: 0; transform: scale(.6); } }
@keyframes tab-ketuk { 0% { transform: scale(.78); } 45% { transform: translateY(-5px) scale(1.28) rotate(-6deg); } 100% { transform: scale(1.12); } }
@keyframes tab-pendar { 50% { opacity: 1; } }
@keyframes tab-naik { from { transform: translate(-50%, 140%); } }
@keyframes tab-muncul { from { opacity: 0; transform: translateY(14px) scale(.7); } }