/* ==========================================================================
   kuran_prj — Kur'an-ı Kerim okuma sitesi (08.08.2026)
   Bağımsız, tek amaçlı v1: sayfa sayfa hat görünümü. İleride meal/tefsir
   sekmeleri eklenecek (yapı genişlemeye açık tutuldu).
   Fontlar siracnur ile AYNI yamalı dosyalar (klasik kef, NG glifleri, ?v=5).
   ========================================================================== */
@font-face{font-family:"K Taha";src:url("../fonts/osmantaha.ttf?v=9");font-weight:400;font-display:swap}
@font-face{font-family:"K Taha";src:url("../fonts/osmantahabd.ttf?v=9");font-weight:700;font-display:swap}
@font-face{font-family:"K Mumtaz";src:url("../fonts/mumtaz.ttf?v=9");font-display:swap}
@font-face{font-family:"K Ayet";src:url("../fonts/ayetrakam.ttf");font-display:swap}
/* Ek Kur'an fontları (08.08.2026): "fonts arabic" adaylarından tam kapsamlı
   olanlar + kuran_font_asila.py ile tamamlananlar. Tarayıcı @font-face'i
   SEÇİLENE kadar indirmez (tembel). */
@font-face{font-family:"K QTaha";src:url("../fonts/qurantaha.ttf?v=9");font-display:swap}
@font-face{font-family:"K QFont";src:url("../fonts/quranfont.ttf?v=9");font-display:swap}
@font-face{font-family:"K MeQuran";src:url("../fonts/mequran.ttf?v=9");font-display:swap}
@font-face{font-family:"K Noto";src:url("../fonts/notonaskh.ttf?v=9");font-display:swap}
@font-face{font-family:"K Ince";src:url("../fonts/ince.otf?v=9");font-display:swap}
@font-face{font-family:"K AlQalam";src:url("../fonts/alqalam.ttf?v=9");font-display:swap}
@font-face{font-family:"K Droid";src:url("../fonts/droid.ttf?v=9");font-display:swap}
@font-face{font-family:"K AlMushaf";src:url("../fonts/almushaf.ttf?v=9");font-display:swap}
@font-face{font-family:"K Uthman";src:url("../fonts/uthmantn.ttf?v=9");font-display:swap}

:root{
  --zemin:#efe9dc; --kagit:#faf6ee; --metin:#232019; --cizgi:#d8d0bf;
  --vurgu:#8a6d2f; --vurgu-acik:#f0e7d2; --bar:#f6f1e6ee;
  --boyut:34px;
}
/* Tema renkleri JS'ten uygulanır (TEMALAR — siracnur'un 23 teması);
   yukarıdaki :root değerleri yalnız ilk boyamadaki yedektir. */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--zemin);color:var(--metin);
  font-family:system-ui,Segoe UI,Roboto,sans-serif;
  overscroll-behavior-y:none;
}

/* ---------------- üst bar (kaydırınca gizlenir) ---------------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  background:var(--bar);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cizgi);
  transition:transform .25s ease;
}
.bar.sakli{transform:translateY(-100%)}
.bar-ic{display:flex;align-items:center;gap:10px;max-width:860px;margin:0 auto;padding:8px 12px}
.marka{font-weight:700}
.syf-rozet{font-size:13px;opacity:.75}
.esnek{flex:1}
.btn{
  border:1px solid var(--cizgi);background:var(--kagit);color:var(--metin);
  border-radius:9px;padding:7px 13px;font-size:14px;cursor:pointer;
}
.btn:hover{background:var(--vurgu-acik)}
.btn.kucuk{padding:4px 9px;font-size:13px}

/* ---------------- sayfa akışı ---------------- */
.kap{height:100%;overflow-y:auto;padding:64px 0 40px;scrollbar-width:thin;touch-action:pan-y}  /* pinch bize kalsin (yazi boyutu) */
/* tam genislik (09.08.2026 istegi); kenar bosluklari ayardan (--kenar, varsayilan 0) */
.akis{max-width:none;margin:0;padding:0 var(--kenar, 0px)}
.sayfa{
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:12px;
  margin:14px 0;padding:26px 24px 20px;position:relative;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  content-visibility:auto;contain-intrinsic-size:auto 900px;
}
.sayfa-no{
  position:absolute;top:8px;inset-inline-start:14px;
  font-size:12px;opacity:.55;direction:ltr;
}
.sayfa p{
  margin:0 0 .4em;
  font-size:var(--boyut);
  line-height:calc(1.95 * var(--satir, 1));  /* satir araligi ayari: P'ye, .ar'a DEGIL */
  text-align:justify;text-align-last:right;
}
.sayfa .ar{font-family:var(--kuran-font,"K Taha");font-weight:var(--kuran-agirlik,400)}
.sayfa h2{
  font-size:calc(var(--boyut) * .82);
  color:var(--vurgu);text-align:center;margin:.5em 0 .3em;font-weight:700;
  font-family:system-ui,sans-serif;
}
/* ---- Kur'an sunum süsleri (siracnur ile aynı sınıflar) ---- */
.sayfa h2.cuz-bas{font-size:calc(var(--boyut) * .7);opacity:.75;margin:1em 0 .2em}
.sayfa h2.sure-bas{font-size:calc(var(--boyut) * .55);opacity:.9;margin:.9em 0 .15em}
.sayfa h2.sure-bas .sure-ar{font-size:1.9em;opacity:1;font-weight:var(--kuran-agirlik,400);margin:0 .5em}
.sayfa h2.ayet-gov{        /* kısa sûre gövdesi başlık işaretli gelir -> gövde puntosu */
  font-weight:var(--kuran-agirlik,400);color:inherit;text-align:justify;text-align-last:right;
  font-size:var(--boyut);line-height:calc(1.95 * var(--satir, 1));margin:0 0 .4em;
}
.besmele{display:block;text-align:center;margin:.15em 0}
/* âyet numarası: madalyon (varsayılan) / düz ﴾١﴿ / gizli + ayırıcı */
.sayfa .ayet-m{font-family:"K Ayet";font-weight:400;font-size:1.6em;line-height:1;color:var(--vurgu);padding:0 .08em;vertical-align:-.12em}
.sayfa .ayet-d{display:none}
html.rozetsiz .sayfa .ayet-m{display:none}
html.rozetsiz .sayfa .ayet-d{display:inline;direction:ltr;unicode-bidi:isolate}
.sayfa .ayet-ayirici{display:none}
html.ayet-gizli .sayfa .ayet-m,
html.ayet-gizli .sayfa .ayet-d{display:none}
html.ayet-gizli .sayfa .ayet-ayirici{display:inline;color:var(--vurgu);
  font-size:.8em;padding:0 .15em;opacity:.8;font-weight:400;
  font-family:"K Ayet",var(--kuran-font)}
html.ayet-gizli .sayfa .ayet-ayirici::before{content:var(--ayet-ayirici,"٭");font-family:inherit}
/* koyu temalarda isteğe bağlı inceltme (antialiasing ışıması; siracnur kuralı;
   .karanlik sınıfı TEMALAR k bayrağından JS'te yazılır) */
html.kuran-ince.karanlik .sayfa .ar{-webkit-text-stroke:.25px var(--kagit)}
html.kuran-ince.karanlik .sayfa .ayet-m,
html.kuran-ince.karanlik .sayfa .ayet-ayirici{-webkit-text-stroke:0}
/* tecvid renkleri (span'ler hep enjekte; renkler yalnız .tecvid-acik'ta) */
.akis.tecvid-acik .tj-gunne{color:var(--tj-gunne)}
.akis.tecvid-acik .tj-ihfa{color:var(--tj-ihfa)}
.akis.tecvid-acik .tj-iklab{color:var(--tj-iklab)}
.akis.tecvid-acik .tj-idgam{color:var(--tj-idgam)}
.akis.tecvid-acik .tj-kalkale{color:var(--tj-kalkale)}
.akis.tecvid-acik .tj-medd{color:var(--tj-medd)}
::highlight(ayet-bul){background-color:var(--vurgu-acik)}

/* ---------------- paneller ---------------- */
.panel{
  position:fixed;top:0;bottom:0;right:0;width:min(360px,92vw);z-index:40;
  background:var(--kagit);border-left:1px solid var(--cizgi);
  display:flex;flex-direction:column;
  box-shadow:-8px 0 28px rgba(0,0,0,.18);
  transition:transform .25s ease;
}
.panel.gizli{transform:translateX(105%)}
.panel-bas{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--cizgi)}
.panel-icerik{flex:1;overflow-y:auto;padding:8px 0}
.fh-ara{
  margin:10px 14px 4px;padding:8px 10px;border:1px solid var(--cizgi);
  border-radius:9px;background:var(--zemin);color:var(--metin);width:calc(100% - 28px);
}
.git{display:flex;align-items:center;gap:5px;font-size:13px}
.git input{width:54px;padding:4px 6px;border:1px solid var(--cizgi);border-radius:7px;background:var(--zemin);color:var(--metin)}
.fh-satir{display:flex;align-items:center;gap:7px;padding:8px 14px 0;font-size:13px}
.fh-satir input{width:56px;padding:5px 6px;border:1px solid var(--cizgi);border-radius:7px;background:var(--zemin);color:var(--metin)}
.fh-satir input.hata{border-color:#c62828;background:#c6282822}
.fh-satir select{flex:1}
.ayar-govde label.satir{display:flex;align-items:center;gap:8px}
.ayar-govde .tecvid-renk{display:flex;flex-direction:column;gap:8px;padding:4px 0 0 8px;border-left:2px solid var(--cizgi)}
.ayar-govde .tecvid-renk input[type=color]{width:34px;height:24px;padding:0;border:1px solid var(--cizgi);border-radius:5px;background:none}
.fh-grup{padding:10px 16px 4px;font-size:12px;font-weight:700;letter-spacing:.6px;opacity:.6;text-transform:uppercase}
.fh-oge{
  display:flex;justify-content:space-between;gap:8px;width:100%;
  padding:9px 16px;border:none;background:none;color:var(--metin);
  font-size:15px;cursor:pointer;text-align:left;
}
.fh-oge:hover{background:var(--vurgu-acik)}
.fh-oge .no{opacity:.5;font-size:13px}
.ayar-govde{padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.ayar-govde label{font-size:14px}
.ayar-govde select,.ayar-govde input[type=range]{width:100%;margin-top:6px}
.ayar-govde select{padding:8px;border:1px solid var(--cizgi);border-radius:9px;background:var(--zemin);color:var(--metin)}

.perde{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:30}
.gizli.perde,.perde.gizli{display:none}

@media (max-width:640px){
  .kap{padding:56px 0 30px}
  .sayfa{padding:18px 14px 14px;border-radius:10px;margin:10px 0}
  .marka{font-size:14px}
}

/* tema kartlari (siracnur tarzi gorsel secim) + renk ozellestirme */
.tema-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px}
.tema-kart{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;
  border:1.5px solid var(--cizgi);border-radius:10px;background:var(--zemin);color:var(--metin);cursor:pointer}
.tema-kart.secili{border-color:var(--vurgu);box-shadow:0 0 0 1px var(--vurgu)}
.tema-kart .tema-renkler{display:flex;gap:3px}
.tema-kart .tema-renkler i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(128,128,128,.45)}
.tema-kart .tema-ad{font-size:11.5px;text-align:center;line-height:1.15}
.tema-renk-duzen{margin-top:4px}
.tema-renk-duzen summary{cursor:pointer;font-size:13.5px;opacity:.85}
.tema-renk-duzen #ayTemaRenk{display:flex;flex-direction:column;gap:8px;padding:8px 0 0 8px;border-left:2px solid var(--cizgi);margin-top:6px}
.tema-renk-duzen input[type=color]{width:34px;height:24px;padding:0;border:1px solid var(--cizgi);border-radius:5px;background:none}

/* tefsir paneli (spa5k/tafsir_api): ayet numarasina tiklayinca */
.panel.genis{width:min(560px,96vw)}
.sayfa .ayet-m,.sayfa .ayet-d,html.ayet-gizli .sayfa .ayet-ayirici{cursor:pointer}
.sayfa .ayet-m:hover{filter:brightness(1.3)}
.tefsir-govde{padding:12px 16px;font-size:16px;line-height:1.75}
.tefsir-govde .tf-metin.rtl{direction:rtl;text-align:right;font-size:21px;line-height:2;
  font-family:var(--kuran-font,"K Taha")}
.tefsir-govde h3{color:var(--vurgu);font-size:1.05em;margin:1em 0 .4em}
.tefsir-govde .tf-bilgi{opacity:.7;text-align:center;margin-top:2em}
#tfSecim{flex:1;max-width:100%}

/* ayarlar: tefsir cok-secim listesi + pesi gorunumu kaynak basliklari */
.tefsir-secim{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto;
  padding:8px 0 4px 8px;border-left:2px solid var(--cizgi);margin-top:6px;font-size:13.5px}
.tf-sayac{opacity:.6;font-size:12px}
.tefsir-govde h3.tf-kaynak{background:var(--vurgu-acik);border-radius:8px;
  padding:6px 12px;margin:1.4em 0 .5em;font-size:1em}
.tefsir-govde h3.tf-kaynak:first-child{margin-top:0}

/* ayarlar bolum kartlari (Genel / Yazi / Tema / Tefsir / Tecvid) */
.ay-bolum{border:1px solid var(--cizgi);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:12px;background:var(--zemin)}
.ay-bolum-baslik{margin:0 0 2px;font-size:12.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--vurgu);opacity:.9}

/* tefsir tercumesi: secim ustu yuzer dugme + ceviri kutusu */
.tf-cevir-dugme{position:fixed;z-index:60;box-shadow:0 3px 12px rgba(0,0,0,.25)}
.tf-cevir-dugme.gizli{display:none}
.tf-tercume{background:var(--vurgu-acik);border:1px solid var(--cizgi);border-radius:10px;
  padding:10px 14px;margin:.6em 0;font-size:15px;line-height:1.7;direction:ltr;text-align:left}
.tf-tercume-bas{font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--vurgu);margin-bottom:6px;font-weight:700}
.ay-bolum input[type=password]{width:100%;padding:8px;border:1px solid var(--cizgi);
  border-radius:9px;background:var(--zemin);color:var(--metin);margin-top:6px}
.tf-not{font-size:12px;opacity:.65;line-height:1.5}

.tf-tercume .ar{font-size:1.5em;font-family:var(--kuran-font,"K Taha");line-height:1.9}
.tf-tercume p{margin:.35em 0}

/* hat duzeni / tevafuk denemesi: 15'lik satir izgarasi + yaslama.
   DIKKAT (09.08.2026 kullanici raporu "kelime sirasi bozuk"): kap dir=rtl
   oldugundan row-reverse SIRAYI TERSINE cevirir (RTL'de row zaten sagdan
   sola). Yon acikca bildirilir: direction:rtl + row -> 1. kelime SAGDA. */
.tvs{display:flex;direction:rtl;flex-direction:row;align-items:baseline;
  font-size:var(--boyut);line-height:calc(1.95 * var(--satir,1));white-space:nowrap;
  width:var(--tvf-en,100%);max-width:100%;margin-inline:auto}
.tvs .tvk{flex:0 0 auto}
.tvs .tvg{flex:0 0 auto;display:inline-block}

.tvs{font-size:var(--tvf-boyut, var(--boyut))}
.lafiz{color:#c0392b}
html.karanlik .lafiz{color:#ff8a80}