/* ============================================================
   PALET VIP — DEEP COSMIC PURPLE × GOLD × CYAN (berbeda dari BAB 3)
   ============================================================ */
:root{
  --bg-primary:#0A0A1A;
  --bg-card:#1A1A3E;
  --bg-slide:#0D0D22;
  --accent-gold:#FFD700;
  --accent-amber:#FFB347;
  --accent-violet:#8B5CF6;
  --accent-cyan:#06B6D4;
  --text-primary:#F8F8FF;
  --text-secondary:#C4B5FD;
  --highlight-gold:rgba(255,215,0,.13);
  --border-glow:rgba(139,92,246,.4);
  --font-display:'Orbitron','Space Grotesk',sans-serif;
  --font-body:'Inter','Poppins',system-ui,sans-serif;
  --font-code:'JetBrains Mono','Fira Code',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 85% 8%,rgba(139,92,246,.28) 0%,transparent 42%),
    radial-gradient(circle at 12% 92%,rgba(6,182,212,.18) 0%,transparent 40%),
    radial-gradient(circle at 50% 50%,#141436 0%,var(--bg-primary) 60%,#05050f 100%);
  color:var(--text-primary);
  overflow:hidden;
}

/* ---------- Progress bar ---------- */
#progress-track{position:fixed;top:0;left:0;width:100%;height:5px;background:rgba(255,255,255,.06);z-index:200}
#progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-violet),var(--accent-gold));transition:width .35s ease;box-shadow:0 0 12px var(--accent-violet)}

/* ---------- Slideshow ---------- */
#slideshow{position:relative;height:100vh;width:100vw}
.slide{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;
  padding:60px clamp(18px,6vw,90px) 96px;
  overflow-y:auto;overflow-x:hidden;
  opacity:0;transform:translateX(40px);
  transition:opacity .4s ease,transform .4s ease;
  scrollbar-width:thin;scrollbar-color:var(--accent-violet) transparent;
}
.slide.active{display:flex;opacity:1;transform:translateX(0);z-index:1}
.slide::-webkit-scrollbar{width:9px}
.slide::-webkit-scrollbar-thumb{background:var(--accent-violet);border-radius:8px}
.slide::-webkit-scrollbar-track{background:transparent}
.slide-inner{width:100%;max-width:1120px;margin:0 auto}

/* ---------- Typography ---------- */
h1{font-family:var(--font-display);font-weight:900;font-size:clamp(1.9rem,5vw,3.5rem);line-height:1.1;
   background:linear-gradient(120deg,var(--accent-cyan),var(--accent-violet) 45%,var(--accent-gold));
   -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.3rem);margin-bottom:.4em;color:var(--text-primary)}
h3{font-size:1.12rem;color:var(--accent-gold);margin:.2em 0 .5em;letter-spacing:.5px}
p{color:var(--text-secondary);line-height:1.7;font-size:1.02rem}
.lead{font-size:1.14rem;color:var(--text-primary)}
strong{color:var(--accent-gold)}
code{font-family:var(--font-code);font-size:.88em;background:rgba(6,182,212,.12);color:var(--accent-cyan);padding:1px 6px;border-radius:5px}

/* ---------- Badges & chips ---------- */
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-size:.78rem;font-weight:700;
   letter-spacing:1.4px;text-transform:uppercase;padding:.5em 1.1em;border-radius:999px;
   background:var(--highlight-gold);color:var(--accent-gold);border:1px solid var(--border-glow);margin-bottom:16px}
.badge.violet{color:var(--accent-violet);background:rgba(139,92,246,.14);border-color:var(--border-glow)}
.badge.cyan{color:var(--accent-cyan);background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.4)}

/* ---------- Cards / boxes ---------- */
.card{background:linear-gradient(160deg,var(--bg-card),#0d0d20);border:1px solid rgba(139,92,246,.25);
   border-radius:18px;padding:20px 24px;margin:14px 0;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}

.analogy-box{background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(0,0,0,.2));
   border:1px solid var(--border-glow);border-radius:18px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.analogy-stage{width:100%;min-height:180px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}

.demo-box{background:#06060f;border:1px solid rgba(6,182,212,.35);border-radius:14px;padding:16px 18px;
   font-family:var(--font-code);font-size:.92rem;color:var(--accent-cyan);box-shadow:inset 0 0 24px rgba(6,182,212,.08);margin-top:14px}
.demo-box .demo-label{font-family:var(--font-display);font-size:.7rem;letter-spacing:2px;color:var(--accent-amber);
   text-transform:uppercase;display:block;margin-bottom:8px}
.demo-box .out-line{display:block}

/* ---------- Code blocks + copy button ---------- */
.code-wrap{position:relative;margin:14px 0}
pre{border-radius:14px;overflow:auto;max-height:430px;border:1px solid rgba(139,92,246,.3);
   box-shadow:0 8px 24px rgba(0,0,0,.4)}
pre code.hljs{font-family:var(--font-code);font-size:.88rem;line-height:1.55;padding:40px 20px 18px;background:#06060f!important}
.code-fallback{background:#06060f;color:#cfcfe8;font-family:var(--font-code);font-size:.88rem;line-height:1.55;
   padding:40px 20px 18px;border-radius:14px;white-space:pre;overflow:auto;border:1px solid rgba(139,92,246,.3)}
.btn-copy{position:absolute;top:9px;right:9px;z-index:6;font-family:var(--font-code);font-size:.74rem;font-weight:600;
   padding:6px 12px;border-radius:8px;border:1px solid var(--border-glow);background:rgba(13,13,34,.85);
   color:var(--accent-cyan);cursor:pointer;transition:all .2s}
.btn-copy:hover{background:var(--accent-cyan);color:#04121a;box-shadow:0 0 14px rgba(6,182,212,.6)}
.btn-copy.done{background:var(--accent-gold);color:#0a0a1a;border-color:var(--accent-gold)}

/* ---------- Lists ---------- */
ul.feat{list-style:none;display:flex;flex-direction:column;gap:9px;margin:10px 0}
ul.feat li{display:flex;gap:11px;align-items:flex-start;color:var(--text-secondary);line-height:1.5}
ul.feat li::before{content:"◆";color:var(--accent-gold);font-size:.82rem;margin-top:3px}
.check li{opacity:0;transform:translateY(14px)}
.check li.show{opacity:1;transform:none;transition:all .5s ease}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:150;
   display:flex;align-items:center;gap:14px;background:rgba(13,13,34,.85);backdrop-filter:blur(10px);
   border:1px solid var(--border-glow);border-radius:999px;padding:8px 14px}
.nav-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-glow);background:transparent;
   color:var(--accent-gold);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s}
.nav-btn:hover{background:var(--accent-gold);color:#0a0a1a;box-shadow:0 0 16px var(--accent-gold)}
.nav-btn:disabled{opacity:.3;cursor:not-allowed}
#slide-counter{font-family:var(--font-code);color:var(--text-secondary);font-size:.85rem;min-width:62px;text-align:center}

.dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);cursor:pointer;transition:all .25s}
.dot.active{background:var(--accent-gold);box-shadow:0 0 8px var(--accent-gold);transform:scale(1.4)}
@media(max-width:700px){.dots{display:none}}

/* ============================================================
   SLIDE 1 — COVER + 3D CUBE + STARS
   ============================================================ */
#slide-1{align-items:center;justify-content:center;text-align:center}
.stars{position:absolute;inset:0;overflow:hidden;z-index:0}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.6;animation:twinkle 3s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.9;transform:scale(1.3)}}
.cover-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px}

/* CSS 3D cube */
.scene{width:160px;height:160px;perspective:900px;margin-bottom:6px}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:spinCube 12s linear infinite}
.cube .face{position:absolute;width:160px;height:160px;display:flex;align-items:center;justify-content:center;
   font-family:var(--font-display);font-size:2.2rem;font-weight:900;color:var(--accent-gold);text-align:center;
   border:2px solid var(--accent-cyan);background:rgba(139,92,246,.16);
   box-shadow:inset 0 0 30px rgba(6,182,212,.25),0 0 22px rgba(139,92,246,.4)}
.cube .front {transform:translateZ(80px)}
.cube .back  {transform:rotateY(180deg) translateZ(80px)}
.cube .right {transform:rotateY(90deg) translateZ(80px)}
.cube .left  {transform:rotateY(-90deg) translateZ(80px)}
.cube .top   {transform:rotateX(90deg) translateZ(80px)}
.cube .bottom{transform:rotateX(-90deg) translateZ(80px)}
@keyframes spinCube{0%{transform:rotateX(-22deg) rotateY(0)}100%{transform:rotateX(-22deg) rotateY(360deg)}}

.btn-start{margin-top:12px;font-family:var(--font-display);font-weight:700;letter-spacing:1px;font-size:1rem;
   padding:14px 34px;border-radius:999px;border:none;cursor:pointer;color:#0a0a1a;
   background:linear-gradient(120deg,var(--accent-cyan),var(--accent-violet) 60%,var(--accent-gold));
   box-shadow:0 0 24px rgba(139,92,246,.5);transition:transform .25s,box-shadow .25s}
.btn-start:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 38px rgba(255,215,0,.7)}

/* ============================================================
   SLIDE 2 — TOC / JOURNEY
   ============================================================ */
.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:13px;margin-top:16px}
.toc-item{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;cursor:pointer;
   background:var(--bg-card);border:1px solid rgba(139,92,246,.22);transition:all .25s;opacity:0;transform:translateY(22px)}
.toc-item.show{opacity:1;transform:none}
.toc-item:hover{border-color:var(--accent-gold);transform:translateY(-3px);box-shadow:0 8px 22px rgba(139,92,246,.3)}
.toc-ic{font-size:1.4rem;width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
   border-radius:12px;background:var(--highlight-gold)}
.toc-item b{display:block;color:var(--text-primary);font-size:.95rem}
.toc-item span{font-size:.78rem;color:var(--text-secondary)}

/* journey roadmap */
.journey{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:18px 0}
.j-step{flex:1;min-width:140px;background:var(--bg-card);border:1px solid rgba(139,92,246,.25);border-radius:16px;
   padding:16px;text-align:center;position:relative;opacity:0;transform:translateY(20px);transition:all .5s}
.j-step.show{opacity:1;transform:none}
.j-step .jn{font-family:var(--font-display);font-size:.72rem;letter-spacing:1.5px;color:var(--text-secondary)}
.j-step .jt{font-weight:700;color:var(--text-primary);margin-top:5px}
.j-step .ji{font-size:1.8rem;margin-bottom:6px}
.j-step.now{border-color:var(--accent-gold);box-shadow:0 0 24px rgba(255,215,0,.35);animation:nowPulse 2s ease-in-out infinite}
@keyframes nowPulse{0%,100%{box-shadow:0 0 18px rgba(255,215,0,.25)}50%{box-shadow:0 0 34px rgba(255,215,0,.6)}}
.j-arrow{display:flex;align-items:center;color:var(--accent-cyan);font-size:1.6rem;padding:0 4px}
@media(max-width:820px){.j-arrow{transform:rotate(90deg)}}

/* ============================================================
   GENERIC ANALOGY MOTION
   ============================================================ */
.shape{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.8rem;color:var(--text-secondary)}
.box-ic{width:80px;height:80px;border-radius:16px;display:flex;align-items:center;justify-content:center;
   font-size:2.2rem;background:rgba(139,92,246,.18);border:2px solid var(--border-glow)}
.arrow{font-size:1.9rem;color:var(--accent-gold);animation:nudge 1.4s infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.floaty{display:inline-block;animation:floaty 2.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.spin-emoji{display:inline-block;animation:spin360 6s linear infinite}
@keyframes spin360{to{transform:rotate(360deg)}}
.pulse{animation:pulseGlow 2s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 rgba(255,215,0,0)}50%{box-shadow:0 0 18px rgba(255,215,0,.6)}}

/* LEGO bricks stacking (slide 3 & 6) */
.brick-stack{display:flex;flex-direction:column-reverse;gap:4px;align-items:center}
.brick{width:120px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
   font-size:.74rem;font-family:var(--font-code);color:#0a0a1a;font-weight:700;
   box-shadow:0 2px 0 rgba(0,0,0,.3);animation:brickDrop 4s ease-in-out infinite}
.brick.b1{background:var(--accent-cyan)}.brick.b2{background:var(--accent-violet);color:#fff}
.brick.b3{background:var(--accent-gold)}.brick.b4{background:var(--accent-amber)}
.brick.b2{animation-delay:.4s}.brick.b3{animation-delay:.8s}.brick.b4{animation-delay:1.2s}
@keyframes brickDrop{0%,5%{transform:translateY(-60px);opacity:0}18%,92%{transform:translateY(0);opacity:1}100%{opacity:1;transform:translateY(0)}}

/* main.dart = pintu (slide 5) */
.door-scene{position:relative;width:130px;height:130px;display:flex;align-items:flex-end;justify-content:center}
.door-frame{width:90px;height:120px;border:5px solid var(--accent-violet);border-bottom:none;border-radius:8px 8px 0 0;
   position:relative;background:rgba(139,92,246,.08);overflow:hidden}
.door-leaf{position:absolute;top:0;right:0;width:80px;height:110px;background:linear-gradient(160deg,#1c1c40,#0d0d20);
   transform-origin:left;animation:doorOpen 4s ease-in-out infinite}
.door-knob{position:absolute;top:54px;left:8px;width:7px;height:7px;border-radius:50%;background:var(--accent-gold)}
@keyframes doorOpen{0%,15%{transform:perspective(300px) rotateY(0)}45%,80%{transform:perspective(300px) rotateY(-78deg)}100%{transform:perspective(300px) rotateY(0)}}
.door-person{position:absolute;bottom:4px;left:18px;font-size:1.6rem;opacity:0;animation:walkIn 4s ease-in-out infinite}
@keyframes walkIn{0%,40%{left:-20px;opacity:0}55%{opacity:1}72%{left:30px;opacity:1}85%,100%{left:34px;opacity:0}}

/* folder tree (slide 4) */
.tree-file{display:flex;flex-direction:column;gap:5px;font-family:var(--font-code);font-size:.9rem;width:100%;max-width:340px}
.tf-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--text-secondary);
   border:1px solid transparent;opacity:0;transform:translateX(-14px);animation:fileIn 5s ease-in-out infinite}
.tf-row.hot{color:var(--accent-gold);border-color:var(--border-glow);background:var(--highlight-gold)}
.tf-row:nth-child(1){animation-delay:0s}.tf-row:nth-child(2){animation-delay:.3s}.tf-row:nth-child(3){animation-delay:.6s}
.tf-row:nth-child(4){animation-delay:.9s}.tf-row:nth-child(5){animation-delay:1.2s}.tf-row:nth-child(6){animation-delay:1.5s}
@keyframes fileIn{0%,6%{opacity:0;transform:translateX(-14px)}16%,92%{opacity:1;transform:none}100%{opacity:1}}
.indent{padding-left:22px}

/* recipe / cooking (slide 7) */
.cook-scene{position:relative;display:flex;align-items:center;gap:18px}
.recipe-book{font-size:3rem;animation:floaty 2.6s ease-in-out infinite}
.pot{font-size:3rem;position:relative}
.steam{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:1.1rem;opacity:0;animation:steam 2.4s ease-in-out infinite}
@keyframes steam{0%{opacity:0;transform:translate(-50%,4px)}40%{opacity:.9}100%{opacity:0;transform:translate(-50%,-18px)}}

/* foundation building (slide 8) */
.found-scene{display:flex;flex-direction:column-reverse;align-items:center;gap:3px}
.found-layer{width:120px;height:24px;border-radius:5px;background:var(--accent-violet);opacity:0;transform:scaleY(0);
   transform-origin:bottom;animation:layerRise 4s ease-in-out infinite}
.found-layer.f1{background:var(--accent-gold);width:140px}
.found-layer.f2{background:var(--accent-cyan);animation-delay:.5s}
.found-layer.f3{background:var(--accent-violet);animation-delay:1s}
.found-layer.f4{background:var(--accent-amber);width:90px;animation-delay:1.5s}
@keyframes layerRise{0%,5%{opacity:0;transform:scaleY(0)}22%,92%{opacity:1;transform:scaleY(1)}100%{opacity:1}}

/* scaffold steel frame (slide 9) */
.frame-scene{position:relative;width:140px;height:130px}
.beam{position:absolute;background:var(--accent-cyan);border-radius:3px;opacity:0;animation:beamIn 4.5s ease-in-out infinite}
.beam.v1{left:8px;top:0;width:6px;height:120px}
.beam.v2{right:8px;top:0;width:6px;height:120px;animation-delay:.3s}
.beam.h1{left:8px;top:0;width:128px;height:6px;background:var(--accent-gold);animation-delay:.6s}
.beam.h2{left:8px;top:57px;width:128px;height:6px;background:var(--accent-violet);animation-delay:.9s}
.beam.h3{left:8px;bottom:0;width:128px;height:6px;background:var(--accent-amber);animation-delay:1.2s}
@keyframes beamIn{0%,4%{opacity:0;transform:scale(.6)}18%,92%{opacity:1;transform:none}100%{opacity:1}}
.frame-tag{position:absolute;font-size:.6rem;font-family:var(--font-code);color:var(--text-secondary)}

/* shop sign (slide 10) */
.sign-scene{position:relative;width:170px;height:120px}
.shop{position:absolute;bottom:0;left:20px;width:130px;height:70px;background:rgba(139,92,246,.14);
   border:2px solid var(--border-glow);border-radius:6px}
.sign-board{position:absolute;top:6px;left:20px;width:130px;height:30px;border-radius:6px;
   background:linear-gradient(120deg,var(--accent-gold),var(--accent-amber));color:#0a0a1a;
   font-family:var(--font-display);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;
   transform-origin:top;animation:signMount 4s ease-in-out infinite}
@keyframes signMount{0%,8%{transform:translateY(-44px) rotate(-8deg);opacity:0}30%,92%{transform:none;opacity:1}100%{opacity:1}}

/* room furniture (slide 11) */
.room{position:relative;width:170px;height:120px;border:2px solid var(--border-glow);border-radius:10px;
   background:rgba(6,182,212,.06);overflow:hidden}
.furn{position:absolute;font-size:1.5rem;opacity:0;animation:furnPop 5s ease-in-out infinite}
.furn.fa{left:14px;bottom:10px}.furn.fb{left:62px;bottom:10px;animation-delay:.5s}
.furn.fc{left:110px;bottom:10px;animation-delay:1s}.furn.fd{left:62px;top:12px;animation-delay:1.5s}
@keyframes furnPop{0%,6%{opacity:0;transform:scale(.2) translateY(14px)}20%,92%{opacity:1;transform:none}100%{opacity:1}}

/* FAB doorbell (slide 12) */
.bell-scene{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.bell-btn{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--accent-gold),var(--accent-amber));
   display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#0a0a1a;position:relative;z-index:2;
   animation:bellPulse 1.6s ease-in-out infinite;cursor:pointer}
@keyframes bellPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.ripple{position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid var(--accent-gold);
   animation:rippleOut 1.6s ease-out infinite}
.ripple.r2{animation-delay:.8s}
@keyframes rippleOut{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}

/* hot reload vs restart (slide 13) */
.hr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
@media(max-width:820px){.hr-grid{grid-template-columns:1fr}}
.hr-cell{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:16px;padding:18px;text-align:center}
.hr-cell.reload{border-color:rgba(6,182,212,.5)}
.hr-cell.restart{border-color:rgba(255,179,71,.5)}
.hr-char{font-size:3rem;display:inline-block}
.hr-char.reload-anim{animation:quickChange 2.2s ease-in-out infinite}
@keyframes quickChange{0%,40%{transform:rotate(0)}50%{transform:rotate(-10deg) scale(1.05)}60%{transform:rotate(10deg)}70%,100%{transform:rotate(0)}}
.hr-char.restart-anim{animation:fullReset 3s ease-in-out infinite}
@keyframes fullReset{0%,30%{opacity:1;transform:scale(1)}45%{opacity:0;transform:scale(.4) rotate(180deg)}60%{opacity:0}75%{opacity:1;transform:scale(1) rotate(360deg)}100%{transform:scale(1)}}
.state-chip{display:inline-block;margin-top:8px;font-family:var(--font-code);font-size:.74rem;padding:4px 10px;border-radius:999px}
.state-chip.keep{background:rgba(6,182,212,.15);color:var(--accent-cyan)}
.state-chip.lost{background:rgba(255,179,71,.15);color:var(--accent-amber)}

/* compare table */
.cmp{width:100%;border-collapse:collapse;margin-top:14px}
.cmp th,.cmp td{border:1px solid rgba(139,92,246,.3);padding:9px 12px;text-align:left;font-size:.9rem}
.cmp th{background:var(--highlight-gold);color:var(--accent-gold);font-family:var(--font-display);font-size:.74rem;letter-spacing:1px}
.cmp td{color:var(--text-secondary)}

/* ============================================================
   PHONE MOCKUP (preview Flutter)
   ============================================================ */
.phone{width:188px;height:380px;border-radius:30px;border:8px solid #2a2a52;background:#0d0d22;position:relative;
   box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 2px rgba(139,92,246,.3);overflow:hidden;flex:none;animation:floaty 4s ease-in-out infinite}
.phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:60px;height:5px;border-radius:6px;background:#2a2a52;z-index:5}
.p-appbar{height:46px;background:var(--accent-violet);display:flex;align-items:center;gap:10px;padding:0 14px;color:#fff;
   font-weight:600;font-size:.86rem;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.p-body{position:absolute;top:46px;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;
   justify-content:center;gap:8px;padding:16px;text-align:center}
.p-avatar{width:64px;height:64px;border-radius:50%;background:rgba(139,92,246,.3);display:flex;align-items:center;
   justify-content:center;font-size:1.9rem;border:2px solid var(--accent-cyan)}
.p-name{font-weight:700;color:var(--text-primary);font-size:1rem}
.p-line{font-size:.78rem;color:var(--text-secondary)}
.p-chiprow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.p-chip{font-size:.68rem;background:rgba(6,182,212,.16);color:var(--accent-cyan);padding:3px 8px;border-radius:999px}
.p-fab{position:absolute;bottom:14px;right:14px;width:42px;height:42px;border-radius:50%;
   background:radial-gradient(circle at 35% 30%,var(--accent-gold),var(--accent-amber));display:flex;align-items:center;
   justify-content:center;font-size:1.3rem;color:#0a0a1a;box-shadow:0 4px 12px rgba(0,0,0,.4);animation:bellPulse 1.8s ease-in-out infinite}
.label-pin{display:inline-block;font-family:var(--font-code);font-size:.66rem;color:var(--accent-gold);
   background:var(--highlight-gold);border:1px solid var(--border-glow);padding:2px 7px;border-radius:6px;margin:2px}

/* ============================================================
   FLOWCHART (Slide 14)
   ============================================================ */
.flow-wrap{width:100%;overflow-x:auto}
svg.flow{width:100%;height:auto;min-width:700px}
.flow .node rect{fill:var(--bg-card);stroke:var(--accent-violet);stroke-width:2}
.flow .node text{fill:var(--text-primary);font-family:var(--font-body);font-size:14px;font-weight:600}
.flow .node.gold rect{stroke:var(--accent-gold)}
.flow .node.cyan rect{stroke:var(--accent-cyan)}
.flow .node{opacity:0;animation:nodeIn .5s ease forwards}
@keyframes nodeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.flow .edge{stroke:var(--accent-gold);stroke-width:2;fill:none;stroke-dasharray:8 6;stroke-dashoffset:300;animation:dash 2s linear forwards}
@keyframes dash{to{stroke-dashoffset:0}}

/* ============================================================
   TYPEWRITER TERMINAL (Slide 18)
   ============================================================ */
.terminal{background:#06060f;border:1px solid rgba(6,182,212,.4);border-radius:14px;overflow:hidden;margin-top:14px}
.term-bar{background:#15152e;padding:8px 14px;display:flex;gap:7px;align-items:center}
.term-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.term-bar .r{background:#ff5f56}.term-bar .y{background:#ffbd2e}.term-bar .g{background:#27c93f}
.term-bar span{margin-left:10px;font-family:var(--font-code);font-size:.78rem;color:var(--text-secondary)}
.term-body{padding:16px 18px;font-family:var(--font-code);font-size:.86rem;color:var(--accent-cyan);min-height:150px;white-space:pre-wrap}
.cursor{display:inline-block;width:9px;height:1.1em;background:var(--accent-cyan);vertical-align:-2px;animation:cblink 1s steps(1) infinite}
@keyframes cblink{50%{opacity:0}}

/* ============================================================
   FLIP CARDS (Slide 19)
   ============================================================ */
.flip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.flip{height:118px;perspective:800px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.flip.flipped .flip-in{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;display:flex;
   align-items:center;justify-content:center;text-align:center;padding:10px;border:1px solid var(--border-glow)}
.flip-front{background:var(--bg-card);font-family:var(--font-display);color:var(--accent-gold);font-size:.95rem}
.flip-back{background:linear-gradient(160deg,var(--accent-violet),#3a1d80);transform:rotateY(180deg);color:#fff;font-size:.8rem;line-height:1.4}

/* exercises */
.task-steps{counter-reset:step}
.task-steps li{counter-increment:step;list-style:none;display:flex;gap:12px;margin:10px 0;color:var(--text-secondary);line-height:1.5}
.task-steps li::before{content:counter(step);flex:none;width:28px;height:28px;border-radius:50%;
   background:var(--accent-violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.rubric{width:100%;border-collapse:collapse;margin-top:10px}
.rubric th,.rubric td{border:1px solid rgba(139,92,246,.3);padding:8px 12px;text-align:left;font-size:.9rem}
.rubric th{background:var(--highlight-gold);color:var(--accent-gold);font-family:var(--font-display);font-size:.74rem;letter-spacing:1px}
.rubric td{color:var(--text-secondary)}

.muted{color:var(--text-secondary);font-size:.92rem}
.kbd-hint{position:fixed;bottom:24px;left:18px;z-index:150;font-family:var(--font-code);font-size:.72rem;color:var(--text-secondary);opacity:.6}
@media(max-width:700px){.kbd-hint{display:none}}

/* ============================================================
   FORMULA: Dart + Flutter = Aplikasi (Slide 3B)
   ============================================================ */
.formula-section{margin-top:16px}
.formula-section .demo-box{opacity:0;transform:translateY(14px)}
.formula-flow{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:18px 0}
.formula-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 22px;border-radius:16px;border:2px solid var(--border-glow);background:var(--bg-card);min-width:120px;opacity:0;transform:translateY(20px)}
.formula-box .formula-icon{font-size:2.2rem}
.formula-box .formula-label{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-primary)}
.formula-box .formula-sub{font-size:.75rem;color:var(--text-secondary)}
.dart-box{border-color:var(--accent-cyan)}
.flutter-box{border-color:var(--accent-violet)}
.app-box{border-color:var(--accent-gold);background:linear-gradient(160deg,var(--bg-card),rgba(255,215,0,.08))}
.formula-op{font-size:2rem;font-weight:900;color:var(--accent-gold);opacity:0;transform:scale(0.5)}

/* ============================================================
   TRANSFORM: Terminal → Aplikasi (Slide 3B)
   ============================================================ */
.transform-stage{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;flex-wrap:wrap}
.transform-col{display:flex;flex-direction:column;align-items:center;gap:10px}
.transform-label{font-family:var(--font-display);font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-violet)}
.terminal-mini{width:220px;border-radius:12px;border:1px solid rgba(6,182,212,.3);overflow:hidden;background:#06060f}
.term-bar-mini{background:#15152e;padding:6px 10px;display:flex;gap:5px;align-items:center}
.term-bar-mini i{width:9px;height:9px;border-radius:50%;display:inline-block}
.term-bar-mini .r{background:#ff5f56}.term-bar-mini .y{background:#ffbd2e}.term-bar-mini .g{background:#27c93f}
.term-body-mini{padding:12px 14px;font-family:var(--font-code);font-size:.78rem;color:var(--accent-cyan);line-height:1.6}
.term-output-mini{color:var(--accent-gold);font-weight:600}
.transform-arrow-col{display:flex;align-items:center}
.transform-arrow{display:flex;flex-direction:column;align-items:center;gap:4px;animation:nudge 1.4s infinite}
.arrow-text{font-family:var(--font-display);font-size:.68rem;letter-spacing:1px;color:var(--accent-violet);text-transform:uppercase}
.arrow-icon{font-size:1.8rem}
.transform-desc{font-size:.78rem;color:var(--text-secondary);text-align:center}

/* ============================================================
   BEFORE/AFTER CARDS (Slide 3B)
   ============================================================ */
.before-after-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:820px){.before-after-grid{grid-template-columns:1fr}}
.before-card{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:14px;padding:16px}
.before-card h4{color:var(--accent-gold);margin-bottom:8px}
.highlight-card{border-color:var(--accent-gold);box-shadow:0 0 20px rgba(255,215,0,.15)}
.io-flow-mini{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.io-box{font-family:var(--font-code);font-size:.68rem;padding:4px 10px;border-radius:8px;font-weight:600}
.io-in{background:rgba(6,182,212,.15);color:var(--accent-cyan)}
.io-proc{background:rgba(139,92,246,.15);color:var(--accent-violet)}
.io-out{background:rgba(255,215,0,.15);color:var(--accent-gold)}
.io-out.app-out{background:rgba(255,215,0,.25);color:var(--accent-gold);animation:glowPulse 2s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 0 6px rgba(255,215,0,.2)}50%{box-shadow:0 0 14px rgba(255,215,0,.5)}}
.io-arrow{color:var(--accent-gold);font-size:1rem}

/* ============================================================
   FLUTTER JOURNEY (Slide 3C)
   ============================================================ */
.flutter-journey{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:18px 0}
.fj-step{flex:1;min-width:110px;background:var(--bg-card);border:1px solid rgba(139,92,246,.25);border-radius:14px;padding:14px 10px;text-align:center;opacity:0;transform:translateY(20px)}
.fj-step .fj-icon{font-size:1.6rem;margin-bottom:4px}
.fj-step .fj-title{font-family:var(--font-display);font-size:.68rem;letter-spacing:1px;color:var(--accent-gold);margin-bottom:3px}
.fj-step .fj-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.3}
.fj-connector{display:flex;align-items:center;color:var(--accent-cyan);font-size:1.2rem;padding:0 2px}
@media(max-width:820px){.fj-connector{transform:rotate(90deg);font-size:1rem;padding:4px 0}}

/* ============================================================
   CREATE PROJECT FLOW (Slide 4)
   ============================================================ */
.create-project-flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin:14px 0}
.cpf-step{flex:1;min-width:100px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border-glow);opacity:0;transform:translateX(-20px)}
.cpf-num{width:32px;height:32px;border-radius:50%;background:var(--accent-violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex:none}
.cpf-content .cpf-title{font-weight:700;color:var(--text-primary);font-size:.88rem}
.cpf-content .cpf-desc{font-size:.72rem;color:var(--text-secondary)}
.cpf-arrow{display:flex;align-items:center;color:var(--accent-cyan);font-size:1.2rem;padding:0 4px}
.highlight-step{border-color:var(--accent-gold);box-shadow:0 0 16px rgba(255,215,0,.25)}
.highlight-step .cpf-num{background:var(--accent-gold);color:#0a0a1a}
@media(max-width:820px){.cpf-arrow{transform:rotate(90deg)}}

/* ============================================================
   FOLDER DETAIL CARDS (Slide 4B)
   ============================================================ */
.folder-detail-cards{display:flex;flex-direction:column;gap:12px}
.folder-detail-card{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:14px;padding:16px;opacity:0;transform:translateY(16px)}
.folder-detail-card.active{opacity:1;transform:none}
.folder-detail-card h4{color:var(--accent-gold);margin-bottom:6px}
.folder-detail-card p{font-size:.88rem;line-height:1.5}
.tree-icon{font-size:.9rem}
.tree-tag{font-family:var(--font-code);font-size:.62rem;padding:2px 7px;border-radius:6px;background:rgba(139,92,246,.15);color:var(--accent-violet);margin-left:auto}
.tree-tag.hot{background:rgba(255,215,0,.15);color:var(--accent-gold)}
.tree-root{font-weight:700;color:var(--text-primary)}
.indent2{padding-left:44px!important}

/* ============================================================
   CONCLUSION FLOW (Slides 4B, 5B)
   ============================================================ */
.conclusion-flow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 0}
.conc-box{font-family:var(--font-display);font-size:.72rem;letter-spacing:1px;padding:8px 14px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border-glow);color:var(--text-secondary);text-align:center}
.conc-box.highlight{background:linear-gradient(160deg,var(--highlight-gold),rgba(255,215,0,.08));border-color:var(--accent-gold);color:var(--accent-gold);font-weight:700}
.conc-arrow{color:var(--accent-cyan);font-size:1rem}

/* ============================================================
   RUN PROJECT FLOW (Slide 4B)
   ============================================================ */
.run-project-flow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 0}
.rpf-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.rpf-icon{font-size:1.8rem}
.rpf-label{font-family:var(--font-code);font-size:.7rem;color:var(--text-secondary)}
.rpf-arrow{color:var(--accent-cyan);font-size:1rem}

/* ============================================================
   FLOW FULL: Project → Aplikasi (Slide 5)
   ============================================================ */
.flow-full{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px 0}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border-glow);min-width:90px;opacity:0;transform:scale(0.7)}
.flow-node .fn-icon{font-size:1.5rem}
.flow-node .fn-label{font-family:var(--font-code);font-size:.72rem;color:var(--text-secondary)}
.fn-app{border-color:var(--accent-gold);background:linear-gradient(160deg,var(--bg-card),rgba(255,215,0,.08))}
.fn-app .fn-label{color:var(--accent-gold);font-weight:700}
.flow-arrow{font-size:1.2rem;color:var(--accent-cyan);opacity:0;transform:scale(0.5)}

/* ============================================================
   DETAIL STEPS (Slide 5)
   ============================================================ */
.detail-steps{display:flex;flex-direction:column;gap:10px}
.detail-step{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-radius:12px;background:var(--bg-card);border:1px solid rgba(139,92,246,.18)}
.ds-num{width:28px;height:28px;border-radius:50%;background:var(--accent-violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:none}
.ds-content{font-size:.88rem;color:var(--text-secondary);line-height:1.5}
.ds-content strong{color:var(--accent-gold)}

/* ============================================================
   EXECUTION STEPS (Slide 5B)
   ============================================================ */
.execution-steps{display:flex;flex-direction:column;gap:0;margin:14px 0}
.exec-step{display:flex;align-items:flex-start;gap:14px;opacity:0;transform:translateX(-20px)}
.exec-left{display:flex;flex-direction:column;align-items:center;flex:none}
.exec-num{width:36px;height:36px;border-radius:50%;background:var(--accent-violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem}
.exec-line{width:2px;height:28px;background:var(--border-glow);margin-top:4px}
.exec-right{padding:6px 0 14px}
.exec-title{font-weight:700;color:var(--text-primary);font-size:.95rem}
.exec-desc{font-size:.82rem;color:var(--text-secondary);margin-top:2px}

/* ============================================================
   LINE EXPLAIN (Slide 5B)
   ============================================================ */
.line-explain{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.le-item{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.15)}
.le-item code{flex:none;min-width:110px;font-size:.82rem}
.le-item span{font-size:.82rem;color:var(--text-secondary);line-height:1.4}

/* ============================================================
   WIDGET MODULE 2D STYLING & ANIMATIONS (Slides 6 s/d 6I)
   ============================================================ */

/* Mini Action Tool Buttons */
.btn-tool-mini{background:rgba(6,182,212,.12);color:var(--accent-cyan);border:1px solid rgba(6,182,212,.35);padding:4px 10px;border-radius:8px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .25s ease;display:inline-flex;align-items:center;gap:4px}
.btn-tool-mini:hover{background:var(--accent-cyan);color:#0a0a1a;box-shadow:0 0 12px rgba(6,182,212,.4)}
.btn-tool-mini.gold{background:rgba(255,215,0,.12);color:var(--accent-gold);border-color:rgba(255,215,0,.35)}
.btn-tool-mini.gold:hover{background:var(--accent-gold);color:#0a0a1a;box-shadow:0 0 12px rgba(255,215,0,.4)}
.btn-tool-mini.active{background:var(--accent-gold);color:#0a0a1a;border-color:var(--accent-gold);box-shadow:0 0 14px rgba(255,215,0,.5)}

/* 1. Interactive 2D Widget Inspector (Slide 6) */
.inspector-phone .inspectable{transition:all .3s ease;border:1px solid transparent;border-radius:6px}
.inspect-tag{display:none;position:absolute;top:-8px;right:-4px;background:#0d0d26;color:var(--accent-cyan);border:1px solid var(--accent-cyan);font-family:var(--font-code);font-size:.6rem;padding:1px 5px;border-radius:4px;z-index:20;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.6)}

.inspector-phone.active-inspector .inspectable{box-shadow:0 0 0 1.5px rgba(6,182,212,.8);background:rgba(6,182,212,.08)!important}
.inspector-phone.active-inspector .p-appbar.inspectable{box-shadow:0 0 0 1.5px rgba(255,215,0,.9);background:rgba(255,215,0,.15)!important}
.inspector-phone.active-inspector .p-appbar .inspect-tag{color:var(--accent-gold);border-color:var(--accent-gold)}
.inspector-phone.active-inspector .inspect-card.inspectable{box-shadow:0 0 0 1.5px rgba(139,92,246,.85);background:rgba(139,92,246,.12)!important}
.inspector-phone.active-inspector .inspect-card .inspect-tag{color:var(--accent-violet);border-color:var(--accent-violet)}
.inspector-phone.active-inspector .p-btn-sim.inspectable{box-shadow:0 0 0 1.5px rgba(39,201,63,.9);background:rgba(39,201,63,.2)!important}
.inspector-phone.active-inspector .p-btn-sim .inspect-tag{color:#27c93f;border-color:#27c93f}
.inspector-phone.active-inspector .inspect-tag{display:block;animation:popIn .3s cubic-bezier(0.175,0.885,0.32,1.275) forwards}

@keyframes popIn{
  0%{transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* 2. Wireframe / Invisible Widget Stage (Slide 6A) */
.layout-column-box{width:100%;display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:8px;border:1.5px dashed transparent;transition:all .35s ease;position:relative}
.layout-ghost-tag{display:none;position:absolute;top:-10px;left:8px;background:#151532;color:var(--accent-gold);font-family:var(--font-code);font-size:.62rem;padding:2px 6px;border-radius:4px;border:1px solid var(--accent-gold)}
.visible-text-box{background:rgba(255,255,255,.08);padding:8px 12px;border-radius:6px;font-size:.82rem;font-weight:600;color:var(--text-primary);text-align:center;border:1px solid rgba(255,255,255,.15);transition:all .3s}

.wireframe-stage.active-wireframe .layout-column-box{border-color:var(--accent-gold);background:rgba(255,215,0,.06);box-shadow:0 0 16px rgba(255,215,0,.2);animation:dashedGlow 2s infinite linear}
.wireframe-stage.active-wireframe .layout-ghost-tag{display:block;animation:popIn .3s ease forwards}
.wireframe-stage.active-wireframe .visible-text-box{border-color:var(--accent-cyan);background:rgba(6,182,212,.15);color:var(--accent-cyan)}

@keyframes dashedGlow{
  0%,100%{box-shadow:0 0 10px rgba(255,215,0,.2)}
  50%{box-shadow:0 0 20px rgba(255,215,0,.45)}
}

/* Category Cards (Slide 6A) */
.widget-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
@media(max-width:820px){.widget-cat-grid{grid-template-columns:1fr}}
.cat-card{padding:12px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-glow);transition:all .25s ease}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cat-visible{border-color:rgba(6,182,212,.35)}
.cat-layout{border-color:rgba(255,215,0,.35)}
.cat-head{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--text-primary)}
.cat-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.cat-tags code{font-size:.72rem;padding:2px 6px;background:rgba(0,0,0,.3);border-radius:4px;border:1px solid rgba(255,255,255,.1)}

/* 3. 2D Recipe Pipeline (Slide 6B) */
.recipe-pipeline{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:320px}
.pipe-card{width:100%;padding:10px 14px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-glow);text-align:center;position:relative;transition:all .3s ease}
.pipe-card:hover{transform:scale(1.02);border-color:var(--accent-cyan)}
.pc-badge{font-family:var(--font-display);font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--accent-gold);margin-bottom:2px}
.pc-content{font-weight:700;color:var(--text-primary);font-size:.88rem}
.pc-sub{font-size:.72rem;color:var(--text-secondary);margin-top:2px}
.pipe-arrow{font-size:1.1rem;color:var(--accent-cyan);animation:bounceDown 1.5s infinite}
@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* 4. Parent-Child Visuals (Slide 6C) */
.parent-child-visual{background:rgba(0,0,0,.25);border:1px solid var(--border-glow);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center}
.pc-node{padding:8px 14px;border-radius:10px;text-align:center;position:relative}
.parent-node{background:rgba(139,92,246,.15);border:1.5px solid var(--accent-violet);width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.child-node{background:rgba(6,182,212,.15);border:1.5px solid var(--accent-cyan);padding:8px 16px;border-radius:8px}
.multi-children-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.child-node-mini{background:rgba(255,215,0,.12);border:1px solid var(--accent-gold);padding:6px 10px;border-radius:6px;font-size:.78rem}
.node-badge{font-family:var(--font-display);font-size:.58rem;letter-spacing:1px;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.4);color:#fff;margin-bottom:2px;display:inline-block}
.node-arrow-down{font-family:var(--font-code);font-size:.72rem;color:var(--text-secondary)}
.card-tag-badge{display:inline-block;font-family:var(--font-display);font-size:.65rem;letter-spacing:1px;padding:3px 8px;border-radius:6px;background:rgba(6,182,212,.15);color:var(--accent-cyan);font-weight:600}
.card-tag-badge.gold{background:rgba(255,215,0,.15);color:var(--accent-gold)}

/* 5. Profile Challenge (Slide 6D) */
.target-profile-card{width:100%;padding:14px 10px;background:rgba(255,255,255,.05);border-radius:14px;display:flex;flex-direction:column;align-items:center;border:1px solid rgba(255,255,255,.1)}
.profile-solution-card{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:14px;padding:16px;min-height:160px;display:flex;flex-direction:column;justify-content:center}
.sol-locked-msg{text-align:center;color:var(--text-secondary);font-size:.88rem;padding:20px 10px}
.sol-tree-view{animation:fadeInUp .4s ease forwards}
.tn-hint{font-size:.72rem;color:var(--accent-gold);font-weight:400;margin-left:4px}

@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:none}
}

/* 6. Padding Visualizer & Roles Table (Slide 6E) */
.padding-toggle-group{display:flex;gap:4px}
.btn-pad-toggle{padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:600;background:rgba(255,255,255,.08);color:var(--text-secondary);border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .2s}
.btn-pad-toggle:hover{color:#fff;border-color:var(--accent-cyan)}
.btn-pad-toggle.active{background:var(--accent-cyan);color:#0a0a1a;border-color:var(--accent-cyan)}

.padding-interactive-demo{background:rgba(255,215,0,.08);border:2px dashed var(--accent-gold);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:padding .35s cubic-bezier(0.4,0,0.2,1);position:relative;margin-top:8px;min-height:100px}
.pad-inner-content{background:var(--accent-violet);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;font-size:.88rem;box-shadow:0 4px 12px rgba(0,0,0,.4);transition:all .3s}

.role-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--border-glow);margin-top:10px}
.role-table{width:100%;border-collapse:collapse;font-size:.82rem}
.role-table th{background:rgba(139,92,246,.15);color:var(--accent-gold);padding:8px 10px;text-align:left;font-family:var(--font-display);font-size:.7rem;letter-spacing:1px}
.role-table td{padding:7px 10px;border-top:1px solid rgba(255,255,255,.06);color:var(--text-secondary)}
.role-table td code{color:var(--text-primary);font-weight:600}
.pill-act{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:600}
.pill-act.show{background:rgba(6,182,212,.15);color:var(--accent-cyan)}
.pill-act.wrap{background:rgba(139,92,246,.15);color:var(--accent-violet)}
.pill-act.space{background:rgba(255,215,0,.15);color:var(--accent-gold)}
.pill-act.pos{background:rgba(236,72,153,.15);color:#ec4899}
.pill-act.arrange{background:rgba(39,201,63,.15);color:#27c93f}

/* 7. OOP Bridge (Slide 6F) */
.oop-flow-box{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:10px 0}
.of-step{width:100%;max-width:280px;background:var(--bg-card);border:1px solid var(--border-glow);border-radius:12px;padding:10px;text-align:center;transition:all .25s}
.of-step:hover{transform:scale(1.02)}
.of-step .of-icon{font-size:1.6rem}
.of-step .of-title{font-family:var(--font-display);font-size:.82rem;color:var(--text-primary);font-weight:700}
.of-step .of-desc{font-size:.72rem;color:var(--text-secondary)}
.of-step.highlight-step{border-color:var(--accent-gold);box-shadow:0 0 16px rgba(255,215,0,.2)}
.of-step.highlight-step .of-title{color:var(--accent-gold)}
.of-arrow{font-size:.78rem;color:var(--accent-cyan);font-weight:600}

/* 8. Greeting Flow (Slide 6G) */
.greeting-flow-steps{display:flex;flex-direction:column;gap:10px}
.gf-step{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--bg-card);border:1px solid rgba(139,92,246,.2);transition:all .25s}
.gf-step:hover{transform:translateX(4px);border-color:var(--accent-cyan)}
.gf-num{width:28px;height:28px;border-radius:50%;background:var(--accent-violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:none}
.gf-content{font-size:.85rem;color:var(--text-secondary);line-height:1.4}
.gf-content strong{color:var(--text-primary)}
.highlight-gf{border-color:var(--accent-gold);background:rgba(255,215,0,.08)}
.highlight-gf .gf-num{background:var(--accent-gold);color:#0a0a1a}

/* 9. 2D Widget Tree Canvas (Slide 6H) */
.tree-2d-canvas{background:rgba(0,0,0,.3);border:1px solid var(--border-glow);border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;width:100%}
.t2d-node{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:10px;background:var(--bg-card);border:1.5px solid var(--border-glow);transition:all .25s;max-width:280px;width:100%}
.t2d-node:hover{transform:scale(1.03);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.t2d-root{border-color:var(--accent-gold);background:linear-gradient(135deg,rgba(255,215,0,.15),var(--bg-card))}
.t2d-root strong{color:var(--accent-gold)}
.t2d-scaffold{border-color:var(--accent-cyan);background:linear-gradient(135deg,rgba(6,182,212,.12),var(--bg-card))}
.t2d-scaffold strong{color:var(--accent-cyan)}
.t2d-center{border-color:var(--accent-violet);background:linear-gradient(135deg,rgba(139,92,246,.12),var(--bg-card))}
.t2d-column{border-color:#ec4899;background:linear-gradient(135deg,rgba(236,72,153,.12),var(--bg-card))}
.t2d-leaf{border-color:#27c93f;background:linear-gradient(135deg,rgba(39,201,63,.12),var(--bg-card));width:130px;padding:6px 10px}
.t2d-icon{font-size:1.3rem}
.t2d-info{display:flex;flex-direction:column}
.t2d-info strong{font-size:.85rem}
.t2d-sub{font-size:.65rem;color:var(--text-secondary)}

.t2d-branch-line{width:2px;height:18px;background:linear-gradient(to bottom,var(--border-glow),var(--accent-cyan));margin:2px 0}
.t2d-fork-wrap{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:2px}
.t2d-fork-line{width:160px;height:2px;background:var(--border-glow);margin-bottom:8px;position:relative}
.t2d-fork-line::before,.t2d-fork-line::after{content:'';position:absolute;top:0;width:2px;height:8px;background:var(--border-glow)}
.t2d-fork-line::before{left:30px}
.t2d-fork-line::after{right:30px}
.t2d-leaf-row{display:flex;gap:16px;justify-content:center}

/* 10. Mastery Checklist (Slide 6I) */
.mastery-checklist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.mc-item{font-size:.84rem;color:var(--text-secondary);line-height:1.4;display:flex;align-items:flex-start;gap:6px}
.mc-item strong{color:var(--text-primary)}

/* ============================================================
   NEW WIDGET SLIDES (6b-6g) — CSS
   ============================================================ */

/* Widget visible arrow (Slide 6) */
.widget-vis-arrow{text-align:center;color:var(--accent-cyan);font-size:.85rem;font-weight:600}

/* Widget Description Flow (Slide 6b) */
.widget-desc-flow{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.wd-box{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-glow);width:100%;transition:all .25s}
.wd-box:hover{transform:scale(1.02)}
.wd-icon{font-size:1.4rem;flex:none}
.wd-label{font-weight:700;font-size:.88rem;color:var(--text-primary);flex:none}
.wd-sub{font-size:.72rem;color:var(--text-secondary);margin-left:auto}
.wd-code{border-color:var(--accent-cyan)}
.wd-desc{border-color:var(--accent-gold)}
.wd-flutter{border-color:var(--accent-violet)}
.wd-result{border-color:#27c93f;background:linear-gradient(135deg,rgba(39,201,63,.08),var(--bg-card))}
.wd-arrow{text-align:center;color:var(--accent-cyan);font-size:.9rem;animation:bounceDown 1.5s infinite}

/* Tree Diagram (Slides 6c, 6d, 6g) */
.tree-diagram{display:flex;flex-direction:column;align-items:center;gap:0}
.tree-node{padding:8px 16px;border-radius:10px;text-align:center;font-weight:600;font-size:.88rem;transition:all .25s}
.tree-parent{background:rgba(139,92,246,.15);border:1.5px solid var(--accent-violet);color:var(--accent-violet);min-width:120px}
.tree-child{background:rgba(6,182,212,.12);border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:.82rem;padding:6px 12px}
.tree-connector{width:2px;height:16px;background:linear-gradient(to bottom,var(--accent-violet),var(--accent-cyan))}
.tree-children{display:flex;flex-direction:column;align-items:center;gap:6px}

/* Widget Roles Grid (Slide 6e) */
.widget-roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
@media(max-width:900px){.widget-roles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.widget-roles-grid{grid-template-columns:1fr}}
.widget-role-card{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:14px;padding:16px;text-align:center;transition:all .25s;opacity:0;transform:translateY(16px)}
.widget-role-card.show{opacity:1;transform:none;transition:all .5s ease}
.widget-role-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.role-icon{font-size:2rem;margin-bottom:6px}
.role-title{font-family:var(--font-display);font-size:.82rem;font-weight:700;margin-bottom:4px}
.role-desc{font-size:.78rem;color:var(--text-secondary);margin-bottom:8px;line-height:1.4}
.role-examples code{font-size:.72rem;padding:2px 6px;border-radius:4px;margin:1px}
.role-content{border-color:rgba(6,182,212,.4)}.role-content .role-title{color:var(--accent-cyan)}.role-content .role-examples code{background:rgba(6,182,212,.15);color:var(--accent-cyan)}
.role-layout{border-color:rgba(255,215,0,.4)}.role-layout .role-title{color:var(--accent-gold)}.role-layout .role-examples code{background:rgba(255,215,0,.15);color:var(--accent-gold)}
.role-container{border-color:rgba(139,92,246,.4)}.role-container .role-title{color:var(--accent-violet)}.role-container .role-examples code{background:rgba(139,92,246,.15);color:var(--accent-violet)}
.role-interactive{border-color:rgba(39,201,63,.4)}.role-interactive .role-title{color:#27c93f}.role-interactive .role-examples code{background:rgba(39,201,63,.15);color:#27c93f}

/* Dart Bridge Flow (Slide 6f) */
.dart-bridge-flow{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.db-box{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-glow);width:100%;max-width:260px;transition:all .25s}
.db-box:hover{transform:scale(1.03)}
.db-icon{font-size:1.4rem;flex:none}
.db-label{font-weight:700;font-size:.88rem;color:var(--text-primary)}
.db-widget{border-color:var(--accent-violet)}.db-widget .db-label{color:var(--accent-violet)}
.db-class{border-color:var(--accent-cyan)}.db-class .db-label{color:var(--accent-cyan)}
.db-object{border-color:var(--accent-gold)}.db-object .db-label{color:var(--accent-gold)}
.db-arrow{text-align:center;color:var(--accent-cyan);font-size:.9rem;animation:bounceDown 1.5s infinite}

/* Pipeline Big (Slide 6I) */
.build-pipeline{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.bp-box{width:100%;max-width:270px;padding:12px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-glow);text-align:center;transition:all .25s}
.bp-widget{border-color:var(--accent-violet)}
.bp-build{border-color:var(--accent-gold);box-shadow:0 0 16px rgba(255,215,0,.25)}
.bp-build .bp-label{color:var(--accent-gold);font-weight:700}
.bp-return{border-color:var(--accent-cyan)}
.bp-icon{font-size:1.6rem}
.bp-label{font-size:.88rem;font-weight:600;margin-top:2px}
.bp-sub{font-size:.72rem;color:var(--text-secondary)}
.bp-arrow{font-size:.75rem;color:var(--accent-cyan);font-weight:600}