/* ================================================================
   SPLASH SCREEN — Himatika
   Fix: background solid opaque, logo tunggal, fullscreen
   ================================================================ */

#splash-screen *, #splash-screen *::before, #splash-screen *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* Container: fixed full viewport, background SOLID */
#splash-screen {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 9999999 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #060c18 !important;
    opacity: 1;
}

/* Canvas — isi background solid dari JS sebelum menggambar bintang */
#spl-canvas {
    position: absolute !important;
    top:0 !important; left:0 !important;
    width:100% !important; height:100% !important;
    z-index: 1; display: block;
}

/* Radial warm glow overlay */
.spl-bg-radial {
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
        radial-gradient(ellipse 50% 60% at 50% 45%, rgba(40,22,0,.70) 0%, transparent 65%),
        radial-gradient(ellipse 80% 45% at 15% 65%, rgba(90,55,0,.20) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 85% 25%, rgba(0,50,80,.18) 0%, transparent 55%);
}

/* Grid lines */
.spl-grid {
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background-image:
        linear-gradient(rgba(201,168,76,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.03) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* Math particles */
.spl-particles { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.spl-p {
    position:absolute;
    font-family:'IM Fell English',Georgia,serif; font-style:italic;
    color:rgba(201,168,76,.15);
    animation:splPF linear infinite; user-select:none; line-height:1;
}
.p1{font-size:52px;top:8%;left:7%;animation-duration:15s;animation-delay:0s}
.p2{font-size:40px;top:18%;right:9%;animation-duration:19s;animation-delay:-5s}
.p3{font-size:62px;top:62%;left:4%;animation-duration:21s;animation-delay:-9s}
.p4{font-size:46px;top:70%;right:7%;animation-duration:17s;animation-delay:-3s}
.p5{font-size:54px;top:38%;left:1%;animation-duration:23s;animation-delay:-7s}
.p6{font-size:38px;top:12%;left:74%;animation-duration:18s;animation-delay:-11s}
.p7{font-size:44px;top:78%;left:54%;animation-duration:20s;animation-delay:-4s}
.p8{font-size:34px;top:48%;right:2%;animation-duration:16s;animation-delay:-8s}
@keyframes splPF{0%{transform:translateY(0);opacity:.07}30%{opacity:.2}60%{transform:translateY(-22px);opacity:.12}100%{transform:translateY(0);opacity:.07}}

/* Konten tengah */
.spl-inner {
    position:relative; z-index:10;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:0 24px;
    animation:splRise .95s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes splRise{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Logo wrap */
.spl-logo-wrap {
    position:relative; width:220px; height:220px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:26px; flex-shrink:0;
}

/* Spinning rings */
.spl-ring { position:absolute; border-radius:50%; border-style:solid; pointer-events:none; }
.spl-ring-1 {
    width:220px; height:220px; border-width:2px;
    border-color:rgba(201,168,76,.75) rgba(201,168,76,.1) rgba(201,168,76,.1) rgba(201,168,76,.1);
    animation:splCW 3.2s linear infinite;
    filter:drop-shadow(0 0 5px rgba(201,168,76,.45));
}
.spl-ring-2 {
    width:196px; height:196px; border-width:1.5px;
    border-color:transparent rgba(0,200,212,.75) transparent rgba(0,200,212,.15);
    animation:splCCW 5s linear infinite;
}
.spl-ring-3 {
    width:172px; height:172px; border-width:1px;
    border-color:rgba(201,168,76,.28) transparent rgba(201,168,76,.28) transparent;
    animation:splCW 9s linear infinite;
}
@keyframes splCW  { to{transform:rotate(360deg)} }
@keyframes splCCW { to{transform:rotate(-360deg)} }

/* Orbit dots */
.spl-orbit-dot { position:absolute; border-radius:50%; pointer-events:none; z-index:5; }
.spl-orb-1 {
    width:8px; height:8px; background:#c9a84c;
    box-shadow:0 0 10px 3px rgba(201,168,76,.85);
    animation:orbA 3.2s linear infinite;
}
.spl-orb-2 {
    width:6px; height:6px; background:#00c8d4;
    box-shadow:0 0 8px 2px rgba(0,200,212,.85);
    animation:orbB 5s linear infinite;
}
@keyframes orbA{from{transform:rotate(0deg) translateX(110px) rotate(0deg)}to{transform:rotate(360deg) translateX(110px) rotate(-360deg)}}
@keyframes orbB{from{transform:rotate(200deg) translateX(98px) rotate(-200deg)}to{transform:rotate(-160deg) translateX(98px) rotate(160deg)}}

/* Logo circle — SATU img saja */
.spl-logo-circle {
    position:relative; width:150px; height:150px;
    border-radius:50%; overflow:hidden;
    border:3px solid #c9a84c;
    background:#0b1728; z-index:4;
    box-shadow:
        0 0 0 5px rgba(201,168,76,.12),
        0 0 32px rgba(201,168,76,.6),
        0 0 75px rgba(201,168,76,.22),
        inset 0 0 18px rgba(0,0,0,.45);
    animation:splLogoPulse 3s ease-in-out infinite;
}
@keyframes splLogoPulse{
    0%,100%{box-shadow:0 0 0 5px rgba(201,168,76,.12),0 0 32px rgba(201,168,76,.6),0 0 75px rgba(201,168,76,.22),inset 0 0 18px rgba(0,0,0,.45)}
    50%    {box-shadow:0 0 0 8px rgba(201,168,76,.2),0 0 50px rgba(201,168,76,.8),0 0 110px rgba(201,168,76,.35),inset 0 0 18px rgba(0,0,0,.45)}
}
.spl-logo-img {
    display:block; width:100%; height:100%;
    object-fit:cover; object-position:center;
}

/* Glow bawah logo */
.spl-logo-glow {
    position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
    width:130px; height:22px; pointer-events:none; z-index:1;
    background:radial-gradient(ellipse, rgba(201,168,76,.38) 0%, transparent 68%);
}

/* Ornamen */
.spl-ornament { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.spl-orn-line { display:block; width:80px; height:1px; background:linear-gradient(to right, transparent,#c9a84c,transparent); }
.spl-orn-diamond { display:block; width:8px; height:8px; background:#c9a84c; transform:rotate(45deg); box-shadow:0 0 8px rgba(201,168,76,.7); flex-shrink:0; }

/* Teks */
.spl-title {
    font-family:'Cinzel Decorative','Cinzel',serif;
    font-size:clamp(28px,7vw,50px); font-weight:700; letter-spacing:.24em; margin:0 0 8px;
    background:linear-gradient(180deg,#fff4c0 0%,#c9a84c 40%,#e8c96a 65%,#9a7520 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:splTitleGlow 3s ease-in-out infinite;
}
@keyframes splTitleGlow{0%,100%{filter:drop-shadow(0 0 18px rgba(201,168,76,.35))}50%{filter:drop-shadow(0 0 34px rgba(201,168,76,.7))}}
.spl-sub {
    font-family:'Cinzel',serif; font-size:clamp(10px,2vw,14px); font-weight:400;
    color:rgba(220,200,148,.82); letter-spacing:.1em; margin:0 0 5px;
}
.spl-univ {
    font-family:'IM Fell English',Georgia,serif; font-style:italic;
    font-size:clamp(9px,1.7vw,12px); color:rgba(255,218,150,.5);
    letter-spacing:.06em; margin:0 0 26px;
}

/* Loading bar */
.spl-bar-track { width:clamp(130px,38vw,210px); height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.spl-bar-fill {
    height:100%; width:0;
    background:linear-gradient(90deg,#7a5008,#c9a84c,#f0d060,#c9a84c,#7a5008);
    background-size:300% 100%; border-radius:2px;
    animation:splBarFill 3s ease forwards, splBarShimmer 1.1s linear infinite;
}
@keyframes splBarFill    { 0%{width:0} 100%{width:100%} }
@keyframes splBarShimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }

/* Nav icons (di luar splash) */
.nav-icon        { width:15px;height:15px;stroke-width:2.2;vertical-align:-2px;margin-right:5px;flex-shrink:0; }
.drop-icon       { width:13px;height:13px;stroke-width:2.2;vertical-align:-1px;margin-right:6px; }
.drop-arrow-icon { width:13px;height:13px;stroke-width:2.5;vertical-align:-1px;margin-left:3px;transition:transform .2s; }
.dropdown.open .drop-arrow-icon { transform:rotate(180deg); }

/* Responsive */
@media(max-width:479px){
    .spl-logo-wrap{width:180px;height:180px}
    .spl-ring-1{width:180px;height:180px}
    .spl-ring-2{width:160px;height:160px}
    .spl-ring-3{width:140px;height:140px}
    .spl-logo-circle{width:120px;height:120px}
    .spl-orn-line{width:55px}
    .p1,.p3,.p5{display:none}
}
@media(max-width:360px){
    .spl-logo-wrap{width:160px;height:160px}
    .spl-ring-1{width:160px;height:160px}
    .spl-ring-2{width:142px;height:142px}
    .spl-ring-3{width:124px;height:124px}
    .spl-logo-circle{width:106px;height:106px}
    .spl-title{font-size:24px;letter-spacing:.16em}
}