:root{
  --bg:#050505;--panel:#0d0d0d;--panel2:#111;--gold:#f5c542;--gold2:#fff0a3;
  --white:#f7f7f7;--muted:#a9a9a9;--line:rgba(245,197,66,.25);
  --shadow:0 20px 70px rgba(0,0,0,.55);--radius:22px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#332800 0,#090909 38%,#030303 100%);color:var(--white);font-family:Poppins,system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}
a{text-decoration:none;color:inherit}.app{min-height:100vh;transition:opacity .8s,transform .8s}.is-hidden{opacity:0;transform:scale(1.015);pointer-events:none}.top-ticker{height:32px;overflow:hidden;border-bottom:1px solid var(--line);background:#050505;color:var(--gold);font:600 10px Orbitron;letter-spacing:2px;white-space:nowrap}.top-ticker div{display:inline-block;min-width:100%;animation:ticker 18s linear infinite}@keyframes ticker{to{transform:translateX(-100%)}}
.loading-screen{position:fixed;z-index:1000;inset:0;background:#020202;display:grid;place-items:center;overflow:hidden}.loading-screen:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,#8c6b00,transparent 22%,#fff2a5,transparent 35%);filter:blur(50px);opacity:.16;animation:spin 7s linear infinite}.loading-screen:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#231c00 0,transparent 40%),linear-gradient(115deg,transparent 45%,rgba(255,255,255,.08) 46%,transparent 47%);opacity:.55}
.loading-content{position:relative;z-index:5;text-align:center;width:min(92vw,540px);padding:24px}.eyebrow,.section-label{font:700 10px Orbitron;letter-spacing:3px;color:var(--gold);text-transform:uppercase}.profile-frame{width:min(65vw,300px);aspect-ratio:1/1;margin:18px auto;position:relative;border-radius:50%;padding:9px;background:conic-gradient(#fff,#b8860b,#fff6b0,#6d4b00,#fff);box-shadow:0 0 30px rgba(245,197,66,.5),0 0 100px rgba(245,197,66,.22);animation:pulse 2.5s ease-in-out infinite}.profile-frame img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:3px solid #050505}.corner{position:absolute;width:25px;height:25px;border-color:#fff2a3;z-index:3}.c1{left:-8px;top:20%;border-left:2px solid;border-top:2px solid}.c2{right:-8px;top:20%;border-right:2px solid;border-top:2px solid}.c3{left:-8px;bottom:20%;border-left:2px solid;border-bottom:2px solid}.c4{right:-8px;bottom:20%;border-right:2px solid;border-bottom:2px solid}.light-orbit{position:absolute;left:50%;top:50%;width:min(72vw,340px);height:min(72vw,340px);margin:-170px 0 0 -170px;border:1px solid rgba(255,255,255,.35);border-radius:50%;z-index:4;pointer-events:none}.orbit-1{transform:rotateX(66deg);animation:orbit 3.2s linear infinite}.orbit-2{transform:rotateY(66deg) rotateZ(25deg);animation:orbit2 4.2s linear infinite;border-color:rgba(245,197,66,.8)}@keyframes orbit{to{transform:rotateX(66deg) rotate(360deg)}}@keyframes orbit2{to{transform:rotateY(66deg) rotateZ(385deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{filter:brightness(1.18);transform:scale(1.015)}}
.loading-title{font:800 clamp(28px,7vw,46px) Orbitron;letter-spacing:3px}.loading-title span{color:var(--gold)}.loading-sub{font-size:10px;letter-spacing:2px;color:#aaa;margin:8px 0 20px}.progress-shell{height:7px;border:1px solid var(--line);background:#111;border-radius:99px;overflow:hidden;box-shadow:inset 0 0 12px #000}.progress-shell div{height:100%;width:0;background:linear-gradient(90deg,#8a6500,#fff0a0,#c89414);box-shadow:0 0 16px var(--gold);transition:width .08s}.progress-row{display:flex;justify-content:space-between;font:600 9px Orbitron;color:#777;margin:7px 2px 16px}.progress-row strong{color:var(--gold)}.gold-btn,.ghost-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:12px;font:700 11px Orbitron;letter-spacing:1px;cursor:pointer;border:1px solid rgba(255,241,161,.5);transition:.25s;position:relative;overflow:hidden}.gold-btn{background:linear-gradient(135deg,#8f6500,#f5c542 48%,#fff0a0 60%,#b37c00);color:#080808;box-shadow:0 0 18px rgba(245,197,66,.25),inset 0 1px rgba(255,255,255,.7)}.gold-btn:after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:shine 3.5s infinite}@keyframes shine{20%,100%{transform:translateX(120%)}}.gold-btn:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(245,197,66,.45)}.gold-btn:disabled{opacity:.45;cursor:not-allowed}.ghost-btn{border-color:#555;background:rgba(255,255,255,.03)}.ghost-btn:hover{border-color:var(--gold);color:var(--gold)}.enter-btn{width:100%;margin-top:2px}.loading-tip{font-size:9px;color:#666;margin-top:12px}.spark{position:absolute;color:var(--gold);animation:blink 1.5s infinite}.spark-1{left:14%;top:20%}.spark-2{right:15%;top:30%;animation-delay:.4s}.spark-3{right:24%;bottom:18%;animation-delay:.8s}@keyframes blink{50%{opacity:.15;transform:scale(.6)}}
.hero{min-height:calc(100vh - 32px);display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:28px;max-width:1250px;margin:auto;padding:70px 24px 90px}.hero-copy h1{font:800 clamp(48px,9vw,105px)/.9 Orbitron;margin:15px 0;color:#fff;text-transform:uppercase;text-shadow:0 0 35px rgba(245,197,66,.15)}.hero-copy h1 span{color:var(--gold)}.hero-copy p{max-width:580px;color:#aaa;line-height:1.8;font-size:14px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.micro-status{font:600 9px Orbitron;color:#8e8e8e;letter-spacing:1.5px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d6ae25;box-shadow:0 0 10px #f5c542;margin-right:8px}.hero-art{position:relative;min-height:560px;display:grid;place-items:center}.hero-art img{position:relative;z-index:2;width:100%;height:640px;object-fit:contain;object-position:center;filter:drop-shadow(0 0 30px rgba(245,197,66,.28));}.art-glow{position:absolute;width:70%;height:70%;border-radius:50%;background:#d3a900;filter:blur(100px);opacity:.12}.art-hud{position:absolute;z-index:4;right:2%;bottom:7%;border:1px solid var(--line);background:rgba(0,0,0,.55);backdrop-filter:blur(8px);padding:10px 13px;font:700 9px Orbitron;color:var(--gold);display:flex;gap:12px}.art-hud b{color:#fff}
main{max-width:1250px;margin:auto}.section{padding:90px 24px 50px}.section h2{font:800 clamp(28px,5vw,48px) Orbitron;margin:10px 0 10px}.section h2 span{color:var(--gold)}.section-lead{color:#888;max-width:720px;line-height:1.8;font-size:13px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.joki-grid{grid-template-columns:repeat(3,1fr)}.product{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);overflow:hidden}.product:before{content:"";position:absolute;width:140px;height:140px;right:-70px;top:-70px;background:var(--gold);filter:blur(60px);opacity:.09}.product.featured{border-color:rgba(245,197,66,.45)}.product-tag{display:inline-block;font:700 8px Orbitron;color:#080808;background:var(--gold);padding:6px 9px;border-radius:7px;margin-bottom:15px}.product h3{font:700 17px Orbitron;margin:4px 0 15px}.product p{font-size:12px;color:#999;line-height:1.6}.product ul{list-style:none;padding:0;margin:0 0 18px;color:#aaa;font-size:11px;line-height:1.9}.product li:before{content:"✦";color:var(--gold);margin-right:8px}.price{font:800 24px Orbitron;color:var(--gold);margin:12px 0 18px}.full{width:100%}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.steps>div{padding:25px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#0c0c0c}.steps b{font:800 30px Orbitron;color:var(--gold)}.steps h3{font:700 15px Orbitron}.steps p{font-size:12px;color:#888;line-height:1.7}.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}.contact-card{background:#0b0b0b;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:20px}.contact-card small{font:700 8px Orbitron;color:#777;letter-spacing:1px}.contact-card h3{font:700 15px Orbitron;min-height:42px}.benefits{margin-top:22px;padding:25px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(120deg,rgba(245,197,66,.06),rgba(255,255,255,.02))}.benefits h3{font:700 15px Orbitron}.benefit-grid{display:flex;gap:10px;flex-wrap:wrap}.benefit-grid span{font-size:11px;color:#aaa;border:1px solid #242424;padding:9px 11px;border-radius:10px}.info-layout{display:grid;grid-template-columns:1fr 330px;gap:25px;align-items:start;margin-top:28px}.info-copy{padding:28px;border-radius:20px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08);color:#999;line-height:1.9;font-size:13px}.qris-card{background:#fff;color:#111;border-radius:20px;padding:10px;text-align:center;font:800 10px Orbitron;box-shadow:0 0 35px rgba(255,255,255,.08)}.qris-card img{display:block;width:100%;border-radius:13px;margin-bottom:10px}footer{max-width:1250px;margin:30px auto 110px;padding:30px 24px;color:#555;font:600 9px Orbitron;display:flex;justify-content:space-between;border-top:1px solid #1b1b1b}.bottom-nav{position:fixed;z-index:50;bottom:14px;left:50%;transform:translateX(-50%);width:min(94vw,720px);display:grid;grid-template-columns:repeat(5,1fr);padding:7px;border:1px solid rgba(245,197,66,.25);border-radius:18px;background:rgba(7,7,7,.85);backdrop-filter:blur(16px);box-shadow:0 15px 45px rgba(0,0,0,.7)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 3px;border-radius:12px;color:#777;font:700 7px Orbitron;letter-spacing:.4px}.bottom-nav a span{font-size:15px}.bottom-nav a.active,.bottom-nav a:hover{color:var(--gold);background:rgba(245,197,66,.07)}.sound-toggle{position:fixed;z-index:51;right:18px;bottom:92px;border:1px solid var(--line);background:#090909;color:var(--gold);border-radius:99px;padding:9px 12px;font:700 9px Orbitron;cursor:pointer;box-shadow:0 0 20px rgba(245,197,66,.15)}.ambient{position:fixed;z-index:-1;width:30vw;height:30vw;border-radius:50%;filter:blur(100px);opacity:.08;background:#e0ad00}.ambient-1{left:-10vw;top:35vh}.ambient-2{right:-10vw;top:75vh}.reveal{opacity:0;transform:translateY(25px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}.hud{position:absolute;z-index:4;border:1px solid rgba(245,197,66,.12)}.hud-a{inset:6% 4%;clip-path:polygon(0 0,25% 0,25.3% .2%,74.7% .2%,75% 0,100% 0,100% 25%,99.8% 25.3%,99.8% 74.7%,100% 75%,100% 100%,75% 100%,74.7% 99.8%,25.3% 99.8%,25% 100%,0 100%,0 75%,.2% 74.7%,.2% 25%,0 25%)}.hud-b{width:150px;height:30px;right:8%;top:9%;border-color:#c8a633;opacity:.4}.scanline{position:absolute;z-index:6;inset:0;background:linear-gradient(transparent 49%,rgba(255,255,255,.035) 50%,transparent 51%);background-size:100% 8px;pointer-events:none;opacity:.5}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:45px}.hero-art{min-height:450px}.hero-art img{height:520px}.product-grid,.joki-grid{grid-template-columns:repeat(2,1fr)}.contact-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}.info-layout{grid-template-columns:1fr}}
@media(max-width:560px){.hero{padding:35px 16px 55px}.hero-copy h1{font-size:48px}.hero-art{min-height:360px}.hero-art img{height:420px}.section{padding:65px 16px 30px}.product-grid,.joki-grid,.contact-grid{grid-template-columns:1fr}.bottom-nav{bottom:8px}.bottom-nav a{font-size:6px}.bottom-nav a span{font-size:13px}.sound-toggle{bottom:82px;right:10px}.info-layout{grid-template-columns:1fr}.qris-card{max-width:340px;margin:auto}footer{padding:20px 16px;margin-bottom:95px;flex-direction:column;gap:8px}.profile-frame{width:min(60vw,240px)}}
