/* =====================================================
   unduh.css - halaman Unduh Aplikasi (2026-11-02, pemilik). Tata letak ala toko aplikasi (ikon + nama, baris angka,
   tombol Instal, deretan gambar layar, bagian-bagian berjudul), warna & huruf sistem desain ZonaAsupan69 (app.css),
   ikut tema terang/gelap. Tanpa menu bawah (halaman untuk calon pengguna).
   ===================================================== */
.ud-body { min-height: 100dvh; }
.ud-kepala { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 620px; margin: 0 auto; padding: 10px 16px; background: var(--z-page); border-bottom: 1px solid var(--z-border); }
.ud-logo img { display: block; width: 150px; height: auto; }
.ud-buka { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; text-decoration: none;
  font-size: 12.5px; font-weight: 700; color: var(--z-accent); border: 1px solid var(--z-border); }
/* 2026-11-03: isi di atas lapisan hiasan latar app.css (tema terang: pola wajik menutupi isi tanpa ini) */
.ud { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 18px 16px 40px; color: var(--z-text); }

.ud-app { display: flex; align-items: center; gap: 16px; }
.ud-ikon { width: 88px; height: 88px; flex: none; border-radius: 22px; box-shadow: 0 6px 18px rgba(62, 20, 168, .18); }
.ud-id h1 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.2px; }
.ud-dev { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--z-accent); text-decoration: none; }
.ud-id p { margin: 2px 0 0; font-size: 12px; color: var(--z-text3); }

.ud-stat { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 16px; padding: 0; }
.ud-stat > div { display: grid; justify-items: center; gap: 2px; padding: 0 4px; text-align: center; }
.ud-stat > div + div { border-left: 1px solid var(--z-border); }
.ud-stat dt { font-size: 14.5px; font-weight: 800; }
.ud-stat dd { margin: 0; font-size: 11px; color: var(--z-text3); }
.ud-18 { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 4px; border-radius: 5px; font-size: 11px; font-weight: 800; color: #fff; background: #e10600; }

.ud-instal { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 14px; text-decoration: none;
  font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #a786dc 0%, #9069c9 50%, #7550b0 100%); box-shadow: 0 4px 0 #5a3d8c; }
.ud-instal:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a3d8c; }
.ud-catatan { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--z-text3); text-align: center; }
.ud-catatan a, .ud-kaki a { color: var(--z-accent); }

.ud-sek { margin-top: 26px; }
.ud-sek h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.ud-sek p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--z-text2); }
.ud-geser { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.ud-geser::-webkit-scrollbar { display: none; }
.ud-geser img { flex: 0 0 auto; width: 150px; height: auto; aspect-ratio: 360 / 779; border-radius: 14px; scroll-snap-align: start; border: 1px solid var(--z-border); background: #0e0e10; }
.ud-chip { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ud-chip li { padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--z-text2); border: 1px solid var(--z-border); }
.ud-versi { margin-bottom: 8px !important; font-size: 12px !important; color: var(--z-text3) !important; }
.ud-daftar, .ud-langkah { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--z-text2); }
.ud-daftar b, .ud-langkah b, .ud-aman b { color: var(--z-text); }
.ud-kecil { margin-top: 10px !important; font-size: 12px !important; color: var(--z-text3) !important; }
.ud-aman { display: grid; gap: 12px; margin: 0 0 12px; padding: 14px; list-style: none; border-radius: 16px; border: 1px solid var(--z-border); background: var(--z-panel); }
.ud-aman li { display: grid; gap: 2px; font-size: 13.5px; }
.ud-aman span { font-size: 12.5px; color: var(--z-text3); }
.ud-tautan { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; padding: 0 14px; border-radius: 12px; text-decoration: none;
  font-size: 13px; font-weight: 700; color: var(--z-accent); border: 1px solid var(--z-border); }
.ud-info { display: grid; gap: 10px; margin: 0; padding: 14px; border-radius: 16px; border: 1px solid var(--z-border); background: var(--z-panel); }
.ud-info > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 13px; }
.ud-info dt { color: var(--z-text3); }
.ud-info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ud-hash { font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 400 !important; }
.ud-instal2 { margin-top: 28px; }
.ud-kaki { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--z-text3); }
@media (prefers-reduced-motion: reduce) { .ud-instal:active { transform: none; } }

/* 2026-11-03 pemilik: kotak lipat Yang baru & Cara memasang (details/summary, tanpa skrip) */
.ud-lipat { border-radius: 16px; border: 1px solid var(--z-border); background: var(--z-panel); }
.ud-lipat > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 10px 14px;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.ud-lipat > summary::-webkit-details-marker { display: none; }
.ud-lipat > summary span { display: grid; gap: 2px; }
.ud-lipat > summary b { font-size: 16px; font-weight: 800; color: var(--z-text); }
.ud-lipat > summary small { font-size: 12px; color: var(--z-text3); }
.ud-lipat > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--z-accent); border-bottom: 2px solid var(--z-accent);
  transform: rotate(45deg); transition: transform .2s; }
.ud-lipat[open] > summary::after { transform: rotate(-135deg); }
.ud-lipat > summary:focus-visible { outline: 2px solid var(--z-accent); outline-offset: 2px; border-radius: 16px; }
.ud-lipat > ul, .ud-lipat > ol { margin: 0 14px 0 2px; padding: 4px 14px 2px 32px; }
.ud-lipat > .ud-kecil { margin: 10px 14px 14px !important; }
.ud-lipat > ul:last-child { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .ud-lipat > summary::after { transition: none; } }