/* ================= TOKENS ================= */
:root{
  --red:#C8102E;
  --gold:#D4AF37;
  --ink:#1a1a1a;
  --muted:#6b6b6b;
  --bg:#ffffff;
  --bg-alt:#faf7f0;
  --line:#ece6d8;
  --grad:linear-gradient(135deg,#C8102E,#D4AF37);
  --shadow:0 12px 30px rgba(0,0,0,.10);
  --radius:16px;
  --maxw:760px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;display:block;}

/* ================= PROGRESS ================= */
#progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--grad);z-index:100000;transition:width .1s linear;
}

/* ================= TYPOGRAPHY ================= */
h1{font-size:clamp(28px,7.5vw,44px);line-height:1.2;font-weight:800;margin:.4em 0;}
h1 span{color:var(--gold);}
h2{font-size:clamp(22px,6vw,32px);line-height:1.25;font-weight:700;margin:.2em 0 .6em;}
h3{font-size:clamp(17px,4.5vw,20px);font-weight:700;margin:0 0 .5em;}
p{font-size:clamp(15px,4vw,17px);line-height:1.75;margin:0 0 1em;}

.kicker{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--red);
  background:rgba(200,16,46,.08);
  padding:6px 14px;border-radius:999px;margin-bottom:14px;
}

.muted{color:var(--muted);font-size:14px;}
.prose{max-width:640px;margin:0 auto;text-align:left;}
.prose p{text-align:left;}

/* ================= LAYOUT ================= */
.section{padding:64px 20px;text-align:center;}
.section.alt{background:var(--bg-alt);}
.container{max-width:var(--maxw);margin:0 auto;}

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:72px 22px 90px;
  color:#fff;
  background:url("assets/emas-bg.jpg") center/cover no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(40,10,10,.78));
}
.hero-inner{position:relative;z-index:1;max-width:620px;}
.hero h1,.hero p,.hero li{color:#fff;}

.logo{
  width:84px;height:84px;border-radius:50%;
  border:3px solid var(--gold);background:#fff;padding:5px;margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

.badge{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(212,175,55,.6);
  color:#fff;font-size:13px;font-weight:600;
  padding:7px 16px;border-radius:999px;margin-bottom:8px;
  backdrop-filter:blur(4px);
}

.lead{font-size:clamp(15px,4vw,17px);color:#f0eee9;margin:12px auto 20px;max-width:540px;}

.bullets{
  list-style:none;padding:0;margin:0 auto 26px;
  display:grid;grid-template-columns:1fr;gap:8px;max-width:460px;text-align:left;
}
.bullets li{
  position:relative;padding:9px 14px 9px 40px;
  background:rgba(255,255,255,.08);border-radius:10px;
  font-size:14.5px;border:1px solid rgba(255,255,255,.12);
}
.bullets li::before{
  content:"✓";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-weight:800;
}

.hero-cta{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:0 auto;}

.scroll-cue{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:30px;text-decoration:none;z-index:1;
  animation:bounce 1.8s infinite;opacity:.85;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  padding:14px 26px;border-radius:12px;border:0;transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:active{transform:scale(.98);}
.btn-block{width:100%;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(200,16,46,.32);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(200,16,46,.4);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);}
.btn-ghost:hover{background:rgba(255,255,255,.2);}
.btn-outline{background:#fff;color:var(--red);border:1.5px solid var(--red);font-size:14px;padding:11px 18px;}
.btn-outline:hover{background:var(--red);color:#fff;}
.btn-wa{background:#25D366;color:#fff;}

/* ================= STATS ================= */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--ink);color:#fff;text-align:center;
}
.stat{padding:18px 6px;border-right:1px solid rgba(255,255,255,.08);}
.stat:last-child{border-right:0;}
.stat b{display:block;font-size:clamp(16px,4.5vw,22px);color:var(--gold);font-weight:800;}
.stat span{font-size:11px;color:#cfcfcf;letter-spacing:.03em;}

/* ================= MEDIA / IMAGES ================= */
.media{
  width:100%;max-width:560px;margin:18px auto 0;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.media-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 auto 22px;
}
.media-grid img,.media-grid .video{border-radius:14px;box-shadow:var(--shadow);width:100%;}
.media-grid img{object-fit:cover;aspect-ratio:1/1;}

.card-media{max-width:520px;margin-left:auto;margin-right:auto;}

/* full-width stacked images (macam asal) */
.stack{margin:0 auto 22px;max-width:620px;}
.stack img{width:100%;height:auto;display:block;margin-bottom:14px;border-radius:14px;box-shadow:var(--shadow);}
.stack img:last-child{margin-bottom:0;}

.zoomable{cursor:zoom-in;}

/* ================= GALLERY ================= */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0;
}
.gallery.three{grid-template-columns:repeat(3,1fr);}
.gallery img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .25s;
}
.gallery img:hover{transform:scale(1.03);}

/* ================= VIDEO ================= */
.video{position:relative;cursor:pointer;overflow:hidden;border-radius:14px;margin:0;}
.video .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.video figcaption{
  background:#fff;color:var(--ink);font-size:13px;font-weight:600;padding:10px;text-align:center;
}
.play-btn{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  background:var(--red);color:#fff;font-size:20px;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding-left:4px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);transition:.25s;
}
.video:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);background:var(--gold);}
.video figcaption ~ .play-btn,.video figure .play-btn{top:42%;}
figure.video .play-btn{top:calc(50% - 18px);}

.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.video-grid .video,.testi-grid .video{box-shadow:var(--shadow);background:#fff;}
.testi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:18px 0;}

/* ================= CARD ================= */
.card{
  background:#fff;padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--line);text-align:left;
}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}

ul.check{list-style:none;padding:0;margin:0;}
ul.check li{position:relative;padding:7px 0 7px 30px;font-size:14.5px;line-height:1.5;border-bottom:1px solid var(--line);}
ul.check li:last-child{border-bottom:0;}
ul.check li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--gold);font-weight:800;}
ul.check.big li{font-size:16px;padding:10px 0 10px 32px;}
ul.check.big li::before{top:10px;}

/* ================= HIGHLIGHT ================= */
.highlight{
  background:var(--grad);color:#fff;padding:20px 22px;border-radius:var(--radius);
  margin-top:18px;font-weight:600;box-shadow:var(--shadow);
}

/* ================= CALC ================= */
.calc{padding:8px 22px;max-width:520px;margin:0 auto 18px;}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;text-align:left;}
.calc-row:last-child{border-bottom:0;}
.calc-row b{color:var(--red);white-space:nowrap;font-size:15px;}
.calc-row.total b{color:var(--gold);}

/* ================= PDF ROW ================= */
.pdf-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;}

/* ================= BRANCHES ================= */
.branches{max-width:560px;margin:0 auto;text-align:left;}
.branches details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.04);}
.branches summary{padding:14px 18px;font-weight:600;cursor:pointer;list-style:none;font-size:15px;display:flex;justify-content:space-between;align-items:center;}
.branches summary::-webkit-details-marker{display:none;}
.branches summary::after{content:"+";color:var(--red);font-weight:800;font-size:20px;}
.branches details[open] summary::after{content:"−";}
.branches details p{padding:0 18px 16px;margin:0;font-size:14px;color:var(--muted);line-height:1.6;}
.branches a{color:var(--red);font-weight:600;text-decoration:none;}

/* ================= FINAL CTA ================= */
.cta-final{background:var(--grad);color:#fff;}
.cta-final h2,.cta-final p{color:#fff;}
.cta-final .container{max-width:440px;}
.cta-final .btn{margin-top:10px;}
.cta-final .btn-ghost{border-color:rgba(255,255,255,.7);}

/* ================= FOOTER ================= */
.footer{background:var(--ink);color:#cfcfcf;text-align:center;padding:34px 20px 96px;}
.footer p{margin:.2em 0;font-size:13px;}
.footer .disclaimer{color:#8a8a8a;font-size:12px;}

/* ================= STICKY CTA ================= */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:9000;
  display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);
  transform:translateY(120%);transition:transform .35s ease;
}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta .btn{flex:1;padding:13px;font-size:15px;}

/* ================= POPUP ================= */
.popup{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  display:none;justify-content:center;align-items:center;z-index:100001;padding:16px;
}
.popup.open{display:flex;}
.popup video{width:100%;max-width:900px;max-height:86vh;border-radius:10px;background:#000;}
.popup #pimg{display:none;width:auto;max-width:100%;max-height:86vh;border-radius:10px;object-fit:contain;}
.close-btn{
  position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;border:0;font-size:20px;cursor:pointer;
}

/* ================= REVEAL ================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.show{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.scroll-cue{animation:none;}}

/* ================= DESKTOP ================= */
@media(min-width:760px){
  .bullets{grid-template-columns:1fr 1fr;}
  .hero-cta{flex-direction:row;}
  .gallery{grid-template-columns:repeat(5,1fr);}
  .video-grid{grid-template-columns:repeat(4,1fr);}
  .sticky-cta{display:none;}
}

/* tiny phones */
@media(max-width:360px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2){border-right:0;}
  .cards-2{grid-template-columns:1fr;}
}

/* ================= COUNTDOWN ================= */
.countdown{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(0,0,0,.32);border:1px solid rgba(212,175,55,.5);
  border-radius:14px;padding:12px 16px;margin:0 auto 18px;max-width:360px;
  backdrop-filter:blur(4px);
}
.cd-label{font-size:12.5px;color:#f3e9c9;letter-spacing:.02em;}
.cd-time{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.cd-time b{
  background:var(--grad);color:#fff;font-size:22px;font-weight:800;
  padding:6px 10px;border-radius:10px;min-width:44px;text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* ================= SHINE BUTTON ================= */
.btn-shine{position:relative;overflow:hidden;}
.btn-shine::after{
  content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite;
}
@keyframes shine{0%{left:-130%;}55%{left:140%;}100%{left:140%;}}

/* ================= HERO GOLD SHIMMER ================= */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 20% 25%,rgba(212,175,55,.18),transparent 45%),
             radial-gradient(circle at 80% 75%,rgba(212,175,55,.14),transparent 45%);
  animation:floatGlow 9s ease-in-out infinite alternate;
}
@keyframes floatGlow{from{transform:translateY(-12px) scale(1);}to{transform:translateY(12px) scale(1.05);}}

/* ================= CARD HOVER ================= */
.card{transition:transform .3s ease,box-shadow .3s ease;}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.16);}

/* image pop on reveal */
.stack img,.gallery img{transition:transform .35s ease,box-shadow .35s ease;}
.stack img:hover,.gallery img:hover{transform:scale(1.02);box-shadow:0 18px 36px rgba(0,0,0,.18);}

/* ================= FLOATING WHATSAPP ================= */
.wa-fab{
  position:fixed;right:16px;bottom:88px;z-index:9500;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.5);
  animation:waPulse 2.4s ease-in-out infinite;
}
.wa-fab:hover{transform:scale(1.08);}
.wa-fab{transition:opacity .3s,transform .3s,visibility .3s;}
.wa-fab.hide-fab{opacity:0;visibility:hidden;transform:scale(.5);pointer-events:none;}
@keyframes waPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}50%{box-shadow:0 0 0 14px rgba(37,211,102,0);}}

/* ================= BACK TO TOP ================= */
.to-top{
  position:fixed;left:16px;bottom:88px;z-index:9400;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--red);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.tt-arrow{font-size:18px;font-weight:800;}
.tt-pct{font-size:9px;font-weight:700;color:var(--muted);}

@media(min-width:760px){
  .wa-fab{bottom:24px;}
  .to-top{bottom:24px;}
  /* Sticky bar tersembunyi di desktop, jadi FAB kekal nampak */
  .wa-fab.hide-fab{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
}
@media (prefers-reduced-motion:reduce){
  .btn-shine::after,.hero::after,.wa-fab{animation:none;}
}

/* ================= TYPEWRITER HEADLINE ================= */
.typewriter{color:var(--gold);}
.type-caret{
  display:inline-block;width:3px;height:1em;margin-left:2px;
  background:var(--gold);vertical-align:-2px;border-radius:2px;
  animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ================= BRANCH MARQUEE ================= */
.marquee{
  position:relative;overflow:hidden;margin:0 auto 22px;max-width:640px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;width:max-content;gap:10px;
  animation:marquee 26s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.m-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink);
  box-shadow:0 4px 12px rgba(0,0,0,.05);white-space:nowrap;
}
.m-chip::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--grad);flex:0 0 auto;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ================= CONFETTI ================= */
.confetti-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:100002;display:none;
}
.confetti-canvas.on{display:block;}

/* ================= HYPE / EXIT MODAL ================= */
.hype-modal{
  position:fixed;inset:0;z-index:100003;
  display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,4,4,.72);backdrop-filter:blur(4px);
}
.hype-modal.open{display:flex;animation:hypeFade .25s ease;}
@keyframes hypeFade{from{opacity:0;}to{opacity:1;}}
.hype-box{
  position:relative;width:100%;max-width:380px;text-align:center;
  background:linear-gradient(160deg,#1a1a1a,#2a0d0d);
  border:1px solid rgba(212,175,55,.55);border-radius:20px;
  padding:30px 22px 24px;color:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  animation:hypePop .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes hypePop{from{transform:scale(.85) translateY(20px);opacity:0;}to{transform:none;opacity:1;}}
.hype-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:0;font-size:16px;cursor:pointer;
  transition:background .2s;
}
.hype-close:hover{background:rgba(255,255,255,.25);}
.hype-tag{
  display:inline-block;background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.5);
  color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:6px 14px;border-radius:999px;margin-bottom:12px;
}
.hype-box h3{font-size:22px;font-weight:800;margin:0 0 8px;color:#fff;}
.hype-sub{font-size:14.5px;line-height:1.6;color:#f0e7d6;margin:0 0 18px;}
.hype-sub b{color:var(--gold);}
.hype-cd{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 20px;}
.hype-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px;}
.hype-cd-unit b{
  background:var(--grad);color:#fff;font-size:24px;font-weight:800;
  padding:8px 12px;border-radius:12px;min-width:52px;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}
.hype-cd-unit small{font-size:10px;color:#cdbf9e;letter-spacing:.05em;text-transform:uppercase;}
.hype-cd-sep{font-size:22px;font-weight:800;color:var(--gold);align-self:flex-start;margin-top:6px;}
.hype-dismiss{
  display:block;margin:12px auto 0;background:none;border:0;cursor:pointer;
  color:#bdb3a3;font-size:13px;text-decoration:underline;
}
.hype-dismiss:hover{color:#fff;}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
  .type-caret{animation:none;}
  .hype-modal.open,.hype-box{animation:none;}
}