/* Layar muat aplikasi: logo "Dua Bulan Sabit" merakit diri, cincin emas berputar, kilau menyapu logo.
   Murni CSS/SVG (tanpa JS) supaya tampil seketika. Warna latar = var(--bg) aplikasi → transisi ke aplikasi mulus. */
.boot { --boot-gold: #dcb771; --boot-track: rgba(220, 183, 113, .16); --boot-glow: rgba(220, 183, 113, .14);
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: var(--bg, #1b1b1a); color: var(--ink, #eeeae2);
  transition: opacity .45s ease, visibility .45s ease; }
:root[data-theme="light"] .boot { --boot-gold: #b07f2c; --boot-track: rgba(150, 110, 40, .16); --boot-glow: rgba(214, 166, 80, .16); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) .boot { --boot-gold: #b07f2c; --boot-track: rgba(150, 110, 40, .16); --boot-glow: rgba(214, 166, 80, .16); } }
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -58%); pointer-events: none;
  background: radial-gradient(closest-side, var(--boot-glow), transparent 72%); animation: boot-glow 3.2s ease-in-out infinite; }
.boot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(128, 128, 128, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 128, 128, .08) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 300px); mask-image: radial-gradient(circle at 50% 46%, #000 0, transparent 300px); }
.boot-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; margin-top: -24px; }
.boot-mark { position: relative; width: 148px; height: 148px; display: grid; place-items: center; margin-bottom: 4px; }
.boot .boot-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: boot-spin 1.5s linear infinite; }
.boot .boot-ring circle { fill: none; stroke-width: 1.5; }
.boot .boot-ring .tr { stroke: var(--boot-track); }
.boot .boot-ring .arc { stroke: var(--boot-gold); stroke-linecap: round; stroke-dasharray: 84 306; }
.boot .boot-ring .dot { fill: var(--boot-gold); stroke: none; filter: drop-shadow(0 0 4px var(--boot-gold)); }
.boot .boot-ring2 { position: absolute; inset: 0; width: 100%; height: 100%; animation: boot-spin 9s linear infinite reverse; }
.boot .boot-ring2 circle { fill: none; stroke: var(--boot-gold); stroke-width: 1; stroke-dasharray: 1.5 7; opacity: .45; }
.boot .boot-logo { width: 70px; height: 70px; overflow: visible; animation: boot-breathe 2.6s ease-in-out 1s infinite; }
.boot .boot-logo .c1, .boot .boot-logo .c2 { transform-box: fill-box; transform-origin: center; }
.boot .boot-logo .c1 { animation: boot-in1 .95s cubic-bezier(.2, 1.3, .35, 1) both; }
.boot .boot-logo .c2 { animation: boot-in2 .95s cubic-bezier(.2, 1.3, .35, 1) .08s both; }
.boot .boot-logo .sh { mix-blend-mode: screen; }
.boot-name { font: 600 15px/1.2 "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em; color: var(--ink, #eeeae2); animation: boot-fade .6s ease .35s both; }
.boot-msg { position: relative; height: 14px; display: grid; justify-items: center; font: 500 10.5px/14px "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #a6a298); animation: boot-fade .6s ease .5s both; }
.boot-msg > span { grid-area: 1 / 1; white-space: nowrap; }
.boot-msg .m2 { opacity: 0; animation: boot-swap-in .4s ease 7s forwards; }
.boot-msg .m1 { animation: boot-swap-out .4s ease 7s forwards; }
.boot-msg i { font-style: normal; animation: boot-dot 1.2s infinite; }
.boot-msg i:nth-child(2) { animation-delay: .2s; } .boot-msg i:nth-child(3) { animation-delay: .4s; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-glow { 50% { opacity: .55; } }
@keyframes boot-breathe { 50% { transform: scale(1.045); } }
@keyframes boot-in1 { from { opacity: 0; transform: translate(-11px, -10px) rotate(-100deg) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes boot-in2 { from { opacity: 0; transform: translate(11px, 10px) rotate(-100deg) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes boot-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes boot-swap-in { to { opacity: 1; } }
@keyframes boot-swap-out { to { opacity: 0; } }
@keyframes boot-dot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .boot::before, .boot .boot-ring, .boot .boot-ring2, .boot .boot-logo, .boot .boot-logo .c1, .boot .boot-logo .c2, .boot-name, .boot-msg, .boot-msg i { animation: none; }
  .boot .boot-ring .arc, .boot .boot-ring .dot, .boot .boot-logo .sh { display: none; }
}