/* ============================================================
   DYNANCA — BASE / SHELL
   Reset, type scale, buttons, header, drawer, footer, FAB.
   Shared by index.html and belajar.html.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--fb);font-size:17px;line-height:1.65;color:var(--body);
  background:var(--bg);-webkit-font-smoothing:antialiased;
  transition:background-color var(--dur),color var(--dur);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--night);color:#fff;padding:10px 18px;border-radius:8px;z-index:999}
.skip:focus{inset-inline-start:8px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}
section{scroll-margin-top:calc(var(--header-h) + 16px)}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Scrollbar (subtle, theme-aware) ---------- */
* { scrollbar-color: var(--scrollbar) transparent; scrollbar-width: thin; }

/* ---------- Type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:8px;height:8px;border:2px solid var(--accent);border-radius:50%;flex:none}
.eyebrow::after{content:"";width:26px;height:1px;flex:none;background-image:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 10px)}
.on-dark .eyebrow{color:var(--gold-2)}
.on-dark .eyebrow::before{border-color:var(--gold-2)}
.on-dark .eyebrow::after{background-image:repeating-linear-gradient(90deg,var(--gold-2) 0 5px,transparent 5px 10px)}

.h1{font-family:var(--fd);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.h2{font-family:var(--fd);font-weight:700;font-size:clamp(27px,3.4vw,42px);line-height:1.14;letter-spacing:-.01em;color:var(--ink)}
.h3{font-family:var(--fd);font-weight:600;font-size:clamp(19px,1.8vw,23px);line-height:1.3;color:var(--ink)}
.lede{font-size:clamp(16px,1.3vw,18.5px);line-height:1.7;color:var(--body);max-width:60ch}
.on-dark{color:var(--on-dark)}
.on-dark .h1,.on-dark .h2,.on-dark .h3{color:#fff}
.on-dark .lede{color:var(--on-dark-muted)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(34px,4.6vw,56px)}
.sec-head .lede{margin-top:12px}
code, .mono{font-family:var(--fm)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:.005em;padding:14px 24px;border-radius:999px;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);white-space:nowrap}
.btn .icon{width:17px;height:17px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(var(--accent-rgb),.32)}
.btn-accent:hover{background:#2c50aa}
/* Dark theme's --accent is a light blue (needed for readable text/links on
   dark surfaces) — using it as a solid button fill needs dark text on top
   to clear WCAG AA contrast, so this is a deliberate light-on-accent flip,
   not an inconsistency with the rest of the dark palette. */
:root[data-theme="dark"] .btn-accent{color:var(--night)}
:root[data-theme="dark"] .btn-accent:hover{background:#8fb0f5}
.btn-ink{background:var(--night);color:#fff}
.btn-ink:hover{background:var(--night-3)}
.btn-ghost{border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-line{border:1px solid var(--line-strong);color:var(--ink);background:var(--paper)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:10px 16px;font-size:13.5px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);background:var(--paper);transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.btn-icon:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled],.btn-icon[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---------- Reveal (progressive enhancement — visible by default) ---------- */
.reveal{transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js-reveal .reveal{opacity:0;transform:translateY(18px)}
html.js-reveal .reveal.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================ HEADER */
.header{position:fixed;inset-block-start:0;inset-inline:0;z-index:130;color:#fff;transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.header.scrolled{background:rgba(15,19,32,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--on-dark-line),0 12px 34px rgba(0,0,0,.22)}
:root[data-theme="light"] .header.scrolled{background:rgba(247,246,242,.92);color:var(--ink);box-shadow:0 1px 0 var(--line),0 12px 34px rgba(10,15,28,.08)}
.header:not(.scrolled){background:var(--night)}
.nav{height:var(--header-h);display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.01em;color:inherit;margin-inline-end:auto}
.brand img,.brand svg.brand-mark{height:30px;width:30px;display:block;flex:none}
.brand em{font-style:normal;color:var(--gold-2)}
.brand-logo-light,.brand-logo-dark,.brand-logo-fixed{width:auto!important;height:26px}
.brand img.brand-logo-dark{display:none}
:root[data-theme="light"] .header.scrolled .brand-logo-dark{display:block}
:root[data-theme="light"] .header.scrolled .brand-logo-light{display:none}
.foot-brand .brand img{width:auto!important;height:42px}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.nav-a{font-size:var(--fs-nav);font-weight:500;letter-spacing:.01em;opacity:.92;padding:8px 2px;position:relative}
.nav-a::after{content:"";position:absolute;inset-inline-start:0;bottom:2px;width:0;height:2px;background:var(--gold-2);transition:width var(--dur)}
.nav-a:hover::after,.nav-a[aria-current="page"]::after{width:100%}
.hdr-controls{display:flex;align-items:center;gap:8px}
.ctrl-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.04em;padding:8px 12px;border:1px solid rgba(255,255,255,.30);border-radius:999px;color:inherit}
.header.scrolled .ctrl-btn{border-color:var(--on-dark-line)}
:root[data-theme="light"] .header.scrolled .ctrl-btn{border-color:var(--line-strong)}
.ctrl-btn .icon{width:16px;height:16px}
.ctrl-btn:hover{border-color:var(--gold-2);color:var(--gold-2)}
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:22px;height:2px;background:currentColor;transition:var(--dur)}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:150;background:var(--night);color:#fff;padding:24px var(--gutter) 32px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);overflow-y:auto}
body.drawer-open .drawer{transform:none}
body.drawer-open{overflow:hidden}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.drawer-close{padding:8px}
.drawer a.d-link{font-family:var(--fd);font-size:24px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--on-dark-line);display:block}
.drawer-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--on-dark-line);font-size:var(--fs-meta);color:var(--on-dark-muted)}
.drawer-row .pick{display:flex;gap:8px}
.drawer-row .pick button{font-size:13px;font-weight:700;padding:7px 13px;border:1px solid var(--on-dark-line);border-radius:999px;color:#fff}
.drawer-row .pick button[aria-current="true"]{background:var(--accent-2);border-color:var(--accent-2);color:var(--night)}
.drawer .btn{margin-top:22px}

/* ============================================================ FOOTER */
.footer{background:var(--night);color:var(--on-dark-muted);padding:clamp(52px,6vw,80px) 0 0;font-size:var(--fs-meta)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:clamp(38px,5vw,60px)}
.foot-brand .brand{color:#fff;margin:0 0 14px}
.foot-brand p{font-size:var(--fs-meta);line-height:1.75;max-width:34ch}
.foot-tag{margin-top:16px;font-style:italic;color:var(--gold-2);font-size:var(--fs-meta)}
.foot-col h4{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col ul{display:grid;gap:10px}
.foot-col a{transition:color var(--dur-fast);font-size:var(--fs-meta)}
.foot-col a:hover{color:var(--gold-2)}
.foot-bottom{border-top:1px solid var(--on-dark-line);padding:20px 0;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:var(--fs-meta);color:var(--on-dark-muted)}
.foot-bottom .brand-word{color:#fff;font-weight:600}

/* ============================================================ RESPONSIVE (shell) */
@media (max-width:900px){
  .nav-links,.hdr-controls,.nav-cta{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
}
@media (max-width:520px){
  :root{--header-h:64px}
  .foot-grid{grid-template-columns:1fr}
  .foot-brand{grid-column:auto}
}