/* ==========================================================================
   Azərislam — frontend stil kitabxanası
   Mobil öncəlikli, WCAG AA kontrastlı, xarici asılılıqsız.
   ========================================================================== */

/* ---------- 1. Dəyişənlər ---------- */
:root {
  --green-900:#062f25; --green-800:#0a4437; --green-700:#0d5c48;
  --green-600:#12735b; --green-500:#189072; --green-100:#e3f2ed; --green-50:#f2f9f6;
  --gold-600:#8a6a1f; --gold-500:#b58b2a; --gold-300:#e0c47c; --gold-100:#f7efd9;

  --ink-900:#12181a; --ink-800:#1e2628; --ink-700:#333f42;
  --ink-600:#4d5c60; --ink-500:#6b7c80; --ink-400:#94a3a6;
  --ink-300:#c3cdcf; --ink-200:#e0e7e8; --ink-100:#f0f4f4; --ink-50:#f8fafa;

  --bg:#ffffff; --bg-soft:var(--ink-50); --bg-card:#ffffff;
  --text:var(--ink-900); --text-soft:var(--ink-600); --text-mute:var(--ink-500);
  --line:var(--ink-200); --line-soft:var(--ink-100);
  --brand:var(--green-700); --brand-ink:#ffffff; --brand-soft:var(--green-50);
  --accent:var(--gold-600);
  --danger:#a52432; --success:#1a6b46; --warning:#8a5a00;

  --radius:12px; --radius-sm:8px; --radius-lg:18px;
  --shadow-1:0 1px 2px rgba(6,47,37,.06), 0 1px 3px rgba(6,47,37,.05);
  --shadow-2:0 4px 6px -1px rgba(6,47,37,.08), 0 2px 4px -2px rgba(6,47,37,.06);
  --shadow-3:0 12px 24px -8px rgba(6,47,37,.16), 0 4px 8px -4px rgba(6,47,37,.08);

  --wrap:1220px; --gap:clamp(1rem, 2.5vw, 1.75rem);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", "Noto Sans Azerbaijani", sans-serif;
  --font-read: Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Serif", serif;
  --font-ar: "Scheherazade New", "Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif;

  --step--1:clamp(.82rem,.79rem + .13vw,.89rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.09rem);
  --step-1:clamp(1.19rem,1.12rem + .32vw,1.37rem);
  --step-2:clamp(1.41rem,1.29rem + .55vw,1.73rem);
  --step-3:clamp(1.68rem,1.48rem + .88vw,2.18rem);
  --step-4:clamp(2rem,1.68rem + 1.36vw,2.75rem);
}

:root[data-theme="dark"], html[data-theme="auto"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { color-scheme: dark; }
  html[data-theme="auto"] {
    --bg:#0b1417; --bg-soft:#0f1c20; --bg-card:#132126;
    --text:#e7eeee; --text-soft:#a9b8ba; --text-mute:#8b9c9f;
    --line:#22343a; --line-soft:#1a2a2f;
    --brand:#2aa483; --brand-ink:#04231b; --brand-soft:#0f2b24;
    --accent:#e0c47c;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 4px 8px rgba(0,0,0,.45);
    --shadow-3:0 14px 30px -10px rgba(0,0,0,.6);
  }
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b1417; --bg-soft:#0f1c20; --bg-card:#132126;
  --text:#e7eeee; --text-soft:#a9b8ba; --text-mute:#8b9c9f;
  --line:#22343a; --line-soft:#1a2a2f;
  --brand:#2aa483; --brand-ink:#04231b; --brand-soft:#0f2b24;
  --accent:#e0c47c;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 8px rgba(0,0,0,.45);
  --shadow-3:0 14px 30px -10px rgba(0,0,0,.6);
}
html[data-theme="light"] { color-scheme: light; }

/* ---------- 2. Bünövrə ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  font-family:var(--font); font-size:var(--step-0); line-height:1.65;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color:var(--brand); text-underline-offset:.18em; text-decoration-thickness:.08em; }
a:hover { color:var(--green-500); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:3px; }
h1,h2,h3,h4 { line-height:1.22; font-weight:700; letter-spacing:-.01em; text-wrap:balance; }
p,li { text-wrap:pretty; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
table { border-collapse:collapse; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--brand); color:var(--brand-ink); padding:.75rem 1.25rem; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus { left:0; }
.ico { width:1.15em; height:1.15em; fill:none; stroke:currentColor; flex:none; }
.ico--xs { width:.85em; height:.85em; }
#i-logo, .brand__mark { fill:currentColor; stroke:none; }

/* ---------- 3. Başlıq ---------- */
.site-header { position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--line); }
.topbar { background:var(--green-800); color:#dbeee7; font-size:var(--step--1); }
html[data-theme="dark"] .topbar { background:#08181a; }
.topbar__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.5rem; }
.topbar__hijri { display:inline-flex; align-items:center; gap:.45rem; opacity:.92; }
.topbar__right { display:flex; align-items:center; gap:.35rem; }
.topbar__link { display:none; align-items:center; gap:.4rem; color:inherit; text-decoration:none; padding:.3rem .6rem; border-radius:var(--radius-sm); }
.topbar__link:hover { background:rgba(255,255,255,.12); color:#fff; }
@media (min-width:600px){ .topbar__link { display:inline-flex; } }
.langswitch { display:inline-flex; border:1px solid rgba(255,255,255,.25); border-radius:99px; overflow:hidden; }
.langswitch__item { padding:.2rem .6rem; font-size:.78rem; font-weight:600; color:#cfe6de; text-decoration:none; letter-spacing:.04em; }
.langswitch__item.is-active { background:var(--gold-300); color:#3a2c05; }
.langswitch__item:not(.is-active):hover { background:rgba(255,255,255,.14); color:#fff; }
.iconbtn {
  display:inline-grid; place-items:center; width:2rem; height:2rem;
  background:transparent; border:0; border-radius:var(--radius-sm); color:inherit;
}
.iconbtn:hover { background:rgba(255,255,255,.14); }

.masthead { display:flex; align-items:center; gap:var(--gap); padding-block:.9rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text); flex:none; }
.brand__mark { width:2.6rem; height:2.6rem; color:var(--brand); }
.brand__mark--lg { width:3.2rem; height:3.2rem; }
.brand__text strong { display:block; font-size:var(--step-1); letter-spacing:-.02em; line-height:1.1; }
.brand__text small { display:none; color:var(--text-mute); font-size:.78rem; }
@media (min-width:480px){ .brand__text small { display:block; } }

.searchbox { flex:1; display:none; position:relative; max-width:34rem; }
@media (min-width:860px){ .searchbox { display:flex; } }
.searchbox input {
  width:100%; padding:.62rem 3rem .62rem 1rem; border:1.5px solid var(--line);
  border-radius:99px; background:var(--bg-soft); color:var(--text);
}
.searchbox input:focus { border-color:var(--brand); background:var(--bg); outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
.searchbox button {
  position:absolute; right:.28rem; top:50%; transform:translateY(-50%);
  width:2.2rem; height:2.2rem; display:grid; place-items:center;
  background:var(--brand); color:var(--brand-ink); border:0; border-radius:50%;
}
.navtoggle { margin-inline-start:auto; width:2.75rem; height:2.75rem; display:grid; place-items:center;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); }
@media (min-width:1000px){ .navtoggle { display:none; } }
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after {
  display:block; width:1.15rem; height:2px; background:var(--text); border-radius:2px; transition:.2s;
}
.navtoggle__bars { position:relative; }
.navtoggle__bars::before,.navtoggle__bars::after { content:""; position:absolute; left:0; }
.navtoggle__bars::before { top:-6px; } .navtoggle__bars::after { top:6px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars { background:transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__bars::before { top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars::after  { top:0; transform:rotate(-45deg); }

/* naviqasiya */
.mainnav { background:var(--brand); color:var(--brand-ink); }
html[data-theme="dark"] .mainnav { background:#0d2b25; }
.mainnav__list { list-style:none; padding:0; margin:0; display:none; }
.mainnav.is-open .mainnav__list { display:block; padding-block:.5rem; }
@media (min-width:1000px){
  .mainnav__list { display:flex; flex-wrap:wrap; align-items:stretch; }
}
.mainnav__list > li { position:relative; }
.mainnav__list > li > a {
  display:flex; align-items:center; gap:.3rem; padding:.7rem .85rem;
  color:inherit; text-decoration:none; font-weight:600; font-size:.93rem;
  text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
}
.mainnav__list > li > a:hover, .mainnav__list > li:focus-within > a { background:rgba(0,0,0,.18); color:#fff; }
.submenu {
  list-style:none; margin:0; padding:.35rem 0 .35rem 1rem;
  display:none; background:rgba(0,0,0,.12);
}
.mainnav.is-open .has-sub:focus-within > .submenu,
.mainnav.is-open .has-sub.is-open > .submenu { display:block; }
@media (min-width:1000px){
  .submenu {
    position:absolute; top:100%; left:0; min-width:15rem; padding:.4rem;
    background:var(--bg-card); color:var(--text); border:1px solid var(--line);
    border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-3); z-index:70;
  }
  .mainnav__list > li:hover > .submenu, .mainnav__list > li:focus-within > .submenu { display:block; }
  .submenu--deep { position:static; box-shadow:none; border:0; padding:.1rem 0 .1rem .85rem; background:transparent; }
  .submenu--deep a { font-size:.85rem; color:var(--text-soft); }
}
.submenu a {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.42rem .7rem; text-decoration:none; color:inherit; border-radius:var(--radius-sm); font-size:.9rem;
}
.submenu a:hover { background:var(--brand-soft); color:var(--brand); }
@media (max-width:999px){ .submenu a:hover { background:rgba(0,0,0,.2); color:#fff; } }
.badge {
  font-size:.68rem; font-weight:700; padding:.05rem .4rem; border-radius:99px;
  background:var(--line-soft); color:var(--text-mute); min-width:1.5rem; text-align:center;
}
@media (max-width:999px){ .badge { background:rgba(255,255,255,.18); color:#e6f3ef; } }

/* ---------- 4. Breadcrumb ---------- */
.breadcrumbs { background:var(--bg-soft); border-bottom:1px solid var(--line-soft); font-size:var(--step--1); }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; padding:.6rem 0; margin:0; }
.breadcrumbs li + li::before { content:"›"; margin-inline-end:.35rem; color:var(--text-mute); }
.breadcrumbs a { color:var(--text-soft); text-decoration:none; }
.breadcrumbs a:hover { color:var(--brand); text-decoration:underline; }
.breadcrumbs [aria-current] span { color:var(--text); font-weight:600; }

/* ---------- 5. Struktur ---------- */
.site-main { flex:1; padding-block:clamp(1.5rem,4vw,2.75rem); }
.layout { display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:1000px){ .layout { grid-template-columns:minmax(0,1fr) 20rem; align-items:start; } }
.sidebar { display:grid; gap:1.25rem; }
@media (min-width:1000px){ .sidebar { position:sticky; top:8.5rem; } }

.section { margin-block-end:clamp(2rem,4vw,3rem); }
.section__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-block-end:1.1rem; }
.section__title {
  font-size:var(--step-2); position:relative; padding-inline-start:.85rem;
}
.section__title::before {
  content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em;
  width:4px; border-radius:4px; background:linear-gradient(var(--brand), var(--accent));
}
.section__more { font-size:var(--step--1); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.section__more:hover { text-decoration:underline; }

/* ---------- 6. Kartlar ---------- */
.grid { display:grid; gap:clamp(1rem,2vw,1.5rem); }
.grid--3 { grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid--2 { grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

.card {
  display:flex; flex-direction:column; background:var(--bg-card);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-1); transition:box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow:var(--shadow-3); transform:translateY(-2px); border-color:var(--brand); }
.card__media { aspect-ratio:16/9; background:var(--bg-soft); overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.card:hover .card__media img { transform:scale(1.04); }
.card--text { border-top:3px solid var(--brand); }
.card--text .card__body { padding-block-start:1.15rem; }
.card--text .card__title { font-size:calc(var(--step-1) * 1.02); }
.card__body { padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__cat {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--brand); text-decoration:none; align-self:flex-start;
}
.card__cat:hover { text-decoration:underline; }
.card__title { font-size:var(--step-1); line-height:1.3; }
.card__title a { color:inherit; text-decoration:none; }
.card__title a:hover { color:var(--brand); }
.card__excerpt { color:var(--text-soft); font-size:.93rem; line-height:1.6; margin-block-start:-.1rem; }
.card__meta {
  margin-block-start:auto; padding-block-start:.6rem; display:flex; flex-wrap:wrap; gap:.85rem;
  font-size:.78rem; color:var(--text-mute); border-top:1px solid var(--line-soft);
}
.card__meta span { display:inline-flex; align-items:center; gap:.28rem; }

/* böyük "hero" kart */
.hero { display:grid; gap:1.25rem; margin-block-end:clamp(1.75rem,4vw,2.5rem); }
@media (min-width:800px){ .hero { grid-template-columns:1.5fr 1fr; } }
.hero__main { position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:22rem;
  background:var(--green-900); color:#fff; display:flex; align-items:flex-end; }
.hero__main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero__main::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,26,20,.95) 12%, rgba(4,26,20,.55) 50%, rgba(4,26,20,.15));
}
.hero__body { position:relative; z-index:1; padding:clamp(1.25rem,3vw,2rem); display:grid; gap:.6rem; }
.hero__cat {
  display:inline-flex; align-self:flex-start; padding:.22rem .7rem; border-radius:99px;
  background:var(--gold-300); color:#3a2c05; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
}
.hero__title { font-size:var(--step-3); }
.hero__title a { color:#fff; text-decoration:none; }
.hero__title a:hover { text-decoration:underline; }
.hero__excerpt { color:#cfe0da; font-size:.95rem; max-width:52ch; }
.hero__meta { display:flex; gap:1rem; font-size:.78rem; color:#a9c4bb; }
.hero__side { display:grid; gap:.85rem; align-content:start; }
.hero__item {
  display:grid; grid-template-columns:5.5rem 1fr; gap:.85rem; align-items:center;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s;
}
.hero__item:hover { border-color:var(--brand); box-shadow:var(--shadow-2); }
.hero__item img { width:5.5rem; height:4rem; object-fit:cover; border-radius:var(--radius-sm); }
.hero__item .ph {
  width:5.5rem; height:4rem; border-radius:var(--radius-sm); display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand-soft), var(--bg-soft)); color:var(--brand); opacity:.55;
}
.hero__item strong { font-size:.92rem; font-weight:600; line-height:1.35; display:block; }
.hero__item small { color:var(--text-mute); font-size:.75rem; }

/* siyahı üslubu (ən çox oxunanlar) */
.ranklist { list-style:none; padding:0; margin:0; display:grid; gap:.15rem; counter-reset:r; }
.ranklist li { counter-increment:r; }
.ranklist a {
  display:grid; grid-template-columns:2rem 1fr; gap:.65rem; align-items:start;
  padding:.6rem .35rem; border-radius:var(--radius-sm); text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line-soft);
}
.ranklist li:last-child a { border-bottom:0; }
.ranklist a::before {
  content:counter(r); font-size:1.05rem; font-weight:800; color:var(--accent);
  line-height:1.3; text-align:center;
}
.ranklist a:hover { background:var(--brand-soft); }
.ranklist span { font-size:.9rem; line-height:1.4; }
.ranklist small { display:block; color:var(--text-mute); font-size:.74rem; margin-top:.15rem; }

/* ---------- 7. Yan panel blokları ---------- */
.widget { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.widget__head {
  padding:.7rem 1rem; background:var(--bg-soft); border-bottom:1px solid var(--line);
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.widget__body { padding:.85rem 1rem 1rem; }
.widget__body > :last-child { margin-block-end:0; }

.prayer-widget .next {
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:.6rem .8rem; margin-block-end:.7rem; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--green-700), var(--green-500)); color:#fff;
}
.prayer-widget .next b { font-size:1.35rem; font-variant-numeric:tabular-nums; }
.prayer-widget .next small { opacity:.85; font-size:.75rem; }
.prayer-list { list-style:none; margin:0; padding:0; }
.prayer-list li {
  display:flex; justify-content:space-between; gap:.5rem; padding:.34rem 0;
  border-bottom:1px dashed var(--line-soft); font-size:.9rem;
}
.prayer-list li:last-child { border-bottom:0; }
.prayer-list li.is-next { color:var(--brand); font-weight:700; }
.prayer-list time { font-variant-numeric:tabular-nums; font-weight:600; }

.catlist { list-style:none; margin:0; padding:0; }
.catlist a {
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.42rem .1rem; text-decoration:none; color:inherit; font-size:.92rem;
  border-bottom:1px solid var(--line-soft);
}
.catlist li:last-child a { border-bottom:0; }
.catlist a:hover { color:var(--brand); }

/* ---------- 8. Məqalə səhifəsi ---------- */
.article { max-width:none; }
.article__header { margin-block-end:1.5rem; }
.article__cat {
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand); text-decoration:none; margin-block-end:.5rem;
}
.article__title { font-size:var(--step-4); line-height:1.15; margin-block-end:.6rem; }
.article__meta {
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.82rem; color:var(--text-mute);
  padding-block:.7rem; border-block:1px solid var(--line-soft);
}
.article__meta span { display:inline-flex; align-items:center; gap:.32rem; }
.article__cover { margin-block:1.25rem; }
/* Kiçik şəkillər ölçüsündən böyüdülmür — bulanıqlığın qarşısını alır. */
.article__cover img {
  width:auto; max-width:100%; margin-inline:auto;
  border-radius:var(--radius); background:var(--bg-soft);
}

.prose {
  font-family:var(--font-read); font-size:1.075rem; line-height:1.78; color:var(--text);
  max-width:72ch;
}
.prose > * + * { margin-block-start:1.15em; }
.prose p { hyphens:auto; }
.prose h2 {
  font-family:var(--font); font-size:var(--step-2); margin-block-start:2em; padding-block-end:.3rem;
  border-bottom:2px solid var(--line); scroll-margin-top:6rem;
}
.prose h3 { font-family:var(--font); font-size:var(--step-1); margin-block-start:1.7em; scroll-margin-top:6rem; }
.prose a { color:var(--brand); text-decoration:underline; }
.prose img {
  border-radius:var(--radius-sm); margin-block:1.4em; box-shadow:var(--shadow-2);
}
.prose img[align="left"], .prose img.left { float:none; margin-inline-end:0; }
@media (min-width:620px){
  .prose img[align="left"] { float:left; margin:.3em 1.4em .9em 0; max-width:min(46%, 20rem); }
  .prose img[align="right"] { float:right; margin:.3em 0 .9em 1.4em; max-width:min(46%, 20rem); }
}
.prose blockquote {
  margin-inline:0; padding:.9em 1.25em; border-inline-start:4px solid var(--accent);
  background:var(--bg-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic; color:var(--text-soft);
}
/* Sual-Cavab bölməsi: oxucunun sualı */
.prose blockquote.faq-q {
  font-style:normal; color:var(--text); background:var(--bg-soft);
  border-inline-start-color:var(--brand);
}
.prose blockquote.faq-q strong { letter-spacing:.02em; text-transform:uppercase; font-size:.82em; }
.prose ul, .prose ol { padding-inline-start:1.4em; }
.prose li + li { margin-block-start:.4em; }
.prose table { width:100%; font-size:.94rem; font-family:var(--font); }
.prose th, .prose td { border:1px solid var(--line); padding:.5rem .7rem; text-align:start; }
.prose th { background:var(--bg-soft); font-weight:700; }
.prose hr { border:0; border-top:1px solid var(--line); margin-block:2em; }
.prose b, .prose strong { font-weight:700; color:var(--text); }
.prose .ayah, .prose .arabic {
  font-family:var(--font-ar); font-size:1.5rem; line-height:2.1; direction:rtl; text-align:right;
}

.toc {
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.15rem; margin-block-end:1.75rem; font-family:var(--font); font-size:.92rem;
}
.toc summary { font-weight:700; cursor:pointer; color:var(--brand); }
.toc ol { list-style:none; padding:0; margin:.7rem 0 0; display:grid; gap:.32rem; counter-reset:t; }
.toc li { counter-increment:t; }
.toc li.lvl-3 { padding-inline-start:1.1rem; font-size:.88rem; }
.toc a { color:var(--text-soft); text-decoration:none; }
.toc a:hover { color:var(--brand); text-decoration:underline; }

.share { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-block:2rem 1.5rem;
  padding-block:1rem; border-block:1px solid var(--line-soft); }
.share__label { font-size:.82rem; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.05em; }
.share a, .share button {
  display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; font-size:.85rem; font-weight:600;
  border:1px solid var(--line); border-radius:99px; background:var(--bg-card); color:var(--text-soft); text-decoration:none;
}
.share a:hover, .share button:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }

.pager-nav { display:grid; gap:.75rem; margin-block:2rem; }
@media (min-width:640px){ .pager-nav { grid-template-columns:1fr 1fr; } }
.pager-nav a {
  display:grid; gap:.15rem; padding:.85rem 1.1rem; border:1px solid var(--line);
  border-radius:var(--radius); text-decoration:none; color:inherit; background:var(--bg-card);
}
.pager-nav a:hover { border-color:var(--brand); background:var(--brand-soft); }
.pager-nav small { font-size:.74rem; color:var(--text-mute); text-transform:uppercase; letter-spacing:.05em; }
.pager-nav strong { font-weight:600; font-size:.94rem; line-height:1.35; }
.pager-nav .is-next { text-align:end; }

/* şərhlər */
.comments { margin-block-start:2.5rem; }
.comment { padding:1rem 0; border-bottom:1px solid var(--line-soft); }
.comment__head { display:flex; align-items:baseline; gap:.6rem; margin-block-end:.35rem; }
.comment__name { font-weight:700; font-size:.94rem; }
.comment__date { font-size:.76rem; color:var(--text-mute); }
.comment__body { color:var(--text-soft); font-size:.95rem; white-space:pre-line; }

/* ---------- 9. Formlar ---------- */
.form { display:grid; gap:1rem; max-width:36rem; }
.field { display:grid; gap:.35rem; }
.field label { font-size:.85rem; font-weight:600; }
.field label .req { color:var(--danger); }
.field input, .field select, .field textarea {
  width:100%; padding:.6rem .8rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text);
}
.field textarea { min-height:9rem; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.field small { font-size:.78rem; color:var(--text-mute); }
.hp { position:absolute; left:-9999px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.62rem 1.4rem; border:1.5px solid transparent; border-radius:var(--radius-sm);
  font-weight:600; text-decoration:none; background:var(--brand); color:var(--brand-ink);
  transition:filter .15s, transform .05s;
}
.btn:hover { filter:brightness(1.08); color:var(--brand-ink); }
.btn:active { transform:translateY(1px); }
.btn--ghost { background:transparent; border-color:var(--line); color:var(--text); }
.btn--ghost:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.btn--sm { padding:.4rem .9rem; font-size:.85rem; }
.btn--block { width:100%; }

.alert {
  padding:.8rem 1.1rem; border-radius:var(--radius-sm); margin-block:1rem;
  border-inline-start:4px solid; font-size:.93rem;
}
.alert--success { background:var(--green-50); border-color:var(--brand); color:var(--green-800); }
.alert--error   { background:#fdeced; border-color:var(--danger); color:#7a1a25; }
.alert--info    { background:var(--gold-100); border-color:var(--gold-500); color:#5a4410; }
html[data-theme="dark"] .alert--success { background:#0f2b24; color:#a9e2cd; }
html[data-theme="dark"] .alert--error { background:#2b1418; color:#f0b4bb; }
html[data-theme="dark"] .alert--info { background:#2a2415; color:#e6d5a4; }

/* ---------- 10. Səhifələmə ---------- */
.pagination { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin-block-start:2.25rem; list-style:none; padding:0; }
.pagination a, .pagination span {
  display:grid; place-items:center; min-width:2.5rem; height:2.5rem; padding-inline:.7rem;
  border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none;
  color:var(--text-soft); font-size:.9rem; font-weight:600; background:var(--bg-card);
}
.pagination a:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.pagination .is-current { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.pagination .is-gap { border:0; background:transparent; }

/* ---------- 11. Quran ---------- */
.surah-grid { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill, minmax(min(100%,15rem),1fr)); }
.surah-card {
  display:grid; grid-template-columns:2.75rem 1fr; gap:.75rem; align-items:center;
  padding:.7rem .85rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-card); text-decoration:none; color:inherit; transition:.15s;
}
.surah-card:hover { border-color:var(--brand); background:var(--brand-soft); transform:translateY(-1px); }
.surah-card__no {
  display:grid; place-items:center; width:2.75rem; height:2.75rem; font-weight:800; font-size:.9rem;
  color:var(--brand); background:var(--brand-soft); border-radius:50%;
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.surah-card__name { font-weight:700; font-size:.98rem; line-height:1.25; }
.surah-card__meta { font-size:.76rem; color:var(--text-mute); }
.surah-card__ar { font-family:var(--font-ar); font-size:1.2rem; color:var(--accent); }

.bismillah {
  font-family:var(--font-ar); font-size:2rem; text-align:center; color:var(--brand);
  padding-block:1.25rem; border-block:1px solid var(--line); margin-block-end:1.5rem;
}
.ayah-row { padding:1.1rem 0; border-bottom:1px solid var(--line-soft); display:grid; gap:.6rem; }
.ayah-row__ar { font-family:var(--font-ar); font-size:1.75rem; line-height:2.2; direction:rtl; text-align:right; }
.ayah-row__tr { color:var(--text-soft); font-size:1rem; line-height:1.7; }
.ayah-row__no {
  display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; font-size:.76rem; font-weight:700;
  color:var(--brand); border:1.5px solid var(--brand); border-radius:50%;
}

/* ---------- 12. Namaz səhifəsi ---------- */
.prayer-hero {
  background:linear-gradient(135deg, var(--green-800), var(--green-600)); color:#fff;
  border-radius:var(--radius-lg); padding:clamp(1.25rem,3vw,2rem); margin-block-end:1.75rem;
}
.prayer-hero h1 { font-size:var(--step-3); margin-block-end:.25rem; }
.prayer-hero .sub { color:#bfdcd2; font-size:.9rem; }
.prayer-times { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); margin-block-start:1.25rem; }
.prayer-time {
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); padding:.75rem .5rem; text-align:center;
}
.prayer-time.is-next { background:var(--gold-300); color:#3a2c05; border-color:transparent; }
.prayer-time small { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }
.prayer-time b { display:block; font-size:1.4rem; font-variant-numeric:tabular-nums; margin-block-start:.15rem; }

.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.data-table { width:100%; font-size:.9rem; min-width:38rem; }
.data-table th, .data-table td { padding:.55rem .7rem; text-align:start; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.data-table thead th { background:var(--bg-soft); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft); position:sticky; top:0; }
.data-table tbody tr:hover { background:var(--bg-soft); }
.data-table tr.is-today { background:var(--brand-soft); font-weight:700; }
.data-table td.num { font-variant-numeric:tabular-nums; }

/* ---------- 13. Boş hallar, altlıq, digər ---------- */
.empty { text-align:center; padding:clamp(2rem,6vw,4rem) 1rem; color:var(--text-soft); }
.empty h2 { font-size:var(--step-2); margin-block-end:.5rem; color:var(--text); }
.empty__code { font-size:clamp(4rem,14vw,7rem); font-weight:800; line-height:1; color:var(--brand-soft); }
html[data-theme="dark"] .empty__code { color:#16342c; }

.site-footer { background:var(--green-900); color:#b9d3cb; margin-block-start:auto; }
html[data-theme="dark"] .site-footer { background:#071214; }
.footer__grid { display:grid; gap:2rem; padding-block:clamp(2rem,5vw,3rem); }
@media (min-width:700px){ .footer__grid { grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer__col--brand .brand__mark { color:var(--gold-300); }
.footer__name { font-weight:700; font-size:1.15rem; color:#fff; margin-block-start:.6rem; }
.footer__tag { font-size:.88rem; }
.footer__since { font-size:.78rem; opacity:.6; margin-block-start:.6rem; }
.footer__title { font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--gold-300); margin-block-end:.85rem; }
.footer__links { list-style:none; padding:0; margin:0; display:grid; gap:.42rem; }
.footer__links a { color:#b9d3cb; text-decoration:none; font-size:.9rem; }
.footer__links a:hover { color:#fff; text-decoration:underline; }
.footer__social { list-style:none; padding:0; margin:0; display:flex; gap:.5rem; }
.footer__social a {
  display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%;
  background:rgba(255,255,255,.08); color:#cfe6de;
}
.footer__social a:hover { background:var(--gold-300); color:#3a2c05; }
.footer__mail { margin-block-start:.9rem; font-size:.85rem; }
.footer__mail a { color:var(--gold-300); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; }
.footer__bottom .wrap { padding-block:1rem; }

.totop {
  position:fixed; inset-block-end:1.25rem; inset-inline-end:1.25rem; z-index:50;
  width:2.9rem; height:2.9rem; display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow-3);
  opacity:0; visibility:hidden; transform:translateY(.5rem); transition:.2s;
}
.totop.is-visible { opacity:1; visibility:visible; transform:none; }

/* ---------- 14. Çap ---------- */
@media print {
  .site-header, .site-footer, .sidebar, .share, .comments, .totop,
  .breadcrumbs, .pagination, .pager-nav, .toc { display:none !important; }
  body { background:#fff; color:#000; font-size:11pt; }
  .layout { display:block; }
  .prose { max-width:none; font-size:11pt; }
  .prose a::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .article__title { font-size:20pt; }
}

/* ------------------------------------------------------- Kitabxana / Audio */
.crumbs { font-size:.9rem; color:var(--text-soft); margin-block-end:1.25rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.crumbs a { color:var(--text-soft); }
.crumbs a:hover { color:var(--brand); }

.book-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr)); }
.book-card { display:flex; gap:1rem; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem; transition:border-color .15s, box-shadow .15s; }
.book-card:hover { border-color:var(--brand); box-shadow:var(--shadow-2); }
.book-card__cover { flex:0 0 auto; width:5.6rem; display:grid; place-items:center;
  background:var(--bg); border-radius:var(--radius-sm); overflow:hidden; }
.book-card__cover img { width:100%; height:auto; display:block; }
.book-card__ph { font-size:2rem; opacity:.5; }
.book-card__title { font-size:1.02rem; line-height:1.35; margin:0 0 .3rem; }
.book-card__author { font-size:.88rem; color:var(--brand); margin:0 0 .45rem; }
.book-card__desc { font-size:.88rem; color:var(--text-soft); margin:0; }
.book-card__meta { font-size:.78rem; color:var(--text-soft); margin:.5rem 0 0;
  text-transform:uppercase; letter-spacing:.04em; }

.book-detail { display:flex; gap:1.75rem; flex-wrap:wrap; align-items:flex-start; }
.book-detail__cover { flex:0 0 auto; width:min(11rem,40%); height:auto; border-radius:var(--radius-sm);
  border:1px solid var(--line); }
.book-detail__main { flex:1 1 18rem; min-width:0; }

.lecture-group { margin-block-end:2.25rem; }
.lecture-list { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.lecture-list li { display:flex; gap:.75rem; align-items:baseline; justify-content:space-between;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.6rem .85rem; }
.lecture-list li:hover { border-color:var(--brand); }
.lecture-list__dur { font-size:.8rem; color:var(--text-soft); white-space:nowrap; }

.link-list { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.link-list li { padding-inline-start:1rem; position:relative; }
.link-list li::before { content:"›"; position:absolute; inset-inline-start:0; color:var(--brand); }