/*
Theme Name: Kertas Coretan Syarif
Theme URI: https://coretansyarif.my.id/
Author: Syarif (Kustom Arsitektur)
Description: Tema kustom hibrida Brutalisme Neon dengan responsivitas seluler mutlak, ilusi kertas fisik multikromatik, animasi tinta dinamis, dan evakuasi cetak.
Version: 1.0.6
*/

:root {
  /* Palet Kertas Fisik Multikromatik */
  --bg-meja-dasar: #f0ede6;
  --bg-kertas-utama: #fdfcf8;
  --bg-kertas-kuning: #fef5c0;
  --bg-kertas-biru: #e0f2fe;
  --bg-kertas-merah: #fce7f3;

  /* Tinta Brutalis (Kontras Maksimal) */
  --teks-utama: #111111;
  --warna-garis-buku: #111111;

  /* Spektrum Stabilo Neon */
  --aksen-stabilo: #dfff00;
  --aksen-stabilo-alt: #ff007f;
  --aksen-fokus: #00ffff;
  --aksen-peringatan: #ff3333;

  --font-baca: "Inter", system-ui, -apple-system, sans-serif;
  --font-judul: "Courier New", "Space Mono", monospace;

  /* Bayangan Fisik Tiga Dimensi */
  --bayangan-brutalis: 6px 8px 0 rgba(17, 17, 17, 0.9);
  --bayangan-hover: 10px 12px 0 var(--aksen-stabilo);
  --bayangan-kertas-halus: 2px 4px 15px rgba(0, 0, 0, 0.08);
}

[data-tema="malam"] {
  --bg-meja-dasar: #050814;
  --bg-kertas-utama: #0a1128;
  --bg-kertas-kuning: #1f1d0d;
  --bg-kertas-biru: #09131c;
  --bg-kertas-merah: #1f0d15;

  --teks-utama: #e8e8e8;
  --warna-garis-buku: #e8e8e8;
  --aksen-stabilo: #ff00ff;
  --bayangan-brutalis: 6px 8px 0 var(--aksen-fokus);
}

[data-tema="fokus"],
body.post-type-archive-materi,
body.single-materi {
  --bg-meja-dasar: #d9e0e5;
  --bg-kertas-utama: #e8ecef;
  --aksen-stabilo: #00ff66;
  --aksen-stabilo-alt: #ffcc00;
}

html {
  font-size: 100%;
  transition: font-size 0.3s ease;
}
[data-ukuran-teks="besar"] {
  font-size: 115%;
}
[data-ukuran-teks="ekstra"] {
  font-size: 130%;
}

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

body {
  background-color: var(--bg-meja-dasar);
  color: var(--teks-utama);
  font-family: var(--font-baca);
  line-height: 1.7;

  /* Ilusi Tumpukan Kertas dengan Grain Halus */
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position:
    0 0,
    10px 10px;
  transition:
    background-color 0.3s,
    color 0.3s;
  overflow-x: hidden;
}

[data-tema="malam"] body,
[data-tema="fokus"] body {
  background-image: none;
}

/* BILAH PROGRES BACA - Tinta Bergerak */
#indikator-baca {
  position: fixed;
  top: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--aksen-fokus), var(--aksen-stabilo));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

.sr-only-fokus:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  background: var(--aksen-stabilo);
  color: #000;
  padding: 1rem 2rem;
  font-family: var(--font-judul);
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 9999;
  outline: 4px dashed #000;
  border: 3px solid #000;
}

*:focus-visible {
  outline: 4px dashed var(--aksen-fokus) !important;
  outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* HEADER & NAVIGASI */
.kepala-situs {
  border-bottom: 4px solid var(--warna-garis-buku);
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-kertas-utama);
  position: relative;
  z-index: 50;
  border-radius: 0 0 10px 8px / 0 0 3px 6px;
  box-shadow: var(--bayangan-kertas-halus);
}

.judul-buku a {
  font-family: var(--font-judul);
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--teks-utama);
  text-decoration: none;
  letter-spacing: -1px;
  position: relative;
  display: inline-block;
}

/* Ornamen Goresan Tinta Bawah Judul Logo */
.judul-buku a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -2px;
  left: 0;
  background: var(--teks-utama);
  transform: skewX(-15deg) rotate(-1deg);
  transition: background 0.3s;
}
.judul-buku a:hover::after {
  background: var(--aksen-stabilo-alt);
}

/* SAKELAR SELULER */
.tombol-menu-seluler {
  display: none;
  background: transparent;
  border: 3px solid var(--warna-garis-buku);
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  border-radius: 4px 8px 3px 6px / 5px 3px 8px 4px;
}
.ikon-garis {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--teks-utama);
  transition: all 0.3s;
}
.tombol-menu-seluler[aria-expanded="true"] .ikon-garis:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tombol-menu-seluler[aria-expanded="true"] .ikon-garis:nth-child(2) {
  opacity: 0;
}
.tombol-menu-seluler[aria-expanded="true"] .ikon-garis:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navigasi-katalog ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.navigasi-katalog a {
  color: var(--teks-utama);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  text-transform: uppercase;
  position: relative;
  padding: 0.5rem 0.2rem;
  display: block;
}
/* Animasi Coretan Pena pada Navigasi */
.navigasi-katalog a::before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--aksen-stabilo);
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: rotate(-2deg);
  z-index: -1;
}
.navigasi-katalog a:hover::before,
.navigasi-katalog a:focus::before {
  width: 100%;
}

@media (max-width: 768px) {
  .tombol-menu-seluler {
    display: flex;
  }
  .navigasi-katalog {
    display: none;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-kertas-utama);
    border-bottom: 4px solid var(--warna-garis-buku);
    padding: 1rem 1.5rem;
    z-index: -1;
  }
  .navigasi-katalog.terbuka {
    display: block;
    animation: geserTurun 0.3s ease-out forwards;
  }
  @keyframes geserTurun {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .navigasi-katalog ul {
    flex-direction: column;
    gap: 0;
  }
  .navigasi-katalog a {
    padding: 1rem 0;
    border-bottom: 2px dashed var(--warna-garis-buku);
  }
  .navigasi-katalog a::before {
    display: none;
  }
}

.kaki-situs {
  margin-top: 5rem;
  padding: 3rem 1.5rem;
  border-top: 4px solid var(--warna-garis-buku);
  text-align: center;
  font-family: var(--font-judul);
  background: var(--bg-kertas-utama);
  border-radius: 8px 12px 0 0 / 6px 3px 0 0;
}

/* PORTAL BERANDA KARTU MULTIKROMATIK */
.grid-laci-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  padding: 4rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.blok-laci,
.kartu-pencarian-bento {
  border: 4px solid var(--warna-garis-buku);
  background: var(--bg-kertas-utama);
  box-shadow: var(--bayangan-brutalis);
  position: relative;
  padding: 2.5rem 2rem;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 2px 15px 3px 25px / 15px 5px 25px 3px;
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s;
}

/* Rotasi Warna Kertas Dinamis Secara Otomatis */
.blok-laci:nth-child(3n + 1),
.kartu-pencarian-bento:nth-child(3n + 1) {
  background: var(--bg-kertas-kuning);
}
.blok-laci:nth-child(3n + 2),
.kartu-pencarian-bento:nth-child(3n + 2) {
  background: var(--bg-kertas-biru);
}
.blok-laci:nth-child(3n + 3),
.kartu-pencarian-bento:nth-child(3n + 3) {
  background: var(--bg-kertas-merah);
}

/* Ornamen Jarum Pentul Miring di sudut laci */
.blok-laci::before,
.kartu-pencarian-bento::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 15px;
  width: 14px;
  height: 14px;
  background: var(--aksen-peringatan);
  border-radius: 50%;
  border: 3px solid var(--warna-garis-buku);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.blok-laci:hover,
.blok-laci:focus-within,
.kartu-pencarian-bento:hover,
.kartu-pencarian-bento:focus-within {
  transform: translateY(-8px) rotate(1deg);
  box-shadow: var(--bayangan-hover);
}

.tautan-portal-ekspansi {
  color: var(--teks-utama);
  text-decoration: none;
}
.tautan-portal-ekspansi::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.judul-laci {
  font-family: var(--font-judul);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  border-bottom: 4px solid var(--warna-garis-buku);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}
.umpan-mikro {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}
.indikator-baru {
  display: inline-block;
  background: var(--teks-utama);
  color: var(--bg-kertas-utama);
  padding: 0.2rem 0.6rem;
  font-family: var(--font-judul);
  font-size: 0.8rem;
  font-weight: bold;
  margin-right: 0.5rem;
  border: 2px solid var(--warna-garis-buku);
  transform: rotate(-3deg);
}

/* RUANG BACA MUTLAK & ESTETIKA KERTAS FISIK */
.ruang-isolasi-artikel {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  overflow-wrap: break-word;
}

.lembar-catatan {
  background: var(--bg-kertas-utama);
  border: 4px solid var(--warna-garis-buku);
  padding: 5rem 6rem;
  box-shadow: var(--bayangan-brutalis);
  margin-bottom: 4rem;
  position: relative;
  border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
}

/* Ornamen Selotip Kertas (Masking Tape) yang lebih realistis */
.lembar-catatan::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 160px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  z-index: 10;
  border-radius: 2px;
}

[data-tema="malam"] .lembar-catatan::after,
[data-tema="malam"] .blok-laci::before,
[data-tema="malam"] .kartu-pencarian-bento::before {
  display: none;
}

@media (max-width: 768px) {
  .lembar-catatan {
    padding: 3rem 1.5rem;
    border-radius: 4px;
  }
}

.judul-catatan {
  font-family: var(--font-judul);
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.1;
  font-weight: 900;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -2px;
  position: relative;
}

.metrik-kognitif {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.9rem;
  font-family: var(--font-judul);
  opacity: 0.8;
  margin-bottom: 2rem;
}

.tombol-tts {
  background: var(--bg-kertas-kuning);
  border: 4px solid var(--warna-garis-buku);
  color: var(--teks-utama);
  font-family: var(--font-judul);
  font-weight: 900;
  padding: 1rem 1.5rem;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
  max-width: 300px;
  border-radius: 4px 8px 3px 6px / 5px 3px 8px 4px;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--warna-garis-buku);
}
@media (min-width: 600px) {
  .tombol-tts {
    width: auto;
  }
}
.tombol-tts::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--aksen-stabilo);
  transform: translateX(-101%);
  transition: transform 0.3s ease-in-out;
  z-index: 1;
}
.tombol-tts span {
  position: relative;
  z-index: 2;
}
.tombol-tts:hover::before,
.tombol-tts[aria-pressed="true"]::before {
  transform: translateX(0);
}
.tombol-tts:hover,
.tombol-tts[aria-pressed="true"] {
  color: #000;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--warna-garis-buku);
}

.isi-paragraf-catatan {
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  color: var(--teks-utama);
}
.isi-paragraf-catatan p {
  margin-bottom: 1.8rem;
}
.isi-paragraf-catatan h2,
.isi-paragraf-catatan h3 {
  font-family: var(--font-judul);
  margin: 3rem 0 1.5rem;
  line-height: 1.3;
  display: inline-block;
  position: relative;
}
/* Sapuan Stabilo Tebal di Bawah Subjudul */
.isi-paragraf-catatan h2::after,
.isi-paragraf-catatan h3::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: -2%;
  width: 104%;
  height: 40%;
  background: var(--aksen-stabilo);
  z-index: -1;
  transform: rotate(-2deg);
  border-radius: 2px;
}

/* ANIMASI STABILO DINAMIS PADA TAUTAN TEKS */
.isi-paragraf-catatan a {
  color: var(--teks-utama);
  font-weight: 700;
  text-decoration: none;
  position: relative;
  display: inline;
  background-image: linear-gradient(transparent 50%, var(--aksen-fokus) 50%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0 0.1em;
}
.isi-paragraf-catatan a:hover,
.isi-paragraf-catatan a:focus {
  background-size: 100% 100%;
  color: #000;
  border-radius: 3px;
}

.rekomendasi-tengah-jalan {
  margin: 4rem 0;
  padding: 2.5rem 1.5rem;
  border: 4px dashed var(--warna-garis-buku);
  text-align: center;
  font-family: var(--font-judul);
  font-size: 1.2rem;
  background: var(--bg-kertas-merah);
  border-radius: 2px 10px 3px 15px / 10px 5px 15px 3px;
  transform: rotate(1deg);
}

.panel-berbagi {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 4px solid var(--warna-garis-buku);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  align-items: center;
}
.teks-panduan-berbagi {
  grid-column: 1 / -1;
  font-family: var(--font-judul);
  font-weight: bold;
}
.panel-berbagi a,
.panel-berbagi button {
  background: var(--bg-kertas-utama);
  border: 4px solid var(--warna-garis-buku);
  padding: 1rem;
  color: var(--teks-utama);
  font-family: var(--font-judul);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  border-radius: 3px 6px 2px 4px / 4px 2px 6px 3px;
  transition:
    transform 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  box-shadow: 3px 3px 0 var(--warna-garis-buku);
}
.panel-berbagi a:hover,
.tombol-salin-tautan:hover {
  background: var(--aksen-stabilo-alt);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--warna-garis-buku);
}
.tombol-salin-tautan.sukses-neon {
  background: var(--aksen-stabilo);
  color: #000;
}

.zona-interaktif-bungker {
  margin: 4rem 0;
  padding: 3rem 1.5rem 1.5rem;
  border: 4px solid var(--warna-garis-buku);
  background-image:
    linear-gradient(var(--warna-garis-buku) 1px, transparent 1px),
    linear-gradient(90deg, var(--warna-garis-buku) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: var(--bg-meja-dasar);
  position: relative;
  overflow-x: auto;
  border-radius: 2px;
}
.zona-interaktif-bungker::before {
  content: "ZONA KODE";
  position: absolute;
  top: -15px;
  left: 10px;
  background: var(--teks-utama);
  color: var(--bg-kertas-utama);
  padding: 0 10px;
  font-family: var(--font-judul);
  font-weight: 900;
  border: 2px solid var(--warna-garis-buku);
  text-transform: uppercase;
}

/* PANEL AKSESIBILITAS */
.penampung-aksesibilitas {
  position: fixed;
  top: auto;
  bottom: 20px;
  right: 0;
  z-index: 1000;
  display: flex;
}
@media (min-width: 768px) {
  .penampung-aksesibilitas {
    top: 15%;
    bottom: auto;
  }
}

.tombol-label-indeks {
  background: var(--aksen-fokus);
  color: #000;
  border: 4px solid var(--warna-garis-buku);
  border-right: none;
  padding: 1rem 0.8rem;
  font-family: var(--font-judul);
  font-weight: 900;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: -4px 4px 0 var(--warna-garis-buku);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 0 0 8px;
}

.panel-a11y-tersembunyi {
  background: var(--bg-kertas-utama);
  border: 4px solid var(--warna-garis-buku);
  border-right: none;
  padding: 1.5rem;
  width: 100vw;
  max-width: 360px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: -8px 8px 0 var(--warna-garis-buku);
  position: absolute;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 12px 0 0 0;
}
@media (min-width: 768px) {
  .panel-a11y-tersembunyi {
    top: 0;
    bottom: auto;
    width: 320px;
    max-height: none;
    overflow-y: visible;
  }
}
.panel-a11y-tersembunyi.terbuka {
  transform: translateX(0);
}

.kepala-panel-a11y {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 3px dashed var(--warna-garis-buku);
  padding-bottom: 1rem;
}
.kepala-panel-a11y h2 {
  font-family: var(--font-judul);
  font-size: 1.1rem;
}
#tutup-panel-a11y {
  background: var(--aksen-peringatan);
  color: #fff;
  border: 4px solid var(--warna-garis-buku);
  padding: 0.5rem;
  font-weight: bold;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  border-radius: 3px;
}

.grup-kendali {
  margin-bottom: 1.5rem;
}
.grup-kendali h3 {
  font-family: var(--font-judul);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.susunan-tombol {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.susunan-tombol button {
  flex: 1;
  padding: 0.8rem 0.5rem;
  background: transparent;
  border: 3px solid var(--warna-garis-buku);
  color: var(--teks-utama);
  font-family: var(--font-judul);
  font-weight: bold;
  cursor: pointer;
  min-width: 60px;
  min-height: 44px;
  border-radius: 2px 4px 3px 2px;
}
.susunan-tombol button[aria-pressed="true"] {
  background: var(--teks-utama);
  color: var(--bg-kertas-utama);
  transform: scale(0.95);
}

/* PROTOKOL EVAKUASI TINTA CETAK MUTLAK */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    background-image: none !important;
  }

  .kepala-situs,
  .kaki-situs,
  .penampung-aksesibilitas,
  .panel-berbagi,
  .kendali-audio-inklusi,
  .navigasi-kembali-indeks,
  #indikator-baca {
    display: none !important;
  }

  .ruang-isolasi-artikel {
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: none;
  }

  .lembar-catatan {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  .judul-catatan {
    font-size: 24pt;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  figure,
  img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }
  h2,
  h3,
  h4 {
    page-break-after: avoid;
  }
  p {
    orphans: 3;
    widows: 3;
  }
}

/* ARSITEKTUR HALAMAN PENCARIAN & ELEMEN LAIN */
.layout-pencarian-mutlak {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.header-pencarian-brutalis {
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  background: var(--bg-kertas-utama);
  padding: 2.5rem;
  border: 4px solid var(--warna-garis-buku);
  box-shadow: var(--bayangan-brutalis);
  border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
}
.judul-pencarian-raksasa {
  font-family: var(--font-judul);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
}
.teks-peringatan {
  color: var(--aksen-peringatan);
}
.meta-hasil-pencarian {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1rem;
}
.grid-pencarian-dinamis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.lencana-tipe-post {
  display: inline-block;
  background: var(--aksen-fokus);
  color: #000;
  padding: 0.2rem 0.6rem;
  font-family: var(--font-judul);
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  border: 2px solid #000;
  transform: rotate(2deg);
}
.judul-kartu-pencarian {
  font-family: var(--font-judul);
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.judul-kartu-pencarian a {
  color: var(--teks-utama);
  text-decoration: none;
}
.judul-kartu-pencarian a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--aksen-stabilo-alt);
}
.cuplikan-pencarian {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}
.meta-waktu-pencarian {
  border-top: 2px dashed var(--warna-garis-buku);
  padding-top: 1rem;
  font-family: var(--font-judul);
  font-size: 0.9rem;
}
.navigasi-pencarian-bawah {
  margin-top: 4rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-family: var(--font-judul);
  font-weight: bold;
}
.tombol-paginasi-brutalis {
  padding: 0.5rem 1rem;
  border: 4px solid var(--warna-garis-buku);
  background: var(--bg-kertas-kuning);
  border-radius: 3px;
  font-weight: 900;
  box-shadow: 3px 3px 0 var(--warna-garis-buku);
}
.ruang-hampa-pencarian {
  margin-top: 4rem;
  padding: 4rem 2rem;
  border: 4px dashed var(--aksen-peringatan);
  text-align: center;
  background: var(--bg-kertas-utama);
  border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
}
.judul-hampa-pencarian {
  font-family: var(--font-judul);
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--aksen-peringatan);
  margin-bottom: 1rem;
}
.deskripsi-hampa-pencarian {
  font-size: 1.2rem;
  font-weight: bold;
}

/* EVAKUASI POLUSI INLINE CSS */
.judul-catatan-vertikal {
  margin-bottom: 1rem;
}
.susunan-metrik-vertikal {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 3rem;
  border-bottom: 4px solid var(--warna-garis-buku);
  padding-bottom: 2rem;
}
.metrik-visual-vertikal {
  font-family: var(--font-judul);
  color: var(--teks-utama);
}
.baris-identitas {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 0.3rem;
}
.baris-kognitif {
  font-size: 0.95rem;
  font-weight: bold;
  opacity: 0.8;
}
.pemisah-titik {
  margin: 0 0.5rem;
}
.kaki-catatan-vertikal {
  margin-top: 4rem;
}
.blok-tayangan-bawah {
  margin-bottom: 3rem;
  padding: 1.5rem;
  border: 4px solid var(--warna-garis-buku);
  background: var(--bg-kertas-biru);
  text-align: center;
  font-family: var(--font-judul);
  font-size: 1.2rem;
  font-weight: bold;
  box-shadow: var(--bayangan-brutalis);
  border-radius: 4px 8px 3px 6px / 5px 3px 8px 4px;
}
.navigasi-kembali-vertikal {
  margin-bottom: 1.5rem;
}

.ruang-diskusi-brutalis {
  margin-top: 5rem;
  padding: 3rem;
  border: 4px solid var(--warna-garis-buku);
  background: var(--bg-kertas-utama);
  box-shadow: var(--bayangan-brutalis);
  border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
}
.judul-komentar-raksasa {
  font-family: var(--font-judul);
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
}
.judul-komentar-raksasa::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--aksen-stabilo-alt);
  z-index: -1;
  transform: rotate(2deg);
}
.daftar-komentar-bersih {
  list-style: none;
  padding: 0;
  margin-bottom: 3rem;
}
.teks-tebal {
  font-weight: bold;
}
.kotak-peringatan-kunci {
  background: var(--aksen-peringatan);
  color: #fff;
  padding: 1rem;
  font-weight: bold;
  border: 4px solid var(--warna-garis-buku);
  border-radius: 4px;
}
.judul-formulir-raksasa {
  font-family: var(--font-judul);
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
.tombol-aksi-brutalis {
  background: var(--teks-utama);
  color: var(--bg-kertas-utama);
  border: 4px solid var(--warna-garis-buku);
  padding: 1rem 2rem;
  font-family: var(--font-judul);
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 1rem;
  border-radius: 3px 8px 4px 6px / 4px 2px 7px 3px;
  box-shadow: 4px 4px 0 var(--aksen-stabilo);
}
.tombol-aksi-brutalis:hover {
  background: var(--aksen-fokus);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--warna-garis-buku);
}
.margin-bawah-10 {
  margin-bottom: 1rem;
}
.margin-bawah-15 {
  margin-bottom: 1.5rem;
}
.input-teks-brutalis {
  width: 100%;
  padding: 1rem;
  border: 4px solid var(--warna-garis-buku);
  background: var(--bg-kertas-utama);
  font-family: var(--font-baca);
  font-size: 1rem;
  color: var(--teks-utama);
  border-radius: 2px 4px 3px 5px;
}
.input-teks-brutalis:focus {
  background: #fff;
  outline: 4px dashed var(--aksen-fokus);
}

.label-taksonomi-brutalis {
  font-family: var(--font-judul);
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.teks-label-taksonomi {
  background: var(--teks-utama);
  color: var(--bg-kertas-utama);
  padding: 0.2rem 0.6rem;
  border: 2px solid var(--warna-garis-buku);
  border-radius: 2px 6px 3px 5px;
}

.formulir-pencarian-brutalis {
  margin-bottom: 3rem;
}
.grup-pencarian-fleksibel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.input-pencarian-neon {
  flex: 1;
  min-width: 250px;
  padding: 1rem;
  border: 4px solid var(--warna-garis-buku);
  background: var(--bg-kertas-utama);
  color: var(--teks-utama);
  font-family: var(--font-baca);
  font-size: 1.1rem;
  border-radius: 4px 2px 5px 3px;
}
.input-pencarian-neon:focus {
  background: #fff;
  outline: 4px dashed var(--aksen-fokus);
}
.tombol-cari-neon {
  background: var(--teks-utama);
  color: var(--bg-kertas-utama);
  border: 4px solid var(--warna-garis-buku);
  padding: 1rem 2rem;
  font-family: var(--font-judul);
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 2px 8px 3px 5px;
  box-shadow: 4px 4px 0 var(--aksen-stabilo-alt);
}
.tombol-cari-neon:hover,
.tombol-cari-neon:focus {
  background: var(--aksen-stabilo);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 var(--warna-garis-buku);
}

.halaman-error-404 {
  text-align: center;
  border: 4px dashed var(--aksen-peringatan);
  padding: 4rem 2rem;
  background: var(--bg-kertas-utama);
  border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
}
.teks-raksasa-404 {
  color: var(--aksen-peringatan);
  font-size: clamp(3rem, 8vw, 6rem);
  text-shadow: 4px 4px 0 var(--warna-garis-buku);
}
.subjudul-hampa {
  font-family: var(--font-judul);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.teks-pesan-404 {
  font-weight: bold;
  font-size: 1.2rem;
}
.panel-berbagi-pusat {
  justify-content: center;
  margin-top: 3rem;
  border-top: none;
}