/* Soep Folio — pembaca PDF (Flipbook & Slideshow). Overlay gelap, mandiri dari tema. */
.sfp-pdf-actions { display: grid; gap: .6rem; margin: 0 0 .6rem; }
.sfp-pdf-actions:last-child { margin-bottom: 0; }
.sfp-pdf-actions.sfp-pdf-actions > .sfp-pdf-open + .sfp-pdf-open { margin-top: 0; } /* gap sudah mengatur jarak */
.sfp-pdf-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-width: 0; }
.sfp-pdf-open .sfp-pdf-ic { flex: none; }

html.sfpv-lock, html.sfpv-lock body { overflow: hidden; }

.sfpv {
	position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
	background: #0e1412; color: #eef3f0; color-scheme: dark;
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-tap-highlight-color: transparent;
	height: 100vh; height: 100dvh;
}
.sfpv *, .sfpv *::before, .sfpv *::after { box-sizing: border-box; }

/* Pilihan mode */
.sfpv-modes { display: inline-flex; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; overflow: hidden; flex: none; }
.sfpv-seg { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 12px; font-size: 13px; color: #cfd8d3; }
.sfpv-seg:hover { background: rgba(255, 255, 255, .08); }
.sfpv-seg.is-on { background: #2fbf8f; color: #04140d; font-weight: 600; }
.sfpv-seg:focus-visible { outline: 2px solid #8be0c0; outline-offset: -2px; }

.sfpv-b {
	all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px; color: #eef3f0;
}
.sfpv-b:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.sfpv-b:focus-visible { outline: 2px solid #8be0c0; outline-offset: 1px; }
.sfpv-b:disabled { opacity: .35; cursor: default; }
.sfpv-b[hidden], .sfpv-msg[hidden] { display: none; }

/* Panggung */
.sfpv-stage { position: relative; flex: 1 1 auto; min-height: 0; outline: none; display: flex; }
.sfpv-view { flex: 1 1 auto; min-width: 0; display: flex; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y pinch-zoom; }
.sfpv-view.is-zoomed { overflow: auto; cursor: grab; touch-action: auto; -webkit-overflow-scrolling: touch; }
.sfpv-view.is-zoomed.is-pan { cursor: grabbing; }
.sfpv-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #cfd8d3; }
.sfpv-msg a { color: #8be0c0; margin-left: 4px; }

/* Halaman */
.sfpv-pg { position: relative; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.sfpv-pg canvas { display: block; max-width: none; }
.sfpv-pg.is-empty { background: transparent; }
.sfpv-pg.is-loading::after {
	content: ""; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, .12); border-top-color: #2fbf8f;
	animation: sfpv-spin .8s linear infinite;
}
.sfpv-pg.is-err::after { content: "!"; color: #b00; font-size: 28px; font-weight: 700; }
@keyframes sfpv-spin { to { transform: rotate(360deg); } }

/* Slideshow */
.sfpv-slide { margin: auto; padding: 0; flex: none; }
.sfpv-slide .sfpv-pg { box-shadow: 0 10px 40px rgba(0, 0, 0, .5); border-radius: 4px; }
.sfpv-view.is-slides { padding: 16px; }
@media (max-width: 600px) { .sfpv-view.is-slides { padding: 8px; } }

/* Flipbook */
.sfpv-view.is-book > .sfpv-book { margin: auto; } /* margin auto = tetap di tengah, dan bisa digulir penuh saat diperbesar */
.sfpv-book { position: relative; flex: none; perspective: 2400px; transition: transform .6s ease-in-out; }
.sfpv-pane { position: absolute; top: 0; left: 0; }
.sfpv-pane .sfpv-pg { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.sfpv-pane.is-l .sfpv-pg:not(.is-empty)::before,
.sfpv-pane.is-r .sfpv-pg:not(.is-empty)::before,
.sfpv-face .sfpv-pg::before { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; z-index: 1; }
.sfpv-pane.is-l .sfpv-pg::before { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), transparent); }
.sfpv-pane.is-r .sfpv-pg::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .22), transparent); }
.sfpv-leaf { position: absolute; top: 0; transform-origin: left center; transform-style: preserve-3d; z-index: 5; }
.sfpv-leaf.is-turning { transition: transform .6s ease-in-out, opacity .6s ease-in-out; }
.sfpv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sfpv-face.is-back { transform: rotateY(180deg); }
.sfpv-face.is-front .sfpv-pg::before { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .22), transparent); }
.sfpv-face.is-back .sfpv-pg::before { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), transparent); }
.sfpv-face .sfpv-pg { box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }

/* Bilah bawah (satu-satunya bilah): [mode, putar] [« ‹ halaman / total › »] [− +, unduh, layar penuh, tutup]. Penggeser halaman hanya di layar sempit. */
.sfpv-foot {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 8px; padding: 6px 12px;
	padding-bottom: max(6px, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .04);
	border-top: 1px solid rgba(255, 255, 255, .08); flex: none;
}
.sfpv-g { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sfpv-g.is-l { justify-self: start; }
.sfpv-g.is-r { justify-self: end; }
.sfpv-zoom, .sfpv-sys { display: flex; align-items: center; gap: 2px; }
.sfpv-sys { margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .14); }
.sfpv-nav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.sfpv-pgbox {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0 6px; padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #cfd8d3; white-space: nowrap;
	font-variant-numeric: tabular-nums; cursor: text;
}
.sfpv-pgbox:focus-within { border-color: #2fbf8f; box-shadow: 0 0 0 2px rgba(47, 191, 143, .25); }
.sfpv-pgin {
	all: unset; box-sizing: content-box; min-width: 2ch; text-align: right; color: #fff; font: inherit;
	font-variant-numeric: tabular-nums; caret-color: #2fbf8f;
}
.sfpv-range { display: none; grid-column: 1 / -1; width: 100%; min-width: 0; accent-color: #2fbf8f; height: 24px; margin: 0; }
.sfpv-note { grid-column: 1 / -1; text-align: center; font-size: 12px; color: #aab6b0; }
.sfpv-note:empty { display: none; }
.sfpv-cta { color: #8be0c0; }
.sfpv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
	/* HP: baris 1 penggeser; baris 2 putar | halaman | zoom; baris 3 mode | unduh, tutup */
	.sfpv-range { display: block; }
	.sfpv-g { display: contents; }
	.sfpv-play { grid-column: 1; grid-row: 2; justify-self: start; }
	.sfpv-nav { grid-column: 2; grid-row: 2; }
	.sfpv-zoom { grid-column: 3; grid-row: 2; justify-self: end; }
	.sfpv-modes { grid-column: 1 / 3; grid-row: 3; justify-self: start; }
	.sfpv-sys { grid-column: 3; grid-row: 3; justify-self: end; margin-left: 0; padding-left: 0; border-left: 0; }
	.sfpv-fs { display: none; } /* overlay sudah selebar layar; iOS tidak mendukung API layar penuh */
}
@media (max-width: 440px) {
	.sfpv-foot { padding-left: 8px; padding-right: 8px; }
	.sfpv-pgbox { margin: 0 2px; padding: 0 10px; }
	.sfpv-first, .sfpv-last { display: none; } /* di HP lompat awal/akhir lewat penggeser di atasnya */
}

@media (prefers-reduced-motion: reduce) {
	.sfpv-book, .sfpv-leaf.is-turning { transition: none; }
	.sfpv-pg.is-loading::after { animation-duration: 2s; }
}