:root{
  /* Palet SUPER33 (gold/amber + cokelat gelap) */
  --bg-1: #120b06;
  --bg-2: #1a1009;
  --bg-3: #2a1a10;
  --card-glass: rgba(255,255,255,.04);
  --line: rgba(255,255,255,.08);

  --gold-1: #ffd877;
  --gold-2: #ffc34d;
  --gold-3: #ffae33;
  --amber:  #ff941a;
  --glint:  #fff1cf;

  --text:   #fff3d6;
  --dim:    #f1d9a9;

  --shadow-soft: 0 24px 80px rgba(0,0,0,.55);
}

/* Kunci: blokir scroll saat loading */
body:not(.is-loaded){ overflow:hidden }

/* ================== WRAPPER ================== */
#preloader{
  position: fixed; inset:0; z-index: 99999;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 100% at 50% 30%, var(--bg-3) 0%, var(--bg-2) 55%, var(--bg-1) 100%),
    linear-gradient(180deg, #100a05, #0b0704);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .2px;
  isolation:isolate;
}

/* ====== Latar modern (bukan neon biru lagi) ====== */
#preloader .pl-bg{ position:absolute; inset:0; overflow:hidden }

/* Bokeh emas halus (sangat ringan) */
#preloader .pl-grid{
  position:absolute; inset:-10%;
  background:
    radial-gradient(180px 140px at 15% 20%, rgba(255,216,119,.10) 0, transparent 60%),
    radial-gradient(220px 160px at 85% 35%, rgba(255,174,51,.10) 0, transparent 65%),
    radial-gradient(280px 200px at 40% 80%, rgba(255,147,26,.10) 0, transparent 70%);
  filter: saturate(110%);
  opacity:.55;
  animation: bokehDrift 24s ease-in-out infinite alternate;
}
@keyframes bokehDrift{
  from{ transform: translate3d(0,0,0) scale(1) }
  to  { transform: translate3d(-2%,2%,0) scale(1.03) }
}

/* Shimmer garis tipis */
#preloader .pl-scan{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  mix-blend-mode: screen; opacity:.18;
  animation: scanGold 3.2s linear infinite;
}
@keyframes scanGold{
  from{ transform: translateY(-100%) }
  to  { transform: translateY(100%) }
}

/* Noise lembut */
#preloader .pl-noise{
  position:absolute; inset:-40px;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.05) 50%, transparent 52%),
    radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.05) 50%, transparent 52%),
    radial-gradient(1px 1px at 45% 85%, rgba(255,255,255,.04) 50%, transparent 52%);
  opacity:.15;
}

/* ================== CORE ================== */
#preloader .pl-core{
  position:relative;
  width:min(560px, 92vw);
  display:flex; flex-direction:column; align-items:center; gap:26px;
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter: blur(10px);
}

/* ========== BRAND ========== */
#preloader .pl-logo-wrap{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
#preloader .pl-logo{
  width: 132px; height:auto; object-fit:contain; border-radius:14px;
  filter: drop-shadow(0 18px 34px rgba(255, 175, 50, .35));
}
#preloader .pl-brand{
  font-family: 'Poppins', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size: clamp(18px, 3.4vw, 22px);
  letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-1), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 32px rgba(255, 180, 60, .35);
}

/* ========== ORNAMENT HALO MODERN (emas) ========== */
#preloader .pl-ring{
  position:relative; width: 200px; height: 200px; display:grid; place-items:center;
  filter: drop-shadow(0 0 28px rgba(255, 180, 60, .30));
}
#preloader .pl-ring::before{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, var(--gold-1), var(--gold-2), var(--amber), var(--gold-1));
  opacity:.18; filter: blur(10px);
  animation: spinHalo 9s linear infinite;
}
#preloader .pl-ring-inner{
  width: 170px; height: 170px; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.10) 0 45%, transparent 46% 70%, rgba(255,255,255,.06) 71% 100%),
    conic-gradient(from 0deg, rgba(255,200,90,.45) 0 25%, rgba(255,160,50,.45) 25% 50%, rgba(255,200,90,.45) 50% 75%, rgba(255,160,50,.45) 75% 100%);
  mask: radial-gradient(closest-side, transparent 0 46%, #000 47% 100%);
  animation: spinRing 3s linear infinite;
}
#preloader .pl-ring-sweep{
  position:absolute; inset:0; border-radius:50%;
  mask: radial-gradient(closest-side, transparent 0 47%, #000 48% 100%);
  background: conic-gradient(from 0deg, rgba(255,255,255,.0) 0 70%, rgba(255,255,255,.9) 70.5% 71.5%, rgba(255,255,255,.0) 72% 100%);
  filter: blur(0.8px);
  animation: spinRing 2s linear infinite;
}
#preloader .pl-pulse{
  position:absolute; width: 10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, var(--glint), var(--gold-2));
  box-shadow: 0 0 26px 6px rgba(255, 200, 90, .45);
  animation: pulseGold 1.6s ease-in-out infinite;
}
@keyframes spinRing { to { transform: rotate(360deg) } }
@keyframes spinHalo { to { transform: rotate(-360deg) } }
@keyframes pulseGold { 50%{ transform: scale(1.35) } }

/* ========== PROGRESS (pill modern) ========== */
#preloader .pl-meter{ width:100%; display:flex; flex-direction:column; align-items:center; gap:10px }
#preloader .pl-meter-bar{
  width: 100%; height: 14px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden; position:relative;
}
#preloader .pl-meter-fill{
  position:absolute; inset:0 100% 0 0;
  background:
    linear-gradient(90deg, var(--gold-1), var(--gold-2), var(--amber)),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  box-shadow: 0 0 22px rgba(255, 180, 60, .45);
}
#preloader .pl-meter-bar::after{
  /* shimmer highlight */
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 0 30%, rgba(255,255,255,.35) 50%, transparent 70% 100%);
  mix-blend-mode: screen; transform: translateX(-60%);
  animation: shine 1.8s linear infinite;
}
@keyframes shine{ to{ transform: translateX(60%) } }

#preloader .pl-percent{
  font-weight:800; font-variant-numeric: tabular-nums;
  color: var(--glint);
  text-shadow: 0 0 14px rgba(255, 180, 60, .55);
}
#preloader .pl-status{
  font-size: 12.5px; color: var(--dim); opacity:.95;
}

/* ========== GOLD BLOOM REVEAL ========== */
#preloader .pl-iris{
  position:absolute; inset:0; background: radial-gradient(40vmax 40vmax at 50% 50%, rgba(255, 200, 90, .35), rgba(255, 160, 50, .18) 40%, rgba(0,0,0,.0) 60%);
  clip-path: circle(0% at 50% 50%);
  pointer-events:none;
}

#preloader.is-done .pl-iris{
  animation: bloomOpen .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes bloomOpen {
  0%   { clip-path: circle(0% at 50% 50%); opacity:1 }
  60%  { clip-path: circle(120vmax at 50% 50%); opacity:1 }
  100% { clip-path: circle(120vmax at 50% 50%); opacity:0 }
}

#preloader.is-done{
  animation: preloaderFade .55s ease-out .55s forwards;
}
@keyframes preloaderFade{ to { opacity:0; visibility:hidden } }

/* ========== ENTRANCE untuk header/main (modern & ringan) ========== */
@keyframes pageLift {
  from { opacity:0; transform: translateY(14px) scale(.996) }
  to   { opacity:1; transform: translateY(0)    scale(1) }
}
body.is-loaded header,
body.is-loaded main{
  animation: pageLift .6s cubic-bezier(.22,.8,.2,1) both;
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}