/*
 * Okuma ekranı stilleri.
 *
 * FONTLAR YERELDE, CDN'DE DEĞİL: Kur'an metninin dizilmesi üçüncü taraf
 * bir sunucunun ayakta olmasına bağlı olamaz. Font gelmezse tarayıcı
 * yedek bir Arapça fontla dizer ve harekeler kayar — hata vermeden
 * yanlış görünür. Üçü de SIL Open Font License 1.1.
 *
 * font-display: swap — metin, font inerken de okunabilir kalsın.
 */

@font-face {
  font-family: 'Amiri Quran';
  src: url('/assets/fonts/amiri-quran.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amiri';
  src: url('/assets/fonts/amiri.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('/assets/fonts/noto-naskh-arabic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Kur'an metni ────────────────────────────────────────────────── */

.ayet-ar {
  font-family: var(--kuran-font, 'Amiri Quran'), 'Amiri', 'Noto Naskh Arabic', serif;
  font-size: var(--kuran-punto, 30px);
  line-height: var(--kuran-satir, 2.2);
  direction: rtl;
  text-align: right;
  /* Harekelerin üst üste binmesini engeller; Arapça'da kerning
     varsayılan olarak açık ama bazı tarayıcılar ligatürü kapatıyor. */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  word-spacing: .06em;
}

.meal-metin {
  font-size: var(--meal-punto, 17px);
  line-height: 1.75;
}

.okunus-metin {
  font-size: calc(var(--meal-punto, 17px) - 1px);
  line-height: 1.7;
  font-style: italic;
  opacity: .85;
}

/* Âyet numarası — mushaftaki gül motifinin sade karşılığı. */
.ayet-no {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  padding: 0 .35em;
  border-radius: 999px;
  font-size: .72em;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgb(var(--altin) / .45);
  color: rgb(var(--altin));
  background: rgb(var(--altin) / .07);
}

/* Okunan âyet — ses takibi ve "kaldığım yer" vurgusu. */
.ayet-blok.aktif {
  background: rgb(var(--ana) / .06);
  border-color: rgb(var(--ana) / .35);
}

.ayet-blok:target {
  background: rgb(var(--altin) / .1);
  border-color: rgb(var(--altin) / .5);
}

/* ── Mushaf kipi ─────────────────────────────────────────────────── */

/*
 * Basılı mushaf sayfası iki yanı hizalı (justify) dizilir. `text-align:
 * justify` Arapça'da kelime aralarını açar — kelime kazığı (kashida)
 * uzatması değil ama basılı sayfaya en yakın hâli bu.
 *
 * SATIR SAYISI GARANTİ EDİLMİYOR: elimizde âyetin hangi sayfada olduğu
 * var, hangi SATIRDA olduğu yok. 15 satır, font metriğine göre yaklaşık
 * tutturuluyor; birebir mushaf dizgisi resmî satır verisi gerektirir
 * (docs/PROJE-ANALIZI.md §L.3).
 */
.mushaf-sayfa {
  font-family: var(--kuran-font, 'Amiri Quran'), 'Amiri', serif;
  font-size: var(--kuran-punto, 30px);
  line-height: var(--kuran-satir, 2.35);
  direction: rtl;
  text-align: justify;
  text-align-last: center;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

.mushaf-sayfa .besmele {
  display: block;
  text-align: center;
  margin: .5em 0 .35em;
}

.mushaf-sayfa .sure-basligi {
  display: block;
  margin: 1.1em 0 .5em;
  padding: .45em 1em;
  border-radius: .75rem;
  border: 1px solid rgb(var(--altin) / .35);
  background: rgb(var(--altin) / .06);
  font-size: .58em;
  line-height: 1.6;
  text-align: center;
}

/* Sayfa numarası şeridi. */
.mushaf-kagit {
  background: rgb(var(--yuzey));
  border: 1px solid rgb(var(--cizgi));
  border-radius: 1.25rem;
  padding: clamp(1rem, 3vw, 2.5rem);
}

/* ── Odak kipi ───────────────────────────────────────────────────── */

/*
 * Odak kipinde üstbilgi, altbilgi ve araç çubuğu gizlenir; ekranda
 * yalnız metin kalır. Çıkış yolu HER ZAMAN görünür durur — kullanıcıyı
 * çıkamayacağı bir kipe sokmak kabul edilemez.
 */
body.odak-kipi header,
body.odak-kipi footer,
body.odak-kipi .okuyucu-arac {
  display: none;
}

body.odak-kipi .odak-cikis {
  display: inline-flex;
}

.odak-cikis {
  display: none;
}

/* ── Sepya teması ────────────────────────────────────────────────── */

.sepya {
  --zemin: 244 236 220;
  --yuzey: 250 244 232;
  --cizgi: 226 213 189;
  --metin: 61 50 35;
  /* 112 96 72: eski 122 106 82 sepya zeminde 4,46:1 kalıyordu. */
  --soluk: 112 96 72;
  --altin-metin: 122 92 42;
}

@media print {
  header, footer, .okuyucu-arac, .ayarlar-panel { display: none !important; }
  .mushaf-kagit { border: 0; }
}

/* ── Hafız modu ───────────────────────────────────────────────────── */

/*
 * GİZLİ ÂYET. Bulanıklaştırma tercih edildi: metin yerinde durduğu için
 * satır düzeni ve sayfa yüksekliği değişmiyor — açıldığında ekran
 * zıplamıyor. Gizlemenin amacı sır saklamak değil, hafızın gözüne
 * güvenmeden ezberinden getirmesini sağlamak.
 *
 * `user-select: none` metnin seçilerek okunmasını engelliyor; kasıtlı
 * bir savunma değil, dalgınlıkla göz atmayı zorlaştıran bir sürtünme.
 */
.gizli .gizlenebilir {
  filter: blur(9px);
  user-select: none;
  cursor: pointer;
  transition: filter .18s ease;
}

.gizli .gizlenebilir:hover {
  filter: blur(7px);
}

/* Gizli kutuda kenarlık, açık olandan ayırt edilsin. */
.gizli[data-ayet-kutu] {
  border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
  .gizli .gizlenebilir { transition: none; }
}

/*
 * UZUN SÛRELERDE ÇİZİM MALİYETİ.
 *
 * Bakara 286 âyet: sunucudan gelen HTML sıkıştırılmadan 645 KB, ekrana
 * hiç girmeyen yüzlerce blok içeriyor. Tarayıcı bunların hepsini yerleşim
 * ve boyama hesabına sokuyor; düşük güçlü telefonlarda ilk kaydırma bu
 * yüzden takılıyor.
 *
 * `content-visibility: auto`, görünüm alanı dışındaki blokların
 * çizimini atlatıyor. Sunucu tarafında hiçbir değişiklik gerekmiyor,
 * JavaScript de gerekmiyor; destekleyen tarayıcı hızlanıyor,
 * desteklemeyen bugünkü gibi çalışıyor.
 *
 * `contain-intrinsic-size` ZORUNLU. Olmadan çizilmemiş blokların
 * yüksekliği sıfır sayılıyor; kaydırma çubuğu zıplıyor ve `#ayet-45`
 * gibi bir çapaya gitmek yanlış yere düşüyor. Değer ölçülerek seçildi:
 * meâlli görünümde bir âyet bloğu ortalama ~220 px.
 *
 * İLK BLOKLAR HARİÇ TUTULUYOR (`:nth-child(-n+6)`): sayfanın en üstünde
 * zaten görünen bloklarda bu mekanizma kazanç sağlamıyor, buna karşılık
 * ilk boyamada bir kare gecikme üretebiliyor.
 */
.ayet-blok:nth-child(n + 7) {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

/* Yazdırırken ve arama yaparken her şey çizilmiş olmalı: gizli kalan
   bir blok sayfa içi aramada (Ctrl+F) bulunamaz. */
@media print {
  .ayet-blok:nth-child(n + 7) { content-visibility: visible; }
}

/*
 * TEFSİR BLOĞU.
 *
 * `<details>` seçildi: JavaScript gerektirmiyor, klavyeyle açılıyor ve
 * kapalıyken bile Ctrl+F sayfa içi araması metnin içini buluyor.
 * Tarayıcının kendi üçgen işaretçisi gizlenip yerine dönen bir ok
 * konuyor — varsayılan işaretçi platformdan platforma değişiyor ve
 * arayüzün geri kalanıyla uyuşmuyor.
 */
.tefsir-blok > summary::-webkit-details-marker { display: none; }
.tefsir-blok > summary::marker { content: ''; }
.tefsir-blok[open] > summary [data-ok] { transform: rotate(90deg); }

.tefsir-metin p + p { margin-top: .75rem; }
/* Tefsir gövdesi meâlden bir tık küçük: metin uzun, okuma ekranının
   ana metni değil, ona bakan bir açıklama. */
.tefsir-metin { color: rgb(var(--metin) / .9); }

/* Okuma ayarındaki satır aralığı tefsire UYGULANMIYOR: 3.2'lik bir
   aralık Arapça metinde nefes açarken 2.000 karakterlik bir açıklamayı
   okunamaz hâle getiriyor. */
.tefsir-metin { line-height: 1.75; }

@media print {
  /* Yazdırırken kapalı tefsir de açılsın — kâğıtta tıklanamıyor. */
  .tefsir-blok > div { display: block !important; }
}


/*
 * Çalan âyet (§27).
 *
 * VURGU RENK DEĞİL, KENARLIK VE HAFİF ZEMİN. Metnin rengini
 * değiştirmek, okunabilirliği tema ve punto ayarlarına göre
 * öngörülemez biçimde etkiliyordu; kenarlık metne dokunmuyor.
 *
 * `prefers-reduced-motion` saygı görüyor: geçiş efekti kapalıysa
 * vurgu anında beliriyor.
 */
.ses-calan {
  border-color: rgb(var(--ana) / .55) !important;
  background: rgb(var(--ana) / .05) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .ses-calan { transition: background .25s ease, border-color .25s ease; }
}

/* Oynatıcı açıkken son âyetin altında yer kalsın; sabit panel metni
   örtmemeli. */
body.ses-acik { padding-bottom: 7.5rem; }