/* Sketch Dev Studio — "Night Shelf" theme.
   Langit malam berbintang, papan kayu gantung, dan rak buku berisi game.
   Palet: midnight/navy + cream/paper + gold/honey/oak + coral/sky. */
:root{
  --midnight:#141a33; --navy:#1d2649; --navy2:#26335f;
  --cream:#f8f0dd; --paper:#f3e8cf; --card:#fffdf4;
  --ink:#2c2a3e; --inksoft:#5a5470;
  --gold:#e6bd66; --goldsoft:#f2cd85; --honey:#d9a45c; --oak:#c98d4f; --oakd:#a8743a; --edge:#43230a;
  --coral:#e8604a; --sky:#8fb8e6; --sage:#7fb069;
  --disp:'Baloo 2',cursive; --head:'Fredoka',sans-serif; --body:'Andika',sans-serif; --hand:'Caveat',cursive;
  --serif:'Fraunces',Georgia,serif;
  --panel-shadow:0 30px 70px rgba(2,4,16,.55), 0 4px 18px rgba(2,4,16,.35);
  --gold-grad:linear-gradient(180deg,#f9e3ac 0%,#e6bd66 52%,#b98a34 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 700px at 85% -10%, #2b3a6e 0%, rgba(43,58,110,0) 60%),
    radial-gradient(900px 620px at -12% 32%, #22305e 0%, rgba(34,48,94,0) 55%),
    linear-gradient(180deg,#171e3d 0%, var(--midnight) 45%, #10142a 100%);
  background-attachment:fixed;
  color:var(--cream); font-family:var(--body); overflow-x:hidden;
}
::selection{background:var(--gold); color:var(--ink)}
/* Vignette lembut + grain film sangat tipis untuk rasa material premium */
body::before{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 55%, rgba(3,5,15,.42) 100%)}
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
img{max-width:100%}
main,footer,.hero,.marquee{position:relative;z-index:1}
a{color:inherit}

/* ---------- LANGIT (bintang, bulan, awan, komet) ---------- */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
#stars .star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d,3.4s) ease-in-out infinite}
.stars-layer{position:absolute;inset:-48px;will-change:transform}
#glow{position:fixed;left:0;top:0;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;
  pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease;mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,232,170,.17) 0%, rgba(255,232,170,.05) 42%, rgba(255,232,170,0) 68%)}
#sparkles{position:fixed;inset:0;z-index:0;pointer-events:none}
.sparkle{position:absolute;color:#ffe9a8;pointer-events:none;line-height:1;
  text-shadow:0 0 9px rgba(255,220,150,.95);animation:sparkfly var(--life,900ms) ease-out forwards}
@keyframes sparkfly{0%{transform:translate(-50%,-50%) scale(.35) rotate(0deg);opacity:0}
  18%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,16px))) scale(1.05) rotate(85deg);opacity:0}}
@keyframes twinkle{0%,100%{opacity:.14}50%{opacity:.95}}
.moon{position:fixed;top:-64px;right:-40px;width:250px;height:250px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 42% 38%, #fff6d8 0%, #ffe9a8 45%, #f7d789 100%);
  box-shadow:0 0 90px 34px rgba(255,220,150,.30), 0 0 190px 90px rgba(255,220,150,.13)}
.cloud{position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(38,51,95,.85) 0%, rgba(38,51,95,0) 70%);
  animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}
.comet{position:fixed;top:12%;left:-240px;width:210px;height:2px;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #ffeec2 78%, #fff 100%);border-radius:2px;
  transform:rotate(-16deg);animation:cometfly 17s linear infinite}
.comet::after{content:'';position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 14px 5px rgba(255,238,194,.85)}
@keyframes cometfly{0%,86%{transform:translate(0,0) rotate(-16deg);opacity:0}
  88%{opacity:1}96%,100%{transform:translate(125vw,38vh) rotate(-16deg);opacity:0}}

/* ---------- NAV ---------- */
nav{position:fixed;inset:14px 14px auto 14px;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 10px 20px;background:rgba(20,26,51,.85);backdrop-filter:blur(9px);
  border:2px solid rgba(248,240,221,.22);border-radius:999px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
nav .logo{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--cream);text-decoration:none}
nav .logo em{font-style:normal;color:var(--gold)}
nav .links{display:flex;align-items:center;gap:20px}
nav .links a{color:var(--cream);text-decoration:none;font-weight:700;font-size:14px;opacity:.88}
nav .links a:hover{opacity:1;color:var(--goldsoft)}
#langBtn{background:var(--gold);border:2px solid var(--edge);color:var(--ink);border-radius:999px;padding:6px 15px;
  font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.1em;cursor:pointer;box-shadow:0 3px 0 var(--edge)}
#langBtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
@media(max-width:640px){nav{padding:8px 8px 8px 13px} nav .links{gap:9px} nav .links a{font-size:12px} nav .logo{font-size:12.5px;letter-spacing:0}
  #langBtn{padding:5px 9px;font-size:11px}}

/* ---------- PAPAN KAYU GANTUNG (hero) ---------- */
.hero{padding:0 30px 8px}
.sign-wrap{display:flex;flex-direction:column;align-items:center;padding-top:212px;position:relative}
.sign-wrap::before{content:'';position:absolute;top:60px;left:50%;transform:translateX(-50%);
  width:820px;height:480px;max-width:96vw;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(230,189,102,.14) 0%, rgba(230,189,102,0) 65%)}
.lantern{position:absolute;top:58px;z-index:1;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.lantern.left{left:5.5%}.lantern.right{right:5.5%}
.lantern .chain{width:2px;height:118px;background:repeating-linear-gradient(180deg,#6d5327 0 6px,#4a3a1c 6px 12px)}
.lantern .lamp{width:34px;height:46px;border:2.5px solid var(--edge);border-radius:9px;position:relative;
  background:radial-gradient(circle at 50% 56%, #ffedb5 0%, #f4bd55 52%, rgba(244,189,85,.25) 82%);
  box-shadow:0 0 38px 14px rgba(255,198,90,.32), inset 0 0 0 2px rgba(255,240,200,.35);
  animation:flicker 3.4s ease-in-out infinite}
.lantern.right .lamp{animation-delay:-1.7s}
@keyframes flicker{0%,100%{filter:brightness(1)}38%{filter:brightness(1.13)}55%{filter:brightness(.94)}72%{filter:brightness(1.08)}}
@media(max-width:900px){.lantern{display:none}}
.sign{position:relative;z-index:1;text-align:center;max-width:760px;width:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.14)),
    repeating-linear-gradient(93deg, rgba(90,55,15,.10) 0 3px, rgba(90,55,15,0) 3px 26px),
    repeating-linear-gradient(180deg,#c08a49 0 46px,#b37c3e 46px 48px);
  border:3px solid var(--edge);border-radius:16px;
  box-shadow:inset 0 2px 0 rgba(255,235,190,.35), inset 0 -4px 0 rgba(67,35,10,.35),
    inset 0 0 0 2px rgba(249,227,172,.28), 0 34px 70px rgba(0,0,0,.55);
  padding:40px 46px 36px;transform-origin:50% -130px;animation:sway 7.5s ease-in-out infinite}
.sign::before,.sign::after{content:'';position:absolute;top:-128px;width:4px;height:130px;
  background:repeating-linear-gradient(180deg,#96754a 0 7px,#75562e 7px 14px);border-radius:2px}
.sign::before{left:13%;transform:rotate(4.5deg)}
.sign::after{right:13%;transform:rotate(-4.5deg)}
@keyframes sway{0%,100%{transform:rotate(-1.05deg)}50%{transform:rotate(1.05deg)}}
.sign .kick{font-size:11.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#ffe9b0;
  text-shadow:0 2px 0 rgba(67,35,10,.5)}
.sign .brand{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.sign .brand svg{flex:none;filter:drop-shadow(0 3px 0 rgba(67,35,10,.45))}
.sign .brand .word{font-family:var(--disp);font-weight:800;font-size:clamp(36px,6.2vw,64px);line-height:1.02;
  color:var(--cream);letter-spacing:.015em;filter:drop-shadow(0 3px 0 rgba(67,35,10,.5)) drop-shadow(0 10px 22px rgba(0,0,0,.3))}
.sign .brand .word b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.sign-sub{margin-top:30px;max-width:560px;width:100%;text-align:center;position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.12)),
    repeating-linear-gradient(180deg,#a8743a 0 34px,#9c6c34 34px 36px);
  border:3px solid var(--edge);border-radius:13px;
  box-shadow:inset 0 2px 0 rgba(255,235,190,.3), 0 20px 40px rgba(0,0,0,.45);
  padding:14px 24px;transform:rotate(-1.3deg);transform-origin:50% -40px;animation:sway2 8.5s ease-in-out infinite}
.sign-sub::before,.sign-sub::after{content:'';position:absolute;top:-32px;width:3px;height:34px;
  background:repeating-linear-gradient(180deg,#96754a 0 6px,#75562e 6px 12px)}
.sign-sub::before{left:16%}.sign-sub::after{right:16%}
@keyframes sway2{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(-2.1deg)}}
.sign-sub p{font-family:var(--head);font-weight:500;font-size:clamp(14.5px,2vw,17.5px);color:#ffeecb;
  text-shadow:0 2px 0 rgba(67,35,10,.5);line-height:1.45}
@media(max-width:640px){.sign-wrap{padding-top:172px}.sign{padding:28px 20px 24px}.sign::before,.sign::after{top:-104px;height:106px}}

/* ---------- PANEL KREM (pop-up book) ---------- */
.panel{background:linear-gradient(180deg,#faf2de,var(--paper) 78%,#eee0bd);color:var(--ink);
  border:2px solid #e3d0a0;border-radius:22px;
  box-shadow:var(--panel-shadow), inset 0 1px 0 rgba(255,253,244,.9), inset 0 0 0 1px rgba(217,164,92,.22);
  padding:clamp(26px,3.6vw,48px);position:relative;max-width:1080px;margin:0 auto}
.panel .tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:110px;height:26px;background:rgba(230,189,102,.65);border-radius:3px;
  box-shadow:0 2px 6px rgba(20,16,40,.18)}
.tilt-l{transform:rotate(-.55deg)} .tilt-r{transform:rotate(.55deg)}
.narrow{max-width:780px}
main section{padding:30px 30px}
@media(max-width:640px){main section{padding:22px 16px}.hero{padding:0 16px 4px}}

.hero-card{margin-top:44px;max-width:820px;text-align:center}
.hero-kicker{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#a07c2c}
.hero-kicker b{color:var(--coral)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5vw,60px);line-height:1.05;
  letter-spacing:0;margin-top:16px;color:var(--ink)}
.hero h1 .amber{font-style:italic;background:linear-gradient(180deg,#e8930c,#b96f04);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .terra{font-style:italic;color:var(--coral)}
.hero-desc{margin:16px auto 0;max-width:600px;color:var(--inksoft);font-size:clamp(15px,1.6vw,17.5px);line-height:1.65}
.hero-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#f6dc9a 0%,var(--gold) 48%,#cfa14a 100%);color:var(--ink);
  font-family:var(--head);font-weight:600;font-size:15.5px;
  border:2px solid var(--edge);border-radius:999px;padding:12px 24px;box-shadow:0 4px 0 var(--edge);
  transition:transform .15s ease, box-shadow .15s ease}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-22deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transition:left .55s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge)}
.btn:hover::after{left:115%}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:0 4px 0 rgba(44,42,62,.8)}
.btn.ghost:hover{box-shadow:0 6px 0 rgba(44,42,62,.8)}
.btn.cream{background:var(--cream)}
.hero-note{margin-top:20px;font-family:var(--hand);font-size:21px;color:#8a6d2f;transform:rotate(-1.6deg)}
.scroll-cue{text-align:center;margin-top:26px;font-family:var(--hand);font-size:21px;color:rgba(248,240,221,.75)}

/* ---------- MARQUEE (pita kayu) ---------- */
.marquee{margin-top:44px;overflow:hidden;transform:rotate(-1.1deg) scale(1.02);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2)),
    repeating-linear-gradient(180deg,#96682f 0 30px,#8a5f2a 30px 32px);
  border-top:3px solid var(--edge);border-bottom:3px solid var(--edge);
  box-shadow:0 16px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(249,227,172,.25)}
.marquee .track{display:flex;gap:0;white-space:nowrap;padding:11px 0;width:max-content;
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.16em;color:#f6dc9a;
  text-shadow:0 2px 0 rgba(67,35,10,.5);animation:mq 30s linear infinite}
.marquee .track i{font-style:normal;color:var(--gold);margin:0 16px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- KEPALA SEKSI ---------- */
.sec-head{margin-bottom:28px;position:relative;padding-bottom:18px}
.sec-head::before{content:'';position:absolute;left:0;bottom:5px;width:118px;height:1px;
  background:linear-gradient(90deg,var(--honey),rgba(217,164,92,0))}
.sec-head::after{content:'✦';position:absolute;left:124px;bottom:0;font-size:11px;color:var(--honey)}
.sec-head .no{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.22em;
  background:linear-gradient(180deg,#c9930a,#96690a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.9vw,44px);color:var(--ink);margin-top:6px;line-height:1.06}
.sec-head p{margin-top:8px;color:var(--inksoft);font-size:15.5px;line-height:1.6;max-width:640px}
.manifesto{font-size:clamp(16.5px,1.9vw,20px);line-height:1.75;color:#3d3a52}
.manifesto .hl{background:linear-gradient(transparent 60%, rgba(242,205,133,.75) 60%);padding:0 2px}
.manifesto .un{text-decoration:underline wavy var(--coral) 1.5px;text-underline-offset:4px}
.mani-note{margin-top:18px;font-family:var(--hand);font-size:21px;color:#8a6d2f;transform:rotate(-1.2deg)}

/* ---------- RAK BUKU GAME ---------- */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 22px}
@media(max-width:900px){.books{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.books{grid-template-columns:1fr}}
.book{background:linear-gradient(180deg,#fffdf4,#fdf6e0);border:2px solid #e2cd97;border-radius:14px;padding:15px 15px 13px;position:relative;
  box-shadow:0 12px 26px rgba(20,16,40,.18), inset 0 1px 0 #fff;transition:transform .35s cubic-bezier(.22,.8,.28,1), box-shadow .35s ease;color:var(--ink);text-decoration:none;display:block}
.book:hover{transform:translateY(-8px) rotate(-.7deg);box-shadow:0 26px 44px rgba(20,16,40,.28), inset 0 1px 0 #fff}
.book::after{content:'';position:absolute;left:-9px;right:-9px;bottom:-15px;height:15px;border-radius:6px;
  background:linear-gradient(180deg,var(--oak),var(--oakd));border:2px solid var(--edge);
  box-shadow:0 12px 20px rgba(0,0,0,.3)}
.book .cover{position:relative;display:block;border-radius:9px;overflow:hidden}
.book .cover img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.book .cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:11px;z-index:1;
  background:linear-gradient(90deg, rgba(67,35,10,.30), rgba(67,35,10,0))}
.book .cover::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%);
  opacity:.5;transition:opacity .35s ease}
.book:hover .cover::after{opacity:.95}
.book .idx{position:absolute;top:9px;right:9px;z-index:1;background:rgba(20,26,51,.82);color:var(--goldsoft);
  font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.08em;padding:4px 9px;border-radius:999px}
.book h3{font-family:var(--serif);font-weight:600;font-size:21px;margin-top:14px;color:var(--ink)}
.book h3::after{content:'';display:block;width:36px;height:2px;margin-top:7px;border-radius:2px;
  background:linear-gradient(90deg,var(--honey),rgba(217,164,92,0))}
.book .meta{margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--inksoft)}
.pill{display:inline-block;margin-top:11px;font-family:var(--head);font-weight:600;font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:#dbe9fa;color:#2c4a72;border:1.5px solid var(--sky)}
.pill.live{background:#f6d488;color:#6b4e12;border-color:var(--honey)}

/* ---------- SOROTAN (game bintang utama) ---------- */
.spot{max-width:1080px;margin:0 auto;position:relative;color:var(--cream);
  background:linear-gradient(155deg,var(--navy2),var(--navy) 60%,#182040);
  border:2px solid rgba(230,189,102,.5);border-radius:22px;box-shadow:var(--panel-shadow);
  padding:clamp(24px,3.4vw,42px);display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,3.4vw,40px);align-items:center;overflow:hidden}
.spot::before{content:'';position:absolute;top:-70px;right:-50px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #fff6d8 0%, #ffe9a8 48%, rgba(247,215,137,0) 72%)}
.spot .art{position:relative}
.spot .art img{width:100%;border-radius:18px;border:3px solid rgba(248,240,221,.35);
  box-shadow:0 0 0 6px rgba(230,189,102,.18), 0 22px 44px rgba(0,0,0,.5)}
.spot .kick{font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--goldsoft)}
.spot h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.2vw,48px);margin-top:8px;line-height:1.04}
.spot p{margin-top:10px;color:#c9cdea;font-size:15.5px;line-height:1.65;max-width:520px}
.spot .row{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:20px;position:relative;z-index:1}
.spot .pill{margin-top:0}
@media(max-width:760px){.spot{grid-template-columns:1fr}.spot .art{max-width:230px}}

/* ---------- STATISTIK ---------- */
.stats{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:10px 6px;border-top:2px dashed rgba(248,240,221,.2);border-bottom:2px dashed rgba(248,240,221,.2)}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:14px 4px}
@media(min-width:761px){.stat + .stat{border-left:1px solid rgba(230,189,102,.18)}}
.stat .num{font-family:var(--disp);font-weight:800;font-size:clamp(36px,4.6vw,54px);line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.stat .num em{font-style:normal;color:var(--coral);background:none;-webkit-text-fill-color:var(--coral)}
.stat .lab{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(248,240,221,.72)}

/* ---------- FILOSOFI ---------- */
.phil-row{display:flex;gap:16px;align-items:baseline;padding:15px 2px;border-top:1.5px dashed rgba(44,42,62,.22)}
.phil-row .n{font-family:var(--hand);font-size:19px;color:#b08a3e;min-width:42px}
.phil-row h3{font-family:var(--head);font-weight:600;font-size:18.5px;min-width:118px;color:var(--ink)}
.phil-row p{color:var(--inksoft);font-size:14.5px;line-height:1.55}
@media(max-width:560px){.phil-row{flex-wrap:wrap;gap:4px 12px}.phil-row h3{min-width:0}}

/* ---------- PANGGILAN TESTER (papan kayu kecil) ---------- */
.tester{max-width:820px;margin:0 auto;text-align:center;position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.13)),
    repeating-linear-gradient(180deg,#bb8547 0 40px,#b37c3e 40px 42px);
  border:3px solid var(--edge);border-radius:16px;
  box-shadow:inset 0 2px 0 rgba(255,235,190,.35), inset 0 -4px 0 rgba(67,35,10,.35), 0 26px 50px rgba(0,0,0,.5);
  padding:clamp(26px,3.6vw,40px)}
.tester h2{font-family:var(--disp);font-weight:800;font-size:clamp(25px,3.6vw,36px);color:var(--cream);
  text-shadow:0 3px 0 rgba(67,35,10,.55);line-height:1.12}
.tester p{margin:12px auto 0;max-width:520px;color:#ffe9b0;font-size:15px;line-height:1.6;
  text-shadow:0 1.5px 0 rgba(67,35,10,.45)}
.tester .btn{margin-top:20px;background:var(--cream);box-shadow:0 4px 0 var(--edge)}

/* ---------- FOOTER ---------- */
footer{padding:34px 30px 46px}
@media(max-width:640px){footer{padding:26px 16px 38px}}
.foot-panel{background:linear-gradient(180deg,var(--navy),#12172e);color:var(--cream);
  border:2px solid rgba(248,240,221,.16);border-radius:22px;box-shadow:var(--panel-shadow);
  padding:clamp(24px,3.4vw,44px);max-width:1080px;margin:0 auto;position:relative}
.foot-panel .tape{display:none}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .col{display:flex;flex-direction:column;gap:8px}
.foot-grid h4{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldsoft);margin-bottom:4px}
.foot-grid a{color:rgba(248,240,221,.85);text-decoration:none;font-size:14.5px}
.foot-grid a:hover{color:var(--gold)}
.foot-mail{font-family:var(--head);font-weight:600;font-size:17px !important;color:var(--cream) !important}
.foot-mega{margin-top:30px;font-family:var(--disp);font-weight:800;font-size:clamp(38px,7.6vw,86px);
  line-height:.95;white-space:nowrap;overflow:hidden;
  background:linear-gradient(180deg, rgba(249,227,172,.42), rgba(230,189,102,.08));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.foot-base{margin-top:16px;padding-top:16px;border-top:1.5px solid rgba(248,240,221,.14);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:rgba(248,240,221,.6)}

/* ---------- KANVAS 3D + FALLBACK LANGIT DOM ---------- */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none}
#scene canvas{width:100%;height:100%;display:block}
html.gl-on #stars,html.gl-on .moon,html.gl-on .cloud,html.gl-on .comet{opacity:0;transition:opacity 1.2s ease}
#stars,.moon,.cloud,.comet{transition:opacity 1.2s ease}

/* ---------- PRELOADER ---------- */
#loader{position:fixed;inset:0;z-index:200;background:linear-gradient(180deg,#171e3d,var(--midnight));
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease, visibility .7s}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
#loader .ld-mark{text-align:center}
#loader .ld-trail{stroke-dasharray:120;stroke-dashoffset:120;animation:ldDraw 1s ease forwards}
#loader .ld-star{opacity:0;animation:ldPop .5s ease .55s forwards;transform-origin:40px 22px}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
#loader .ld-word{margin-top:16px;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.14em;color:var(--cream)}
#loader .ld-word b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#loader .ld-bar{margin:18px auto 0;width:170px;height:2px;background:rgba(248,240,221,.16);border-radius:2px;overflow:hidden}
#loader .ld-bar span{display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,var(--honey),var(--goldsoft));animation:ldBar 1.05s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes ldBar{from{transform:translateX(-110%)}to{transform:translateX(280%)}}

/* ---------- KURSOR KUSTOM (hanya pointer halus) ---------- */
#cursorDot,#cursorRing{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;display:none}
html.has-cursor #cursorDot,html.has-cursor #cursorRing{display:block}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}
#cursorDot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--goldsoft);
  box-shadow:0 0 10px 2px rgba(255,220,150,.75)}
#cursorRing{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid rgba(230,189,102,.65);
  transition:width .25s ease,height .25s ease,margin .25s ease,border-color .25s ease,background .25s ease}
#cursorRing.grow{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:rgba(230,189,102,.95);
  background:rgba(230,189,102,.10)}

/* ---------- PANGGUNG 3D HERO ---------- */
.stage3d{position:relative;height:54vh;min-height:340px;max-height:560px}
.stage-cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;pointer-events:none}
.stage-kick{display:block;font-family:var(--head);font-weight:600;font-size:12px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--goldsoft);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.stage-hint{display:block;margin-top:8px;font-family:var(--hand);font-size:21px;color:rgba(248,240,221,.78)}

/* ---------- ANGKA HANTU EDITORIAL DI KEPALA SEKSI ---------- */
.sec-head .ghost{position:absolute;right:2px;top:-38px;z-index:0;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:118px;line-height:1;
  color:rgba(185,138,52,.13)}
.sec-head > *:not(.ghost){position:relative;z-index:1}
@media(max-width:640px){.sec-head .ghost{font-size:84px;top:-26px}}

/* ---------- ROUTER SPA ---------- */
#app{transition:opacity .24s ease, transform .24s ease}
#app.page-out{opacity:0;transform:translateY(10px)}
nav .links a.active{color:var(--gold);opacity:1}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(26px);filter:blur(5px);
  transition:opacity .9s cubic-bezier(.22,.8,.28,1),transform .9s cubic-bezier(.22,.8,.28,1),filter .9s cubic-bezier(.22,.8,.28,1)}
.rv.on{opacity:1;transform:none;filter:blur(0)}
.tilt-l{--tilt:-.55deg}.tilt-r{--tilt:.55deg}
.tilt-l.rv,.tilt-r.rv{transform:rotate(var(--tilt)) translateY(24px)}
.tilt-l.rv.on,.tilt-r.rv.on{transform:rotate(var(--tilt))}

/* ---------- SUBHALAMAN (kontak / privacy / terms) ---------- */
.subhero{min-height:58svh;display:flex;align-items:flex-end;padding:128px 30px 40px;position:relative;z-index:1}
.subhero-card{max-width:640px;transform:rotate(-.5deg)}
.subhero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5.2vw,54px);line-height:1.03;margin-top:12px;color:var(--ink)}
.subhero .sub{margin-top:12px;color:var(--inksoft);font-size:clamp(14.5px,1.5vw,17px);line-height:1.6}
@media(max-width:640px){.subhero{padding:110px 16px 28px}}
.lang-section{display:none}
.lang-section.active{display:block}
.doc{max-width:880px;margin:0 auto;padding:0 30px clamp(60px,8vw,100px);position:relative;z-index:1}
@media(max-width:640px){.doc{padding-left:16px;padding-right:16px}}
.doc-card{background:linear-gradient(180deg,var(--cream),var(--paper));color:var(--ink);
  border:2px solid #e7d9b4;border-radius:20px;box-shadow:var(--panel-shadow);padding:clamp(22px,3.4vw,40px)}
.doc h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,36px);line-height:1.1;margin:0 0 20px}
.doc h2{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,23px);line-height:1.22;margin:36px 0 12px}
.doc h3{font-size:16.5px;font-weight:700;margin:24px 0 9px}
.doc p,.doc li{font-size:15.5px;line-height:1.75;color:#454055}
.doc p{margin:0 0 13px}
.doc ul,.doc ol{margin:0 0 15px 22px}
.doc li{margin-bottom:6px}
.doc a{color:#c74a36;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.doc a.btn{color:var(--ink);text-decoration:none}
.doc strong{color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14px}
.doc th,.doc td{border:1.5px solid rgba(44,42,62,.18);padding:9px 11px;text-align:left;color:#454055;line-height:1.55}
.doc th{color:var(--ink);background:rgba(230,189,102,.22)}
.doc label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;margin:15px 0 6px;color:var(--ink)}
.doc input,.doc textarea,.doc select{width:100%;background:#fff;border:2px solid #cfc39f;border-radius:12px;
  padding:11px 13px;font-family:var(--body);font-size:15px;color:var(--ink)}
.doc input:focus,.doc textarea:focus,.doc select:focus{outline:none;border-color:var(--honey)}
.doc textarea{min-height:120px;resize:vertical}
.doc button{display:inline-block;margin-top:16px;background:linear-gradient(180deg,var(--goldsoft),var(--gold));
  color:var(--ink);border:2px solid var(--edge);border-radius:999px;padding:11px 24px;
  font-family:var(--head);font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 4px 0 var(--edge)}
.doc .card,.doc .faq-item,.doc .info-box{background:#fff;border:2px solid #e0d0a4;border-radius:14px;
  padding:16px 18px;margin-bottom:13px}
.doc .contact-grid,.doc .social-grid{display:grid;gap:14px}
@media(min-width:700px){.doc .contact-grid,.doc .social-grid{grid-template-columns:1fr 1fr}}
.doc .faq-q{font-family:var(--head);font-weight:600;font-size:16px;color:var(--ink)}
.doc .faq-a{margin-top:6px}
.doc .highlight{background:linear-gradient(transparent 60%, rgba(242,205,133,.75) 60%)}
.doc .note{font-style:italic;color:var(--inksoft)}
.doc .signature{font-family:var(--hand);font-size:25px;color:#8a6d2f}
.doc .sketch-divider{border:none;border-top:2px dashed rgba(44,42,62,.25);margin:26px 0}
.doc .subtitle{color:var(--inksoft)}
.doc .contact-icon{font-size:22px}
.doc .contact-title{font-family:var(--head);font-weight:600;color:var(--ink)}
.doc .contact-value{color:var(--inksoft)}
.doc .social-links,.doc .footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer{position:relative;z-index:1}

/* ---------- Navigasi bawah mobile (gaya aplikasi native) ---------- */
.bottom-nav{display:none}
.sheet,.sheet-backdrop{display:none}
@media(max-width:760px){
  nav.bottom-nav{display:flex;position:fixed;top:auto;left:0;right:0;bottom:0;z-index:65;gap:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:rgba(15,19,38,.98);border:none;border-top:1px solid rgba(248,240,221,.14);border-radius:0;box-shadow:0 -10px 26px rgba(0,0,0,.35);align-items:stretch;justify-content:flex-start}
  .bottom-nav .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 0;border:none;background:none;border-radius:14px;color:#a7b1d8;text-decoration:none;font:700 10.5px 'Andika',sans-serif;letter-spacing:.02em;cursor:pointer;white-space:nowrap;border-radius:999px;margin:2px}
  .bottom-nav .tab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bottom-nav .tab.active{color:#f2cd7e;background:rgba(230,189,102,.14)}
  nav{justify-content:center}
  nav .logo{font-size:15.5px}
  nav .links{display:none}
  #langBtn{display:none}
  .subhero-card{text-align:center}
  .subhero-card .sub{margin-left:auto;margin-right:auto}
  .sec-head{text-align:center}
  .sec-head::before{left:50%;margin-left:-59px}
  .sec-head::after{left:50%;margin-left:66px}
  .sec-head p{margin-left:auto;margin-right:auto}
  .tester{text-align:center}
  .tester p{margin-left:auto;margin-right:auto}
  .bottom-nav .tab span{display:none}
  .sheet-backdrop{display:block;position:fixed;inset:0;z-index:66;background:rgba(8,10,24,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  .sheet-backdrop.open{opacity:1;pointer-events:auto}
  .sheet{display:block;position:fixed;left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:67;background:rgba(22,28,54,.97);border:1px solid rgba(230,189,102,.35);border-radius:20px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s}
  .sheet.open{opacity:1;transform:none;pointer-events:auto}
  .sheet-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;color:var(--cream);text-decoration:none;font:700 14px 'Andika',sans-serif}
  .sheet-row svg{width:22px;height:22px;fill:none;stroke:#e9c979;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .lang-pills{margin-left:auto;display:flex;gap:6px}
  .lpill{border:1px solid rgba(230,189,102,.5);background:none;color:#a7b1d8;border-radius:999px;padding:6px 14px;font:700 12px 'Andika',sans-serif;cursor:pointer}
  .lpill.on{background:#e6bd66;color:#2a2438;border-color:#e6bd66}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .tilt-l,.tilt-r{--tilt:0deg}
  .spot .art{margin-left:auto;margin-right:auto}
  .spot{text-align:center}
  .spot p{margin-left:auto;margin-right:auto}
  .spot .row{justify-content:center}
}