<!--
======================================================================
KONTEKS PROYEK E-READER / CATATAN UNTUK AI BERIKUTNYA
======================================================================

PENTING — BACA TERLEBIH DAHULU
Bagian ini adalah "ingatan proyek" yang sengaja ditempatkan PALING ATAS
file agar AI yang melanjutkan proyek dapat memahami keadaan proyek sebelum
membaca atau mengubah kode.

======================================================================
1. INFORMASI PROYEK
======================================================================

Nama proyek       : E-Reader
Versi saat ini    : V2 — Kenyamanan Membaca
Target utama      : HP Android / tampilan mobile-first
Bentuk awal       : Aplikasi web yang nantinya dapat dikembangkan menjadi
                    PWA dan/atau APK Android
File utama        : index.html

Tujuan:
Membuat aplikasi pembaca buku digital yang nyaman digunakan di HP,
dimulai dari EPUB, PDF, dan TXT, kemudian dikembangkan secara bertahap.

======================================================================
2. ATURAN KERJA DENGAN PENGGUNA
======================================================================

[WAJIB] Pengguna bukan ahli pemrograman dan lebih nyaman menerima
        FILE index.html LENGKAP yang sudah diperbarui daripada harus
        menyalin dan menggabungkan potongan kode secara manual.

[WAJIB] Jika melakukan perubahan penting, berikan file index.html
        lengkap yang sudah diperbarui.

[WAJIB] Pertahankan fitur yang sudah berjalan kecuali pengguna meminta
        fitur tersebut diubah atau dihapus.

[WAJIB] Jangan meminta pengguna melakukan penggabungan kode manual jika
        perubahan dapat diberikan sebagai file lengkap.

[WAJIB] Sebelum memberikan versi baru, periksa logika kode dan usahakan
        tidak merusak fitur yang sudah ada.

======================================================================
3. ATURAN SARAN DARI AI
======================================================================

AI BOLEH memberikan:
- Saran fitur baru.
- Saran desain yang lebih baik.
- Saran arsitektur yang lebih baik.
- Saran peningkatan performa.
- Saran peningkatan kenyamanan pengguna.
- Saran perbaikan struktur kode.

TETAPI:

[SARAN TIDAK SAMA DENGAN PERINTAH]

AI TIDAK BOLEH langsung menerapkan perubahan besar atau fitur baru hanya
karena AI menganggapnya lebih bagus.

Jika perubahan merupakan pilihan desain, fitur baru, perubahan perilaku,
atau perubahan arsitektur:
1. Sampaikan sarannya kepada pengguna.
2. Jelaskan secara singkat keuntungan dan kekurangannya jika diperlukan.
3. Diskusikan dengan pengguna.
4. Tunggu persetujuan pengguna.
5. Baru implementasikan setelah disetujui.

Pengecualian:
Perbaikan bug, kesalahan teknis, atau masalah keamanan yang jelas dan tidak
mengubah tujuan produk boleh diperbaiki secara langsung bila memang
diperlukan. Jika demikian, tetap catat perubahannya.

======================================================================
4. PRIORITAS KETIKA PENGGUNA MENEMUKAN MASALAH
======================================================================

[PRIORITAS TERTINGGI]

Jika pengguna:
- Mengeluhkan sesuatu.
- Menemukan bug.
- Mengatakan fitur tidak bekerja.
- Menemukan tampilan yang tidak sesuai.
- Mengatakan hasil tidak sesuai harapan.
- Menemukan perilaku aplikasi yang berbeda dari kesepakatan.

Maka masalah tersebut harus DIUTAMAKAN untuk diperiksa dan diselesaikan.

Jangan mengalihkan fokus ke fitur baru sebelum masalah pengguna ditangani,
kecuali pengguna sendiri meminta prioritas lain.

Jika masalah ternyata berasal dari keputusan desain sebelumnya, diskusikan
solusi yang paling sesuai dengan keinginan pengguna.

======================================================================
5. ATURAN DOKUMENTASI PROYEK
======================================================================

Setiap perkembangan penting harus dicatat di bagian dokumentasi file ini.

Gunakan kategori berikut:

[PERBAIKAN]
Perbaikan bug atau kesalahan yang sudah ditemukan.

[FITUR]
Fitur baru yang sudah benar-benar dibuat.

[PERUBAHAN]
Perubahan pada perilaku, tampilan, atau cara kerja fitur yang sudah ada.

[PENINGKATAN]
Peningkatan performa, kenyamanan, aksesibilitas, atau kualitas kode.

[KEPUTUSAN]
Keputusan desain/teknis yang sudah disepakati dengan pengguna.

[RENCANA]
Pekerjaan yang direncanakan tetapi belum dikerjakan.

[MASALAH]
Masalah atau keterbatasan yang diketahui tetapi belum selesai.

[PENGUJIAN]
Hasil pengujian penting, termasuk perangkat/file yang diuji dan hasilnya.

[PENGEMBALIAN]
Perubahan yang sengaja dibatalkan atau dikembalikan ke versi sebelumnya.

[SARAN]
Ide dari AI atau pengguna yang masih dalam tahap pembahasan dan
BELUM DISETUJUI untuk dibuat.

[DISETUJUI]
Saran/ide yang sudah disetujui pengguna dan siap dimasukkan ke
pengembangan.

[VERSI]
Catatan ketika mencapai milestone atau versi baru.

[WAJIB] Jika sebuah saran belum disetujui, jangan menulisnya sebagai
        fitur yang sudah dibuat.

[WAJIB] Setelah perubahan diterapkan, perbarui kategori yang sesuai dan
        tambahkan ringkasannya ke RIWAYAT PERKEMBANGAN.

======================================================================
6. KONDISI SAAT INI — FITUR YANG SUDAH DIKERJAKAN
======================================================================

[SELESAI] Rak buku / Library.
[SELESAI] Menambahkan buku dari penyimpanan perangkat (bisa banyak file
          sekaligus).
[SELESAI] Deteksi format dari ekstensi, dengan cadangan deteksi dari tipe
          MIME bila nama file tidak memiliki ekstensi.
[SELESAI] Membaca EPUB.
[SELESAI] Membaca PDF.
[SELESAI] Membaca TXT.
[SELESAI] Penyimpanan file buku secara lokal menggunakan IndexedDB.
[SELESAI] Penyimpanan progres membaca terpisah dari file buku
          (store "progress"), sehingga file besar tidak ditulis ulang
          setiap kali halaman berpindah.
[SELESAI] Cache peta lokasi EPUB (store "locations") agar tidak dihitung
          ulang setiap kali buku dibuka.
[SELESAI] Pencarian buku di Library.
[SELESAI] Membaca judul/penulis EPUB jika metadata tersedia.
[SELESAI] Mengambil sampul EPUB jika tersedia (disimpan sebagai Blob,
          tetap ada setelah aplikasi ditutup).
[SELESAI] Jam & tanggal realtime di rak buku.
[SELESAI] Sampul PDF dibuat otomatis dari halaman pertama saat impor
          (thumbnail kecil ~240px lebar, disimpan sebagai Blob lewat
          mekanisme yang sama dengan sampul EPUB).
[SELESAI] Pembaca EPUB dengan mode halaman.
[SELESAI] Ganti halaman EPUB melalui geser (swipe), ketuk sisi kiri/kanan,
          tombol ‹ ›, dan tombol panah keyboard.
[SELESAI] Pembaca PDF dengan render bertahap (hanya halaman di sekitar
          layar yang dirender, sisanya dilepas dari memori).
[SELESAI] Nomor halaman PDF pada bilah bawah.
[SELESAI] Pembaca TXT.
[SELESAI] Menampilkan persentase kemajuan membaca.
[SELESAI] Menyimpan posisi terakhir membaca untuk EPUB, PDF, dan TXT.
[SELESAI] Slider progres yang berfungsi untuk ketiga format.
[SELESAI] Mengatur ukuran teks.
[SELESAI] Tema terang, sepia, gelap (termasuk untuk isi halaman EPUB).
[SELESAI] Kontrol pembaca dasar dengan sembunyi otomatis.
[SELESAI] Navigasi keyboard dasar untuk pengujian desktop.
[SELESAI] Menghapus buku dari Library melalui tekan lama / klik kanan.
[SELESAI] Dukungan safe-area agar kontrol tidak tertutup poni atau bilah
          gestur Android.
[SELESAI] Pesan singkat (toast) untuk proses impor dan kesalahan ringan.
[SELESAI] Service Worker: setelah aplikasi berhasil dimuat satu kali
          dengan internet, mesin EPUB & PDF tersimpan di cache HP dan
          tidak lagi butuh internet untuk dibuka berikutnya (syarat:
          diakses lewat http/https, mis. domain Netlify — lihat bagian
          KEPUTUSAN).
[SELESAI] Web app manifest dasar (manifest.json) agar bisa
          "Add to Home Screen".
[SELESAI] Ikon PWA (192px, 512px, & versi maskable) — bertema buku
          terbuka, warna senada tema sepia aplikasi.
[SELESAI] APK Android (TWA hasil PWA Builder) sudah dibuat dan
          terpasang di HP pengguna.

--- Tambahan V2 ---

[SELESAI] Daftar Isi. EPUB memakai navigasi bawaan buku; PDF memakai
          outline/bookmark bawaan berkas dan mengubah tujuannya
          menjadi nomor halaman. TXT tidak punya daftar isi.
[SELESAI] Pencarian teks DI DALAM buku, untuk ketiga format. EPUB
          dicari per bagian (spine) — tiap bagian dimuat sebentar lalu
          dilepas lagi agar hemat memori; PDF dicari lewat lapisan
          teks tiap halaman; TXT dicari langsung di isinya. Hasil
          muncul bertahap sambil pencarian berjalan, dibatasi 120
          hasil, dan bisa dibatalkan dengan menutup lembar.
[SELESAI] Bookmark untuk ketiga format (store IndexedDB baru
          "bookmarks", DB_VERSION naik ke 3). Judul bookmark diambil
          otomatis dari potongan teks di posisi itu. Bookmark ikut
          terhapus bila bukunya dihapus dari rak.
[SELESAI] Pilihan jenis huruf: Serif, Sans, Mono (berlaku untuk EPUB
          dan TXT).
[SELESAI] Pengaturan jarak antarbaris: Rapat / Normal / Longgar.
[SELESAI] Pengaturan margin baca: Sempit / Sedang / Lebar. Pada EPUB,
          lebar area berubah sehingga halaman dihitung ulang lewat
          rendition.resize(), lalu posisi baca dikembalikan.
[SELESAI] Kontrol zoom PDF sendiri (75%-300%). Halaman DIRENDER ULANG
          pada lebar baru, bukan diperbesar sebagai gambar — jadi teks
          tetap tajam (menuntaskan masalah yang ditunda dari V1.3).
[SELESAI] Panel pengaturan diperluas: pintasan Daftar Isi / Cari /
          Bookmark, tombol "Tandai posisi ini", dan penanda pilihan
          yang sedang aktif.
[SELESAI] Lembar (bottom sheet) serbaguna untuk daftar isi, hasil
          pencarian, dan daftar bookmark.
[SELESAI] EPUB ikut dihitung ulang saat layar diputar.

======================================================================
7. MASALAH / KETERBATASAN YANG DIKETAHUI
======================================================================

[MASALAH] Mesin EPUB dan PDF masih dimuat dari CDN. Artinya aplikasi
          belum sepenuhnya mandiri/offline.

[MASALAH] PDF mempertahankan bentuk halaman sehingga tidak memiliki
          fleksibilitas teks seperti EPUB.

[MASALAH] File TXT yang sangat besar dimuat sekaligus ke DOM; belum ada
          pemuatan bertahap.

[MASALAH] Peta lokasi EPUB dihitung sekali saat buku pertama dibuka;
          pada EPUB besar proses ini masih terasa di latar belakang.

[MASALAH] Ikon PWA masih ikon sederhana buatan AI (bentuk buku
          generik), belum didesain ulang oleh pengguna. Ganti file
          icon-192.png / icon-512.png / icon-512-maskable.png kapan
          saja kalau mau tampilan beda.

[MASALAH] Pengelolaan buku masih sederhana (belum ada koleksi, sortir,
          atau edit metadata).

[MASALAH] Pencarian di dalam PDF besar memakan waktu karena lapisan
          teks tiap halaman dibaca satu per satu. Sudah dibuat
          bertahap (hasil muncul sambil jalan, bisa dibatalkan), tapi
          belum ada indeks yang disimpan.

[MASALAH] Pencarian belum menyorot kata yang ditemukan di halaman —
          aplikasi baru melompat ke posisinya.

[MASALAH] Pada PDF hasil pindaian (gambar tanpa lapisan teks),
          pencarian tidak menemukan apa pun. Ini batasan berkasnya,
          bukan bug.

[MASALAH] Perilaku pada perangkat HP nyata sudah mulai diuji (V1.2
          offline terbukti berhasil di Netlify), tapi belum seluruhnya.

[SELESAI di V2] Zoom PDF. Sebelumnya pinch bawaan browser hanya
          memperbesar gambar kanvas beresolusi tetap sehingga terlihat
          pecah. Sekarang ada kontrol zoom di panel pengaturan yang
          MERENDER ULANG halaman pada lebar baru. Catatan: pinch
          bawaan browser tetap ada dan tetap bisa terlihat pecah —
          pakai kontrol zoom di panel untuk hasil tajam.

======================================================================
8. FITUR YANG BELUM DIKERJAKAN
======================================================================

[RENCANA] Mode layar penuh / imersif.
[RENCANA] Menyorot kata hasil pencarian di halaman.
[RENCANA] Highlight.
[RENCANA] Catatan/annotations.
[RENCANA] Koleksi/folder buku.
[RENCANA] Sortir & filter rak buku.
[RENCANA] Edit metadata buku (judul, penulis, sampul).
[RENCANA] Riwayat membaca.
[RENCANA] Statistik membaca.
[RENCANA] Dukungan CBZ/CBR untuk komik.
[RENCANA] Dukungan MOBI jika layak secara teknis.
[RENCANA] Text-to-Speech.
[RENCANA] Kamus/pencarian kata.
[RENCANA] Terjemahan.
[RENCANA] Penjelasan berbantuan AI.
[RENCANA] Ringkasan bab berbantuan AI.
[RENCANA] Sinkronisasi cloud.
[RENCANA] APK Android.
[RENCANA] Cadangan dan pemulihan data.
[RENCANA] Pemuatan bertahap untuk TXT berukuran besar.
[RENCANA] Menerbitkan aplikasi ke Google Play (berkas .aab dan
          signing.keystore sudah ada di tangan pengguna).

[SEDANG BERJALAN] Menghilangkan bilah URL pada APK lewat Digital Asset
          Links. File .well-known/assetlinks.json SUDAH disiapkan pada
          folder deploy V2 ini, berisi sidik jari SHA-256 dari paket
          Android dev.pages.ereader_bvy.twa. Tinggal: deploy folder ini
          ke host, buka
          https://ereader-bvy.pages.dev/.well-known/assetlinks.json di
          browser untuk memastikan filenya benar-benar terbaca, lalu
          pasang ulang APK-nya. Kalau sidik jari tidak cocok atau file
          tidak terbaca, Android diam-diam kembali menampilkan bilah
          URL — gejalanya mirip "tidak terjadi apa-apa".

======================================================================
9. ROADMAP
======================================================================

VERSI 1 — FONDASI
Tujuan: membuat aplikasi dasar yang dapat menyimpan dan membaca buku.

- Library
- EPUB
- PDF
- TXT
- Navigasi pembaca
- Progress membaca
- Melanjutkan dari posisi terakhir
- Ukuran teks
- Tema terang/sepia/gelap

VERSI 2 — KENYAMANAN MEMBACA  [SELESAI 29-08-2026]
- Daftar isi                      [selesai]
- Pencarian dalam buku            [selesai]
- Bookmark                        [selesai]
- Jenis font                      [selesai]
- Margin                          [selesai]
- Jarak antarbaris                [selesai]
- Pengaturan membaca lebih lengkap [selesai]
- Kontrol PDF lebih baik          [selesai — zoom render ulang]
- Peningkatan keterbacaan         [selesai]

VERSI 3 — ORGANISASI DAN CATATAN
- Highlight
- Catatan
- Koleksi/folder
- Riwayat membaca
- Statistik
- Pengelolaan metadata buku
- CBZ/CBR

VERSI 4 — PEMBACA CERDAS
- Text-to-Speech
- Kamus
- Terjemahan
- Penjelasan dengan AI
- Ringkasan bab
- Bantuan membaca

VERSI 5 — APLIKASI DAN SINKRONISASI
- PWA
- Dukungan offline penuh
- APK Android
- Sinkronisasi cloud
- Sinkronisasi posisi membaca antarperangkat
- Cadangan/pemulihan

CATATAN:
Roadmap dapat berubah, tetapi perubahan besar harus didiskusikan dengan
pengguna terlebih dahulu.

======================================================================
10. ARSITEKTUR PENGEMBANGAN
======================================================================

Konsep utama:

Buku
  ↓
Deteksi format
  ↓
Mesin pembaca sesuai format
  ↓
Antarmuka Reader
  ↓
Pengaturan + Progress + Posisi
  ↓
Penyimpanan lokal

Format awal:
EPUB → mesin EPUB
PDF  → mesin PDF
TXT  → mesin TXT

Prinsip:
- Mobile-first.
- Sederhana.
- Local-first jika memungkinkan.
- Bertahap.
- Stabilitas lebih penting daripada jumlah fitur.
- Jangan membuat arsitektur rumit sebelum diperlukan.
- Pertahankan kompatibilitas data lama jika memungkinkan.
- Perubahan arsitektur besar harus dibahas dengan pengguna.

======================================================================
11. RIWAYAT PERKEMBANGAN
======================================================================

--- V1 — FONDASI ---

[VERSI] V1 — Fondasi awal dibuat.

[FITUR] Rak buku dan proses penambahan buku dibuat.

[FITUR] Dukungan awal EPUB, PDF, dan TXT dibuat.

[FITUR] Penyimpanan buku lokal menggunakan IndexedDB dibuat.

[FITUR] Progress membaca dan penyimpanan posisi terakhir dibuat.

[FITUR] Pengaturan ukuran teks dan tiga tema membaca dibuat.

[KEPUTUSAN] Pada tahap awal proyek menggunakan satu file index.html agar
            pengguna mudah mengganti file secara utuh ketika melakukan
            pengujian.

[KEPUTUSAN] Format EPUB, PDF, dan TXT dipilih sebagai format awal, bukan
            hanya EPUB.

[KEPUTUSAN] Aplikasi dirancang agar Reader dapat dikembangkan menjadi
            sistem modular berdasarkan format buku.

[KEPUTUSAN] Catatan proyek ditempatkan di PALING ATAS index.html agar
            AI lain dapat membaca konteks sebelum membaca kode.

[KEPUTUSAN] AI boleh memberikan saran pengembangan, tetapi perubahan
            pilihan desain/fitur baru harus dibahas dan disetujui pengguna.

[KEPUTUSAN] Keluhan atau temuan pengguna menjadi prioritas sebelum
            pengembangan fitur yang tidak berkaitan.

[KEPUTUSAN] Semua perubahan penting wajib dicatat berdasarkan kategorinya.

--- V1.1 — PERBAIKAN HASIL REVIEW (27-08-2026) ---

[VERSI] V1.1 — Perbaikan menyeluruh atas 10 masalah yang ditemukan pada
        review kode V1. Tidak ada fitur V1 yang dihapus.

[PERBAIKAN] EPUB kini dapat diganti halaman di layar sentuh. Sebelumnya
            satu-satunya cara adalah tombol panah keyboard, sehingga di HP
            buku tidak bisa dibaca melewati halaman pertama. Ditambahkan
            geser kiri/kanan, ketuk sisi kiri/kanan layar, dan tombol
            ‹ › pada bilah bawah. Ketukan di area tengah tetap
            membuka/menutup kontrol.

[PERBAIKAN] Progres membaca tidak lagi menulis ulang seluruh file buku ke
            IndexedDB setiap kali halaman berpindah. Data progres
            dipindahkan ke object store terpisah bernama "progress" dan
            penulisannya diberi jeda (maksimal sekali per detik, ditambah
            penyimpanan paksa saat keluar dari pembaca atau aplikasi
            ditutup).

[PERBAIKAN] PDF tidak lagi merender seluruh halaman sekaligus saat buku
            dibuka. Halaman dibuat sebagai kotak kosong berukuran benar,
            lalu hanya halaman di sekitar layar yang dirender. Halaman yang
            jauh dilepas kembali dari memori agar tidak boros RAM.

[PERBAIKAN] Sampul EPUB tidak lagi hilang setelah aplikasi ditutup.
            Sebelumnya yang disimpan adalah objectURL sementara; sekarang
            Blob sampul yang disimpan dan URL-nya dibuat ulang saat rak
            buku ditampilkan.

[PERBAIKAN] Tema gelap/sepia kini langsung diterapkan pada isi halaman
            EPUB saat buku dibuka, bukan hanya ketika tombol tema ditekan.

[PERBAIKAN] Slider progres tidak lagi memiliki dua handler yang saling
            bertabrakan, dan sekarang berfungsi untuk EPUB, PDF, dan TXT.
            Slider mengunci pembaruan otomatis selama digeser agar tidak
            saling dorong dengan posisi baca.

[PERBAIKAN] Pemulihan posisi TXT diperbaiki. Sebelumnya rumus penyimpanan
            dan pemulihan posisi berbeda sehingga posisi meleset. Sekarang
            keduanya memakai rasio scroll yang sama.

[PERBAIKAN] Tekan lama untuk menghapus buku tidak lagi ikut membuka buku
            setelah dialog konfirmasi ditutup.

[PERBAIKAN] IntersectionObserver PDF yang sebelumnya dibuat satu per
            halaman dan tidak pernah dilepas, diganti dengan satu observer
            yang diputus saat pembaca ditutup. Listener scroll juga
            dibersihkan dengan benar.

[PERBAIKAN] Peta lokasi EPUB kini disimpan ke IndexedDB (store
            "locations") sehingga tidak dihitung ulang setiap kali buku
            dibuka, dan tampilan tidak lagi melompat setelah perhitungan
            selesai.

[PERBAIKAN] Penanganan kesalahan saat membuka buku diperbaiki: jika buku
            gagal dibuka, aplikasi kembali ke rak buku dengan pesan, tidak
            lagi berhenti pada layar pembaca yang kosong.

[PENINGKATAN] Impor mendukung beberapa file sekaligus, dan format dideteksi
              dari tipe MIME bila nama file tidak memiliki ekstensi
              (beberapa pengelola file Android tidak menyertakan ekstensi).

[PENINGKATAN] Ditambahkan dukungan safe-area (env safe-area-inset) agar
              bilah atas dan bawah tidak tertutup poni atau bilah gestur.

[PENINGKATAN] Pesan singkat (toast) menggantikan sebagian alert agar tidak
              memutus alur pemakaian.

[PERUBAHAN] Tombol ◐ pada bilah atas sekarang langsung memutar tema
            terang → sepia → gelap. Sebelumnya tombol ini membuka panel
            yang sama persis dengan tombol ⋮, sehingga fungsinya ganda.
            Panel pengaturan tetap bisa dibuka lewat tombol ⋮.

[PERUBAHAN] Struktur database dinaikkan ke DB_VERSION 2 dengan tambahan
            store "progress" dan "locations". Data buku lama tetap terbaca;
            progres lama pada record buku dipakai sebagai nilai awal.

[KEPUTUSAN] Dokumentasi proyek berbahasa Inggris yang sebelumnya berada di
            dalam blok <script> dihapus karena isinya menduplikasi
            dokumentasi berbahasa Indonesia di bagian atas file dan sudah
            mulai berbeda isinya. Mulai V1.1 hanya ada SATU sumber
            dokumentasi, yaitu blok ini.

[PENGUJIAN] Perbaikan V1.1 belum diuji pada HP Android. Gunakan daftar
            pengujian pada bagian bawah dokumen ini.

--- V1.2 — OFFLINE VIA SERVICE WORKER (27-08-2026) ---

[VERSI] V1.2 — Menghilangkan ketergantungan internet setiap kali
        aplikasi dibuka, lewat Service Worker (bukan menanam kode
        library ke index.html).

[MASALAH] Percobaan pertama untuk V1.2 adalah menanam kode epub.js &
          pdf.js langsung ke index.html supaya 100% offline sejak awal.
          Ini DIBATALKAN karena alat pengambil kode di sisi AI memotong
          file di tengah jalan (kode besar berisiko rusak), dan
          mengetik ulang kode ter-minify sepanjang itu terlalu berisiko
          (satu karakter salah bisa merusak seluruh aplikasi).

[KEPUTUSAN] Sebagai gantinya dipakai Service Worker (file sw.js baru):
            mesin EPUB/PDF dari CDN otomatis tersimpan di cache HP
            setelah pemakaian pertama yang berhasil, lalu dipakai dari
            cache pada pembukaan berikutnya tanpa internet.

[KEPUTUSAN PENTING] Service Worker HANYA aktif kalau halaman dibuka
                    lewat http:// atau https:// (termasuk
                    http://localhost). Ia tidak bisa didaftarkan sama
                    sekali kalau file dibuka langsung dari file manager
                    (file:// atau content://) — ini batasan keamanan
                    bawaan Chrome, bukan bug di aplikasi ini. Karena
                    itu, pengguna memutuskan proyek ini akan di-deploy
                    ke Netlify (seperti [[project-andri]]), bukan
                    dibuka langsung dari file manager.

[FITUR] File sw.js baru: precache app shell (index.html, manifest.json)
        dengan strategi network-first, dan precache epub.min.js +
        pdf.min.js + pdf.worker.min.js dengan strategi cache-first.
        Versi cache memakai CACHE_VERSION di sw.js — naikkan angkanya
        kalau daftar library berubah supaya cache lama dibuang.

[FITUR] manifest.json dasar ditambahkan supaya aplikasi bisa dipasang
        ke layar utama HP (Add to Home Screen). Ikon PWA belum dibuat.

[RENCANA] Deploy index.html + sw.js + manifest.json ke Netlify.

--- V1.3 — PERBAIKAN RENDER PDF (27-08-2026) ---

[PENGUJIAN] Deploy Netlify berhasil, aplikasi terbukti bisa dibuka
            offline setelah pemakaian pertama (V1.2 bekerja).

[PENGUJIAN] Saat baca buku PDF nyata ("Sun-tzu Seni Perang", 306
            halaman) pengguna melaporkan 4 masalah: (1) render halaman
            lambat, (2) teks buram, (3) tampilan halaman terkesan
            rata kanan/tidak rapi, (4) saat di-pinch-zoom halaman
            pecah seperti digambar, tidak terbaca.

[PERBAIKAN] Resolusi render kanvas PDF dinaikkan. Sebelumnya dibatasi
            maksimal 2x device pixel ratio, padahal banyak HP Android
            (termasuk seri Transsion/Infinix/Tecno milik pengguna)
            punya rasio piksel 2.5-3x — itulah sebabnya teks tampak
            buram walau belum di-zoom. Sekarang target dinaikkan ke
            1.5x device pixel ratio (maks 4x), dengan batas aman
            PDF_MAX_CANVAS_DIMENSION (2200px) di sisi terpanjang
            kanvas supaya tidak boros memori pada halaman besar.

[PERBAIKAN] Halaman PDF di latar (hasil pre-render IntersectionObserver
            saat menggulir) sekarang dirender satu per satu lewat
            antrean (queuePdfRender), bukan langsung berbarengan.
            Sebelumnya beberapa kanvas berat bisa dirender bersamaan
            dan membuat aplikasi terasa lambat/macet.

[MASALAH] Blur/pecah saat di-pinch-zoom TIDAK sepenuhnya hilang hanya
          dengan menaikkan resolusi — ini keterbatasan bawaan: halaman
          PDF dirender sebagai gambar (kanvas) beresolusi tetap, jadi
          begitu pengguna mencubit-zoom browser cukup jauh, gambar
          tetap akan pecah pada titik tertentu. Perbaikan tuntas perlu
          kontrol zoom khusus di dalam aplikasi (re-render ulang pada
          skala baru tiap kali diperbesar), yang sudah tercatat sejak
          awal di roadmap V2 sebagai "[RENCANA] Kontrol zoom PDF yang
          lebih baik" — belum dikerjakan di V1.3 ini, perlu didiskusikan
          dulu dengan pengguna karena berarti fitur baru, bukan sekadar
          perbaikan bug.

[MASALAH] Penyebab tampilan "rata kanan" pada halaman sampul belum
          dipastikan: berdasarkan tinjauan kode, elemen halaman PDF
          selalu diberi width 100% dan berada dalam wadah yang
          di-center, sehingga tidak ditemukan bug CSS yang jelas untuk
          ini. Kemungkinan besar itu adalah bagian dari hasil scan
          buku fisik itu sendiri (foto sampul dengan latar kosong di
          sekelilingnya), bukan bug aplikasi — tapi ini belum
          dikonfirmasi ke pengguna.

[PENGUJIAN] Dikonfirmasi oleh pengguna: tampilan "rata kanan" HANYA
            terjadi di halaman sampul depan, TIDAK terjadi di halaman
            isi/teks. Ini menguatkan dugaan bahwa itu memang bagian
            dari hasil scan sampul buku fisiknya, bukan bug tata letak
            di aplikasi. Tidak ada perubahan kode untuk poin ini.

[KEPUTUSAN] Pengguna memutuskan kontrol zoom PDF khusus (poin 3, agar
            tidak pecah saat pinch-zoom) TETAP ditunda sebagai roadmap
            V2, dan sesi ini fokus menuntaskan V1 dulu.

[PERBAIKAN] (V1.4) Tinggi kotak placeholder tiap halaman PDF sekarang
            dihitung ulang pakai proporsi halaman itu sendiri saat
            benar-benar dirender, bukan memakai proporsi halaman
            sampul sebagai patokan untuk seluruh 306 halaman (bug
            kecil yang ditemukan saat menelusuri laporan poin 4 —
            berpotensi bikin gepeng/melar sesaat pada halaman yang
            proporsinya beda dari sampul). Baris `aspectRatio` lama
            dihapus karena sebenarnya tidak pernah berefek (tinggi
            kotak sudah diatur eksplisit lewat piksel, bukan lewat
            CSS aspect-ratio).

[PENGUJIAN] Setelah perbaikan V1.4, pengguna mengonfirmasi: (1) dugaan
            "sampul rata kanan = bagian dari file asli" terbukti benar
            (dicek lewat pembaca PDF lain), dan (2) pengujian umum
            EPUB/TXT/PDF lain berjalan lancar, tidak ada bug baru.
            V1 dianggap stabil untuk pemakaian sehari-hari.

--- V1.5 — IKON PWA (27-08-2026) ---

[FITUR] Tiga ikon PWA dibuat (icon-192.png, icon-512.png,
        icon-512-maskable.png) — ikon buku terbuka sederhana, warna
        senada tema sepia aplikasi (coklat tua + krem + aksen merah
        bata sebagai pembatas buku). Dibuat otomatis oleh AI, belum
        didesain ulang oleh pengguna.

[FITUR] manifest.json diperbarui dengan daftar icons (any + maskable).
        index.html diberi <link rel="icon"> dan <link
        rel="apple-touch-icon">. sw.js diperbarui (CACHE_VERSION naik
        ke e-reader-v2) supaya ketiga ikon ikut tersimpan untuk
        offline dan cache lama otomatis dibuang.

[RENCANA] Kalau pengguna mau ikon dengan desain sendiri, tinggal ganti
          ketiga file PNG tersebut (ukuran & nama file tetap sama)
          tanpa perlu ubah kode lain.

[PENGUJIAN] Instal PWA sungguhan (bukan pintasan biasa) sempat gagal
            berkali-kali di HP pengguna — ikon selalu jatuh ke huruf
            "N" default walau manifest & ikon terbukti benar
            (dicek langsung, dan Service Worker terbukti ACTIVATED
            lewat chrome://serviceworker-internals). Setelah ditelusuri,
            akar masalahnya BUKAN di kode aplikasi, melainkan status
            "Private" di pengaturan akses situs Netlify — dikonfirmasi
            pengguna ini juga berlaku pada deploy PERTAMA
            (glittering-douhua-effb7e.netlify.app, lewat Netlify Drop
            tanpa akun), jadi dugaan awal "kedaluwarsa karena tanpa
            akun" KURANG TEPAT/tidak terbukti; kemungkinan besar dari
            awal memang soal private/public saja. Situs private lolos
            tes normal di browser pengguna sendiri (karena statusnya
            sudah "diizinkan" untuk sesi itu), tapi ditolak oleh alat
            luar seperti PWA Builder maupun saat AI mencoba
            memverifikasi manifest secara langsung. Setelah situs
            dijadikan "Public" di pengaturan Netlify, instal PWA & ikon
            langsung normal.

[KEPUTUSAN] Alamat Netlify AKTIF & PERMANEN untuk proyek ini per akhir
            sesi ini: https://timely-kashata-eedfb6.netlify.app
            (bukan lagi glittering-douhua-effb7e.netlify.app — sudah
            tidak dipakai; pengguna beralih ke deploy dengan akun agar
            situsnya permanen). Situsnya sudah di-set "Public" di
            pengaturan Netlify.

[CATATAN UNTUK SESI BERIKUTNYA] Kalau nanti mengganti alamat Netlify
            lagi (misalnya ganti nama site atau bikin site baru),
            SELALU pastikan statusnya "Public" di Netlify (Site
            settings → Access), bukan cuma sekadar sudah live/ter-
            deploy — ini penyebab utama yang terbukti berulang kali di
            sesi ini, baik di situs tanpa akun maupun situs berakun.

--- V1.6 — SAMPUL PDF (27-08-2026) ---

[PENGUJIAN] Aplikasi berhasil dibungkus jadi APK lewat PWA Builder dan
            terpasang normal di HP pengguna sebagai aplikasi
            sungguhan (bukan sekadar shortcut) — bagian PWA/instalasi
            dianggap SELESAI untuk V1.

[FITUR] Sampul PDF otomatis. Sebelumnya cuma EPUB yang punya sampul;
        PDF selalu tampil ikon dokumen generik di rak buku. Sekarang
        saat PDF diimpor, halaman pertamanya dirender kecil (skala
        ke lebar ~240px, format JPEG kualitas 0.82 supaya ringan) dan
        disimpan sebagai coverBlob — memakai jalur penyimpanan &
        tampilan yang SAMA dengan sampul EPUB (coverSource di
        renderLibrary), jadi tidak ada perubahan di bagian rak buku.
        Kalau render sampul gagal (PDF rusak dsb.), impor buku tetap
        lanjut, cuma tanpa sampul — tidak membatalkan impor.

[PERBAIKAN] pdfjsLib.GlobalWorkerOptions.workerSrc yang sebelumnya
            hanya diatur di dalam openPDF() (saat buku dibuka untuk
            dibaca), sekarang diatur SEKALI saat aplikasi pertama kali
            dimuat (fungsi start()). Ini perlu supaya pembuatan sampul
            PDF saat impor (yang terjadi SEBELUM buku pernah dibuka)
            juga memakai worker asli, bukan fallback pdf.js yang jalan
            di thread utama (lebih lambat, bisa bikin UI macet
            sesaat).

--- V1.7 — PINDAH HOSTING KE CLOUDFLARE (28-08-2026) ---

[MASALAH] Saat mau deploy update V1.6, akun Netlify pengguna (satu
          tim dengan [[project-andri]]) kehabisan "operational
          credits" — deploy produksi baru dibatasi sampai siklus
          tagihan berikutnya atau upgrade. Situs Netlify LAMA
          (timely-kashata-eedfb6.netlify.app) tetap hidup normal dan
          tidak terpengaruh, cuma tidak bisa menerima deploy baru.

[KEPUTUSAN] Pindah hosting untuk proyek E-Reader ke Cloudflare Pages
            (lewat cloudflare.com/drop — fitur baru Cloudflare sejak
            Juli 2026, alurnya sama seperti Netlify Drop: seret
            folder/zip, dapat pratinjau sementara, lalu "Claim" untuk
            dijadikan permanen di akun gratis). Dipilih karena akunnya
            terpisah total dari Netlify (tidak ikut kena batasan
            kredit di atas), dan untuk situs statis seperti ini
            paket gratisnya tidak membatasi bandwidth/request sama
            sekali.

[KEPUTUSAN] Alamat hosting AKTIF & PERMANEN untuk proyek ini per akhir
            sesi ini:
            https://drop-850ce9c7-84c.sim-anex0199.workers.dev
            Ini domain "workers.dev" (bukan "pages.dev") — rupanya
            Cloudflare Drop men-deploy lewat infrastruktur Workers,
            bukan produk Pages klasik. Tetap HTTPS & permanen di
            bawah akun Cloudflare pengguna, jadi Service Worker &
            instalasi PWA tetap berfungsi normal di alamat ini.
            Alamat Netlify (timely-kashata-eedfb6.netlify.app) dan
            alamat Netlify Drop paling awal (glittering-douhua-effb7e
            .netlify.app) SUDAH TIDAK DIPAKAI — jangan dipakai lagi
            sebagai rujukan alamat aktif proyek ini.

[CATATAN UNTUK SESI BERIKUTNYA] APK yang sudah terpasang di HP
            (dibungkus dari alamat Netlify lama lewat PWA Builder)
            perlu dibungkus ULANG dari alamat Cloudflare baru ini
            supaya sinkron dengan versi kode terbaru (V1.6 sampul PDF
            dst). APK lama tetap akan bisa dibuka (asal situs lamanya
            belum benar-benar mati), tapi tidak akan menerima
            pembaruan apa pun karena menunjuk ke situs yang sudah
            ditinggalkan.

--- V1.8 — JAM REALTIME & SAMPUL LEBIH KECIL (28-08-2026) ---

[FITUR] Jam & tanggal realtime ditambahkan di rak buku, tepat di bawah
        baris judul "E-Reader". Format Indonesia (mis. "Jumat, 28
        Agustus 2026" + jam:menit:detik), diperbarui tiap detik.
        Jam sengaja DIHENTIKAN saat masuk mode baca (stopClock di
        openBook) dan dijalankan lagi saat kembali ke rak buku
        (startClock di closeReader) — supaya tidak ada timer jalan
        percuma tiap detik selama membaca.

[PERBAIKAN] Sampul di rak buku diperkecil. Sebelumnya CSS responsif
            MEMAKSA tepat 2 kolom di layar <=640px, jadi di HP tiap
            sampul melebar setengah layar dan cuma sedikit buku yang
            muat. Sekarang grid menyesuaikan lebar layar
            (auto-fill minmax ~102px di HP, ~118px di layar besar) —
            umumnya jadi 3 kolom di HP dan tetap turun ke 2 kolom di
            layar yang sangat sempit. Ukuran judul, keterangan, padding,
            dan bar progres ikut dikecilkan agar proporsional.

[KEPUTUSAN] Pengguna memutuskan permintaan "bilah URL tidak terlihat"
            DITUNDA dan dijadikan item ROADMAP PALING TERAKHIR —
            dikerjakan setelah semua fitur lain selesai.

[MASALAH] Permintaan pengguna agar bilah URL tidak terlihat (seperti
          [[project-andri]]) BELUM selesai di sesi ini — ini tidak bisa
          diselesaikan lewat kode aplikasi. manifest.json sudah
          "display": "standalone" sejak V1.2, tapi APK hasil PWA
          Builder (TWA) tetap menampilkan bilah URL sampai kepemilikan
          domain diverifikasi lewat Digital Asset Links: file
          assetlinks.json (berisi sidik jari SHA-256 dari APK) harus
          diunggah ke path /.well-known/assetlinks.json di host.
          Lihat CATATAN di bawah.

[CATATAN UNTUK SESI BERIKUTNYA] Langkah menghilangkan bilah URL pada
          APK: (1) di PWA Builder, unduh paket Android — di dalamnya
          ada assetlinks.json beserta nilai SHA-256 fingerprint;
          (2) buat folder ".well-known" berisi file assetlinks.json
          itu, taruh sejajar dengan index.html; (3) deploy ulang ke
          Cloudflare bersama file lain sehingga bisa diakses di
          https://<domain>/.well-known/assetlinks.json; (4) pasang
          ulang APK-nya. Kalau fingerprint tidak cocok atau file tidak
          terbaca, Android diam-diam kembali menampilkan bilah URL —
          gejalanya mirip "tidak ada yang terjadi", jadi verifikasi
          dulu file itu bisa dibuka di browser sebelum menyalahkan
          kode.

--- V2.0 — KENYAMANAN MEMBACA (29-08-2026) ---

[KEPUTUSAN] Alamat hosting AKTIF & PERMANEN proyek ini berubah lagi
            menjadi:
            https://ereader-bvy.pages.dev
            Ini domain Cloudflare Pages sungguhan. Alamat workers.dev
            yang dicatat di V1.7
            (drop-850ce9c7-84c.sim-anex0199.workers.dev) SUDAH TIDAK
            DIPAKAI, begitu pula kedua alamat Netlify lama. Paket
            Android yang dibuat lewat PWA Builder juga sudah menunjuk
            ke alamat pages.dev ini (package Android:
            dev.pages.ereader_bvy.twa).

[FITUR] Daftar Isi. Tombolnya ada di panel Pengaturan (⋮). EPUB
        memakai navigasi bawaan buku dan mendukung sub-bab bertingkat;
        PDF memakai outline bawaan berkas — tujuan berupa nama atau
        larik referensi diubah dulu menjadi nomor halaman lewat
        getDestination/getPageIndex. TXT tidak punya daftar isi dan
        akan menampilkan keterangan.

[FITUR] Pencarian teks di dalam buku, untuk ketiga format. Dibuat
        bertahap: hasil muncul sambil pencarian berjalan, ada
        penunjuk kemajuan, dan pencarian otomatis dibatalkan begitu
        lembarnya ditutup (pakai penanda searchToken). Hasil dibatasi
        SEARCH_LIMIT = 120 supaya buku besar tidak membuat daftar
        yang tak berujung.

[FITUR] Bookmark. Store IndexedDB baru "bookmarks" (DB_VERSION naik
        2 -> 3, dengan index bookId). Satu buku boleh punya banyak
        bookmark. Judul diambil otomatis dari potongan teks pada
        posisi itu, dengan cadangan "Posisi N%". Bookmark ikut
        terhapus ketika bukunya dihapus dari rak.

[FITUR] Jenis huruf (Serif / Sans / Mono), jarak antarbaris
        (Rapat / Normal / Longgar), dan margin baca
        (Sempit / Sedang / Lebar). Semuanya tersimpan di localStorage
        dan berlaku untuk EPUB maupun TXT.

[FITUR] Kontrol zoom PDF di panel pengaturan (75%-300%, tujuh
        tingkat).

[PERBAIKAN] Zoom PDF tidak lagi pecah. Sebelumnya pembesaran hanya
            memperbesar kanvas yang sudah dirender. Sekarang lebar
            #pdfArea dikalikan tingkat zoom lewat variabel CSS
            --pdf-zoom, lalu halaman DIRENDER ULANG pada lebar itu.
            Kepadatan piksel dibagi akar tingkat zoom dan batas sisi
            kanvas dinaikkan ke 2600px saat zoom > 1.2, supaya hasilnya
            lebih tajam tanpa membuat pemakaian memori meledak.

[PENINGKATAN] Rasio tiap halaman PDF kini disimpan (pdfPageRatios)
              sehingga tinggi kotak kosong halaman yang belum dirender
              ikut benar setelah tingkat zoom berubah.

[PERUBAHAN] Margin EPUB diterapkan sebagai padding pada #epubArea,
            lalu rendition.resize() dipanggil dan posisi baca
            dikembalikan ke CFI terakhir. Cara ini dipilih daripada
            memberi padding pada <body> di dalam iframe, karena
            padding di dalam iframe mengacaukan perhitungan kolom
            epub.js pada mode halaman.

[PENINGKATAN] Layar diputar kini juga memicu perhitungan ulang halaman
              EPUB (sebelumnya hanya PDF yang dirender ulang).

[PERUBAHAN] Panel pengaturan (⋮) diperluas: tiga pintasan
            (Daftar Isi / Cari / Bookmark), tombol "Tandai posisi
            ini", nilai ukuran huruf & tingkat zoom yang terlihat,
            dan tombol yang sedang aktif ditandai. Keterangan cara
            geser halaman EPUB sekarang hanya muncul saat membaca
            EPUB, dan baris zoom hanya muncul saat membaca PDF.

[KEPUTUSAN] Bilah alat atas SENGAJA tidak ditambahi tombol baru.
            Menambah tiga tombol lagi di sana akan membuat judul buku
            hampir tidak terbaca di layar HP. Semua fitur V2 masuk
            lewat tombol ⋮ yang sudah ada.

[KEPUTUSAN] Daftar isi, hasil pencarian, dan daftar bookmark memakai
            SATU lembar (bottom sheet) yang sama dengan tiga mode,
            bukan tiga panel terpisah — lebih hemat kode dan
            perilakunya konsisten.

[MASALAH] Kata yang ditemukan lewat pencarian belum disorot di
          halaman; aplikasi baru melompat ke posisinya.

[PENGUJIAN] Belum diuji di HP oleh pengguna. Daftar uji V2 ada di
            bagian 17.

======================================================================
12. CATATAN SARAN YANG BELUM DISETUJUI
======================================================================

[SARAN] Menyorot (highlight) kata hasil pencarian di halaman, bukan
        hanya melompat ke posisinya. Untuk EPUB bisa memakai
        rendition.annotations.highlight; untuk PDF perlu lapisan teks
        sendiri di atas kanvas. Belum dikerjakan, menunggu persetujuan.

[SARAN] Menyimpan indeks teks PDF setelah pencarian pertama, supaya
        pencarian berikutnya di buku yang sama jauh lebih cepat.
        Konsekuensinya ada tambahan data tersimpan per buku.
        Belum dikerjakan, menunggu persetujuan.

[SARAN] Mode layar penuh / imersif (menyembunyikan bilah status
        Android saat membaca). Belum dikerjakan, menunggu
        persetujuan.

Jika AI memiliki ide baru, tambahkan ke bagian ini terlebih dahulu dan
diskusikan dengan pengguna sebelum mengubah kode.

======================================================================
13. CATATAN YANG SUDAH DISETUJUI
======================================================================

[DISETUJUI] Dukungan awal EPUB + PDF + TXT.
[DISETUJUI] Dokumentasi proyek harus berada di bagian paling atas file.
[DISETUJUI] AI harus menggunakan bahasa Indonesia untuk dokumentasi proyek.
[DISETUJUI] AI boleh memberi saran, tetapi harus mendiskusikannya dahulu
            sebelum menerapkan perubahan pilihan.
[DISETUJUI] Keluhan/masalah dari pengguna harus diprioritaskan.
[DISETUJUI] Perbaikan, perkembangan, riwayat, dan status pekerjaan harus
            dicatat sesuai kategori di dalam file.
[DISETUJUI] Roadmap VERSI 2 (kenyamanan membaca) dikerjakan — pengguna
            memberi instruksi "Lanjut v2" pada 29-08-2026.

======================================================================
14. INSTRUKSI UNTUK AI YANG MELANJUTKAN PROYEK
======================================================================

Jika file ini diberikan kepada AI lain:

1. Baca KONTEKS PROYEK ini terlebih dahulu.
2. Gunakan kode setelah bagian dokumentasi sebagai sumber kebenaran
   implementasi.
3. Bandingkan dokumentasi dengan kode jika terdapat ketidaksesuaian.
4. Jangan memulai ulang proyek dari nol.
5. Jangan menghapus fitur yang sudah berjalan tanpa persetujuan pengguna.
6. Prioritaskan masalah yang terakhir dilaporkan pengguna.
7. Untuk ide baru atau perubahan pilihan, berikan saran dan diskusikan
   terlebih dahulu.
8. Setelah perubahan disetujui dan dibuat, perbarui dokumentasi.
9. Jangan menandai [RENCANA], [SARAN], atau [DISETUJUI] sebagai selesai
   sebelum benar-benar diimplementasikan.
10. Catat hasil pengujian yang diberikan pengguna.
11. Jika pengguna mengirim index.html yang lebih baru, anggap file tersebut
    sebagai dasar terbaru proyek.
12. Jika melakukan perubahan bermakna, berikan kembali index.html lengkap
    agar pengguna tidak perlu menggabungkan potongan kode.

======================================================================
15. ATURAN PEMBARUAN DOKUMENTASI
======================================================================

Setiap AI yang mengubah proyek WAJIB menjaga bagian dokumentasi ini.

Contoh:

[PERBAIKAN]
Memperbaiki tombol kembali yang tidak berfungsi pada pembaca PDF.

[FITUR]
Menambahkan bookmark EPUB.

[PENGUJIAN]
EPUB "contoh.epub" berhasil dibuka dan posisi terakhir berhasil dipulihkan
pada HP Android.

[MASALAH]
PDF tertentu masih mengalami masalah ketika halaman sangat besar.

[KEPUTUSAN]
Pengguna menyetujui penggunaan tampilan dua kolom pada tablet.

[PENINGKATAN]
Mengurangi penggunaan memori saat Library memiliki banyak buku.

Jangan menulis catatan yang tidak benar. Dokumentasi harus menggambarkan
keadaan proyek yang sebenarnya.
======================================================================
16. DAFTAR PENGUJIAN YANG BELUM DICENTANG (V1)
======================================================================

[ ] Impor EPUB, lalu buka dan geser untuk ganti halaman di HP.
[ ] Ketuk sisi kiri dan kanan layar pada EPUB untuk ganti halaman.
[ ] Ketuk area tengah pada EPUB untuk membuka/menutup kontrol.
[ ] Tutup EPUB, buka lagi, pastikan posisi terakhir kembali.
[ ] Buka EPUB yang sama untuk kedua kalinya, pastikan lebih cepat
    (peta lokasi sudah tersimpan).
[ ] Ubah tema ke gelap, lalu buka EPUB, pastikan isi halaman ikut gelap.
[ ] Ubah ukuran teks saat membaca EPUB.
[ ] Impor PDF besar (100+ halaman), pastikan aplikasi tidak berat saat
    dibuka dan nomor halaman berjalan saat digulir.
[ ] Tutup PDF, buka lagi, pastikan kembali ke halaman terakhir.
[ ] Geser slider pada PDF, pastikan lompat halaman.
[ ] Impor TXT, gulir, tutup, buka lagi, pastikan posisi tepat.
[ ] Geser slider pada TXT.
[ ] Impor beberapa file sekaligus.
[ ] Impor file dari pengelola file yang tidak menyertakan ekstensi.
[ ] Pastikan sampul EPUB masih tampil setelah aplikasi ditutup total dan
    dibuka kembali.
[ ] Tekan lama sebuah buku untuk menghapus, pastikan buku TIDAK ikut
    terbuka setelah dialog ditutup.
[ ] Cari buku di kolom pencarian.
[ ] Periksa bilah atas/bawah tidak tertutup poni atau bilah gestur.

======================================================================
17. DAFTAR PENGUJIAN YANG BELUM DICENTANG (V2)
======================================================================

[ ] Buka EPUB -> ⋮ -> Daftar Isi, pilih satu bab, pastikan pindah.
[ ] Buka PDF berdaftar-isi -> ⋮ -> Daftar Isi, pastikan nomor halaman
    yang tampil benar dan lompatannya tepat.
[ ] Buka TXT -> ⋮ -> Daftar Isi, pastikan muncul keterangan (bukan
    layar kosong).
[ ] Cari satu kata di EPUB, pastikan hasil muncul dan bisa diketuk.
[ ] Cari satu kata di PDF besar, pastikan penunjuk kemajuan berjalan
    dan aplikasi tidak membeku.
[ ] Tutup lembar pencarian di tengah proses, pastikan pencarian
    benar-benar berhenti.
[ ] Cari kata yang tidak ada, pastikan muncul "Tidak ditemukan".
[ ] Tambah bookmark di EPUB, tutup buku, buka lagi, pastikan bookmark
    masih ada dan lompatannya tepat.
[ ] Tambah bookmark di PDF dan TXT, uji hal yang sama.
[ ] Hapus satu bookmark lewat tombol ✕.
[ ] Hapus buku dari rak, pastikan bookmark-nya ikut hilang.
[ ] Ganti jenis huruf, jarak baris, dan margin pada EPUB — pastikan
    posisi baca tidak melompat jauh setelah halaman dihitung ulang.
[ ] Ganti jenis huruf, jarak baris, dan margin pada TXT.
[ ] Zoom PDF ke 200%, pastikan teks TAJAM (bukan pecah) dan halaman
    bisa digeser ke kiri/kanan.
[ ] Zoom PDF, lalu gulir beberapa halaman, pastikan tidak ada kotak
    kosong yang tingginya salah.
[ ] Tekan Reset zoom, pastikan kembali ke 100%.
[ ] Putar layar saat membaca EPUB, pastikan halaman dihitung ulang.
[ ] Pastikan pengaturan V2 masih tersimpan setelah aplikasi ditutup
    total dan dibuka kembali.
[ ] Setelah deploy: buka
    https://ereader-bvy.pages.dev/.well-known/assetlinks.json
    di browser, pastikan isinya tampil.

======================================================================
AKHIR KONTEKS PROYEK
======================================================================
-->

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#111111">
  <link rel="manifest" href="./manifest.json">
  <link rel="icon" href="./icon-192.png">
  <link rel="apple-touch-icon" href="./icon-512.png">
  <title>E-Reader</title>

  <!-- V1 reader engines -->
  <script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.93/dist/epub.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

  <style>
    :root {
      --bg: #f5f3ee;
      --surface: #ffffff;
      --text: #222222;
      --muted: #777777;
      --border: #dddddd;
      --accent: #333333;
      --reader-width: 760px;
      --font-size: 19px;
      --line-height: 1.7;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Georgia, "Times New Roman", serif;
    }

    button, input {
      font: inherit;
    }

    .app {
      min-height: 100vh;
    }

    /* ---------- LIBRARY ---------- */

    #libraryView {
      min-height: 100vh;
      display: block;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 14px 16px;
    }

    .topbar-row {
      max-width: 1000px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .brand {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    .add-btn {
      border: 0;
      background: var(--accent);
      color: white;
      border-radius: 12px;
      padding: 10px 14px;
      cursor: pointer;
    }

    .library-content {
      max-width: 1000px;
      margin: auto;
      padding: 18px 16px 90px;
    }

    .search {
      width: 100%;
      padding: 13px 15px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      color: var(--text);
      outline: none;
      margin-bottom: 18px;
    }

    .empty {
      text-align: center;
      padding: 70px 20px;
      color: var(--muted);
    }

    .empty-icon {
      font-size: 54px;
      margin-bottom: 10px;
    }

    .book-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
      gap: 18px;
    }

    .book-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      min-width: 0;
    }

    .cover {
      aspect-ratio: 2 / 3;
      background: #dedbd2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      text-align: center;
      overflow: hidden;
    }

    .cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cover-placeholder {
      font-size: 35px;
    }

    .book-info {
      padding: 10px 11px 12px;
    }

    .book-title {
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      margin-bottom: 7px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .book-meta {
      color: var(--muted);
      font: 12px Arial, sans-serif;
    }

    .progress {
      height: 5px;
      background: #e4e1da;
      border-radius: 99px;
      margin-top: 10px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width .2s;
    }

    /* ---------- READER ---------- */

    #readerView {
      display: none;
      min-height: 100vh;
      background: var(--bg);
    }

    .reader-toolbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--border);
      transform: translateY(-110%);
      transition: transform .2s ease;
      backdrop-filter: blur(8px);
    }

    .reader-toolbar.visible {
      transform: translateY(0);
    }

    .toolbar-inner {
      max-width: 1000px;
      margin: auto;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .toolbar-title {
      flex: 1;
      min-width: 0;
      font: 14px Arial, sans-serif;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 4px;
    }

    .tool-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 9px;
      min-width: 38px;
      height: 38px;
      cursor: pointer;
    }

    .reader-area {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 58px 12px 55px;
    }

    #epubArea {
      width: min(100%, var(--reader-width));
      min-height: calc(100vh - 110px);
      background: var(--surface);
      box-shadow: 0 0 0 1px rgba(0,0,0,.03);
    }

    #epubViewer {
      width: 100%;
      height: calc(100vh - 110px);
    }

    #pdfArea {
      width: 100%;
      display: none;
    }

    @media (min-width: 700px) {
      #pdfArea {
        max-width: 850px;
        margin: 0 auto;
      }
    }

    #txtArea {
      display: none;
      width: min(100%, var(--reader-width));
      background: var(--surface);
      padding: 32px clamp(18px, 5vw, 55px);
      font-size: var(--font-size);
      line-height: var(--line-height);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      min-height: calc(100vh - 110px);
    }

    .reader-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 15;
      background: rgba(255,255,255,.95);
      border-top: 1px solid var(--border);
      padding: 8px 14px;
      transform: translateY(110%);
      transition: transform .2s ease;
      backdrop-filter: blur(8px);
    }

    .reader-bottom.visible {
      transform: translateY(0);
    }

    .bottom-inner {
      max-width: 850px;
      margin: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      font: 12px Arial, sans-serif;
      color: var(--muted);
    }

    .bottom-inner input[type="range"] {
      flex: 1;
    }

    /* ---------- SETTINGS ---------- */

    .settings-panel {
      position: fixed;
      z-index: 30;
      top: 58px;
      right: 10px;
      width: min(310px, calc(100vw - 20px));
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 35px rgba(0,0,0,.18);
      padding: 14px;
      display: none;
      font-family: Arial, sans-serif;
    }

    .settings-panel.visible {
      display: block;
    }

    .setting-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 12px 0;
    }

    .setting-label {
      font-size: 13px;
    }

    .setting-buttons {
      display: flex;
      gap: 5px;
    }

    .setting-buttons button {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 8px;
      padding: 7px 10px;
      cursor: pointer;
    }

    /* ---------- DARK ---------- */

    body.dark {
      --bg: #111111;
      --surface: #1c1c1c;
      --text: #e8e8e8;
      --muted: #a4a4a4;
      --border: #383838;
      --accent: #eeeeee;
    }

    body.dark .add-btn {
      color: #111;
    }

    body.dark .cover {
      background: #2a2a2a;
    }

    body.dark .reader-toolbar,
    body.dark .reader-bottom {
      background: rgba(28,28,28,.96);
    }

    body.dark #epubArea,
    body.dark #txtArea {
      background: #1c1c1c;
    }

    body.sepia {
      --bg: #eee4cf;
      --surface: #f8f0df;
      --text: #4b3b2b;
      --muted: #806f5d;
      --border: #d7c8af;
      --accent: #5b4935;
    }

    /* ---------- MOBILE ---------- */

    @media (max-width: 600px) {
      .topbar {
        padding: 11px 12px;
      }

      .brand {
        font-size: 19px;
      }

      .add-btn {
        padding: 9px 11px;
        font-size: 13px;
      }

      .library-content {
        padding: 14px 12px 70px;
      }

      .book-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .reader-area {
        padding-left: 0;
        padding-right: 0;
      }

      #epubArea {
        width: 100%;
      }

      #txtArea {
        width: 100%;
        padding: 25px 20px;
      }

      #pdfArea {
        width: 100%;
      }

      .toolbar-inner {
        padding: 8px;
      }

      .tool-btn {
        min-width: 35px;
        height: 35px;
      }
    }

    /* ================= V1.1 ================= */

    /* Safe area Android (poni / bilah gestur) */
    .topbar {
      padding-top: calc(14px + env(safe-area-inset-top));
    }

    .toolbar-inner {
      padding-top: calc(9px + env(safe-area-inset-top));
    }

    .reader-bottom {
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .settings-panel {
      top: calc(58px + env(safe-area-inset-top));
      max-height: calc(100vh - 90px);
      overflow-y: auto;
    }

    .reader-area {
      padding-top: calc(58px + env(safe-area-inset-top));
      padding-bottom: calc(55px + env(safe-area-inset-bottom));
    }

    /* Jaga supaya area pembaca selalu penuh 100% — pengaman ekstra agar
       epubArea/pdfArea/txtArea tidak pernah berbagi tempat berdampingan
       walau salah satu lupa disembunyikan. */
    #epubArea, #pdfArea, #txtArea {
      flex: 1 1 100%;
      max-width: 100%;
      min-width: 0;
    }

    .reader-loading {
      display: none;
      width: 100%;
      text-align: center;
      padding: 60px 20px;
      color: var(--muted);
      font: 14px Arial, sans-serif;
    }

    .reader-loading.visible {
      display: block;
    }

    /* PDF: kotak halaman (placeholder, tinggi diatur lewat JS) + kanvas
       hasil render. Tinggi TIDAK memakai CSS aspect-ratio supaya
       konsisten di semua versi WebView Android. */
    #pdfArea .pdf-page {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 auto 16px;
      background: #ffffff;
      box-shadow: 0 1px 5px rgba(0,0,0,.12);
      overflow: hidden;
    }

    #pdfArea .pdf-page canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .pdf-page-number {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font: 13px Arial, sans-serif;
      color: #b3aea3;
    }

    body.dark #pdfArea .pdf-page {
      background: #2a2a2a;
    }

    body.sepia #pdfArea .pdf-page {
      background: #f8f0df;
    }

    /* Tombol ganti halaman EPUB di bilah bawah */
    .nav-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 9px;
      min-width: 40px;
      height: 34px;
      line-height: 1;
      cursor: pointer;
      display: none;
    }

    .reader-bottom.is-epub .nav-btn {
      display: inline-block;
    }

    #epubViewer {
      touch-action: pan-y;
    }

    /* Toast / pesan singkat */
    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(24px + env(safe-area-inset-bottom));
      transform: translate(-50%, 20px);
      z-index: 60;
      max-width: min(92vw, 420px);
      background: rgba(20,20,20,.94);
      color: #f2f2f2;
      font: 13px/1.45 Arial, sans-serif;
      padding: 11px 16px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0,0,0,.28);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }

    .toast.visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    /* Status impor pada rak buku */
    .import-status {
      display: none;
      margin-bottom: 14px;
      padding: 10px 13px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      font: 13px Arial, sans-serif;
      color: var(--muted);
    }

    .import-status.visible {
      display: block;
    }

    /* Tinggi area EPUB memperhitungkan safe-area dan bilah alamat mobile */
    #epubArea {
      min-height: 0;
      height: calc(100vh - 113px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    #epubViewer {
      height: 100%;
    }

    @supports (height: 100dvh) {
      #epubArea {
        height: calc(100dvh - 113px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      }
    }

    /* ================= V1.8 ================= */

    /* Jam & tanggal realtime di rak buku */
    .clock-row {
      max-width: 1000px;
      margin: 7px auto 0;
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-family: Arial, sans-serif;
      color: var(--muted);
    }

    #clockTime {
      font-size: 15px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }

    #clockDate {
      font-size: 12.5px;
    }

    /* Sampul rak buku diperkecil supaya lebih banyak muat sekaligus */
    .book-grid {
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: 14px;
    }

    .cover-placeholder {
      font-size: 28px;
    }

    .book-info {
      padding: 8px 9px 10px;
    }

    .book-title {
      font-size: 12.5px;
      margin-bottom: 5px;
    }

    .book-meta {
      font-size: 11px;
    }

    .progress {
      height: 4px;
      margin-top: 7px;
    }

    @media (max-width: 640px) {
      /* V1.8: sebelumnya dipaksa 2 kolom sehingga sampul terlihat
         sangat besar di HP. Sekarang menyesuaikan lebar layar —
         umumnya 3 kolom, dan tetap turun ke 2 di layar sangat sempit. */
      .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
        gap: 10px;
      }

      .clock-row {
        margin-top: 6px;
      }
    }

    /* ================= V2 — KENYAMANAN MEMBACA ================= */

    :root {
      --reader-font: Georgia, "Times New Roman", serif;
      --epub-margin: 14px;
      --txt-pad: clamp(18px, 5vw, 55px);
      --pdf-zoom: 1;
    }

    /* Jenis huruf, margin, dan jarak baris untuk TXT */
    #txtArea {
      font-family: var(--reader-font);
      padding-left: var(--txt-pad);
      padding-right: var(--txt-pad);
    }

    /* Margin baca untuk EPUB (lebar iframe ikut menyusut, lalu
       rendition.resize() dipanggil agar halaman dihitung ulang). */
    #epubArea {
      padding-left: var(--epub-margin);
      padding-right: var(--epub-margin);
    }

    /* Zoom PDF: lebar area dikalikan tingkat pembesaran, lalu halaman
       DIRENDER ULANG pada lebar itu (bukan diperbesar sebagai gambar),
       sehingga teks tetap tajam — perbaikan masalah "pecah saat pinch"
       yang ditunda dari V1.3. */
    #pdfArea {
      flex: 0 0 auto;
      max-width: none;
      width: calc(100% * var(--pdf-zoom));
      margin: 0 auto;
    }

    @media (min-width: 700px) {
      #pdfArea { width: calc(min(100%, 850px) * var(--pdf-zoom)); }
    }

    .reader-area.pdf-zoomed { justify-content: flex-start; }

    /* ---------- PANEL PENGATURAN (tambahan V2) ---------- */

    .settings-panel { width: min(340px, calc(100vw - 20px)); }

    .setting-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin: 12px 0 8px;
    }

    .setting-actions button,
    .wide-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 10px;
      padding: 9px 4px;
      cursor: pointer;
      font-size: 12.5px;
    }

    .wide-btn { width: 100%; }

    .setting-sep {
      height: 1px;
      background: var(--border);
      margin: 12px 0;
    }

    .setting-value {
      font-size: 12px;
      color: var(--muted);
      min-width: 40px;
      text-align: center;
      align-self: center;
    }

    .setting-buttons button.active {
      background: var(--accent);
      color: var(--surface);
      border-color: var(--accent);
    }

    body.dark .setting-buttons button.active { color: #111; }

    #pdfZoomRow, #epubHintRow, #pdfPanLockRow { display: none; }
    #pdfZoomRow.visible, #epubHintRow.visible, #pdfPanLockRow.visible { display: flex; }

    #pdfPanLockBtn.active {
      background: var(--accent, #2563eb);
      color: #fff;
      border-color: transparent;
    }

    /* ---------- LEMBAR: DAFTAR ISI / CARI / BOOKMARK ---------- */

    .sheet {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: none;
      background: rgba(0,0,0,.35);
    }

    .sheet.visible { display: block; }

    .sheet-inner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -10px 30px rgba(0,0,0,.25);
      font-family: Arial, sans-serif;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .sheet-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px 11px;
      border-bottom: 1px solid var(--border);
    }

    .sheet-title {
      flex: 1;
      font-size: 15px;
      font-weight: 700;
    }

    .sheet-close {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 9px;
      min-width: 34px;
      height: 32px;
      cursor: pointer;
    }

    .sheet-tools {
      display: none;
      gap: 8px;
      padding: 11px 14px 2px;
    }

    .sheet-tools.visible { display: flex; }

    .sheet-tools input {
      flex: 1;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      outline: none;
    }

    .sheet-tools button {
      border: 0;
      background: var(--accent);
      color: var(--surface);
      border-radius: 10px;
      padding: 0 15px;
      cursor: pointer;
    }

    body.dark .sheet-tools button { color: #111; }

    .sheet-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 6px 8px 16px;
    }

    .sheet-note {
      padding: 16px 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .sheet-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      text-align: left;
      border: 0;
      background: transparent;
      color: var(--text);
      padding: 11px 10px;
      border-radius: 10px;
      cursor: pointer;
      font: 13.5px/1.45 Arial, sans-serif;
    }

    .sheet-item + .sheet-item { border-top: 1px solid var(--border); border-radius: 0; }

    .si-main { flex: 1; min-width: 0; }

    .si-sub {
      color: var(--muted);
      font-size: 11.5px;
      margin-top: 3px;
    }

    .si-del {
      flex: 0 0 auto;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      border-radius: 8px;
      min-width: 30px;
      height: 28px;
      cursor: pointer;
      font-size: 13px;
    }
  </style>
</head>

<body>
<div class="app">

  <!-- ================= LIBRARY ================= -->
  <section id="libraryView">
    <header class="topbar">
      <div class="topbar-row">
        <div class="brand">📖 E-Reader</div>

        <button class="add-btn" id="addBookBtn">
          ＋ Tambah Buku
        </button>

        <input
          id="fileInput"
          type="file"
          multiple
          accept=".epub,.pdf,.txt,text/plain,application/epub+zip,application/pdf"
          hidden
        >
      </div>

      <div class="clock-row">
        <span id="clockTime">--:--:--</span>
        <span id="clockDate"></span>
      </div>
    </header>

    <main class="library-content">
      <input
        id="searchInput"
        class="search"
        type="search"
        placeholder="🔍 Cari buku..."
        autocomplete="off"
      >

      <div id="importStatus" class="import-status"></div>

      <div id="emptyState" class="empty">
        <div class="empty-icon">📚</div>
        <div>Belum ada buku.</div>
        <div style="margin-top:7px">Tekan <b>＋ Tambah Buku</b> untuk mulai.</div>
      </div>

      <div id="bookGrid" class="book-grid"></div>
    </main>
  </section>

  <!-- ================= READER ================= -->
  <section id="readerView">

    <div id="readerToolbar" class="reader-toolbar">
      <div class="toolbar-inner">
        <button class="tool-btn" id="backBtn" title="Kembali">←</button>
        <div id="readerTitle" class="toolbar-title">Buku</div>
        <button class="tool-btn" id="fontDownBtn" title="Perkecil teks">A−</button>
        <button class="tool-btn" id="fontUpBtn" title="Perbesar teks">A+</button>
        <button class="tool-btn" id="themeBtn" title="Ganti tema">◐</button>
        <button class="tool-btn" id="settingsBtn" title="Pengaturan">⋮</button>
      </div>
    </div>

    <div id="settingsPanel" class="settings-panel">
      <strong>Pengaturan membaca</strong>

      <div class="setting-actions">
        <button id="openTocBtn">☰ Daftar Isi</button>
        <button id="openSearchBtn">🔍 Cari</button>
        <button id="openBookmarkBtn">🔖 Bookmark</button>
      </div>

      <button id="addBookmarkBtn" class="wide-btn">＋ Tandai posisi ini</button>

      <div class="setting-sep"></div>

      <div class="setting-row">
        <span class="setting-label">Tema</span>
        <div class="setting-buttons">
          <button data-theme="light">Terang</button>
          <button data-theme="sepia">Sepia</button>
          <button data-theme="dark">Gelap</button>
        </div>
      </div>

      <div class="setting-row">
        <span class="setting-label">Ukuran teks</span>
        <div class="setting-buttons">
          <button id="fontDownPanel">A−</button>
          <span class="setting-value" id="fontSizeValue">19px</span>
          <button id="fontUpPanel">A+</button>
        </div>
      </div>

      <div class="setting-row">
        <span class="setting-label">Jenis huruf</span>
        <div class="setting-buttons">
          <button data-font="serif" style="font-family:Georgia,serif">Serif</button>
          <button data-font="sans" style="font-family:Arial,sans-serif">Sans</button>
          <button data-font="mono" style="font-family:'Courier New',monospace">Mono</button>
        </div>
      </div>

      <div class="setting-row">
        <span class="setting-label">Jarak baris</span>
        <div class="setting-buttons">
          <button data-line="0">Rapat</button>
          <button data-line="1">Normal</button>
          <button data-line="2">Longgar</button>
        </div>
      </div>

      <div class="setting-row">
        <span class="setting-label">Margin</span>
        <div class="setting-buttons">
          <button data-margin="0">Sempit</button>
          <button data-margin="1">Sedang</button>
          <button data-margin="2">Lebar</button>
        </div>
      </div>

      <div class="setting-row" id="pdfZoomRow">
        <span class="setting-label">Zoom PDF</span>
        <div class="setting-buttons">
          <button id="pdfZoomOut">−</button>
          <span class="setting-value" id="pdfZoomValue">100%</span>
          <button id="pdfZoomIn">+</button>
          <button id="pdfZoomReset">⟲</button>
        </div>
      </div>

      <div class="setting-row" id="pdfPanLockRow">
        <span class="setting-label">Kunci posisi</span>
        <div class="setting-buttons">
          <button id="pdfPanLockBtn">🔓 Bebas</button>
        </div>
      </div>

      <div class="setting-row" id="epubHintRow">
        <span class="setting-label" style="color:var(--muted);font-size:12px;line-height:1.5">
          EPUB: geser kiri/kanan atau ketuk tepi layar untuk ganti halaman.
          Ketuk bagian tengah untuk menyembunyikan kontrol.
        </span>
      </div>
    </div>

    <div class="reader-area">
      <div id="epubArea">
        <div id="epubViewer"></div>
      </div>

      <div id="pdfArea"></div>

      <div id="txtArea"></div>

      <div id="readerLoading" class="reader-loading">Memuat buku...</div>
    </div>

    <div id="readerBottom" class="reader-bottom">
      <div class="bottom-inner">
        <button class="nav-btn" id="prevPageBtn" title="Halaman sebelumnya">‹</button>
        <span id="progressText">0%</span>
        <input id="progressSlider" type="range" min="0" max="100" value="0">
        <span id="formatText">EPUB</span>
        <button class="nav-btn" id="nextPageBtn" title="Halaman berikutnya">›</button>
      </div>
    </div>

  </section>
</div>

<!-- V2: satu lembar serbaguna untuk Daftar Isi, Cari dalam buku, dan Bookmark -->
<div id="sheet" class="sheet">
  <div class="sheet-inner">
    <div class="sheet-head">
      <div class="sheet-title" id="sheetTitle">Daftar Isi</div>
      <button class="sheet-close" id="sheetClose" title="Tutup">✕</button>
    </div>

    <div class="sheet-tools" id="sheetTools">
      <input
        id="sheetSearchInput"
        type="search"
        placeholder="Cari kata dalam buku..."
        autocomplete="off"
      >
      <button id="sheetSearchBtn">Cari</button>
    </div>

    <div class="sheet-body" id="sheetBody"></div>
  </div>
</div>

<div id="toast" class="toast"></div>

<script>
(() => {
  "use strict";

  /* ============================================================
     E-READER — V2

     CATATAN UNTUK AI BERIKUTNYA:
     Dokumentasi proyek (aturan kerja, status fitur, roadmap, riwayat)
     berada pada blok komentar PALING ATAS file ini. Baca bagian itu
     lebih dulu, dan perbarui bagian itu setiap kali ada perubahan.
     Jangan membuat blok dokumentasi kedua di sini agar tidak ada dua
     sumber kebenaran yang saling berbeda.

     Format yang didukung : EPUB, PDF, TXT
     Penyimpanan          : IndexedDB (buku, progres, peta lokasi EPUB)
                            localStorage (pengaturan tampilan)
     ============================================================ */

  /* ---------- KONSTANTA ---------- */

  const DB_NAME = "eReaderV1DB";
  const DB_VERSION = 3;
  const STORE_BOOKS = "books";
  const STORE_PROGRESS = "progress";
  const STORE_LOCATIONS = "locations";
  const STORE_BOOKMARKS = "bookmarks";   // V2

  const SAVE_DELAY = 1000;      // jeda minimal penulisan progres (ms)
  const PDF_KEEP_PAGES = 3;     // jumlah halaman PDF yang tetap dirender
  const PDF_MAX_CANVAS_DIMENSION = 2200; // batas aman sisi terpanjang kanvas (px)
  const EPUB_LOCATION_CHARS = 1600;

  /* ---------- V2 ---------- */

  const FONT_FAMILIES = {
    serif: "Georgia, 'Times New Roman', serif",
    sans: "-apple-system, 'Segoe UI', Roboto, Arial, sans-serif",
    mono: "'Courier New', Courier, monospace"
  };

  const MARGIN_STEPS = [3, 14, 34];              // px, dipakai EPUB
  const TXT_PAD_STEPS = [                        // padding kiri/kanan TXT
    "16px",
    "clamp(18px, 5vw, 55px)",
    "clamp(34px, 9vw, 95px)"
  ];
  const LINE_STEPS = [1.45, 1.7, 2.05];
  const PDF_ZOOM_STEPS = [0.75, 1, 1.25, 1.5, 2, 2.5, 3];
  const SEARCH_LIMIT = 120;                      // batas hasil pencarian

  /* V1.2: resolusi render PDF dinaikkan dengan "headroom" supaya saat
     halaman di-pinch-zoom oleh pengguna, teks tidak langsung pecah.
     PDF_MAX_CANVAS_WIDTH membatasi pemakaian memori di HP low-end. */
  const PDF_DPR = Math.min(window.devicePixelRatio || 1, 3);
  const PDF_ZOOM_HEADROOM = 1.6;
  const PDF_MAX_CANVAS_WIDTH = 1800;

  /* ---------- STATE ---------- */

  let db = null;
  let library = [];
  let progressMap = {};

  let currentBook = null;       // record buku (termasuk file)
  let currentProgress = null;   // record progres (kecil, sering ditulis)
  let currentEpub = null;
  let currentRendition = null;
  let currentPdf = null;
  let currentTxtText = "";

  let toolbarTimer = null;
  let toastTimer = null;
  let coverURLs = [];

  let isSeeking = false;         // slider sedang digeser pengguna
  let suppressCardClick = false; // sesudah tekan lama di rak buku
  let suppressEpubTap = false;   // sesudah geser halaman EPUB

  let saveTimer = null;
  let progressDirty = false;

  let pdfObserver = null;
  let pdfWraps = [];
  let pdfRendered = new Set();
  let pdfRendering = new Set();
  let pdfCurrentPage = 1;
  let pdfScrollQueued = false;
  let txtScrollQueued = false;
  let pdfBackgroundQueue = Promise.resolve(); // render halaman di latar satu per satu, biar tidak macet

  /* ---------- V2 ---------- */

  let pdfPageRatios = [];        // tinggi/lebar tiap halaman PDF (untuk placeholder saat zoom)
  let currentToc = null;         // hasil baca daftar isi buku yang sedang dibuka
  let sheetMode = "";            // "toc" | "search" | "bookmarks"
  let searchToken = 0;           // penanda pencarian; naik saat pencarian dibatalkan

  /* ---------- ELEMEN ---------- */

  const $ = (id) => document.getElementById(id);

  const libraryView = $("libraryView");
  const readerView = $("readerView");
  const fileInput = $("fileInput");
  const bookGrid = $("bookGrid");
  const emptyState = $("emptyState");
  const emptyStateDefaultHTML = $("emptyState").innerHTML;
  const searchInput = $("searchInput");
  const importStatus = $("importStatus");
  const clockTimeEl = $("clockTime");
  const clockDateEl = $("clockDate");
  const toastBox = $("toast");

  const readerToolbar = $("readerToolbar");
  const readerBottom = $("readerBottom");
  const readerTitle = $("readerTitle");
  const settingsPanel = $("settingsPanel");

  const epubArea = $("epubArea");
  const epubViewer = $("epubViewer");
  const pdfArea = $("pdfArea");
  const txtArea = $("txtArea");
  const readerLoading = $("readerLoading");

  const progressText = $("progressText");
  const progressSlider = $("progressSlider");
  const formatText = $("formatText");
  const prevPageBtn = $("prevPageBtn");
  const nextPageBtn = $("nextPageBtn");

  /* ---------- V2 ---------- */

  const readerArea = document.querySelector(".reader-area");
  const sheet = $("sheet");
  const sheetTitle = $("sheetTitle");
  const sheetBody = $("sheetBody");
  const sheetTools = $("sheetTools");
  const sheetSearchInput = $("sheetSearchInput");
  const pdfZoomRow = $("pdfZoomRow");
  const pdfZoomValue = $("pdfZoomValue");
  const fontSizeValue = $("fontSizeValue");
  const epubHintRow = $("epubHintRow");
  const pdfPanLockRow = $("pdfPanLockRow");
  const pdfPanLockBtn = $("pdfPanLockBtn");

  /* ============================================================
     DATABASE
     ============================================================ */

  function openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(DB_NAME, DB_VERSION);

      request.onupgradeneeded = () => {
        const database = request.result;

        if (!database.objectStoreNames.contains(STORE_BOOKS)) {
          const store = database.createObjectStore(STORE_BOOKS, {
            keyPath: "id"
          });
          store.createIndex("addedAt", "addedAt");
        }

        /* V1.1: progres dipisah dari record buku supaya file besar
           tidak ditulis ulang setiap kali halaman berpindah. */
        if (!database.objectStoreNames.contains(STORE_PROGRESS)) {
          database.createObjectStore(STORE_PROGRESS, { keyPath: "id" });
        }

        /* V1.1: cache peta lokasi EPUB. */
        if (!database.objectStoreNames.contains(STORE_LOCATIONS)) {
          database.createObjectStore(STORE_LOCATIONS, { keyPath: "id" });
        }

        /* V2: bookmark. Satu record = satu penanda; dikaitkan ke buku
           lewat field bookId (bukan keyPath) supaya satu buku bisa
           punya banyak bookmark. */
        if (!database.objectStoreNames.contains(STORE_BOOKMARKS)) {
          const store = database.createObjectStore(STORE_BOOKMARKS, {
            keyPath: "id"
          });
          store.createIndex("bookId", "bookId");
        }
      };

      request.onsuccess = () => {
        db = request.result;
        resolve(db);
      };

      request.onerror = () => reject(request.error);
    });
  }

  function dbPut(storeName, value) {
    return new Promise((resolve, reject) => {
      const tx = db.transaction(storeName, "readwrite");
      tx.objectStore(storeName).put(value);
      tx.oncomplete = () => resolve();
      tx.onerror = () => reject(tx.error);
    });
  }

  function dbGet(storeName, id) {
    return new Promise((resolve, reject) => {
      const tx = db.transaction(storeName, "readonly");
      const request = tx.objectStore(storeName).get(id);

      request.onsuccess = () => resolve(request.result || null);
      request.onerror = () => reject(request.error);
    });
  }

  function dbGetAll(storeName) {
    return new Promise((resolve, reject) => {
      const tx = db.transaction(storeName, "readonly");
      const request = tx.objectStore(storeName).getAll();

      request.onsuccess = () => resolve(request.result || []);
      request.onerror = () => reject(request.error);
    });
  }

  function dbDelete(storeName, id) {
    return new Promise((resolve, reject) => {
      const tx = db.transaction(storeName, "readwrite");
      tx.objectStore(storeName).delete(id);
      tx.oncomplete = () => resolve();
      tx.onerror = () => reject(tx.error);
    });
  }

  /* ============================================================
     HELPER
     ============================================================ */

  function createId() {
    return "book_" + Date.now() + "_" + Math.random().toString(36).slice(2);
  }

  function extension(name) {
    const parts = String(name || "").toLowerCase().split(".");
    return parts.length > 1 ? parts.pop() : "";
  }

  function clamp(value, min, max) {
    return Math.max(min, Math.min(max, value));
  }

  function escapeHTML(text) {
    return String(text)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function toast(message) {
    toastBox.textContent = message;
    toastBox.classList.add("visible");

    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => {
      toastBox.classList.remove("visible");
    }, 2600);
  }

  function detectType(file) {
    const ext = extension(file.name);
    if (["epub", "pdf", "txt"].includes(ext)) return ext;

    /* Sebagian pengelola file Android tidak menyertakan ekstensi. */
    const mime = String(file.type || "").toLowerCase();
    if (mime.includes("epub")) return "epub";
    if (mime === "application/pdf") return "pdf";
    if (mime.startsWith("text/")) return "txt";

    return "";
  }

  function readStep(key, fallback, max) {
    const value = Number(localStorage.getItem(key));
    if (!Number.isFinite(value)) return fallback;
    return Math.max(0, Math.min(max, Math.round(value)));
  }

  function getStoredSettings() {
    const family = localStorage.getItem("readerFontFamily") || "serif";

    return {
      fontSize: Number(localStorage.getItem("readerFontSize") || 19),
      theme: localStorage.getItem("readerTheme") || "sepia",
      /* V2 */
      fontFamily: FONT_FAMILIES[family] ? family : "serif",
      margin: readStep("readerMargin", 1, MARGIN_STEPS.length - 1),
      lineHeight: readStep("readerLineHeight", 1, LINE_STEPS.length - 1),
      pdfZoom: Math.max(0.5, Math.min(3, Number(localStorage.getItem("readerPdfZoom")) || 1)),
      /* V2: saat aktif, app tidak akan memindahkan/menggulung ulang
         posisi baca secara otomatis (mis. ketika tingkat zoom diubah),
         supaya posisi geser kiri/kanan yang sudah diatur pengguna
         (lewat pinch-zoom jari) tidak ikut bergeser. */
      pdfPanLock: localStorage.getItem("readerPdfPanLock") === "1"
    };
  }

  function saveSettings(settings) {
    localStorage.setItem("readerFontSize", String(settings.fontSize));
    localStorage.setItem("readerTheme", settings.theme);
    localStorage.setItem("readerFontFamily", String(settings.fontFamily || "serif"));
    localStorage.setItem("readerMargin", String(settings.margin));
    localStorage.setItem("readerLineHeight", String(settings.lineHeight));
    localStorage.setItem("readerPdfZoom", String(settings.pdfZoom));
    localStorage.setItem("readerPdfPanLock", settings.pdfPanLock ? "1" : "0");
  }

  /* V2: satu tempat untuk menerapkan jenis huruf, jarak baris, dan
     margin ke SEMUA format sekaligus. EPUB perlu perlakuan khusus:
     lebar iframe berubah ketika margin berubah, jadi halaman harus
     dihitung ulang lewat rendition.resize(). */
  function applyReaderLayout(options) {
    const settings = getStoredSettings();
    const root = document.documentElement.style;

    root.setProperty("--reader-font", FONT_FAMILIES[settings.fontFamily]);
    root.setProperty("--line-height", String(LINE_STEPS[settings.lineHeight]));
    root.setProperty("--epub-margin", MARGIN_STEPS[settings.margin] + "px");
    root.setProperty("--txt-pad", TXT_PAD_STEPS[settings.margin]);
    root.setProperty("--pdf-zoom", String(settings.pdfZoom));

    if (readerArea) {
      /* Perataan kiri hanya dipakai saat halaman PDF memang lebih lebar
         dari layar; buku lain tetap di tengah. */
      readerArea.classList.toggle(
        "pdf-zoomed",
        settings.pdfZoom > 1 && !!currentBook && currentBook.type === "pdf"
      );
    }

    applyEpubTheme();

    if (options && options.resizeEpub) resizeEpubView();

    refreshSettingsUI();
  }

  /* Hitung ulang halaman EPUB setelah lebar area berubah (ganti margin
     atau rotasi layar), lalu kembalikan ke posisi baca semula. */
  function resizeEpubView() {
    if (!currentRendition) return;

    const cfi = currentProgress ? currentProgress.location : "";

    try {
      currentRendition.resize();
    } catch (error) {
      console.warn("Ukuran EPUB gagal dihitung ulang:", error);
    }

    if (cfi) {
      setTimeout(() => {
        if (!currentRendition) return;
        try { currentRendition.display(cfi); } catch (e) {}
      }, 90);
    }
  }

  /* Tandai tombol yang sedang aktif di panel pengaturan. */
  function refreshSettingsUI() {
    const settings = getStoredSettings();

    document.querySelectorAll("[data-theme]").forEach(button => {
      button.classList.toggle("active", button.dataset.theme === settings.theme);
    });

    document.querySelectorAll("[data-font]").forEach(button => {
      button.classList.toggle("active", button.dataset.font === settings.fontFamily);
    });

    document.querySelectorAll("[data-line]").forEach(button => {
      button.classList.toggle("active", Number(button.dataset.line) === settings.lineHeight);
    });

    document.querySelectorAll("[data-margin]").forEach(button => {
      button.classList.toggle("active", Number(button.dataset.margin) === settings.margin);
    });

    if (fontSizeValue) fontSizeValue.textContent = settings.fontSize + "px";
    if (pdfZoomValue) pdfZoomValue.textContent = Math.round(settings.pdfZoom * 100) + "%";

    if (pdfPanLockBtn) {
      pdfPanLockBtn.classList.toggle("active", settings.pdfPanLock);
      pdfPanLockBtn.textContent = settings.pdfPanLock ? "🔒 Terkunci" : "🔓 Bebas";
    }
  }

  function applyTheme(theme) {
    document.body.classList.remove("dark", "sepia");

    if (theme === "dark") {
      document.body.classList.add("dark");
    } else if (theme === "sepia") {
      document.body.classList.add("sepia");
    }

    const settings = getStoredSettings();
    settings.theme = theme;
    saveSettings(settings);

    applyEpubTheme();
  }

  function applyFontSize() {
    const settings = getStoredSettings();

    document.documentElement.style.setProperty(
      "--font-size",
      settings.fontSize + "px"
    );

    if (currentRendition) {
      try {
        currentRendition.themes.fontSize(settings.fontSize + "px");
      } catch (e) {
        console.warn(e);
      }
    }

    if (fontSizeValue) fontSizeValue.textContent = settings.fontSize + "px";
  }

  function changeFont(delta) {
    const settings = getStoredSettings();
    settings.fontSize = clamp(settings.fontSize + delta, 14, 34);
    saveSettings(settings);
    applyFontSize();
    applyEpubTheme();
  }

  /* ============================================================
     PROGRES (penulisan ringan + diberi jeda)
     ============================================================ */

  function markProgressDirty() {
    if (!currentProgress) return;

    progressDirty = true;

    if (saveTimer) return;

    saveTimer = setTimeout(() => {
      saveTimer = null;
      flushProgress();
    }, SAVE_DELAY);
  }

  async function flushProgress() {
    if (!progressDirty || !currentProgress || !db) return;

    progressDirty = false;
    currentProgress.updatedAt = Date.now();

    try {
      await dbPut(STORE_PROGRESS, { ...currentProgress });
      progressMap[currentProgress.id] = { ...currentProgress };
    } catch (error) {
      console.warn("Gagal menyimpan progres:", error);
    }
  }

  function updateProgressUI() {
    if (!currentBook || !currentProgress) return;

    const percent = clamp(Number(currentProgress.progress || 0), 0, 100);

    progressText.textContent = percent + "%";

    if (!isSeeking) {
      progressSlider.value = percent;
    }

    if (currentBook.type === "pdf" && currentPdf) {
      formatText.textContent =
        "PDF " + pdfCurrentPage + "/" + currentPdf.numPages;
    }
  }

  /* ============================================================
     RAK BUKU
     ============================================================ */

  async function loadLibrary() {
    const [books, progressList] = await Promise.all([
      dbGetAll(STORE_BOOKS),
      dbGetAll(STORE_PROGRESS)
    ]);

    progressMap = {};
    progressList.forEach(item => {
      progressMap[item.id] = item;
    });

    library = books;
    library.sort((a, b) => (b.addedAt || 0) - (a.addedAt || 0));

    renderLibrary();
  }

  function bookProgressPercent(book) {
    const record = progressMap[book.id];

    if (record && typeof record.progress === "number") {
      return clamp(Math.round(record.progress), 0, 100);
    }

    /* Data V1: progres masih tersimpan di record buku. */
    return clamp(Math.round(Number(book.progress || 0)), 0, 100);
  }

  function coverSource(book) {
    if (book.coverBlob instanceof Blob) {
      const url = URL.createObjectURL(book.coverBlob);
      coverURLs.push(url);
      return url;
    }

    /* Data V1 menyimpan objectURL yang sudah tidak berlaku lagi. */
    if (typeof book.cover === "string" && book.cover.startsWith("data:")) {
      return book.cover;
    }

    return "";
  }

  function releaseCoverURLs() {
    coverURLs.forEach(url => {
      try { URL.revokeObjectURL(url); } catch (e) {}
    });
    coverURLs = [];
  }

  function renderLibrary() {
    const query = searchInput.value.trim().toLowerCase();

    const filtered = library.filter(book =>
      (book.title || book.name || "").toLowerCase().includes(query) ||
      (book.author || "").toLowerCase().includes(query)
    );

    releaseCoverURLs();
    bookGrid.innerHTML = "";

    emptyState.style.display = filtered.length ? "none" : "block";

    if (!filtered.length) {
      emptyState.innerHTML = library.length
        ? '<div class="empty-icon">🔍</div><div>Buku tidak ditemukan.</div>'
        : emptyStateDefaultHTML;
    }

    filtered.forEach(book => {
      const card = document.createElement("article");
      card.className = "book-card";

      const percent = bookProgressPercent(book);
      const type = String(book.type || "").toLowerCase();
      const cover = coverSource(book);

      const coverHTML = cover
        ? `<img src="${escapeHTML(cover)}" alt="">`
        : `<div class="cover-placeholder">${
            type === "pdf" ? "📄" : type === "txt" ? "📝" : "📖"
          }</div>`;

      card.innerHTML = `
        <div class="cover">${coverHTML}</div>
        <div class="book-info">
          <div class="book-title">${escapeHTML(book.title || book.name || "Tanpa judul")}</div>
          <div class="book-meta">
            ${escapeHTML(book.author || type.toUpperCase() || "BUKU")}
          </div>
          <div class="progress">
            <div class="progress-bar" style="width:${percent}%"></div>
          </div>
          <div class="book-meta" style="margin-top:5px">${percent}%</div>
        </div>
      `;

      card.addEventListener("click", () => {
        /* V1.1: sesudah tekan lama, klik tidak boleh ikut membuka buku. */
        if (suppressCardClick) {
          suppressCardClick = false;
          return;
        }
        openBook(book.id);
      });

      card.addEventListener("contextmenu", (event) => {
        event.preventDefault();
        suppressCardClick = true;
        askDeleteBook(book);
      });

      let pressTimer = null;

      card.addEventListener("touchstart", () => {
        clearTimeout(pressTimer);
        pressTimer = setTimeout(() => {
          suppressCardClick = true;
          askDeleteBook(book);
        }, 700);
      }, { passive: true });

      const cancelPress = () => clearTimeout(pressTimer);

      card.addEventListener("touchend", cancelPress);
      card.addEventListener("touchmove", cancelPress);
      card.addEventListener("touchcancel", cancelPress);

      bookGrid.appendChild(card);
    });
  }

  async function askDeleteBook(book) {
    const ok = confirm(
      `Hapus "${book.title || book.name}" dari rak buku?`
    );

    /* Beberapa browser mengirim event click sesudah dialog ditutup. */
    setTimeout(() => { suppressCardClick = false; }, 400);

    if (!ok) return;

    try {
      await dbDelete(STORE_BOOKS, book.id);
      await dbDelete(STORE_PROGRESS, book.id);
      await dbDelete(STORE_LOCATIONS, book.id);
      await deleteBookmarksOfBook(book.id);   // V2
      await loadLibrary();
      toast("Buku dihapus.");
    } catch (error) {
      console.error(error);
      toast("Buku gagal dihapus.");
    }
  }

  /* ============================================================
     IMPOR BUKU
     ============================================================ */

  async function importFiles(files) {
    const list = Array.from(files || []);
    if (!list.length) return;

    let berhasil = 0;
    let gagal = 0;

    for (let index = 0; index < list.length; index++) {
      const file = list[index];

      importStatus.classList.add("visible");
      importStatus.textContent =
        `Mengimpor ${index + 1} dari ${list.length}: ${file.name}`;

      /* Beri kesempatan UI menggambar ulang sebelum kerja berat. */
      await new Promise(resolve => setTimeout(resolve, 0));

      const ok = await importBook(file);
      if (ok) berhasil++; else gagal++;
    }

    importStatus.classList.remove("visible");
    importStatus.textContent = "";

    await loadLibrary();

    if (berhasil && !gagal) {
      toast(berhasil === 1 ? "Buku ditambahkan." : `${berhasil} buku ditambahkan.`);
    } else if (berhasil && gagal) {
      toast(`${berhasil} buku ditambahkan, ${gagal} gagal.`);
    } else if (gagal) {
      toast("Buku gagal ditambahkan.");
    }
  }

  async function importBook(file) {
    const type = detectType(file);

    if (!type) {
      toast(`"${file.name}" dilewati — format belum didukung (EPUB, PDF, TXT).`);
      return false;
    }

    const book = {
      id: createId(),
      name: file.name,
      title: String(file.name).replace(/\.[^.]+$/, ""),
      author: "",
      type,
      file,
      addedAt: Date.now()
    };

    if (type === "txt") {
      try {
        const text = await file.text();
        const firstLines = text.split(/\r?\n/).slice(0, 8).filter(Boolean);
        if (firstLines.length) {
          book.title = firstLines[0].trim().slice(0, 120) || book.title;
        }
      } catch (error) {
        console.warn(error);
      }
    }

    if (type === "epub") {
      let tempBook = null;

      try {
        const arrayBuffer = await file.arrayBuffer();
        tempBook = ePub(arrayBuffer);

        const metadata = await tempBook.loaded.metadata;
        if (metadata.title) book.title = metadata.title;
        if (metadata.creator) book.author = metadata.creator;

        /* V1.1: simpan Blob sampul, bukan objectURL sementara. */
        try {
          const coverURL = await tempBook.coverUrl();
          if (coverURL) {
            const response = await fetch(coverURL);
            book.coverBlob = await response.blob();
            try { URL.revokeObjectURL(coverURL); } catch (e) {}
          }
        } catch (coverError) {
          console.log("Sampul tidak tersedia:", coverError);
        }
      } catch (error) {
        console.error(error);
        toast(`"${file.name}" bukan EPUB yang valid.`);
        return false;
      } finally {
        if (tempBook) {
          try { tempBook.destroy(); } catch (e) {}
        }
      }
    }

    if (type === "pdf") {
      /* V1.6: sampul PDF dibuat dari halaman pertama, dirender kecil
         supaya ringan (bukan resolusi baca, cukup untuk thumbnail
         di rak buku). Kalau gagal, tidak membatalkan impor — buku
         tetap masuk, cuma tanpa sampul (ikon dokumen generik). */
      try {
        if (typeof pdfjsLib !== "undefined") {
          const arrayBuffer = await file.arrayBuffer();
          const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
          const page = await pdf.getPage(1);

          const base = page.getViewport({ scale: 1 });
          const thumbScale = 240 / base.width; // lebar thumbnail ~240px
          const viewport = page.getViewport({ scale: thumbScale });

          const canvas = document.createElement("canvas");
          canvas.width = Math.floor(viewport.width);
          canvas.height = Math.floor(viewport.height);

          await page.render({
            canvasContext: canvas.getContext("2d", { alpha: false }),
            viewport
          }).promise;

          book.coverBlob = await new Promise((resolve) => {
            canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.82);
          });

          try { pdf.destroy(); } catch (e) {}
        }
      } catch (coverError) {
        console.log("Sampul PDF tidak tersedia:", coverError);
      }
    }

    try {
      await dbPut(STORE_BOOKS, book);
      await dbPut(STORE_PROGRESS, {
        id: book.id,
        progress: 0,
        location: "",
        page: 1,
        scrollRatio: 0,
        updatedAt: Date.now()
      });
      return true;
    } catch (error) {
      console.error(error);
      toast(`"${file.name}" gagal disimpan. Penyimpanan mungkin penuh.`);
      return false;
    }
  }

  /* ============================================================
     MEMBUKA BUKU
     ============================================================ */

  async function openBook(id) {
    let book = null;

    try {
      book = await dbGet(STORE_BOOKS, id);
    } catch (error) {
      console.error(error);
    }

    if (!book || !book.file) {
      toast("Buku tidak dapat dibuka.");
      return;
    }

    currentBook = book;

    const stored = (await dbGet(STORE_PROGRESS, id)) || null;

    currentProgress = stored || {
      id,
      /* Data V1: progres masih menempel di record buku. */
      progress: Number(book.progress || 0),
      location: book.location || "",
      page: Number(book.position || 1),
      scrollRatio: 0,
      updatedAt: Date.now()
    };

    stopClock();

    libraryView.style.display = "none";
    readerView.style.display = "block";
    window.scrollTo(0, 0);

    readerTitle.textContent = book.title || book.name;
    formatText.textContent = String(book.type || "").toUpperCase();

    readerBottom.classList.toggle("is-epub", book.type === "epub");

    settingsPanel.classList.remove("visible");

    const settings = getStoredSettings();
    applyTheme(settings.theme);
    applyFontSize();

    /* V2: siapkan fitur kenyamanan membaca untuk buku ini. */
    currentToc = null;
    pdfPageRatios = [];
    closeSheet(true);
    pdfZoomRow.classList.toggle("visible", book.type === "pdf");
    pdfPanLockRow.classList.toggle("visible", book.type === "pdf");
    epubHintRow.classList.toggle("visible", book.type === "epub");
    applyReaderLayout();

    updateProgressUI();
    showReaderControls();
    showReaderLoading();

    try {
      if (book.type === "epub") {
        await openEPUB(book);
      } else if (book.type === "pdf") {
        await openPDF(book);
      } else if (book.type === "txt") {
        await openTXT(book);
      } else {
        throw new Error("Format tidak dikenal.");
      }
    } catch (error) {
      console.error(error);
      toast(error && error.message ? error.message : "Buku gagal dibuka.");
      hideReaderLoading();
      await closeReader();
      return;
    }

    hideReaderLoading();
    updateProgressUI();
    showReaderControls();
  }

  function showReaderLoading() {
    readerLoading.classList.add("visible");
  }

  function hideReaderLoading() {
    readerLoading.classList.remove("visible");
  }

  function teardownReader() {
    window.removeEventListener("scroll", onTxtScroll);
    window.removeEventListener("scroll", onPdfScroll);

    if (pdfObserver) {
      try { pdfObserver.disconnect(); } catch (e) {}
      pdfObserver = null;
    }

    pdfWraps = [];
    pdfRendered.clear();
    pdfRendering.clear();
    pdfCurrentPage = 1;

    /* V2 */
    pdfPageRatios = [];
    currentToc = null;
    searchToken++;
    closeSheet(true);

    epubArea.style.display = "none";
    pdfArea.style.display = "none";
    txtArea.style.display = "none";

    epubViewer.innerHTML = "";
    pdfArea.innerHTML = "";
    txtArea.textContent = "";

    if (currentRendition) {
      try { currentRendition.destroy(); } catch (e) {}
      currentRendition = null;
    }

    if (currentEpub) {
      try { currentEpub.destroy(); } catch (e) {}
      currentEpub = null;
    }

    if (currentPdf) {
      try { currentPdf.destroy(); } catch (e) {}
      currentPdf = null;
    }
  }

  async function closeReader() {
    clearTimeout(saveTimer);
    saveTimer = null;
    await flushProgress();

    teardownReader();

    currentBook = null;
    currentProgress = null;
    currentTxtText = "";

    readerView.style.display = "none";
    readerBottom.classList.remove("is-epub");
    settingsPanel.classList.remove("visible");
    libraryView.style.display = "block";
    startClock();

    window.scrollTo(0, 0);

    await loadLibrary();
  }

  /* ============================================================
     PEMBACA EPUB
     ============================================================ */

  function epubPalette() {
    const theme = getStoredSettings().theme;

    if (theme === "dark") return { background: "#1c1c1c", color: "#e8e8e8" };
    if (theme === "sepia") return { background: "#f8f0df", color: "#4b3b2b" };
    return { background: "#ffffff", color: "#222222" };
  }

  /* CSS yang disuntikkan ke dalam dokumen EPUB (iframe).
     Ukuran huruf tetap ditangani oleh themes.fontSize() milik epub.js
     agar halaman dihitung ulang dengan benar. */
  function epubThemeCSS() {
    const settings = getStoredSettings();
    const palette = epubPalette();

    /* V2: jarak baris kini mengikuti pilihan pengguna. Ukuran huruf
       besar sedikit dirapatkan supaya satu halaman tidak terlalu
       cepat habis. */
    let lineHeight = LINE_STEPS[settings.lineHeight];
    if (settings.fontSize >= 22) lineHeight = Math.max(1.35, lineHeight - 0.05);

    const fontFamily = FONT_FAMILIES[settings.fontFamily];

    return `
      html, body {
        background: ${palette.background} !important;
        color: ${palette.color} !important;
      }
      body {
        font-family: ${fontFamily} !important;
        line-height: ${lineHeight} !important;
        padding: 0 4px !important;
      }
      p, li, div, span, td, th, blockquote,
      h1, h2, h3, h4, h5, h6 {
        color: ${palette.color} !important;
      }
      a, a:link, a:visited {
        color: ${palette.color} !important;
      }
      p { margin: 0 0 1em 0 !important; }
      img, svg { max-width: 100% !important; height: auto !important; }
    `;
  }

  function injectEpubStyle(contents) {
    try {
      const doc = contents && contents.document;
      if (!doc || !doc.head) return;

      let style = doc.getElementById("readerThemeStyle");

      if (!style) {
        style = doc.createElement("style");
        style.id = "readerThemeStyle";
        doc.head.appendChild(style);
      }

      style.textContent = epubThemeCSS();
    } catch (error) {
      console.warn("Tema EPUB gagal disuntikkan:", error);
    }
  }

  /* V1.1: tema ikut diterapkan saat buku dibuka, bukan hanya saat
     tombol tema ditekan. */
  function applyEpubTheme() {
    if (!currentRendition) return;

    try {
      currentRendition.getContents().forEach(injectEpubStyle);
    } catch (error) {
      console.warn(error);
    }

    try {
      currentRendition.themes.fontSize(getStoredSettings().fontSize + "px");
    } catch (e) {}
  }

  async function openEPUB(book) {
    epubArea.style.display = "block";

    if (typeof ePub !== "function") {
      throw new Error("Mesin EPUB belum termuat. Aktifkan internet saat membuka aplikasi.");
    }

    const arrayBuffer = await book.file.arrayBuffer();

    currentEpub = ePub(arrayBuffer);

    currentRendition = currentEpub.renderTo("epubViewer", {
      width: "100%",
      height: "100%",
      spread: "none",
      flow: "paginated"
    });

    currentRendition.themes.fontSize(getStoredSettings().fontSize + "px");

    registerEpubGestures();

    await currentRendition.display(currentProgress.location || undefined);

    currentRendition.on("relocated", onEpubRelocated);

    /* Peta lokasi dihitung/dimuat di latar belakang, tanpa menunda
       tampilnya halaman pertama. */
    prepareEpubLocations();
  }

  function onEpubRelocated(location) {
    if (!currentBook || !currentProgress) return;

    const start = (location && location.start) || {};

    if (start.cfi) {
      currentProgress.location = start.cfi;
    }

    let ratio = Number(start.percentage || 0);

    if (currentEpub && currentEpub.locations && currentEpub.locations.length && start.cfi) {
      try {
        const mapped = currentEpub.locations.percentageFromCfi(start.cfi);
        if (typeof mapped === "number" && !Number.isNaN(mapped)) {
          ratio = mapped;
        }
      } catch (e) {}
    }

    currentProgress.progress = Math.round(clamp(ratio, 0, 1) * 100);

    updateProgressUI();
    markProgressDirty();
  }

  async function prepareEpubLocations() {
    if (!currentEpub || !currentBook) return;

    const bookId = currentBook.id;

    try {
      const cached = await dbGet(STORE_LOCATIONS, bookId);

      if (cached && cached.json) {
        currentEpub.locations.load(cached.json);
      } else {
        await currentEpub.locations.generate(EPUB_LOCATION_CHARS);

        if (currentBook && currentBook.id === bookId) {
          try {
            await dbPut(STORE_LOCATIONS, {
              id: bookId,
              json: currentEpub.locations.save(),
              updatedAt: Date.now()
            });
          } catch (e) {
            console.warn("Peta lokasi gagal disimpan:", e);
          }
        }
      }

      /* Perbarui persentase tanpa memanggil display() lagi, supaya
         tampilan tidak melompat. */
      if (currentBook && currentBook.id === bookId && currentRendition && currentProgress) {
        const location = currentRendition.currentLocation();
        const cfi = location && location.start ? location.start.cfi : "";

        if (cfi) {
          const mapped = currentEpub.locations.percentageFromCfi(cfi);
          if (typeof mapped === "number" && !Number.isNaN(mapped)) {
            currentProgress.progress = Math.round(clamp(mapped, 0, 1) * 100);
            updateProgressUI();
            markProgressDirty();
          }
        }
      }
    } catch (error) {
      console.log("Peta lokasi belum tersedia:", error);
    }
  }

  /* V1.1: EPUB kini bisa diganti halaman di layar sentuh. */
  function registerEpubGestures() {
    currentRendition.on("click", (event) => {
      if (suppressEpubTap) return;

      const width = epubViewer.clientWidth || window.innerWidth;
      const x = event && typeof event.clientX === "number"
        ? event.clientX
        : width / 2;

      if (x < width * 0.28) {
        epubPrev();
      } else if (x > width * 0.72) {
        epubNext();
      } else {
        toggleReaderControls();
      }
    });

    currentRendition.hooks.content.register((contents) => {
      injectEpubStyle(contents);

      const doc = contents.document;
      if (!doc) return;

      let startX = 0;
      let startY = 0;
      let startTime = 0;

      doc.addEventListener("touchstart", (event) => {
        const touch = event.changedTouches[0];
        startX = touch.clientX;
        startY = touch.clientY;
        startTime = Date.now();
      }, { passive: true });

      doc.addEventListener("touchend", (event) => {
        const touch = event.changedTouches[0];
        const dx = touch.clientX - startX;
        const dy = touch.clientY - startY;
        const dt = Date.now() - startTime;

        if (dt < 700 && Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy) * 1.5) {
          suppressEpubTap = true;
          setTimeout(() => { suppressEpubTap = false; }, 450);

          if (dx < 0) epubNext(); else epubPrev();
        }
      }, { passive: true });
    });
  }

  function epubNext() {
    if (currentRendition) currentRendition.next();
  }

  function epubPrev() {
    if (currentRendition) currentRendition.prev();
  }

  /* ============================================================
     PEMBACA PDF (render bertahap)
     ============================================================ */

  function pdfContainerWidth() {
    const rect = pdfArea.getBoundingClientRect();
    return rect.width || window.innerWidth || 360;
  }

  async function openPDF(book) {
    /* Pengaman ganda: pastikan dua area lain benar-benar tersembunyi,
       supaya tidak mungkin berbagi tempat berdampingan (lihat V1.2). */
    epubArea.style.display = "none";
    txtArea.style.display = "none";
    pdfArea.style.display = "block";

    if (!window.pdfjsLib) {
      throw new Error("Mesin PDF belum termuat. Aktifkan internet saat membuka aplikasi.");
    }

    const arrayBuffer = await book.file.arrayBuffer();

    currentPdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

    pdfArea.innerHTML = "";
    pdfWraps = [];
    pdfRendered.clear();
    pdfRendering.clear();

    /* Ukuran halaman pertama dipakai sebagai perkiraan tinggi kotak
       kosong (dalam piksel, bukan CSS aspect-ratio, agar konsisten di
       semua versi WebView Android); ukuran presisi dipasang ulang saat
       tiap halaman benar-benar dirender. */
    const firstPage = await currentPdf.getPage(1);
    const baseViewport = firstPage.getViewport({ scale: 1 });
    const containerWidth = pdfContainerWidth();
    const estimatedHeight = Math.round(
      containerWidth * (baseViewport.height / baseViewport.width)
    );

    for (let pageNumber = 1; pageNumber <= currentPdf.numPages; pageNumber++) {
      const wrap = document.createElement("div");
      wrap.className = "pdf-page";
      wrap.dataset.page = String(pageNumber);
      wrap.style.height = estimatedHeight + "px";
      wrap.innerHTML = `<div class="pdf-page-number">${pageNumber}</div>`;

      pdfArea.appendChild(wrap);
      pdfWraps.push(wrap);
    }

    /* V1.1: satu observer untuk seluruh dokumen, bukan satu per halaman.
       V1.3: halaman di latar (belum terlihat penuh) dirender satu per
       satu lewat antrean, supaya tidak ada beberapa kanvas berat
       dirender berbarengan yang bikin aplikasi terasa lambat/macet. */
    pdfObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        const pageNumber = Number(entry.target.dataset.page);
        if (pageNumber) queuePdfRender(pageNumber);
      });
    }, { root: null, rootMargin: "400px 0px" });

    pdfWraps.forEach(wrap => pdfObserver.observe(wrap));

    pdfCurrentPage = clamp(
      Number(currentProgress.page || 1),
      1,
      currentPdf.numPages
    );

    window.addEventListener("scroll", onPdfScroll, { passive: true });

    await renderPdfPage(pdfCurrentPage);

    if (pdfCurrentPage > 1) {
      requestAnimationFrame(() => {
        const target = pdfWraps[pdfCurrentPage - 1];
        if (target) target.scrollIntoView({ block: "start", inline: "nearest" });
      });
    }

    updateProgressUI();
  }

  /* V1.3: halaman latar (pre-render dari IntersectionObserver) masuk
     antrean dan dirender satu per satu — bukan langsung, biar tidak
     ada beberapa halaman berat dirender berbarengan (penyebab utama
     "lambat/nge-lag" yang dilaporkan). Membuka halaman yang sedang
     dibaca (openPDF/goToPdfPage) tetap langsung, tidak lewat antrean,
     supaya terasa responsif. */
  function queuePdfRender(pageNumber) {
    pdfBackgroundQueue = pdfBackgroundQueue
      .then(() => renderPdfPage(pageNumber))
      .catch((error) => console.warn(error));
  }

  async function renderPdfPage(pageNumber) {
    if (!currentPdf) return;
    if (pdfRendered.has(pageNumber) || pdfRendering.has(pageNumber)) return;

    const wrap = pdfWraps[pageNumber - 1];
    if (!wrap) return;

    pdfRendering.add(pageNumber);

    try {
      const page = await currentPdf.getPage(pageNumber);

      /* Buku bisa saja sudah ditutup selama proses menunggu. */
      if (!currentPdf || !pdfWraps.length) return;

      const base = page.getViewport({ scale: 1 });

      /* V2: rasio tiap halaman disimpan supaya kotak kosong bisa
         dihitung ulang dengan benar ketika tingkat zoom berubah. */
      pdfPageRatios[pageNumber - 1] = base.height / base.width;

      /* V1.4: tinggi kotak dihitung ULANG di sini pakai proporsi
         halaman INI sendiri (bukan proporsi sampul yang dipakai
         sebagai tebakan awal untuk semua halaman). Tetap pakai tinggi
         piksel eksplisit (bukan CSS aspect-ratio) sesuai keputusan
         V1.1 soal kompatibilitas WebView Android. */
      const cssWidth = wrap.clientWidth || pdfArea.clientWidth || 600;
      wrap.style.height = Math.round(cssWidth * (base.height / base.width)) + "px";

      /* V1.3: resolusi dinaikkan (sebelumnya dibatasi maksimal 2x,
         padahal banyak HP Android layar rapat pakai rasio 2.5-3x —
         itulah sebabnya teks terlihat buram). Sisi kanvas tetap
         dijaga di bawah PDF_MAX_CANVAS_DIMENSION supaya tidak boros
         memori pada halaman yang sangat besar. */
      /* V2: saat halaman di-zoom, cssWidth sudah ikut membesar, jadi
         kepadatan piksel diturunkan sedikit (dibagi akar zoom) supaya
         hasilnya tetap lebih tajam dari sebelumnya tanpa membuat
         kanvas boros memori. */
      const zoom = getStoredSettings().pdfZoom;
      const targetDpr = Math.min(
        ((window.devicePixelRatio || 1) * 1.5) / Math.sqrt(Math.max(1, zoom)),
        4
      );
      let renderScale = (cssWidth * targetDpr) / base.width;

      const cap = zoom > 1.2 ? 2600 : PDF_MAX_CANVAS_DIMENSION;
      const longestSide = Math.max(base.width, base.height) * renderScale;
      if (longestSide > cap) {
        renderScale *= cap / longestSide;
      }

      const viewport = page.getViewport({ scale: renderScale });

      const canvas = document.createElement("canvas");
      canvas.width = Math.floor(viewport.width);
      canvas.height = Math.floor(viewport.height);

      await page.render({
        canvasContext: canvas.getContext("2d", { alpha: false }),
        viewport
      }).promise;

      if (!currentPdf || !pdfWraps.length) return;

      wrap.innerHTML = "";
      wrap.appendChild(canvas);
      pdfRendered.add(pageNumber);
    } catch (error) {
      console.warn("Halaman PDF gagal dirender:", pageNumber, error);
    } finally {
      pdfRendering.delete(pageNumber);
    }
  }

  /* Lepaskan halaman yang jauh dari layar agar memori tidak menumpuk. */
  function cleanupPdfPages() {
    if (!pdfRendered.size) return;

    Array.from(pdfRendered).forEach(pageNumber => {
      if (Math.abs(pageNumber - pdfCurrentPage) <= PDF_KEEP_PAGES) return;

      const wrap = pdfWraps[pageNumber - 1];
      if (wrap) {
        wrap.innerHTML = `<div class="pdf-page-number">${pageNumber}</div>`;
      }

      pdfRendered.delete(pageNumber);
    });
  }

  function detectPdfCurrentPage() {
    const marker = Math.round(window.innerHeight * 0.25);
    const element = document.elementFromPoint(window.innerWidth / 2, marker);
    const wrap = element && element.closest ? element.closest(".pdf-page") : null;

    if (wrap && wrap.dataset.page) {
      return Number(wrap.dataset.page);
    }

    /* Cadangan: cari halaman terdekat di sekitar posisi terakhir. */
    for (let offset = 0; offset <= 4; offset++) {
      for (const candidate of [pdfCurrentPage - offset, pdfCurrentPage + offset]) {
        const element = pdfWraps[candidate - 1];
        if (!element) continue;

        const rect = element.getBoundingClientRect();
        if (rect.top <= marker && rect.bottom > marker) return candidate;
      }
    }

    return pdfCurrentPage;
  }

  function onPdfScroll() {
    if (pdfScrollQueued || !currentPdf) return;

    pdfScrollQueued = true;

    requestAnimationFrame(() => {
      pdfScrollQueued = false;

      if (!currentPdf || !currentProgress || isSeeking) return;

      const page = clamp(detectPdfCurrentPage(), 1, currentPdf.numPages);

      if (page !== pdfCurrentPage) {
        pdfCurrentPage = page;
        cleanupPdfPages();
      }

      currentProgress.page = pdfCurrentPage;
      currentProgress.progress = Math.round(
        (pdfCurrentPage / currentPdf.numPages) * 100
      );

      updateProgressUI();
      markProgressDirty();
    });
  }

  function goToPdfPage(pageNumber) {
    if (!currentPdf) return;

    const page = clamp(Math.round(pageNumber), 1, currentPdf.numPages);
    const wrap = pdfWraps[page - 1];
    if (!wrap) return;

    pdfCurrentPage = page;
    renderPdfPage(page);
    wrap.scrollIntoView({ block: "start", inline: "nearest" });
  }

  /* ---------- V2: ZOOM PDF ---------- */

  /* Kosongkan satu halaman kembali menjadi kotak berisi nomor, dan
     hitung ulang tingginya memakai rasio halaman itu sendiri. */
  function resetPdfWrap(pageNumber) {
    const wrap = pdfWraps[pageNumber - 1];
    if (!wrap) return;

    wrap.innerHTML = `<div class="pdf-page-number">${pageNumber}</div>`;

    const ratio = pdfPageRatios[pageNumber - 1] || pdfPageRatios[0] || 1.414;
    const width = wrap.clientWidth || pdfArea.clientWidth || 600;
    wrap.style.height = Math.round(width * ratio) + "px";
  }

  /* Ubah tingkat pembesaran PDF, lalu render ULANG halaman pada lebar
     baru (bukan memperbesar gambar lama) supaya teks tetap tajam. */
  function setPdfZoom(zoom) {
    const settings = getStoredSettings();
    settings.pdfZoom = clamp(Number(zoom) || 1, 0.5, 3);
    saveSettings(settings);

    applyReaderLayout();

    if (!currentPdf) return;

    const wasPage = pdfCurrentPage;

    Array.from(pdfRendered).forEach(pageNumber => pdfRendered.delete(pageNumber));

    requestAnimationFrame(() => {
      if (!currentPdf) return;

      for (let pageNumber = 1; pageNumber <= pdfWraps.length; pageNumber++) {
        resetPdfWrap(pageNumber);
      }

      renderPdfPage(wasPage);

      /* Saat "Kunci posisi" aktif, JANGAN gulung ulang ke halaman —
         biarkan posisi geser (kiri/kanan/atas/bawah) yang sudah diatur
         pengguna lewat pinch-zoom jari tetap seperti apa adanya,
         supaya tidak ikut bergeser tiap kali render ulang terjadi. */
      if (!getStoredSettings().pdfPanLock) {
        const wrap = pdfWraps[wasPage - 1];
        if (wrap) requestAnimationFrame(() => wrap.scrollIntoView({ block: "start", inline: "nearest" }));
      }
    });
  }

  function stepPdfZoom(direction) {
    const current = getStoredSettings().pdfZoom;

    if (direction > 0) {
      const next = PDF_ZOOM_STEPS.find(value => value > current + 0.01);
      setPdfZoom(next || PDF_ZOOM_STEPS[PDF_ZOOM_STEPS.length - 1]);
    } else {
      const lower = PDF_ZOOM_STEPS.filter(value => value < current - 0.01);
      setPdfZoom(lower.length ? lower[lower.length - 1] : PDF_ZOOM_STEPS[0]);
    }

    toast("Zoom PDF " + Math.round(getStoredSettings().pdfZoom * 100) + "%");
  }

  /* ============================================================
     PEMBACA TXT
     ============================================================ */

  function maxScroll() {
    return Math.max(
      0,
      document.documentElement.scrollHeight - window.innerHeight
    );
  }

  async function openTXT(book) {
    txtArea.style.display = "block";

    currentTxtText = await book.file.text();
    txtArea.textContent = currentTxtText;

    let ratio = Number(currentProgress.scrollRatio || 0);

    /* Data V1 hanya menyimpan persentase; posisi dipulihkan dari sana. */
    if (!ratio && currentProgress.progress) {
      ratio = Number(currentProgress.progress) / 100;
    }

    ratio = clamp(ratio, 0, 1);

    /* Tunggu dua frame agar tinggi halaman sudah final sebelum
       memulihkan posisi. */
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const limit = maxScroll();
        if (limit > 0 && ratio > 0) {
          window.scrollTo(0, Math.round(limit * ratio));
        }
        if (currentBook && currentBook.type === "txt") {
          window.addEventListener("scroll", onTxtScroll, { passive: true });
        }
      });
    });
  }

  function onTxtScroll() {
    if (txtScrollQueued) return;

    txtScrollQueued = true;

    requestAnimationFrame(() => {
      txtScrollQueued = false;

      if (!currentBook || currentBook.type !== "txt" || !currentProgress) return;
      if (isSeeking) return;

      const limit = maxScroll();
      if (limit <= 0) return;

      const ratio = clamp(window.scrollY / limit, 0, 1);

      currentProgress.scrollRatio = ratio;
      currentProgress.progress = Math.round(ratio * 100);

      updateProgressUI();
      markProgressDirty();
    });
  }

  function goToTxtRatio(ratio) {
    const limit = maxScroll();
    if (limit <= 0) return;

    window.scrollTo(0, Math.round(limit * clamp(ratio, 0, 1)));
  }

  /* ============================================================
     V2 — LEMBAR SERBAGUNA (DAFTAR ISI / CARI / BOOKMARK)
     ============================================================ */

  function openSheet(mode) {
    if (!currentBook) return;

    sheetMode = mode;
    settingsPanel.classList.remove("visible");
    sheet.classList.add("visible");
    clearTimeout(toolbarTimer);

    sheetTools.classList.toggle("visible", mode === "search");

    if (mode === "toc") {
      sheetTitle.textContent = "Daftar Isi";
      showToc();
    } else if (mode === "search") {
      sheetTitle.textContent = "Cari dalam buku";
      renderSheetNote("Ketik kata yang dicari, lalu tekan Cari.");
      setTimeout(() => { try { sheetSearchInput.focus(); } catch (e) {} }, 80);
    } else if (mode === "bookmarks") {
      sheetTitle.textContent = "Bookmark";
      showBookmarks();
    }
  }

  function closeSheet(silent) {
    searchToken++;                  // hentikan pencarian yang masih berjalan
    sheet.classList.remove("visible");
    sheetMode = "";
    sheetBody.innerHTML = "";

    if (!silent) showReaderControls();
  }

  function renderSheetNote(message) {
    sheetBody.innerHTML = `<div class="sheet-note">${escapeHTML(message)}</div>`;
  }

  /* Satu baris hasil, dipakai daftar isi, hasil cari, dan bookmark. */
  function sheetItem(options) {
    /* Memakai <div>, bukan <button>, karena baris bookmark berisi tombol
       hapus di dalamnya — tombol di dalam tombol bukan HTML yang sah. */
    const button = document.createElement("div");
    button.className = "sheet-item";
    button.setAttribute("role", "button");
    button.tabIndex = 0;
    button.style.paddingLeft = (10 + (options.depth || 0) * 14) + "px";

    const main = document.createElement("div");
    main.className = "si-main";
    main.textContent = options.label || "(tanpa judul)";

    if (options.sub) {
      const sub = document.createElement("div");
      sub.className = "si-sub";
      sub.textContent = options.sub;
      main.appendChild(sub);
    }

    button.appendChild(main);

    if (options.onDelete) {
      const del = document.createElement("button");
      del.className = "si-del";
      del.type = "button";
      del.textContent = "✕";
      del.title = "Hapus";
      del.addEventListener("click", (event) => {
        event.stopPropagation();
        options.onDelete();
      });
      button.appendChild(del);
    }

    if (options.onOpen) {
      button.addEventListener("click", () => options.onOpen());
      button.addEventListener("keydown", (event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault();
          options.onOpen();
        }
      });
    }

    return button;
  }

  /* ---------- DAFTAR ISI ---------- */

  async function buildToc() {
    const list = [];

    if (currentBook.type === "epub" && currentEpub) {
      const navigation = await currentEpub.loaded.navigation;

      const walk = (items, depth) => {
        (items || []).forEach(item => {
          list.push({
            label: String(item.label || "").trim() || "(tanpa judul)",
            depth,
            href: item.href
          });

          if (item.subitems && item.subitems.length) walk(item.subitems, depth + 1);
        });
      };

      walk(navigation && navigation.toc, 0);
    } else if (currentBook.type === "pdf" && currentPdf) {
      const outline = await currentPdf.getOutline();

      const walk = async (items, depth) => {
        for (const item of (items || [])) {
          list.push({
            label: String(item.title || "").trim() || "(tanpa judul)",
            depth,
            page: await resolvePdfDestination(item.dest)
          });

          if (item.items && item.items.length) await walk(item.items, depth + 1);
        }
      };

      await walk(outline, 0);
    }

    return list;
  }

  /* Tujuan pada daftar isi PDF bisa berupa nama (string) atau larik
     referensi; keduanya harus diubah dulu menjadi nomor halaman. */
  async function resolvePdfDestination(dest) {
    try {
      let target = dest;

      if (typeof target === "string") {
        target = await currentPdf.getDestination(target);
      }

      if (!Array.isArray(target) || !target.length) return null;

      const index = await currentPdf.getPageIndex(target[0]);
      return index + 1;
    } catch (error) {
      return null;
    }
  }

  async function showToc() {
    if (currentBook.type === "txt") {
      renderSheetNote("File TXT tidak memiliki daftar isi.");
      return;
    }

    renderSheetNote("Membaca daftar isi...");

    if (!currentToc) {
      try {
        currentToc = await buildToc();
      } catch (error) {
        console.warn(error);
        currentToc = [];
      }
    }

    if (sheetMode !== "toc") return;

    if (!currentToc.length) {
      renderSheetNote("Buku ini tidak menyertakan daftar isi.");
      return;
    }

    sheetBody.innerHTML = "";

    currentToc.forEach(entry => {
      sheetBody.appendChild(sheetItem({
        label: entry.label,
        depth: entry.depth,
        sub: entry.page ? "Halaman " + entry.page : "",
        onOpen: () => {
          closeSheet();

          try {
            if (currentBook.type === "epub" && entry.href) {
              currentRendition.display(entry.href);
            } else if (currentBook.type === "pdf" && entry.page) {
              goToPdfPage(entry.page);
            } else {
              toast("Bagian ini tidak dapat dibuka.");
            }
          } catch (error) {
            console.warn(error);
            toast("Bagian ini tidak dapat dibuka.");
          }
        }
      }));
    });
  }

  /* ---------- CARI DALAM BUKU ---------- */

  function snippetAt(text, index, length) {
    const start = Math.max(0, index - 38);
    const end = Math.min(text.length, index + length + 48);

    return (start > 0 ? "…" : "")
      + text.slice(start, end).replace(/\s+/g, " ").trim()
      + (end < text.length ? "…" : "");
  }

  function renderSearchResults(results, note) {
    sheetBody.innerHTML = "";

    if (note) {
      const box = document.createElement("div");
      box.className = "sheet-note";
      box.textContent = note;
      sheetBody.appendChild(box);
    }

    results.forEach(result => {
      sheetBody.appendChild(sheetItem({
        label: result.label,
        sub: result.sub || "",
        onOpen: () => {
          closeSheet();
          jumpToSearchResult(result);
        }
      }));
    });
  }

  function jumpToSearchResult(result) {
    try {
      if (result.cfi && currentRendition) {
        currentRendition.display(result.cfi);
      } else if (typeof result.page === "number") {
        goToPdfPage(result.page);
      } else if (typeof result.ratio === "number") {
        goToTxtRatio(result.ratio);
      }
    } catch (error) {
      console.warn(error);
      toast("Hasil ini tidak dapat dibuka.");
    }
  }

  async function runSearch(rawQuery) {
    const query = String(rawQuery || "").trim();
    const token = ++searchToken;

    if (query.length < 2) {
      renderSearchResults([], "Ketik minimal 2 huruf.");
      return;
    }

    renderSearchResults([], "Mencari...");

    let results = [];

    try {
      if (currentBook.type === "epub") {
        results = await searchEpub(query, token);
      } else if (currentBook.type === "pdf") {
        results = await searchPdf(query, token);
      } else {
        results = searchTxt(query);
      }
    } catch (error) {
      console.warn(error);
    }

    if (token !== searchToken) return;   // pencarian sudah dibatalkan

    renderSearchResults(
      results,
      results.length
        ? results.length + " hasil" + (results.length >= SEARCH_LIMIT ? " (dibatasi)" : "")
        : "Tidak ditemukan."
    );
  }

  /* EPUB dicari per bagian (spine). Tiap bagian dimuat sebentar lalu
     dilepas lagi supaya pemakaian memori tetap kecil pada buku besar. */
  async function searchEpub(query, token) {
    const results = [];
    const sections = (currentEpub && currentEpub.spine && currentEpub.spine.spineItems) || [];

    for (let index = 0; index < sections.length; index++) {
      if (token !== searchToken) return results;

      const section = sections[index];

      try {
        await section.load(currentEpub.load.bind(currentEpub));

        (section.find(query) || []).forEach(found => {
          if (results.length >= SEARCH_LIMIT) return;

          results.push({
            label: String(found.excerpt || query).replace(/\s+/g, " ").trim(),
            cfi: found.cfi
          });
        });
      } catch (error) {
        /* Bagian yang gagal dimuat dilewati saja. */
      }

      try { section.unload(); } catch (e) {}

      if (results.length >= SEARCH_LIMIT) break;

      /* Beri napas ke antarmuka setiap beberapa bagian. */
      if (index % 4 === 3) {
        renderSearchResults(results, "Mencari... (" + (index + 1) + "/" + sections.length + ")");
        await new Promise(resolve => setTimeout(resolve, 0));
      }
    }

    return results;
  }

  async function searchPdf(query, token) {
    const results = [];
    const needle = query.toLowerCase();

    for (let pageNumber = 1; pageNumber <= currentPdf.numPages; pageNumber++) {
      if (token !== searchToken) return results;

      let text = "";

      try {
        const page = await currentPdf.getPage(pageNumber);
        const content = await page.getTextContent();
        text = content.items.map(item => item.str).join(" ");
      } catch (error) {
        continue;
      }

      const lower = text.toLowerCase();
      let index = lower.indexOf(needle);

      while (index !== -1 && results.length < SEARCH_LIMIT) {
        results.push({
          label: snippetAt(text, index, needle.length),
          sub: "Halaman " + pageNumber,
          page: pageNumber
        });

        index = lower.indexOf(needle, index + needle.length);
      }

      if (results.length >= SEARCH_LIMIT) break;

      if (pageNumber % 4 === 0) {
        renderSearchResults(
          results,
          "Mencari... (halaman " + pageNumber + "/" + currentPdf.numPages + ")"
        );
        await new Promise(resolve => setTimeout(resolve, 0));
      }
    }

    return results;
  }

  function searchTxt(query) {
    const results = [];
    const text = currentTxtText || "";
    const lower = text.toLowerCase();
    const needle = query.toLowerCase();

    let index = lower.indexOf(needle);

    while (index !== -1 && results.length < SEARCH_LIMIT) {
      results.push({
        label: snippetAt(text, index, needle.length),
        sub: Math.round((index / Math.max(1, text.length)) * 100) + "%",
        ratio: index / Math.max(1, text.length)
      });

      index = lower.indexOf(needle, index + needle.length);
    }

    return results;
  }

  /* ---------- BOOKMARK ---------- */

  async function bookmarksOfBook(bookId) {
    const all = await dbGetAll(STORE_BOOKMARKS);

    return all
      .filter(item => item && item.bookId === bookId)
      .sort((a, b) => Number(a.progress || 0) - Number(b.progress || 0));
  }

  async function deleteBookmarksOfBook(bookId) {
    try {
      const list = await bookmarksOfBook(bookId);
      for (const item of list) {
        await dbDelete(STORE_BOOKMARKS, item.id);
      }
    } catch (error) {
      console.warn("Bookmark gagal dihapus:", error);
    }
  }

  /* Ambil sepotong teks di sekitar posisi baca sebagai judul bookmark,
     supaya daftarnya tidak berisi angka persen semua. */
  function bookmarkLabel() {
    try {
      if (currentBook.type === "epub" && currentRendition) {
        const contents = currentRendition.getContents();
        const doc = contents && contents[0] && contents[0].document;
        const text = doc && doc.body ? (doc.body.innerText || doc.body.textContent || "") : "";
        const clean = text.replace(/\s+/g, " ").trim();

        if (clean) return clean.slice(0, 70);
      }

      if (currentBook.type === "pdf") {
        return "Halaman " + (currentProgress.page || 1);
      }

      if (currentBook.type === "txt" && currentTxtText) {
        const at = Math.floor(clamp(Number(currentProgress.scrollRatio || 0), 0, 1) * currentTxtText.length);
        const clean = currentTxtText.slice(at, at + 90).replace(/\s+/g, " ").trim();

        if (clean) return clean;
      }
    } catch (error) {
      console.warn(error);
    }

    return "Posisi " + Math.round(Number(currentProgress.progress || 0)) + "%";
  }

  async function addBookmark() {
    if (!currentBook || !currentProgress) return;

    const record = {
      id: "bm_" + Date.now() + "_" + Math.random().toString(36).slice(2),
      bookId: currentBook.id,
      type: currentBook.type,
      label: bookmarkLabel(),
      progress: Number(currentProgress.progress || 0),
      location: currentProgress.location || "",
      page: Number(currentProgress.page || 1),
      scrollRatio: Number(currentProgress.scrollRatio || 0),
      createdAt: Date.now()
    };

    try {
      await dbPut(STORE_BOOKMARKS, record);
      toast("Bookmark disimpan.");
    } catch (error) {
      console.error(error);
      toast("Bookmark gagal disimpan.");
    }
  }

  async function showBookmarks() {
    renderSheetNote("Memuat bookmark...");

    let list = [];

    try {
      list = await bookmarksOfBook(currentBook.id);
    } catch (error) {
      console.warn(error);
    }

    if (sheetMode !== "bookmarks") return;

    if (!list.length) {
      renderSheetNote(
        "Belum ada bookmark untuk buku ini. Buka Pengaturan (⋮), lalu tekan "
        + "\"＋ Tandai posisi ini\" saat sedang membaca."
      );
      return;
    }

    sheetBody.innerHTML = "";

    list.forEach(item => {
      const date = new Date(Number(item.createdAt || 0));

      sheetBody.appendChild(sheetItem({
        label: item.label || ("Posisi " + item.progress + "%"),
        sub: item.progress + "%"
          + (item.type === "pdf" ? " · halaman " + item.page : "")
          + " · " + date.toLocaleDateString("id-ID", {
              day: "numeric", month: "short", year: "numeric"
            }),
        onOpen: () => {
          closeSheet();
          jumpToBookmark(item);
        },
        onDelete: async () => {
          try {
            await dbDelete(STORE_BOOKMARKS, item.id);
            toast("Bookmark dihapus.");
            showBookmarks();
          } catch (error) {
            console.warn(error);
          }
        }
      }));
    });
  }

  function jumpToBookmark(item) {
    try {
      if (item.type === "epub" && item.location && currentRendition) {
        currentRendition.display(item.location);
      } else if (item.type === "pdf") {
        goToPdfPage(item.page || 1);
      } else if (item.type === "txt") {
        goToTxtRatio(Number(item.scrollRatio || 0));
      }
    } catch (error) {
      console.warn(error);
      toast("Bookmark tidak dapat dibuka.");
    }
  }

  /* ============================================================
     KONTROL PEMBACA
     ============================================================ */

  function showReaderControls() {
    readerToolbar.classList.add("visible");
    readerBottom.classList.add("visible");

    clearTimeout(toolbarTimer);

    /* Jangan sembunyikan saat panel pengaturan terbuka atau slider
       sedang digeser. */
    if (settingsPanel.classList.contains("visible") || isSeeking) return;

    toolbarTimer = setTimeout(() => {
      readerToolbar.classList.remove("visible");
      readerBottom.classList.remove("visible");
    }, 2800);
  }

  function hideReaderControls() {
    clearTimeout(toolbarTimer);
    readerToolbar.classList.remove("visible");
    readerBottom.classList.remove("visible");
    settingsPanel.classList.remove("visible");
  }

  function toggleReaderControls() {
    /* V2: saat lembar (daftar isi/cari/bookmark) terbuka, ketukan di
       belakangnya tidak boleh mengubah kontrol pembaca. */
    if (sheet.classList.contains("visible")) return;

    if (readerToolbar.classList.contains("visible")) {
      hideReaderControls();
    } else {
      showReaderControls();
    }
  }

  /* ============================================================
     EVENT
     ============================================================ */

  $("addBookBtn").addEventListener("click", () => fileInput.click());

  fileInput.addEventListener("change", async () => {
    const files = fileInput.files;

    if (files && files.length) {
      await importFiles(files);
    }

    fileInput.value = "";
  });

  searchInput.addEventListener("input", renderLibrary);

  $("backBtn").addEventListener("click", () => closeReader());

  $("fontDownBtn").addEventListener("click", () => {
    changeFont(-1);
    showReaderControls();
  });

  $("fontUpBtn").addEventListener("click", () => {
    changeFont(1);
    showReaderControls();
  });

  $("fontDownPanel").addEventListener("click", () => changeFont(-1));
  $("fontUpPanel").addEventListener("click", () => changeFont(1));

  /* V1.1: tombol tema langsung memutar tema, panel dibuka lewat tombol ⋮. */
  $("themeBtn").addEventListener("click", () => {
    const urutan = ["light", "sepia", "dark"];
    const sekarang = getStoredSettings().theme;
    const berikut = urutan[(urutan.indexOf(sekarang) + 1) % urutan.length];

    applyTheme(berikut);
    toast(
      berikut === "light" ? "Tema terang" :
      berikut === "sepia" ? "Tema sepia" : "Tema gelap"
    );
    showReaderControls();
  });

  $("settingsBtn").addEventListener("click", () => {
    settingsPanel.classList.toggle("visible");
    refreshSettingsUI();   // V2: tandai pilihan yang sedang aktif
    showReaderControls();
  });

  document.querySelectorAll("[data-theme]").forEach(button => {
    button.addEventListener("click", () => {
      applyTheme(button.dataset.theme);
      settingsPanel.classList.remove("visible");
      showReaderControls();
    });
  });

  prevPageBtn.addEventListener("click", (event) => {
    event.stopPropagation();
    epubPrev();
    showReaderControls();
  });

  nextPageBtn.addEventListener("click", (event) => {
    event.stopPropagation();
    epubNext();
    showReaderControls();
  });

  /* ---------- SLIDER PROGRES (satu handler untuk semua format) ---------- */

  function beginSeek() {
    isSeeking = true;
    clearTimeout(toolbarTimer);
  }

  function endSeek() {
    if (!isSeeking) return;
    isSeeking = false;
    showReaderControls();
  }

  progressSlider.addEventListener("pointerdown", beginSeek);
  progressSlider.addEventListener("touchstart", beginSeek, { passive: true });

  /* Sebagian browser tidak mengirim event "change" bila nilai tidak berubah,
     jadi status geser dilepas juga saat jari/pointer diangkat. */
  progressSlider.addEventListener("pointerup", () => setTimeout(endSeek, 0));
  progressSlider.addEventListener("pointercancel", () => setTimeout(endSeek, 0));
  progressSlider.addEventListener("touchend", () => setTimeout(endSeek, 0), { passive: true });

  progressSlider.addEventListener("input", () => {
    isSeeking = true;
    progressText.textContent = progressSlider.value + "%";

    if (!currentBook || !currentPdf) return;

    /* Untuk PDF, tampilkan nomor halaman tujuan saat digeser. */
    if (currentBook.type === "pdf") {
      const page = clamp(
        Math.round((Number(progressSlider.value) / 100) * currentPdf.numPages),
        1,
        currentPdf.numPages
      );
      formatText.textContent = "PDF " + page + "/" + currentPdf.numPages;
    }
  });

  progressSlider.addEventListener("change", async () => {
    if (!currentBook || !currentProgress) {
      endSeek();
      return;
    }

    const ratio = clamp(Number(progressSlider.value) / 100, 0, 1);

    try {
      if (currentBook.type === "epub") {
        if (currentEpub && currentEpub.locations && currentEpub.locations.length) {
          const cfi = currentEpub.locations.cfiFromPercentage(ratio);
          if (cfi) await currentRendition.display(cfi);
        } else {
          toast("Peta halaman EPUB masih dihitung, coba lagi sebentar lagi.");
        }
      } else if (currentBook.type === "pdf" && currentPdf) {
        isSeeking = false;
        goToPdfPage(ratio * currentPdf.numPages);
      } else if (currentBook.type === "txt") {
        isSeeking = false;
        goToTxtRatio(ratio);
      }
    } catch (error) {
      console.warn(error);
    }

    endSeek();
  });

  /* Ketuk di area pembaca (PDF/TXT) untuk menampilkan kontrol. */
  readerView.addEventListener("click", (event) => {
    if (
      event.target.closest(".reader-toolbar") ||
      event.target.closest(".reader-bottom") ||
      event.target.closest(".settings-panel")
    ) {
      return;
    }

    toggleReaderControls();
  });

  /* Keyboard (pengujian desktop) */
  document.addEventListener("keydown", (event) => {
    if (readerView.style.display !== "block") return;

    /* V2: saat mengetik di kotak pencarian, tombol panah dipakai untuk
       menggeser kursor teks — bukan untuk ganti halaman. */
    const tag = event.target && event.target.tagName;
    if ((tag === "INPUT" || tag === "TEXTAREA") && event.key !== "Escape") return;

    if (event.key === "Escape") {
      if (sheet.classList.contains("visible")) {
        closeSheet();
      } else if (settingsPanel.classList.contains("visible")) {
        settingsPanel.classList.remove("visible");
      } else {
        closeReader();
      }
      return;
    }

    if (!currentBook) return;

    if (currentBook.type === "epub") {
      if (event.key === "ArrowLeft") epubPrev();
      if (event.key === "ArrowRight") epubNext();
    } else if (currentBook.type === "pdf") {
      if (event.key === "ArrowLeft") goToPdfPage(pdfCurrentPage - 1);
      if (event.key === "ArrowRight") goToPdfPage(pdfCurrentPage + 1);
    }
  });

  /* Simpan paksa saat aplikasi disembunyikan atau ditutup. */
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") flushProgress();
  });

  window.addEventListener("pagehide", () => { flushProgress(); });

  /* Render ulang halaman PDF ketika lebar layar berubah (rotasi). */
  let resizeTimer = null;
  window.addEventListener("resize", () => {
    if (!currentBook) return;

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      if (currentPdf) {
        const pages = Array.from(pdfRendered);
        pdfRendered.clear();
        pages.forEach(pageNumber => resetPdfWrap(pageNumber));
        renderPdfPage(pdfCurrentPage);
      }

      /* V2: EPUB juga perlu dihitung ulang saat layar diputar. */
      if (currentRendition) resizeEpubView();
    }, 350);
  });

  /* ---------- V2: TOMBOL PANEL & LEMBAR ---------- */

  $("openTocBtn").addEventListener("click", () => openSheet("toc"));
  $("openSearchBtn").addEventListener("click", () => openSheet("search"));
  $("openBookmarkBtn").addEventListener("click", () => openSheet("bookmarks"));

  $("addBookmarkBtn").addEventListener("click", async () => {
    settingsPanel.classList.remove("visible");
    await addBookmark();
    showReaderControls();
  });

  $("sheetClose").addEventListener("click", () => closeSheet());

  /* Ketuk area gelap di luar lembar untuk menutup. */
  sheet.addEventListener("click", (event) => {
    if (event.target === sheet) closeSheet();
  });

  $("sheetSearchBtn").addEventListener("click", () => runSearch(sheetSearchInput.value));

  sheetSearchInput.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      runSearch(sheetSearchInput.value);
    }
  });

  document.querySelectorAll("[data-font]").forEach(button => {
    button.addEventListener("click", () => {
      const settings = getStoredSettings();
      settings.fontFamily = button.dataset.font;
      saveSettings(settings);
      applyReaderLayout({ resizeEpub: true });
      showReaderControls();
    });
  });

  document.querySelectorAll("[data-line]").forEach(button => {
    button.addEventListener("click", () => {
      const settings = getStoredSettings();
      settings.lineHeight = Number(button.dataset.line);
      saveSettings(settings);
      applyReaderLayout({ resizeEpub: true });
      showReaderControls();
    });
  });

  document.querySelectorAll("[data-margin]").forEach(button => {
    button.addEventListener("click", () => {
      const settings = getStoredSettings();
      settings.margin = Number(button.dataset.margin);
      saveSettings(settings);
      applyReaderLayout({ resizeEpub: true });
      showReaderControls();
    });
  });

  $("pdfZoomIn").addEventListener("click", () => stepPdfZoom(1));
  $("pdfZoomOut").addEventListener("click", () => stepPdfZoom(-1));

  $("pdfZoomReset").addEventListener("click", () => {
    setPdfZoom(1);
    toast("Zoom PDF 100%");
  });

  pdfPanLockBtn.addEventListener("click", () => {
    const settings = getStoredSettings();
    settings.pdfPanLock = !settings.pdfPanLock;
    saveSettings(settings);
    refreshSettingsUI();
    toast(settings.pdfPanLock
      ? "Posisi terkunci — geser dengan jari tidak akan direset"
      : "Posisi bebas — otomatis kembali ke atas halaman"
    );
  });

  /* ============================================================
     JAM & TANGGAL REALTIME (rak buku)
     ============================================================ */

  let clockTimer = null;

  function updateClock() {
    const now = new Date();

    clockTimeEl.textContent = now.toLocaleTimeString("id-ID", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit"
    });

    clockDateEl.textContent = now.toLocaleDateString("id-ID", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric"
    });
  }

  function startClock() {
    updateClock();
    if (clockTimer) return;
    clockTimer = setInterval(updateClock, 1000);
  }

  function stopClock() {
    clearInterval(clockTimer);
    clockTimer = null;
  }

  /* ============================================================
     MULAI
     ============================================================ */

  async function start() {
    try {
      /* V1.6: worker PDF diatur sekali di awal (bukan cuma saat buku
         dibuka), supaya pembuatan sampul PDF saat impor juga memakai
         worker asli — bukan fallback yang lebih lambat. */
      if (window.pdfjsLib) {
        pdfjsLib.GlobalWorkerOptions.workerSrc =
          "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
      }

      startClock();

      await openDB();
      await loadLibrary();

      const settings = getStoredSettings();
      applyTheme(settings.theme);
      applyFontSize();
      applyReaderLayout();   // V2: jenis huruf, jarak baris, margin, zoom
    } catch (error) {
      console.error(error);
      alert("Penyimpanan lokal tidak dapat digunakan pada browser ini.");
    }
  }

  start();

  /* ---------- SERVICE WORKER (offline setelah pemakaian pertama) ---------- */
  /* Hanya berhasil didaftarkan kalau halaman dibuka lewat http/https
     (termasuk http://localhost). Di file:// atau content:// (dibuka
     langsung dari file manager), baris ini akan gagal diam-diam —
     itu batasan keamanan bawaan Chrome, bukan bug. */
  if ("serviceWorker" in navigator) {
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("./sw.js").catch((error) => {
        console.warn("Service worker tidak aktif:", error);
      });
    });
  }

})();
</script>
</body>
</html>