:root{
  --navy:#0d1b2e;
  --navy-2:#16304f;
  --orange:#ee7d31;
  --orange-dark:#d4631a;
  --paper:#faf6ee;
  --paper-2:#f1ead8;
  --ink:#1c2b3a;
  --slate:#4f6376;
  --success:#2f9e6e;
  --danger:#e2574c;
  --line:#e3d9c2;
  --card:#ffffff;
  --radius:14px;
  --shadow: 0 10px 30px -12px rgba(0,0,0,0.16);
  --heading:#0d1b2e;
  --heading-soft:#16304f;
  --nav-bg: rgba(250,246,238,0.86);
  --subnav-bg: rgba(250,246,238,0.92);
  --dot-color:#d8cfb6;
  --accent-hover:#b34f0d;
  --danger-text:#b23a30;
  --blue:#2f7edb;
  --blue-soft:#eaf2fd;
  --teal:#0f9b8e;
  --teal-soft:#e6f7f5;
  --purple:#8b5cf6;
  --purple-soft:#f3edfe;
  --pink:#e2447e;
  --pink-soft:#fdeaf1;
  --amber:#e8a33d;
  --amber-soft:#fdf3e2;
  --green:#3fa15c;
  --green-soft:#eaf6ec;
  --warning:#c07a1e;
  --warning-soft:#fdf0dc;
  --scheme: light;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --navy:#13233a;
  --navy-2:#1c3556;
  --orange:#f38a43;
  --orange-dark:#ffab6b;
  --paper:#0a0f16;
  --paper-2:#111a25;
  --ink:#dde6f0;
  --slate:#8fa0b3;
  --success:#3dbb85;
  --danger:#ef6f61;
  --line:#243244;
  --card:#121c29;
  --shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  --heading:#f4f8fc;
  --heading-soft:#cdd9e6;
  --nav-bg: rgba(10,15,22,0.86);
  --subnav-bg: rgba(10,15,22,0.92);
  --dot-color:#22303f;
  --danger-text:#ff9a8c;
  --blue:#5b9aec;
  --blue-soft:#152840;
  --teal:#3ec6b6;
  --teal-soft:#0f2b28;
  --purple:#a988fa;
  --purple-soft:#251b3d;
  --pink:#f177a4;
  --pink-soft:#3a1826;
  --amber:#f0b95e;
  --amber-soft:#332413;
  --green:#68c583;
  --green-soft:#122a1a;
  --warning:#f0b95e;
  --warning-soft:#332413;
  --scheme: dark;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--paper);}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease, color .3s ease;
}
/* Sticky footer: whichever view is showing stretches to fill the
   leftover space so the footer always sits at the bottom of the
   viewport on short pages (e.g. "coming soon" subjects), instead of
   leaving a gap of bare background under it. */
#view-home, #view-babs, #view-signin, #view-lesson{
  flex:1 0 auto;
}
.site-footer{
  flex-shrink:0;
}
body, body *{
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .25s;
  transition-timing-function: ease;
}
/* The theme toggle's circular wipe (app.js) hides the live DOM behind
   static view-transition snapshots for its whole duration — so the
   rule above fires invisibly on every element in the tree at once
   during that window, purely as wasted main-thread style/paint work
   competing with the clip-path animation for frames. Suppressed while
   the wipe is running; nothing below is visible then anyway. */
.theme-wipe-active, .theme-wipe-active *{
  transition: none !important;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  color:var(--heading);
  margin:0 0 .4em 0;
  letter-spacing:-0.01em;
}
/* Data/numeral texture — chapter numbers, scores, prices, percentages,
   dates. Deliberately distinct from the Space Grotesk headings so numbers
   read as "data" the way they do in an edited textbook, not as more UI
   chrome. This is IBM Plex Mono actually being used (it was loaded via
   the Google Fonts link but never applied anywhere). */
.mono{font-family:'IBM Plex Mono','Space Grotesk',monospace;}
a{color:inherit;}
img{max-width:100%;display:block;}
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;border-radius:4px;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* Reduced motion: kill decorative movement (hover lifts, the WA pulse loop)
   but keep every hover's color/background feedback intact, and make state
   changes that actually carry information (accordion open, quiz progress)
   apply instantly instead of animating — motion off, feedback still on. */
@media (prefers-reduced-motion: reduce){
  *:hover{transform:none !important;}
  .wa-float-pulse{animation:none;}
  .acc-a, .quiz-progress-fill{transition-duration:.01ms !important;}
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none !important;}
}

/* Theme toggle circular reveal — the incoming theme's snapshot is animated
   (via JS, clip-path circle growing from a fixed top-right origin) while
   the outgoing one stays put underneath, so no built-in cross-fade fights
   it. Known tradeoff, accepted deliberately: clip-path forces the browser
   to re-rasterize the mask against the *physical* pixel grid every frame,
   and that cost scales with devicePixelRatio (which Chrome folds page
   zoom into) — so this can stall/flicker on an ordinary HiDPI screen at
   normal-to-high zoom. The circular reveal was worth more than a
   smoothness guarantee here. */
::view-transition-old(root),
::view-transition-new(root){
  animation:none;
}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:2;}

/* Inline icon system — replaces emoji used as functional UI icons
   (nav, buttons, callouts, status). Icons are hand-authored minimal-line
   SVGs (24x24, stroke=currentColor) rendered via the icon() helper in
   app.js, sized to sit on the text baseline. */
.icon{
  width:1.05em;height:1.05em;display:inline-block;flex-shrink:0;
  vertical-align:-0.2em;
  stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}
.eyebrow{
  font-family:'Space Grotesk',monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--orange-dark);
  font-weight:600;
  margin-bottom:.6em;
  display:flex;align-items:center;gap:.5em;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--orange);
  display:inline-block;
}
section{padding:86px 0;position:relative;}
section.tight{padding:60px 0;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head p{color:var(--slate);font-size:1.05rem;}

/* dotted lab-notebook texture background helper */
.notebook-bg{
  background-image: radial-gradient(circle, var(--dot-color) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}

/* === App shell (sidebar navigation, à la library-app reference) === */
.app-shell{display:flex;min-height:100vh;align-items:stretch;}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{height:34px;width:auto;}
.brand-text{font-family:'Space Grotesk';font-weight:700;font-size:1.05rem;color:var(--heading);line-height:1;}
.brand-text span{color:var(--orange);}
.brand-sub{font-family:'Inter';font-weight:500;font-size:.76rem;letter-spacing:.06em;color:var(--slate);text-transform:uppercase;}

.mobile-topbar{
  display:none;
  position:sticky;top:0;z-index:100;width:100%;
  align-items:center;justify-content:space-between;
  padding:0 16px;height:58px;flex-shrink:0;
  background:var(--nav-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.mobile-topbar .brand img{height:26px;}
.mobile-topbar .brand-text{font-size:.92rem;}

.sidebar-backdrop{
  display:none;position:fixed;inset:0;z-index:210;
  background:rgba(13,27,46,.45);opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}

.sidebar{
  width:248px;flex-shrink:0;
  position:sticky;top:0;align-self:flex-start;height:100vh;
  /* iOS Safari's address bar/toolbar chrome can collapse on scroll, so
     100vh — the "large viewport," as if that chrome were already hidden —
     is often taller than what's actually visible on screen right now. On
     the mobile fixed-position drawer variant below, that stretched
     .sidebar-footer (Masuk + the theme toggle) below the visible fold
     with no way to reach it: the underlying page doesn't scroll while the
     drawer is open, so the chrome never collapses to reveal the rest.
     100dvh tracks the *currently visible* viewport instead, so the
     drawer's own overflow-y:auto correctly scrolls to reveal everything
     inside it regardless of browser-chrome state. Kept as a second
     declaration (not a replacement) so browsers without dvh support keep
     the 100vh fallback above. */
  height:100dvh;
  display:flex;flex-direction:column;
  background:var(--nav-bg);border-right:1px solid var(--line);
  padding:20px 16px;overflow-y:auto;
}
.sidebar-brand{padding:4px 6px 20px;}
.sidebar-brand img{height:32px;}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.sidebar-section-label{
  font-family:'Space Grotesk';font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);padding:18px 12px 6px;
}
.sidebar-link{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--heading-soft);
  text-decoration:none;transition:background-color .15s,color .15s;
}
.sidebar-link .icon{width:19px;height:19px;flex-shrink:0;color:var(--slate);transition:color .15s;}
.sidebar-link:hover{background:var(--paper-2);color:var(--heading);}
.sidebar-link.active{background:var(--paper-2);color:var(--heading);}
.sidebar-link.active .icon{color:var(--orange-dark);}
.sidebar-footer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:16px;margin-top:12px;border-top:1px solid var(--line);
}

/* Sticky footer lives at this level now: the view divs and .site-footer
   are app-main's direct children (see body/#view-* rule above, which
   this reuses), so app-main itself must be the flex column that
   stretches them — .app-shell just stretches app-main to full height. */
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}

.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  min-width:44px;min-height:44px;flex-direction:column;align-items:center;justify-content:center;
}
.hamburger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;}

/* === Theme toggle === */
.theme-toggle{
  background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
}
.theme-toggle-track{
  position:relative;width:52px;height:28px;border-radius:20px;
  background:var(--paper-2);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 6px;
  transition:background-color .3s ease,border-color .3s ease;
}
.theme-toggle-icon{font-size:.68rem;line-height:1;position:relative;z-index:1;opacity:.85;}
.theme-toggle-thumb{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .3s ease,background-color .3s ease;
}
:root[data-theme="dark"] .theme-toggle-thumb{
  transform:translateX(24px);
  background:var(--orange);
}

/* === Bab picker === */
.breadcrumb-back{
  background:none;border:none;cursor:pointer;color:var(--slate);
  font-family:'Space Grotesk';font-size:.78rem;padding:0;margin-bottom:18px;
  display:inline-flex;align-items:center;gap:6px;transition:color .15s;
}
.breadcrumb-back:hover{color:var(--orange-dark);}
.breadcrumb-back.small{margin-bottom:0;font-size:.76rem;}
/* Subject progress summary bar (bab picker) */
.subject-progress{display:flex;align-items:center;gap:12px;margin-bottom:36px;}
.subject-progress-track{flex:1;max-width:280px;height:6px;border-radius:4px;background:var(--paper-2);overflow:hidden;}
.subject-progress-fill{height:100%;background:var(--orange);border-radius:4px;}
.subject-progress .mono{font-size:.76rem;color:var(--slate);}

/* Chapter list — numbered editorial rows instead of a grid of shadowed cards */
.bab-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.bab-row{
  display:flex;align-items:center;gap:20px;padding:22px 4px;
  border-bottom:1px solid var(--line);cursor:pointer;
  transition:transform .15s,background .15s;
}
.bab-row:hover{transform:translateX(6px);background:var(--paper-2);}
.bab-row .bab-num{
  font-size:1.3rem;font-weight:600;color:var(--line);flex-shrink:0;width:2.2ch;
}
.bab-row:hover .bab-num{color:var(--orange);}
.bab-row .bab-body{flex:1;min-width:0;}
.bab-row h2{font-size:1.02rem;font-weight:600;margin:0 0 4px;}
.bab-row p{font-size:.84rem;color:var(--slate);margin:0;max-width:60ch;}
.bab-row.soon{opacity:.55;cursor:default;}
.bab-row.soon:hover{transform:none;background:none;}
.bab-row .soon-tag{
  font-family:'Space Grotesk';font-size:.72rem;flex-shrink:0;
  background:var(--paper-2);color:var(--slate);padding:4px 9px;border-radius:14px;
}
.bab-row .bab-progress{
  font-family:'Space Grotesk';font-size:.72rem;flex-shrink:0;padding:4px 9px;border-radius:14px;
}
.bab-progress.done{background:rgba(47,158,110,0.12);color:var(--success);}
.bab-progress.ongoing{background:rgba(238,125,49,0.14);color:var(--orange-dark);}

/* === Lesson sub-nav === */
.lesson-subnav{
  position:sticky;top:0;z-index:90;
  background:var(--subnav-bg);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.lesson-subnav-inner{display:flex;align-items:center;gap:26px;padding:12px 24px;flex-wrap:wrap;}
.lesson-links{display:flex;gap:2px;flex-wrap:wrap;}
.lesson-links a{
  font-size:.82rem;font-weight:600;color:var(--heading-soft);text-decoration:none;
  padding:7px 11px;border-radius:8px;transition:background .15s;white-space:nowrap;
}
.lesson-links a:hover{background:var(--paper-2);}
.lesson-links a.cta{background:var(--navy);color:#fff;}
.lesson-links a.cta:hover{background:var(--accent-hover);}

@media(max-width:760px){
  .lesson-subnav-inner{gap:10px;}
  .subject-row, .bab-row{gap:14px;}
}

/* === Chapter prev/next nav — catalog-driven, appended after chapter
   content loads. Only rendered when there's an actual neighbor chapter. === */
.chapter-nav{
  display:flex;justify-content:space-between;gap:16px;
  padding:36px 24px 60px;border-top:1px solid var(--line);margin-top:24px;
}
.chapter-nav-link{
  display:flex;align-items:center;gap:10px;max-width:46%;
  background:none;border:none;cursor:pointer;color:var(--heading);
  font-family:'Inter';padding:8px;border-radius:8px;transition:background .15s;
}
.chapter-nav-link:hover{background:var(--paper-2);}
.chapter-nav-link.next{margin-left:auto;text-align:right;flex-direction:row-reverse;}
.chapter-nav-link small{display:block;font-family:'Space Grotesk';font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:2px;}
.chapter-nav-link span{font-weight:600;font-size:.92rem;}
.chapter-nav-link .icon{flex-shrink:0;color:var(--orange-dark);}

/* === Sign-in view — single centered column, not a login-vs-sales split === */
.signin-center{max-width:420px;margin:0 auto;text-align:center;}
.signin-center h1{font-size:1.9rem;}
.signin-center .lead{margin:0 auto 32px;}
.signin-center .signin-card,
.signin-center .marketing-panel{text-align:left;}
.signin-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;
}
.signin-card h3{font-size:1.2rem;margin-bottom:6px;}
.signin-card .signin-sub{color:var(--slate);font-size:.86rem;margin-bottom:24px;}
.signin-toggle-packages{
  display:block;width:100%;text-align:center;background:none;border:none;cursor:pointer;
  color:var(--slate);font-size:.82rem;font-family:'Inter';padding:18px 0 0;
}
.signin-toggle-packages:hover{color:var(--orange-dark);}
.signin-center .marketing-panel{margin-top:18px;}
.signin-field{margin-bottom:16px;}
.signin-field label{
  display:block;font-family:'Space Grotesk';font-size:.72rem;color:var(--slate);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
}
.signin-field input{
  width:100%;padding:12px 14px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--paper);font-size:.94rem;color:var(--ink);font-family:'Inter';
}
.signin-field input:focus{outline:none;border-color:var(--orange);}
.signin-error{
  background:rgba(226,87,76,0.12);border:1px solid rgba(226,87,76,0.35);color:var(--danger-text);
  border-radius:8px;padding:10px 14px;font-size:.82rem;margin-bottom:16px;display:none;
}
.signin-error.show{display:block;}
.signin-success{
  background:rgba(47,158,110,0.12);border:1px solid rgba(47,158,110,0.35);color:var(--success);
  border-radius:8px;padding:10px 14px;font-size:.82rem;margin-bottom:16px;display:none;
}
.signin-success.show{display:block;}
.signin-note{
  font-size:.76rem;color:var(--slate);margin-top:16px;text-align:center;
}
.signin-submit{width:100%;justify-content:center;}
.signin-submit:disabled{opacity:.6;cursor:default;}

.marketing-panel{
  background:var(--navy);border-radius:18px;padding:34px;color:#fff;
  background-image:radial-gradient(circle at 85% 0%, rgba(238,125,49,0.22), transparent 55%);
}
.marketing-panel .eyebrow{color:var(--orange);}
.marketing-panel h2{color:#fff;font-size:1.25rem;margin-bottom:12px;}
.marketing-panel p.mk-lead{color:#c3ccd9;font-size:.9rem;margin-bottom:20px;}
/* === Package / purchase panel === */
.package-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.package-card{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;
  width:100%;text-align:left;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.14);
  border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;
  position:relative;color:#fff;font-family:'Inter';
}
.package-card:hover{border-color:var(--orange);}
.package-card.active{border-color:var(--orange);background:rgba(238,125,49,0.12);}
.package-card .package-note{
  position:absolute;top:-9px;right:12px;background:var(--orange);color:#0d1b2e;
  font-family:'Space Grotesk';font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:20px;
}
.package-card .package-label{font-weight:600;font-size:.94rem;}
.package-card .package-price{font-family:'Space Grotesk';font-weight:700;color:var(--orange);font-size:1rem;}
.package-card .package-sub{width:100%;font-size:.76rem;color:#9fb0c2;}

.order-form{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.14);}
.order-form h3{color:#fff;font-size:1rem;margin-bottom:14px;}
.order-form-back{
  background:none;border:none;color:#9fb0c2;font-family:'Space Grotesk';font-size:.74rem;
  cursor:pointer;padding:0;margin-bottom:14px;
}
.order-form-back:hover{color:var(--orange);}
.order-form .signin-field input{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);color:#fff;}
.order-form .signin-field label{color:#9fb0c2;}

.order-success{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.14);}
.order-success-id{font-family:'Space Grotesk';font-size:.72rem;color:#9fb0c2;margin-bottom:8px;}
.order-success h3{color:#fff;font-size:1rem;margin-bottom:12px;}
.payment-box{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;padding:14px 16px;margin-bottom:16px;
}
.pay-row{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:#e6ecf2;padding:6px 0;}
.pay-row:not(:last-child){border-bottom:1px dashed rgba(255,255,255,0.12);}
.pay-row span{color:#9fb0c2;}

.wa-btn{
  display:inline-flex;align-items:center;gap:10px;width:100%;justify-content:center;
  background:#25D366;color:#0d1b2e;font-weight:700;font-size:.95rem;
  padding:14px 20px;border-radius:11px;text-decoration:none;transition:transform .15s,background .15s;
}
.wa-btn:hover{background:#1ebe5a;transform:translateY(-2px);}
.wa-btn svg{width:20px;height:20px;flex-shrink:0;}
.mk-schedule{
  margin-top:16px;font-family:'Space Grotesk';font-size:.8rem;color:#9fb0c2;text-align:center;
}

/* === Tutor promo strip — one line, not a competing second hero === */
.tutor-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 22px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);
}
.tutor-strip-info{display:flex;align-items:center;gap:14px;}
.tutor-strip-icon{
  width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tutor-strip-icon .icon{color:var(--orange-dark);}
.tutor-strip-title{font-weight:600;font-size:.9rem;color:var(--heading);}
.tutor-strip-sub{font-size:.8rem;color:var(--slate);margin:2px 0 0;}
.tutor-strip-link{
  font-family:'Space Grotesk';font-weight:600;font-size:.84rem;color:#fff;
  text-decoration:none;white-space:nowrap;background:var(--navy);padding:10px 18px;border-radius:9px;
  transition:background .15s,transform .15s;
}
.tutor-strip-link:hover{background:var(--accent-hover);transform:translateY(-1px);}
.home-renew-link{
  font-weight:600;color:var(--orange-dark);text-decoration:underline;white-space:nowrap;
}
.home-renew-link:hover{color:var(--orange);}

/* === Section heading above the subject grid — smaller than .section-head === */
.section-head-sm{margin:44px 0 22px;}
.section-head-sm h2{font-size:1.4rem;margin-bottom:6px;}
.section-head-sm p{color:var(--slate);font-size:.92rem;margin:0;max-width:60ch;}

/* === Subject list — horizontal scrolling cover-art cards (Malaka Books'
   "Terbaru" row reference), rather than a vertical list. === */
.subject-list{
  display:flex;gap:24px;overflow-x:auto;
  /* overflow-x:auto without an explicit overflow-y forces the vertical
     axis to compute as auto too (the CSS overflow spec's "the visible
     one becomes auto" rule) — extra top/bottom padding gives the
     hover lift+scale below room to grow into without getting clipped
     by that vertical scroll box. */
  padding:22px 20px 26px 4px;
  scroll-snap-type:x proximity;
}
.subject-card{
  flex:0 0 auto;width:160px;scroll-snap-align:start;cursor:pointer;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;
}
.subject-card:hover{transform:translateY(-10px) scale(1.06);z-index:5;}
.subject-card.soon{opacity:.7;cursor:default;}
.subject-card.soon:hover{transform:none;}
.subject-card .subject-card-cover{
  width:160px;height:206px;object-fit:contain;border-radius:8px;
  background:var(--paper-2);box-shadow:0 6px 18px rgba(13,27,46,.18);
  transition:box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.subject-card:hover .subject-card-cover{
  box-shadow:0 22px 38px -6px rgba(13,27,46,.38);
}
.subject-card h3{
  margin:0;font-family:'Space Grotesk';font-weight:600;font-size:1rem;color:var(--heading);
}
.subject-card .subject-card-badge{
  align-self:flex-start;font-family:'Space Grotesk';font-size:.72rem;font-weight:600;
  padding:4px 10px;border-radius:14px;white-space:nowrap;
}
.subject-card .status-ready{background:rgba(47,158,110,0.12);color:var(--success);}
.subject-card .status-soon{background:var(--paper-2);color:var(--slate);}

/* === Home hero layout — text column + optional visual anchor. The image
   slot degrades gracefully (collapses to single column via JS onerror)
   until an illustration file actually exists at the given path, so this
   is safe to ship ahead of the asset. Deliberately separate from the
   generic .hero-grid used inside chapter content, so it can't affect
   content-private pages. === */
.home-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;}
.home-hero.no-visual{grid-template-columns:1fr;}
.home-hero-visual{display:flex;align-items:center;justify-content:center;}
.home-hero-visual img{max-width:100%;height:auto;}
/* The illustration's palette was tuned for the light paper background;
   on dark it reads a touch flat against pure navy. A small vibrancy
   lift (not a glow — that pattern is banned for this hero, see the
   critique history) is enough to make it feel intentional there. */
:root[data-theme="dark"] .home-hero-visual img{filter:brightness(1.08) saturate(1.15);}
@media(max-width:860px){
  .home-hero{grid-template-columns:1fr;gap:28px;}
  .home-hero-visual{order:2;max-width:260px;margin:0 auto;}
  .home-hero-visual img{max-height:220px;object-fit:contain;}
}

/* === "Lanjutkan belajar" banner === */
.continue-banner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--navy);border-radius:16px;padding:26px 28px;margin-bottom:8px;color:#fff;
  cursor:pointer;text-decoration:none;
}
.continue-banner .cb-info{flex:1;min-width:200px;}
.continue-banner .cb-label{font-family:'Space Grotesk';font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:6px;}
.continue-banner .cb-title{font-weight:700;font-size:1.15rem;margin-bottom:2px;}
.continue-banner .cb-sub{font-size:.82rem;color:#c3ccd9;}
.continue-banner .cb-meta{font-family:'IBM Plex Mono';font-size:.74rem;color:#9fb0c2;margin-top:10px;}
.continue-banner .cb-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:'Space Grotesk';font-weight:600;font-size:.86rem;color:#0d1b2e;
  background:var(--orange);padding:10px 18px;border-radius:9px;transition:gap .15s,background .15s;
}
.continue-banner:hover .cb-cta{gap:12px;background:var(--orange-dark);color:#0d1b2e;}
.continue-banner .cb-cta .icon{color:inherit;}
.continue-banner .cb-cover{
  width:78px;height:100px;flex-shrink:0;object-fit:contain;border-radius:6px;
  background:rgba(255,255,255,0.06);box-shadow:0 4px 14px rgba(0,0,0,.3);display:none;
}
@media(min-width:560px){
  .continue-banner .cb-cover{display:block;}
}

/* === Floating WhatsApp button === */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:200;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(37,211,102,0.45);
  text-decoration:none;transition:transform .18s;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;}
.wa-float-pulse{
  position:absolute;inset:0;border-radius:50%;background:transparent;
  border:2px solid #25D366;opacity:0;
  animation:wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.6;}70%{opacity:0;}100%{transform:scale(1.55);opacity:0;}}

/* === Session badge in nav === */
.session-badge{
  display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--heading-soft);
  font-family:'Space Grotesk';flex:1;min-width:0;flex-wrap:wrap;
}
.session-badge button{
  background:none;border:none;color:var(--slate);cursor:pointer;font-family:'Space Grotesk';
  font-size:.72rem;text-decoration:underline;padding:0;
}
.session-badge button:hover{color:var(--orange-dark);}
.session-badge .session-signin-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  background:var(--navy);color:#fff;font-family:'Space Grotesk';font-weight:600;
  font-size:.86rem;text-decoration:none;border-radius:9px;padding:10px 14px;
  transition:background-color .15s;
}
.session-badge .session-signin-btn:hover{background:var(--accent-hover);color:#fff;}
.session-badge .session-signin-btn .icon{color:inherit;}
.session-status{
  font-family:'Space Grotesk';font-size:.72rem;padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.session-status.ok{background:rgba(47,158,110,0.12);color:var(--success);}
.session-status.expired{background:rgba(226,87,76,0.12);color:var(--danger-text);}

@media(max-width:600px){
  .wa-float{bottom:16px;right:16px;width:52px;height:52px;}
  .wa-float svg{width:24px;height:24px;}
}

/* === HERO === */
.hero{
  padding:90px 0 70px;
  background:var(--paper);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;}
.hero-grid.single{grid-template-columns:1fr;max-width:720px;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.05;}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero p.lead{font-size:1.15rem;color:var(--slate);max-width:520px;margin:18px 0 30px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.92rem;
  padding:13px 22px;border-radius:10px;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .15s, box-shadow .15s, background .15s;
  font-family:'Inter';
}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--heading);border:1.5px solid var(--navy);}
.btn-ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px);}

.orbit-card{
  position:relative;
  background:var(--card);
  border-radius:20px;
  padding:34px;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.orbit-mark{
  width:64px;height:auto;margin-bottom:18px;
}
.orbit-card h3{font-size:1.15rem;}
.orbit-card .stat-row{display:flex;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);}
.orbit-card .stat{text-align:left;}
.orbit-card .stat b{display:block;font-family:'Space Grotesk';font-size:1.5rem;color:var(--heading);}
.orbit-card .stat span{font-size:.72rem;color:var(--slate);font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.06em;}

.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.badge{
  font-family:'Space Grotesk';font-size:.72rem;
  padding:5px 10px;border-radius:20px;
  background:var(--paper-2);color:var(--heading-soft);
  border:1px solid var(--line);
}

/* Progress ring for hero (decorative) */
.hero-decor{
  position:absolute;right:-60px;top:-40px;
  width:280px;height:280px;
  border:2px dashed rgba(238,125,49,0.35);
  border-radius:50%;
  z-index:0;
}

/* === Compare cards === */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.compare-card{
  border-radius:16px;padding:30px;
  box-shadow:var(--shadow);
}
.compare-navy{background:var(--navy);color:#fff;}
.compare-orange{background:var(--card);border:2px solid var(--orange);}
.compare-tag{
  font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;font-weight:600;margin-bottom:10px;
}
.compare-navy .compare-tag{color:var(--orange);}
.compare-orange .compare-tag{color:var(--orange-dark);}
.compare-def{font-size:1.15rem;font-weight:500;margin-bottom:18px;font-family:'Space Grotesk';}
.check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.check-list li{padding-left:22px;position:relative;font-size:.94rem;}
.check-list li::before{
  content:"✓";position:absolute;left:0;top:0;
  font-weight:700;color:var(--orange);
}
.compare-navy .check-list li::before{color:var(--orange);}
.compare-orange .check-list li::before{color:var(--orange-dark);}
.compare-navy .check-list li{color:#e4e9f0;}
.compare-orange .check-list li{color:var(--ink);}

.example-strip{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
.example-item{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;font-size:.9rem;
}
.example-bu{font-weight:700;color:var(--heading);}
.example-arrow{color:var(--slate);font-family:'Space Grotesk';font-size:.78rem;}
.example-perus{color:var(--orange-dark);font-weight:600;}

/* === Sector grid === */
.sector-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:10px;}
.sector-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;padding:20px 16px;
  transition:transform .18s, background .18s;
}
.sector-card:hover{transform:translateY(-4px);background:rgba(238,125,49,0.14);border-color:var(--orange);}
.sector-num{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.85rem;margin-bottom:10px;color:var(--orange);}
.sector-card h4{color:#fff;font-size:1rem;margin-bottom:8px;}
.sector-card p{color:#b7c1cf;font-size:.82rem;margin:0;line-height:1.5;}

/* === Form tabs === */
.form-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.form-tab{
  font-family:'Space Grotesk';font-weight:600;font-size:.92rem;
  padding:11px 20px;border-radius:30px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);color:var(--heading-soft);
  transition:all .15s;
}
.form-tab:hover{border-color:var(--orange);}
.form-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;}

.form-detail{
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:32px;box-shadow:var(--shadow);
  margin-bottom:34px;
}
.form-detail-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.form-detail-head h3{font-size:1.4rem;margin:0;}
.owner-pill{
  font-family:'Space Grotesk';font-size:.78rem;
  background:var(--paper-2);padding:6px 14px;border-radius:20px;color:var(--heading-soft);
  white-space:nowrap;
}
.form-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-detail-grid .col h5{
  font-family:'Space Grotesk';text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  color:var(--slate);margin-bottom:8px;
}
.form-detail-grid .col p{font-size:.92rem;color:var(--ink);margin:0;}
.pros-cons{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.pros-cons span{font-size:.86rem;padding-left:18px;position:relative;}
.pros-cons span.plus::before{content:"+";position:absolute;left:0;color:var(--success);font-weight:700;}
.pros-cons span.minus::before{content:"–";position:absolute;left:0;color:var(--danger);font-weight:700;}

/* === Comparison table === */
.table-scroll{overflow-x:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);}
table.compare-table{border-collapse:collapse;width:100%;min-width:720px;background:var(--card);}
table.compare-table th, table.compare-table td{
  padding:14px 18px;text-align:left;font-size:.86rem;border-bottom:1px solid var(--line);
}
table.compare-table thead th{
  background:var(--navy);color:#fff;font-family:'Space Grotesk';font-weight:600;font-size:.86rem;
  position:sticky;top:0;
}
table.compare-table tbody tr:nth-child(odd){background:var(--paper-2);}
table.compare-table tbody th{font-family:'Space Grotesk';font-size:.74rem;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.table-hint{font-size:.78rem;color:var(--slate);margin-top:10px;font-family:'Space Grotesk';}
@media(min-width:761px){.table-hint{display:none;}}

/* === BUMN toggle === */
.toggle-switch{
  display:inline-flex;background:var(--paper-2);border-radius:30px;padding:5px;
  margin-bottom:28px;border:1px solid var(--line);
}
.toggle-opt{
  border:none;background:transparent;padding:10px 26px;border-radius:24px;
  font-family:'Space Grotesk';font-weight:600;font-size:.9rem;cursor:pointer;color:var(--heading-soft);
  transition:all .18s;
}
.toggle-opt.active{background:var(--navy);color:#fff;}
.law-strip{
  font-family:'Space Grotesk';font-size:.82rem;background:var(--card);border:1px dashed var(--orange);
  border-radius:10px;padding:12px 18px;margin-bottom:22px;color:var(--heading-soft);
}
/* Shared static-content-box recipe. These used to be 8+ separately named
   but visually identical classes (.split-card/.role-card/.struct-box/
   .jenis-box/.m-card/.poac-card/.organel-card/.principle-card all had
   their own copy of background+border+radius). None are clickable, so
   none carry a shadow — shadow is reserved for things you can click
   (.subject-card, .bab-card). Consolidated here rather than renamed in
   content HTML, since the class names are already used across every
   chapter file. */
.split-card, .role-card, .struct-box, .jenis-box{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.split-card{padding:26px;}
.split-tag{font-family:'Space Grotesk';font-weight:700;font-size:1.1rem;color:var(--heading);}
.split-big{font-family:'Space Grotesk';font-size:2.1rem;color:var(--orange);font-weight:600;margin:6px 0 12px;}
.split-card p{font-size:.9rem;color:var(--ink);margin-bottom:14px;}
.mini-note{font-size:.84rem;color:var(--slate);margin-top:18px;font-style:italic;}
.role-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.role-card{
  padding:18px;font-size:.86rem;color:var(--ink);position:relative;padding-top:34px;
}
.role-n{position:absolute;top:12px;left:18px;font-family:'Space Grotesk';color:var(--orange);font-size:.78rem;font-weight:600;}

/* === Koperasi === */
.principle-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:44px;}
.principle-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 12px;
  transition:transform .15s,border-color .15s;border-top:2px solid var(--line);
}
/* Accent color used to be assigned by position (nth-child rainbow) —
   every principle got a different color for no reason tied to its
   meaning. Now it's a single consistent accent that lights up on hover
   instead, which reads as "these are equally-weighted items" rather
   than an arbitrary color wheel. */
.principle-card:hover{transform:translateY(-3px);border-top-color:var(--orange);}
.p-icon{font-size:1.15rem;display:block;margin-bottom:6px;}
.principle-card h4{font-size:.78rem;margin-bottom:4px;line-height:1.25;}
.principle-card p{font-size:.7rem;color:var(--slate);margin:0;line-height:1.35;}

.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-bottom:50px;}
.struct-box, .jenis-box{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow);
}
.struct-hint{font-family:'Space Grotesk';font-size:.68rem;font-weight:400;color:var(--slate);text-transform:none;}
.org-chart{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;}
.org-node{
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:10px;
  padding:10px 16px;text-align:center;font-family:'Space Grotesk';font-weight:600;font-size:.86rem;color:var(--heading);
  display:flex;flex-direction:column;gap:2px;cursor:pointer;transition:all .15s;width:100%;
}
.org-node:hover{border-color:var(--orange);transform:translateY(-1px);}
.org-node.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.org-node.active span{color:#c3ccd9;}
.org-node span{font-family:'Inter';font-weight:400;font-size:.72rem;color:var(--slate);}
.org-row{display:flex;gap:8px;width:100%;}
.org-row .org-node{flex:1;}
.org-arrow{color:var(--orange);font-weight:700;font-family:'Space Grotesk';font-size:.7rem;padding:2px 0;}
.org-detail{
  margin-top:16px;background:var(--paper-2);border:1px dashed var(--line);border-radius:10px;
  padding:14px 16px;font-size:.84rem;color:var(--ink);min-height:20px;
}
.org-detail b{color:var(--heading);}
.org-loop-note{font-size:.76rem;color:var(--slate);margin:12px 0 0;line-height:1.5;}

.jenis-item{padding:14px 0;border-bottom:1px solid var(--line);}
.jenis-item:last-child{border-bottom:none;}
.jenis-item b{display:block;font-size:.88rem;color:var(--heading);margin-bottom:4px;}
.jenis-item span{font-size:.8rem;color:var(--slate);}

/* KaTeX equations — inherit the site's text color so light/dark just works;
   only need to tame sizing and keep long display equations from overflowing
   on narrow screens. */
.katex{font-size:1.05em;}
.katex-display{margin:1em 0;overflow-x:auto;overflow-y:hidden;padding:2px 0;}
.katex-display>.katex{white-space:normal;}

/* structure diagrams (labeled SVG figures) */
.diagram-card{margin:28px 0 44px;max-width:760px;}
.diagram-legend-grid{display:grid;grid-template-columns:760px 1fr;gap:24px;align-items:start;margin-bottom:50px;}
.diagram-legend-grid .diagram-card{max-width:none;margin:0 0 24px;}
.diagram-legend-grid .diagram-card:last-child{margin-bottom:0;}
.diagram-legend-list{display:flex;flex-direction:column;gap:16px;}
@media(max-width:1000px){
  .diagram-legend-grid{grid-template-columns:1fr;}
  .diagram-legend-grid .diagram-card{max-width:760px;}
}
.diagram-eyebrow{font-family:'Space Grotesk';font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-dark);margin:0 0 14px;}
.diagram-card svg{width:100%;height:auto;display:block;}
.diagram-card img{width:100%;height:auto;display:block;border-radius:12px;background:#fff;padding:14px;box-sizing:border-box;border:1px solid var(--line);}
.diagram-caption{font-size:.8rem;color:var(--slate);text-align:center;margin:16px 0 0;line-height:1.5;}

/* === 3D model embed (Sketchfab) === */
.model3d-frame{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
}
.model3d-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.model3d-credit{font-size:.74rem;color:var(--slate);text-align:center;margin:10px 0 0;line-height:1.5;}
.model3d-credit a{color:var(--orange-dark);text-decoration:none;font-weight:600;}
.model3d-credit a:hover{text-decoration:underline;}

/* SHU calculator */
.shu-lab{
  background:var(--navy);border-radius:22px;padding:40px;
  background-image: radial-gradient(circle at 90% 10%, rgba(238,125,49,0.18), transparent 55%);
}
.shu-lab-head{margin-bottom:26px;}
.shu-formula{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;padding:18px 20px;margin:0 0 26px;color:#fff;
}
.shu-formula .katex-display{margin:6px 0;}
.shu-formula .shu-formula-key{font-size:.76rem;color:#c3ccd9;margin-top:10px;line-height:1.6;}
.shu-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.shu-inputs{display:flex;flex-direction:column;gap:16px;}
.input-row label{
  display:block;font-family:'Space Grotesk';font-size:.74rem;color:#c3ccd9;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
}
.input-row label span{color:var(--orange);font-weight:600;}
.input-row input[type="number"]{
  width:100%;padding:11px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);color:#fff;font-size:.94rem;
}
.input-row input[type="range"]{width:100%;accent-color:var(--orange);}
.shu-divider{border:none;border-top:1px dashed rgba(255,255,255,0.2);margin:4px 0;}
.shu-output{display:flex;flex-direction:column;gap:14px;}
.output-card{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;
}
.output-card span{color:#c3ccd9;font-size:.86rem;}
.output-card b{color:#fff;font-size:1.15rem;}
.output-card.total{background:var(--orange);border-color:var(--orange);}
.output-card.total span, .output-card.total b{color:#fff;}
.output-card.total b{font-size:1.4rem;}
.formula-box{
  font-size:.74rem;color:#9fb0c2;line-height:1.7;background:rgba(0,0,0,0.2);
  border-radius:10px;padding:14px 16px;margin-top:4px;
}

/* === Manajemen === */
.thinker-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.thinker{background:var(--amber-soft);border-radius:12px;padding:18px 20px;}
.thinker b{
  display:block;font-family:'Space Grotesk';color:var(--orange-dark);margin-bottom:6px;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;
}
.thinker span{font-size:.86rem;color:var(--ink);}

.six-m-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.m-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;
  transition:transform .15s;
}
.m-card:hover{transform:translateY(-3px);border-color:var(--orange);}
.m-letter{
  width:38px;height:38px;line-height:38px;border-radius:50%;background:var(--navy);color:var(--orange);
  font-family:'Space Grotesk';font-weight:700;margin:0 auto 10px;display:block;
}
.six-m-grid .m-card:nth-child(6n+1) .m-letter{background:var(--blue);color:#fff;}
.six-m-grid .m-card:nth-child(6n+2) .m-letter{background:var(--teal);color:#fff;}
.six-m-grid .m-card:nth-child(6n+3) .m-letter{background:var(--purple);color:#fff;}
.six-m-grid .m-card:nth-child(6n+4) .m-letter{background:var(--pink);color:#fff;}
.six-m-grid .m-card:nth-child(6n+5) .m-letter{background:var(--amber);color:#fff;}
.six-m-grid .m-card:nth-child(6n+6) .m-letter{background:var(--green);color:#fff;}
.m-card h4{font-size:.9rem;margin-bottom:6px;}
.m-card p{font-size:.74rem;color:var(--slate);margin:0;line-height:1.4;}

.pyramid-wrap{margin-top:56px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow);}
.pyramid{display:flex;flex-direction:column;align-items:center;gap:4px;}
.p-level{
  padding:16px 0;text-align:center;font-family:'Space Grotesk';font-weight:700;color:#fff;cursor:pointer;
  border-radius:8px;transition:opacity .15s, transform .15s;
}
.p-level-top{background:var(--navy);}
.p-level-middle{background:var(--navy-2);}
.p-level-lower{background:var(--orange);}
.p-level:hover{opacity:.85;transform:scale(1.01);}
.p-level.active{outline:3px solid var(--orange-dark);outline-offset:2px;}
.pyramid-detail{
  margin-top:22px;background:var(--paper-2);border-radius:12px;padding:20px 22px;font-size:.9rem;color:var(--ink);
  border:1px dashed var(--line);
}
.pyramid-detail b{color:var(--heading);}

.poac-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.poac-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 16px;position:relative;overflow:hidden;}
.poac-num{
  font-family:'Space Grotesk';font-weight:700;font-size:.8rem;color:var(--orange);
  display:block;margin-bottom:8px;
}
.poac-grid .poac-card:nth-child(5n+1) .poac-num{color:var(--blue);}
.poac-grid .poac-card:nth-child(5n+2) .poac-num{color:var(--teal);}
.poac-grid .poac-card:nth-child(5n+3) .poac-num{color:var(--purple);}
.poac-grid .poac-card:nth-child(5n+4) .poac-num{color:var(--pink);}
.poac-grid .poac-card:nth-child(5n+5) .poac-num{color:var(--amber);}
.poac-card h4{font-size:.94rem;margin-bottom:2px;}
.poac-en{font-family:'Space Grotesk';font-size:.68rem;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;}
.poac-card p:last-child{font-size:.8rem;color:var(--slate);margin:0;position:relative;z-index:1;font-family:'Inter';text-transform:none;letter-spacing:normal;}

.acc-group{display:flex;flex-direction:column;gap:8px;}
.acc-item{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.acc-q{
  display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;
  font-family:'Space Grotesk';font-weight:600;font-size:.9rem;color:var(--heading);
}
.acc-q .acc-num{font-family:'Space Grotesk';color:var(--orange);font-weight:600;font-size:.82rem;width:26px;}
.acc-q .acc-chev{margin-left:auto;transition:transform .2s;color:var(--slate);}
.acc-item.open .acc-chev{transform:rotate(180deg);}
.acc-a{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .25s ease;}
.acc-item.open .acc-a{grid-template-rows:1fr;}
.acc-a p{margin:0;padding:0 18px 16px 58px;font-size:.84rem;color:var(--slate);min-height:0;overflow:hidden;}

.bidang-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.bidang-card{background:var(--navy);color:#fff;border-radius:14px;padding:20px 16px;}
.bidang-card h4{color:var(--orange);font-size:.94rem;margin-bottom:8px;}
.bidang-card p{font-size:.78rem;color:#c3ccd9;margin:0;line-height:1.5;}

/* === Organel grid (Biologi) === */
.organel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;}
.organel-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  transition:transform .15s,border-color .15s,opacity .15s,box-shadow .15s;
  border-top:2px solid var(--line);
}
.organel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.organel-card .oc-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;font-size:1.4rem;margin-bottom:12px;
}
.organel-card h4{font-size:.96rem;margin-bottom:8px;color:var(--heading);line-height:1.4;}
.organel-card .oc-tag{
  display:inline-block;font-family:'Inter';font-weight:500;font-size:.72rem;
  color:var(--slate);font-style:italic;margin-left:2px;
}
.organel-card p{font-size:.82rem;color:var(--slate);margin:0;line-height:1.6;}
.organel-card.hide{display:none;}

/* === Collapsible card grid — opt-in via [data-collapsible-cards] on the
   grid wrapper, so plain (always-expanded) .organel-grid usages elsewhere
   (e.g. Matematika) are unaffected. Cards toggle independently — no
   single-open-at-a-time accordion behavior, since browsing several
   organelle descriptions side by side is the point. === */
[data-collapsible-cards] .organel-card{cursor:pointer;position:relative;padding-right:42px;}
[data-collapsible-cards] .organel-card::after{
  content:"+";
  position:absolute;top:18px;right:16px;
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:1rem;color:var(--slate);line-height:1;
  transition:border-color .15s,color .15s;
}
[data-collapsible-cards] .organel-card:hover::after{border-color:var(--orange);color:var(--orange-dark);}
[data-collapsible-cards] .organel-card.open::after{content:"\2013";}
[data-collapsible-cards] .organel-card p{display:none;margin-top:10px;}
[data-collapsible-cards] .organel-card.open p{display:block;}
.organel-card.oc-blue{border-top-color:var(--blue);} .organel-card.oc-blue .oc-icon{background:var(--blue-soft);}
.organel-card.oc-teal{border-top-color:var(--teal);} .organel-card.oc-teal .oc-icon{background:var(--teal-soft);}
.organel-card.oc-purple{border-top-color:var(--purple);} .organel-card.oc-purple .oc-icon{background:var(--purple-soft);}
.organel-card.oc-pink{border-top-color:var(--pink);} .organel-card.oc-pink .oc-icon{background:var(--pink-soft);}
.organel-card.oc-amber{border-top-color:var(--amber);} .organel-card.oc-amber .oc-icon{background:var(--amber-soft);}
.organel-card.oc-green{border-top-color:var(--green);} .organel-card.oc-green .oc-icon{background:var(--green-soft);}

/* === Numbered sub-heading badge (e.g. "1/2/3 komponen" within a section) —
   solid navy circle so it stays legible on any background, unlike the
   pastel .oc-icon variants which are tuned for white card surfaces. === */
.struct-num{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--navy);border:2px solid var(--orange);color:#fff;
  font-family:'Space Grotesk';font-weight:700;font-size:.95rem;
}

/* === Step row (mitosis phases, Biologi) === */
.step-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.step-pill{
  flex:1;min-width:110px;padding:12px 10px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--paper-2);color:var(--heading-soft);font-family:'Space Grotesk';font-weight:600;font-size:.84rem;
  cursor:pointer;transition:all .15s;text-align:center;
}
.step-pill:hover{border-color:var(--orange);}
.step-pill.active{background:var(--navy);border-color:var(--navy);color:#fff;}

/* === Grid column utility modifiers === */
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}

/* === Quiz === */
.quiz-box{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;padding:32px;
}
.quiz-top{margin-bottom:24px;}
.quiz-progress-track{height:6px;background:rgba(255,255,255,0.14);border-radius:6px;overflow:hidden;margin-bottom:12px;}
.quiz-progress-fill{height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.quiz-meta{display:flex;justify-content:space-between;color:#c3ccd9;font-size:.8rem;}
.quiz-meta #quizScore{color:var(--orange);font-weight:600;}
.q-title{color:#fff;font-family:'Space Grotesk';font-size:1.15rem;font-weight:600;margin-bottom:22px;line-height:1.5;}
.q-options{display:flex;flex-direction:column;gap:10px;}
.q-opt{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.16);
  border-radius:10px;padding:14px 16px;cursor:pointer;color:#e6ecf2;font-size:.92rem;
  transition:all .15s;
}
.q-opt:hover{border-color:var(--orange);}
.q-opt .opt-letter{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-size:.76rem;flex-shrink:0;
}
.q-opt.correct{border-color:var(--success);background:rgba(47,158,110,0.18);}
.q-opt.correct .opt-letter{background:var(--success);color:#fff;}
.q-opt.wrong{border-color:var(--danger);background:rgba(226,87,76,0.18);}
.q-opt.wrong .opt-letter{background:var(--danger);color:#fff;}
.q-opt.disabled{cursor:default;}
.q-explain{
  margin-top:18px;background:rgba(238,125,49,0.12);
  border-radius:10px;padding:14px 18px;color:#e6ecf2;font-size:.86rem;display:none;
}
.q-explain b{color:var(--orange);}
.q-nextbtn{margin-top:20px;display:none;}

.quiz-result{text-align:center;padding:40px 20px 10px;}
.result-ring{
  width:120px;height:120px;border-radius:50%;
  border:8px solid var(--orange);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  font-family:'Space Grotesk';font-size:1.6rem;font-weight:700;color:#fff;
}
.submit-status{font-size:.8rem;font-family:'Space Grotesk';margin-top:-6px;margin-bottom:10px;min-height:18px;}
.submit-status.ok{color:#7cd6ae;}
.submit-status.pending{color:#c3ccd9;}
.submit-status.err{color:#f0a597;}

/* Quiz gate */
.quiz-gate{
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;padding:32px;max-width:560px;margin:0 auto;
}
.gate-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px;}
.gate-hint{color:#9fb0c2;font-size:.82rem;margin:10px 0 20px;}
.gate-hint.warn{color:var(--orange);}
@media(max-width:560px){.gate-row{grid-template-columns:1fr;}}

/* === 3-level exercises ("Latihan Bertingkat") === */
.exercise-root{max-width:640px;margin:0 auto;}
.level-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px;}
.level-tab{
  flex:1;min-width:120px;font-family:'Space Grotesk';font-weight:600;font-size:.84rem;
  padding:12px 14px;border-radius:12px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.16);color:#c3ccd9;
  transition:all .15s;
}
.level-tab:hover{border-color:var(--orange);}
.level-tab.active{background:var(--orange);border-color:var(--orange);color:#241505;}
.level-tab .level-badge{display:block;font-size:.68rem;font-weight:500;opacity:.85;margin-top:3px;}
.level-hint{margin-top:6px !important;}
.ex-result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px;}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.4);}
.btn-outline-light:hover{background:rgba(255,255,255,0.1);border-color:#fff;transform:translateY(-2px);}

/* === Footer === */
.site-footer{background:var(--navy);border-top:1px solid rgba(255,255,255,0.1);padding:36px 0;}
.footer-inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.footer-note{color:#7d8ea1;font-size:.82rem;margin:0;}

/* === Responsive === */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .compare-grid{grid-template-columns:1fr;}
  .sector-grid{grid-template-columns:repeat(2,1fr);}
  .split-grid{grid-template-columns:1fr;}
  .role-cards{grid-template-columns:repeat(2,1fr);}
  .principle-grid{grid-template-columns:repeat(3,1fr);}
  .two-col{grid-template-columns:1fr;}
  .six-m-grid{grid-template-columns:repeat(3,1fr);}
  .poac-grid{grid-template-columns:repeat(2,1fr);}
  .bidang-grid{grid-template-columns:repeat(2,1fr);}
  .shu-grid{grid-template-columns:1fr;}
  .form-detail-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-5{grid-template-columns:repeat(3,1fr);}
  .organel-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .app-shell{flex-direction:column;}
  .mobile-topbar{display:flex;}
  .sidebar{
    position:fixed;top:0;left:0;z-index:220;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.25);
    /* .sidebar's default background (--nav-bg) is a translucent frosted-
       glass tone meant to pair with backdrop-filter:blur() the way
       .mobile-topbar uses it — but the sidebar never got that blur, so
       on mobile, where it's a fixed full-height drawer sitting directly
       over live page content instead of a thin sticky bar, the page
       underneath just reads through as faint ghosted text instead of a
       blurred wash. A full-height nav drawer has nothing meaningful to
       "see through" anyway, so make it a solid opaque panel instead of
       adding the (costlier, mobile-Safari-unfriendly) blur. */
    background:var(--paper);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.open{display:block;opacity:1;pointer-events:auto;}
  .hamburger{display:flex;}
  .lesson-subnav{top:58px;}
}
@media(max-width:680px){
  .sector-grid{grid-template-columns:1fr 1fr;}
  .role-cards{grid-template-columns:1fr;}
  .principle-grid{grid-template-columns:repeat(2,1fr);}
  .six-m-grid{grid-template-columns:repeat(2,1fr);}
  .poac-grid{grid-template-columns:1fr;}
  .bidang-grid{grid-template-columns:1fr;}
  .thinker-strip{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
  section{padding:56px 0;}
  .brand-sub{font-size:.7rem;letter-spacing:.06em;}
  .lesson-subnav-inner{padding:10px 20px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
  .grid-5{grid-template-columns:1fr;}
  .organel-grid{grid-template-columns:1fr;}
  .step-pill{min-width:90px;font-size:.76rem;padding:10px 6px;}
}

/* ===== PDF companion viewer — read-only paginated page images, gated
   behind /api/pdf-content the same way lesson content is gated behind
   /api/content. No download affordance by design (deterrent, not true
   prevention — see the watermark overlay below). ===== */
.pdf-viewer{max-width:600px;margin:0 auto;}
.pdf-viewer-stage{
  position:relative;
  aspect-ratio:210/297;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pdf-viewer-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--slate);
  font-size:.9rem;
  background:var(--card);
  z-index:2;
}
.pdf-viewer-loading[hidden]{display:none;}
.pdf-viewer-img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .25s ease;
  -webkit-user-select:none;user-select:none;
  pointer-events:none;
}
.pdf-viewer-watermark{
  position:absolute;
  inset:-20% -30%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:rotate(-28deg);
  pointer-events:none;
  z-index:1;
  opacity:.05;
}
.pdf-viewer-watermark span{
  font:600 12px/1 'Space Grotesk',sans-serif;
  letter-spacing:.03em;
  color:var(--navy);
  white-space:nowrap;
}
.pdf-viewer-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:16px;
}
.pdf-viewer-prev,.pdf-viewer-next{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--navy);
  font-size:1.1rem;
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
.pdf-viewer-prev:hover:not(:disabled),.pdf-viewer-next:hover:not(:disabled){background:var(--paper);}
.pdf-viewer-prev:disabled,.pdf-viewer-next:disabled{opacity:.35;cursor:default;}
.pdf-viewer-download{
  font:600 .8rem/1 'Space Grotesk',sans-serif;
  padding:9px 16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--navy);
  cursor:pointer;
  transition:background .15s, opacity .15s;
  white-space:nowrap;
}
.pdf-viewer-download:hover:not(:disabled){background:var(--paper);}
.pdf-viewer-download:disabled{opacity:.6;cursor:default;}
.pdf-viewer-pagenum{
  font:500 .85rem/1 'Space Grotesk',sans-serif;
  color:var(--slate);
  min-width:120px;
  text-align:center;
}
@media(max-width:680px){
  .pdf-viewer{max-width:100%;}
}