/* Splash screen statis, digambar dari HTML sebelum bundle JS dimuat —
   mengisi jeda layar putih kosong yang sekilas terlihat saat app dibuka dari
   ikon di layar utama HP (mode standalone/PWA ter-install). Hanya tampil di
   mode standalone lewat media query display-mode: di tab browser biasa,
   chrome/address bar browser sudah memberi konteks "sedang memuat" sehingga
   splash ini tidak perlu tampil. Otomatis lenyap begitu React mount ke #root,
   karena createRoot() mengganti seluruh isi elemen itu.
   Warna dasar (light/dark) menyamai layar "Memuat…" di App.tsx.

   Berkas ini sengaja TERPISAH dari index.html (bukan <style> di dalam HTML),
   sama seperti /theme-init.js. Alasannya keamanan: selama masih ada satu saja
   gaya yang ditulis langsung di halaman, Content-Security-Policy di nginx
   terpaksa mengizinkan 'unsafe-inline' untuk style-src — artinya gaya sisipan
   dari mana pun ikut boleh dijalankan. Dengan berkas terpisah, aturannya bisa
   dikencangkan jadi style-src 'self' saja.

   Konsekuensi yang disengaja: gaya ini kini ikut antre unduh (satu berkas
   kecil ~1 KB dari domain sendiri). Pada PWA ter-install berkas ini sudah
   tersimpan di cache service worker, jadi praktis seketika. */
#pwa-splash {
  display: none;
}

@media (display-mode: standalone) {
  #pwa-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: #fafafa;
  }

  html.dark #pwa-splash {
    background: #0a0a0a;
  }

  #pwa-splash img {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    animation: pwa-splash-pulse 1.6s ease-in-out infinite;
  }

  #pwa-splash span {
    font-family:
      ui-sans-serif,
      system-ui,
      -apple-system,
      sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #a3a3a3;
    letter-spacing: 0.02em;
  }

  @keyframes pwa-splash-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.75;
      transform: scale(0.94);
    }
  }
}