/* ============================================================
   QIIORA — Layar muat sinematik (K3, versi 2)
   Adegan SVG orisinal mengisi SELURUH layar: close-up pondok
   -> zoom-out ke pulau penuh. Tidak ada kartu 640px lagi.
   ============================================================ */

.muat{
  position:fixed;inset:0;z-index:500;
  background:#05101A;
  overflow:hidden;
  transition:opacity .6s var(--ease),visibility .6s;
}

/* saat layar muat tampil, halaman di belakang tidak boleh digulir */
html.sedang-muat, html.sedang-muat body{overflow:hidden!important;height:100%}
.muat.keluar{opacity:0;visibility:hidden;pointer-events:none}
.muat[hidden]{display:none}

/* ---------- adegan penuh layar ---------- */
.muat-scene{position:absolute;inset:0;z-index:0;background:#05101A}
.muat-svg{
  display:block;width:100%;height:100%;
  /* slice: adegan mengisi seluruh layar tanpa huruf tepi kosong */
}

/* selubung bawah supaya teks terbaca di atas langit terang */
.muat-scrim{
  position:absolute;left:0;right:0;bottom:0;height:min(52vh,460px);z-index:1;
  background:linear-gradient(180deg,rgba(4,14,22,0) 0%,rgba(4,14,22,.42) 42%,rgba(4,14,22,.86) 100%);
  pointer-events:none;
}

/* ---------- animasi elemen adegan ---------- */
.muat-awan1{animation:qAwan 26s ease-in-out infinite}
.muat-awan2{animation:qAwan 32s ease-in-out infinite reverse}
.muat-awan3{animation:qAwan 22s ease-in-out infinite}
.muat-awan4{animation:qAwan 38s ease-in-out infinite}
@keyframes qAwan{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(22px)}
}
.muat-sinar{animation:qSinar 34s linear infinite;transform-origin:center}
@keyframes qSinar{to{transform:rotate(360deg)}}

.muat-gerimis .gt{animation:qGerimis 1.5s linear infinite}
.muat-gerimis .gt:nth-child(2){animation-delay:.2s}
.muat-gerimis .gt:nth-child(3){animation-delay:.36s}
.muat-gerimis .gt:nth-child(4){animation-delay:.54s}
.muat-gerimis .gt:nth-child(5){animation-delay:.72s}
.muat-gerimis .gt:nth-child(6){animation-delay:.9s}
@keyframes qGerimis{
  0%{transform:translateY(-8px);opacity:0}
  20%{opacity:.9}
  100%{transform:translateY(40px);opacity:0}
}

.muat-burung{animation:qBurung 26s linear infinite}
@keyframes qBurung{
  0%{transform:translate(-60px,14px)}
  50%{transform:translate(60px,-12px)}
  100%{transform:translate(-60px,14px)}
}

.muat-ombak{animation:qOmbak 8s ease-in-out infinite}
@keyframes qOmbak{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(14px)}
}

.muat-ikan{animation:qIkan 16s ease-in-out infinite}
@keyframes qIkan{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(58px)}
}

.muat-arus path{stroke-dasharray:26 18;animation:qArus 2.6s linear infinite}
@keyframes qArus{to{stroke-dashoffset:-44}}

.muat-pohon{animation:qGoyang 9s ease-in-out infinite;transform-origin:398px 726px}
.muat-cemara{animation:qGoyang 11s ease-in-out infinite;transform-origin:1210px 720px}
@keyframes qGoyang{
  0%,100%{transform:rotate(-.6deg)}
  50%{transform:rotate(.7deg)}
}
.muat-rumput{animation:qGoyang 7s ease-in-out infinite;transform-origin:center bottom}

.muat-kelinci{animation:qKelinci 6s ease-in-out infinite}
@keyframes qKelinci{
  0%,100%{transform:translate(1030px,724px) scale(1)}
  50%{transform:translate(1030px,718px) scale(1.03)}
}

.muat-asap circle{animation:qAsap 4.4s ease-out infinite}
.muat-asap circle:nth-child(2){animation-delay:1.4s}
.muat-asap circle:nth-child(3){animation-delay:2.8s}
@keyframes qAsap{
  0%{transform:translate(0,10px);opacity:0}
  30%{opacity:.72}
  100%{transform:translate(-10px,-30px);opacity:0}
}

.muat-uap ellipse{animation:qUap 7s ease-out infinite}
.muat-uap ellipse:nth-child(2){animation-delay:1.6s}
.muat-uap ellipse:nth-child(3){animation-delay:3.2s}
.muat-uap ellipse:nth-child(4){animation-delay:4.8s}
@keyframes qUap{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:.5}
  100%{transform:translateY(-70px);opacity:0}
}

/* ---------- info di bawah ---------- */
.muat-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  width:min(880px,92vw);margin:0 auto;
  padding:0 clamp(16px,4vw,32px) clamp(24px,4.6vh,52px);
  text-align:center;color:#DCEBF5;
}

.muat-judul{
  font-family:var(--font-judul);
  font-weight:800;
  font-size:clamp(44px,9.4vw,96px);
  line-height:1;
  letter-spacing:.06em;
  color:#FFFFFF;
  margin-bottom:8px;
  display:flex;
  justify-content:center;
  gap:.02em;
  text-shadow:0 3px 0 #7FA6BC,0 7px 0 #4E7690,0 10px 0 #2E5067,0 20px 34px rgba(0,0,0,.6);
}
.muat-judul span{
  display:inline-block;
  opacity:0;
  transform:translateY(-22px) scale(.84);
  transition:opacity .46s ease,transform .46s cubic-bezier(.22,1.4,.36,1);
  transition-delay:calc(var(--i) * 92ms);
}
.muat-judul.tampil span{opacity:1;transform:none}

.muat-sub{
  margin:0 0 16px;
  font-size:clamp(11.5px,2.4vw,13.5px);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8FC4DA;
}

/* rantai tahap */
.muat-langkah{
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:6px;margin:0 0 16px;padding:0;
}
.muat-langkah li{
  position:relative;
  font-size:clamp(10px,2.1vw,11.5px);font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  color:#7D9AAA;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  transition:color .34s,background .34s,border-color .34s,transform .34s;
}
.muat-langkah li.on{color:#06202E;background:#7FD8F0;border-color:#7FD8F0}
.muat-langkah li.kini{transform:translateY(-2px);box-shadow:0 6px 16px rgba(127,216,240,.4)}

/* bilah progres */
.muat-bar{
  position:relative;height:11px;border-radius:999px;
  background:rgba(255,255,255,.16);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.muat-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#4FC98A,#3D8BEF 55%,#7FD8F0);
  transition:width .3s var(--ease);
  position:relative;overflow:hidden;
  box-shadow:0 0 16px rgba(127,216,240,.6);
}
.muat-bar i::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.38) 0 8px,rgba(255,255,255,0) 8px 18px);
  animation:qRiak 1.1s linear infinite;
}
@keyframes qRiak{to{transform:translateX(18px)}}

.muat-baris{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:9px;
}
.muat-teks{
  margin:0;font-size:clamp(12.5px,2.7vw,14.5px);font-weight:700;
  min-height:1.4em;letter-spacing:.01em;color:#DCEBF5;text-align:left;
}
.muat-persen{
  margin:0;font-size:clamp(12.5px,2.7vw,14px);font-weight:800;letter-spacing:.06em;
  color:#9FC4D8;font-variant-numeric:tabular-nums;flex:none;
}

/* ---------- tombol Lewati ---------- */
.muat-lewati{
  position:absolute;right:clamp(14px,3vw,28px);top:clamp(14px,3vw,28px);z-index:3;
  min-height:44px;padding:0 20px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.34);
  background:rgba(8,24,36,.62);color:#EAF6FF;
  font:inherit;font-size:13.5px;font-weight:800;letter-spacing:.03em;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:background .18s,border-color .18s,transform .12s;
}
.muat-lewati:hover{background:rgba(47,128,237,.6);border-color:rgba(255,255,255,.66)}
.muat-lewati:active{transform:translateY(1px)}
.muat-lewati:focus-visible{outline:2px solid #7FD8F0;outline-offset:3px}
.muat-lewati[hidden]{display:none}

/* ---------- cetak & aksesibilitas ---------- */
@media print{.muat{display:none!important}}

@media(max-width:520px){
  .muat-info{padding-bottom:clamp(18px,3.4vh,30px)}
  .muat-langkah{gap:4px}
  .muat-langkah li{padding:4px 9px;letter-spacing:.06em}
  .muat-baris{flex-direction:column;align-items:flex-start;gap:2px}
}

@media(prefers-reduced-motion:reduce){
  .muat-awan1,.muat-awan2,.muat-awan3,.muat-awan4,.muat-sinar,
  .muat-gerimis .gt,.muat-burung,.muat-ombak,.muat-ikan,.muat-arus path,
  .muat-pohon,.muat-cemara,.muat-rumput,.muat-kelinci,
  .muat-asap circle,.muat-uap ellipse,.muat-bar i::after{
    animation:none!important;
  }
  .muat-bar i{transition:none!important}
  .muat-judul span{transition:none!important;opacity:1!important;transform:none!important}
  .muat{transition:none!important}
  .muat-langkah li{transition:none!important}
}