/* ══════════════════════════════════════════════════════════════════
   mushaf.css — Tailwind ile ifade edilmeyen, mushafa özgü görsel iş.
   Tailwind'den SONRA yüklenir.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --motif-serit: 2.3rem;   /* motiflerin durdugu kenar seridi */
  --punto-ar: 1;           /* âyet punto çarpanı */
  --punto-tr: 1;           /* meal/tefsir punto çarpanı */
  --vurgu-kaydir: 0%;      /* âyet vurgusu dikey ince ayar (Ayarlar) */
  --vurgu:  21 138 114;      /* zumrut-500 */
  --altin: 189 148  64;      /* altin-500  */

  /* Kabuk okuma alanının üzerine bindiği için sayfa neredeyse tüm
     ekranı kullanabiliyor; yalnızca kenar payı düşülüyor. */
  /* Üst ve alt çubuk (her biri h-13 = 3.25rem) sayfanın ÜZERİNE binen
     absolute katmanlar. Görsel yüksekliği ikisini de düşmezse sayfanın
     tepesindeki tezhip ve altındaki son satır çubukların arkasında
     kalıyor. 6.5rem çubuk + 0.5rem pay. */
  --sayfa-max-h: calc(100dvh - 11.5rem);
  --kabuk-gecis: 220ms cubic-bezier(.22, .61, .36, 1);
}

@supports not (height: 100dvh) {
  :root { --sayfa-max-h: calc(100vh - 11.5rem); }
}

/* ─────────────────── yazı tipleri ─────────────────── */

/* Yüklenen hat: Shaikh Hamdullah Mushaf.
   Diyanet metnindeki U+0656 (alt elif) ve birkaç Kur'an işareti bu
   fontta yok; bunlar birleşen işaret olduğu için Amiri Quran'a düşmeleri
   harflerin birleşmesini bozmaz. U+06CC (Farsça ye) ise normalize.py
   tarafından U+064A'ya çevriliyor — aksi hâlde metnin yarısı boş kutu
   olarak çıkardı. */
/* Feyzul Furkan (KK_Abay) — Diyanet'in KK_Abay.woff2 dosyasi.
   Mushaf metnini eksiksiz karsiliyor (266 karakterlik ornekte hicbiri
   dusmedi), suslu parantez ﴾﴿ glifleri ve sekillendirme tablolari var.
   /medya/font/173 (Amasya, TTF) yuklenemezse devreye giren YEREL yedek;
   woff2 oldugu icin TTF'ye gore cok daha kucuk. */
@font-face {
  font-family: 'Feyzul Furkan';
  src: url('../fonts/KK_Abay.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'Shaikh Hamdullah Mushaf';
  src: url('../fonts/shaikh_hamdullah_mushaf.woff2') format('woff2'),
       url('../fonts/shaikh_hamdullah_mushaf.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Amiri Quran';
  src: url('../fonts/AmiriQuran-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Amiri';
  src: url('../fonts/Amiri-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ─────────────────── kabuk: otomatik gizlenme ─────────────────── */

/* Üst bar, alt oynatıcı ve kenar çubuğu okuma alanının üzerinde durur.
   Fare/parmak hareketsiz kalınca gizlenir, hareketle geri gelir. */

.kabuk-ust,
.kabuk-alt,
.kabuk-sol {
  transition: transform var(--kabuk-gecis), opacity var(--kabuk-gecis);
  will-change: transform;
}

body.kabuk-gizli .kabuk-ust {
  transform: translateY(-100%);
  opacity: 0;
}

body.kabuk-gizli .kabuk-alt {
  transform: translateY(100%);
  opacity: 0;
}

body.kabuk-gizli .nav-ok {
  opacity: 0;
  pointer-events: none;
}

/* Kabuk gizliyken imleci de gizle — tam ekran okuma hissi */
body.kabuk-gizli #sahne { cursor: none; }

/* Panel açıkken veya kabuğun üzerindeyken gizleme devre dışı */
body.panel-acik .kabuk-ust,
body.panel-acik .kabuk-alt {
  transform: none;
  opacity: 1;
}

/* Ekranın en üstünde/altında ince bir yakalama şeridi: kabuk gizliyken
   fareyi oraya götürmek yeterli. */
.kenar-tetik {
  position: absolute;
  inset-inline: 0;
  height: 3rem;
  z-index: 25;
  pointer-events: auto;
}
.kenar-tetik-ust { top: 0; }
.kenar-tetik-alt { bottom: 0; }
body:not(.kabuk-gizli) .kenar-tetik { pointer-events: none; }

/* ─────────────────── mushaf açılımı ─────────────────── */

.mushaf-sayfa {
  display: block;
  width: 100%;
}

/* Çerçeve görseli sarar ve ondan boy alır; gölge tam kâğıdın kenarına
   oturur, kenarda boş şerit kalmaz. */
.sayfa-cerceve {
  position: relative;
  display: block;
  line-height: 0;
}

/* Diyanet sayfayı GENİŞLİĞE oturtur ve dikeyde kaydırır — yüksekliğe
   sığdırmaz. Tek sayfa modunda sayfa tüm genişliği kaplar, çift sayfa
   modunda iki sayfa yarımşar genişlikle yan yana durur. */
.sayfa-gorsel {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #fbf7ee;
  user-select: none;
  -webkit-user-drag: none;
}

/* Tek sayfa: Diyanet sayfayı GENİŞLİĞE oturtup dikeyde kaydırıyor.
   Çift sayfa: açılım ekrana sığsın diye yüksekliğe oturuyor. */
#sahne[data-mod="tek"] /* Diyanet sayfayı GENİŞLİĞE oturtur ve dikeyde kaydırır — yüksekliğe
   sığdırmaz. Tek sayfa modunda sayfa tüm genişliği kaplar, çift sayfa
   modunda iki sayfa yarımşar genişlikle yan yana durur. */
.sayfa-gorsel {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #fbf7ee;
  user-select: none;
  -webkit-user-drag: none;
}

#sahne[data-mod="cift"] /* Diyanet sayfayı GENİŞLİĞE oturtur ve dikeyde kaydırır — yüksekliğe
   sığdırmaz. Tek sayfa modunda sayfa tüm genişliği kaplar, çift sayfa
   modunda iki sayfa yarımşar genişlikle yan yana durur. */
.sayfa-gorsel {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #fbf7ee;
  user-select: none;
  -webkit-user-drag: none;
}

/* çift sayfada iç kenarlar birleşsin */
#acilim[data-mod="cift"] .mushaf-sayfa:first-child .sayfa-cerceve {
  position: relative;
  display: block;
  line-height: 0;
}
#acilim[data-mod="cift"] .mushaf-sayfa:last-child .sayfa-cerceve {
  position: relative;
  display: block;
  line-height: 0;
}

/* cilt sırtı: gölgenin en koyu yeri tam ortada */
#acilim[data-mod="cift"] .mushaf-sayfa:first-child .sayfa-cerceve::after,
#acilim[data-mod="cift"] .mushaf-sayfa:last-child .sayfa-cerceve::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 22px;
  pointer-events: none;
}
#acilim[data-mod="cift"] .mushaf-sayfa:first-child .sayfa-cerceve::after {
  inset-inline-end: 0;
  background: linear-gradient(to right, rgba(35, 31, 26, .11), transparent);
}
#acilim[data-mod="cift"] .mushaf-sayfa:last-child .sayfa-cerceve::after {
  inset-inline-start: 0;
  background: linear-gradient(to left, rgba(35, 31, 26, .11), transparent);
}

.sayfa-alt {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-top: .35rem;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #8d8577;
  transition: opacity var(--kabuk-gecis);
}
body.kabuk-gizli .sayfa-alt { opacity: .45; }

/* ─────────────────── âyet bölge katmanı ─────────────────── */

.bolge-katman {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bolge {
  position: absolute;
  /* Ayarlar > "Vurgu dikey konumu" ile ince ayar */
  transform: translateY(var(--vurgu-kaydir, 0%));
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  transition: background-color .14s ease;
}

.bolge:hover        { background: rgb(var(--vurgu) / .09); }
.bolge-secili       { background: rgb(var(--vurgu) / .15);
                      box-shadow: 0 0 0 1px rgb(var(--vurgu) / .3); }
.bolge-okunan       { background: rgb(var(--altin) / .24);
                      box-shadow: 0 0 0 1px rgb(var(--altin) / .45); }

.kelime-okunan {
  position: absolute;
  border-radius: 2px;
  background: rgb(var(--altin) / .42);
  pointer-events: none;
  transition: opacity .1s linear;
}

/* ─────────────────── sayfa geçişi ─────────────────── */

.sayfa-gecis { animation: sayfa-ac .26s cubic-bezier(.22, .61, .36, 1); }

@keyframes sayfa-ac {
  from { opacity: 0; transform: translateY(5px) scale(.996); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────── metin tipografisi ─────────────────── */

.metin-arapca {
  font-size: 1.42rem;
  line-height: 2.35;
  letter-spacing: 0;
}

.ayet-no {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .3rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--altin) / .45);
  background: rgb(var(--altin) / .07);
  font-size: .67rem;
  font-family: ui-monospace, monospace;
  color: #9a7726;
}

/* tefsir metni — uzun paragraflar için daha rahat ölçü */
.tefsir-govde {
  font-size: 13.5px;
  line-height: 1.78;
  color: #3d3830;
}
.tefsir-govde p { margin-block: .7em; }
.tefsir-govde b, .tefsir-govde strong { color: #231f1a; font-weight: 600; }
.tefsir-govde i, .tefsir-govde em { color: #544d42; }

/* ─────────────────── kaydırma çubuğu ─────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: #d6ccb7 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #ddd5c4; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #c4b89e; }

/* ─────────────────── erişilebilirlik ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body.kabuk-gizli #sahne { cursor: auto; }
}

/* Klavye kullanıcısı sekme ile gezerken kabuk gizlenmesin */
body.kabuk-gizli .kabuk-ust:focus-within,
body.kabuk-gizli .kabuk-alt:focus-within {
  transform: none;
  opacity: 1;
}

@media (max-width: 899px) {
  :root { --sayfa-max-h: calc(100dvh - 6.5rem); }
}

/* Çubuklar gizlendiğinde sayfa tüm yüksekliği kullanabilir */
body.kabuk-gizli {
  --sayfa-max-h: calc(100dvh - 1rem);
}

/* Tailwind'in `grid` yardımcı sınıfı `display:grid` verdiği için HTML'in
   `hidden` özniteliğini eziyor: diyalog görünmez oluyor ama tam ekran
   kaplayıp altındaki mushafın tıklanmasını engelliyordu. */
[hidden] { display: none !important; }

/* Metin paneli üst ve alt çubuğun arasında durur; çubuklar üzerine
   binerse araç düğmeleri tıklanamaz hâle geliyordu. Çubuklar
   gizlendiğinde panel tüm yüksekliği kullanır. */
body.kabuk-gizli #metin-panel { top: 0; bottom: 0; }


/* Diyanet'in belge içeriği ham HTML olarak geliyor (div/p/i/b + inline
   style). Panel içinde okunabilir kalması için tipografiyi burada
   veriyoruz — gelen inline stilleri ezmiyoruz, yalnızca çerçeveliyoruz. */
.belge-govde {
  font-size: 13px;
  line-height: 1.75;
  color: #3d3830;
}
.belge-govde div,
.belge-govde p { margin-block: .5em; }
.belge-govde b { font-weight: 600; }
.belge-govde i { font-style: italic; }


/* ═════════════ canvas / metin çizimi ═════════════ */

.cizim-alani { display: block; line-height: 0; }

.mushaf-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #fbf7ee;
}

/* akışkan metin görünümü */
.mushaf-metin {
  width: 100%;
  padding: 2rem 1.75rem;
  background: #fbf7ee;
  font-family: 'MushafHat', 'Feyzul Furkan', 'Shaikh Hamdullah', 'Amiri Quran', serif;
  font-size: 1.6rem;
  line-height: 2.4;
  text-align: justify;
  text-align-last: center;
  color: #1a1613;
}

.mushaf-metin-sure {
  margin: 1.2rem 0 .8rem;
  padding: .4rem 0;
  border-block: 1px solid rgba(198, 160, 74, .35);
  font-size: 1.35rem;
  text-align: center;
}

.mushaf-metin-ayet { cursor: pointer; border-radius: 3px; }
.mushaf-metin-ayet:hover { background: rgba(31, 106, 91, .10); }
.mushaf-metin-ayet.secili { background: rgba(31, 106, 91, .17); }

.mushaf-metin-no {
  display: inline-block;
  margin-inline: .25rem;
  font-size: .72em;
  color: #9a7726;
}


/* ═══════════ kenar motifleri (cüz / hizb / secde) ═══════════ */

/* Motif, bağlı olduğu âyetin hizasında, sayfanın dış kenarında durur.
   Bölge katmanı görselin tam üstüne oturduğu için konumlar yüzde
   cinsinden verilir ve sayfa ölçeklendiğinde birlikte ölçeklenir. */
.kenar-motif {
  position: absolute;
  width: var(--motif-serit);
  max-width: none;
  /* motif de âyetine bağlı olduğu için aynı ince ayarı izler */
  transform: translateY(calc(-50% + var(--vurgu-kaydir, 0%)));
  pointer-events: none;
  user-select: none;
  opacity: .95;
}


/* ═══════════ okuma alanı: genişliğe otur, dikeyde kaydır ═══════════ */

#sahne {
  display: block;
  /* Diyanet kartı kenardan bir tık içeride tutuyor; alt boşluk yüzen
     ses kartının son satırı örtmemesi için. */
  padding: 0 .75rem 5.5rem;
}

#acilim {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

/* Sayfa altındaki numara etiketi Diyanet'te yok — üstteki
   ‹ ٣ › göstergesi bu işi görüyor. */
.sayfa-alt { display: none; }

/* Diyanet sayfayı ince kenarlıklı, köşeleri yuvarlak bir kart içinde
   gösteriyor; kart okuma alanının tüm genişliğini kullanıyor. */
/* Dış kart: sayfayı çevreleyen yuvarlak, dolgulu çerçeve. */
/* Her sayfa kendi kartı; aralarında boşluk var. */
.mushaf-acilim {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: .9rem;
}

.mushaf-dis-kart {
  flex: 1 1 0;
  min-width: 0;
  /* Dis kenarda motif seridi. Metin blogu sayfa gorselinin ~%96'sini
     kapliyor, yani GORSELIN ICINDE motif icin yer yok; Diyanet de
     motifi gorselin disina, kartin kenar bosluguna koyuyor. */
  padding: .5rem;
  border: 1px solid rgba(198, 160, 74, .38);
  border-radius: 14px;
  background: #f6efdf;
  box-shadow: 0 1px 3px rgba(120, 95, 40, .08);
}

/* sayfa kartının kendi üst satırı: cüz — sayfa no — sûre */
.sayfa-ust {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .1rem .55rem .45rem;
}

/* İç kart: sayfanın kendi çerçevesi. */
.mushaf-kart {
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow: visible;   /* motifler kart kenarina tasabilsin */
  border: 1px solid rgba(198, 160, 74, .45);
  border-radius: 10px;
  background: #fbf7ee;
}


/* Hizalama denetimi: âyet kutularını ve kelime kutularını görünür kılar.
   Ayarlar > "Âyet kutularını göster" ile açılır. */
body.kutu-goster .bolge {
  background: rgba(31, 106, 91, .12);
  outline: 1px solid rgba(31, 106, 91, .55);
}
body.kutu-goster .kenar-motif { outline: 2px dashed rgba(198, 160, 74, .9); }


/* Tek sayfa modunda kart tüm genişliği kaplamasın, ortalansın. */
#acilim[data-mod="tek"] .mushaf-dis-kart {
  flex: 0 1 auto;
  width: min(100%, 62rem);
  margin-inline: auto;
}


/* ═══════════ motif şeridi ═══════════
   Motif sayfa görselinin dışında, kartın kenar boşluğunda durur.
   Çift sayfa sağ kartta (dış kenar sağda), tek sayfa sol kartta. */

.mushaf-dis-kart[data-parite="cift"] { padding-right: 2.6rem; }
.mushaf-dis-kart[data-parite="tek"]  { padding-left:  2.6rem; }

@media (max-width: 900px) {
  :root { --motif-serit: 1.4rem; }
  .mushaf-dis-kart[data-parite="cift"] { padding-right: 1.6rem; }
  .mushaf-dis-kart[data-parite="tek"]  { padding-left:  1.6rem; }
}

/* ═══════════ meal / tefsir okuma sütunu ═══════════
   Diyanet bu ekranı geniş kenar boşluklu, ortalanmış tek sütun
   olarak veriyor; bölümler "Ayet / Meal / Tefsir" başlıklarıyla
   ayrılıyor. Eskiden kenardan kenara sıkışık metindi. */

.okuma-sutun {
  width: 100%;
  /* Diyanet okuma sutunu genis: kartin buyuk bolumunu kaplar.
     46rem (736px) cok dar kaliyordu; Arapca satirlar erken sariyor ve
     meal metni surekli alt satira dokuluyordu. */
  max-width: 62rem;
  margin-inline: auto;
  padding: 1.5rem 1.25rem 2rem;
}

@media (min-width: 1024px) {
  .okuma-sutun { padding: 2rem 3rem 3rem; }
}

/* Genis ekranda kademeli acilir. Diyanet cok genis ekranda sutunu
   kartin ~%60'inda tutuyor; sabit tek ust sinir 2560px'te %46'ya
   dusuyordu. */
@media (min-width: 1600px) {
  .okuma-sutun { max-width: 78rem; }
}

@media (min-width: 2200px) {
  .okuma-sutun { max-width: 92rem; }
}

.okuma-blok {
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(198, 160, 74, .22);
}
.okuma-blok:last-child { border-bottom: 0; }

/* bölüm başlıkları: Ayet · Meal · Tefsir */
.okuma-etiket {
  margin: 1.25rem 0 .5rem;
  /* Diyanet bolum basliklarinda ince kondens font kullaniyor. */
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 300;
  color: #9a7726;
  letter-spacing: .01em;
}
.okuma-blok > .okuma-etiket:first-child { margin-top: 0; }

.okuma-ayet {
  margin-block: .35rem .75rem;
  /* Ayet metni BELIRGIN: Elif Ba'daki hadis yazisi olculerinde.
     Onceki degerler (1.5rem, sonra 1.95rem) meal metninin yaninda
     silik kaliyordu. Ayarlar > "Ayet punto" ile olceklenir. */
  font-family: 'MushafHat', 'Feyzul Furkan', 'Shaikh Hamdullah Mushaf',
               'Amiri Quran', 'Amiri', serif;
  font-size: calc(2.15rem * var(--punto-ar, 1));
  line-height: 2.05;
  text-align: center;
  color: #14110e;
  text-rendering: optimizeLegibility;
}

.okuma-meal {
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  /* Ayarlar > "Meal / tefsir punto" */
  font-size: calc(1.0625rem * var(--punto-tr, 1));
  line-height: 1.9;
  text-align: justify;
  color: #2b2620;
}

.okuma-tefsir {
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: calc(1.0625rem * var(--punto-tr, 1));
  line-height: 1.9;
  text-align: justify;
  color: #2b2620;
}
.okuma-tefsir p { margin-block: .9em; text-indent: 1.4em; }
.okuma-tefsir p:first-child { margin-top: 0; }

.okuma-kaynak {
  margin-top: .9rem;
  font-size: .78rem;
  color: #9b9285;
}

/* Iki sutunlu duzen (kuran-meal-2, kuran-tefsir-2).
   Solda mushaf gorseli, sagda meal. Meal sutunu 34rem'de sabitti ve
   genis ekranda kendi yarisinin ancak yarisini kapliyordu; satirlar
   erken sariyordu. Tek sutunlu duzendeki gibi kademeli aciliyor. */
#duzen-sutunlar.md\:grid-cols-2 .okuma-sutun {
  max-width: 46rem;
  padding-inline: 1.5rem;
}

@media (min-width: 1600px) {
  #duzen-sutunlar.md\:grid-cols-2 .okuma-sutun { max-width: 56rem; }
}

@media (min-width: 2200px) {
  #duzen-sutunlar.md\:grid-cols-2 .okuma-sutun { max-width: 66rem; }
}


/* Kart üst satırı: sûre adı — sayfa — cüz. Diyanet burada da ince
   kondens fontu kullanıyor. */
.sayfa-ust {
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  font-weight: 300;
}
.sayfa-ust .font-display { font-family: 'MushafHat', 'Amiri', serif; }


/* ═══════════ bölüm kutusu (Sözlük / Mukaddime / Fihrist) ═══════════ */

.belge-ana-baslik {
  margin: 0 0 1rem;
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 300;
  color: #6b5a34;
}

.belge-alt-baslik {
  margin: 1.6rem 0 .6rem;
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: #9a7726;
}

/* Diyanet sözlük metnini iki yana yaslı ve rahat satır aralığıyla
   veriyor; önceki sürümde küçük punto ve dar aralıktaydı. */
.belge-govde {
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.85;
  text-align: justify;
  color: #2b2620;
}
.belge-govde div,
.belge-govde p { margin-block: .85em; }
.belge-govde b { font-weight: 600; }
.belge-govde i { font-style: italic; }


/* ═══════════ Fihrist âyet kartı ═══════════
   Diyanet: meal metni, kaynak satırı, altında iki düğme. */

.fihrist-ayet {
  margin-bottom: 1rem;
  border-radius: 10px;
  background: #f7f1e3;
  padding: 1rem 1.1rem .75rem;
}

.fihrist-meal {
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #2b2620;
}

.fihrist-kaynak {
  margin-top: .5rem;
  font-size: .82rem;
  font-style: italic;
  color: #8b8172;
}

.fihrist-dugmeler {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .6rem;
}

.fihrist-btn {
  border-radius: 6px;
  background: #a3906a;
  padding: .45rem .9rem;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: .85rem;
  color: #fff;
  transition: background-color .15s ease;
}
.fihrist-btn:hover { background: #8d7b57; }

/* ═══════════ meal karşılaştırma bölümleri ═══════════ */

.krs-bolum { margin-bottom: .5rem; }

.krs-baslik {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .5rem;
  border-radius: 8px;
  background: #a3906a;
  padding: .6rem .9rem;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: .95rem;
  color: #fff;
}

.krs-bolum[data-acik="0"] .krs-baslik { background: #efe9dc; color: #4a4235; }
.krs-ok { transition: transform .15s ease; }
.krs-bolum[data-acik="0"] .krs-ok { transform: rotate(-90deg); }

.krs-govde {
  padding: .8rem 1rem 1rem;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: .98rem;
  line-height: 1.8;
  color: #2b2620;
}


/* Diyalog kutuları bölüm kutusunun (z-50) ÜSTÜNDE durmalı. Diyanet'te
   de Meal Karşılaştırma, Fihrist kutusunun üzerine açılıyor. Aynı
   katmanda kalınca tıklamalar birbirini engelliyordu.
   Bileşen kuralı Tailwind yardımcıları tarafından eziliyordu; eleman
   seçicisiyle özgüllüğü artırdık. */
div.dlg-perde { z-index: 60; }


/* Fihrist'ten "Âyet'e Git" ile gelinen blok */
/* Fihrist'ten "Âyet'e Git" ile gelinen blok.
   Eskiden box-shadow ile disariya tasan bir hale vardi; metnin
   basladigi yerde CIZGI gibi gorunup okumayi bozuyordu. Bunun yerine
   ic dolgu + sol kenar seridi kullaniyoruz: tasma yok. */
/* Fihrist'ten "Âyet'e Git" ile gelinen blok.
   .meal-blok ile .okuma-blok'un taban dolgulari farkli oldugu icin
   ayni degeri eklemek cizgiyi iki gorunumde FARKLI yere dusuruyordu;
   tefsirde metne yapisik kaliyordu. Artik ikisinde de ayni: cizgi ile
   metin arasinda sabit bosluk. */
/* Ozgulluk: tek sinif secici, sonra gelen kurallara yenilebiliyordu.
   Iki sinifi birlestirerek kesinlestiriyoruz. */
.okuma-blok.okuma-blok-secili,
.meal-blok.okuma-blok-secili,
.okuma-blok-secili {
  border-radius: 8px;
  border-inline-start: 3px solid rgba(198, 160, 74, .75);
  background: rgba(198, 160, 74, .10);
  padding-inline-start: 1.6rem;
  padding-inline-end: 1rem;
  padding-block: 1rem;
  /* Sol seridin sutun kenarindan tasmamasi icin blogu iceri alalim */
  margin-inline-start: .25rem;
}

/* Blok icindeki basliklar da ayni hizada baslasin */
.okuma-blok-secili > .okuma-etiket,
.okuma-blok-secili > .tefsir-blok-baslik { margin-inline: 0; }


/* Sûreler tablosu gibi tek parça içeriklerde sol bölme gizlenir. */
#bolum-govde[data-genis="1"] { grid-template-columns: 1fr; }
#bolum-govde[data-genis="1"] #bolum-nav { display: none; }

/* ═══════════ Sûreler tablosu ═══════════ */

.sure-tablo {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: .95rem;
}

.sure-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #a3906a;
  padding: .7rem .8rem;
  text-align: start;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sure-tablo thead th:hover { background: #8d7b57; }
.sure-tablo thead th::after { content: ' ⇅'; opacity: .55; font-size: .8em; }
.sure-tablo thead th[data-yon="asc"]::after  { content: ' ↑'; opacity: 1; }
.sure-tablo thead th[data-yon="desc"]::after { content: ' ↓'; opacity: 1; }

.sure-tablo td {
  border-bottom: 1px solid rgba(198, 160, 74, .25);
  padding: .7rem .8rem;
  color: #2b2620;
  vertical-align: middle;
}
.sure-tablo tbody tr:hover { background: rgba(198, 160, 74, .08); }
.sure-tablo .ar { font-family: 'MushafHat', 'Amiri', serif; font-size: 1.15rem; }
.sure-tablo .sayi { font-variant-numeric: tabular-nums; }

.sure-detay-btn {
  border-radius: 6px;
  background: #a3906a;
  padding: .4rem .8rem;
  font-size: .85rem;
  color: #fff;
  white-space: nowrap;
}
.sure-detay-btn:hover { background: #8d7b57; }


/* ═══════════ sûre tanıtımı ═══════════
   İçerik Diyanet'ten ham HTML geliyor: ortalanmış başlık, Arapça alt
   başlık, uzun paragraflar ve sonunda bibliyografya. */

.sure-ozet {
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(198, 160, 74, .28);
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: #8b7a52;
}

.sure-bilgi h3 {
  margin: .5rem 0 .25rem;
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 300;
  color: #6b5a34;
}

.sure-bilgi h4 {
  margin: .2rem 0;
  font-size: 1.05rem;
  font-weight: 400;
  color: #8b8172;
}

.sure-bilgi .center-text { text-align: center; }

.sure-bilgi .ar,
.sure-bilgi .header-arabic-text {
  font-family: 'MushafHat', 'Amiri', serif;
  font-size: 1.5rem;
  color: #2b2620;
}

.sure-bilgi a[name] { display: none; }


/* ═══════════ Fihrist alt konuları ═══════════
   Diyanet sağ bölmede açılır-kapanır satırlar kullanıyor; satıra
   basınca âyetler yerinde açılıyor, kategori listesi solda kalıyor. */

.alt-konu { border-bottom: 1px solid rgba(198, 160, 74, .22); }
.alt-konu:last-child { border-bottom: 0; }

.alt-konu-baslik {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .6rem;
  padding: .85rem .9rem;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: 1rem;
  color: #2b2620;
  transition: background-color .14s ease;
}
.alt-konu-baslik:hover { background: rgba(198, 160, 74, .09); }

.alt-konu[data-acik="1"] > .alt-konu-baslik {
  background: #a3906a;
  color: #fff;
  border-radius: 6px;
}
.alt-konu[data-acik="1"] .text-murekkep-400 { color: rgba(255,255,255,.75); }

.alt-konu-ok { transition: transform .15s ease; color: inherit; }
.alt-konu[data-acik="1"] .alt-konu-ok { transform: rotate(90deg); }

.alt-konu-govde { padding: .6rem 0 1rem; }


/* ═══════════ tefsir blok başlığı ═══════════
   Diyanet blok numarasını (28 veya 56-58) ortada, ince kondens
   fontla ve altında ayraçla veriyor. */

.tefsir-blok-baslik {
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(198, 160, 74, .3);
  text-align: center;
}

.tefsir-blok-no {
  font-family: 'Open Sans Condensed', 'Source Sans Pro', system-ui, sans-serif;
  /* Blok araligi basligi (25-29) yalnizca bir isarettir; ayet metniyle
     yarisacak kadar buyuk olmamali. 1.9rem'den indirildi. */
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: .02em;
  color: #a3906a;
}

/* Meal içindeki âyet numarası — Latin metin akışında, SÜSLÜ PARANTEZ.
   Diyanet meal metninde ﴾28﴿ biçimini kullanıyor. U+FD3E/U+FD3F
   süslemeli parantezleri Latin fontlarda YOK; süsleme için Amiri'ye,
   rakam için Latin fonta düşülüyor. Yalnızca MEAL metinlerinde
   (meal görünümü ve tefsirin Meal bölümü) kullanılır. */
.ayet-no-tr {
  margin-inline-start: .3rem;
  white-space: nowrap;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  /* Meal metninin akisini bozmasin: .82em iken cumlenin icinde fazla
     yer tutuyordu. */
  font-size: .62em;
  color: #a3906a;
}

.ayet-no-tr::before,
.ayet-no-tr::after {
  font-family: 'Amiri', 'AmiriQuran', 'MushafHat', serif;
  font-size: 1.25em;
  line-height: 0;
  vertical-align: -.08em;
}
.ayet-no-tr::before { content: '\FD3E'; margin-inline-end: .04em; }
.ayet-no-tr::after  { content: '\FD3F'; margin-inline-start: .04em; }


/* ═══════════ Meal görünümü ═══════════
   Tefsirden farklı: etiket yok, metinler ortalı, bloklar arası ince
   ayraç. Diyanet mushaf_v2 meal ekranından. */

.meal-blok {
  padding-block: 1.75rem;
  border-bottom: 1px solid rgba(198, 160, 74, .3);
}
.meal-blok:last-child { border-bottom: 0; }
.meal-blok .okuma-ayet { text-align: center; margin-bottom: 1.1rem; }

.meal-ortali {
  text-align: center;
  text-indent: 0;
}


/* ═══════════ âyet görseli (sayfa PNG'sinden kırpma) ═══════════
   Diyanet meal/tefsir ekranlarında Arapçayı fontla çizmiyor; sayfa
   görselini âyetin bölge kutularıyla kırpıyor. Renkli görünmesinin
   sebebi bu — tecvid işaretleri görselde zaten renkli. */

.ayet-gorsel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin-bottom: 1.1rem;
}

.ayet-gorsel-satir {
  display: block;
  max-width: 100%;
  background-repeat: no-repeat;
  /* NOT: burada zoom/transform KULLANILMIYOR.
     "zoom: var(--punto-ar)" satiri sutundan tasirip kenarlardan
     kirpiyordu — yazi parca parca gorunuyordu. Punto carpani artik
     JS'te olcege katiliyor ve sutun genisligini asmayacak sekilde
     sinirlaniyor. */
}

/* Tefsir görünümünde bloklar arası boşluk biraz daha dar */
.okuma-blok .ayet-gorsel { margin-bottom: .8rem; }


/* Meal/tefsir ekraninda baslik satiri (sûre adi — sayfa oklari — cüz)
   yukarida SABIT kalir. Diyanet'te de oyle; metin uzun oldugu icin
   asagi kayinca sayfa gezinme dugmeleri kayboluyordu. */
.sayfa-ust-sabit {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f6efdf;
  border-bottom: 1px solid rgba(198, 160, 74, .28);
}


/* Âyet numarası — Arapça metnin içinde, süslü parantezle.
   ﴾١٣﴿  U+FD3E / U+FD3F; Amiri bu glifleri içeriyor. */
.ayet-no-ar {
  margin-inline: .25rem;
  white-space: nowrap;
  /* Rakamin ve parantezlerin sirasi cevredeki metinden etkilenmesin */
  unicode-bidi: isolate;
  font-family: 'Amiri', 'AmiriQuran', 'MushafHat', serif;
  /* Ayet metni 41px oldugu icin numara da o boyu miras aliyor ve
     metinle ayni agirlikta gorunuyordu. Yariya yakin kuculttuk. */
  font-size: .38em;
  vertical-align: .22em;
  color: #9a7726;
}

/* RTL metinde ::before SAG tarafa duser. Latin metindeki sirayi
   (FD3E once, FD3F sonra) buraya oldugu gibi tasiyinca parantezler
   TERS gorunuyordu — sol sekilli glif saga geliyordu. Arapca icin
   ikisi yer degistirir. */
.ayet-no-ar::before { content: '\FD3F'; }
.ayet-no-ar::after  { content: '\FD3E'; }

/* görsel kırpma kaldırıldı; artan stiller de temizlendi */
.ayet-gorsel,
.ayet-gorsel-satir { display: none; }