/* STK Khotbah: gaya */

/* ---------- Variabel (ubah di sini) ---------- */
.stk-khotbah,
body.stk-page {
  --stk-accent: #b8860b;
  --stk-line: rgba(127, 127, 127, .28);
  --stk-soft: rgba(127, 127, 127, .08);
  --stk-note-bg: #fff6cf;
  --stk-note-fg: #4a3b00;
  --stk-note-line: #e0b100;
  /* Rata teks pada layar slide */
  --stk-sub-align: left;
  --stk-isi-align: left;
  --stk-sub-color: #fff59d; /* kuning muda (light yellow) untuk sub judul pada layar slide; lebih pucat: #fffacd */
  --stk-subsub-color: #fff59d; /* sub-sub judul; atur dengan [khotbah subsubcolor="..."] */
  --stk-author-color: #cbd5e1; /* nama pengkhotbah; atur dengan [khotbah authorcolor="..."] */
  --stk-author-size: 3vmin; /* nama pengkhotbah di sudut kanan bawah tiap slide */
  --stk-cover-font-max: 16vmin; /* judul cover (superbesar; diperkecil otomatis bila terlalu panjang) */
  --stk-akhir-font-max: 16vmin; /* teks slide penutup */
  /* Ayat pada layar slide: rata tengah; posisi vertikal selalu di atas (alur normal dari atas) */
  --stk-ayat-align: center;
  /* Ukuran huruf maksimum layar slide (extra-large). Teks panjang otomatis diperkecil hingga muat. */
  --stk-font-max: 14vmin;
}

/* ---------- Naskah (pos biasa dan remote) ---------- */
.stk-khotbah { max-width: 780px; margin: 0 auto; line-height: 1.65; }
.stk-khotbah p { margin: .6em 0; }

.stk-tools { display: flex; gap: 8px; margin: 0 0 .8em; flex-wrap: wrap; }
.stk-tools button {
  appearance: none; border: 1px solid var(--stk-line); background: var(--stk-soft);
  color: inherit; border-radius: 8px; padding: .45em .9em; font-size: .9em; cursor: pointer;
}

.stk-acc { margin: .6em 0; border: 1px solid var(--stk-line); border-radius: 10px; background: var(--stk-soft); }
.stk-acc > summary {
  cursor: pointer; list-style: none; padding: .7em .9em; font-weight: 700;
  display: flex; gap: .55em; align-items: baseline;
}
.stk-acc > summary::-webkit-details-marker { display: none; }
.stk-acc > summary::before { content: "\25B8"; color: var(--stk-accent); transition: transform .15s; flex: 0 0 auto; }
.stk-acc[open] > summary::before { transform: rotate(90deg); }
.stk-acc > .stk-body { padding: 0 .9em .8em; }
.stk-acc-1 > summary { font-size: 1.1em; }
.stk-acc-2 { background: transparent; margin: .7em 0; }
.stk-acc-2 > summary { font-weight: 600; font-size: 1em; }

.stk-no {
  flex: 0 0 auto; min-width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center;
  border-radius: 999px; background: var(--stk-accent); color: #fff; font-size: .8em;
}
.stk-sep { border-top: 1px dashed var(--stk-line); margin: .9em 0; }

.stk-ayat {
  margin: 1em 0; padding: .6em .9em; border: 0; border-left: 4px solid var(--stk-accent);
  background: var(--stk-soft); font-style: italic; border-radius: 6px;
}
.stk-ayat p { margin: .2em 0; }
.stk-ayat-ref { margin-top: .4em; font-style: normal; font-weight: 700; font-size: .9em; color: var(--stk-accent); }
.stk-ayat-ref::before { content: "\2014\00a0"; }

.stk-catatan {
  margin: .9em 0; padding: .6em .8em; border-left: 4px solid var(--stk-note-line);
  background: var(--stk-note-bg); color: var(--stk-note-fg); border-radius: 6px; font-size: .94em;
}
.stk-catatan-label { font-weight: 700; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2em; opacity: .8; }

/* ---------- Pos WordPress biasa (mode full): panel gelap berwarna-warni, huruf extra-large untuk HP ---------- */
.stk-khotbah.stk-mode-full {
  --stk-accent: #f5c451;
  --stk-line: rgba(255, 255, 255, .2);
  --stk-soft: rgba(255, 255, 255, .06);
  --stk-note-bg: #3a3210; --stk-note-fg: #f5e9b5; --stk-note-line: #e0b100;
  --stk-full-font: clamp(32px, 10vw, 60px); /* HP: sangat besar; ubah di sini */
  max-width: 900px; margin: 1em auto; padding: 10px 8px 12px;
  background: #0f1f3a; color: #f8fafc; border-radius: 14px;
  font-size: var(--stk-full-font); line-height: 1.4; overflow-wrap: break-word;
}
@media (min-width: 700px) {
  .stk-khotbah.stk-mode-full { --stk-full-font: clamp(26px, 3.2vw, 40px); padding: 16px 18px 20px; }
}
/* Cegah tema mengecilkan atau mengubah warna teks naskah */
.stk-khotbah.stk-mode-full :is(p, li, blockquote) { font-size: inherit; line-height: inherit; color: inherit; }
.stk-khotbah.stk-mode-full a { color: #7dd3fc; }
.stk-khotbah.stk-mode-full ul, .stk-khotbah.stk-mode-full ol { margin: .4em 0; padding-left: 1.2em; }
.stk-khotbah.stk-mode-full .stk-tools button { font-size: max(16px, .45em); color: #f8fafc; }

/* Warna-warni: tiap slide mendapat warna aksen bergilir (lencana nomor, tepi, panah) */
.stk-mode-full .stk-slide { --c: #f5c451; }
.stk-mode-full .stk-slide:nth-of-type(6n+2) { --c: #7dd3fc; }
.stk-mode-full .stk-slide:nth-of-type(6n+3) { --c: #86efac; }
.stk-mode-full .stk-slide:nth-of-type(6n+4) { --c: #f9a8d4; }
.stk-mode-full .stk-slide:nth-of-type(6n+5) { --c: #fdba74; }
.stk-mode-full .stk-slide:nth-of-type(6n+6) { --c: #c4b5fd; }

.stk-mode-full .stk-acc { background: var(--stk-soft); border-color: var(--stk-line); }
.stk-mode-full .stk-acc-1 { border-left: .14em solid var(--c); }
.stk-mode-full .stk-acc > summary::before { color: var(--c); }
.stk-mode-full .stk-no { background: var(--c); color: #0f1f3a; }
/* Sub judul dan sub-sub judul memakai warna dari [khotbah subcolor="..." subsubcolor="..."] */
.stk-mode-full .stk-acc-1 > summary { color: var(--stk-sub-color, #fff59d); }
.stk-mode-full .stk-acc-2 { background: transparent; border: 0; border-left: .1em solid var(--c); border-radius: 0 10px 10px 0; margin: .6em 0 .6em .2em; }
.stk-mode-full .stk-subsub { color: var(--stk-subsub-color, #fff59d); font-weight: 600; }
.stk-mode-full .stk-subsub-solo { padding: .3em .6em .3em .9em; border-left: .1em solid var(--c); margin: .6em 0 .6em .2em; }
.stk-mode-full .stk-catatan { font-size: 1em; border-left-width: .12em; }
/* Jarak dalam dibuat rapat: dengan huruf sebesar ini, jarak berbasis em akan memakan lebar layar HP */
.stk-khotbah.stk-mode-full .stk-tools { margin-bottom: 10px; }
.stk-mode-full .stk-acc { margin: .35em 0; }
.stk-mode-full .stk-acc > summary { padding: .4em .35em; gap: .3em; align-items: center; }
.stk-mode-full .stk-acc > summary::before { font-size: .7em; }
.stk-mode-full .stk-acc > .stk-body { padding: 0 .3em .4em; }
.stk-mode-full .stk-acc-2 { margin: .35em 0 .35em .1em; }
.stk-mode-full .stk-acc-2 > .stk-body { padding: 0 0 .3em .15em; }
.stk-mode-full .stk-sub-teks { min-width: 0; overflow-wrap: anywhere; }
.stk-mode-full .stk-acc-2 > summary { overflow-wrap: anywhere; }
.stk-mode-full .stk-no { font-size: .55em; }
.stk-mode-full .stk-catatan { margin: .4em 0; padding: .3em .45em; }
.stk-mode-full .stk-subsub-solo { padding: .25em .35em .25em .5em; overflow-wrap: anywhere; }
/* Slide tanpa catatan: hanya judul (tanpa panah) */
.stk-mode-full .stk-acc-empty > summary { cursor: default; }
.stk-mode-full .stk-acc-empty > summary::before { content: none; }

/* ---------- Cover dan penutup (pratinjau pada remote) ---------- */
.stk-cover-in, .stk-akhir-in { text-align: center; }
.stk-cover-judul { margin: .2em 0; font-size: 1.25em; font-weight: 700; line-height: 1.2; }
.stk-cover-author { font-size: .7em; opacity: .8; }
.stk-akhir-in { font-weight: 700; }

/* ---------- Halaman bertoken: dasar ---------- */
body.stk-page { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.stk-judul { text-align: center; font-weight: 700; }

.stk-dot { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; display: inline-block; flex: 0 0 auto; }
.stk-dot.ok { background: #22c55e; }
.stk-dot.err { background: #ef4444; }

/* ---------- Remote ---------- */
body.stk-mode-remote {
  background: #f6f7f9; color: #1f2937;
  padding-bottom: calc(250px + env(safe-area-inset-bottom));
}
body.stk-mode-remote .stk-judul { padding: 14px 12px 6px; font-size: clamp(24px, 6.5vw, 44px); line-height: 1.2; }
/* Ruang kosong di akhir naskah agar slide-slide terakhir tetap dapat mencapai garis baca saat digulir */
body.stk-mode-remote .stk-stage { padding: 6px 12px 70vh; }
body.stk-mode-remote .stk-khotbah { font-size: clamp(30px, 9vw, 56px); line-height: 1.45; }
body.stk-mode-remote .stk-acc { background: #fff; }
body.stk-mode-remote .stk-slide.is-active > .stk-acc { border-color: var(--stk-accent); }
body.stk-mode-remote .stk-screen.is-active {
  box-shadow: inset 4px 0 0 var(--stk-accent); padding-left: .5em; margin-left: -.5em;
}

/* Bilah kendali: HP = 3 baris (Sebelumnya, Sesudahnya, kendali lain), tombol selebar layar */
.stk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #111827; color: #fff;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 8px;
}
.stk-bar button {
  appearance: none; border: 0; border-radius: 12px; min-height: 44px; padding: 0 12px;
  font-size: 1rem; font-weight: 600; background: #374151; color: #fff;
}
.stk-bar .stk-nav { width: 100%; min-height: 64px; font-size: 1.35rem; }
.stk-bar button.stk-primary { background: var(--stk-accent); }
.stk-bar button[aria-pressed="true"] { background: #9b1c1c; }
.stk-bar-row { display: flex; gap: 8px; align-items: center; }
.stk-bar-sub button { flex: 1 1 0; min-height: 44px; font-size: .9rem; }
.stk-bar-sub #stk-reset, .stk-bar-sub #stk-hide { flex: 0 0 48px; }
.stk-bar #stk-count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Tombol disembunyikan (mode gulir): bilah hilang, tersisa pil kecil berisi status + ketuk untuk menampilkan */
.stk-mini {
  display: none; position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
  align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(17, 24, 39, .88); color: #fff; font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.stk-mini.stk-locked { background: rgba(155, 28, 28, .92); } /* gulir tidak menggerakkan layar (Terkunci) */
body.stk-bar-hidden .stk-bar { display: none; }
body.stk-bar-hidden .stk-mini { display: flex; }
body.stk-mode-remote.stk-bar-hidden { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* Layar lebar (tablet/desktop): Sebelumnya dan Sesudahnya berdampingan */
@media (min-width: 700px) {
  .stk-bar { flex-direction: row; flex-wrap: wrap; }
  .stk-bar .stk-nav { flex: 1 1 40%; width: auto; }
  .stk-bar-sub { flex: 1 1 100%; }
  body.stk-mode-remote { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
}

@media (prefers-color-scheme: dark) {
  body.stk-mode-remote { background: #0f1722; color: #e5e7eb; }
  body.stk-mode-remote .stk-acc { background: #162133; }
  body.stk-mode-remote .stk-khotbah { --stk-note-bg: #3a3210; --stk-note-fg: #f5e9b5; }
}

/* ---------- Layar slide (proyektor/jemaat) ---------- */
body.stk-mode-display {
  --stk-accent: #f5c451;
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  background: #0f1f3a; color: #f8fafc; font-family: Georgia, "Times New Roman", serif;
}
body.stk-mode-display .stk-judul {
  flex: 0 0 auto; font-size: clamp(26px, 7.5vmin, 120px); line-height: 1.15; padding: 2vmin 5vmin;
  border-bottom: 1px solid rgba(255, 255, 255, .18); color: var(--stk-accent);
}
body.stk-mode-display .stk-stage { flex: 1 1 auto; min-height: 0; position: relative; }
body.stk-mode-display .stk-khotbah { max-width: none; margin: 0; --stk-accent: #f5c451; }

body.stk-mode-display .stk-screen {
  display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; box-sizing: border-box;
  padding: 3vmin 6vmin; overflow: hidden; font-size: var(--stk-font-max, 14vmin); line-height: 1.3;
}
body.stk-mode-display .stk-screen.is-active { display: block; }
body.stk-mode-display .stk-screen.measure { display: block; visibility: hidden; }

/* Perataan DIPAKSA (!important): sub judul kiri + kuning terang, isi kiri, ayat tengah */
body.stk-mode-display .stk-subjudul {
  text-align: var(--stk-sub-align, left) !important; color: var(--stk-sub-color, #fff59d) !important;
  font-size: 1.25em; font-weight: 700; margin: 0 0 .5em;
}
body.stk-mode-display .stk-isi { text-align: var(--stk-isi-align, left) !important; }
body.stk-mode-display .stk-isi p { margin: .45em 0; }
body.stk-mode-display .stk-isi ul,
body.stk-mode-display .stk-isi ol { list-style-position: outside; padding: 0 0 0 1.3em; margin: .4em 0; }
body.stk-mode-display .stk-isi li { margin: .25em 0; }
body.stk-mode-display .stk-subsub {
  text-align: var(--stk-sub-align, left) !important; color: var(--stk-subsub-color, #fff59d) !important;
  font-size: 1em; font-weight: 700; margin: .6em 0 .3em;
}

/* ---- Cover (awal) dan penutup (akhir): layar penuh, di atas judul, teks superbesar, rata tengah ---- */
body.stk-mode-display .stk-screen.stk-cover,
body.stk-mode-display .stk-screen.stk-akhir {
  position: fixed; z-index: 20; background: #0f1f3a; padding: 6vmin 8vmin;
  flex-direction: column; text-align: center; line-height: 1.15;
}
body.stk-mode-display .stk-screen.stk-cover { font-size: var(--stk-cover-font-max, 16vmin); }
body.stk-mode-display .stk-screen.stk-akhir { font-size: var(--stk-akhir-font-max, 16vmin); }
body.stk-mode-display .stk-screen.stk-cover.is-active,
body.stk-mode-display .stk-screen.stk-cover.measure,
body.stk-mode-display .stk-screen.stk-akhir.is-active,
body.stk-mode-display .stk-screen.stk-akhir.measure { display: flex; }

/* margin:auto = rata tengah horizontal DAN vertikal (aman bila teks melebihi layar) */
body.stk-mode-display .stk-cover-in,
body.stk-mode-display .stk-akhir-in { margin: auto; max-width: 100%; text-align: center !important; overflow-wrap: break-word; }
body.stk-mode-display .stk-cover-judul {
  margin: 0; font-size: 1em; font-weight: 700; line-height: 1.15; color: var(--stk-accent); text-wrap: balance;
}
body.stk-mode-display .stk-cover-author {
  margin-top: .55em; font-size: .3em; font-weight: 400; line-height: 1.25; color: var(--stk-author-color, #cbd5e1);
}
body.stk-mode-display .stk-akhir-in { font-weight: 700; color: #f8fafc; }
body.stk-mode-display .stk-akhir-in p { margin: .2em 0; text-align: center !important; }
body.stk-mode-display .stk-akhir-in ul,
body.stk-mode-display .stk-akhir-in ol { display: inline-block; text-align: left !important; }

/* Cover memudar keluar saat pindah ke slide pertama */
@keyframes stkCoverOut { from { opacity: 1; } to { opacity: 0; } }
body.stk-mode-display .stk-screen.is-leaving {
  display: flex; pointer-events: none; animation: stkCoverOut 1.1s ease forwards;
}
/* Isi slide yang muncul setelah cover menunggu cover hampir hilang */
body.stk-from-cover { --stk-base: .75s; }

/* Nama pengkhotbah: kecil, sudut kanan bawah tiap slide (bukan cover/penutup) */
body.stk-mode-display .stk-author {
  position: absolute; right: max(6vmin, 56px); bottom: 1.6vmin; max-width: 60%;
  font-size: var(--stk-author-size, 3vmin); line-height: 1.2; font-style: italic; text-align: right !important;
  color: var(--stk-author-color, #cbd5e1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.stk-mode-display .stk-khotbah.stk-has-author .stk-screen:not(.stk-cover):not(.stk-akhir) {
  padding-bottom: calc(1.6vmin + var(--stk-author-size, 3vmin) * 1.2 + 1.5vmin);
}

/* Daftar tampil satu per satu (tombol Sesudahnya): butir yang belum tampil disembunyikan tetapi tetap memakai ruang */
body.stk-mode-display .stk-screen.stk-steps li:not(.stk-on) { visibility: hidden; }
body.stk-mode-remote .stk-screen.stk-steps.is-active li:not(.stk-on) { opacity: .35; }

/* [ayat]: ukuran huruf SAMA dengan isi, rata tengah (horizontal), menempel di atas (vertikal) */
body.stk-mode-display .stk-ayat {
  border: 0; border-top: 3px solid var(--stk-accent); background: rgba(255, 255, 255, .07);
  font-size: 1em; font-style: italic; padding: .35em .6em .4em; margin: .4em 0 .6em;
}
body.stk-mode-display .stk-ayat,
body.stk-mode-display .stk-ayat * { text-align: var(--stk-ayat-align, center) !important; }
body.stk-mode-display .stk-ayat p { margin: 0 0 .25em; }
body.stk-mode-display .stk-ayat-ref { font-size: 1em; font-style: normal; font-weight: 700; margin-top: .15em; color: var(--stk-accent); }

body.stk-mode-display .stk-dot { position: fixed; left: 10px; bottom: 10px; opacity: .7; z-index: 30; }
body.stk-mode-display .stk-fs {
  position: fixed; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 10px; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.2rem; opacity: .25; cursor: pointer; z-index: 30;
}
body.stk-mode-display .stk-fs:hover { opacity: 1; }

/* ---------- Efek masuk isi slide (kecuali sub judul), seperti PowerPoint ---------- */
@keyframes stkFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stkRise { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }

/* Setiap blok isi (paragraf, daftar, ayat) masuk berurutan. Sub judul dan sub-sub judul tidak beranimasi. */
body.stk-mode-display .stk-khotbah[data-efek="rise"] .stk-screen.is-active .stk-isi > *:not(.stk-subsub-wrap),
body.stk-mode-display .stk-khotbah[data-efek="rise"] .stk-screen.is-active .stk-subsub-wrap > *:not(.stk-subsub) {
  animation: stkRise .7s ease both;
}
body.stk-mode-display .stk-khotbah[data-efek="fade"] .stk-screen.is-active .stk-isi > *:not(.stk-subsub-wrap),
body.stk-mode-display .stk-khotbah[data-efek="fade"] .stk-screen.is-active .stk-subsub-wrap > *:not(.stk-subsub) {
  animation: stkFadeIn .8s ease both;
}
/* --stk-base = jeda awal (0 normal; bertambah sebentar saat cover sedang memudar keluar) */
body.stk-mode-display .stk-screen.is-active .stk-isi > *:nth-child(1) { animation-delay: var(--stk-base, 0s) !important; }
body.stk-mode-display .stk-screen.is-active .stk-isi > *:nth-child(2) { animation-delay: calc(var(--stk-base, 0s) + .15s) !important; }
body.stk-mode-display .stk-screen.is-active .stk-isi > *:nth-child(3) { animation-delay: calc(var(--stk-base, 0s) + .30s) !important; }
body.stk-mode-display .stk-screen.is-active .stk-isi > *:nth-child(4) { animation-delay: calc(var(--stk-base, 0s) + .45s) !important; }
body.stk-mode-display .stk-screen.is-active .stk-isi > *:nth-child(5) { animation-delay: calc(var(--stk-base, 0s) + .60s) !important; }
body.stk-mode-display .stk-screen.is-active .stk-isi > *:nth-child(n+6) { animation-delay: calc(var(--stk-base, 0s) + .75s) !important; }

/* Butir daftar yang baru ditampilkan (tombol Sesudahnya) juga masuk dengan efek yang sama */
body.stk-mode-display .stk-khotbah[data-efek="rise"] .stk-screen.stk-steps li.stk-on { animation: stkRise .5s ease both; }
body.stk-mode-display .stk-khotbah[data-efek="fade"] .stk-screen.stk-steps li.stk-on { animation: stkFadeIn .6s ease both; }

/* Saat mengukur ukuran huruf, animasi dimatikan agar tidak memengaruhi pengukuran */
body.stk-measuring .stk-screen *, body.stk-measuring .stk-screen { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.stk-mode-display .stk-screen *, body.stk-mode-display .stk-screen { animation: none !important; }
  body.stk-mode-display .stk-screen.is-leaving { display: none !important; } /* tanpa animasi: cover langsung hilang */
}

.stk-kosong { opacity: .75; font-style: italic; }

/* ---------- Isi kaya (gambar, tabel) dan elemen tambahan cover ---------- */
.stk-khotbah img { max-width: 100%; height: auto; }
.stk-khotbah table.stk-tabel, .stk-khotbah .stk-isi-teks table { border-collapse: collapse; margin: .5em 0; max-width: 100%; }
.stk-khotbah table.stk-tabel th, .stk-khotbah table.stk-tabel td { border: 1px solid var(--stk-line, #cfd6df); padding: .25em .5em; vertical-align: top; }
.stk-khotbah table.stk-tabel th { background: rgba(127, 127, 127, .15); }
.stk-cover-sub { font-size: .7em; opacity: .9; }
.stk-cover-ayat { margin-top: .5em; }
.stk-cover-ayat-teks { font-style: italic; }
.stk-cover-ayat-ref { font-weight: 700; margin-top: .2em; }

body.stk-mode-display .stk-isi img, body.stk-mode-display .stk-subsub-wrap img {
  display: block; max-width: 100%; max-height: 50vh; width: auto; height: auto; object-fit: contain; margin: .25em auto;
}
body.stk-mode-display .stk-isi table.stk-tabel { width: 100%; font-size: .8em; }
body.stk-mode-display .stk-isi table.stk-tabel th, body.stk-mode-display .stk-isi table.stk-tabel td { border: .06em solid rgba(255, 255, 255, .55); }
body.stk-mode-display .stk-cover-sub { margin-top: .35em; font-size: .38em; font-weight: 400; color: #f1f5f9; line-height: 1.25; }
body.stk-mode-display .stk-cover-ayat { margin: .8em auto 0; max-width: 85%; font-size: .26em; line-height: 1.35; color: #e2e8f0; font-weight: 400; }
body.stk-mode-display .stk-cover-ayat-ref { color: var(--stk-accent); font-style: normal; }

/* Pos WordPress biasa: tema/ayat di atas panel dan isi slide sebagai bahan bacaan */
.stk-mode-full .stk-tema { margin: 0 0 .6em; text-align: center; }
.stk-mode-full .stk-tema-sub { font-size: .9em; opacity: .9; margin-bottom: .3em; }
.stk-mode-full .stk-tema .stk-ayat { font-size: .8em; margin: .3em 0; }
.stk-mode-full .stk-isi-teks { margin: .3em 0; }
.stk-mode-full .stk-isi-teks img { display: block; margin: .3em auto; }
.stk-mode-full table.stk-tabel { width: 100%; font-size: .85em; }
.stk-mode-full table.stk-tabel th, .stk-mode-full table.stk-tabel td { border-color: rgba(255, 255, 255, .45); }

/* ---------- Diagram dari daftar: linimasa, siklus, tangga ----------
   Layar slide: digambar. Remote dan pos biasa: daftar teks (lebih mudah dibaca di HP).
   Tiap butir adalah <li>, sehingga ikut mekanisme tampil bertahap. */
.stk-dg { margin: .5em 0; }
.stk-dg-list { list-style: none; margin: 0; padding: 0; }
.stk-dg-judul { font-weight: 700; margin: 0 0 .25em; font-size: .8em; }
.stk-dg-linimasa .stk-dg-judul::before { content: "Linimasa: "; font-weight: 400; opacity: .7; }
.stk-dg-siklus .stk-dg-judul::before { content: "Siklus: "; font-weight: 400; opacity: .7; }
.stk-dg-tangga .stk-dg-judul::before { content: "Tangga: "; font-weight: 400; opacity: .7; }
.stk-dg-axis, .stk-dg-ring, .stk-dg-dot, .stk-dg-arrow, .stk-dg-step, .stk-dg-num { display: none; }
.stk-dg-center { font-style: italic; opacity: .85; margin: 0 0 .25em; }
.stk-dg-center::before { content: "Pusat: "; font-style: normal; opacity: .7; }
.stk-dg-siklus .stk-dg-list, .stk-dg-tangga .stk-dg-list { list-style: decimal; padding-left: 1.4em; }
.stk-dg-linimasa .stk-dg-item { margin: .25em 0; padding: .1em .5em; border-left: .25em solid var(--c, #c8a200); }
.stk-dg-siklus .stk-dg-item, .stk-dg-tangga .stk-dg-item { margin: .25em 0; }
.stk-dg-siklus .stk-dg-item::marker, .stk-dg-tangga .stk-dg-item::marker { color: var(--c, #c8a200); font-weight: 700; }

/* --- Layar slide: gambar --- */
body.stk-mode-display .stk-isi .stk-dg-list { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
body.stk-mode-display .stk-isi .stk-dg-item {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; pointer-events: none; text-align: center !important; list-style: none;
}
body.stk-mode-display .stk-dg-judul { text-align: center; font-size: clamp(18px, 4.4vmin, 64px); margin: 0 0 .3em; }
body.stk-mode-display .stk-dg-judul::before { content: none; }
body.stk-mode-display .stk-dg-judul:empty { display: none; }
body.stk-mode-display .stk-dg-center::before { content: none; }
body.stk-mode-display .stk-dg-stage {
  position: relative; height: 46vh; font-size: clamp(14px, 3.1vmin, 48px); line-height: 1.2; text-align: center;
}
body.stk-mode-display .stk-dg-box { position: absolute; display: block; text-align: center !important; }
body.stk-mode-display .stk-dg-axis, body.stk-mode-display .stk-dg-ring, body.stk-mode-display .stk-dg-dot,
body.stk-mode-display .stk-dg-arrow, body.stk-mode-display .stk-dg-step { display: block; position: absolute; }
body.stk-mode-display .stk-dg-num { display: inline-flex; }

/* Linimasa: garis berpanah, titik dan kotak teks selang-seling di atas dan di bawah */
body.stk-mode-display .stk-dg-axis {
  left: 1%; right: 2%; top: 50%; height: .5vmin; min-height: 3px; background: rgba(255, 255, 255, .75); border-radius: 2px; transform: translateY(-50%);
}
body.stk-mode-display .stk-dg-axis::after {
  content: ""; position: absolute; right: -1.1vmin; top: 50%; transform: translateY(-50%);
  border-left: 1.4vmin solid rgba(255, 255, 255, .75); border-top: 1vmin solid transparent; border-bottom: 1vmin solid transparent;
}
body.stk-mode-display .stk-dg-linimasa .stk-dg-dot {
  left: var(--x); top: 50%; width: 2.4vmin; height: 2.4vmin; border-radius: 50%; background: var(--c); border: .45vmin solid #0f1f3a; transform: translate(-50%, -50%);
}
body.stk-mode-display .stk-dg-linimasa .stk-dg-item::before {
  content: ""; position: absolute; left: var(--x); width: .35vmin; height: 3.4vmin; background: var(--c); transform: translateX(-50%);
}
body.stk-mode-display .stk-dg-linimasa .stk-up::before { bottom: 50%; }
body.stk-mode-display .stk-dg-linimasa .stk-down::before { top: 50%; }
body.stk-mode-display .stk-dg-linimasa .stk-dg-box {
  left: var(--bx); width: var(--w); transform: translateX(-50%); padding: .35em .5em; border-radius: .5em;
  background: rgba(255, 255, 255, .1); border-top: .3em solid var(--c);
}
body.stk-mode-display .stk-dg-linimasa .stk-up .stk-dg-box { bottom: calc(50% + 3.4vmin); }
body.stk-mode-display .stk-dg-linimasa .stk-down .stk-dg-box { top: calc(50% + 3.4vmin); }

/* Siklus: lingkaran dengan anak panah searah jarum jam */
body.stk-mode-display .stk-dg-siklus .stk-dg-stage { width: min(94%, 84vh); height: auto; aspect-ratio: 8 / 5; margin: 0 auto; }
body.stk-mode-display .stk-dg-ring {
  left: 13%; top: 14%; width: 74%; height: 72%; border-radius: 50%; border: .8vmin solid rgba(255, 255, 255, .35); box-sizing: border-box;
}
body.stk-mode-display .stk-dg-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36%; margin: 0;
  font-weight: 700; font-size: 1.15em; font-style: normal; opacity: 1; color: var(--stk-accent);
}
body.stk-mode-display .stk-dg-siklus .stk-dg-box {
  left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%); padding: .35em .45em; border-radius: .6em;
  background: #18305a; border: .3vmin solid var(--c); box-sizing: border-box; font-size: .86em; overflow-wrap: anywhere;
}
body.stk-mode-display .stk-dg-num {
  width: 1.5em; height: 1.5em; align-items: center; justify-content: center; border-radius: 50%; background: var(--c); color: #0f1f3a;
  font-weight: 700; margin-right: .35em; font-size: .85em; vertical-align: middle;
}
body.stk-mode-display .stk-dg-arrow {
  left: var(--ax); top: var(--ay); width: 0; height: 0; border-left: 1.6vmin solid transparent; border-right: 1.6vmin solid transparent;
  border-bottom: 3vmin solid var(--c); transform: translate(-50%, -50%) rotate(var(--ar)); z-index: 2;
}

/* Tangga: anak tangga naik dari kiri ke kanan, teks di atas tiap anak tangga */
body.stk-mode-display .stk-dg-tangga .stk-dg-step {
  left: var(--l); width: var(--w); height: var(--h); bottom: 0; background: var(--c); border-radius: .4em .4em 0 0;
  border-left: .3vmin solid #0f1f3a; border-right: .3vmin solid #0f1f3a; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center; padding-top: .3em;
}
body.stk-mode-display .stk-dg-tangga .stk-dg-num { background: none; width: auto; height: auto; margin: 0; font-size: 1.4em; color: #0f1f3a; }
body.stk-mode-display .stk-dg-tangga .stk-dg-box { left: var(--l); width: var(--w); bottom: calc(var(--h) + 1vmin); padding: 0 .2em; box-sizing: border-box; }
body.stk-mode-display .stk-dg-linimasa .stk-dg-stage { height: 36vh; }