/* bundle-index.css — dibuat oleh build-css.py, JANGAN diedit langsung. Edit assets/css/src/ lalu jalankan ulang. */

/* >>> fonts.css */
/* ==========================================================================
   Font lokal (self-hosted, subset latin). Hanya 5 file yang benar-benar dipakai:
   - Schibsted Grotesk 400 / 500 / 700 -> teks isi, menu, tombol  (var(--font))
   - Space Grotesk 700                -> semua heading & angka besar (var(--font-head))
   - JetBrains Mono 500               -> label, tag, penomoran      (var(--font-mono))
   Permintaan bobot yang tidak ada otomatis jatuh ke bobot terdekat (mis. 800 -> 700);
   html { font-synthesis: none } di base.css mencegah faux-bold.
   font-display: block + semua font di-preload di <head> setiap halaman -> teks tampil langsung
   dengan font final (tidak ada kedipan ganti family). Jika menambah font baru, tambahkan juga
   <link rel="preload"> di semua halaman.
   ========================================================================== */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url('../fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: block; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* >>> tokens.css */
/* ==========================================================================
   TOKEN DESAIN — satu-satunya tempat variabel global
   Warna, tipografi fluid, jarak, tinggi header, easing.
   Oranye brand #DD5326 (var --violet; nama lama dipertahankan) untuk bidang besar & dekorasi.
   Tombol utama memakai --cta (#AE3815) + teks putih = 6.2:1. Teks di atas oranye = ink.
   Tinggi header (--header-h) KONSTAN: jangan diubah saat scroll (memicu layout shift).
   ========================================================================== */
:root {
  /* Palet: oranye #DD5326 (var --violet, nama lama dipertahankan) + stage gelap #090B12.
     Teks di atas oranye = ink (kontras ±5:1); putih hanya di atas --violet-deep. */
  --paper: #FFFAF6;
  --ink: #090B12;
  --violet: #DD5326;
  --violet-deep: #B8401D;
  --lilac: #F6B9A2;
  --tint: #FDEDE5;
  --muted: #57534E;
  --rule: rgba(9, 11, 18, 0.16);
  --rule-on-ink: rgba(255, 250, 246, 0.2);
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Space Grotesk', 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --step-display: clamp(3rem, 7vw, 6.5rem);
  --step-hero: clamp(2.6rem, 5.4vw, 5rem);
  --step-title: clamp(2rem, 4.2vw, 3.75rem);
  --step-heading: clamp(1.35rem, 1.6vw + 0.6rem, 2rem);
  --step-lead: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 4.5rem;
  /* tinggi header: KONSTAN. Jangan diubah saat scroll (memicu layout shift → header bergetar) */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Varian & hiasan */
  --violet-dark: #9A3416;
  --cta: #AE3815;
  --ghost: #F6C2AD; /* massa besar hiasan (1.4:1 di atas kertas) */
  --slate: #262E45;
}

/* HP kecil (<= 389px): judul tidak terpotong */
@media (max-width: 389px) {
  :root {
    --step-display: calc((100vw - 2.5rem) * 0.145);
    --step-hero: clamp(2.1rem, 11vw, 2.6rem);
    --step-title: clamp(1.75rem, 8.5vw, 2.2rem);
  }
}

/* >>> base.css */
/* ==========================================================================
   BASE — reset, aksesibilitas, grid 12 kolom, tipografi
   Dimuat di semua halaman, setelah tokens.css. Prefix komponen situs: sw-
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
body.sw {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.sw) img { display: block; max-width: 100%; }
:where(.sw) a { color: inherit; text-decoration: none; }
:where(.sw) :is(h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote) { margin: 0; padding: 0; }
:where(.sw) :is(ul, ol) { list-style: none; }
.sw ::selection { background: var(--violet); color: var(--ink); }
.sw a:focus-visible, .sw button:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.sw-on-ink a:focus-visible { outline-color: #fff; }
.sw-on-violet a:focus-visible { outline-color: var(--ink); }
.hidden { display: none !important; }

/* ---------- Skip link ---------- */
.sw-skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  font-size: var(--step-small);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.sw-skip:focus { top: 0.75rem; }

/* ---------- Grid 12 kolom ---------- */
.sw-wrap { position: relative; z-index: 1; width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.sw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sw-grid > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .at-5-8 { grid-column: 5 / span 8; }
  .r2 { grid-row: 2; }
  .at-6-7 { grid-column: 6 / span 7; }
  .col-3 { grid-column: span 3; }
  .col-9 { grid-column: span 9; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-7 { grid-column: span 7; }
  .at-4-9 { grid-column: 4 / span 9; }
  .at-8-5 { grid-column: 8 / span 5; }
  .at-9-4 { grid-column: 9 / span 4; }
  .at-7-6 { grid-column: 7 / span 6; }
}
.sw-section { padding-block: var(--section); }
.sw-ruled { border-top: 1px solid var(--rule); }
.sw-on-ink { background: var(--ink); color: var(--paper); }
.sw-on-ink .sw-ruled, .sw-on-ink.sw-ruled { border-color: var(--rule-on-ink); }

/* ---------- Tipografi ---------- */
.sw-display { font-size: var(--step-display); line-height: 0.95; font-weight: 800; letter-spacing: -0.045em; }
.sw-title { font-size: var(--step-title); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.sw-heading { font-size: var(--step-heading); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.sw-lead { font-size: var(--step-lead); line-height: 1.45; max-width: 34ch; }
.sw-body { max-width: 44ch; }
.sw-muted { color: var(--muted); }
.sw-label { font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.sw-on-ink .sw-muted, .sw-on-ink .sw-label { color: rgba(255, 250, 246, 0.72); }
.sw-on-violet .sw-label, .sw-on-violet .sw-muted { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sw-skip { transition: none; }
}

/* ---------- Font roles (lihat fonts.css) ---------- */
html { font-synthesis: none; }
/* Heading & angka besar -> Space Grotesk */
h1, h2, h3, h4, .sw-step b, .lm-stat-num,
.sw-pillar::before, .sw-quote blockquote, .sw-header .sw-mobile a:not(.sw-btn) { font-family: var(--font-head); }
/* Label, tag, penomoran -> JetBrains Mono (hanya aksen kecil, bukan paragraf) */
.sw-label, .lm-contact-label, .lm-stat-label, .sw-line .sw-aside span,
.lm-contact-no, .lm-contact-go, .sw-row::before, .sw-line::before,
.sw-header .sw-mobile a:not(.sw-btn)::before { font-family: var(--font-mono); font-weight: 500; }

/* >>> buttons.css */
/* ==========================================================================
   TOMBOL & LINK — persegi, datar (Swiss minimal)
   .sw-btn (outline), .sw-btn-solid (CTA utama, --cta), .sw-link (teks bergaris bawah).
   Tombol di band oranye ada di sections.css; tombol header & menu mobile ada di header.css.
   ========================================================================== */
.sw-link {
  font-weight: 700;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sw-link:hover { color: var(--cta); }
.sw-on-ink .sw-link:hover { color: var(--lilac); }
.sw-on-violet .sw-link:hover { color: var(--paper); }

/* ---------- Tombol ---------- */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  padding: 0 1.75rem;
  font: 700 var(--step-small)/1 var(--font);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sw-btn:hover { background: var(--ink); color: var(--paper); }
.sw-on-ink .sw-btn { border-color: var(--paper); color: var(--paper); }
.sw-on-ink .sw-btn:hover { background: var(--paper); color: var(--ink); }
.sw-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sw-btn-solid { background: var(--cta); border-color: var(--cta); color: #fff; }
.sw-btn-solid:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.sw-on-ink .sw-btn-solid { background: var(--cta); border-color: var(--cta); color: #fff; }
.sw-on-ink .sw-btn-solid:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.sw-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sw-on-ink .sw-btn:focus-visible { outline-color: #fff; }
@media (max-width: 899px) {
  /* area sentuh >= 44px */
  .sw-link { position: relative; }
  .sw-link::after { content: ""; position: absolute; inset: -0.85rem -0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-btn { transition: none; }
}

/* >>> header.css */
/* ==========================================================================
   HEADER, NAVIGASI & MENU MOBILE
   Tinggi header konstan (--header-h). Efek "compact" saat scroll hanya lewat logo mengecil + bayangan (.is-scrolled).
   Desktop >= 1024px: grid 3 kolom (logo | nav | CTA). Di bawahnya: tombol Menu + panel penuh (.sw-mobile).
   ========================================================================== */
.sw-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 250, 246, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow 0.25s var(--ease);
}
.sw-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(9, 11, 18, 0.45); }
.sw-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: var(--header-h); }
.sw-header-right { display: flex; align-items: center; gap: 0.75rem; }

/* ---------- Logo ---------- */
.sw-logo { display: inline-flex; align-items: center; }
.sw-logo img { width: auto; height: 2.6rem; transition: height 0.25s var(--ease); }
.sw-header.is-scrolled .sw-logo img { height: 2.25rem; }

/* ---------- Nav desktop ---------- */
.sw-nav { display: none; align-items: center; height: 100%; gap: 1.9rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; }
.sw-nav a { position: relative; display: flex; align-items: center; height: 100%; padding: 0; color: var(--ink); }
.sw-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.sw-nav a:hover::after, .sw-nav a:focus-visible::after { transform: scaleX(1); }
.sw-nav [aria-current="page"] { font-weight: 700; }
.sw-nav [aria-current="page"]::after { background: var(--cta); transform: scaleX(1); }

/* Separator samar antara About dan Batch */
.sw-nav-sep { display: block; width: 1px; height: 1.1rem; background: var(--rule); margin-inline: -0.35rem; }

/* Sub-menu Batch (desktop): muncul saat hover / fokus keyboard. Garis tipis, tanpa bayangan. */
.sw-nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.sw-nav-item > a { gap: 0.45rem; }
.sw-nav-item > a:not([href]), .sw-mobile a:not([href]) { cursor: default; } /* Batch & Division = pembuka submenu, bukan link */
.sw-nav-item > a::before {
  content: "";
  order: 2;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.1rem;
  transition: rotate 0.25s var(--ease);
}
.sw-nav-item:hover > a::before, .sw-nav-item:focus-within > a::before { rotate: 225deg; translate: 0 0.08rem; }
.sw-sub {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  min-width: 11.5rem;
  padding: 0.4rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  visibility: hidden;
  opacity: 0;
  translate: 0 -0.4rem;
  transition: opacity 0.2s var(--ease), translate 0.25s var(--ease), visibility 0s linear 0.25s;
}
.sw-nav-item:hover .sw-sub, .sw-nav-item:focus-within .sw-sub { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.sw-nav .sw-sub a { display: block; height: auto; padding: 0.7rem 1.1rem; font-weight: 500; transition: background-color 0.2s var(--ease), padding 0.25s var(--ease); }
.sw-nav .sw-sub a::after { display: none; }
.sw-nav .sw-sub a:hover, .sw-nav .sw-sub a:focus-visible { background: var(--tint); padding-left: 1.45rem; }

/* ---------- CTA & tombol menu ---------- */
.sw-header-cta { display: none; height: 2.75rem; padding: 0 1.4rem; }
.sw-menu-btn {
  height: 2.5rem;
  padding: 0 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 var(--step-small)/1 var(--font);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.sw-menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.sw-menu-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Menu mobile: panel penuh di bawah header ---------- */
.sw-mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.sw-mobile-inner { padding-block: 0.5rem 1.5rem; }
.sw-mobile a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sw-mobile a:not(.sw-btn)[aria-current]::after { content: ""; width: 0.6rem; height: 0.6rem; background: var(--cta); }
.sw-mobile a.is-current, .sw-mobile a[aria-current="page"]:not(.sw-btn) { color: var(--cta); }
/* Sub-menu Batch di panel mobile: selalu terbuka, menjorok, tanpa nomor */
.sw-mobile-sub { padding-left: 1rem; }
.sw-mobile .sw-mobile-sub a { padding: 0.7rem 0; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sw-mobile a.sw-btn {
  width: 100%;
  margin-top: 1.25rem;
  justify-content: center;
  height: 3.25rem;
  padding: 0 1.75rem;
  font-size: 0.95rem;
  letter-spacing: 0;
  background: var(--cta);
  border: 2px solid var(--cta);
  color: #fff;
}
.sw-mobile a.sw-btn:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- Desktop >= 1024px ---------- */
@media (min-width: 1024px) {
  .sw-header-bar { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 2rem; }
  .sw-logo { justify-self: start; }
  .sw-nav { display: flex; justify-self: center; }
  .sw-header-right { justify-self: end; }
  .sw-header-cta { display: inline-flex; }
  .sw-menu-btn, .sw-mobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-header, .sw-logo img, .sw-nav a::after, .sw-sub, .sw-nav-item > a::before { transition: none; }
}

/* >>> footer.css */
/* ==========================================================================
   FOOTER
   Gelap (--ink). Di mobile, ruang untuk dock bawah disediakan di dalam footer (lihat mobile-nav.css).
   ========================================================================== */
.sw-footer { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.sw-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule-on-ink);
}
@media (min-width: 900px) {
  .sw-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gap); }
}
.sw-footer img { height: 3rem; width: auto; margin-bottom: 1.25rem; }
.sw-footer h4 { margin: 0 0 1rem; font-size: var(--step-small); font-weight: 700; color: var(--lilac); }
.sw-footer li + li { margin-top: 0.6rem; }
.sw-footer li a { font-size: 0.95rem; color: rgba(255, 250, 246, 0.88); }
.sw-footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.sw-footer .sw-about { max-width: 36ch; color: rgba(255, 250, 246, 0.78); font-size: 0.95rem; }
.sw-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 250, 246, 0.68);
}
.sw-footer-bottom a:hover { color: #fff; }
@media (max-width: 899px) {
  /* area sentuh >= 44px */
  .sw-footer li + li { margin-top: 0; }
  .sw-footer li a { display: block; padding: 0.7rem 0; overflow-wrap: anywhere; }
  .sw-footer-bottom { gap: 0; }
  .sw-footer-bottom a { display: inline-block; padding: 0.7rem 0; }
}

/* Footer ramping: hanya baris copyright + back to top (dipakai semua halaman aktif; markup dari partials/footer.html) */
.sw-footer-slim { padding-top: 0; }
.sw-footer-slim .sw-footer-bottom { padding-top: 1.5rem; border-top: 1px solid var(--rule-on-ink); }

/* >>> decor.css */
/* ==========================================================================
   HIASAN GEOMETRIS (.sw-deco) & GRAFIK SAMPING (.sw-side-art)
   Prinsip: skala tidak sama (satu raksasa, satu kecil), posisi dipotong tepi section, sudut miring, tidak simetris. Selalu di belakang teks.
   Pakai: <div class="sw-deco" aria-hidden="true"><i class="circle c-l" style="--x:70%;--y:-14%;--s:30rem"></i></div>
   Variabel: --x --y (posisi %), --s (ukuran) atau --w/--h, --r (rotasi), --d (urutan masuk)
   Bentuk: circle quarter half ring dots slash tri plus blackhole wedge shard blade  |  Samar: --o (opacity akhir, 0-1)  |  Warna: c-v c-i c-l c-p c-d c-g c-s  |  .desk = hanya desktop
   ========================================================================== */
.sw-rel { position: relative; isolation: isolate; overflow: hidden; }
.sw-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

/* ---------- Posisi, masuk, goyang ---------- */
.sw-deco i {
  position: absolute;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--w, var(--s));
  height: var(--h, var(--s));
  translate: var(--px, 0px) var(--py, 0px);   /* diisi parallax (swiss.js) */
  rotate: calc(var(--r, 0deg) + var(--sr, 0deg));
  /* masuk (drift) sekali + goyang halus (wiggle) terus-menerus */
  animation-name: sw-drift, sw-wiggle;
  animation-duration: 1s, var(--wd, 7s);
  animation-timing-function: var(--ease), ease-in-out;
  animation-delay: calc(var(--d, 0) * 90ms + 100ms), calc(var(--d, 0) * 90ms + 1200ms);
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: backwards, none;
  opacity: calc(var(--o, 1) * var(--oe, 0.5));
}
/* bentuk SOLID (bidang penuh) dibuat sangat samar; bentuk garis/titik/ring tetap lebih jelas */
/* pengaman: bentuk solid besar (segitiga, trapesium, kotak, setengah/seperempat lingkaran) tidak dipakai lagi */
.sw-deco i:is(.tri, .wedge, .shard, .blade, .half, .quarter, .sq) { display: none; }
.sw-deco i:not(.ring, .dots, .slash, .plus, .circle, .bar, .blackhole) { --oe: 0.16; }
.sw-deco i:is(.ring, .dots, .slash, .plus, .circle, .bar) { --oe: 0.2; }   /* hiasan kecil: X, titik, lingkaran, garis = 0.2 */
.sw-deco i.blackhole { --oe: 1; }
.sw-js .sw-deco i:not(.is-in) { animation-play-state: paused; } /* animasi masuk baru jalan saat bentuk terlihat (.is-in dari JS) */
.sw-deco i:nth-child(2n) { --wd: 9s; --wx: -7px; --wy: 12px; }
.sw-deco i:nth-child(3n) { --wd: 6s; --wx: 5px; --wy: -10px; }
.sw-deco i:nth-child(5n) { --wd: 11s; --wx: 9px; --wy: 16px; }
@keyframes sw-drift {
  from { opacity: 0; transform: translate(var(--dx, 3rem), var(--dy, -2rem)); }
  to { opacity: calc(var(--o, 1) * var(--oe, 0.5)); transform: none; }
}
@keyframes sw-wiggle {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--wx, -6px), var(--wy, -14px)); }
}

/* ---------- Bentuk ---------- */
.sw-deco .circle { border-radius: 50%; }
.sw-deco .quarter { border-radius: 100% 0 0 0; }
.sw-deco .half { border-radius: 999px 999px 0 0; }
.sw-deco .ring { border-radius: 50%; border: 2px solid currentColor; background-color: transparent !important; }
.sw-deco .dots {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.8px);
  background-size: 16px 16px;
  background-color: transparent !important;
}
.sw-deco .slash {
  background-image: repeating-linear-gradient(-45deg, currentColor 0 2px, transparent 2px 11px);
  background-color: transparent !important;
}
.sw-deco .tri { clip-path: polygon(0 100%, 100% 100%, 0 0); }
.sw-deco .plus {
  background-color: transparent !important;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 100% 12%, 12% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Bentuk tambahan: black hole + globe wireframe + geometri asimetris (dipakai seksi "Ready to ...") ---------- */
.sw-deco .globe {
  background-color: currentColor !important;   /* garis tipis (stroke 0.26/100): cocok untuk ukuran raksasa */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.26%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cpath%20d=%22M50%202V98%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244.35%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2233.94%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2218.37%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2291.57%22%20rx=%2224%22%20ry=%224.08%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2280.85%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2266.42%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%228.16%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2233.58%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2219.15%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%228.43%22%20rx=%2224%22%20ry=%224.08%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.26%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cpath%20d=%22M50%202V98%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244.35%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2233.94%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2218.37%22%20ry=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2291.57%22%20rx=%2224%22%20ry=%224.08%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2280.85%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2266.42%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%228.16%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2233.58%22%20rx=%2245.11%22%20ry=%227.67%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2219.15%22%20rx=%2236.77%22%20ry=%226.25%22/%3E%3Cellipse%20cx=%2250%22%20cy=%228.43%22%20rx=%2224%22%20ry=%224.08%22/%3E%3C/svg%3E") center / contain no-repeat;
}
/* "Blackhole" = garis orbit tipis yang saling silang (elips berbagai kemiringan), mengikuti referensi desain PT. Warna ikut c-*. Tanpa bidang solid. */
.sw-deco .blackhole {
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.16%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2240%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2230%22%20transform=%22rotate%2822%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2222%22%20transform=%22rotate%28-35%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2236%22%20transform=%22rotate%2858%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2216%22%20transform=%22rotate%2880%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2226%22%20transform=%22rotate%28-62%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2212%22%20transform=%22rotate%2812%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2246%22%20ry=%2233%22%20transform=%22rotate%28-14%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2220%22%20transform=%22rotate%2840%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244%22%20ry=%2244%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Ccircle%20cx=%2240%22%20cy=%2258%22%20r=%2236%22/%3E%3Ccircle%20cx=%2260%22%20cy=%2244%22%20r=%2230%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%220.16%22%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2240%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2230%22%20transform=%22rotate%2822%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2222%22%20transform=%22rotate%28-35%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2236%22%20transform=%22rotate%2858%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2216%22%20transform=%22rotate%2880%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2226%22%20transform=%22rotate%28-62%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2212%22%20transform=%22rotate%2812%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2246%22%20ry=%2233%22%20transform=%22rotate%28-14%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2248%22%20ry=%2220%22%20transform=%22rotate%2840%2050%2050%29%22/%3E%3Cellipse%20cx=%2250%22%20cy=%2250%22%20rx=%2244%22%20ry=%2244%22%20transform=%22rotate%280%2050%2050%29%22/%3E%3Ccircle%20cx=%2240%22%20cy=%2258%22%20r=%2236%22/%3E%3Ccircle%20cx=%2260%22%20cy=%2244%22%20r=%2230%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.sw-deco .wedge { clip-path: polygon(0 100%, 100% 100%, 100% 28%, 36% 0); }
.sw-deco .shard { clip-path: polygon(0 58%, 74% 0, 100% 100%, 14% 100%); }
.sw-deco .blade { clip-path: polygon(0 0, 100% 16%, 62% 100%); }

/* ---------- Warna ---------- */
.sw-deco .c-v { background-color: var(--violet); color: var(--violet); }
.sw-deco .c-i { background-color: var(--ink); color: var(--ink); }
.sw-deco .c-l { background-color: var(--lilac); color: var(--lilac); }
.sw-deco .c-p { background-color: var(--paper); color: var(--paper); }
.sw-deco .c-d { background-color: var(--violet-dark); color: var(--violet-dark); }
.sw-deco .c-g { background-color: var(--ghost); color: var(--ghost); }
.sw-deco .c-s { background-color: var(--slate); color: var(--slate); }

/* ---------- Konteks ---------- */
/* di dalam ubin galeri: tanpa parallax, hanya animasi masuk */
.sw-tile-art .sw-deco i {
  translate: none;
  rotate: var(--r, 0deg);
  animation: sw-drift 1s var(--ease) backwards;
  animation-delay: calc(var(--d, 0) * 90ms + 100ms);
}
/* teks di atas hiasan tidak boleh meluap */
.sw-deco ~ .sw-wrap :is(h1, h2, h3, p, li, dt, dd, address) { overflow-wrap: break-word; }
@media (max-width: 899px) {
  .sw-deco .desk { display: none; }
  /* hiasan di belakang teks lebih samar */
}
@media (prefers-reduced-motion: reduce) {
  .sw-deco i { animation: none; translate: none; }
}

/* ---------- Grafik samping: berputar mengikuti scroll, +90deg tiap klik FAQ ---------- */
.sw-side-art { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 10rem); margin-top: 2rem; }
.sw-side-art.is-big { width: min(100%, 18rem); margin-top: 2.5rem; }
.sw-side-art b {
  position: relative;
  display: block;
  aspect-ratio: 1;
  rotate: calc(var(--prog, 0) * var(--k, 1) * 180deg);
}
.sw-side-art i {
  position: absolute;
  inset: 0;
  display: block;
  rotate: calc(var(--n, 0) * 90deg);
  transition: rotate 0.7s var(--ease), transform 0.5s var(--ease);
}
.sw-side-art b:hover i { transform: scale(0.8); }
.sw-side-art i.q { border-radius: 100% 0 0 0; }
.sw-side-art i.c { border-radius: 50%; }
.sw-side-art i.h { inset: 0 0 50% 0; border-radius: 999px 999px 0 0; transform-origin: 50% 100%; }
.sw-side-art i.v { background: var(--violet); }
.sw-side-art i.k { background: var(--ink); }
.sw-side-art i.l { background: var(--lilac); }
@media (max-width: 899px) {
  .sw-side-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-side-art i { transition: none; }
}

/* ORBIT 3D (.sw-orb) — komponen bersama untuk hero (career, division/finance). CSS 3D sungguhan, tanpa JS, di kanan hero.
   Bola = 6 meridian + 5 paralel yang berputar pelan; tiap cincin orbit = satu divisi / satu tugas, membawa satu titik yang mengorbit
   (career: 6 cincin = 6 divisi; finance: 4 cincin = Process, Plan & track, Record, Report). Markup: lihat career.html / division/finance.html. Kekuatan garis disamakan dengan globe footer "Ready to ..." (±0.1).
   Warna: tema terang = oranye brand (lilac hilang di atas krem), tema gelap = lilac seperti footer. Atur ukuran/posisi/opacity di variabel .sw-orb. */
.sw-orb {
  --S: min(70vw, 64rem);          /* diameter bola */
  --W: calc(var(--S) * 1.75);     /* kanvas lebih besar dari bola supaya cincin luar tidak terpotong mask */
  --orb: var(--violet);
  --a-line: 0.3;                 /* kekuatan garis (tema terang) */
  --a-node: 0.5;                  /* titik divisi */
  position: absolute;
  right: calc(var(--S) * -0.675);
  top: 54%;
  width: var(--W);
  height: var(--W);
  translate: 0 -50%;
  color: var(--orb);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 38%);
  mask-image: linear-gradient(to right, transparent 4%, #000 38%);   /* memudar ke arah teks agar judul tetap bersih */
}
.sw-js .sw-orb {
  opacity: 0;
  scale: 0.94;
  transition: opacity 1.2s var(--ease), scale 1.2s var(--ease);
}
.sw-js .sw-orb.is-in {
  opacity: 1;
  scale: 1;
}
:root[data-theme^="dark"] .sw-orb { --orb: var(--lilac); --a-line: 0.24; --a-node: 0.5; }
.sw-orb-stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 46%; }
.sw-orb-scene { position: absolute; left: 50%; top: 50%; width: var(--S); height: var(--S); margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2); transform-style: preserve-3d; transform: rotateX(-16deg) rotateZ(-12deg); --R: calc(var(--S) / 2); }
.sw-orb-globe { position: absolute; inset: 0; transform-style: preserve-3d; }
.sw-orb-globe .m, .sw-orb-globe .l, .sw-orb .r {
  position: absolute;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: var(--a-line);
}
.sw-orb-globe .m { inset: 0; transform: rotateY(var(--a)); }
.sw-orb-globe .l {
  left: calc(50% - var(--c) * var(--R));
  top: calc(50% - var(--c) * var(--R));
  width: calc(var(--c) * var(--S));
  height: calc(var(--c) * var(--S));
  transform: translateY(calc(var(--sn) * var(--R) * -1)) rotateX(90deg);
}
.sw-orb .r {
  left: calc(50% - var(--k) * var(--R));
  top: calc(50% - var(--k) * var(--R));
  width: calc(var(--k) * var(--S));
  height: calc(var(--k) * var(--S));
  transform: rotateY(var(--y)) rotateX(var(--x));
}
.sw-orb .o { position: absolute; inset: -1px; border-radius: 50%; }
.sw-orb .n { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: currentColor; opacity: var(--a-node); }
@media (max-width: 899px) {
  .sw-orb { --S: 125vw; --W: calc(var(--S) * 1.75); right: -88vw; top: 58%; --a-line: 0.16; --a-node: 0.34; }
  :root[data-theme^="dark"] .sw-orb { --a-line: 0.12; --a-node: 0.28; }
  .sw-orb { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) { .sw-orb, .sw-orb-globe, .sw-orb .o { animation: none; } }

/* Varian .sw-orb--flow: globe tidak terpotong garis bawah hero, melintas ke seksi di bawahnya.
   Syarat: hero memakai overflow: visible, dan wadah halaman memotong sisi horizontal (overflow-x: clip) supaya tidak muncul scroll samping.
   Pusat globe di sekitar garis batas hero; bagian bawah memudar agar tidak mengalir sampai dasar halaman. */
.sw-orb--flow {
  top: 106%;
  -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 38%), linear-gradient(to bottom, #000 58%, transparent 90%);
  mask-image: linear-gradient(to right, transparent 4%, #000 38%), linear-gradient(to bottom, #000 58%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 899px) {
  .sw-orb--flow { -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 90%); mask-image: linear-gradient(to bottom, #000 58%, transparent 90%); top: 100%; }
}

/* >>> sections.css */
/* ==========================================================================
   SECTION UMUM — dipakai di banyak halaman
   Label+isi, pilar, hero halaman dalam, daftar baris, langkah, kutipan, band CTA, seksi tint.
   Komponen khusus satu halaman ada di file masing-masing (home-blocks, gallery, career, forms, faq, modal).
   ========================================================================== */

/* ---------- Section: label kiri + isi kanan ---------- */
.sw-label-col { padding-bottom: 1.5rem; }
.sw-label-col .sw-label { color: var(--ink); font-weight: 700; }
.sw-label-col p + p, .sw-label-col a { margin-top: 0.5rem; display: inline-block; }
.sw-pillars { display: grid; gap: 2.5rem var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .sw-pillars { grid-template-columns: 1fr 1fr; }
}
.sw-pillar { padding-top: 1rem; border-top: 2px solid var(--ink); }
.sw-pillar h3 { margin-bottom: 0.75rem; }
.sw-pillar p { color: var(--muted); max-width: 36ch; }
@media (max-width: 899px) {
  .sw-label-col .sw-link { margin-top: 0.75rem; }
}

/* ---------- Seksi tint & kolom kiri lengket ---------- */
.sw-tint { background: var(--tint); }
@media (min-width: 900px) {
  .sticky-col { position: sticky; top: 7rem; align-self: start; }
  .sticky-col.span2 { grid-row: 1 / span 2; }
}

/* ---------- Hero halaman dalam ---------- */
.sw-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--rule);
}
.sw-page-hero h1 {
  font-size: var(--step-hero);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.045em;
  max-width: 15ch;
  margin-left: -0.04em;
}
.sw-page-hero .sw-label { color: var(--ink); font-weight: 700; margin-bottom: 1.5rem; }
.sw-page-hero .sw-lead { margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 40ch; }

/* ---------- Daftar baris (non-link) ---------- */
.sw-list-rows { border-bottom: 1px solid var(--rule); }
.sw-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
.sw-line p { color: var(--muted); max-width: 42ch; }
/* Key specifications: label kecil (mono, kapital, abu) vs nilai spesifikasi (tebal, ink, garis aksen oranye) */
.sw-line .sw-aside { font-size: 0.95rem; font-weight: 700; line-height: 1.55; color: var(--ink); max-width: none; padding-left: 0.9rem; border-left: 3px solid var(--violet); }
.sw-line .sw-aside span { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4rem; }
@media (min-width: 900px) {
  .sw-line { grid-template-columns: 1.1fr 1.3fr 1fr; gap: var(--gap); align-items: baseline; }
  .sw-line-2 { grid-template-columns: 1fr 1.6fr; }
}
.sw-on-ink .sw-list-rows, .sw-on-ink .sw-line { border-color: var(--rule-on-ink); }
.sw-on-ink .sw-line p { color: rgba(255, 250, 246, 0.78); }

/* ---------- Langkah bertingkat (asimetri) ---------- */
.sw-steps { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.sw-step { border-top: 2px solid var(--ink); padding-top: 1rem; }
.sw-step b {
  display: block;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--cta);
  margin-bottom: 1.25rem;
}
.sw-step h3 { margin-bottom: 0.6rem; }
.sw-step p { color: var(--muted); max-width: 30ch; }
@media (min-width: 900px) {
  .sw-steps { grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
  .sw-step:nth-child(2) { margin-top: 2.5rem; }
  .sw-step:nth-child(3) { margin-top: 5rem; }
  .sw-step:nth-child(4) { margin-top: 7.5rem; }
}
.sw-on-ink .sw-step { border-color: var(--paper); }
.sw-on-ink .sw-step b { color: var(--lilac); }
.sw-on-ink .sw-step p { color: rgba(255, 250, 246, 0.78); }
.sw-on-ink .sw-step h3 { color: var(--paper); }

/* ---------- Kutipan visi ---------- */
.sw-quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--violet);
  color: var(--ink);
  padding-block: var(--section);
}
.sw-quote blockquote {
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 26ch;
}
.sw-quote .sw-label { color: var(--ink); }
.sw-quote cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Band CTA penutup ---------- */
.sw-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 34vw, 32rem); /* hiasan tidak menyentuh tombol saat teks pendek */
  padding-block: var(--section);
  background: var(--violet);             /* oranye: tidak menyatu dengan seksi gelap di atas / footer */
  color: var(--ink);
}
.sw-band > .sw-wrap { width: 100%; }
.sw-band .sw-grid { align-items: end; row-gap: 2.5rem; }
.sw-band h2 { max-width: 16ch; }
.sw-band p { margin-top: 1.5rem; max-width: 38ch; color: var(--ink); }
.sw-band .sw-btn-row { justify-content: flex-start; }
.sw-band .sw-btn { border-color: var(--ink); color: var(--ink); }
.sw-band .sw-btn:hover { background: var(--ink); color: var(--paper); }
.sw-band .sw-btn-solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sw-band .sw-btn-solid:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.sw-band a:focus-visible { outline-color: var(--ink); }

/* >>> home-blocks.css */
/* ==========================================================================
   BLOK HALAMAN UTAMA (index.html)
   Hero foto + About ada di home.css. Di sini: NOW & NEXT (roadmap melingkar interaktif) dan
   (READY TO BE A STAR? ada di star.css). Dimuat sebelum mobile.css.
   Data tahun/KPI ditulis langsung di index.html (satu <article class="nn-panel"> per tahun).
   ========================================================================== */

/* ---------- NOW & NEXT ---------- */
.nn { padding-block: clamp(3rem, 7vw, 6rem) var(--section); background: var(--tint); border-top: 3px solid var(--ink); }   /* blok tint + garis atas tegas = pemisah jelas dari About */
.nn-top { row-gap: 1.5rem; align-items: end; }
.nn-h1 { text-transform: uppercase; margin-left: -0.04em; }
.nn-h1 span { color: var(--violet); }
.nn-lead { color: var(--muted); max-width: 38ch; }
.nn-stage { border-color: rgba(9, 11, 18, 0.22); margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3.5rem); row-gap: 2.5rem; align-items: center; }

/* Dial melingkar */
.nn-dial { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; }
.nn-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nn-ring circle { fill: none; }
.nn-ring-dash { stroke: var(--rule); stroke-width: 0.3; stroke-dasharray: 0.5 1.7; }
.nn-ring-base { stroke: var(--rule); stroke-width: 0.35; }
.nn-ring-prog {
  stroke: var(--violet);
  stroke-width: 1.3;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--pct, 0));
  transition: stroke-dashoffset 0.8s var(--ease);
}
.nn-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.nn-core::before {   /* seperempat lingkaran brand, berputar 90° tiap pindah tahun */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: conic-gradient(var(--lilac) 0 25%, transparent 0);
  rotate: calc(var(--i, 0) * 90deg);
  transition: rotate 0.7s var(--ease);
}
.nn-core-year { font-family: var(--font-head); font-size: clamp(2.4rem, 9vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.nn-core-tag { margin-top: 0.6rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

.nn-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(3.4rem, 15vw, 4.75rem);
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), scale 0.35s var(--ease), border-color 0.25s var(--ease);
}
.nn-node b { font-size: clamp(0.72rem, 2.6vw, 0.95rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.nn-node small { margin-top: 0.2rem; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1; }
.nn-node:hover { scale: 1.08; }
.nn-node.is-done { background: var(--ink); color: var(--paper); }
.nn-node.is-active { background: var(--violet); border-color: var(--ink); color: var(--ink); scale: 1.16; z-index: 2; }
.nn-node:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Panel detail */
.nn-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nn-tag {
  display: inline-block;
  padding: 0.5rem 1.2rem 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
}
.nn-tag-now { background: var(--violet); color: var(--ink); }
.nn-count { font-family: var(--font-mono); font-size: var(--step-small); color: var(--muted); }
.nn-panel-title { margin-top: 1.5rem; max-width: 16ch; font-size: var(--step-title); line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.nn-panel-text { margin-top: 1.25rem; max-width: 52ch; color: var(--muted); }
.nn-kpis { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem var(--gap); }
.nn-kpi { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.nn-kpi-num { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.nn-kpi-label { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.nn-bar { display: block; height: 0.4rem; margin-top: 0.4rem; background: var(--rule); overflow: hidden; }
.nn-bar i { display: block; height: 100%; background: var(--violet); transform: scaleX(var(--p, 0)); transform-origin: left; }
.nn-panel + .nn-panel { margin-top: 3rem; }   /* tanpa JS: semua tahun tampil berurutan */
/* Dengan JS: semua panel ditumpuk di satu sel grid → tinggi = panel tertinggi, jadi ganti tahun tidak menggeser layout (CLS = 0) */
.sw-js .nn-stack { display: grid; }
.sw-js .nn-panel { grid-area: 1 / 1; }
.sw-js .nn-panel + .nn-panel { margin-top: 0; }
.sw-js .nn-panel:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.nn-panel.is-active .nn-bar i { animation: nn-grow 0.9s var(--ease) backwards; }
@keyframes nn-grow { from { transform: scaleX(0); } }
.sw-js .nn-panel.is-active { animation: nn-in 0.5s var(--ease) backwards; }
@keyframes nn-in { from { opacity: 0; transform: translateY(0.75rem); } }


@media (min-width: 900px) {
  .nn-dial { grid-column: 1 / span 5; }
  .nn-detail { grid-column: 7 / span 6; }
}
@media (max-width: 899px) {
  .nn-kpi-num { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-node, .nn-core::before, .nn-ring-prog { transition: none; }
  .nn-panel.is-active .nn-bar i, .sw-js .nn-panel.is-active { animation: none; }
}

/* >>> star.css */
/* ==========================================================================
   SEKSI PENUTUP "READY TO ..." (footer besar) — dipakai index, career, division/*, batch/*
   Pasangannya: footer ramping (.sw-footer-slim) di footer.css. Markup-nya DIBUAT oleh build-html.py (partials/star.html).
   Hiasan sengaja minim supaya konten tetap terbaca: 1 globe wireframe raksasa yang tipis & samar + 2 geometri asimetris.
   ========================================================================== */
.lm-star { padding-block: var(--section) clamp(3rem, 6vw, 5rem); }
.lm-star-grid { row-gap: 3rem; align-items: end; }
.lm-star-title { margin-top: 1.25rem; text-transform: uppercase; text-wrap: balance; max-width: 10ch; }
.lm-star-title span { color: var(--violet); }
.lm-star-lead { margin-top: 1.75rem; color: rgba(255, 250, 246, 0.82); max-width: 36ch; }
.lm-star-btns { margin-top: 2rem; }
.lm-star-side { display: flex; flex-direction: column; gap: 1.5rem; }
.lm-star-logo img { height: 3rem; width: auto; }
.lm-star-contact div { padding: 1rem 0; border-top: 1px solid var(--rule-on-ink); }
.lm-star-contact div:last-child { border-bottom: 1px solid var(--rule-on-ink); }
.lm-star-contact dt { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac); }
.lm-star-contact dd { margin-top: 0.25rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.lm-star-contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .lm-star-main { grid-column: 1 / span 7; }
  .lm-star-side { grid-column: 9 / span 4; }
}
@media (max-width: 899px) {
  .lm-star-contact a { display: inline-block; padding: 0.4rem 0; }   /* area sentuh */
}

.lm-star-title.is-wide { max-width: none; }

/* ---------- Hiasan seksi (di belakang konten; posisi & kekuatan diatur di sini, bukan inline) ---------- */
.lm-star .deco-hole { --x: -14%; --y: -62%; --s: min(120vw, 76rem); --r: -10deg; --o: 0.1; --d: 1; }
.lm-star .deco-plus { --x: 46%; --y: 78%; --s: 1.6rem; --d: 2; }
.lm-star .deco-dots { --x: 40%; --y: 12%; --w: 6rem; --h: 3.5rem; --d: 3; }
.lm-star .deco-ring { --x: 3%; --y: 8%; --s: 2.2rem; --d: 4; }
@media (max-width: 899px) {
  .lm-star .deco-hole { --x: -40%; --y: -10%; --s: 160vw; --o: 0.1; }
}

/* >>> mobile-nav.css */
/* ==========================================================================
   MOBILE (<900px) — NAVIGASI: dock bawah, progress bar, menu layar penuh
   Desktop tidak tersentuh. Elemen .m-* dibuat oleh assets/js/mobile.js.
   Dimuat setelah semua file komponen; mobile.css (layout & kartu) dimuat setelah file ini.
   ========================================================================== */
.m-dock, .m-progress { display: none; }

@media (max-width: 899px) {
  :root { --dock-h: 3.75rem; }
  /* Ruang untuk dock ada DI DALAM footer (warna gelap menyatu), bukan padding body
     yang menampilkan area kosong berwarna kertas di bawah footer. */
  .sw-footer { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 1.5rem); }

  /* ---------- Progress bar ---------- */
  .m-progress { display: block; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--violet); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }

  /* ---------- Dock bawah: bilah rata tepi (bukan pill melayang) ----------
     Swiss: tanpa radius & bayangan; pemisah cukup garis tipis. Penanda aktif dan CTA
     memakai trapesium siku (satu sisi miring) supaya bentuknya tetap asimetris. */
  .m-dock {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; z-index: 45; inset: auto 0 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ink); box-shadow: 0 -1px 0 rgba(255, 250, 246, 0.16);
    transition: transform 0.45s var(--ease);
  }
  .m-dock.is-hidden { transform: translateY(calc(100% + 2px)); }
  .m-dock a {
    position: relative; height: var(--dock-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
    color: rgba(255, 250, 246, 0.68);
    font: 700 0.7rem/1 var(--font); letter-spacing: 0.02em;
    -webkit-tap-highlight-color: transparent; transition: color 0.2s var(--ease);
  }
  .m-dock a:active { color: var(--paper); }
  .m-dock svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
  .m-dock a[aria-current="page"] { color: var(--paper); }
  .m-dock a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 1rem; right: 1rem; height: 0.28rem; background: var(--violet); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
  .m-dock a.m-cta { background: var(--violet); color: var(--ink); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
  .m-dock a.m-cta[aria-current="page"]::before { background: var(--ink); }

  /* ---------- Menu layar penuh ---------- */
  .sw-header .sw-mobile { background: var(--ink); color: var(--paper); border: 0; min-height: calc(100dvh - var(--header-h)); }
  .sw-header .sw-mobile-inner { counter-reset: mm; padding-block: 0.75rem 2.5rem; }
  .sw-header .sw-mobile a:not(.sw-btn) {
    counter-increment: mm; justify-content: flex-start; color: var(--paper);
    font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; padding: 0.8rem 0;
    border-bottom: 1px solid var(--rule-on-ink);
  }
  .sw-header .sw-mobile a:not(.sw-btn)::before { content: counter(mm, decimal-leading-zero); font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--lilac); width: 2.4rem; flex: none; align-self: center; }
  .sw-header .sw-mobile a:not(.sw-btn)[aria-current]::after { margin-left: auto; }
  .sw-header .sw-mobile a.is-current, .sw-header .sw-mobile a[aria-current="page"]:not(.sw-btn) { color: var(--violet); }
  .sw-header .sw-mobile a.sw-btn { margin-top: 1.75rem; }
  .sw-header .sw-mobile .sw-mobile-sub { padding-left: 2.4rem; }
  .sw-header .sw-mobile .sw-mobile-sub a:not(.sw-btn) { counter-increment: none; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.6rem 0; color: rgba(255, 250, 246, 0.72); border-bottom: 1px solid var(--rule-on-ink); }
  .sw-header .sw-mobile .sw-mobile-sub a:not(.sw-btn)::before { content: none; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .m-dock { transition: none; }
}

/* >>> mobile.css */
/* ==========================================================================
   MOBILE (<900px) — LAYOUT: hero, kartu geser, kartu numpuk, galeri, panel, reveal
   Mengubah tampilan komponen desktop menjadi blok warna bersudut satu sisi (gaya Swiss). Desktop tidak tersentuh.
   ========================================================================== */
@media (max-width: 899px) {
  /* sticky butuh overflow: clip (hidden membuat sticky mati) */
  .sw-rel, .sw-band, .sw-quote { overflow: clip; }

  /* ---------- Hero ---------- */
  .sw-btn-row .sw-btn { flex: 1 1 auto; }

  /* label dengan penanda geometris */
  .sw-label-col .sw-label::before, .sw-page-hero .sw-label::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; background: var(--violet); margin-right: 0.55rem; border-radius: 100% 0 0 0; }

  /* ---------- Kartu geser: pilar & langkah ---------- */
  .sw-pillars, .sw-steps {
    display: flex; gap: 0.9rem; counter-reset: pc;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding: 0.25rem var(--gutter) 1.25rem; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; min-width: 0;
  }
  .sw-pillars::-webkit-scrollbar, .sw-steps::-webkit-scrollbar { display: none; }
  .sw-pillar, .sw-step {
    flex: 0 0 76%; scroll-snap-align: start; position: relative; counter-increment: pc;
    min-height: 19rem; padding: 6rem 1.4rem 1.6rem; margin: 0 !important; border: 0; border-radius: 0 3.6rem 0 0;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem;
  }
  .sw-pillar::before { content: counter(pc, decimal-leading-zero); position: absolute; top: 1.1rem; left: 1.3rem; font-size: 4.6rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
  .sw-step b { position: absolute; top: 1.1rem; left: 1.3rem; margin: 0; font-size: 4.6rem; letter-spacing: -0.06em; color: inherit; }
  .sw-pillar p, .sw-step p { color: inherit; opacity: 0.86; max-width: none; }
  .sw-pillar h3, .sw-step h3 { font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.05; }
  .sw-pillar:nth-child(4n+1), .sw-step:nth-child(4n+1) { background: var(--ink); color: var(--paper); }
  .sw-pillar:nth-child(4n+1)::before, .sw-step:nth-child(4n+1) b { color: var(--violet); }
  .sw-pillar:nth-child(4n+2), .sw-step:nth-child(4n+2) { background: var(--violet); color: var(--ink); }
  .sw-pillar:nth-child(4n+3), .sw-step:nth-child(4n+3) { background: var(--lilac); color: var(--ink); }
  .sw-pillar:nth-child(4n), .sw-step:nth-child(4n) { background: var(--tint); color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
  .sw-on-ink .sw-step:nth-child(4n+1) { box-shadow: inset 0 3px 0 rgba(255, 250, 246, 0.4); }

  /* ---------- Kartu numpuk: daftar layanan ---------- */
  .sw-rows, .sw-list-rows { counter-reset: sc; border: 0; display: block; padding-bottom: 0.5rem; }
  .sw-row, .sw-line {
    position: sticky; top: calc(var(--header-h) + 0.35rem + var(--k, 0) * 2.35rem);
    display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem;
    min-height: 13.5rem; margin: 0 0 1rem; padding: 1.15rem 1.25rem 1.5rem;
    border: 0; border-radius: 0 3rem 0 0; counter-increment: sc;
    background-image: none; transform: none;
    box-shadow: 0 -10px 24px rgba(9, 11, 18, 0.12);
  }
  .sw-row, .sw-line { --tag-bg: var(--ink); --tag-fg: var(--paper); }
  .sw-row::before, .sw-line::before {
    content: counter(sc, decimal-leading-zero); align-self: flex-start; margin-bottom: 0.35rem;
    font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.04em;
    padding: 0.4rem 1.15rem 0.4rem 0.7rem; background: var(--tag-bg); color: var(--tag-fg);
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%);
  }
  .sw-row:hover, .sw-row:focus-visible { padding-inline: 1.25rem; background-size: auto; }
  .sw-row h3, .sw-line h3, .sw-row:hover h3 { font-size: 1.7rem; letter-spacing: -0.035em; line-height: 1.05; transform: none; }
  .sw-row p, .sw-line p, .sw-row:hover p { color: inherit; opacity: 0.86; max-width: none; }
  .sw-line .sw-aside { margin-top: auto; padding: 0.7rem 0 0; border-left: 0; border-top: 1px dashed currentColor; opacity: 1; color: inherit; }
  .sw-line .sw-aside span { color: inherit; opacity: 0.8; }
  .sw-row-arrow { opacity: 1; transform: none; margin-top: auto; align-self: flex-end; width: 3.5rem; height: 2.5rem; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%); }
  .sw-row-arrow svg { stroke: var(--paper); }
  .sw-row:nth-child(4n+2) .sw-row-arrow svg, .sw-row:nth-child(4n+3) .sw-row-arrow svg { stroke: var(--violet); }
  .sw-row:nth-child(4n+1), .sw-line:nth-child(4n+1) { background-color: var(--ink); color: var(--paper); --tag-bg: var(--violet); --tag-fg: var(--ink); }
  .sw-row:nth-child(4n+2), .sw-line:nth-child(4n+2) { background-color: var(--violet); color: var(--ink); }
  .sw-pillar:nth-child(4n+2) p, .sw-step:nth-child(4n+2) p, .sw-row:nth-child(4n+2) p, .sw-line:nth-child(4n+2) p,
  .sw-line:nth-child(4n+2) .sw-aside span { opacity: 1; } /* teks di atas oranye: kontras penuh */
  .sw-row:nth-child(4n+3), .sw-line:nth-child(4n+3) { background-color: var(--lilac); color: var(--ink); }
  .sw-row:nth-child(4n), .sw-line:nth-child(4n) { background-color: var(--tint); color: var(--ink); box-shadow: inset 0 3px 0 var(--ink), 0 -10px 24px rgba(9, 11, 18, 0.12); }
  .sw-row:nth-child(4n+1) .sw-row-arrow svg { stroke: var(--ink); }
  .sw-row:nth-child(4n+1) .sw-row-arrow { background: var(--violet); }
  .sw-row:nth-child(2),.sw-line:nth-child(2){--k:1}
  .sw-row:nth-child(3),.sw-line:nth-child(3){--k:2}
  .sw-row:nth-child(4),.sw-line:nth-child(4){--k:3}
  .sw-row:nth-child(5),.sw-line:nth-child(5){--k:4}
  .sw-row:nth-child(6),.sw-line:nth-child(6){--k:5}
  .sw-row:nth-child(7),.sw-line:nth-child(7){--k:6}
  .sw-row:nth-child(8),.sw-line:nth-child(8){--k:7}
  .sw-row:nth-child(9),.sw-line:nth-child(9){--k:8}
  .sw-row:nth-child(10),.sw-line:nth-child(10){--k:9}
  .sw-row:nth-child(11),.sw-line:nth-child(11){--k:10}
  .sw-row:nth-child(12),.sw-line:nth-child(12){--k:11}

  /* ---------- Galeri ---------- */
  .sw-chips { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--header-h); z-index: 5; margin: 0 calc(var(--gutter) * -1) 1.25rem; padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); }
  .sw-chips::-webkit-scrollbar { display: none; }
  .sw-chip { flex: none; height: 3rem; padding: 0 1.1rem; border: 0; border-radius: 0; background: transparent; }
  .sw-chip:hover { background: transparent; }
  .sw-chip.is-active { padding-right: 1.6rem; clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%); }
  .sw-tiles { grid-template-columns: 1fr 1fr; gap: 1.25rem 0.8rem; }
  .sw-tiles .sw-tile:first-of-type { grid-column: 1 / -1; }
  .sw-tile-art { aspect-ratio: 1; border-radius: 0 2.2rem 0 0; }
  .sw-tiles .sw-tile:first-of-type .sw-tile-art { aspect-ratio: 4 / 3; border-radius: 0 3.5rem 0 0; }
  .sw-tile h4 { font-size: 1rem; margin-top: 0.7rem; }
  .sw-tile p { font-size: 0.85rem; }

  .sw-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .sw-footer-grid > div:first-child, .sw-footer-grid > div:last-child { grid-column: 1 / -1; }
  .sw-footer li a { font-size: 0.9rem; }

  /* ---------- Reveal & feedback sentuh ---------- */
  .m-js .m-reveal { opacity: 0; transform: translateY(1.75rem) scale(0.97); }
  .m-js .m-reveal.m-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--md, 0) * 70ms); }
  .sw-btn:active, .sw-chip:active, .sw-pillar:active, .sw-tile:active { transform: scale(0.97); }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .m-js .m-reveal { opacity: 1; transform: none; }
}

/* >>> home.css */
/* ============================================================
   Homepage: photo hero + About / Stats band
   Memakai token dari tokens.css (--ink, --violet, --muted, --gutter, dst.)
   ============================================================ */

/* ---------- 1) Photo hero ---------- */
.lm-photo {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, var(--ink) 0%, var(--slate) 55%, var(--violet) 130%); /* fallback saat gambar belum termuat */
  overflow: hidden;
  isolation: isolate;
}
.lm-photo picture { display: block; }
.lm-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* ikut lebar layar, foto selalu utuh (tidak dipotong), di ukuran layar apa pun */
  object-fit: contain;
}
/* gradient tipis di bawah supaya transisi ke section putih terasa halus */
.lm-photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(to top, rgba(9, 11, 18, 0.45), transparent);
  pointer-events: none;
}

/* ---------- 2) About + Stats ---------- */
.lm-about { padding-block: var(--section); background: var(--paper); }

.lm-about-top { row-gap: 1.5rem; align-items: start; }
.lm-about-title {
  font-size: var(--step-title);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.lm-about-text p + p { margin-top: 1em; }
.lm-about-text { font-size: var(--step-body); line-height: 1.6; max-width: 62ch; color: var(--ink); }
@media (min-width: 900px) {
  .lm-about-title { grid-column: 1 / span 4; }
  .lm-about-text  { grid-column: 5 / span 7; padding-top: 0.35rem; }
}

.lm-about-headline {
  margin: clamp(3.5rem, 8vw, 7rem) auto 0;
  max-width: 18ch;
  text-align: center;
  font-size: var(--step-title);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.lm-stats {
  list-style: none;
  margin: clamp(3rem, 7vw, 6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem var(--gap);
}
@media (min-width: 900px) { .lm-stats { grid-template-columns: repeat(4, 1fr); } }

.lm-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lm-stat-num {
  display: inline-block;
  text-align: center;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  padding-bottom: 0.12em;
  border-bottom: 0.1em solid var(--violet);   /* garis oranye di bawah angka */
  font-variant-numeric: tabular-nums;
}
.lm-stat-label {
  margin-top: 1rem;
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--muted);
}

/* >>> theme.css */
/* ==========================================================================
   [semua halaman] TEMA WARNA — 2 pilihan: light (bawaan) · dark-orange
   Cara kerja: di tema gelap, --paper (permukaan) dan --ink (teks) ditukar di :root, jadi seksi terang otomatis jadi gelap.
   Seksi yang memang sudah gelap / berlatar oranye (daftar di bawah) dikembalikan ke pasangan --deep (gelap) + --cream (terang).
   Ganti isi warna tema di blok :root[data-theme="dark-orange"] di bawah. Tombol dibuat oleh assets/js/theme.js.
   ========================================================================== */

/* ---------- Tombol pilih tema (di header) ---------- */
.th-switch { display: flex; align-items: center; gap: 0.45rem; }
.th-dot { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; background: var(--g); }
.th-dot[data-theme-set="light"] { --g: linear-gradient(135deg, #FFFAF6 50%, #DD5326 50%); }
.th-dot[data-theme-set="dark-orange"] { --g: linear-gradient(135deg, #0F0F13 50%, #DD5326 50%); }
.th-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.th-dot:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; }
@media (max-width: 899px) { .th-switch { gap: 0.4rem; } .th-dot { width: 1.45rem; height: 1.45rem; } }

/* ---------- Palet tema gelap ---------- */

:root[data-theme="dark-orange"] {
  /* dasar gelap #0F0F13, aksen oranye logo PT (#DD5326) */
  color-scheme: dark;
  --paper: #0F0F13; --ink: #EFE9DF; --tint: #18171D; --muted: #A8A296;
  --rule: rgba(239, 233, 223, 0.16); --rule-on-ink: rgba(239, 233, 223, 0.18);
  --violet: #DD5326; --violet-deep: #EE6A3E; --violet-dark: #B8401D; --lilac: #F2A184; --ghost: #2E1A12; --slate: #1C1B22; --cta: #AE3815;
  --deep: #060608; --cream: #EFE9DF;
}

/* ---------- Bagian yang tetap gelap / berlatar oranye: kembalikan pasangan warnanya ---------- */
:root[data-theme^="dark"] :is(
  .sw-on-ink, .sw-footer, .sw-band, .m-dock, .sw-header .sw-mobile,
  .dp-hero, .dp-tm-hero, .dp-tm-body, .dp-vg-hero, .dp-vg-body, .dp-hr-stop, .dp-cd-hero, .dp-mu-hero, .dp-fn-quote, .dp-fn-body, .bt-mc-quote,
  .dp-tm-bars li, .dp-stickers li, .dp-cd-beats li
) { --ink: var(--deep); --paper: var(--cream); }
@media (max-width: 899px) {
  :root[data-theme^="dark"] :is(.sw-pillar, .sw-step, .sw-row, .sw-line):is(:nth-child(4n+1), :nth-child(4n+2), :nth-child(4n+3)) { --ink: var(--deep); --paper: var(--cream); }
}

/* ---------- Penyesuaian lain ---------- */
:root[data-theme^="dark"] .sw-header { background: color-mix(in srgb, var(--paper) 94%, transparent); }
:root[data-theme^="dark"] .sw-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.8); }
:root[data-theme^="dark"] .dp-hr-stop { box-shadow: inset 0 0 0 1px var(--rule); }
:root[data-theme^="dark"] .sw ::selection { background: var(--violet); color: var(--deep); }
:root[data-theme^="dark"] :is(.dp-mu-hero, .sw-band) { color: var(--ink); }
:root[data-theme^="dark"] :is(.bt-video .dv-vid.is-wide .dv-vid-frame, .lm-hero) { background-image: linear-gradient(135deg, var(--deep) 0%, var(--slate) 55%, var(--violet) 130%); }