/* ==========================================================================
   GLOMERULONEFRITIS — Deck Stylesheet
   Tema: buku ajar klasik / atlas anatomi vintage
   Palet: kertas krem-sepia, tinta coklat tua, aksen arteri (vermilion)
          dan vena (indigo), emas ochre untuk sorotan
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root {
  /* Kertas & tinta */
  --paper:        #f6efe0;
  --paper-deep:   #ece1c9;
  --paper-shade:  #e2d5b8;
  --ink:          #2c241d;
  --ink-soft:     #6a5b49;
  --ink-faint:    #9b8b74;
  --rule:         #cbb997;
  --rule-soft:    #ddd0b4;

  /* Aksen atlas anatomi */
  --arteri:       #a8321e;   /* merah — patologi, kerusakan, bahaya */
  --arteri-soft:  #c9563e;
  --arteri-wash:  #f0d9d2;
  --vena:         #1f4e5f;   /* indigo — struktur, anatomi, normal */
  --vena-soft:    #3b7a8c;
  --vena-wash:    #d6e4e7;
  --ochre:        #9a7524;   /* emas — sorotan, angka kunci */
  --ochre-wash:   #f0e3c2;

  /* Tipografi */
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono:  "IBM Plex Mono", "Consolas", "SFMono-Regular", monospace;

  /* Ukuran slide (fixed canvas, di-scale oleh JS) */
  --sw: 1920px;
  --sh: 1080px;

  /* Ritme */
  --pad-x: 132px;
  --pad-y: 84px;
}

/* --------------------------------------------------------------------------
   2. RESET & DASAR
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #241f19;
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Panggung: wadah slide yang di-scale.
   transform-origin di kiri-atas supaya kotak layout yang sudah dikecilkan JS
   sejajar tepat dengan hasil skala — kalau `center`, konten tergeser keluar. */
#stage {
  position: relative;
  width: var(--sw);
  height: var(--sh);
  transform-origin: top left;
  flex: none;
}

/* --------------------------------------------------------------------------
   3. SLIDE — kertas bertekstur
   -------------------------------------------------------------------------- */
.slide {
  position: absolute;
  inset: 0;
  width: var(--sw);
  height: var(--sh);
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image:
    /* serat kertas halus */
    repeating-linear-gradient(94deg,
      rgba(140,120,90,.030) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(3deg,
      rgba(140,120,90,.022) 0 1px, transparent 1px 6px),
    /* vignette lembut di tepi */
    radial-gradient(120% 110% at 50% 45%,
      rgba(255,252,242,.85) 0%, rgba(255,252,242,0) 55%,
      rgba(150,128,95,.14) 100%),
    /* bercak usia */
    radial-gradient(38% 30% at 88% 8%, rgba(176,150,105,.13), transparent 70%),
    radial-gradient(30% 26% at 6% 94%, rgba(176,150,105,.11), transparent 70%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease;
  overflow: hidden;
}
.slide.is-active { opacity: 1; visibility: visible; }

/* Bingkai tipis khas buku lama */
.slide::after {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.slide::before {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. KEPALA & KAKI SLIDE
   -------------------------------------------------------------------------- */
.slide-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 14px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.slide-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--rule);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arteri);
}
.eyebrow--vena { color: var(--vena); }
.eyebrow--ochre { color: var(--ochre); }

.head-num {
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.slide-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.slide-foot {
  flex: none;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.slide-foot .cite {
  max-width: 1250px;
  font-size: 16.5px;
}
.slide-foot .fol {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. JUDUL & TEKS
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; }

h1 {
  font-size: 96px;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h2 {
  font-size: 58px;
  letter-spacing: -.008em;
  text-wrap: balance;
}
h3 {
  font-size: 34px;
  color: var(--vena);
}
h4 {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre);
}

p { margin: 0; font-size: 26px; line-height: 1.52; }

.lead { font-size: 31px; line-height: 1.46; color: var(--ink); }
.body-lg { font-size: 28px; line-height: 1.5; }
.muted { color: var(--ink-soft); }
.tiny { font-size: 19px; line-height: 1.45; color: var(--ink-soft); }

em { font-style: italic; }
strong { font-weight: 600; }
.arteri { color: var(--arteri); }
.vena   { color: var(--vena); }
.ochre  { color: var(--ochre); }

/* Huruf kapital kecil untuk istilah asing */
.sc {
  font-variant: small-caps;
  letter-spacing: .04em;
}

/* Istilah teknis */
.term {
  font-family: var(--mono);
  font-size: .82em;
  font-weight: 500;
  color: var(--vena);
  letter-spacing: -.01em;
}

/* Yunani */
.grk {
  font-style: italic;
  color: var(--ochre);
  font-size: 1.02em;
}

/* --------------------------------------------------------------------------
   6. GRID & KOLOM
   -------------------------------------------------------------------------- */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: start; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; align-items: start; }
.cols-2a { display: grid; grid-template-columns: 1.35fr 1fr; gap: 46px; align-items: start; }
.cols-2b { display: grid; grid-template-columns: 1fr 1.35fr; gap: 46px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-s { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 18px; }
.wrap { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   7. KARTU & PANEL
   -------------------------------------------------------------------------- */
.card {
  background: rgba(255,253,247,.72);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 26px 28px;
  position: relative;
}
.card--vena   { border-left: 5px solid var(--vena);   background: var(--vena-wash); }
.card--arteri { border-left: 5px solid var(--arteri); background: var(--arteri-wash); }
.card--ochre  { border-left: 5px solid var(--ochre);  background: var(--ochre-wash); }

/* Kotak deep dive — untuk audiens yang mau lebih dalam */
.deep {
  border: 1px dashed var(--ochre);
  background: rgba(240,227,194,.5);
  border-radius: 2px;
  padding: 16px 20px;
  position: relative;
}
.deep::before {
  content: "↳ DEEP DIVE";
  position: absolute;
  top: -11px; left: 18px;
  background: var(--paper);
  padding: 0 9px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ochre);
}
.deep p, .deep li { font-size: 20px; line-height: 1.44; }
.deep h3 { font-size: 23px; color: var(--ochre); margin-bottom: 6px; }

/* Kutipan */
blockquote {
  margin: 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--rule);
  font-style: italic;
  font-size: 25px;
  line-height: 1.48;
  color: var(--ink-soft);
}
blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* Angka kunci */
.num {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--arteri);
  font-size: 1.02em;
  letter-spacing: -.02em;
}
.num--vena  { color: var(--vena); }
.num--ochre { color: var(--ochre); }

/* Chip / label kecil */
.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.chip--arteri { color: var(--arteri); }
.chip--vena   { color: var(--vena); }
.chip--ochre  { color: var(--ochre); }
.chip--faint  { color: var(--ink-faint); }

/* Daftar */
ul, ol { margin: 0; padding-left: 30px; }
li { font-size: 25px; line-height: 1.5; margin-bottom: 11px; }
li:last-child { margin-bottom: 0; }
ul.plain { list-style: none; padding-left: 0; }
ul.plain > li {
  padding-left: 26px;
  position: relative;
}
ul.plain > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rule);
}
ol.tight li { margin-bottom: 7px; }

/* --------------------------------------------------------------------------
   8. TABEL
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 22px;
  line-height: 1.36;
}
th {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  vertical-align: bottom;
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
tbody tr:nth-child(even) { background: rgba(226,213,184,.32); }
td.mono, th.mono { font-family: var(--mono); font-size: 19px; letter-spacing: -.01em; }
td.ok  { color: var(--vena); font-weight: 600; }
td.no  { color: var(--arteri); font-weight: 600; }

/* --------------------------------------------------------------------------
   9. GAMBAR / PLATE
   -------------------------------------------------------------------------- */
.plate {
  border: 1px solid var(--rule);
  background: rgba(255,253,247,.6);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
/* Gambar dibatasi DUA sumbu sekaligus: lebar maksimum 100% dan tinggi maksimum
   --plate-h. Dengan width/height auto, browser memilih batas yang mengikat dan
   tetap menjaga rasio asli — jadi tidak ada distorsi dan tidak ada luber.
   Diagram lebar (mis. 1,8:1) akan dibatasi tingginya, yang sempit dibatasi
   lebarnya; keduanya dipusatkan. */
.plate svg,
.plate img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--plate-h, 400px);
  margin: 0 auto;
}
.plate figcaption {
  font-family: var(--mono);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: .01em;
  flex: none;
}
.plate figcaption b { color: var(--ochre); letter-spacing: .1em; }

/* Varian tinggi gambar — dibangkitkan untuk tiap 10px supaya kelas yang
   dipakai di slide selalu punya aturannya. */
.plate--h120 { --plate-h: 120px; }
.plate--h130 { --plate-h: 130px; }
.plate--h140 { --plate-h: 140px; }
.plate--h150 { --plate-h: 150px; }
.plate--h160 { --plate-h: 160px; }
.plate--h170 { --plate-h: 170px; }
.plate--h180 { --plate-h: 180px; }
.plate--h190 { --plate-h: 190px; }
.plate--h200 { --plate-h: 200px; }
.plate--h210 { --plate-h: 210px; }
.plate--h220 { --plate-h: 220px; }
.plate--h230 { --plate-h: 230px; }
.plate--h240 { --plate-h: 240px; }
.plate--h250 { --plate-h: 250px; }
.plate--h260 { --plate-h: 260px; }
.plate--h270 { --plate-h: 270px; }
.plate--h280 { --plate-h: 280px; }
.plate--h290 { --plate-h: 290px; }
.plate--h300 { --plate-h: 300px; }
.plate--h310 { --plate-h: 310px; }
.plate--h320 { --plate-h: 320px; }
.plate--h330 { --plate-h: 330px; }
.plate--h340 { --plate-h: 340px; }
.plate--h350 { --plate-h: 350px; }
.plate--h360 { --plate-h: 360px; }
.plate--h370 { --plate-h: 370px; }
.plate--h380 { --plate-h: 380px; }
.plate--h390 { --plate-h: 390px; }
.plate--h400 { --plate-h: 400px; }
.plate--h410 { --plate-h: 410px; }
.plate--h420 { --plate-h: 420px; }
.plate--h430 { --plate-h: 430px; }
.plate--h440 { --plate-h: 440px; }
.plate--h450 { --plate-h: 450px; }
.plate--h460 { --plate-h: 460px; }
.plate--h470 { --plate-h: 470px; }
.plate--h480 { --plate-h: 480px; }

/* --------------------------------------------------------------------------
   10. DIAGRAM MORFEM (etimologi)
   -------------------------------------------------------------------------- */
.morfem {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
}
.morfem > div {
  padding: 26px 24px;
  border-right: 1px solid var(--rule);
  background: rgba(255,253,247,.6);
}
.morfem > div:last-child { border-right: none; }
.morfem .mf-word {
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 12px;
}
.morfem .mf-src {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.morfem .mf-mean { font-size: 24px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   11. ALUR / MEKANISME (rantai A → B → C)
   -------------------------------------------------------------------------- */
.chain { display: flex; flex-direction: column; gap: 0; }
.chain-step {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px dotted var(--rule);
}
.chain-step:last-child { border-bottom: none; }
.chain-step .n {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--paper);
  background: var(--vena);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-top: 2px;
}
.chain-step.hot .n { background: var(--arteri); }
.chain-step .t { font-size: 25px; line-height: 1.44; }
.chain-step .t b { font-weight: 600; }

/* --------------------------------------------------------------------------
   12. SLIDE JUDUL (cover)
   -------------------------------------------------------------------------- */
.cover {
  background-color: #efe4cc;
  background-image:
    repeating-linear-gradient(94deg, rgba(140,120,90,.032) 0 1px, transparent 1px 4px),
    radial-gradient(100% 90% at 50% 40%, rgba(255,252,242,.9), transparent 60%),
    radial-gradient(50% 44% at 92% 92%, rgba(168,50,30,.10), transparent 72%),
    radial-gradient(46% 40% at 8% 6%, rgba(31,78,95,.11), transparent 70%);
}
.cover-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover h1 { font-size: 118px; line-height: 1.02; }
.cover .sub {
  font-size: 34px;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 1150px;
  line-height: 1.42;
}

/* Aturan hias ganda */
.rule-double {
  height: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-top: 3px;
}

/* Ornamen pemisah */
.orn {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rule);
}
.orn::before, .orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   13. KARTU KASUS (vignette klinis)
   -------------------------------------------------------------------------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.case-cell {
  background: rgba(255,253,247,.78);
  padding: 22px 26px;
}
.case-cell .k {
  font-family: var(--mono);
  font-size: 15.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.case-cell .v { font-size: 26px; line-height: 1.36; }
.case-cell .v strong { color: var(--arteri); }

/* --------------------------------------------------------------------------
   14. DAFTAR PUSTAKA
   -------------------------------------------------------------------------- */
.refs { column-count: 2; column-gap: 48px; font-size: 17px; line-height: 1.38; }
.refs .ref {
  break-inside: avoid;
  padding-left: 30px;
  text-indent: -30px;
  margin-bottom: 10px;
  color: var(--ink);
}
.refs .ref .r-n {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--arteri);
}

/* --------------------------------------------------------------------------
   15. KONTROL NAVIGASI (chrome UI, bukan bagian slide)
   -------------------------------------------------------------------------- */
#chrome {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: rgba(36,31,25,.9);
  border: 1px solid rgba(203,185,151,.35);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 14px;
  color: #e8ddc6;
  opacity: .45;
  transition: opacity .28s ease;
  backdrop-filter: blur(6px);
}
#chrome:hover, #chrome:focus-within { opacity: 1; }
#chrome button {
  all: unset;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 2px;
  color: #e8ddc6;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
  transition: background .16s, color .16s;
}
#chrome button:hover { background: rgba(203,185,151,.22); }
#chrome button:focus-visible { outline: 2px solid #cbb997; outline-offset: 1px; }
#chrome .sep { width: 1px; height: 20px; background: rgba(203,185,151,.3); margin: 0 5px; }
#chrome .count { padding: 0 8px; letter-spacing: .1em; white-space: nowrap; }
#chrome .count b { color: #fff; font-weight: 600; }

/* Bilah kemajuan */
#progress {
  position: fixed;
  z-index: 41;
  left: 0; top: 0;
  height: 3px;
  width: 0;
  background: var(--arteri);
  transition: width .3s ease;
}

/* Petunjuk keyboard */
#hint {
  position: fixed;
  z-index: 39;
  right: 18px; bottom: 20px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(232,221,198,.5);
  text-align: right;
  line-height: 1.6;
  pointer-events: none;
  transition: opacity .4s;
}
#hint kbd {
  font-family: var(--mono);
  border: 1px solid rgba(232,221,198,.35);
  border-radius: 2px;
  padding: 0 4px;
}

/* Grid ikhtisar */
body.overview #stage { transform: none !important; }
body.overview {
  overflow: auto;
  display: block;
  padding: 30px;
}
body.overview .slide {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: scale(.235);
  transform-origin: top left;
  margin: 0 0 -826px 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.5);
  cursor: pointer;
}
body.overview .slide.is-active { outline: 4px solid var(--arteri); }
body.overview #chrome { position: fixed; }

/* --------------------------------------------------------------------------
   16. CETAK
   -------------------------------------------------------------------------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { background: #fff; overflow: visible; display: block; height: auto; }
  #stage { transform: none !important; width: auto; height: auto; }
  #chrome, #hint, #progress { display: none !important; }
  .slide {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    break-after: page;
    page-break-after: always;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .slide::after, .slide::before { display: none; }
}

/* --------------------------------------------------------------------------
   17. GERAK TERBATAS
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  #progress { transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Animasi masuk elemen saat slide aktif */
.slide.is-active .anim {
  animation: rise .5s cubic-bezier(.22,.61,.36,1) both;
}
.slide.is-active .anim:nth-child(2) { animation-delay: .05s; }
.slide.is-active .anim:nth-child(3) { animation-delay: .1s; }
.slide.is-active .anim:nth-child(4) { animation-delay: .15s; }
.slide.is-active .anim:nth-child(5) { animation-delay: .2s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(11px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .anim { animation: none; }
}