/* ======================================================================
   site.css — CLEANED & ORGANIZED (snippet refactor)
   Notes:
   - Reordered logically, removed duplicate/conflicting rules.
   - Kept visual behavior intact; only consolidated repetitions.
   - ID-based modal rules (#readModal) preserved to avoid bleed.
   ====================================================================== */

/* ================================
   0) FONTS & THEME VARIABLES
================================ */
@font-face{
  font-family: 'ShaikhHamdullahBasicVolt';
  src: url('../fonts/ShaikhHamdullahBasicVolt.ttf') format('truetype');
  font-display: swap;
}

:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --text:#222;
  --muted:#6b7280;
  --line:#e2e5ef;
  --icon:#9aa0a6;
  --icon-hover:#5f6368;
  --overlap:48px; /* banner üzerine bindirme */
  --footer-h: 88px; /* sticky footer yükseklik varsayılanı */
}

/* ================================
   1) RESET & HELPERS
================================ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 Verdana, Geneva, Tahoma, sans-serif;
}
.container{ max-width:1280px; margin:0 auto; padding:0 16px; }
.main{ min-height:0; }
mark.hl{ background:#fff3bf; padding:0 .2em; border-radius:3px; }

/* ================================
   2) HEADER / BANNER
================================ */
.site-header{ width:100%; background:transparent; margin-top:0; position:relative; }
.site-header .container{ padding:0 16px 16px; } /* bannerla kart arasında nefes */
.banner-wrap{
  width:100%; overflow:hidden; border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
  position:relative; /* banner-tag için referans */
  padding-top:2px;
}
.banner-wrap img{
  width:100%; height:auto; display:block; object-fit:cover; max-height:260px;
}
.banner-tag{
  position:absolute; top:16px; left:20px;
  display:inline-block;
  font:400 clamp(22px, 4.2vw, 46px)/1.1 Verdana, Geneva, Tahoma, sans-serif;
  color:#ffffff;
  text-decoration:none;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  letter-spacing:.5px;
  transform-origin:left top;
  transition:transform .18s ease, opacity .18s ease;
  z-index:3;
}
.banner-tag:hover{ transform:scale(1.04); opacity:.95; }
@media (max-width:768px){
  .banner-tag{ top:10px; left:12px; font-size:clamp(18px, 5.2vw, 28px); text-shadow:0 1px 3px rgba(0,0,0,.25); }
  .banner-wrap img{ max-height:180px; object-position:center; }
  :root{ --overlap:28px; }
}

/* ================================
   3) SEARCH CARD
================================ */
.search-area{ position:relative; z-index:2; margin-top:calc(var(--overlap) * -2.5); }
.search-card{
  width:100%; max-width:1080px; margin:0 auto;
  background:var(--panel);
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,.14);
  overflow:hidden;
}
.search-tabs{ display:flex; align-items:center; gap:8px; padding:12px 14px; position:relative; }
.search-tabs .tab{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--text);
  padding:7px 11px; border-radius:10px;
 font:600 13px/1 Verdana, Geneva, Tahoma, sans-serif;
}
.search-tabs[data-mode="kisa"]   .tab[data-tab="kisa"],
.search-tabs[data-mode="sure"] .tab[data-tab="sure"],
.search-tabs[data-mode="ayet"]   .tab[data-tab="ayet"],
.search-tabs[data-mode="kuran"] .tab[data-tab="kuran"]{
  background:#f0e0bd; border-color:#8f8476;
}
.search-tabs .tab-icons{ margin-left:auto; display:flex; gap:10px; }
.search-tabs .ico{ appearance:none; border:0; background:transparent; color:#9aa0a6; font-size:16px; cursor:default; }
.search-topbar{ padding:4px 8px; border-top:1px solid var(--line); }
.search-input{
  width:100%; border:1px solid var(--line); outline:0; font-size:16px;
  padding:6px 10px; background:#fff; color:#2b2b2b; border-radius:10px;
}
.search-input:not(:disabled){ cursor:text; }
.search-input:disabled{ background:#fafafa; color:#9aa0a6; cursor:not-allowed; }
.search-results{
  border-top:1px solid var(--line);
  min-height:520px; max-height:624px; overflow:auto; background:#fff;
}
.search-results.is-empty::before{
  content:"Listeler daha sonra eklenecek.";
  display:block; color:var(--muted); padding:18px 14px; font-size:14px;
}

/* Mobilde sekme menü ikonu */
.search-menu-toggle{
  display:none;              /* Masaüstünde görünmeyecek */
  width:100%;
  padding:8px 12px;
  border:0;
  background:#f5f5f5;
  color:#333;
  font:600 14px/1 Verdana, Geneva, Tahoma, sans-serif;
  text-align:left;
  cursor:pointer;
  border-bottom:1px solid var(--line);
}
.search-menu-toggle::before{
  content:"☰";
  display:inline-block;
  margin-right:8px;
  font-size:16px;
}

@media (max-width:768px){
  /* Ana kartı biraz daha genişlet: 92% → 100% */
  .search-card{
    max-width:100%;
    margin:0 auto;
    border-radius:16px;
  }

  /* Menü ikonu mobilde görünsün */
  .search-menu-toggle{
    display:block;
  }

  /* Sekmeler varsayılan olarak kapalı olsun */
  .search-tabs{
    display:none;
    flex-wrap:wrap;
    gap:8px 6px;
    border-top:1px solid var(--line);
  }

  /* Kart .is-menu-open olunca sekmeleri göster */
  .search-card.is-menu-open .search-tabs{
    display:flex;
  }

  .search-tabs .tab{
    font-size:12px;
    padding:6px 9px;
    border-radius:10px;
  }

  .search-input{
    font-size:14px;
  }

  .search-results{
    min-height:260px;
  }
  
}


/* ================================
   4) ZEBRA LIST (ÂYET LİSTESİ)
================================ */
.zebra-list{ padding:8px 0; }
.z-item{
  padding:12px 14px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.z-item:nth-child(even){ background:#f9fafb; }
.z-head strong{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-weight:700; font-size:16px; color:#111;
}
.z-meal{
  margin-top:6px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size:15px; color:#222; line-height:1.6;
}
.z-toggle,
.z-toggle-open{
  margin-top:8px;
  appearance:none; border:0; background:transparent;
  color:#5f6368; font-size:14px;
  cursor:pointer; padding:2px 0;
  display:inline-flex; align-items:center; gap:6px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.z-toggle::before,
.z-toggle-open::before{ content:none !important; }

/* Arama sonuç kutusu: sticky çalışsın diye relatif olsun */
.search-results{
  position: relative;
}

/* Üstte sabit kalan "tüm sonuçlar" satırı */
.z-item--showall{
  background:#fff8e1;
  border:1px solid var(--line);
  border-radius:8px;
  padding:2px 4px;
  margin:6px 4px;
  position: sticky;   /* scroll’da yapışsın */
  top: 0;             /* ekranın üstüne yapışma noktası */
  z-index: 5;         /* alttaki satırların üstünde kalsın */
}

.z-item--showall .z-show-all{
  width:100%;
  padding:10px 12px;
  border:0;
  background:transparent;
  text-align:left;
  font-size:15px;
  color:#444;
  cursor:pointer;
  border-radius:6px;
}

.z-item--showall .z-show-all:hover{
  text-decoration:underline;
  color:#046f7e;
}
.z-show-all__count{
  font-weight:600;
  margin-left:4px;
}




/* ================================
   5) FOOTER
================================ */
.site-footer{ 
margin-top:40px; background:var(--panel);
 /* Alta sabitleme (tüm ekranlar) */
position:fixed; left:0; right:0; bottom:0;
border-top:1px solid var(--line);
box-shadow:0 -6px 20px rgba(0,0,0,.08);
z-index:9999;
/* Footer yüksekliği (yaklaşık) – alttaki padding hesapları için */
--footer-h: 38px;}

.site-footer .footer-sep{ height:1px; background:var(--line); margin:0 auto; max-width:1280px; display:none; }
.site-footer .footer-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; padding:5px 7px;
}
.site-footer .footer-left{ display:flex; align-items:center; gap:10px; }
.site-footer .yil{ font-weight:600; color:var(--muted); font-size:16px; }
.site-footer .el-yazi{
  font-family:"Brush Script MT","Segoe Script","Lucida Handwriting","Comic Sans MS",cursive;
  font-weight:700; font-size:24px; letter-spacing:.2px; color:var(--muted);
}
.site-footer .footer-right{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px;
}
.footer-group{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.site-footer .footer-right .ico{ width:24px; height:24px; border-radius:6px; }
.site-footer .footer-right .ico:focus,
.site-footer .footer-right .ico:active{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; color:var(--icon);
  text-decoration:none; border:0; outline:0; box-shadow:none; background:transparent;
}
.site-footer .footer-right .ico:hover{ color:var(--icon-hover); }
.site-footer .footer-right .ico img{ width:16px; height:16px; display:block; }
.site-footer .footer-right .handle{ color:var(--muted); margin:0; font-size:14px; }

/* Mobile footer */
@media (max-width:768px){
  .site-footer .footer-wrap{ flex-direction:column; align-items:center; gap:8px; }
  .site-footer .footer-left{ width:100%; justify-content:center; text-align:center; }
  .site-footer .footer-right{ display:none; }
  .site-footer.is-open .footer-right{ display:flex; }

  /* Mobil sabit footer */
  .site-footer{
    position:fixed; left:0; right:0; bottom:0;
    width:100%; background:var(--panel);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
    z-index:50;
  }
  .site-footer .footer-sep{ display:none; }
  body{ padding-bottom:96px; }
}

/* Sticky footer (JS ile class eklenir) */
@media (max-width:900px){
  .site-footer.sticky{
    position:fixed !important; left:0; right:0; bottom:0;
    width:100%; background:var(--panel);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(0,0,0,.08);
    z-index:9999;
  }
  .site-footer.sticky .footer-sep{ display:none; }
  body.has-sticky-footer{ padding-bottom:var(--footer-h) !important; }
}
.search-results,.zebra-list{ padding-bottom:calc(var(--footer-h) + 32px); }
@media (min-width:901px){ .search-results,.zebra-list{ padding-bottom:calc(var(--footer-h) + 24px); } }

/* ================================
   6) READ MODAL (GENEL İSKELET)
================================ */
.read-modal{ position:fixed; inset:0; display:none; z-index:16000; }
.read-modal.is-open{ display:block; }
.read-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}
.read-dialog{
  position:relative;
  width:min(1240px, 96vw);
  max-height:min(90vh, 1200px);
  margin:5vh auto;
  background:#fff; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; overflow:hidden;
}
.read-close{
  position:absolute; top:10px; right:12px;
  appearance:none; border:0; background:transparent;
  font-size:18px; line-height:1; cursor:pointer; color:#6b7280;
  z-index:6; pointer-events:auto;
}
.read-close:hover{ color:#111; }
.read-head{ padding:14px 16px; border-bottom:1px solid var(--line); }
.read-head h3{ margin:0; font:700 18px/1.3 Verdana, Geneva, Tahoma, sans-serif; }

/* Body grid: head / main / words / trans */
.read-body{
  padding:16px; overflow:auto;
  font:16px/1.65 Verdana, Geneva, Tahoma, sans-serif; color:#222;

  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "head head"
    "main main"
    "words trans";
  gap:12px;
}
.rm-head  { grid-area:head; }
.rm-main  { grid-area:main; }
.rm-words { grid-area:words; }
.rm-trans { grid-area:trans; }


/* Placeholder (geliştirme etiketi renkleri) */
.read-body .box{
  border-radius: 10px;
  padding: 12px;
  font: 400 16px/1.4 Verdana, Geneva, Tahoma, sans-serif;
  color: #111;
  background: #fff;
  border: 1px solid #d1d5db;  /* nötr gri sınır */
}


@media (max-width:768px){
  .read-body{
    grid-template-columns:1fr;
    grid-template-areas:"head" "main" "words" "trans";
    gap:10px;
  }
}

/* ================================
   7) READ MODAL — HEADER (grid + logo + seçimler + oklar)
================================ */
#readModal .read-head{
  position: relative;
  padding: 14px 64px 14px 16px; /* sağda X için nefes */
  border-bottom: 1px solid var(--line);
}
#readModal .rm-grid{
  display: grid;
  grid-template-columns: 1fr minmax(200px, 240px) max-content max-content;
  align-items: center;
  column-gap: 12px;
  width: 100%;
}
#readModal .rm-ref-slot{ min-width: 0; }
#readModal .rm-ref{
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #6b7280; font-size: .95rem; font-weight: 500; line-height: 1.2;
}
#readModal .rm-logo-slot{ text-align: center; }
#readModal .rm-logo{
  height: 55px !important;
  width: auto !important;
  display: inline-block;
  object-fit: contain;
  margin: 0 0 0 -100px;
}
#readModal .rm-sure-slot,
#readModal .rm-ayet-slot{
  white-space: nowrap;
  justify-self: end;
  margin-right: 0;
}
#readModal .boxsel{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 38px;
  padding: 0 40px 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  line-height: 1;
}
#readModal .boxsel select{
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent; outline: none;
  padding: 0; margin: 0;
  font: inherit;
  color: #374151;
  height: 100%; line-height: 36px;
  min-width: 9ch;
}
#readModal .boxsel .boxsel-divider{
  position: absolute; right: 32px; top: 6px; bottom: 6px; width: 1px; background: #e5e7eb;
}
#readModal .boxsel .boxsel-caret{
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9ca3af; pointer-events: none;
}
#readModal .boxsel:hover{ border-color: #9ca3af; }
#readModal .navbtn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; min-width: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; line-height: 1; cursor: pointer;
  font-size: 18px;
}
#readModal .navbtn:hover{ border-color: #9ca3af; }

@media (max-width:1024px){
  #readModal .rm-grid{
    grid-template-columns: 1fr 200px max-content max-content;
  }
}
@media (max-width:768px){
  /* Header biraz dar */
  #readModal .read-head{
    padding: 10px 44px 10px 12px;
  }

  /* 2 kolon: 
     1. kolon = Sûre select
     2. kolon = Âyet select + oklar  */
  #readModal .rm-grid{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    column-gap: 4px;
    row-gap: 6px;
    align-items: center;
  }

  /* Logoyu gizle, başlık tek satır üstte */
  #readModal .rm-logo-slot{
    display: none;
  }

  #readModal .rm-ref-slot{
    grid-column: 1 / -1;
    font-size: 14px;
  }

  /* Sûre select sol kolon */
  #readModal .rm-sure-slot{
    grid-column: 1 / 2;
  }

  /* Âyet select + oklar sağ kolon tek satır */
  #readModal .rm-ayet-slot{
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* içerik biraz sağa kaydır */
  gap: 4px;
}

#readModal .rm-ayet-slot .boxsel{
  flex: 1 1 auto;              /* kalan tüm genişliği kullansın */
  width: auto;
}



  /* Ok butonları kompakt */
  #readModal .rm-ayet-slot .navbtn{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 16px;
  }

  /* Ortak select ayarları */
  #readModal .boxsel{
    height: 32px;
    padding: 0 30px 0 10px;
  }

  #readModal .boxsel select{
    min-width: 0;
    width: 100%;
    line-height: 30px;
    font-size: 14px;
  }

  #readModal .boxsel .boxsel-caret{
    right: 8px;
    font-size: 11px;
  }

  #readModal .boxsel .boxsel-divider{
    right: 24px;
    top: 6px;
    bottom: 6px;
  }
}


/* ================================
   8) READ MODAL — MAIN ACTIONS (ikonlar)
   (tek tanım, tekrarlar kaldırıldı)
================================ */
#readModal .rm-main .box{
  position: relative;
  overflow: visible;
  padding-top: 44px;         /* başlık/meal ikonlara çarpmasın */
}
#readModal .rm-main-actions{
  position: absolute;
  top: 0;
  right: 8px;
  transform: translateY(-54%);
  z-index: 10;
  display: inline-flex;
  gap: 8px;
}
#readModal .rm-main-actions .act{
  border: 1px solid #e5e7eb;
  background: #fff;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280; cursor: pointer;
}
#readModal .rm-main-actions .act:hover{ border-color:#cfd3dc; color:#111; }
#readModal .rm-main-actions .act svg{ width:18px; height:18px; fill:currentColor; display:block; }
@media (max-width:768px){
  #readModal .rm-main .box{ padding-top: 44px; }
  #readModal .rm-main-actions{ right:10px; transform:translateY(-58%); }
  #readModal .rm-main-actions .act{ width:30px; height:30px; border-radius:8px; }
}

/* ================================
   9) TOGGLES & AÇIK TONLAR
================================ */
.z-toggle-mode,
.rm-toggle-ar{ color:#8a94a6; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.z-toggle-mode:hover,
.rm-toggle-ar:hover{ color:#64748b; text-decoration:underline; }
.z-toggle,
.z-toggle-open,
.z-actions .z-goto{ color:#8a94a6; background:none; border:0; }
.z-toggle:hover,
.z-toggle-open:hover,
.z-actions .z-goto:hover{ color:#64748b; text-decoration:underline; }

/* ================================
   10) ARAPÇA TİPOGRAFİ (TEK MERKEZ)
   - Liste ve modal aynı fontu ve açık gri rengi kullanır.
================================ */
.arabic-text,
.z-ar,
#readModal .rm-ar{
  font-family: 'ShaikhHamdullahBasicVolt', serif !important;
  direction: rtl;
  text-align: right;
  color:#3f454d;
}
/* Liste boyutu (daha okunaklı) */
.zebra-list .z-ar{ font-size:26px; line-height:1.5; margin-top:8px; }
/* Modal boyutu */
#readModal .rm-ar{ font-size:26px; line-height:2.3; font-weight:400 !important; }
@media (max-width:768px){
  .zebra-list .z-ar{ font-size:22px; line-height:1.5; }
  #readModal .rm-ar{ font-size:23px; line-height:1.5; }
}

/* ================================
   11) READ MODAL — KELİMELER PANELİ
   (tek, tutarlı tanım; tekrarlar giderildi)
================================ */
#readModal .rm-words{
  --words-head-bg: #e9eff6;
  --words-head-bd: #d7dde6;
  --words-radius: 10px;
}

/* Scroll alanı */
#readModal .rm-words .words-scroll{
  max-height: clamp(220px, 40vh, 460px);
  overflow:auto;
  position:relative; /* sticky referansı */
  border-radius: var(--words-radius);
  scrollbar-gutter: stable;
}

/* Üst başlık bloğu */
#readModal .rm-words .words-head{
  position: sticky; top:0; z-index:5;
  background: var(--words-head-bg);
  border-bottom: 1px solid var(--words-head-bd);
  border-radius: var(--words-radius) var(--words-radius) 0 0;
  overflow:hidden;
}
#readModal .rm-words .words-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:8px 10px;
}
#readModal .rm-words .rm-words-toggle{
  appearance:none; border:0 !important; outline:none !important;
  background:transparent !important; color:#7b8794;
  padding:4px 10px; border-radius:8px; cursor:pointer;
}
#readModal .rm-words .rm-words-toggle:hover{ color:#55637a; text-decoration:underline; }

/* Alt başlık (kolon isimleri) */
#readModal .rm-words .words-cols{
  display:grid; grid-template-columns:56px 1fr 1fr 120px;
  gap:0; padding:6px 10px;
  background: var(--words-head-bg);
  color:#034096; font-weight:400;
  border-top:1px solid var(--words-head-bd);
  border-bottom:1px solid var(--words-head-bd);
}

/* Tablo */
#readModal .rm-words .words-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
#readModal .rm-words .words-table thead{
  display:none !important; /* thead gizlendi: başlıklar yukarıda */
}
#readModal .rm-words .words-table tbody td{
  padding:8px 10px;
  color:#4b5563;
  border-top:1px solid rgba(0,0,0,.06);
}
#readModal .rm-words .words-table tbody tr:nth-child(even){
  background: rgba(0,0,0,.02);
}
#readModal .rm-words .words-table td.no{ text-align:left; }
#readModal .rm-words .words-table td.kok{ text-align:right; }

/* NEW: Liste içindeki başlık satırı (# Kelime Anlam Kök) */
#readModal .rm-words .words-table .words-header-row{
  background:#f9fafb;      /* liste arka planına yakın */
  font-weight:600;
  color:#034096;           /* mavi yazı */
}
#readModal .rm-words .words-table .words-header-row td{
  border-top:0;
}

/* Arapça sütun */
#readModal .rm-words .words-table td.ar,
#readModal .rm-words .words-table td .arabic-text{
  font-family:'ShaikhHamdullahBasicVolt', serif !important;
  direction:rtl; text-align:right; color:#3f454d;
}

/* Hafif scrollbar (WebKit) */
#readModal .rm-words .words-scroll::-webkit-scrollbar{ width:10px; }
#readModal .rm-words .words-scroll::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:6px; }
#readModal .rm-words .words-scroll::-webkit-scrollbar-track{ background:#f3f4f6; border-radius:6px; }

/* =========================
   READ MODAL — KELİME / KÖK DETAY LİSTESİ
   ========================= */

#readModal .rm-words .words-kelime-mode,
#readModal .rm-words .words-kok-mode{
  background: transparent;
  padding: 0;
}

/* Başlık satırı + "Listeye dön" */
#readModal .rm-words .words-head,
#readModal .rm-words .kok-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: .85rem;
  color: #111827;
}

#readModal .rm-words .rm-words-back{
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: .75rem;
  color: #374151;
  cursor: pointer;
}

/* "Bu kelime X ayette geçiyor" / "Bu kök Y ayette geçiyor" */
#readModal .rm-words .words-summary,
#readModal .rm-words .kok-summary{
  margin-bottom: 6px;
  font-size: .85rem;
  color: #4b5563;
}

/* Liste kabı – hafif çerçeve + zebra satırlar */
#readModal .rm-words .kelime-list,
#readModal .rm-words .kok-list{
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

/* Her satır */
#readModal .rm-words .kelime-item,
#readModal .rm-words .kok-item{
  padding: 0;
  border-bottom: 1px solid #e5e7eb;
}

#readModal .rm-words .kelime-item:nth-child(even) .kelime-item-head,
#readModal .rm-words .kok-item:nth-child(even) .kok-item-head{
  background: #f9fafb; /* sadece başlık butonunda zebra */
}
/* Hover tonu – hem kelime hem kök listesi */
#readModal .rm-words .kelime-item-head:hover,
#readModal .rm-words .kok-item-head:hover{
  background: #e5edf9;
  cursor: pointer;
}


#readModal .rm-words .kelime-item:last-child,
#readModal .rm-words .kok-item:last-child{
  border-bottom: none;
}

/* Üstteki küçük referans butonu: "Bakara / 2:120 …" */
#readModal .rm-words .kelime-ref,
#readModal .rm-words .kok-ref{
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 10px;
  font-size: .8rem;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #111827;
}

/* Türkçe ayet metni */
#readModal .rm-words .kelime-ayet,
#readModal .rm-words .kok-ayet{
  font-size: .88rem;
  color: #111827;
  margin-bottom: 3px;
}

/* Arapça ayet metni */
#readModal .rm-words .kelime-ayet-ar,
#readModal .rm-words .kok-ayet-ar{
  font-family: 'ShaikhHamdullahBasicVolt', serif;
  direction: rtl;
  text-align: right;
  font-size: 1.05rem;
}



/* ================================
   12) MISC
================================ */
.z-ar{
  margin-top:8px;
  border-left:3px solid #e5e7eb; padding-left:10px;
}

/* END OF CLEANED SNIPPET */
#readModal .rm-words .box{ max-height: 40vh; overflow:auto; }
#readModal .rm-words .words-scroll{ max-height:none; overflow:visible; } /* varsa etkisizleşir */

/* B seçeneği için: Scrollbar çerçeveye basmasın */
#readModal .rm-words .box{
  /* zaten: overflow:auto; varsa kalsın */
  padding: 8px 12px;                 /* Üst-alt + sağ-sol iç nefes */
  scrollbar-gutter: stable both-edges;/* Scrollbar için yer ayır (Chrome/Edge/FF) */
  background-clip: padding-box;       /* Arka plan/çerçeve taşma yapmasın */
  border-radius: 10px;                /* köşeleri koru */
}

/* WebKit – üst/alt taşmayı engelle (track’i kısalt) */
#readModal .rm-words .box::-webkit-scrollbar{ width: 12px; }
#readModal .rm-words .box::-webkit-scrollbar-track{
  background: transparent;
  margin: 8px 0;                      /* track üst-alt tampon */
}
#readModal .rm-words .box::-webkit-scrollbar-thumb{
  background: #d1d5db;
  border-radius: 8px;
  border: 3px solid transparent;      /* sağda küçük iç boşluk */
  background-clip: content-box;
}

/* Sticky başlık B seçeneğinde de scroll konteynerine yapışsın */
#readModal .rm-words .words-head{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* [PATCH] Kelimeler paneli — Arapça kelime & kök fontu */
#readModal .rm-words .words-table td.kelime,
#readModal .rm-words .words-table td.kelime *,
#readModal .rm-words .words-table td.kok,
#readModal .rm-words .words-table td.kok *,
#readModal .rm-words .words-table td.ar,
#readModal .rm-words .words-table td.ar *,
#readModal .rm-words .arabic-text{
  font-family: 'ShaikhHamdullahBasicVolt', serif !important;
  direction: rtl;
  text-align: right;
  /* renk ve boyut mevcut kurallardan miras kalır */
}

/* [PATCH] Kelimeler paneli — Arapça kelime & kök: font + büyütme */
#readModal .rm-words .words-table td.kelime,
#readModal .rm-words .words-table td.kelime *,
#readModal .rm-words .words-table td.kok,
#readModal .rm-words .words-table td.kok *,
#readModal .rm-words .words-table td.ar,
#readModal .rm-words .words-table td.ar *,
#readModal .rm-words .arabic-text{
  font-family: 'ShaikhHamdullahBasicVolt', serif !important;
  direction: rtl;
  text-align: right;
  font-size: 1.22em;   /* ≈ %18 daha büyük */
  line-height: 1.9;    /* satır aralığını da aç */
}

/* Mobilde bir tık daha düşük büyütme */
@media (max-width: 768px){
  #readModal .rm-words .words-table td.kelime,
  #readModal .rm-words .words-table td.kelime *,
  #readModal .rm-words .words-table td.kok,
  #readModal .rm-words .words-table td.kok *,
  #readModal .rm-words .words-table td.ar,
  #readModal .rm-words .words-table td.ar *,
  #readModal .rm-words .arabic-text{
    font-size: 1.12em;
    line-height: 1.85;
  }
}

/* [PATCH] Kelimeler paneli — Arapça kelime & kök: normal (bold değil) */
#readModal .rm-words .words-table td.kelime,
#readModal .rm-words .words-table td.kelime *,
#readModal .rm-words .words-table td.kok,
#readModal .rm-words .words-table td.kok *,
#readModal .rm-words .words-table td.ar,
#readModal .rm-words .words-table td.ar *,
#readModal .rm-words .arabic-text {
  font-family: 'ShaikhHamdullahBasicVolt', serif !important;
  font-weight: 400 !important;         /* normal ağırlık */
  font-synthesis: none;                /* fake bold/italic kapat */
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased; /* WebKit */
  -moz-osx-font-smoothing: grayscale;  /* macOS Firefox */
  text-rendering: optimizeLegibility;
}

/* İçte yanlışlıkla <b>/<strong> kullanıldıysa da normal kalsın */
#readModal .rm-words .words-table td.kelime b,
#readModal .rm-words .words-table td.kelime strong,
#readModal .rm-words .words-table td.kok b,
#readModal .rm-words .words-table td.kok strong,
#readModal .rm-words .words-table td.ar b,
#readModal .rm-words .words-table td.ar strong {
  font-weight: 400 !important;
}

@media (max-width: 768px){
  /* Grid içindeki her şey sola hizalansın */
  #readModal .rm-grid{ justify-items: start; }

  /* Sûre ve Âyet kutuları %100 genişlikte, sola yaslı */
  #readModal .rm-sure-slot,
  #readModal .rm-ayet-slot{ justify-self: start; width: 100%; }

  /* Kutulu select tam genişlik */
  #readModal .boxsel{ width: 100%; max-width: 100%; }
}

/* Tablo sabit düzen; taşanlar ellipsis */
#readModal .rm-words .words-table{ table-layout: fixed; }
#readModal .rm-words .words-table tbody td{
  overflow: hidden; text-overflow: ellipsis;
}

/* Sütun genişlikleri */
#readModal .rm-words .words-table tbody td.no{ width: 44px; }     /* # */
#readModal .rm-words .words-table tbody td.kelime{ text-align: left; }
#readModal .rm-words .words-table tbody td.anlam{  text-align: left; }

/* KÖK sütunu: tek satır, sağa/rtl; sığsın, satır atlamasın */
#readModal .rm-words .words-table tbody td.kok{
  width: 88px;
  white-space: nowrap;
  direction: rtl; text-align: right;
}
#readModal .rm-words .kelime-item.is-current .kelime-item-head {
  background: #fff7d6;        /* hafif sarı ton */
  box-shadow: 0 0 0 1px #fbbf24 inset;
}


/* Başlık şeridini de dar ekrana göre hizala */
@media (max-width: 768px){
  #readModal .rm-words .words-cols{
    grid-template-columns: 44px 1.3fr 1.4fr 1fr;  /* # | kelime | anlam | kök */
    padding: 6px 8px;
  }
  #readModal .rm-words .words-table tbody td{ padding: 8px; }
}

/* Modal genişliği ve yatay taşmayı kilitle */
#readModal,
#readModal .read-dialog,
#readModal .read-body{
  max-width: 100vw;
  overflow-x: hidden;
}

/* Mobil kaydırma pürüzsüz; yatay overscroll kapalı */
#readModal .rm-words .box{ -webkit-overflow-scrolling: touch; }
#readModal .rm-words .words-scroll{ overscroll-behavior-x: contain; }

/* [PATCH] Mobilde kelime sütunu: tek satır + geniş pay, kırpma yok */
@media (max-width: 768px){
  /* İçerik ölçülsün; sabit layout yüzünden kırpma olmasın */
  #readModal .rm-words .words-table{ table-layout: auto; }

  /* Hücreleri biraz sıkılaştır: alan kazancı */
  #readModal .rm-words .words-table tbody td{ padding: 6px 8px; }

  /* KELİME: tek satır, truncation kapalı, daha geniş pay */
  #readModal .rm-words .words-table td.kelime{
    white-space: nowrap;        /* harf harf kırılmayı engelle */
    overflow: visible;          /* üç nokta yok */
    text-overflow: clip;
    direction: rtl; text-align: right;
    width: 52%;                 /* pastanın en büyük dilimi */
  }
  /* Kelime içindeki Arapça metin biraz kompakt olsun */
  #readModal .rm-words .words-table td.kelime,
  #readModal .rm-words .words-table td.kelime *{
    font-size: 1.1em;          /* çok uzunlarda taşmayı azaltır */
  }

  /* ANLAM: orta pay */
  #readModal .rm-words .words-table td.anlam{ width: 34%; }

  /* KÖK: dar & tek satır (sabit) */
  #readModal .rm-words .words-table td.kok{
    width: 72px;
    white-space: nowrap;
    direction: rtl; text-align: right;
  }

  /* Başlık şeridi oranlarını eşleştir (# | kelime | anlam | kök) */
  #readModal .rm-words .words-cols{
    grid-template-columns: 44px 1.9fr 1.3fr 0.8fr;
    padding: 6px 8px;
  }
}

/* [PATCH] Mobilde kartları ortala, yan bordürleri gizle (full-bleed görünüm) */
@media (max-width: 768px){
  /* Üç panelin kutuları */
  #readModal .rm-main .box,
  #readModal .rm-words .box,
  #readModal .rm-trans .box{
    /* read-body padding'i (16px) kadar dışarı taşı → ekrana ortalı, kenarlara kadar */
    margin-inline: -16px;
    padding-inline: 16px;

    /* Yan çizgileri kaldır, üst/alt kalsın */
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-width: 2px; /* üst/alt çizgiler görünür kalsın */

    /* Güvenlik: yatay taşmayı kapat */
    max-width: 100vw;
  }

  /* Kelimeler paneli başlık bloğu da aynı “full-bleed” olsun */
  #readModal .rm-words .words-head{
    margin-inline: -16px;
    padding-inline: 16px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-radius: 10px 10px 0 0; /* üst köşeler */
  }

  /* Başlıktaki kolon şeridi ( # | kelime | anlam | kök ) de hizalansın */
  #readModal .rm-words .words-cols{
    margin-inline: -16px;
    padding-inline: 16px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }
}

/* NEW: Masaüstünde liste içi başlık satırını gizle, üst şerit kalsın */
@media (min-width: 769px){
  #readModal .rm-words .words-table .words-header-row{
    display:none;
  }
}

/* NEW: Mobilde sabit kolon şeridi gizlensin — sadece liste içi satır kalsın */
@media (max-width: 768px){
  #readModal .rm-words .words-cols{
    display:none;
  }
}
/* [MOBİL] Kelimeler paneli – iç listeyi yana yaklaştır */
@media (max-width: 768px){
  /* Dış kutunun iç boşluğunu biraz azalt */
  #readModal .rm-words .box{
    padding-inline: 10px;  /* önce 16 idi, sağ/sol boşluk azalsın */
  }

  /* Başlık satırı: # | Kelime | Anlam | Kök */
  #readModal .rm-words .words-cols{
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Satır hücreleri – gereksiz yan boşlukları kıs */
  #readModal .rm-words .words-table tbody td{
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* Genel güvenlik: modal içinde yatay taşma olmasın */
#readModal,
#readModal .read-dialog,
#readModal .read-body{
  overflow-x: hidden;
}

/* READ MODAL – alt panel toggle bar (mobilde görünecek) */
.rm-panels-toggle{
  display: none;           /* masaüstü: gizli */
}

.rm-panels-toggle .rm-panels-tab{
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 4px 10px;
  font: 500 13px/1.4 Verdana, Geneva, Tahoma, sans-serif;
  background: #f3f4f6;
  cursor: pointer;
  white-space: nowrap;
}

.rm-panels-toggle .rm-panels-tab.is-active{
  background: #e5e7eb;
}

/* Mobil düzen: 768px ve altı */
@media (max-width: 768px){
  .read-body{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "main"
      "words"
      "trans";
  }

  .rm-panels-toggle{
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }

  .rm-panels-toggle .rm-panels-tab{
    flex: 1;
    text-align: center;
  }

  /* data-panel durumuna göre göster/gizle */
  .read-body[data-panel="words"] .rm-trans .box{
  display: none;
}

.read-body[data-panel="trans"] .rm-words .box{
  display: none;
}

}
.rm-words .rm-panels-toggle{
  margin-bottom: 8px;
}

/* === Kelime / Kök detay listesi – border'siz, hafif zebra === */

.rm-words .words-kelime-mode .words-back,
.rm-words .words-kelime-mode .kelime-item-head {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 4px;
  padding: 4px 10px;
  text-align: left;
  font-size: 0.9rem;
}

/* Satırlar arası boşluk */
.rm-words .words-kelime-mode .kelime-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.rm-words .words-kelime-mode .kelime-item {
  margin: 2px 0;
}

/* Zebra efekti (sadece başlık satırı) */
.rm-words .words-kelime-mode .kelime-item:nth-child(odd) .kelime-item-head {
  background: #f9fafb;
}
.rm-words .words-kelime-mode .kelime-item:nth-child(even) .kelime-item-head {
  background: #ffffff;
}

.rm-words .words-kelime-mode .kelime-item-head:hover,
.rm-words .words-kelime-mode .words-back:hover {
  background: #edf2ff;
}

/* Küçük tipografi dokunuşları */
.rm-words .words-kelime-mode .kelime-ref {
  font-weight: 600;
  margin-right: 6px;
}
.rm-words .words-kelime-mode .kelime-word {
  margin-right: 4px;
}
.rm-words .words-kelime-mode .kelime-anlam {
  color: #4b5563;
}

/* ============================
   KISA YAZI LİSTE GÖRÜNÜMÜ
   ============================ */

.kisa-yazi-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.2rem;
}

.kisa-yazi-item {
  padding: 1.2rem 1.4rem;
  transition: background-color 0.25s ease, transform 0.15s ease;
  border-radius: 8px;
}
@media (max-width:768px){
  .kisa-yazi-list{
    gap: 0.05rem;
  }

  .kisa-yazi-item{
    padding: 6px 6px 5px;   /* iç boşlukları daralttık */
  }

  .ky-title{
    margin-bottom: 1px;
  }

  .ky-meta{
    margin-bottom: 2px;
  }

  .ky-summary{
    margin-bottom: 2px;
  }
}

.kisa-yazi-item:hover {
  background-color: rgba(189, 187, 187, 0.623);
  transform: translateY(-2px);
}

.ky-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: #444242;
}

.ky-meta {
  font-size: 0.75rem;
  color: #046f7e;
  margin-bottom: 0.6rem;
}

.ky-summary {
  font-size: 0.95rem;
  line-height: 1.3;
  color: #383737;
  margin-bottom: 0.8rem;
}

.u-readmore {
  display: inline-block;
  border: 1px solid #979595;
  color: #797878;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.u-readmore:hover {
  background-color: #bbb9b9;
  color: #383737;
}

.ky-sep {
  border: none;
  
  margin-top: .35rem 0 0 ;
  margin-bottom: 0;
  opacity: 0.8;
}

/* READ MODAL – Kısa Yazılar paneli (sağ sütun) */
#readModal .kisa-panel{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#readModal .kisa-head{
  padding: 0 0 0.25rem;
}

#readModal .kisa-title{
  font: 600 14px/1.4 Verdana, Geneva, Tahoma, sans-serif;
  color: #111111;              /* Başlık: siyaha yakın, kalın */
}

/* Kart listesi */
#readModal .kisa-list{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Tek tek kartlar */
#readModal .kisa-item{
  border: 1px solid rgba(0,0,0,0.10);  /* Belirsiz gri border */
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

#readModal .kisa-item-btn{
  display: block;
  width: 100%;
  text-align: left;            /* Tamamen sola yaslı */
  padding: 0.45rem 0.60rem 0.55rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Başlık satırı */
#readModal .kisa-item-title{
  font: 600 13px/1.4 Verdana, Geneva, Tahoma, sans-serif;
  color: #111111;              /* Siyah / kalın */
  margin: 0 0 0.15rem;
}

/* Alt başlık (sûre + konu) */
#readModal .kisa-item-meta{
  font-size: 13px;
  line-height: 1.4;
  color: #2d6ae6;              /* Okunaklı gri */
  margin: 0 0 0.25rem;
}

/* Özet metin */
#readModal .kisa-item-ozet{
  font-size: 13px;
  line-height: 1.45;
  color: #374151;              /* Normal metin gri */
}

/* Hover efekti – çok hafif */
#readModal .kisa-item:hover,
#readModal .kisa-item-btn:hover{
  background: #f3f4f6;
}




/* ============================
   TAM SÛRE – liste içi liste
   (Kısa Yazı stiline uyumlu)
   ============================ */

/* Dış liste kabı: boşluğu küçült, köşe uyumu */
.tamsure-list{
  background: rgb(255, 255, 255);  /* DIŞ KABIN ARKA PLANI (sûre kartlarının etrafındaki alan) */
  border-radius: 8px;
  padding: .08rem .08rem 0;
}

/* Sûre kartı: köşe uyumu + aradaki boşluğu azalt */
.tamsure-item{
  position: relative;
  margin: .06rem 0;
  border-radius: 8px;
  background-color: #ffffff;  /* SÛRE KARTI ZEMİNİ */
  transition: background-color .18s ease, box-shadow .18s ease;
}
.tamsure-item:hover{
  background-color: #f3f3f3;   /* HAFİF GRİ HOVER */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
@media (max-width:768px){
  /* Dış kabın padding'ini kıs: içerik yana doğru genişlesin */
  .tamsure-list{
    padding: .04rem .02rem 0;
  }

  /* Kartlar arası boşluğu azalt */
  .tamsure-item{
    margin: .04rem 0;
  }

  /* Kart içi üst bölüm (başlık + özet + butonlar) */
  .tamsure-item .ts-head{
    padding: .35rem .45rem .3rem;  /* çok az iç boşluk, ama sıkı */
  }

  /* Özet paragraflar ve ayet listesi üst kenarı da biraz sıkı olsun */
  .tamsure-item .ky-summary{
    margin-bottom: .45rem;
  }

  .ts-ayet-list{
    margin-top: .5rem;
  }
  /* Tam Sûre kartında: Başlık + (ayet/kelime) aynı satıra gelsin */
  .tamsure-item .ky-title{
    display: inline-block;
    margin: 0;                /* alttaki 0.3rem boşluğu kaldır */
    font-size: 1.0rem;
  }

  .tamsure-item .ky-meta{
    display: inline-block;
    margin: 0 0 0 0.35rem;    /* başlığın hemen yanına, küçük bir sol boşluk */
    font-size: 0.78rem;
  }
}
  


/* Hover'da başlık bloğu da tona uyum sağlasın (opsiyonel) */
.tamsure-item:hover .ts-head{
  background-color: rgba(243,243,243,.85);
}

/* Başlık/özet/butonlar satırı (sticky olacak) */
.ts-actions{
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .35rem 0 .25rem;
}

/* İç ayet listesi */
.ts-ayet-list{
  margin-top: .65rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* İç liste başlığı */
.ts-ayet-list .ky-title{
  margin: .2rem 0 .2rem;
  font-size: 1.05rem;
  text-align: center;
  color: #444242;  /* İÇ LİSTE BAŞLIĞI (başlık yazısı) */
}

/* Ayet kartları */
.ts-ayet-item{
  padding: .6rem .8rem;
  border-radius: 8px;
  background: rgba(126, 125, 125, 0.192); /* AYET KARTI ARKA PLANI (tek tek ayet blokları) */
  transition: background-color .2s ease;
}
.ts-ayet-item:hover{ background-color: rgb(255, 255, 255); } /* AYET KARTI HOVER ARKA PLANI */
.ts-ayet-item .ky-meta{
  font-size: .85rem;
  color: #046f7e;  /* META BİLGİSİ (ayet sayısı/kelime sayısı – mavi ton) */
  margin-bottom: .35rem;
}
.ts-ayet-item .ky-summary{
  margin-bottom: .35rem;
  color: #383737;  /* METİN RENGİ (meal/özet satırları) */
  line-height: 1.5;
}

@media (max-width:768px){
  /* Ayet kartını sıkıştır: kenar boşlukları küçülsün */
  .ts-ayet-list .ts-ayet-item{
    padding: .35rem .1rem;
    margin: .04rem 0;
  }

  /* Türkçe meal (ky-summary) – biraz daha küçük ve sıkı */
  .ts-ayet-list .ky-summary{
    font-size: .90rem;
    line-height: 1.3;
    margin-bottom: .25rem;
  }

  /* Meta satırı da hafif küçülsün */
  .ts-ayet-list .ky-meta{
    font-size: .70rem;
    margin-bottom: .20rem;
  }

  /* Arapça – Tam Sûre içindeki satır aralığını daralt */
  .ts-ayet-list .ayet-ar,
  .ts-ayet-list [lang="ar"]{
    font-size: 1.2rem;   /* istersen 1.2rem’e de çekebiliriz */
    line-height: 0.8;
    margin: .5rem 0;
  }
}


/* Arapça tipografi (genel) */
[lang="ar"],
.ayet-ar{
  font-family: 'ShaikhHamdullahBasicVolt', serif;
  font-size: 1.60rem;      /* liste ayetleri */
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[lang="ar"]{ direction: rtl; text-align: right; }

/* İç liste kapsamı içinde garanti et */
.ts-ayet-list .ayet-ar{
  font-size: 1.60rem;
  line-height: 1.8;
  margin: .35rem 0;
}

/* Besmele (özel sınıf) */
.ts-ayet-list .ayet-ar.besmele{
  font-size: 1.90rem;
  line-height: 2.1;
  margin: .3rem 0 .6rem;
  text-align: center;
}

/* Panel kapatma garantisi */
.ts-ayet-list[hidden]{ display: none !important; }

/* Küçük buton */
.ts-ayet-item .u-readmore{
  padding: 2px 8px;
  font-size: .82rem;
}

/* Ayrım çizgisi: fazla boşluğu al */
.ky-sep{ margin: .45rem 0 0; }

/* —— Sticky başlık ayarı —— */
:root{ --ts-sticky-top: 10px; } /* arama inputunun hemen altı için */
@media (max-width:768px){ :root{ --ts-sticky-top: 5px; } }

.tamsure-item .ts-head{
  position: sticky;
  top: var(--ts-sticky-top);
  z-index: 5;
  background: rgb(255, 255, 255);  /* STICKY BAŞLIK BLOĞU ARKA PLANI (başlık + meta + butonlar) */
  backdrop-filter: blur(1px);
  padding: .25rem .25rem .2rem;
  border-radius: 8px;                 /* köşe uyumu */
  box-shadow: 0 1px 0 #e7ab04dc;      /* STICKY ALT ÇİZGİ (sarı ton gölge/ayraç) */
}
/* 1) Kısa Yazı'nın büyük padding'ini Tam Sûre kartında küçült */
.kisa-yazi-item.tamsure-item{
  padding: .55rem .70rem .50rem; /* önce 1.2rem 1.4rem geliyordu */
}

/* 2) Başlık bloğu kartın kenarlarına yapışsın; içte ikinci kutu görünmesin */
.tamsure-item .ts-head{
  margin-left: -.30rem;   /* üstte kullandığın yatay padding kadar negatif marj */
  margin-right: -.30rem;
  border-radius: 8px;     /* dış kartla aynı köşe */
  background: rgba(255, 255, 255, 0.699);  /* STICKY BAŞLIK ARKA PLANI (yarı saydam sürüm) */
}

/* 3) Dış kapsayıcıdaki boşluğu minimuma çek (kutu-kutu hissini azalt) */
.tamsure-list{
  padding: .06rem .06rem 0;
}
/* Arama ile bulunan sûre kartına kısa vurgu */
@keyframes tsHitOnce { from { box-shadow: 0 0 0 rgba(255,193,7,.0); } to { box-shadow: 0 0 0 rgba(255,193,7,.0); } }
.tamsure-item.ts-hit{
  animation: tsHitOnce .7s ease-out;
  outline: 1px solid rgba(255,193,7,.55);   /* soft sarı vurgu */
  outline-offset: 2px;
}
.ts-hit { outline: 2px solid #e7ab04; outline-offset: 2px; }
/* ========= [Index10–KY] Kısa Yazı Oku modalı ========= */
#kyReadModal[hidden] { display: none !important; }

#kyReadModal{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 9999;
}

#kyReadModal .read-modal__dialog{
  position: relative;
  background: #fff;
  width: min(960px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 16px;
}

#kyReadModal .read-modal__close{
  position: absolute; top: .5rem; right: .5rem;
  line-height: 1;
  background: #fff; border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px; padding: 4px 8px; cursor: pointer;
}

/* İçerik (API’den gelen) */
#kyReadModal .ky-read{ font-size:16px; line-height:1.6; color:#222; }
#kyReadModal .ky-read__header{ margin-bottom:12px; }
#kyReadModal .ky-read__title{ font-size:20px; font-weight:700; margin:0 0 4px; }
#kyReadModal .ky-read__meta{ font-size:12px; opacity:.8; }
#kyReadModal .ky-read__body p{ margin:10px 0; }
#kyReadModal .ky-read__section{ margin-top:16px; }
#kyReadModal .ky-read__section-title{ font-weight:700; margin-bottom:8px; }
#kyReadModal .ky-read__images{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
#kyReadModal .ky-read__thumb img{ width:100%; height:auto; display:block; }
#kyReadModal .ky-read__ayet-list{ padding-left:18px; }
/* ========= [Index10–KY] Kısa Yazı Oku modalı – iç düzen ========= */
#kyReadModal .ky-read{
  font-size:16px; line-height:1.7; color:#1f2328;
}

/* Başlık ve meta */
#kyReadModal .ky-read__header{ margin-bottom:14px; }
#kyReadModal .ky-read__title{
  font-size:22px; font-weight:800; margin:0 0 6px;
}
#kyReadModal .ky-read__meta{
  font-size:12.5px; color:#6a737d; display:flex; gap:6px; flex-wrap:wrap;
}
#kyReadModal .ky-read__topic{ font-weight:600; color:#444; }
#kyReadModal .ky-read__date{ font-variant-numeric: tabular-nums; }

/* Paragraflar */
#kyReadModal .ky-read__body p{
  margin:10px 0; text-align:justify; hyphens:auto;
}

/* Bölüm başlıkları */
#kyReadModal .ky-read__section{ margin-top:16px; }
#kyReadModal .ky-read__section-title{
  font-weight:700; font-size:13px; letter-spacing:.02em;
  color:#444; margin:0 0 10px; border-bottom:1px solid #eee; padding-bottom:6px;
}

/* Resim ızgarası (responsive) */
#kyReadModal .ky-read__images{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
#kyReadModal .ky-read__thumb{
  display:block; background:#fafafa; border:1px solid #eee; border-radius:8px;
  overflow:hidden;
}
#kyReadModal .ky-read__thumb img{
  width:100%; height:auto; display:block; transform:translateZ(0);
  transition: transform .18s ease, filter .18s ease;
}
#kyReadModal .ky-read__thumb:hover img{
  transform:scale(1.035); filter:contrast(1.02);
  cursor: zoom-in;
}

/* Âyet listesi */
#kyReadModal .ky-read__ayet-list{ padding-left:18px; margin:6px 0 0; }
#kyReadModal .ky-read__ayet-list li{ margin:2px 0; }

/* Modal kabuğu (mevcut diyaloğu daha netleştirir) */
#kyReadModal .read-modal__dialog{
  background:#fff; padding:18px; border-radius:12px;
  width:min(980px, 96vw); max-height:90vh; overflow:auto;
  box-shadow:0 12px 36px rgba(0,0,0,.22);
}
#kyReadModal .read-modal__close{
  top:10px; right:10px; border-radius:8px; padding:6px 10px;
}
/* Başlık altı meta: mavi ve altında ince sarı çizgi */
#kyReadModal .ky-read__meta{
  display:flex; gap:6px; flex-wrap:wrap;
  font-size:12.5px;
  color: var(--ky-blue, #046f7e);     /* Mavi ton: listelerde kullandığınız hex’i buraya koyabilirsiniz */
  font-weight: 600;                   /* Listedeki vurguya benzesin */
  padding-bottom: 6px;                /* Çizgiye nefes */
  border-bottom: 2px solid var(--ky-yellow, #FACC15); /* İnce sarı çizgi (klasik standardınız) */
  margin-bottom: 12px;                /* Çizgiden sonra içerikle aralık */
}

/* İsterseniz konu adını bir tık daha koyu tutabiliriz */
#kyReadModal .ky-read__topic{ color: inherit; font-weight: 700; }

/* Tarih ve kaynak aynı mavi tonda kalsın */
#kyReadModal .ky-read__date,
#kyReadModal .ky-read__source{ color: inherit; }
/* === [KY] Lightbox (modalın ÜSTÜNDE) === */
#kyReadModal .ky-lightbox{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  z-index: 10000;           /* dialog'dan yüksek */
}
#kyReadModal .ky-lightbox__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
}
#kyReadModal .ky-lightbox__img{
  position: relative; z-index: 1; display: block;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  border-radius: 10px;
  cursor: zoom-out;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .15s ease;
}
#kyReadModal .ky-lightbox__img:active{ transform: scale(.985); }
/* [KY] Metin içi ayet referansı vurgusu + hover kutusu */
#kyReadModal .ayah-ref{
  color:#046f7e;           /* mavi uyumlu */
  font-weight:700;
  border-bottom:1px dashed #046f7e;
  cursor:help;
  position:relative;
}
#kyReadModal .ayah-tip{
  position:absolute;
  left:0; top:1.6em;
  z-index: 10002;
  min-width: 260px;
  max-width: min(520px, 80vw);
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  border-radius:10px;
  padding:10px 12px;
  line-height:1.5;
}
#kyReadModal .ayah-tip__title{
  font-weight:800; font-size:14px; margin-bottom:6px; color:#046f7e;
}
#kyReadModal .ayah-tip__body{ font-size:14px; color:#222; }


.ayah-ref{
  background: rgba(145, 119, 4, 0.151);
  border-bottom: 2px dotted #046f7e;
  padding: 0 2px;
  cursor: help;
}


/* [HOTFIX] KY hover kutusu — görünürlük + Tam Sûre tipografisi uyumu */
.ayah-tip{
  /* Görünürlük kontrolünü JS yapıyor; varsayılanı açık kalsın.
     Eğer JS inline display:none veriyorsa bu kuralı zaten override eder. */
  display: block;

  /* Stacking ve kutu görünümü */
  z-index: 99999;
  max-width: min(560px, 92vw);
  background: #cfcece;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.55;

  /* Pozisyon: hem eski “inline left/top” hem de CSS değişkeni yöntemiyle uyumlu */
  position: fixed;
  left: var(--x, auto);
  top:  var(--y, auto);
}

/* Başlık: Sûre adı — Âyet no (Tam Sûre meta hissi) */
.ayah-tip__head{
  font-weight: 600;
  font-size: 14px;
  color: #575656;
  text-align: left;
  margin-bottom: 8px;
}

/* Meâl: Tam Sûre .tamsure-tr benzeri */
.ayah-tip__meal{
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 8px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}

/* Arapça (harekeli): Tam Sûre .tamsure-ar ile aynı aile */
.ayah-tip__ar{
  font-family: 'ShaikhHamdullahBasicVolt', serif; /* dosyanın başında tanımlı font */
  font-size: 20px;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
  color: #222;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}

/* Güvenlik: yanlışlıkla gizlenmişse [hidden] desteği */
.ayah-tip[hidden]{ display: none !important; }
/* KY modalındaki ayet butonunu Tam Sûre ile aynı görünüme getir */
.ts-ayet-item .btn-ayet-detail { 
  display:inline-block; border:1px solid #979595; color:#797878;
  padding:2px 8px; border-radius:10px; font-size:.82rem; text-decoration:none;
}
.ts-ayet-item .btn-ayet-detail:hover { background:#bbb9b9; color:#383737; }

/* Arama kutusu ile Kur'an sayfası bloğu arası boşluğu kıs */
.search-area{
  margin-bottom: 8px;
}

/* ========== KUR'AN SAYFASI (KPAGE) ========== */

/* Kur'an sayfası – yumuşak kaydırma */
html,
body {
  scroll-behavior: smooth;
}

/* Güvenlik için: iç scroll kutularında da smooth olsun */
.search-results,
.kpage,
.kpage-body {
  scroll-behavior: smooth;
}

/* Ana konteyner */
.kpage{
  padding: 8px 24px 28px;   /* üst boşluk biraz kısık */
}

/* Üst bar (Kur’an-ı Kerim, sayfa, sûre adı, kontroller) */
.kpage-toolbar{
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.8fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;      /* 16 → 2 */
  padding: 4px 16px;       /* 10 → 4 */
  border: 1px solid #e2d3b0;
  border-radius: 10px;
  background: #fffdf6;

  /* scroll’da üstte sabit kal */
  position: sticky;
  top: 0;
  z-index: 10;
}

.kpage-qtitle{
  font-size: 1rem;
}

.kpage-toolbar-center{
  text-align: center;
}

.kpage-sure-label{
  font-size: 1.05rem;
  font-weight: 600;
}


/* Sağ taraf: Harekeli/Hareketsiz + Cüz/Sayfa nav */
.kpage-toolbar-right{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.kpage-ar-mode{
  display: inline-flex;
  gap: 6px;
}

.kpage-nav{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* Harekeli/Hareketsiz butonu */
.kpage-chip{
  border-radius: 999px;
  border: 1px solid #d0c2a0;
  padding: 3px 10px;
  background: #fff;
  cursor: pointer;
  font-size: .85rem;
}

/* Cüz / Sayfa select + ileri/geri butonları */
.kpage-select{
  height: 30px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #d4d4d4;
  font-size: .85rem;
}
/* KUR'AN SAYFASI – ileri/geri butonları (masaüstü + mobil) */
.kpage-btn,
.kpage-btn--ghost{
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #d0c2a0;
  background: #f5e4c0;      /* ikisi de aynı sarı */
  font-size: 1.1rem;        /* ok işaretleri büyüdü */
  font-weight: 400;
  cursor: pointer;
}
.kpage-hint {
  position: absolute;
  left: 50%;
  top: 10px;                 /* Daha yukarı – arama kutusunun üstüne yakın */
  transform: translateX(-50%);
  background: #f5e4c0;       /* İleri / geri butonlarıyla aynı zemin rengi */
  color: #000000;            /* Siyah yazı */
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;       /* Tek satırda kalsın */
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .4s ease, transform .4s ease;
}

.kpage-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 769px) {
  .kpage-hint {
    display: none !important;
  }
}


.kpage-btn:hover,
.kpage-btn--ghost:hover{
  background: #f1dca9;
}

/* 2. satır: Sûre başlık bloğu (iki kutu, içerikle aynı oran) */
.kpage-surehead{
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); /* body ile aynı oran */
  gap: 18px;
  margin-bottom: 4px;
}

/* Eski kpage-head-box ile çakışmayı sıfırla */
.kpage-surehead.kpage-head-box{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Başlık kutuları – içerik kutularına benzer */
.kpage-surehead-left,
.kpage-surehead-right{
  background: #fffdf6;
  border-radius: 12px;
  padding: 4px 16px 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  border: 1px solid #eee;
  text-align: center;
}

/* Türkçe başlık / besmele */
.kpage-sure-tr,
.kpage-basmala-tr{
  margin: 0 0 4px;
}

/* Arapça başlık / besmele – kendi fontumuzla */
.kpage-sure-ar,
.kpage-basmala-ar{
  margin: 0 0 4px;
  text-align: right;
  font-size: 1.6rem;
  font-family: "ShaikhHamdullahBasicVolt", serif;
}

/* 3. satır: İki kolonlu ana içerik */
.kpage-body{
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 18px;
}

/* Ortak kutu stili (içerik kutuları) */
.kpage-box{
  background: #fff;
  border-radius: 12px;
  padding: 4px 16px 5px;   /* üst/alt hafif kısık */
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
  border: 1px solid #eee;
}

/* Sol: Türkçe ayet listesi */
.kpage-ayet-ol{
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: .95rem;
}

.kpage-ayet-ol li{
  display: flex;
  gap: 8px;
  padding: 6px 8px;
}

.kpage-ayet-ol li.is-active{
  background: #e4e1e1;
}

.kpage-ayet-ol .no{
  width: 28px;
  flex-shrink: 0;
  color: #555;
}

.kpage-ayet-ol .txt{
  flex: 1;
}

/* Sağ: Mushaf Arapça alan – kendi fontumuzla */
.kpage-mushaf-inner{
  font-size: 1.4rem;
  text-align: right;
  line-height: 2.1;
  direction: rtl;
  font-family: "ShaikhHamdullahBasicVolt", serif;
}

.kpage-aya-row{
  margin: 0;
}
.kpage-aya-row.is-active{
  background: #e4e1e1;
  border-radius: 6px;
}

.kpage-aya-no{
  display: inline-block;
  margin-left: .35em;
  font-size: .8em;              /* okunur, ayetten biraz küçük */
  color: #046f7e;
  font-weight: 600;
  font-family: "Segoe UI", Arial, sans-serif; /* sade UI font */
  direction: ltr;               /* parantez ve rakam soldan sağa */
  unicode-bidi: isolate;
}


/* Kur'an Sayfası: eski küçük başlık kutusu (gerek kalmazsa silinebilir) */
.kpage-head-box{
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid #e2d3b0;
  border-radius: 8px;
  background: #fffdf6;
}

.kpage-head-box .kpage-title{
  margin: 0 0 4px;
}

.kpage-head-box .kpage-lead{
  margin: 0;
  font-size: .9rem;
  color: #555;
}

/* Arama kutusu ile Kur'an sayfası bloğu arası boşluğu kıs */
.search-area{
  margin-bottom: 8px;
}

/* Mobil uyum: tek kolona düş */
@media (max-width: 900px){
  .kpage-toolbar{
    grid-template-columns: minmax(0,1fr);
    row-gap: 6px;
  }
  .kpage-toolbar-center{
    text-align: left;
  }
  .kpage-toolbar-right{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .kpage-surehead{
    grid-template-columns: minmax(0,1fr);
  }
  .kpage-body{
    grid-template-columns: minmax(0,1fr);
  }
}

/* === [MOBILE PATCH] Tam Sûre içi âyet kartlarını yanlara aç === */
@media (max-width: 768px){
  /* Âyet listesini dışarı doğru biraz taşı (gri alan kenarlara yaklaşsın) */
  .tamsure-item .ts-ayet-list{
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  /* Her bir âyet kartı: yan boşlukları küçült, tam otursun */
  .tamsure-item .ts-ayet-item{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 6px !important; /* istersen 4px de yaparız */
  }
}
/**********************************************************
  [MOBILE PATCH v2] KUR'AN SAYFASI – TAM GENİŞLİK + SIKI LİSTE
**********************************************************/
@media (max-width: 768px){

  /* 1) Ana kpage iç boşluklarını minimuma çek */
  .kpage{
    padding: 3px 3px 15px !important;   /* yanlarda 4px kaldı */
  }

  /* 2) Sarı kutu + başlık kartları + içerik kutuları
        neredeyse tam genişlik: kpage padding'ini telafi et */
  .kpage-toolbar,
  .kpage-surehead-left,
  .kpage-surehead-right,
  .kpage-box{
    margin-left: -3px !important;
    margin-right: -3px !important;
    border-radius: 9px !important;
  }

  /* Sarı kutu (Kur’an-ı Kerim, 1. sayfa) – dikey boşluk da sıkı */
  .kpage-toolbar{
    padding: 3px 7px !important;
    margin-bottom: 4px !important;
  }

  /* Fâtiha / Bakara başlık kutuları arası boşluğu azalt */
  .kpage-surehead{
    gap: 5px !important;               /* 18px → 6px */
    margin-bottom: 5px !important;
  }

  .kpage-surehead-left,
  .kpage-surehead-right{
    padding: 3px 6px 5px !important;   /* yanlardan daha az, yukarı/aşağı sıkı */
  }

  /* Ana içerik kutuları (meal listesi + mushaf) arasındaki boşluk */
  .kpage-body{
    gap:7px !important;              /* 18px → 8px */
  }

  .kpage-box{
    padding: 3px 6px 7px !important;
  }

  /* 3) Âyet listesi – numara + metin arası boşluğu daralt,
        kartlar dikeyde sıkı dursun */
  .kpage-ayet-ol li{
    padding: 3px 5px !important;      /* üst-alt ve yanlar sıkı */
    gap: 3px !important;              /* numara ile metin arasındaki boşluk azaldı */
  }

  .kpage-ayet-ol .no{
    width: 18px !important;           /* numara sütunu dar → metne daha çok alan */
  }

  /* Türkçe satır aralığını hafif sıkılaştır (çok az) */
  .kpage-ayet-ol .txt{
    line-height: 1.3 !important;
  }
}
/* [index17] Kelimeler tablosu başlık satırı – fontu sabitle */
#readModal .rm-words .words-table tr.words-header td {
  padding: 3px 5px;
  background: var(--words-head-bg);
  border-top: 1px solid var(--words-head-bd);
  border-bottom: 1px solid var(--words-head-bd);

  font-family: inherit !important;  /* Tüm özel fontları ez */
  font-size: inherit !important;
  font-weight: 400;
  color: #4f5a70;
}
/* [index17] KÖK listesi – Kelime listesi ile aynı stil */
.rm-words .words-kok-mode .kok-item-head {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 4px;
  padding: 4px 10px;
  text-align: left;
  font-size: 0.9rem;
}

/* Satırlar arası boşluk */
.rm-words .words-kok-mode .kok-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.rm-words .words-kok-mode .kok-item {
  margin: 2px 0;
}

/* Zebra efekti (sadece başlık satırı) */
.rm-words .words-kok-mode .kok-item:nth-child(odd) .kok-item-head {
  background: #f9fafb;
}
.rm-words .words-kok-mode .kok-item:nth-child(even) .kok-item-head {
  background: #ffffff;
}

.rm-words .words-kok-mode .kok-item-head:hover,
.rm-words .words-kok-mode .words-back:hover {
  background: #edf2ff;
}

/* Küçük tipografi dokunuşları */
.rm-words .words-kok-mode .kok-ref {
  font-weight: 600;
  margin-right: 6px;
}
.rm-words .words-kok-mode .kok-word {
  margin-right: 4px;
}
.rm-words .words-kok-mode .kok-anlam {
  color: #4b5563;
}
/* [index17] Ayet içinde kelime / kök vurgusu */
.kelime-hit,
.kok-hit {
  background: #cfe7ff;
  padding: 0 .15em;
  border-radius: 3px;
}

/* === AYET HERO SLIDER === */

.ayet-hero {
  padding: 24px 0 8px;
}

/* YENİ: Başlık bloğunu ortala ve içeriden daralt */
.ayet-hero__head {
  max-width: 900px;      /* çok geniş olmasın */
  margin: 0 auto 16px;   /* ortala + altta boşluk */
  text-align: center;    /* başlık ve alt yazı ortalı */
}

.ayet-hero__title {
  font-size: 28px;
  font-weight: 600;
  color: #946b05;
  margin: 0 0 4px;
}

/* YENİ: Alt yazı da ortalansın */
.ayet-hero__subtitle {
  margin: 0 0 8px;
  font-size: 15px;
  color: #222324;
  text-align: center;    /* ← eklenen satır */

  /* yükseklik kontrolü + gizlenme animasyonu */
  max-height: 120px;
  overflow: hidden;
  opacity: 1;

  /* 15 sn sonra yavaşça kaybolsun */
  animation: ayetHeroSubtitleHide 0.6s ease-out 15s forwards;
}

@keyframes ayetHeroSubtitleHide {
  to {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* === SLIDER KABUĞU === */

.ayet-slider {
  position: relative;
  margin-top: 16px;
  padding: 20px 16px 28px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgb(255, 255, 255), rgb(95, 98, 109));
  box-shadow: 0 16px 40px rgba(255, 255, 255, 0.925);
  overflow: hidden;
}

.ayet-slider__viewport {
  position: relative;
  overflow: hidden;
  min-height: 220px; /* çok kısa ayetlerde bile gövde kaybolmasın */
}

/* === GENEL SLIDE KARTI === */

.ayet-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 260ms ease-out,
    transform 260ms ease-out;
  pointer-events: none;

  padding: 16px 14px 34px; /* altta çeviri için ekstra boşluk */
  border-radius: 16px;
  background: rgba(128, 128, 126, 0.75);
  backdrop-filter: blur(18px);
}

.ayet-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.ayet-slide__meta {
  margin-bottom: 10px;
}

.ayet-slide__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: rgba(15, 118, 110, 0.18);
  color: #a5f3fc;
  border: 1px solid rgba(24, 124, 111, 0.35);
}

.ayet-slide__body {
  padding-top: 8px;
}

/* Arapça metin – genel */
.ayet-slide__arabic {
  color: #222121;
  text-align: center;   /* SAĞ DEĞİL, ORTA */
  margin-bottom: 10px;
}

.ayet-slide__ceviri {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #222121;
  text-align: center;     /* ÇEVİRİLER DE ORTALANSIN */
}


.ayet-slide__divider {
  height: 1px;
  margin: 4px 0 8px;
  background: linear-gradient(to right, transparent, #fbbf24, transparent);
  opacity: .8;
}

/* === SABİT İLK SLIDE (Yusuf 12/2) ÖZEL === */

.ayet-slide--first {
  /* istersen biraz daha farklı arka plan verebilirsin */
  background: rgba(200, 200, 198, 0.9);
}

.ayet-slide__besmele {
  text-align: center;
  margin-bottom: 6px;
  font-size: 28px;         /* besmele biraz daha büyük   */
  color: #222121;          /* ayet ile aynı renk         */
}
/* İlk slayttaki çeviri: ortalı + biraz daha büyük */
.ayet-slide__ceviri--first {
  text-align: center;
  font-size: 20px;
  font-weight:500;
  color: #3f3f3f;
}

/* === NAV OKLARI === */

.ayet-slider__nav {
  position: absolute;
  /*top: 50%;*/
  top: calc(83% + 22px);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid rgba(148,163,184,0.4);
  background: radial-gradient(circle, rgba(166, 180, 214, 0.9), rgba(133, 156, 211, 0.4));
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
}

.ayet-slider__nav--prev {
  left: 8px;
}

.ayet-slider__nav--next {
  right: 8px;
}

.ayet-slider__nav:hover {
  border-color: #fbbf24;
  color: #fbbf24;
}

/* === DOTLAR === */

.ayet-slider__dots {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ayet-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background: #4b5563;
  cursor: pointer;
}

.ayet-slider__dot.is-active {
  width: 18px;
  background: #fbbf24;
}

/* === MOBİL === */

@media (max-width: 768px) {

  /* Başlık bloğu: mobilde de ortalı ve biraz içe çekilmiş olsun */
  .ayet-hero__head {
    max-width: 90%;          /* kenarlardan nefes */
    margin: 0 auto 12px;     /* tam ortala */
    text-align: center;      /* başlık + alt yazı ortalı */
  }

  /* ÜSTTEKİ AÇIKLAMA (ALT YAZI) */
  .ayet-hero__subtitle {
    font-size: 13px;      
    line-height: 1.4;
    max-height: 220px;    
    text-align: center;      /* mobilde de ortalı */
    margin-left: auto;
    margin-right: auto;
  }

  /* Kartın yüksekliğini mobile için büyüt – çeviri kesilmesin */
  .ayet-slider__viewport {
    min-height: 300px;
  }

  /* Tüm slaytlarda Arapça biraz küçülsün */
  .ayet-hero .ayet-slide__arabic,
  .ayet-hero .arabic-text {
    font-size: 20px;
    line-height: 1.8;
  }

  .ayet-hero .ayet-slide--first .ayet-slide__arabic,
  .ayet-hero .ayet-slide--first .ayet-slide__besmele {
    font-size: 22px;
    line-height: 1.8;
  }

  .ayet-slide__ceviri {
    font-size: 14px;
  }

  .ayet-slider {
    padding: 16px 12px 24px;
  }

  .ayet-slider__nav {
    display: inline-flex;
    width: 28px;
    height: 28px;
  }
}



/* === Arapça font override (CSS dosyasının üstündeki @font-face ile birlikte) === */

.ayet-hero .ayet-slide__arabic,
.ayet-hero .arabic-text {
  font-family: 'ShaikhHamdullahBasicVolt', serif !important;
  font-size: 26px;
  line-height: 1.4;
}
.ayet-hero .ayet-slide__arabic {
  text-align: center;
}
/* === İlk sabit kart (Yusuf 2) için ekstra büyüklük === */
.ayet-hero .ayet-slide--first .ayet-slide__arabic,
.ayet-hero .ayet-slide--first .ayet-slide__besmele {
  font-size: 32px;   /* istersen 34–36 yapabilirsin */
  line-height: 1.6;
  font-weight:500;
  color: #494949;
}
/* ===== Share dropdown (beyaz zemin) ===== */
.share-menu {
    position: absolute;
    top: 38px;
    right: 0;
    min-width: 190px;
    background: #fff;
    color: #111;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    padding: 8px;
    z-index: 999;
}

.share-menu__item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #111;
}

.share-menu__item:hover {
    background: rgba(0, 0, 0, .06);
}

/* Ayet modal: menü konumu zaten rm-main-actions içinde */
#readModal .rm-main-actions {
    position: absolute;
}

/* Kısa yazı modal: paylaş butonu kapatmanın soluna */
#kyReadModal .ky-share-btn {
    position: absolute;
    top: 10px;
    right: 54px;
    /* close butonunun solu */
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
}

#kyReadModal .ky-share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* Kısa yazı menüsü: butonun altında açılsın */
#kyReadModal .share-menu--ky {
    position: absolute;
    top: 48px;
    right: 10px;
    /* dialog sağa hizalı */
}