/* ============================================
   File: public/pwa/style.css
   Deskripsi: Style PWA UI-1 + toast + carousel profil detail + nav mengambang + aksi kartu Xplore
   Tanggal: 2026-10-22
   Catatan: style LEGACY (chat, xpose, profil, kamera) ada di legacy.css
   Revisi: 2026-10-21 (S-6 FIX4) — tambah .app-toast, .no-anim (dan modal, sudah dihapus di S-7)
   Revisi: 2026-10-21 (S-7 FIX5) — hapus .app-modal* (modal dialog dibatalkan). Toast + .no-anim tetap.
   Revisi: 2026-10-21 (S-8 FIX6) — tambah section S-8 di akhir file: carousel foto, lock overlay, dots, error unlock (profile-detail.js)
   Revisi: 2026-10-21 (S-8b) — pwa-pd-lock: gradient radial tipis (foto blur terlihat); drop-shadow icon; backdrop-filter tombol.
   Revisi: 2026-10-22 (S-15) — #bottom-nav jadi floating pill; .nav-item-center (Xplore) = FAB gradient menonjol; ikon SVG;
           .user-card jadi kolom (.card-info + .card-actions) dengan tombol .btn-sapa (accent) & .btn-dm (primary);
           dark mode: bayangan + border biru tipis di kartu & nav; padding bawah #app-content & posisi toast/FAB Xpose
           disesuaikan agar tidak tertutup nav mengambang.
   Revisi: 2026-10-22 (S-15b) — .app-confirm* (sheet konfirmasi dalam app untuk Buka DM; z-index 960 di atas toast 950).
   Revisi: 2026-10-22 (S-16) — .xpand-hero-img (ilustrasi robot layar Xpand) + .nav-custom-icon (ikon PNG nav: redup saat tidak aktif).
   ============================================ */

/* ===== BASE ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; transition: transform var(--motion-press) var(--easing-standard); }
:where(button:not(:disabled)):active { transform: scale(0.97); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.muted { color: var(--text-secondary); }

/* ===== KEYFRAMES GLOBAL (hanya transform/opacity) ===== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes live-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ring-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.8; } } /* dipakai story ring (UI-2) */
@keyframes glow-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }

/* ===== HEADER ===== */
#app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-blur);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
#app-header h1 { font-size: var(--fs-17); font-weight: var(--fw-600); line-height: var(--lh-heading); }
body.is-login #app-header { display: none; }

/* ===== KONTEN UTAMA ===== */
/* padding bawah = tinggi pill nav + jarak bawah (12px) + ruang napas, supaya konten terakhir tidak tertutup nav mengambang */
#app-content {
  min-height: 100dvh;
  padding: calc(var(--header-h) + var(--safe-top) + var(--space-3)) var(--space-4)
           calc(var(--nav-h) + var(--safe-bottom) + var(--space-3) + var(--space-8));
  max-width: var(--content-max); margin: 0 auto;
}
body.is-login #app-content { padding: calc(var(--safe-top) + var(--space-4)) var(--space-4) calc(var(--safe-bottom) + var(--space-4)); }
.view-fade { animation: fade-in var(--motion-base) var(--easing-decelerate) backwards; }

.center-state {
  min-height: 50dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3); text-align: center; color: var(--text-secondary);
}
.splash-logo { font-size: var(--fs-48); line-height: 1; animation: ring-pulse 1.6s var(--easing-standard) infinite; }

/* ===== SPINNER (khusus tombol / waiting) ===== */
.spinner {
  width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full);
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
.spinner-sm { width: var(--space-5); height: var(--space-5); border-width: 2px; }

/* ===== TOMBOL ===== */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: var(--space-12); margin-top: var(--space-4); padding: 0 var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-primary);
  font-size: var(--fs-16); font-weight: var(--fw-600); line-height: var(--lh-heading); cursor: pointer;
  transition: transform var(--motion-press) var(--easing-standard), background var(--motion-fast) var(--easing-standard),
              box-shadow var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--glow-primary); }
.btn-ghost { background: none; border-color: transparent; color: var(--text-secondary); }
.btn-danger { color: var(--danger-text); }
.btn-primary .spinner { border-color: var(--primary-light); border-top-color: var(--on-primary); }
.btn-ic { flex: none; width: var(--space-5); height: var(--space-5); }
.center-state .btn { width: auto; margin-top: var(--space-2); }
@media (hover: hover) {
  .btn:hover { border-color: var(--primary-light); }
  .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
  .btn-ghost:hover { background: var(--gradient-soft); }
}

/* ===== LOGIN ===== */
.login { min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--space-8)); display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 100%; max-width: 400px; padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: fade-up var(--motion-slow) var(--easing-decelerate) backwards;
}
.login-logo {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  width: calc(var(--space-12) * 2); height: calc(var(--space-12) * 2); border-radius: var(--radius-full);
  font-size: var(--fs-48); line-height: 1;
}
.login-img { width: 140px; height: 140px; object-fit: contain; display: block; border-radius: var(--radius-xl); }
.splash-img { width: 120px; height: 120px; object-fit: contain; display: block; border-radius: var(--radius-lg); }
.login-logo::before {
  content: ""; position: absolute; inset: calc(var(--space-2) * -1); z-index: -1; border-radius: var(--radius-full);
  background: var(--gradient-ring); filter: blur(var(--space-5)); opacity: 0.3;
  animation: glow-pulse 3s var(--easing-standard) infinite;
}
.login-title { margin-top: var(--space-4); font-size: var(--fs-32); font-weight: var(--fw-800); line-height: var(--lh-heading); }
.login-sub { font-size: var(--fs-15); color: var(--text-secondary); }
#tg-login-container { width: 100%; min-height: var(--space-12); margin-top: var(--space-6); }
#tg-login-container .btn { margin-top: 0; }
.login-waiting { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; font-size: var(--fs-14); color: var(--text-secondary); }
.login-waiting .btn { margin-top: 0; }
.waiting-row { display: flex; align-items: center; gap: var(--space-3); }
.error-text {
  width: 100%; margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger-text);
  font-size: var(--fs-14); font-weight: var(--fw-500); text-align: center;
}

/* ===== EXPLORE ===== */
.explore-head { padding: var(--space-1) var(--space-1) var(--space-4); }
.explore-greet { font-size: var(--fs-24); font-weight: var(--fw-700); line-height: var(--lh-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-sub { margin-top: var(--space-1); font-size: var(--fs-14); color: var(--text-secondary); }
.user-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* Kartu user: kolom [info][aksi]. Info = <button class="card-info"> (tap -> detail profil);
   aksi = 2 tombol (Sapa / Buka DM). Tombol TIDAK boleh bersarang di <button>, jadi pembungkus kartu adalah <div>. */
.user-card {
  display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); text-align: left;
  transition: box-shadow var(--motion-fast) var(--easing-standard);
  animation: fade-up var(--motion-slow) var(--easing-decelerate) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@media (hover: hover) { .user-card:hover { box-shadow: var(--shadow-md); } }
.card-info {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: calc(var(--space-12) + var(--space-5)); padding: var(--space-3);
  background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--motion-fast) var(--easing-standard);
}
.card-info:active { background: var(--gradient-soft); transform: none; }
.avatar-wrap { position: relative; flex: none; width: var(--size-avatar); height: var(--size-avatar); }
.avatar {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-full); object-fit: cover;
  background: var(--skeleton-base); border: 1px solid var(--border);
  font-size: var(--fs-20); font-weight: var(--fw-600);
}
div.avatar { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.live-dot {
  position: absolute; top: var(--space-1); right: var(--space-1);
  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full);
  background: var(--info); box-shadow: 0 0 0 2px var(--surface);
}
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--info); animation: live-pulse 1.8s ease-out infinite; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: var(--fs-16); font-weight: var(--fw-700); line-height: var(--lh-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { margin-top: var(--space-1); font-size: var(--fs-14); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-distance { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--primary-text); }
.icon-pin { width: 1em; height: 1em; color: var(--accent); }

/* Aksi kartu: Sapa (oranye, chat gratis) + Buka DM (biru, DM berbayar) */
.card-actions { display: flex; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.btn-action {
  flex: 1; min-height: var(--tap-min); padding: 10px; border: 0; border-radius: var(--radius-md);
  color: #fff; font-size: var(--fs-14); font-weight: var(--fw-600); line-height: 1.2; cursor: pointer;
  transition: transform var(--motion-press) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
}
.btn-sapa { background: var(--accent); }
.btn-dm { background: var(--primary); }
.btn-sapa:active { background: var(--accent-dark); box-shadow: var(--glow-orange); }
.btn-dm:active { background: var(--primary-dark); box-shadow: var(--glow-blue); }
.btn-action:disabled { opacity: 0.6; cursor: not-allowed; }

.empty-state { min-height: 50dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6); text-align: center; animation: fade-up var(--motion-slow) var(--easing-decelerate) backwards; }
.empty-ic { display: flex; align-items: center; justify-content: center; width: calc(var(--space-12) * 2); height: calc(var(--space-12) * 2); margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--gradient-soft); font-size: var(--fs-48); line-height: 1; }
.empty-title { font-size: var(--fs-17); font-weight: var(--fw-600); }
.empty-sub { font-size: var(--fs-14); color: var(--text-secondary); }
.empty-state .btn { width: auto; margin-top: var(--space-3); }

/* ===== SKELETON (dipakai semua list) ===== */
.skeleton { position: relative; overflow: hidden; background: var(--skeleton-base); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: shimmer 1.4s var(--easing-standard) infinite;
}
.sk-card {
  display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--space-12) + var(--space-5)); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.sk-avatar { flex: none; width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-full); }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.sk-line { height: var(--space-3); width: 60%; }
.sk-line.short { width: 40%; }
.sk-dist { flex: none; width: var(--space-10); height: var(--space-3); }
.sk-greet { width: 55%; height: var(--space-6); }
.sk-sub { width: 40%; height: var(--space-3); margin-top: var(--space-2); }

/* ===== BOTTOM NAV — floating pill ===== */
#bottom-nav {
  position: fixed; left: var(--space-4); right: var(--space-4);
  bottom: calc(var(--safe-bottom) + var(--space-3)); z-index: 20;
  height: var(--nav-h); max-width: calc(var(--content-max) - var(--space-8)); margin: 0 auto; padding: 0 var(--space-2);
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 32px;
  box-shadow: var(--shadow-lg);
}
body.is-login #bottom-nav { display: none; }
.nav-item {
  flex: 1; min-width: var(--tap-min); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: 0; cursor: pointer; color: var(--text-secondary);
  transition: transform var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard);
}
.nav-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--space-12); height: var(--space-8); border-radius: var(--radius-full);
  transition: background var(--motion-fast) var(--easing-standard);
}
.nav-icon svg { display: block; width: 22px; height: 22px; }
.nav-label { font-size: var(--fs-12); font-weight: var(--fw-500); line-height: 1.2; }
.nav-item.active { color: var(--primary-text); }
.nav-item.active .nav-label { font-weight: var(--fw-600); }
.nav-item.active .nav-icon { background: var(--gradient-soft); }
.nav-item:active { transform: scale(0.95); }
.nav-item:disabled { opacity: 0.4; cursor: not-allowed; }
.nav-item:focus-visible { outline-offset: -4px; border-radius: var(--radius-md); }
@media (hover: hover) { .nav-item:hover .nav-icon { background: var(--gradient-soft); } }
.nav-badge {
  position: absolute; top: 0; right: var(--space-2); width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-full); background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}

/* Xplore = tombol tengah menonjol (FAB): lingkaran gradient biru->oranye, naik 20px dari pill, label hanya untuk screen reader */
.nav-item-center {
  flex: none; width: 60px; height: 60px; min-width: 60px; margin: 0 var(--space-1); padding: 0; gap: 0;
  border-radius: 50%; transform: translateY(-20px);
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
  box-shadow: var(--glow-blue);
}
.nav-item-center .nav-icon { width: auto; height: auto; background: none; }
.nav-item-center .nav-icon svg { width: 28px; height: 28px; }
.nav-item-center .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-item-center.active { color: #fff; box-shadow: var(--glow-blue), 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--primary) 55%, transparent); }
.nav-item-center.active .nav-icon { background: none; }
.nav-item-center:active { transform: translateY(-20px) scale(0.95); }
@media (hover: hover) { .nav-item-center:hover .nav-icon { background: none; } }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .spinner { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}

/* ===== DARK MODE — kartu & nav ala neon (S-15) ===== */
@media (prefers-color-scheme: dark) {
  .user-card {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
  #bottom-nav {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  }
}

/* ============================================
   S-6 FIX4 + S-7 FIX5 — TAMBAHAN (toast + render no-anim). Modal dihapus di S-7.
   Semua warna/spacing/font dari tokens.css. Dark mode otomatis lewat token.
   z-index toast 950 (di atas nav/header 20; di bawah overlay legacy 1000).
   ============================================ */

/* Render Explore dari cache: tanpa fade/stagger agar tidak terasa kedip (dipasang app.js) */
.view-fade.no-anim,
.view-fade.no-anim .user-card,
.view-fade.no-anim .empty-state { animation: none; }

/* ===== TOAST ===== */
.app-toast {
  position: fixed; left: 50%; z-index: 950;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--space-3) + var(--space-8)); /* di atas pill nav (+ FAB tengah) */
  max-width: 80vw;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--text-primary); color: var(--bg);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-13); font-weight: var(--fw-500); text-align: center;
  transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base) var(--easing-standard);
}
.app-toast.show { opacity: 1; }

/* ===== REDUCED MOTION (toast) ===== */
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition-duration: 0.01ms; }
}

/* FAB Xpose (xpose.css) dinaikkan agar tidak menempel pada pill nav mengambang (specificity lebih tinggi dari xpose.css) */
body .pwa-xpose-fab { bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--space-3) + var(--space-8)); }

/* ============================================
   S-8 — Profile Detail Carousel (foto blur + unlock)
   Namespace .pwa-pd-* — base class (overlay, close, info, bar, btn, photo)
   ada di legacy.css. File ini hanya menambah yang BARU.
   ============================================ */

.pwa-pd-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.pwa-pd-carousel::-webkit-scrollbar { display: none; }

.pwa-pd-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3 / 4; /* rasio foto profil (sama dengan Mini App) */
  overflow: hidden;
  background: var(--surface);
}
.pwa-pd-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pwa-pd-slide.locked img { filter: blur(24px); transform: scale(1.15); } /* scale: tepi blur tidak tampak garis */

.pwa-pd-lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  /* Tengah sedikit gelap (icon + tombol terbaca), pinggir transparan (foto blur terlihat) */
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--text-primary) 30%, transparent) 0%,
    color-mix(in srgb, var(--text-primary) 10%, transparent) 55%,
    transparent 100%);
}
.pwa-pd-lock-icon {
  font-size: var(--fs-48); line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); /* bayangan hitam tetap (readability emoji di atas blur) */
}

.pwa-pd-unlock-btn {
  padding: var(--space-3) var(--space-5);
  min-height: var(--tap-min);
  border: none;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--motion-press) var(--easing-standard);
}
.pwa-pd-unlock-btn:active { transform: scale(0.96); }
.pwa-pd-unlock-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.pwa-pd-dots { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-3) 0; }
.pwa-pd-dot {
  width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border);
  transition: width var(--motion-fast) var(--easing-standard), background var(--motion-fast) var(--easing-standard);
}
.pwa-pd-dot.active { background: var(--primary); width: calc(var(--space-2) * 3); border-radius: var(--radius-full); }

/* Error unlock inline (override .pwa-pd-err dari legacy.css yang hanya mengatur warna) */
#pwa-pd-unlock-err {
  margin: var(--space-2) var(--space-4) 0;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
}
#pwa-pd-unlock-err[hidden] { display: none !important; }

/* ===== CONFIRM SHEET (S-15b) — pengganti confirm() yang bisa diblokir di PWA standalone ===== */
.app-confirm-back { position: fixed; inset: 0; z-index: 960; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.5); animation: fade-in var(--motion-fast) linear backwards; }
.app-confirm {
  width: 100%; max-width: var(--content-max); padding: var(--space-6) var(--space-4) calc(var(--safe-bottom) + var(--space-4));
  background: var(--surface); color: var(--text-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg);
  text-align: center; animation: fade-up var(--motion-base) var(--easing-decelerate) backwards;
}
.app-confirm-title { font-size: var(--fs-17); font-weight: var(--fw-700); line-height: var(--lh-heading); }
.app-confirm-sub { margin-top: var(--space-1); font-size: var(--fs-14); color: var(--text-secondary); }
.app-confirm .btn { margin-top: var(--space-3); }
.app-confirm .btn:first-of-type { margin-top: var(--space-5); }

/* ===== XPAND (S-16) — layar Coming Soon + ikon nav kustom ===== */
.xpand-hero-img {
  width: 100%;
  max-width: 320px; /* ukuran pas untuk ilustrasi robot di tablet */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)); /* robot lebih menonjol */
}
/* Ikon PNG tidak bisa ikut currentColor: samakan dengan ikon SVG (redup saat tidak aktif) */
.nav-custom-icon { display: block; opacity: 0.7; transition: opacity var(--motion-fast) var(--easing-standard); }
.nav-item.active .nav-custom-icon { opacity: 1; }