@charset "UTF-8";
/* =========================================================================
   RIYAZ — VISUAL DESIGN V2 (sunum katmani)
 */

/* ------------------------------------------------------------------ font
   SIL OFL 1.1. Self-host; calisma aninda ucuncu taraf istegi YOK.
 */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/sourceserif4-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/sourcesans3-var.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Naskh Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/notonaskharabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

/* ---------------------------------------------------------------- token
   theme.json -> kisa kopru adlari. Hex TEKRARI YOK. */
:root {
  color-scheme: light;

  --ryz-bg:           var(--wp--preset--color--bg);
  --ryz-surface:      var(--wp--preset--color--surface);
  --ryz-surface-2:    var(--wp--preset--color--surface-2);
  --ryz-elevated:     var(--wp--preset--color--elevated);
  --ryz-ink:          var(--wp--preset--color--ink);
  --ryz-ink-2:        var(--wp--preset--color--ink-2);
  --ryz-muted:        var(--wp--preset--color--muted);
  --ryz-line:         var(--wp--preset--color--line);
  --ryz-line-strong:  var(--wp--preset--color--line-strong);
  /* Form/dugme siniri: WCAG 1.4.11 (>=3:1). Dekoratif cizgiden ayridir. */
  --ryz-kontrol-sinir: #8a8368;
  --ryz-accent:       var(--wp--preset--color--accent);
  --ryz-accent-hover: var(--wp--preset--color--accent-hover);
  --ryz-accent-wash:  var(--wp--preset--color--accent-wash);
  --ryz-on-accent:    #ffffff;
  /* LEVHA — derin editoryal zemin (hero, one cikan bolum). Derinlik
     golgeyle degil YUZEY HIYERARSISI ile kurulur. */
  --ryz-accent-deep:  var(--wp--preset--color--accent-deep);
  --ryz-gold:         var(--wp--preset--color--gold);
  --ryz-gold-soft:    var(--wp--preset--color--gold-soft);
  --ryz-plate:        var(--wp--preset--color--plate);
  --ryz-plate-2:      var(--wp--preset--color--plate-2);
  --ryz-plate-ink:    var(--wp--preset--color--plate-ink);
  --ryz-plate-ink-2:  var(--wp--preset--color--plate-ink-2);
  --ryz-plate-accent: var(--wp--preset--color--plate-accent);
  --ryz-plate-line:   var(--wp--preset--color--plate-line);

  --f-read: var(--wp--preset--font-family--read);
  --f-ui:   var(--wp--preset--font-family--ui);
  --f-ar:   var(--wp--preset--font-family--arabic);

  --t-2xs:  var(--wp--preset--font-size--2-xs, 0.75rem);
  --t-xs:   var(--wp--preset--font-size--xs);
  --t-sm:   var(--wp--preset--font-size--sm);
  --t-base: var(--wp--preset--font-size--base);
  --t-lg:   var(--wp--preset--font-size--lg);
  --t-xl:   var(--wp--preset--font-size--xl);
  --t-2xl:  var(--wp--preset--font-size--2-xl, 2rem);
  --t-3xl:  var(--wp--preset--font-size--3-xl, 2.75rem);

  --lh-tight: 1.18; --lh-snug: 1.32; --lh-base: 1.78; --lh-ar: 1.95;

  --sp-1: var(--wp--preset--spacing--1);
  --sp-2: var(--wp--preset--spacing--2);
  --sp-3: var(--wp--preset--spacing--3);
  --sp-4: var(--wp--preset--spacing--4);
  --sp-5: var(--wp--preset--spacing--5);
  --sp-6: var(--wp--preset--spacing--6);
  --sp-7: var(--wp--preset--spacing--7);
  --sp-8: var(--wp--preset--spacing--8);
  --sp-9: var(--wp--preset--spacing--9);

  --shell: 77.5rem;               /* 1240px — hedef tasarim kabugu */
  --read:  44rem;                 /* 704px okuma kolonu (~66ch @18px) */
  --mid:   58rem;
  --gut:   clamp(1.15rem, 3.5vw, 2.25rem);
  --header-h: 5.75rem;            /* 92px — hedef basligin optik yuksekligi */
  --ikon: 22px;                   /* hedef ikon setinin optik boyutu */
  --r-pill: 999px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --bw: 1px; --bw-2: 2px;
  --sh-1: 0 1px 2px rgb(23 26 27 / .05);
  --sh-2: 0 2px 4px rgb(23 26 27 / .05), 0 14px 34px -22px rgb(23 26 27 / .3);

  --z-header: 100; --z-nav: 200;
  --tr-fast: 120ms ease; --tr-base: 200ms ease;

  /* Arapca segment renkleri KAYNAKTAN gelir; burada yalniz okunabilir
     karsiliklari tanimlanir. Anlam ATFEDILMEZ. */
  --ar-green: #185e2c; --ar-blue: #1a3e93; --ar-red: #96231f;
  --ar-maroon: #6f2a2c; --ar-navy: #16265f; --ar-teal: #0f6b66; --ar-purple: #522a76;
}

/* --------------------------------------------------------- koyu tema
   Uc durum: system (isaretsiz) · light · dark.
   Koyu taraf da NOTR-SOGUK murekkeptir; saf siyah ve kahverengi-sicak koyu */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ryz-bg: #0b1a19; --ryz-surface: #112322; --ryz-surface-2: #172c2a;
    --ryz-elevated: #1a3130;
    --ryz-ink: #f1ece1; --ryz-ink-2: #cbd4cf; --ryz-muted: #9aa39c;
    --ryz-line: #1e3634; --ryz-line-strong: #3c5652;
    --ryz-kontrol-sinir: #7d8c88;
    --ryz-accent: #6fc6c1; --ryz-accent-hover: #9adcd7; --ryz-accent-wash: #123330;
    --ryz-accent-deep: #46a6a6;
    --ryz-gold: #c2ab7c; --ryz-gold-soft: #a08c63;
    --ryz-on-accent: #062321;
    /* Levha koyu temada zeminden AYRILMALI; yoksa bolum sinirlari kaybolur. */
    --ryz-plate: #041413; --ryz-plate-2: #0b2423;
    --ryz-plate-ink: #f1ece1; --ryz-plate-ink-2: #b9c6c1;
    --ryz-plate-accent: #6fc6c1; --ryz-plate-line: #1c3a37;
    --sh-1: 0 1px 2px rgb(0 0 0 / .55);
    --sh-2: 0 2px 4px rgb(0 0 0 / .55), 0 14px 34px -22px rgb(0 0 0 / .9);
    --ar-green: #82cf98; --ar-blue: #a4bcff; --ar-red: #ffaba4;
    --ar-maroon: #e7b3b3; --ar-navy: #adc1ff; --ar-teal: #6fc9c1; --ar-purple: #d3b1f1;
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ryz-bg: #0b1a19; --ryz-surface: #112322; --ryz-surface-2: #172c2a;
    --ryz-elevated: #1a3130;
    --ryz-ink: #f1ece1; --ryz-ink-2: #cbd4cf; --ryz-muted: #9aa39c;
    --ryz-line: #1e3634; --ryz-line-strong: #3c5652;
    --ryz-kontrol-sinir: #7d8c88;
    --ryz-accent: #6fc6c1; --ryz-accent-hover: #9adcd7; --ryz-accent-wash: #123330;
    --ryz-accent-deep: #46a6a6;
    --ryz-gold: #c2ab7c; --ryz-gold-soft: #a08c63;
    --ryz-on-accent: #062321;
    /* Levha koyu temada zeminden AYRILMALI; yoksa bolum sinirlari kaybolur. */
    --ryz-plate: #041413; --ryz-plate-2: #0b2423;
    --ryz-plate-ink: #f1ece1; --ryz-plate-ink-2: #b9c6c1;
    --ryz-plate-accent: #6fc6c1; --ryz-plate-line: #1c3a37;
    --sh-1: 0 1px 2px rgb(0 0 0 / .55);
    --sh-2: 0 2px 4px rgb(0 0 0 / .55), 0 14px 34px -22px rgb(0 0 0 / .9);
    --ar-green: #82cf98; --ar-blue: #a4bcff; --ar-red: #ffaba4;
    --ar-maroon: #e7b3b3; --ar-navy: #adc1ff; --ar-teal: #6fc9c1; --ar-purple: #d3b1f1;
}

/* --------------------------------------------------------------- ikonlar
   Hedef tasarimin tek ikon ailesi: ince altin kontur, dolgu yok. */
.ikon { width: var(--ikon); height: var(--ikon); flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.ikon--sm { --ikon: 16px; }
.ikon--lg { --ikon: 28px; }
/* Ikon kutucugu: hedefteki yumusak bej kare. */
.ikon-kutu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border-radius: var(--r-md); background: var(--ryz-surface-2);
  color: var(--ryz-gold);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ryz-bg);
  color: var(--ryz-ink);
  font-family: var(--f-read);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------- tipografi */
h1, h2, h3, h4 {
  font-family: var(--f-read); font-weight: 580; margin: 0 0 .5em;
  text-wrap: balance; letter-spacing: -.006em; color: var(--ryz-ink);
}
h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-2xl); line-height: var(--lh-snug); }
h3 { font-size: var(--t-xl);  line-height: var(--lh-snug); }
h4 { font-size: var(--t-lg);  line-height: var(--lh-snug); }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.3em; }
strong, b { font-weight: 600; }

a { color: var(--ryz-accent); text-decoration-thickness: 1px;
  text-underline-offset: .19em; transition: color var(--tr-fast); }
a:hover { color: var(--ryz-accent-hover); }
:focus-visible { outline: var(--bw-2) solid var(--ryz-accent); outline-offset: 3px;
  border-radius: var(--r-sm); }
img { max-width: 100%; height: auto; }

/* arayuz metni — okuma serifiyle bilincli karsitlik */
.eyebrow, .meta, .label {
  font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ryz-muted); font-weight: 600;
}
.muted { color: var(--ryz-muted); }
/* Gizli metin: cocuk kutular da tasmasin diye genislik sabitlenir. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  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(--ryz-accent); color: var(--ryz-on-accent);
  padding: .7rem 1.1rem; font-family: var(--f-ui); font-weight: 600;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ yerlesim */
/* `hidden` her zaman kazanir: yerlesim kurallari (display:flex/grid) tarayici
   varsayilanini ezip gizli ogeyi gorunur birakmasin. */
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.wrap--read { max-width: var(--read); }
.wrap--mid { max-width: var(--mid); }

/* ------------------------------------------------------- ust ayet seridi
   Hedefteki ince ust serit: solda basak ikonu + alinti + referans,
   sagda tema/arama/hesap araclari. Icerik yoksa DOM'da HIC YOKTUR. */
/* Serit yuksekligi hedefteki oranla kurulur: hedef mockup'ta serit,
   basligin ~0.585'i kadardir (24/41). Bizde baslik 93px -> ~54px. */
.topayet {
  background: var(--ryz-surface-2);
  border-bottom: var(--bw) solid var(--ryz-line);
  font-family: var(--f-read);
}
.topayet__inner {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--sp-4); padding-block: .55rem; min-height: 3.375rem;
}
/* Ayet alani seridin GENIS kismidir: kalan yeri o alir, sag kontrol
   alani kompakt kalir. */
.topayet__ic { display: flex; align-items: center; gap: .6rem; min-width: 0;
  flex: 1 1 auto; color: var(--ryz-ink); text-decoration: none; }
/* Ikon metnin optik ortasina oturur; satir kutusu hizalamasi kaydirmasin. */
.topayet__ic .ikon { color: var(--ryz-gold); flex: none; --ikon: 19px;
  align-self: center; }
a.topayet__ic:hover .topayet__meal { color: var(--ryz-accent-deep); }
/* Alinti: hedefteki gibi serif + italik, govde metniyle ayni aileden ve
   serit icinde tasiyici oge. Punto t-xs'ten cikarilip okunur olcuye alindi. */
.topayet__meal { font-family: var(--f-read); font-style: italic;
  font-size: clamp(.9375rem, .875rem + .18vw, 1.0625rem); line-height: 1.35;
  color: var(--ryz-ink); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 5rem;
  /* BUYUMEZ, yalniz gerekince KISALIR. `1 1 auto` iken metin kutusu seridin
     bos alanini da kaplayip kaynak etiketini seridin ta sagina itiyordu;
     ayet ile "… Suresi, .. Ayet" arasinda genis bir bosluk kaliyordu.
     Simdi etiket metnin hemen bitiminde durur. Dar ekranda ellipsis ile
     kisalma davranisi aynen korunur (min-width + overflow degismedi). */
  flex: 0 1 auto; }
/* Tirnak yalniz GORUNUMDUR: kaynak metne dokunulmaz. */
.topayet__meal--alinti::before { content: "\201C"; }
.topayet__meal--alinti::after  { content: "\201D"; }
/* Kaynak etiketi de serif: hedefte sans degil. Ince dikey ayirac korunur. */
.topayet__ref { font-family: var(--f-read); font-size: .9375rem;
  line-height: 1.35; color: var(--ryz-muted); white-space: nowrap; flex: none;
  padding-inline-start: .85rem; margin-inline-start: .15rem;
  border-inline-start: var(--bw) solid var(--ryz-line-strong); }
.topayet__kaynak { color: var(--ryz-muted); white-space: nowrap;
  font-size: .9375rem; }
/* Sag arac grubu — hedefteki gibi seridin sagina yaslanir, ogeler ince
   dikey ayiracla ayrilir. Yeni bir kontrol tasarlanmaz: mevcut tema
   bileseni ve gercek arama baglantisi kullanilir. */
.topayet__araclar { margin-inline-start: auto; display: flex;
  align-items: center; gap: .15rem; flex: none; }
.topayet__araclar > * + * { position: relative; margin-inline-start: .55rem;
  padding-inline-start: .55rem; }
.topayet__araclar > * + *::before { content: ""; position: absolute;
  inset-block: .35rem; inset-inline-start: 0; width: var(--bw);
  background: var(--ryz-line-strong); }
.topayet__arac { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: 2.25rem; border-radius: var(--r-md);
  color: var(--ryz-muted); --ikon: 18px;
  border: var(--bw) solid transparent; transition: color var(--tr-fast); }
.topayet__arac:hover { color: var(--ryz-ink); }
.topayet__arac:focus-visible { outline: 2px solid var(--ryz-accent-deep);
  outline-offset: 2px; }
/* Serit icindeki tema dugmesi: YALNIZ IKON. Erisilebilir ad gorunmez
   etikette durur; sag kontrol alani kompakt kalir, ayet metnine yer acilir. */
.topayet .theme-switch__btn { min-width: 2.25rem; min-height: 2.25rem;
  padding-inline: 0; }
.topayet__kaynak a { color: inherit; text-decoration: none; }
.topayet__kaynak a:hover { color: var(--ryz-accent-deep); }

/* ============================================== HADIS PAYLASIM PANELI
   Hedef tasarim diliyle ayni: kagit zemin, altin ayrinti, koyu yesil vurgu.
   Panel hadis govdesinin DISINDADIR; okuma akisina girmez. */
/* Hadis metninin hemen altindaki ZARIF aksiyon satiri — dev CTA degil,
   okuma sayfasina ait araclar. */
.paylas { margin: var(--sp-5) 0 var(--sp-6); padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--ryz-line); }
.paylas__etiket { margin: 0 0 var(--sp-3); font-family: var(--f-ui);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ryz-muted); }
.paylas__dugmeler { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.paylas-eylem {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: 0 var(--sp-4); cursor: pointer;
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 500;
  color: var(--ryz-ink-2); background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line-strong); border-radius: var(--r-md);
  transition: color var(--tr-fast), border-color var(--tr-fast),
    background var(--tr-fast);
}
.paylas-eylem .ikon { color: var(--ryz-gold); }
.paylas-eylem:hover { color: var(--ryz-ink); border-color: var(--ryz-accent);
  background: var(--ryz-accent-wash); }
.paylas-eylem:hover .ikon { color: var(--ryz-accent-deep); }
.paylas-eylem:focus-visible { outline: 2px solid var(--ryz-accent-deep);
  outline-offset: 2px; }

.paylas-dg {
  width: min(38rem, calc(100vw - 2rem)); max-height: min(92vh, 56rem);
  padding: var(--sp-5); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-lg); background: var(--ryz-surface);
  color: var(--ryz-ink); overflow: auto;
}
.paylas-dg--gorsel { width: min(48rem, calc(100vw - 2rem)); }
.paylas-dg::backdrop { background: rgb(6 35 33 / .55); }
.paylas-dg__kapat-sar { display: flex; justify-content: flex-end; margin: 0 0 -.5rem; }
.paylas-dg__kapat { min-width: 2.75rem; min-height: 2.75rem; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-md);
  font-size: 1.5rem; line-height: 1; color: var(--ryz-muted); }
.paylas-dg__kapat:hover { color: var(--ryz-ink); background: var(--ryz-surface-2); }
.paylas-dg__baslik { margin: 0 0 var(--sp-3); font-size: var(--t-lg); }
.paylas-dg__not { margin: 0 0 var(--sp-4); font-family: var(--f-ui);
  font-size: var(--t-sm); line-height: 1.5; color: var(--ryz-muted); }
.paylas-onizleme { max-height: 16rem; overflow: auto; margin: 0 0 var(--sp-4);
  padding: var(--sp-4); white-space: pre-wrap; word-break: break-word;
  font-family: var(--f-read); font-size: var(--t-sm); line-height: 1.6;
  color: var(--ryz-ink-2); background: var(--ryz-surface-2);
  border-radius: var(--r-md); }
.paylas-dg__eylem { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.paylas-dg__durum { margin: var(--sp-3) 0 0; min-height: 1.4em;
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-accent-deep); }

/* Bicim secimi — yalniz renkle degil, yazi + isaretle de ayirt edilir. */
.paylas-fmt { margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.paylas-fmt legend { padding: 0 0 var(--sp-2); font-family: var(--f-ui);
  font-size: var(--t-sm); font-weight: 600; color: var(--ryz-muted); }
.paylas-fmt { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.paylas-fmt legend { grid-column: 1 / -1; }
.paylas-fmt__oge { display: flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); margin-bottom: 0;
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
  cursor: pointer; }
.paylas-fmt__oge:hover { border-color: var(--ryz-kontrol-sinir); }
.paylas-fmt__oge:has(input:checked) { border-color: var(--ryz-accent);
  background: var(--ryz-accent-wash); }
.paylas-fmt__oge:has(input:focus-visible) { outline: 2px solid var(--ryz-accent-deep);
  outline-offset: 2px; }
.paylas-fmt__gv { display: grid; gap: .1rem; min-width: 0; }
.paylas-fmt__ad { font-family: var(--f-read); font-size: var(--t-base); }
.paylas-fmt__olcu { font-family: var(--f-ui); font-size: var(--t-xs);
  color: var(--ryz-muted); font-variant-numeric: tabular-nums; }
.paylas-secenek { display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem var(--sp-3); margin: 0 0 var(--sp-4); font-family: var(--f-ui);
  font-size: var(--t-sm); }
.paylas-secenek label { display: flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; cursor: pointer; }
.paylas-secenek__not { color: var(--ryz-muted); }
/* Onizleme: modaldaki alani gercekten kullanir; kucuk kucuk thumbnail
   degil, tasarimi degerlendirilebilecek olcude. Oran korunur. */
.paylas-tuval { display: grid; place-items: center; padding: var(--sp-4);
  background: var(--ryz-surface-2); border-radius: var(--r-md); }
.paylas-tuval canvas { max-width: 100%; max-height: 60vh; height: auto;
  border-radius: var(--r-sm); box-shadow: 0 4px 18px rgb(6 35 33 / .16); }

/* Baslik satirindaki Arzusu logosu — kutu, cerceve, golge YOK; baslik
   tasariminin dogal parcasi. Oran korunur, gereksiz olceklendirme yapilmaz. */
/* Alan site navigasyonu sanilmasin diye kucuk bir "Reklam" etiketi tasir;
   etiket gorseli bogmaz ve baslik yuksekligini artirmaz (satir ici, dikey
   ortali, gorselden kucuk). */
.reklam-mini { display: none; flex: none; align-items: center; gap: .4rem;
  line-height: 0; border-radius: var(--r-sm); }
.reklam-mini__etiket {
  font-family: var(--f-ui); font-size: 9px; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ryz-muted); background: var(--ryz-surface-2);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-sm);
  padding: 0 .3rem; flex: none; white-space: nowrap;
}
.reklam-mini img { display: block; height: 2.25rem; width: auto; max-width: 100%;
  object-fit: contain; border-radius: var(--r-sm); }
/* Gorselin kendi beyaz zemini basligin kagit zeminiyle kaynassin diye
   yalniz ACIK temada carpimsal karisim; dosya ve oran DEGISMEZ. */
:root:not([data-theme="dark"]) .reklam-mini img { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reklam-mini img { mix-blend-mode: normal; }
}
:root[data-theme="light"] .reklam-mini img { mix-blend-mode: multiply; }
.reklam-mini:focus-visible { outline: 2px solid var(--ryz-accent-deep); outline-offset: 3px; }

/* --------------------------------------------------------------- reklam
   Hedefte ince cerceveli, ortalanmis, sakin bir bant. GORUNUR "Reklam" /
   "Sponsorlu" YAZISI YOKTUR (kullanici karari). Pasifse DOM'da yoktur. */
.reklam { background: var(--ryz-surface); padding-block: var(--sp-4);
  border-bottom: var(--bw) solid var(--ryz-line); }
.reklam__inner { display: flex; justify-content: center; }
/* Arzusu alani: 19.jpg dik oranlidir (700x553). Kirpma ve germe YOK;
   yukseklik sinirlanir, gorsel `contain` ile tam olarak sigar. Boylece
   oran bozulmaz ve olculer sabit oldugu icin CLS 0 kalir. */
/* Gorsel kendi beyaz zeminini tasiyor: bu beyazlik kazara degil, tasarimin
   parcasi gorunsun diye yumusak koseli bir levhaya oturur. Kirpma/germe YOK. */
.reklam__bag {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-4); line-height: 0;
  background: var(--ryz-elevated); border-radius: var(--r-md);
  border: var(--bw) solid var(--ryz-line);
  transition: border-color var(--tr-fast);
}
.reklam__bag:hover { border-color: var(--ryz-line-strong); }
.reklam img { display: block; max-width: 100%; max-height: 11rem;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-md); }
.reklam__inner { display: flex; justify-content: center; }
@media (max-width: 30em) { .reklam__bag { padding: var(--sp-2) var(--sp-3); } }

/* -------------------------------------------------------------- header
   Hedef: logo solda ve gercekten gorunur, gezinme ortada bes oge,
   sagda derin turkuaz "Hadis Ara" dugmesi. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ryz-surface);
  border-bottom: var(--bw) solid var(--ryz-line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}
/* LOGO — tek dugum; tema durumuna gore tek dosya. */
.site-logo {
  display: block; flex: 0 0 auto;
  width: 268px; height: 60px; max-width: min(58vw, 268px);
  background: url("../img/logo.png") left center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-logo { background-image: url("../img/logo-dark.png"); }
}
:root[data-theme="dark"]  .site-logo { background-image: url("../img/logo-dark.png"); }
:root[data-theme="light"] .site-logo { background-image: url("../img/logo.png"); }

.header-panel { display: flex; align-items: center; gap: var(--sp-5);
  flex: 1 1 auto; min-width: 0; }
.nav { font-family: var(--f-ui); margin-inline: auto; }
.nav ul { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
/* Menu ogesi ASLA iki satira bolunmez: "Ana Bölümler" tek satir kalir. */
.nav a { white-space: nowrap; }
.nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ryz-ink-2); text-decoration: none;
  font-size: var(--t-base); font-weight: 500; letter-spacing: .004em;
  border-bottom: var(--bw-2) solid transparent;
}
.nav a:hover { color: var(--ryz-accent-deep); }
.nav a[aria-current="page"] { color: var(--ryz-ink);
  border-bottom-color: var(--ryz-accent); }

.header-tools { display: flex; align-items: center; gap: var(--sp-3);
  flex: 0 0 auto; }
/* Hedefteki derin turkuaz arama dugmesi. */
.btn--ara { gap: .5rem; padding-inline: 1.1rem;
  background: var(--ryz-accent-deep); border-color: var(--ryz-accent-deep);
  border-radius: var(--r-md); }
.btn--ara:hover { background: var(--ryz-ink); border-color: var(--ryz-ink); }
.btn--ara .ikon { --ikon: 18px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0;
  margin-inline-start: auto;
  color: var(--ryz-ink); background: none;
  border: var(--bw) solid var(--ryz-kontrol-sinir); border-radius: var(--r-md);
  cursor: pointer;
}

/* tema kontrolu — tek sakin dugme + kucuk menu */
.theme-switch { position: relative; display: inline-flex; }
.theme-switch__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0; cursor: pointer;
  background: none; border: var(--bw) solid transparent; border-radius: var(--r-md);
  color: var(--ryz-muted); line-height: 0;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.theme-switch__btn:hover { color: var(--ryz-ink); border-color: var(--ryz-line); }
.theme-switch__btn[aria-expanded="true"] { color: var(--ryz-ink); border-color: var(--ryz-kontrol-sinir); }
.theme-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .35rem); z-index: var(--z-nav);
  display: grid; gap: 2px; min-width: 10.5rem; padding: .3rem;
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.theme-menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 2.5rem; padding: 0 .6rem; cursor: pointer; text-align: start;
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-ink-2);
  background: none; border: 0; border-radius: var(--r-sm);
}
.theme-menu button:hover { background: var(--ryz-surface-2); color: var(--ryz-ink); }
.theme-menu button[aria-checked="true"] { color: var(--ryz-accent); font-weight: 600; }
.theme-menu button[aria-checked="true"]::after {
  content: "¹3"; margin-inline-start: auto; font-size: var(--t-sm);
}

/* -------------------------------------------------------------- footer
   Hedef: derin murekkep zemin, solda logo, ortada baglantilar, sagda
   altin susleme; altta kunye satiri. */
.site-footer {
  margin-top: var(--sp-9); padding-block: var(--sp-6);
  background: var(--ryz-plate); color: var(--ryz-plate-ink-2);
  font-family: var(--f-ui); font-size: var(--t-sm);
}
.footer-ust { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-5); padding-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--ryz-plate-line); }
.site-logo--footer { width: 210px; height: 47px;
  background-image: url("../img/logo-dark.png"); }
:root[data-theme="light"] .site-logo--footer,
:root[data-theme="dark"] .site-logo--footer { background-image: url("../img/logo-dark.png"); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-inline: auto; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ryz-plate-ink-2); text-decoration: none; }
.footer-nav a:hover { color: var(--ryz-plate-accent); }
.footer-sus { color: var(--ryz-gold-soft); --ikon: 28px; }
.footer-alt { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-4);
  font-size: var(--t-xs); color: var(--ryz-plate-ink-2); }
.footer-alt p { margin: 0; }

/* ----------------------------------------------------------- bilesen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.15rem; cursor: pointer;
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ryz-on-accent); background: var(--ryz-accent);
  border: var(--bw) solid var(--ryz-accent); border-radius: var(--r-md);
  text-decoration: none; transition: background var(--tr-fast), border-color var(--tr-fast);
}
.btn:hover { background: var(--ryz-accent-hover); border-color: var(--ryz-accent-hover);
  color: var(--ryz-on-accent); }
.btn--ghost { background: none; color: var(--ryz-accent);
  border-color: var(--ryz-line-strong); }
.btn--ghost:hover { background: var(--ryz-accent-wash); color: var(--ryz-accent-hover);
  border-color: var(--ryz-accent); }

/* arama */
.searchform { display: flex; gap: var(--sp-2); align-items: stretch; }
.searchform__field { position: relative; flex: 1 1 auto; min-width: 0; height: 3.5rem; }
.searchform__field svg {
  position: absolute; inset-inline-start: .95rem; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; color: var(--ryz-muted); pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.searchform input[type="search"] {
  width: 100%; height: 100%; padding-inline: 2.75rem 1rem;
  font-family: var(--f-ui); font-size: var(--t-base); color: var(--ryz-ink);
  background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-kontrol-sinir); border-radius: var(--r-md);
  appearance: none;
}
.searchform input::placeholder { color: var(--ryz-muted); }
.searchform input:focus-visible { border-color: var(--ryz-accent); outline-offset: 1px; }
.searchform .btn { height: 3.5rem; padding-inline: 1.6rem; }
.searchform--hero .searchform__field { height: 3.5rem; }
.search-hints { font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); margin: var(--sp-3) 0 0; }
/* Alt cizgi METNE yapisik olmali. Bu baglantilar dokunma hedefi icin dikey
   dolgu aliyor (asagidaki "DOKUNMA HEDEFLERI" kurali); kutunun altina oturan
   `border-bottom` o yuzden metinden ~8px kopuk, baskin bir cizgi olarak
   goruntuleniyordu. Cizgi artik metnin kendi susleme cizgisi. */
.search-hints a { color: var(--ryz-ink-2);
  text-decoration: underline; text-decoration-thickness: var(--bw);
  text-decoration-color: var(--ryz-line-strong); text-underline-offset: .22em; }
.search-hints a:hover { color: var(--ryz-accent);
  text-decoration-color: var(--ryz-accent); }

/* bolum basligi — GERCEK hiyerarsi; kucuk gri etiket DEGIL */
.section { margin-block: var(--sp-7); }
.section__head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: var(--bw) solid var(--ryz-line);
}
.section__head h2 {
  font-family: var(--f-read); font-size: var(--t-xl); font-weight: 600;
  color: var(--ryz-ink); margin: 0; letter-spacing: -.01em; text-transform: none;
}
.section__head a {
  margin-inline-start: auto; font-family: var(--f-ui); font-size: var(--t-sm);
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
.section__head a:hover { text-decoration: underline; }
.section--plain .section__head { border-bottom: 0; padding-bottom: 0; }

/* liste (kitab / hadis / kesif) */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: var(--bw) solid var(--ryz-line); }
.list > li:last-child { border-bottom: 0; }
.list__row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--sp-4); padding: var(--sp-4) 0; text-decoration: none; color: inherit;
  transition: background var(--tr-fast);
}
/* kimlik sutunu YALNIZ gercek bir kimlik varsa acilir */
.list__row:has(.list__id) { grid-template-columns: 2.25rem 1fr auto; }
a.list__row:hover { background: var(--ryz-accent-wash); }
a.list__row:hover .list__title { color: var(--ryz-accent); }
.list__id {
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ryz-muted); font-variant-numeric: tabular-nums;
}
.list__main { display: block; min-width: 0; }
.list__title { display: block; font-family: var(--f-read); font-size: var(--t-lg);
  line-height: var(--lh-snug); color: var(--ryz-ink); }
.list__meta { display: block; margin-top: .2rem; font-family: var(--f-ui);
  font-size: var(--t-sm); color: var(--ryz-muted); }
.list__count { font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* yol izi */
.breadcrumb {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted);
  margin: var(--sp-5) 0 var(--sp-4);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .35rem .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-inline-end: .5rem; color: var(--ryz-line-strong); }
.breadcrumb a { color: var(--ryz-ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ryz-accent); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ryz-muted); }

/* sayfa basligi — dizin/bolum sayfalarinin acilisi.
   Reddedilen surumde bu sayfalar dogrudan listeyle basliyordu ve girisi
   yoktu; artik gercek bir baslik alani var. */
.page-head { margin: 0 0 var(--sp-7); padding-top: var(--sp-7);
  padding-bottom: var(--sp-5); border-bottom: var(--bw-2) solid var(--ryz-ink); }
.page-head h1 { font-size: var(--t-3xl); letter-spacing: -.014em; }
.page-head .eyebrow { display: block; margin-bottom: var(--sp-2); }
.page-head h1 { margin-bottom: var(--sp-3); }
.page-head__lead { color: var(--ryz-ink-2); max-width: 56ch; margin: 0;
  font-size: var(--t-lg); line-height: 1.6; }
.page-head .stat-row { margin-top: var(--sp-5); }

/* istatistik seridi — KPI kutusu DEGIL */
.stat-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  margin: 0; font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted);
}
.stat-row span { display: inline-flex; align-items: baseline; gap: .35rem; }
.stat-row b { font-family: var(--f-read); font-size: var(--t-lg); font-weight: 600;
  color: var(--ryz-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Arapca
   S1: ACIK ALAN. Kart icine hapsedilmez; ince cizgilerle ayrilir. */
.arabic {
  font-family: var(--f-ar);
  font-size: clamp(1.45rem, 1.25rem + .55vw, 1.7rem);
  line-height: var(--lh-ar);
  direction: rtl; text-align: right;
  color: var(--ryz-ink);
  padding-block: var(--sp-5);
  margin: var(--sp-5) 0;
  border-block: var(--bw) solid var(--ryz-line);
  overflow-wrap: break-word;
}
.arabic__seg--green { color: var(--ar-green); }
.arabic__seg--blue { color: var(--ar-blue); }
.arabic__seg--red { color: var(--ar-red); }
.arabic__seg--maroon { color: var(--ar-maroon); }
.arabic__seg--navy { color: var(--ar-navy); }
.arabic__seg--teal { color: var(--ar-teal); }
.arabic__seg--purple { color: var(--ar-purple); }
.arabic--sm { font-size: clamp(1.2rem, 1.1rem + .3vw, 1.35rem); line-height: 1.95;
  padding-block: var(--sp-4); margin-block: var(--sp-4); }
.arabic--bare { border: 0; padding-block: .2rem; margin-block: .4rem; }

/* Turkce okuma metni */
.translation { font-size: var(--t-lg); line-height: 1.8; margin: 0 0 var(--sp-6);
  color: var(--ryz-ink); }
.prose { white-space: pre-line; }
.prose-blocks > p { margin: 0 0 1em; }
.prose-blocks > p:last-child { margin-bottom: 0; }
.translation.prose-blocks > p { margin-bottom: 1.05em; }
.prose--muted { color: var(--ryz-ink-2); }
.note { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted);
  padding: var(--sp-4); background: var(--ryz-surface-2); border-radius: var(--r-md); }

/* tahric — tek ikincil yuzey (onaylı istisna) */
.tahric {
  font-family: var(--f-ui); font-size: var(--t-sm); line-height: 1.7;
  list-style: none; margin: 0; padding: var(--sp-5);
  background: var(--ryz-surface-2); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-md); color: var(--ryz-ink);
}
.tahric li { display: flex; flex-wrap: wrap; gap: .3rem .55rem; padding: .3rem 0; }
.tahric li + li { border-top: var(--bw) solid var(--ryz-line); }
.tahric__work { font-weight: 600; color: var(--ryz-ink); }
.tahric__ref { color: var(--ryz-ink-2); }
.tahric__group { color: var(--ryz-muted); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; }
.tahric li.tahric--also { color: var(--ryz-muted); }
.tahric li.tahric--also .tahric__work { font-weight: 500; color: var(--ryz-ink-2); }

/* ravi */
.ravi-line { font-family: var(--f-read); font-size: var(--t-base);
  color: var(--ryz-ink-2); margin: 0 0 var(--sp-4); }
.ravi-line a { text-decoration: none; border-bottom: var(--bw) solid var(--ryz-line-strong); }
.ravi-line a:hover { border-bottom-color: var(--ryz-accent); }
.ravi-card {
  margin: var(--sp-7) 0 0; padding: var(--sp-5) 0;
  border-top: var(--bw) solid var(--ryz-line);
}
.ravi-card__name { font-family: var(--f-read); font-size: var(--t-xl); font-weight: 600;
  margin: 0 0 var(--sp-2); }
.ravi-card__meta { font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); margin: 0; }

/* ayet */
.verse { margin: 0 0 var(--sp-6); padding-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--ryz-line); }
.verse:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.verse__tr { font-size: var(--t-base); line-height: 1.8; color: var(--ryz-ink);
  margin: 0 0 var(--sp-2); }
.verse__ref { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ryz-muted); margin: 0 0 var(--sp-3); }
.verse__note { color: var(--ryz-ink-2); font-size: var(--t-base); }

/* alinti (kesif) */

/* onceki / sonraki */
.pagenav { display: grid; gap: var(--sp-3); margin: var(--sp-7) 0 0;
  padding-top: var(--sp-5); border-top: var(--bw) solid var(--ryz-line); }
.pagenav a {
  display: flex; flex-direction: column; gap: .2rem; min-height: 3.25rem;
  justify-content: center; padding: var(--sp-3) var(--sp-4); text-decoration: none;
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.pagenav a:hover { border-color: var(--ryz-accent); background: var(--ryz-accent-wash); }
.pagenav__label { font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .09em; color: var(--ryz-muted); }
.pagenav__title { font-family: var(--f-read); font-size: var(--t-base);
  color: var(--ryz-ink); }
.pagenav__next { text-align: end; }

/* sayfalama */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-7) 0 0; font-family: var(--f-ui); font-size: var(--t-sm); }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; text-decoration: none;
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
  color: var(--ryz-ink-2);
}
.pagination a:hover { border-color: var(--ryz-accent); color: var(--ryz-accent); }
.pagination [aria-current="page"] { background: var(--ryz-accent);
  border-color: var(--ryz-accent); color: var(--ryz-on-accent); font-weight: 600; }

/* arama sonucu */
.result-list { list-style: none; margin: 0; padding: 0; }
.result-list > li { border-bottom: var(--bw) solid var(--ryz-line); }
.result-list > li:last-child { border-bottom: 0; }
.result { padding: var(--sp-5) 0; }
.result__ctx--ar { font-family: var(--f-ar); font-size: var(--t-base);
  line-height: var(--lh-ar); color: var(--ryz-ink-2); }
.kapsam-nav { margin-bottom: var(--sp-5); }
.result__type { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ryz-accent); }
.result__title { font-family: var(--f-read); font-size: var(--t-lg); margin: .2rem 0 .3rem; }
.result__title a { text-decoration: none; }
.result__ctx { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted); }
.result mark { background: var(--ryz-accent-wash); color: inherit; padding: 0 .12em; }

/* bos durum */
.empty-state { padding: var(--sp-6); border: var(--bw) dashed var(--ryz-line-strong);
  border-radius: var(--r-md); color: var(--ryz-muted); font-family: var(--f-ui);
  font-size: var(--t-sm); text-align: center; }

.views { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted);
  margin: var(--sp-5) 0 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none;
  margin: 0; padding: 0; font-family: var(--f-ui); font-size: var(--t-sm); }
.tags a { display: inline-block; padding: .3rem .7rem; text-decoration: none;
  color: var(--ryz-ink-2); border: var(--bw) solid var(--ryz-line);
  border-radius: 999px; }
.tags a:hover { border-color: var(--ryz-accent); color: var(--ryz-accent); }

.cols-2 { display: grid; gap: 0 var(--sp-7); }

/* Bolum notu — alt bab'i olmayan Ana Bolumde durumu aciklar. */
.section__not { margin: 0 0 var(--sp-4); max-width: var(--read);
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted); }
/* Kesif onizlemeli hadis satiri (yalniz dogrudan liste). */
.list--ozet .list__row { align-items: start; }
.list__ozet { display: block; margin-top: .25rem; max-width: 72ch;
  font-family: var(--f-read); font-size: var(--t-sm); line-height: 1.6;
  color: var(--ryz-ink-2); }

/* --------------------------------------------------------- sablon: ana */
/* ================================================= HERO — DERIN LEVHA
   Hedef tasarim: koyu murekkep levha, solda tipografi + arama + hap
   gezinme, sagda editoryal gorsel alani. Levha tam genisliktedir; icerik */
.hero {
  position: relative; overflow: hidden;
  display: grid; align-items: center; min-height: 36rem;
  background: var(--ryz-plate); color: var(--ryz-plate-ink);
}
/* Sag editoryal alan: gercek fotograf varligi yok; hedefin gorsel agirligini
   tipografik/dekoratif bir levha ile karsilariz. Stok/uydurma dini gorsel
   KULLANILMAZ. */
/* Sag panel: altin oran REHBER olarak — sol ~%60, sag ~%40. Mekanik
   61.8/38.2 dayatmasi degil; hedef tasarimdaki agirlik dengesi. */
.hero__sus {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: 40%;
  /* .hero__inner bir .wrap'tir: kutusu tum genisligi kaplar ve z-index:1
     tasir. Panel bunun ALTINDA kalirsa, kart kisa oldugunda "Hadisi Oku"
     dugmesinin merkezi gorunmez sol kutunun icine dusuyor ve tiklama
     kayboluyordu. Panel ustte olmali: gorunum degismez, isabet duzelir. */
  z-index: 2;
  display: none; align-items: center; justify-items: stretch;
  padding-block: var(--sp-6);
  padding-inline: var(--sp-6) var(--gut);
  background: var(--ryz-plate-2);
  border-inline-start: var(--bw) solid var(--ryz-plate-line);
}
/* Hero sag alani: RASTGELE HADIS karti. Levha geometrisi degismez.
   Kart kolonun genisligini KULLANIR; icinde ikinci bir dar kolon acmaz. */
.hero-kart { width: 100%; max-width: 36rem; padding: 0; }
.hero-kart__ust { margin: 0 0 var(--sp-3); }
.hero-kart__no { display: inline-block; padding: .25rem .7rem;
  border-radius: var(--r-md); background: rgb(255 255 255 / .07);
  border: var(--bw) solid var(--ryz-plate-line);
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600;
  color: var(--ryz-plate-ink-2); }
.hero-kart__baslik { margin: 0 0 var(--sp-4); font-size: var(--t-lg);
  font-weight: 500; color: var(--ryz-plate-accent); letter-spacing: .01em; }
/* Onizleme metni panelin ana odagidir. Satir uzunlugu ~45-60 karakter
   hedeflenir; kirpma yalnizca SUNUM katmanindadir, kaynak metin degismez.
   Uzun hadiste hero sinirsiz uzamasin diye kontrollu satir tavani. */
.hero-kart__metin { margin: 0; font-family: var(--f-read);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); line-height: 1.7;
  color: var(--ryz-plate-ink); max-width: 58ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
  overflow: hidden; }
.hero-kart__kunye { display: grid; gap: .5rem; margin: var(--sp-5) 0 0;
  max-width: 52ch;
  font-family: var(--f-ui); font-size: var(--t-sm); line-height: 1.45;
  color: var(--ryz-plate-ink-2); }
.hero-kart__kunye > span { display: flex; align-items: flex-start; gap: .5rem; }
/* Uzun bâb basligi metadata'yi 3-5 satira bolmesin: yalniz GORUNUM
   sinirlanir, baslik metni degistirilmez (tam hali hadis sayfasinda). */
.hero-kart__kv { max-height: 2.9em; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-kart__kunye .ikon { color: var(--ryz-gold-soft); margin-top: .1rem; }
.hero-kart__cta { margin: var(--sp-5) 0 0; }
.hero-kart__cta .btn { background: var(--ryz-plate-accent);
  border-color: var(--ryz-plate-accent); color: #062321; gap: .45rem; }
.hero-kart__cta .btn:hover { background: #9adcd7; border-color: #9adcd7; }

/* Kabuk tum genisligi kaplar ama BOS alani tiklama yakalamamalidir:
   yalniz gercek icerik ogeleri etkilesim alir. */
.hero__inner { position: relative; z-index: 1;
  padding-block: var(--sp-7) var(--sp-6); pointer-events: none; }
.hero__inner > *, .hero__inner a, .hero__inner input, .hero__inner button {
  pointer-events: auto; }
.hero__eyebrow {
  margin: 0 0 var(--sp-3); font-family: var(--f-ui); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ryz-plate-accent);
}
.hero__title {
  margin: 0 0 var(--sp-4); max-width: 16ch; color: var(--ryz-plate-ink);
  font-size: clamp(2.3rem, 1.3rem + 3.2vw, 3.75rem);
  line-height: 1.05; letter-spacing: -.02em; font-weight: 500;
  text-wrap: nowrap;
}
.hero__lead {
  margin: 0 0 var(--sp-5); max-width: 40ch;
  font-size: var(--t-base); line-height: 1.62; color: var(--ryz-plate-ink-2);
}
.hero .searchform { max-width: 38rem; gap: 0; }
/* Hedefte input ve dugme TEK parca: birlesik yuvarlak kutu. */
.hero .searchform input[type="search"] {
  border-color: transparent; border-start-end-radius: 0; border-end-end-radius: 0;
}
.hero .searchform .btn {
  border-start-start-radius: 0; border-end-start-radius: 0;
  background: var(--ryz-accent-deep); border-color: var(--ryz-accent-deep);
}
.hero .searchform .btn:hover { background: var(--ryz-accent); border-color: var(--ryz-accent); }
.hero .searchform input:focus-visible { border-color: var(--ryz-plate-accent); }
.hero .searchform__field svg { color: var(--ryz-muted); }
.hero .search-hints { color: var(--ryz-plate-ink-2); }
.hero .search-hints a { color: var(--ryz-plate-ink);
  text-decoration-color: var(--ryz-plate-line); }
.hero .search-hints a:hover { color: var(--ryz-plate-accent);
  text-decoration-color: var(--ryz-plate-accent); }

/* Hap gezinme — hedefteki ince cerceveli yuvarlak etiketler. */
.quicknav { display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-5) 0 0; max-width: 46rem;
  font-family: var(--f-ui); font-size: var(--t-sm); }
.quicknav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 1.05rem; border-radius: var(--r-pill);
  border: var(--bw) solid var(--ryz-plate-line);
  color: var(--ryz-plate-ink); text-decoration: none;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.quicknav a:hover { border-color: var(--ryz-plate-accent);
  background: rgb(111 198 193 / .12); color: var(--ryz-plate-accent); }

/* ============================================ KUNYE / ISTATISTIK SERIDI
   Hedef: acik bant, her oge = bej ikon kutucugu + buyuk sayi + etiket.
   Dashboard KPI kutusu DEGIL. */
.kunye {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4) var(--sp-7); margin: 0; padding-block: var(--sp-7);
}
/* Her kunye ogesi BASTAN SONA tiklanabilir; hedef alani ikon+sayi+etiketi
   birlikte kapsar. Ic ice etkilesimli oge YOKTUR. */
.kunye__oge { display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); margin-inline: calc(var(--sp-3) * -1);
  min-height: 2.75rem; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  border: var(--bw) solid transparent;
  transition: background var(--tr-fast), border-color var(--tr-fast); }
.kunye__oge:hover { background: var(--ryz-surface-2);
  border-color: var(--ryz-line); }
.kunye__oge:hover .ikon-kutu { background: var(--ryz-accent-wash);
  color: var(--ryz-accent-deep); }
.kunye__oge:hover .kunye__sayi { color: var(--ryz-accent-deep); }
.kunye__sayi { display: block; font-family: var(--f-read); font-size: var(--t-xl);
  line-height: 1.1; font-weight: 500; color: var(--ryz-ink);
  font-variant-numeric: tabular-nums; }
.kunye__gv { display: flex; flex-direction: column; }
.kunye__et { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ryz-muted); }
.kunye-band { background: var(--ryz-surface);
  border-bottom: var(--bw) solid var(--ryz-line); }

/* ================================= ANA BOLUMLER — kompakt kart izgarasi
   Hedef: 4 kolon, ince cerceveli kompakt kart. Kart icinde solda numara ve
   altin ikon, ortada baslik + olcut, sagda chevron. Muhasebe listesi DEGIL, */
.bolum-grid { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.bolum-grid a {
  display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: start;
  gap: var(--sp-3); height: 100%; padding: var(--sp-4);
  text-decoration: none; color: inherit;
  background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.bolum-grid a:hover { border-color: var(--ryz-accent); background: var(--ryz-elevated); }
.bolum-grid a:hover .bolum-grid__title { color: var(--ryz-accent-deep); }
.bolum-grid__sol { display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); }
.bolum-grid__no { font-family: var(--f-read); font-size: var(--t-lg); line-height: 1;
  color: var(--ryz-gold); font-variant-numeric: tabular-nums; }
.bolum-grid__sol .ikon { color: var(--ryz-gold-soft); }
.bolum-grid__gv { display: block; min-width: 0; }
.bolum-grid__title { display: block; font-family: var(--f-read);
  font-size: var(--t-base); line-height: var(--lh-snug); color: var(--ryz-ink); }
.bolum-grid__meta { display: block; margin-top: .3rem; font-family: var(--f-ui);
  font-size: var(--t-sm); color: var(--ryz-muted); }
.bolum-grid__ok { color: var(--ryz-line-strong); align-self: center; }
.bolum-grid a:hover .bolum-grid__ok { color: var(--ryz-accent); }

/* ==================================== BIR HADIS OKU — editoryal panel
   Hedef: tek cerceveli panel; solda gorsel, ortada metin, sagda kisa
   bilgi karti. */
.oku { padding-block: var(--sp-7); }
.oku__panel { background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-lg);
  padding: var(--sp-5); }
.oku__inner { display: grid; gap: var(--sp-5); align-items: center; }
.oku__gorsel { margin: 0; }
.oku__gorsel--bos { display: grid; place-items: center; min-height: 13rem;
  background: var(--ryz-surface-2); border-radius: var(--r-md);
  color: var(--ryz-gold-soft); }
.oku__gorsel--bos .ikon { --ikon: 40px; }
.oku__gorsel img { display: block; width: 100%; height: auto;
  /* Logo/kimlik gorseli: agresif kirpma YOK, germe YOK. */
  object-fit: contain; border-radius: var(--r-md);
  background: var(--ryz-surface-2); }
.oku__gv { min-width: 0; }
.oku__gv h2 { margin: 0 0 var(--sp-3); font-size: var(--t-2xl); }
.oku__gv .hero__eyebrow { color: var(--ryz-accent-deep); }
.oku__metin { font-size: var(--t-base); line-height: 1.72; color: var(--ryz-ink-2);
  max-width: 52ch; }
.oku__metin p:first-child { color: var(--ryz-muted); font-size: var(--t-sm); }
.oku__kunye { display: flex; flex-wrap: wrap; gap: .4rem var(--sp-4);
  margin: var(--sp-4) 0 0; font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); }
.oku__kunye span, .oku__kunye a { display: inline-flex; align-items: center; gap: .4rem; }
.oku__kunye .ikon { --ikon: 15px; color: var(--ryz-gold); }
.oku__kunye a { color: var(--ryz-ink-2); text-decoration: none; }
.oku__kunye a:hover { color: var(--ryz-accent-deep); }
.oku__cta { margin: var(--sp-5) 0 0; }
.oku__cta .btn { background: var(--ryz-accent-deep); border-color: var(--ryz-accent-deep);
  gap: .5rem; }
.oku__cta .btn:hover { background: var(--ryz-ink); border-color: var(--ryz-ink); }
/* Sag yan kart — hedefteki dar bilgi kutusu. Kartin tamami tek bir
   baglantidir: ic ice tiklanabilir oge YOKTUR. Gorunum hedef tasarimla
   ayni kalir; yalniz etkilesim durumlari eklenir. */
.oku__yan { display: none; background: var(--ryz-surface-2);
  border-radius: var(--r-md); }
.oku__yan-ic { font-family: var(--f-read); font-size: var(--t-base);
  line-height: 1.5; color: var(--ryz-ink-2); }
.oku__yan > p.oku__yan-ic, .oku__yan > .ikon { margin-inline: var(--sp-4); }
.oku__yan:not(:has(.oku__yan-bag)) { padding: var(--sp-4); }
.oku__yan:not(:has(.oku__yan-bag)) > p.oku__yan-ic,
.oku__yan:not(:has(.oku__yan-bag)) > .ikon { margin-inline: 0; }
.oku__yan-bag { display: block; padding: var(--sp-4); border-radius: var(--r-md);
  text-decoration: none; border: var(--bw) solid transparent;
  transition: background var(--tr-fast), border-color var(--tr-fast); }
.oku__yan-bag:hover { background: var(--ryz-accent-wash);
  border-color: var(--ryz-line-strong); }
.oku__yan-bag:hover .oku__yan-ic { color: var(--ryz-ink); }
.oku__yan-bag:focus-visible { outline: 2px solid var(--ryz-accent-deep);
  outline-offset: 2px; }
.oku__yan-bag .oku__yan-ic { display: block; }
.oku__yan-ok { display: flex; margin-top: var(--sp-3);
  color: var(--ryz-accent-deep); }
.oku__yan-bag:hover .oku__yan-ok { transform: translateX(2px); }
.oku__yan .ikon { --ikon: 26px; color: var(--ryz-gold-soft); margin-bottom: var(--sp-2); }
.oku__yan-ok .ikon { --ikon: 18px; margin-bottom: 0; color: inherit; }

/* Kesif listeleri — hedefteki kompakt satirlar. */
.kesif-list { list-style: none; margin: 0; padding: 0; }
.kesif-list > li { border-bottom: var(--bw) solid var(--ryz-line); }
.kesif-list > li:last-child { border-bottom: 0; }
.kesif-list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
  text-decoration: none; color: inherit; border-radius: var(--r-sm);
  transition: background var(--tr-fast);
}
.kesif-list a:hover { background: var(--ryz-surface); }
.kesif-list a:hover .kesif-list__ad { color: var(--ryz-accent-deep); }
.kesif-list__no { font-family: var(--f-read); font-size: var(--t-lg); line-height: 1;
  color: var(--ryz-ink); font-variant-numeric: tabular-nums; min-width: 2.75rem; }
.kesif-list__gv { flex: 1 1 auto; min-width: 0; }
.kesif-list__ad { display: block; font-family: var(--f-read); font-size: var(--t-base);
  line-height: var(--lh-snug); color: var(--ryz-ink); }
.kesif-list__meta { display: block; margin-top: .15rem; font-family: var(--f-ui);
  font-size: var(--t-xs); color: var(--ryz-muted); }
.kesif-list__sayi { font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); white-space: nowrap; }
.kesif-list__ok { color: var(--ryz-line-strong); }
.kesif-list a:hover .kesif-list__ok { color: var(--ryz-accent); }
.ikon-kutu--sm { width: 2.25rem; height: 2.25rem; }

/* ============================================== ALT KESIF — 3 kolon
   Hedef: dikey cizgilerle ayrilmis uc kesif kolonu. */
.kesif-3 { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); }
.kesif-3 > section { min-width: 0; }
.kesif-3 .section { margin: 0; }

/* Bolum basligi — birincil bolumlerde daha guclu. */
.section__head--major { align-items: baseline; margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4); border-bottom-width: var(--bw-2);
  border-bottom-color: var(--ryz-ink); }
.section__head--major h2 { font-size: var(--t-2xl); display: flex;
  align-items: center; gap: .55rem; }
.section__head--major h2 .ikon { color: var(--ryz-gold); }

.kitab-list__no { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ryz-muted); font-variant-numeric: tabular-nums; }
.kitab-list__title { display: block; font-family: var(--f-read); font-size: var(--t-lg);
  line-height: var(--lh-snug); }
.kitab-list__meta { display: block; margin-top: .15rem; font-family: var(--f-ui);
  font-size: var(--t-sm); color: var(--ryz-muted); }

/* okuma daveti — dar sidebar kart DEGIL, tam genislik editoryal bolum */
.reading-invite { padding: var(--sp-6) 0 0; }
.reading-invite__body { max-width: var(--read); }
/* Davet metni okunacak metindir; liste yazisi degil. */
.reading-invite .quote__tr { font-size: var(--t-lg); line-height: 1.8; color: var(--ryz-ink); }
.reading-invite .quote__foot { margin-top: var(--sp-5); align-items: center; }

/* --------------------------------------------------- sablon: râvi dizini
   302 isim: alfabetik gruplu tarama. Avatar/portre YOK. */
.harf-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: var(--sp-4);
  font-family: var(--f-ui); font-size: var(--t-sm); }
.harf-nav a { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--r-sm);
  color: var(--ryz-ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.harf-nav a:hover { background: var(--ryz-surface-2); color: var(--ryz-accent); }
.ravi-grup + .ravi-grup { margin-top: var(--sp-6); }
.ravi-grup .section__head h2 { font-size: var(--t-lg); font-family: var(--f-ui);
  font-weight: 600; letter-spacing: .04em; }
.ravi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--sp-6); }
.ravi-list > li { border-bottom: var(--bw) solid var(--ryz-line); }
.ravi-list a, .ravi-list__bos {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2); margin-inline: calc(var(--sp-2) * -1);
  text-decoration: none; color: inherit; border-radius: var(--r-sm);
}
.ravi-list a:hover { background: var(--ryz-surface-2); }
.ravi-list a:hover .ravi-list__ad { color: var(--ryz-accent); }
.ravi-list__ad { flex: 1 1 auto; min-width: 0; font-family: var(--f-read);
  font-size: var(--t-base); line-height: var(--lh-snug);
  overflow-wrap: break-word; }
.ravi-list__n { flex: 0 0 auto; font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); font-variant-numeric: tabular-nums; }
.ravi-list__bos .ravi-list__ad { color: var(--ryz-muted); }

/* Ravi profil sayfasi — hedefteki iki bolumlu yerlesim. */
.profil-2 { display: grid; gap: var(--sp-5); }
/* Profil sol kolonu: temsili gorsel + olgu listesi, kompakt yigin. */
.profil-2__sol { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.profil-2__sol .ravi-panel__gorsel { max-height: 10rem; }
.olgu { margin: 0; padding: var(--sp-5); background: var(--ryz-surface-2);
  border-radius: var(--r-md); display: grid; gap: var(--sp-4); }
.olgu > div { display: grid; gap: .2rem; }
.olgu dt { display: flex; align-items: center; gap: .45rem;
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted); }
.olgu dt .ikon { color: var(--ryz-gold); }
.olgu dd { margin: 0; font-family: var(--f-read); font-size: var(--t-base);
  color: var(--ryz-ink); }
.kisa-bilgi h2 { margin: 0 0 var(--sp-3); font-size: var(--t-xl); }
.ravi-panel--sayfa .ravi-panel__gv { padding: var(--sp-6); }

/* ============================================ BAB SATIRLARI (hedef stil)
   Numarali kompakt satirlar; kart yigini DEGIL, admin tablosu DEGIL. */
.bab-satir { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.bab-satir > li { min-width: 0; }
.bab-satir a, .bab-satir__bos {
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: inherit;
  background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
  transition: border-color var(--tr-fast);
}
.bab-satir a:hover { border-color: var(--ryz-accent); }
.bab-satir a:hover .bab-satir__ad { color: var(--ryz-accent-deep); }
.bab-satir__no { font-family: var(--f-read); font-size: var(--t-lg); line-height: 1;
  color: var(--ryz-gold); font-variant-numeric: tabular-nums; text-align: center; }
.bab-satir__gv { min-width: 0; }
.bab-satir__ad { display: block; font-family: var(--f-read); font-size: var(--t-base);
  line-height: var(--lh-snug); color: var(--ryz-ink); }
.bab-satir__meta { display: block; margin-top: .2rem; font-family: var(--f-ui);
  font-size: var(--t-sm); color: var(--ryz-muted); }
.bab-satir__ok { color: var(--ryz-line-strong); }
.bab-satir a:hover .bab-satir__ok { color: var(--ryz-accent); }
.bab-satir__bos { opacity: .72; }
.bab-satir__bos .bab-satir__ad { color: var(--ryz-muted); }

/* Sayfa basligi — hedefteki bolum/bab acilisi. */
.page-head__h1 { font-size: var(--t-2xl); margin: 0 0 var(--sp-4); }
.page-head .eyebrow { display: block; margin-bottom: var(--sp-2);
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ryz-accent-deep); }

/* ==================================================== RAVI KESIF PANELI
   Ravi artik yalniz kucuk bir baglanti degil; devam edilebilir bir alan. */
.ravi-panel {
  margin: var(--sp-8) 0 0; padding: var(--sp-6);
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-lg);
}
.ravi-panel__ust { margin-bottom: var(--sp-5); }
.ravi-panel__ad { margin: 0 0 .25rem; font-size: var(--t-xl); }
.ravi-panel__ozet { margin: 0; font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); }
/* Sekme seridi dar ekranda kontrollu kayar; taşmaz. */
.ravi-panel__seritsar { overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: calc(var(--sp-6) * -1); padding-inline: var(--sp-6); }
.ravi-tabs { display: flex; gap: var(--sp-2); min-width: max-content;
  border-bottom: var(--bw) solid var(--ryz-line); }
.ravi-tabs button {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 .9rem; cursor: pointer; white-space: nowrap;
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 500;
  color: var(--ryz-muted); background: none; border: 0;
  border-bottom: var(--bw-2) solid transparent; margin-bottom: -1px;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.ravi-tabs button:hover { color: var(--ryz-ink); }
.ravi-tabs button[aria-selected="true"] { color: var(--ryz-ink);
  border-bottom-color: var(--ryz-accent); font-weight: 600; }
.ravi-panel__gv { padding-top: var(--sp-5); }
/* JS yokken paneller ust uste akar ve ayirt edilebilir kalir. */
.ravi-panel__panel + .ravi-panel__panel { margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: var(--bw) solid var(--ryz-line); }
.ravi-panel--js .ravi-panel__panel + .ravi-panel__panel { margin-top: 0;
  padding-top: 0; border-top: 0; }
.ravi-panel__kaynakad, .ravi-panel__alias { margin: 0 0 .5rem;
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted); }
.ravi-panel__kaynakad b { color: var(--ryz-ink); font-weight: 600; }
.ravi-panel__hayat { font-size: var(--t-base); line-height: 1.75;
  color: var(--ryz-ink-2); max-width: 62ch; }
.ravi-panel__cta { margin: var(--sp-5) 0 0; }

/* --------------------------------------------- sablon: bâb dizini / bâb
   370 bâb: kart izgarasi DEGIL, taranabilir editoryal dizin. */
/* Uzun dizinde ana bolume atlama seridi. */
.atla-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--sp-5);
  font-family: var(--f-ui); font-size: var(--t-sm); }
.atla-nav a { display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--r-md);
  border: var(--bw) solid var(--ryz-line); color: var(--ryz-ink-2);
  text-decoration: none; }
.atla-nav a:hover { border-color: var(--ryz-accent); color: var(--ryz-accent); }
.atla-nav span { color: var(--ryz-muted); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; }
/* Atlama hedefi sticky basligin altinda kalmasin. */
.bab-grup, .ravi-grup, .ravi-panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.bab-grup + .bab-grup { margin-top: var(--sp-7); }
.bab-grup .section__head h2 { font-size: var(--t-xl); }
.bab-grup .section__head h2 a { color: inherit; text-decoration: none; }
.bab-grup .section__head h2 a:hover { color: var(--ryz-accent); }
.bab-list { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 var(--sp-7); }
.bab-list > li { border-bottom: var(--bw) solid var(--ryz-line); }
.bab-list a, .bab-list__bos {
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--sp-4);
  align-items: baseline; padding: var(--sp-3) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  text-decoration: none; color: inherit; border-radius: var(--r-sm);
}
.bab-list a:hover { background: var(--ryz-surface-2); }
.bab-list a:hover .bab-list__title { color: var(--ryz-accent); }
.bab-list__no { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600;
  color: var(--ryz-muted); font-variant-numeric: tabular-nums; text-align: end; }
.bab-list__title { font-family: var(--f-read); font-size: var(--t-base);
  line-height: var(--lh-snug); color: var(--ryz-ink); }
.bab-list__count { font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); font-variant-numeric: tabular-nums; }
.bab-list__bos { color: var(--ryz-muted); }
.bab-list__bos .bab-list__title { color: var(--ryz-muted); }
.bab-list__not { display: block; margin-top: .15rem;
  font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ryz-muted); }

/* Bâb sayfasi basligi: kaynakta iki satira bolunmus baslik iki satir kalir. */
.bab__title { margin: 0; font-size: var(--t-2xl); }
.bab__title-2 { display: block; }

/* ================================================= SABLON: HADIS SAYFASI
   Hedef: breadcrumb -> onceki/sonraki -> [ikon kutusu | rozet + baslik +
   cipler | eylemler] -> cerceveli okuma karti -> kaynak bolumleri. */
.hadith { margin: 0; }

.hadis-gez { display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-5);
  font-family: var(--f-ui); font-size: var(--t-sm); }
.hadis-gez a { display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem; color: var(--ryz-accent-deep); text-decoration: none; }
.hadis-gez a:hover { color: var(--ryz-ink); }

.hadis-bas { display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--sp-4); align-items: start; margin: 0 0 var(--sp-6); }
.ikon-kutu--lg { width: 4.5rem; height: 4.5rem; --ikon: 30px; }
.hadis-bas__gv { min-width: 0; }
.hadis-bas__rozet { display: inline-block; margin: 0 0 var(--sp-3);
  padding: .3rem .8rem; border-radius: var(--r-md);
  background: var(--ryz-surface-2); color: var(--ryz-ink-2);
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; }
.hadis-bas__h1 { margin: 0 0 var(--sp-4); font-size: var(--t-2xl);
  line-height: 1.2; font-variant-numeric: tabular-nums; }
.hadis-bas__eylem { display: flex; gap: .25rem; }
.hadis-bas__eylem button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--ryz-gold); transition: background var(--tr-fast), color var(--tr-fast);
}
.hadis-bas__eylem button:hover { background: var(--ryz-surface-2);
  color: var(--ryz-accent-deep); }

/* Baglam cipleri — hedefteki ince cerceveli etiketler. */
.cipler { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.cip { display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.25rem; max-width: 26rem; padding: 0 .75rem;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--ryz-line); background: var(--ryz-surface);
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-ink-2);
  text-decoration: none; white-space: nowrap; overflow: hidden; }
/* Uzun kaynak basliklari cipi tasirmasin; tam metin baglantida durur. */
.cip > :not(.ikon) { overflow: hidden; text-overflow: ellipsis; }
.cip .ikon { color: var(--ryz-gold); }
a.cip:hover { border-color: var(--ryz-accent); color: var(--ryz-accent-deep); }

/* OKUMA KARTI — Arapca ve tercume tek cerceve icinde, ortalanmis. */
.okuma-kart { padding: var(--sp-7) var(--sp-6); margin: 0 0 var(--sp-7);
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-lg); }
.okuma-kart .arabic { border: 0; padding-block: 0; margin: 0;
  text-align: center; }
.okuma-kart .translation { margin: 0; text-align: center;
  font-style: italic; font-size: var(--t-lg); color: var(--ryz-ink); }
.okuma-kart .translation p { max-width: 58ch; margin-inline: auto; }
/* Uzun kaynak metni: okuma yerlesimi (sola hizali, duz). */
.okuma-kart--uzun .translation { text-align: start; font-style: normal;
  font-size: var(--t-base); }
.okuma-kart--uzun .translation p { max-width: 64ch; margin-inline: 0; }
/* Susleme ayraci: altin ucler + ince cizgi. */
.ayrac { display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0; color: var(--ryz-gold-soft); }
.ayrac span { flex: 1 1 auto; height: 1px; background: var(--ryz-line-strong); }

/* Kaynak bolum basliklari — altin ikonlu. */
.hadith .section__head h2, .bab .section__head h2 {
  display: flex; align-items: center; gap: .5rem; }
.hadith .section__head h2 .ikon, .bab .section__head h2 .ikon { color: var(--ryz-gold); }
.hadith .section { margin-block: var(--sp-6); }
.section--related { margin-top: var(--sp-8); }

/* ==================================================== RAVI KESIF PANELI
   Hedef: acik kapsayici uzerinde sekme seridi; secili sekme DOLU derin
   turkuaz. Altinda cerceveli kart. */
.ravi-panel { margin: var(--sp-7) 0 0; }
.ravi-panel__ust { margin-bottom: var(--sp-4); }
.ravi-panel__ad { margin: 0 0 .25rem; font-size: var(--t-xl); }
.ravi-panel__ozet { margin: 0; font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--ryz-muted); }
.ravi-panel__seritsar { overflow-x: auto; overscroll-behavior-x: contain; }
.ravi-tabs { display: flex; gap: .25rem; min-width: max-content;
  padding: .3rem; background: var(--ryz-surface-2); border-radius: var(--r-md); }
.ravi-tabs button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.4rem; cursor: pointer; white-space: nowrap;
  font-family: var(--f-read); font-size: var(--t-base); font-weight: 500;
  color: var(--ryz-ink-2); background: none; border: 0;
  border-radius: var(--r-sm);
  transition: color var(--tr-fast), background var(--tr-fast);
}
.ravi-tabs button:hover { color: var(--ryz-ink); }
.ravi-tabs button[aria-selected="true"] { color: #fff;
  background: var(--ryz-accent-deep); }
.ravi-panel__gv { margin-top: var(--sp-4); padding: var(--sp-5);
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-lg); }
.ravi-panel__panel + .ravi-panel__panel { margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: var(--bw) solid var(--ryz-line); }
.ravi-panel--js .ravi-panel__panel + .ravi-panel__panel { margin-top: 0;
  padding-top: 0; border-top: 0; }
.ravi-panel__kart { display: grid; gap: var(--sp-5); align-items: start; }
/* Kart gorseli — TEMSILI. Oran korunur (object-fit: cover ile hafif kirpma),
   kart bu yuzden dikey olarak uzamaz: yukseklik SINIRLIDIR. */
.ravi-panel__gorsel {
  display: block; width: 100%; height: auto; max-height: 9rem;
  object-fit: cover; object-position: center;
  border-radius: var(--r-md); background: var(--ryz-surface-2);
}
.ravi-panel__kaynakad, .ravi-panel__alias { margin: 0 0 .5rem;
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted); }
.ravi-panel__kaynakad b { color: var(--ryz-ink); font-weight: 600; }
.ravi-panel__hayat { font-size: var(--t-base); line-height: 1.75;
  color: var(--ryz-ink-2); max-width: 62ch; }
.ravi-panel__cta { margin: var(--sp-5) 0 0; }
.ravi-panel__cta .btn { background: var(--ryz-accent-deep);
  border-color: var(--ryz-accent-deep); gap: .5rem; }
.ravi-panel__cta .btn:hover { background: var(--ryz-ink); border-color: var(--ryz-ink); }

/* -------------------------------------------------------------- duyarli */
@media (min-width: 48em) {
  .footer-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .bolum-grid { grid-template-columns: 1fr 1fr; }
  .oku__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .kesif-3 { grid-template-columns: 1fr 1fr; }
  .ravi-list { grid-template-columns: 1fr 1fr; }
  .pagenav { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .cols-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  /* Hedef: 4 kolon ana bolum izgarasi */
  .bolum-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Hedef: gorsel + metin + yan kart */
  .oku__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--sp-6); }
  .oku__yan { display: block; }
  .hero__sus { display: grid; }
  /* Kabuk DARALTILMAZ: hero metni basliktaki logoyla ayni sol kenardan
     baslar. Olcu yalnizca metin ogelerinde sinirlanir. */
  .hero__inner > * { max-width: 58%; }
  .hero__title { max-width: none; }
  /* Hedef: uc kesif kolonu, aralarinda ince dikey cizgi */
  .kesif-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
  .ravi-panel__kart { grid-template-columns: 13rem minmax(0, 1fr);
    align-items: start; gap: var(--sp-5); }
  .ravi-panel__gorsel { max-height: 8.5rem; }
  .profil-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-6); }
  .kesif-3 > section + section { padding-inline-start: var(--sp-7);
    border-inline-start: var(--bw) solid var(--ryz-line); }
  .bab-list:not(.bab-list--tek) { grid-template-columns: 1fr 1fr; }
  .bab-satir { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
  .ravi-list { grid-template-columns: 1fr 1fr; }
}
/* Arzusu logosu yalniz GENIS masaustunde gorunur. Oncelik sirasi:
   Riyaz logosu > gezinme > Hadis Ara > Arzusu. Dar masaustu/tablette
   menuyu sikistirmamasi icin erken gizlenir; mobilde hic basilmaz.
   Esik 80em -> 82em: "Reklam" etiketi eklendikten sonra tam 1280px'te
   baslik araclari 2px tasiyordu. */
@media (min-width: 82em) {
  .reklam-mini { display: flex; }
  /* Arzusu logosu okunur olcuye cikarken menuyu sikistirmasin diye
     gezinme araligi bir tik daralir ve arac araligi altin orana gore
     ayarlanir (logo yuksekligi / 1.618). */
  .nav ul { gap: var(--sp-4); }
  .header-tools { gap: 1.7rem; }
  .reklam-mini img { height: 2.75rem; }
}
/* Genis masaustunde logo tam okunur olcusune ulasir. */
@media (min-width: 100em) {
  .reklam-mini img { height: 3rem; }
  .header-tools { gap: 2rem; }
}
/* Cok genis ekranda kolon, okuma olcusunden (~36rem) genis kalir; artan
   bosluk iki yana esit dagitilir ki sagda olu alan olusmasin. */
@media (min-width: 100em) {
  .hero__sus { justify-items: center; }
}
/* Dar masaustunde sag panel oransal olarak biraz daha genis olur ki
   hadis metni gazete kolonuna donmesin. */
@media (min-width: 64em) and (max-width: 79.99em) {
  .hero__sus { width: 44%; padding-inline: var(--sp-5) var(--sp-5); }
  .hero__inner > *, .hero .searchform { max-width: 54%; }
}
@media (max-width: 63.99em) {
  /* MOBIL — hedefteki telefon ekranlari: baslik tek satir, hero yigin,
     kunye kompakt, kartlar tek kolon. "Masaustunun dikey istifi" DEGIL. */
  .hero { min-height: 0; }
  /* Masaustu oranini zorlamayiz: panel hero icinde tam genislikte blok. */
  .hero__inner { padding-block: var(--sp-5) var(--sp-5); order: 1; }
  .hero__sus { position: static; width: 100%; display: block; order: 2;
    padding-block: var(--sp-5); padding-inline: 0;
    border-inline-start: 0;
    border-block-start: var(--bw) solid var(--ryz-plate-line); }
  .hero-kart { max-width: var(--shell); margin-inline: auto;
    padding-inline: var(--gut); }
  .hero-kart__metin { max-width: 62ch; -webkit-line-clamp: 6; }
  .hero-kart__kunye { max-width: none; }
  .hero__lead { font-size: var(--t-sm); margin-bottom: var(--sp-4); }
  .hero__eyebrow { margin-bottom: var(--sp-2); }
  .quicknav { margin-top: var(--sp-4); }
  .quicknav a { min-height: 2.75rem; padding: 0 .8rem; font-size: var(--t-xs); }
  .reklam { padding-block: var(--sp-2); }
  .hero__title { font-size: clamp(1.75rem, 1.1rem + 3vw, 2.25rem); }
  .hero .searchform { max-width: none; }
  /* UST SERIT — dar ekranda tek satir; tasma yok, punto bir tik kucuk. */
  .topayet__inner { gap: var(--sp-3); padding-block: .45rem; min-height: 2.75rem; }
  .topayet__ic { gap: .5rem; }
  .topayet__ic .ikon { --ikon: 17px; }
  .topayet__meal { font-size: .875rem; }
  /* Dar ekranda ONCELIK AYET METNINDEDIR: kaynak etiketi once kisalir.
     Ikisi de kontrollu ellipsis ile kesilir, hicbiri sifira dusmez. */
  .topayet__meal { min-width: 45%; }
  /* Kaynak adi (sponsor/atif) dar ekranda gizlenir: seridin dar alaninda
     oncelik AYET METNINDEDIR. Baglanti masaustunde erisilebilir kalir. */
  .topayet__kaynak { display: none; }
  .topayet__ref { font-size: .8125rem; padding-inline-start: .6rem;
    flex: 0 1 auto; min-width: 0; max-width: 34%;
    overflow: hidden; text-overflow: ellipsis; }
  .topayet__araclar > * + * { margin-inline-start: .35rem; padding-inline-start: .35rem; }
  /* PAYLASIM — dar ekranda panel ekran disina tasmaz. */
  .paylas-dg, .paylas-dg--gorsel { width: calc(100vw - 1rem); max-height: 92vh;
    padding: var(--sp-4) var(--sp-3); }
  .paylas-fmt { grid-template-columns: 1fr; }
  .paylas-tuval { padding: var(--sp-2); }
  .paylas-tuval canvas { max-height: 46vh; }
  .paylas-dg__eylem .btn { flex: 1 1 12rem; justify-content: center; }
  .paylas__dugmeler .btn { flex: 1 1 14rem; justify-content: center; }
  .kunye { gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-4); }
  .kunye > div { gap: var(--sp-2); }
  .kunye .ikon-kutu { width: 2.25rem; height: 2.25rem; --ikon: 18px; }
  .kunye__sayi { font-size: var(--t-lg); }
  .hadis-bas { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hadis-bas .ikon-kutu--lg { display: none; }
  .hadis-bas__eylem { order: 3; }
  .okuma-kart { padding: var(--sp-5) var(--sp-4); }
  .okuma-kart .translation { font-size: var(--t-base); }
  .ravi-panel--sayfa .ravi-panel__gv { padding: var(--sp-4); }
  .ravi-tabs button { padding: 0 .9rem; font-size: var(--t-sm); }
  .reklam__bag { max-width: none; }
  .footer-nav { margin-inline: 0; }

  :root { --header-h: 4.25rem; }
  .nav-toggle { display: inline-flex; }
  /* app.js panele `data-hazir` koyana kadar gizli; sonrasini `hidden` yonetir.
     JS yoksa `js` sinifi da yoktur ve panel acik kalir. */
  .js .header-panel:not([data-hazir]) { display: none; }
  /* Panel tek satirin altina, tam genislige acilir. Kapali durumda JS
     `hidden` niteligini kullanir; goruntuleme kurali burada degismez. */
  .header-panel {
    order: 10; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: var(--sp-3);
    border-top: var(--bw) solid var(--ryz-line); padding-block: var(--sp-3);
  }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { min-height: 3rem; width: 100%; border-bottom: 0;
    border-inline-start: var(--bw-2) solid transparent; padding-inline-start: .6rem; }
  .nav a[aria-current="page"] { border-inline-start-color: var(--ryz-accent); }
  .header-tools { margin-inline-start: 0; flex-wrap: wrap; gap: var(--sp-4); }
  .header-search { flex: 1 1 100%; }
  .header-search .btn { display: inline-flex; }
  .site-header__inner { flex-wrap: wrap; }
  .site-logo img { width: 200px; height: 45px; max-width: min(62vw, 200px); }
  .hero { padding-block: var(--sp-6) var(--sp-6); }
  .searchform { flex-wrap: wrap; }
  .searchform__field { flex: 1 1 100%; height: 3.25rem; }
  .searchform .btn { flex: 1 1 100%; height: 3rem; }
}
@media (max-width: 30em) {
  .list__row { gap: var(--sp-3); }
  .list__row:has(.list__id) { grid-template-columns: 1.75rem 1fr auto; }
  .stat-row { gap: var(--sp-2) var(--sp-4); }
}

/* --------------------------------------------------------------- baski */
@media print {
  .site-header, .site-footer, .skip-link, .breadcrumb, .actions,
  .topayet, .reklam, .harf-nav, .kapsam-nav, .atla-nav, .ravi-tabs,
  .views, .searchform, .search-hints, .quicknav, .pagenav,
  .section--related, .theme-switch, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap, .wrap--read { max-width: none; padding: 0; }
  .arabic { border-block-color: #999; }
  .tahric { background: none; border-color: #999; }
  a { color: #000; text-decoration: none; }
}


/* ---------------------------------------------------- COKLU RAVI LISTESI
   Kaynakta birden fazla ravi birlikte anilan hadisler. Tek ravili hadisin
   karti DEGISMEZ; bu blok yalniz .ravi-panel--coklu icinde gecerlidir. */
.ravi-coklu { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--sp-3); }
.ravi-coklu__oge { display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-md); background: var(--ryz-surface-2); }
.ravi-coklu__gv { flex: 1 1 12rem; min-width: 0; }
.ravi-coklu__ad { margin: 0; font-weight: 600;
  font-size: var(--t-lg); line-height: 1.3; overflow-wrap: anywhere; }
.ravi-coklu__ozet { margin: .15rem 0 0; font-family: var(--f-ui);
  font-size: var(--t-sm); color: var(--ryz-muted); }
.ravi-coklu__bag { flex: none; }
@media (max-width: 30em) {
  .ravi-coklu__oge { gap: var(--sp-2); }
  .ravi-coklu__bag { width: 100%; justify-content: center; }
}


/* ====================================================================
   OKUMA ARAÇLARI — yer imi · not · vurgu · yazı boyu · cihaz sesi
   Tümü isteğe bağlı sunum katmanıdır; kaynak metnin kendisi değişmez.
   Blok JS yoksa `hidden` kalır, bu yüzden ölü kontrol görünmez.
   ==================================================================== */
/* Yazı boyu ÇARPAN'dır (1 = %100): arayüzde gösterilen yüzde ile gerçek
   ölçü birebir aynıdır. Yalnız sunumdur; DOM içeriği ve kanonik metin
   değişmez. */
:root { --ryz-oku-tr: 1; --ryz-oku-ar: 1; }
/* Çarpan, TABAN ÖLÇÜNÜN ÜSTÜNE `em` ile bindirilir. Nedeni: taban ölçüler
   akışkan `clamp()` değerleridir ve `calc(clamp(...) * sayı)` tarayıcıda
   geçersiz kalıyor (kural sessizce düşüyordu). `1em` çocuk için ebeveynin
   hesaplanmış px değeridir; çarpım her zaman geçerlidir ve tabandaki
   akışkanlık (uzun metin / mobil varyantları dâhil) korunur. */
.okuma-kart .translation > p { font-size: calc(1em * var(--ryz-oku-tr)); }
.okuma-kart #hadis-arapca { font-size: clamp(1.45rem, 1.25rem + .55vw, 1.7rem); }
.okuma-kart #hadis-arapca .arabic { font-size: calc(1em * var(--ryz-oku-ar)); }

.okuma-arac, .devam,
.devam__blok--son, .devam__yerimleri { display: none; }
/* Görünürlük ilk boyamadan ÖNCE <html> sınıfıyla belirlenir (bkz. head betiği):
   blok sonradan açılmaz, sayfa kaymaz. JS veya localStorage yoksa hiç açılmaz. */
.js-depo .okuma-arac { display: block; }
.js-devam .devam, .js-devam .devam__blok--son { display: block; }
.js-yerimi .devam, .js-yerimi .devam__yerimleri { display: block; }

/* Kapsayıcı yalnız dikey yığındır: ayar paneli açılınca ÜST ŞERİT
   büyümez, hap geometrisi bozulmaz. */
.okuma-arac { margin: 0 0 var(--sp-4); }
.okuma-arac__serit {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); min-width: 0;
  background: var(--ryz-surface-2); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-pill);
}
.okuma-arac__sol, .okuma-arac__sag {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
}
.okuma-arac__sag { margin-inline-start: auto; }
.okuma-arac__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.2;
  color: var(--ryz-ink-2); background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-pill);
  padding: .45rem .8rem; cursor: pointer;
  transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.okuma-arac__btn:hover { color: var(--ryz-accent); border-color: var(--ryz-accent); }
.okuma-arac__btn--acik {
  color: var(--ryz-on-accent); background: var(--ryz-accent);
  border-color: var(--ryz-accent);
}
.okuma-arac__btn .ikon { --ikon: 15px; }
.okuma-arac__rozet {
  font-variant-numeric: tabular-nums; font-size: var(--t-2xs);
  background: var(--ryz-accent-wash); color: var(--ryz-accent);
  border-radius: var(--r-pill); padding: 0 .4rem; min-width: 1.15rem; text-align: center;
}
/* Şeridin ALTINDA ayrı panel — şeridi yatay olarak büyütmez. */
.okuma-ayar {
  display: grid; gap: var(--sp-3); max-width: 100%;
  margin-top: var(--sp-2); padding: var(--sp-4);
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-md);
}
.okuma-ayar__satir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
}
.okuma-ayar__et { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ryz-muted); }
.okuma-ayar__grup { display: inline-flex; gap: .25rem; margin-inline-start: auto; }
.okuma-ayar__grup button {
  font-family: var(--f-ui); font-size: var(--t-xs); min-width: 2.4rem;
  padding: .3rem .55rem; cursor: pointer; color: var(--ryz-ink-2);
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-sm);
}
.okuma-ayar__grup button:hover { color: var(--ryz-accent); border-color: var(--ryz-accent); }
.okuma-ayar__not { margin: 0; font-family: var(--f-ui); font-size: var(--t-2xs);
  color: var(--ryz-muted); }

/* ------------------------------------------------------------- notlar
   Kullanıcının kendi notu. Kaynak içerikten GÖRSEL OLARAK AYRIDIR ve
   her zaman "Kişisel" olarak etiketlenir; kaynak metinle karışmaz. */
.notlar {
  margin: 0 0 var(--sp-6); padding: var(--sp-5);
  background: var(--ryz-surface-2);
  border: var(--bw) dashed var(--ryz-line-strong); border-radius: var(--r-md);
}
.notlar__bas { font-family: var(--f-ui); font-size: var(--t-base); margin: 0 0 .35rem; }
.notlar__altbas { font-family: var(--f-ui); font-size: var(--t-sm); margin: var(--sp-4) 0 .35rem; }
.notlar__uyari, .notlar__bos, .notlar__durum {
  font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ryz-muted); margin: 0 0 var(--sp-3);
}
.notlar__form { display: grid; gap: var(--sp-2); }
.notlar__form textarea {
  width: 100%; font-family: var(--f-ui); font-size: var(--t-sm); line-height: 1.6;
  color: var(--ryz-ink); background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-kontrol-sinir); border-radius: var(--r-sm);
  padding: var(--sp-3); resize: vertical;
}
.notlar__eylem { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.notlar__liste { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.notlar__oge {
  background: var(--ryz-surface); border: var(--bw) solid var(--ryz-line);
  border-radius: var(--r-sm); padding: var(--sp-3);
}
.notlar__metin { margin: 0 0 .35rem; font-family: var(--f-ui); font-size: var(--t-sm);
  line-height: 1.65; color: var(--ryz-ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.notlar__alt { display: flex; align-items: center; gap: var(--sp-3); }
.notlar__ts { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ryz-muted);
  font-variant-numeric: tabular-nums; }
.notlar__sil {
  margin-inline-start: auto; font-family: var(--f-ui); font-size: var(--t-2xs);
  color: var(--ryz-muted); background: none; border: 0; padding: .2rem .3rem;
  cursor: pointer; text-decoration: underline;
}
.notlar__sil:hover { color: var(--ar-red); }

/* --------------------------------------------------------------- vurgu
   Vurgunun kendi renk cifti vardir: mirasla gelen metin rengi koyu temada
   altin zemin uzerinde 2.77 kontrasta dusuyordu. Uc durum da (bare :root,
   sistem koyu, acik secim) ayri ayri tanimlanir. */
:root { --ryz-vurgu-bg: #f4e3ae; --ryz-vurgu-ink: #2a2418; --ryz-vurgu-cizgi: #b99b48; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ryz-vurgu-bg: #5a4a1e; --ryz-vurgu-ink: #f6efdc; --ryz-vurgu-cizgi: #c2ab7c;
  }
}
:root[data-theme="dark"] {
  --ryz-vurgu-bg: #5a4a1e; --ryz-vurgu-ink: #f6efdc; --ryz-vurgu-cizgi: #c2ab7c;
}
mark.vurgu {
  background: var(--ryz-vurgu-bg); color: var(--ryz-vurgu-ink);
  border-radius: 2px; padding: 0 .05em; cursor: pointer;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* Vurgulama durumu YALNIZ renkle degil, ince alt cizgiyle de belirtilir. */
mark.vurgu:hover, mark.vurgu:focus-visible {
  box-shadow: inset 0 -2px 0 var(--ryz-vurgu-cizgi); outline-offset: 2px;
}
.vurgu-menu { position: absolute; z-index: var(--z-nav); }
.vurgu-menu button {
  font-family: var(--f-ui); font-size: var(--t-2xs); white-space: nowrap;
  color: var(--ryz-plate-ink); background: var(--ryz-plate);
  border: var(--bw) solid var(--ryz-plate-line); border-radius: var(--r-pill);
  padding: .35rem .8rem; cursor: pointer; box-shadow: var(--sh-2);
}

/* ------------------------------------------------- kaldığım yerden devam */
.devam { margin: var(--sp-6) 0 0; }
.devam__bas { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-3); }
.devam__kart {
  display: flex; align-items: center; gap: var(--sp-3); text-decoration: none;
  padding: var(--sp-4); background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
  color: var(--ryz-ink);
}
.devam__kart:hover { border-color: var(--ryz-accent); }
.devam__blok--son + .devam__yerimleri { margin-top: var(--sp-4); }
.devam__gv { display: grid; gap: .15rem; min-width: 0; }
.devam__baslik { font-family: var(--f-read); font-size: var(--t-lg); font-weight: 600; }
.devam__gv .devam__meta { font-family: var(--f-ui); font-size: var(--t-xs);
  color: var(--ryz-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-height: 1.3em; }
.devam__baslik { min-height: 1.2em; }
.devam__ok { margin-inline-start: auto; color: var(--ryz-accent); flex: none; }
.devam__yerimleri { margin-top: var(--sp-4); }
.devam__altbas { display: flex; align-items: center; gap: .4rem;
  font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ryz-muted);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-2); }
.devam__liste { list-style: none; margin: 0; padding: 0 0 .3rem;
  display: flex; flex-wrap: nowrap; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: thin; min-height: 2.15rem; }
.devam__liste li {
  display: inline-flex; align-items: baseline; gap: .45rem; flex: none;
  padding: .35rem .7rem; background: var(--ryz-surface-2);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-pill);
}
.devam__yerimi { font-family: var(--f-ui); font-size: var(--t-xs); text-decoration: none;
  color: var(--ryz-ink); white-space: nowrap; }
.devam__liste .devam__meta { font-family: var(--f-ui); font-size: var(--t-2xs);
  color: var(--ryz-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 14rem; }

/* ------------------------------------------- râvi: ana bölüm dağılımı
   TÜRETİLMİŞ istatistik. Kaynak bilgisi değildir; çubuk yalnız orandır. */
.dagilim { margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--ryz-line); }
.dagilim__bas { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-muted);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-3); }
.dagilim__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.dagilim__oge { display: grid; grid-template-columns: 1fr auto; gap: .25rem var(--sp-3);
  align-items: baseline; }
.dagilim__ad { font-family: var(--f-read); font-size: var(--t-base); color: var(--ryz-ink);
  text-decoration: none; overflow-wrap: anywhere; }
a.dagilim__ad:hover { color: var(--ryz-accent); }
.dagilim__sayi { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ryz-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dagilim__bar { grid-column: 1 / -1; height: 3px; border-radius: var(--r-pill);
  background: var(--ryz-line); overflow: hidden; }
.dagilim__bar > span { display: block; height: 100%; background: var(--ryz-accent); }
.dagilim__kalan { margin: var(--sp-3) 0 0; font-family: var(--f-ui);
  font-size: var(--t-xs); color: var(--ryz-muted); }

/* --------------------------------------------------------- tahriç ayrımı
   "Temel kaynak" ile "Ayrıca bk." arasındaki fark YALNIZ RENGE bağlı
   değildir: madde imi geometrik olarak farklıdır ve her grup ekran
   okuyucuya kendi adıyla (role=group + aria-label) bildirilir. */
.tahric__group + .tahric__group { margin-top: var(--sp-4); }
.tahric li { position: relative; padding-inline-start: 1.15rem; }
.tahric li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: .5rem; height: .5rem;
}
.tahric--asil li::before {
  background: var(--ryz-accent); transform: rotate(45deg);
}
.tahric--ayrica li::before {
  border: 1.5px solid var(--ryz-muted); border-radius: 50%; background: none;
}
.tahric--ayrica { color: var(--ryz-ink-2); }
.tahric--ayrica .tahric__work { font-weight: 500; color: var(--ryz-ink-2); }
/* Yapısal künyesi olmayan HAM kaynak satırı, yapılandırılmış bir atıf gibi
   biçimlendirilmez: sahte "citation chip" üretilmez. */
.tahric__ham { color: var(--ryz-muted); font-style: italic; }

@media (max-width: 40em) {
  .okuma-arac__serit { border-radius: var(--r-md); }
  .okuma-arac__sag { margin-inline-start: 0; }
  .okuma-arac__btn { flex: 1 1 auto; justify-content: center; }
  .okuma-ayar__grup { margin-inline-start: 0; width: 100%; }
  .okuma-ayar__grup button { flex: 1; }
  .devam__liste .devam__meta { max-width: 8rem; }
}

/* ------------------------------------------------------- baskı (ek kural)
   Kişisel katman yazdırılmaz; kaynak metin eksiksiz basılır. */
@media print {
  .okuma-arac, .okuma-ayar, .vurgu-menu, .devam,
  .notlar__form, .notlar__eylem, .notlar__sil, .notlar__uyari,
  .hadis-bas__eylem, .paylas, .hadis-gez,
  [data-oku-tr] { display: none !important; }
  mark.vurgu { background: none !important; color: #000 !important;
    border-bottom: 1px solid #666; }
  .notlar { border: 1px dashed #999; background: none; }
}


/* ====================================================================
   KAYNAKTAKİ GÖNDERMELER · DOĞRULAMA BEKLEYEN TAHRÎÇ · HAM TAHRÎÇ ·
   YAZAR AÇIKLAMASI NOTU
   ==================================================================== */

/* ------------------------------------------- hadis ↔ hadis göndermeleri */
.iliski__grup + .iliski__grup { margin-top: var(--sp-4); }
.iliski__bas {
  font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ryz-muted);
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-2);
}
.iliski__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.iliski__oge {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--f-ui); font-size: var(--t-xs); white-space: nowrap;
  color: var(--ryz-ink); background: var(--ryz-surface-2);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-pill);
  padding: .38rem .8rem; font-variant-numeric: tabular-nums;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.iliski__oge:hover { color: var(--ryz-accent); border-color: var(--ryz-accent); }

/* -------------------------------------- tahrîç: doğrulama bekleyen satır
   Ayrım YALNIZ renge bağlı değildir: madde imi geometrisi değişir (dolu
   eşkenar dörtgen / içi boş daire yerine üçgen), satır ayrı bir ikon taşır
   ve ekran okuyucunun okuduğu AÇIK metin eklenir. */
.tahric li.tahric__oge--bekliyor::before {
  background: none; border: 0; border-radius: 0; transform: none;
  width: 0; height: 0;
  border-inline: .3rem solid transparent;
  border-bottom: .52rem solid var(--ryz-uyari, #9a7b2e);
}
.tahric__bekliyor {
  display: inline-flex; align-items: center; gap: .3rem;
  flex-basis: 100%; margin-top: .15rem;
  font-family: var(--f-ui); font-size: var(--t-2xs); font-style: normal;
  color: var(--ryz-uyari-ink, #6d5518);
}
.tahric__bekliyor .ikon { --ikon: 13px; flex: none; }
.tahric li.tahric__oge--bekliyor .tahric__work { font-weight: 500; }

/* ------------------------------------------------------------ ham tahrîç */
.tahric-ham { margin-top: var(--sp-3); }
.tahric-ham__bas {
  cursor: pointer; font-family: var(--f-ui); font-size: var(--t-xs);
  color: var(--ryz-muted); padding: .3rem 0; list-style: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.tahric-ham__bas::-webkit-details-marker { display: none; }
.tahric-ham__bas::before {
  content: ""; width: .45rem; height: .45rem; flex: none;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--tr-fast);
}
.tahric-ham[open] .tahric-ham__bas::before { transform: rotate(45deg); }
.tahric-ham__bas:hover { color: var(--ryz-accent); }
.tahric-ham__metin {
  margin: .3rem 0 0; padding: var(--sp-3) var(--sp-4);
  font-family: var(--f-read); font-size: var(--t-sm); line-height: 1.7;
  color: var(--ryz-ink-2); background: var(--ryz-surface-2);
  border-inline-start: var(--bw-2) solid var(--ryz-line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------- yazar açıklaması uyarısı
   Kaynak metin DEĞİLDİR: kaynak bloklarından görsel olarak ayrılır. */
.yazar-notu {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 var(--sp-6); padding: var(--sp-3) var(--sp-4);
  font-family: var(--f-ui); font-size: var(--t-2xs); line-height: 1.6;
  color: var(--ryz-muted); background: var(--ryz-surface-2);
  border: var(--bw) dashed var(--ryz-line-strong); border-radius: var(--r-sm);
}
.yazar-notu .ikon { --ikon: 15px; flex: none; margin-top: .1rem; }

/* Uyarı rengi: üç durumda da açıkça tanımlı (miras alınan renk yok). */
:root { --ryz-uyari: #9a7b2e; --ryz-uyari-ink: #6d5518; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ryz-uyari: #d8b25c; --ryz-uyari-ink: #e2c078; }
}
:root[data-theme="dark"] { --ryz-uyari: #d8b25c; --ryz-uyari-ink: #e2c078; }

@media (max-width: 40em) {
  .iliski__oge { font-size: var(--t-2xs); }
}

@media print {
  /* Ham tahrîç baskıda AÇIK gelir: kaynağın kendi yazımı eksik basılmasın. */
  .tahric-ham > *:not(summary) { display: block !important; }
  .tahric-ham__bas { display: none !important; }
  .tahric-ham__metin { background: none; border-inline-start-color: #999; }
  .yazar-notu { border: 1px dashed #999; background: none; color: #000; }
  .iliski__oge { border-color: #999; background: none; }
}


/* ====================================================================
   ALT OKUMA ÇUBUĞU (floating) + okuma ayarları ek satırları
   Çubuk kendi state'ini TUTMAZ: yazı boyu ve yer imi için okuma.js'in
   aynı kayıtlarını, tema için header'daki mevcut düğmeleri kullanır.
   ==================================================================== */
.okuma-bar { display: none; }
.js-depo .okuma-bar {
  display: flex; align-items: center; gap: .35rem;
  position: fixed; z-index: var(--z-header);
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem);
  max-width: calc(100vw - 1.5rem);
  padding: .35rem .5rem;
  background: color-mix(in srgb, var(--ryz-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: var(--bw) solid var(--ryz-line-strong);
  border-radius: var(--r-pill); box-shadow: var(--sh-2);
}
@supports not (backdrop-filter: blur(4px)) {
  .js-depo .okuma-bar { background: var(--ryz-surface); }
}
/* Üst okuma araçları ekrandayken çubuk gizlenir (mobilde üst üste biniyordu).
   Görünürlük opaklık/kaydırma ile değişir: yer kaplamaya devam etmediği için
   sayfa kaymaz (CLS 0) ve tıklanamaz hâle gelir. */
.js-depo .okuma-bar--gizli {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(.5rem);
}
.js-depo .okuma-bar {
  transition: opacity var(--tr-base), transform var(--tr-base), visibility var(--tr-base);
}
@media (prefers-reduced-motion: reduce) {
  .js-depo .okuma-bar { transition: none; }
}
.okuma-bar__grup { display: inline-flex; align-items: center; gap: .2rem; }
.okuma-bar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .15rem;
  min-width: 2rem; min-height: 2rem; padding: 0 .5rem; flex: none;
  font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1;
  color: var(--ryz-ink-2); background: none; border: 0;
  border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.okuma-bar__btn:hover { color: var(--ryz-accent); background: var(--ryz-accent-wash); }
.okuma-bar__btn--acik { color: var(--ryz-on-accent); background: var(--ryz-accent); }
.okuma-bar__btn .ikon { --ikon: 16px; }
.okuma-bar__oran {
  min-width: 3.1rem; text-align: center; font-family: var(--f-ui);
  font-size: var(--t-2xs); color: var(--ryz-muted);
  font-variant-numeric: tabular-nums;
}
.okuma-bar__ayrac {
  width: var(--bw); align-self: stretch; margin-inline: .15rem;
  background: var(--ryz-line);
}
/* Tema ikonu JS ile tema menusunden KOPYALANIR (okuma.js -> temaYansit).
   Kopya `.ikon` sinifini tasimaz; olcusu olmadigi icin 0x0 cizilip dugme
   BOS gorunuyordu. Olcu ve cizim bu yuzden kapsayicidan verilir —
   kardes dugmelerdeki `.ikon--sm` ile ayni deger. */
.okuma-bar__ikon { display: inline-flex; align-items: center;
  justify-content: center; width: 16px; height: 16px; flex: 0 0 auto; }
.okuma-bar__ikon > svg { width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }

/* Çubuk sayfa sonunda içeriği kapatmasın: gövdeye kendi yüksekliği kadar
   alt boşluk verilir (sabit değer — çubuk yüksekliği sabittir). */
.js-depo .wrap--read { padding-bottom: 4.25rem; }

@media (max-width: 30em) {
  .js-depo .okuma-bar { gap: .15rem; padding: .3rem .35rem; }
  .okuma-bar__btn { min-width: 1.9rem; padding: 0 .35rem; }
  .okuma-bar__oran { min-width: 2.6rem; }
}

/* Okuma Ayarları: ses seçimi (JS ekler) */
.okuma-ayar__sec {
  margin-inline-start: auto; max-width: 60%;
  font-family: var(--f-ui); font-size: var(--t-xs);
  color: var(--ryz-ink); background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-kontrol-sinir); border-radius: var(--r-sm);
  padding: .3rem .45rem;
}
.okuma-ayar__grup button[aria-pressed="true"] {
  color: var(--ryz-on-accent); background: var(--ryz-accent);
  border-color: var(--ryz-accent);
}

@media (max-width: 40em) {
  .okuma-ayar__sec { margin-inline-start: 0; max-width: 100%; width: 100%; }
}

@media print {
  .okuma-bar { display: none !important; }
  .wrap--read { padding-bottom: 0 !important; }
}


/* ====================================================================
   TUR 5 — numaraya git formu · râvi bölüm filtresi · dekoratif görsel
   ==================================================================== */

/* ------------------------------------------------- Hadis numarasına git */
.no-git {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); background: var(--ryz-surface);
  border: var(--bw) solid var(--ryz-line); border-radius: var(--r-md);
}
.no-git__et {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ryz-ink-2);
  flex: none;
}
.no-git__alan {
  flex: 1 1 8rem; min-width: 0; max-width: 12rem;
  font-family: var(--f-ui); font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
  color: var(--ryz-ink); background: var(--ryz-bg);
  border: var(--bw) solid var(--ryz-kontrol-sinir); border-radius: var(--r-sm);
  padding: .55rem .7rem;
}
.no-git__alan:focus-visible { border-color: var(--ryz-accent); }
.no-git__yardim, .no-git__hata {
  flex: 1 0 100%; margin: 0; font-family: var(--f-ui); font-size: var(--t-2xs);
  color: var(--ryz-muted);
}
.no-git__hata { color: var(--ar-red); }

/* -------------------------------------------- râvi: Ana Bölüm daraltması */
.ravi-filtre {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--ryz-accent-wash); border-radius: var(--r-sm);
  font-family: var(--f-ui); font-size: var(--t-xs);
}
.ravi-filtre__et { color: var(--ryz-ink); font-weight: 600; }
.ravi-filtre__kaldir { margin-inline-start: auto; color: var(--ryz-accent);
  text-decoration: underline; white-space: nowrap; }
.dagilim__ad--acik { font-weight: 700; color: var(--ryz-accent); }

/* ------------------------------------ râvi kartı ortak dekoratif görseli */
picture.ravi-panel__gorsel { display: block; }
picture.ravi-panel__gorsel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md); object-fit: cover;
}
.ravi-panel__kart picture.ravi-panel__gorsel { max-width: 15rem; flex: none; }
.profil-2__sol picture.ravi-panel__gorsel { max-width: 100%; margin-bottom: var(--sp-3); }
.profil-2__sol picture.ravi-panel__gorsel img { max-height: 11rem; }

@media (max-width: 48em) {
  .ravi-panel__kart picture.ravi-panel__gorsel { max-width: 100%; }
  .ravi-panel__kart picture.ravi-panel__gorsel img { max-height: 9rem; }
  .ravi-filtre__kaldir { margin-inline-start: 0; }
}
@media (max-width: 30em) {
  .no-git__alan { max-width: none; flex: 1 1 100%; }
  .no-git__et { flex: 1 0 100%; }
}

@media print {
  .no-git, .ravi-filtre { display: none !important; }
  picture.ravi-panel__gorsel { display: none !important; }
}


/* ================================================== FINAL UI ROTUSLARI
   Yalnizca sunum: renk paleti, tipografi olcegi ve bilesen yapisi ayni.
   Yeni framework/ikon/font eklenmedi. */

/* Tek bâblı Ana Bölüm (7 bölüm): iki sütunlu ızgarada tek kart satırın
   yarısında kalıp sayfayı yarım gösteriyordu. */
.bab-satir--tek { grid-template-columns: 1fr; }

/* DOKUNMA HEDEFLERİ — 24px altındaki bağlantılar.
   Yol izine (breadcrumb) DOKUNULMAZ. */
.section__head h2 > a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.search-hints a { display: inline-block; padding-block: .45rem;
  min-width: 1.5rem; text-align: center; }

/* Râvi profili — mobilde görsel ilk ekranın ~200px'ini alıyordu; oran
   korunarak yüksekliği sınırlanır. Görsel ve içeriği DEĞİŞMEZ. */
@media (max-width: 47.99em) {
  .profil-2__sol picture.ravi-panel__gorsel img { max-height: 7rem; object-fit: cover; }
}

/* Yüzen okuma çubuğu, içeriğin SON satırını örtmesin. Çubuk yalnız hadis
   sayfasında basıldığı için kural o sayfayla sınırlıdır. */
.js-depo main:has(.okuma-bar) { padding-bottom: 3.5rem; }

/* Arama sayacı: dar ekranda "34 sonuç" iki satıra bölünüyordu. */
.section__head h2 { text-wrap: balance; }
@media (max-width: 30em) {
  .section__head { row-gap: .15rem; }
  .section__head h2 { white-space: nowrap; }
}

/* Arama sonuç satırları: mobilde satır başına ~120px gidiyordu. */
@media (max-width: 47.99em) {
  .result { padding: var(--sp-4) 0; }
  .result__title { font-size: var(--t-base); }
}

/* FOOTER — mobilde 410px'e çıkıyordu (masaüstünde 175px).
   Logo/nav/süsleme aynı; yalnız boşluklar toparlandı. */
@media (max-width: 47.99em) {
  .site-footer { margin-top: var(--sp-6); padding-block: var(--sp-5); }
  .footer-ust { gap: var(--sp-3); padding-bottom: var(--sp-4); }
  .footer-nav { gap: 0 var(--sp-4); margin-inline: 0; }
  .footer-nav a { min-height: 2.25rem; }
  .site-logo--footer { width: 176px; height: 39px; }
  .footer-sus { --ikon: 22px; margin-inline-start: auto; }
  .footer-alt { gap: .3rem; padding-top: var(--sp-3); }
}