/* CSS wajib dari library page-flip (disalin dari node_modules/page-flip/src/Style/stPageFlip.css,
    tidak ikut di-bundle di dist-nya) */
  .stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); -ms-touch-action: pan-y pinch-zoom; touch-action: pan-y pinch-zoom; }
  .sft__wrapper { position: relative; width: 100%; box-sizing: border-box; }
  .stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
  .stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
  .stf__item { display: none; position: absolute; transform-style: preserve-3d; }
  .stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

  /* Bayangan lipatan tengah (spine) tiap halaman flipbook */
  .flipbook-hal { overflow: hidden; }
  .flipbook-hal::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 9%;
    pointer-events: none;
    z-index: 1;
  }
  .flipbook-hal.--left::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.07) 25%, rgba(0,0,0,0.02) 60%, transparent 100%);
  }
  .flipbook-hal.--right::after {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.07) 25%, rgba(0,0,0,0.02) 60%, transparent 100%);
  }

  .flip-page-img { width: 100%; height: 100%; -webkit-user-select: none; user-select: none; }
  .flip-page-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #9a9a9a; background: #f7f7f7; }

  /* Wadah utama di halaman - full width (di bawah judul, bukan di samping), lebih lebar dari container biasa */
  .menu-section .auto-container { max-width: 1500px; }
  .flip-outer { position: relative; width: 100%; flex: 0 0 100%; max-width: 1400px; margin: 0 auto; padding: 0 56px; }
  .flip-stage { position: relative; }

  .flip-status { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1.4; padding: 24px; }
  .flip-status-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: 100%; max-width: 280px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(30, 75, 37, 0.1);
    padding: 32px 28px;
    text-align: center;
  }
  .flip-spinner { width: 34px; height: 34px; border: 3px solid #e7efe8; border-top-color: #1e4b25; border-radius: 50%; animation: flip-spin 0.8s linear infinite; }
  @keyframes flip-spin { to { transform: rotate(360deg); } }
  .flip-status-text { font-size: 14px; font-weight: 600; color: #1e4b25; margin: 0; }
  .flip-progress { width: 100%; height: 5px; border-radius: 3px; background: #e7efe8; overflow: hidden; }
  .flip-progress-bar { width: 0%; height: 100%; border-radius: 3px; background: #1e4b25; transition: width 0.3s ease; }
  .flip-status-pct { font-size: 11px; color: #9aa89d; margin: -6px 0 0; }
  .flip-status-msg { font-size: 13px; color: #555; margin: 0; }
  .flip-status a { font-size: 12px; font-weight: 600; color: #0000BA; text-decoration: none; }
  .flip-status a:hover { text-decoration: underline; }

  .flip-book-wrap { position: relative; visibility: hidden; height: 0; overflow: hidden; }
  .flip-stage.siap .flip-book-wrap { visibility: visible; height: auto; overflow: visible; filter: drop-shadow(0 18px 22px rgba(0,0,0,0.09)); }

  .flip-shadow-floor { position: absolute; bottom: -28px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.3); filter: blur(14px); display: none; transition: all 0.5s; }
  .flip-stage.siap .flip-shadow-floor { display: block; }
  .flip-shadow-floor.spread-full { left: 3%; right: 3%; }
  .flip-shadow-floor.spread-cover { left: 53%; right: 3%; }
  .flip-shadow-floor.spread-last { left: 3%; right: 53%; }

  .flip-arrow, .flip-expand-btn {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0;
    line-height: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .flip-arrow svg, .flip-expand-btn svg { width: 100%; height: 100%; display: block; }
  .flip-arrow:hover, .flip-expand-btn:hover { opacity: 0.8; }
  .flip-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

  /* Baris kontrol DI BAWAH buku (di luar gambar PDF): panah navigasi kiri, tombol zoom kanan. */
  .flip-controls { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .flip-nav-group { display: flex; align-items: center; gap: 10px; }

  /* Modal layar penuh */
  .flip-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
  }
  .flip-modal-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; color: #fff;
  }
  .flip-modal-title { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Tombol tutup: bawah-kanan, sejajar & seukuran panah navigasi modal (bawah-kiri). */
  .flip-modal-close {
    position: absolute; right: 16px; bottom: 16px; z-index: 2;
    width: 44px; height: 44px; border: none; background: none; padding: 0; line-height: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: opacity 0.2s;
  }
  .flip-modal-close svg { width: 100%; height: 100%; display: block; }
  .flip-modal-close:hover { opacity: 0.8; }
  /* Panah navigasi modal: selalu di bawah-kiri (di luar gambar PDF), sama seperti tampilan biasa. */
  .flip-modal-nav { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 10px; }
  /* Panggung tengah: buku di-center di ruang yang tersisa setelah bar atas (48px) & baris panah bawah
    (~60px) disisihkan, masing-masing + sedikit jarak - bukan di-center ke seluruh layar seperti dulu,
    supaya tidak dempet ke bar atas. Angka top/bottom di sini HARUS sama dengan hitungan tinggiTersedia
    di flipbook.js (fungsi ukur() dalam bukaModal). */
  .flip-modal-stage { position: absolute; top: 60px; left: 0; right: 0; bottom: 72px; display: flex; align-items: center; justify-content: center; }
  /* touch-action: none - semua gestur sentuh di dalam modal ditangani manual lewat JS (pinch-zoom & pan),
    jangan biarkan browser ikut campur (native scroll/zoom) di area ini. */
  .flip-modal-book { position: relative; z-index: 1; overflow: hidden; touch-action: none; }
  .flip-zoom-layer { width: 100%; height: 100%; transform-origin: 0 0; }

  /* Layar HP (sama dengan breakpoint "mode HP" di flipbook.js) - buku full-bleed memenuhi lebar layar;
    baris kontrol (panah + zoom) di bawahnya tetap dikasih sedikit jarak dari tepi layar. */
  @media (max-width: 767px) {
    .flip-outer { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
    .flip-arrow, .flip-expand-btn, .flip-modal-close { width: 36px; height: 36px; }
    .flip-controls { padding: 0 12px; }
  }