/* Transisi halaman: kerangka (sidebar / bilah atas / navigasi bawah) tetap diam, hanya isi yang bertransisi.
 * Peramban modern (Chrome/Edge/Safari terbaru): View Transitions antar-halaman, tanpa kedipan putih.
 * Peramban lama: isi memudar-naik halus (cadangan). Bilah progres tipis + penanda "Memuat…" hanya bila halaman lambat. */
@keyframes ptIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ptBar { 0% { transform: scaleX(.04); } 30% { transform: scaleX(.5); } 70% { transform: scaleX(.82); } 100% { transform: scaleX(.94); } }
@keyframes ptSpin { to { transform: rotate(360deg); } }
@keyframes ptVtOut { to { opacity: 0; } }
@keyframes ptVtIn { from { opacity: 0; } to { opacity: 1; } }

/* ── 1) View Transitions antar-halaman (Chrome 126+, Edge, Safari 18.2+) ── */
/* Tanpa animasi, tetapi tetap aktif: peramban menahan tampilan lama sampai halaman baru siap, jadi sidebar tidak berkedip saat pindah halaman */
@view-transition { navigation: auto; }

/* Kerangka diberi nama agar tidak ikut memudar: tampak menetap saat isi berganti */
#sidebar { view-transition-name: pt-side; }
.mw > .topbar { view-transition-name: pt-top; }
#bottomNav, body > nav.bottom-nav, .ca-bnav { view-transition-name: pt-bot; }
body > .top-nav { view-transition-name: pt-top; }

::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
::view-transition-old(root) { display: none; }
/* Sidebar: tanpa animasi ukuran. Bila ukurannya sedikit berbeda antara halaman asal dan tujuan, peramban meregangkan gambar sidebar
 * selama animasi (teks menu tampak membesar sesaat, mis. saat membuka Remote Perangkat / Jaringan & NAS). Langsung tampil di ukuran akhir. */
::view-transition-group(pt-side) { animation: none; }
::view-transition-old(pt-side) { display: none; }
::view-transition-new(pt-side) { animation: none; width: 100%; height: 100%; object-fit: none; object-position: left top; }


/* ── 2) Cadangan untuk peramban tanpa View Transitions ── */
.pt-leaving, .pt-leaving a { cursor: progress; }

/* ── Bilah progres: tipis, bergerak seperti memuat sungguhan ── */
#pt-bar { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity .25s; }
#pt-bar.on { opacity: 1; }
#pt-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #6366f1, #38bdf8, #22c55e); box-shadow: 0 0 10px rgba(99, 102, 241, .55); border-radius: 0 2px 2px 0; }
#pt-bar.on i { animation: ptBar 8s cubic-bezier(.1, .6, .2, 1) forwards; }

/* ── Penanda "Memuat…": kapsul kecil di bawah, tidak menutup layar & tidak memblokir klik; baru muncul bila lambat ── */
#pt-ov { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 99999; display: none; justify-content: center; pointer-events: none; }
#pt-ov.on { display: flex; animation: ptIn .2s ease both; }
#pt-ov .pt-box { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(15, 23, 42, .88); color: #f1f5f9; font: 500 13px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#pt-ov .pt-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); border-top-color: #fff; animation: ptSpin .7s linear infinite; }
@media (max-width: 991px) { #pt-ov { bottom: calc(84px + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01s !important; animation-delay: 0s !important; }
  body > .container, body > main, body > .wrap, body > .page-wrap { animation: none !important; }
  .pt-leaving .mw > .page, .pt-leaving body > .container { transition: none; opacity: 1; }
  #pt-bar.on i { animation: none; transform: scaleX(.8); }
  #pt-ov.on { animation: none; }
}
@media print { #pt-bar, #pt-ov { display: none !important; } body > .container, body > main { animation: none !important; } }