@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-deep:#060f1f;
  --navy:#0a1a33;
  --navy-2:#122c52;
  --gold:#f0b429;
  --gold-soft:#f7d478;
  --green:#2fa84f;
  --green-deep:#1c7a3c;
  --ink:#f3f6fa;
  --muted:#aab8cc;
  --muted-2:#8192ab;
  --card:rgba(255,255,255,0.05);
  --card-border:rgba(255,255,255,0.14);
  --radius:18px;
  --font-head:'Plus Jakarta Sans', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:#000; color:var(--ink); font-family:var(--font-body); overflow:hidden; height:100%;}

/* ---------- viewport / scaling ---------- */
#viewport{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 0%, #0d1f3d 0%, #04070f 72%);}
#stage-wrap{position:relative; width:1280px; height:720px; transform-origin:center center; box-shadow:0 40px 120px rgba(0,0,0,0.65);}
#deck{position:absolute; inset:0; display:flex; height:720px; width:1280px; transition:transform .55s cubic-bezier(.65,0,.35,1); will-change:transform;}

.slide{
  position:relative; flex:0 0 1280px; width:1280px; height:720px; overflow:hidden;
  background:linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 55%, #0c2142 100%);
  display:flex; flex-direction:column;
  font-family:var(--font-body);
}
.slide::before{ /* dot grid texture */
  content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size:26px 26px;
}
.slide::after{ /* corner glow */
  content:''; position:absolute; width:620px; height:620px; border-radius:50%; right:-220px; top:-220px; pointer-events:none;
  background:radial-gradient(circle, rgba(240,180,41,0.16), transparent 70%);
}
.slide .accent-bar{position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 35%, var(--green) 100%); z-index:5;}

.slide-inner{position:relative; z-index:2; flex:1; padding:54px 72px 34px; display:flex; flex-direction:column; min-height:0;}

.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px;}
.kicker::before{content:''; width:22px; height:2px; background:var(--gold); display:inline-block;}

.headline{font-family:var(--font-head); font-weight:800; font-size:44px; line-height:1.14; color:var(--ink); margin:0; letter-spacing:-0.01em;}
.headline .hl-gold{color:var(--gold-soft);}
.headline .hl-green{color:#6fdc8f;}
.sub{margin-top:14px; font-size:17px; line-height:1.55; color:var(--muted); max-width:860px; font-weight:400;}

.slide-body{flex:1; min-height:0; margin-top:28px; display:flex; flex-direction:column; justify-content:center;}

/* footer */
.footer-bar{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:16px 72px; border-top:1px solid rgba(255,255,255,0.08);}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-logo{height:22px; width:auto; border-radius:4px; background:#fff; padding:2px 6px;}
.footer-text{font-size:11.5px; letter-spacing:0.04em; color:var(--muted-2); font-weight:600;}
.footer-page{font-family:var(--font-head); font-size:12.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; letter-spacing:0.05em;}

/* ---------- Cover slide ---------- */
.slide-cover{align-items:center; justify-content:center; text-align:center;}
.slide-cover .slide-inner{align-items:center; justify-content:center; text-align:center;}
.cover-logo-wrap{background:#fff; border-radius:16px; padding:10px 22px; display:inline-flex; margin:0 auto 30px; box-shadow:0 18px 50px rgba(0,0,0,0.35);}
.cover-logo-wrap img{height:58px; width:auto; display:block;}
.cover-kicker{font-family:var(--font-head); font-size:14px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:22px;}
.cover-title{font-family:var(--font-head); font-weight:800; font-size:62px; letter-spacing:-0.01em; line-height:1.08; color:#fff; margin:0;}
.cover-title span{background:linear-gradient(90deg,var(--gold-soft),#6fdc8f); -webkit-background-clip:text; background-clip:text; color:transparent;}
.cover-subtitle{margin-top:22px; font-size:19px; color:var(--muted); font-weight:500; letter-spacing:0.02em;}
.cover-dots{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px; flex-wrap:wrap; font-size:16px; color:var(--muted);}
.cover-dots span.dot{width:4px; height:4px; border-radius:50%; background:var(--muted-2); display:inline-block;}
.cover-tagline{margin-top:38px; max-width:760px; font-family:var(--font-head); font-size:21px; font-style:italic; font-weight:500; color:#fff; line-height:1.5; position:relative; padding:0 10px;}
.cover-tagline::before,.cover-tagline::after{content:'"'; color:var(--gold); font-size:30px; font-family:Georgia,serif; vertical-align:-6px;}
.cover-footer{margin-top:46px; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); font-weight:600;}

/* ---------- generic grid/card helpers ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}

.card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px 22px; backdrop-filter:blur(6px);}
.card .card-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(240,180,41,0.22), rgba(47,168,79,0.22)); color:var(--gold-soft); font-size:16px; margin-bottom:12px;}
.card h3{font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--ink); margin:0 0 6px;}
.card p{font-size:13px; line-height:1.55; color:var(--muted); margin:0;}

/* ---------- Stat grid (case study + metrics) ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--card-border); border:1px solid var(--card-border); border-radius:20px; overflow:hidden;}
.stat-cell{background:var(--navy); padding:26px 22px;}
.stat-num{font-family:var(--font-head); font-size:30px; font-weight:800; color:#fff;}
.stat-label{margin-top:8px; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted-2); font-weight:600;}
.grad-gold{background:linear-gradient(90deg,var(--gold-soft),#6fdc8f); -webkit-background-clip:text; background-clip:text; color:transparent;}

.multiplier{margin-top:20px; display:flex; align-items:center; gap:18px; padding:18px 26px; border:1px solid var(--card-border); border-radius:16px; background:var(--card); width:fit-content;}
.multiplier .mnum{font-family:var(--font-head); font-size:22px; font-weight:800;}
.multiplier .marrow{color:var(--muted-2); font-size:20px;}

.chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.chip{font-size:12.5px; font-weight:600; color:var(--ink); border:1px solid var(--card-border); background:rgba(255,255,255,0.04); padding:8px 16px; border-radius:999px;}
.chip.gold{border-color:rgba(240,180,41,0.5); color:var(--gold-soft);}

.note-sm{margin-top:16px; font-size:11.5px; color:var(--muted-2); line-height:1.6; max-width:760px;}

/* ---------- Funnel / ecosystem diagram ---------- */
.funnel-row{display:flex; align-items:stretch; gap:0; margin-top:8px;}
.funnel-step{flex:1; background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:18px 14px; text-align:center; position:relative;}
.funnel-step .fi{width:36px; height:36px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold),var(--green)); color:#08121f; font-size:14px;}
.funnel-step h4{font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--ink); margin:0; letter-spacing:0.01em;}
.funnel-arrow{display:flex; align-items:center; justify-content:center; width:34px; color:var(--gold-soft); font-size:18px; flex-shrink:0;}
.loop-note{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:12.5px; color:var(--muted-2);}
.loop-note i{color:var(--gold-soft);}

/* ---------- Components diagram (slide 5) ---------- */
.comp-wrap{display:flex; gap:22px;}
.comp-col{flex:1;}
.comp-col h4{font-family:var(--font-head); font-size:14px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 14px;}
.comp-chain{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.comp-box{background:linear-gradient(135deg,rgba(240,180,41,0.18),rgba(47,168,79,0.18)); border:1px solid var(--card-border); border-radius:12px; padding:14px 18px; font-family:var(--font-head); font-weight:700; font-size:14px; color:#fff;}
.comp-grid-small{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.comp-pill{border:1px solid var(--card-border); background:var(--card); border-radius:10px; padding:12px 10px; text-align:center; font-size:12px; font-weight:600; color:var(--muted);}

/* ---------- Pillars (academy intro) ---------- */
.pillar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.pillar-card{background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:24px 18px; text-align:center;}
.pillar-card .pi{width:46px; height:46px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(240,180,41,0.14); color:var(--gold-soft); font-size:19px; border:1px solid rgba(240,180,41,0.35);}
.pillar-card h4{font-family:var(--font-head); font-size:15px; font-weight:700; color:#fff; margin:0 0 6px;}
.pillar-card p{font-size:12px; color:var(--muted); line-height:1.5; margin:0;}

/* ---------- Curriculum levels ---------- */
.level-list{display:flex; flex-direction:column; gap:9px;}
.level-row{display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:11px 20px;}
.level-badge{font-family:var(--font-head); font-size:12px; font-weight:800; color:#08121f; background:linear-gradient(135deg,var(--gold),var(--gold-soft)); border-radius:8px; padding:5px 11px; flex-shrink:0; letter-spacing:0.02em;}
.level-row h4{font-family:var(--font-head); font-size:14.5px; font-weight:700; color:#fff; margin:0; flex-shrink:0; width:230px;}
.level-row p{font-size:12.5px; color:var(--muted); margin:0; line-height:1.4;}

/* ---------- Timeline (journey / roadmap) ---------- */
.timeline{position:relative; margin-top:10px;}
.timeline-rail{position:absolute; top:19px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),var(--green)); opacity:0.35;}
.timeline-track{display:flex; position:relative; z-index:1;}
.tl-step{flex:1; text-align:center; padding:0 8px;}
.tl-dot{width:40px; height:40px; border-radius:50%; margin:0 auto 14px; background:var(--navy); border:2px solid var(--gold-soft); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--gold-soft);}
.tl-step h4{font-family:var(--font-head); font-size:13.5px; font-weight:700; color:#fff; margin:0 0 6px;}
.tl-step p{font-size:11.5px; color:var(--muted); line-height:1.5; margin:0;}

/* ---------- Two solutions comparison ---------- */
.solution-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.solution-card{border-radius:20px; padding:28px 26px; border:1px solid var(--card-border); position:relative; overflow:hidden;}
.solution-a{background:linear-gradient(160deg, rgba(47,168,79,0.16), rgba(47,168,79,0.03));}
.solution-b{background:linear-gradient(160deg, rgba(240,180,41,0.16), rgba(240,180,41,0.03));}
.solution-tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 13px; border-radius:999px; margin-bottom:14px;}
.solution-a .solution-tag{background:rgba(47,168,79,0.25); color:#8ef0ab;}
.solution-b .solution-tag{background:rgba(240,180,41,0.28); color:var(--gold-soft);}
.solution-card h3{font-family:var(--font-head); font-size:21px; font-weight:800; color:#fff; margin:0 0 14px;}
.solution-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.solution-list li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); line-height:1.45;}
.solution-list li i{color:var(--gold-soft); margin-top:3px; font-size:12px; flex-shrink:0;}
.solution-vs{display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:15px; font-weight:800; color:var(--muted-2); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--navy); border:1px solid var(--card-border); z-index:3;}

/* ---------- Role split (Lapak Ads) ---------- */
.role-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.role-card{border-radius:18px; padding:24px; border:1px solid var(--card-border); background:var(--card);}
.role-card h4{font-family:var(--font-head); font-size:15px; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 14px; display:flex; align-items:center; gap:8px;}
.role-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.role-card li{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted); line-height:1.4;}
.role-card li i{color:var(--green); margin-top:2px; font-size:11px;}

/* ---------- Benefit cards ---------- */
.benefit-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.benefit-card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px 14px; text-align:center;}
.benefit-card .bi{width:40px; height:40px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(47,168,79,0.16); color:#8ef0ab; font-size:16px;}
.benefit-card h4{font-family:var(--font-head); font-size:13px; font-weight:700; color:#fff; margin:0; line-height:1.3;}

/* ---------- Closing ---------- */
.slide-closing{align-items:center; justify-content:center; text-align:center;}
.closing-quote{font-family:var(--font-head); font-size:30px; font-weight:700; color:#fff; max-width:900px; margin:0 auto; line-height:1.4;}
.closing-quote span{color:var(--gold-soft);}
.closing-cta{margin-top:30px; font-size:16px; color:var(--muted); max-width:680px; margin-left:auto; margin-right:auto; line-height:1.6;}
.closing-actions{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:34px; flex-wrap:wrap;}
.cbtn{font-family:var(--font-head); font-weight:700; font-size:13.5px; padding:14px 30px; border-radius:999px; letter-spacing:0.02em;}
.cbtn-primary{background:linear-gradient(90deg,var(--gold),var(--gold-soft)); color:#08121f;}
.cbtn-outline{border:1px solid var(--card-border); color:#fff;}

/* ---------- Controls ---------- */
#controls{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; background:rgba(10,20,35,0.78); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:9px 18px; z-index:100;}
#controls button{background:none; border:none; color:#fff; font-size:16px; cursor:pointer; padding:5px 8px; display:flex; align-items:center; justify-content:center; opacity:0.85; transition:opacity .2s, transform .2s;}
#controls button:hover{opacity:1; transform:scale(1.1);}
#counter{font-family:var(--font-head); font-size:12.5px; color:var(--muted); min-width:52px; text-align:center; font-variant-numeric:tabular-nums;}
#progress-wrap{position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.08); z-index:100;}
#progress-bar{height:100%; background:linear-gradient(90deg,var(--gold),var(--green)); width:0%; transition:width .4s ease;}

#notes-panel{position:fixed; left:0; right:0; bottom:0; background:rgba(5,10,20,0.96); border-top:2px solid var(--gold); color:#fff; padding:22px 48px; z-index:99; transform:translateY(100%); transition:transform .35s ease; max-height:34vh; overflow-y:auto;}
#notes-panel.open{transform:translateY(0);}
#notes-panel h5{font-family:var(--font-head); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 10px;}
#notes-panel p{font-size:15px; line-height:1.6; color:var(--muted); margin:0; max-width:1100px;}

#hint{position:fixed; top:18px; right:22px; z-index:100; font-size:11.5px; color:rgba(255,255,255,0.45); font-family:var(--font-body); letter-spacing:0.02em;}

/* ---------- Print ---------- */
@media print{
  @page{ size:1280px 720px; margin:0; }
  html,body{overflow:visible; height:auto; background:#fff;}
  #viewport{position:static; display:block; background:none;}
  #stage-wrap{transform:none !important; width:auto; height:auto; box-shadow:none;}
  #deck{position:static; display:block; width:auto; height:auto; transition:none;}
  .slide{width:1280px; height:720px; page-break-after:always; flex:none;}
  #controls,#progress-wrap,#hint,#notes-panel{display:none !important;}
}

/* ---------- Responsive fallback note ---------- */
.scale-note{position:fixed; bottom:10px; left:16px; font-size:10.5px; color:rgba(255,255,255,0.3); z-index:100; font-family:var(--font-body);}