/* =====================================================================
   PDF-READER.CSS — Asarlar bo'limi PDF ko'ruvchisi
   reader.css USTIDAN yuklanadi: tema o'zgaruvchilari (--rd-*), sahifa
   chrome'i (.rd-wrap, .rd-head, .rd-toolbar, .rd-settings, .rd-bm-panel)
   o'sha yerdan olinadi. Bu fayl faqat canvas sahnasi va PDF navigatsiyasini
   qo'shadi.  reader.css va reader.js GA TEGILMAYDI — ularni tadqiqot.php
   ham ishlatadi.
   ===================================================================== */

/* ── A4 o'lchamlari ──────────────────────────────────────────────────────
   Bet A4 nisbatida (1 : √2) chiziladi, LEKIN ekranga to'liq sig'dirilmaydi.
   Maqsad — o'qish qulayligi: varaq EKRAN KENGLIGINI to'ldiradi, balandligi
   esa A4 nisbatidan kelib chiqib ekrandan uzun bo'ladi. Shuning uchun
   dastlab betning yuqori qismi ko'rinadi, qolgani aylantirib o'qiladi —
   xuddi haqiqiy qog'ozni stolda surib o'qigandek.

   AVVALGI YONDASHUV (noto'g'ri edi): balandlik 100vh dan hisoblanib,
   kenglik undan chiqarilardi. Natijada varaq 413px ga tushib, matn juda
   mayda bo'lib qolgan. Endi teskari: kenglik BIRLAMCHI. */
:root {
  --a4-ratio: 1.4142;                       /* balandlik / kenglik */
  /* Varaqning ko'rinadigan qismi (oyna). Bet balandligi bundan katta —
     ortiqcha qismi .pv-canvas-wrap ichida aylantiriladi. */
  --a4-view-h: calc(100vh - 300px);
}

/* ── Ustun: ekran bo'ylab keng ────────────────────────────────────────
   reader.css ga TEGILMAYDI — bu yerda faqat PDF sahifasi uchun override.
   DIQQAT: qog'ozga `width: fit-content` BERILMAYDI — canvas kengligi
   konteynerdan, konteyner kengligi esa canvas'dan hisoblanib, aylanma
   bog'liqlik hosil bo'ladi va bet min-width gacha kichrayib ketadi. */
.reader-body .rd-wrap {
  /* Matn o'qilarli bo'lishi uchun varaq imkon qadar keng: katta
     monitorlarda 1100px gacha, kichigida ekranning deyarli hammasi. */
  max-width: min(1100px, calc(100vw - 48px));
  padding-top: 74px;
  padding-bottom: 56px;
}

/* Sarlavha blokini sezilarli ixchamlashtirish: matn reader'ida u kayfiyat
   yaratadi, PDF sahifasida esa har bir piksel betning o'qilishiga ketadi.
   Bezakli ajratgich (rd-rule-orn) va yil qatori olib tashlanadi. */
.reader-body .rd-head { padding: 2px 8px 12px; }
.reader-body .rd-head .rd-crumb { margin-bottom: 8px; }
.reader-body .rd-head .rd-badge { margin-bottom: 8px; }
.reader-body .rd-head .rd-title {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin-bottom: 6px;
}
.reader-body .rd-head .rd-meta { font-size: 12.5px; }
.reader-body .rd-head .rd-rule-orn { display: none; }

/* ── Qog'oz: PDF uchun ichki padding kerak emas, canvas o'zi to'ldiradi ── */
.rd-paper.pdf-paper {
  padding: 0;
  overflow: hidden;
  min-height: 320px;
}

/* ── Sahna: canvas shu yerda joylashadi ───────────────────────────────── */
.pv-stage {
  position: relative;
  padding: 16px 16px 10px;
}

/* Bu konteyner — varaqqa qaraydigan OYNA (viewport), varaqning o'zi emas.
   Balandligi ekranga qarab cheklanadi; ichidagi canvas esa A4 nisbatida,
   ya'ni undan UZUNROQ bo'ladi va shu yerda aylantiriladi.

   Shuning uchun bu yerda `aspect-ratio` YO'Q: u konteynerni A4 qilib,
   varaqni ekran balandligiga siqib qo'yardi (matn mayda bo'lib ketardi).
   Endi kenglik ustundan olinadi, balandlik esa oddiy oyna balandligi. */
.pv-canvas-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* DIQQAT: `display: flex` + `align-items: center` ISHLATILMAYDI.
     Zoom qilinganda canvas konteynerdan baland bo'ladi va flex markazlash
     uning YUQORI qismini kesib tashlaydi (aylantirib ham yetib bo'lmaydi).
     Oddiy blok oqimi + canvas'dagi `margin: auto` kichik betni markazlaydi,
     kattasini esa to'liq aylantirish imkonini beradi. */
  width: 100%;
  height: var(--a4-view-h);
  min-height: 320px;
  margin: 0 auto;
  background: #fff;
  border-radius: 3px;
  box-shadow: var(--rd-shadow-sm);

  /* Gorizontal markazlash: flex + `justify-content: center` EMAS —
     u bola kengroq bo'lganda chap chetini kesib qo'yadi. `safe center`
     esa aynan shu holat uchun: sig'sa markazlaydi, sig'masa chapdan
     boshlaydi va butun bet aylantirib ko'riladi. */
  display: flex;
  justify-content: safe center;
  align-items: flex-start;       /* bet TEPASIDAN boshlanadi */

  /* Vertikal aylantirish silliq to'xtasin (bet ichida o'qish uchun) */
  overscroll-behavior: contain;

}

/* Firefox uchun (Chrome'da BERILMAYDI — u `::-webkit-scrollbar` ni bekor
   qilib, aylantirgichni 12px o'rniga 2px ga tushirib qo'yadi). */
@supports (-moz-appearance: none) {
  .pv-canvas-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--rd-ink-soft) transparent;
  }
}

/* ── Aylantirish paneli (scrollbar) ──────────────────────────────────────
   MUHIM: style.css (130-133 qatorlar) butun sayt bo'ylab scrollbar'ni
   `width: 0` bilan YASHIRADI — bu saytning umumiy dizayni va unga
   TEGILMAYDI. Ammo asar o'qish oynasida aylantirgich KERAK: betning
   yarmi ekrandan tashqarida qoladi va o'quvchi buni ko'rishi kerak.
   Shuning uchun bu yerda faqat o'qish oynasi uchun qayta tiklanadi. */
.pv-canvas-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}
.pv-canvas-wrap::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--rd-border) 25%, transparent);
  border-radius: 10px;
}
.pv-canvas-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--rd-ink-soft) 32%, transparent);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;   /* yon tomonlarida kichik bo'shliq qoladi */
}
.pv-canvas-wrap::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--rd-ink-soft) 55%, transparent);
  background-clip: content-box;
}
/* Gorizontal va vertikal aylantirgich kesishgan burchak */
.pv-canvas-wrap::-webkit-scrollbar-corner { background: transparent; }

.pv-canvas-wrap canvas {
  display: block;
  background: #fff;              /* render tugagunicha shaffof yaltirash bo'lmasin */
  transition: opacity .18s ease;

  /* Markazlash: `margin: auto` ISHLATILMAYDI. Bola konteynerdan KENGROQ
     bo'lganda (zoom) `margin:auto` uni chapga qisib, aylantirilganda bet
     o'ngga "qochib" ketardi — aynan shu nosozlik kuzatilgan.
     `margin: 0 auto` o'rniga konteynerda `justify-content` ishlatiladi
     (pastga qarang), u overflow holatida ham to'g'ri ishlaydi. */
  margin: 0;

  /* DIQQAT: bu yerga `max-width: 100%` QO'YILMAYDI.
     Canvas o'lchamini JS beradi (style.width/height — masshtabga mos, A4
     nisbati saqlangan holda). CSS uni qisib qo'ysa, kenglik kichrayadi-yu
     balandlik o'zgarmaydi va bet CHO'ZILIB, uzunchoq bo'lib qoladi
     (mobil zoomda aynan shu kuzatilgan). Zoom qilinganda bet konteynerdan
     kattaroq bo'lishi normal — ortiqcha qismi aylantiriladi. */
  flex: none;                    /* flex konteynerda siqilib ketmasin */
}

/* Bet almashayotganda yengil so'nish — tez varaqlashda "muzlab qolgandek"
   tuyulmasligi uchun. JS ~120ms kechikish bilan qo'shadi. */
.pv-canvas-wrap.is-rendering canvas { opacity: .35; }

/* ── Tungi rejim: canvas'ni invert qilish ────────────────────────────────
   MUHIM: bu filtr rasmlarni ham negativga aylantiradi (skanerlangan betlar).
   Shuning uchun foydalanuvchi uni o'chira oladi (#pvInvert), va u FAQAT
   dark temada qo'llaniladi — sepia iliq ochiq tema, invert uni buzadi. */
[data-reader-theme="dark"] .pv-canvas-wrap.pv-inverted {
  background: #14110c;           /* varaq ham qorayadi, canvas bilan bir xil */
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
[data-reader-theme="dark"] .pv-canvas-wrap.pv-inverted canvas {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Xatchop lentasi: PDF sahnasida biroz ichkariroq ─────────────────── */
.rd-bookmark.pv-bm { z-index: 5; }

/* ── Folio (bet raqami) ──────────────────────────────────────────────────
   reader.css da folio `position: absolute; right: …` — matn qog'ozining
   burchagida turadi. PDF sahnasida uni oddiy oqim elementiga aylantiramiz:
   shunda canvas ostida markazda turadi va o'ng pastdagi suzuvchi tugmalar
   bilan ustma-ust tushmaydi (ayniqsa mobil ekranda). */
.pv-stage .rd-folio {
  position: static;
  text-align: center;
  padding-top: 10px;
}

/* ── Yuklanish holati ────────────────────────────────────────────────── */
.pv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 90px 24px;
  min-height: 300px;
}
.pv-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--rd-border);
  border-top-color: var(--rd-gold);
  border-radius: 50%;
  animation: pv-spin .9s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

.pv-loading-text {
  font-family: var(--rd-sans);
  font-size: 14px;
  color: var(--rd-muted);
  letter-spacing: .01em;
}
.pv-loadbar {
  width: min(260px, 70%);
  height: 4px;
  background: var(--rd-border);
  border-radius: 3px;
  overflow: hidden;
}
.pv-loadbar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rd-gold-dark), var(--rd-gold));
  border-radius: 3px;
  transition: width .25s ease;
}
/* Content-Length bo'lmasa (gzip va h.k.) — noaniq animatsiya */
.pv-loadbar.pv-indeterminate span {
  width: 40%;
  animation: pv-slide 1.15s ease-in-out infinite;
}
@keyframes pv-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ── PDF yo'q / xato holati ──────────────────────────────────────────── */
.pv-fallback {
  padding: 54px 40px 46px;
  text-align: center;
}
.pv-fallback .pv-fb-icon {
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  color: var(--rd-faint);
}
.pv-fallback .pv-fb-icon svg { width: 100%; height: 100%; }
.pv-fallback .pv-fb-lede {
  font-family: var(--rd-serif);
  font-size: 1.16rem;
  line-height: 1.75;
  color: var(--rd-ink-soft);
  max-width: 46ch;
  margin: 0 auto 18px;
  text-align: left;
}
.pv-fallback .pv-fb-note {
  font-family: var(--rd-sans);
  font-size: 13.5px;
  color: var(--rd-muted);
  padding-top: 16px;
  border-top: 1px solid var(--rd-rule);
  max-width: 46ch;
  margin: 0 auto;
}

/* ── Til haqida ogohlantirish (bu tilda PDF yo'q) ────────────────────── */
.pv-langnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 14px;
  background: var(--rd-gold-soft);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  font-family: var(--rd-sans);
  font-size: 13px;
  color: var(--rd-ink-soft);
}
.pv-langnote svg { width: 15px; height: 15px; flex: none; color: var(--rd-gold-dark); }

/* ── Bet navigatsiyasi: raqam kiritish qutisi ────────────────────────── */
/* Panel qog'oz kartasi va pastdagi "Oldingi/Keyingi asar" kartalari bilan
   BIR XIL kenglikda bo'ladi — ular hammasi .rd-wrap ustunini to'ldiradi,
   shuning uchun bu yerda kenglik cheklanmaydi.
   Bet raqami qutisi esa aynan MARKAZDA turadi: reader.css dagi
   `.rd-nav-next { margin-left: auto }` uni chapga siqib qo'yadi, shuning
   uchun uch qismli grid ishlatiladi — chap/o'ng tugmalar teng ustunlarda,
   raqam o'rtadagi ustunda markazlashadi. */
.rd-nav.pv-nav {
  display: grid;
  /* Chekka ustunlar TENG (1fr) — shuning uchun o'rtadagi raqam har doim
     panel markazida turadi, "Oldingi" va "Keyingi" matn uzunligi turlicha
     bo'lsa ham (tarjimalarda shunday). minmax(0,1fr): tor ekranda ustunlar
     tugma kengligidan kichrayolsin, aks holda grid markazni siljitadi. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.rd-nav.pv-nav .rd-nav-btn {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;              /* juda tor ekranda matn ustundan chiqmasin */
}
.rd-nav.pv-nav .rd-nav-next {
  justify-self: end;
  margin-left: 0;                /* reader.css dagi auto-ni bekor qilamiz */
}

.pv-pagebox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--rd-sans);
  font-size: 14px;
  color: var(--rd-muted);
}
.pv-page-input {
  width: 58px;
  padding: 7px 8px;
  text-align: center;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-ink);
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: 7px;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
  -moz-appearance: textfield;
}
.pv-page-input:focus {
  border-color: var(--rd-gold);
  box-shadow: 0 0 0 3px rgba(201,169,110,.18);
}
.pv-page-total { font-weight: 600; color: var(--rd-ink-soft); }
.pv-page-sep { opacity: .55; }

/* Noto'g'ri raqam kiritilganda qisqa silkinish */
.pv-page-input.pv-shake { animation: pv-shake .34s ease; border-color: #c0623f; }
@keyframes pv-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

/* ── Sozlamalar: invert tugmasi ──────────────────────────────────────── */
.pv-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--rd-sans);
  font-size: 13px;
  color: var(--rd-ink-soft);
  line-height: 1.4;
}
.pv-switch input { flex: none; width: 15px; height: 15px; accent-color: var(--rd-gold-dark); cursor: pointer; }

/* Invert tugmasi faqat tungi rejimda ma'noga ega */
#pvInvertGroup { display: none; }
[data-reader-theme="dark"] #pvInvertGroup { display: block; }

/* Yuklab olish havolasi uslubi ATAYLAB olib tashlangan — asarlar mualliflik
   huquqi bilan himoyalangan, PDF faqat saytda o'qish uchun. */

/* ── Mobil ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pv-stage { padding: 12px 10px 10px; }
  /* Mobilda bet ekran enini to'liq egallaydi — chetlardagi bo'sh joy
     minimal. Balandligi A4 nisbatidan kelib chiqib uzun bo'ladi va
     aylantirib o'qiladi (desktopdagi kabi). */
  .reader-body .rd-wrap { max-width: 100%; padding-left: 8px; padding-right: 8px; }
  /* Telefonda shapka pastroq — oynaga ko'proq balandlik beramiz */
  .pv-canvas-wrap { height: calc(100vh - 230px); }
  .pv-fallback { padding: 40px 22px 34px; }
  .pv-page-input { width: 52px; padding: 6px; }
  /* Tugma matnlari .rd-nav ichida — juda tor ekranda faqat strelka qoladi.
     reader.css mobilda `flex-wrap: wrap` beradi; grid'da u ta'sirsiz, ammo
     uch ustunli tuzilma saqlanadi — raqam baribir markazda qoladi. */
  .rd-nav.pv-nav { gap: 8px; padding: 12px 10px; }
  .rd-nav.pv-nav .rd-nav-btn { padding: 9px 14px; }
}

/* ── Harakatni kamaytirish rejimi ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pv-canvas-wrap canvas { transition: none; }
  .pv-canvas-wrap.is-rendering canvas { opacity: 1; }
  .pv-spinner { animation-duration: 2s; }
  .pv-page-input.pv-shake { animation: none; }
  .pv-loadbar.pv-indeterminate span { animation: none; width: 100%; }
}

/* ── Chop etish ─────────────────────────────────────────────────────── */
@media print {
  .rd-toolbar, .rd-settings, .rd-nav, .rd-bm-panel, .rd-bookmark,
  .header, .footer, .rd-progress, .rd-siblings, .rd-backlist { display: none !important; }
  .rd-paper.pdf-paper { box-shadow: none; border: none; }
  .pv-canvas-wrap { height: auto; overflow: visible; box-shadow: none; display: block; }
}