/* Pemutar misi dan pemain adegan: cutscene, pre-test, NPC, flip-book, sorting, business mapping, word search, studi kasus, review aset, dunia 3D. */

/* ------------------------------------------------------------ pemutar */

.pm { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--kertas); animation: tampil .2s ease-out; }
.pm-kepala {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--permukaan);
}
.pm-tutup { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--permukaan-2); font-size: 16.5px; color: var(--tinta-2); cursor: pointer; }
.pm-kepala-teks { min-width: 0; }
.pm-label { font-size: 11px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; }
.pm-judul { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-kepala-kanan { display: flex; align-items: center; gap: 8px; }
.pm-hitung { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; }
.pm-xp { font-size: 12px; font-weight: 600; color: #9a6a0c; background: #fdf1d8; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pm-segmen { display: flex; gap: 4px; padding: 0 12px 8px; background: var(--permukaan); border-bottom: 1px solid var(--garis); }
.pm-segmen span { flex: 1; height: 8px; border-radius: 999px; background: var(--permukaan-3); transition: background .3s; }
.pm-segmen span.lewat { background: var(--hijau, #1b9e6a); }
.pm-segmen span.kini { background: var(--emas); }
.pm-panggung { position: relative; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 520px) { .pm-hitung { display: none; } }

.pm-opsi {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 14px; min-height: 52px; border-radius: 14px; border: 2px solid var(--garis); border-bottom-width: 4px;
  background: var(--permukaan); font: inherit; font-size: 14.5px; line-height: 1.4; color: var(--tinta); cursor: pointer;
}
.pm-opsi:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.pm-opsi:disabled { cursor: default; }
.pm-opsi.dipilih { border-color: var(--utama); background: var(--utama-muda); }
.pm-opsi.cocok { border-color: #1b9e6a; background: #e3f4ec; color: #14573c; }
.pm-opsi.belum { border-color: #e2b2a6; background: #fbeee9; color: #7d4a3e; opacity: .8; }
.pm-opsi-huruf { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 2px solid var(--garis-kuat); font-size: 12px; font-weight: 600; color: var(--tinta-3); }
@media (hover: hover) { .pm-opsi:hover:not(:disabled) { border-color: var(--utama); } }

.pm-akhir { max-width: 560px; margin: 18px auto; padding: 22px 18px; border-radius: 22px; background: var(--permukaan); border: 1px solid var(--garis); text-align: center; display: flex; flex-direction: column; gap: 10px; animation: naik .3s ease-out; }
.pm-akhir-ikon { font-size: 48.5px; line-height: 1; animation: letup .55s cubic-bezier(.2, 1.6, .4, 1); }
.pm-akhir h2 { font-size: 20.5px; }
.pm-akhir p { color: var(--tinta-2); }
.pm-akhir .baris-tombol { justify-content: center; }

.pm-tuntas { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; text-align: center; background: radial-gradient(circle at 50% 20%, #fff7e3, var(--kertas) 60%); }
.pm-tuntas-ikon { font-size: 89.5px; line-height: 1; animation: letup .7s cubic-bezier(.2, 1.6, .4, 1); }
.pm-tuntas h2 { font-size: 30px; color: var(--utama-gelap); }
.pm-tuntas-sub { color: var(--tinta-2); max-width: 46ch; }
.pm-statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; width: 100%; max-width: 520px; margin: 10px 0; }
.pm-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: var(--permukaan); border: 2px solid var(--garis); border-bottom-width: 4px; }
.pm-stat span { font-size: 20.5px; }
.pm-stat b { font-size: 20.5px; font-weight: 600; }
.pm-stat small { font-size: 11px; color: var(--tinta-3); }
.pm-lanjut { width: 100%; max-width: 360px; }
.pm-lapis { position: absolute; inset: 0; z-index: 20; background: var(--kertas); overflow-y: auto; }

/* Wadah konten yang bisa digulir */
.pm-fb, .pm-sortir, .pm-rantai, .pm-ck, .pm-kanal, .pm-review, .pm-eko, .pm-npc { max-width: 1080px; margin: 0 auto; padding: 16px; }

/* ------------------------------------------------------------ cutscene */

.pm-cut { position: relative; height: 100%; min-height: 420px; overflow: hidden; background: #111; color: #fff; cursor: pointer; user-select: none; }
.pm-cut-gambar { position: absolute; inset: -4%; background: center / cover no-repeat; }
.pm-cut-gambar.gerak { animation: kenburns 9s ease-out forwards; }
.pm-cut-gambar.tanpa { background: radial-gradient(circle at 70% 30%, rgba(248, 174, 66, .45), transparent 50%), linear-gradient(160deg, #0a5359, #1e2124); }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1%); } }
.pm-cut::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .8) 85%); }
.pm-cut-bar { position: absolute; left: 0; right: 0; height: 7%; background: #000; z-index: 2; }
.pm-cut-bar.atas { top: 0; }
.pm-cut-bar.bawah { bottom: 0; }
.pm-cut-isi { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 3; padding: 0 20px; max-width: 820px; margin: 0 auto; }
.pm-cut-label { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: var(--emas); }
.pm-cut-teks { font-family: var(--font-cerita); font-size: 20.5px; line-height: 1.4; margin-top: 8px; min-height: 3.2em; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.pm-cut-ketuk { font-size: 12px; opacity: .7; margin-top: 6px; }
.pm-cut-titik { position: absolute; top: calc(7% + 12px); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; }
.pm-cut-titik span { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.pm-cut-titik span.kini { background: #fff; }
.pm-cut-lewati { position: absolute; top: calc(7% + 4px); right: 12px; z-index: 4; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
@media (min-width: 900px) { .pm-cut-teks { font-size: 26px; } }

/* ------------------------------------------------------------ pre-test imersif */

.pm-pre { position: relative; min-height: 100%; display: grid; place-items: center; padding: 20px 16px; background: #0e2a2e; overflow: hidden; }
.pm-pre.dalam-dunia { background: transparent; }
.pm-pre-latar { position: absolute; inset: -20px; background: center / cover; filter: blur(8px) brightness(.55) saturate(1.1); transform: scale(1.05); }
.pm-pre-kartu {
  position: relative; width: 100%; max-width: 600px; padding: 24px 20px; border-radius: 24px; color: #fff;
  background: rgba(14, 42, 46, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 12px; animation: naik .3s ease-out;
}
.pm-pre-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--emas); }
.pm-pre-kartu h2 { font-size: 22.5px; line-height: 1.3; }
.pm-pre-kartu p { color: rgba(255, 255, 255, .85); }
.pm-pre-meta { font-size: 12px; }
.pm-pre-titik { display: flex; gap: 6px; }
.pm-pre-titik span { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.pm-pre-titik .lewat { background: var(--teal); }
.pm-pre-titik .kini { background: var(--emas); }
.pm-pre-opsi { display: grid; gap: 8px; }
.pm-pre .pm-opsi { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.pm-pre .pm-opsi-huruf { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .8); }
.pm-pre .pm-opsi.dipilih { background: rgba(80, 194, 200, .3); border-color: var(--teal); }
.pm-pre .tombol-teks { color: rgba(255, 255, 255, .8); align-self: center; }
.pm-pre-skor { font-size: 18.5px; }
.pm-pre-skor b { font-size: 52px; font-weight: 600; color: var(--emas); }

/* ------------------------------------------------------------ NPC */

.pm-npc { display: grid; gap: 16px; }
.pm-npc-tokoh { display: flex; align-items: center; gap: 14px; }
.pm-npc-gambar { width: 110px; height: 140px; object-fit: cover; object-position: top; border-radius: 18px; background: #e9e2d6; border: 3px solid var(--warna); }
.pm-npc-siluet { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 31.5px; font-weight: 600; color: #fff; background: var(--warna); box-shadow: 0 5px 0 rgba(0, 0, 0, .2); }
.pm-npc-nama { display: flex; flex-direction: column; }
.pm-npc-nama b { font-size: 16.5px; }
.pm-npc-nama small { color: var(--tinta-2); }
.pm-npc-dialog { display: flex; flex-direction: column; gap: 12px; }
.pm-npc-log { display: flex; flex-direction: column; gap: 8px; }
.pm-gelembung { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; animation: tampil .25s ease-out; }
.pm-gelembung small { display: block; font-size: 11px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
.pm-gelembung.npc { align-self: flex-start; background: var(--permukaan); border: 2px solid var(--garis); border-top-left-radius: 4px; }
.pm-gelembung.npc.tepat { border-color: #9fd6c1; background: #f1faf6; }
.pm-gelembung.anda { align-self: flex-end; background: var(--utama); color: #fff; border-top-right-radius: 4px; }
.pm-npc-aksi { display: flex; flex-direction: column; gap: 8px; }
.pm-npc-petunjuk { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.pm-tawar { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: #fffaf0; border: 2px solid #f2d596; animation: naik .3s ease-out; }
.pm-tawar-ikon { font-size: 33.5px; }
.pm-tawar .baris-tombol { grid-column: 1 / -1; }
.pm-tawar small { color: var(--tinta-3); }
@media (min-width: 900px) {
  .pm-npc { grid-template-columns: 260px 1fr; align-items: start; }
  .pm-npc-tokoh { flex-direction: column; align-items: flex-start; position: sticky; top: 16px; }
  .pm-npc-gambar { width: 220px; height: 300px; }
  .pm-npc-siluet { width: 140px; height: 140px; font-size: 44.5px; }
}

/* ------------------------------------------------------------ flip-book */

/* Materi dibuat muat satu layar: hanya kolom teks dan daftar isi yang bergulir. */
.pm-fb { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.pm-fb-badan { min-height: 0; }
.pm-fb-badan > * { min-height: 0; }
.pm-fb-buku { height: 100%; min-height: 0; }
.pm-fb-halaman { overflow: hidden; }
.pm-fb-teks { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pm-fb-kolom-gambar { min-height: 0; }
@media (max-width: 999px) {
  /* Di ponsel kepala materi diringkas supaya halaman muat tanpa gulir panjang. */
  .pm-fb-gambar img { max-height: 26vh; }
  .pm-fb-halaman { padding: 12px; gap: 8px; overflow-y: auto; }
  .pm-fb-kepala { gap: 4px 10px; }
  .pm-fb-kepala h2 { font-size: 16px; }
  .pm-fb-kepala-teks .pm-label { font-size: 10px; }
  .pm-fb-kepala-teks .kecil { display: none; }
  .pm-fb-meta { gap: 6px; }
  .pm-fb-cip { padding: 3px 9px; font-size: 10px; }
  .pm-fb-cip:nth-of-type(2) { display: none; }
  .pm-fb-teks h3 { font-size: 16.5px; margin: 0 0 6px; }
  .pm-fb-teks p { font-size: 13.5px; line-height: 1.5; }
  .pm-fb-badan { flex: 1; min-height: 0; }
}
.pm-fb-kepala h2 { font-size: 18.5px; }
.pm-fb-panggung { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: stretch; flex: 1; }
.pm-fb-panggung { align-items: center; }
.pm-fb-nav {
  align-self: center; width: 44px; height: 44px; border-radius: 999px; padding: 0;
  background: var(--permukaan); border: 1px solid var(--garis-kuat); font-size: 24px; line-height: 1;
  color: var(--utama-gelap); cursor: pointer; display: grid; place-items: center; box-shadow: var(--bayangan);
}
.pm-fb-nav:hover:not(:disabled) { background: var(--utama-muda); }
.pm-fb-nav:disabled { opacity: .35; cursor: default; }
.pm-fb-buku { perspective: 1600px; min-width: 0; touch-action: pan-y; }
.pm-fb-halaman {
  height: 100%; min-height: 0; background: #fffef9; border-radius: 6px 18px 18px 6px; padding: 16px;
  box-shadow: inset 12px 0 18px -12px rgba(0, 0, 0, .25), 0 10px 30px rgba(30, 33, 36, .12);
  border: 1px solid var(--garis); display: flex; flex-direction: column; gap: 12px; transform-origin: left center;
}
.pm-fb-halaman.keluar-maju { animation: balikKeluar .17s ease-in forwards; }
.pm-fb-halaman.masuk-maju { animation: balikMasuk .24s ease-out; }
.pm-fb-halaman.keluar-mundur { animation: balikKeluar .17s ease-in forwards reverse; transform-origin: right center; }
.pm-fb-halaman.masuk-mundur { animation: balikMasukMundur .24s ease-out; }
@keyframes balikKeluar { to { transform: rotateY(-80deg); opacity: .4; } }
@keyframes balikMasuk { from { transform: rotateY(35deg); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes balikMasukMundur { from { transform: rotateY(-35deg); opacity: .5; } to { transform: none; opacity: 1; } }
.pm-fb-gambar { margin: 0; border-radius: 10px; overflow: hidden; background: var(--permukaan-3); }
.pm-fb-gambar img { display: block; width: 100%; height: auto; max-height: 38vh; object-fit: contain; }
.pm-fb-ikon { font-size: 67px; text-align: center; padding: 18px 0 4px; }
.pm-fb-teks h3 { font-size: 20.5px; margin: 2px 0 8px; }
.pm-fb-teks p { font-size: 15px; line-height: 1.55; }
.pm-fb-sub { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--utama); }
.pm-fb-tip { margin-top: 10px; background: var(--catatan-latar); color: var(--catatan-tinta); padding: 8px 12px; border-radius: 10px; font-size: 13.5px !important; }
.pm-fb-halaman.tanya { background: linear-gradient(180deg, #fffaf0, #fffef9); justify-content: center; }
.pm-fb-tanya { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; width: 100%; }
.pm-fb-tanya h3 { font-size: 19.5px; line-height: 1.35; }
.pm-fb-opsi { display: grid; gap: 8px; }
.pm-fb-status { font-size: 13.5px; color: var(--tinta-2); min-height: 1.4em; }
.pm-fb-kaki { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.pm-fb-nomor { font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pm-fb-sumber { font-size: 11.5px; color: var(--tinta-3); }
.pm-fb-sumber a { color: var(--utama-gelap); }
@media (min-width: 900px) {
  .pm-fb-halaman.bergambar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 24px; }
  .pm-fb-halaman.bergambar .pm-fb-gambar img { max-height: min(62vh, 100%); }
  .pm-fb-halaman { height: 100%; min-height: 0; overflow: hidden; }
  .pm-fb-halaman.bergambar .pm-fb-kolom-gambar { min-height: 0; max-height: 100%; }
  .pm-fb-teks { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .pm-fb-daftar { max-height: 100%; }
  .pm-fb-halaman.ikon { justify-content: center; padding: 32px 48px; }
}
/* --- flip-book: kepala, daftar isi, halaman kaya, zoom gambar --- */
.pm-fb-kepala { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; justify-content: space-between; }
.pm-fb-kepala-teks { min-width: 0; }
.pm-fb-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pm-fb-cip {
  font-size: 11px; font-weight: 600; color: var(--tinta-2); background: var(--permukaan-3);
  border: 1px solid var(--garis); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.pm-fb-tombol-daftar { padding: 6px 12px; font-size: 12px; }

.pm-fb-badan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }
.pm-fb-daftar { display: none; }
@media (min-width: 1000px) {
  .pm-fb-badan { grid-template-columns: 232px minmax(0, 1fr); }
  .pm-fb-daftar { display: block; }
  .pm-fb-tombol-daftar { display: none; }
}
.pm-fb.daftar-buka .pm-fb-daftar { display: block; }
.pm-fb-daftar {
  background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px;
  padding: 10px; overflow-y: auto; max-height: 62vh; align-self: start;
}
.pm-fb-daftar-kepala { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); padding: 2px 6px 8px; }
.pm-fb-daftar-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 8px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 10px;
  padding: 7px 8px; cursor: pointer; color: var(--tinta); font: inherit; font-size: 12.5px; line-height: 1.3;
}
.pm-fb-daftar-item:hover:not(:disabled) { background: var(--permukaan-3); }
.pm-fb-daftar-item.aktif { background: var(--utama-muda); color: var(--utama-gelap); font-weight: 600; }
.pm-fb-daftar-item.terkunci { opacity: .4; cursor: default; }
.pm-fb-daftar-no { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta-3); font-size: 11px; text-align: right; }
.pm-fb-daftar-judul { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-fb-daftar-tanda { font-size: 11px; text-align: center; }

.pm-fb-kolom-gambar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pm-fb-gambar { position: relative; cursor: zoom-in; }
.pm-fb-gambar:focus-visible { outline: 3px solid var(--utama); outline-offset: 3px; }
.pm-fb-lup {
  position: absolute; right: 8px; bottom: 8px; background: rgba(23, 26, 28, .72); color: #fff;
  border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 13px;
}
.pm-fb-keterangan { font-size: 11.5px; color: var(--tinta-3); line-height: 1.45; }
.pm-fb-zoom {
  position: fixed; inset: 0; z-index: 90; background: rgba(16, 18, 20, .9);
  display: grid; place-items: center; padding: 24px; cursor: zoom-out;
}
.pm-fb-zoom img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.pm-fb-zoom-tutup {
  position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: rgba(255, 255, 255, .92); font-size: 16.5px; cursor: pointer; color: #1c1f22;
}

.pm-fb-angka { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.pm-fb-angka-kartu {
  flex: 1 1 120px; background: var(--permukaan-3); border: 1px solid var(--garis);
  border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.pm-fb-angka-kartu b { font-size: 17.5px; color: var(--utama-gelap); line-height: 1.15; }
.pm-fb-angka-kartu span { font-size: 11px; color: var(--tinta-3); line-height: 1.35; }

.pm-fb-poin { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pm-fb-poin li { font-size: 14px; line-height: 1.5; }
.pm-fb-poin.nomor { padding-left: 22px; }
.pm-fb-istilah { margin: 10px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.pm-fb-istilah dt { font-weight: 600; font-size: 12px; color: var(--utama-gelap); }
.pm-fb-istilah dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2); }
.pm-fb-kutipan {
  margin: 12px 0 0; padding: 8px 0 8px 14px; border-left: 3px solid var(--utama);
}
.pm-fb-kutipan p { font-size: 14.5px !important; font-style: italic; line-height: 1.5; }
.pm-fb-kutipan cite { font-size: 11.5px; color: var(--tinta-3); font-style: normal; }
.pm-fb-aksi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.pm-fb-sumber-hal { font-size: 10.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pm-fb-sorot { padding: 4px 8px; font-size: 11.5px; }

.pm-fb-halaman.ringkasan { background: linear-gradient(180deg, #f4fbfb, #fffef9); justify-content: center; }
.pm-fb-ringkasan { max-width: 640px; margin: 0 auto; width: 100%; }
.pm-fb-ringkasan h3 { font-size: 20.5px; margin: 2px 0 10px; }
.pm-fb-skor { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--utama-gelap); }

.pm-fb-kaki-nav { display: none; }
@media (max-width: 560px) {
  .pm-fb-panggung { grid-template-columns: 1fr; }
  /* beri ruang agar baris terakhir tidak tertutup kaki yang menempel */
  .pm-fb-halaman { padding-bottom: 84px; }
  .pm-fb-nav { display: none; }
  .pm-fb-kaki { grid-template-columns: auto 1fr; position: sticky; bottom: 0; padding: 10px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(241, 235, 225, 0), var(--kertas) 30%); }
  .pm-fb-kaki-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; grid-column: 1 / -1; }
  .pm-fb-selesai { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ misi cerita lama & peta ekosistem */

.pm-lama { height: 100%; display: flex; justify-content: center; background: var(--kertas); }
.pm-lama .panggung { width: 100%; max-width: 560px; height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 760px) { .pm-lama { padding: 16px; } .pm-lama .panggung { border-radius: 18px; box-shadow: var(--bayangan); border: 1px solid var(--garis); } }
.pm-pengantar { min-height: 100%; display: grid; place-items: center; padding: 20px 16px; background: center / cover #0e2a2e; }
.pm-pengantar-kartu { max-width: 520px; background: rgba(255, 253, 249, .96); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--bayangan); }
.pm-pengantar-kartu h2 { font-size: 24px; }

.pm-eko { display: flex; flex-direction: column; gap: 14px; }
.pm-eko-kepala h2 { font-size: 20.5px; }
.pm-eko-peta { display: grid; gap: 12px; }
.pm-eko-hub { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--utama); color: #fff; }
.pm-eko-hub .lms-logo { height: 28px; background: #fff; border-radius: 6px; padding: 3px 6px; }
.pm-eko-kelompok { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 18px; padding: 12px; }
.pm-eko-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.pm-eko-entitas {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; padding: 12px;
  border-radius: 14px; border: 2px solid var(--garis); border-bottom-width: 4px; background: var(--permukaan);
  font: inherit; font-size: 12.5px; font-weight: 550; text-align: left; color: var(--tinta); cursor: pointer;
}
.pm-eko-entitas.dilihat { border-color: var(--warna); box-shadow: inset 0 0 0 1px var(--warna); }
.pm-eko-cek { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--warna); color: #fff; font-style: normal; font-size: 11px; display: none; place-items: center; }
.pm-eko-entitas.dilihat .pm-eko-cek { display: grid; }
.pm-eko-kartu { border-left: 5px solid var(--warna); background: var(--permukaan); border-radius: 0 16px 16px 0; padding: 14px; display: flex; flex-direction: column; gap: 6px; animation: tampil .25s ease-out; }
.pm-eko-kartu-kepala { display: flex; align-items: center; gap: 10px; }
.pm-eko-kaki { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(rgba(241, 235, 225, 0), var(--kertas) 40%); }
@media (min-width: 900px) { .pm-eko-peta { grid-template-columns: 1fr 2fr; } .pm-eko-hub { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ sorting quiz */

.pm-sortir { display: flex; flex-direction: column; gap: 12px; }
.pm-sortir-kepala h2 { font-size: 19.5px; }
.pm-sortir-skor { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-sortir-skor span { padding: 6px 12px; border-radius: 999px; background: var(--permukaan); border: 1px solid var(--garis); font-weight: 600; font-size: 13px; }
.pm-sortir-skor .cocok { color: #14704c; }
.pm-sortir-skor .meleset { color: #9b3b2a; }
.pm-sortir-skor .syarat { color: var(--tinta-3); margin-left: auto; }
.pm-sortir-arena { display: grid; grid-template-columns: 1fr minmax(180px, 280px) 1fr; gap: 12px; align-items: stretch; min-height: 300px; }
.pm-bin {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 14px 10px; border-radius: 20px; border: 3px dashed var(--garis-kuat); background: var(--permukaan);
  font: inherit; color: var(--tinta); cursor: pointer; transition: transform .15s, background .2s, border-color .2s;
}
.pm-bin b { font-size: 14px; line-height: 1.25; }
.pm-bin small { color: var(--tinta-3); font-size: 11.5px; }
.pm-bin-ikon { font-size: 33.5px; line-height: 1; }
.pm-bin-art { width: min(100%, 200px); height: clamp(88px, 14vw, 140px); object-fit: cover; border-radius: 14px; pointer-events: none; }
.pm-bin-art[src$="hadiah-xp.png"] { object-fit: contain; }
.pm-bin-hitung { position: absolute; top: 8px; right: 10px; min-width: 26px; height: 26px; border-radius: 13px; background: var(--permukaan-3); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.pm-bin-arah { font-size: 20.5px; color: var(--tinta-3); }
.pm-bin.bin-0 { border-color: #9ec5f4; background: #f3f8fe; }
.pm-bin.bin-1 { border-color: #f2c9bf; background: #fdf4f1; }
.pm-bin.sorot { transform: scale(1.03); border-style: solid; }
.pm-bin.kilat-cocok { background: #dff3e9; border-color: #1b9e6a; border-style: solid; }
.pm-bin.kilat-meleset { background: #fbe4de; border-color: #c2533f; border-style: solid; animation: getar .35s; }
.pm-sortir-tumpukan { position: relative; display: grid; place-items: center; }
.pm-kartu-sortir, .pm-kartu-bayang {
  grid-area: 1 / 1; width: 100%; max-width: 260px; min-height: 250px; border-radius: 22px;
  background: var(--permukaan); border: 2px solid var(--garis); border-bottom-width: 6px;
}
.pm-kartu-bayang { transform: rotate(4deg) translateY(8px); opacity: .6; }
.pm-kartu-sortir {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; text-align: center; touch-action: none; cursor: grab; user-select: none; animation: naik .25s ease-out;
  transition: transform .12s;
}
.pm-kartu-sortir.seret { cursor: grabbing; transition: none; box-shadow: var(--bayangan); }
.pm-kartu-sortir img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 14px; pointer-events: none; }
.pm-kartu-sortir b { font-size: 16px; line-height: 1.3; }
.pm-kartu-ikon { font-size: 59.5px; line-height: 1; }
.pm-kartu-sortir.terbang-kiri { transition: transform .35s ease-in, opacity .35s; transform: translateX(-140%) rotate(-24deg) !important; opacity: 0; }
.pm-kartu-sortir.terbang-kanan { transition: transform .35s ease-in, opacity .35s; transform: translateX(140%) rotate(24deg) !important; opacity: 0; }
.pm-sortir-umpan { min-height: 48px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; background: var(--permukaan); border: 1px solid var(--garis); }
.pm-sortir-umpan:empty { visibility: hidden; }
.pm-sortir-umpan.cocok { background: #e3f4ec; border-color: #bfe3d1; color: #14573c; }
.pm-sortir-umpan.meleset { background: #fbeee9; border-color: #f2c9bf; color: #7d2a1d; }
.pm-sortir.selesai .pm-sortir-arena, .pm-sortir.selesai .pm-sortir-umpan, .pm-sortir.selesai .pm-sortir-petunjuk { display: none; }
.pm-sortir-catatan { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 6px; }
.pm-sortir-catatan li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--permukaan-2); font-size: 13px; }
.pm-sortir-catatan small { color: var(--tinta-2); }
@media (max-width: 640px) {
  .pm-sortir-arena { grid-template-columns: 1fr 1fr; grid-template-areas: "kartu kartu" "kiri kanan"; min-height: 0; }
  .pm-sortir-tumpukan { grid-area: kartu; }
  .pm-bin.bin-0 { grid-area: kiri; }
  .pm-bin.bin-1 { grid-area: kanan; }
  .pm-kartu-sortir, .pm-kartu-bayang { min-height: 200px; max-width: 240px; }
  .pm-bin { min-height: 120px; }
  .pm-sortir-skor .syarat { margin-left: 0; }
}

/* ------------------------------------------------------------ business process mapping */

.pm-rantai { display: flex; flex-direction: column; gap: 14px; }
.pm-rantai-kepala h2 { font-size: 19.5px; }
.pm-rantai-entitas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pm-alur { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); counter-reset: none; }
.pm-slot {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 118px; padding: 10px;
  border-radius: 16px; border: 3px dashed var(--garis-kuat); background: var(--permukaan-2); transition: border-color .2s, background .2s;
}
.pm-slot::after { content: "→"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); font-size: 16.5px; font-weight: 600; color: var(--garis-kuat); }
.pm-slot:last-child::after { display: none; }
.pm-slot.aktif { border-color: var(--emas); background: #fffaf0; box-shadow: 0 0 0 4px #fdf1d8; }
.pm-slot.sorot { border-color: var(--utama); background: var(--utama-muda); }
.pm-slot.tolak { border-color: #c2533f; background: #fbeee9; animation: getar .35s; }
.pm-slot.terisi { border-style: solid; border-color: #1b9e6a; background: #f1faf6; }
.pm-slot.terisi::after { color: #1b9e6a; }
/* Ilustrasi hadiah di layar tuntas. */
.pm-tuntas-ikon:not(.emoji), .pm-akhir-ikon:not(.emoji) { width: 168px; height: 168px; margin: 0 auto; }
.pm-tuntas-ikon img, .pm-akhir-ikon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pm-akhir-ikon:not(.emoji) { width: 120px; height: 120px; }

/* Kartu proses bergambar: ilustrasi menggantikan emoji bila berkasnya ada. */
.pm-kartu-ikon, .pm-slot-ikon { overflow: hidden; border-radius: 10px; background: var(--permukaan-2); }
.pm-kartu-ikon img, .pm-slot-ikon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-kartu-ikon:not(.emoji) { width: 54px; height: 44px; flex: none; }
.pm-slot-ikon:not(.emoji) { width: 100%; height: 62px; border-radius: 12px; }
.pm-slot-ikon.emoji, .pm-kartu-ikon.emoji { background: none; }

.pm-slot-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--tinta); color: #fff; }
.pm-slot.terisi .pm-slot-no { background: #1b9e6a; }
.pm-slot-isi { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pm-slot-isi small { color: var(--tinta-2); font-size: 11.5px; line-height: 1.35; }
.pm-slot-kosong { color: var(--tinta-3); font-weight: 550; }
.pm-slot-ikon { font-size: 20.5px; }
.pm-alur.mengalir .pm-slot.terisi { animation: alir 1s ease-in-out; }
.pm-alur.mengalir .pm-slot:nth-child(2) { animation-delay: .08s; }
.pm-alur.mengalir .pm-slot:nth-child(3) { animation-delay: .16s; }
.pm-alur.mengalir .pm-slot:nth-child(4) { animation-delay: .24s; }
.pm-alur.mengalir .pm-slot:nth-child(5) { animation-delay: .32s; }
.pm-alur.mengalir .pm-slot:nth-child(6) { animation-delay: .4s; }
.pm-alur.mengalir .pm-slot:nth-child(7) { animation-delay: .48s; }
@keyframes alir { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 6px rgba(27, 158, 106, .35); transform: translateY(-3px); } }
.pm-rantai-pesan { padding: 10px 14px; border-radius: 12px; background: var(--permukaan); border: 1px solid var(--garis); font-size: 13.5px; }
.pm-rantai-pesan.cocok { background: #e3f4ec; border-color: #bfe3d1; color: #14573c; }
.pm-rantai-pesan.meleset { background: #fbeee9; border-color: #f2c9bf; color: #7d2a1d; }
.pm-baki { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 18px; background: var(--permukaan); border: 1px solid var(--garis); }
.pm-kartu-rantai {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px;
  border-radius: 14px; border: 2px solid var(--garis); border-left: 5px solid var(--warna, var(--utama)); border-bottom-width: 4px;
  background: var(--permukaan); font: inherit; font-size: 13.5px; color: var(--tinta); cursor: grab; touch-action: none; user-select: none;
}
.pm-kartu-rantai .pm-kartu-ikon { font-size: 20.5px; }
.pm-kartu-rantai.terpakai { display: none; }
.pm-hantu { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg); box-shadow: var(--bayangan); opacity: .95; }
@media (max-width: 640px) {
  .pm-alur { grid-template-columns: 1fr; gap: 16px; }
  .pm-slot { min-height: 64px; flex-direction: row; align-items: center; }
  .pm-slot::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -19px; transform: none; }
  .pm-baki { position: sticky; bottom: 0; z-index: 2; max-height: 38vh; overflow-y: auto; box-shadow: 0 -8px 20px rgba(30, 33, 36, .08); }
  .pm-kartu-rantai { min-height: 42px; padding: 6px 10px; font-size: 13px; }
}

/* ------------------------------------------------------------ word search */

.pm-ck { display: flex; flex-direction: column; gap: 12px; }
.pm-ck-kepala h2 { font-size: 19.5px; }
.pm-ck-badan { display: grid; gap: 14px; }
.pm-ck-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; width: 100%; max-width: 560px; margin: 0 auto; touch-action: none; user-select: none; }
.pm-ck-sel {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px;
  background: var(--permukaan); box-shadow: inset 0 -2px 0 var(--garis); font: inherit; font-weight: 600;
  font-size: clamp(11px, 3.6vw, 18.5px); color: var(--tinta); cursor: pointer;
}
.pm-ck-sel.pratinjau { background: var(--emas); color: var(--tinta); }
.pm-ck-sel.ketemu { color: #fff; }
.pm-ck-sel.w0, .pm-ck-daftar li.w0 b { background: #2a78d6; }
.pm-ck-sel.w1, .pm-ck-daftar li.w1 b { background: #1b9e6a; }
.pm-ck-sel.w2, .pm-ck-daftar li.w2 b { background: #c2533f; }
.pm-ck-sel.w3, .pm-ck-daftar li.w3 b { background: #8c5bd6; }
.pm-ck-sel.w4, .pm-ck-daftar li.w4 b { background: #b27a12; }
.pm-ck-sel.w5, .pm-ck-daftar li.w5 b { background: #0f6e75; }
.pm-ck-sel.petunjuk { animation: denyut 0.6s ease-out 3; outline: 3px solid var(--emas); }
.pm-ck-grid.tuntas .pm-ck-sel:not(.ketemu) { opacity: .45; }
.pm-ck-status { min-height: 44px; padding: 10px 12px; border-radius: 12px; background: var(--permukaan); border: 1px solid var(--garis); font-size: 13px; }
.pm-ck-kanan { display: flex; flex-direction: column; gap: 10px; }
.pm-ck-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.pm-ck-daftar li { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: var(--permukaan); border: 1px solid var(--garis); }
.pm-ck-daftar li b { align-self: flex-start; padding: 1px 8px; border-radius: 6px; font-size: 13px; letter-spacing: .04em; background: var(--permukaan-3); color: var(--tinta-2); }
.pm-ck-daftar li.ketemu b { color: #fff; text-decoration: line-through; }
.pm-ck-daftar li small { font-size: 11.5px; color: var(--tinta-2); }
@media (min-width: 960px) { .pm-ck-badan { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: start; } .pm-ck-daftar { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ studi kasus: tatap muka */

.pm-sk-vn { position: relative; height: 100%; min-height: 520px; overflow: hidden; background: #2b2724; }
.pm-sk-latar { position: absolute; inset: 0; background: center / cover; filter: brightness(.7); }
.pm-sk-atas { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.pm-sk-pemeran { position: absolute; top: 56px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; z-index: 1; }
/* Hanya tokoh yang sedang bicara yang tampil di panggung. */
.pm-sk-avatar { display: none; flex-direction: column; align-items: center; gap: 6px; }
.pm-sk-avatar i { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 35.5px; font-weight: 600; color: #fff; background: var(--warna); border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.pm-sk-avatar small { background: rgba(0, 0, 0, .55); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.pm-sk-avatar.bicara { display: flex; animation: sk-muncul .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sk-muncul { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.pm-sk-bawah { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; }
.pm-sk-kotak { position: relative; background: rgba(255, 253, 249, .97); border-radius: 18px; padding: 12px 16px; border-top: 5px solid var(--warna); cursor: pointer; box-shadow: var(--bayangan); }
.pm-sk-kotak.narasi { border-top-color: var(--tinta-3); }
.pm-sk-kotak.narasi .pm-sk-teks { font-family: var(--font-cerita); font-style: italic; color: var(--tinta-2); }
.pm-sk-nama { font-weight: 600; font-size: 13px; color: var(--utama-gelap); min-height: 1em; }
.pm-sk-teks { font-size: 16px; line-height: 1.5; min-height: 3em; }
.pm-sk-ketuk { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--tinta-3); }
.pm-sk-pilihan { background: rgba(24, 26, 28, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; animation: naik .25s ease-out; }
.pm-sk-pilihan > p { color: #f1ece3; font-size: 12px; font-weight: 600; }
.pm-umpan { padding: 14px; border-radius: 18px; background: var(--permukaan); border: 2px solid var(--garis); display: flex; flex-direction: column; gap: 8px; animation: naik .25s ease-out; box-shadow: var(--bayangan); }
.pm-umpan-label { font-weight: 600; font-size: 14px; }
.pm-umpan.nada-2 { border-color: #9fd6c1; background: #f1faf6; }
.pm-umpan.nada-2 .pm-umpan-label { color: #14704c; }
.pm-umpan.nada-1 { border-color: #f2d596; background: #fffaf0; }
.pm-umpan.nada-1 .pm-umpan-label { color: #845a0b; }
.pm-umpan.nada-0 { border-color: #f2c9bf; background: #fdf4f1; }
.pm-umpan.nada-0 .pm-umpan-label { color: #9b3b2a; }
.pm-sk-vn .pm-akhir { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; }

/* ------------------------------------------------------------ studi kasus: kanal digital */

.pm-kanal { display: grid; gap: 14px; }
.pm-kanal-info h2 { font-size: 19.5px; }
.pm-kanal-perangkat { border-radius: 24px; overflow: hidden; border: 1px solid var(--garis); background: var(--permukaan); box-shadow: var(--bayangan); display: flex; flex-direction: column; max-height: 62vh; }
.pm-kanal-kepala { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--tinta); color: #fff; }
.pm-kanal-kepala div { display: flex; flex-direction: column; }
.pm-kanal-kepala small { opacity: .75; font-size: 11.5px; }
.pm-kanal-ikon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .15); display: grid; place-items: center; font-size: 16.5px; }
.pm-kanal-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.pm-pesan { max-width: 86%; padding: 10px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; animation: tampil .25s ease-out; }
.pm-pesan small { display: block; font-size: 10.5px; font-weight: 600; opacity: .7; margin-bottom: 3px; }
.pm-pesan p + p { margin-top: 4px; }
.pm-pesan.masuk { align-self: flex-start; background: var(--permukaan-2); border: 1px solid var(--garis); border-top-left-radius: 4px; }
.pm-pesan.keluar { align-self: flex-end; background: var(--utama); color: #fff; border-top-right-radius: 4px; }
.pm-kanal-aksi { display: flex; flex-direction: column; gap: 8px; }
.pm-kanal-label { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.pm-opsi-kanal { flex-direction: column; align-items: flex-start; gap: 4px; }
.pm-opsi-kanal b { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--utama-gelap); }
.pm-opsi-kanal span { font-size: 13.5px; }
.pm-kanal-mengetik { font-style: italic; }
.kanal-wa .pm-kanal-kepala { background: #075e54; }
.kanal-wa .pm-kanal-log { background: #ece5dd; }
.kanal-wa .pm-pesan.masuk { background: #fff; border: 0; }
.kanal-wa .pm-pesan.keluar { background: #dcf8c6; color: var(--tinta); }
.kanal-x .pm-kanal-kepala { background: #0f1419; }
.kanal-x .pm-pesan { max-width: 100%; border-radius: 14px; }
.kanal-x .pm-pesan.masuk { background: #fff; border: 1px solid #cfd9de; }
.kanal-x .pm-pesan.keluar { background: #e8f5fd; color: var(--tinta); border: 1px solid #b7dcf5; align-self: stretch; margin-left: 24px; }
.kanal-email .pm-kanal-kepala { background: #2a5fb0; }
.kanal-email .pm-pesan { max-width: 100%; align-self: stretch; border-radius: 10px; }
.kanal-email .pm-pesan.keluar { background: #eef3fb; color: var(--tinta); border: 1px solid #c9d8f0; }
.kanal-telepon .pm-kanal-kepala { background: #1b9e6a; }
.kanal-telepon .pm-kanal-ikon { animation: denyut 1.6s ease-out infinite; }
@media (min-width: 960px) { .pm-kanal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .pm-kanal-info { grid-column: 1 / -1; } .pm-kanal-perangkat { max-height: calc(100vh - 220px); } }

/* ------------------------------------------------------------ review aset */

.pm-review { display: grid; gap: 16px; }
.pm-review-visual { margin: 0; border-radius: 20px; overflow: hidden; background: var(--utama-muda); display: flex; flex-direction: column; }
.pm-review-visual img { width: 100%; max-height: 42vh; object-fit: cover; display: block; }
.pm-review-ikon { font-size: 89.5px; text-align: center; padding: 30px 0; }
.pm-review-visual figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--permukaan); font-size: 12px; font-weight: 550; color: var(--tinta-2); }
.pm-review-isi { display: flex; flex-direction: column; gap: 10px; }
.pm-review-isi h2 { font-size: 20.5px; }
.pm-review-langkah { padding: 14px; border-radius: 18px; background: var(--permukaan); border: 1px solid var(--garis); display: flex; flex-direction: column; gap: 8px; }
.pm-review-langkah h3 { font-size: 15px; }
.pm-review-langkah.redup { opacity: .55; }
.pm-review-cek { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pm-cek { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; min-height: 48px; border-radius: 12px; border: 2px solid var(--garis); background: var(--permukaan); font: inherit; font-size: 13.5px; color: var(--tinta); cursor: pointer; }
.pm-cek-kotak { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--garis-kuat); display: grid; place-items: center; }
.pm-cek.diamati { border-color: #9fd6c1; background: #f1faf6; }
.pm-cek.diamati .pm-cek-kotak { background: #1b9e6a; border-color: #1b9e6a; }
.pm-cek.diamati .pm-cek-kotak::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 600; }
.pm-review-tanya { font-weight: 600; font-size: 15px; }
@media (min-width: 900px) { .pm-review { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } .pm-review-visual { position: sticky; top: 16px; } .pm-review-visual img { max-height: 70vh; } }

/* ------------------------------------------------------------ dunia 3D */

.dn { position: relative; height: 100%; min-height: 480px; overflow: hidden; background: #9cc6e0; }
.dn-3d { position: absolute; inset: 0; }
.dn-kanvas { display: block; width: 100%; height: 100%; touch-action: none; }
.dn-memuat { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(160deg, #0a5359, #1e2124); color: #fff; }
.dn-memuat .pemutar { width: 34px; height: 34px; border-width: 4px; border-color: rgba(255, 255, 255, .25); border-top-color: var(--emas); }
/* Tanpa backdrop-filter di atas kanvas WebGL: blur per frame terlalu berat untuk GPU lemah. */
.dn-lapis { position: absolute; inset: 0; z-index: 30; background: rgba(14, 30, 34, .72); display: flex; flex-direction: column; }
.pm-pre.dalam-dunia .pm-pre-kartu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 42, 46, .95); }
.dn-lapis-tutup { align-self: flex-start; margin: 10px; padding: 8px 14px; border-radius: 999px; border: 0; background: rgba(255, 253, 249, .95); font: inherit; font-weight: 600; color: var(--tinta); cursor: pointer; }
.dn-lapis-isi { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
.dn-lapis-isi > :not(.pm-pre):not(.pm-sk-vn):not(.pm-lama) { background: var(--kertas); border-radius: 22px 22px 0 0; min-height: 100%; }
.dn-lapis-isi > .pm-sk-vn { height: 100%; }
.dn-panel {
  position: absolute; top: 12px; left: 12px; z-index: 10; width: min(330px, calc(100% - 150px));
  max-height: 46%; overflow-y: auto; background: rgba(255, 253, 249, .95); border-radius: 16px; box-shadow: var(--bayangan); padding: 10px;
}
.dn-panel-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dn-panel-kepala b { display: block; font-size: 13px; }
.dn-hitung { font-size: 11.5px; color: var(--tinta-3); font-weight: 600; }
.dn-lipat { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--garis); background: var(--permukaan-2); cursor: pointer; }
.dn-panel.terlipat .dn-daftar-objektif { display: none; }
.dn-daftar-objektif { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.dn-daftar-objektif button { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; width: 100%; text-align: left; padding: 6px 8px; border-radius: 10px; border: 0; background: transparent; font: inherit; color: var(--tinta); cursor: pointer; }
.dn-daftar-objektif button:hover { background: var(--permukaan-2); }
.dn-daftar-objektif b { display: block; font-size: 12px; line-height: 1.3; }
.dn-daftar-objektif small { display: block; font-size: 10.5px; color: var(--tinta-3); line-height: 1.3; }
.dn-daftar-objektif li.tuntas b { color: var(--tinta-3); text-decoration: line-through; }
.dn-ikon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fdf1d8; font-size: 12px; }
.dn-daftar-objektif li.tuntas .dn-ikon { background: #1b9e6a; color: #fff; font-weight: 600; }
.dn-peta { position: absolute; top: 12px; right: 12px; z-index: 10; width: 138px; height: 138px; border-radius: 14px; border: 3px solid #fff; box-shadow: var(--bayangan); overflow: hidden; background: var(--permukaan-2); }
.dn-zona { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9; padding: 6px 14px; border-radius: 999px; background: rgba(30, 33, 36, .78); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.dn-zona.tampil { opacity: 1; }
.dn-interaksi {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 12; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; border: 0;
  background: var(--emas); color: var(--tinta); font: inherit; font-weight: 600; box-shadow: 0 4px 0 #b87812; cursor: pointer; animation: naik .2s ease-out;
}
.dn-interaksi kbd { font-family: inherit; background: var(--tinta); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 11px; }
.dn-interaksi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-bantuan { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); z-index: 9; padding: 6px 12px; border-radius: 999px; background: rgba(30, 33, 36, .7); color: #fff; font-size: 11.5px; white-space: nowrap; transition: opacity .6s; pointer-events: none; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.dn-bantuan.pudar { opacity: 0; }
.dn-tuntas { position: absolute; right: 12px; bottom: 24px; z-index: 13; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255, 253, 249, .97); box-shadow: var(--bayangan); animation: naik .3s ease-out; }
.dn-joystick { display: none; position: absolute; left: 20px; bottom: 24px; z-index: 11; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .28); border: 2px solid rgba(255, 255, 255, .6); touch-action: none; }
.dn-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 253, 249, .95); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
@media (pointer: coarse) { .dn-joystick { display: block; } .dn-bantuan { display: none; } .dn-interaksi { left: auto; right: 16px; transform: none; bottom: 36px; } }
@media (max-width: 640px) {
  .dn-peta { width: 96px; height: 96px; }
  .dn-panel { width: calc(100% - 132px); max-height: 38%; }
  .dn-zona { top: auto; bottom: 160px; }
  .dn-tuntas { left: 12px; right: 12px; bottom: 160px; }
}
.dn.mode-daftar { background: var(--kertas); }
.dn-daftar { position: absolute; inset: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dn-daftar > * { max-width: 900px; width: 100%; margin-left: auto; margin-right: auto; }
.dn-daftar h2 { font-size: 20.5px; }
.dn-zona-daftar { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-kartu-daftar { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dn-kartu { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; text-align: left; padding: 10px; border-radius: 16px; border: 2px solid var(--garis); border-bottom-width: 4px; background: var(--permukaan); font: inherit; color: var(--tinta); cursor: pointer; }
.dn-kartu.tuntas { border-color: #9fd6c1; background: #f1faf6; }
.dn-kartu-gambar { grid-row: span 2; width: 72px; height: 72px; border-radius: 12px; background: #fdf1d8 center / cover; display: grid; place-items: center; font-size: 28px; }
.dn-kartu-teks { display: flex; flex-direction: column; }
.dn-kartu-teks small { color: var(--tinta-3); font-size: 11.5px; }
.dn-kartu .lms-chip { justify-self: start; }

/* --- denah 2D dunia --- */
.dn-denah { display: grid; gap: 12px; }
.dn-denah-kepala h3 { font-size: 16.5px; }
.dn-denah-bingkai {
  border: 1px solid var(--garis); border-radius: 16px; overflow: hidden;
  background: var(--permukaan); box-shadow: var(--bayangan);
}
.denah { display: block; width: 100%; height: auto; }
.denah text { font-family: var(--font); paint-order: stroke; stroke: #fffdf9; stroke-width: 3.5px; stroke-linejoin: round; }
.dn-zona-teks { font-size: 14px; font-weight: 600; letter-spacing: .07em; fill: #fffdf9; stroke: none; }
.dn-nama { font-size: 14px; font-weight: 600; fill: #2b3136; }
.dn-label { font-size: 15px; font-weight: 600; fill: #1e2124; stroke-width: 4.5px; }
.dn-no { font-size: 16px; font-weight: 600; fill: #1e2124; stroke: none; }
.dn-titik.tuntas .dn-no { fill: #08331f; }
.dn-titik.aktif circle:first-child { stroke: #0f6e75; stroke-width: 5; }
.dn-peserta { filter: drop-shadow(0 2px 4px rgba(30, 33, 36, .4)); }

.dn-legenda { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.dn-legenda li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 12.5px; }
.dn-legenda-no {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
  background: var(--emas); color: #3d2a05; font-weight: 600; font-size: 11px;
}
.dn-legenda b { display: block; font-size: 12.5px; }
.dn-legenda small { display: block; color: var(--tinta-3); font-size: 11px; line-height: 1.4; }

/* Denah sebagai peta kecil di dalam dunia 3D */
.dn-peta-svg { display: block; width: 100%; height: 100%; border-radius: 12px; }
.dn-peta-svg .dn-label, .dn-peta-svg .dnh-zona, .dn-peta-svg .dn-nama { display: none; }
.dn-peta-svg .dn-no { font-size: 28px; }
.dn-peta-svg .dn-titik circle { r: 26; stroke-width: 6; }
.dn-peta-svg .dn-skala, .dn-peta-svg .dn-kompas { display: none; }

/* Halaman denah semua dunia */
.dn-denah-daftar { display: grid; gap: 22px; }
@media (min-width: 1100px) { .dn-denah-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- bagikan ke LinkedIn: pratinjau carousel + caption --- */
.bg-modal { max-width: 820px; width: min(96vw, 820px); }
.bg-isi { display: grid; gap: 12px; }
.bg-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 10px;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory;
}
.bg-kartu {
  scroll-snap-align: start; border: 1px solid var(--garis); border-radius: 12px; overflow: hidden;
  background: #f7f3ea; box-shadow: var(--bayangan); aspect-ratio: 1080 / 1350;
}
.bg-kartu > svg { display: block; width: 100%; height: 100%; }
.bg-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.bg-teks {
  width: 100%; font: inherit; font-size: 12.5px; line-height: 1.5; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--garis-kuat); background: var(--permukaan-2); color: var(--tinta); resize: vertical;
}
.bg-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-status { font-size: 12px; color: var(--utama-gelap); min-height: 1.3em; font-weight: 550; }

/* Avatar studi kasus memakai potongan ilustrasi 2D tokoh. */
.pm-sk-avatar i.potret { position: relative; overflow: hidden; background: #e9e3d8; }
.pm-sk-avatar i.potret img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pm-sk-avatar i.potret img[src*="/ilustrasi/"] { position: absolute; width: 180%; max-width: none; height: auto; left: 50%; top: 0; transform: translateX(-50%); }
.pm-npc-gambar[src*="/ilustrasi/"] { object-fit: contain; object-position: center bottom; }

/* --- panggung visual novel --- */
.vn { position: relative; overflow: hidden; border-radius: 16px; min-height: min(78vh, 620px); display: flex; flex-direction: column; background: #2b3136; }
.vn-latar { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vn-gelap { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 20, 22, .18) 0%, rgba(18, 20, 22, .12) 45%, rgba(18, 20, 22, .72) 100%); }
.vn-kepala { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }

/* Tokoh berdiri di kiri dan kanan panggung; potret dipotong sebatas pinggang. */
.vn-tokoh {
  position: absolute; bottom: 132px; z-index: 2; width: min(44%, 300px); height: min(62%, 420px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: .55; filter: brightness(.72); transition: opacity .25s, filter .25s, transform .25s;
  pointer-events: none;
}
.vn-tokoh.kiri { left: 2%; }
.vn-tokoh.kanan { right: 2%; transform: scaleX(-1); }
.vn-tokoh.kanan img, .vn-tokoh.kanan .vn-siluet { transform: scaleX(-1); }
.vn-tokoh img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .38)); }
.vn-tokoh.bicara { opacity: 1; filter: none; }
.vn-tokoh.kiri.bicara { transform: translateY(-6px); }
.vn-tokoh.kanan.bicara { transform: scaleX(-1) translateY(-6px); }
.vn-siluet {
  display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%;
  background: var(--warna, #0f6e75); color: #fff; font-size: 43px; font-weight: 600;
  border: 4px solid rgba(255, 255, 255, .85);
}

.vn-bawah { position: relative; z-index: 4; margin-top: auto; padding: 12px; display: grid; gap: 10px; }
.vn-kotak {
  background: rgba(255, 253, 249, .96); border-radius: 16px; padding: 14px 16px 12px;
  border-left: 6px solid var(--warna, #0f6e75); box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.vn-nama { font-size: 12.5px; font-weight: 600; color: var(--warna, #0f6e75); margin-bottom: 4px; }
.vn-teks { font-size: 15px; line-height: 1.55; color: var(--tinta); min-height: 3em; }
.vn-ketuk { display: block; text-align: right; font-size: 11px; color: var(--tinta-3); }
.vn-pilihan { display: grid; gap: 8px; background: rgba(255, 253, 249, .96); border-radius: 16px; padding: 12px; }
.vn-pilihan > p { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.vn-mini, .vn-insight { background: rgba(255, 253, 249, .96); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.vn-mini-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--utama-gelap); }
@media (max-width: 720px) {
  .vn-tokoh { width: 46%; height: 46%; bottom: 168px; }
  .vn-siluet { width: 84px; height: 84px; font-size: 31.5px; }
  .vn-teks { font-size: 14px; }
}
/* Penyusun carousel: pilihan template, unggahan, dan kartu aktif. */
.bg-editor { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--garis); border-radius: 14px; display: grid; gap: 12px; }
.bg-editor legend { padding: 0 6px; font-weight: 600; }
.bg-field { display: grid; gap: 6px; min-width: 0; font-size: 12px; font-weight: 550; }
.bg-field select, .bg-field input { width: 100%; min-width: 0; max-width: 100%; padding: 9px; border: 1px solid var(--garis-kuat); border-radius: 8px; background: var(--permukaan-2); color: var(--tinta); font: inherit; }
.bg-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bg-template { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bg-template-pilihan { display: flex; flex-direction: column; gap: 6px; padding: 6px; font-size: 11px; min-width: 0; border: 2px solid transparent; }
.bg-template-swatch { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; }
.bg-template-swatch > svg { display: block; width: 100%; height: 100%; }
.bg-template-pilihan small { font-size: 10px; line-height: 1.35; font-weight: 400; color: var(--tinta-3); }
.bg-template-pilihan[aria-pressed="true"], .bg-kartu[aria-pressed="true"] { border: 2px solid var(--utama-gelap); }
button.bg-kartu { display: block; width: 100%; padding: 0; text-align: left; cursor: pointer; }
.bg-kartu:focus-visible, .bg-template-pilihan:focus-visible { outline: 3px solid #d4a73e; outline-offset: 2px; }
.bg-editor:disabled { opacity: .65; }
@media (max-width: 540px) {
  .bg-editor { padding: 10px; }
  .bg-editor-fields { grid-template-columns: 1fr; }
  .bg-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bg-cakupan { padding: 12px; background: #e7f2ef; border: 1px solid #aacbc2; border-radius: 10px; color: #174f50; }
.bg-isi-ringkas { margin: 0; padding: 10px 12px; border-left: 3px solid var(--utama-gelap); background: var(--permukaan-2); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }