/* ==========================================================================
   konsultan.or.id — situs.css (v2, halaman publik)
   Arah: editorial, tenang, premium. Tinta gelap + satu aksen kobalt.
   Satu objek 3D (anyaman) di hero; selebihnya tipografi, ruang kosong, garis rambut.
   Panel admin tetap memakai app.css. Rincian: docs/03-desain-arah.md §v2.
   ========================================================================== */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* 1. TOKENS --------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --surface-2: #ECEAE4;
  --ink: #0E1116;            /* 17.6:1 di bg */
  --ink-2: #353B44;          /* 10.5:1 */
  --muted: #5B626C;          /* 5.9:1 */
  --line: #DAD7CF;
  --line-strong: #8D939B;    /* 3.1:1 untuk tepi input */
  --accent: #3451D1;         /* 6.3:1 di bg; putih di atasnya 6.6:1 */
  --accent-strong: #2840AE;
  --on-accent: #FFFFFF;
  --ok: #1D7046;             /* 5.6:1 */
  --bad: #B0261D;            /* 6.1:1 */
  --focus: #3451D1;

  /* Permukaan gelap (hero, kartu, footer) sama di kedua mode */
  --night: #0B0D11;
  --night-2: #151922;
  --night-line: #262B35;
  --night-ink: #F2F0EA;      /* 17:1 */
  --night-muted: #A2A8B2;    /* 8:1 */
  --night-accent: #9CAEFF;   /* 8.9:1 */

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: .8125rem;
  --fs-s: .9375rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.25rem;
  --fs-2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-3: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --fs-4: clamp(2.9rem, 1.3rem + 6.2vw, 6.25rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 5rem; --s9: 8rem;

  --wrap: 76rem;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --radius: 10px;
  --radius-lg: 18px;
  --tap: 44px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --dur: 220ms;
  --shadow-1: 0 1px 1px rgb(14 17 22 / .04), 0 8px 24px -12px rgb(14 17 22 / .18);
  --shadow-3d: 0 2px 4px rgb(14 17 22 / .08), 0 30px 60px -20px rgb(14 17 22 / .45), 0 18px 36px -24px rgb(14 17 22 / .35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1014;
    --surface: #15181E;
    --surface-2: #1C2028;
    --ink: #ECEAE4;
    --ink-2: #C9CCD2;
    --muted: #A3A9B2;
    --line: #272B33;
    --line-strong: #6B717B;
    --accent: #93A6FF;
    --accent-strong: #B3C0FF;
    --on-accent: #0B0D11;
    --ok: #5FC08D;
    --bad: #FF8A80;
    --focus: #93A6FF;
    --shadow-1: 0 1px 1px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
  }
}

/* 2. DASAR ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
main:focus { outline: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.1; font-weight: 400; text-wrap: balance; }
p, li { text-wrap: pretty; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); border-radius: 6px;
}
.skip-link:focus { top: var(--s4); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--sempit { max-width: calc(46rem + 2 * var(--gutter)); }

/* 3. TIPOGRAFI ------------------------------------------------------------- */
.display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
.display { font-size: var(--fs-4); line-height: .98; }
.display em, .h1 em, .h2 em { font-style: italic; color: var(--accent); }
.h1 { font-size: var(--fs-3); line-height: 1.02; }
.h2 { font-size: var(--fs-2); line-height: 1.08; }
.h3 { font-size: var(--fs-1); line-height: 1.25; }
.eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow__no { font-variant-numeric: tabular-nums; color: var(--ink); }
.eyebrow__no::after { content: ""; display: inline-block; width: 2rem; height: 1px; background: currentColor; margin-left: var(--s3); vertical-align: middle; opacity: .5; }
.lead { font-size: var(--fs-1); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.muted { color: var(--muted); }
.kecil { font-size: var(--fs-s); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.prose { max-width: 40em; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-2); margin-top: var(--s7); scroll-margin-top: var(--s6); }
.prose ol, .prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s2); }

/* 4. TOMBOL & TAUTAN ------------------------------------------------------- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--bg); --b-line: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: .7rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--b-line); background: var(--b-bg); color: var(--b-fg);
  font-size: var(--fs-s); font-weight: 600; letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { --b-bg: var(--accent); --b-line: var(--accent); --b-fg: var(--on-accent); color: var(--b-fg); }
.btn:active { transform: translateY(1px); }
.btn--garis { --b-bg: transparent; --b-fg: var(--ink); --b-line: var(--line-strong); }
.btn--garis:hover { --b-bg: transparent; --b-fg: var(--accent); --b-line: var(--accent); }
.btn--aksen { --b-bg: var(--accent); --b-line: var(--accent); --b-fg: var(--on-accent); }
.btn--aksen:hover { --b-bg: var(--accent-strong); --b-line: var(--accent-strong); }
.btn--malam { --b-bg: var(--night-ink); --b-fg: var(--night); --b-line: var(--night-ink); }
.btn--malam:hover { --b-bg: var(--night-accent); --b-line: var(--night-accent); --b-fg: var(--night); }
.btn--malam-garis { --b-bg: transparent; --b-fg: var(--night-ink); --b-line: #4A505B; }
.btn--malam-garis:hover { --b-bg: transparent; --b-fg: var(--night-accent); --b-line: var(--night-accent); }
.btn .panah { transition: transform var(--dur) var(--ease); }
.btn:hover .panah { transform: translateX(3px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.tautan-panah { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 600; font-size: var(--fs-s); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.aksi { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* 5. HEADER & FOOTER ------------------------------------------------------- */
.kepala { position: relative; z-index: 20; border-bottom: 1px solid var(--line); }
.kepala__isi { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 4.25rem; }
.merek { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: 1.0625rem; }
.merek:hover { color: inherit; }
.merek__tanda { width: 22px; height: 22px; }
.merek__tld { color: var(--muted); font-weight: 500; }
.nav { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.75rem); }
.nav__daftar { display: none; list-style: none; padding: 0; gap: 1.5rem; }
.nav__tautan { text-decoration: none; font-size: var(--fs-s); color: var(--ink-2); padding: .5rem 0; }
.nav__tautan[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 currentColor; }
.bahasa { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; }
.bahasa a, .bahasa span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; min-height: 2rem; padding: 0 .55rem; border-radius: 999px; text-decoration: none; color: var(--muted); }
.bahasa [aria-current="true"] { background: var(--ink); color: var(--bg); }
.bahasa a:hover { color: var(--ink); }
.kepala .btn { min-height: 2.5rem; padding: .5rem 1rem; }
.nav__cta { display: none !important; }
.menu-ponsel { position: relative; }
.menu-ponsel summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); min-width: var(--tap); justify-content: center; cursor: pointer; font-size: var(--fs-s); font-weight: 600; }
.menu-ponsel summary::-webkit-details-marker { display: none; }
.menu-ponsel__ikon, .menu-ponsel__ikon::before { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--dur) var(--ease); }
.menu-ponsel__ikon::before { content: ""; position: absolute; top: 6px; }
.menu-ponsel__ikon { transform: translateY(-3px); }
.menu-ponsel[open] .menu-ponsel__ikon { transform: rotate(45deg); }
.menu-ponsel[open] .menu-ponsel__ikon::before { transform: translateY(-6px) rotate(-90deg); }
.menu-ponsel__teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu-ponsel ul {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 15rem; list-style: none; padding: var(--s3);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  display: grid; gap: 2px; z-index: 30;
}
.menu-ponsel li a:not(.btn) { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border-radius: 8px; text-decoration: none; }
.menu-ponsel li a:not(.btn):hover { background: var(--surface-2); color: var(--ink); }
.menu-ponsel li .btn { width: 100%; margin-top: var(--s2); }
@media (min-width: 60em) {
  .nav__daftar { display: flex; }
  .nav__cta { display: inline-flex !important; }
  .menu-ponsel { display: none; }
}

/* Header di atas hero gelap (beranda) */
.beranda .kepala { position: absolute; inset: 0 0 auto 0; border-bottom-color: rgb(255 255 255 / .08); color: var(--night-ink); }
.beranda .merek__tld, .beranda .nav__tautan { color: var(--night-muted); }
.beranda .nav__tautan:hover { color: var(--night-ink); }
.beranda .bahasa { border-color: var(--night-line); }
.beranda .bahasa a { color: var(--night-muted); }
.beranda .bahasa [aria-current="true"] { background: var(--night-ink); color: var(--night); }
.beranda .kepala .btn { --b-bg: var(--night-ink); --b-fg: var(--night); --b-line: var(--night-ink); }
.beranda .kepala .btn:hover { --b-bg: var(--night-accent); --b-line: var(--night-accent); }
.beranda .kepala :focus-visible, .hero :focus-visible, .kaki :focus-visible { outline-color: var(--night-accent); }

.kaki { background: var(--night); color: var(--night-muted); margin-top: var(--s9); padding-block: var(--s8) var(--s6); font-size: var(--fs-s); }
.beranda .kaki { margin-top: 0; }
.kaki a { color: var(--night-ink); text-decoration: none; }
.kaki a:hover { color: var(--night-accent); }
.kaki__atas { display: grid; gap: var(--s6); padding-bottom: var(--s7); border-bottom: 1px solid var(--night-line); }
.kaki__merek { font-family: var(--font-display); font-size: var(--fs-2); color: var(--night-ink); line-height: 1.1; max-width: 16em; }
.kaki__tentang { margin-top: var(--s4); max-width: 34em; line-height: 1.6; }
.kaki ul { list-style: none; padding: 0; display: grid; gap: var(--s2); align-content: start; }
.kaki__bawah { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-top: var(--s5); font-size: var(--fs-xs); }
.kaki__bawah p { max-width: 52em; }
@media (min-width: 48em) { .kaki__atas { grid-template-columns: 2fr 1fr 1fr; } }

/* 6. HERO 3D -------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 78% 40%, #1A2030 0%, var(--night) 58%);
  color: var(--night-ink);
}
.hero__grid { display: grid; min-height: min(100svh, 60rem); padding-top: 4.25rem; }
.hero__teks { position: relative; z-index: 2; align-self: end; padding-block: var(--s5) var(--s8); }
.hero .eyebrow { color: var(--night-muted); }
.hero .display em { color: var(--night-accent); }
.hero .display { font-size: clamp(2.5rem, 1.1rem + 4.4vw, 4.6rem); line-height: 1.02; max-width: 12em; }
.hero__lead { margin-top: var(--s5); font-size: var(--fs-1); color: var(--night-muted); max-width: 30em; line-height: 1.5; }
.hero .aksi { margin-top: var(--s6); }
.hero__adegan { position: relative; overflow: hidden; order: -1; min-height: 40svh; margin-inline: calc(-1 * var(--gutter)); }
.hero__teks { padding-top: 0; }
.hero__adegan canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--ease); touch-action: pan-y; }
.hero__adegan.siap canvas { opacity: 1; }
.hero__cadangan {
  position: absolute; inset: 8% 6%; display: grid; place-items: center; perspective: 1100px; pointer-events: none;
  transition: opacity .8s var(--ease);
}
.hero__cadangan img { width: auto; max-width: min(80%, 34rem); max-height: 80%; object-fit: contain; transform: rotateX(48deg) rotateZ(-24deg); filter: drop-shadow(0 40px 40px rgb(0 0 0 / .5)); }
.hero__adegan.siap .hero__cadangan { opacity: 0; }
.hero__keterangan {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s4); z-index: 2;
  display: flex; gap: var(--s3); align-items: baseline; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--night-muted);
  pointer-events: none;
}
.hero__keterangan b { color: var(--night-ink); font-weight: 600; }
.hero__keterangan .titik { width: 6px; height: 6px; border-radius: 50%; background: var(--night-accent); flex: none; align-self: center; opacity: .9; }
@media (min-width: 60em) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; }
  .hero__teks { align-self: center; padding-block: var(--s8); }
  .hero__keterangan { justify-content: flex-start; }
  .hero__adegan { order: 0; min-height: auto; margin: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--s7)); }
  .hero__keterangan { left: var(--s8); bottom: var(--s6); }
}

/* 7. BAGIAN ---------------------------------------------------------------- */
.bagian { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.bagian + .bagian { border-top: 1px solid var(--line); }
.bagian__kepala { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.grid-2 { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 60em) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } }

/* 8. KLAIM ALAMAT + KARTU 3D ---------------------------------------------- */
.klaim__form { margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 30rem; }
.klaim__baris { display: flex; gap: var(--s2); flex-wrap: wrap; }
.klaim__baris .input { flex: 1 1 14rem; }
.klaim__status { min-height: 1.5em; font-size: var(--fs-s); color: var(--muted); }
.klaim__status[data-status="tersedia"] { color: var(--ok); }
.klaim__status[data-status="terpakai"] { color: var(--bad); }

.kartu3d { perspective: 1400px; width: 100%; max-width: 29rem; margin-inline: auto; }
.kartu3d__putar {
  position: relative; aspect-ratio: 1.586; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform .9s var(--ease);
}
.kartu3d.miring .kartu3d__putar { transition: transform .9s var(--ease), --rx 0s; }
.kartu3d.dibalik { --flip: 180deg; }
.kartu3d__sisi {
  position: absolute; inset: 0; border-radius: var(--radius-lg); padding: clamp(1.1rem, 4.5%, 1.75rem);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow-3d);
}
.kartu3d__depan { background: linear-gradient(150deg, #1C2230 0%, var(--night) 62%); color: var(--night-ink); border: 1px solid #2A303B; }
.kartu3d__depan::before { /* garis anyam halus */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 22px);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 60%);
}
.kartu3d__depan::after { /* kilau yang mengikuti kemiringan */
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(40% 30% at calc(50% + var(--gx, 0%)) calc(40% + var(--gy, 0%)), rgb(156 174 255 / .16), transparent 70%);
}
.kartu3d__belakang { transform: rotateY(180deg); background: linear-gradient(150deg, #FFFFFF, #ECEAE4); color: #0E1116; border: 1px solid #DAD7CF; }
.kartu3d__atas { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--night-muted); }
.kartu3d__belakang .kartu3d__atas { color: #5B626C; }
.kartu3d__tanda { width: 20px; height: 20px; flex: none; }
.kartu3d__alamat { position: relative; font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2.6vw, 2.25rem); line-height: 1.05; overflow-wrap: anywhere; }
.kartu3d__alamat .dom { color: var(--night-muted); }
.kartu3d__belakang .kartu3d__alamat .dom { color: #5B626C; }
.kartu3d__bawah { position: relative; display: flex; justify-content: space-between; align-items: end; gap: var(--s3); font-size: var(--fs-xs); color: var(--night-muted); line-height: 1.4; }
.kartu3d__belakang .kartu3d__bawah { color: #353B44; }
.pil { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid #343A46; font-size: .75rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--night-ink); }
.pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6B717B; }
.pil[data-status="tersedia"]::before { background: #5FC08D; box-shadow: 0 0 0 4px rgb(95 192 141 / .18); }
.pil[data-status="terpakai"]::before { background: #FF8A80; }
.pil[data-status="memeriksa"]::before { background: var(--night-accent); animation: denyut 1s ease-in-out infinite; }
@keyframes denyut { 50% { opacity: .3; } }
.kartu3d__kendali { display: flex; justify-content: center; margin-top: var(--s5); }
.tombol-balik { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: var(--fs-s); color: var(--ink-2); }
.tombol-balik:hover { border-color: var(--ink); color: var(--ink); }
.tombol-balik svg { width: 16px; height: 16px; }

/* 9. KURSI PENDIRI --------------------------------------------------------- */
.kursi { display: grid; gap: var(--s7); }
.kursi__angka { font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 7vw, 9rem); line-height: .85; letter-spacing: -.02em; }
.kursi__angka span { color: var(--muted); }
.kursi__grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 0; list-style: none;
}
.kursi__ruang { perspective: 1000px; max-width: 34rem; width: 100%; margin-inline: auto; padding: var(--s5) 0; }
.kursi__grid li { aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--line-strong); background: var(--surface); opacity: .9; transition: transform .5s var(--ease), opacity .5s; }
.kursi__grid li.terisi { background: var(--ink); border-color: var(--ink); opacity: 1; transform: translateZ(10px); box-shadow: 0 6px 10px -4px rgb(14 17 22 / .4); }
.kursi__grid li.berikut { border-color: var(--accent); border-width: 2px; opacity: 1; animation: denyut 2.4s ease-in-out infinite; }
.kursi__bidang { transform: rotateX(52deg) rotateZ(-30deg); transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.kursi__ruang:hover .kursi__bidang { transform: rotateX(40deg) rotateZ(-24deg); }
@media (min-width: 60em) { .kursi { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }

/* 10. ALUR ----------------------------------------------------------------- */
.alur { display: grid; gap: 0; list-style: none; padding: 0; counter-reset: alur; border-top: 1px solid var(--ink); }
.alur li { counter-increment: alur; padding: var(--s5) 0 var(--s6); border-bottom: 1px solid var(--line); display: grid; gap: var(--s2); }
.alur li::before { content: "0" counter(alur); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.alur h3 { font-family: var(--font-display); font-size: var(--fs-2); }
.alur p { color: var(--ink-2); max-width: 26em; }
@media (min-width: 48em) {
  .alur { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .alur li { border-bottom: 0; padding-right: var(--s6); }
  .alur li + li { border-left: 1px solid var(--line); padding-left: var(--s5); }
}

/* 11. FORMULIR ------------------------------------------------------------- */
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.input--besar { min-height: 3.5rem; font-size: var(--fs-1); padding-inline: 1.1rem; border-radius: 999px; }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.field { display: grid; gap: .4rem; }
.field + .field, .field + fieldset, fieldset + .field { margin-top: var(--s5); }
fieldset { border: 0; padding: 0; min-width: 0; }
.label, legend.label { font-weight: 600; font-size: var(--fs-s); padding: 0; }
.label .opt { font-weight: 400; color: var(--muted); }
.label .req { color: var(--bad); }
.hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.galat-teks { font-size: var(--fs-s); color: var(--bad); font-weight: 600; }
.sufiks-wrap { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sufiks-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.sufiks-wrap .input { border: 0; box-shadow: none !important; border-radius: 0; min-width: 0; }
.sufiks { display: flex; align-items: center; padding: 0 .9rem; background: var(--surface-2); color: var(--muted); font-size: var(--fs-s); white-space: nowrap; }
.cek { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: var(--fs-s); line-height: 1.5; }
.cek input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; flex: none; accent-color: var(--accent); }
.pilihan-baris { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pilihan-baris .cek { border: 1px solid var(--line); border-radius: 999px; padding: .55rem .95rem; align-items: center; min-height: var(--tap); }
.pilihan-baris .cek input { margin: 0; }
.pilihan-baris .cek:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ubin 3D: jenjang & sektor */
.ubin-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); perspective: 1000px; }
.ubin-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.ubin { position: relative; display: block; cursor: pointer; }
.ubin input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.ubin__muka {
  display: grid; gap: .35rem; align-content: start; height: 100%; min-height: 4.5rem;
  padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-s); line-height: 1.35; transform-origin: 50% 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .2s, color .2s, border-color .2s;
  box-shadow: 0 1px 0 var(--line);
}
.ubin__no { font-size: .6875rem; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.ubin__kecil { font-size: var(--fs-xs); color: var(--muted); }
.ubin:hover .ubin__muka { transform: translateY(-3px) rotateX(10deg); box-shadow: 0 14px 24px -14px rgb(14 17 22 / .35); border-color: var(--line-strong); }
.ubin input:checked + .ubin__muka { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-4px) rotateX(12deg); box-shadow: 0 18px 28px -14px rgb(14 17 22 / .55); }
.ubin input:checked + .ubin__muka .ubin__no, .ubin input:checked + .ubin__muka .ubin__kecil { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.ubin input:focus-visible + .ubin__muka { outline: 2px solid var(--focus); outline-offset: 3px; }
.ubin input:disabled + .ubin__muka { opacity: .45; }
.ubin.goyang .ubin__muka { animation: goyang .35s; }
@keyframes goyang { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.helai { display: inline-flex; gap: 3px; height: 14px; align-items: stretch; }
.helai i { width: 3px; border-radius: 2px; background: currentColor; opacity: .2; }
.helai i.on { opacity: 1; }
a.ubin { text-decoration: none; }
a.ubin:hover { color: inherit; }
a.ubin .ubin__muka { min-height: 5.5rem; }

/* Formulir bertahap */
.daftar { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 64em) { .daftar { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); } .daftar__samping { position: sticky; top: var(--s6); } }
.progres { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: var(--s6); }
.progres li { display: grid; gap: .5rem; font-size: .75rem; color: var(--muted); }
.progres li::before { content: ""; height: 3px; border-radius: 2px; background: var(--line); transition: background .4s var(--ease); }
.progres li.selesai::before, .progres li[aria-current="step"]::before { background: var(--ink); }
.progres li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.progres button { all: unset; cursor: pointer; }
.progres button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.progres .label-langkah { display: none; }
@media (min-width: 40em) { .progres .label-langkah { display: inline; } }
.langkah { padding-block: var(--s6); border-top: 1px solid var(--line); }
.langkah:first-of-type { border-top: 0; padding-top: 0; }
.langkah > legend.langkah__judul { float: left; width: 100%; padding: 0; margin-bottom: var(--s3); }
.langkah > legend.langkah__judul + * { clear: both; }
.langkah__no { display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.langkah__lead { margin-bottom: var(--s6); }
.langkah > legend.langkah__judul + .field { margin-top: var(--s5); }
.langkah__nav { display: none; }
.js-bertahap .langkah { border-top: 0; padding-top: 0; }
.js-bertahap .langkah:not(.aktif) { display: none; }
.js-bertahap .langkah.aktif { animation: masuk .45s var(--ease); }
.js-bertahap .langkah__nav { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.js-bertahap .kirim-tanpa-js { display: none; }
@keyframes masuk { from { opacity: 0; transform: translateY(8px); } }
.form-catatan { margin-top: var(--s5); font-size: var(--fs-xs); color: var(--muted); max-width: 42em; }

.ringkasan-galat { border: 1px solid var(--bad); border-left-width: 4px; border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s6); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.ringkasan-galat:focus { outline: 2px solid var(--bad); outline-offset: 3px; }
.ringkasan-galat p { font-weight: 600; }
.ringkasan-galat ul { margin-top: var(--s2); padding-left: 1.1em; font-size: var(--fs-s); }
.pesan-langkah { color: var(--bad); font-size: var(--fs-s); font-weight: 600; margin-top: var(--s3); }

/* Kartu pratinjau profil */
.pratinjau .kartu3d__putar { aspect-ratio: 1.15; }
.pratinjau .kartu3d__alamat { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
.pratinjau__peran { color: var(--night-muted); font-size: var(--fs-s); margin-top: .35rem; }
.pratinjau__sektor { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin-top: var(--s3); }
.pratinjau__sektor li { font-size: .6875rem; border: 1px solid #343A46; border-radius: 999px; padding: .2rem .55rem; color: var(--night-ink); }
.pratinjau__monogram { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid #3A414D; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.15rem; color: var(--night-ink); }
.pratinjau__catatan { text-align: center; margin-top: var(--s4); font-size: var(--fs-xs); color: var(--muted); }

/* 12. DIREKTORI ----------------------------------------------------------- */
.kepala-halaman { padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--s7); display: grid; gap: var(--s4); }
.cari { display: flex; gap: var(--s2); max-width: 40rem; }
.dir { display: grid; gap: var(--s6); }
@media (min-width: 60em) { .dir { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s7); } }
.saring summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }
.saring fieldset { margin-top: var(--s5); display: grid; gap: var(--s2); }
.saring legend { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--s2); }
.saring .cek { justify-content: space-between; }
.saring .cek span:first-of-type { flex: 1; }
.hitung { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.chip-aktif { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-xs); text-decoration: none; color: var(--ink-2); }
a.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--hapus::after { content: "×"; font-size: 1rem; line-height: 1; }
.hasil-bar { display: flex; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); margin-bottom: var(--s5); font-size: var(--fs-s); }
.kartu-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.kartu { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.kartu:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.kartu__nama { font-family: var(--font-display); font-size: var(--fs-1); }
.kartu__nama a { text-decoration: none; }
.kartu__nama a::after { content: ""; position: absolute; inset: 0; }
.kartu { position: relative; }
.kartu__meta, .kartu__alamat { font-size: var(--fs-xs); color: var(--muted); }
.kartu__bio { font-size: var(--fs-s); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.paging { display: flex; gap: var(--s2); list-style: none; padding: 0; margin-top: var(--s6); }
.paging a, .paging span { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.paging [aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.kosong-catatan { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-s); }

/* 13. PROFIL --------------------------------------------------------------- */
.profil { display: grid; gap: var(--s7); padding-top: var(--s7); }
@media (min-width: 60em) { .profil { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.fakta { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.fakta div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.fakta dt { color: var(--muted); }
.catatan { border-left: 2px solid var(--line-strong); padding-left: var(--s4); font-size: var(--fs-s); color: var(--muted); }

/* 14. TENTANG -------------------------------------------------------------- */
.dok { display: grid; gap: var(--s7); }
@media (min-width: 60em) { .dok { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s8); } .dok__toc { position: sticky; top: var(--s6); align-self: start; } }
.dok__toc ol { list-style: none; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-s); counter-reset: toc; }
.dok__toc li { counter-increment: toc; }
.dok__toc a { text-decoration: none; color: var(--ink-2); display: inline-flex; gap: .6rem; min-height: 2rem; align-items: center; }
.dok__toc a::before { content: "0" counter(toc); font-size: .6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.etik { list-style: none; padding: 0 !important; display: grid; gap: 0; counter-reset: etik; border-top: 1px solid var(--ink); }
.etik li { counter-increment: etik; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.etik li::before { content: "0" counter(etik); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding-top: .2rem; font-variant-numeric: tabular-nums; }
.etik h3 { font-family: var(--font-body); font-size: var(--fs-0); font-weight: 600; line-height: 1.4; }
.etik p { color: var(--ink-2); font-size: var(--fs-s); margin-top: .2rem; }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; padding: var(--s4) 0; font-weight: 600; min-height: var(--tap); list-style-position: outside; }
details.faq p { padding-bottom: var(--s4); color: var(--ink-2); }
.kotak { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); background: var(--surface); }

/* 15. HALAMAN KECIL (404, subdomain, terkirim) ----------------------------- */
.layar-pesan { min-height: 62vh; display: grid; align-content: center; gap: var(--s5); padding-block: var(--s8); }
.angka-raksasa { font-family: var(--font-display); font-size: clamp(6rem, 4rem + 12vw, 13rem); line-height: .8; letter-spacing: -.03em; color: var(--ink); }
.langkah-kecil { list-style: none; padding: 0; display: grid; gap: var(--s4); counter-reset: lk; }
.langkah-kecil li { counter-increment: lk; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s3); }
.langkah-kecil li::before { content: "0" counter(lk); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding-top: .25rem; }
.langkah-kecil h2 { font-family: var(--font-body); font-size: var(--fs-0); font-weight: 600; }
.langkah-kecil p { font-size: var(--fs-s); color: var(--ink-2); }

/* 16. GERAK DIKURANGI ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .kursi__bidang { transform: rotateX(40deg) rotateZ(-24deg); }
}

/* 17. TAMBAHAN v2.1 (struktur copy deck) ----------------------------------- */
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); }
.grid-2--atas { align-items: start; }
.h3x { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1.1; }
.alur--pilar li { padding-block: var(--s6) var(--s7); }
.alur--pilar p { font-size: var(--fs-0); }
.daftar-garis { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.daftar-garis li { padding: var(--s5) 0; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.55; }
.daftar-garis strong { color: var(--ink); font-weight: 600; }
.langkah-kecil__judul { font-family: var(--font-body); font-size: var(--fs-0); font-weight: 600; }
.akhir { background: var(--night); color: var(--night-ink); padding-block: clamp(4rem, 3rem + 6vw, 8rem); border-top: 1px solid var(--night-line); }
.akhir__isi { display: grid; gap: var(--s6); align-items: end; }
.akhir .h1 { max-width: 14em; }
.akhir__lead { color: var(--night-muted); font-size: var(--fs-1); line-height: 1.5; max-width: 28em; }
.akhir :focus-visible { outline-color: var(--night-accent); }
@media (min-width: 60em) { .akhir__isi { grid-template-columns: 7fr 5fr; } }
.beranda .kaki { border-top: 1px solid var(--night-line); }
.label-baris { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--fs-xs); color: var(--muted); }
.label-baris span { display: inline-flex; align-items: center; gap: .4rem; }
.label-baris span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* Keterangan kaki (watermark) dataprivacy.id: satu baris kecil, tidak mencolok. */
.wm { margin-top: var(--s4); font-size: .75rem; line-height: 1.5; color: var(--muted); opacity: .85; }
.wm a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wm a:hover { color: var(--ink, currentColor); opacity: 1; }
.wm--app { margin-top: var(--s6, 2rem); padding-top: var(--s3, 1rem); text-align: center; }
.kaki .wm { color: inherit; opacity: .7; }
.kaki .wm a:hover { color: var(--night-accent); }