:root{
  --emerald-400:#2fd27a;--mint:#9dffc6;--gold:#d4af37;--gold-light:#f6e27a;--text:#f1fff6;
  --gold-grad:linear-gradient(135deg,#f6e27a 0%,#d4af37 45%,#8f6a00 100%);
  --edge:linear-gradient(135deg,rgba(246,226,122,.85),rgba(212,175,55,.18) 40%,rgba(47,210,122,.28) 70%,rgba(246,226,122,.65));
  --glow:radial-gradient(circle at 0 0,rgba(20,150,80,.3),transparent 50%),radial-gradient(circle at 100% 100%,rgba(190,145,20,.24),transparent 50%);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:#040705;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--text);min-height:100dvh;overflow-x:hidden;background:#040705;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%}

/* ===== Background (statis = ringan) ===== */
.bgimg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;pointer-events:none;user-select:none;
  animation:bgIn 1.2s ease both}
@keyframes bgIn{from{opacity:0}}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--glow),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%),linear-gradient(rgba(4,7,5,.4),rgba(4,7,5,.72))}

.meteors{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.meteors i{position:absolute;top:-10%;width:2px;height:90px;border-radius:2px;opacity:0;will-change:transform,opacity;
  background:linear-gradient(to bottom,transparent,#f6e27a);transform:rotate(-35deg);animation:meteor 7s linear infinite}
.meteors i:nth-child(1){left:78%;animation-delay:1.5s}
.meteors i:nth-child(2){left:45%;animation-delay:4.2s;animation-duration:9s}
.meteors i:nth-child(3){left:96%;animation-delay:7s;animation-duration:8s}
@keyframes meteor{0%{opacity:0;transform:rotate(-35deg) translate3d(0,0,0)}6%{opacity:.9}22%,100%{opacity:0;transform:rotate(-35deg) translate3d(0,120vh,0)}}

.wrap{position:relative;z-index:1;width:min(100%,540px);margin:0 auto;
  padding:max(30px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* ===== Hero ===== */
.hero{text-align:center;padding:6px 0 10px}
.logo-halo{--l:168px;position:relative;width:calc(var(--l)*1.13);height:calc(var(--l)*.9);margin:0 auto 6px;display:grid;place-items:center;
  animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translate3d(0,-6px,0)}}
.logo-halo::before{content:"";position:absolute;inset:-18%;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(212,175,55,.38),rgba(47,210,122,.14) 50%,transparent 70%);animation:breathe 4s ease-in-out infinite}
.logo-halo img{position:relative;width:var(--l);height:calc(var(--l)*.786);object-fit:contain;animation:logoIn 1s var(--ease) both;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}
@keyframes logoIn{from{opacity:0;transform:scale(.7) translateY(10px)}}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;will-change:transform}
.r1{width:calc(var(--l)*.893);height:calc(var(--l)*.893);margin:calc(var(--l)*-.4465) 0 0 calc(var(--l)*-.4465);background:conic-gradient(transparent 0 55%,#f6e27a,transparent 80%);
  -webkit-mask:radial-gradient(circle,transparent 66%,#000 68%);mask:radial-gradient(circle,transparent 66%,#000 68%);animation:rot 5s linear infinite}
.r2{width:calc(var(--l)*1.048);height:calc(var(--l)*1.048);margin:calc(var(--l)*-.524) 0 0 calc(var(--l)*-.524);border:1px dashed rgba(212,175,55,.35);animation:rot 28s linear infinite reverse}
@keyframes rot{to{transform:rotate(360deg)}}

.spark{position:absolute;width:10px;height:10px;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff6c0 0 25%,transparent 65%);animation:twinkle 3.2s ease-in-out infinite}
.spark::before,.spark::after{content:"";position:absolute;left:50%;top:50%;background:#f6e27a;transform:translate(-50%,-50%)}
.spark::before{width:1px;height:22px}.spark::after{width:22px;height:1px}
.s1{left:8%;top:18%}.s2{right:6%;top:40%;animation-delay:1.1s}.s3{left:20%;bottom:6%;animation-delay:2.1s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}

.title{font-family:'Cinzel',serif;font-weight:800;font-size:clamp(1.4rem,7.2vw,2.5rem);letter-spacing:.12em;max-width:100%;
  background:linear-gradient(100deg,#8f6a00,#f6e27a 30%,#fff4b8 50%,#d4af37 70%,#8f6a00);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s linear infinite,reveal 1.2s var(--ease) both}
@keyframes shine{to{background-position:220% center}}
@keyframes reveal{from{opacity:0;letter-spacing:.45em}}
.tagline{margin-top:6px;font-size:.8rem;color:var(--mint);opacity:.92;animation:fadeup .9s .5s both;text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}

.badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 14px;border-radius:999px;line-height:1;
  font-size:.72rem;font-weight:600;color:var(--gold-light);background:rgba(11,61,36,.7);border:1px solid rgba(212,175,55,.45);animation:fadeup .9s .8s both}
.badge .fa-circle-check{color:var(--emerald-400);animation:pop 2.4s ease-in-out infinite 1.5s}
@keyframes pop{0%,80%,100%{transform:scale(1)}90%{transform:scale(1.35)}}

.ticker{margin:22px -16px 0;overflow:hidden;border-block:1px solid rgba(212,175,55,.3);background:rgba(212,175,55,.06);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;width:max-content;will-change:transform;animation:marquee 26s linear infinite}
.track span{padding:9px 22px;font-size:.68rem;font-weight:600;letter-spacing:.16em;color:var(--gold-light);white-space:nowrap}
.track i{font-size:.5rem;margin-right:10px;color:var(--emerald-400);vertical-align:middle}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

.ornament{display:flex;align-items:center;gap:12px;max-width:240px;margin:16px auto 0;color:var(--gold);font-size:.55rem}
.ornament span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ===== Sections ===== */
.section{margin-top:26px}
.section-title{font-family:'Cinzel',serif;font-size:.95rem;font-weight:600;letter-spacing:.18em;color:var(--gold-light);
  margin-bottom:12px;display:flex;align-items:center;gap:12px;text-shadow:0 1px 8px rgba(0,0,0,.95)}
.section-title::before,.section-title::after{content:"";flex:1;height:1px;transform:scaleX(0);transition:transform .9s var(--ease)}
.section-title::before{background:linear-gradient(270deg,rgba(212,175,55,.6),transparent);transform-origin:right}
.section-title::after{background:linear-gradient(90deg,rgba(212,175,55,.6),transparent);transform-origin:left}
.section-title.show::before,.section-title.show::after{transform:scaleX(1)}

/* ===== Cards & tiles ===== */
.card,.tile{position:relative;overflow:hidden;contain:layout paint;text-decoration:none;color:var(--text);border-radius:18px;border:1px solid transparent;
  --base:linear-gradient(135deg,rgba(11,61,36,.9),rgba(4,7,5,.96));
  background:var(--base) padding-box,var(--edge) border-box;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  opacity:0;transform:translate3d(0,18px,0) scale(.97);
  transition:transform .28s ease-out,opacity .5s ease,box-shadow .25s ease}
.card{display:flex;align-items:center;gap:14px;padding:13px 14px;margin-bottom:10px}
.card.show,.tile.show{opacity:1;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card:active,.tile:active{transform:scale(.97);transition-duration:.1s}
.card:focus-visible,.tile:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

.icon{flex:0 0 46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  color:#1a1300;background:var(--gold-grad);box-shadow:0 0 14px rgba(212,175,55,.35),inset 0 1px 0 rgba(255,255,255,.5);position:relative;z-index:2;transition:transform .3s}
.icon i,.go i,.tile i{display:block;line-height:1;text-align:center}
.icon i{width:1em;height:1em}.icon i::before{display:block;width:1em;height:1em;line-height:1}
.label{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:.96rem;line-height:1.25;position:relative;z-index:2}
.label small{display:block;font-weight:400;font-size:.72rem;color:var(--mint);opacity:.85;margin-top:2px}
.go{position:relative;z-index:2;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;
  color:var(--gold-light);border:1px solid rgba(212,175,55,.4);transition:transform .25s,background .25s,color .25s}

.card.primary{padding:17px 16px;--base:linear-gradient(135deg,#2a2208,#0b3d24 55%,#050a07);
  box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 26px rgba(212,175,55,.2)}
.card.primary::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;margin:-80% 0 0 -80%;z-index:0;will-change:transform;
  background:conic-gradient(#8f6a00,#fff4b8,#d4af37,rgba(47,210,122,.7),#8f6a00);animation:rot 4.5s linear infinite}
.card.primary::after{content:"";position:absolute;inset:1.5px;border-radius:16.5px;z-index:1;background:var(--base)}
.card.primary .icon{flex-basis:52px;height:52px;font-size:1.5rem;animation:pulse 2.6s ease-in-out infinite}
.card.primary .go{animation:nudge 1.6s ease-in-out infinite}
.card.primary .label{font-size:1.08rem}
@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 0 22px rgba(246,226,122,.6),inset 0 1px 0 rgba(255,255,255,.5)}}
@keyframes nudge{50%{transform:translate3d(4px,0,0)}}
.sheen{position:absolute;top:0;bottom:0;left:0;width:45%;z-index:3;pointer-events:none;will-change:transform;
  background:linear-gradient(100deg,transparent,rgba(246,226,122,.22),transparent);transform:translate3d(-130%,0,0) skewX(-20deg);animation:sweep 5s ease-in-out infinite 1.5s}
@keyframes sweep{0%{transform:translate3d(-130%,0,0) skewX(-20deg)}45%,100%{transform:translate3d(330%,0,0) skewX(-20deg)}}

.wa .icon{background:linear-gradient(135deg,#9dffc6,#25d366,#128c4a);color:#04200f}
.tg .icon{background:linear-gradient(135deg,#9ee1ff,#27a7e7,#1b7fb3);color:#031a28}
.ig .icon{background:linear-gradient(135deg,#ffd27d,#f56040,#c13584);color:#fff}
.x .icon{background:linear-gradient(135deg,#fff,#cfcfcf,#8c8c8c);color:#000}
.fb .icon{background:linear-gradient(135deg,#8db8ff,#1877f2,#0d4fb3);color:#fff}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;font-weight:600;font-size:.85rem;
  --base:linear-gradient(160deg,rgba(11,61,36,.88),rgba(4,7,5,.96))}
.tile i{font-size:1.5rem;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .3s}

@media (hover:hover) and (pointer:fine){
  .card:hover,.tile:hover{box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 22px rgba(212,175,55,.28)}
  .card:hover:not(.primary){background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(246,226,122,.16),transparent 60%),var(--base) padding-box,var(--edge) border-box}
  .tile:hover{background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(246,226,122,.18),transparent 60%),var(--base) padding-box,var(--edge) border-box}
  .card:hover .icon{transform:scale(1.08) rotate(-4deg)}
  .card:hover .go{background:var(--gold-grad);color:#1a1300;transform:translateX(3px)}
  .tile:hover i{transform:scale(1.15) translateY(-2px)}
}

.ripple{position:absolute;border-radius:50%;background:rgba(246,226,122,.35);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none;z-index:4}
@keyframes rip{to{transform:scale(4);opacity:0}}

.footer{text-align:center;margin-top:34px}
.footer p{margin-top:14px;font-size:.74rem;color:rgba(241,255,246,.7)}

/* ===== Mode ringan (HP kentang / hemat data) ===== */
.lite .meteors,.lite .spark,.lite .sheen,.lite #bg,.lite .logo-halo{animation:none}
.lite .meteors,.lite .spark,.lite .sheen,.lite #bg{display:none}
.lite .logo-halo::before,.lite .r2,.lite .title,.lite .card.primary .icon,.lite .card.primary .go{animation:none}
.lite .title{animation:reveal 1s var(--ease) both}
.lite .card,.lite .tile{contain:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card,.tile{opacity:1;transform:none}
  .section-title::before,.section-title::after{transform:none}
  .meteors,.spark{display:none}
}

/* ===== Responsive ===== */
@media (min-width:701px) and (orientation:landscape){
  .vignette{background:
    linear-gradient(90deg,transparent calc(50% - 360px),rgba(4,7,5,.78) calc(50% - 270px),rgba(4,7,5,.78) calc(50% + 270px),transparent calc(50% + 360px)),
    var(--glow),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(4,7,5,.2),rgba(4,7,5,.55))}
}
@media (max-width:360px){
  .logo-halo{--l:140px}.label{font-size:.9rem}.icon{flex-basis:42px;height:42px}
  .card{gap:11px;padding:12px}.card.primary{padding:15px 13px}
  .tile{padding:15px 6px;font-size:.8rem}.tagline{font-size:.74rem}.track span{padding:9px 16px}
}
@media (max-height:720px) and (min-width:701px){.logo-halo{--l:130px}.section{margin-top:20px}.ticker{margin-top:16px}.hero{padding-top:0}}
@media (orientation:landscape) and (max-height:500px){
  .wrap{padding-top:max(14px,env(safe-area-inset-top))}
  .logo-halo{--l:100px}.title{font-size:1.5rem}.badge{margin-top:10px}
  .ticker{margin-top:12px}.section{margin-top:18px}.grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1600px){.wrap{width:min(100%,580px)}.label{font-size:1rem}}