/* ============================================================
   assets/css/mushaf.css — Mushaf görünümü

   YAN PANEL KALDIRILDI. Sağ kenardaki kayan kutu metnin üstüne
   biniyordu (mushaf çerçevesinin sağ kenarını ve ayet başlarını
   kapatıyordu) ve dar ekranda yeri yoktu. Yerine ekranın altına
   sabit, tam genişlikte ince bir "kelime çubuğu" kondu: masaüstü
   ve mobil aynı bileşeni kullanır, metnin hiçbir yerini örtmez.
   ============================================================ */

.mushaf{
  --mu-kagit:#FBF8F1;
  --mu-cerceve:#D8CDB4;
  --mu-murekkep:#1A1A18;
  --mu-kirmizi:#C1272D;      /* hattatların rubrikasyon mürekkebi */
  --mu-altin:#A67C1A;
  --mu-cizgi:#E7DFCB;
  --mu-soluk:#6B6355;
  --mu-alt:#3F6293;        /* kelime altı meal — sitenin lacivertinin (#1C3F6E) açığı */
  --mu-cetvel:#6B5A2E;     /* jadvalin ince iç çizgisi */
  /* Öbek renkleri — kırmızı (vurgu) ve altın (gül) ile karışmayacak tonlar */
  --mu-r0:#1F6F72; --mu-r1:#2C5F8A; --mu-r2:#7A4E8C; --mu-r3:#5B7233;
  max-width:900px;
  margin:0 auto;
  padding:16px 16px 32px;
}
body[data-theme="dark"] .mushaf{
  --mu-kagit:#101821; --mu-cerceve:#243244; --mu-murekkep:#E8EEF6;
  --mu-kirmizi:#FF7A7A; --mu-altin:#D9A441; --mu-cizgi:#1E2C3B; --mu-soluk:#94A3B8;
  --mu-alt:#93C5FD;        /* koyu temada site zaten bu maviyi kullanıyor */
  --mu-cetvel:#7A6234;
  --mu-r0:#5EC8C8; --mu-r1:#8FBCEA; --mu-r2:#C6A3DF; --mu-r3:#A8C97F;
}
body[data-theme="sepia"] .mushaf{
  --mu-kagit:#F6EBD4; --mu-cerceve:#D9C39A; --mu-murekkep:#3B2E1E;
  --mu-kirmizi:#A8322B; --mu-altin:#8A6A3E; --mu-cizgi:#DFCCA6; --mu-soluk:#7A6647;
  --mu-alt:#8D6A4C;        /* sepyada mavi durmuyor; sitenin sepya vurgusu */
  --mu-cetvel:#6B5230;
  --mu-r0:#1C6467; --mu-r1:#33587D; --mu-r2:#6E4680; --mu-r3:#54682F;
}

/* ── sayfa üst bandı ──────────────────────────────────────
   Basılı mushafın düzeni: çerçevenin üstünde bir yanda sure adı,
   diğer yanda cüz. Sayfa numarası altta, mühürde. */
.mushaf-ust{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  margin:0 4px 10px;padding-bottom:8px;
  border-bottom:1px solid var(--mu-cizgi);
  font-family:'Inter',system-ui,sans-serif;
}
.mushaf-ust > .mushaf-sayfa-no{justify-self:center}
.mushaf-ust > .mu-ust-cuz{justify-self:end}
.mu-ust-sure{display:flex;align-items:baseline;gap:8px;min-width:0}
.mu-ust-ar{
  font-family:var(--kuran-font,'Noto Naskh Arabic',serif);
  font-size:18px;color:var(--mu-altin);direction:rtl;line-height:1.6;
}
.mu-ust-tr{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu-soluk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mu-ust-cuz{
  flex:0 0 auto;font-family:inherit;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--mu-soluk);
  background:transparent;border:1px solid var(--mu-cizgi);border-radius:20px;
  padding:4px 11px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.mu-ust-cuz:hover,.mu-ust-cuz[aria-expanded="true"]{border-color:var(--mu-alt);color:var(--mu-alt)}
.mu-ust-cuz:focus-visible{outline:2px solid var(--mu-alt);outline-offset:2px}

@media (max-width:640px){
  .mu-ust-ar{font-size:15px}
  .mu-ust-tr{font-size:10px;letter-spacing:.1em}
  .mushaf-sayfa-no{font-size:14px;gap:6px}
  .mushaf-sayfa-no::before,.mushaf-sayfa-no::after{width:12px}
  .mushaf-ust{gap:8px}
}

/* Sayfa içinde sure değişimi — iki sureye taşan sayfalarda sınır */
.mu-sure-bas{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:22px 0 4px;padding:9px 14px;
  border-top:1px solid var(--mu-cizgi);
  border-bottom:1px solid var(--mu-cizgi);
  background:color-mix(in srgb,var(--mu-altin) 7%,transparent);
}
.mu-sure-bas:first-child{margin-top:0}
.mu-sure-ar{
  font-family:var(--kuran-font,'Noto Naskh Arabic',serif);font-size:22px;
  color:var(--mu-altin);direction:rtl;line-height:1.5;
}
.mu-sure-tr{
  font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mu-soluk);
}

.mushaf-bos{
  text-align:center;padding:40px 16px;color:var(--mu-soluk,#6B6355);
  font-family:'Inter',system-ui,sans-serif;font-size:14px;
}

/* ── sayfa mührü ──────────────────────────────────────────
   Basılı mushafta sayfa numarası sayfanın altındadır; ekranda da
   orada. Numara altın halka içinde ve kendisi düğme — dokununca
   sayı klavyesi açılır. Oklar iki yanında: görünür oldukları için
   keşfedilebilir, alt kenarda oldukları için başparmakla erişilir. */
/* Süs sayfa numarası — çerçevenin altında ortada, kitaplardaki gibi.
   Gezinmeyle ilgisi yok, sadece sayfanın kimliği. */
.mushaf-sayfa-no{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--kuran-font,'Noto Naskh Arabic',serif);
  font-size:16px;color:var(--mu-altin);
  user-select:none;
}
.mushaf-sayfa-no::before,.mushaf-sayfa-no::after{
  content:"";width:20px;height:1px;background:var(--mu-altin);opacity:.5;
}
.mushaf-sayfa-no .lat{
  font-family:'Inter',system-ui,sans-serif;font-size:11px;
  color:var(--mu-soluk);letter-spacing:.06em;
}

.mu-muhur{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;font-family:'Inter',system-ui,sans-serif;
}
.mu-yon{
  width:46px;height:46px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--mu-cizgi);border-radius:12px;
  background:var(--mu-kagit);color:var(--mu-alt);text-decoration:none;
  transition:border-color .15s,background-color .15s;
}
.mu-yon svg{width:20px;height:20px}
.mu-yon:hover{border-color:var(--mu-alt);background:color-mix(in srgb,var(--mu-alt) 8%,transparent)}
.mu-yon:focus-visible{outline:2px solid var(--mu-alt);outline-offset:2px}
.mu-yon.pasif{border-color:transparent;pointer-events:none}

.mu-muhur-orta{display:flex;align-items:center;gap:8px;padding:0 6px}
.mu-toplam{font-size:11px;color:var(--mu-soluk);white-space:nowrap}

/* ── Cüz seçici ───────────────────────────────────────────
   30 cüz tek ekranda; her biri başladığı sure ve ayeti gösterir,
   böylece "20. cüz nerede başlıyor" sorusu da cevaplanmış olur. */
/* Panel sayfa akışında DEĞİL, üstte duran bir katman. Akışta olduğunda
   açmak için sayfayı kaydırmak gerekiyordu ve kullanıcı vazgeçince
   kaldığı yere dönemiyordu. */
.mu-cuz-panel{
  position:fixed;z-index:90;left:50%;transform:translateX(-50%);
  top:var(--cuz-ust,110px);width:min(900px,calc(100vw - 28px));
  max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px;
  background:var(--mu-kagit,#fff);
  border:1px solid var(--mu-cizgi,#E5E7EB);
  border-radius:12px;
  box-shadow:0 18px 44px -20px rgba(17,24,39,.35);
}
.mu-cuz-panel[hidden]{display:none}
.mu-cuz-baslik{
  font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mu-soluk);margin-bottom:10px;
}
.mu-cuz-izgara{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
.mu-cuz-oge{
  display:flex;flex-direction:column;gap:1px;
  padding:8px 10px;min-height:48px;justify-content:center;
  border:1px solid var(--mu-cizgi);border-radius:8px;
  text-decoration:none;color:inherit;
  font-family:'Inter',system-ui,sans-serif;
  transition:border-color .15s,background-color .15s;
}
.mu-cuz-oge:hover{border-color:var(--mu-alt);background:color-mix(in srgb,var(--mu-alt) 7%,transparent)}
.mu-cuz-oge:focus-visible{outline:2px solid var(--mu-alt);outline-offset:2px}
.mu-cuz-oge.aktif{border-color:var(--mu-altin);background:color-mix(in srgb,var(--mu-altin) 12%,transparent)}
.mu-cuz-no{font-size:14px;font-weight:600}
.mu-cuz-yer{font-size:11px;color:var(--mu-soluk)}

@media (max-width:640px){
  /* Dar ekranda panel kenarlara yaklaşsın, kutular küçülsün ama
     dokunma hedefi 52px'in altına inmesin. */
  .mu-cuz-panel{width:calc(100vw - 16px);max-height:min(78vh,560px);padding:12px 12px 14px}
  .mu-cuz-izgara{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px}
  .mu-cuz-oge{min-height:52px;padding:7px 8px}
}
.mu-numara{
  width:50px;height:50px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:18px;font-weight:600;
  color:var(--mu-altin);background:transparent;
  border:1px solid var(--mu-altin);border-radius:50%;
  cursor:pointer;
  transition:background-color .15s,color .15s;
}
.mu-numara:hover{background:var(--mu-altin);color:var(--mu-kagit)}
.mu-numara:focus-visible{outline:2px solid var(--mu-altin);outline-offset:3px}

/* Atlama formu — mührün yerine geçer */
.mu-git{display:flex;align-items:center;gap:6px}
.mu-git[hidden]{display:none}
.mu-git label{
  font-size:11px;color:var(--mu-soluk);
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
.mu-git input[type="number"]{
  width:84px;height:50px;padding:0 8px;text-align:center;
  font-family:inherit;font-size:19px;font-weight:600;color:var(--mu-murekkep);
  background:var(--mu-kagit);
  border:1.5px solid var(--mu-altin);border-radius:12px;
  -moz-appearance:textfield;
}
.mu-git input[type="number"]::-webkit-outer-spin-button,
.mu-git input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mu-git input:focus{outline:2px solid var(--mu-altin);outline-offset:1px}
.mu-git button{
  width:46px;height:46px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--mu-cizgi);border-radius:12px;
  background:transparent;color:var(--mu-soluk);cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s;
}
.mu-git button svg{width:19px;height:19px}
.mu-git button[type="submit"]{
  background:var(--mu-alt);border-color:var(--mu-alt);color:var(--mu-kagit);
}
.mu-git button[type="submit"]:hover{filter:brightness(1.08)}
.mu-git .mu-vazgec:hover{border-color:var(--mu-kirmizi);color:var(--mu-kirmizi)}
.mu-git button:focus-visible{outline:2px solid var(--mu-altin);outline-offset:2px}

/* Yazarken hedefin karşılığı — körlemesine numara girilmesin */
.mu-git-ipucu{
  margin:9px 0 0;text-align:center;
  font-family:'Inter',system-ui,sans-serif;font-size:12px;
  color:var(--mu-alt);min-height:17px;
}
.mu-git-ipucu[hidden]{display:none}
.mu-git-ipucu.hata{color:var(--mu-kirmizi)}

/* ── sayfa ────────────────────────────────────────────────
   Eski hâlde çerçeve üç katmanlıydı (kenarlık + altın halka +
   iç hairline). Ekranda ağır duruyordu; tek kenarlık + ince iç
   çizgi bırakıldı. */
/* Çift cetvel (jadval) — matbu mushafın klasik çerçevesi: dışta ince
   altın, ortada kalın altın, en içte ince koyu çizgi. Üç katman da
   ::before/::after ile çiziliyor, fazladan eleman yok.
   Metnin padding'i en iç çizgiyi (inset 10px) rahat geçmeli. */
.mushaf-sayfa{
  position:relative;
  background:var(--mu-kagit);
  border:1px solid var(--mu-altin);
  border-radius:3px;
  padding:30px 28px 26px;
  box-shadow:0 10px 30px -26px rgba(20,25,35,.5);
}
.mushaf-sayfa::before{
  content:"";position:absolute;inset:4px;
  border:3px solid var(--mu-altin);pointer-events:none;
}
.mushaf-sayfa::after{
  content:"";position:absolute;inset:10px;
  border:1px solid var(--mu-cetvel);opacity:.65;pointer-events:none;
}

.mushaf-besmele{
  font-family:var(--kuran-font,'Noto Naskh Arabic',serif);
  font-size:24px;text-align:center;color:var(--mu-altin);
  padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid var(--mu-cizgi);
}

/* ── akan metin ─────────────────────────────────────────── */
.mushaf-satir{
  font-family:var(--kuran-font,'Noto Naskh Arabic',serif);
  font-size:28px;                 /* JS ayarlardaki Arapça boyutuyla eşitler */
  line-height:2.35;
  text-align:justify;
  text-align-last:right;          /* eskiden center'dı: son satır ortaya kaçıyordu */
  color:var(--mu-murekkep);
  margin:14px 0 0;
}
.mu-ayet{display:inline}

/* ── KELİME ─────────────────────────────────────────────── */
.mu-k{
  display:inline-block;
  padding:.08em .08em;
  border-radius:3px;
  color:inherit;position:relative;cursor:pointer;
  transition:color .16s ease,background-color .16s ease;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
.mu-k::after{
  content:"";position:absolute;left:50%;right:50%;bottom:.10em;height:2px;
  background:var(--mu-kirmizi);
  transition:left .2s ease,right .2s ease;
}
/* Hover YALNIZCA gerçek imleçli cihazda: dokunmatikte :hover yapışıp kalıyor */
/* Vurgu ve seçim öbek rengini bastırır: üzerinde olduğun öbek
   her zaman aynı kırmızıyla belli olsun. */
@media (hover:hover) and (pointer:fine){
  .mu-k:hover,.mushaf.alt-acik .mu-k:hover{color:var(--mu-kirmizi)}
  .mu-k:hover::after{left:.08em;right:.08em}
}
.mu-k:focus-visible{outline:2px solid var(--mu-kirmizi);outline-offset:1px}
.mu-k.sec,.mushaf.alt-acik .mu-k.sec{
  color:var(--mu-kirmizi);
  background:color-mix(in srgb,var(--mu-kirmizi) 10%,transparent);
}
.mu-k.sec::after{left:.08em;right:.08em;opacity:.5}

/* Bitişik öbekler — kelime ortasından bölünenler.
   kuran_arabic ذُوالْفَضْلِ diye bitişik yazarken meal_kelime ذُو ve
   الْفَضْلِ diye ikiye ayırıyor; iki span yan yana gelince aradaki
   dolgu mushafta olmayan bir boşluk üretiyordu. Aralarında boşluk
   OLMAYAN komşular sıfır dolguyla basılıyor.
   Kelime altı meal açıkken küçük bir pay kalıyor, yoksa iki karşılık
   dipdibe geliyor. */
.mu-k.bitisik{padding-inline-start:0}
.mu-k.bitisik-onceki{padding-inline-end:0}
.mushaf.alt-acik .mu-k.bitisik{padding-inline-start:.12em}
.mushaf.alt-acik .mu-k.bitisik-onceki{padding-inline-end:.12em}

/* Bitişik öbekler tek sarmalayıcıda: içeride satır kırılmaz.
   ذُو ile الْفَضْلِ tek kelime; ayrı iki inline-block olarak durduklarında
   tarayıcı aralarından satır atlayıp kelimeyi ikiye bölüyordu. */
.mu-grup{white-space:nowrap}

/* ── Kelime altı meal ────────────────────────────────────
   Eskiden --mu-soluk (sıcak gri) kullanılıyordu; kağıt tonuyla
   karışıp okunmuyor, siteyle de bağ kurmuyordu. Artık navbar ve
   bağlantılardaki lacivert ailesinden. Arapça neredeyse siyah
   olduğu için renk farkı iki katmanı doğal ayırıyor. */
.mu-ar{font-style:normal;border-radius:3px}

.mu-alt{
  display:none;
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.005em;
  color:var(--mu-alt);text-align:center;direction:ltr;margin-top:-.16em;
  opacity:.88;
  transition:color .16s ease,opacity .16s ease;
}
.mushaf.alt-acik .mushaf-satir{line-height:3.2;text-align:right}
.mushaf.alt-acik .mu-alt{display:block}
.mushaf.alt-acik .mu-k{padding:.08em .3em}

/* ── Öbek renkleri ────────────────────────────────────────
   Yalnız kelime altı meal açıkken. Amaç süs değil eşleştirme:
   bir öbek birden çok kelime içerebiliyor, renk hangi Arapça
   parçanın hangi karşılığa ait olduğunu gösteriyor. Meal
   kapalıyken mushaf tek renk kalır. */
.mushaf.alt-acik .mu-k.r0{color:var(--mu-r0)}
.mushaf.alt-acik .mu-k.r1{color:var(--mu-r1)}
.mushaf.alt-acik .mu-k.r2{color:var(--mu-r2)}
.mushaf.alt-acik .mu-k.r3{color:var(--mu-r3)}
.mushaf.alt-acik .mu-k .mu-alt{color:inherit;opacity:.85}

/* Vurgulanan kelimede alt meal de kırmızıya geçer: kelime ile
   karşılığı tek parça gibi okunsun. */
@media (hover:hover) and (pointer:fine){
  .mu-k:hover .mu-alt{color:var(--mu-kirmizi);opacity:1}
}
.mu-k.sec .mu-alt{color:var(--mu-kirmizi);opacity:1}

/* Ayet gülü — üzerine gelince Arapça rakam yerine Latin rakam.
   İki rakam üst üste durur, yalnız görünürlük değişir: içeriği
   değiştirmek gülün genişliğini oynatır ve üç haneli ayetlerde
   (١٤٧ ↔ 147) tüm satır kayar. */
.mu-gul{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;margin:0 .2em;
  font-size:.6em;color:var(--mu-altin);
  border:1px solid var(--mu-altin);border-radius:50%;
  vertical-align:.28em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease,color .16s ease;
}
/* İki rakam da tam ortada, üst üste */
.mu-gul-ar,.mu-gul-la{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;line-height:1;
  transition:opacity .14s ease;
}
.mu-gul-ar{opacity:1}
.mu-gul-la{
  opacity:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.86em;font-weight:600;letter-spacing:-.02em;
  direction:ltr;
}
@media (hover:hover) and (pointer:fine){
  .mu-gul:hover .mu-gul-ar{opacity:0}
  .mu-gul:hover .mu-gul-la{opacity:1}
}
/* Dokunmatikte hover yok: odakta ve basılıyken de göster */
.mu-gul:focus-visible .mu-gul-ar,.mu-gul:active .mu-gul-ar{opacity:0}
.mu-gul:focus-visible .mu-gul-la,.mu-gul:active .mu-gul-la{opacity:1}
.mu-gul:hover,.mu-gul:focus-visible{background:var(--mu-altin);color:var(--mu-kagit);outline:none}
.mu-secde .mu-gul{box-shadow:0 0 0 2px color-mix(in srgb,var(--mu-altin) 28%,transparent)}

/* Okundu işareti — kart görünümündeki yeşil nokta, gülün köşesinde.
   Kart görünümü .ayet-num'a koyuyor; mushafta karşılığı ayet gülü. */
.mu-ayet.ayet-okundu .mu-gul::before{
  content:"";position:absolute;top:-1px;right:-1px;
  width:7px;height:7px;border-radius:50%;
  background:#1D9E75;border:1.5px solid var(--mu-kagit);
}
body[data-theme="dark"] .mu-ayet.ayet-okundu .mu-gul::before{border-color:#101821}

/* Çalan ayet — sure.php'nin oynatıcısı .playing sınıfını ekler.
   Vurgu ayet kabına DEĞİL, Arapça metne (.mu-ar) uygulanır: kelime altı
   meal açıkken kabın satır kutusu Türkçe satırı da kapsıyor ve zemin
   ikisini birden boyuyordu. Okurken takip edilen şey Arapça metin. */
.mu-ayet.playing .mu-ar{
  background:color-mix(in srgb,var(--mu-altin) 18%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mu-altin) 18%,transparent);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
body[data-theme="dark"] .mu-ayet.playing .mu-ar{
  background:color-mix(in srgb,var(--mu-altin) 28%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mu-altin) 28%,transparent);
}

.mushaf-sayfa-ayrac{
  display:flex;align-items:center;gap:12px;margin:24px 0 6px;
  color:var(--mu-soluk);font-family:'Inter',system-ui,sans-serif;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.mushaf-sayfa-ayrac::before,.mushaf-sayfa-ayrac::after{
  content:"";flex:1;height:1px;background:var(--mu-cizgi);
}

/* Sonsuz kaydırmada eklenen sayfaların arasındaki ayraç */
.mushaf-parca-ayrac{
  display:flex;align-items:center;gap:12px;margin:26px 0 14px;
  font-family:'Inter',system-ui,sans-serif;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mu-soluk);
}
.mushaf-parca-ayrac::before,.mushaf-parca-ayrac::after{
  content:"";flex:1;height:1px;background:var(--mu-cizgi);
}
.mushaf-parca-ayrac span{color:var(--mu-altin);font-weight:600}

/* ════════════════════════════════════════════════════════════
   KELİME ÇUBUĞU — ekranın altında, tam genişlik, her ekranda aynı
   ════════════════════════════════════════════════════════════ */
.mu-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:64;
  background:#FBF8F1;
  border-top:1px solid #E7DFCB;
  box-shadow:0 -8px 26px -20px rgba(15,20,30,.5);
  transform:translateY(102%);
  transition:transform .26s cubic-bezier(.22,.8,.3,1),bottom .26s ease;
  font-family:'Inter',system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
.mu-bar.acik{transform:translateY(0)}
/* Ses çubuğu açıksa onun üstüne çık, üst üste binmesinler.
   Yükseklik JS tarafından ölçülüp --ses-cubugu değişkenine yazılıyor;
   burada sabit bir sayı tutmak, ses çubuğunun tasarımı değiştiğinde
   iki çubuğun üst üste binmesine yol açıyordu. */
body:has(.audio-bar.visible) .mu-bar{bottom:var(--ses-cubugu,72px)}

body[data-theme="dark"]  .mu-bar{background:#101821;border-top-color:#1E2C3B;color:#E8EEF6}
body[data-theme="sepia"] .mu-bar{background:#F6EBD4;border-top-color:#DFCCA6;color:#3B2E1E}

/* kırmızı ince şerit — seçili kelimeyle görsel bağ */
.mu-bar::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
  background:#C1272D;
}
body[data-theme="dark"] .mu-bar::before{background:#FF7A7A}

.mu-bar-in{
  max-width:940px;margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
}
.mu-bar-ana{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.mu-bar-ar{
  font-family:var(--kuran-font,'Noto Naskh Arabic',serif);direction:rtl;
  font-size:30px;line-height:1.5;color:#C1272D;flex:0 0 auto;
}
body[data-theme="dark"]  .mu-bar-ar{color:#FF7A7A}
body[data-theme="sepia"] .mu-bar-ar{color:#A8322B}
.mu-bar-tr{font-size:16px;font-weight:600;flex:1 1 auto;min-width:0}
.mu-bar-tr.bos{font-weight:400;opacity:.5}
.mu-bar-konum{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#8A8272;flex:0 0 auto;white-space:nowrap;
}
body[data-theme="dark"] .mu-bar-konum{color:#94A3B8}

.mu-bar-ctl{display:flex;gap:6px;flex:0 0 auto}
.mu-bar-ctl button{
  min-width:42px;height:42px;padding:0 10px;
  font-family:inherit;font-size:14px;font-weight:600;
  color:inherit;background:transparent;
  border:1px solid #E7DFCB;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:border-color .15s,background-color .15s;
}
body[data-theme="dark"]  .mu-bar-ctl button{border-color:#243244}
body[data-theme="sepia"] .mu-bar-ctl button{border-color:#DFCCA6}
.mu-bar-ctl button:hover:not(:disabled){border-color:#C1272D;color:#C1272D}
.mu-bar-ctl button:disabled{opacity:.32;cursor:default}
.mu-bar-ctl button:focus-visible{outline:2px solid #C1272D;outline-offset:2px}
.mu-bar-ctl .mu-kapat{color:#C1272D;font-size:20px}
.mu-bar-ctl .mu-dinle{color:#1F6F4A;border-color:#CFE3D7}
.mu-bar-ctl .mu-dinle svg{width:16px;height:16px}
.mu-bar-ctl .mu-onceki svg,.mu-bar-ctl .mu-sonraki svg{width:17px;height:17px}
.mu-bar-ctl .mu-dinle:hover:not(:disabled){border-color:#1F6F4A;background:rgba(31,111,74,.08);color:#1F6F4A}
body[data-theme="dark"] .mu-bar-ctl .mu-dinle{color:#6EE7B7;border-color:#1E3A2E}
body[data-theme="sepia"] .mu-bar-ctl .mu-dinle{color:#4E6B4A;border-color:#D3D8BE}
.mu-bar-ctl .mu-ac svg{transition:transform .2s ease}
.mu-bar-ctl .mu-ac[aria-expanded="true"] svg{transform:rotate(180deg)}

/* açılır detay: ayet meali + okunuş + tefsir
   Tefsir açılınca çubuk ekranın yarısına kadar büyür ve İÇİNDE kayar;
   okuma alanı tamamen kapanmasın diye yükseklik sınırlı. */
.mu-bar-detay{
  max-width:940px;margin:0 auto;
  padding:0 16px 12px;
  border-top:1px solid #E7DFCB;
  padding-top:11px;
  display:grid;gap:7px;
  overflow-y:auto;
  overscroll-behavior:contain;      /* çubuğun sonuna gelince sayfa kaymasın */
  -webkit-overflow-scrolling:touch;
}
.mu-bar.mu-uzun .mu-bar-detay{
  max-height:calc(50vh - 70px);     /* 70px ≈ üstteki kelime satırı */
}
body[data-theme="dark"]  .mu-bar-detay{border-top-color:#243244}
body[data-theme="sepia"] .mu-bar-detay{border-top-color:#DFCCA6}
.mu-bar-detay[hidden]{display:none}
.mu-bar-detay p{margin:0;font-size:14px;line-height:1.6}
.mu-bar-detay .et{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#8A8272;display:block;margin-bottom:2px;
}
body[data-theme="dark"] .mu-bar-detay .et{color:#94A3B8}

/* Tefsir metni — uzun olabilir, kendi içinde de sınırlı */
.mu-p-tefsir[hidden]{display:none}
.mu-d-tefsir{
  font-size:14px;line-height:1.7;
  white-space:pre-wrap;
}

/* Ayet araçları — çubuğun açılır bölümünde.
   Sınıflar sure.php'deki .a-btn ile aynı ama mushafta o stil sayfası
   yüklü olmayabilir; burada kendi görünümü tanımlanıyor. */
.mu-araclar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:10px;margin-top:4px;
  border-top:1px solid var(--mu-cizgi,#E7DFCB);
  position:sticky;bottom:0;                       /* kaydırırken kaybolmasın */
  background:inherit;
}
.mu-bar.mu-uzun .mu-araclar{
  background:#FBF8F1;
}
body[data-theme="dark"]  .mu-bar.mu-uzun .mu-araclar{background:#101821}
body[data-theme="sepia"] .mu-bar.mu-uzun .mu-araclar{background:#F6EBD4}
.mu-araclar .a-btn{
  width:38px;height:38px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--mu-cizgi,#E7DFCB);border-radius:8px;
  background:transparent;color:var(--mu-soluk,#6B6355);cursor:pointer;
  text-decoration:none;
  transition:border-color .15s,color .15s,background-color .15s;
}
.mu-araclar .a-btn svg{width:16px;height:16px}
.mu-araclar .a-btn:hover{border-color:var(--mu-alt);color:var(--mu-alt)}
.mu-araclar .a-btn:focus-visible{outline:2px solid var(--mu-alt);outline-offset:2px}
.mu-araclar .a-btn.active{border-color:var(--mu-altin);color:var(--mu-altin);
  background:color-mix(in srgb,var(--mu-altin) 12%,transparent)}
.mu-araclar .a-btn.pasif{opacity:.32;pointer-events:none}
.mu-araclar .a-btn.saved{border-color:#1D9E75;color:#1D9E75;width:auto;padding:0 10px;font-size:12px}
.mu-ref{
  margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--mu-soluk,#6B6355);font-variant-numeric:tabular-nums;
}

/* Aramadan gelinen ayet — birkaç saniye yanıp söner, sonra silinir */
.mu-ayet.mu-hedef .mu-ar{
  background:color-mix(in srgb,var(--mu-alt) 20%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mu-alt) 20%,transparent);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:mu-hedef-yanip 4s ease-out;
}
@keyframes mu-hedef-yanip{
  0%,55%{background:color-mix(in srgb,var(--mu-alt) 26%,transparent)}
  100%{background:transparent;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .mu-ayet.mu-hedef .mu-ar{animation:none}
}

/* Vurgulanan ayet — kart görünümündeki .ayet-vurgu'nun mushaf karşılığı.
   Çalan ayet gibi, yalnız Arapça metne uygulanır. */
.mu-ayet.ayet-vurgu .mu-ar{
  background:color-mix(in srgb,var(--mu-altin) 22%,transparent);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Çubuk açıkken sayfanın altı kapanmasın */
body.mu-acik{padding-bottom:84px}
body.mu-acik.mu-genis{padding-bottom:250px}
body.mu-acik.mu-tefsirli{padding-bottom:52vh}

@media (max-width:640px){
  .mushaf{padding:10px 8px 24px}
  .mushaf-sayfa{padding:22px 15px 18px}
  .mushaf-sayfa::before{inset:3px;border-width:2px}
  .mushaf-sayfa::after{inset:8px}
  .mushaf-satir{font-size:24px;line-height:2.5;text-align:right}
  .mushaf-besmele{font-size:20px}

  /* Çubuk iki satıra iner: üstte kelime+anlam, altta konum+kontroller */
  .mu-bar-in{flex-wrap:wrap;gap:8px;padding:9px 12px}
  .mu-bar-ana{flex:1 1 100%;gap:10px}
  .mu-bar-ar{font-size:26px}
  .mu-bar-tr{font-size:15px;flex:1 1 100%}
  .mu-bar-konum{order:3;flex:1 1 auto}
  .mu-bar-ctl{flex:0 0 auto;margin-left:auto}
  .mu-bar-ctl button{min-width:44px;height:44px}

  /* Tefsir açıkken: çubuk ekranın yarısını geçmez, içinde kayar.
     Dar ekranda kelime satırı iki satıra indiği için pay daha büyük. */
  .mu-bar.mu-uzun .mu-bar-detay{max-height:calc(50vh - 116px)}
  .mu-d-tefsir{font-size:13.5px;line-height:1.65}
  .mu-araclar{gap:5px}
  .mu-araclar .a-btn{width:40px;height:40px}

  /* Mühür dar ekranda da tek satır; dokunma hedefleri 46-50px kalır */
  .mu-muhur{gap:4px;margin-top:14px}
  .mu-muhur-orta{gap:6px;padding:0 2px}
  .mu-cuz-et,.mu-toplam{font-size:10px}
  .mu-git input[type="number"]{width:76px}
  .mushaf-ust .mu-sure-etiket{margin-left:0;flex:1 1 100%}
  body.mu-acik{padding-bottom:118px}
  body.mu-acik.mu-genis{padding-bottom:300px}
  body.mu-acik.mu-tefsirli{padding-bottom:58vh}
}

@media (prefers-reduced-motion:reduce){
  .mu-k,.mu-k::after,.mu-bar,.mu-gul,.mu-gul-ar,.mu-gul-la,.mu-ac svg{transition:none}
}

@media print{
  .mu-bar{display:none}
  .mu-k.sec{background:none;color:inherit}
  .mushaf-sayfa{box-shadow:none}
  body.mu-acik{padding-bottom:0}
}