/* ==========================================================================
   book-reader.css
   Library CSS untuk E-Reader Reflowable — Vanilla CSS, tanpa framework
   Versi: 1.0.0
   ========================================================================== */

/* === [1] IMPORT GOOGLE FONTS === */
/* Font Serif Latin: Merriweather untuk kenyamanan baca panjang            */
/* Font Arab     : Amiri untuk harakat Quran/Hadist yang jelas             */
/* Font UI       : Lora untuk judul & elemen antarmuka yang elegan         */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Amiri:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* === [2] CSS RESET & BOX-SIZING === */
/* Memastikan semua elemen menggunakan border-box agar padding tidak       */
/* melebihi lebar yang telah ditentukan (anti-clipping spec)               */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === [3] CSS CUSTOM PROPERTIES (DESIGN TOKENS) === */
:root {
  /* Palet warna tema "Perkamen Elegan" */
  --color-bg:             #F4EFE6;
  --color-page:           #FDFAF4;
  --color-text:           #25201A;
  --color-text-muted:     #6B5D50;
  --color-accent:         #8B5E3C;
  --color-accent-light:   #C9935A;
  --color-accent-pale:    #F0E0CB;
  --color-border:         #DDD3C5;
  --color-cover-dark:     #1C1610;
  --color-cover-mid:      #4A2E1A;
  --color-cover-light:    #8B5E3C;

  /* Warna UI kontrol bawah */
  --color-ctrl-bg:        #1C1610;
  --color-ctrl-text:      #F0E0CB;
  --color-ctrl-border:    #4A2E1A;

  /* Font families */
  --font-latin:  'Merriweather', 'Georgia', 'Times New Roman', serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Arabic Typesetting', serif;
  --font-ui:     'Lora', 'Palatino Linotype', Georgia, serif;

  /* Tinggi navigasi bawah — sisakan area ini dari tinggi viewport */
  --controls-height: 62px;

  /* Padding konten per halaman */
  --page-padding-v: 48px;
  --page-padding-h: 64px;
}

/* === [4] ROOT HTML & BODY === */
html,
body {
  width:    100%;
  height:   100%;
  overflow: hidden; /* Cegah body-level scroll; navigasi dikontrol JS */
  background-color: var(--color-bg);
  color:    var(--color-text);
  font-family: var(--font-latin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   [5] BOOK CONTAINER — KUNCI REFLOWABLE LAYOUT
   Properti `column-width: 100vw` membuat isi HTML mengalir ke kolom-kolom
   horizontal yang masing-masing setara dengan lebar layar (= satu "halaman").
   JS kemudian memanipulasi scrollLeft untuk berpindah antar halaman.
   ========================================================================== */
#book-container {
  display:       block;
  width:         100vw;

  /* Tinggi dikunci — sisa 20px sebagai "breathing room" dari URL bar mobile */
  height:        calc(100vh - var(--controls-height) - 2px);

  /* === KUNCI CSS COLUMNS === */
  column-width:  100vw;   /* Setiap kolom = lebar viewport = 1 halaman */
  column-gap:    0px;     /* Gap nol agar kalkulasi scroll JS tetap sederhana */
  column-fill:   auto;    /* Teks mengisi kolom dari atas ke bawah */

  /* Sembunyikan scrollbar, tetapi biarkan scroll bisa diset via JS */
  overflow-x:    scroll;
  overflow-y:    hidden;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge */

  /* Tambahkan padding bawah agar harakat Arab tidak terpotong batas bawah */
  padding-bottom: 20px;

  background-color: var(--color-page);

  /* Transisi visual jika diperlukan (fallback; animasi utama via JS) */
  scroll-behavior: auto;
}

/* Sembunyikan scrollbar di Chrome / Safari */
#book-container::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   [6] COVER PAGE
   Mengisi tepat satu "halaman" (1 kolom) dengan desain sampul premium.
   break-inside: avoid memastikan sampul tidak terpotong ke kolom berikutnya.
   ========================================================================== */
.cover-page {
  /* Kunci dimensi agar tepat 1 halaman */
  width:         100vw;
  height:        calc(100vh - var(--controls-height) - 2px);
  display:       flex;
  align-items:   center;
  justify-content: center;

  /* Properti break agar cover tidak meluber ke halaman lain */
  break-inside:  avoid;
  break-after:   column;

  /* Desain sampul: gradien gelap berlapis dengan efek emas */
  background: linear-gradient(
    145deg,
    var(--color-cover-dark) 0%,
    var(--color-cover-mid)  55%,
    var(--color-cover-light) 100%
  );

  /* Efek tekstur linen tipis di atas gradien */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%231C1610'/%3E%3Crect width='1' height='1' fill='%23ffffff08'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff06'/%3E%3C/svg%3E"),
    linear-gradient(145deg, var(--color-cover-dark) 0%, var(--color-cover-mid) 55%, var(--color-cover-light) 100%);

  color:         #F0E0CB;
  padding:       60px var(--page-padding-h);
}

.cover-content {
  text-align:    center;
  max-width:     520px;
  animation:     coverFadeIn 1s ease forwards;
}

@keyframes coverFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ornamen garis emas di atas dan bawah konten cover */
.cover-content::before,
.cover-content::after {
  content:  '';
  display:  block;
  width:    100%;
  height:   1px;
  background: linear-gradient(to right, transparent, var(--color-accent-light), transparent);
  margin:   20px 0;
}

.book-title {
  font-family:  var(--font-ui);
  font-size:    clamp(1.8rem, 5vw, 3.2rem);
  font-weight:  700;
  line-height:  1.25;
  color:        #F0E0CB;
  margin-bottom: 14px;
  text-shadow:  0 2px 12px rgba(0,0,0,0.5);
}

.book-subtitle {
  font-family:  var(--font-latin);
  font-size:    clamp(0.8rem, 1.8vw, 1rem);
  font-weight:  300;
  font-style:   italic;
  color:        var(--color-accent-light);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.cover-separator {
  width:        50px;
  height:       2px;
  background:   var(--color-accent-light);
  margin:       20px auto;
  border-radius: 2px;
  box-shadow:   0 0 8px rgba(201, 147, 90, 0.6);
}

.book-author {
  font-family:  var(--font-ui);
  font-size:    1rem;
  color:        #D9C5AD;
  margin-bottom: 6px;
  font-weight:  400;
}

.book-publisher {
  font-family:  var(--font-latin);
  font-size:    0.78rem;
  color:        #8A7060;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   [7] DAFTAR ISI (TABLE OF CONTENTS)
   ========================================================================== */
.table-of-contents {
  width:         100vw;
  min-height:    calc(100vh - var(--controls-height) - 2px);
  box-sizing:    border-box;
  padding:       var(--page-padding-v) var(--page-padding-h);
  break-before:  column; /* TOC selalu mulai di halaman baru */
  display:       flex;
  flex-direction: column;
  justify-content: center;
}

.table-of-contents h2 {
  font-family:  var(--font-ui);
  font-size:    1.5rem;
  font-weight:  600;
  color:        var(--color-accent);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-border);
  break-inside:  avoid;
  break-after:   avoid;
}

.table-of-contents ul {
  list-style:    none;
}

.table-of-contents ul li {
  margin-bottom: 4px;
  break-inside:  avoid;
}

.table-of-contents ul li a {
  font-family:   var(--font-latin);
  font-size:     0.97rem;
  color:         var(--color-text);
  text-decoration: none;
  display:       flex;
  align-items:   center;
  padding:       10px 14px;
  border-radius: 8px;
  border-left:   3px solid transparent;
  transition:    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height:   1.5;
}

.table-of-contents ul li a:hover {
  background-color: var(--color-accent-pale);
  border-left-color: var(--color-accent);
  color:         var(--color-accent);
}

/* Sub-bab dalam daftar isi: lebih kecil dan menjorok ke dalam */
.table-of-contents ul li a.toc-sub {
  font-size:     0.87rem;
  color:         var(--color-text-muted);
  padding-left:  34px;
  font-style:    italic;
}

.table-of-contents ul li a.toc-sub:hover {
  color:         var(--color-accent);
}

/* ==========================================================================
   [8] BAB (CHAPTER)
   break-before: column = setiap bab selalu dimulai di halaman baru.
   Ini adalah properti krusial yang mencegah teks bab sebelumnya
   menumpuk dengan awal bab berikutnya.
   ========================================================================== */
.chapter {
  box-sizing:    border-box;
  padding:       var(--page-padding-v) var(--page-padding-h) calc(var(--page-padding-v) + 20px);
  break-before:  column; /* KUNCI: Awal bab = halaman baru */
}

/* Judul bab (h2) */
.chapter h2 {
  font-family:   var(--font-ui);
  font-size:     clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight:   700;
  color:         var(--color-accent);
  line-height:   1.3;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-border);

  /* Cegah judul terpotong di akhir halaman */
  break-inside:  avoid;
  break-after:   avoid;
}

/* Sub-judul bab (h3) */
.chapter h3 {
  font-family:   var(--font-latin);
  font-size:     clamp(0.95rem, 2vw, 1.12rem);
  font-weight:   700;
  color:         var(--color-text-muted);
  margin-top:    30px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;

  break-inside:  avoid;
  break-after:   avoid;
}

/* Paragraf teks Latin */
.chapter p {
  font-family:   var(--font-latin);
  font-size:     clamp(0.88rem, 1.4vw, 1rem);
  line-height:   1.95;

  /* Justify + hyphens agar rapi seperti buku cetak */
  text-align:    justify;
  hyphens:       auto;
  -webkit-hyphens: auto;

  color:         var(--color-text);
  margin-bottom: 18px;

  /* ANTI-CLIPPING: Cegah paragraf terpotong di tengah kolom */
  break-inside:  avoid;
}

/* ==========================================================================
   [9] KUTIPAN ARAB / HADIST / QURAN (RTL)
   Font Amiri dengan ukuran 1.6x dari teks Latin dan line-height renggang
   agar harakat di atas dan di bawah huruf tetap terbaca jelas.
   ========================================================================== */
.arabic-quote {
  font-family:   var(--font-arabic);

  /* Minimal 1.5x ukuran teks Latin (spec: font-size lebih besar) */
  font-size:     clamp(1.35rem, 2.8vw, 1.75rem);

  /* Line-height renggang agar harakat tidak saling bertumpuk */
  line-height:   2.4;

  /* Arah teks kanan ke kiri */
  direction:     rtl;
  text-align:    right;

  color:         var(--color-accent);
  background:    linear-gradient(135deg, #FDF5E8 0%, #F5E8D0 100%);
  border-right:  4px solid var(--color-accent);
  border-radius: 10px;
  padding:       22px 26px 22px 20px;
  margin:        24px 0 10px;

  /* ANTI-CLIPPING: Kutipan Arab tidak boleh terpotong antar halaman */
  break-inside:  avoid;

  /* Bayangan tipis agar terasa "terangkat" */
  box-shadow:    inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 8px rgba(139, 94, 60, 0.1);
}

/* Terjemahan kutipan (cite) */
.quote-translation {
  display:       block;
  font-family:   var(--font-latin);
  font-size:     0.85rem;
  font-style:    italic;
  color:         var(--color-text-muted);
  padding:       6px 14px 22px;
  line-height:   1.6;

  /* Terjemahan tidak boleh terpisah dari kutipan Arabnya */
  break-inside:  avoid;
}

/* ==========================================================================
   [10] NAVIGASI KONTROL (FIXED FOOTER)
   Diposisikan fixed di luar aliran dokumen agar selalu terlihat.
   ========================================================================== */
#reader-controls {
  position:      fixed;
  bottom:        0;
  left:          0;
  width:         100%;
  height:        var(--controls-height);
  background:    var(--color-ctrl-bg);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       0 20px;
  z-index:       9999;

  /* Bayangan ke atas agar terasa terpisah dari konten */
  box-shadow:    0 -2px 20px rgba(0, 0, 0, 0.35);

  /* Garis ornamen emas di atas bar navigasi */
  border-top:    1px solid var(--color-ctrl-border);
}

/* Tombol navigasi */
#reader-controls button {
  font-family:   var(--font-ui);
  font-size:     0.88rem;
  font-weight:   600;
  color:         var(--color-ctrl-text);
  background:    transparent;
  border:        1.5px solid var(--color-ctrl-border);
  border-radius: 8px;
  padding:       8px 18px;
  cursor:        pointer;
  letter-spacing: 0.3px;
  transition:    background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  white-space:   nowrap;
  user-select:   none;
  -webkit-user-select: none;
}

#reader-controls button:hover:not(:disabled) {
  background-color: var(--color-ctrl-border);
  border-color:  var(--color-accent-light);
}

#reader-controls button:active:not(:disabled) {
  transform:     scale(0.96);
}

/* Tombol dinonaktifkan (halaman pertama / terakhir) */
#reader-controls button:disabled {
  opacity:       0.3;
  cursor:        not-allowed;
}

/* Indikator halaman "Halaman X dari Y" */
#page-indicator {
  font-family:   var(--font-ui);
  font-size:     0.82rem;
  color:         var(--color-accent-light);
  letter-spacing: 0.6px;
  text-align:    center;
  flex-shrink:   0;
  transition:    opacity 0.3s ease;
}

/* ==========================================================================
   [11] RESPONSIVE — MOBILE (≤ 600px)
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    --page-padding-v: 32px;
    --page-padding-h: 24px;
    --controls-height: 58px;
  }

  .cover-page {
    padding: 40px 24px;
  }

  #reader-controls button {
    padding:   7px 12px;
    font-size: 0.8rem;
  }

  #page-indicator {
    font-size: 0.72rem;
  }

  .arabic-quote {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    padding: 16px 18px 16px 14px;
  }
}

/* ==========================================================================
   [12] RESPONSIVE — TABLET (601px – 1023px)
   ========================================================================== */
@media (min-width: 601px) and (max-width: 1023px) {
  :root {
    --page-padding-v: 44px;
    --page-padding-h: 52px;
  }
}

/* ==========================================================================
   [13] RESPONSIVE — DESKTOP (≥ 1024px)
   Pada layar lebar, tambah padding agar teks tidak terlalu melebar
   (menjaga panjang baris sekitar 70–75 karakter untuk kenyamanan baca).
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --page-padding-v: 56px;
    --page-padding-h: 140px;
  }
}

@media (min-width: 1440px) {
  :root {
    --page-padding-h: 200px;
  }
}