/* bundle-career.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); }

/* >>> forms.css */
/* ==========================================================================
   FORM — kolom isian, catatan, kotak fokus
   Dipakai di contact.html (form kerja sama) dan modal di career.html / gallery.html.
   ========================================================================== */
.sw-field { display: block; margin-bottom: 1.25rem; }
.sw-field label { display: block; margin-bottom: 0.4rem; font-size: var(--step-small); font-weight: 700; }
.sw-field input, .sw-field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font: 400 1rem/1.4 var(--font);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 0;
}
.sw-field textarea { resize: vertical; min-height: 7rem; }
.sw-field input:focus-visible, .sw-field textarea:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-color: var(--violet);
}
.sw-field input::placeholder, .sw-field textarea::placeholder { color: var(--muted); }
.sw-field input[aria-invalid="true"], .sw-field textarea[aria-invalid="true"] { border-color: #c62828; border-width: 2px; }
.sw-field-err { margin: 0.4rem 0 0; font-size: var(--step-small); font-weight: 700; color: #c62828; }
.sw-form-note { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }
.sw-form-note a {
  color: var(--violet-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sw-focus {
  padding: 1.25rem 1.5rem;
  background: var(--tint);
  border-left: 4px solid var(--violet);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}
@media (max-width: 899px) {
  .sw-form-note a { display: inline-block; padding: 0.5rem 0; overflow-wrap: anywhere; }
}

/* >>> modal.css */
/* ==========================================================================
   MODAL (career.html: lamaran, gallery.html: keberatan dokumentasi)
   Tampil/sembunyi lewat kelas .hidden (LeoInteractions.showModal/hideModal).
   ========================================================================== */
.sw-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(9, 11, 18, 0.82);
}
.sw-modal-card {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border-top: 6px solid var(--violet);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.sw-modal-card h3 {
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0.25rem 0 0.75rem;
}
.sw-modal-card > p { color: var(--muted); margin-bottom: 1.5rem; font-size: 0.95rem; }
.sw-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.sw-modal-close:hover { background: var(--ink); color: var(--paper); }
.sw-modal-card .sw-btn { width: 100%; }

/* >>> career.css */
/* ==========================================================================
   KARIR — kartu lowongan (career.html)
   ========================================================================== */
/* Daftar posisi = accordion: judul selalu tampak, isi (deskripsi, jobdesk, kualifikasi, benefit, tombol) terbuka saat diklik.
   Tanpa JS (.sw-js tidak ada) semua isi tampil terbuka. */
.sw-job { border-top: 1px solid var(--rule); }
.sw-job:last-child { border-bottom: 1px solid var(--rule); }
.sw-job-h { margin: 0; }
.sw-job-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 0;
  border: 0;
  background: linear-gradient(var(--tint), var(--tint)) no-repeat left center / 0% 100%;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-size 0.45s var(--ease), padding 0.35s var(--ease);
}
.sw-job-toggle:hover, .sw-job-toggle[aria-expanded="true"] { background-size: 100% 100%; padding-inline: 1rem; }
.sw-job-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.sw-job-no { font-family: var(--font-mono); font-weight: 500; font-size: var(--step-small); color: var(--muted); }
.sw-job-name { font-family: var(--font-head); font-size: clamp(1.6rem, 2.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.sw-job-icon { position: relative; width: 2.75rem; height: 2.75rem; background: var(--ink); transition: background-color 0.25s var(--ease); }
.sw-job-icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); translate: -50% -70%; rotate: 45deg; transition: rotate 0.35s var(--ease), translate 0.35s var(--ease); }
.sw-job-toggle[aria-expanded="true"] .sw-job-icon { background: var(--violet); }
.sw-job-toggle[aria-expanded="true"] .sw-job-icon::before { border-color: var(--ink); rotate: 225deg; translate: -50% -30%; }
.sw-job-inner > .sw-lead-sm { margin-top: 0.5rem; }   /* jarak vertikal lewat margin anak (bukan padding) supaya panel tertutup benar-benar setinggi 0 */
.sw-job-inner > .sw-btn { margin-top: 2rem; margin-bottom: 2.5rem; }
.sw-js .sw-job-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s var(--ease), visibility 0s linear 0.45s; }
.sw-js .sw-job-inner { min-height: 0; overflow: hidden; }
.sw-js .sw-job.is-open .sw-job-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.sw-job-lists { display: grid; grid-template-columns: 1fr; gap: 1.75rem var(--gap); margin-top: 1.75rem; }
@media (min-width: 900px) {
  .sw-job-inner { padding-left: calc(2.75rem + 1rem); }
  .sw-job-lists { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .sw-job-toggle { grid-template-columns: 2rem 1fr auto; gap: 0.6rem; padding-block: 1.3rem; }
  .sw-job-icon { width: 2.5rem; height: 2.5rem; }
  .sw-job-inner > .sw-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-job-toggle, .sw-job-icon, .sw-job-icon::before, .sw-js .sw-job-panel { transition: none; }
}
.sw-job h4 { margin: 0 0 0.5rem; font-size: var(--step-small); font-weight: 700; }
.sw-bullets li {
  position: relative;
  padding-left: 1.1rem;
  margin-top: 0.55rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.sw-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--violet);
}
.sw-job .sw-lead-sm { color: var(--ink); max-width: 56ch; }

/* Judul section lowongan: judul + deskripsi benar-benar rata tengah */
.cr-hero h1 { color: var(--violet); }
.cr-head { text-align: center; }
.cr-head .sw-title { color: var(--violet); }
.cr-head .sw-title, .cr-head .sw-body { margin-inline: auto; }

/* Globe wireframe hero — garis ultra tipis (stroke 0.08) & opacity samar (0.11) agar tidak mendistraksi teks */
.cr-hero { position: relative; isolation: isolate; overflow: visible; }
.cr-hero .sw-deco { overflow: visible; }
#main { overflow-x: clip; }

.cr-globe {
  --x: 52%;
  --y: 28%;
  --s: min(88vw, 70rem);
  --r: -14deg;
  --o: 0.11;
  --d: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='0.08'%3E%3Ccircle cx='50' cy='50' r='48'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='40' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='30' transform='rotate(22 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='22' transform='rotate(-35 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='36' transform='rotate(58 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='16' transform='rotate(80 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='26' transform='rotate(-62 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='12' transform='rotate(12 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='46' ry='33' transform='rotate(-14 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='20' transform='rotate(40 50 50)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='0.08'%3E%3Ccircle cx='50' cy='50' r='48'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='40' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='30' transform='rotate(22 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='22' transform='rotate(-35 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='36' transform='rotate(58 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='16' transform='rotate(80 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='26' transform='rotate(-62 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='12' transform='rotate(12 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='46' ry='33' transform='rotate(-14 50 50)'/%3E%3Cellipse cx='50' cy='50' rx='48' ry='20' transform='rotate(40 50 50)'/%3E%3C/svg%3E");
}
@media (max-width: 899px) {
  .cr-globe {
    --x: -12%;
    --y: 35%;
    --s: 130vw;
    --o: 0.08;
  }
}

/* >>> 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; }
}

/* >>> 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%); }