/* =============================================================
   assets/css/hikaye_bolum.css — BÖLÜM OKUYUCU
   =============================================================
   Bu sayfa kendi görsel dilini KURMUYOR; hikayeler.css'teki sistemi
   kullanıyor. İlk sürümde sıfırdan uydurmuştum ve sayfa siteye ait
   görünmüyordu. Üç kural sistemin özeti:

     1. Merkez sütunun sol/sağ kenar çizgisi var (.stories-shell böyle).
     2. Panel = BEYAZ YÜZEY + yumuşak gölge. Çerçeve YOK (border:0).
        Gri zeminde çerçeveli-şeffaf kutu görünmez; ilk sürümün
        "alttaki kısımlar belli değil" sorunu buydu.
     3. Renkler --stories-* değişkenlerinden. Kendi renk uydurmuyoruz.
   ============================================================= */

.rdr-shell{
    box-sizing:border-box;
    min-height:100vh;
    padding:0 24px 72px;
    background:var(--stories-bg, #f3f5f7);
    border-left:1px solid #e2e5ea;
    border-right:1px solid #e2e5ea;
    color:var(--stories-text, #17191d);
}
html.dark .rdr-shell{
    --stories-bg:transparent;
    --stories-surface:rgba(16,18,24,.88);
    --stories-line:rgba(255,255,255,.10);
    --stories-line-soft:rgba(255,255,255,.075);
    --stories-text:#f3f4f6;
    --stories-muted:#b1bac6;
    --stories-soft:#98a2b1;
    background:transparent;
    border-left-color:rgba(255,255,255,.10);
    border-right-color:rgba(255,255,255,.10);
    color:#f3f4f6;
}

.rdr{
    /* Okuma tercihleri; JS yalnız bu üçünü değiştiriyor. */
    --rdr-font:18px;
    --rdr-lead:1.78;
    --rdr-measure:720px;

    max-width:var(--rdr-measure);
    margin:0 auto;
    padding:18px 0 0;
}

/* Panel: siteyle aynı — beyaz yüzey, 22px köşe, çerçeve yok, yumuşak gölge. */
.rdr-panel{
    margin-top:14px;
    padding:22px 24px 24px;
    border:0;
    border-radius:22px;
    background:var(--stories-surface, #fff);
    box-shadow:0 8px 28px rgba(15,23,42,.035);
}
html.dark .rdr-panel{box-shadow:none}
/* :first-of-type ETIKET TURUNE gore calisiyor: .rdr-toc bir <details> ve
   kendi turunun ilki oldugu icin ust bosluguu siliniyordu -- "onceki" karti
   ile "Bolumler" paneli birbirine yapisiyordu. Yalnizca ilk COCUK panel
   sifirlanmali. */
.rdr > .rdr-panel:first-child{margin-top:0}

/* ── Araç çubuğu ───────────────────────────────────────────────────────── */
.rdr-tools{
    position:sticky;top:8px;z-index:20;
    display:flex;align-items:center;gap:4px;
    width:fit-content;margin:0 0 14px auto;padding:5px;
    border-radius:999px;
    background:var(--stories-surface, #fff);
    box-shadow:0 8px 28px rgba(15,23,42,.08);
}
html.dark .rdr-tools{box-shadow:0 8px 28px rgba(0,0,0,.4)}
.rdr-tool{display:flex;align-items:center;gap:2px}
.rdr-tool-sep{width:1px;height:16px;margin:0 4px;background:var(--stories-line-soft, #edf0f3)}

.rdr-tbtn{
    display:inline-flex;align-items:center;gap:6px;
    min-height:30px;padding:5px 11px;
    border:0;border-radius:999px;background:transparent;
    color:var(--stories-muted, #687281);
    font:inherit;font-size:12.5px;font-weight:650;line-height:1;
    cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.rdr-tbtn small{font-size:10px;opacity:.7}
.rdr-tbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rdr-tbtn:hover{background:var(--stories-line-soft, #edf0f3);color:var(--stories-text, #17191d)}
html.dark .rdr-tbtn:hover{background:rgba(255,255,255,.08);color:#f3f4f6}
.rdr-tbtn[aria-pressed="true"]{background:var(--stories-text, #17191d);color:#fff}
html.dark .rdr-tbtn[aria-pressed="true"]{background:#f3f4f6;color:#17191d}
.rdr-tbtn:focus-visible{outline:2px solid var(--stories-blue, #1d9bf0);outline-offset:2px}

/* ── Künye ─────────────────────────────────────────────────────────────── */
.rdr-back{
    display:inline-flex;align-items:center;gap:5px;
    margin-bottom:18px;
    color:var(--stories-soft, #8b95a3);
    font-size:12.5px;font-weight:650;text-decoration:none;
}
.rdr-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rdr-back:hover{color:var(--stories-text, #17191d)}
html.dark .rdr-back:hover{color:#f3f4f6}

.rdr-head-main{display:flex;gap:16px;align-items:flex-start}
.rdr-cover{flex:0 0 auto;width:62px;height:86px;border-radius:14px;overflow:hidden;display:block}
.rdr-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rdr-head-copy{min-width:0;flex:1 1 auto}

.rdr-story{
    display:inline-block;
    color:var(--stories-soft, #8b95a3);
    font-size:11px;font-weight:750;letter-spacing:.09em;
    text-transform:uppercase;text-decoration:none;
}
.rdr-story:hover{color:var(--stories-blue, #1d9bf0)}

.rdr-title{
    margin:7px 0 0;
    font-size:clamp(25px,3.4vw,32px);
    font-weight:800;line-height:1.14;letter-spacing:-.028em;
}

.rdr-byline{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    margin-top:11px;
    color:var(--stories-muted, #687281);font-size:12.5px;
}
.rdr-author{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;font-weight:650}
.rdr-author img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.rdr-author:hover{color:var(--stories-blue, #1d9bf0)}
.rdr-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4}

/* ── Metin ─────────────────────────────────────────────────────────────── */
.rdr-body{
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--stories-line-soft, #edf0f3);
    font-size:var(--rdr-font);
    line-height:var(--rdr-lead);
}
.rdr[data-face="serif"] .rdr-body{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
}
.rdr[data-face="sans"] .rdr-body{font-family:inherit}

.rdr-body p{margin:0 0 1.12em}
.rdr-body h2,.rdr-body h3{margin:1.9em 0 .55em;font-weight:750;line-height:1.3;letter-spacing:-.018em}
.rdr-body h2{font-size:1.28em}
.rdr-body h3{font-size:1.1em}
.rdr-body img{max-width:100%;height:auto;border-radius:16px;margin:1.6em 0;display:block}
.rdr-body blockquote{
    margin:1.6em 0;padding:2px 0 2px 18px;
    border-left:2px solid var(--stories-line, #e2e7ec);
    color:var(--stories-muted, #687281);font-style:italic;
}
.rdr-body hr{margin:2.2em 0;border:0;border-top:1px solid var(--stories-line-soft, #edf0f3)}

.rdr-summary{
    margin:0 0 1.5em;padding-bottom:1.1em;
    border-bottom:1px solid var(--stories-line-soft, #edf0f3);
    color:var(--stories-muted, #687281);
    font-size:15px;line-height:1.6;font-style:italic;
}

/* Yazar notu: panelin içinde bir tık farklı zemin (gri ton). */
.rdr-note{
    margin-top:2.2em;padding:15px 17px;
    border-radius:16px;
    background:var(--stories-bg, #f3f5f7);
    font-size:14px;line-height:1.6;
}
html.dark .rdr-note{background:rgba(255,255,255,.05)}
.rdr-note strong{
    display:block;margin-bottom:5px;
    color:var(--stories-soft, #8b95a3);
    font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.rdr-note p{margin:0}

/* ── Beğeni ────────────────────────────────────────────────────────────── */
.rdr-actions{
    display:flex;align-items:center;gap:12px;
    margin-top:24px;padding-top:18px;
    border-top:1px solid var(--stories-line-soft, #edf0f3);
}
/* Çerçeve YOK — sitede düğmeler dolgulu yüzeydir, çizgili değil. */
.rdr-like{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 16px;border:0;border-radius:999px;
    background:var(--stories-bg, #f3f5f7);
    color:var(--stories-muted, #687281);
    font:inherit;font-size:13px;font-weight:700;cursor:pointer;
    transition:background-color .15s ease,color .15s ease;
}
html.dark .rdr-like{background:rgba(255,255,255,.06);color:#b1bac6}
.rdr-like svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.rdr-like:hover{background:#fdeaea;color:#e0245e}
html.dark .rdr-like:hover{background:rgba(224,36,94,.16);color:#ff6b96}
.rdr-like.is-on{background:#e0245e;color:#fff}
.rdr-like.is-on svg{fill:currentColor}

.rdr-edit{
    margin-left:auto;
    color:var(--stories-soft, #8b95a3);
    font-size:12.5px;font-weight:650;text-decoration:none;
}
.rdr-edit:hover{color:var(--stories-blue, #1d9bf0)}

/* ── Yol Ayrımı ────────────────────────────────────────────────────────── */
.rdr-decision-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.rdr-decision-tag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1270ad}
.rdr-decision-time{color:var(--stories-soft, #8b95a3);font-size:11.5px;font-weight:650}
.rdr-decision-q{margin:0 0 14px;font-size:17.5px;font-weight:750;line-height:1.35}

.rdr-opt-form{margin:0 0 8px}
.rdr-opt{
    position:relative;display:flex;align-items:center;gap:10px;
    width:100%;padding:12px 15px;margin-bottom:8px;
    border:0;border-radius:14px;
    background:var(--stories-bg, #f3f5f7);
    color:inherit;font:inherit;font-size:14px;font-weight:650;text-align:left;
    overflow:hidden;
}
html.dark .rdr-opt{background:rgba(255,255,255,.06)}
.rdr-opt.is-votable{cursor:pointer;transition:background-color .15s ease}
.rdr-opt.is-votable:hover{background:#e8ebef}
html.dark .rdr-opt.is-votable:hover{background:rgba(255,255,255,.1)}
.rdr-opt-fill{position:absolute;inset:0 auto 0 0;background:rgba(29,155,240,.16);pointer-events:none}
.rdr-opt-text{position:relative;flex:1 1 auto;min-width:0}
.rdr-opt-pct{position:relative;flex:0 0 auto;color:var(--stories-muted, #687281);font-size:12.5px;font-variant-numeric:tabular-nums}
.rdr-opt.is-mine{box-shadow:inset 0 0 0 2px #1d9bf0}
.rdr-opt.is-win .rdr-opt-fill{background:rgba(16,185,129,.18)}
.rdr-decision-foot{margin:10px 0 0;color:var(--stories-soft, #8b95a3);font-size:12px}

/* ── Önceki / Sonraki ──────────────────────────────────────────────────── */
/* ── Önceki / Sonraki ──────────────────────────────────────────────────────
   Iki buyuk beyaz levha "sunum slaydi" gibi duruyordu. Bunlar panel degil,
   gezinme: yuzey yok, hafif kenar var. Ileri yon vurgulu (dolu), geri yon
   sessiz (hayalet) -- okurun asil yonu ileri. Ok, metnin disinda kendi
   dairesinde duruyor ki yon metni okumadan da anlasilsin. */
.rdr-nav{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    align-items:stretch;margin-top:16px;
}
.rdr-nav-gap{display:block}
.rdr-nav-btn{
    display:flex;align-items:center;gap:11px;
    min-width:0;padding:11px 13px;
    border:1px solid var(--stories-line, #e2e7ec);
    border-radius:999px;
    background:transparent;
    color:inherit;text-decoration:none;
    transition:border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.rdr-nav-btn.is-next{justify-content:flex-end;text-align:right}
.rdr-nav-btn:hover{transform:translateY(-1px)}
.rdr-nav-btn.is-prev:hover{
    border-color:var(--stories-muted, #687281);
    background:var(--stories-surface, #fff);
}
.rdr-nav-copy{min-width:0;display:block}
.rdr-nav-btn small{
    display:block;
    color:var(--stories-soft, #8b95a3);
    font-size:10px;font-weight:700;letter-spacing:.05em;
}
.rdr-nav-btn strong{
    display:block;margin-top:2px;
    font-size:13.5px;font-weight:650;line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rdr-nav-arrow{
    flex:0 0 32px;display:grid;place-items:center;
    width:32px;height:32px;border-radius:50%;
    background:var(--stories-line-soft, #edf0f3);
    color:var(--stories-muted, #687281);
    transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.rdr-nav-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rdr-nav-btn.is-prev:hover .rdr-nav-arrow{transform:translateX(-2px)}

/* Ileri yon: sayfanin birincil eylemi. */
.rdr-nav-btn.is-next{
    border-color:#0f1419;
    background:#0f1419;
    color:#fff;
}
.rdr-nav-btn.is-next small{color:rgba(255,255,255,.62)}
.rdr-nav-btn.is-next .rdr-nav-arrow{background:rgba(255,255,255,.14);color:#fff}
.rdr-nav-btn.is-next:hover{background:#1d9bf0;border-color:#1d9bf0}
.rdr-nav-btn.is-next:hover .rdr-nav-arrow{transform:translateX(2px)}

html.dark .rdr-nav-btn{border-color:rgba(255,255,255,.12)}
html.dark .rdr-nav-btn.is-prev:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
html.dark .rdr-nav-arrow{background:rgba(255,255,255,.08);color:#c3cad2}
html.dark .rdr-nav-btn.is-next{background:#fff;border-color:#fff;color:#0f1419}
html.dark .rdr-nav-btn.is-next small{color:rgba(15,20,25,.6)}
html.dark .rdr-nav-btn.is-next .rdr-nav-arrow{background:rgba(15,20,25,.1);color:#0f1419}

@media (max-width:600px){
    .rdr-nav{grid-template-columns:1fr;gap:8px}
    .rdr-nav-gap{display:none}
    .rdr-nav-btn.is-next{justify-content:space-between}
}

/* ── Bölüm listesi ─────────────────────────────────────────────────────── */
.rdr-toc{padding:14px 18px}
.rdr-toc summary{
    cursor:pointer;list-style:none;padding:4px 0;
    color:var(--stories-text, #17191d);font-size:13.5px;font-weight:750;
}
.rdr-toc summary::-webkit-details-marker{display:none}
.rdr-toc summary span{margin-left:6px;color:var(--stories-soft, #8b95a3);font-weight:500}
.rdr-toc[open] summary{margin-bottom:6px}
.rdr-toc ol{margin:0;padding:0;list-style:none}
.rdr-toc li a{
    display:flex;align-items:center;gap:12px;
    padding:9px 10px;border-radius:12px;
    color:inherit;text-decoration:none;font-size:13.5px;
}
.rdr-toc li a:hover{background:var(--stories-bg, #f3f5f7)}
html.dark .rdr-toc li a:hover{background:rgba(255,255,255,.06)}
.rdr-toc li em{flex:0 0 22px;color:var(--stories-soft, #8b95a3);font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.rdr-toc li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdr-toc li.is-current a{background:var(--stories-bg, #f3f5f7);font-weight:750}
html.dark .rdr-toc li.is-current a{background:rgba(255,255,255,.06)}

/* ── İlerleme ──────────────────────────────────────────────────────────── */
.rdr-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:55;pointer-events:none}
.rdr-progress span{
    display:block;height:100%;
    background:var(--stories-blue, #1d9bf0);
    transform:scaleX(0);transform-origin:0 50%;
    transition:transform .12s linear;
}

/* ── Odak kipi ─────────────────────────────────────────────────────────────
   Layout'un sag/sol sutunlarini gizlemeye calismiyoruz (Tailwind sinifli,
   tutamagi yok). Okuyucu tam ekran katmana geciyor. */
html.rdr-focus-on{overflow:hidden}
/* ODAK: arkasi koyu ve camsi. Sayfanin gerisi tamamen kaybolmuyor,
   buguluyor; metin panelinin uzerinde yuzdugu hissi kaliyor.
   backdrop-filter destegi yoksa yalniz koyu zemin kalir, bozulmaz. */
html.rdr-focus-on .rdr-shell{
    position:fixed;inset:0;z-index:60;
    overflow-y:auto;
    border:0;
    padding:0 24px 72px;
    background:rgba(9,11,15,.62);
    backdrop-filter:blur(16px) saturate(120%);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
}
html.dark.rdr-focus-on .rdr-shell{background:rgba(0,0,0,.7)}
html.rdr-focus-on .rdr{padding-top:16px}
/* Koyu zeminde panel golgesi daha derin olmali, yoksa yuzmuyor. */
html.rdr-focus-on .rdr-panel,
html.rdr-focus-on .rdr-nav-btn{box-shadow:0 24px 60px rgba(0,0,0,.35)}
html.rdr-focus-on .rdr-tools{box-shadow:0 6px 18px rgba(0,0,0,.18)}
html.rdr-focus-on .rdr-progress{z-index:61}
/* Odakta gezinme dugmeleri koyu zeminde: hayalet olan gorunmez oluyordu. */
html.rdr-focus-on .rdr-nav-btn{box-shadow:none}
html.rdr-focus-on .rdr-nav-btn.is-prev{
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.06);
    color:#f2f5f8;
}
html.rdr-focus-on .rdr-nav-btn.is-prev small{color:rgba(255,255,255,.55)}
html.rdr-focus-on .rdr-nav-btn.is-prev .rdr-nav-arrow{background:rgba(255,255,255,.12);color:#f2f5f8}
html.rdr-focus-on .rdr-nav-btn.is-prev:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
html.rdr-focus-on .rdr-nav-btn.is-next{
    border-color:rgba(255,255,255,.20);
    background:rgba(255,255,255,.06);
    color:#f2f5f8;
}
html.rdr-focus-on .rdr-nav-btn.is-next small{
    color:rgba(255,255,255,.55);
}
html.rdr-focus-on .rdr-nav-btn.is-next .rdr-nav-arrow{
    background:rgba(255,255,255,.12);
    color:#f2f5f8;
}
html.rdr-focus-on .rdr-nav-btn.is-next:hover{
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.34);
}
html.rdr-focus-on .rdr-nav-btn.is-next:hover .rdr-nav-arrow{
    transform:translateX(2px);
}

/* ── Odaktan çıkış düğmesi ─────────────────────────────────────────────────
   Tam ekran bir katmanda cikis yolu ekranda gorunmeli; Esc tek basina
   kesfedilebilir degil. Odak kapaliyken tamamen yok. */
.rdr-focus-exit{display:none}
html.rdr-focus-on .rdr-focus-exit{
    /* Sol ust: arac cubugu sag hizali, dar ekranda ustuste binmesin. */
    position:fixed;top:14px;left:16px;z-index:62;
    display:inline-flex;align-items:center;gap:8px;
    height:34px;padding:0 12px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(18,22,30,.6);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    color:#eef2f6;font:inherit;font-size:12px;font-weight:650;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease;
}
html.rdr-focus-on .rdr-focus-exit:hover{background:rgba(28,34,44,.82);border-color:rgba(255,255,255,.34)}
html.rdr-focus-on .rdr-focus-exit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html.rdr-focus-on .rdr-focus-exit kbd{
    padding:1px 5px;border-radius:5px;
    background:rgba(255,255,255,.14);
    font:inherit;font-size:10px;font-weight:700;letter-spacing:.02em;
}
@media (max-width:600px){
    html.rdr-focus-on .rdr-focus-exit span{display:none}
    html.rdr-focus-on .rdr-focus-exit kbd{display:none}
    html.rdr-focus-on .rdr-focus-exit{width:34px;padding:0;justify-content:center}
}

/* ── Bulunamadı ────────────────────────────────────────────────────────── */
.rdr-missing{
    min-height:70vh;padding:80px 28px;text-align:center;
    background:var(--stories-bg, #f3f5f7);
    border-left:1px solid #e2e5ea;border-right:1px solid #e2e5ea;
}
html.dark .rdr-missing{background:transparent;border-color:rgba(255,255,255,.1)}
.rdr-missing h1{margin:0 0 8px;font-size:26px;font-weight:800}
.rdr-missing p{margin:0 0 20px;color:var(--stories-muted, #687281);font-size:14px}
.rdr-missing a{color:var(--stories-blue, #1d9bf0);font-weight:700;text-decoration:none}

@media (max-width:640px){
    .rdr-shell{padding:0 12px 48px}
    .rdr-panel{padding:18px 16px 20px;border-radius:20px}
    .rdr-nav{grid-template-columns:1fr}
    .rdr-cover{width:52px;height:72px}
    .rdr-tools{margin-right:0;width:100%;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
    .rdr-tools::-webkit-scrollbar{display:none}
    .rdr-tbtn-t{display:none}
    .rdr-tbtn[data-rdr="face"] .rdr-tbtn-t{display:inline}
}
@media (prefers-reduced-motion: reduce){.rdr-progress span{transition:none}}

/* ODAK MODU — "Bölümler" paneli de gezinme butonlarıyla aynı glass dilinde */
html.rdr-focus-on .rdr-toc{
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.06);
    color:#f2f5f8;
    box-shadow:none;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

html.rdr-focus-on .rdr-toc summary{
    color:#f2f5f8;
}

html.rdr-focus-on .rdr-toc summary span{
    color:rgba(255,255,255,.55);
}

html.rdr-focus-on .rdr-toc li a{
    color:#f2f5f8;
}

html.rdr-focus-on .rdr-toc li a:hover,
html.rdr-focus-on .rdr-toc li.is-current a{
    background:rgba(255,255,255,.10);
}

html.rdr-focus-on .rdr-toc li em{
    color:rgba(255,255,255,.55);
}


/* ── GÖRSEL ÖLÇÜSÜ (v3) ─────────────────────────────────────────────────────
   v1 SORUNU: yalnızca max-width:100% vardı; yükseklik serbestti. Dikey bir
   fotoğraf ekranın üç katı yüksekliğe çıkıp metni ikiye bölüyordu.

   v2 SORUNU (benim hatam): yüksekliği sınırlayıp genişliği serbest bıraktım
   (width:auto). Dikey görsel dar ve uzun bir şeride dönüştü, metin sütununun
   ortasında "telefon ekranı yapıştırılmış" gibi durdu.

   v3: EDİTÖRYEL DAVRANIŞ. Görsel ölçü genişliğini TAM kaplar, yükseklik bir
   tavanla sınırlanır, taşan kısım object-fit ile kırpılır. Yatay ve kısa
   görseller hiç kırpılmaz — doğal yüksekliğinde çıkar. Yalnızca tavanı aşan
   (yani dikey) görseller kırpılır.

   Bedeli: dikey fotoğraflar ortadan kırpılır. Alternatifi dar şerit görünüm
   olduğu için bilinçli tercih. object-position ile üst/alt kayması yok.  */
.rdr-body img{
    display:block;
    width:100%;
    height:auto;
    max-height:clamp(280px, 46vh, 460px);
    object-fit:cover;
    object-position:center;
    margin:1.7em 0;
    border-radius:16px;
}

/* Odak kipinde alan geniş; tavan biraz yüksek. */
html.rdr-focus-on .rdr-body img{
    max-height:clamp(320px, 54vh, 540px);
}

@media (max-width:640px){
    .rdr-body img{
        max-height:clamp(220px, 42vh, 360px);
        margin:1.4em 0;
        border-radius:14px;
    }
    html.rdr-focus-on .rdr-body img{max-height:clamp(240px, 46vh, 400px)}
}

/* figure/figcaption kullanılıyorsa aynı ölçüye girsin. */
.rdr-body figure{margin:1.7em 0}
.rdr-body figure img{margin:0}
.rdr-body figcaption{
    margin-top:.6em;
    color:var(--stories-soft, #8b95a3);
    font-size:12.5px;line-height:1.5;text-align:center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KİTAP DÜZENİ — iki sayfalı okuma, sayfa çevirme
   ═══════════════════════════════════════════════════════════════════════════
   NASIL ÇALIŞIYOR: metin CSS `columns` ile sütunlara bölünüyor ve kabın
   yüksekliği sabitleniyor. Sığmayan içerik SAĞA taşıyor, yani tarayıcı
   metni kendi sayfalıyor. Biz de kabı yatay kaydırarak sayfa çeviriyoruz.
   epub okuyucuların yöntemi bu; JS ile kelime sayıp bölmek kırılgan olurdu.

   Yükseklik JS'te SATIR YÜKSEKLİĞİNİN TAM KATINA yuvarlanıyor — yoksa
   sayfanın altında yarım kesilmiş bir satır kalır, en sık görülen kusur bu.

   Yalnızca odak kipinde ve geniş ekranda açılıyor; dar ekranda iki sütun
   okunmaz, normal akışa dönülüyor.
   ═══════════════════════════════════════════════════════════════════════════ */

.rdr-book-view{
    position:relative;
    overflow:hidden;
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--stories-line-soft, #edf0f3);
}

/* Kitap kipindeyken metnin kendi üst çizgisi/boşluğu kaba devredildi. */
.rdr-read.is-book .rdr-body{
    margin:0;
    padding:0;
    border-top:0;
    column-fill:auto;              /* şart: sütunlar dengelenmesin, sırayla dolsun */
    transform:translateX(0);
    transition:transform .42s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}
@media (prefers-reduced-motion: reduce){
    .rdr-read.is-book .rdr-body{transition:none}
}

/* Sütun ortasında kırılmaması gereken parçalar. Bir görselin yarısı bir
   sayfada yarısı diğerinde kalırsa düzen çöker. */
.rdr-read.is-book .rdr-body img,
.rdr-read.is-book .rdr-body figure,
.rdr-read.is-book .rdr-body blockquote,
.rdr-read.is-book .rdr-body h2,
.rdr-read.is-book .rdr-body h3,
.rdr-read.is-book .rdr-body .rdr-note{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
}
.rdr-read.is-book .rdr-body h2,
.rdr-read.is-book .rdr-body h3{break-after:avoid}
.rdr-read.is-book .rdr-body p{orphans:2;widows:2}

/* Kitap kipinde görsel sütun yüksekliğini aşmamalı; aşarsa sayfalama kırılır.
   Tavan JS'ten --rdr-book-imgmax ile geliyor. */
.rdr-read.is-book .rdr-body img{
    max-height:var(--rdr-book-imgmax, 300px);
}

/* Cilt payı: iki sayfa arasındaki ince çizgi. Kitap hissini bu veriyor. */
.rdr-read.is-book .rdr-book-view::after{
    content:'';
    position:absolute;top:20px;bottom:0;left:50%;
    width:1px;
    background:var(--stories-line-soft, #edf0f3);
    pointer-events:none;
}
html.dark .rdr-read.is-book .rdr-book-view::after{background:rgba(255,255,255,.08)}
.rdr-read.is-book.is-single .rdr-book-view::after{display:none}

/* Tıklama alanları: sayfanın sol/sağ kenarı. Metnin üstüne binmiyor,
   yalnız kenar şeritleri. */
.rdr-book-zone{
    position:absolute;top:0;bottom:0;width:11%;
    z-index:2;border:0;padding:0;background:transparent;
    cursor:pointer;
}
.rdr-book-zone.is-prev{left:0}
.rdr-book-zone.is-next{right:0}
.rdr-book-zone:disabled{cursor:default}
.rdr-book-zone:focus-visible{outline:2px solid var(--stories-blue, #1d9bf0);outline-offset:-4px}

/* Alt şerit: ok düğmeleri + sayfa sayacı */
.rdr-book-bar{
    display:flex;align-items:center;justify-content:center;gap:16px;
    margin-top:16px;padding-top:14px;
    border-top:1px solid var(--stories-line-soft, #edf0f3);
}
.rdr-book-btn{
    display:inline-grid;place-items:center;
    width:36px;height:36px;
    border:0;border-radius:50%;
    background:var(--stories-bg, #f3f5f7);
    color:var(--stories-muted, #687281);
    cursor:pointer;
    transition:background-color .15s ease,color .15s ease,opacity .15s ease;
}
.rdr-book-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rdr-book-btn:hover:not(:disabled){background:var(--stories-text, #17191d);color:#fff}
.rdr-book-btn:disabled{opacity:.3;cursor:default}
html.dark .rdr-book-btn{background:rgba(255,255,255,.07);color:#b1bac6}
html.dark .rdr-book-btn:hover:not(:disabled){background:#f3f4f6;color:#17191d}

.rdr-book-count{
    min-width:74px;text-align:center;
    color:var(--stories-muted, #687281);
    font-size:12.5px;font-weight:650;
    font-variant-numeric:tabular-nums;
}

/* Araç çubuğundaki Kitap/Akış düğmesi .rdr-tbtn stilini kullanıyor;
   ek kural gerekmiyor. */