/* ═══════════ portal.css — Intro portal 3D 360° (index.php, kunjungan pertama) ═══════════ */
.sp-intro{ position:fixed; inset:0; z-index:10050; background:#0b1628; color:#fff; overflow:hidden; opacity:1; transition:opacity .6s ease; touch-action:none; }
.sp-intro.out{ opacity:0; pointer-events:none; }
.sp-intro canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; cursor:grab; }
.sp-intro canvas:active{ cursor:grabbing; }
.sp-top{ position:absolute; left:0; right:0; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 30px;
  background:linear-gradient(180deg, rgba(8,20,40,.72), rgba(8,20,40,0)); pointer-events:none; }
.sp-top img{ width:38px; height:38px; border-radius:12px; background:#fff; padding:4px; }
.sp-top b{ display:block; font-family:var(--fdisplay,'Baloo 2',sans-serif); font-size:18px; line-height:1.1; }
.sp-top small{ font-size:11.5px; opacity:.85; }
.sp-skip{ position:absolute; z-index:3; top:calc(env(safe-area-inset-top,0px) + 16px); right:14px; border:1px solid rgba(255,255,255,.35); background:rgba(8,20,40,.45); color:#fff;
  font:inherit; font-size:12.5px; font-weight:800; padding:8px 14px; border-radius:99px; cursor:pointer; backdrop-filter:blur(6px); }
.sp-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 16px calc(env(safe-area-inset-bottom,0px) + 18px); text-align:center;
  background:linear-gradient(0deg, rgba(8,20,40,.85), rgba(8,20,40,0)); }
.sp-say{ display:inline-block; max-width:min(92vw,420px); background:#fff; color:#12233f; font-size:13.5px; font-weight:700; line-height:1.45; padding:11px 15px; border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.3); margin-bottom:12px; animation:spPop .45s cubic-bezier(.34,1.56,.64,1); }
.sp-say b{ color:#14498C; }
@keyframes spPop{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:none; } }
.sp-go{ display:flex; align-items:center; justify-content:center; gap:8px; width:min(92vw,360px); margin:0 auto; padding:15px 18px; border:0; border-radius:18px;
  background:linear-gradient(135deg,#9BC53D,#22D3EE); color:#0a2a55; font:inherit; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 12px 30px -8px rgba(34,211,238,.7);
  animation:spGlow 2.2s ease-in-out infinite; }
@keyframes spGlow{ 50%{ box-shadow:0 12px 40px -4px rgba(155,197,61,.85); } }
.sp-go:disabled{ opacity:.6; animation:none; }
.sp-hint{ margin-top:10px; font-size:12px; opacity:.85; display:flex; align-items:center; justify-content:center; gap:6px; }
.sp-hint i{ display:inline-block; width:26px; height:14px; border:2px solid rgba(255,255,255,.8); border-radius:8px; position:relative; }
.sp-hint i::after{ content:""; position:absolute; top:2px; left:3px; width:6px; height:6px; border-radius:50%; background:#fff; animation:spSwipe 1.6s ease-in-out infinite; }
@keyframes spSwipe{ 50%{ left:13px; } }
.sp-load{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#0b1628; transition:opacity .5s; }
.sp-load.hide{ opacity:0; pointer-events:none; }
.sp-ring{ width:64px; height:64px; border-radius:50%; border:5px solid rgba(255,255,255,.12); border-top-color:#9BC53D; border-right-color:#22D3EE; animation:spSpin 1s linear infinite; }
@keyframes spSpin{ to{ transform:rotate(360deg); } }
.sp-bar{ width:180px; height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.sp-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#9BC53D,#22D3EE); transition:width .2s; }
.sp-flash{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, #fff 0%, #c9f7ff 35%, #22D3EE 70%, #0b1628 100%); }
.sp-flash.on{ animation:spFlash 1.1s ease-in forwards; }
@keyframes spFlash{ 0%{ opacity:0; } 55%{ opacity:1; } 100%{ opacity:1; } }
.sp-replay{ background:none; border:0; font:inherit; font-size:.78rem; font-weight:700; color:inherit; opacity:.75; text-decoration:underline; cursor:pointer; padding:4px; }
@media (prefers-reduced-motion:reduce){ .sp-intro *{ animation:none !important; } }