/* =========================================================================
   WAW Multimedia — Global stylesheet
   Anchor: _brand-spine.md v1.3 + vis/09-animation-motion/spec.md
   Register: Strategic Dark / Diagnostic B2B. Motion = restrained & purposeful.
   ========================================================================= */

/* ---- Fonts (Google Fonts) ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Nunito+Sans:wght@400;600;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- Design tokens (CSS vars mirror tw-config.js) ------------------------ */
:root {
  --navy: #020F3A;
  --navy-700: #0A1B4D;
  --signal: #1F6BFF;
  --amber: #E89C2A;
  --pink: #D96BAF;
  --lavender: #B98AFF;
  --warmwhite: #FAF7F2;
  --charcoal: #2D2D2D;
  --hairline: #C8C2B8;
  --ash: #5C5C5C;
  --fog: #E8E5DF;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Material — section reveal */
  --dur-micro: 200ms;
  --dur-section: 600ms;

  --header-h: 80px;
}

/* ---- Base ---------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  font-family: '"Proxima Nova"', 'Nunito Sans', system-ui, sans-serif;
  background: var(--navy);
  color: var(--warmwhite);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* tighten Exo 2 display per typography spec (optical kerning, -2% H1) */
.font-display { letter-spacing: -0.02em; }

/* longform reading width */
.read-width { max-width: 680px; }

/* ---- Distinctive Brand Asset: WAW Dot-Grid supergraphic ----------------- */
.dot-grid {
  background-image: radial-gradient(rgba(250,247,242,0.12) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
}
.dot-grid-amber {
  background-image: radial-gradient(rgba(232,156,42,0.22) 1.4px, transparent 1.4px);
  background-size: 32px 32px;
}
.dot-grid-dark {
  background-image: radial-gradient(rgba(2,15,58,0.10) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
}

/* hairline divider (1px, never decorative) */
.hairline { border: 0; border-top: 1px solid var(--hairline); opacity: .5; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; font-weight: 600; font-family: 'Nunito Sans', sans-serif;
  transition: background var(--dur-micro) ease, color var(--dur-micro) ease,
              transform var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: #1759d6; }
.btn-primary .ico { transition: transform var(--dur-micro) ease; }
.btn-primary:hover .ico { transform: translateX(4px); } /* micro: translate 4px */
.btn-outline { border: 1px solid var(--hairline); color: var(--warmwhite); }
.btn-outline:hover { border-color: var(--warmwhite); }

/* animated underline link (0% -> 100% from left, 300ms) */
.link-underline { position: relative; }
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: currentColor; transition: width 300ms ease;
}
.link-underline:hover::after { width: 100%; }

/* ---- Motion: reveal initial states (only when JS active, avoids FOUC) ---- */
html.js [data-reveal] { opacity: 0; transform: translateY(20px); }
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); }

/* loader progress bar (Signal Blue 2px) */
#waw-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--signal); z-index: 9999; transition: width 300ms ease;
}

/* ---- Header ------------------------------------------------------------- */
#site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav-shell {
  /* always-on subtle navy bar so nav stays readable over BOTH dark and light heroes */
  background: rgba(2,15,58,0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
#site-header.scrolled .nav-shell {
  background: rgba(2,15,58,0.92);
  box-shadow: 0 1px 0 rgba(200,194,184,0.12);
}
.nav-link { color: var(--warmwhite); opacity: .85; transition: opacity var(--dur-micro) ease; }
.nav-link:hover, .nav-link[aria-current="page"] { opacity: 1; }

/* mobile menu */
#mobile-menu { transition: opacity var(--dur-micro) ease, visibility var(--dur-micro) ease; }
#mobile-menu.hidden-menu { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- Mega menu (Solusi) ---- */
.mega-panel {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: rgba(2,15,58,0.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 28px 56px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.mega-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
[data-mega-btn][aria-expanded="true"] .mega-chev { transform: rotate(180deg); }
.mega-card {
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03); padding: 22px;
  transition: border-color var(--dur-micro) ease, background var(--dur-micro) ease, transform var(--dur-micro) ease;
}
.mega-card:hover { border-color: rgba(31,107,255,0.6); background: rgba(31,107,255,0.07); transform: translateY(-2px); }
.mega-arrow { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--signal); }
.mega-arrow svg { transition: transform var(--dur-micro) ease; }
.mega-card:hover .mega-arrow svg { transform: translateX(3px); }

/* ---- Language switch (ID | EN) ---- */
.lang-btn { color: rgba(250,247,242,0.6); transition: background var(--dur-micro) ease, color var(--dur-micro) ease; }
.lang-btn:hover { color: var(--warmwhite); }
.lang-btn.active { background: var(--signal); color: #fff; }

/* ---- Accessibility: respect reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Responsive type helpers (mobile adjust, desktop = Figma) ----------- */
.h1-hero { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.h2-section { font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -0.01em; }
.h3-sub { font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.2; }
.sla-hero { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .95; letter-spacing: -0.03em; }

/* ---- Article body (Sekolah Spec longform dari CMS) ---------------------- */
.article-body { color: var(--charcoal, #2D2D2D); }
.article-body .lede { font-weight: 600; font-style: italic; line-height: 1.625; color: #5C5C5C; }
.article-body h2 { margin-top: 3rem; font-family: var(--font-display, inherit); font-size: 1.5rem; font-weight: 700; color: #020F3A; }
.article-body h3 { margin-top: 2rem; font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 700; color: #020F3A; }
.article-body p { margin-top: 1rem; font-size: 1rem; line-height: 1.7; }
.article-body em { font-weight: 600; font-style: normal; color: #020F3A; }
.article-body strong { font-weight: 700; color: #020F3A; }
.article-body ul, .article-body ol { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; padding-left: 1.5rem; font-size: 1rem; line-height: 1.7; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body ul li::marker, .article-body ol li::marker { color: #1F6BFF; }
.article-body figure.spec-table { margin-top: 2.5rem; overflow: hidden; border-radius: 2px; border: 1px solid #C8C2B8; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.article-body figure.spec-table figcaption { background: #020F3A; padding: 1rem 1.5rem; font-family: var(--font-display, inherit); font-size: .875rem; font-weight: 700; color: #FAF7F2; }
.article-body figure.spec-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; background: #fff; }
.article-body figure.spec-table th { background: rgba(232,229,223,.7); padding: .875rem 1.5rem; font-family: monospace; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(45,45,45,.6); }
.article-body figure.spec-table td { border-top: 1px solid #C8C2B8; padding: 1rem 1.5rem; color: #5C5C5C; }
.article-body figure.spec-table td:first-child { font-weight: 600; color: #020F3A; }
.article-body img { max-width: 100%; border-radius: 2px; border: 1px solid #C8C2B8; }
.article-body blockquote { margin-top: 1.5rem; border-left: 3px solid #1F6BFF; padding-left: 1.25rem; font-style: italic; color: #5C5C5C; }

/* ---- Sekolah Spec placeholder art (kartu tanpa cover) --------------------- */
.spec-hero-art { background: linear-gradient(135deg, #020F3A 0%, #102461 55%, #1F6BFF 130%); }
.spec-card-art { background: linear-gradient(135deg, #0A1B4D 0%, #020F3A 70%); }