/* === tokens.css === */
/* Design tokens — sumber kebenaran warna, font, ruang, gerak. Lihat design.md §2. */
:root {
  /* --- warna (design.md §2.1) --- */
  --navy-900: #0B1526;
  --navy-800: #12203A;
  --navy-700: #1B2D4C;
  --gold-500: #C9A24B;
  --gold-300: #E8C872;
  --gold-700: #A67C00;
  --porcelain: #FAF7F0;
  --slate: #9AA4B2;
  --crimson: #7A1F2B;          /* hanya lingkungan hero musiman, tidak pernah untuk UI */
  --scrim: rgba(11, 21, 38, .85);
  --glow: 0 0 48px rgba(201, 162, 75, .18);

  /* status form */
  --error: #E5484D;
  --success: #3FB950;

  /* --- tipografi (design.md §2.2) --- */
  /* "* Fallback" adalah font sistem dengan metrik disamakan (lihat base.css) — mencegah
     pergeseran tata letak saat font web tiba. */
  --font-serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hanzi: "Noto Serif TC", "Noto Serif SC", "Songti SC", serif;

  --fs-display: clamp(2.6rem, 5.6vw, 5.25rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-eyebrow: .75rem;
  --fs-btn: .9375rem;
  --fs-hanzi-card: 1.875rem;
  --fs-statement: clamp(1.75rem, 3vw, 2.75rem);

  --lh-display: 1.05;
  --lh-h2: 1.12;
  --lh-body: 1.7;
  --ls-eyebrow: .18em;

  /* --- ruang (basis 8 px) --- */
  --space-4: 4px;    --space-8: 8px;    --space-12: 12px;  --space-16: 16px;
  --space-24: 24px;  --space-32: 32px;  --space-48: 48px;  --space-64: 64px;
  --space-96: 96px;  --space-128: 128px; --space-160: 160px;
  --sec-pad: clamp(80px, 12vh, 160px);

  /* --- kontainer --- */
  --container: 1280px;
  --content: 1120px;
  --prose: 62ch;
  --pad-x: 24px;

  /* --- bentuk (design.md §2.4) --- */
  --radius-btn: 999px;
  --radius-card: 16px;
  --radius-img: 12px;
  --radius-input: 10px;
  --border-card: 1px solid rgba(201, 162, 75, .22);
  --border-card-hover: 1px solid rgba(201, 162, 75, .55);

  /* --- gerak (design.md §2.7) --- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 200ms;
  --dur-base: 600ms;
  --dur-slow: 900ms;

  /* --- lapisan --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-preloader: 400;
}

@media (min-width: 768px) { :root { --pad-x: 40px; } }
@media (min-width: 1280px) { :root { --pad-x: 64px; } }

/* === base.css === */
/* Reset ringan + skala tipografi + kontainer. Lihat design.md §2.2–2.3. */

/* ------------------------------------------------------- font cadangan CLS
   Font web datang belakangan (font-display: swap). Tanpa penyesuaian, teks yang
   semula digambar dengan font sistem berubah lebar saat font web tiba, dan halaman
   bergeser.

   Rasio di bawah dicari dengan `node tools/fallback-metrics.mjs`, yang mengukur elemen
   sungguhan di peramban. JANGAN mengukur lewat canvas measureText(): canvas mengabaikan
   size-adjust, dan angka yang lahir dari sana meleset jauh — Playfair tegak sempat
   tertulis 86,58% padahal seharusnya 101,62%.

   Seluruh line-height proyek ini tanpa satuan, jadi cukup menyamakan lebar; tinggi baris
   tidak ikut bergeser.                                                            */
@font-face {
  font-family: "Playfair Fallback";
  font-style: normal;
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("Droid Serif");
  /* Angka lama 86,58% membuat cadangannya jauh terlalu sempit: judul hero muat dalam
     dua baris dengan font cadangan, lalu melompat jadi tiga begitu Playfair tiba, dan
     seluruh blok hero bergeser 92 piksel. */
  size-adjust: 101.62%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia"), local("Times New Roman Italic"), local("Noto Serif");
  size-adjust: 96.96%;
  line-gap-override: 0%;
}
/* Inter dipakai pada tiga ketebalan dan rasionya berbeda-beda terhadap Arial
   (400 = 103,74% · 500 = 104,78% · 600 = 105,82%), jadi tiap ketebalan mendapat wajah
   cadangannya sendiri. Angka 600 sempat tertulis 101,68%, meleset empat persen. */
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Roboto"), local("Segoe UI");
  size-adjust: 103.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("Helvetica"), local("Roboto"), local("Segoe UI");
  size-adjust: 104.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Segoe UI Semibold");
  size-adjust: 105.82%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* header fixed tidak menutupi target jangkar */
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--porcelain);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.drawer-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0 0 var(--space-16); font-family: var(--font-serif); font-weight: 600; }
p { margin: 0 0 var(--space-16); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--space-16); padding-left: 1.25em; }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-300); text-underline-offset: .18em; }
a:hover { color: var(--gold-500); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- tipografi */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -.015em;
  margin-bottom: var(--space-24);
}
.display em, .h2 em, .story__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-300);
}
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; }
.lead { font-size: 1.125rem; color: var(--porcelain); max-width: var(--prose); }
.muted { color: var(--slate); }
.small { font-size: var(--fs-small); color: var(--slate); line-height: 1.6; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 var(--space-16);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------- kontainer */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--prose { max-width: var(--content); }

.sec { position: relative; padding-block: var(--sec-pad); }
.sec--flush { padding-block: 0; }

/* ------------------------------------------------------------------- fokus */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--space-16);
  top: -100px;
  z-index: calc(var(--z-preloader) + 1);
  background: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-btn);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: var(--space-16); color: var(--navy-900); }

/* ------------------------------------------------------- naskah (artikel) */
.prose { max-width: var(--prose); }
.prose h2 { font-size: 1.75rem; margin-top: var(--space-48); }
.prose h3 { font-size: 1.375rem; margin-top: var(--space-32); }
.prose img { border-radius: var(--radius-img); margin-block: var(--space-24); }
.prose figure { margin: var(--space-24) 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--slate); margin-top: var(--space-8); }
.prose blockquote {
  margin: var(--space-24) 0;
  padding-left: var(--space-24);
  border-left: 3px solid var(--gold-500);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--gold-300);
}
.prose hr { border: 0; border-top: 1px solid rgba(201, 162, 75, .25); margin: var(--space-48) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-24) 0; font-size: var(--fs-small); }
.prose th, .prose td { border: 1px solid var(--navy-700); padding: var(--space-12); text-align: left; }
.prose th { background: var(--navy-800); color: var(--gold-300); font-weight: 600; }
.prose > *:first-child { margin-top: 0; }

/* Tabel/kode lebar menggulir di dalam kotaknya sendiri, bukan menggeser halaman. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------- hormati reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ cetak
   Elemen beranimasi disembunyikan sampai tergulir ke layar. Di atas kertas tidak
   ada yang menggulir, jadi paksa semuanya tampil — juga membantu alat yang
   memotret halaman tanpa menggulir. */
@media print {
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; }
  .preloader, .site-header, .drawer, .carousel__arrow, .carousel__pause { display: none !important; }
  body { background: #fff; color: #111; }
}

/* === components.css === */
/* Komponen bersama: tombol, header, drawer, footer, kartu, form, preloader, facade YouTube.
   Lihat design.md §2.4, §2.7, §2.8, §3.2, §4.7. */

/* ============================================================== TOMBOL */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-btn);
  font: 600 var(--fs-btn)/1 var(--font-sans);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;   /* label tombol pendek tidak boleh patah dua baris */
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--gold-500); color: var(--navy-900); }
.btn--primary:hover { background: var(--gold-300); color: var(--navy-900); box-shadow: var(--glow); transform: translateY(-2px); }
.btn--primary:active { background: var(--gold-700); transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--porcelain);
  border: 1px solid rgba(250, 247, 240, .6);
}
.btn--ghost:hover { color: var(--porcelain); border-color: var(--gold-300); transform: translateY(-2px); }

.btn--sm { min-height: 38px; padding: 10px 20px; font-size: .875rem; }

/* Tombol newsletter dua baris (design.md §3.2) */
.btn--newsletter {
  flex-direction: column;
  gap: 2px;
  padding: 8px 22px;
  background: var(--gold-500);
  color: var(--navy-900);
  text-align: center;
  line-height: 1.15;
}
.btn--newsletter small {
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}
.btn--newsletter span {
  font-family: var(--font-serif);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;   /* jangan pernah patah di tengah "Kompas Karir — GRATIS" */
}
.btn--newsletter:hover { background: var(--gold-300); color: var(--navy-900); box-shadow: var(--glow); }

/* Antara 1024 dan 1200 px ruang header sempit; kecilkan sedikit agar tetap satu baris. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .btn--newsletter { padding-inline: 16px; }
  .btn--newsletter span { font-size: .875rem; }
  .btn--newsletter small { font-size: .5rem; }
  .nav__list { gap: var(--space-16); }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--gold-300);
  font-weight: 500;
  text-decoration: none;
}
.link-arrow:hover { color: var(--gold-500); text-decoration: underline; }

/* ======================================================= KEPALA SECTION */
.section-head { margin-bottom: var(--space-48); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .section-head__intro { margin-inline: auto; }
.section-head__intro { max-width: var(--prose); color: var(--slate); }
.section-head::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: var(--space-24);
  background: var(--gold-500);
}
.section-head--center::after { margin-inline: auto; }

/* ================================================================ KARTU */
.card {
  position: relative;
  border-radius: var(--radius-card);
  border: var(--border-card);
  background: var(--navy-800);
  padding: var(--space-32);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card:hover { transform: translateY(-2px); border: var(--border-card-hover); box-shadow: var(--glow); }
a.card { display: block; text-decoration: none; color: inherit; }

/* ================================================================ REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ================================================================ HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: background-color 300ms var(--ease-out),
              backdrop-filter 300ms var(--ease-out),
              box-shadow 300ms var(--ease-out);
}
.site-header--overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 120px;
  background: linear-gradient(to bottom, rgba(11, 21, 38, .6), transparent);
  pointer-events: none;
}
.site-header.is-solid {
  background: rgba(11, 21, 38, .88);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(201, 162, 75, .18);
}
.site-header:not(.site-header--overlay) { background: rgba(11, 21, 38, .95); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  height: 80px;
  transition: height 300ms var(--ease-out);
}
.site-header.is-solid .site-header__inner { height: 64px; }

.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand__logo { height: 40px; width: auto; }
.brand__mark { display: none; height: 36px; width: auto; }

.site-header__cta { display: flex; align-items: center; gap: var(--space-12); }

/* -------------------------------------------------------------- navigasi */
.nav__list { display: flex; align-items: center; gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  color: var(--porcelain);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__item:hover > .nav__link::after,
.nav__item.is-active > .nav__link::after { transform: scaleX(1); }
.nav__link svg { transition: transform var(--dur-fast) var(--ease-out); }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 232px;
  margin: 0;
  padding: var(--space-8) 0;
  list-style: none;
  background: rgba(11, 21, 38, .97);
  backdrop-filter: blur(10px);
  border: var(--border-card);
  border-radius: var(--radius-img);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
/* Jembatan anti-gap: area tak terlihat antara tautan dan submenu. */
.nav__item--has-sub::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
}
.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub,
.nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; }

.nav__sub a {
  display: block;
  padding: 10px var(--space-16);
  color: var(--porcelain);
  font-size: .875rem;
  text-decoration: none;
}
.nav__sub a:hover { background: rgba(201, 162, 75, .12); color: var(--gold-300); }

/* --------------------------------------------------------------- burger */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(250, 247, 240, .3);
  border-radius: var(--radius-btn);
  color: var(--porcelain);
  cursor: pointer;
}

@media (max-width: 1023px) {
  .nav, .site-header__cta { display: none; }
  .burger { display: inline-flex; }
  .brand__logo { display: none; }
  .brand__mark { display: block; }
}

/* --------------------------------------------------------------- drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-96) var(--pad-x) var(--space-48);
  background: var(--navy-900);
  overflow-y: auto;
}
.drawer__close {
  position: absolute;
  top: var(--space-24); right: var(--pad-x);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(250, 247, 240, .3);
  border-radius: var(--radius-btn);
  color: var(--porcelain);
  cursor: pointer;
}
.drawer__list { margin: 0; padding: 0; list-style: none; }
.drawer__list > li { border-bottom: 1px solid rgba(201, 162, 75, .15); }
.drawer__list a {
  display: block;
  padding: var(--space-16) 0;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--porcelain);
  text-decoration: none;
}
.drawer__list ul { margin: 0 0 var(--space-16); padding: 0 0 0 var(--space-16); list-style: none; }
.drawer__list ul a { font-family: var(--font-sans); font-size: 1rem; padding: var(--space-8) 0; color: var(--slate); }
.drawer .btn--newsletter { align-self: flex-start; }

/* ---------------------------------------------------------------- sosial */
.social { display: flex; flex-wrap: wrap; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(201, 162, 75, .3);
  border-radius: var(--radius-btn);
  color: var(--porcelain);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.social a:hover { color: var(--gold-300); border-color: var(--gold-500); }

/* ================================================================ FOOTER */
.footer {
  position: relative;
  padding-block: var(--space-64) var(--space-32);
  border-top: 1px solid rgba(201, 162, 75, .3);
  background-color: var(--navy-900);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--footer-bg);
  background-size: cover;
  opacity: .35;
  pointer-events: none;
}
.footer > * { position: relative; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-48);
}
.footer__brand img { height: 44px; width: auto; }
.footer__tagline { margin-top: var(--space-16); color: var(--slate); font-size: var(--fs-small); }
.footer__h {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-16);
}
.footer__h + .social { margin-bottom: var(--space-24); }
.footer__links, .footer__chat { margin: 0 0 var(--space-24); padding: 0; list-style: none; }
.footer__links li + li, .footer__chat li + li { margin-top: var(--space-8); }
.footer__links a, .footer__chat a {
  color: var(--porcelain);
  font-size: var(--fs-small);
  text-decoration: none;
}
.footer__links a:hover, .footer__chat a:hover { color: var(--gold-300); }
.footer__chat a { display: inline-flex; align-items: center; gap: var(--space-8); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(250, 247, 240, .08);
  color: var(--slate);
  font-size: .8125rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.footer__legal a { color: var(--slate); text-decoration: none; }
.footer__legal a:hover { color: var(--gold-300); }

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-32); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================ PRELOADER */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--gold-500);
  transition: opacity 400ms var(--ease-out), visibility 400ms;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
/* Hanya assets/js/app.js yang melepas preloader; tanpa JavaScript ia menutupi seluruh halaman. */
.no-js .preloader { display: none; }
.preloader__ring { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ====================================================== FACADE YOUTUBE */
.yt-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--navy-800);
}
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-embed__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.yt-embed__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-embed__icon {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(11, 21, 38, .78);
  border: 1px solid var(--gold-500);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.yt-embed__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--gold-500);
}
.yt-embed__play:hover .yt-embed__icon { transform: scale(1.08); background: rgba(11, 21, 38, .9); }

/* ================================================================= FORM */
.form { display: grid; gap: var(--space-24); }
.field { display: grid; gap: var(--space-8); }
.field > label { font-size: var(--fs-small); font-weight: 500; color: var(--porcelain); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px var(--space-16);
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-input);
  color: var(--porcelain);
  font: 400 1rem/1.5 var(--font-sans);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .25);
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate); }
.field__help { font-size: .8125rem; color: var(--slate); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--error); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--error); }
.field--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-img);
  border-left: 3px solid var(--gold-500);
  background: var(--navy-800);
}
.notice--success { border-left-color: var(--success); }
.notice--error { border-left-color: var(--error); }

/* ====================================================== HALAMAN UMUM */
.back { display: inline-block; margin-bottom: var(--space-24); color: var(--slate); text-decoration: none; font-size: var(--fs-small); }
.back:hover { color: var(--gold-300); }
.meta { margin-top: var(--space-48); font-size: .8125rem; color: var(--slate); }

.sec--page { padding-top: calc(var(--sec-pad) + 40px); }

.sec--404 {
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--bg) center / cover no-repeat, var(--navy-900);
  padding-top: calc(var(--sec-pad) + 40px);
}
.sec--404::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--scrim) 0%, rgba(11, 21, 38, .55) 55%, rgba(11, 21, 38, .15) 100%);
}
.sec--404__inner { position: relative; max-width: 640px; }
.sec--404 .actions { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-32); }

/* === tongshu.css === */
/* KALENDER TONGSHU — docs/tongshu/design.md §2 token · §4 tata letak · §5 gerak · §9 responsif.
   Palet, font, dan ruang dari tokens.css; di sini hanya token khas Tongshu. */
.tongshu-page,.tongshu-hero{
--el-wood:#3E6B5C;--el-fire:#B5452F;--el-earth:#C9A24B;--el-metal:#C7CDD3;--el-water:#2E4B6E;--el:var(--el-earth);
--tint:rgba(11,21,38,.55);--tint-dawn:rgba(214,150,80,.18);--tint-day:rgba(11,21,38,.05);
--tint-dusk:rgba(178,88,60,.22);--tint-night:rgba(11,21,38,.35);
--hanzi-hero:clamp(6rem,14vw,12rem);--sheet:rgba(11,21,38,.62);--seal:#9E2B2B;--grid-line:rgba(201,162,75,.18);
--particle:var(--gold-300);--card:rgba(18,32,58,.68);--sec-pad:clamp(56px,8vh,104px);--tr:var(--dur-fast) var(--ease-out);--trs:var(--dur-slow) var(--ease-out);
--star-1:#F5F1E8;--star-2:#3A3A3A;--star-3:#3E6B5C;--star-4:#4F8A5B;--star-5:#C9A24B;
--star-6:#E8E4DC;--star-7:#B5452F;--star-8:#F0E8D2;--star-9:#8B3A62}
[data-element=wood]{--el:var(--el-wood)}
[data-element=fire]{--el:var(--el-fire)}
[data-element=earth]{--el:var(--el-earth)}
[data-element=metal]{--el:var(--el-metal)}
[data-element=water]{--el:var(--el-water)}
.tongshu-hero[data-period=dawn]{--tint:var(--tint-dawn);--particle:#F0C88A}
.tongshu-hero[data-period=day]{--tint:var(--tint-day)}
.tongshu-hero[data-period=dusk]{--tint:var(--tint-dusk);--particle:#E8A87C}
.tongshu-hero[data-period=night]{--tint:var(--tint-night);--particle:#D8DEE3}
.tongshu-page [lang^=zh],.tongshu-page .hanzi{font-family:var(--font-hanzi)}
.tongshu-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--porcelain);min-height:clamp(640px,100svh,1080px);display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 var(--space-32)}
.tongshu-hero>.container{position:relative;z-index:4;width:100%}
.tongshu-hero__media,.tongshu-hero__video,.tongshu-hero__tint,.tongshu-hero__scrim,.tongshu-hero__particles{position:absolute;inset:0}
.tongshu-hero__video,.tongshu-hero__tint,.tongshu-hero__scrim,.tongshu-hero__particles{pointer-events:none}
.tongshu-hero__media{z-index:0;overflow:hidden;background:var(--navy-800)}
.tongshu-hero__art,.tongshu-hero__img,.tongshu-hero__video,.tongshu-hero__art>img{width:100%;height:100%;object-fit:cover}
.tongshu-hero__art,.tongshu-hero__img{position:absolute;inset:0;display:block;object-position:50% 25%;opacity:1;transition:opacity var(--trs)}
.tongshu-hero__art>img{object-position:inherit}
.tongshu-hero__img.is-enter,.tongshu-hero__media .is-out{opacity:0}
.tongshu-hero__img{animation:ts-kb 18s ease-in-out infinite alternate;transform-origin:70% 40%;will-change:transform}
@keyframes ts-kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.tongshu-hero__video{z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity var(--trs)}
.tongshu-hero__video.is-on{opacity:.35}
.tongshu-hero[data-element=fire] .tongshu-hero__video.is-on{opacity:.45}
.tongshu-hero__tint{z-index:2;background:var(--tint);transition:background 1200ms var(--ease-out)}
.tongshu-hero[data-period=night] .tongshu-hero__tint::after{content:"";position:absolute;inset:0;opacity:.5;
background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 41% 9%,#fff,transparent),
radial-gradient(1px 1px at 73% 27%,#fff,transparent),radial-gradient(1px 1px at 27% 44%,#fff,transparent)}
.tongshu-hero__scrim{z-index:2;transition:background var(--trs);
background:linear-gradient(90deg,rgba(11,21,38,.92),rgba(11,21,38,.72) 34%,rgba(11,21,38,0) 62%),
linear-gradient(180deg,rgba(11,21,38,.55),rgba(11,21,38,0) 28%,rgba(11,21,38,.88)),
radial-gradient(55% 50% at 24% 46%,color-mix(in srgb,var(--el) 18%,transparent),transparent 70%)}
.tongshu-hero__particles{z-index:3;overflow:hidden}
.tongshu-hero__particles>i{position:absolute;bottom:-6vh;left:var(--x,50%);width:var(--w,3px);height:var(--w,3px);border-radius:50%;background:var(--particle);opacity:0;animation:ts-rise var(--t,30s) linear var(--dl,0s) infinite}
@keyframes ts-rise{0%{transform:translate(0,0);opacity:0}12%,80%{opacity:var(--o,.5)}100%{transform:translate(18px,-120vh);opacity:0}}
.tongshu-sheet{--hanzi-hero:clamp(3rem,5vw,4.5rem);position:relative;width:min(100%,520px);padding:var(--space-24);border-radius:var(--radius-card);border:var(--border-card);background:var(--sheet);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.45);transition:opacity var(--tr)}
.tongshu-sheet[aria-busy=true],.tongshu-sheet.is-loading{opacity:.55}
.tongshu-sheet__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--space-16)}
.tongshu-sheet [data-clock]{margin-left:8px;padding:2px 10px;border:1px solid rgba(201,162,75,.45);border-radius:var(--radius-btn);font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--gold-300);white-space:nowrap}
.tongshu-sheet__pillar{display:flex;align-items:center;gap:var(--space-16);margin:var(--space-12) 0}
.tongshu-sheet__hanzi,.tongshu-sheet__pillar [lang]{margin:0;display:grid;line-height:.92;font-family:var(--font-hanzi);font-weight:600;font-size:var(--hanzi-hero);color:var(--porcelain);text-shadow:0 2px 8px rgba(11,21,38,.95),0 8px 40px rgba(11,21,38,.8)}
.tongshu-sheet__title{min-width:0;flex:1}
.tongshu-sheet__pillar h2{margin:0;font-family:var(--font-serif);font-weight:600;font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.1}
.tongshu-sheet__sub{margin:4px 0 0;font-size:var(--fs-small);color:var(--slate)}
.tongshu-sheet__meta{display:grid;gap:2px;margin:0 0 var(--space-12);font-size:.875rem}
.tongshu-sheet__meta>*{margin:0;padding:3px 0;border-bottom:1px solid rgba(250,247,240,.08)}
.tongshu-sheet__meta dd{margin:0}
.tongshu-sheet__acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-12);margin-bottom:var(--space-12)}
.tongshu-sheet__acts ul{margin:0;padding:0;list-style:none;font-size:.8125rem}
.tongshu-sheet__acts li{padding:1px 0;border-bottom:1px dotted rgba(250,247,240,.1)}
.tongshu-sheet__acts li small,.tongshu-sheet__acts-h small{color:var(--slate)}
.tongshu-sheet__acts-h{margin:0 0 4px;font-family:var(--font-sans);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-500)}
.tongshu-sheet__officer{margin-bottom:var(--space-12);padding:var(--space-8) var(--space-12);border-radius:var(--radius-img);border:var(--border-card);background:rgba(11,21,38,.5)}
.tongshu-sheet__officer.is-good{border-color:rgba(201,162,75,.5)}
.tongshu-sheet__hours{margin:0 0 var(--space-12);font-size:var(--fs-small)}
.tongshu-strip{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-24)}
.tongshu-strip__track{display:flex;flex:1;min-width:0;gap:var(--space-8);padding:4px 2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tongshu-strip__track::-webkit-scrollbar{display:none}
.tongshu-strip button[data-dir]{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:50%;border:1px solid rgba(201,162,75,.35);background:rgba(11,21,38,.6);color:var(--gold-300)}
.tongshu-chip{flex:0 0 auto;scroll-snap-align:center;display:grid;justify-items:center;gap:2px;width:72px;padding:6px 4px 8px;border-radius:12px;border:1px solid transparent;background:rgba(11,21,38,.55);color:var(--porcelain);text-decoration:none}
.tongshu-chip[aria-current]{border-color:var(--gold-500);background:rgba(201,162,75,.18);box-shadow:inset 0 0 0 1px rgba(201,162,75,.4)}
.tongshu-chip__thumb{width:56px;height:70px;object-fit:cover;border-radius:8px;background:var(--navy-700)}
.tongshu-chip__d{font-family:var(--font-serif);font-weight:600;font-size:1rem;line-height:1.1}
.tongshu-chip__hanzi{font-family:var(--font-hanzi);font-size:.75rem;color:var(--slate)}
.tongshu-chip__dot{width:5px;height:5px;border-radius:50%;background:transparent}
.tongshu-chip__dot[data-level=good]{background:var(--gold-500)}
.tongshu-chip__dot[data-level=bad]{background:var(--seal)}
.tongshu-chip,.shio-chip,.month__cell,.important__item>*,.tongshu-strip button[data-dir],.hours tr{transition:border-color var(--tr),background-color var(--tr),transform var(--tr)}
.tongshu-chip:hover,.shio-chip:hover,.month__cell:not(.month__cell--empty):hover,.month__nav a:hover,.tongshu-strip button[data-dir]:hover,.important__item>a:hover{border-color:var(--gold-500);background:rgba(201,162,75,.14);color:var(--porcelain)}
.tongshu-chip:hover,.important__item>a:hover{transform:translateY(-2px)}
.tongshu-hours,.tongshu-loshu,.tongshu-month,.tongshu-terms,.tongshu-personal,.tongshu-important,.tongshu-guide{position:relative;padding-block:var(--sec-pad)}
.terms__card,.personal__result,.guide__card{padding:var(--space-24);border-radius:var(--radius-card);border:var(--border-card);background:var(--card)}
table.hours{width:100%;border-collapse:collapse}
.hours thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.hours tbody{display:grid;gap:var(--space-12)}
.hours tr{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;padding:var(--space-12);border-radius:var(--radius-img);border:var(--border-card);background:var(--card)}
.hours th,.hours td{display:block;min-width:0;padding:0;border:0;text-align:left;font-weight:400}
.hours th{font-family:var(--font-hanzi);font-weight:600;font-size:2rem;line-height:1.05;color:var(--porcelain)}
.hours td{font-size:.8125rem;color:var(--slate)}
.hours__range{color:var(--porcelain);font-weight:500;font-variant-numeric:tabular-nums}
.hours__pillar,.hours__god{font-family:var(--font-hanzi);color:var(--porcelain)}
.hours th small,.hours th span,.hours__god small,.hours__status small{display:block;font-family:var(--font-sans);font-size:.6875rem;font-weight:400;line-height:1.35;color:var(--slate)}
.hours__status small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hours__status{margin-top:4px;font-family:var(--font-sans);font-size:.75rem;font-weight:600;color:var(--porcelain)}
.hours__mark{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:5px;border-radius:50%;font-size:.625rem;vertical-align:-3px;border:1px solid rgba(250,247,240,.3)}
.hours__mark[data-status=good]{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}
.hours__mark[data-status=avoid]{background:var(--seal);border-color:var(--seal);color:var(--porcelain)}
.hours tr[data-status=good]{border-color:rgba(201,162,75,.5)}
.hours tr[data-status=avoid]{border-color:rgba(158,43,43,.6)}
.hours tr.is-now{border-color:var(--gold-300);box-shadow:inset 0 0 0 1px var(--gold-300),var(--glow);animation:ts-pulse 900ms var(--ease-out) 1}
.hours tr.is-now th::after{content:"sekarang";display:block;font-family:var(--font-sans);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
@keyframes ts-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.tongshu-loshu__body,.tongshu-terms__grid{display:grid;gap:var(--space-32);align-items:start}
table.loshu{width:100%;max-width:420px;table-layout:fixed;border-collapse:separate;border-spacing:6px}
.loshu td{aspect-ratio:1;padding:var(--space-8);text-align:center;vertical-align:middle;border-radius:var(--radius-img);border:1px solid var(--grid-line);background:var(--card);color:var(--porcelain)}
.loshu__n{display:block;font-family:var(--font-serif);font-weight:600;font-size:2rem;line-height:1.1}
.loshu__hanzi{display:block;font-family:var(--font-hanzi);font-size:.8125rem;opacity:.85}
.loshu td[data-star="1"]{background:var(--star-1);color:var(--navy-900)}
.loshu td[data-star="2"]{background:var(--star-2)}
.loshu td[data-star="3"]{background:var(--star-3)}
.loshu td[data-star="4"]{background:var(--star-4)}
.loshu td[data-star="5"]{background:var(--star-5);color:var(--navy-900)}
.loshu td[data-star="6"]{background:var(--star-6);color:var(--navy-900)}
.loshu td[data-star="7"]{background:var(--star-7)}
.loshu td[data-star="8"]{background:var(--star-8);color:var(--navy-900)}
.loshu td[data-star="9"]{background:var(--star-9)}
.loshu td[data-dir=C]{box-shadow:0 0 0 2px var(--gold-500),var(--glow)}
.tongshu-month::before,.tongshu-terms::before,.tongshu-cta::before{content:"";position:absolute;inset:0;pointer-events:none}
.tongshu-month::before{z-index:-1;opacity:.25;background:var(--texture,none) repeat;background-size:512px}
.month__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16);margin-bottom:var(--space-24)}
.month__nav a{padding:8px 16px;border-radius:var(--radius-btn);border:1px solid rgba(201,162,75,.35);font-size:var(--fs-small);text-decoration:none}
[data-month=""],.month__scroll{transition:opacity 200ms var(--ease-out)}
[data-month=""].is-out,.month__scroll.is-out{opacity:0}
table.month{width:100%;table-layout:fixed;border-collapse:collapse}
.month th{padding:6px 2px;border-bottom:1px solid var(--grid-line);font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-500)}
.month td{padding:2px;vertical-align:top}
/* .month__cell ADA DI <td> — jangan beri display:block, tabelnya runtuh jadi satu kolom. */
.month__cell{height:64px;border-radius:10px;border:1px solid var(--grid-line);background:rgba(18,32,58,.55);color:var(--porcelain)}
.month__cell--empty{border-color:transparent;background:none}
.month__cell>a{display:flex;flex-direction:column;gap:1px;height:100%;padding:4px 5px;overflow:hidden;color:inherit;text-decoration:none}
.month__cell[data-level=good]{box-shadow:inset 3px 0 0 var(--gold-500)}
.month__cell[data-level=bad]{box-shadow:inset 3px 0 0 var(--seal)}
.month__cell[aria-current=date]{border-color:var(--gold-300);box-shadow:inset 0 0 0 1px var(--gold-300)}
.month__d{display:block;font-family:var(--font-serif);font-weight:600;font-size:1.0625rem;line-height:1.2}
.month__lunar{display:block;font-family:var(--font-hanzi);font-size:.625rem;line-height:1.3;color:var(--slate)}
.month__off{font-family:var(--font-hanzi);font-size:.75rem;line-height:1.3;color:var(--gold-300)}
.month__dot{font-size:.625rem;line-height:1.3;color:var(--gold-300)}
.month__cell[data-level=bad] .month__dot{color:var(--seal)}
.month__icons{display:flex;gap:3px;line-height:1;font-size:.625rem;color:var(--gold-300)}
.month__icons [data-kind=holiday]{color:var(--seal)}
.tongshu-terms::before{z-index:-1;opacity:.35;background:var(--season,none) center/cover no-repeat}
svg.wheel{width:min(100%,460px);height:auto;margin-inline:auto;color:var(--gold-500)}
.wheel__needle{transform:rotate(var(--angle,0deg));transform-box:view-box;transform-origin:center;transition:transform 1200ms var(--ease-out);fill:var(--gold-300);stroke:var(--gold-300);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(232,200,114,.55))}
.terms__card [lang],.terms__card .hanzi{font-family:var(--font-hanzi);font-size:clamp(2.5rem,5vw,3.5rem);line-height:1;color:var(--gold-300)}
.shio-chips{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0 0 var(--space-24);padding:0;border:0;list-style:none}
.shio-chip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 14px 7px 7px;border-radius:var(--radius-btn);border:1px solid rgba(201,162,75,.28);background:var(--card);color:var(--porcelain);font-size:var(--fs-small)}
.shio-chip img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--navy-700)}
.shio-chip [lang],.shio-chip .hanzi{font-family:var(--font-hanzi);color:var(--gold-300)}
.shio-chip[aria-pressed=true]{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}
.shio-chip[aria-pressed=true] [lang],.shio-chip[aria-pressed=true] .hanzi{color:var(--navy-900)}
.personal__result:empty{display:none}
.personal__rel{margin:0 0 var(--space-8);font-size:1.0625rem}
.personal__rel [lang]{font-family:var(--font-hanzi);font-size:1.5rem;vertical-align:-.1em}
.personal__key{color:var(--gold-300);font-weight:600}
.personal__key[data-rel=clash],.personal__key[data-rel=punish],.personal__key[data-rel=harm],.personal__key[data-rel=destroy]{color:#E9A2A2}
.personal__god{margin:var(--space-12) 0 0;padding-top:var(--space-12);border-top:1px solid rgba(250,247,240,.1);font-size:var(--fs-small);color:var(--slate)}
.important__list{display:grid;gap:var(--space-12);margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.important__item>*{display:flex;align-items:center;gap:var(--space-12);text-decoration:none;padding:var(--space-12) var(--space-16);border-radius:var(--radius-img);border:var(--border-card);background:var(--card);color:var(--porcelain)}
.important__item>*::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:2px;background:var(--gold-500)}
.important__item[data-kind=holiday]>*::before{background:var(--seal)}
.important__item[data-kind=term]>*::before{background:var(--el)}
.guide__grid{display:grid;gap:var(--space-24);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tongshu-cta{position:relative;overflow:hidden;margin-top:var(--space-64);text-align:center;padding:var(--space-64) var(--space-32);border-radius:var(--radius-card);border:var(--border-card);background:var(--navy-800)}
.tongshu-cta::before{opacity:.32;background:var(--cta-image,none) center/cover no-repeat}
.tongshu-cta>*{position:relative}
.js-tongshu-share{cursor:pointer}
@media (min-width:481px){.hours tbody{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){
.tongshu-hero__art,.tongshu-hero__img{object-position:70% 40%}
.hours tbody{grid-template-columns:repeat(3,minmax(0,1fr))}
.tongshu-loshu__body,.tongshu-terms__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.month__cell{height:66px}
.month__d{font-size:1.125rem}}
@media (min-width:1024px){
.tongshu-hero{padding:96px 0 var(--space-24)}
/* lembar dibatasi agar hero tetap satu layar (§4.1) */
.tongshu-sheet{width:min(38%,520px);min-width:420px;max-height:min(52svh,500px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold-500) transparent}
.hours tbody{grid-template-columns:repeat(6,minmax(0,1fr))}
.hours th{font-size:2.25rem}
.month__cell{height:68px}}
@media (max-width:767px){
.tongshu-hero__particles,.tongshu-hero__video{display:none}
.tongshu-hero{min-height:clamp(640px,100svh,900px);padding-top:96px}
.tongshu-hero__scrim{background:linear-gradient(180deg,rgba(11,21,38,.5),rgba(11,21,38,.12) 30%,rgba(11,21,38,.94) 72%,var(--navy-900))}
.tongshu-sheet{width:100%;padding:var(--space-16)}
.tongshu-chip{width:64px}
.tongshu-chip__thumb{width:54px;height:68px}}
@media (max-width:480px){
.tongshu-sheet__pillar{gap:var(--space-12)}
.tongshu-sheet__hanzi{font-size:4rem}
.tongshu-sheet__pillar h2{font-size:1.5rem}
.hours tbody{grid-template-columns:minmax(0,1fr)}
.hours tr{padding:var(--space-8) var(--space-12)}
.hours th{font-size:1.75rem}
svg.wheel{width:min(100%,280px)}
.month td{padding:1px}
.month__cell{height:46px;border-radius:7px}
.month__cell>a{padding:2px 3px}
.month__d{font-size:.9375rem}
.month__lunar,.month__off{display:none}
.month__icons{font-size:.5rem}
.important__list{grid-template-columns:minmax(0,1fr)}
.tongshu-cta{padding:var(--space-32) var(--space-16)}}
/* gerak dimatikan total bila pengguna memintanya */
@media (prefers-reduced-motion:reduce){
.tongshu-hero__img{animation:none!important}
.tongshu-hero__particles,.tongshu-hero__video{display:none!important}
.hours tr.is-now{animation:none}
.wheel__needle,[data-month=""],.tongshu-chip,.shio-chip,.month__cell,.hours tr{transition:none}}

/* ------------------------------------------------ koreksi integrasi (orkestrator) */
/* kontras WCAG 2.2 AA (axe): hijau bintang 4 dan merah bintang 7 terlalu terang untuk teks
   porselen, dan hanzi seal hari raya memakai merah seal di atas navy (rasio 2,28). Warnanya
   ditua-/dimudakan seperlunya; hue-nya tetap sehingga makna warna bintang tidak berubah. */
.tongshu-loshu{--star-4:#37624A;--star-7:#8C2E1F}
.loshu td[data-star="4"],.loshu td[data-star="7"]{color:var(--porcelain)}
.loshu td[data-star="4"] .loshu__hanzi,.loshu td[data-star="7"] .loshu__hanzi{opacity:1;color:var(--porcelain)}
.important__seal[data-kind=holiday],.important__item[data-kind=holiday] .important__seal{color:#E9897A}
.month__icons [data-kind=holiday]{color:#E9897A}
/* Strip tanggal memakai <ol>; tanpa ini nomor urut daftar ikut tercetak di atas tiap kartu. */
.tongshu-strip__track{list-style:none;margin:0;padding:0}
.tongshu-strip__track>li{list-style:none;margin:0;padding:0;display:block}
/* Hanzi pilar sudah tampil besar di .tongshu-sheet__hanzi; yang di dalam sub-judul hanya
   keterangan, jadi harus seukuran teks biasa — kalau tidak, 己丑 terbaca dua kali sebagai judul. */
.tongshu-sheet__sub [lang="zh-Hant"]{font-size:1em;line-height:inherit;letter-spacing:.02em}

/* Kartu hari penting: satu baris mengalir, bukan lima kolom sempit yang mematahkan kata. */
.important__item>a,.important__item>.important__in{flex-wrap:wrap;align-items:baseline;row-gap:4px}
.important__seal{flex:0 0 auto;font-size:1.05rem;color:var(--gold-300)}
.important__item[data-kind=holiday] .important__seal{color:#E9897A}
.important__when{flex:0 0 auto;font-family:var(--font-serif);font-weight:600;white-space:nowrap}
.important__label{flex:1 1 auto;min-width:0}
.important__kind{flex:0 0 auto;margin-left:auto;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-500);white-space:nowrap}
.important__body{flex:1 0 100%;font-size:var(--fs-small);color:var(--slate)}

@media (max-width:767px){
/* Tanpa batas tinggi, lembar almanak penuh membuat hero jadi lebih dari dua layar dan
   lukisan 9:16 tidak pernah terlihat. Dibatasi + digulir di dalam, sama seperti di desktop. */
.tongshu-sheet{max-height:min(44svh,380px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold-500) transparent}
/* Lukisan 9:16 hampir tidak terpotong, jadi hewannya selalu jatuh di sekitar 40% tinggi hero.
   Lembar almanak diberi jarak supaya berhenti di bawah titik itu — hewan tetap terlihat utuh,
   sesuai design.md §4.1 ("hewan di 45% atas"). */
.tongshu-hero__intro{margin-bottom:clamp(64px,13vh,120px)}
/* Lukisan malam sudah gelap; scrim + tint bawaan membuatnya rata navy di HP sehingga hewannya
   hilang sama sekali. Keduanya dilonggarkan, dan titik fokus digeser supaya hewan berada di
   paruh atas — tepat di atas lembar almanak. object-position harus ikut dipasang di .tongshu-hero__art
   karena <img> mewarisi nilainya dari <picture> lewat aturan .tongshu-hero__art>img. */
.tongshu-hero{--tint-night:rgba(11,21,38,.18);--tint-dusk:rgba(178,88,60,.14);--tint-dawn:rgba(214,150,80,.12)}
.tongshu-hero__scrim{background:linear-gradient(180deg,rgba(11,21,38,.34),rgba(11,21,38,.02) 24%,rgba(11,21,38,.04) 46%,rgba(11,21,38,.74) 76%,var(--navy-900))}
.tongshu-hero__art,.tongshu-hero__img{object-position:50% 44%}
.important__kind{margin-left:0}
}

/* ------------------------------------------------ revisi 22 Sep 2026 (draf Dipankara) */
/* Kepala lembar: eyebrow di kiri, logo emas di kanan atas (kisi dua kolom). Eyebrow boleh
   patah dua baris di HP; tautan "Kembali ke hari ini" (admin) turun ke baris sendiri. */
.tongshu-sheet__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:8px}
.tongshu-sheet__head .eyebrow{min-width:0;margin:0;letter-spacing:.14em}
.tongshu-sheet__logo{display:block;width:106px;height:auto;justify-self:end}
.tongshu-sheet__head .tongshu-sheet__today{grid-column:1/-1;justify-self:start}
/* Urutan judul mengikuti draf: nama · keterangan · pilar + pinyin · tanggal · tanggal lunar · jam.
   Aturan .tongshu-sheet__pillar [lang] membesarkan SEMUA hanzi di blok ini; pilar di baris
   keterangan dikembalikan ke ukuran teks. */
.tongshu-sheet__gz{margin:4px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-small)}
.tongshu-sheet__gz [lang="zh-Hant"]{display:inline;font-size:1.0625rem;line-height:1.3;letter-spacing:.04em;text-shadow:none}
.tongshu-sheet__py{color:var(--slate)}
.tongshu-sheet__date{margin:6px 0 0;font-size:1.0625rem;font-weight:500;line-height:1.35;color:var(--porcelain)}
.tongshu-sheet__lunar{margin:4px 0 0;font-size:.75rem;font-weight:600;line-height:1.45;color:var(--porcelain);white-space:nowrap}
.tongshu-sheet__lunar-k{text-transform:uppercase;letter-spacing:.1em;color:var(--gold-300)}
.tongshu-sheet__now{margin:10px 0 0}
.tongshu-sheet__now [data-clock]{display:inline-block;margin-left:0}
/* Dua tombol di kaki lembar diletakkan di tengah, seperti draf. */
.tongshu-sheet__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12)}

/* Pengunjung umum: kalender bulan jadi penanggalan saja (tanpa tautan, tanpa pindah bulan). */
.month__cell>.month__in{display:flex;flex-direction:column;gap:1px;height:100%;padding:4px 5px;overflow:hidden;color:inherit}
.month__cell.is-static{pointer-events:none}
.month__nav--fixed{display:flex;justify-content:center;margin:0 0 var(--space-12)}
.important__item>.important__in{cursor:default}
@media (max-width:480px){
.month__cell>.month__in{padding:2px 3px}
.tongshu-sheet__logo{width:92px}
}

/* ------------------------------------------------ revisi 22 Sep 2026, putaran 2 */
/* Roda 24 term: teks SVG tidak mewarisi warna, jadi tanpa fill eksplisit ia hitam di atas navy. */
.wheel__label{fill:var(--porcelain);fill-opacity:.82}
.wheel__label.is-now{fill:var(--gold-300);fill-opacity:1;font-weight:600}
.wheel__center{fill:var(--porcelain);font-family:var(--font-hanzi);font-weight:600}
.wheel__center-sub{fill:var(--gold-300);letter-spacing:.06em}

/* Penanda kalender bulan: satu baris ●/✕/○ + ◎ ☗ ✎, lebih besar dan berwarna beda-beda. */
.month__marks{display:flex;align-items:center;gap:6px;margin-top:auto;line-height:1}
.month__dot{font-size:.875rem;line-height:1;color:var(--gold-300)}
.month__cell[data-level=bad] .month__dot{color:#E9897A}
.month__cell[data-level=ordinary] .month__dot{color:var(--slate);opacity:.75}
.month__icons{font-size:.875rem;gap:5px;line-height:1;color:var(--gold-300)}
.month__icons [data-kind=term]{color:var(--porcelain)}
.month__icons [data-kind=holiday]{color:#E9897A}
.month__icons [data-kind=note],.month__icons [data-kind=event]{color:var(--gold-500)}
.month__cell>a,.month__cell>.month__in{gap:2px}
.month .month__cell{height:74px}
/* Legenda memakai glyph & warna yang sama dengan sel, jadi Baik dan Kurang Baik tidak lagi kembar. */
.month__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:var(--space-16) 0 0;padding:0;list-style:none;font-size:var(--fs-small);color:var(--slate)}
.month__legend li{display:inline-flex;align-items:center;gap:7px}
.month__legend b{font-weight:400;font-size:1.05rem;line-height:1}
.month__legend [data-kind=good] b{color:var(--gold-300)}
.month__legend [data-kind=bad] b{color:#E9897A}
.month__legend [data-kind=ordinary] b{color:var(--slate);opacity:.75}
.month__legend [data-kind=term] b{color:var(--porcelain)}
.month__legend [data-kind=holiday] b{color:#E9897A}
.month__legend [data-kind=note] b{color:var(--gold-500)}
@media (min-width:768px){.month .month__cell{height:78px}}
@media (min-width:1024px){.month .month__cell{height:82px}}
@media (max-width:480px){
.month .month__cell{height:52px}
.month__icons,.month__dot{font-size:.75rem}
.month__marks{gap:4px}
.tongshu-sheet__lunar{font-size:.6875rem;letter-spacing:-.005em}
}
/* HP: baris LUNAR terlalu panjang untuk kolom di kanan hanzi, jadi blok judul dijadikan kisi
   dan baris LUNAR merentang dua kolom (lebar penuh lembar). Bulan kabisat — teks terpanjang,
   sekali dalam ±3 tahun — boleh turun dua baris agar tidak terpotong. */
@media (max-width:767px){
.tongshu-sheet__pillar{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-12);row-gap:0;align-items:center}
.tongshu-sheet__title{display:contents}
.tongshu-sheet__hanzi{grid-column:1;grid-row:1/span 4;align-self:center}
.tongshu-sheet__pillar h2,.tongshu-sheet__sub,.tongshu-sheet__gz,.tongshu-sheet__date,.tongshu-sheet__now{grid-column:2}
.tongshu-sheet__lunar{grid-column:1/-1;margin-top:8px}
.tongshu-sheet__lunar.is-leap{white-space:normal}
}