/* ================================================
   PLUS JAKARTA SANS, DI-HOSTING SENDIRI

   Sebelumnya font diambil dari fonts.googleapis.com.
   Itu berarti dua pencarian DNS, dua koneksi baru, dan
   satu berkas CSS tambahan yang menghambat render,
   semuanya sebelum huruf pertama bisa muncul.

   Ini font variabel. Google menyajikan berkas yang
   sama persis untuk kelima bobot yang dipakai situs
   ini, hanya dengan penamaan berbeda. Jadi cukup satu
   berkas per subset, dengan rentang bobot 200 sampai
   800 sesuai sumbu yang tersedia di fontnya.

   Yang diambil hanya latin dan latin-ext, karena situs
   ini berbahasa Indonesia. Subset Cyrillic, Yunani,
   dan Vietnam dibuang.

   font-display: swap dipertahankan supaya teks tetap
   terbaca memakai huruf sistem selama font dimuat,
   bukan menghilang dulu.
   ================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../font/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../font/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- Huruf cadangan yang metriknya disamakan ----------
   Tanpa ini, teks digambar dulu memakai huruf sistem lalu
   melompat saat Plus Jakarta Sans selesai dimuat. Pergeseran
   itu terukur sebagai CLS 0,052.

   Angka di bawah dihitung dari metrik font aslinya, bukan
   dikira-kira. Lebar rata-rata huruf kecil Plus Jakarta Sans
   adalah 54,03 persen em, Arial 54,39 persen, jadi size-adjust
   99,34 persen menyamakan keduanya. Ascent dan descent
   disesuaikan dengan pembagi yang sama supaya tinggi barisnya
   ikut sama.

   Hasilnya, saat font asli menggantikan cadangan, tidak ada
   satu baris pun yang bergeser. */

@font-face {
  font-family: 'Jakarta Cadangan';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 99.34%;
  ascent-override: 104.49%;
  descent-override: 22.35%;
  line-gap-override: 0%;
}

/* ================================================
   NGOPI NAIK KELAS — Design System
   Clean tech aesthetic with Indonesian character
   ================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- Design Tokens ---------- */
:root {
  /* ============================================
     PALET RESMI, NGOPI NAIK KELAS DESIGN SYSTEM v1.0

     Diambil apa adanya dari dokumen sistem desain.
     Nama token situs dipertahankan supaya 5.000 baris
     CSS yang sudah ada tidak perlu ditulis ulang, tapi
     nilainya sekarang persis milik sistem desain.

     Aturan pokoknya satu kalimat: teal adalah satu
     satunya aksen. Oranye dan kuning yang ada di logo
     adalah wilayah logo, bukan wilayah antarmuka,
     supaya logo selalu jadi benda paling hangat di
     layar. Antarmuka di sekitarnya tetap netral.
     ============================================ */

  /* Netral */
  --bg: #FFFFFF;          /* putih */
  --bg-alt: #FBFBFD;      /* kabut */
  --bg-subtle: #F5F5F7;   /* wash */
  --border: #E8E8ED;      /* garis-halus */
  --border-strong: #D2D2D7; /* garis */

  --text-primary: #1D1D1F;   /* tinta */
  --text-secondary: #6E6E73; /* tinta-2 */
  --text-muted: #6E6E73;     /* tinta-2, kontras 5,07 */
  --text-soft: #86868B;      /* tinta-3, hanya untuk teks besar atau hiasan */

  /* Teal, satu satunya aksen */
  --teal: #0F7C7C;        /* t500, isian dan garis */
  --teal-text: #0E6F6F;   /* t600, teks, kontras 5,96 */
  --teal-hover: #0B5A5A;  /* t700 */
  --teal-muda: #2AA0A0;   /* t400, isian saja, kontras 3,17 */
  --teal-soft: #E9F6F6;   /* t050 */
  --teal-100: #C9ECEB;    /* t100 */

  /* Status. Bukan hiasan, hanya untuk keadaan. */
  --aman: #1B7F33;
  --aman-t: #E4F6E8;
  --rawan: #9A5B00;
  --rawan-t: #FFF1DB;
  --kosong: #C1170A;
  --kosong-t: #FFEDEB;
  --info: #1D5FA8;
  --info-t: #EAF2FB;

  /* Gradasi resmi, dipakai hemat */
  --grad-ngopi: linear-gradient(120deg, #0B5A5A 0%, #0F7C7C 55%, #2AA0A0 100%);

  /* Nama lama yang masih dirujuk sebagian aturan.
     Diarahkan ke teal supaya tidak ada oranye yang
     bocor ke antarmuka. */
  --orange: #0F7C7C;
  --orange-text: #0E6F6F;
  --orange-soft: #E9F6F6;


  /* ============================================
     HURUF: Plus Jakarta Sans, bukan Inter

     Design System v1.0 menuliskan Inter pada token
     --huruf. Yang dipakai di produksi adalah Plus
     Jakarta Sans, dan itu keputusan sadar, bukan
     kelalaian.

     Jangan menggantinya ke Inter hanya karena membaca
     dokumen v1.0. Kalau memang harus diganti, cadangan
     bermetrik sama di bagian atas berkas ini wajib
     dihitung ulang, karena angkanya diturunkan dari
     metrik Plus Jakarta Sans dan akan salah untuk
     huruf lain.

     Token ini sebelumnya dipakai di empat tempat tanpa
     pernah didefinisikan. Kebetulan tidak terlihat rusak
     karena var() yang tidak sah membuat properti mewarisi
     dari induknya, dan induknya kebetulan sudah benar.
     Sekarang didefinisikan supaya tidak bergantung pada
     kebetulan.
     ============================================ */
  /* Tinggi header. Dipakai sebagai acuan offset elemen yang
     menempel di bawahnya. Sebelumnya panel kamus memakai 64px
     sementara headernya 73px, dan selisih 9px itu jadi celah
     tempat kartu menyembul saat digulir. */
  --tinggi-header: 73px;

  --font: 'Plus Jakarta Sans', 'Jakarta Cadangan', -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Layout */
  /* Lebar wadah. Angka dasar untuk layar biasa, lalu melebar
     bertahap di layar besar lewat media query di bawah blok ini.

     Di layar 1920 piksel, versi lama hanya memakai 60 persen
     lebar layar dan menyisakan 384 piksel kosong di tiap sisi.
     Di 2560 piksel bahkan hanya 45 persen.

     Yang melebar cuma tata letak berkolom seperti kartu, kamus,
     dan peta SKKNI. Kolom baca artikel tetap 720 piksel karena
     dipatok sendiri di .article-body, dan itu memang batas yang
     nyaman dibaca. */
  --container-max: 1200px;
  --container-padding: 24px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.08);
  --shadow-hover: 0 16px 40px rgba(20, 168, 158, 0.12);

  /* Typography scale */
  --fs-eyebrow: 13px;
  --fs-body-sm: 15px;
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: clamp(28px, 4vw, 44px);
  --fs-h1: clamp(40px, 6vw, 68px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Layar besar. Bertahap, bukan sekali lompat, supaya kartu
   di dalam grid tidak tiba-tiba jadi terlalu lebar. */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
    --container-padding: 32px;
  }
}

@media (min-width: 1700px) {
  :root {
    --container-max: 1480px;
    --container-padding: 40px;
  }
}

@media (min-width: 2000px) {
  :root {
    --container-max: 1640px;
    --container-padding: 48px;
  }
}

/* ---------- Typography ---------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--teal);
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

p {
  color: var(--text-secondary);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: transform var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--text-primary);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--teal);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.btn-secondary {
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--text-primary);
  background: var(--bg-alt);
}

.btn-ghost {
  color: var(--text-primary);
  font-weight: 500;
  padding: 8px 12px;
}

.btn-ghost:hover {
  color: var(--teal-text);
}

.btn svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease);
}

.btn:hover svg {
  transform: translateX(2px);
}

/* ---------- Header ---------- */
.site-header {
  /* Menempelnya dipegang nnk-header di atas */
  position: relative;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease);
}

.site-header.scrolled {
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand img {
  height: 44px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav a {
  padding: 8px 14px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.nav a:hover {
  color: var(--text-primary);
  background: var(--bg-alt);
}

.nav a.active {
  color: var(--text-primary);
}

/* Override agar tombol di nav tetap pakai warna btn-nya */
.nav a.btn-primary {
  color: var(--bg);
}

.nav a.btn-primary:hover {
  color: var(--bg);
  background: var(--teal);
}

.nav-cta {
  margin-left: var(--space-3);
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-primary);
}

.menu-toggle:hover {
  background: var(--bg-alt);
}

@media (max-width: 860px) {
  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-1);
  }
  .nav.open {
    display: flex;
  }
  .nav a {
    padding: 14px 16px;
  }
  .nav-cta {
    margin-left: 0;
    margin-top: var(--space-3);
  }
  .menu-toggle {
    display: inline-flex;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: var(--space-10) 0 var(--space-9);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: var(--space-7);
  max-width: 880px;
}

.hero h1 {
  margin-top: var(--space-5);
}

.hero-subline {
  max-width: 680px;
  margin-top: var(--space-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* Subtle decorative element */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--teal-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}

/* ---------- Section base ---------- */
.section {
  padding: var(--space-10) 0;
}

.section-alt {
  background: var(--bg-alt);
}

.section-header {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
  margin-bottom: var(--space-8);
}

.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header.center .eyebrow {
  justify-content: center;
}

/* ---------- Pilar grid ---------- */
.pilar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.pilar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
  min-height: 200px;
}

.pilar-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

/* Satu aksen, sama untuk kesembilan klaster. Yang
   membedakan mereka hurufnya, bukan warnanya. */
.pilar-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--teal-soft);
  color: var(--teal-text);
}

/* Huruf klaster kecil di pojok, penanda yang sama
   dipakai di halaman peta SKKNI. */
.pilar-huruf {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
}

.pilar-icon svg {
  width: 22px;
  height: 22px;
}

.pilar-card h3 {
  font-size: var(--fs-h4);
  letter-spacing: -0.015em;
}

.pilar-card p {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.pilar-card-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}

.pilar-card-meta .arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-alt);
  color: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.pilar-card:hover .arrow {
  background: var(--text-primary);
  color: var(--bg);
}

.pilar-card:hover .arrow svg {
  transform: translateX(2px);
}

.pilar-card .arrow svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease);
}

/* ---------- Materi grid ---------- */
.materi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.materi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease);
  height: 100%;
}

.materi-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.materi-tag-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.materi-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--teal-soft);
  color: var(--teal-text);
}

.materi-tag.tipe {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.materi-tag.baru {
  background: var(--orange-soft);
  color: var(--orange);
}

.materi-card h3 {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.materi-card p {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.materi-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.materi-card-foot .read {
  color: var(--text-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.materi-card-foot .read svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease);
}

.materi-card:hover .read svg {
  transform: translateX(3px);
}

.section-foot {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

/* ---------- Agenda ---------- */
.agenda-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-7);
  background: var(--text-primary);
  color: var(--bg);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.agenda-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(20, 168, 158, 0.18) 0%, transparent 60%);
  pointer-events: none;
}

@media (min-width: 760px) {
  .agenda-card {
    grid-template-columns: 200px 1fr auto;
    align-items: center;
  }
}

.agenda-date {
  position: relative;
  z-index: 1;
}

.agenda-date-day {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.agenda-date-month {
  font-size: var(--fs-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.agenda-body {
  position: relative;
  z-index: 1;
}

.agenda-body .eyebrow {
  color: var(--teal-text);
  margin-bottom: var(--space-3);
}

.agenda-body .eyebrow::before {
  background: var(--teal);
}

.agenda-body h3 {
  color: var(--bg);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.agenda-body p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-body-sm);
}

.agenda-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
}

.agenda-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agenda-meta-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.agenda-cta {
  position: relative;
  z-index: 1;
}

.agenda-cta .btn-primary {
  background: var(--bg);
  color: var(--text-primary);
}

.agenda-cta .btn-primary:hover {
  background: var(--teal);
  color: var(--bg);
}

.agenda-empty {
  text-align: center;
  padding: var(--space-8);
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  color: var(--text-muted);
}

/* ---------- Tentang ---------- */
.tentang-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 860px) {
  .tentang-grid {
    grid-template-columns: 360px 1fr;
    gap: var(--space-9);
  }
}

.tentang-photo {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-subtle);
}

.tentang-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tentang-photo::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--teal);
  border-radius: var(--radius-xl);
  z-index: -1;
}

.tentang-body p {
  margin-bottom: var(--space-4);
}

.tentang-body p:last-of-type {
  margin-bottom: 0;
}

.tentang-quote {
  font-size: var(--fs-lead);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  letter-spacing: -0.015em;
  padding-left: var(--space-5);
  border-left: 2px solid var(--teal);
  margin: var(--space-6) 0;
}

.tentang-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Komunitas CTA Strip ---------- */
.cta-strip {
  padding: var(--space-9) 0;
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--teal-soft) 100%);
}

.cta-strip h2 {
  margin-bottom: var(--space-4);
}

.cta-strip p {
  max-width: 580px;
  margin: 0 auto var(--space-6);
  font-size: var(--fs-lead);
}

.cta-strip-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---------- Footer ---------- */
.site-footer {
  /* Terang, bukan gelap. Blok hitam di kaki halaman
     memotong halaman jadi dua dan membuat logo harus
     punya versi khusus. Krem muda memisahkan footer
     dari isi tanpa memutusnya, dan logo berwarna bisa
     dipakai apa adanya. */
  background: var(--bg-alt);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding: var(--space-9) 0 var(--space-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.footer-brand img {
  height: 48px;
  margin-bottom: var(--space-4);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  max-width: 320px;
}

.footer-col h4 {
  color: var(--text-primary);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.footer-col a {
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  transition: color var(--duration-fast) var(--ease);
}

.footer-col a:hover {
  color: var(--teal-text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* ---------- Page header (untuk halaman pilar dan materi) ---------- */
.page-header {
  padding: var(--space-9) 0 var(--space-7);
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.breadcrumb a {
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}

.breadcrumb a:hover {
  color: var(--teal-text);
}

.breadcrumb-sep {
  color: var(--text-soft);
}

/* ---------- Article (untuk halaman materi) ---------- */
.article {
  padding: var(--space-8) 0 var(--space-10);
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
}

.article-body h1 {
  margin-bottom: var(--space-5);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--space-6) 0 var(--space-7);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.article-content h2 {
  margin: var(--space-8) 0 var(--space-4);
  font-size: 28px;
}

.article-content h3 {
  margin: var(--space-6) 0 var(--space-3);
}

.article-content p {
  margin-bottom: var(--space-4);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
}

.article-content ul, .article-content ol {
  margin: var(--space-4) 0 var(--space-4) var(--space-5);
  font-size: 18px;
  line-height: 1.7;
}

.article-content li {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.article-content blockquote {
  border-left: 3px solid var(--teal);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.article-content code {
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.article-content a {
  color: var(--teal-text);
  text-decoration: underline;
  text-decoration-color: var(--teal-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease);
}

.article-content a:hover {
  text-decoration-color: var(--teal-text);
}

/* ---------- Halaman Kamus HR ---------- */
.kamus-hero {
  padding: var(--space-9) 0 var(--space-7);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-bottom: 1px solid var(--border);
}

.kamus-hero h1 {
  margin-top: var(--space-3);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.kamus-hero .lead {
  margin-top: var(--space-4);
  max-width: 720px;
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  line-height: 1.55;
}

.kamus-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.kamus-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kamus-stat-item strong {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.kamus-stat-item span {
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
}

.kamus-toolbar {
  position: sticky;
  /* Diikat ke tinggi header, bukan angka tebakan */
  top: var(--tinggi-header);
  z-index: 50;
  padding: var(--space-4) 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.kamus-toolbar .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kamus-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
}

.kamus-search svg {
  position: absolute;
  left: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.kamus-search input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.kamus-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 168, 158, 0.1);
}

.kamus-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.kamus-chip {
  padding: 7px 14px;
  font-family: var(--font);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

.kamus-chip:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.kamus-chip.active {
  color: var(--bg);
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.kamus-list {
  padding: var(--space-7) 0 var(--space-9);
}

.kamus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

.kamus-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.18s, transform 0.18s;
}

.kamus-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.kamus-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.kamus-card-head h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
}

.kamus-card-tag {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-text);
  background: var(--teal-soft);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.kamus-card-tag:hover {
  background: rgba(20, 168, 158, 0.18);
}

.kamus-card-def {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.kamus-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--teal-text);
  text-decoration: none;
}

.kamus-link svg,
.kamus-link::after {
  transition: transform 160ms var(--ease);
}

.kamus-link:hover svg,
.kamus-link:hover::after {
  transform: translateX(4px);
}

.kamus-empty {
  padding: var(--space-7) 0;
  text-align: center;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .kamus-toolbar {
    top: 60px;
  }
  .kamus-grid {
    grid-template-columns: 1fr;
  }
  .kamus-stats {
    gap: var(--space-5);
  }
  .kamus-stat-item strong {
    font-size: 28px;
  }
}

/* ---------- Material Callout (akhir artikel, arahkan ke WAG) ---------- */
.material-callout {
  position: relative;
  margin: var(--space-8) 0 var(--space-5);
  padding: var(--space-7) var(--space-6);
  background: linear-gradient(135deg, var(--teal-soft) 0%, var(--orange-soft) 100%);
  border: 1px solid rgba(20, 168, 158, 0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.material-callout::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 180%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
  pointer-events: none;
}

.material-callout .eyebrow {
  margin-bottom: var(--space-3);
  position: relative;
}

.material-callout h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  position: relative;
}

.material-callout p {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  position: relative;
}

.material-callout .material-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  position: relative;
}

.material-callout .material-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}

.material-callout .material-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 8px;
}

.material-callout .btn {
  position: relative;
  text-decoration: none;
}

.material-callout .btn-primary {
  color: var(--bg);
}

.material-callout .btn-primary:hover {
  color: var(--bg);
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
}

.fade-up.visible {
  animation: fadeUp 700ms var(--ease) forwards;
}

.fade-up.delay-1 { animation-delay: 80ms; }
.fade-up.delay-2 { animation-delay: 160ms; }
.fade-up.delay-3 { animation-delay: 240ms; }
.fade-up.delay-4 { animation-delay: 320ms; }

/* ---------- Loading state ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 0%, var(--bg-subtle) 50%, var(--bg-alt) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--text-muted);
}

.empty-state h3 {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  font-weight: 500;
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================================
   GLOSARIUM ISTILAH HR
   ==================================================================== */

/* ---------- Page hero (lebih ringkas dari hero landing) ---------- */
.page-hero {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

/* ---------- Search & Filter bar ---------- */
/* Panel kendali kamus.

   Panelnya tetap menempel utuh, karena kolom pencarian
   saja tidak bisa menempel sendirian: elemen yang menempel
   hanya bergerak di dalam kotak induknya, dan induknya
   pendek.

   Yang diperbaiki tingginya. Sepuluh penyaring kategori
   dulu membungkus jadi tiga baris, membuat panel setinggi
   280 piksel atau hampir sepertiga layar. Sekarang
   penyaringnya digeser mendatar di semua lebar layar,
   jadi panelnya tinggal satu baris pencarian dan satu
   baris penyaring. */
.glosarium-controls {
  position: sticky;
  top: var(--tinggi-header);
  z-index: 50;
  padding: var(--space-5) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.glosarium-controls .filter-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px var(--container-padding);
  margin: var(--space-4) calc(var(--container-padding) * -1) 0;
  scrollbar-width: none;
}

.glosarium-controls .filter-row::-webkit-scrollbar {
  display: none;
}

.glosarium-controls .filter-chip {
  flex: 0 0 auto;
}

.search-wrap {
  position: relative;
  max-width: 640px;
  margin-bottom: var(--space-4);
}

.search-wrap .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
}

#searchInput {
  width: 100%;
  height: 52px;
  padding: 0 52px 0 50px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--bg);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  transition: border-color 0.18s ease, background 0.18s ease;
}

#searchInput::placeholder {
  color: var(--text-tertiary);
}

#searchInput:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 168, 158, 0.12);
}

.clear-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.clear-btn:hover {
  background: var(--text-primary);
  color: var(--bg);
}

.clear-btn svg {
  width: 14px;
  height: 14px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.filter-chip.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg);
}

.filter-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-count {
  background: var(--surface);
  color: var(--text-tertiary);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 2px;
}

/* ---------- Glosarium grid ---------- */
.glosarium-section {
  padding: var(--space-6) 0 var(--space-9);
}

.glosarium-results-info {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-5);
  font-weight: 500;
}

.glosarium-grid {
  display: grid;
  gap: var(--space-3);
}

/* ---------- Istilah card ---------- */
.istilah-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.istilah-card:hover {
  border-color: var(--text-tertiary);
}

.istilah-card.open {
  border-color: var(--teal);
  box-shadow: 0 4px 24px rgba(20, 168, 158, 0.08);
}

.istilah-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.istilah-head:hover {
  background: var(--surface);
}

.istilah-head-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.istilah-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.istilah-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.4;
}

.istilah-name mark {
  background: rgba(20, 168, 158, 0.18);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

.istilah-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.istilah-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.istilah-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.istilah-card.open .istilah-chevron {
  transform: rotate(180deg);
  color: var(--teal-text);
}

.istilah-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Teknik grid 0fr ke 1fr menuntut anak langsung tepat satu.
   Pembungkus ini yang dianimasikan tingginya, isinya bebas
   berapa pun jumlahnya. min-height nol wajib, kalau tidak
   isi tetap memaksa tinggi minimumnya sendiri. */
.istilah-body-isi {
  min-height: 0;
  overflow: hidden;
}

.istilah-card.open .istilah-body {
  grid-template-rows: 1fr;
}

.istilah-field {
  padding: 0 var(--space-6);
}

.istilah-field:first-of-type {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.istilah-field:last-of-type {
  padding-bottom: var(--space-5);
}

.istilah-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-4) 0 var(--space-2);
}

.field-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.field-dot-formal { background: #2563eb; }
.field-dot-santai { background: #16a085; }
.field-dot-why { background: #ea580c; }

.istilah-field-content {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.empty-state p {
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

/* ---------- Responsif mobile ---------- */
@media (max-width: 768px) {
  .glosarium-controls {
    /* Ikut tinggi header yang sama, bukan angka lain.
       Nilai 56px lama membuat panel masuk 17 piksel ke
       balik header sehingga kolom pencarian tertutup. */
    top: var(--tinggi-header);
  }

  .istilah-head {
    padding: var(--space-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .istilah-head-left {
    width: 100%;
  }

  .istilah-head-right {
    width: 100%;
    justify-content: space-between;
  }

  .istilah-name {
    font-size: 16px;
  }

  .istilah-field {
    padding: 0 var(--space-4);
  }
}

/* ---------- Istilah preview di halaman pilar ---------- */
.istilah-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.istilah-preview-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.istilah-preview-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.istilah-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.istilah-preview-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.istilah-preview-body p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section-soft {
  background: var(--surface);
}

.section-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.section-lead {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  max-width: 580px;
}

/* ================================================
   AKSESIBILITAS — ditambahkan Fase 1
   ================================================ */

/* Tautan lewati navigasi. Tersembunyi sampai
   pengguna keyboard menekan Tab pertama kali. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  padding: 12px 20px;
  background: var(--text-primary);
  color: var(--bg);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  border-radius: 10px;
  transform: translateY(-100px);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(calc(100px + var(--space-4)));
}

/* Cincin fokus yang terlihat jelas, tapi hanya untuk
   navigasi keyboard supaya klik mouse tetap bersih. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Kolom pencarian punya gaya fokus sendiri di atas,
   jadi cukup pertegas batasnya. */
.kamus-search input:focus-visible,
#searchInput:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Jangkar judul tidak tertutup header lengket */
:target {
  scroll-margin-top: 96px;
}

/* ================================================
   HALAMAN 404
   ================================================ */

.halaman-404 {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: var(--space-9) 0;
}

.kode-404 {
  font-size: clamp(72px, 14vw, 148px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

.kode-404 span {
  color: var(--teal-text);
}

.blok-404 {
  max-width: 620px;
}

.tautan-404 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.tautan-404 a {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 160ms ease, transform 160ms ease;
}

.tautan-404 a:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.tautan-404 strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.tautan-404 span {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* ================================================
   PENCARIAN GLOBAL — ditambahkan Fase 2
   ================================================ */

.cari-hero {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

.cari-hero h1 {
  margin-top: var(--space-4);
  max-width: 16ch;
}

.cari-hero .lead {
  margin-top: var(--space-4);
  max-width: 62ch;
}

/* ---------- Kotak pencarian ---------- */
.cari-kotak {
  position: relative;
  max-width: 660px;
  margin-top: var(--space-6);
}

.cari-kotak .cari-ikon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-soft);
  pointer-events: none;
}

#cariInput {
  width: 100%;
  height: 62px;
  padding: 0 56px 0 54px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#cariInput::placeholder {
  color: var(--text-soft);
  font-weight: 400;
}

#cariInput:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 168, 158, 0.12);
}

#cariInput::-webkit-search-cancel-button {
  display: none;
}

.cari-hapus {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-secondary);
  transition: background 150ms ease, color 150ms ease;
}

.cari-hapus:hover {
  background: var(--text-primary);
  color: var(--bg);
}

.cari-hapus svg {
  width: 15px;
  height: 15px;
}

/* ---------- Contoh pencarian ---------- */
.cari-saran {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cari-saran-label {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-right: var(--space-1);
}

.cari-saran-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color 150ms ease, color 150ms ease;
}

.cari-saran-btn:hover {
  border-color: var(--teal);
  color: var(--teal-text);
}

/* ---------- Tata letak ---------- */
.cari-wilayah {
  padding: var(--space-7) 0 var(--space-9);
}

.cari-tata {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* Tanpa ini, anak grid yang bisa digeser mendatar akan
   memaksa kolomnya melebar melebihi lebar layar. Grid
   memberi min-width auto secara bawaan. */
.cari-tulang,
.cari-kolom {
  min-width: 0;
}

/* ---------- Tulang punggung pilar ---------- */
/* Ini elemen penanda halaman ini. Pencarian tidak
   cuma memberi daftar, tapi menunjukkan di pilar
   SKKNI mana jawabannya berkumpul. */
.cari-tulang {
  position: sticky;
  top: calc(var(--tinggi-header) + var(--space-5));
}

.cari-tulang-judul {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}

.cari-tulang-isi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tulang-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  transition: background 140ms ease;
}

.tulang-item:hover:not(:disabled) {
  background: var(--bg-alt);
}

.tulang-item.aktif {
  background: var(--bg-subtle);
}

.tulang-item.kosong {
  opacity: 0.35;
  cursor: default;
}

.tulang-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.tulang-nama {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
}

.tulang-item.aktif .tulang-nama {
  color: var(--text-primary);
  font-weight: 600;
}

.tulang-jml {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.tulang-rel {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.tulang-bar {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  transform-origin: left center;
  /* Lebar tetap 100 persen, yang berubah skalanya.
     scaleX ditangani compositor, sedangkan width
     memaksa hitung ulang tata letak tiap bingkai. */
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Baris atas hasil ---------- */
.cari-baris-atas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.cari-info {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin: 0;
}

.cari-lepas {
  font-family: inherit;
  font-size: inherit;
  color: var(--teal-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: var(--space-2);
}

/* ---------- Kartu hasil ---------- */
.cari-hasil {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hasil-kartu {
  display: block;
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  transition: border-color 160ms ease, transform 160ms ease;
}

.hasil-kartu:hover,
.hasil-kartu.disorot {
  border-color: var(--text-primary);
  transform: translateX(3px);
}

.hasil-kartu.disorot {
  box-shadow: 0 0 0 3px rgba(20, 168, 158, 0.14);
}

.hasil-atas {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.hasil-lencana {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hasil-jenis {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Tautan judul dilebarkan menutupi seluruh kartu, supaya
   kartu tetap bisa diklik di mana saja tanpa perlu
   menyarangkan tautan di dalam tautan. */
.hasil-utama::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

/* Tautan di dalam kartu harus berada di atas lapisan itu */
.hasil-tautan {
  position: relative;
  z-index: 1;
}

.hasil-kartu h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.hasil-ringkas {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.hasil-konteks {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-strong);
  font-size: 13px;
  color: var(--text-muted);
}

.hasil-konteks em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 500;
}

.hasil-kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.hasil-jejak {
  color: var(--teal-text);
  font-weight: 600;
}

.hasil-tautan {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.hasil-tautan-label {
  font-size: 12px;
  color: var(--text-soft);
  align-self: center;
  margin-right: 2px;
}

.hasil-tautan-item {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.hasil-tautan-item:hover {
  border-color: var(--teal);
  color: var(--teal-text);
}

/* Sorotan kata yang cocok */
.hasil-kartu mark {
  background: rgba(20, 168, 158, 0.16);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

/* ---------- Keadaan kosong ---------- */
.cari-kosong {
  padding: var(--space-8) 0;
  max-width: 52ch;
}

.cari-kosong h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.cari-kosong p {
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
}

.cari-kosong-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.cari-kosong-awal {
  border-left: 2px solid var(--teal);
  padding-left: var(--space-5);
}

/* ---------- Tombol cari di header ---------- */
.nav-cari {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--text-secondary);
  transition: background 150ms ease, color 150ms ease;
}

.nav-cari:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.nav-cari svg {
  width: 19px;
  height: 19px;
}

.nav-cari-teks {
  display: none;
}

/* ---------- Layar sempit ---------- */
@media (max-width: 900px) {
  .cari-tata {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cari-tulang {
    position: static;
  }

  /* Tulang punggung berubah jadi baris yang bisa digeser,
     mengikuti pola chip yang sudah dipakai di kamus. */
  .cari-tulang-isi {
    flex-direction: row;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }

  .cari-tulang-isi::-webkit-scrollbar {
    display: none;
  }

  .tulang-item {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  .tulang-item.aktif {
    background: var(--text-primary);
    border-color: var(--text-primary);
  }

  .tulang-item.aktif .tulang-nama,
  .tulang-item.aktif .tulang-jml {
    color: var(--bg);
  }

  .tulang-baris {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .tulang-rel {
    display: none;
  }

  #cariInput {
    height: 56px;
    font-size: 16px;
  }

  .nav-cari {
    width: auto;
    height: auto;
    padding: 0;
    justify-content: flex-start;
  }

  .nav-cari-teks {
    display: inline;
    margin-left: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tulang-bar,
  .hasil-kartu {
    transition: none;
  }
}

/* Kartu kamus yang dituju dari hasil pencarian */
.istilah-card.disorot-masuk {
  box-shadow: 0 0 0 3px rgba(20, 168, 158, 0.28);
  border-color: var(--teal);
  transition: box-shadow 600ms ease, border-color 600ms ease;
}

/* ================================================
   SARINGAN HALAMAN PILAR — Fase 2
   ================================================ */

.pilar-saring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.saring-kelompok {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.saring-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: var(--space-1);
}

.saring-info {
  margin-left: auto;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.saring-chip {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.saring-chip:hover:not(:disabled) {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.saring-chip.aktif {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg);
}

.saring-chip:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 700px) {
  .pilar-saring {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .saring-info {
    margin-left: 0;
  }
}

/* ================================================
   TAUTAN SILANG DI ARTIKEL — Fase 2
   ================================================ */

.silang {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.silang-judul {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}

.silang-istilah {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.silang-pil {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color 150ms ease, color 150ms ease;
}

.silang-pil:hover {
  border-color: var(--teal);
  color: var(--teal-text);
}

.silang-pil-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.silang-terkait {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.silang-kartu {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 150ms ease, transform 150ms ease;
}

.silang-kartu:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.silang-kartu-pilar {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: block;
}

.silang-kartu h4 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.silang-kartu p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .silang-kartu,
  .istilah-card.disorot-masuk {
    transition: none;
  }
}

/* ================================================
   KEDALAMAN ARTIKEL — Fase 3
   ================================================ */

/* ---------- Kemajuan baca ---------- */
.baca-progres {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.baca-progres.tampak {
  opacity: 1;
}

.baca-progres-isi {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--teal), var(--orange));
}

/* ---------- Daftar isi, layar lebar ---------- */
.isi-rail {
  display: none;
}

@media (min-width: 1180px) {
  .isi-rail {
    display: block;
    position: fixed;
    top: 140px;
    right: calc(50% + 384px);
    width: 188px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    opacity: 1;
    transition: opacity var(--duration-fast) var(--ease);
  }

  /* Dipasang lewat JS begitu artikel selesai discroll,
     supaya rail tidak menempel sampai menabrak footer.
     Lihat IntersectionObserver di artikel.js. */
  .isi-rail.isi-rail-selesai {
    opacity: 0;
    pointer-events: none;
  }

  .isi-lipat {
    display: none;
  }
}

.isi-judul {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-3);
}

.isi-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bagian;
}

.isi-daftar li {
  counter-increment: bagian;
  margin: 0;
}

.isi-rail .isi-daftar a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  transition: color 160ms ease, border-color 160ms ease;
}

.isi-rail .isi-daftar a:hover {
  color: var(--text-primary);
  border-color: var(--text-soft);
}

.isi-rail .isi-daftar a.aktif {
  color: var(--text-primary);
  border-color: var(--teal);
  font-weight: 600;
}

/* ---------- Daftar isi, layar sempit ---------- */
.isi-lipat {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--bg-alt);
}

.isi-lipat summary {
  cursor: pointer;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.isi-lipat summary::-webkit-details-marker {
  display: none;
}

.isi-lipat summary::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(-45deg);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.isi-lipat[open] summary::before {
  transform: rotate(45deg);
}

.isi-lipat .isi-daftar {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.isi-lipat .isi-daftar a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  color: var(--text-secondary);
}

.isi-lipat .isi-daftar a::before {
  content: counter(bagian) '. ';
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.isi-lipat .isi-daftar a:hover {
  color: var(--teal-text);
}

/* ---------- Bagikan ---------- */
.bagikan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.bagikan-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.bagikan-tombol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bagikan-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.article-content .bagikan-btn,
.bagikan-btn:hover {
  text-decoration: none;
}

.bagikan-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.bagikan-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.bagikan-btn.berhasil {
  border-color: var(--teal);
  color: var(--teal-text);
}

/* ---------- Istilah di dalam tulisan ---------- */
.istilah-tip {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: help;
  border-bottom: 1px dashed var(--teal);
  transition: background 150ms ease;
}

.istilah-tip:hover {
  background: var(--teal-soft);
}

.tip-gelembung {
  position: absolute;
  z-index: 300;
  width: min(320px, calc(100vw - 24px));
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.12);
}

.tip-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.tip-pilar {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tip-tutup {
  font-size: 20px;
  line-height: 1;
  color: var(--text-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
}

.tip-tutup:hover {
  color: var(--text-primary);
}

.tip-gelembung h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.tip-gelembung p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.tip-gelembung a {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-text);
  text-decoration: none;
}

.tip-gelembung a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .baca-progres,
  .isi-lipat summary::before,
  .istilah-tip,
  .isi-rail .isi-daftar a {
    transition: none;
  }
}

/* ================================================
   JALUR BELAJAR — Fase 4
   ================================================ */

.jalur-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.jalur-kartu {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--aksen, var(--teal));
  background: var(--bg);
  transition: border-color 160ms ease, transform 160ms ease;
}

.jalur-kartu:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  border-top-color: var(--aksen, var(--teal));
}

.jalur-kartu-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--text-muted);
}

.jalur-nomor {
  font-weight: 700;
  color: var(--aksen, var(--teal));
  letter-spacing: 0.03em;
}

.jalur-kartu h2 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: var(--space-3);
}

.jalur-utama {
  color: var(--text-primary);
  text-decoration: none;
}

.jalur-utama::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.jalur-untuk {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.jalur-janji {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border);
  margin: 0;
}

.jalur-kemajuan {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.jalur-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 6px;
}

.jalur-bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  transform-origin: left center;
  transition: transform 300ms var(--ease);
}

.jalur-kemajuan-teks {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Ringkasan satu jalur ---------- */
.jalur-ringkas {
  margin-top: var(--space-6);
  max-width: 68ch;
}

.jalur-ringkas-janji {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding-left: var(--space-4);
  border-left: 2px solid var(--teal);
  margin-bottom: var(--space-5);
}

.jalur-ringkas-angka {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.jalur-ringkas-angka strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ---------- Rute langkah ---------- */
.rute {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.rute-langkah {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-6);
}

/* Garis penghubung antar langkah */
.rute-langkah:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 34px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.rute-langkah.selesai:not(:last-child)::before {
  background: var(--aksen, var(--teal));
  opacity: 0.35;
}

.rute-tanda {
  position: relative;
  z-index: 1;
}

.rute-centang {
  display: block;
  cursor: pointer;
}

.rute-centang input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rute-kotak {
  display: block;
  width: 26px;
  height: 26px;
  margin: 4px 0 0 7px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: background 160ms ease, border-color 160ms ease;
}

.rute-centang:hover .rute-kotak {
  border-color: var(--text-secondary);
}

.rute-centang input:focus-visible + .rute-kotak {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.rute-langkah.selesai .rute-kotak {
  background: var(--aksen, var(--teal));
  border-color: var(--aksen, var(--teal));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
}

.rute-urutan {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.rute-isi h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: var(--space-2);
}

.rute-isi h3 a {
  color: var(--text-primary);
  text-decoration: none;
}

.rute-isi h3 a:hover {
  color: var(--teal-text);
}

.rute-langkah.selesai .rute-isi h3 a {
  color: var(--text-muted);
}

.rute-kenapa {
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.rute-kaki {
  font-size: 12px;
  color: var(--text-muted);
}

.rute-kaki-aksi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.jalur-catatan {
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ---------- Penunjuk jalur di halaman artikel ---------- */
.jalur-penunjuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--aksen, var(--teal));
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}

.jalur-penunjuk-teks {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  margin: 0;
}

.jalur-penunjuk-teks strong {
  color: var(--text-primary);
}

.jalur-penunjuk-aksi {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.jalur-penunjuk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.article-content .jalur-penunjuk-btn {
  text-decoration: none;
}

.jalur-penunjuk-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.jalur-penunjuk-btn.utama {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg);
}

/* ================================================
   FORMULIR PENDAFTARAN EMAIL — Fase 4
   ================================================ */

.daftar {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

.daftar-teks h2 {
  font-size: 28px;
  line-height: 1.25;
  margin: var(--space-3) 0 var(--space-4);
}

.daftar-teks p {
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 52ch;
}

.daftar-poin {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.daftar-poin li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.daftar-poin li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.daftar-form {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.daftar-baris {
  margin-bottom: var(--space-4);
}

.daftar-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.daftar-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

select.daftar-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

.daftar-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 168, 158, 0.12);
}

/* Kolom jebakan robot. Disembunyikan tanpa display none
   supaya sebagian robot tetap mengisinya. */
.daftar-jebakan {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.daftar-kirim {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.daftar-kirim:disabled {
  opacity: 0.6;
  cursor: wait;
}

.daftar-privasi {
  margin-top: var(--space-3);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.daftar-status {
  margin-top: var(--space-3);
  font-size: 13px;
  line-height: 1.55;
}

.daftar-status:empty {
  margin: 0;
}

.daftar-status.gagal {
  color: var(--orange);
}

.daftar-status a {
  color: inherit;
  text-decoration: underline;
}

.daftar-berhasil h3 {
  font-size: 19px;
  margin-bottom: var(--space-3);
}

.daftar-berhasil p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

@media (max-width: 860px) {
  .daftar {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .daftar-form {
    padding: var(--space-5);
  }

  .rute-langkah {
    grid-template-columns: 34px 1fr;
    gap: var(--space-3);
  }

  .rute-langkah:not(:last-child)::before {
    left: 16px;
  }

  .rute-kotak {
    width: 24px;
    height: 24px;
    margin-left: 4px;
  }

  .jalur-penunjuk {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jalur-kartu,
  .jalur-bar span,
  .rute-kotak,
  .daftar-input {
    transition: none;
  }
}

/* ================================================
   CAKUPAN SKKNI
   ================================================ */

.cakupan-ringkas {
  margin-top: var(--space-6);
  max-width: 560px;
}

.cakupan-angka {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cakupan-besar {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal-text);
}

.cakupan-dari {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}

.cakupan-garis {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}

.cakupan-garis span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--teal), var(--orange));
}

.cakupan-sisa {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--text-muted);
}

.cakupan-kendali {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

/* ---------- Klaster ---------- */
.klaster {
  margin-bottom: var(--space-8);
}

.klaster-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--text-primary);
}

.klaster-judul {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1 1 340px;
}

.klaster-huruf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg);
  font-size: 19px;
  font-weight: 800;
}

.klaster-judul h2 {
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.klaster-judul p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

.klaster-angka {
  flex: 0 0 150px;
  text-align: right;
}

.klaster-angka span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.klaster-garis {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-top: 8px;
}

.klaster-garis span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--teal);
}

/* ---------- Unit ---------- */
.unit-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.unit {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}

.unit-ada {
  background: var(--bg);
  border-color: var(--border-strong);
}

.unit-tanda {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: transparent;
}

.unit-ada .unit-tanda {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.unit-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.unit-no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.unit-kode {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.unit-catatan {
  font-size: 11px;
  color: var(--orange);
  font-style: italic;
}

.unit-isi h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.unit-materi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unit-materi a {
  font-size: 13px;
  font-weight: 500;
  color: var(--teal-text);
  text-decoration: none;
}

.unit-materi a::before {
  content: '\2192\00a0';
}

.unit-materi a:hover {
  text-decoration: underline;
}

.unit-belum {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}

.cakupan-nihil {
  padding: var(--space-7) 0;
  color: var(--text-muted);
}

.cakupan-catatan {
  max-width: 68ch;
}

.cakupan-catatan h2 {
  font-size: 20px;
  margin-bottom: var(--space-4);
}

.cakupan-catatan p {
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

@media (max-width: 700px) {
  .klaster-angka {
    flex: 1 1 100%;
    text-align: left;
  }

  .cakupan-besar {
    font-size: 44px;
  }
}

/* Rujukan unit SKKNI di halaman artikel */
.rujukan-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.rujukan-unit {
  display: grid;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.rujukan-kode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.rujukan-judul {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.rujukan-klaster {
  font-size: 12px;
  color: var(--text-soft);
}

.rujukan-sumber {
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--text-muted);
}

/* Unit yang belum ditulis tapi sudah punya rencana */
.unit-rencana {
  display: grid;
  gap: 4px;
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.unit-gelombang {
  justify-self: start;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.unit-rencana-judul {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.unit-rencana-sudut {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Blok dasar hukum di akhir artikel regulasi */
.dasar-hukum {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-soft);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}

.dasar-hukum h2 {
  font-size: 16px !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-3) !important;
}

.dasar-hukum ul {
  margin-bottom: var(--space-3);
}

.dasar-hukum li,
.dasar-hukum p {
  font-size: 13px !important;
  line-height: 1.65;
  color: var(--text-muted);
}

.dasar-hukum p:last-child {
  margin-bottom: 0;
  font-style: italic;
}

/* Penanda tanggal peninjauan pada artikel regulasi */
.ditinjau {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  font-size: 12px;
  color: var(--text-secondary);
}

.ditinjau strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* ================================================
   PERBAIKAN AKSESIBILITAS

   Tiga hal yang ditemukan saat audit:
   target sentuh di bawah 44 piksel, cincin fokus
   yang hilang di beberapa elemen, dan gambar tanpa
   dimensi tetap yang memicu pergeseran tata letak.
   ================================================ */

/* ---------- Target sentuh minimal 44 piksel ----------
   Angka 44 diambil dari pedoman antarmuka Apple, dan
   dipakai juga oleh WCAG 2.5.5. Yang diperbesar adalah
   area sentuhnya, bukan tampilannya, supaya tata letak
   tidak berubah. */

.nav a,
.nav-cari,
.jalur-utama,
.breadcrumb a,
.unit-materi a,
.rujukan-sumber a {
  position: relative;
}

.nav a::after,
.nav-cari::after,
.jalur-utama::after,
.breadcrumb a::after,
.unit-materi a::after,
.rujukan-sumber a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
  /* Hanya memperluas area sentuh, tidak terlihat
     dan tidak menghalangi elemen lain. */
  pointer-events: auto;
}

.nav-cari {
  width: 44px;
  height: 44px;
}

/* Ikon di dalamnya tetap ukuran semula */
.nav-cari svg {
  width: 18px;
  height: 18px;
}

/* Tombol dan tautan berbentuk tombol */
.btn,
.filter-chip,
.bagikan-btn,
.isi-lipat-tombol {
  min-height: 44px;
}

/* ---------- Cincin fokus menyeluruh ----------
   Sebelumnya beberapa elemen lolos dari aturan fokus
   karena selektornya terlalu sempit. Ini menjaring
   semua yang bisa difokus. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Di atas latar gelap, cincin putih lebih terbaca */
.site-footer a:focus-visible,
.cta-strip a:focus-visible {
  outline-color: #FFFFFF;
}

/* ---------- Gambar ----------
   Rasio tetap mencegah pergeseran tata letak saat
   gambar selesai dimuat. */

img {
  max-width: 100%;
  height: auto;
}

/* ================================================
   NAVIGASI KEMBALI DAN BERANDA
   ================================================ */

.navigasi-balik {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--container-padding) var(--space-8);
  border-top: 1px solid var(--border);
  /* Daftar isi artikel menempel di margin kiri dengan
     position fixed, dan di layar sekitar 1180 sampai 1400
     piksel area itu bertumpang tindih dengan tombol ini.
     Tanpa penataan lapisan, tombol Kembali tidak bisa
     diklik di rentang lebar tersebut. */
  position: relative;
}

.balik-tombol {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  /* Hanya transform dan warna yang dianimasikan.
     Keduanya murah dan tidak memicu ulang tata letak. */
  transition: transform var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.balik-tombol svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease);
}

.balik-tombol:hover {
  border-color: var(--text-primary);
  background: var(--bg-alt);
}

.balik-utama:hover svg {
  transform: translateX(-3px);
}

.balik-beranda {
  color: var(--text-secondary);
}

.balik-kata {
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 560px) {
  .navigasi-balik {
    flex-direction: column;
    align-items: stretch;
  }

  .balik-tombol {
    justify-content: center;
  }

  /* Di layar sempit, label panjang dipangkas supaya
     tombolnya tidak jadi dua baris yang berantakan. */
  .balik-utama span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balik-tombol,
  .balik-tombol svg {
    transition: none;
  }

  .balik-utama:hover svg {
    transform: none;
  }
}

/* ================================================
   BAYANGAN KARTU LEWAT PSEUDO-ELEMEN

   Menganimasikan box-shadow memaksa browser mengecat
   ulang tiap bingkai. Menganimasikan opacity pada
   lapisan bayangan yang sudah tergambar ditangani
   compositor, jadi tidak menyentuh main thread.

   Bayangannya tetap terlihat sama persis. Yang berubah
   cuma cara browser menampilkannya.
   ================================================ */

.pilar-card,
.materi-card,
.istilah-preview-card {
  position: relative;
}

.pilar-card::before,
.materi-card::before,
.istilah-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease);
}

.pilar-card::before,
.materi-card::before {
  box-shadow: var(--shadow-md);
}

.istilah-preview-card::before {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.pilar-card:hover::before,
.materi-card:hover::before,
.istilah-preview-card:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pilar-card::before,
  .materi-card::before,
  .istilah-preview-card::before {
    transition: none;
  }
}


/* ================================================
   KERANGKA SEMENTARA

   Wadah yang diisi JavaScript awalnya kosong, jadi
   footer sempat naik lalu terdorong turun begitu isi
   digambar. Pergeserannya terukur sebagai CLS 0,53
   di halaman cakupan, jauh di atas ambang wajar 0,1.

   Kerangka ini memesan tinggi yang mendekati isi
   sebenarnya, lalu diganti seluruhnya oleh JS.
   ================================================ */

.memuat-ringkas {
  min-height: 128px;
}

.rangka-baris {
  height: 88px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--bg-alt) 25%,
    var(--bg-subtle) 37%,
    var(--bg-alt) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Begitu isi asli masuk, aria-busy dilepas dan
   kerangka tidak lagi relevan. */
[aria-busy='false'] .rangka-baris {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .rangka-baris {
    animation: none;
  }
}


/* ---------- Ruang cadangan halaman jalur ----------
   Angka diambil dari pengukuran isi sebenarnya, bukan
   ditebak. Di layar lebar, satu jalur setinggi 780 sampai
   980 piksel tergantung jumlah langkahnya, dan daftar
   jalur sekitar 618. Di ponsel, satu jalur membengkak ke
   sekitar 1420 karena kartunya menumpuk ke bawah.

   Memesan angka tengahnya membuat sisa pergeseran tinggal
   selisih kecil, bukan seluruh tinggi blok. */

.rangka-jalur-satu {
  min-height: 900px;
}

.rangka-jalur-daftar {
  min-height: 620px;
}

@media (max-width: 860px) {
  .rangka-jalur-satu {
    min-height: 1400px;
  }

  .rangka-jalur-daftar {
    min-height: 900px;
  }
}

/* Begitu isi asli masuk, ruang cadangan dilepas supaya
   tidak menyisakan area kosong di bawah. */
[aria-busy='false'].rangka-jalur-satu,
[aria-busy='false'].rangka-jalur-daftar {
  min-height: 0;
}

/* ================================================
   RUANG CADANGAN UNTUK KOMPONEN BERSAMA

   Header dan footer digambar oleh components.js lewat
   custom element. Sebelum skripnya jalan, keduanya
   setinggi nol, jadi seluruh halaman sempat naik lalu
   turun lagi begitu komponennya muncul.

   Memesan tingginya di CSS menghilangkan lompatan itu
   tanpa mengubah tampilan sedikit pun. Angkanya diambil
   dari pengukuran, bukan tebakan.
   ================================================ */

/* Menempelnya dipasang di sini, bukan di .site-header
   di dalamnya. Elemen yang menempel hanya bisa bergerak
   di dalam kotak induknya, dan induknya cuma setinggi
   73 piksel, jadi headernya justru ikut tergulir hilang.

   Ini regresi dari perbaikan pergeseran tata letak: tinggi
   tetap 73px memang mencegah halaman melompat, tapi
   sekaligus mengurung elemen yang menempel di dalamnya. */
nnk-header {
  display: block;
  min-height: var(--tinggi-header);
  position: sticky;
  top: 0;
  z-index: 100;
}

nnk-footer {
  display: block;
  min-height: 649px;
}

@media (max-width: 860px) {
  nnk-footer {
    min-height: 1343px;
  }
}

/* ---------- Judul yang isinya menyusul ----------
   Judul halaman jalur dan pilar diisi JavaScript. Teks
   sementara "Memuat..." muat satu baris, sedangkan judul
   aslinya sering dua baris, jadi isinya terdorong turun.
   Memesan tinggi dua baris membuat pergantian itu tidak
   menggeser apa pun. */

#jalurJudul,
#pilarJudul {
  min-height: 2.2em;
}

#jalurLead,
#pilarDeskripsi {
  min-height: 3.3em;
}

/* ---------- Sisa target sentuh ----------
   Kelompok kedua yang ketahuan setelah halaman lain
   ikut diperiksa. Sama seperti sebelumnya, yang
   diperbesar area sentuhnya saja lewat pseudo-elemen,
   supaya tampilan tidak berubah.

   Pengecualian: penanda istilah di dalam paragraf.
   Elemen itu menyatu dengan alur kalimat, jadi kalau
   area sentuhnya ditinggikan sampai 44 piksel, dia
   akan menimpa baris di atas dan di bawahnya. Untuk
   kasus ini tingginya disamakan dengan tinggi baris
   dan lebarnya yang dijamin cukup. */

.cari-saran-btn,
.jalur-penunjuk-btn,
.beranda-tautan-halus,
.cakupan-tautan {
  position: relative;
}

.cari-saran-btn::after,
.jalur-penunjuk-btn::after,
.beranda-tautan-halus::after,
.cakupan-tautan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
}

.cari-hapus {
  width: 44px;
  height: 44px;
}

.cari-hapus svg {
  width: 16px;
  height: 16px;
}

/* Penanda istilah tetap di bawah 44 piksel dengan sengaja,
   tapi diberi ruang klik semaksimal yang tidak mengganggu
   baris tetangga. */
.istilah-tip {
  padding: 4px 2px;
  min-height: 32px;
}

/* ---------- Kelompok ketiga target sentuh ----------
   Ketahuan setelah pengujian diperluas ke tampilan ponsel
   dan halaman hasil pencarian.

   Tombol menu ponsel yang paling penting di sini. Ukurannya
   40 kali 40 dan itu tombol yang paling sering disentuh di
   layar kecil. */

.menu-toggle {
  width: 44px;
  height: 44px;
}

.tulang-item {
  min-height: 44px;
}

.hasil-utama,
.hasil-tautan-item,
.silang-pil,
.rujukan-unit-tautan {
  position: relative;
}

.hasil-utama::after,
.hasil-tautan-item::after,
.silang-pil::after,
.rujukan-unit-tautan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
}

/* Deretan pil istilah terkait jaraknya perlu ditambah
   sedikit supaya area sentuh yang melebar tidak saling
   menimpa secara vertikal. */
.silang-istilah {
  row-gap: 12px;
}

/* ---------- Daftar isi artikel ----------
   Butirnya rapat karena daftar ini memang dirancang
   ringkas di margin kiri. Area sentuhnya diperluas
   lewat pseudo-elemen, dan jarak antar butir ditambah
   sedikit supaya area yang melebar tidak saling
   menimpa. Tampilan tulisannya tidak berubah. */

.isi-daftar a {
  position: relative;
  display: block;
}

.isi-daftar a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
}

.isi-daftar li + li {
  margin-top: 11px;
}

/* ================================================
   PANEL KENDALI KAMUS DI LAYAR SEMPIT

   Panel ini menempel di atas (sticky) dan memuat kolom
   pencarian plus deretan penyaring kategori. Di layar
   lebar itu wajar, tingginya sekitar 150 piksel.

   Di layar 390 piksel ceritanya lain. Sepuluh penyaring
   membungkus jadi banyak baris, dan panelnya membengkak
   ke 644 piksel. Di layar setinggi 900 piksel, itu 71
   persen area terpakai untuk kendali, dan kartu istilah
   yang mau dibaca justru tertutup di baliknya. Terukur
   77 kartu tidak bisa disentuh sama sekali.

   Perbaikannya: di layar sempit, penyaingnya berhenti
   membungkus dan berganti jadi satu baris yang bisa
   digeser mendatar. Tingginya turun ke sekitar 150,
   dan semua kartu kembali bisa diakses.

   Pola ini lazim dipakai di antarmuka ponsel, dan tetap
   menyisakan petunjuk visual bahwa daftarnya berlanjut
   ke samping.
   ================================================ */

@media (max-width: 860px) {
  .glosarium-controls {
    padding: var(--space-4) 0;
  }

  .glosarium-controls .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Ruang sisi supaya pil pertama dan terakhir tidak
       terpotong tepat di tepi layar. */
    padding: 2px var(--container-padding);
    margin: 0 calc(var(--container-padding) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .glosarium-controls .filter-row::-webkit-scrollbar {
    display: none;
  }

  .glosarium-controls .filter-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .search-wrap {
    margin-bottom: var(--space-3);
  }
}

/* Deretan penyaring di halaman cakupan dan pencarian
   diperlakukan sama, karena masalahnya identik. */
@media (max-width: 860px) {
  .cakupan-kendali .filter-row,
  .cari-kendali .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px var(--container-padding);
    margin: 0 calc(var(--container-padding) * -1);
    scrollbar-width: none;
  }

  .cakupan-kendali .filter-row::-webkit-scrollbar,
  .cari-kendali .filter-row::-webkit-scrollbar {
    display: none;
  }

  .cakupan-kendali .filter-chip,
  .cari-kendali .filter-chip {
    flex: 0 0 auto;
  }
}

/* ---------- Judul materi di dalam rute jalur ----------
   Tautannya membungkus judul setinggi satu baris, jadi
   tingginya cuma 24 piksel padahal ini tautan utama yang
   dipakai orang untuk membuka materi berikutnya. */

.rute-isi h3 a {
  position: relative;
  display: inline-block;
}

.rute-isi h3 a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 44px;
}


/* ---------- Penyelarasan navigasi balik di artikel ----------
   Daftar isi artikel menempel di margin kiri dengan position
   fixed, menempati sekitar 148 sampai 336 piksel di layar
   1440. Navigasi balik yang memakai lebar wadah penuh mulai
   dari 144, jadi keduanya pasti bertabrakan.

   Disejajarkan dengan kolom baca yang lebarnya 720 piksel,
   sehingga masing-masing punya wilayah sendiri dan tidak ada
   yang perlu ditumpuk lewat z-index. */

.navigasi-balik-artikel {
  max-width: calc(720px + var(--container-padding) * 2);
}

/* ---------- Jarak tautan footer ----------
   Tautannya setinggi 19 piksel dengan jarak antar baris 40.
   Area sentuh 44 piksel jadi melewati batas tetangganya,
   dan tautan di bawah mencuri sentuhan yang ditujukan ke
   tautan di atasnya. Jaraknya dinaikkan supaya tiap area
   sentuh punya ruang utuh. */

.footer-col li + li {
  margin-top: 8px;
}


/* ---------- Tautan footer ----------
   Sebelumnya area sentuhnya diperluas lewat pseudo-elemen,
   tapi cara itu rapuh di sini. Sebagian tautan membungkus
   jadi dua baris pada lebar tertentu, dan area yang melebar
   ikut bergeser sampai menimpa tetangganya. Terukur di
   lebar 768 piksel, tautan Peta SKKNI selalu tercuri oleh
   tautan di bawahnya.

   Diganti dengan blok yang tingginya memang 44 piksel.
   Lebih sederhana, dan tidak bisa bertabrakan berapa pun
   jumlah barisnya. */

.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer-col ul {
  gap: 0;
}

.footer-col li + li {
  margin-top: 0;
}


/* ---------- Ruang cadangan panel kendali kamus ----------
   Penyaring kategori diisi JavaScript dari glosarium, jadi
   panelnya mulai pendek lalu memanjang. Karena panel ini
   sticky dan berada di atas daftar istilah, pemanjangannya
   mendorong seluruh isi di bawahnya.

   Angkanya dari pengukuran isi sebenarnya. */

.glosarium-controls .filter-row {
  min-height: 44px;
}

#glosariumStats {
  min-height: 92px;
}

#glosariumResults {
  min-height: 24px;
}

/* ================================================
   PETA SKKNI

   Halaman ini dulu berupa aplikasi terpisah di domain
   lain. Dipindah ke dalam situs supaya memakai header,
   footer, warna, dan navigasi yang sama.

   Tata letaknya sengaja bukan kartu berjajar. Sembilan
   klaster itu satu daftar bertingkat, bukan sembilan
   pilihan setara, jadi bentuk daftar yang bisa dibuka
   tutup lebih jujur menggambarkan isinya.
   ================================================ */

.skkni-kendali-blok {
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
}

.skkni-kendali {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skkni-input {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.skkni-input::placeholder {
  color: var(--text-soft);
}

.skkni-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
}

.skkni-hitung {
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------- Satu klaster ---------- */

.skkni-daftar {
  display: grid;
  gap: var(--space-3);
}

.skkni-klaster {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
}

.skkni-klaster-judul {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.skkni-kepala {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  padding: var(--space-5);
  font-family: var(--font);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 160ms ease;
}

.skkni-kepala:hover {
  background: var(--bg-alt);
}

/* Huruf klaster memakai tangga sangrai. Warnanya
   mengikuti urutan resmi A sampai I, jadi posisi di
   tangga itu menyampaikan sesuatu yang benar, bukan
   sekadar hiasan. */
.skkni-huruf {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-size: 19px;
  font-weight: 700;
  color: var(--teal-text);
  background: var(--teal-soft);
}

/* Sembilan klaster tidak lagi punya sembilan warna.
   Sistem desain melarangnya lewat aturan "satu aksen per
   unit berulang": di baris yang berulang, hanya elemen
   yang menuntut tindakan yang boleh berwarna.

   Yang membedakan klaster sekarang hurufnya sendiri,
   bukan warnanya. Itu sudah cukup, karena huruf A sampai I
   memang penanda resminya di SKKNI. */

.skkni-kepala-teks {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.skkni-nama {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.skkni-ringkas {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.skkni-angka {
  flex-shrink: 0;
  display: grid;
  gap: 2px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.skkni-angka-materi {
  font-weight: 500;
  color: var(--text-soft);
}

.skkni-panah {
  flex-shrink: 0;
  color: var(--text-soft);
  transition: transform 240ms var(--ease);
}

.terbuka .skkni-panah {
  transform: rotate(180deg);
}

/* ---------- Isi klaster ---------- */

.skkni-badan {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease);
}

.skkni-badan-isi {
  min-height: 0;
  overflow: hidden;
}

.terbuka .skkni-badan {
  grid-template-rows: 1fr;
}

.skkni-unit-daftar {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--border);
}

.skkni-unit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.skkni-unit:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.skkni-unit-kode {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.skkni-unit-judul {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}

.skkni-unit-materi {
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-text);
  text-decoration: none;
}

.skkni-unit-materi::before {
  content: 'Materi: ';
  font-weight: 500;
  color: var(--text-muted);
  white-space: pre;
}

.skkni-unit-materi:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skkni-unit-kosong {
  font-size: 13px;
  color: var(--text-soft);
}

.skkni-kosong {
  padding: var(--space-7) 0;
  text-align: center;
  color: var(--text-muted);
}

.skkni-catatan {
  max-width: 66ch;
}

.skkni-catatan h2 {
  margin-bottom: var(--space-4);
}

.skkni-catatan p {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.skkni-catatan .btn {
  margin-top: var(--space-3);
}

@media (min-width: 720px) {
  .skkni-unit {
    grid-template-columns: 168px 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }

  .skkni-unit-materi {
    grid-column: 2;
  }
}

@media (max-width: 719px) {
  .skkni-kepala {
    flex-wrap: wrap;
    padding: var(--space-4);
  }

  .skkni-angka {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skkni-badan,
  .skkni-panah {
    transition: none;
  }
}

/* ---------- Tautan lanjutan di tiap bagian beranda ----------
   Beranda sekarang hanya menampilkan cuplikan tiap bagian,
   dan tautan ini membawa ke halaman penuhnya. Sebelumnya
   navigasi header hanya menggulir beranda yang panjang,
   sehingga tombol berbeda menghasilkan halaman yang sama. */

.bagian-tautan {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

.tentang-ringkas {
  max-width: 66ch;
}

.tentang-ringkas .btn {
  margin-top: var(--space-5);
}

.materi-saring {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.materi-klaster {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .materi-saring {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px var(--container-padding);
    margin: 0 calc(var(--container-padding) * -1);
    scrollbar-width: none;
  }

  .materi-saring::-webkit-scrollbar {
    display: none;
  }

  .materi-saring .filter-chip {
    flex: 0 0 auto;
  }
}

/* ---------- Subjudul merek sebagai teks ----------
   Sistem desain: logo di latar terang dipakai tanpa
   subjudul, dan subjudulnya ditulis sebagai teks biasa
   di dekatnya. Ini juga memperbaiki masalah lama, yaitu
   subjudul putih di dalam gambar yang tidak terbaca di
   atas latar terang. */

.merek-subjudul {
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Status, dari sistem desain ----------
   Warna ini bukan hiasan. Hanya untuk menyatakan
   keadaan, dan tidak boleh dipakai membedakan kategori. */

.status-aman   { color: var(--aman);   background: var(--aman-t); }
.status-rawan  { color: var(--rawan);  background: var(--rawan-t); }
.status-kosong { color: var(--kosong); background: var(--kosong-t); }
.status-info   { color: var(--info);   background: var(--info-t); }

/* ---------- Penomoran seri UK ----------
   Format resmi dari sistem desain: UK-31 · M.70SDM01.031.2
   dengan titik tengah sebagai pemisah. Nomor seri adalah
   penanda yang diingat orang, jadi ditulis lebih tegas
   daripada kode panjangnya. */

.skkni-unit-kode {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.uk-seri {
  font-weight: 700;
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
}

.uk-pisah {
  color: var(--border-strong);
}

/* ---------- Kontrol formulir ikut huruf merek ----------
   Peramban tidak mewariskan font-family ke input, select,
   textarea, dan button. Akibatnya sebagian kolom isian
   masih memakai Arial padahal seluruh halaman sudah pakai
   Plus Jakarta Sans, dan itu paling terlihat di kolom
   pendaftaran yang justru sering dilihat orang.

   Sebagian kontrol sudah diberi var(--font) satu per satu.
   Aturan ini menjaring sisanya sekaligus, termasuk yang
   ditambahkan nanti. */

input,
select,
textarea,
button {
  font-family: var(--font);
}

/* ---------- Jumlah bacaan ----------
   Tanggal terbit sengaja tidak lagi ditampilkan, karena
   materi di sini tidak basi karena umur. Yang lebih berguna
   bagi pembaca adalah tanda bahwa sebuah tulisan memang
   banyak dicari.

   Angkanya baru muncul setelah melewati ambang tertentu.
   "Dibaca 2 kali" tidak memberi informasi apa apa, sedangkan
   angka yang sudah cukup besar memang menandakan sesuatu. */

/* Span dibiarkan kosong sampai angkanya datang, jadi
   yang kosong tidak boleh memakan ruang. */
.materi-dibaca:empty,
.materi-dibaca[hidden] {
  display: none;
}

.materi-dibaca {
  color: var(--text-soft);
}

.artikel-dibaca {
  color: var(--text-muted);
}

/* ================================================
   HALAMAN STATISTIK
   ================================================ */

.stat-ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stat-kotak {
  display: grid;
  gap: 2px;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}

.stat-angka {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

.stat-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.stat-baris {
  display: grid;
  grid-template-columns: 30px 1fr 60px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.stat-urut {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.stat-teks {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stat-teks a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.stat-teks a:hover {
  color: var(--teal-text);
}

.stat-klaster {
  font-size: 12px;
  color: var(--text-muted);
}

.stat-bar {
  display: none;
}

.stat-nilai {
  display: grid;
  gap: 1px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-belum {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-soft);
}

@media (min-width: 720px) {
  .stat-baris {
    grid-template-columns: 32px 1fr 160px 72px;
  }

  .stat-bar {
    display: block;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    overflow: hidden;
  }

  .stat-bar span {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    background: var(--teal);
    transition: transform 320ms var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-bar span {
    transition: none;
  }
}

/* ================================================
   HALAMAN AGENDA

   Sesi ditampilkan sebagai daftar, bukan kartu berjajar,
   karena urutannya penting dan jumlahnya sedikit.
   ================================================ */

.agenda-kepanjangan {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 15px;
  color: var(--text-secondary);
}

.agenda-kepanjangan strong {
  color: var(--teal-text);
}

.agenda-daftar {
  display: grid;
  gap: var(--space-4);
}

.agenda-item {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.agenda-item-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.agenda-seri {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.agenda-tanda {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-subtle);
}

.agenda-tanda-menyusul {
  color: var(--rawan);
  background: var(--rawan-t);
}

.agenda-item h3 {
  margin-bottom: var(--space-2);
  font-size: 21px;
  line-height: 1.3;
}

.agenda-tanggal {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.agenda-tempat {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-muted);
}

.agenda-cerita {
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.agenda-butir {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
}

.agenda-butir li {
  padding-left: 4px;
}

.agenda-item .btn {
  margin-top: var(--space-5);
}

.agenda-lewat {
  background: var(--bg-alt);
}

.agenda-lewat h3,
.agenda-lewat .agenda-tanggal {
  color: var(--text-secondary);
}

.agenda-judul-lewat {
  margin: var(--space-8) 0 var(--space-4);
  font-size: 19px;
  color: var(--text-secondary);
}

/* ---------- Halaman Tentang ---------- */

.tentang-tulisan {
  max-width: 68ch;
}

.tentang-tulisan h2 {
  margin: var(--space-8) 0 var(--space-4);
  font-size: 26px;
}

.tentang-tulisan p {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.tentang-tulisan .lead {
  color: var(--text-primary);
}

.tentang-tulisan strong {
  color: var(--text-primary);
  font-weight: 700;
}

.tentang-akronim,
.tentang-daftar {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-3);
  color: var(--text-secondary);
}

.tentang-akronim {
  list-style: none;
  padding-left: 0;
}

.tentang-akronim li {
  padding-left: var(--space-4);
  border-left: 2px solid var(--teal-100);
}

.tentang-akronim strong {
  color: var(--teal-text);
}

.tentang-tulisan > .btn {
  margin: var(--space-2) 0 var(--space-4);
}

.tentang-ajakan {
  margin-top: var(--space-9);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.tentang-ajakan h2 {
  margin-top: 0;
}

.tentang-ajakan .btn {
  margin-top: var(--space-3);
}

/* Sesi yang tanggalnya belum ditetapkan. Menampilkan
   tanggal akhir bulan seperti "31" akan dibaca sebagai
   janji, padahal belum ada tanggalnya. */
.agenda-date-menyusul {
  letter-spacing: 0.1em;
  opacity: 0.55;
}