/* ==========================================================================
   BIOSAVROS — Deep Forest Emerald Royale
   Vanilla CSS3 · Tanpa framework · WCAG AA
   ========================================================================== */

/* ---------- 1. RESET & TOKENS ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{
  --bg-primary:#0A1A0C; --bg-alt:#0F2612; --bg-deep:#06110A;
  --bg-card:#15321A; --bg-card-hover:#1E4525; --bg-elevated:#1A3B20;
  --h1:#E6F5A3; --h2:#D4E882; --h3:#B8D45A;
  --body:#D4E8CC; --muted:#9FC2A4; --caption:#7AAB7E;
  --link:#7CE88B; --link-hover:#B7FFC2;
  --btn:#3AAD52; --btn-grad:linear-gradient(135deg,#7CC93A 0%,#3AAD52 100%);
  --btn-br:#3F7A43; --btn-dark:#06110A; --btn-light:#E6F5A3;
  --border:#2D5E30; --border-l:#3F7A43; --glow:rgba(168,216,50,.35);
  --icon:#A8D832; --hl:#C6E830; --gold:#D4B86A;
  --success:#4CAF50; --error:#E53935; --warning:#FF9800;
  --f-title:'Playfair Display',Georgia,serif;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-tag:'Marcellus',Georgia,serif;
  --nav-h:72px;
  --rad:20px;
  --card-shadow:0 2px 6px rgba(0,0,0,.4),0 20px 40px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(168,216,50,.08);
}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--bg-primary);
  color:var(--body);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
::selection{background:rgba(168,216,50,.28);color:#F4FFD9}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
button{font-family:inherit;background:none;border:none;color:inherit}
:focus-visible{outline:3px solid var(--icon);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--border-l)}

.skip-link{position:fixed;top:-60px;left:16px;z-index:100000;background:var(--hl);color:var(--btn-dark);font-family:var(--f-ui);font-weight:700;padding:10px 18px;border-radius:10px;transition:top .25s}
.skip-link:focus{top:14px;color:var(--btn-dark)}

.wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
.wrap-narrow{max-width:920px}

/* ---------- 2. CURSOR (DESKTOP ONLY) ---------- */
#cursor-dot,#cursor-ring{display:none}
@media (min-width:1024px) and (pointer:fine){
  body.custom-cursor,body.custom-cursor a,body.custom-cursor button,
  body.custom-cursor input,body.custom-cursor label{cursor:none}
  #cursor-dot{display:block;position:fixed;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--icon);z-index:999990;pointer-events:none;mix-blend-mode:difference}
  #cursor-ring{display:block;position:fixed;top:0;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid var(--icon);z-index:999989;pointer-events:none;mix-blend-mode:difference;transition:width .3s,height .3s,margin .3s,border-color .3s,border-style .3s}
  #cursor-ring.hover{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:#7CC93A;border-style:dashed}
  #cursor-ring.pulse{animation:cursorPulse .45s ease-out}
}
@keyframes cursorPulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.9);opacity:0}}

/* ---------- 3. NAVBAR & HAMBURGER ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:9997;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(16px,4vw,48px);
  background:rgba(6,17,10,.88);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:height .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.navbar.scrolled{height:58px;box-shadow:0 8px 40px rgba(168,216,50,.08);border-bottom-color:rgba(45,94,48,.6)}
.nav-brand{display:flex;align-items:center;gap:12px;min-width:0}
.nav-logo-ring{position:relative;width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#1E4525,#0F2612);border:1px solid var(--border-l);box-shadow:0 0 0 3px rgba(168,216,50,.12),0 0 18px rgba(168,216,50,.25);transition:width .35s,height .35s,flex-basis .35s}
.navbar.scrolled .nav-logo-ring{width:36px;height:36px;flex-basis:36px}
.nav-logo{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav-logo-ring.logo-fallback::after{content:"";width:20px;height:20px;background:var(--icon);clip-path:polygon(50% 0,88% 55%,62% 55%,62% 100%,38% 100%,38% 55%,12% 55%)}
.nav-word{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.nav-word strong{font-family:var(--f-title);font-weight:900;letter-spacing:.14em;font-size:1.05rem;color:var(--h1)}
.nav-word em{font-family:var(--f-ui);font-style:normal;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
#hamburger{position:relative;width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:12px;border:1px solid var(--border);background:rgba(21,50,26,.6);transition:border-color .3s,background .3s}
#hamburger:hover{border-color:var(--icon);background:var(--bg-card-hover)}
.hb-line{display:block;width:22px;height:2px;background:var(--h1);border-radius:2px;transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .25s,width .25s}
#hamburger.open .hb-line:nth-child(1){transform:translateY(8px) rotate(45deg)}
#hamburger.open .hb-line:nth-child(2){opacity:0;width:0}
#hamburger.open .hb-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 4. DRAWER ---------- */
#drawer-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(6,17,10,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .4s}
#drawer-backdrop.show{opacity:1;pointer-events:auto}
#drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9999;
  width:min(420px,86vw);
  background:linear-gradient(160deg,#0F2612 0%,#0A1A0C 70%);
  border-left:1px solid var(--border);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);
  transform:translateX(105%);
  transition:transform .48s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;
}
#drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border)}
.drawer-head img{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-l)}
.drawer-title{font-family:var(--f-title);font-weight:700;color:var(--h1);letter-spacing:.08em;flex:1}
#drawer-close{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border);font-size:1.1rem;color:var(--h3);transition:.3s}
#drawer-close:hover{border-color:var(--error);color:#fff;background:rgba(229,57,53,.15)}
#drawer-menu{list-style:none;overflow-y:auto;flex:1;padding:14px 14px 24px}
.dm-link{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;font-family:var(--f-ui);font-weight:600;font-size:.93rem;color:var(--body);border-left:3px solid transparent;transition:transform .3s,border-color .3s,background .3s;min-height:48px}
.dm-link:hover,.dm-link.active{transform:translateX(6px);border-left-color:var(--icon);background:rgba(168,216,50,.07);color:var(--h1)}
.dm-ic{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:var(--bg-alt);border:1px solid var(--border);color:var(--icon);font-size:.85rem}
.dm-label{flex:1;min-width:0;overflow-wrap:anywhere}
.dm-ch{font-size:.7rem;color:var(--caption);transition:transform .3s}
.dm-link:hover .dm-ch{transform:translateX(4px);color:var(--icon)}
.drawer-foot{padding:20px 22px;border-top:1px solid var(--border);display:flex;gap:12px;align-items:center;background:rgba(6,17,10,.5)}
.drawer-foot img{width:30px;height:30px;border-radius:50%}
.drawer-foot p{font-family:var(--f-serif);font-style:italic;font-size:.86rem;color:var(--muted);line-height:1.5}

/* ---------- 5. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 20%,#15321A 0%,#0F2612 45%,#06110A 100%);
  overflow:hidden;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23A8D832' stroke-opacity='.05' stroke-width='1'><path d='M130 20 V240 M130 60 L80 110 M130 60 L180 110 M130 120 L66 176 M130 120 L194 176 M130 180 L88 224 M130 180 L172 224'/></g></svg>");
  background-size:260px;
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.aura{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25}
.a1{width:44vw;height:44vw;min-width:320px;min-height:320px;top:-10%;left:-8%;background:radial-gradient(circle,#3AAD52,transparent 65%);animation:auraDrift 16s ease-in-out infinite}
.a2{width:36vw;height:36vw;min-width:280px;min-height:280px;bottom:-12%;right:-6%;background:radial-gradient(circle,#7CC93A,transparent 65%);animation:auraDrift 20s ease-in-out infinite reverse}
.a3{width:26vw;height:26vw;min-width:220px;min-height:220px;top:32%;right:22%;background:radial-gradient(circle,#C6E830,transparent 62%);opacity:.14;animation:auraDrift 13s ease-in-out infinite}
@keyframes auraDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-3vh) scale(1.12)}}
.branch{position:absolute;width:clamp(200px,26vw,380px);stroke:var(--icon);color:var(--icon);opacity:.35}
.branch-tl{top:calc(var(--nav-h) + 10px);left:0;transform:scaleY(-1)}
.branch-br{bottom:0;right:0;transform:rotate(180deg)}
.br-p{stroke:var(--icon);stroke-linecap:round;fill:none;stroke-dasharray:600;stroke-dashoffset:600;animation:branchGrow 5s ease forwards .8s}
.br-p.d2{animation-delay:1.6s}.br-p.d3{animation-delay:2.4s}
.br-c{fill:var(--icon);opacity:0;animation:fadeIn 1s ease forwards 3.4s}
@keyframes branchGrow{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:.8}}
.float-leaf{position:absolute;color:var(--icon);filter:drop-shadow(0 6px 18px rgba(168,216,50,.25));opacity:.16;animation:leafFloat var(--dur,10s) ease-in-out infinite}
.fl1{width:110px;top:16%;left:7%;--dur:9s}
.fl2{width:70px;top:62%;left:12%;--dur:12s;animation-delay:-3s}
.fl3{width:150px;top:10%;right:8%;--dur:14s;animation-delay:-5s}
.fl4{width:60px;bottom:14%;right:14%;--dur:8s;animation-delay:-2s}
.fl5{width:88px;top:44%;left:44%;--dur:11s;animation-delay:-6s;opacity:.1}
.fl6{width:52px;bottom:26%;left:30%;--dur:10s;animation-delay:-4s}
@keyframes leafFloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-38px) rotate(7deg)}}
.hero-particles span{position:absolute;bottom:-4vh;width:5px;height:5px;border-radius:50%;background:var(--icon);opacity:0;animation:rise var(--rd,11s) linear infinite;animation-delay:var(--rl,0s)}
.hero-particles span:nth-child(1){left:8%;--rd:12s;--rl:0s}
.hero-particles span:nth-child(2){left:18%;--rd:9s;--rl:2s}
.hero-particles span:nth-child(3){left:27%;--rd:14s;--rl:5s}
.hero-particles span:nth-child(4){left:36%;--rd:10s;--rl:1s}
.hero-particles span:nth-child(5){left:45%;--rd:13s;--rl:4s}
.hero-particles span:nth-child(6){left:54%;--rd:9s;--rl:6s}
.hero-particles span:nth-child(7){left:62%;--rd:12s;--rl:3s}
.hero-particles span:nth-child(8){left:70%;--rd:11s;--rl:7s}
.hero-particles span:nth-child(9){left:78%;--rd:14s;--rl:2s}
.hero-particles span:nth-child(10){left:86%;--rd:10s;--rl:5s}
.hero-particles span:nth-child(11){left:93%;--rd:12s;--rl:8s}
.hero-particles span:nth-child(12){left:50%;--rd:15s;--rl:9s}
@keyframes rise{0%{transform:translateY(0);opacity:0}8%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-105vh);opacity:0}}
.hero-content{position:relative;z-index:2;text-align:center;padding:calc(var(--nav-h) + 40px) 20px 90px;max-width:960px;display:flex;flex-direction:column;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-ui);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,184,106,.45);box-shadow:0 0 22px rgba(212,184,106,.14),inset 0 0 14px rgba(212,184,106,.06);padding:10px 22px;border-radius:999px;background:rgba(21,50,26,.55);margin-bottom:30px}
.hero-badge i{color:var(--icon)}
.hero-logo-wrap{position:relative;width:124px;height:124px;border-radius:50%;display:grid;place-items:center;margin-bottom:26px;background:radial-gradient(circle at 35% 30%,#1E4525,#0F2612);border:1px solid var(--border-l)}
.hero-logo-wrap::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--glow);animation:ringPulse 2.8s ease-in-out infinite}
.hero-logo-wrap::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px dashed rgba(168,216,50,.2);animation:spinSlow 26s linear infinite}
.hero-logo-wrap.logo-fallback i{display:none}
.hero-logo{width:108px;height:108px;border-radius:50%;object-fit:cover;box-shadow:0 0 34px rgba(168,216,50,.3)}
.hero-logo-wrap.logo-fallback{background:radial-gradient(circle at 35% 30%,#2d5e30,#0F2612)}
.hero-logo-wrap.logo-fallback::before{border-color:rgba(168,216,50,.4)}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:.4}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.hero-title{
  font-family:var(--f-title);font-weight:900;letter-spacing:-0.02em;
  font-size:clamp(3rem,10vw,7.5rem);line-height:1.04;
  background:linear-gradient(115deg,#E6F5A3 10%,#7CC93A 48%,#3AAD52 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(124,201,58,.15);margin-bottom:18px;
}
.hero-tag{font-family:var(--f-tag);font-size:clamp(1.05rem,2.6vw,1.55rem);color:var(--h2);min-height:2.4em;letter-spacing:.02em;margin-bottom:10px}
#type-cursor{display:inline-block;width:2px;height:1.05em;background:var(--icon);margin-left:4px;vertical-align:-.15em;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(1rem,2vw,1.25rem);color:var(--muted);margin-bottom:36px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:48px}
.hero-stats{display:flex;gap:clamp(20px,5vw,64px);flex-wrap:wrap;justify-content:center}
.hstat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:90px}
.hstat-num{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--hl);text-shadow:0 0 24px rgba(198,232,48,.3)}
.hstat-lab{font-family:var(--f-ui);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--caption)}
.scroll-ind{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--f-ui);font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--caption)}
.scroll-ind i{color:var(--icon);animation:bounceChev 1.8s ease-in-out infinite;font-size:1rem}
@keyframes bounceChev{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------- 6. BUTTONS / BADGES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-ui);font-weight:700;font-size:.95rem;letter-spacing:.02em;padding:15px 30px;border-radius:999px;border:1.5px solid transparent;transition:transform .28s,box-shadow .28s,background .28s,border-color .28s,color .28s;white-space:nowrap;user-select:none}
.btn-sm{padding:11px 20px;font-size:.86rem}
.btn-primary{background:var(--btn);color:var(--btn-dark);background:var(--btn-grad);box-shadow:0 10px 28px -10px rgba(124,201,58,.55)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(124,201,58,.7);color:var(--btn-dark)}
.btn-ghost{background:transparent;color:var(--btn-light);border-color:var(--btn-br)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--icon);background:rgba(168,216,50,.08);color:var(--h1)}
.btn-gold{background:linear-gradient(135deg,rgba(212,184,106,.18),rgba(212,184,106,.08));color:var(--gold);border-color:rgba(212,184,106,.5)}
.btn-gold:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px -12px rgba(212,184,106,.4);color:#F1E3B3}
.btn:active{transform:translateY(0) scale(.97)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- 7. SECTIONS ---------- */
.sec{position:relative;padding:clamp(72px,9vw,130px) 0;background-color:var(--bg-primary);scroll-margin-top:64px;overflow:hidden;isolation:isolate}
.sec:nth-of-type(even){background-color:var(--bg-alt)}
.sec{background-repeat:repeat;background-attachment:scroll}
@media (min-width:1025px){.sec{background-attachment:fixed}}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,26,12,.25),transparent 18%,transparent 82%,rgba(6,17,10,.35))}
.sec-head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.sec-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-ui);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,184,106,.35);padding:8px 18px;border-radius:999px;background:rgba(21,50,26,.5);margin-bottom:20px}
.sec-badge i{color:var(--icon)}
.sec-title{font-family:var(--f-title);font-weight:900;letter-spacing:-0.02em;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;color:var(--h1);margin-bottom:16px}
.sec-lead{font-size:clamp(1rem,1.4vw,1.13rem);color:var(--muted);max-width:64ch}
.sec-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-family:var(--f-ui);font-size:.82rem;font-weight:600;color:var(--caption)}
.sec-meta i{color:var(--icon)}
.sec-meta strong{color:var(--hl)}
.dot-sep{color:var(--border-l)}
.sec-sub{margin:clamp(48px,6vw,80px) 0 28px}
.sec-h3{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--h3);margin-top:14px}

/* ---------- MOTIF BACKGROUNDS (SVG inline, opacity rendah) ---------- */
.motif-iklim{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23C6E830' stroke-opacity='.08' stroke-width='1.4'><path d='M0 50 Q75 18 150 50 T300 50'/><path d='M0 115 Q75 83 150 115 T300 115'/><path d='M0 180 Q75 148 150 180 T300 180'/><path d='M0 245 Q75 213 150 245 T300 245'/></g></svg>");background-size:300px}
.motif-daur{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%237CC93A' stroke-opacity='.09' stroke-width='1.6'><path d='M60 96 a52 52 0 0 1 90 6'/><path d='M150 94l12 8 -14 5z' fill='%237CC93A' stroke='none'/><path d='M152 112 a52 52 0 0 1 -50 72'/><path d='M106 188l-15 -3 8 -13z' fill='%237CC93A' stroke='none'/><path d='M92 178 a52 52 0 0 1 -38 -82'/><path d='M48 96l4 14 10 -9z' fill='%237CC93A' stroke='none'/></g><g transform='translate(160 160) scale(.65)'><g fill='none' stroke='%237CC93A' stroke-opacity='.07' stroke-width='1.6'><circle cx='100' cy='140' r='58' stroke-dasharray='40 16'/></g></g></svg>");background-size:300px}
.motif-energi{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23A8D832' stroke-opacity='.08' stroke-width='1.5'><circle cx='80' cy='80' r='24'/><g stroke-linecap='round'><path d='M80 38v-14M80 136v-14M38 80H24M136 80h-14M50 50l-10-10M120 120l-10-10M110 50l10-10M40 110l10 10'/></g><circle cx='220' cy='210' r='6'/><path d='M220 210 l0 -52 a10 10 0 0 1 14 4 z'/><path d='M220 210 l45 26 a10 10 0 0 1 -8 13 z'/><path d='M220 210 l-45 26 a10 10 0 0 1 -6 -17 z'/></g></svg>");background-size:300px}
.motif-air{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%237CE88B' stroke-opacity='.08' stroke-width='1.5'><path d='M80 40 C 62 66 56 84 56 96 a24 24 0 0 0 48 0 c0 -12 -6 -30 -24 -56 z'/><circle cx='200' cy='200' r='18'/><circle cx='200' cy='200' r='34'/><circle cx='200' cy='200' r='52'/></g></svg>");background-size:300px}
.motif-hutan{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23A8D832' stroke-opacity='.09' stroke-width='1.5' stroke-linejoin='round'><path d='M60 24 L92 92 H70 L98 150 H22 L50 92 H28 Z'/><path d='M60 150 v26'/><path d='M200 60 c-22 6 -30 30 -24 48 c-14 2 -20 16 -14 28 c8 16 34 18 44 6 c10 12 36 10 44 -6 c6 -12 0 -26 -14 -28 c6 -18 -2 -42 -36 -48 z'/><path d='M200 142 v34'/><path d='M280 200 L304 252 H288 L310 296 H250 L272 252 H256 Z'/><path d='M280 296 v18'/></g></svg>");background-size:320px}
.motif-bio{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23B8D45A' stroke-opacity='.09' stroke-width='1.5'><path d='M70 60 c-26 -22 -46 4 -30 22 c-18 2 -18 26 2 28 c20 2 34 -20 28 -50 z'/><path d='M76 64 c26 -20 44 6 28 24 c18 4 14 28 -6 27 c-20 -1 -30 -23 -22 -51 z'/><path d='M72 66 q4 40 -2 62'/><path d='M210 190 q0 -34 30 -40 q6 30 -30 40 z M240 150 q26 -10 26 -34 q-30 0 -26 34 z'/></g></svg>");background-size:300px}
.motif-polusi{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%239FC2A4' stroke-opacity='.08' stroke-width='1.4'><circle cx='70' cy='80' r='30' stroke-dasharray='8 10'/><circle cx='70' cy='80' r='48' stroke-dasharray='4 14'/><circle cx='210' cy='200' r='40' stroke-dasharray='10 12'/></g><g fill='%239FC2A4' fill-opacity='.1'><circle cx='120' cy='140' r='3'/><circle cx='160' cy='60' r='2.4'/><circle cx='40' cy='200' r='2.8'/><circle cx='240' cy='100' r='3.4'/><circle cx='270' cy='260' r='2.4'/><circle cx='180' cy='270' r='3'/></g></svg>");background-size:300px}
.motif-jejak{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%23A8D832' stroke-opacity='.09' stroke-width='1.6'><ellipse cx='70' cy='110' rx='22' ry='34'/><circle cx='44' cy='66' r='7'/><circle cx='62' cy='56' r='7'/><circle cx='80' cy='52' r='7'/><circle cx='96' cy='60' r='6'/><g transform='translate(120 120) rotate(18)'><ellipse cx='70' cy='110' rx='22' ry='34'/><circle cx='44' cy='66' r='7'/><circle cx='62' cy='56' r='7'/><circle cx='80' cy='52' r='7'/><circle cx='96' cy='60' r='6'/></g></g></svg>");background-size:280px}
.motif-tani{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23C6E830' stroke-opacity='.09' stroke-width='1.5' stroke-linecap='round'><path d='M80 260 V70'/><path d='M80 80 q-26 -6 -30 -30 q26 4 30 30 z M80 80 q26 -6 30 -30 q-26 4 -30 30 z'/><path d='M80 120 q-26 -6 -30 -30 q26 4 30 30 z M80 120 q26 -6 30 -30 q-26 4 -30 30 z'/><path d='M80 160 q-26 -6 -30 -30 q26 4 30 30 z M80 160 q26 -6 30 -30 q-26 4 -30 30 z'/><path d='M200 250 v-40 q0 -26 24 -34 q4 26 -24 34'/></g></svg>");background-size:300px}
.motif-laut{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%237CE88B' stroke-opacity='.08' stroke-width='1.5' stroke-linecap='round'><path d='M0 60 Q40 40 80 60 T160 60 T240 60 T320 60'/><path d='M0 110 Q40 90 80 110 T160 110 T240 110 T320 110'/><path d='M0 230 Q40 210 80 230 T160 230 T240 230 T320 230'/><path d='M120 160 q34 -20 62 0 q-28 20 -62 0 z'/><path d='M182 160 l18 -12 v24 z'/><circle cx='132' cy='156' r='2.4' fill='%237CE88B' stroke='none'/></g></svg>");background-size:320px}
.motif-darat{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'><g fill='none' stroke='%23A8D832' stroke-opacity='.09' stroke-width='1.5' stroke-linejoin='round'><path d='M10 260 L100 120 L150 200 L210 90 L330 260 Z'/><path d='M60 260 L130 160 L190 250'/><path d='M180 260 L250 150 L320 260'/><path d='M92 138 l8 -18 8 18 z' fill='%23A8D832' stroke='none' fill-opacity='.12'/><path d='M202 108 l8 -18 8 18 z' fill='%23A8D832' stroke='none' fill-opacity='.12'/></g></svg>");background-size:340px}
.motif-bencana{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23D4B86A' stroke-opacity='.09' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'><path d='M120 20 L70 130 h34 L84 220 L160 96 h-38 L150 20 Z'/><path d='M230 210 a30 30 0 1 1 30 -30 a22 22 0 1 1 -22 -22 a14 14 0 1 1 14 14'/></g></svg>");background-size:300px}
.motif-kota{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23A8D832' stroke-opacity='.09' stroke-width='1.5'><rect x='30' y='120' width='44' height='140'/><rect x='90' y='80' width='52' height='180'/><rect x='158' y='140' width='42' height='120'/><path d='M30 120 h44 M90 80 h52'/><path d='M96 80 q20 -26 40 0'/><path d='M116 62 v-10'/><path d='M104 100 h10 M122 100 h10 M104 120 h10 M122 120 h10 M104 140 h10 M122 140 h10'/><path d='M234 260 v-56 q0 -22 20 -28 q4 22 -20 28'/></g></svg>");background-size:320px}
.motif-teknologi{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23C6E830' stroke-opacity='.09' stroke-width='1.4'><path d='M80 50 C 40 90 44 150 80 190 C 116 150 120 90 80 50 Z'/><path d='M80 70 V170 M80 100 l-22 22 M80 100 l22 22 M80 140 l-26 24 M80 140 l26 24'/><circle cx='58' cy='122' r='4'/><circle cx='102' cy='122' r='4'/><circle cx='54' cy='164' r='4'/><circle cx='106' cy='164' r='4'/><path d='M190 220 h60 v-40 h30 M220 220 v30 M250 180 v-24'/><circle cx='190' cy='220' r='4'/><circle cx='280' cy='180' r='4'/><circle cx='220' cy='250' r='4'/><circle cx='250' cy='156' r='4'/></g></svg>");background-size:300px}
.motif-hukum{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23D4B86A' stroke-opacity='.09' stroke-width='1.5' stroke-linecap='round'><path d='M150 40 v160 M110 240 h80 M150 60 h-70 M150 60 h70'/><path d='M80 60 l-24 56 a26 26 0 0 0 48 0 z M220 60 l-24 56 a26 26 0 0 0 48 0 z'/><path d='M80 84 q-12 8 -12 20 q14 -4 12 -20 z'/><path d='M220 84 q12 8 12 20 q-14 -4 -12 -20 z'/></g></svg>");background-size:300px}
.motif-ekonomi{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23C6E830' stroke-opacity='.09' stroke-width='1.5'><circle cx='90' cy='100' r='38'/><circle cx='90' cy='100' r='26'/><path d='M90 138 v-10 M82 82 l16 18 16 -18' /><path d='M210 210 a34 34 0 1 1 0 .1'/><path d='M210 176 v-16 q0 -18 16 -24 q0 22 -16 24 z'/></g></svg>");background-size:300px}
.motif-quiz{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23A8D832' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='80' cy='90' r='34'/><path d='M62 78 l12 12 24 -26'/><circle cx='210' cy='200' r='30'/><path d='M196 200 l10 10 20 -22'/></g></svg>");background-size:300px}
.motif-artikel{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23B8D45A' stroke-opacity='.09' stroke-width='1.5' stroke-linejoin='round'><path d='M60 90 q40 -18 80 0 v110 q-40 -18 -80 0 z M140 90 q40 -18 80 0 v110 q-40 -18 -80 0 z'/><path d='M140 96 v98'/><path d='M218 40 l14 14 -52 52 -18 6 6 -18 z'/></g></svg>");background-size:300px}
.motif-stat{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23A8D832' stroke-opacity='.08' stroke-width='1.5'><path d='M40 250 H270 M40 250 V40'/><rect x='70' y='170' width='26' height='80'/><rect x='116' y='130' width='26' height='120'/><rect x='162' y='90' width='26' height='160'/><rect x='208' y='140' width='26' height='110'/><path d='M60 110 l50 30 46 -60 50 20' stroke-dasharray='6 8'/></g></svg>");background-size:300px}
.motif-faq{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23A8D832' stroke-opacity='.09' stroke-width='1.5'><rect x='40' y='56' width='110' height='70' rx='18'/><path d='M66 126 l-10 22 28 -14'/><rect x='150' y='160' width='110' height='70' rx='18'/><path d='M234 230 l10 22 -28 -14'/><path d='M84 90 q0 -16 14 -16 q14 0 14 14 q-14 2 -14 16'/><circle cx='98' cy='112' r='2.4' fill='%23A8D832' stroke='none'/><path d='M176 192 q0 -14 12 -14 q12 0 12 12 q-12 2 -12 14'/><circle cx='188' cy='212' r='2.4' fill='%23A8D832' stroke='none'/></g></svg>");background-size:300px}

/* ---------- 8. CARDS (ANTI-COLLISION + 3D TILT) ---------- */
.modul-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media (min-width:1024px){.modul-grid,.art-grid,.capai-grid{perspective:1200px}}
.mcard{
  position:relative;isolation:isolate;overflow:hidden;contain:content;
  background:linear-gradient(145deg,#15321A 0%,#1A3B20 100%);
  border:1px solid var(--border);border-radius:var(--rad);
  padding:28px;box-shadow:var(--card-shadow);
  display:flex;flex-direction:column;gap:14px;min-width:0;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s,background .45s;
  text-align:left;width:100%;color:var(--body);
}
.mcard::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,transparent 20%,rgba(198,232,48,.14) 48%,transparent 70%);opacity:0;transition:opacity .6s;pointer-events:none}
.mcard::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;border:1px solid rgba(212,184,106,0);transition:border-color .5s,box-shadow .5s;pointer-events:none}
.mcard:hover{transform:translateY(-6px);background:linear-gradient(145deg,#1E4525 0%,#22492a 100%);border-color:var(--border-l);box-shadow:0 6px 14px rgba(0,0,0,.45),0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px rgba(168,216,50,.12),inset 0 1px 0 rgba(168,216,50,.14)}
.mcard:hover::before{opacity:.4}
.mcard:hover::after{border-color:rgba(212,184,106,.25);box-shadow:0 0 24px rgba(212,184,106,.1)}
.mcard>*{position:relative;z-index:1;min-width:0}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mc-ic{width:56px;height:56px;flex:0 0 56px;border-radius:50%;display:grid;place-items:center;background:var(--bg-alt);border:1px solid var(--border-l);color:var(--icon);font-size:1.25rem;box-shadow:0 0 18px rgba(168,216,50,.18)}
.mc-badge{font-family:var(--f-ui);font-weight:600;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(212,184,106,.08);border:1px solid rgba(212,184,106,.3);padding:5px 12px;border-radius:999px;max-width:62%;overflow-wrap:anywhere;text-align:right}
.mc-khusus{color:#0A1A0C;background:linear-gradient(135deg,#C6E830,#7CC93A);border-color:transparent}
.mc-title{font-family:var(--f-serif);font-weight:600;font-size:1.28rem;line-height:1.3;color:var(--h2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mc-desc{font-size:.9rem;color:var(--body);opacity:.85;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;flex:1}
.mc-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.72rem;color:var(--caption);border-top:1px solid rgba(45,94,48,.6);padding-top:14px}
.mc-meta i{color:var(--icon);margin-right:5px}
.mc-done{color:var(--success)}
.mc-baca{margin-left:auto;font-family:var(--f-ui);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--icon);display:inline-flex;align-items:center;gap:7px}
.glare{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(198,232,48,.16),transparent 62%)}
.mcard:hover .glare{opacity:1}

/* ---------- 9. MODAL ---------- */
#modal-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(6,17,10,.75);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .35s}
#modal-backdrop.show{opacity:1;pointer-events:auto}
#modal{
  position:fixed;top:50%;left:50%;z-index:10010;
  width:min(920px,94vw);max-height:88vh;
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;pointer-events:none;
  background:linear-gradient(160deg,#132e18 0%,#0F2612 100%);
  border:1px solid var(--border-l);border-radius:26px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 60px rgba(168,216,50,.08);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s;
}
#modal.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
#modal[hidden]{display:none}
#modal-progress{position:absolute;top:0;left:0;right:0;height:4px;background:rgba(21,50,26,.9);z-index:5}
#modal-progress-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#7CC93A,#3AAD52);transition:width .12s linear}
#modal-close{position:absolute;top:14px;right:14px;z-index:6;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(6,17,10,.7);border:1px solid var(--border);color:var(--h3);font-size:1.05rem;transition:.3s}
#modal-close:hover{border-color:var(--error);color:#fff;transform:rotate(90deg)}
#modal-scroll{overflow-y:auto;overscroll-behavior:contain;max-height:88vh;scrollbar-width:thin}
#modal-content{padding:clamp(26px,5vw,56px)}
#modal-nav{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;padding:0 clamp(26px,5vw,56px) clamp(26px,4vw,44px);border-top:1px solid rgba(45,94,48,.5);margin-top:8px;padding-top:24px}

/* ---------- DOC (konten modul & artikel) ---------- */
.doc{max-width:70ch;margin-inline:auto}
.doc-badge-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px;padding-right:52px}
.doc-badge{font-family:var(--f-ui);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,184,106,.4);padding:6px 14px;border-radius:999px;background:rgba(212,184,106,.07)}
.doc-badge.mono{font-family:var(--f-mono);letter-spacing:.04em;color:var(--caption);border-color:var(--border)}
.doc-hero{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.doc-hero-ic{width:92px;height:92px;flex:0 0 92px;border-radius:28px;display:grid;place-items:center;font-size:2.2rem;color:var(--icon);background:radial-gradient(circle at 32% 28%,#1E4525,#0F2612);border:1px solid var(--border-l);box-shadow:0 0 34px rgba(168,216,50,.16)}
.doc-hero-meta .doc-num{font-family:var(--f-mono);font-size:.74rem;color:var(--caption);letter-spacing:.14em;text-transform:uppercase}
.doc h2{font-family:var(--f-title);font-weight:900;font-size:clamp(1.6rem,4.4vw,2.5rem);line-height:1.18;color:var(--h1);margin:0 0 6px;letter-spacing:-0.01em;overflow-wrap:anywhere}
.doc h3{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.25rem,2.6vw,1.6rem);color:var(--h3);margin:34px 0 12px;padding-left:18px;border-left:3px solid var(--icon);line-height:1.3;overflow-wrap:anywhere}
.doc p{margin-bottom:16px;color:var(--body);font-size:1rem;overflow-wrap:anywhere}
.doc .doc-lead{font-family:var(--f-serif);font-size:1.18rem;color:var(--h2)}
.doc ul,.doc ol{margin:0 0 18px;padding-left:8px;list-style:none}
.doc ul li{position:relative;padding:7px 0 7px 30px;overflow-wrap:anywhere}
.doc ul li::before{content:"";position:absolute;left:4px;top:15px;width:9px;height:9px;background:var(--icon);clip-path:polygon(50% 0,100% 55%,65% 55%,65% 100%,35% 100%,35% 55%,0 55%)}
.doc ol{counter-reset:oli}
.doc ol li{position:relative;padding:7px 0 7px 38px;counter-increment:oli;overflow-wrap:anywhere}
.doc ol li::before{content:counter(oli,decimal-leading-zero);position:absolute;left:0;top:8px;font-family:var(--f-mono);font-size:.78rem;font-weight:700;color:var(--icon);border:1px solid var(--border-l);border-radius:8px;padding:2px 6px}
.doc strong{color:var(--h1)}
.doc-table-wrap{overflow-x:auto;margin:6px 0 22px;border:1px solid var(--border);border-radius:16px;background:rgba(10,26,12,.5)}
.doc table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.doc th{font-family:var(--f-ui);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--h1);text-align:left;padding:14px 16px;background:rgba(168,216,50,.07);border-bottom:1px solid var(--border-l)}
.doc td{padding:12px 16px;border-bottom:1px solid rgba(45,94,48,.5);vertical-align:top;color:var(--body)}
.doc tr:last-child td{border-bottom:none}
.doc td code{font-family:var(--f-mono);color:var(--hl);font-size:.85em}
.factbox{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(135deg,rgba(198,232,48,.1),rgba(58,173,82,.06));border:1px solid rgba(168,216,50,.35);border-radius:18px;padding:20px 22px;margin:26px 0}
.factbox i{font-size:1.4rem;color:var(--hl);flex:0 0 auto;margin-top:2px}
.factbox h4{font-family:var(--f-ui);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hl);margin-bottom:6px}
.factbox p{margin:0;font-size:.94rem}
.doc blockquote{position:relative;font-family:var(--f-serif);font-style:italic;font-size:1.15rem;color:var(--h2);border:none;background:rgba(21,50,26,.6);border-left:4px solid var(--gold);border-radius:0 16px 16px 0;padding:20px 24px;margin:28px 0}
.doc blockquote footer{font-family:var(--f-ui);font-style:normal;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:10px}

/* ---------- 10. QUIZ ---------- */
.quiz-shell{position:relative;background:linear-gradient(160deg,#132e18,#0F2612);border:1px solid var(--border-l);border-radius:28px;box-shadow:var(--card-shadow);padding:clamp(26px,4.5vw,52px);max-width:860px;margin-inline:auto;overflow:hidden}
.quiz-shell::before{content:"";position:absolute;top:-120px;right:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(168,216,50,.14),transparent 65%);pointer-events:none}
.quiz-screen{display:flex;flex-direction:column;gap:18px;animation:quizIn .45s ease}
@keyframes quizIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.quiz-start-ic{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:var(--gold);background:radial-gradient(circle at 32% 28%,#243f16,#0F2612);border:1px solid rgba(212,184,106,.45);box-shadow:0 0 34px rgba(212,184,106,.2)}
.quiz-h3{font-family:var(--f-title);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);color:var(--h1)}
.quiz-p{color:var(--muted);max-width:56ch}
.quiz-label{font-family:var(--f-ui);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--caption)}
.quiz-input{width:100%;max-width:420px;background:rgba(6,17,10,.65);border:1.5px solid var(--border);border-radius:14px;color:var(--h1);font-family:var(--f-ui);font-size:1rem;padding:14px 18px;transition:border-color .3s,box-shadow .3s}
.quiz-input:focus{outline:none;border-color:var(--icon);box-shadow:0 0 0 4px rgba(168,216,50,.14)}
.quiz-input::placeholder{color:var(--caption)}
.quiz-high{font-family:var(--f-mono);font-size:.86rem;color:var(--hl);background:rgba(198,232,48,.08);border:1px solid rgba(198,232,48,.3);padding:12px 18px;border-radius:14px}
.quiz-history{font-size:.82rem;color:var(--caption);border-left:3px solid var(--border-l);padding-left:14px;display:flex;flex-direction:column;gap:4px}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.quiz-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.quiz-cat{font-family:var(--f-ui);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,184,106,.35);padding:5px 12px;border-radius:999px;background:rgba(212,184,106,.07)}
.quiz-num{font-family:var(--f-mono);font-size:.8rem;color:var(--caption)}
.quiz-timer{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.95rem;color:var(--h1);background:rgba(6,17,10,.6);border:1px solid var(--border-l);border-radius:12px;padding:8px 14px;min-width:110px;justify-content:center}
.quiz-timer i{color:var(--icon)}
.quiz-timer small{font-size:.62rem;color:var(--caption)}
.quiz-timer.low{border-color:var(--error);color:#FFB4B0;animation:timerBlink .7s step-end infinite}
.quiz-timer.low i{color:var(--error)}
@keyframes timerBlink{50%{background:rgba(229,57,53,.14)}}
.quiz-progress{height:8px;border-radius:99px;background:rgba(21,50,26,.9);overflow:hidden;border:1px solid rgba(45,94,48,.7)}
#quiz-progress-fill{display:block;height:100%;width:2%;background:var(--btn-grad);border-radius:99px;transition:width .4s ease}
.quiz-q{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--h2);line-height:1.45;overflow-wrap:anywhere}
.quiz-opts{display:grid;gap:12px}
.qopt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:rgba(21,50,26,.55);border:1.5px solid var(--border);border-radius:16px;padding:15px 18px;font-family:var(--f-body);font-size:.96rem;color:var(--body);transition:border-color .25s,background .25s,transform .2s;min-height:52px}
.qopt:hover{border-color:var(--icon);background:var(--bg-card-hover);transform:translateX(4px)}
.qopt .qkey{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.85rem;background:var(--bg-alt);border:1px solid var(--border-l);color:var(--icon)}
.qopt .qtxt{flex:1;min-width:0;overflow-wrap:anywhere}
.qopt.picked{border-color:var(--icon);background:rgba(168,216,50,.1)}
.qopt.picked .qkey{background:var(--btn-grad);color:var(--btn-dark);border-color:transparent}
.qopt.correct{border-color:var(--success);background:rgba(76,175,80,.14)}
.qopt.correct .qkey{background:var(--success);color:#fff;border-color:transparent}
.qopt.wrong{border-color:var(--error);background:rgba(229,57,53,.12)}
.qopt.wrong .qkey{background:var(--error);color:#fff;border-color:transparent}
.quiz-feedback{min-height:1.4em;font-family:var(--f-ui);font-size:.86rem;font-weight:600;color:var(--caption)}
.quiz-feedback.ok{color:var(--success)}
.quiz-feedback.no{color:var(--error)}
.quiz-navbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}
.quiz-score-ring{--p:0;position:relative;width:170px;height:170px;border-radius:50%;display:grid;place-items:center;align-self:center;background:conic-gradient(#7CC93A calc(var(--p)*1%),rgba(45,94,48,.5) 0);transition:--p 1s}
.quiz-score-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:#0F2612;display:grid;place-items:center}
.quiz-score-ring span{position:relative;font-family:var(--f-mono);font-weight:700;font-size:3rem;color:var(--hl)}
.quiz-score-ring small{position:absolute;bottom:38px;font-family:var(--f-mono);font-size:.8rem;color:var(--caption)}
.quiz-grade{font-family:var(--f-title);font-weight:900;font-size:clamp(1.6rem,3.6vw,2.4rem);text-align:center;background:linear-gradient(115deg,#E6F5A3,#D4B86A);-webkit-background-clip:text;background-clip:text;color:transparent}
.quiz-benar{text-align:center;font-family:var(--f-mono);color:var(--hl)}
.quiz-result-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.quiz-review-list{display:flex;flex-direction:column;gap:14px;max-height:56vh;overflow-y:auto;padding-right:8px;scrollbar-width:thin}
.qrev{border:1px solid var(--border);border-radius:16px;padding:16px 18px;background:rgba(21,50,26,.45)}
.qrev.ok{border-left:4px solid var(--success)}
.qrev.no{border-left:4px solid var(--error)}
.qrev .qrev-q{font-weight:600;color:var(--h2);margin-bottom:8px;overflow-wrap:anywhere}
.qrev .qrev-a{font-size:.88rem;margin-bottom:4px;overflow-wrap:anywhere}
.qrev .qrev-exp{font-size:.82rem;color:var(--caption);font-style:italic}

/* ---------- 11. ARTIKEL ---------- */
.art-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.acard{position:relative;isolation:isolate;overflow:hidden;contain:content;background:linear-gradient(145deg,#15321A,#1A3B20);border:1px solid var(--border);border-radius:var(--rad);box-shadow:var(--card-shadow);display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s;text-align:left;width:100%;color:var(--body)}
.acard:hover{transform:translateY(-6px);border-color:var(--border-l);box-shadow:0 6px 14px rgba(0,0,0,.45),0 30px 60px -24px rgba(0,0,0,.7)}
.acard-visual{position:relative;height:170px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 120%,#1E4525 0%,#0F2612 70%);border-bottom:1px solid var(--border);overflow:hidden}
.acard-visual::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23A8D832' stroke-opacity='.08' stroke-width='1'><path d='M100 24 V176 M100 52 60 96 M100 52 140 96 M100 104 56 148 M100 104 144 148'/></g></svg>");background-size:200px}
.acard-visual i{position:relative;font-size:3rem;color:var(--icon);filter:drop-shadow(0 8px 24px rgba(168,216,50,.35));transition:transform .5s}
.acard:hover .acard-visual i{transform:scale(1.12) rotate(-4deg)}
.acard-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.acard-tagrow{display:flex;gap:8px;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:.68rem;color:var(--caption)}
.acard-tag{font-family:var(--f-ui);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,184,106,.35);border-radius:999px;padding:4px 11px}
.acard-title{font-family:var(--f-serif);font-weight:600;font-size:1.35rem;line-height:1.3;color:var(--h2);overflow-wrap:anywhere}
.acard-desc{font-size:.9rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;flex:1}
.acard-cta{font-family:var(--f-ui);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--icon);display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.acard-cta i{transition:transform .3s}
.acard:hover .acard-cta i{transform:translateX(6px)}

/* ---------- 12. STATISTIK / CAPAI / TIMELINE ---------- */
.stats-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stat-card{position:relative;overflow:hidden;background:linear-gradient(150deg,#15321A,#101f13);border:1px solid var(--border);border-radius:var(--rad);padding:26px 24px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--btn-grad)}
.stat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg-alt);border:1px solid var(--border-l);color:var(--icon);font-size:1rem;margin-bottom:6px}
.stat-num{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.7rem,3vw,2.2rem);color:var(--hl);line-height:1.1;overflow-wrap:anywhere}
.stat-num small{font-size:.55em;color:var(--h3);font-weight:500}
.stat-lab{font-family:var(--f-ui);font-weight:600;font-size:.8rem;color:var(--body);overflow-wrap:anywhere}
.stat-sub{font-size:.76rem;color:var(--caption);overflow-wrap:anywhere}
.capai-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.capai{position:relative;overflow:hidden;background:linear-gradient(145deg,#15321A,#1A3B20);border:1px solid var(--border);border-radius:var(--rad);padding:24px;box-shadow:var(--card-shadow);display:flex;gap:16px;align-items:flex-start;transition:transform .4s,border-color .4s;min-width:0}
.capai:hover{transform:translateY(-5px);border-color:var(--border-l)}
.capai-ic{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#243f16,#0F2612);border:1px solid rgba(212,184,106,.4);color:var(--gold);font-size:1.1rem}
.capai-year{font-family:var(--f-mono);font-weight:700;font-size:.78rem;color:var(--hl);letter-spacing:.1em}
.capai h4{font-family:var(--f-serif);font-weight:600;font-size:1.1rem;color:var(--h2);margin:2px 0 6px;overflow-wrap:anywhere}
.capai p{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.timeline{position:relative;max-width:920px;margin-inline:auto;padding:14px 0 30px}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:20px;width:2px;background:rgba(63,122,67,.4)}
.timeline-fill{position:absolute;top:0;left:20px;width:2px;height:0;background:linear-gradient(180deg,#7CC93A,#A8D832,#C6E830);box-shadow:0 0 12px rgba(168,216,50,.55);border-radius:2px;pointer-events:none;z-index:0}
.tl-item{position:relative;padding:0 0 34px 62px;min-width:0;opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);animation:tlFallback 0s 4s forwards}
.tl-item.tl-visible{opacity:1;transform:none;animation:none}
@keyframes tlFallback{to{opacity:1;transform:none}}
.tl-item:last-child{padding-bottom:8px}
.tl-dot{position:absolute;left:11px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--bg-card);border:2px solid var(--icon);box-shadow:0 0 14px rgba(168,216,50,.3);display:grid;place-items:center;z-index:1;transition:background .4s,box-shadow .4s}
.tl-dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--icon)}
.tl-item.tl-passed .tl-dot{background:#1E4525;box-shadow:0 0 18px rgba(168,216,50,.55)}
.tl-item.tl-visible .tl-dot::after{animation:tlDotPulse 2.6s ease-in-out infinite}
@keyframes tlDotPulse{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.3)}}
.tl-card{position:relative;background:linear-gradient(145deg,#15321A,#1A3B20);border:1px solid var(--border);border-radius:16px;padding:18px 22px;box-shadow:var(--card-shadow);transition:transform .35s,border-color .35s,box-shadow .35s,background .35s;min-width:0}
.tl-card:hover{transform:translateX(6px);border-color:var(--border-l);box-shadow:0 6px 14px rgba(0,0,0,.45),0 26px 50px -22px rgba(0,0,0,.7),0 0 0 1px rgba(168,216,50,.1)}
.tl-meta-row{display:flex;align-items:baseline;gap:12px;justify-content:space-between;min-width:0}
.tl-year{font-family:var(--f-mono);font-weight:700;font-size:.98rem;color:var(--hl);letter-spacing:.1em}
.tl-idx{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--caption);flex:0 0 auto}
.tl-card h4{font-family:var(--f-serif);font-weight:600;font-size:1.12rem;color:var(--h2);margin:6px 0;overflow-wrap:anywhere}
.tl-card p{font-size:.86rem;color:var(--muted);overflow-wrap:anywhere;line-height:1.65}
.tl-item.tl-future .tl-dot{border-color:var(--gold);box-shadow:0 0 14px rgba(212,184,106,.35)}
.tl-item.tl-future .tl-dot::after{background:var(--gold)}
.tl-item.tl-future .tl-card{border-style:dashed;border-color:rgba(212,184,106,.42)}
.tl-item.tl-future .tl-year{color:var(--gold)}
.tl-item.tl-now .tl-dot{border-color:var(--hl);animation:tlNowRing 2.2s ease-out infinite}
@keyframes tlNowRing{0%{box-shadow:0 0 0 0 rgba(198,232,48,.55)}100%{box-shadow:0 0 0 16px rgba(198,232,48,0)}}
.tl-item.tl-now .tl-card{border-color:var(--border-l);background:linear-gradient(145deg,#1d4123,#1A3B20)}
.tl-now-tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--f-ui);font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--btn-dark);background:var(--btn-grad);padding:5px 12px;border-radius:999px}
.tl-future-tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--f-ui);font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,184,106,.45);padding:4px 12px;border-radius:999px;background:rgba(212,184,106,.08)}
@media (min-width:769px){
  .timeline::before,.timeline-fill{left:50%;margin-left:-1px}
  .tl-item{width:50%;padding:0 46px 38px 0;text-align:right}
  .tl-item:nth-child(even){margin-left:50%;padding:0 0 38px 46px;text-align:left}
  .tl-item .tl-dot{left:auto;right:-10px}
  .tl-item:nth-child(even) .tl-dot{left:-10px;right:auto}
  .tl-item .tl-card:hover{transform:translateX(-6px)}
  .tl-item:nth-child(even) .tl-card:hover{transform:translateX(6px)}
}

/* ---------- 13. FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq-item{border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,#15321A,#1A3B20);overflow:hidden;transition:border-color .35s,box-shadow .35s}
.faq-item.open{border-color:var(--border-l);box-shadow:0 18px 44px -20px rgba(0,0,0,.7),0 0 0 1px rgba(168,216,50,.1)}
.faq-q{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:20px 22px;font-family:var(--f-ui);font-weight:600;font-size:1rem;color:var(--h2);transition:color .3s;min-height:60px}
.faq-q:hover{color:var(--h1)}
.faq-q .faq-ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:var(--bg-alt);border:1px solid var(--border-l);color:var(--icon);font-size:.85rem}
.faq-q .faq-t{flex:1;min-width:0;overflow-wrap:anywhere}
.faq-q .faq-chev{color:var(--icon);transition:transform .4s;font-size:.9rem}
.faq-item.open .faq-chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.faq-a-in{padding:0 22px 22px 76px;color:var(--muted);font-size:.93rem;line-height:1.75;overflow-wrap:anywhere}

/* ---------- 14. FOOTER ---------- */
.footer{background:var(--bg-deep);border-top:1px solid var(--border);padding:clamp(50px,7vw,90px) 0 0;color:var(--body)}
.foot-grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-bottom:44px}
.foot-brand img{width:52px;height:52px;border-radius:50%;border:1px solid var(--border-l);margin-bottom:14px}
.foot-name{font-family:var(--f-title);font-weight:900;letter-spacing:.16em;color:var(--h1);margin-bottom:8px}
.foot-tag{font-size:.86rem;color:var(--muted);max-width:34ch}
.foot-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.foot-col h4{display:flex;align-items:center;gap:10px;font-family:var(--f-ui);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot-col h4 i{color:var(--icon)}
.foot-col a{font-size:.9rem;color:var(--muted);padding:6px 0;transition:color .25s,transform .25s;display:inline-flex;align-items:center;gap:8px}
.foot-col a::before{content:"";width:0;height:1.5px;background:var(--icon);transition:width .3s}
.foot-col a:hover{color:var(--icon);transform:translateX(4px)}
.foot-col a:hover::before{width:14px}
.foot-bottom{border-top:1px solid rgba(45,94,48,.6);padding:22px 0 26px;text-align:center}
.foot-bottom p{font-family:var(--f-ui);font-size:.85rem;color:var(--muted)}
.creator-link{font-family:var(--f-mono);font-weight:700;color:var(--gold);letter-spacing:.08em;border-bottom:1px dashed rgba(212,184,106,.5);transition:color .3s,border-color .3s}
.creator-link:hover{color:#F1E3B3;border-color:var(--gold)}

#toTop{position:fixed;right:22px;bottom:22px;z-index:9990;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--btn-grad);color:var(--btn-dark);font-size:1rem;box-shadow:0 14px 34px -10px rgba(124,201,58,.6);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .35s,transform .35s}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{transform:translateY(-3px)}

/* ---------- 15. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
[data-reveal].revealed{opacity:1;transform:none}
.mcard[data-reveal]{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s,background .45s}

/* ---------- 16. RESPONSIVE ---------- */
@media (min-width:481px){body{font-size:16px}.wrap{padding-inline:clamp(24px,4vw,48px)}}
@media (min-width:769px){body{font-size:17px}.wrap{padding-inline:clamp(32px,4vw,48px)}}
@media (min-width:1025px){body{font-size:18px}.wrap{padding-inline:clamp(48px,4vw,64px)}}
@media (min-width:1441px){.wrap{padding-inline:64px}}
@media (max-width:768px){
  .doc-hero{flex-direction:column;align-items:flex-start;gap:14px}
  .quiz-navbtns{justify-content:stretch}
  .quiz-navbtns .btn{flex:1 1 calc(50% - 6px);white-space:normal;text-align:center}
  .hero-stats{gap:26px}
  .scroll-ind span{display:none}
  #modal{width:96vw;max-height:92vh}
  #modal-nav{flex-direction:column}
  #modal-nav .btn{width:100%;justify-content:center}
}
@media (max-width:480px){
  body{font-size:16px}
  .nav-word em{display:none}
  .hero-cta .btn{width:100%;justify-content:center}
  .mcard{padding:22px}
  .quiz-shell{padding:24px 18px}
  .faq-a-in{padding-left:22px}
}

/* ---------- 17. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .float-leaf,.hero-particles span,.aura{animation:none!important}
  .br-p{stroke-dashoffset:0;animation:none}
  [data-reveal],.tl-item{opacity:1!important;transform:none!important}
}