/* Simak Web di HP: spanduk pasang/cadangan, pemberitahuan kecil, bagian iPhone di Pengaturan. Hanya versi web. */
.pwa-spanduk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 0 14px 8px; padding: 8px 8px 8px 12px; border-radius: calc(12px * var(--sudut, 1)); background: var(--aksen-lembut); color: var(--teks); font-size: 12.5px; flex: none; }
.pwa-spanduk-teks { flex: 1 1 170px; }
.pwa-spanduk-aksi { display: flex; gap: 6px; }
.pwa-spanduk .tombol { white-space: nowrap; }
.pwa-bagian { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pwa-bagian .baris-tombol { display: flex; flex-wrap: wrap; gap: 8px; }
.pwa-tunggu { display: flex; flex-direction: column; gap: 6px; }
.pwa-tunggu-form { display: flex; gap: 6px; }
.pwa-tunggu-form .isian { flex: 1; min-width: 0; margin: 0; }
/* Umpan bot: keluar layar, bukan display:none (sebagian bot melewati isian yang disembunyikan). */
.pwa-umpan { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pwa-langkah { margin: 0 0 14px; padding-left: 20px; line-height: 1.5; }
.pwa-langkah li + li { margin-top: 6px; }
#dialog-pasang p { margin: 0 0 10px; font-size: 13px; }
#dialog-pasang .pwa-tunggu { margin: 4px 0 14px; }
/* Di atas (bukan bawah) supaya tidak menutupi tombol rekam/stop di dock. */
.pwa-kabar { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 1000; max-width: min(92vw, 420px); padding: 10px 14px; border-radius: calc(12px * var(--sudut, 1)); background: var(--teks); color: var(--kartu); font-size: 13px; line-height: 1.4; box-shadow: var(--bayang); }
.pwa-kabar[hidden] { display: none; }
/* Modal pasang: ikon Simak di atas, langkah dengan ikon tombol aslinya (Bagikan, Tambah). */
.pwa-modal-pasang { max-width: 360px; }
.pwa-pasang-kepala { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 14px; }
.pwa-pasang-kepala h3 { margin: 4px 0 0; }
.pwa-pasang-logo { width: 64px; height: 64px; border-radius: 22%; box-shadow: var(--bayang); }
#dialog-pasang .pwa-pasang-sub { margin: 0; color: var(--redup, inherit); }
.pwa-langkah-ikon { list-style: none; padding-left: 0; counter-reset: langkah; }
.pwa-langkah-ikon li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: calc(10px * var(--sudut, 1)); background: var(--aksen-lembut); counter-increment: langkah; }
.pwa-langkah-ikon li::before { content: counter(langkah); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--aksen); color: var(--kartu); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.pwa-langkah-ikon li + li { margin-top: 6px; }
.pwa-ikon-langkah { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--aksen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-langkah-ikon li span { font-size: 13px; line-height: 1.45; }
.pwa-pasang-lipat { margin: 0 0 12px; font-size: 13px; }
.pwa-pasang-lipat summary { cursor: pointer; color: var(--aksen); }
.pwa-pasang-lipat .pwa-tunggu { margin-top: 8px; }
/* Tombol "Pasang" di bilah atas: pil kecil, terlihat jelas tapi tidak merebut perhatian dari tombol rekam. */
.pwa-tombol-pasang { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: var(--aksen-lembut); color: var(--aksen); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pwa-tombol-pasang .pwa-ikon-langkah { width: 16px; height: 16px; }
.pwa-tombol-pasang:hover { filter: brightness(.96); }
@media (pointer: coarse) { .pwa-tombol-pasang { height: 44px; padding: 0 10px 0 8px; } }


/* Lencana build uji (tanpa batas percobaan): kecil, tidak menggantikan apa pun */
.lencana-uji { display: block; margin: 0 14px 8px; padding: 3px 10px; width: fit-content; border-radius: 999px; background: var(--aksen-lembut); color: var(--aksen); font-size: 12px; font-weight: 600; }
.lencana-uji[hidden] { display: none; }