/* Kontrol flipbook Turn.js untuk Juknis, brosur, dan buku digital. */
.turn-viewer { --flipbook-green: #087f5b; --flipbook-ink: #17352f; --flipbook-muted: #687a75; padding-bottom: 56px; }
.turn-viewer__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin: 12px 0 24px;
}
.turn-viewer__eyebrow { margin: 0 0 8px; color: var(--flipbook-green); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.turn-viewer__header h1 { margin: 0; color: var(--flipbook-ink); font-size: clamp(1.8rem, 3.5vw, 2.65rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; overflow-wrap: anywhere; }
.turn-viewer__hint { margin: 9px 0 0; color: var(--flipbook-muted); font-size: .92rem; }
.turn-viewer__back { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 14px; border: 1px solid #d6e4df; border-radius: 10px; color: #31564b; background: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.turn-viewer__back:hover { border-color: var(--flipbook-green); color: var(--flipbook-green); text-decoration: none; }
.turn-viewer__card { padding: clamp(14px, 2.5vw, 28px); border: 1px solid #e2eae7; border-radius: 18px; background: #f2f5f4; box-shadow: 0 10px 28px rgba(27, 52, 44, .07); }
.turn-viewer__stage { display: flex; align-items: center; justify-content: center; min-height: 320px; width: 100%; overflow: hidden; }
.turn-viewer__book { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 12px 34px rgba(16, 36, 29, .23); touch-action: pan-y; }
.turn-viewer__book:not(.turn-viewer--ready) > .turn-viewer__page:not(:first-child) { display: none; }
.turn-viewer__page { position: relative; overflow: hidden; background: #fff; }
.turn-viewer__page img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; }
.turn-viewer__book[data-image-fit="fill"] .turn-viewer__page img { object-fit: fill; }
.turn-viewer__controls { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 28px); margin: 22px auto 0; }
.turn-viewer__button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 142px; min-height: 44px; padding: 10px 15px; border: 1px solid #cfded8; border-radius: 10px; background: #fff; color: #31564b; font: inherit; font-size: .92rem; font-weight: 750; cursor: pointer; }
.turn-viewer__button:hover:not(:disabled) { border-color: var(--flipbook-green); color: var(--flipbook-green); }
.turn-viewer__button--primary { border-color: var(--flipbook-green); background: var(--flipbook-green); color: #fff; }
.turn-viewer__button--primary:hover:not(:disabled) { border-color: #066747; background: #066747; color: #fff; }
.turn-viewer__button:focus-visible,
.turn-viewer__back:focus-visible { outline: 3px solid rgba(8, 127, 91, .3); outline-offset: 2px; }
.turn-viewer__button:disabled { opacity: .46; cursor: not-allowed; }
.turn-viewer__counter { min-width: 130px; color: var(--flipbook-ink); font-size: .92rem; font-weight: 750; text-align: center; }
.turn-viewer__status { min-height: 1.2em; margin: 14px 0 0; color: var(--flipbook-muted); font-size: .82rem; text-align: center; }
.turn-viewer__empty { padding: 30px 20px; border: 1px solid #d9e9e2; border-radius: 14px; background: #f1f8f4; color: #31564b; text-align: center; }

@media (max-width: 767.98px) {
  .turn-viewer { padding-right: 12px; padding-left: 12px; }
  .turn-viewer__header { align-items: flex-start; flex-direction: column; gap: 14px; margin: 8px 0 18px; }
  .turn-viewer__header h1 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .turn-viewer__hint { font-size: .84rem; }
  .turn-viewer__back { min-height: 40px; padding: 8px 12px; }
  .turn-viewer__card { padding: 10px 8px 12px; border-radius: 14px; }
  .turn-viewer__stage { min-height: 280px; }
  .turn-viewer__controls { gap: 8px; margin-top: 15px; }
  .turn-viewer__button { min-width: 0; min-height: 42px; padding: 9px 10px; font-size: .82rem; }
  .turn-viewer__counter { min-width: 102px; font-size: .82rem; }
  .turn-viewer__status { margin-top: 10px; font-size: .76rem; }
}

@media (max-width: 359.98px) {
  .turn-viewer__controls { gap: 5px; }
  .turn-viewer__button { gap: 5px; padding-right: 8px; padding-left: 8px; }
  .turn-viewer__counter { min-width: 88px; }
}