/* VideoAniKitap — Bootswatch "Materia" uyarlaması (Material Design).
   Taban tema: bootswatch/materia (Roboto, mavi birincil, düz yüzeyler + yükseklik gölgeleri).
   Buradaki özel sınıflar palet/biçim olarak Materia'ya çekildi; yapısal sınıflar korundu.
   İmza el-yazması (edebi metin) paneli okunabilirlik için serif KALIR (Materia renkleriyle).
   Türkçe için butonlarda/etiketlerde UPPERCASE kullanılmaz (İ/ı sorunlarını önlemek için). */

:root{
  /* Ortak: yarıçap + ease-out geçiş + UI fontu */
  --r-kart:.6rem; --r-kontrol:.5rem;
  --gecis:.16s cubic-bezier(.22,.61,.36,1);
  --bs-border-radius:var(--r-kontrol);
  --bs-font-sans-serif:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Yapışkan üst barın yaklaşık yüksekliği (py-2 + 2.3rem'lik en uzun öğe + 1px kenarlık).
     Bar altına konumlanan sticky paneller + çapa kaydırma payları (scroll-margin) bunu kullanır. */
  --ustbar-h:3.4rem;
}

/* ===== AÇIK tema (varsayılan) — canlı "yazılım" paleti: serin slate + vivid indigo + amber ===== */
:root, [data-bs-theme="light"]{
  --surface:#f3f4f8; --paper:#ffffff; --ust:#ffffff;
  --ink:#0f1729; --ink-2:#3a4256; --muted:#6b7384; --line:#e4e7f0;
  --primary:#5b5ef0; --primary-2:#4843e6; --primary-tint:#ececfe;
  /* BUTONLAR (v1.12.7, kullanıcı isteği "arka plan rengi olan buton — zeminde kaybolmasın"):
     --btn-solid   = nötr butonların (btn-ghost / tema-btn) TAM DOLGUsu (+ beyaz yazı) · hover --btn-solid-2.
     --btn-zemin   = SEGMENT/ANAHTAR gruplarının PASİF üyesi (orta dolgu) — hepsi solid olsaydı seçili ayırt edilemezdi.
     Pasif vurgular (satır seçimi, rozetler) --primary-tint'te kalır. */
  --btn-solid:var(--primary); --btn-solid-2:var(--primary-2);
  --btn-zemin:#d9dbfa;
  --gilt:#e08a00; --gilt-2:#b86f00; --gilt-tint:#fff3df;
  --mavi:#2f7ad6; --mavi-tint:#e8f1fb; --yesil:#12a571; --yesil-2:#0b8a5d; --yesil-tint:#e3f6ef;
  --danger:#e0483f; --danger-2:#c33a32; --danger-tint:#fdece9;
  /* SESLİ OKUMADA OKUNAN KELİME (.kl-aktif) — FOSFORLU KALEM etkisi: yumuşak kırmızı zemin + ALTINDA
     doygun kırmızı çizgi. Kelimeyi yakalatan asıl işaret ÇİZGİdir; zemin yalnız onu taşır.
     ⚠ Tam dolgu kırmızı + beyaz yazı DENENDİ ve GERİ ALINDI (02-08): kitap sayfasında "bağırıyor",
     sayfalarca dinlenen bir metinde yorucu. Eski amber tint ise sayfadan yalnız 1.1x ayrışıyordu
     (pratikte görünmez). Bugünkü değerler: zemin 1.46x ayrışma, yazı 12x okunurluk, çizgi 3x.
     --kl-arka-yazi = yalnız "Arka planlı" BİÇİMİNDE (dolu kırmızı zemin) kullanılan yazı rengi. */
  --kl-vurgu:#ffc9c4; --kl-cizgi:#e0483f; --kl-arka-yazi:#fff;
  --golge:0 1px 2px rgba(16,23,41,.05), 0 6px 16px rgba(16,23,41,.07);
  --golge-2:0 16px 40px rgba(16,23,41,.16);
  --bs-primary-rgb:91,94,240;

  /* ═══ OKUMA SAYFASI YÖNETİM MODU — İKİ RENK SİSTEMİ (v1.24.0, kullanıcı kararı 15-08) ═══
     ⚠ İKİSİ AYRI ŞEY SÖYLER, AYRI YERLERDE YAŞAR — birbirine karıştırma:
       KİMLİK (--t-*) = "bu METİN ne" → blok kartının üst şeridi · tür rozeti · blok başlığı · drop-cap
       EYLEM  (--e-*) = "bu DÜĞME ne yapar" → butonların dolgusu (her yerde aynı anlam)
     Kimlik rengi bloktan bloğa değişir, eylem rengi DEĞİŞMEZ: ses düğmesi turuncu blokta da yeşil
     blokta da turuncudur. Birleştirilirse renk bilgi taşımayı bırakır, süse döner.
     ⚠ MEVCUT TOKEN'LAR DEĞİŞTİRİLMEDİ (--surface/--paper/--line…): bu sayfa dışındaki her ekran
       onlara bağlı. Buradaki hepsi YENİ isimdir → başka sayfa etkilenmez (kullanıcı şartı 15-08:
       "sadece /kitap/{id}/oku"). --zemin de yalnız body.oku-yonetim'de kullanılır. */
  --zemin:#e8eaf2;
  /* --line-2 = kenarlığın BELİRGİN hâli (bölüm çerçevesi · modal kapat düğmesi · durum çipi):
     --line kart içi ince ayraçlar için doğru ama bölümü sayfadan ayırmaya yetmiyor.
     --btn-zemin-2 = nötr düğmenin hover'ı. İkisi de YENİ token (mevcutlara dokunulmadı). */
  --line-2:#cdd2e2; --btn-zemin-2:#c9cfe4;
  --t-edebi:#c8323f; --t-edebi-tint:#fdecee;
  --t-man1:#cc640c;  --t-man1-tint:#fff1e3;
  --t-man3:#1f8a52;  --t-man3-tint:#e6f5ec;
  --t-ozet:#8a6240;  --t-ozet-tint:#f5ece2;
  /* Dolgu renkleri BEYAZ YAZIYLA kontrast gözetilerek koyulaştırıldı (parlak tonlar 3:1'in altında kalıyordu) */
  --e-duzen:#0b8a5d;  --e-duzen-2:#097a51;
  --e-ses:#c2570b;    --e-ses-2:#a84a08;   --e-ses-tint:#fff0e2;
  --e-sil:#c33a32;    --e-sil-2:#a92f28;
  --e-yapi:#2467bb;   --e-yapi-2:#1d569f;
  --e-gorsel:#5b5ef0; --e-gorsel-2:#4843e6;
}

/* ===== KOYU tema — derin ink slate + parlak indigo/amber (dev-tool havası) ===== */
[data-bs-theme="dark"]{
  --surface:#0c0e13; --paper:#171a22; --ust:#12141b;
  --ink:#eef1f8; --ink-2:#c5ccdb; --muted:#878fa1; --line:#272c38;
  --primary:#7e82ff; --primary-2:#9a9dff; --primary-tint:#20233b;
  /* BUTONLAR: koyu temada --primary AÇIK bir ton (beyaz yazıyla kontrastı zayıf) → solid dolgu için
     ORTA-koyu doygun indigo ayrıca verilir; hover bir tık parlağı. --btn-zemin = segment pasif üyesi. */
  --btn-solid:#5257e6; --btn-solid-2:#6b70fa;
  --btn-zemin:#2e3364;
  --gilt:#f4b13a; --gilt-2:#facc5a; --gilt-tint:#2a2413;
  --mavi:#4f97ec; --mavi-tint:#15243a; --yesil:#22c891; --yesil-2:#3ad9a4; --yesil-tint:#0f2a22;
  --danger:#f0675d; --danger-2:#f8837a; --danger-tint:#2e1a18;
  /* Koyu temada aynı fikir ZIT yönde: koyu kızıl zemin + PARLAK kırmızı çizgi. Koyu sayfada asıl
     yakalayan şey çizginin parlaklığıdır (zeminden 4.9x), zemin ise 1.44x ile yerini belli eder.
     ⚠ "Arka planlı" biçimde yazı KOYU olur: parlak kırmızı zemin üzerinde beyaz yazı okunmuyordu. */
  --kl-vurgu:#582823; --kl-cizgi:#ff6b60; --kl-arka-yazi:#1a0b09;
  --golge:0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.42);
  --golge-2:0 18px 50px rgba(0,0,0,.6);
  --bs-primary-rgb:126,130,255;

  /* OKUMA SAYFASI YÖNETİM MODU — koyu eşleri (açıklama açık tema bloğunda).
     ⚠ --zemin SAYFANIN kendisidir ve --surface'ten (#0c0e13) DAHA KOYU: kullanıcı bildirimi 15-08
       "koyu modda arka renk daha da siyah olsun, içerdeki bg renkleri ile karışıyor" — blok kartının
       araç şeridi --surface, kâğıdı --paper; sayfa da --surface olunca üç katman ikiye düşüyordu.
     ⚠ Kimlik renkleri koyu zeminde PARLAK, eylem dolguları ORTA-KOYU (beyaz yazı okunsun) — ikisi
       farklı işler yapar, aynı tonda olmaları gerekmez. */
  --zemin:#040508;
  --line-2:#3a4257; --btn-zemin-2:#3c445a;
  --t-edebi:#ff7d88; --t-edebi-tint:#33191d;
  --t-man1:#ffa24f;  --t-man1-tint:#33220f;
  --t-man3:#4bd196;  --t-man3-tint:#122b1f;
  --t-ozet:#cba17a;  --t-ozet-tint:#2b2118;
  --e-duzen:#0f9e6b;  --e-duzen-2:#17b57c;
  --e-ses:#c96a12;    --e-ses-2:#e07c1c;   --e-ses-tint:#33220f;
  --e-sil:#cf4b42;    --e-sil-2:#e05d53;
  --e-yapi:#2f7ad6;   --e-yapi-2:#4090e8;
  --e-gorsel:#5257e6; --e-gorsel-2:#6b70fa;
}

/* Bootstrap 5.3 değişkenlerini palete bağla (var() ile her iki temada da geçerli) */
:root{
  --bs-primary:var(--primary);
  --bs-body-color:var(--ink-2); --bs-body-bg:var(--surface);
  --bs-link-color:var(--primary); --bs-link-hover-color:var(--primary-2);
  --bs-border-color:var(--line); --bs-emphasis-color:var(--ink);
}
/* Tüm metni bir kademe büyüt: rem tabanlı tüm font boyutları (Bootstrap + özel sınıflar) kök font'a göre
   ölçeklenir. %106.25 ≈ 16px → 17px (≈ +1 punto). px yerine % kullanıldı ki kullanıcının tarayıcı font
   tercihi korunsun. Daha büyük istenirse %112.5 (18px) yapılabilir. */
html{ font-size:106.25%; }
body{ background:var(--surface); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink-2); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Üst bar — açık/editöryel: kâğıt zemin + ince hairline + yumuşak gölge (renkli Material bar yerine).
   YAPIŞKAN: aşağı inince ekranın üstünde sabit kalır (sticky → fixed'in aksine yer kaplar, padding telafisi
   gerekmez). z-index 1030 = Bootstrap navbar katmanı; modal (1050+) ve toast (1080) ÜSTTE kalır. */
/* ⚠ ÜST BAR YAZI ÖLÇEĞİNDEN BAĞIMSIZDIR (v1.22.0 — kullanıcı kararı 06-08: "font yükseltme/azaltmada üst nav
   sabit kalacak, diğer yerler yükselecek"). A−/A+ kök font YÜZDESİNİ değiştirir (core.js > fontOlcekDegis) ve
   bar dahil rem tabanlı HER ölçü onunla büyürdü; menü/A−A+/hesap sıkışıp hamburger'e düşüyordu. Artık bar
   TERS ÖLÇEKLE geri alınır: --bar-olcek = taban / güncel (core.js > barOlcekUygula, açılışta _Layout head).
   ⚠ zoom KULLANILIR, transform:scale DEĞİL: scale yeni bir containing block yaratır ve position:sticky'yi
     bozardı (bar sayfayla birlikte kayardı). zoom layout'u gerçekten ölçekler → sticky, absolute hamburger
     paneli ve getBoundingClientRect ile bar alt kenarını ÖLÇEN yapışkan şeritler (okuses.js > ustCizgi,
     okumobil.js > seritHtml) doğru çalışmayı sürdürür.
   ⚠ rem'i em'e çevirmek ÇÖZMEZDİ: rem daima <html>'e bakar ve bar içindeki Bootstrap yardımcı sınıfları
     (btn-sm · gap-2 · dropdown-menu · badge) da rem tabanlıdır — onlar yine büyürdü.
   ⚠ zoom desteklenmeyen tarayıcıda kural yok sayılır → bar eskisi gibi büyür; o durum için core.js
     hamburger eşiğini ölçekle çarpmaya geri döner (CSS.supports kontrolü orada).

   ⚠⚠ KURAL BURADA DEĞİL, ÇALIŞMA ANINDA ENJEKTE EDİLEN <style id="barOlcekStil"> İÇİNDE (v1.22.6 düzeltmesi).
   İlk sürüm `zoom:var(--bar-olcek,1)` yazıyordu ve ETKİSİZ kaldı (kullanıcı bildirimi 06-08: "font
   yükseltme/azaltmada menü hâlâ hareket ediyor"). İKİ ayrı sebep vardı, ikisi de düzeltildi:
     1) `zoom` legacy bir özelliktir; `var()` ile verilen değeri güvenilir biçimde çözmüyor → değer artık
        JS tarafından SAYI olarak yazılıyor (core.js > barStilYaz + _Layout head script'i, FOUC'suz).
     2) zoom uygulansa BİLE bar içeriği ortada sıkışıyordu: `.container-xxl`in max-width'i PX SABİTİDİR ve
        zoom'lu koordinatta yorumlandığı için ekranda `1320 × ölçek` kadar yer kaplıyordu. Bu yüzden aynı
        stil kapsayıcıya TERS ölçekli bir max-width de yazar (kap / ölçek) → içerik yine tam genişlikte durur. */
.ustbar{ position:sticky; top:0; z-index:1030; background:var(--ust); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.04); }
.ustbar .marka{ color:var(--ink); }
.ustbar .alt-yazi{ color:var(--muted); }
/* TEK SATIR üst bar: logo rozeti solda, menü sağa; taşmaz. Dar ekranda menü HAMBURGER panelinde toplanır. */
.ustbar-ic{ flex-wrap:nowrap; min-width:0; }
/* ⚠ Marka KIRPILABİLİR (flex:0 1 + ellipsis), daralmaz DEĞİL: bar sıkışınca ilk feda edilecek öğe odur
   (logo rozeti kalır, uygulama adı kısalır). Eskiden flex:0 0 idi → yer kalmayınca komşularının ÜSTÜNE
   biniyordu; kırpma çirkin ama okunur, binme okunmaz. */
.marka-link{ flex:0 1 auto; min-width:0; overflow:hidden; }
.marka-link .marka{ color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.marka-logo{ width:2rem; height:2rem; border-radius:.5rem; flex:none; font-size:1.05rem; color:#fff;
  background:var(--primary); display:inline-flex; align-items:center; justify-content:center; }
.ustbar-nav{ flex-wrap:nowrap; align-items:center; }   /* utility DEĞİL: panelde "stretch"e dönebilsin (aşağıda) */
.ustbar .sekme{ white-space:nowrap; padding:.45rem .7rem; }
/* Hesap alanı bar'ın SAĞ ÇIPASI: asla küçülmez, asla sarmaz (tema/çıkış tek dokunuşta kalmalı).
   Yalnız kullanıcı ADI kırpılır — büyük fontta uzun ad marka ile hesap rozetini üst üste bindiriyordu. */
.kullanici-alani{ flex:0 0 auto; min-width:0; }
/* Yazı boyutu (A−/A+) — hesap alanı gibi barın SABİT çıpası: hamburger panelinin DIŞINDADIR, yani
   her ekran genişliğinde ve her yazı ölçeğinde GÖRÜNÜR (v1.21.6, kullanıcı kararı 04-08).
   ⚠ flex:none ŞART: dar barda sıkışıp iki düğme birbirine binmesin — bar sıkışınca feda edilecek öğe
     marka yazısıdır (yukarıdaki .marka-link kırpması), yazı boyutu değil. */
.ustbar-boyut{ flex:none; }
.kullanici-alani .dropdown-toggle{ max-width:min(14rem, 38vw); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

/* ---- MOBİL HAMBURGER MENÜ (v1.19.5) ------------------------------------------------------------
   ESKİDEN: dar ekranda bar YATAY KAYDIRILIYORDU (.ustbar-ic{overflow-x:auto; overflow-y:hidden}).
   İki derdi vardı: (1) barın SAĞ ucundaki hesap dropdown'ı ekranın dışında kalıyordu — kullanıcı onu
   hiç göremiyor, tema/çıkışa ulaşamıyordu; (2) overflow-y:hidden açılan dropdown PANELİNİ de kırpıyordu,
   yani kaydırıp bulsa bile menü okunmuyordu. Kaydırmalı bar ayrıca "orada bir şey var" ipucu vermez.
   ŞİMDİ: gezinme + sürüm rozeti tek bir açılır panelde; hesap dropdown'ı ile YAZI BOYUTU (A−/A+) BARDA
   kalır — ikisi de "tek dokunuşta erişilsin" diye panelin dışında tutulur (A−/A+ için v1.21.6).

   ⚠ PANEL position:absolute — menü açılınca bar YÜKSEKLİĞİ DEĞİŞMEZ. Şart, süs değil: okuma sayfasının
     yapışkan şeritleri (okumobil.js > seritHtml, okuses.js > ustCizgi) .ustbar'ın ALT KENARINI ölçerek
     kendi top'larını yazar; panel barı uzatsaydı o ölçüm bayatlar, şerit metnin üstüne binerdi.
   ⚠ DOM TEK KOPYA: aynı düğüm masaüstünde düz satır, mobilde panel olur (yalnız CSS değişir). Ayrı bir
     mobil kopya render edilseydi temaBtn/fontEksi/fontArti id'leri çiftlenir, core.js ilk kopyaya
     kilitlenirdi. Bu yüzden "geniş ekranda collapse'ı iptal et" kuralı ŞART (Bootstrap navbar-expand deseni). */
/* ⚠ display'i .ustbar ile NİTELE (0,2,0): hamburger .tema-btn sınıfını da taşır ve o kural bu bloğun
   ALTINDA tanımlıdır → eşit ağırlıkta olsa "display:inline-flex" kazanır, düğme masaüstünde de görünürdü. */
.ustbar-ac{ flex:none; font-size:1.15rem; }
/* ⚠ EŞİK MEDYA SORGUSU DEĞİL, SINIF (v1.19.6 — kullanıcı bildirimi 03-08: "masaüstünde fontu çok büyütünce
   menü iç içe girmiş"). Sebep: bar içeriği REM tabanlıdır (A+ ile kök font %150'ye çıkınca ~1,4 kat büyür),
   ama `@media (max-width:1100px)` bunu GÖREMEZ — medya sorgularındaki uzunluklar sayfanın html{font-size}
   ayarını YOK SAYAR (px sabit kalır, em/rem ise tarayıcının BAŞLANGIÇ font boyutuna göre çözülür). Sonuç:
   1100px üstü ekranda "geniş = tek satır" düzeni sığmayan içerikle sürüyor, nowrap + min-width:0 yüzünden
   öğeler sıkışıp birbirinin üstüne biniyordu.
   ŞİMDİ: eşiği JS hesaplar (core.js > barModGuncelle) ve <html>'e .bar-dar yazar → hem dar ekran hem
   büyük font AYNI kapıdan hamburger'e düşer.
   ⚠ KIYAS PENCEREYE DEĞİL, BARIN KAPSAYICISINA (v1.21.1 — kullanıcı bildirimi 04-08: "geniş ekranda
     fontu büyütünce menü ile A−/A+ yine birbirine giriyor"). .container-xxl max-width'i px sabittir
     (≥1400px pencerede 1320) → pencere büyüse de bara ayrılan yer orada durur, içerik ise fontla büyür;
     innerWidth'e bakan ilk formül bu yüzden 1920px ekranda "geniş" deyip sıkışmayı sürdürüyordu.
     Eşik (core.js > BAR_ESIK), barın tek satırda istediği ÖLÇÜLMÜŞ genişliktir — bara sekme/rozet
     ekleyip çıkarınca YENİDEN ÖLÇÜLÜR (v1.21.2'de "Kullanım" sekmesi hesap menüsüne taşınınca 1080 -> 1000).
   ⚠ İlk boyamadan önce _Layout <head>'indeki FOUC'suz script aynı hesabı yapar (tema/font ile aynı yerde);
     ikisi AYNI formülü kullanmalı, ayrışırsa sayfa açılışta bir düzende, ilk resize'da başka düzende olur. */
html:not(.bar-dar) .ustbar .ustbar-ac{ display:none; }
/* Geniş: collapse'ı ETKİSİZLEŞTİR (.collapse{display:none} ezilir) → bugünkü tek satır düzeni. */
html:not(.bar-dar) .ustbar-menu{ display:flex !important; flex:1 1 auto; align-items:center; gap:.5rem; min-width:0; }
html:not(.bar-dar) .ustbar-menu .ustbar-nav{ margin-left:auto; }   /* menü sağa yaslanır (eski ms-auto'nun yerine) */
html.bar-dar .ustbar-ic{ position:relative; }                /* panelin konum referansı: bar içeriği (marka ile hizalı) */
html.bar-dar .ustbar .ustbar-ac{ display:inline-flex; order:3; }
/* Dar barın SAĞ bloğu: [A− A+] · [hesap] · [hamburger] — üçü yan yana, sağa toplu.
   ⚠ margin-left:auto artık YAZI BOYUTU grubundadır (v1.21.6): A−/A+ panelden bara taşındı ve sıranın
     BAŞINDA duruyor; boşluk hesapta kalsaydı A−/A+ markanın dibine yapışır, sağ blok ikiye bölünürdü. */
html.bar-dar .ustbar-boyut{ margin-left:auto; order:1; }
html.bar-dar .kullanici-alani{ order:2; }
html.bar-dar .ustbar-menu{ position:absolute; top:calc(100% + .45rem); left:0; right:0; z-index:20;
  background:var(--ust); border:1px solid var(--line); border-radius:var(--r-kart);
  box-shadow:var(--golge); padding:.5rem; }
html.bar-dar .ustbar-menu .ustbar-nav{ flex-direction:column; align-items:stretch; gap:.15rem; }
html.bar-dar .ustbar-menu .sekme{ padding:.65rem .8rem; }    /* dokunma hedefi: satırlar tam genişlik */
/* Panelin alt satırı: yalnız SÜRÜM ROZETİ (solda). A−/A+ v1.21.6'da bardan ayrılmaz oldu → buradan
   çıktı; rozeti sola tutan `margin-right:auto` da onunla birlikte kalktı (tek öğe zaten solda durur). */
html.bar-dar .ustbar-arac{ margin-top:.45rem; padding-top:.55rem; border-top:1px solid var(--line); }
/* Yazılım wordmark'ı: sıkı Inter (serif yerine) — başlıklarda da kullanılır */
.marka{ font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:700; color:var(--ink); letter-spacing:-.022em; }
.marka .nokta{ color:var(--primary); }
.alt-yazi{ color:var(--muted); font-size:.85rem; line-height:1.45; }

/* Tema değiştir butonu (üst bar) */
.tema-btn{ background:var(--btn-solid); border:none; color:#fff; width:2.3rem; height:2.3rem;
  border-radius:var(--r-kontrol); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:1rem; transition:background var(--gecis), color var(--gecis), border-color var(--gecis); }
.tema-btn:hover{ background:var(--btn-solid-2); color:#fff; }
.tema-btn:disabled{ opacity:.45; cursor:default; }
/* A− / A+ yazı boyutu butonlarının içeriği (core.js > fontOlcekDegis) */
.tema-btn .aboyu{ font-size:.78rem; font-weight:700; line-height:1; letter-spacing:-.02em; }

/* Sekmeler / nav linkleri (açık üst barda) */
.sekme{ border:none; background:none; color:var(--muted); font-weight:500; padding:.5rem .9rem;
  border-radius:var(--r-kontrol); text-decoration:none; transition:background var(--gecis), color var(--gecis); }
.sekme:hover{ background:var(--surface); color:var(--ink); }
.sekme.aktif{ background:var(--primary-tint); color:var(--primary-2); }
/* Üst bar tahmini toplam maliyet rozeti (MaliyetRozet ViewComponent) — token bazlı, iki tema uyumlu */
.maliyet-rozet{ display:inline-flex; align-items:center; gap:.15rem; font-size:.82rem; font-weight:700;
  background:var(--gilt-tint); color:var(--gilt-2); padding:.3rem .65rem; border-radius:999px;
  text-decoration:none; white-space:nowrap; transition:box-shadow var(--gecis), transform var(--gecis); }
.maliyet-rozet:hover{ color:var(--gilt-2); box-shadow:var(--golge); transform:translateY(-1px); }

/* Bakiye drawdown rozeti (yüzde + mini bar) — seviye renkleri Bootstrap subtle değişkenleriyle iki tema uyumlu */
.bakiye-rozet{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700;
  padding:.3rem .6rem; border-radius:999px; text-decoration:none; white-space:nowrap;
  background:var(--gilt-tint); color:var(--gilt-2); transition:box-shadow var(--gecis), transform var(--gecis); }
.bakiye-rozet:hover{ box-shadow:var(--golge); transform:translateY(-1px); }
.bakiye-bar{ width:3.1rem; height:.45rem; border-radius:999px; background:var(--line); overflow:hidden; display:inline-block; }
.bakiye-bar-ic{ display:block; height:100%; background:currentColor; border-radius:999px; transition:width var(--gecis); }
.bakiye-rozet.seviye-uyari{ background:var(--bs-warning-bg-subtle); color:var(--bs-warning-text-emphasis); }
.bakiye-rozet.seviye-kritik{ background:var(--bs-danger-bg-subtle); color:var(--bs-danger-text-emphasis); }

/* Hesap menüsü (üst bar kullanıcı dropdown'ı — v1.12.4): maliyet rozeti + tema + yönetim + çıkış üst bardan
   buraya taşındı (bar sıkışmıştı). Renkler Bootstrap data-bs-theme + token'lardan gelir → iki temada da otomatik. */
/* GENİŞLİK — üç kural BİRLİKTE doğru (v1.21.8; ölçülerek çözüldü, gözle değil):
   1) min-width 19.5rem: en geniş satır "Maliyet / Bakiye" + bakiye rozetidir ve tasarım fontunda
      149+17+116 = 282px ister; eski 15.5rem (=264px, iç payla 230px kullanılabilir) YETMİYORDU →
      space-between ile rozet etiketin ÜSTÜNE biniyordu (36px örtüşme, "…kiye" rozetin altında kalıyordu).
      Ölçü REM olduğu için A+/A− ile satır ihtiyacıyla BİRLİKTE ölçeklenir → her yazı boyutunda tek satır.
   2) min() + max-width: CSS'te MIN-WIDTH, MAX-WIDTH'İ EZER → min-width'i tek başına bırakmak menüyü
      dar ekranda taşırırdı (telefon + %180 yazı: 19.5rem = 562px, ekran 375px). Pay 1.5rem, 576px
      medya bloğundaki genel .dropdown-menu kuralıyla AYNI (iki sınır ayrışmasın).
   3) flex-wrap: dar ekranda (2) devreye girip satır artık sığmayınca rozet ALT SATIRA iner. Rozet
      küçülemez (nowrap + sabit genişlikte bar) → tek seçenek sarmadır; olmazsa yine binerdi. */
.kullanici-dd{ min-width:min(19.5rem, calc(100vw - 1.5rem)); max-width:calc(100vw - 1.5rem);
  box-shadow:var(--golge); border-radius:var(--r-kontrol); }
.kullanici-dd .dropdown-item{ font-weight:600; flex-wrap:wrap; }
/* BULUNULAN SAYFA (v1.22.17) — /kullanim ve /yonetim satırları o sayfadayken `active` alır (_KullaniciMenu).
   Renk Bootstrap'in kendi dropdown DEĞİŞKENLERİ üzerinden ezilir (kural yazmak yerine): hover/focus davranışı
   Bootstrap'te kalır, iki tema da token'dan gelir. Ezilmezse satır Bootstrap'in SABİT mavisiyle (#0d6efd)
   boyanır — üst bardaki .sekme.aktif ile aynı ekranda iki farklı "aktif" rengi olurdu. */
.kullanici-dd{ --bs-dropdown-link-active-bg:var(--primary-tint); --bs-dropdown-link-active-color:var(--primary-2); }

/* /kullanim sayfasındaki büyük bakiye çubuğu */
.bakiye-cubuk{ height:.7rem; border-radius:999px; background:var(--line); overflow:hidden; }
.bakiye-cubuk-ic{ height:100%; border-radius:999px; background:var(--gilt-2); transition:width var(--gecis); }
.bakiye-durum.seviye-uyari .bakiye-cubuk-ic{ background:var(--bs-warning); }
.bakiye-durum.seviye-kritik .bakiye-cubuk-ic{ background:var(--bs-danger); }

/* Kartlar — yükseklik kenarlık yerine YUMUŞAK gölgeyle (craft ilkesi) */
.panel-kart{ background:var(--paper); border:none; border-radius:var(--r-kart); box-shadow:var(--golge); }

/* ---------- Yükleme ---------- */
.yk-progress{ height:8px; background:var(--line); border-radius:999px; }
.yk-progress .progress-bar{ background:var(--primary); }
.ad-kisalt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-size:.9rem; color:var(--ink); }

/* ---------- İş listesi (tek satır + aşama şeridi) ---------- */
.is-satir{ width:100%; display:flex; align-items:center; gap:.55rem; background:none; border:none;
  border-bottom:1px solid var(--line); padding:.7rem .9rem; text-align:left; cursor:pointer;
  text-decoration:none; color:inherit; transition:background .15s; }
.is-satir:last-child{ border-bottom:none; }
.is-satir:hover{ background:var(--surface); }
.is-satir.aktif{ background:var(--primary-tint); box-shadow:inset 2px 0 0 var(--gilt); }
.is-satir .vi{ color:var(--muted); flex:0 0 auto; font-size:1.05rem; }
.is-satir .vi.ses{ color:var(--e-ses); }   /* ses kaydı satırı (v1.40.2): mikrofon simgesi ses eylem renginde — videodan bir bakışta ayrılır */
/* ELLE sıra (sürükle-bırak): sol kulp + sürüklenen/drop işaretleri (gruplama board'uyla aynı dil) */
.is-satir .is-tut{ flex:0 0 auto; color:var(--muted); cursor:grab; display:inline-flex; align-items:center; font-size:1.05rem; }
.is-satir .is-tut:hover{ color:var(--primary); }
.is-satir .is-tut:active{ cursor:grabbing; }
.is-satir.suruklenen{ opacity:.4; }
.is-satir.drop-once{ box-shadow:inset 0 3px 0 -1px var(--gilt); }
.is-satir.drop-sonra{ box-shadow:inset 0 -3px 0 -1px var(--gilt); }
/* Orta blok: dosya adı (üstte) + özet meta satırı (altta) dikey yığılır, kalan alanı kaplar. */
.is-orta{ display:flex; flex-direction:column; gap:.15rem; flex:1 1 auto; min-width:0; }
.is-satir .ad{ font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; font-size:.92rem; }
/* Özet meta: yüklenme tarihi · süre · hikaye · segment (ikon + değer çipleri). */
.is-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .85rem; font-size:.74rem;
  color:var(--muted); line-height:1.2; }
.is-meta > span{ display:inline-flex; align-items:center; gap:.28rem; white-space:nowrap; }
.is-meta i{ font-size:.82rem; opacity:.8; }
/* Özet: başlık (videonun ana konusu, vurgulu) + 2 satıra kırpılan özet metni. */
.is-konu{ display:block; font-size:.82rem; font-weight:500; color:var(--primary-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.is-konu i{ margin-right:.3rem; opacity:.9; }
.is-ozet{ font-size:.78rem; color:var(--ink-2); line-height:1.35; max-width:70ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Anı tarihi = listenin sıralama çıpası → vurgulu; girilmemişse amber "tarih yok". */
.is-meta .is-tarih{ color:var(--primary-2); font-weight:500; }
.is-meta .is-tarih-yok{ color:var(--gilt-2); }

/* Aşama şeridi (numaralı noktalar) */
.serit{ display:flex; align-items:center; flex:0 0 auto; }
.serit .nokta{ width:20px; height:20px; border-radius:50%; font-size:.68rem; font-weight:600; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.serit .baglac{ width:8px; height:2px; background:var(--line); flex:0 0 auto; }
.nokta.s-done{ background:var(--yesil); color:#fff; }
.nokta.s-act{ background:var(--primary); color:#fff; }
.nokta.s-wait{ background:#e0e0e0; color:#9e9e9e; }
.nokta.s-err{ background:var(--danger); color:#fff; }

/* İş listesi: aşama durumları — numara yerine DETAYLI (ad + tik/sönük). Yeterli alan var, net okunur. */
.asama-detay{ display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
.asama-cip{ display:inline-flex; align-items:center; gap:.32rem; font-size:.78rem; font-weight:500;
  padding:.22rem .6rem; border-radius:999px; white-space:nowrap; line-height:1.2; }
.asama-cip i{ font-size:.9rem; }
.asama-cip.done{ background:var(--yesil-tint); color:var(--yesil); }            /* yapıldı = yeşil tik */
.asama-cip.act{ background:var(--mavi-tint); color:var(--mavi); }               /* işleniyor = mavi + spinner */
.asama-cip.wait{ background:var(--surface); color:var(--muted); opacity:.6; }  /* sönük = henüz yapılmadı */

/* Durum etiketi / çip (Material chip) */
.durum-pill{ font-size:.72rem; padding:.2rem .6rem; border-radius:999px; font-weight:500; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.3rem; }
.st-Sirada{ background:var(--surface); color:var(--muted); }
.st-Isleniyor{ background:var(--mavi-tint); color:var(--mavi); }
.st-Bitti{ background:var(--yesil-tint); color:var(--yesil); }
.st-Hata{ background:var(--danger-tint); color:var(--danger); }
.st-Eski{ background:var(--gilt-tint); color:var(--gilt-2); }

/* ---------- Aşama accordion (numaralı) ---------- */
.asama-acc .accordion-item{ background:var(--paper); border:none; border-radius:.4rem !important;
  margin-bottom:.7rem; overflow:hidden; box-shadow:var(--golge); }
/* Aktif (işlenen) aşama kartı: NABIZ atan çerçeve/glow → kullanıcı "burada bir iş sürüyor"u net alır. */
.asama-acc .accordion-item.aktif-asama{ box-shadow:0 0 0 2px var(--primary), var(--golge);
  animation:asamaAktifNabiz 2s ease-in-out infinite; }
@keyframes asamaAktifNabiz{
  0%,100%{ box-shadow:0 0 0 2px var(--primary), var(--golge); }
  50%{ box-shadow:0 0 0 3px var(--primary), 0 0 22px -4px var(--primary); } }
.asama-acc .accordion-button{ background:var(--paper); color:var(--ink); font-family:'Roboto',sans-serif;
  font-weight:500; font-size:1rem; padding:.8rem 1rem; box-shadow:none; }
.asama-acc .accordion-button:not(.collapsed){ background:var(--primary-tint); color:var(--ink); box-shadow:none; }
.asama-acc .accordion-button:focus{ box-shadow:none; border-color:var(--line); }
.asama-acc .accordion-button::after{ width:1.05rem; height:1.05rem; background-size:1.05rem; }
.asama-acc .accordion-body{ padding:1rem; }
.asama-no{ width:26px; height:26px; border-radius:50%; font-size:.8rem; font-weight:600; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; margin-right:.7rem; background:var(--line); color:var(--muted); }
.asama-no.s-done{ background:var(--yesil); color:#fff; }
.asama-no.s-act{ background:var(--primary); color:#fff; animation:asamaNabiz 1.5s ease-in-out infinite; }
@keyframes asamaNabiz{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }
.asama-no.s-wait{ background:#eceff1; color:#90a4ae; }
.asama-baslik{ flex:1 1 auto; }
.asama-acc .accordion-header .durum-pill{ margin:0 .6rem 0 .4rem; }
.asama-bos{ color:var(--muted); font-size:.88rem; }

/* Canlı ilerleme (aktif aşamanın içinde) — işlem sürdüğü NET belli olsun: zemin nabzı + büyük spinner + akan bar. */
.canli{ background:rgba(var(--bs-primary-rgb), .10); border:none; color:var(--ink-2); border-radius:.4rem;
  padding:.9rem 1.1rem; box-shadow:var(--golge); animation:canliNabiz 2.2s ease-in-out infinite; }
@keyframes canliNabiz{ 0%,100%{ background:rgba(var(--bs-primary-rgb), .09); } 50%{ background:rgba(var(--bs-primary-rgb), .20); } }
.canli-spinner{ width:1.5rem; height:1.5rem; border-width:.2em; }
.canli-bas{ color:var(--primary-2); font-size:1.02rem; }
.canli .progress{ height:8px; background:rgba(var(--bs-primary-rgb), .14); overflow:hidden; }
.canli .progress-bar{ background:var(--primary); position:relative; overflow:hidden; transition:width .4s ease; }
/* Sürekli soldan sağa kayan parlama → bar yüzdesi sabit kalsa bile "takıldı" görünmez (işlem akıyor). */
.canli .progress-bar::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation:canliKay 1.25s linear infinite; }
@keyframes canliKay{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
/* Canlı kutu hata modu: durum/üretim hatası gizlenmez, kırmızı zeminde belirgin (nabız kapanır, kırmızı net kalır). */
.canli.canli-hata{ background:var(--danger-tint); color:#c62828; animation:none; }
/* Canlı ilerleme detayı: o an seslendirilen bloğun metni (Ses aşaması) */
.canli-detay{ background:var(--paper); border-radius:.3rem; padding:.5rem .7rem; font-size:.9rem;
  color:var(--ink-2); line-height:1.55; white-space:pre-wrap; word-break:break-word; max-height:9rem; overflow:auto; }
.canli-detay-bas{ font-size:.72rem; font-weight:600; color:var(--primary-2); margin-bottom:.25rem; }

/* İmza: el yazması paneli — okunabilirlik için serif KORUNDU (Materia renkleriyle) */
.manuscript{ font-family:'Lora',Georgia,serif; font-size:1.07rem; line-height:1.85; color:var(--ink-2);
 border-left:4px solid var(--gilt); padding:.3rem 0 .3rem 1.3rem; }
.manuscript p{ margin:0 0 1rem; }
.manuscript p:first-of-type::first-letter{ font-size:2.6rem; line-height:1; font-weight:600;
  float:left; padding:.1rem .5rem 0 0; color:var(--gilt); font-family:'Fraunces',serif; }
/* Duygu tipografisi — edebi metindeki hafif vurgu işaretleri (EdebiBicim ile gelir). Token-bazlı → iki tema da uyumlu. */
.manuscript .duygu-vurgu{ font-weight:700; color:var(--ink); letter-spacing:.004em; }      /* güçlü/çarpıcı an */
.manuscript .duygu-ic{ font-style:italic; }                                                 /* içsel/özlem/hüzün — italik; renk normal (sarı kaldırıldı, gövde rengini miras alır) */
.manuscript .duygu-soz{ font-style:italic; color:var(--primary-2); }                        /* söz/diyalog */

.konu-metin{ font-size:1.02rem; color:var(--ink); }
.ozet-bas{ font-family:'Roboto',sans-serif; font-weight:700; color:var(--ink); font-size:1.1rem; }
.prompt-kutu{ background:#f5f5f5; border:1px solid var(--line); border-radius:.3rem; padding:.8rem;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86rem; white-space:pre-wrap; color:#37474f;
  max-height:18rem; overflow:auto; }

.donem-rozet{ background:var(--gilt-tint); color:#e65100; border:none;
  font-size:.74rem; padding:.2rem .6rem; border-radius:999px; font-weight:500; }
.duygu-rozet{ background:var(--surface); color:var(--muted); font-size:.7rem; padding:.12rem .5rem; border-radius:999px; margin:0 .15rem .15rem 0; display:inline-block; }

/* TTS audio etiketi rozeti ([sad] gibi) — core.js işlem detayında duygu/etiket ayrımı için.
   ⚠ v1.21.0'da .prompt-* blokları KALDIRILDI: "Metin + duygular" penceresi artık SALT OKUNUR değil, düzenlenebilir
   editördür (.sesl-* sınıfları, aşağıda) → o markup ve kuralları ölmüştü. */
.tts-etiket{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; background:var(--primary-tint);
  color:var(--primary-2); padding:.12rem .45rem; border-radius:.25rem; white-space:nowrap; align-self:center; }

/* Butonlar — Material (solid + yükseklik gölgesi; UPPERCASE yok) */
.btn{ border-radius:var(--r-kontrol); font-weight:500; cursor:pointer;
  transition:background var(--gecis), color var(--gecis), box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis); }
.btn:disabled{ cursor:not-allowed; }
/* GÖRME KOLAYLIĞI (22-07): bitişik butonlar dip dibe durmasın — araya nefes. HARİÇ: btn-group
   segmentleri (bilerek bitişik tek parça) + d-grid dikey yığınlar (yatay margin sol kenar hizasını
   kaydırırdı — bkz. KitapIndex sıralama butonları). Flex gap'li kaplarda gap'in ÜSTÜNE eklenir. */
:not(.btn-group):not(.d-grid) > .btn + .btn{ margin-inline-start:.3rem; }
.btn-ink{ background:var(--primary); color:#fff; border:none; box-shadow:var(--golge); }
.btn-ink:hover{ background:var(--primary-2); color:#fff; box-shadow:var(--golge-2); transform:translateY(-1px); }
.btn-ink:active{ transform:translateY(0); }
.btn-ink:focus{ color:#fff; }
.btn-ink:disabled{ background:var(--primary); color:#fff; opacity:.45; box-shadow:none; transform:none; }
/* İkincil: DOLGULU nötr (indigo tint) — çerçeveli/hayalet buton KALDIRILDI (22-07): soluk kalıyordu,
   görme zorluğu olan müşteri fark edemiyordu. KURAL: border'lı buton YOK, her buton arka planlı.
   Seçili (btn-check radio / .active) hali solid indigo — segment kontrollerde seçim gözle net. */
.btn-ghost{ background:var(--btn-solid); color:#fff; border:none; box-shadow:none; }
.btn-ghost:focus{ color:#fff; }
.btn-ghost:hover{ background:var(--btn-solid-2); color:#fff; }
.btn-ghost:disabled{ background:var(--btn-solid); color:#fff; opacity:.45; }
/* SEGMENT/ANAHTAR üyeleri (btn-group içindekiler + btn-check radyoları — Toplu hedef seçimi, transkript
   Düzeltilmiş/Ham): PASİF üye ORTA dolgu (--btn-zemin), SEÇİLİ tam solid. Normal butonlar tam dolgu olunca
   (v1.12.7) seçim ancak bu ayrımla gözle net kalır; pasif üyenin hover'ı yine solid'e döner. */
/* ⚠ MENÜ AÇICI SEGMENT DEĞİLDİR (31-07): `.btn-group` yalnız segment kurmak için kullanılmıyor —
   Bootstrap dropdown'ı da açıcıyı bir btn-group'a sarar. O açıcıya "pasif üye" stili verilince tek
   başına duran gerçek bir eylem butonu (oku sayfasındaki "PDF indir") yanındaki DOCX/Yazdır düğmeleri
   dolguluyken SOLUK çiziliyor ve PASİFMİŞ gibi görünüyordu. İçinde `.dropdown-toggle` olan grup
   segment sayılmaz → üyeleri normal dolgulu `.btn-ghost` kalır (split button da doğru çıkar). */
.btn-check + .btn-ghost, .btn-group:not(:has(.dropdown-toggle)) .btn-ghost{ background:var(--btn-zemin); color:var(--primary-2); }
.btn-check + .btn-ghost:hover, .btn-group:not(:has(.dropdown-toggle)) .btn-ghost:hover{ background:var(--btn-solid-2); color:#fff; }
.btn-check:checked + .btn-ghost, .btn-ghost.active{ background:var(--btn-solid); color:#fff; }
/* MENÜSÜ AÇIKKEN DE DOLGULU KALIR (v1.21.8 — açık temada BUTON KAYBOLUYORDU). Bootstrap `.btn.show`
   (ve `.btn:first-child:active`) `background-color:var(--bs-btn-active-bg)` yazar; o değişkeni yalnız
   RENK VARYANTLARI (.btn-primary vb.) tanımlar, çıplak `.btn` tanımlamaz → bildirim geçersiz kalıp zemin
   SAYDAM'a düşer. `.btn-ghost` yalnız temel/hover/focus/disabled hâllerini kuruyordu, açık hâli yoktu:
   beyaz ikon + beyaz üst bar = görünmez düğme (koyu temada zemin koyu olduğu için fark edilmemişti).
   Kapsam BÜTÜN .btn-ghost açıcılarıdır (hesap menüsü · okuma sayfası "PDF indir" · ses menüleri).
   ⚠ `:first-child:active` de yazılmalı: Bootstrap'in o seçicisi (0,3,0) düz `.btn-ghost:active`ten (0,2,0)
     baskındır — yalnız `.show` yazmak basılı tutarken aynı kaybolmayı bırakırdı. */
.btn-ghost.show, .btn-ghost:active, .btn-ghost:first-child:active{ background:var(--btn-solid); color:#fff; }
.btn-ghost.show:hover, .btn-ghost:active:hover{ background:var(--btn-solid-2); color:#fff; }
.btn-gilt{ background:var(--gilt); color:#fff; border:none; box-shadow:var(--golge); }
.btn-gilt:hover{ background:var(--gilt-2); color:#fff; box-shadow:var(--golge-2); transform:translateY(-1px); }
.btn-gilt:active{ transform:translateY(0); }
.btn-gilt:focus{ color:#fff; }
.btn-gilt:disabled{ background:var(--gilt); color:#fff; opacity:.45; box-shadow:none; transform:none; }
/* ANLAM renkleri: yeşil = olumlu/kaydet, kırmızı = vazgeç/geri al. Token'dan gelir → koyu temada da doğru
   (hardcode hex YOK). Biçimli editörün alt çubuğu ve "Metni düzenle" gibi olumlu eylemler kullanır. */
.btn-yesil{ background:var(--yesil); color:#fff; border:none; box-shadow:var(--golge); }
.btn-yesil:hover{ background:var(--yesil-2); color:#fff; box-shadow:var(--golge-2); transform:translateY(-1px); }
.btn-yesil:active{ transform:translateY(0); }
.btn-yesil:focus{ color:#fff; }
.btn-yesil:disabled{ background:var(--yesil); color:#fff; opacity:.45; box-shadow:none; transform:none; }
.btn-kirmizi{ background:var(--danger); color:#fff; border:none; box-shadow:var(--golge); }
.btn-kirmizi:hover{ background:var(--danger-2); color:#fff; box-shadow:var(--golge-2); transform:translateY(-1px); }
.btn-kirmizi:active{ transform:translateY(0); }
.btn-kirmizi:focus{ color:#fff; }
.btn-kirmizi:disabled{ background:var(--danger); color:#fff; opacity:.45; box-shadow:none; transform:none; }
/* Sil / Boşalt / İptal — text-danger taşıyan HER buton kırmızı DOLGULU + beyaz yazı. Eskiden hayalet
   buton + kırmızı yazıydı; müşteri "Boşalt"ı fark edemedi (22-07). color'da !important ŞART: Bootstrap
   .text-danger utility'si kendi !important'ıyla yazıyor. Yeni sil/boşalt butonu eklerken text-danger
   sınıfı vermek yeterli — ayrıca btn-kirmizi yazmaya gerek yok. */
.btn.text-danger{ background:var(--danger); color:#fff !important; border:none; box-shadow:var(--golge); }
.btn.text-danger:hover{ background:var(--danger-2); color:#fff !important; }
.btn.text-danger:disabled{ background:var(--danger); opacity:.45; box-shadow:none; }

.bos{ text-align:center; color:var(--muted); padding:3rem 1rem; }
.bos i{ font-size:2.2rem; color:#bdbdbd; display:block; margin-bottom:.6rem; }

.uyari-guncel{ background:var(--gilt-tint); border:none; color:#e65100; border-radius:.3rem; padding:.6rem .9rem; font-size:.88rem; box-shadow:var(--golge); }

/* Uzun hata mesajı: kaydırılabilir kutu (sayfayı taşırmaz) */
.hata-kutu{ background:var(--danger-tint); border:none; color:#c62828; border-radius:.3rem;
  padding:.6rem .8rem; font-size:.86rem; line-height:1.5; word-break:break-word; }
/* Bölüm "ne yapar" info bandı (her aşamanın gövde başında) */
.asama-info{ background:var(--surface); color:var(--ink-2); border-radius:.4rem; padding:.5rem .7rem;
  font-size:.85rem; line-height:1.5; margin-bottom:.9rem; }
/* Hata kutusu içinde "Teknik ayrıntı" açılırının ham metni (monospace, kaydırmalı) */
.hata-kutu details summary{ color:#c62828; }
.hata-teknik{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; white-space:pre-wrap;
  word-break:break-word; max-height:8rem; overflow:auto; background:rgba(0,0,0,.05); border-radius:.3rem; padding:.45rem .55rem; }

/* Segment tablosu */
/* ---------- KONUŞMACILAR (çok konuşmacılı transkript) ----------
   Renk ETİKET NUMARASINDAN türer (ad değişince renk değişmez — kullanıcı kişiyi renkten tanır).
   HARDCODE HEX YOK: her renk mevcut token'lardan alınır → koyu tema otomatik doğru olur. */
.konusmaci-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kart); padding:.8rem .9rem; }
.konusmaci-panel > .d-flex > i{ color:var(--primary); }
.konusmaci-satir{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.4rem 0; }
.konusmaci-satir + .konusmaci-satir{ border-top:1px dashed var(--line); }
.konusmaci-satir .konusmaci-ad{ width:14rem; max-width:100%; }
/* "Anlatıcı" kutucuğu: işaretliyse bu kişinin sözleri kitaba girer. */
.konusmaci-anlatici{ margin:0; display:flex; align-items:center; gap:.3rem; white-space:nowrap; }
.konusmaci-anlatici .form-check-input{ margin:0; cursor:pointer; }
.konusmaci-anlatici .form-check-label{ cursor:pointer; font-size:.82rem; color:var(--ink-2); }
.konusmaci-anlatici .form-check-input:checked + .form-check-label{ color:var(--ink); font-weight:600; }
.konusmaci-agirlik{ font-variant-numeric:tabular-nums; }
.konusmaci-birlestir{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; border-top:1px solid var(--line); }
.konusmaci-birlestir > i{ color:var(--muted); }

/* Rozet: panelde etiket, transkript satırında TIKLANABİLİR düğme (tek satır düzeltmesi). */
.konusmaci-rozet{ display:inline-block; font-size:.72rem; font-weight:600; line-height:1.35;
  padding:.14rem .55rem; border-radius:999px; border:1px solid transparent;
  background:var(--k-tint); color:var(--k-renk); border-color:var(--k-renk);
  max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:baseline; }
button.konusmaci-tik{ cursor:pointer; margin-right:.4rem; transition:var(--gecis); }
button.konusmaci-tik:hover{ background:var(--k-renk); color:var(--paper); }

/* Anlatıcı OLMAYAN konuşmacı (sözleri kitaba girmez): soluk + kesik kenarlık — hikaye kartında
   hangi satırların kitaba geçmeyeceği bir bakışta belli olsun. */
.konusmaci-rozet.ks-pasif{ opacity:.55; border-style:dashed; font-weight:500; }

/* 6 renk döngüsü — hepsi tema token'ı (ks-0 = konuşmacısı belirsiz satır). */
.ks-0{ --k-renk:var(--muted);    --k-tint:var(--surface); }
.ks-1{ --k-renk:var(--primary);  --k-tint:var(--primary-tint); }
.ks-2{ --k-renk:var(--gilt-2);   --k-tint:var(--gilt-tint); }
.ks-3{ --k-renk:var(--yesil-2);  --k-tint:var(--yesil-tint); }
.ks-4{ --k-renk:var(--mavi);     --k-tint:var(--mavi-tint); }
.ks-5{ --k-renk:var(--danger-2); --k-tint:var(--danger-tint); }
.ks-6{ --k-renk:var(--ink-2);    --k-tint:var(--surface); }

/* "Videoda birden fazla kişi konuşuyor" — transkript üretim ayarı (kutucuk + açıklama). */
.cok-konusmaci{ border-top:1px dashed var(--line); }
.cok-konusmaci .form-check-label{ color:var(--ink); cursor:pointer; }
.cok-konusmaci .form-check-label i{ color:var(--primary); }
.cok-konusmaci .alt-yazi{ margin-left:1.6rem; display:block; }

/* Anlatım tarzı (SQL/21) — hikaye metninin yazım biçimi; yalnız çok konuşmacılı videoda görünür. */
.anlatim-tarzi{ border-top:1px dashed var(--line); padding-top:.7rem; }
.anlatim-tarzi > .alt-yazi{ display:block; max-width:62rem; }
.anlatim-tarzi .bi-chat-quote{ color:var(--primary); }

/* Satır konuşmacısı seçilirken modalda gösterilen söz. */
.seg-onizleme{ background:var(--surface); border-left:3px solid var(--primary); border-radius:.3rem;
  padding:.55rem .7rem; text-align:left; color:var(--ink-2); font-size:.92rem; line-height:1.55; }

.seg-tablo{ font-size:.86rem; }
.seg-tablo td{ vertical-align:top; }
.seg-zaman{ color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
table.mod-duz .m-ham{ display:none; } table.mod-ham .m-duz{ display:none; }

/* Hikaye kartındaki "Kaynak transkript" — SEGMENT SEGMENT (numara + metin + duygu); tek blok DEĞİL. */
.seg-liste{ display:flex; flex-direction:column; gap:.5rem; max-height:24rem; overflow:auto;
  background:var(--surface); border-radius:.3rem; padding:.6rem .7rem; }
.seg-satir{ display:flex; gap:.6rem; align-items:flex-start; }
.seg-satir + .seg-satir{ border-top:1px solid var(--line); padding-top:.5rem; }
.seg-no{ flex:0 0 auto; min-width:1.6rem; text-align:right; color:var(--muted);
  font-variant-numeric:tabular-nums; font-size:.8rem; padding-top:.12rem; }
.seg-govde{ flex:1 1 auto; }
.seg-metin{ color:var(--ink); font-size:.9rem; line-height:1.65; }
.seg-duygular{ margin-top:.3rem; }

/* Sıra (kitap) */
.sira-oge{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--paper); border:none; border-radius:.4rem; padding:.7rem .9rem; margin-bottom:.5rem; box-shadow:var(--golge); }
.sira-no{ width:1.9rem; height:1.9rem; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; flex:0 0 auto; }
/* Kitap sırası: aynı/çok yakın zamana denk gelen hikaye grubu işareti */
.sira-oge.ayni-donem{ border-left:3px solid var(--primary); }
.grup-rozet{ background:var(--primary-tint); color:var(--primary-2); font-size:.72rem; padding:.15rem .5rem;
  border-radius:999px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; }

/* Toast (Material snackbar)
   ⚠ ALT PAY: "yukarı çık" butonu (.yukari-btn) da sağ altta, right/bottom:1rem'de duruyor. Toast kutusu
   de 1rem'de olduğu için toast o butonun TAM ÜSTÜNE biniyor ve butonu tıklanamaz kılıyordu (z-index 1080 >
   1029). Toastlar buton boyu + boşluk kadar yukarıdan başlar → ikisi yan yana değil ALT ALTA durur.
   Dar ekranda genişlik de ekrana göre kısılır (340px telefonda kenardan taşıyordu). */
#toastKutu{ position:fixed; right:1rem; bottom:4.6rem; z-index:1080; display:flex; flex-direction:column; gap:.5rem;
  max-width:calc(100vw - 2rem); }
.toast-mini{ background:#323232; color:#fff; padding:.7rem 1rem; border-radius:.3rem; font-size:.88rem; box-shadow:var(--golge-2); max-width:min(340px, calc(100vw - 2rem)); }
.toast-mini.hata{ background:var(--danger); }

/* "Yukarı çık" butonu (global; _Layout basar, core.js gösterir/gizler) — sayfa ~400px kaydırılınca sağ altta
   belirir. Tüm renkler token (iki tema otomatik); .marka-logo ile aynı dil: indigo zemin + beyaz ikon.
   z-index 1029 = üst barın (1030) ve modalların (1050+) ALTINDA. Gizliyken pointer-events kapalı →
   görünmez buton köşedeki tıklamaları yutmaz; belirme/kaybolma yumuşak (opacity + hafif yükselme). */
.yukari-btn{ position:fixed; right:1rem; bottom:1rem; z-index:1029; width:2.8rem; height:2.8rem;
  border:none; border-radius:50%; background:var(--primary); color:#fff; font-size:1.15rem;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--golge-2);
  opacity:0; transform:translateY(.6rem); pointer-events:none;
  transition:opacity var(--gecis), transform var(--gecis), background var(--gecis), box-shadow var(--gecis); }
.yukari-btn.gorunur{ opacity:1; transform:none; pointer-events:auto; }
.yukari-btn:hover{ background:var(--primary-2); color:#fff; transform:translateY(-2px); }
.yukari-btn:active{ transform:translateY(0); }

/* ===== Global İŞLEM EKRANI (tam ekran, ORTALI, kapanmayan) — uzun işlemlerde "şov" ===== */
/* core.js islemAc/islemIlerle/islemBasari/islemHata ile yönetilir. Toast'un AKSİNE: ekranın TAM
   ORTASINDA, büyük, saniyeyle KAPANMAZ; bitiş/hata kullanıcı kapatana kadar ekranda kalır.
   Tüm renkler token (iki tema da otomatik). */
.islem-katman{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:rgba(8,10,16,.55); backdrop-filter:blur(3px); animation:islemKatmanAcil .2s ease-out; }
[data-bs-theme="dark"] .islem-katman{ background:rgba(0,0,0,.66); }
.islem-kutu{ background:var(--paper); color:var(--ink); width:min(94vw, 30rem); max-width:30rem;
  border-radius:var(--r-kart); box-shadow:var(--golge-2); padding:2.3rem 2rem 1.8rem; text-align:center;
  animation:islemKutuAcil .26s cubic-bezier(.22,.61,.36,1); }
.islem-gorsel{ display:flex; align-items:center; justify-content:center; min-height:5rem; margin-bottom:.5rem; }
.islem-baslik{ font-family:'Inter',system-ui,sans-serif; font-weight:700; font-size:1.34rem; color:var(--ink); line-height:1.25; }
.islem-mesaj{ color:var(--ink-2); font-size:1.04rem; margin-top:.5rem; line-height:1.5; }
.islem-ilerleme{ margin-top:1.2rem; }
.islem-bar{ height:.7rem; border-radius:1rem; background:rgba(var(--bs-primary-rgb), .16); overflow:hidden; }
.islem-bar-ic{ height:100%; width:0; border-radius:1rem; background:var(--primary); position:relative; overflow:hidden; transition:width .45s ease; }
.islem-bar-ic::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); }
.islem-bar.belirsiz .islem-bar-ic{ width:40% !important; }
.islem-sayac{ font-variant-numeric:tabular-nums; color:var(--primary-2); font-weight:600; font-size:.96rem; margin-top:.55rem; min-height:1.1rem; }
.islem-detay{ background:var(--surface); border-radius:.4rem; padding:.6rem .8rem; margin-top:.9rem; font-size:.92rem;
  color:var(--ink-2); text-align:left; max-height:8rem; overflow:auto; }
.islem-aksiyon{ margin-top:1.5rem; display:flex; justify-content:center; gap:.6rem; }
.islem-aksiyon .btn{ min-width:8rem; padding:.55rem 1.5rem; font-size:1.02rem; }
/* Telefonda iki düğme (Tekrar dene · Kapat) 8rem tabanıyla sığmayıp metni kırıyordu (v1.42.0, 375px ölçümü):
   dar ekranda taban kalkar, düğmeler satırı eşit paylaşır. */
@media (max-width:480px){
  .islem-aksiyon{ flex-wrap:wrap; }
  .islem-aksiyon .btn{ min-width:0; flex:1 1 auto; white-space:nowrap; padding:.55rem .7rem; font-size:.95rem; }
}

/* Çalışıyor: animasyonlu halka spinner */
.islem-spinner{ width:4rem; height:4rem; border-radius:50%; border:.32rem solid rgba(var(--bs-primary-rgb), .18);
  border-top-color:var(--primary); animation:islemDon .9s linear infinite; }
/* Başarı/Hata: büyük rozet ikon (pop animasyonlu) */
.islem-ikon{ width:4.2rem; height:4.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; animation:islemPop .35s cubic-bezier(.18,.89,.32,1.28); }
.islem-ikon-ok{ background:var(--yesil); }
.islem-ikon-hata{ background:var(--danger); }
.islem-ikon-bilgi{ background:var(--primary); }
.islem-katman.islem-hata .islem-baslik{ color:var(--danger); }
body.islem-acik{ overflow:hidden; }   /* overlay açıkken arka plan kaymaz */

/* ÜRETİM İPTALİ (v1.43.1 — core.js ÜRETİM İPTALİ bölümü): modaldaki "İptal et" + sayfa içi küçük durdurma düğmeleri.
   İKİ AŞAMALI: ilk tık .iptal-hazir ("Emin misiniz? İptal et", kırmızı dolgu), 6 sn içinde ikinci tık gönderir. Renkler token. */
.btn.iptal-hazir, .btn.iptal-hazir:hover, .btn.iptal-hazir:focus{ background:var(--danger); color:#fff; border-color:var(--danger); box-shadow:none; }
.durum-iptal{ display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; margin-left:.3rem;
  border-radius:999px; color:var(--danger); background:var(--surface); cursor:pointer; font-size:.9rem; vertical-align:middle;
  transition:background var(--gecis), color var(--gecis); }
.durum-iptal:hover, .durum-iptal:focus-visible{ background:var(--danger); color:#fff; outline:none; }
.durum-iptal.iptal-hazir{ background:var(--danger); color:#fff; width:auto; padding:0 .55rem; font-size:.72rem; font-weight:600; white-space:nowrap; }
.durum-iptal[aria-busy="true"]{ opacity:.6; pointer-events:none; }
.mtn-canli [data-iptal-tur]{ margin-left:.4rem; }

/* İşlem modalı CHECKLIST: bitti=yeşil tik, işlenen=spinner+vurgu, bekleyen=soluk */
.islem-adimlar{ list-style:none; margin:.6rem auto .2rem; padding:0; max-width:22rem;
  display:flex; flex-direction:column; gap:.5rem; text-align:left; }
.islem-adim{ display:flex; align-items:center; gap:.6rem; font-size:.93rem; color:var(--ink-2); transition:color .2s, opacity .2s; }
.islem-adim .bi, .islem-adim .spinner-border{ flex:none; width:1.1rem; text-align:center; }
.islem-adim.adim-bitti{ color:var(--ink); }
.islem-adim.adim-bitti .bi-check-circle-fill{ color:var(--yesil); }
.islem-adim.adim-isleniyor{ color:var(--primary); font-weight:600; }
.islem-adim.adim-bekliyor{ opacity:.5; }
/* 'hata' adım durumu: islemSov ve filtre teşhisi kullanıyordu ama KURALI YOKTU → başarısız adım, tamamlanmış
   adımdan ayırt edilemiyordu (aynı nötr renk). Kırmızı + kalın: "burada takıldı" tek bakışta görünür. */
.islem-adim.adim-hata{ color:var(--danger); font-weight:600; }
.islem-adim.adim-hata .bi{ color:var(--danger); }

/* İçerik filtresi teşhisi — engellenen anlatım + tetikleyen pasaj(lar). Sonuç modalının gövdesinde (islemSonuc). */
/* .islem-detay'ın 8rem'lik penceresi "teknik ayrıntı" yan notu için ölçülüydü; teşhis sonucu ise ASIL içeriktir
   (birkaç anlatım + pasajları) ve o pencerede sürekli kaydırma gerekiyordu. :has() desteklenmezse eski 8rem
   scroll'lu davranış sürer — içerik yine erişilebilir, yalnız dar kalır (bilinçli graceful degradation). */
.islem-detay:has(.filtre-bulgu){ max-height:min(46vh, 22rem); }
/* SESLENDİRİLEN METİN + DUYGULARI (01-08): üretim sırasında hangi cümlenin hangi duyguyla okunması istendiği.
   ⚠ Rozetin KENDİ rengi ŞART: .duygu-rozet zemini de --surface ve .islem-detay zemini de --surface → detay
   içinde rozet zemine karışıp GÖRÜNMEZ olurdu (iki temada da). Vurgu rengi gilt = "istenen okuma duygusu".
   Yükseklik de büyütülür: duygu işaretli metin uzundur, 8rem'lik pencerede sürekli kaydırma gerekirdi. */
.islem-detay .duygu-rozet{ background:var(--gilt-tint); color:var(--gilt-2); font-weight:600; }
.islem-detay:has(.duygu-rozet){ max-height:min(40vh, 18rem); line-height:1.7; }
.filtre-bulgu{ text-align:left; }
.filtre-bulgu + .filtre-bulgu{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); }
.filtre-bulgu .fb-bas{ font-weight:600; color:var(--danger); margin-bottom:.35rem; }
.filtre-bulgu .fb-pasaj{ margin:.35rem 0; padding:.45rem .7rem; background:var(--paper); border-left:3px solid var(--danger);
  border-radius:.3rem; color:var(--ink-2); font-size:.88rem; line-height:1.5; white-space:pre-wrap; }
.filtre-bulgu .fb-not{ color:var(--muted); font-size:.85rem; font-style:italic; }
.filtre-not{ text-align:left; color:var(--muted); font-size:.85rem; word-break:break-word; }
/* SES UYUMU (v1.43.2): yumuşatma değişiklik listesi (islemSonuc gövdesi) + hata şeridindeki iki düğme. Renkler token. */
.uyum-liste{ text-align:left; margin:0; padding-left:1.1rem; font-size:.9rem; line-height:1.5; }
.uyum-liste li + li{ margin-top:.4rem; }
.uyum-liste del{ color:var(--danger); }
.uyum-liste ins{ color:var(--yesil); text-decoration:none; font-weight:600; }
.islem-detay:has(.uyum-liste){ max-height:min(50vh, 24rem); }
.bs-hata .bs-uyum{ vertical-align:middle; }
/* Dönen ipucu (beklerken sıkmasın) */
.islem-ipucu{ margin-top:.9rem; padding-top:.7rem; min-height:1.2em; font-size:.85rem; font-style:italic;
  color:var(--ink-2); border-top:1px solid rgba(128,128,128,.18); transition:opacity .3s; }
/* Hata: "Teknik ayrıntı" açılır kutusu (ham hata; gizlenmez) */
.islem-detay details summary{ cursor:pointer; font-size:.82rem; color:var(--ink-2); }
.islem-teknik{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.77rem; white-space:pre-wrap;
  text-align:left; max-height:9rem; overflow:auto; background:var(--surface); border-radius:.3rem;
  padding:.5rem .6rem; margin-top:.45rem; color:var(--ink-2); }

@keyframes islemKatmanAcil{ from{ opacity:0; } to{ opacity:1; } }
@keyframes islemKutuAcil{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes islemDon{ to{ transform:rotate(360deg); } }
@keyframes islemPop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes islemBarKay{ to{ transform:translateX(100%); } }
@keyframes islemBelirsiz{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }
/* Bu hareketler dekoratif DEĞİL → işlemin sürdüğünü bildirir; reduced-motion'da da yumuşakça AÇIK kalır (aşağıdaki blokta). */
.islem-spinner{ animation:islemDon .9s linear infinite; }
.islem-bar-ic::after{ animation:islemBarKay 1.6s linear infinite; }
.islem-bar.belirsiz .islem-bar-ic{ animation:islemBelirsiz 1.4s ease-in-out infinite; }

/* Küçük dönen ikon (aktif aşama) */
.spin{ display:inline-block; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* "İşleniyor" yazısının sonundaki hareketli noktalar (… → işlem sürüyor). Alan sabit genişlikte (metin zıplamaz). */
.isleniyor::after{ content:""; display:inline-block; width:1.1em; text-align:left; animation:isleniyorNokta 1.4s steps(1) infinite; }
@keyframes isleniyorNokta{ 0%,100%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  /* "İşleniyor" göstergeleri dekoratif DEĞİL; işlemin sürdüğünü bildirir → bu hareketler açık kalır
     (kullanıcı işin sürdüğünü HER durumda net görmeli). Hareketler yumuşak/yavaş tutulur. Metinsel
     bilgi — "İşleniyor" + aşama mesajı + adım/toplam — zaten paralel verilir, animasyon tek kanal değil. */
  .spin{ animation:spin 1.4s linear infinite !important; }
  .isleniyor::after{ animation:isleniyorNokta 1.4s steps(1) infinite !important; }
  .canli-spinner{ animation:spinner-border .9s linear infinite !important; }
  .canli .progress-bar::after{ animation:canliKay 1.6s linear infinite !important; }
  .canli{ animation:canliNabiz 2.6s ease-in-out infinite !important; }
  .asama-acc .accordion-item.aktif-asama{ animation:asamaAktifNabiz 2.4s ease-in-out infinite !important; }
  /* Global işlem ekranı: spinner + ilerleme hareketleri işlemin sürdüğünü bildirir → açık kalır (yumuşak). */
  .islem-spinner{ animation:islemDon 1.1s linear infinite !important; }
  .islem-bar-ic::after{ animation:islemBarKay 1.8s linear infinite !important; }
  .islem-bar.belirsiz .islem-bar-ic{ animation:islemBelirsiz 1.6s ease-in-out infinite !important; }
}

/* Aşama içi araç çubuğu: dropdown + butonlar daha ferah (sıkışık görünmesin) */
.asama-acc .form-select-sm,
.hikaye-kart .form-select-sm{ min-width:6.5rem; padding:.34rem 2rem .34rem .7rem; background-position:right .6rem center; }
.asama-acc .btn.btn-sm,
.hikaye-kart .btn.btn-sm{ padding-left:.85rem; padding-right:.85rem; }
/* Etiket ile alanı biraz ayır */
.asama-acc .alt-yazi + .form-select-sm{ margin-left:.15rem; }

/* ---------- Hikayeler (video 1—N hikaye) ---------- */
.hikaye-kart{ border-left:3px solid var(--primary); }
.hikaye-no{ width:1.9rem; height:1.9rem; border-radius:50%; background:var(--primary); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; }
.hikaye-bas{ font-weight:700; color:var(--ink); font-size:1.04rem; line-height:1.3; }
.hikaye-aciklama{ color:var(--ink-2); font-size:.92rem; line-height:1.5; }
/* HİKAYENİN KENDİSİ: videoda anlatıldığı gibi (özet değil) — düzeltilmiş segmentler sırayla birleştirilmiş akan metin. */
.hikaye-tam{ background:var(--surface); border-radius:.3rem; padding:.7rem .85rem; max-height:26rem; overflow:auto;
  color:var(--ink); font-size:.96rem; line-height:1.75; }
.hikaye-duzenle{ background:var(--surface); border-radius:.3rem; }
.hikaye-bolum > summary{ cursor:pointer; color:var(--primary-2); font-size:.9rem; font-weight:500; padding:.2rem 0; }
.hikaye-bolum > summary:hover{ color:var(--primary); }

/* ---------- Ses yönet (ElevenLabs listesi) modalı ----------
   ⚠ v1.21.0: grup penceresinin iki adımlı "Seslendirme" sekmesi KALDIRILDI (tek tip ses çubuğu) →
   .ses-grup/.ses-grup-bas/.ses-adim/.ani-ses-audio kuralları o markup'la birlikte silindi. */
.ses-satir{ display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ses-satir:last-child{ border-bottom:0; }
.ses-satir-ad{ font-weight:600; color:var(--ink); }
.ses-satir-id{ font-size:.72rem; color:var(--muted); background:var(--surface); padding:0 .3rem; border-radius:.2rem; }

/* ---------- Düzenlenebilir SESLENDİRME YAPISI editörü (blok → cümle: metin + duygu + etiket) ----------
   Ses çubuğundaki "Metin + duygular" penceresi bu markup'ı üretir (sescubugu.js); DOM sözleşmesi ve
   ekle/böl/sil davranışları seslendirme.js'tedir. */
.seslendirme-kart{ background:var(--surface); border-radius:.4rem; padding:.6rem .7rem; }
.sesl-bloklar{ display:flex; flex-direction:column; gap:.55rem; }
.sesl-blok{ background:var(--paper); border:1px solid var(--line); border-radius:.4rem; padding:.55rem .65rem; }
.sesl-blok-bas{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-bottom:.45rem; }
.sesl-blok-bas .blok-no{ font-weight:600; color:var(--ink); font-size:.82rem; }
.sesl-blok-bas .sesl-genelduygu{ max-width:9rem; }
.sesl-blok-bas .sesl-yon{ flex:1 1 14rem; min-width:10rem; }
.sesl-cumleler{ display:flex; flex-direction:column; gap:.4rem; }
.sesl-cumle{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:.4rem; padding-top:.4rem; border-top:1px dashed var(--line); }
.sesl-cumle:first-child{ border-top:none; padding-top:0; }
.sesl-cumle .sesl-metin{ flex:1 1 16rem; min-width:12rem; resize:vertical; }
.sesl-cumle .sesl-duygu{ max-width:9rem; }
/* Audio etiketi ([sad] gibi) — duygudan görsel olarak AYRILIR: duygu yalnız ekrandadır, etiket "İfadeli"
   tarzda SESE GİDER. Aynı görünseydi kullanıcı hangisinin sesi etkilediğini ayırt edemezdi. */
.sesl-cumle .sesl-etiket{ max-width:8rem; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; }
.sesl-cumle-araclar{ display:flex; gap:.2rem; align-items:center; padding-top:.15rem; }
.sesl-blok-araclar{ margin-top:.45rem; }
.btn-xs{ padding:.15rem .4rem; font-size:.78rem; line-height:1.15; border-radius:.25rem; }

/* ===== Aşama 3 — gruplama (iki bölmeli: SOL havuz + SAĞ grup listesi; mobilde dikey) ===== */
.grup-iki{ display:flex; gap:1rem; align-items:flex-start; }

/* Sol: gruplanmamış havuz (yapışkan + aranabilir) — üst bar da yapışkan → onun altına oturur */
.grup-sol{ flex:0 0 20rem; width:20rem; position:sticky; top:calc(var(--ustbar-h) + 1rem); align-self:flex-start;
  background:var(--primary-tint); border-radius:.4rem; box-shadow:var(--golge);
  display:flex; flex-direction:column; max-height:calc(100vh - var(--ustbar-h) - 7rem); }
.grup-sol-bas{ padding:.55rem .65rem; border-bottom:1px solid var(--line); }
.grup-sol-govde{ padding:.55rem; overflow-y:auto; flex:1; min-height:4rem; }
.grup-ara{ position:relative; }
.grup-ara-input{ padding-left:1.9rem; padding-right:1.9rem; }
.grup-ara-ikon{ position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.85rem; pointer-events:none; }
.grup-ara-temizle{ position:absolute; right:.4rem; top:50%; transform:translateY(-50%); border:0; background:transparent;
  color:var(--muted); padding:.1rem .3rem; line-height:1; cursor:pointer; border-radius:.3rem; }
.grup-ara-temizle:hover{ color:var(--ink); background:var(--line); }

/* Sağ: grup kartları alt alta */
.grup-sag{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.8rem; }
.grup-kart{ background:var(--paper); border-radius:.4rem; box-shadow:var(--golge); }
.grup-kart.cok-uyeli{ outline:2px solid var(--gilt); }
.grup-kart-bas{ display:flex; align-items:center; gap:.4rem; padding:.5rem .65rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.grup-kart-govde{ padding:.55rem; min-height:3.5rem; }
.grup-yeni{ border:1px dashed var(--line); color:var(--muted); padding:.85rem; }

/* Accordion: araç çubuğu (grup sayısı + kirli göstergesi + toplu grup işlemleri + tümünü aç/kapa) */
.grup-arac{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding:.15rem .1rem .55rem; border-bottom:1px solid var(--line); font-size:21px }
.grup-arac-say{ font-weight:600; color:var(--ink); }
.grup-arac-sag{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }

/* KAYDEDİLMEMİŞ DEĞİŞİKLİK göstergesi: bu sayfada işlemler "Kaydet"e basılana kadar DB'ye yazılmaz —
   kullanıcı bunu göremeyince kaydoldu sanıyordu. Şerit + Kaydet butonunda amber halka (JS: .kaydet-kirli). */
/* inline-BLOCK (flex DEĞİL): metin akışı normal kalsın — inline-flex'te "Kaydet" ayrı bir flex öğesi olup
   aradaki boşluklar yutulurdu ("değişiklikKaydet'e basmadan"). */
.kirli-uyari{ display:inline-block; font-size:.8rem; font-weight:600; line-height:1.25;
  color:var(--gilt-2); background:var(--gilt-tint); border:1px solid var(--gilt); border-radius:999px; padding:.15rem .65rem; }
.kirli-uyari[hidden]{ display:none; }
.kirli-uyari .bi-record-fill{ font-size:.55rem; vertical-align:middle; }
/* :hover da yazılır — .btn-ink:hover (0,2,0) yalnız .kaydet-kirli'yi (0,1,0) yenip halkayı düşürürdü. */
.kaydet-kirli{ box-shadow:0 0 0 3px var(--gilt-tint), 0 0 0 4px var(--gilt), var(--golge); }
.kaydet-kirli:hover{ box-shadow:0 0 0 3px var(--gilt-tint), 0 0 0 4px var(--gilt), var(--golge-2); }

/* Accordion başlığı: grip (sürükle) + katla oku (chevron). Kapalıyken başlık altı çizgisi olmaz (tek satır). */
.grup-tut{ color:var(--muted); cursor:grab; padding:.1rem; user-select:none; }
.grup-tut:active{ cursor:grabbing; }
.grup-katla{ border:0; background:transparent; color:var(--muted); padding:.1rem .3rem; border-radius:.25rem; line-height:1; }
.grup-katla:hover{ color:var(--ink); background:var(--line); }
.grup-kart:not(.acik) > .grup-kart-bas{ border-bottom:0; }

/* Grup SIRASI: ▲ [numara] ▼ — sürüklemeye alternatif (gruplama.js > grupSiraDegistir).
   76 gruplu kümede hedef sıra ekranda olmaz ve HTML5 sürükleme sayfayı kaydırmaz; numara yazmak
   tek adımda taşır. Dokunmatikte sürükleme hiç çalışmadığı için de tek yol budur. */
.grup-sira-kutu{ display:inline-flex; align-items:center; gap:.15rem; flex:0 0 auto; }
.grup-ok{ border:1px solid var(--line); background:var(--btn-zemin); color:var(--ink-2);
  border-radius:.25rem; padding:.15rem .35rem; line-height:1; font-size:.78rem; }
.grup-ok:hover:not(:disabled){ background:var(--btn-zemin-2); color:var(--ink); }
.grup-ok:disabled{ opacity:.35; }
.grup-sira-no{ width:3.2rem; text-align:center; font-weight:600; font-size:.82rem;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:.25rem; padding:.15rem .2rem; }
.grup-sira-no:focus{ outline:2px solid var(--primary); outline-offset:-1px; }
/* Dar kutuda tarayıcının kendi artır/azalt okları sığmıyor — ▲▼ zaten yanında. */
.grup-sira-no::-webkit-outer-spin-button,
.grup-sira-no::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.grup-sira-no{ -moz-appearance:textfield; appearance:textfield; }
/* Taşınan grup 76 satır arasında kaybolmasın: kısa vurgu. */
.grup-kart.grup-tasindi{ outline:2px solid var(--primary); outline-offset:-2px;
  background:var(--primary-tint); transition:background var(--gecis), outline-color var(--gecis); }

/* Grup sürükle-bırak (yeniden sıralama) görsel geri bildirimi */
.grup-kart.grup-suruklenen{ opacity:.45; }
.grup-kart.grup-drop-once{ box-shadow:0 -3px 0 -1px var(--gilt), var(--golge); }
.grup-kart.grup-drop-sonra{ box-shadow:0 3px 0 -1px var(--gilt), var(--golge); }
.grup-kart.grup-hedef-baslik{ outline:2px dashed var(--primary); outline-offset:-2px; }

.board-col-ad{ font-weight:600; color:var(--ink); }
.board-say{ background:var(--primary); color:#fff; border-radius:1rem; padding:0 .5rem; font-size:.76rem; font-weight:600; }
.board-grup-bas{ flex:1; min-width:6.5rem; }
.board-bos{ text-align:center; color:var(--muted); font-size:.84rem; padding:1.1rem .4rem; border:1px dashed var(--line); border-radius:.3rem; }
.drop-hedef{ background:var(--gilt-tint); outline:2px dashed var(--gilt); outline-offset:-4px; border-radius:.3rem; }

/* AI gruplama önizleme modalı (öneriler; board'a uygulanmadan önce gösterilir) */
.oneri-grup{ border:1px solid var(--line); border-radius:.4rem; padding:.55rem .75rem; margin-bottom:.55rem; background:var(--surface); }
.oneri-grup-bas{ font-weight:600; color:var(--ink); margin-bottom:.3rem; display:flex; align-items:center; }
.oneri-uyeler{ margin:0; padding-left:1.15rem; }
.oneri-uyeler li{ margin-bottom:.18rem; color:var(--ink-2); }
.oneri-uye-ad{ color:var(--ink); }

@media (max-width: 991.98px){
  .grup-iki{ flex-direction:column; }
  .grup-sol{ position:static; width:100%; flex:1 1 auto; max-height:24rem; }
}
.board-kart{ background:var(--paper); border:1px solid var(--line); border-radius:.35rem; padding:.5rem .55rem; margin-bottom:.5rem;
  cursor:grab; box-shadow:var(--golge); }
.board-kart:active{ cursor:grabbing; }
.board-kart.suruklenen{ opacity:.4; }
/* Sürükle-bırak konum ipucu: kartın bırakılacağı yere çizgi (layout kaymaz). */
.board-kart.drop-once{ box-shadow:0 -3px 0 -1px var(--gilt), var(--golge); }
.board-kart.drop-sonra{ box-shadow:0 3px 0 -1px var(--gilt), var(--golge); }
.board-kart-bas{ display:flex; align-items:flex-start; gap:.4rem; }
.board-tut{ color:#bdbdbd; padding-top:.1rem; }
.board-kart-baslik{ font-weight:500; color:var(--ink); line-height:1.25; }
.board-duz{ color:var(--gilt-2); font-size:.7rem; }
.board-kart-meta{ font-size:.75rem; }
.board-kart-duzenle{ margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--line); }

/* ===== Kitaplar açılışı (kapsayıcı kartlar) ===== */
/* Kart artık <div>; tıklama başlıktaki .stretched-link ile TÜM karta yayılır (iç içe <a> olmasın diye —
   kartın içinde "bağlı kitap" linkleri var, onlar z-index ile stretched-link'in ÜSTÜNDE durur). */
.kitap-kart{ color:inherit; text-decoration:none; transition:box-shadow var(--gecis), transform var(--gecis); }
.kitap-kart:hover{ box-shadow:var(--golge-2); transform:translateY(-3px); color:inherit; }
.kitap-ikon{ font-size:1.7rem; color:var(--primary); line-height:1; }
.kitap-ad{ font-weight:700; color:var(--ink); font-size:1.12rem; letter-spacing:-.012em; word-break:break-word; }
.kitap-baglanti{ color:var(--ink); text-decoration:none; }
.kitap-kart:hover .kitap-baglanti{ color:var(--primary-2); }
.kitap-tarih{ font-size:.8rem; color:var(--ink-2); margin-top:.15rem; }

/* ===== Kitap kartı İÇERİK DÖKÜMÜ (video·hikaye·grup·küme·bölüm + bağlı kitaplar) =====
   NEDEN: kartta yalnız "video + bölüm" vardı; arşiv kitabının bölümü çoğu zaman 0 olduğu için (bölümler
   kümeden üretilen YAYIN kitabındadır) dolu kitap boş görünüyordu. Sayılar bilgi taşır → SOLUKLAŞTIRILMAZ;
   dolu olanlar ayrıca vurgulanır. Tüm renkler token → koyu tema otomatik. */
.kitap-sayaclar{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.4rem; margin-top:.9rem; }
@media (max-width:560px){ .kitap-sayaclar{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.ks-kutu{ background:var(--surface); border-radius:var(--r-kontrol); padding:.5rem .3rem;
  display:flex; flex-direction:column; align-items:center; gap:.05rem; }
.ks-kutu .bi{ font-size:.85rem; color:var(--ink-2); line-height:1; }
.ks-sayi{ font-size:1.3rem; font-weight:700; color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums; }
.ks-etiket{ font-size:.72rem; font-weight:600; color:var(--ink-2); }
/* Dolu sayaç VURGULANIR (0 soluklaştırılmaz — vurgu eklenir, kontrast düşürülmez). */
.ks-kutu.ks-dolu{ background:var(--primary-tint); }
.ks-kutu.ks-dolu .bi, .ks-kutu.ks-dolu .ks-sayi{ color:var(--primary-2); }

.kitap-detay{ margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem; }
.kitap-detay.kd-bos{ color:var(--ink-2); font-size:.85rem; line-height:1.5; }
.kd-satir{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .55rem; }
.kd-bas{ font-size:.75rem; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.kd-liste{ display:flex; flex-wrap:wrap; gap:.35rem; min-width:0; }
/* DOLGU zorunlu (yalnız-kenarlıklı öğe düşük görüşte kaybolur); sayı rozeti ters kontrastla basılır. */
.kd-oge{ display:inline-flex; align-items:center; gap:.4rem; max-width:100%;
  background:var(--surface); color:var(--ink); border-radius:999px; padding:.25rem .65rem;
  font-size:.85rem; font-weight:600; text-decoration:none; line-height:1.5; }
.kd-oge b{ font-weight:700; font-size:.74rem; background:var(--ink-2); color:var(--paper);
  border-radius:999px; padding:.05rem .45rem; white-space:nowrap; }
/* Bağlı kitaplar TIKLANABİLİR → stretched-link'in üstünde kalmalı (z-index) + hover TEK ve sabit renk. */
.kd-kitap{ position:relative; z-index:3; transition:background var(--gecis), color var(--gecis); }
.kd-yayin{ background:var(--primary-tint); }
.kd-yayin .bi{ color:var(--primary-2); }
.kd-ozet{ background:var(--gilt-tint); }
.kd-ozet .bi{ color:var(--gilt-2); }
.kd-kitap:hover{ background:var(--ink); color:var(--paper); }
.kd-kitap:hover .bi{ color:var(--paper); }
.kd-kitap:hover b{ background:var(--paper); color:var(--ink); }
/* Bağlı kitabın ÜRETİLDİĞİ küme adı (07-08): küme kopyalanınca aynı adlı iki kitap oluşuyor, hangisinin
   hangi kümeden geldiği satırda görünmeli (yalnız tooltip yetmedi). Uzun ad kırpılır, hover ters kontrasta uyar. */
.kd-kume{ font-size:.74rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
  max-width:12rem; overflow:hidden; text-overflow:ellipsis; }
.kd-kitap:hover .kd-kume{ color:var(--paper); }

/* Kitap kartı aksiyonları (düzenle/sil) — kartın sağ üstünde; link <a>'nın KARDEŞİ (iç içe interaktif öğe olmasın). */
.kitap-sar{ position:relative; }
.kitap-aksiyon{ position:absolute; top:.5rem; right:.5rem; display:flex; gap:.3rem; z-index:2; }
/* background YAZILMAZ — butonun kendi rengi (yeşil kalem / kırmızı çöp) görünür kalmalı (22-07). */
.kitap-aksiyon .btn{ padding:.15rem .4rem; line-height:1; box-shadow:var(--golge); }
.onay-giris{ margin-top:.35rem; }

/* ===== Kitap içi sabit üst gezinme (Videolar·Grupla·Birleştir·Derle·Oku; aktif vurgulu) ===== */
.kitap-nav{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem;
  padding:.5rem .75rem; margin-bottom:1rem; background:var(--surface); border-radius:var(--r-kart); box-shadow:var(--golge); }
.kitap-nav-sol{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.kitap-nav-geri{ display:inline-flex; align-items:center; gap:.3rem; color:var(--muted); text-decoration:none; font-size:.9rem; white-space:nowrap; }
.kitap-nav-geri:hover{ color:var(--primary); }
.kitap-nav-ad{ font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:15rem; }
.kitap-nav-menu{ display:flex; flex-wrap:wrap; gap:.25rem; }
.kitap-nav-oge{ display:inline-flex; align-items:center; padding:.35rem .7rem; border-radius:var(--r-kontrol); color:var(--ink-2);
  text-decoration:none; font-size:.9rem; font-weight:500; transition:var(--gecis); white-space:nowrap; }
.kitap-nav-oge:hover{ background:var(--primary-tint); color:var(--primary-2); }
.kitap-nav-oge.aktif{ background:var(--primary); color:#fff; }
.kitap-nav-oge.aktif:hover{ color:#fff; }

/* Özet KOPYA kitap: kaynak sayfasında "üretilen özetler" listesi + ana listede rozet */
.kopya-rozet{ display:inline-block; margin-left:.4rem; padding:.05rem .4rem; font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; color:#fff; background:var(--gilt); border-radius:.6rem; vertical-align:middle; }
.kopya-band{ background:var(--gilt-tint); border-radius:var(--r-kart); padding:.55rem .8rem; color:var(--ink); }
.kopya-kart{ transition:box-shadow var(--gecis); }
.kopya-kart:hover{ box-shadow:var(--golge-2); }
/* Okuma sayfası "sürümler" panosu: ilk sürüm (asıl) + kopyalar; İçindekiler'in ÜSTÜNDE */
.surum-pano{ margin:0 0 1.2rem; padding:.7rem .85rem; background:var(--surface); border-radius:var(--r-kart); box-shadow:var(--golge); }
.surum-pano-bas{ font-weight:600; color:var(--ink); margin-bottom:.5rem; }
.surum-liste-oku{ display:flex; flex-direction:column; gap:.35rem; }
.surum-oge{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.45rem .65rem; border-radius:var(--r-kontrol); text-decoration:none; color:var(--ink-2);
  border:1px solid var(--line); transition:var(--gecis); }
.surum-oge:hover{ border-color:var(--primary); color:var(--ink); }
.surum-oge.aktif{ background:var(--primary-tint); border-color:var(--primary); color:var(--ink); font-weight:500; }
.surum-oge-ad{ font-weight:600; }
.surum-oge-etiket{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:.05rem .4rem; border-radius:.6rem; color:#fff; }
.surum-oge-etiket.ilk{ background:var(--primary); }
.surum-oge-etiket.kopya{ background:var(--gilt); }
/* İÇERİK TÜRÜ rozetleri (yalnız kopyalarda): "Özet · Manifesto (1.Şahıs) · Manifesto (3.Şahıs)" — üç tür
   BAĞIMSIZ üretilebildiğinden satırdan hangisinin içinde olduğu okunmalı. Nötr/soluk durur: satırın kimliği
   (ad + kopya rozeti) baskın kalsın. --paper zemin, .surum-oge.aktif'in tint zemininde de ayrışır. */
.surum-oge-turler{ display:inline-flex; flex-wrap:wrap; gap:.25rem; min-width:0; }
.surum-tur{ font-size:.7rem; font-weight:600; line-height:1.5; padding:.05rem .45rem; border-radius:.6rem;
  color:var(--ink-2); background:var(--paper); border:1px solid var(--line); white-space:nowrap; }
.surum-oge-say{ margin-left:auto; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.surum-oge-say b{ color:var(--ink); font-weight:600; }
.surum-oge-meta{ font-size:.78rem; color:var(--muted); white-space:nowrap; }
/* Satır sarmalayıcı: sürüm bağlantısı + sil (kopya) / kilit (orijinal taslak) yan yana */
.surum-oge-sar{ display:flex; align-items:center; gap:.35rem; }
.surum-oge-sar .surum-oge{ flex:1 1 auto; min-width:0; }
/* Silme = kırmızı DOLGULU (hayalet/hover-belirir değil — görme zorluğu için her an belli, 22-07) */
.surum-sil{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  padding:0; background:var(--danger); border:none; border-radius:var(--r-kontrol);
  color:#fff; cursor:pointer; transition:var(--gecis); box-shadow:var(--golge); }
.surum-sil:hover{ background:var(--danger-2); color:#fff; }
.surum-sil:disabled{ opacity:.5; cursor:default; }
/* Orijinal taslak: silme yerine kilit (butonla aynı genişlik → satırlar hizalı kalır) */
.surum-kilit{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  color:var(--muted); opacity:.55; font-size:.85rem; }

/* ===== Toplu yükleme UI ===== */
.yuk-drop{ border:2px dashed var(--line); border-radius:.5rem; padding:1.4rem; text-align:center; color:var(--muted); transition:border-color .15s, background .15s; }
.yuk-drop.hover{ border-color:var(--primary); background:var(--primary-tint); color:var(--primary-2); }
.yuk-drop i{ font-size:1.9rem; color:var(--primary); }
.yuk-link{ color:var(--primary); cursor:pointer; text-decoration:underline; }
.yuk-liste{ max-height:18rem; overflow:auto; }
.yuk-satir{ display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid var(--line); }
.yuk-ad{ flex:1; min-width:6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yuk-boyut{ white-space:nowrap; }
.yuk-row-bar{ width:7rem; height:.45rem; flex:0 0 auto; }
.durum-pill.st-Yuklendi{ background:#e3f2fd; color:#1565c0; }

/* ===== Aşama 5 — kitap index (sürükle-bırak bölümler) ===== */
.bolum-satir{ cursor:default; }
.bolum-satir .bolum-tut{ cursor:grab; }
.bolum-satir.suruklenen{ opacity:.4; }
.bolum-satir[draggable="true"]:hover{ border-left:3px solid var(--primary); }

/* ===== FINAL — Kitap okuma arayüzü (içindekiler + okunabilir edebi metin) ===== */
/* Çapa tıklamalarında yumuşak kaydırma (hareketi azalt tercihinde kapalı). */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

/* Yan içindekiler — sticky scroll-spy paneli (okurken gezinme); yapışkan üst barın altına oturur */
.toc-sticky{ position:sticky; top:calc(var(--ustbar-h) + 1rem); max-height:calc(100vh - var(--ustbar-h) - 2rem); overflow:auto;
  background:var(--paper); border-radius:.4rem; box-shadow:var(--golge); padding:.7rem .55rem; }
.toc-bas{ font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:600; padding:.15rem .5rem .55rem; }
.toc-nav{ display:flex; flex-direction:column; gap:.08rem; }
.toc-link{ display:flex; align-items:baseline; gap:.5rem; text-decoration:none; color:var(--ink-2);
  padding:.4rem .5rem; border-radius:.3rem; border-left:3px solid transparent; font-size:.9rem; line-height:1.3; }
.toc-link:hover{ background:var(--surface); color:var(--ink); }
.toc-link.aktif{ background:var(--primary-tint); color:var(--primary-2); border-left-color:var(--primary); font-weight:500; }
.toc-no{ flex:0 0 auto; min-width:1.3rem; text-align:right; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.toc-link.aktif .toc-no{ color:var(--primary-2); }
.toc-ad{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* "Çıkart" menüsü (üst araç çubuğu, v1.36.0) — Word · Excel · PDF ayraçlı üç grup. Açıklama satırları
   (.alt-yazi) SARAR, menü sabit genişlikte kalır (eski PDF menüsünde uzun cümle menüyü yatay şişiriyordu).
   Grup başlığı ve ayraç rengi tema token'ından (Bootstrap değişkenleri) → iki temada da otomatik. */
.cikart-menu{ min-width:19rem; max-width:min(22rem, calc(100vw - 1.5rem));
  --bs-dropdown-header-color:var(--muted); --bs-dropdown-divider-bg:var(--line); }
.cikart-menu .dropdown-item{ white-space:normal; }
.cikart-menu .dropdown-header{ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding-bottom:.15rem; }

/* Okuma gövdesi — beyaz "sayfa", rahat satır genişliği */
.oku-govde{ max-width:44rem; background:var(--paper); border-radius:.4rem; box-shadow:var(--golge);
  padding:2.4rem clamp(1.2rem, 4vw, 3rem); }

/* Kapak */
.oku-kapak{ text-align:center; padding:1.4rem 0 2rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
.oku-baslik{ font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--ink); font-size:2.3rem; line-height:1.15; margin:0; }
.oku-kapak-meta{ color:var(--muted); font-size:.9rem; margin-top:1rem; }

/* İçindekiler bölümü (klasik nokta-dolgulu satırlar) */
.oku-icindekiler{ margin-bottom:2.6rem; }
.ick-liste{ list-style:none; margin:0; padding:0; }
.ick-satir{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; color:var(--ink); padding:.45rem 0; }
.ick-satir:hover{ color:var(--primary-2); }
.ick-satir:hover .ick-ad{ text-decoration:underline; }
.ick-no{ flex:0 0 auto; min-width:1.5rem; color:var(--gilt-2); font-weight:600; font-variant-numeric:tabular-nums; }
.ick-ad{ flex:0 1 auto; font-family:'Lora',Georgia,serif; }
.ick-nokta{ flex:1 1 auto; border-bottom:1px dotted #bdbdbd; transform:translateY(-.18rem); min-width:1.5rem; }
.ick-bilgi{ flex:0 0 auto; color:var(--muted); font-size:.85rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ick-yok{ color:var(--gilt-2); }

/* İçindekiler — istatistik + özetleme aracı */
.ick-bas-satir{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; margin-bottom:.6rem; }
.ick-toplam{ display:flex; flex-wrap:wrap; gap:.15rem .9rem; color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; }
.ick-toplam b{ color:var(--primary-2); font-weight:600; }

/* İçindekiler istatistik ŞERİDİ (oku sayfası; kitapoku.js klonu) — özgün #ickToplam yapışkan üst barın
   altına girip görünmez olunca üst barın HEMEN ALTINA yapışan ince kopya; yukarı dönünce kaybolur.
   fixed → akışı etkilemez (içerik zıplamaz). z-index 1029: üst bar (1030) ve modallar (1050+) ÜSTTE kalır.
   pointer-events kapalı → yalnız bilgi gösterir, arkadaki içeriğin tıklamasını yutmaz. Dar ekranda
   flex-wrap + küçük yazı ile sığar. Tüm renkler token → iki tema otomatik. */
.ick-sabit{ position:fixed; top:var(--ustbar-h); left:0; right:0; z-index:1029;
  display:flex; justify-content:center; flex-wrap:wrap; gap:.1rem .9rem;
  background:var(--ust); border-bottom:1px solid var(--line); box-shadow:var(--golge);
  padding:.28rem .9rem; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(-.4rem); pointer-events:none;
  transition:opacity var(--gecis), transform var(--gecis); }
.ick-sabit.gorunur{ opacity:1; transform:none; }
.ick-sabit b{ color:var(--primary-2); font-weight:600; }
/* Kısaltma bandı (.ozet-banner, sticky) şerit açıkken onun ALTINA yapışsın — üst üste binmesinler.
   Yükseklik kitapoku.js'ten gelir (--ick-sabit-h, şerit dolarken ölçülür); değişken yoksa yaklaşık şerit boyu. */
body.ick-sabit-acik .ozet-banner{ top:calc(var(--ustbar-h) + var(--ick-sabit-h, 1.9rem) + .35rem); }
@media print{ .ick-sabit{ display:none !important; } }

/* ===== SABİT BÖLÜM BAŞLIĞI ŞERİDİ (okubaslik.js, v1.38.0) — YALNIZ ŞİFRESİZ OKUMA + TAM GÖRÜNÜM =====
   Bölümün başlığı yukarı kayıp görünmez olunca "N. Bölüm · ad" ekranın üstüne yapışır: istatistik şeridinin
   (.ick-sabit) ALTINDA, sabit oynatıcının (.oku-ses-sabit, 1028) ÜSTÜNDE. top JS'ten gelir (ÖLÇÜLÜR —
   şifresiz kabukta üst bar yok). z-index 1029 = istatistik şeridiyle aynı katman; ikisinin konumunu JS ayırır.
   ⚠ transform GEÇİŞİ YOK (bilinçli): altındaki oynatıcı bu şeridin boyunu ölçüyor; translateY geçişi ölçümü
     200 ms boyunca kaydırırdı. Yalnız opacity geçer. pointer-events kapalı → bilgi şeridi, tıklamayı yutmaz.
   Ad tek satır + üç nokta (uzun başlık şeridi büyütmesin); numara küçük harf aralıklı (.oku-bolum-no'nun eşi). */
.oku-bas-sabit{ position:fixed; left:0; right:0; z-index:1029; display:flex; align-items:baseline; justify-content:center;
  gap:.2rem .6rem; padding:.3rem .9rem; background:var(--ust); border-bottom:1px solid var(--line); box-shadow:var(--golge);
  opacity:0; pointer-events:none; transition:opacity var(--gecis); }
.oku-bas-sabit.gorunur{ opacity:1; }
.oku-bas-sabit .obs-no{ flex:0 0 auto; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-2); }
.oku-bas-sabit .obs-ad{ min-width:0; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1rem; line-height:1.3;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media print{ .oku-bas-sabit{ display:none !important; } }

/* Özet kitap çıkarma formu — artık İçindekiler'in içinde DEĞİL, #ozetModal içinde (üst çubuktaki
   "Özet Kitap Çıkart" butonu açar). Kart kabuğunu modal sağladığı için eski .ozet-arac/.ozet-arac-bas
   kuralları (paper zemin + gölge + başlık satırı) ÖLÜ kaldı ve silindi. */
.ozet-not{ font-weight:400; color:var(--muted); font-size:.83rem; }
/* Modal dar olduğundan etiketler sabit sütuna oturur ("Kitap adı" ↔ "Özet" hizalı); checkbox'lı
   etiket kendi genişliğinde kalır (.ozet-et-genis), yoksa yazı sıkışıp alta kırılır. */
.ozet-modal .ozet-et{ flex:0 0 5rem; }
.ozet-modal .ozet-et-genis{ flex:0 0 auto; }
.ozet-genel{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .55rem; }
.ozet-genel + .ozet-genel{ margin-top:.6rem; }
.ozet-alt{ padding-top:.6rem; border-top:1px solid var(--line); }
.ozet-et{ color:var(--ink-2); font-size:.9rem; margin:0; }
.ozet-in{ max-width:7.5rem; }
.ozet-sel{ max-width:12rem; width:auto; }
.ozet-tumsec{ display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-2); font-size:.9rem; margin:0 .3rem 0 0; user-select:none; cursor:pointer; }

.ick-oge{ padding:.15rem 0; border-radius:var(--r-kontrol); }
.ick-oge.kisa-aktif{ background:var(--gilt-tint); box-shadow:inset 3px 0 0 var(--gilt); padding-left:.5rem; }
.ick-satir-ust{ display:flex; align-items:baseline; gap:.5rem; }
.ick-sec{ flex:0 0 auto; transform:translateY(.15rem); cursor:pointer; }
.ick-satir{ flex:1 1 auto; min-width:0; }
.ick-say b{ color:var(--ink-2); font-weight:600; }
.ick-oge.kisa-aktif .ick-say b{ color:var(--gilt-2); }
/* Ana metni OLMAYAN ama yan metinle (özet/manifesto) dolu bölüm — sayım o blokların (v1.22.8, SQL/27).
   Soluk+italik: bu rakam ana metin rozetiyle aynı şey DEĞİL, karışmasın. */
.ick-ek{ font-style:italic; opacity:.85; }

.ick-hedef{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin:.2rem 0 .35rem 1.9rem; }
.ick-hedef .ih-et{ color:var(--muted); font-size:.82rem; }
.ick-hedef .hedef-deger,.ick-hedef .hedef-paragraf{ max-width:6rem; }
.ick-hedef .hedef-birim{ max-width:5.5rem; width:auto; }

/* Bölüm başlığındaki sürüm yöneticisi: "(N sürüm)" aç/kapa + detay listesi (Özgün + kısaltma/uzatma sürümleri) */
.oku-surum{ margin:.1rem 0 1rem; }
.surum-ac{ display:inline-flex; align-items:center; gap:.4rem; }
.surum-ac .surum-durum{ font-weight:600; color:var(--ink); }
.surum-ac .surum-say{ color:var(--muted); }
.surum-ok{ transition:transform var(--gecis); }
.surum-ok.acik{ transform:rotate(180deg); }

.surum-liste{ margin-top:.5rem; max-width:34rem; background:var(--paper); border-radius:var(--r-kart);
  box-shadow:var(--golge); overflow:hidden; }
.surum-satir{ display:flex; align-items:center; gap:.75rem; padding:.55rem .8rem; }
.surum-satir + .surum-satir{ border-top:1px solid var(--line); }
.surum-satir.aktif{ background:var(--primary-tint); box-shadow:inset 3px 0 0 var(--primary); }
.ss-bilgi{ flex:1 1 auto; min-width:0; }
.ss-bas{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ss-ad{ font-weight:600; color:var(--ink); }
.ss-etiket{ color:var(--muted); font-size:.8rem; }
.ss-model{ background:var(--surface); color:var(--muted); font-size:.7rem; padding:.05rem .4rem; border-radius:999px; }
.ss-uyari{ background:var(--gilt-tint); color:var(--gilt-2); font-size:.7rem; padding:.05rem .4rem; border-radius:999px; }
.ss-say{ color:var(--ink-2); font-size:.82rem; font-variant-numeric:tabular-nums; margin-top:.1rem; }
.ss-tarih{ color:var(--muted); }
/* "Aktif et" = AKSİYON (indigo dolgu) · aktif satırdaki "Aktif" = DURUM (yeşil dolgu, tıklanmaz) —
   eski çerçeveli hali soluktu; renk ayrımı görme zorluğunda da bir bakışta anlaşılır (22-07). */
.ss-aktif{ flex:0 0 auto; background:var(--primary); color:#fff; border:none; }
.ss-aktif:hover{ background:var(--primary-2); color:#fff; }
.surum-satir.aktif .ss-aktif{ background:var(--yesil); color:#fff; cursor:default; pointer-events:none; }

/* Kısaltma bandı (kısa sürüm aktifken) — yapışkan üst barın hemen altına yapışır */
.ozet-banner{ position:sticky; top:calc(var(--ustbar-h) + .5rem); z-index:5; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem; background:var(--gilt-tint); color:var(--gilt-2); border-radius:var(--r-kontrol);
  padding:.5rem .85rem; box-shadow:var(--golge); margin-bottom:1rem; }
.ozet-banner .ob-metin{ font-weight:600; }
.ozet-banner .ob-arac{ display:inline-flex; gap:.4rem; flex-wrap:wrap; }

/* Bölüm — çapa kaydırmasında hedef, yapışkan üst barın ALTINDA kalmasın diye bar payı eklenir */
.oku-bolum{ scroll-margin-top:calc(var(--ustbar-h) + 1rem); margin-bottom:2.8rem; }
.oku-bolum-no{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gilt-2); margin-bottom:.3rem; }
/* ⚠ BAŞLIK BOYUTU 1,55 → 1,75rem (kullanıcı isteği 07-08: "başlıklar daha belirgin olsun").
   Blok başlıkları (.oku-blok-bas 1,22rem) bunun bir kademe altındadır — hiyerarşi: bölüm > blok > metin.
   Birini değiştirirsen ötekini de gözden geçir, yoksa iki başlık aynı ağırlığa gelir ve okur hangisinin
   bölüm hangisinin kaynak olduğunu ayırt edemez. */
/* ⚠ FLEX (v1.23.9): başlık araçları NORMAL boyuta çıkınca (kullanıcı isteği 07-08: "iconlar böyle küçük
   küçük değil") inline akışta vertical-align ile hizalanmıyorlardı — düğme kutuları serif başlığın
   taban çizgisine oturup satırı şişiriyordu. Blok başlığı (.oku-blok-bas) zaten flex; ikisi aynı
   düzende olsun. min-width:0 metin span'i içindir: uzun başlık kaplayıp düğmeleri taşırmasın. */
.oku-bolum-bas{ font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--ink); font-size:1.75rem; line-height:1.22; margin:0 0 .35rem; letter-spacing:-.01em;
  display:flex; align-items:center; flex-wrap:wrap; gap:.15rem .3rem; }
.oku-bolum-bas .bolum-bas-metin{ min-width:0; }
.oku-bolum-tarih{ color:var(--muted); font-size:.85rem; margin-bottom:1rem; }
/* "Anlatan: …" — çok anlatıcılı kitapta bölümün kime ait olduğu (KitapOkuVM.AnlaticiGoster).
   Tarih satırıyla aynı sessizlikte ama adı okunur kılmak için hafif vurgulu; yazdırmada da kalır. */
.oku-bolum-anlatici{ color:var(--muted); font-size:.85rem; margin-bottom:.25rem; }
.oku-bolum-anlatici i{ color:var(--gilt-2); }
.oku-onsoz .oku-bolum-bas{ font-size:1.3rem; }
/* Okuma sütununda manuscript: sol gilt-çizgi yerine tam genişlik akış (drop-cap korunur) */
.oku-bolum .manuscript{ border-left:none; padding:0; }

/* ===== BÖLÜM BAŞLIK/ARAÇ KUTUSU + BÖLÜMLER ARASI AYRAÇ — YALNIZ YÖNETİM MODU (v1.23.6) =====
   Kullanıcı bildirimi 07-08: yönetim modunda bölüm başlığı · sürüm seçici · ses çubuğu ile ALTINDAKİ
   kitap metni "birbirine karışıyor" — araçların nerede bitip metnin nerede başladığı okunmuyordu.
   ⚠ ŞİFRESİZ (public) OKUMA SAYFASINDA UYGULANMAZ (kullanıcı kararı 07-08): o araçların hiçbiri orada
     yoktur, yani karışıklık da yoktur; kutu/ayraç okurun gördüğü kitaba gereksiz gürültü katardı.
   ⚠ KAPI = .ob-yonetim (bölümün KENDİ sınıfı, _OkuBolum.cshtml basar). Sayfa düzeyindeki
     .oku-sayfa:not([data-okur]) DENENDİ ve ÇALIŞMADI: Razor data-okur'u yönetim modunda da boş değerle
     basıyor → öznitelik İKİ modda da VAR, :not() hiçbirinde eşleşmiyor (07-08'de ölçüldü). Yeni bir
     "okur mu" kuralı yazarken bu tuzağı hatırla — öznitelik varlığına DEĞİL, değerine/sınıfa bak.
     Aynı tuzağa düşmüş üç kural v1.23.7'de değere bağlandı: [data-okur="1"] (görsel zoom-in imleci +
     başlık permalinki) ve okubuyut.js > okurMu. Bu kap ise sınıfta KALDI (bölüm mobilde tek başına
     AJAX ile de çizilir; karar partial'ın kendi VM'sinden gelmeli).
   Kap markup'ı: Views/Home/_OkuBolum.cshtml > .oku-bolum-ust (kapsam orada yazılı). */
.ob-yonetim .oku-bolum-ust{ background:var(--surface); border:.5px solid var(--line);
  border-radius:var(--r-kart); padding:.9rem 1rem .35rem; margin-bottom:1.7rem; }
/* ⚠ "Kutunun içindeki ses çubuğu --paper olsun" KURALI KALKTI (v1.23.11): ses çubuğunun kendi zemini
   artık --primary-tint (kullanıcı isteği "ses blok ayrı bir arka plan renginde olsun") → kutunun
   --surface zemininde zaten ayrışıyor ve sayfadaki BÜTÜN ses blokları aynı renkte kalıyor. İstisna
   sürseydi bölümün başlık anonsu, blokların çubuklarından farklı renkte görünürdü. */
/* Bölümler arası: kutu bölümün İÇİNİ ayırır, bu çizgi bölümleri BİRBİRİNDEN ayırır (çizgi + nefes).
   Mobil liste modunda sahnede tek bölüm durur → orada kendiliğinden devre dışıdır. */
.ob-yonetim + .ob-yonetim{ margin-top:3.4rem; padding-top:2.6rem; border-top:2px solid var(--line); }

/* Bölüm sesi (oku + dinle)
   ⚠ SARAR (flex-wrap:wrap), tek satıra ZORLAMAZ — kullanıcı bildirimi 03-08 (telefon): çubuğa sonradan
   iki kontrol daha katılıyor (core.js > sesSarKutu "10 sn geri/ileri" + okuses.js > vurgu biçimi seçicisi)
   ve nowrap'te bunlar sığmıyordu. Kesilme SESSİZDİ: sabit şeritte justify-content:center taşmayı İKİ UCA
   birden dağıtır → solda oynat/duraklat, sağda seçici ekran dışında kalıyor, kaydırılamıyordu (fixed).
   Şimdi dar ekranda ÇİFT SATIR olur: oynatıcı üstte, kontroller altta — hepsi görünür.
   flex-basis 11rem = "oynatıcı bu kadar yer bulamıyorsa kontrolleri alt satıra at" eşiği; grow:1 olduğu
   için oynatıcı satırda kalan yeri yine doldurur, max-width:24rem hâlâ üst sınır → masaüstü görünümü
   DEĞİŞMEZ (tek satır, aynı ölçüler).
   ⚠ 11rem ÖLÇÜLEREK seçildi: 15rem'de kulaklık ikonu + oynatıcı telefon genişliğine BİRLİKTE sığmıyor,
   oynatıcı alta düşüyor ve çubuk ÜÇ satıra çıkıyordu (istenen çift satır). */
/* ⚠ ZEMİN: --surface DEĞİL --primary-tint + sol şerit (v1.23.11, kullanıcı isteği 07-08: "ses blok ayrı
   bir arka plan renginde olsun"). --surface, bölümün araç kutusunun ve boş-bölüm notunun da zeminiydi →
   ses çubuğu onların içinde/yanında kaybolup nerede başlayıp bittiği okunmuyordu. Şerit (inset box-shadow)
   ekstra DOM düğümü olmadan "bu bir ses bloğu" der; her iki tema da token'dan gelir.
   ⚠ Sabit şerit (.oku-ses.oku-ses-sabit) kendi --ust zeminini yazar ve İKİ sınıf olduğu için kazanır. */
.oku-ses{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem;
  background:var(--primary-tint); box-shadow:inset 3px 0 0 var(--primary); border-radius:.4rem;
  padding:.5rem .7rem; margin-bottom:1.1rem; color:var(--muted); }
.oku-ses audio{ height:2.1rem; flex:1 1 11rem; min-width:0; max-width:24rem; }
/* ⚠ v1.23.11'in "gövde çubuğu metnin ALTINDA" margin kuralı KALKTI: çubuk v1.23.12'de eski yerine
   (başlığın altı) döndü — kullanıcı "yönetimi zorlaştı" dedi. Araç/metin sınırını artık blok kartının
   içindeki renkli ayraç çiziyor (aşağıda .oku-blok). */
.oku-bos-bolum{ color:var(--muted); font-style:italic; background:var(--surface); border-radius:.4rem; padding:.9rem 1.1rem; }
/* "Edebi metin bu bölümde kitaba girmiyor" — SQL/27 bayrağı kapalıyken (v1.22.8). Bilgi, uyarı DEĞİL:
   .bolum-eski-uyari'nın amber rengi kullanılmaz (ortada bir sorun yok, kullanıcının kendi tercihi).
   Yalnız yönetim modunda çizilir ve d-print-none'dur → okur ve basılı çıktı bunu görmez. */
.oku-metin-kapali{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-style:normal; font-size:.88rem; line-height:1.45; }
.oku-metin-kapali > i{ flex:0 0 auto; font-size:1rem; color:var(--muted); }
.oku-metin-kapali > span{ flex:1 1 14rem; min-width:0; }
/* TARZ AÇIKLAMASI (v1.25.3 — kullanıcı kararı 16-08: "küçük yazıyla yazmayalım; seçtiği seçeneğe göre
   ne olacağı bizzat yazmalı"): seçilen tarza göre değişen BELİRGİN bilgi kutusu. Kap ve metin JS'ten
   gelir (sescubugu.js > tarzNotuEkle — TEK KAYNAK, Razor'da yok). small/muted DEĞİL: normal okunur
   boyut + zemin kutusu; tüm renkler token (iki temada otomatik). */
.bs-tarz-not{ flex:0 0 100%; font-size:.92rem; line-height:1.5; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kontrol);
  padding:.5rem .75rem; }
.bs-tarz-not i{ color:var(--primary); }

/* ===== SES SÜRÜMLERİ PANELİ (SQL/35, v1.25.6 — kullanıcı isteği 16-08: "sesler için sürüm; ne ile
   üretildiği detaylı listelensin") ===== Ses çubuğundaki "Sürümler" düğmesi bu paneli çubuğun altına
   tam genişlik açar (bs-yapi-panel deseni). Satır = künye kartı: üstte sürüm no + rozetler + tarih +
   boyut/süre + Dinle/Aktif et/Sil; altta künye çipleri (motor · konuşmacı · tarz · model · format ·
   parça · metin · ifade ayarları). Tüm renkler TOKEN → iki temada otomatik; zemin --paper (kart) /
   --surface (panel) ayrımı .oku-blok ile aynı mantık. */
.bs-surum-panel{ background:var(--surface); font-size:.9rem; }
.bss-satir{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kontrol);
  padding:.5rem .65rem; margin-bottom:.45rem; }
.bss-satir:last-child{ margin-bottom:0; }
.bss-satir.aktif{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.bss-ust{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; }
.bss-no{ font-weight:700; color:var(--ink); }
.bss-araclar{ display:inline-flex; align-items:center; gap:.4rem; margin-left:auto; flex-wrap:wrap; }
.bss-audio{ height:1.9rem; max-width:13rem; }
.bss-rozet{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:700;
  border-radius:1rem; padding:.15rem .55rem; line-height:1.2; }
.bss-r-aktif{ background:var(--primary); color:#fff; }
.bss-r-yok{ background:var(--btn-zemin); color:var(--muted); }
.bss-r-kt{ background:var(--btn-zemin); color:var(--primary-2); }
.bss-kunye{ display:flex; flex-wrap:wrap; gap:.25rem .9rem; margin-top:.35rem;
  font-size:.8rem; color:var(--muted); }
.bss-cip b{ font-weight:600; color:var(--ink); }

/* ===== 10 SN GERİ / İLERİ (core.js > sesSarKur her <audio>'nun yanına ekler) =====
   Burada tanımlı ama KAPSAMI OKUMA SAYFASI DEĞİL: sayfadaki her oynatıcıda (grup penceresi
   seslendirme kartı dâhil) aynı düğmeler görünür. Yerleşik oynatıcının kendi düğmelerinin
   yanında durduğu için nötr bırakıldı (segment pasif dolgusu) — dolu indigo olsaydı "çal"dan
   daha baskın görünürdü. Sabit ses şeridinde (.oku-ses-sabit) GİZLENMEZ: sarmak dinlemenin
   parçasıdır, üretim aracı değil. */
.ses-sar-kutu{ display:inline-flex; align-items:center; gap:.25rem; flex:0 0 auto; }
.ses-sar{ display:inline-flex; align-items:center; gap:.15rem; border:none; cursor:pointer;
  background:var(--btn-zemin); color:var(--primary-2); border-radius:var(--r-kontrol);
  padding:.3rem .45rem; font-size:.78rem; line-height:1; font-weight:600;
  transition:background var(--gecis), color var(--gecis); }
.ses-sar:hover{ background:var(--btn-solid); color:#fff; }
.ses-sar i{ font-size:.95rem; }

/* "Ses Ayarları" — bölüm ses çubuğunun SAĞ ÜST KÖŞESİ (31-07 kullanıcı isteği). ElevenLabs ses listesi
   SAYFA GENELİ bir ayardır; eylem düğmelerinin (Demo Ses / Sese çevir) arasında durunca "bu bölüme ait
   bir eylem" gibi okunuyordu, sayfanın üst araç çubuğunda ise (30-07 denemesi) BULUNAMIYORDU.
   ⚠ padding-right ŞART: absolute buton kabın content kutusunun DIŞINDA kalsın diye yer ayırır. Bu sayede
   flex içerik butonun altına sarmaz VE hata şeridi (.bs-hata, w-100 → content genişliği) de kısalır,
   butonun altına girmez. Buton genişliği değişirse (metin/ikon) bu değer de güncellenmeli.
   ⚠ v1.24.11: düğme İKON-ONLY oldu (kullanıcı kararı 15-08: "ayarlar için sadece simge kullanabilirsin")
   → ayrılan yer 10rem'den 3.6rem'e indi; kalan genişlik çubuğun kendi seçicilerine gitti. Bu, sayfanın
   genel "ikon + YAZI" kuralının BİLİNÇLİ tek istisnasıdır (kullanıcı bu düğme için açıkça istedi);
   metin title + aria-label'da yaşar, yani ekran okuyucu ve tooltip yine söylüyor. */
.bolum-ses{ position:relative; padding-right:3.6rem; }
.bs-ayar{ position:absolute; top:.45rem; right:.6rem; z-index:2; white-space:nowrap; }

/* ===== ÇALAN SESİN OYNATICISI EKRANIN ÜSTÜNDE SABİT KALIR (okuses.js kurar/kaldırır) =====
   Gerekçe (02-08 kullanıcı bildirimi): kelime takibi sayfayı kendiliğinden kaydırıyor, oynatıcı yukarıda
   kalıyor ve sesi durdurmak için yukarı çıkmak gerekiyordu.
   ⚠ top JS'ten gelir (style.top): yapışkan üst bar + istatistik şeridi (.ick-sabit) + bölüm başlığı
     şeridi (.oku-bas-sabit) + liste modunda "Bölümler" şeridi (.bolum-serit, v1.38.4) ÖLÇÜLÜR — şifresiz
     okuma kabuğunda üst bar HİÇ yoktur, sabit bir --ustbar-h payı orada tepede boş şerit bırakırdı.
   ⚠ Yerini .oku-ses-dolgu tutar (yükseklik JS'ten) → şerit açılıp kapanırken sayfa ZIPLAMAZ.
   ⚠ Seçici .oku-ses.oku-ses-sabit (iki sınıf): .bolum-ses'in padding-right:10rem kuralı BU BLOKTAN
     SONRA gelmese de kazanmasın diye — tek sınıfla yazılsaydı sıraya bağlı, kırılgan olurdu.
   z-index 1028 = üst bar (1030) ve istatistik şeridinin (1029) ALTINDA, içeriğin üstünde. */
.oku-ses.oku-ses-sabit{ position:fixed; left:0; right:0; z-index:1028; margin:0; border-radius:0;
  padding:.4rem 2.6rem .4rem .9rem; justify-content:center;
  background:var(--ust); border-bottom:1px solid var(--line); box-shadow:var(--golge); }
.oku-ses-dolgu{ margin-bottom:1.1rem; }   /* .oku-ses'in bıraktığı yer — margin'i de o üstlenir */

/* Sabit şeritte YALNIZ DİNLEME kalır: motor/konuşmacı/tarz/Demo Ses/"Sese çevir"/"Ses Ayarları" ÜRETİM
   araçlarıdır — ince bir şeritte yer kaplar ve dinlerken işe yaramaz (çubuk kendi yerinde hepsini gösterir).
   ⚠ HATA ŞERİDİ (.bs-hata) GİZLENMEZ — hata gizleme yok; şerit iki satıra çıksa da görünür kalır.
   ⚠ Doğrudan çocuk (>) seçilir: .alt-yazi sınıfı hata şeridinin "Teknik ayrıntı" satırında da var. */
.oku-ses-sabit > .alt-yazi,.oku-ses-sabit > .bs-ayar,.oku-ses-sabit > .bs-motor,.oku-ses-sabit > .bs-ses,
.oku-ses-sabit > .bs-dinle,.oku-ses-sabit > .bs-tarz,.oku-ses-sabit > .bolum-ses-uret,
.oku-ses-sabit > .bolum-ses-izle,.oku-ses-sabit .bs-yapi,.oku-ses-sabit .bs-sil{ display:none !important; }
/* METİN & SES oku sayfası (SQL/41, v1.29.3 — 20-08 inceleme bulgusu): orada TAM üretim çubuğu sayfanın
   İÇİNDE yaşar (kitaptaki gibi modala taşınmaz) → v1.24.8+ ile çubuğa katılan öğeler de sabitlenince
   gizlenmeli, yoksa tarz notu + İfade ayarları kaydırıcıları + Sürümler/promt kutuları (panel açıksa
   panelin kendisi) ekranın üstüne koca bir blok olarak yapışıyordu. Kitap sayfası ETKİLENMEZ (oradaki
   sayfa-içi .oku-ses çubuklarında bu öğeler hiç yok). Hata şeridi (.bs-hata) yine GİZLENMEZ. */
.oku-ses-sabit > .bs-surum-kutu,.oku-ses-sabit > .bs-promt-kutu,.oku-ses-sabit > .bs-tarz-not,
.oku-ses-sabit > .bs-ifade,.oku-ses-sabit > .bs-yapi-panel,.oku-ses-sabit > .bs-surum-panel{ display:none !important; }
/* Vurgu biçimi seçicisi şeritte KALIR (okuma ayarı, üretim aracı değil) — dar ekranda tam genişliğe
   yayılan .bolum-ses .form-select kuralından muaf tutulur, yoksa şeridi tek başına doldurur. */
.oku-ses-sabit .kl-stil-sec{ width:auto !important; }

/* Şeridi gizleme (×) — ses ÇALMAYA DEVAM eder, oynatıcı yalnız kendi yerine döner. */
.oku-ses-kapat{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  width:1.9rem; height:1.9rem; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; font-size:.85rem; }
.oku-ses-kapat:hover{ background:var(--btn-zemin); color:var(--ink); }

/* Vurgu biçimi seçicisi (okuses.js ekler; yalnız kelime takibi kurulan çubukta) */
.kl-stil-kutu{ color:var(--muted); flex:0 0 auto; }
.kl-stil-kutu > i{ font-size:.95rem; }

/* Bölüm metni GÜNCEL DEĞİL şeridi: aktif kısaltmanın GuncelMi=false olduğu bölümde, metnin hemen ÜSTÜNDE.
   NEDEN: sürüm panosundaki .ss-uyari etiketini yalnız paneli AÇAN görüyordu → kitap sessizce eski metni
   gösteriyordu (HATA GİZLEME YOK). Renk dili .ozet-banner/.ss-uyari ile AYNI (gilt = "dikkat/eski"; danger
   DEĞİL — metin bozuk değil, ESKİ). Tüm renkler token → açık/koyu tema otomatik.
   Yazdırmada GİZLENMEZ: bölüm eskiyse basılı çıktı da bunu söylemeli (yalnız buton d-print-none). */
.bolum-eski-uyari{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  background:var(--gilt-tint); color:var(--gilt-2); border-radius:var(--r-kontrol);
  padding:.55rem .85rem; margin-bottom:1rem; font-size:.88rem; line-height:1.45; box-shadow:var(--golge); }
.bolum-eski-uyari > i{ flex:0 0 auto; font-size:1rem; }
.bolum-eski-uyari > span{ flex:1 1 12rem; min-width:0; }

/* Bölüm edebi metnini ELLE düzenleme (seç + biçimle): araç çubuğu + düzenleme durumu */
.oku-bolum-aksiyon{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.2rem 0 .7rem; }
.oku-duzenle-arac{ display:flex; align-items:center; gap:.25rem; flex-wrap:wrap;
  background:var(--surface); border:.5px solid var(--line); border-radius:.45rem; padding:.3rem .4rem; }
.oku-duzenle-arac .odb-ipucu{ color:var(--muted); font-size:.78rem; margin-right:.15rem; }
.oku-duzenle-arac .odb-ayrac{ width:1px; align-self:stretch; background:var(--line); margin:0 .2rem; }
.oku-bolum.duzenleniyor .manuscript{ outline:2px dashed var(--primary); outline-offset:.5rem;
  border-radius:.2rem; background:var(--primary-tint); transition:background var(--gecis); }

/* Ortak BİÇİMLİ editör (editor.js): araç çubuğu + düzenleme vurgusu — grup modalı (ana edebi) + kopya kitap okuma.
   ÖLÇÜ: çubuk uzun metin düzenlerken dakikalarca kullanılıyor → simgeler/yazı okunaklı boyutta (eski .78rem
   yazı + btn-xs kutular fazla küçüktü, isabet alanı dardı). Kaydet/Vazgeç ayrı ALT çubukta (.bicim-alt). */
.bicim-arac{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
  background:var(--surface); border:.5px solid var(--line); border-radius:.45rem; padding:.45rem .55rem; margin-bottom:.5rem; }
.bicim-arac .bicim-ipucu{ color:var(--muted); font-size:.9rem; margin-right:.25rem; }
.bicim-arac .btn{ font-size:1.02rem; padding:.34rem .62rem; line-height:1.2; border-radius:.4rem; }
.bicim-arac .btn i{ font-size:1.05rem; vertical-align:-.06em; }
/* ALT çubuk: onay eylemleri metnin ALTINDA (form alışkanlığı) — üstteki üretim butonlarıyla karışmaz. */
.bicim-alt{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.bicim-alt .btn{ font-size:1rem; padding:.4rem .95rem; }
.bicim-duzenleniyor{ outline:2px dashed var(--primary); outline-offset:.4rem; border-radius:.2rem;
  background:var(--primary-tint); padding:.15rem; transition:background var(--gecis); }
/* Söz/diyalog vurgusu editör göster alanlarında da (manuscript dışında: modal + kopya okuma) */
.duygu-soz{ font-style:italic; color:var(--primary-2); }
.oku-bolum.duzenleniyor .manuscript:focus{ outline-color:var(--primary-2); }
.oku-bolum.duzenleniyor .manuscript p{ caret-color:var(--primary-2); }

@media (max-width: 991.98px){
  .toc-sticky{ position:static; max-height:15rem; margin-bottom:.5rem; }
}

/* ===== SESLİ OKUMADA KELİME TAKİBİ (SQL/23) =====
   Her kelime <span class="kl">; çalarken o kelimeye .kl-aktif eklenir (okuses.js).
   ⚠ .kl'ye AYRICA STİL VERİLMEZ (renk/arka plan/boşluk yok): sarmalayıcı metnin GÖRÜNÜMÜNÜ değiştirmemeli —
   kitap, ses hiç çalınmasa da bugünkü gibi görünsün. Yalnız aktif kelime boyanır.
   Vurgu = FOSFORLU KALEM (02-08 kullanıcı isteği "kaçırılmayacak ama sert olmayan renk"):
   yumuşak kırmızı zemin (--kl-vurgu) + altında doygun kırmızı çizgi (--kl-cizgi). Yazı rengi
   DEĞİŞMEZ (--ink kalır) — renk değiştirmek uzun dinlemede yorucu ve kitabın tonunu bozuyor.
   ⚠ font-weight/padding/letter-spacing/border DEĞİŞTİRME: kelime değiştikçe metin yeniden akar
   (satırlar zıplar). Alt çizgi bu yüzden border değil INSET box-shadow — yerleşime hiç dokunmaz;
   dıştaki halka da zemini bitişik kelimelere taşmadan büyütür. */
.kl-aktif{ background:var(--kl-vurgu); border-radius:.2rem;
  box-shadow:0 0 0 .1em var(--kl-vurgu), inset 0 -.16em 0 var(--kl-cizgi); }

/* BİÇİM SEÇENEKLERİ (02-08 kullanıcı isteği) — okur üç biçimden birini seçer; seçim <html data-kl-stil>
   özniteliğine ve localStorage('kelimeVurgu')'ya yazılır (okuses.js; seçici ses çubuğunda).
   ⚠ VARSAYILAN = ÖZNİTELİKSİZ hâl (yukarıdaki "altı çizili") → seçim yapmayan okur bugünkü görünümü
     aynen görür; hiçbir kitap kendiliğinden değişmez.
   ⚠ Üçü de YALNIZ renk/gölge değiştirir (font-weight/padding/border YOK): kelime ilerledikçe metin
     yeniden akmasın, satırlar zıplamasın — üstteki nota bak.
   ⚠ Renkler token'dan gelir (--kl-cizgi / --kl-arka-yazi) → koyu tema otomatik doğru. */
[data-kl-stil="arka"] .kl-aktif{ background:var(--kl-cizgi); color:var(--kl-arka-yazi);
  box-shadow:0 0 0 .1em var(--kl-cizgi); }
[data-kl-stil="renk"] .kl-aktif{ background:none; color:var(--kl-cizgi); box-shadow:none; }

/* Yazdırmada vurgu HİÇ basılmaz (metin normal görünmeli). ⚠ !important ŞART: biçim kuralları
   [data-kl-stil] ile daha güçlü seçicidir, sade .kl-aktif kuralı onları ezemezdi. */
@media print{ .kl-aktif{ background:none !important; box-shadow:none !important; color:inherit !important; } }
@media (prefers-reduced-motion: no-preference){ .kl{ transition:background .12s linear; } }

/* ===== OKUMA SAYFASI GÖRSELLERİ (SQL/22) =====
   Yerleşim TAMAMEN data-* özniteliklerinden türer (Views/Home/_OkuResim.cshtml sözleşmesi) → kitapoku.js
   yalnız öznitelik değiştirir, stil kurallarını tekrarlamaz; sunucu render'ı ile canlı düzenleme AYNI
   kuralları kullanır (ikisi ayrışamaz). Genişlik/yükseklik/boşluk sürekli değer olduğu için satır içi style.
   Tüm renkler token → iki tema otomatik. */
figure.oku-resim{ --r-bosluk:14px; position:relative; margin:0 0 1rem; border-radius:.5rem; }
figure.oku-resim img{ display:block; width:100%; border-radius:.5rem; box-shadow:var(--golge); cursor:grab; }
figure.oku-resim figcaption{ font-family:Inter, system-ui, sans-serif; font-size:.8rem; color:var(--muted);
  text-align:center; padding-top:.4rem; line-height:1.35; }

/* SARMA: "Yan" = metnin içine yaslanır (float, yazı yanından akar) · "Alt" = satırı kendine ayırır. */
figure.oku-resim[data-sarma="Yan"][data-hiza="Sol"]{ float:left;  margin-right:var(--r-bosluk); margin-bottom:var(--r-bosluk); }
figure.oku-resim[data-sarma="Yan"][data-hiza="Sag"]{ float:right; margin-left:var(--r-bosluk);  margin-bottom:var(--r-bosluk); }
figure.oku-resim[data-sarma="Alt"]{ float:none; display:block; margin-top:var(--r-bosluk); margin-bottom:var(--r-bosluk); }
figure.oku-resim[data-sarma="Alt"][data-hiza="Orta"]{ margin-left:auto; margin-right:auto; }
figure.oku-resim[data-sarma="Alt"][data-hiza="Sag"]{ margin-left:auto; }
figure.oku-resim[data-hiza="TamEn"]{ float:none; width:100% !important; margin-left:0; margin-right:0; }

/* Seçim + boyutlandırma tutamaçları (yalnız seçiliyken görünür) */
figure.oku-resim.secili img{ outline:2px solid var(--primary); outline-offset:2px; }
figure.oku-resim .tutamac{ position:absolute; width:12px; height:12px; background:var(--paper);
  border:2px solid var(--primary); border-radius:2px; display:none; z-index:5; }
figure.oku-resim.secili .tutamac{ display:block; }
figure.oku-resim[data-hiza="TamEn"] .tutamac[data-yon="sag"],
figure.oku-resim[data-hiza="TamEn"] .tutamac[data-yon="solust"],
figure.oku-resim[data-hiza="TamEn"] .tutamac[data-yon="sagust"],
figure.oku-resim[data-hiza="TamEn"] .tutamac[data-yon="solalt"],
figure.oku-resim[data-hiza="TamEn"] .tutamac[data-yon="sagalt"]{ display:none; }
figure.oku-resim .tutamac[data-yon="sagalt"]{ right:-6px; bottom:-6px; cursor:nwse-resize; }
figure.oku-resim .tutamac[data-yon="solalt"]{ left:-6px;  bottom:-6px; cursor:nesw-resize; }
figure.oku-resim .tutamac[data-yon="sagust"]{ right:-6px; top:-6px;    cursor:nesw-resize; }
figure.oku-resim .tutamac[data-yon="solust"]{ left:-6px;  top:-6px;    cursor:nwse-resize; }
figure.oku-resim .tutamac[data-yon="sag"]{ right:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
figure.oku-resim .tutamac[data-yon="alt"]{ bottom:-6px; left:50%; margin-left:-6px; cursor:ns-resize; }
figure.oku-resim .olcu{ position:absolute; right:0; bottom:-1.5rem; display:none; z-index:6;
  font-family:Inter, system-ui, sans-serif; font-size:.7rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:#fff; background:var(--primary); padding:.1rem .4rem; border-radius:.35rem; white-space:nowrap; }
figure.oku-resim.secili .olcu{ display:block; }
figure.oku-resim.tasiniyor{ opacity:.38; }
figure.oku-resim.tasiniyor img{ cursor:grabbing; }
/* SES BURAYA GELİNCE (SQL/23): okuma o görsele ulaştığında kısa bir vurgu — üç davranışta da ortak,
   okur neye geldiğini görmeli. Halka, düzeni kaydırmasın diye box-shadow ile çizilir (border DEĞİL). */
figure.oku-resim.resim-okundu img{ box-shadow:0 0 0 3px var(--gilt), var(--golge-2); }
/* "Dur" davranışında görselin üstünde beliren devam düğmesi (JS ekler). */
.resim-devam{ position:absolute; left:50%; bottom:.6rem; transform:translateX(-50%); z-index:7;
  font-family:Inter, system-ui, sans-serif; font-size:.82rem; font-weight:600; white-space:nowrap;
  padding:.35rem .8rem; border:none; border-radius:2rem; cursor:pointer;
  background:var(--gilt); color:#fff; box-shadow:var(--golge-2); }
.resim-devam:hover{ background:var(--gilt-2); }

/* Çıpası kaymış görsel rozeti (metin yeniden üretilip paragraf sayısı düşünce) */
.resim-tasindi{ position:absolute; left:.35rem; top:.35rem; z-index:6; font-family:Inter, system-ui, sans-serif;
  font-size:.66rem; font-weight:700; color:#fff; background:var(--gilt); padding:.1rem .4rem; border-radius:.35rem; }

/* ===================== GÖRSELİ BÜYÜT (okubuyut.js) =====================
   Köşedeki büyüteç düğmesi + tam ekran katman. Düğme İKİ MODDA da çizilir; okur modunda ayrıca
   görselin kendisi de tıklanabilir (imleç zoom-in) — yönetim modunda tıklama SEÇİM olduğu için değil. */
/* ⛔ Yalnız-kenarlıklı/şeffaf OLAMAZ (genel kural "Görsel netlik / kontrast"): DOLGU zemin + beyaz ikon,
   hover'da SABİT ve belirgin ikinci renk (opaklık oynatma yok). Zemin --btn-solid: amber üzerine beyaz
   koyu temada okunmuyor (bkz. .para-ekle'deki aynı gerekçe). */
figure.oku-resim .resim-buyut{ position:absolute; right:.4rem; top:.4rem; z-index:6;
  width:2rem; height:2rem; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:.5rem; cursor:zoom-in; font-size:.85rem;
  background:var(--btn-solid); color:#fff; box-shadow:var(--golge); transition:var(--gecis); }
figure.oku-resim .resim-buyut:hover,
figure.oku-resim .resim-buyut:focus-visible{ background:var(--btn-solid-2); color:#fff; outline:none; }
figure.oku-resim.tasiniyor .resim-buyut{ display:none; }   /* sürüklerken yolda durmasın */
/* Okur modunda görselin TAMAMI tıklanabilir (yönetimde imleç grab kalır: orada tıklamak seçimdir).
   ⚠ SEÇİCİ [data-okur="1"] — VARLIK DEĞİL DEĞER (v1.23.7): Razor özniteliği yönetim modunda da BOŞ
     değerle basıyor (07-08'de ölçüldü) → [data-okur] iki modda da eşleşiyor, yönetimde de zoom-in imleci
     çıkıyordu. İmleç okubuyut.js'in kapısıyla AYNI ölçüte bağlı olmalı; ayrışırsa imleç "büyütürüm" der,
     tıklamak seçim yapar. */
.oku-sayfa[data-okur="1"] figure.oku-resim img{ cursor:zoom-in; }

/* Tam ekran katman. ⚠ Zemin bilerek TEMA TOKENI DEĞİL ve bilerek YARI SAAT DEĞİL:
   • koyu → açık zemin fotoğrafın kendi renklerini yanıltır (iki temada da koyu kalır);
   • TAM OPAK → yarı saydamda kitabın yazısı fotoğrafın arkasından okunuyor ve gözü bölüyordu
     (31-07 denemesinde .94/.97 ikisi de belirgin sızdırdı). Fotoğrafa bakan yalnız fotoğrafı görsün. */
.rb-katman{ position:fixed; inset:0; z-index:2100; display:flex; flex-direction:column;
  background:#06080c; animation:islemKatmanAcil .18s ease-out; }
body.rb-acik{ overflow:hidden; }
.rb-arac{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.6rem .8rem; }
.rb-arac-sol{ display:flex; align-items:center; gap:.4rem; }
.rb-btn{ min-width:2.2rem; height:2.2rem; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:var(--r-kontrol); padding:0 .55rem; cursor:pointer; font-size:.85rem; font-weight:600;
  font-family:Inter, system-ui, sans-serif; background:var(--btn-solid); color:#fff; transition:var(--gecis); }
.rb-btn:hover:not(:disabled), .rb-btn:focus-visible{ background:var(--btn-solid-2); color:#fff; outline:none; }
.rb-btn:disabled{ opacity:.4; cursor:default; }
.rb-genis{ padding:0 .8rem; }
.rb-yuzde{ min-width:3.4rem; text-align:center; font-family:Inter, system-ui, sans-serif; font-size:.8rem;
  font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }
/* Kaydırılabilir alan. "safe center" ŞART: düz "center" ile yakınlaştırılmış görselin SOL/ÜST taşması
   kaydırılamaz hâle gelir (bilinen flex/grid davranışı). Desteklemeyen tarayıcı ikinci satırı yok sayar,
   birinci satırdaki düz center geçerli kalır. */
.rb-alan{ flex:1 1 auto; min-height:0; overflow:auto; padding:0 .8rem;
  display:flex; align-items:center; justify-content:center; }
.rb-alan{ align-items:safe center; justify-content:safe center; }
.rb-alan img{ display:block; max-width:100%; max-height:100%; border-radius:.35rem; }
.rb-alan.yakin img{ max-width:none; max-height:none; }
.rb-alan img.gezilebilir{ cursor:grab; }
.rb-alan img.geziliyor{ cursor:grabbing; }
.rb-yazi{ flex:0 0 auto; padding:.7rem 1rem 1rem; text-align:center; color:#fff;
  font-family:Inter, system-ui, sans-serif; font-size:.86rem; line-height:1.4; }
@media (max-width: 576px){
  .rb-arac{ padding:.5rem .5rem; }
  .rb-btn{ font-size:.78rem; }
  .rb-genis{ padding:0 .6rem; }
  .rb-yuzde{ min-width:2.9rem; font-size:.75rem; }
}

/* Paragraf sonundaki "＋ Resim" düğmesi — Word'deki metin imlecinin karşılığı (çıpa = paragraf). */
/* ⚠ YALNIZ KENARLIKLI (dashed/transparan/soluk) OLAMAZ — bkz. genel kural "Görsel netlik / kontrast".
   Eski hâli: border:1px dashed var(--line) + background:transparent + color:var(--muted) → kullanıcı
   "belirli belirsiz duruyor" dedi (31-07). DOLGU zemin + beyaz yazı + SABİT hover rengi.
   Zemin `--gilt` DEĞİL `--btn-solid`: amber üzerine beyaz, koyu temada (#f4b13a) okunmuyor.
   ⚠ ÖLÇÜ = BAŞLIK ARAÇLARIYLA AYNI KADEME (v1.23.10, kullanıcı isteği 07-08: "paragraf sonundaki
     + Resim butonunu da normal boyut yap"). Eski .7rem/.12-.55rem metnin içinde neredeyse görünmüyordu.
     Bu ölçü .baslik-resim ile ORTAKTIR (aynı işi yapan düğme aynı görünsün) — orası yalnız kendine
     özgü olanı (opaklık) yazar, ikinci bir boyut kaynağı AÇMA.
   ⚠ vertical-align:middle — büyüyen kutuda baseline hizası düğmeyi satırdan aşağı sarkıtıyordu
     (eski .08em küçük rozet içindi). */
.para-ekle{ font-family:Inter, system-ui, sans-serif; font-size:.85rem; font-weight:600; vertical-align:middle;
  margin-left:.4rem; padding:.3rem .7rem; border-radius:.6rem; cursor:pointer; white-space:nowrap;
  border:none; background:var(--btn-solid); color:#fff; box-shadow:var(--golge); transition:var(--gecis); }
.para-ekle:hover{ background:var(--btn-solid-2); color:#fff; }
.para-ekle:focus-visible{ outline:2px solid var(--gilt); outline-offset:2px; }

/* Sürükleyerek taşımada bırakma yeri — akışa GİRMEZ (mutlak konumlu), yoksa her harekette sayfa zıplardı. */
.manuscript{ position:relative; }
.birak-cizgi{ position:absolute; left:0; right:0; height:3px; border-radius:2px; background:var(--gilt);
  box-shadow:0 0 0 4px var(--gilt-tint); pointer-events:none; z-index:4; }
.birak-cizgi::after{ content:"buraya"; position:absolute; right:0; top:-1.15rem;
  font-family:Inter, system-ui, sans-serif; font-size:.64rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; background:var(--gilt); padding:.05rem .35rem; border-radius:.35rem; }

/* GÖRSEL AYAR PANELİ — mockup'taki sağ sütunun okuma sayfasındaki karşılığı. Oku sayfasının SAĞI kitabın
   KENDİSİ (İçindekiler solda) olduğundan panel sabit/yüzer durur: masaüstünde sağ altta kart, telefonda
   tam genişlik alt sayfa. Seçim kalkınca gizlenir. z-index 1040 < modal (1050) → depo modalı üstte kalır. */
.resim-panel{ position:fixed; right:1rem; bottom:1rem; z-index:1040; width:19rem; max-width:calc(100vw - 2rem);
  max-height:calc(100vh - 2rem); overflow:auto; background:var(--paper); border-radius:var(--r-kart);
  box-shadow:var(--golge-2); display:none; }
.resim-panel.acik{ display:block; }
.resim-panel-bas{ display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem;
  border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.9rem; }
.resim-panel-bas .kapat{ margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.15rem; line-height:1; }
.rp-grup{ padding:.6rem .75rem; }
.rp-grup + .rp-grup{ border-top:1px solid var(--line); }
.rp-et{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.35rem; }
.rp-secenekler{ display:flex; gap:.3rem; flex-wrap:wrap; }
/* ⚠ Seçili OLMAYAN hâli de DOLGU zeminlidir (eskiden transparan + ince kenarlıktı → görünmüyordu);
   seçili olan primary'ye döner. Hover SABİT bir zemine geçer, yalnız kenarlık koyulaştırmaz. */
.rp-sec{ flex:1 1 auto; min-width:3.4rem; font:inherit; font-size:.76rem; font-weight:600; cursor:pointer; padding:.35rem .3rem;
  border-radius:.4rem; border:none; background:var(--btn-zemin); color:var(--ink); transition:var(--gecis); }
.rp-sec:hover{ background:var(--primary-tint); color:var(--primary-2); }
/* Zemin `--primary` DEĞİL `--btn-solid`: koyu temada --primary (#7e82ff) üzerine beyaz ~3,2:1 kalıyor
   (AA sınırı 4,5). --btn-solid tam da "üstüne beyaz yazı gelecek dolgu" için ayrılmış token: 5,4:1. */
.rp-sec[aria-pressed="true"]{ background:var(--btn-solid); color:#fff; }
.rp-sec[aria-pressed="true"]:hover{ background:var(--btn-solid-2); color:#fff; }
.rp-satir{ display:flex; align-items:center; gap:.5rem; }
.rp-satir + .rp-satir{ margin-top:.35rem; }
.rp-satir input[type="range"]{ flex:1; min-width:0; accent-color:var(--primary); }
.rp-deger{ font-variant-numeric:tabular-nums; font-size:.78rem; font-weight:600; color:var(--ink); min-width:3rem; text-align:right; }
.rp-anahtar{ display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.84rem; color:var(--ink-2); }
.rp-anahtar input{ accent-color:var(--primary); width:1rem; height:1rem; }
.rp-ipucu{ font-size:.75rem; color:var(--muted); line-height:1.4; margin:.3rem 0 0; }
@media (max-width: 575.98px){
  .resim-panel{ right:0; left:0; bottom:0; width:auto; max-width:none; max-height:70vh;
    border-radius:var(--r-kart) var(--r-kart) 0 0; }
}

/* Medya deposu (#medyaModal) */
.medya-drop{ border:2px dashed var(--line); border-radius:.6rem; padding:1.1rem; text-align:center;
  color:var(--muted); font-size:.86rem; margin-bottom:.9rem; transition:var(--gecis); cursor:pointer; }
.medya-drop.uzerinde{ border-color:var(--primary); background:var(--primary-tint); color:var(--ink); }
.medya-izgara{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:.6rem; }
/* ⚠ IZGARA ÖĞESİ .medya-oge DEĞİL, onu saran .medya-kutu'dur (silme düğmesi mutlak konumlanabilsin diye).
   .medya-oge bir <button> ve butonun varsayılanı width:auto → "img{width:100%}" kuralı DAİRESEL kalıyordu:
   buton genişliğini içeriğinden, içerik genişliğini butondan alıyor; tarayıcı görselin DOĞAL genişliğine
   düşüyordu. 3554px'lik bir duvar kâğıdı kartı hücrenin dışına taşırıp komşu kartların ÜSTÜNE biniyordu
   (31-07 şikayeti: "iç içe girmiş gibi"). İKİ kural birlikte çözer:
     min-width:0  → grid item varsayılanı "auto"dur ve içerik taşmasına İZİN VERİR; sıfırlanmalı.
     width:100%   → buton hücreyi doldurur, artık ölçüsünü içerikten almaz. */
.medya-kutu{ position:relative; min-width:0; }
.medya-oge{ position:relative; width:100%; border:2px solid transparent; border-radius:.55rem; overflow:hidden;
  background:var(--surface); padding:0; text-align:left; cursor:pointer; transition:var(--gecis); }
.medya-oge img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.medya-oge span{ display:block; padding:.3rem .45rem; font-size:.72rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.medya-oge[aria-pressed="true"]{ border-color:var(--primary); }
.medya-oge[aria-pressed="true"] span{ color:var(--ink); font-weight:600; }
.medya-sil{ position:absolute; top:.25rem; right:.25rem; width:1.6rem; height:1.6rem; padding:0; border:none;
  border-radius:.35rem; background:var(--danger); color:#fff; cursor:pointer; font-size:.8rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--golge); }

/* ===== MOBİL (dar ekran) — OKUMA SAYFASI =====
   Şikayet (30-07): "Üste sabitlediğimiz bilgi alanı sayfanın üstünü tamamen kapatıyor."
   Sebep: .ick-sabit YEDİ sayım gösteriyor; telefon genişliğinde bunlar 3-4 satıra sarıyor ve fixed
   olduğu için içeriğin üstünü örtüyordu. Çözüm — şeridi KALDIRMAK değil KÜÇÜLTMEK (kullanıcı
   "kaybolmalı VEYA çok küçük yer kaplamalı" dedi; küçültme daha öngörülebilir, zıplama yaratmaz):
   yalnız sayfa · paragraf · cümle kalır, TEK SATIR, küçük punto → ~1,4rem yer kaplar.
   Sarma KAPALI (nowrap) — bir öğe daha eklenirse bile şerit ikinci satıra TAŞMAZ. */
@media (max-width: 575.98px){
  .ick-sabit [data-ist="grup"], .ick-sabit [data-ist="hikaye"],
  .ick-sabit [data-ist="kelime"], .ick-sabit [data-ist="videodk"]{ display:none; }
  .ick-sabit{ flex-wrap:nowrap; gap:0 .7rem; padding:.15rem .5rem; font-size:.72rem; line-height:1.45; }
  /* Bölüm başlığı şeridi de telefonda ince kalsın (istatistik şeridiyle aynı gerekçe). */
  .oku-bas-sabit{ padding:.2rem .5rem; gap:.2rem .45rem; }
  .oku-bas-sabit .obs-ad{ font-size:.92rem; }

  /* Kapak/başlık: 2,3rem telefonda satırı kırıp kapağı şişiriyordu. */
  .oku-baslik{ font-size:1.6rem; }
  .oku-kapak{ padding:.8rem 0 1.2rem; margin-bottom:1.2rem; }
  .oku-bolum-bas{ font-size:1.42rem; }
  .oku-blok-bas{ font-size:1.1rem; }
  .oku-govde{ padding:1.2rem 1rem; }
  .oku-bolum{ margin-bottom:1.8rem; }
  /* Başlık/araç kutusu telefonda daha dar bir çerçeve ister (gövdenin kendi payı zaten 1rem'e indi). */
  .ob-yonetim .oku-bolum-ust{ padding:.7rem .7rem .25rem; margin-bottom:1.2rem; }
  .ob-yonetim + .ob-yonetim{ margin-top:2.2rem; padding-top:1.6rem; }
  /* Blok kartı (v1.23.12) aynı gerekçeyle daralır: gövde 1rem + kart 1,15rem = metin sütunu 2,15rem
     kaybediyordu; telefonda satır başına birkaç kelime demek. */
  .oku-blok{ padding:.75rem .8rem 1rem; margin-top:1.2rem; }
  .oku-bolum .oku-blok > .manuscript{ padding-top:.85rem; margin-top:.7rem; }

  /* Sürüm satırı: sayımlar margin-left:auto + nowrap ile sağa yapışıyor, dar ekranda taşıyordu. */
  .surum-oge{ gap:.3rem .5rem; padding:.5rem; }
  .surum-oge-say{ margin-left:0; white-space:normal; font-size:.74rem; }
  .surum-oge-meta{ font-size:.72rem; }

  /* İçindekiler satırı: nokta dolgusu dar ekranda anlamsız, başlığa yer bırakmıyor. */
  .ick-satir{ flex-wrap:wrap; gap:.15rem .4rem; }
  .ick-nokta{ display:none; }
  .ick-ad{ flex:1 1 100%; }
  .ick-bilgi{ font-size:.78rem; }
  .ick-toplam{ font-size:.8rem; gap:.1rem .7rem; }

  /* Bölüm ses çubuğu: w-auto seçiciler yan yana sığmayıp taşıyordu → tam genişlik, alt alta. */
  .bolum-ses .form-select{ width:100% !important; }
  .bolum-ses > .btn{ flex:1 1 auto; justify-content:center; }
  /* Oynatıcı üst satırı (kulaklık ikonuyla birlikte) doldurur, "10 sn" düğmeleri + vurgu seçicisi alt
     satıra iner — sarma eşiği genel kuralda (.oku-ses audio{flex-basis:11rem}).
     ⚠ Burada audio'ya flex-basis:100% VERME: ikon o zaman TEK BAŞINA bir satır kaplar, çubuk üç satıra çıkar.
     Yönetim çubuğunda oynatıcı bir kutunun içindedir → tam genişliği O kutu alır. */
  .oku-ses .bs-audio-kutu{ flex:1 1 100%; min-width:0; }
  .oku-ses .bs-audio-kutu audio{ flex:1 1 auto; }

  /* "Ses Ayarları" telefonda köşede kalırsa geriye ~9,5rem'lik bir şerit kalıyor → seçiciler sıkışıyor.
     Dar ekranda akışa döner (çubuğun İLK öğesi = üstte, tam genişlik) ve ayrılan yer geri verilir. */
  .bolum-ses{ padding-right:.7rem; }
  .bs-ayar{ position:static; }

  /* PDF menüsündeki açıklama satırları menüyü ekrandan taşırıyordu. */
  .dropdown-menu{ max-width:min(20rem, calc(100vw - 1.5rem)); }
  .dropdown-item{ white-space:normal; }
}

/* Yazdırma — sade kitap çıktısı (araç çubuğu + üst bar gizli) */
@media print{
  .ustbar, #toastKutu{ display:none !important; }
  .oku-govde{ box-shadow:none; max-width:none; padding:0; }
  .oku-bolum{ break-inside:avoid; }
  .oku-bolum-bas, .oku-bolum-no{ break-after:avoid; }
  /* Başlık kutusu + bölüm ayracı EKRAN İÇİN bir yönetim yardımıdır (v1.23.6), kitabın parçası değil →
     kâğıtta zemin/çerçeve/çizgi basılmaz. ⚠ Seçici ekrandakiyle AYNI özgüllükte yazılmalı, yoksa
     2 sınıflık kural bu bloğu ezer ve yazdırma çıktısına gri kutu düşer. */
  .ob-yonetim .oku-bolum-ust{ background:none; border:none; padding:0; margin-bottom:0; }
  .ob-yonetim + .ob-yonetim{ border-top:none; padding-top:0; margin-top:0; }
  /* BLOK KARTI + ARAÇ/METİN AYRACI EKRAN İÇİNDİR (v1.23.12, kullanıcı şartı: "kitap çıktılarında
     istemiyorum") → kâğıtta kutu da renkli çizgi de basılmaz; bloklar sade akışa döner.
     ⚠ Seçici ekrandakiyle AYNI özgüllükte (üç sınıf) yazılır, yoksa .oku-bolum .oku-blok > .manuscript
       kuralı bu bloğu ezer ve her bloğun üstüne kalın bir çizgi düşer.
     ⚠ Word/PDF bu markup'a BAKMAZ (veriden üretilir) — burası yalnız tarayıcıdan yazdırma içindir. */
  .oku-blok{ background:none; border:none; box-shadow:none; border-radius:0; padding:0; margin-top:1.4rem; }
  .oku-bolum .oku-blok > .manuscript{ border-top:none; padding-top:0; margin-top:0; }
  a{ color:inherit; text-decoration:none; }
}

/* ===== Anı üretimleri (Özet / Manifesto / Yorum / Edebi — paragraf-hedefli) ===== */
.ani-uretimler{ display:flex; flex-direction:column; gap:.5rem; }
.ani-uretim{ background:var(--surface); border-radius:.4rem; padding:.5rem .6rem; }
.ani-uretim-bas{ font-weight:600; color:var(--ink); min-width:11rem; }
/* Yükseklik ekrana göre (21-08 kullanıcı isteği: "edebi metin/özet alanları daha yüksek olsun") —
   sabit 22rem'de uzun metin sürekli iç kaydırma istiyordu; 60vh küçük ekranda taşmayı önler. */
.ani-uretim-metin{ white-space:pre-wrap; margin-top:.5rem; color:var(--ink-2); line-height:1.65;
  background:var(--paper); border-radius:.3rem; padding:.6rem .75rem; max-height:min(60vh, 36rem); overflow:auto; }

/* ===== Birleştir: sade anı liste kartı + Düzenle modalı ===== */
/* Liste kartı durum çipleri ("3 paragraf · 340 kelime · ~2 dk", "ses var") */
.ani-kart-durum .durum-cip{ display:inline-flex; align-items:center; font-size:.82rem; padding:.18rem .6rem;
  border-radius:1rem; background:var(--surface); color:var(--ink-2); }
.ani-kart-durum .durum-cip.ok{ background:var(--gilt-tint); color:var(--gilt-2); }
/* Modal "Metin" sekmesi: şu anki uzunluk bandı + sürüm satırları */
.metin-suan{ background:var(--gilt-tint); color:var(--gilt-2); border-radius:var(--r-kontrol); padding:.5rem .75rem; }
.ani-surumler{ display:flex; flex-direction:column; gap:.4rem; }
.ani-surum-satir{ display:flex; align-items:center; gap:.7rem; background:var(--surface);
  border-radius:.4rem; padding:.45rem .65rem; }
.ani-surum-satir.aktif{ outline:2px solid var(--primary); }
.ani-surum-satir .ss-ad{ font-weight:600; color:var(--ink); }
.ani-modal-tab .nav-link{ color:var(--ink-2); }
.ani-modal-tab .nav-link.active{ color:var(--primary); font-weight:600; }
/* 6 SEKME (03-08: "Yan metinler" üçe bölündü) — dar ekranda şerit TAŞMASIN.
   Bootstrap .nav varsayılanı flex-wrap:wrap; sarınca sekmeler alt satıra düşer ama nav-tabs'ın alt
   çizgisi <ul>'nin ALTINDA kaldığı için üst satırdaki sekmeler boşlukta durur ve etkin sekmenin
   "çentiği" kaybolur. Onun yerine TEK SATIR + yatay kaydırma: etiketler kırpılmaz.
   ⚠ overflow KABIN üzerindedir, <ul>'nin değil: <ul>'ye verilseydi etkin .nav-link'in alt çizgiyi
   delen -1px'lik margin'i kırpılır, çentik yine kaybolurdu. <ul> kabın tamamı kadar genişler
   (width:max-content + min-width:100%) → alt çizgi kaydırma boyunca kesintisiz.
   Renkler token'dan (koyu tema otomatik); kaydırma çubuğu ince ve sessiz. */
/* PENCERE GENİŞLİĞİ (21-08 kullanıcı isteği: "Manifesto (3.Şahıs) sekmesine ulaşmak için şeridi
   kaydırmak gerekiyor — pencere biraz daha geniş olsun"). Bootstrap modal-xl 992-1199px ekranda
   800px'e düşer, ≥1200px'te de 1140px'te durur; beş sekme ikisine de sığmıyordu. Tavan yükseltilir
   ve ara kırılımın 800px daralması kaldırılır — pencere ekrana göre genişler, sekmeler kaydırmasız
   görünür. Aşağıdaki kaydırma kutusu YİNE KALIR (telefon/çok dar pencere için son savunma). */
@media (min-width: 992px){
  #aniModal .modal-dialog{ max-width:min(1360px, calc(100vw - 3rem)); }
}
.ani-modal-tab-kutu{ overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.ani-modal-tab{ flex-wrap:nowrap; width:max-content; min-width:100%; }
.ani-modal-tab .nav-item{ flex:0 0 auto; }
.ani-modal-tab .nav-link{ white-space:nowrap; }
.ani-modal-tab-kutu::-webkit-scrollbar{ height:6px; }
.ani-modal-tab-kutu::-webkit-scrollbar-track{ background:transparent; }
.ani-modal-tab-kutu::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.ani-uretim-edit{ width:100%; }

/* ===== ELLE METİN GİRİŞİ (v1.39.0 — kullanıcı isteği 17-09: hikayesiz gruba metni kendin yapıştır) =====
   Grup penceresi: anlatım yoksa başta şerit (.grup-bos-not — .metin-suan ailesi, gilt tint); metin yokken
   kesik çerçeveli davet (.elle-giris — "burası boş, doldurabilirsin"); pasif Üret'in yanındaki gerekçe
   (.uret-kapali-not); edebi elle girişte boş contenteditable'ın yer tutucusu (.elle-editor:empty::before —
   contenteditable'da placeholder özniteliği yoktur). Hepsi token → koyu tema otomatik. Rozet yok (kullanıcı kararı). */
.grup-bos-not{ display:flex; gap:.6rem; align-items:flex-start; background:var(--gilt-tint); color:var(--gilt-2);
  border-radius:var(--r-kontrol); padding:.55rem .8rem; font-size:.92rem; line-height:1.45; }
.grup-bos-not i{ font-size:1.15rem; line-height:1.3; }
.grup-bos-not a{ color:inherit; font-weight:600; }
.elle-giris{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; background:var(--paper);
  border:1px dashed var(--line-2); border-radius:.4rem; padding:.6rem .8rem; margin-top:.5rem; color:var(--ink-2); }
.elle-giris > i{ font-size:1.2rem; color:var(--yesil); }
.elle-giris .btn{ margin-left:auto; }
.uret-kapali-not{ font-size:.82rem; color:var(--muted); }
.elle-editor{ min-height:12rem; }
.elle-editor:empty::before{ content:attr(data-bos); color:var(--muted); }
.elle-sayac{ font-variant-numeric:tabular-nums; }
/* KAYNAK ROZETİ (v1.39.1): sürüm satırı + dolu blok başlığı — AI (yapay zeka, indigo) / ELLE (elle giriş, yeşil).
   Tek çizici anilar.js > kaynakRozet; renk token → koyu tema otomatik. */
.rozet-kaynak{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  border-radius:999px; padding:.16rem .5rem; white-space:nowrap; vertical-align:middle; }
.rozet-kaynak.ai{ background:var(--primary-tint); color:var(--primary); }
.rozet-kaynak.elle{ background:var(--yesil-tint); color:var(--yesil-2); }

/* ===== Toplu işlem paneli: özet bandı + aşama çipleri ===== */
.toplu-ozet{ background:var(--surface); border-radius:var(--r-kontrol); padding:.55rem .85rem; color:var(--ink-2);
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
.toplu-ozet .cip-ozet{ display:inline-flex; align-items:center; font-size:.84rem; padding:.12rem .55rem;
  border-radius:1rem; background:var(--paper); color:var(--ink-2); }
.toplu-ozet .cip-ozet.ok{ color:var(--yesil); }
.toplu-ozet .cip-ozet.proc{ color:var(--primary); }
.toplu-ozet .cip-ozet.err{ color:var(--danger); }
.toplu-tablo td, .toplu-tablo th{ vertical-align:middle; }
/* LİSTE ZEMİNİ KÂĞIT (v1.22.16 — kullanıcı bildirimi: "liste arka planı beyaz olsun").
   ⚠ Sebep: Bootstrap `.table` hücreleri `--bs-table-bg` ile BOYAR ve varsayılanı `--bs-body-bg`'dir; bizde o
   token `--surface`'a (gri) eşlenmiş (site.css :root) → kartın kendisi beyaz olsa da hücreler gri geliyordu.
   Kart zemini `--paper`; tablo da onu miras almalı. Renkler TOKEN → koyu temada da doğru (orada "beyaz"
   değil koyu kâğıt olur; hardcode #fff yazılsaydı koyu tema kırılırdı). */
.toplu-tablo{ --bs-table-bg:var(--paper); --bs-table-color:var(--ink); --bs-table-border-color:var(--line); }
/* Satırın üzerine gelince hafif vurgu: onlarca satırda hangi satırda olduğun kaybolmasın. */
.toplu-tablo tbody tr:hover > *{ background-color:var(--surface); }
.toplu-ad{ font-weight:600; color:var(--ink); text-decoration:none; }
.toplu-ad:hover{ color:var(--primary); text-decoration:underline; }
.asama-cip{ display:inline-flex; align-items:center; font-size:.8rem; padding:.16rem .55rem;
  border-radius:1rem; background:var(--surface); color:var(--ink-2); }
.asama-cip.bitti{ background:rgba(46,160,67,.14); color:var(--yesil); }
.asama-cip.isleniyor{ background:rgba(var(--bs-primary-rgb), .14); color:var(--primary); font-weight:600; }
.asama-cip.hata{ background:var(--danger-tint); color:var(--danger); }
.asama-cip.bekliyor{ opacity:.6; }
/* SATIR SEÇİM KUTUCUĞU — BELİRGİN (v1.22.16, kullanıcı bildirimi: "checkbox daha belirgin olsun").
   Bootstrap varsayılanı 1rem + çok soluk kenarlık (rgba(0,0,0,.25)) → beyaz zeminde onlarca satırda kutunun
   nerede olduğu ancak dikkatle görülüyordu. Burada büyütülür + kenarlık kalınlaştırılır; işaretliyken dolgu
   birincil renk. ⚠ Yalnız TOPLU LİSTE tablolarına özel (.toplu-tablo altında) — global .form-check-input'a
   dokunmak projedeki tüm form kutucuklarını değiştirirdi. Renkler token → koyu tema otomatik. */
.toplu-tablo .form-check-input{ width:1.15rem; height:1.15rem; margin-top:0; cursor:pointer;
  border:2px solid var(--muted); background-color:var(--paper); }
.toplu-tablo .form-check-input:hover{ border-color:var(--primary); }
.toplu-tablo .form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
.toplu-tablo .form-check-input:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }

/* Toplu panel: satır-içi video tarihi (gün/ay/yıl; yıl zorunlu) */
/* Toplu panel "Çok konuşmacı" sütunu: kutucuk + (transkript eskiyse) uyarı ikonu. */
.toplu-cok{ display:inline-flex; align-items:center; gap:.35rem; }
.toplu-cok .t-cok{ cursor:pointer; }

.toplu-tarih{ display:inline-flex; align-items:center; gap:.25rem; }
.toplu-tarih input{ width:2.6rem; text-align:center; padding:.15rem .25rem; font-size:.82rem;
  border:1px solid var(--line); border-radius:.3rem; background:var(--paper); color:var(--ink); }
.toplu-tarih input.t-yil{ width:3.6rem; }
.toplu-tarih input.eksik{ border-color:var(--danger); background:var(--danger-tint); }
.toplu-tarih input::-webkit-outer-spin-button, .toplu-tarih input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ===== Toplu işlem SEKME ÇUBUĞU (v1.22.16) =====
   7 sekme + "hazır/toplam" rozetleri: TEK SATIRA SIĞMAZ. Kullanıcı bildirimi 06-08 — yatay kaydırmalı ilk
   sürümde sağdaki sekme (Ses) çubuğun dışında kalıyor, kaydırma çubuğu alt kenarda fark edilmiyordu; yazı
   boyutu (A+) büyütülünce durum daha da kötüleşiyordu. Karar: ÇUBUK SARAR (gerekirse 2-3 satır), kaydırma YOK.
   ⚠ Bu yüzden markup'ta `nav-tabs` KULLANILMAZ, sade `nav` vardır: Bootstrap'in tab alt çizgisi <ul>'nin
   altındadır → sarınca üst satırdaki sekmeler boşlukta kalır ve etkin sekmenin "çentiği" kaybolur. Onun
   yerine her sekme kendi SEGMENT düğmesidir (etkin olan dolgulu + çerçeveli); şeridi alttaki ince çizgi
   kapatır, sarma bunu bozmaz. ⚠ nav-tabs'a geri dönme — sarma ile çentik bir arada çalışmıyor.
   İç boşluklar bilerek DAR (kullanıcı isteği: "kenar boşluklarını azaltalım"). */
.ti-sekmeler{ display:flex; flex-wrap:wrap; gap:.25rem;
  border-bottom:1px solid var(--line); padding-bottom:.4rem; }
.ti-sekmeler .nav-item{ flex:0 0 auto; }
.ti-sekmeler .nav-link{ display:inline-flex; align-items:center; white-space:nowrap;
  padding:.3rem .55rem; font-size:.92rem; line-height:1.25;
  border:1px solid transparent; border-radius:var(--r-kontrol); color:var(--ink-2); }
.ti-sekmeler .nav-link:hover{ background:var(--surface); color:var(--ink); }
.ti-sekmeler .nav-link.active{ background:var(--surface); border-color:var(--line);
  color:var(--primary); font-weight:600; }
.ti-sekmeler .nav-link .bi{ font-size:.95rem; }
/* SEKME ROZETİ: "hazır/toplam" — kullanıcı hangi sekmedeyse DİĞERLERİNİN durumunu da görsün (kullanıcı
   isteği 06-08). Nötr başlar; kısmen doluysa amber, tamamlandıysa yeşil. Kapsam yoksa JS gizler.
   ⚠ Nötr rozet DOLGUSUZ (ince çerçeve): etkin sekmenin arka planı da --surface olduğundan dolgulu rozet
   orada görünmez olurdu. Dolgu yalnız kismi/tam durumlarında (renk zaten anlam taşıyor). */
.ti-rozet{ display:inline-block; margin-left:.3rem; font-size:.7rem; font-weight:600; line-height:1;
  padding:.14rem .3rem; border-radius:1rem; border:1px solid var(--line); color:var(--muted); }
.ti-rozet.kismi{ background:var(--gilt-tint); border-color:transparent; color:var(--gilt-2); }
.ti-rozet.tam{ background:rgba(46,160,67,.14); border-color:transparent; color:var(--yesil); }
/* Dar ekran: sekme sayısı çok → daha da sıkıştır (etiketler yine okunur kalsın diye kırpma YOK, sarma var). */
@media (max-width:576px){
  .ti-sekmeler .nav-link{ padding:.25rem .45rem; font-size:.85rem; }
}

/* ===== Toplu edebi paneli: toplu doldurma bandı + satır ayarları =====
   Özet bandı, tablo, ad linki ve durum çipleri TOPLU panelinden MİRAS alınır
   (.toplu-ozet · .cip-ozet · .toplu-tablo · .toplu-ad · .asama-cip) — burada yalnız eksik parçalar. */
.te-doldur{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.te-doldur-not{ font-style:italic; color:var(--muted); }
/* Paragraf girişi (hem üst bant hem satır): dar sütun → artırma okları gizli. */
.te-par{ width:4rem; text-align:center; padding:.15rem .3rem; font-size:.85rem;
  border:1px solid var(--line); border-radius:.3rem; background:var(--paper); color:var(--ink); }
.te-par:focus{ outline:none; border-color:var(--primary); }
.te-par::-webkit-outer-spin-button, .te-par::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.te-model{ width:auto; min-width:5.5rem; }
/* "Güncel değil" (cascade B): grubun anlatımları değişmiş → edebi metin yeniden üretilmeli. Sessiz amber (UYARI). */
.te-bayrak{ display:inline-flex; align-items:center; font-size:.75rem; padding:.1rem .45rem;
  border-radius:1rem; background:var(--gilt-tint); color:var(--gilt-2); white-space:nowrap; }
/* "Kısaltılmış": kitapta özgün değil kısaltma sürümü görünüyor. BİLGİ (uyarı DEĞİL) → amber değil mavi. */
.te-bayrak.kis{ background:var(--mavi-tint); color:var(--mavi); }
/* Satır içi uzunluk önerisi (v1.22.13): dolgulu buton onlarca satırda gürültü olur → soluk metin-düğme;
   tam öneri cümlesi title'da, tıklayınca girişe yazar (topluedebi.js > teOneriUygula). Renkler token. */
.te-oneri{ display:block; margin-top:.15rem; padding:0; border:0; background:none; font-size:.72rem;
  color:var(--muted); white-space:nowrap; }
.te-oneri:hover{ color:var(--primary); text-decoration:underline; }
.te-oneri .bi{ color:var(--gilt-2); }
/* SATIR DURUM HARİTASI (v1.22.14): grubun TÜM üretimleri tek bakışta (Edebi · Özet · M1 · M3 · Promt · Ses).
   Dolu = yeşil tik, boş = soluk halka; BULUNULAN sekmenin çipi çerçeveyle vurgulanır (harita ile o an
   üretilecek iş karışmasın). Onlarca satırda gürültü olmasın diye küçük ve dolgusuz-soluk. */
.te-harita{ display:flex; flex-wrap:wrap; gap:.2rem .3rem; }
.te-hcip{ display:inline-flex; align-items:center; font-size:.7rem; line-height:1; white-space:nowrap;
  padding:.18rem .38rem; border-radius:1rem; border:1px solid transparent;
  background:var(--surface); color:var(--muted); }
.te-hcip .bi{ font-size:.7rem; }
.te-hcip.dolu{ background:rgba(46,160,67,.12); color:var(--yesil); }
.te-hcip.bu{ border-color:var(--primary); color:var(--primary); font-weight:600; }
.te-hcip.bu.dolu{ color:var(--yesil); }
/* BAŞLIK ANONSU çipleri (v1.40.4, toplu ses sekmeleri "Başlıklar" sütunu + durum haritası "Başlık" çipi): gövde
   çipleriyle aynı aile, kesik kenarlık ayırt eder (başlık = konu anonsu, metin değil). Dolu hâli yine yeşil. */
.te-hcip.bas{ border-style:dashed; border-color:var(--line); }
/* Kapsam kutusu kapalı aile (Metinler / Başlıklar): bilgi kalır, soluk — bu adımda üretilmeyeceği okunur. */
.te-kapsam-disi{ opacity:.45; }

/* ===== Ayarlar sayfası: gruplu form ızgarası ===== */
.ayar-tab .nav-link{ color:var(--ink-2); }
.ayar-tab .nav-link.active{ color:var(--primary); font-weight:600; }
.ayar-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); gap:1rem 1.5rem; }
.ayar-alan{ display:flex; flex-direction:column; gap:.3rem; }
.ayar-etiket{ font-size:.85rem; font-weight:600; color:var(--ink); }
.ayar-ipucu{ font-size:.78rem; line-height:1.45; }

/* ===== Giriş (auth): menüsüz layout + ŞEFFAF HOLOGRAM arka plan (kurumsal; AI-slop yok) ===== */
.auth-body{ min-height:100vh; }
.auth-sahne{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1200px 760px at 72% 16%, rgba(var(--bs-primary-rgb), .12), transparent 60%),
    radial-gradient(960px 640px at 16% 92%, rgba(212,160,60, .09), transparent 60%),
    var(--surface); }
/* İnce teknik ızgara (hologram hissi) — merkeze doğru maskelenir, kenarlarda silinir */
.auth-grid{ position:absolute; inset:-2px; opacity:.5;
  background-image:
    linear-gradient(rgba(var(--bs-primary-rgb), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--bs-primary-rgb), .05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 22%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 42%, #000 22%, transparent 72%); }
/* Hologram glifleri: düşük opaklık + ışıma + yavaş süzülme */
.holo{ position:absolute; color:var(--primary); opacity:.12; line-height:1; pointer-events:none; text-align:center;
  filter:drop-shadow(0 0 22px currentColor); animation:holoSuzul 19s ease-in-out infinite; }
.holo.gilt{ color:var(--gilt); }
.holo .bi{ display:block; }
.holo-et{ display:block; margin-top:.18rem; font-size:.13em; letter-spacing:.34em; text-transform:uppercase;
  font-weight:700; opacity:.9; }
.holo.ters{ animation-name:holoSuzulTers; }
[data-bs-theme="dark"] .holo{ opacity:.17; }
@keyframes holoSuzul{ 0%,100%{ transform:translateY(0) rotate(-5deg); } 50%{ transform:translateY(-28px) rotate(5deg); } }
@keyframes holoSuzulTers{ 0%,100%{ transform:translateY(0) rotate(5deg); } 50%{ transform:translateY(24px) rotate(-5deg); } }

.auth-merkez{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.auth-tema{ position:fixed; top:1rem; right:1rem; z-index:5; }

/* Kart: SOLİD (glass yok), yumuşak gölge + markanın imza şeridi (primary→gilt, yalnız 3px) */
.auth-kart{ width:min(94vw, 26rem); background:var(--paper); border-radius:var(--r-kart);
  box-shadow:var(--golge-2), 0 0 0 1px rgba(var(--bs-primary-rgb), .07); padding:2rem 1.9rem 1.7rem;
  position:relative; overflow:hidden; }
.auth-kart::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--gilt)); }
.auth-marka{ text-align:center; margin-bottom:1.1rem; }
.auth-logo{ width:3.2rem; height:3.2rem; margin:0 auto .65rem; border-radius:.9rem; color:#fff; font-size:1.5rem;
  display:flex; align-items:center; justify-content:center; background:var(--primary); box-shadow:var(--golge); }
.auth-akis{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem;
  margin:0 0 1.2rem; font-size:.78rem; color:var(--ink-2); }
.auth-akis span{ display:inline-flex; align-items:center; gap:.3rem; background:var(--surface);
  border-radius:1rem; padding:.2rem .6rem; }
.auth-akis span .bi{ color:var(--primary); }
.auth-akis .bi-arrow-right{ color:var(--gilt); opacity:.7; }

@media (prefers-reduced-motion: reduce){ .holo{ animation:none !important; } }

/* Oku → Birleştir geri dönüş bandı */
.donus-band{ background:var(--gilt-tint); color:var(--gilt-2); border-radius:var(--r-kontrol);
  padding:.6rem .85rem; box-shadow:var(--golge); }

/* ═══════ OKUMA SAYFASI BAŞLIK ARAÇLARI — NORMAL BOYUT + KALICI GÖRÜNÜR (v1.23.9) ═══════
   Kullanıcı kararı 07-08: "iconlar böyle küçük küçük değil, normal boyutta yapalım" + "bu sayfada
   üzerine gelince görünen buton istemiyorum, bütün bu butonlar görünür olmalı".
   Kapsam: bölüm/blok başlığındaki kalem · başlık sesi · içerik seçimi (☰) · kapak-önsöz kalemi.
   ⚠ ÖLÇÜ BURADA, TEK YERDE: dördü de markup'ta .btn-xs taşır (padding .15/.4 · yazı .78rem) ve eskiden
     her biri ÜSTÜNE bir de kendi küçültmesini yazıyordu (.05rem .3rem · .8rem) → başlığın yanında
     tıklama alanı ~1,2rem'e düşüyordu. Bu blok .btn-xs'i ezer; sınıf markup'ta KALIR çünkü aynı sınıf
     başka sayfalarda (grup penceresi, sürüm listesi) küçük kalmalı — orayı büyütmek istemiyoruz.
   ⚠ OPAKLIK YOK: eskiden .6 (kalem/☰) ve 0 (kapak kalemi, yalnız hover'da) idi. Bu düğmeler ZATEN
     yalnız yönetim modunda render edilir (duzenlenebilir kapısı) → okur onları hiç görmez, kalıcı
     yapmanın okura maliyeti YOKTUR. Yeni bir başlık aracı eklersen seçiciye EKLE, kendi ölçüsünü yazma. */
.baslik-kalem, .baslik-ses, .bolum-icerik-btn, .kitap-kalem{
  margin-left:.15rem; padding:.32rem .58rem; font-size:1rem; line-height:1.25;
  border-radius:var(--r-kontrol); vertical-align:middle; opacity:1; }
.baslik-kalem i, .baslik-ses i, .bolum-icerik-btn i, .kitap-kalem i{ font-size:1.05rem; vertical-align:-.06em; }
/* İkon ile YAZI arası (v1.24.3): kapak/önsöz kalemi eskiden ikon-only idi, artık "Kitap bilgileri"
   yazısını da taşıyor → ikon yazıya yapışmasın. Araç grubundaki düğmeler boşluğu .oku-arac'tan alır
   (flex+gap); bu kalem h1/h2 İÇİNDE inline durduğu için kendi boşluğunu ister. */
.kitap-kalem i{ margin-right:.3rem; }

/* Oku: bölüm başlığı kalıcı bağlantısı — kutulu düğmelerin yanında görsel ağırlığı tutsun diye
   ikon 1,25rem (eski .72em, 1,26rem'e denk geliyordu ama okur/yönetim ayrımı opaklıktaydı). */
.oku-bolum-bas .bolum-permalink{ color:var(--gilt); text-decoration:none;
  font-size:1.25rem; line-height:1; vertical-align:middle; transition:opacity .15s, color var(--gecis); }
.oku-bolum-bas .bolum-permalink:hover, .oku-bolum-bas .bolum-permalink:focus{ color:var(--gilt-2); }
/* ⚠ OKUR modunda (şifresiz/paylaşım linki) eski davranış KORUNUR: hover'da belirir. Kalıcı görünürlük
   kararı YÖNETİM içindir (kullanıcı kararı 06-08 + 07-08); okur için bu bir araçtır, kitabın parçası
   değil — her başlıkta duran bir zincir ikonu gürültüdür.
   ⚠ SEÇİCİ [data-okur="1"] — VARLIK DEĞİL DEĞER (v1.23.7): öznitelik yönetim modunda da BOŞ değerle
     basıldığı için (07-08'de ölçüldü) bu blok YÖNETİMDE DE uygulanıyordu, yani 06-08 kararı permalinke
     hiç işlememişti: zincir ikonu yönetimde de yalnız hover'da beliriyordu. Aynı tuzak okubuyut.js'te
     ve yukarıdaki zoom-in imlecindeydi — üçü aynı ölçüte bağlı. */
.oku-sayfa[data-okur="1"] .oku-bolum-bas .bolum-permalink{ opacity:0; }
.oku-sayfa[data-okur="1"] .oku-bolum-bas:hover .bolum-permalink,
.oku-sayfa[data-okur="1"] .oku-bolum-bas .bolum-permalink:focus{ opacity:.7; }

/* Bölüm/blok başlığı inline düzenleme kalemi — ölçü + görünürlük yukarıdaki ORTAK blokta.
   ⚠ color YAZILMAZ: düğme .btn-yesil taşır (beyaz ikon). Eskiden buraya color:var(--muted) konmuştu
     ve sonradan geldiği için yeşil dolgunun üstünde SOLUK GRİ ikon çiziyordu (kontrast kaybı). */

/* BAŞLIK SESİ (v1.22.12) — başlığın kendi ses kaydını aç/kapa. Ses hazırken dolu hoparlör ikonu gelir
   (rozet görevi: hangi bölümün anonsu var, çubuğu açmadan görünür). */
.baslik-ses-kutu{ margin:.35rem 0 .9rem; }
/* "Demo Ses" başlık çubuğunda ARTIK GİZLİ DEĞİL (v1.28.5): /api/asama/ses-dene baslik/blok parametreleriyle
   BAŞLIĞIN kendisini okuyor (kullanıcı bildirimi 19-08) — eski display:none kuralı kaldırıldı. */

/* KAPAK (kitap adı) + ÖNSÖZ kalemi — .baslik-kalem ile AYNI görünüm, AYRI SINIF bilerek (v1.22.0):
   o kalem BAŞLIK penceresini (#baslikModal, v1.24.2) açar, bu ise "Kitap bilgileri" modalını (ad + önsöz
   birlikte, çünkü uç ikisini tek UPDATE'te yazar). Aynı sınıf verilseydi kitapoku.js'in belge düzeyindeki
   .baslik-kalem dinleyicisi de tetiklenir, bölüm başlığı span'ini arayıp bulamaz ve hata toast'lardı.
   ⚠ ÖLÇÜ + GÖRÜNÜRLÜK ortak blokta (v1.23.9). Eskiden opacity:0 idi ve YALNIZ h1/h2 hover'ında belirirdi
     (dokunmatik için ayrı bir @media (hover:none) istisnasıyla) — kullanıcı kararı 07-08 ile kalktı:
     bu sayfada hiçbir düğme hover'a bağlı değil. Ölçü de em değil rem: h1 2,3rem yanında kalem zaten
     küçük kalır, mobilde başlık 1,6rem'e inince düğmenin de tıklanamayacak kadar küçülmesi istenmiyor. */

/* "Kitaba hangi metinler girsin" düğmesi (SQL/27) — bölüm başlığında, .baslik-kalem ile AYNI görünüm.
   AYRI SINIF: .baslik-kalem'in belge düzeyindeki dinleyicisi BAŞLIK penceresini (#baslikModal) açar,
   bu düğme ise İÇERİK seçimi modalını (iki ayrı pencere, karışmasın). Ölçü + görünürlük ortak blokta. */

/* "Kitaba giren metinler" penceresi — SIRALANABİLİR liste (SQL/31, kullanıcı isteği 07-08).
   Satır sırası = kitaptaki sıra. İki taşıma yolu birlikte: sürükle-bırak (fare) + ▲▼ (dokunmatik/klavye);
   HTML5 sürükleme telefonda ÇALIŞMAZ, o yüzden oklar süs değil ZORUNLU ikinci yoldur. */
.bic-liste{ display:flex; flex-direction:column; gap:.35rem; }
.bic-oge{ display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem;
  background:var(--surface); border:.5px solid var(--line); border-radius:var(--r-kontrol);
  transition:background var(--gecis), box-shadow var(--gecis); }
.bic-oge:hover{ box-shadow:var(--golge); }
.bic-tut{ color:var(--muted); cursor:grab; font-size:1.05rem; line-height:1; flex:0 0 auto; }
.bic-oge.bic-suruklenen{ opacity:.45; }
/* Ok ile taşınan satır kısa süre vurgulanır — 4 satırlık listede "ne oldu?" sorusunu önler. */
.bic-oge.bic-tasindi{ background:var(--primary-tint); }
.bic-no{ flex:0 0 1.3rem; text-align:right; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.bic-secim{ flex:1 1 auto; min-width:0; }
.bic-tasi{ flex:0 0 auto; display:flex; gap:.1rem; }
.bic-tasi .btn{ padding:.1rem .35rem; line-height:1; }

/* ═══ TOPLU İÇERİK SEÇİMİ PENCERESİ (#topluIcerikModal, v1.36.4 — okutoplu.js) ═══
   #bolumIcerikModal'ın TOPLU eşi: kitabın tüm bölümleri tek tabloda (kullanıcı isteği 04-09: 498 grup için
   tek tek ☰ açmak yerine hepsini bir pencereden seçmek). Renkler blok KİMLİK token'ları (--t-*, iki temada
   tanımlı — okuma sayfasının "iki renk sistemi" kuralı); eylem düğmeleri mevcut .btn-* sınıfları.
   ⚠ .ti-* ÖNEKİ KULLANILMADI: o aile /topluislem sayfasınındır (.ti-sekmeler/.ti-rozet) → burada .tim-*.
   Açıcı düğme İçindekiler başlık satırında (.ick-toplu) sağa yaslanır. */
.ick-toplu{ margin-left:auto; }
/* LİSTE ANA UNSUR (kullanıcı kararı 04-09, ilk denemeden sonra: "esas görünmesi gereken liste çok küçük kalmış"):
   pencere ekran boyuna açılır, üstteki üç blok tek satırdır, tablo KALAN yüksekliğin tamamını alır ve kendi
   içinde kayar (modal gövdesi kaymaz — iki iç içe kaydırma çubuğu kafa karıştırıyordu). */
#topluIcerikModal .modal-content{ height:calc(100vh - 3.5rem); }
/* Bootstrap modal-xl 1140px SABİTTİR; yazı ölçeği büyüyünce pencere büyümez ve beş sütun sıkışır → geniş ekranda
   pencere 1400px'e kadar açılır (ekranın %96'sını aşmaz). */
#topluIcerikModal .modal-dialog{ max-width:min(96vw, 1400px); }
#topluIcerikModal .modal-body.tim-govde{ overflow:hidden; }
.tim-govde{ display:flex; flex-direction:column; gap:.5rem; }
.tim-bilgi{ font-size:.8rem; }
/* Özet şeridi — KISA çipler: "E 0/496" (metni olan / seçili; ayrıntı title'da) + uyarı/değişen */
.tim-ozet{ display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.tim-cip{ display:inline-flex; align-items:center; gap:.3rem; padding:.14rem .5rem; border-radius:999px; font-size:.74rem;
  font-weight:600; border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); white-space:nowrap; }
.tim-cip b{ font-variant-numeric:tabular-nums; }
.tim-cip.soluk{ color:var(--muted); font-weight:500; border-style:dashed; }
.tim-cip.edebi{ color:var(--t-edebi); background:var(--t-edebi-tint); border-color:transparent; }
.tim-cip.ozet { color:var(--t-ozet);  background:var(--t-ozet-tint);  border-color:transparent; }
.tim-cip.man3 { color:var(--t-man3);  background:var(--t-man3-tint);  border-color:transparent; }
.tim-cip.man1 { color:var(--t-man1);  background:var(--t-man1-tint);  border-color:transparent; }
.tim-cip.uyari{ color:var(--gilt-2); background:var(--gilt-tint); border-color:transparent; }
.tim-cip.degisti{ color:var(--primary); background:var(--primary-tint); border-color:transparent; }
/* Hızlı seçim — TEK satır küçük düğmeler (sığmazsa sarar); etiketler soluk, kapsam sağda */
.tim-hizli{ border:1px solid var(--line-2); border-radius:var(--r-kontrol); padding:.4rem .6rem; background:var(--surface);
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .35rem; }
.tim-hizli .btn-xs{ padding:.2rem .5rem; font-size:.78rem; }
.tim-hizli-etiket{ font-size:.78rem; color:var(--muted); white-space:nowrap; }
.tim-hizli-etiket-ic{ margin-left:.6rem; }
.tim-kapsam{ margin-left:auto; font-size:.76rem; white-space:nowrap; }
/* Orta dolgulu nötr düğme ("Hepsine ekle / çıkar"): segment pasif üyesi token'ı — site genelinde .btn-zemin YOK,
   bu yüzden yalnız bu kutuda tanımlı. */
.tim-hizli .btn-zemin{ background:var(--btn-zemin); color:var(--ink); border-color:transparent; }
.tim-hizli .btn-zemin:hover{ background:var(--btn-zemin-2); color:var(--ink); }
.tim-tur{ background:var(--paper); border:1.5px solid var(--line-2); color:var(--ink); font-weight:600; }
.tim-tur .tim-nokta{ width:.6rem; height:.6rem; border-radius:50%; display:inline-block; margin-right:.35rem; }
.tim-tur.edebi .tim-nokta{ background:var(--t-edebi); } .tim-tur.edebi:hover{ border-color:var(--t-edebi); background:var(--t-edebi-tint); color:var(--ink); }
.tim-tur.ozet  .tim-nokta{ background:var(--t-ozet);  } .tim-tur.ozet:hover { border-color:var(--t-ozet);  background:var(--t-ozet-tint);  color:var(--ink); }
.tim-tur.man3  .tim-nokta{ background:var(--t-man3);  } .tim-tur.man3:hover { border-color:var(--t-man3);  background:var(--t-man3-tint);  color:var(--ink); }
.tim-tur.man1  .tim-nokta{ background:var(--t-man1);  } .tim-tur.man1:hover { border-color:var(--t-man1);  background:var(--t-man1-tint);  color:var(--ink); }
/* Süzgeç satırı */
.tim-suz{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.tim-ara{ flex:1 1 15rem; min-width:12rem; width:auto; }
.tim-suzgec{ flex:0 0 auto; width:auto; max-width:100%; }
.tim-say{ margin-left:auto; font-variant-numeric:tabular-nums; }
/* Tablo: kalan yüksekliği doldurur, yapışkan başlık, kendi içinde kayar; dar ekranda yatay kayar (sütunlar ezilmez).
   ⚠ Sütun genişliği REM ile SABİTLENMEZ: A+ yazı ölçeğinde sabit sütunlar tabloyu doldurup "Bölüm"ü 3-4 satıra
   kırıyordu (04-09). Dar sütunlar içeriğine göre (width:1% + nowrap), Bölüm kalanın tamamını alır. */
.tim-tablo-kap{ border:1px solid var(--line-2); border-radius:var(--r-kart); overflow:auto; flex:1 1 auto; min-height:10rem; background:var(--paper); }
.tim-tablo{ border-collapse:separate; border-spacing:0; width:100%; min-width:760px; table-layout:auto; font-size:.88rem; }
.tim-tablo td:nth-child(1), .tim-tablo td:nth-child(3), .tim-tablo td:nth-child(4){ width:1%; white-space:nowrap; }
/* Sonuç sütunu SARABİLİR (büyük yazı ölçeğinde "Manifesto (3.Şahıs) · 10.535 kel" tek satırda Bölüm'ü eziyordu);
   Bölüm ile Sonuç kalan genişliği içeriğe göre paylaşır. */
.tim-tablo td:nth-child(5){ min-width:9rem; }
.tim-tablo thead th{ position:sticky; top:0; z-index:2; background:var(--surface); color:var(--muted); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.55rem .6rem; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.tim-tablo tbody td{ padding:.42rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.tim-tablo tbody tr:hover td{ background:var(--surface); }
.tim-tablo tbody tr.degisti td{ background:var(--primary-tint); }
.tim-tablo tbody tr.degisti td:first-child{ box-shadow:inset 3px 0 0 var(--primary); }
.tim-tablo td.no{ color:var(--gilt-2); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.tim-tablo td.ad{ font-family:'Lora',Georgia,serif; color:var(--ink); font-size:.98rem; }
/* "Mevcut metinler" çipleri: dolu = tür rengi + kelime; üretilmemiş = soluk, üstü çizili */
.tim-mevcut{ display:flex; gap:.3rem; flex-wrap:nowrap; }
.tim-mc{ display:inline-flex; align-items:center; justify-content:center; gap:.25rem; min-width:2.1rem; padding:.16rem .45rem;
  border-radius:.35rem; font-size:.74rem; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.tim-mc.var.edebi{ color:var(--t-edebi); background:var(--t-edebi-tint); }
.tim-mc.var.ozet { color:var(--t-ozet);  background:var(--t-ozet-tint);  }
.tim-mc.var.man3 { color:var(--t-man3);  background:var(--t-man3-tint);  }
.tim-mc.var.man1 { color:var(--t-man1);  background:var(--t-man1-tint);  }
.tim-mc.yok{ color:var(--muted); border-color:var(--line); opacity:.65; text-decoration:line-through; }
/* "Kitaba giren" kutucukları */
.tim-secim{ display:flex; gap:.45rem; white-space:nowrap; }
.tim-secim label{ display:inline-flex; flex:none; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600; cursor:pointer;
  padding:.15rem .35rem; border-radius:.35rem; color:var(--ink-2); }
.tim-secim label:hover{ background:var(--btn-zemin); }
.tim-secim label.edebi{ color:var(--t-edebi); } .tim-secim label.ozet{ color:var(--t-ozet); }
.tim-secim label.man3{ color:var(--t-man3); }   .tim-secim label.man1{ color:var(--t-man1); }
.tim-secim label.yok{ opacity:.55; }
.tim-secim input{ width:1rem; height:1rem; accent-color:var(--primary); margin:0; }
/* Sonuç sütunu: görünecek bloklar + kelime; hiçbiri yoksa uyarı */
.tim-sonuc{ font-size:.82rem; color:var(--ink-2); }
.tim-sonuc.uyari{ color:var(--gilt-2); font-weight:600; }
.tim-sonuc .kel{ color:var(--muted); font-variant-numeric:tabular-nums; }
/* ── BAŞLIKLAR MODU (v1.45.4 — kullanıcı kararı 29-09, Yapılacaklar No 13: "500 grupta 'Manifesto' başlığını tek
   tuşla sil"). Pencere İKİ MODLU: başlıkta Metinler | Başlıklar geçişi; markup ikisini de taşır, kap [data-mod] seçer.
   Prova: Mockup/toplu-baslik-mockup.html. ── */
.tim-mod{ margin-left:auto; margin-right:.6rem; display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-kontrol); overflow:hidden; }
.tim-mod .btn{ border:0; border-radius:0; font-size:.8rem; padding:.3rem .75rem; background:var(--surface); color:var(--ink-2); box-shadow:none; }
.tim-mod .btn:hover{ transform:none; background:var(--btn-zemin-2); color:var(--ink); }
.tim-mod .btn.aktif{ background:var(--btn-solid); color:#fff; }
.tim-mod .btn.aktif:hover{ background:var(--btn-solid-2); }
.tim-mod .tim-mod-sayi{ font-variant-numeric:tabular-nums; opacity:.85; margin-left:.3rem; }
#topluIcerikModal[data-mod="baslik"] .tim-yalniz-metin, #topluIcerikModal[data-mod="metin"] .tim-yalniz-baslik{ display:none !important; }
/* Başlık çipleri (satır başına dört): hâl = varsayılan (tür adı basılıyor, tint) · elle (kalem + çerçeve) · silinmiş
   (üstü çizili) · yok (kesik, tıklanmaz); kapsam dışı = blok kitaba girmiyor (soluk); meşgul = anons üretimi sürüyor.
   Bekleyen işaret: sec-sil (kırmızı, üstü çizili) · sec-varsayilan (yeşil). Renkler blok KİMLİK token'ları (--t-*). */
.tim-bas{ display:flex; gap:.35rem; white-space:nowrap; }
.tim-bc{ display:inline-flex; align-items:center; gap:.3rem; min-width:3.1rem; padding:.16rem .45rem; border-radius:.35rem; font-size:.74rem;
  font-weight:600; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); cursor:pointer; line-height:1.25;
  transition:background var(--gecis), border-color var(--gecis); }
.tim-bc:hover{ background:var(--btn-zemin); }
.tim-bc.edebi{ color:var(--t-edebi); } .tim-bc.ozet{ color:var(--t-ozet); } .tim-bc.man3{ color:var(--t-man3); } .tim-bc.man1{ color:var(--t-man1); }
.tim-bc.hal-varsayilan.edebi, .tim-bc.hal-elle.edebi{ background:var(--t-edebi-tint); border-color:transparent; }
.tim-bc.hal-varsayilan.ozet,  .tim-bc.hal-elle.ozet { background:var(--t-ozet-tint);  border-color:transparent; }
.tim-bc.hal-varsayilan.man3,  .tim-bc.hal-elle.man3 { background:var(--t-man3-tint);  border-color:transparent; }
.tim-bc.hal-varsayilan.man1,  .tim-bc.hal-elle.man1 { background:var(--t-man1-tint);  border-color:transparent; }
.tim-bc.hal-elle{ border-color:currentColor; }
.tim-bc.hal-silinmis{ color:var(--muted); background:transparent; text-decoration:line-through; opacity:.7; }
.tim-bc.hal-yok{ color:var(--muted); background:transparent; border-style:dashed; opacity:.5; cursor:default; }
.tim-bc.kapsam-disi{ opacity:.35; }
.tim-bc.mesgul{ cursor:not-allowed; border-style:dashed; }
.tim-bc.sec-sil{ color:var(--danger) !important; background:var(--danger-tint) !important; border-color:var(--danger) !important; text-decoration:line-through; opacity:1; }
.tim-bc.sec-varsayilan{ color:var(--yesil-2) !important; background:var(--yesil-tint) !important; border-color:var(--yesil) !important; text-decoration:none; opacity:1; }
.tim-bc .bi{ font-size:.72rem; }
.tim-bc .bi-volume-up-fill{ opacity:.8; }
.tim-mc.girmiyor{ color:var(--muted); border-color:var(--line); opacity:.5; }
.tim-sonuc .sil-not{ color:var(--danger); font-weight:600; }
.tim-sonuc .atla-not{ color:var(--gilt-2); font-weight:600; }
.tim-sonuc .bas-yok{ color:var(--muted); font-style:italic; }
.tim-hizli .form-check-input{ margin:0; width:.95rem; height:.95rem; }
.tim-hizli label.tim-kutu{ display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--ink-2); margin-left:.6rem; cursor:pointer; }
.tim-cip.sil{ color:var(--danger); background:var(--danger-tint); border-color:transparent; }
.tim-cip.geri{ color:var(--yesil-2); background:var(--yesil-tint); border-color:transparent; }
.tim-cip.ses{ color:var(--primary); background:var(--primary-tint); border-color:transparent; }
@media (max-width:760px){
  .tim-hizli-etiket-ic{ margin-left:0; }
  .tim-say{ margin-left:0; }
  .tim-kapsam{ margin-left:0; }
}
/* Kısa ekranda üst bloklar pencereyi taşırabilir → gövde kayar, tablo sabit payla kalır (hiç görünmez olmasın) */
@media (max-height:640px){
  #topluIcerikModal .modal-body.tim-govde{ overflow:auto; }
  .tim-tablo-kap{ flex:none; min-height:14rem; max-height:60vh; }
}

/* NOT: .baslik-duzenleniyor (yerinde contenteditable vurgusu) v1.24.2'de KALDIRILDI — başlık düzenleme
   artık #baslikModal penceresinde (kullanıcı kararı 15-08: "her şey tek tip, her şey modalda"). */

/* BAŞLIK ALTINA GÖRSEL (01-08) — düğme .para-ekle'nin TAMAMINI taşır: zemin, biçim ve ÖLÇÜ (v1.23.10;
   iki düğme aynı işi yapar, aynı görünmeli → ölçü tek yerde, .para-ekle'de).
   ⚠ KALICI ve TAM OPAK (v1.23.9): kalem/ses düğmeleriyle aynı gerekçe — yalnız yönetimde render edilir,
     okur görmez. Eskiden .9 opaklıkla çiziliyor, hover'da 1'e çıkıyordu. */
.baslik-resim{ opacity:1; }

/* ===== BÖLÜM İÇİ BLOKLAR (SQL/31, kullanıcı kararı 07-08) =====
   Bölüm DÖRT bloktan oluşur (edebi · özet · Manifesto 3.Şahıs · Manifesto 1.Şahıs) ve her biri AYNI
   üçlüdür: BAŞLIK (konu) + SES + METİN (detay). Sıraları kullanıcının (bölüm ayarındaki sürükle-bırak).
   ⚠ AYRAÇ: İLK blok hariç her blokta üst çizgi. Eskiden bu kural .oku-manifesto'daydı, yani "ana metin
     her zaman en üstte" varsayıyordu — sıra değiştirilebilir olunca ayraç yanlış yere düşerdi. Şimdi
     kural bloğun SIRADAKİ YERİNE bağlı (.oku-blok-ilk sunucudan gelir; :first-of-type KULLANILMAZ çünkü
     bölümün ilk <div>'i araç kutusudur — .oku-bolum-ust). */
/* ⚠ BLOK = KART (v1.23.12, kullanıcı isteği 07-08: "grupları card yapısına alacağız, blok blok
   ayıracağız"). Eski hâli ince kesikli bir üst çizgiydi ve bölümün araç kutusundan sonra gelen İLK blok
   hiç ayrılmıyordu (ayraç ilk blokta yok) → kullanıcı ekran görüntüsünde tam o boşluğu işaretledi.
   ⚠ ZEMİN --paper KALIR (sayfayla aynı): kart hissi kenarlık + yarıçap + gölgeden gelir. --surface
     seçilseydi kitabın uzun metni açık temada gri zemine düşerdi ("kâğıt" hissi giderdi).
   ⚠ YALNIZ EKRAN: @media print bunu sıfırlar, DOCX/PDF zaten veriden üretilir — kullanıcı şartı
     "blok blok ayırma public okuma sayfası için geçerli olsun ama kitap çıktılarında istemiyorum". */
/* Başlık/araç kutusu ile İLK blok kartı arasındaki nefes. Yönetimde kutunun kendi kuralı (2 sınıf)
   bunu 1,7rem'e çıkarır; okur modunda kutu çerçevesiz olduğu için buradaki değer geçerli olur —
   olmasaydı bölüm başlığı ilk kartın kenarlığına yapışırdı. */
.oku-bolum-ust{ margin-bottom:.9rem; }
.oku-blok{ --blok-renk:var(--primary);
  margin-top:1.5rem; padding:1rem 1.15rem 1.2rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kart); box-shadow:var(--golge); }
.oku-blok.oku-blok-ilk{ margin-top:0; }
/* Blok kimlik rengi — ayraç + kart vurgusu tek değişkenden (başlık renkleriyle AYNI token'lar). */
.oku-blok-ozet{ --blok-renk:var(--ink-2); }
.oku-blok-man3{ --blok-renk:var(--gilt-2); }
.oku-blok-man1{ --blok-renk:var(--primary); }
/* KAYNAK METİN bloğu (SQL/41, Metin & Ses oku sayfası — kullanıcı isteği 20-08): ham anlatım,
   üretim kimlik renklerinden AYRI dursun diye nötr (soluk) tonda. Yalnız o sayfalarda kullanılır.
   (Yönetim modu eşi aşağıda, .ob-yonetim blok kimlik renkleri bölümünde — sıra orada kritik.) */
.oku-blok-kaynak{ --blok-renk:var(--muted); }
/* ARAÇ / METİN SINIRI — "araya kalın bir satır ekleyelim ama renkli" (aynı karar). Kartın içinde
   başlık + ses çubukları + [Düzenle] ÜSTTE, kitabın metni ALTTA kalır; çizgi ikisini ayırır.
   ⚠ AYRI BİR <div> AÇILMADI: 76 bölüm × 4 blok = 300+ fazladan düğüm (bkz. CLAUDE.md "OKUMA SAYFASI
     AĞIRLIĞI") — çizgi metnin kendi border-top'ıdır.
   ⚠ Seçici üç sınıflık: .oku-bolum .manuscript{padding:0} kuralını ezmesi SIRAYA bağlı kalmasın. */
.oku-bolum .oku-blok > .manuscript{ border-top:3px solid var(--blok-renk); padding-top:1.1rem; margin-top:.85rem; }

/* BLOK BAŞLIĞI — KİTABIN PARÇASI (okur da, Word/PDF de görür; kullanıcı kararı 07-08: "bölüm adı nasıl
   değiştirilebiliyorsa manifestolar, özet vb. her şeyde değiştirilebilecek — hepsi birer başlık yani").
   v1.22.11 – v1.23.7 arasında burada yalnız yönetime görünen küçük bir tür etiketi vardı; karar geri alındı.
   ⚠ BELİRGİN olacak (kullanıcı isteği): bölüm başlığıyla aynı serif aile, ondan bir kademe küçük — hiyerarşi
     okunur kalsın (bölüm 1,75rem → blok 1,22rem). Renk türü ayırır ve TOKEN'dan gelir (koyu tema otomatik). */
.oku-blok-bas{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.22rem; line-height:1.3;
  color:var(--ink); margin:0 0 .6rem; display:flex; align-items:center; flex-wrap:wrap; gap:.15rem .35rem; }
.oku-blok-ozet .oku-blok-bas{ color:var(--ink-2); }
.oku-blok-man3 .oku-blok-bas{ color:var(--gilt-2); }
.oku-blok-man1 .oku-blok-bas{ color:var(--primary); }
/* Başlığı henüz yazılmamış blok (yalnız yönetimde): "Başlık ekle" yer tutucusu — kitabın parçası DEĞİL. */
.oku-blok-bas.obb-bos .bolum-bas-metin{ color:var(--muted); font-style:italic; font-weight:400; font-size:.9rem; }
/* Tür rozeti — başlığı kullanıcı değiştirdiyse hangi blok olduğu başlıktan okunmaz olur; yalnız o durumda
   çizilir (varsayılan başlık zaten tür adıdır). Yönetim aracı → yazdırmada yok. */
.oku-blok-tur{ font-family:Inter, system-ui, sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); background:var(--paper); border:.5px solid var(--line);
  border-radius:.6rem; padding:.05rem .45rem; vertical-align:middle; }

/* Drop-cap YALNIZ bölümün İLK bloğunda (SQL/31: "ilk" artık edebi değil, en üste konan blok).
   ⚠ Kural .manuscript'in genel drop-cap'ini SIFIRLAR — özgüllük yeterli olsun diye .oku-bolum ile yazılır
     (genel kural .oku-bolum .manuscript ile aynı ağırlıkta). */
.oku-bolum .oku-blok:not(.oku-blok-ilk) .manuscript p:first-of-type::first-letter{
  font-size:inherit; float:none; margin:0; padding:0; font-weight:inherit; color:inherit; line-height:inherit; }

/* ⚠ ESKİ SINIFLAR (.oku-manifesto / .oku-manifesto-govde / .oku-blok-etiket / .oku-ozet) v1.23.8'de
   KALDIRILDI — markup artık tek tip .oku-blok üretiyor. Yeni bir stil yazarken onları arama. */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   OKUMA SAYFASI — YÖNETİM MODU DÜZENİ (v1.24.0, kullanıcı kararları 15-08)
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   ŞİKAYET: "tam blok aşağıya doğru uzanıyor, böyle istemiyorum · her bölüm kendi içinde bloklansın ·
   manifesto, edebi metin gibi bölümler kesin şekilde birbirinden ayrılsın · çok fazla özellik
   görülüyor · butonlar daha büyük ve birbirine yakın olmasın, MÜŞTERİMİN GÖZÜNDE SORUN VAR ·
   her butonun arka plan rengi olsun (Düzenle yeşil · Sil kırmızı · Ses turuncu)".

   DÖRT KARAR:
     1) BÖLÜM = ÇERÇEVELİ KAP. Eskiden yalnız başlık kutusu çerçeveliydi, bloklar serbest akıyordu →
        bölümün nerede bitip diğerinin nerede başladığı okunmuyordu.
     2) BLOK = İKİ BÖLGELİ KART. Üstü araç şeridi (--surface), altı kitap metni (--paper): sınır
        ZEMİNDEN okunur. Eski çözüm metnin border-top'ındaki tek renkli çizgiydi (v1.23.12).
     3) ARAÇLAR SAĞ UÇTA, BÜYÜK, RENKLİ, YAZILI. 44px yükseklik + 9px aralık + ikon YANINDA METİN
        (ikon-only düğme görme güçlüğünde okunmuyordu). Renk EYLEMİ söyler (--e-*).
     4) SES İKİYE AYRILDI: üretilmiş ses BLOKTA dinlenir, ayarların tamamı MODALDA.

   ⚠ KAPI = .ob-yonetim (bölümün kendi sınıfı; _OkuBolum.cshtml basar) → ŞİFRESİZ/PUBLIC OKUMA
     SAYFASI VE KİTAP ÇIKTILARI HİÇ ETKİLENMEZ (kullanıcı şartı 15-08: "sadece /kitap/{id}/oku").
     Sayfa düzeyindeki .oku-sayfa[data-okur] işareti bu iş için GÜVENİLMEZ (07-08'de ölçüldü:
     öznitelik iki modda da basılıyor) — v1.23.6'daki aynı tuzak.
   ⚠ MEVCUT TOKEN'LAR DEĞİŞTİRİLMEDİ; buradaki renkler yalnızca yeni kimlik, eylem ve zemin token'ları.
   ⚠ YORUM İÇİNDE "yıldız + eğik çizgi" DİZİSİ YAZMA — CSS yorumunu ERKEN KAPATIR ve o noktadan sonraki
     kuralların TAMAMI sessizce düşer (15-08'de tam olarak bu yaşandı: token adlarını joker ile yazmak
     yorumu kapatmış, bölüm çerçevesi ve sayfa zemini hiç uygulanmamıştı). Razor'daki *@ tuzağının eşi. */

/* ── 1) SAYFA ZEMİNİ — kartlardan bir kademe daha koyu ────────────────────────────────────────
   Kullanıcı bildirimi 15-08: "koyu modun arka rengini daha da siyah yapalım, içerdeki bg renkleri
   ile karışıyor". Koyu temada sayfa (--surface #0c0e13) ile blok araç şeridi AYNI tondu → üç
   katman (sayfa · araç şeridi · kâğıt) ikiye düşüyordu. Sınıfı KitapOku.cshtml body'ye yazar. */
body.oku-yonetim{ background:var(--zemin); }

/* ── 2) BÖLÜM = ÇERÇEVELİ KAP ─────────────────────────────────────────────────────────────────
   Zemin bilerek VERİLMEDİ (sayfayla aynı): iç içe kart yığını olmasın, kâğıt kartlar öne çıksın. */
.ob-yonetim{ position:relative; border:1.5px solid var(--line-2); border-radius:var(--r-kart);
  padding:1.5rem 1.25rem 1.4rem; margin-bottom:2.6rem; }
/* v1.23.6'nın "bölümler arası çizgi + nefes" kuralı ARTIK GEREKSİZ: çerçevenin kendisi ayırıyor.
   Sıfırlanmazsa kap üstte ikinci bir kalın çizgi ve 3,4rem boşlukla çizilirdi. */
.ob-yonetim + .ob-yonetim{ margin-top:0; padding-top:1.5rem; border-top:1.5px solid var(--line-2); }
/* Bölüm numarası çerçeveyi KESER (fieldset/legend etkisi) → "burada yeni bölüm başlıyor".
   Zemin sayfanınkiyle aynı olmalı, yoksa çizginin üstünde şeffaf bir yazı olur. */
.ob-yonetim .oku-bolum-no{ position:absolute; top:-.72rem; left:1rem; margin:0;
  background:var(--zemin); padding:0 .55rem; }

/* ── 3) BÖLÜM ÜST: [başlık + meta] ……… [araç grubu] · altta ses ve sürüm tam genişlik ─────────
   v1.23.6'nın kutulu görünümü KALKTI (artık bölümün TAMAMI kap) — geriye yalnız ayraç çizgi kalır. */
.ob-yonetim .oku-bolum-ust{ background:none; border:none; border-bottom:1px solid var(--line);
  border-radius:0; padding:0 0 1rem; margin-bottom:1.2rem;
  display:flex; align-items:flex-start; gap:.8rem 1rem; flex-wrap:wrap; }
.obu-sol{ flex:1 1 18rem; min-width:0; }
.ob-yonetim .oku-bolum-ust > .oku-arac-grup{ margin-left:auto; }
/* Ses satırı · gizli çubuk kabı · sürüm seçici: kendi satırlarını kaplar (başlığın yanına sıkışmasın) */
.ob-yonetim .oku-bolum-ust > .ob-ses,
.ob-yonetim .oku-bolum-ust > .ses-cubuk-kap,
.ob-yonetim .oku-bolum-ust > .oku-surum{ flex:1 1 100%; }
.ob-yonetim .oku-bolum-bas{ margin-bottom:.35rem; }
.ob-yonetim .oku-bolum-tarih,
.ob-yonetim .oku-bolum-anlatici{ margin-bottom:.15rem; }
/* Sürüm listesi düğmenin ALTINDA açılır; kap artık flex satırı olduğu için konum verilmeli. */
.ob-yonetim .oku-surum{ position:relative; }

/* ── 4) ARAÇ DÜĞMELERİ — büyük · aralıklı · dolgu renkli · YAZILI ─────────────────────────────
   ⚠ .oku-arac YALNIZ GÖRÜNÜMDÜR. İşlevsel sınıflar (.baslik-kalem · .bolum-icerik-btn · .para-ekle ·
     .surum-ac · .oku-modal-duzenle · .bs-sil · .ses-modal-ac) davranışı taşır ve KORUNMALIDIR.
   ⚠ KAPSAMSIZ yazılır (.ob-yonetim ile değil): ses çubuğu MODALA taşındığında .ob-yonetim'in
     dışında kalır ve kapsamlı yazılsaydı modaldaki düğmeler biçimsiz görünürdü. Sınıf adı yeni
     olduğu için başka sayfada karşılığı yok — global olması güvenli.
   ⚠ .para-ekle ile aynı özgüllükte (0,1,0) → bu blok dosyanın SONUNDA olduğu için kazanır. */
.oku-arac{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:2.75rem; padding:0 .95rem; cursor:pointer; white-space:nowrap; text-decoration:none;
  font-family:Inter, system-ui, sans-serif; font-size:.95rem; font-weight:600; line-height:1.2;
  color:#fff; background:var(--e-yapi); border:none; border-radius:var(--r-kontrol);
  transition:background var(--gecis), color var(--gecis); }
.oku-arac:hover{ background:var(--e-yapi-2); color:#fff; text-decoration:none; }
.oku-arac:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.oku-arac i{ font-size:1.15rem; line-height:1; vertical-align:-.05em; }
.oku-arac-grup{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
/* EYLEM RENKLERİ — "bu düğme ne yapar" (blok kimliğinden BAĞIMSIZ: ses düğmesi her blokta turuncu) */
.oa-duzen{ background:var(--e-duzen); }   .oa-duzen:hover{ background:var(--e-duzen-2); }
.oa-ses{ background:var(--e-ses); }       .oa-ses:hover{ background:var(--e-ses-2); }
.oa-sil{ background:var(--e-sil); }       .oa-sil:hover{ background:var(--e-sil-2); }
.oa-yapi{ background:var(--e-yapi); }     .oa-yapi:hover{ background:var(--e-yapi-2); }
.oa-gorsel{ background:var(--e-gorsel); } .oa-gorsel:hover{ background:var(--e-gorsel-2); }
.oa-notr{ background:var(--btn-zemin); color:var(--ink); }
.oa-notr:hover{ background:var(--e-yapi); color:#fff; }
/* Ses HENÜZ ÜRETİLMEMİŞ → düğme nötr: renk "burada bir şey var" demektir, boş hedefte yanıltır.
   Hover'da kendi rengine döner (ne yapacağı yine belli). */
.oa-ses.oa-bos{ background:var(--btn-zemin); color:var(--ink); }
.oa-ses.oa-bos:hover{ background:var(--e-ses); color:#fff; }
/* Sürüm düğmesindeki sayaç — dolgu üstünde okunur kalsın (kendi rengini yazan eski kural ezilir) */
.oku-arac .surum-say{ background:rgba(255,255,255,.22); color:#fff; border-radius:1rem;
  padding:.05rem .5rem; font-size:.82rem; font-variant-numeric:tabular-nums; }
.oku-arac .surum-durum{ color:#fff; }

/* ── 5) BLOK KARTI: ÜSTÜ ARAÇ ŞERİDİ, ALTI KİTAP METNİ ───────────────────────────────────────
   Kart padding'i SIFIRLANIR — iki bölgenin kendi dolgusu var ve şeridin zemini kenara dayanmalı. */
/* ⚠ border-top TAM YAZILIR (yalnız kalınlık DEĞİL): .oku-blok'un temel kuralı "border:1px solid var(--line)"
   shorthand'idir ve üst kenarın RENGİNİ de o belirler → sadece width verilseydi şerit --line rengiyle,
   yani kimlik rengi olmadan çizilirdi (15-08'de ölçüldü: 5px ama gri). */
.ob-yonetim .oku-blok{ padding:0; overflow:hidden; margin-top:1.3rem;
  border-top:5px solid var(--blok-renk); }
.ob-yonetim .oku-blok > .ob-arac{ display:flex; flex-direction:column; gap:.65rem;
  background:var(--surface); border-bottom:1px solid var(--line); padding:.85rem .95rem; }
/* Metnin kendi border-top'ı (v1.23.12'nin araç/metin ayracı) ARTIK GEREKSİZ: sınırı zemin çiziyor. */
.ob-yonetim .oku-blok > .manuscript{ border-top:none; margin-top:0; padding:1.15rem 1.2rem 1.25rem; }
.ob-yonetim .oku-blok > .bolum-eski-uyari{ margin:1rem 1.2rem -.2rem; }
/* BLOK KİMLİK RENKLERİ (kullanıcı kararı 15-08: edebi kırmızı · 1.şahıs turuncu · 3.şahıs yeşil ·
   özet kahve). Mevcut --blok-renk değişkeni EZİLİR → üst şerit + başlık + drop-cap + rozet hepsi
   tek yerden döner. --blok-tint rozetin zeminidir. */
.ob-yonetim .oku-blok{ --blok-renk:var(--t-edebi); --blok-tint:var(--t-edebi-tint); }
.ob-yonetim .oku-blok-ozet{ --blok-renk:var(--t-ozet); --blok-tint:var(--t-ozet-tint); }
.ob-yonetim .oku-blok-man3{ --blok-renk:var(--t-man3); --blok-tint:var(--t-man3-tint); }
.ob-yonetim .oku-blok-man1{ --blok-renk:var(--t-man1); --blok-tint:var(--t-man1-tint); }
/* KAYNAK METİN (SQL/41, Metin & Ses oku sayfası): nötr ton — genel .ob-yonetim .oku-blok kuralıyla
   AYNI özgüllükte olduğundan ondan SONRA gelmek zorunda (önce yazılsaydı edebi kırmızısına ezilirdi). */
.ob-yonetim .oku-blok-kaynak{ --blok-renk:var(--muted); --blok-tint:var(--btn-zemin); }
/* Başlık rengi: tür başına yazılmış eski kuralları (0,2,0) ezmek için üç sınıflık seçici. */
.ob-yonetim .oku-blok .oku-blok-bas{ color:var(--blok-renk); margin:0; min-width:0; }
.ob-yonetim .oku-blok .oku-blok-bas.obb-bos .bolum-bas-metin{ color:var(--muted); }
.ob-yonetim .oku-blok .manuscript p:first-of-type::first-letter{ color:var(--blok-renk); }
/* TÜR ROZETİ — artık her blokta ve blok RENGİNDE: "bu kırmızı ne demek" sorusunun cevabı. */
.ob-yonetim .oku-blok-tur{ color:var(--blok-renk); background:var(--blok-tint);
  border:1px solid var(--blok-renk); font-size:.72rem; padding:.28rem .55rem; }
/* Başlık satırı: [rozet] [başlık] ……… [araçlar] */
.ob-bas-satir{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ob-bas-satir > .oku-arac-grup{ margin-left:auto; }
/* Paragraf sonu "＋ Resim" — görsel eylemi indigo (araç grubundaki "Resim" ile aynı anlam, aynı renk) */
.ob-yonetim .manuscript .para-ekle{ background:var(--e-gorsel); color:#fff; }
.ob-yonetim .manuscript .para-ekle:hover{ background:var(--e-gorsel-2); color:#fff; }

/* ── 6) SES SATIRI — blokta kalan tek ses öğesi: dinleme + modal düğmesi ──────────────────────
   Ses HER ZAMAN turuncudur (eylem rengi), blok kimliğinden bağımsız. */
.ob-ses{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--e-ses-tint); box-shadow:inset 4px 0 0 var(--e-ses);
  border-radius:var(--r-kontrol); padding:.55rem .7rem; }
.ob-ses-ad{ flex:0 0 auto; font-family:Inter, system-ui, sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--e-ses); }
.ob-ses .bs-audio-kutu{ display:flex; align-items:center; gap:.5rem; flex:1 1 14rem; min-width:0; }
.ob-ses .bs-audio-kutu.d-none{ display:none !important; }
.ob-ses audio{ height:2.4rem; flex:1 1 auto; min-width:0; max-width:26rem; }
.ob-ses .ses-modal-ac{ margin-left:auto; }
/* Durum çipi: "üretim sürüyor" / "promt hazır — ses üretilmedi". İkisi de BİLGİdir, hata değil. */
.ob-ses-cip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:600;
  border-radius:2rem; padding:.25rem .7rem; background:var(--paper); color:var(--ink-2);
  border:1px solid var(--line-2); }
.ob-ses-cip.cip-uret{ background:var(--gilt-tint); color:var(--gilt-2); border-color:var(--gilt); }

/* ── 7) SES AYARLARI MODALI — çubuk buraya TAŞINIR (kopyalanmaz) ──────────────────────────────
   sescubugu.js'in tüm davranışı korunur; değişen tek şey çubuğun DOM'daki yeri.
   ⚠ Çubuk .oku-ses sınıfını da taşır (turuncu zemin + sol şerit) — modalın içinde o zemin
     gereksiz, sıfırlanır: modalın kendisi zaten bir kap. */
.ses-modal-govde .bolum-ses{ background:none; box-shadow:none; padding:0; margin:0; gap:.6rem; }
/* Modal içindeki denetimler de BÜYÜK (aynı erişilebilirlik kararı). Bootstrap .btn/.form-select
   sınıfları çubuk markup'ında duruyor (sescubugu.js onları yeniden yazıyor) → burada ezilir. */
.ses-modal-govde .btn,
.ses-modal-govde .form-select{ min-height:2.75rem; font-size:.95rem; }
.ses-modal-govde .btn{ padding:0 .95rem; display:inline-flex; align-items:center; gap:.35rem; }
.ses-modal-govde .btn-xs{ font-size:.95rem; }
/* Eylem renkleri modalda da geçerli: ses turuncu · silme kırmızı · promt düzenleme yeşil. */
.ses-modal-govde .bolum-ses-uret,
.ses-modal-govde .bs-dinle{ background:var(--e-ses); color:#fff; border-color:var(--e-ses); }
.ses-modal-govde .bolum-ses-uret:hover,
.ses-modal-govde .bs-dinle:hover{ background:var(--e-ses-2); color:#fff; }
.ses-modal-govde .bs-yapi{ background:var(--e-duzen); color:#fff; }
.ses-modal-govde .bs-yapi:hover{ background:var(--e-duzen-2); color:#fff; }
.ses-modal-govde .bs-ayar,
.ses-modal-govde .bs-promt-yeni{ background:var(--btn-zemin); color:var(--ink); }
.ses-modal-govde .bs-ayar:hover,
.ses-modal-govde .bs-promt-yeni:hover{ background:var(--e-yapi); color:#fff; }
/* ── Modal içi DÜZEN: markup sırası sabit (Razor + sescubugu.js AYNI çıktıyı üretmek zorunda) →
   yeniden dizmek için CSS `order` kullanılır. Okuma sırası: seçimler → deneme → promt → üretim → silme.
   ⚠ Markup'ta sırayı değiştirmek İKİ dosyayı birden bozar; order ile yapmak tek yerde kalır.
   ⚠ .bs-ses/.bs-motor/.bs-tarz Bootstrap'in .w-auto sınıfını taşır (width:auto !important) → flex-basis
     tek başına yetmez, min-width ile taban verilir; yoksa konuşmacı seçici "Adam" gibi kısa değerde
     bir kelimeye sıkışıyordu (15-08'de ölçüldü). */
.ses-modal-govde .bolum-ses > *{ order:5; }
.ses-modal-govde .bolum-ses > .alt-yazi{ order:1; flex:0 0 auto; }
.ses-modal-govde .bs-motor{ order:2; }
.ses-modal-govde .bs-ses{ order:3; }
.ses-modal-govde .bs-tarz{ order:4; }
.ses-modal-govde .bs-dinle{ order:5; }
/* ⚠ position:static ŞART (v1.24.11 — kullanıcı bildirimi 15-08 "butonlar üst üste görülüyor"):
   .bs-ayar sayfada MUTLAK konumludur ve ona ayrılan yeri .bolum-ses'in padding-right'ı verir; modalda
   ise o padding sıfırlanıyor (.ses-modal-govde .bolum-ses{padding:0}) → düğme akıştan çıkmış hâlde
   tarz seçicisinin ÜSTÜNE biniyordu. Üstelik buradaki order:6 de İŞLEMİYORDU (absolute öğeye order
   uygulanmaz) — yani düzen kuralı baştan beri ölüydü. Static'e alınca ikisi birden düzelir. */
.ses-modal-govde .bs-ayar{ order:6; position:static; }
/* İfade ayarları bloğu TAM GENİŞLİK ve dişli düğmesinden SONRA gelmeli: aynı order (6) verilir, eşitlikte
   DOM sırası karar verir → .bs-ayar markup'ta İLK çocuk olduğu için üst satırda seçicilerin yanında kalır,
   blok onun altına tam genişlikte serilir. (Varsayılan order:5 ile blok, dişli düğmesinden ÖNCE gelip onu
   tek başına alt satıra itiyordu — 15-08'de ekranda görüldü.) */
.ses-modal-govde .bs-ifade{ order:6; flex:1 1 100%; }
.ses-modal-govde .bs-promt-kutu{ order:7; flex:1 1 100%; }
.ses-modal-govde .bolum-ses-uret,
.ses-modal-govde .bolum-ses-izle{ order:8; margin-left:auto; }
.ses-modal-govde .bs-sil-kutu{ order:9; flex:1 1 100%; }
.ses-modal-govde .bs-hata,
.ses-modal-govde .bs-durum-hata{ order:0; flex:1 1 100%; }
.ses-modal-govde .bs-yapi-panel{ order:10; flex:1 1 100%; }
.ses-modal-govde .form-select{ flex:1 1 9rem; min-width:9rem; }
/* "Demo Ses" BAŞLIK hedeflerinde ARTIK GİZLİ DEĞİL (v1.28.5 — kullanıcı bildirimi 19-08: "başlıklarda
   Demo Ses yok"): /api/asama/ses-dene artık baslik=1 / blok=<anahtar> alıyor ve BAŞLIĞIN kendisini okuyor
   (sescubugu.js hedefe göre geçer) → v1.22.12'den beri süren display:none kuralı kaldırıldı. */
/* Modal KAPAT düğmesi — kullanıcı bildirimi 15-08: "X ikonu küçük ve bordersız kalmış". */
.ses-modal-kapat{ display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; flex:0 0 auto; cursor:pointer; color:var(--ink);
  background:var(--btn-zemin); border:1.5px solid var(--line-2); border-radius:var(--r-kontrol);
  transition:background var(--gecis), color var(--gecis), border-color var(--gecis); }
.ses-modal-kapat:hover{ background:var(--e-sil); border-color:var(--e-sil); color:#fff; }
.ses-modal-kapat i{ font-size:1.35rem; line-height:1; }

/* ── 8) YAZDIRMA — araç bölgesi kâğıda düşmez, başlık düşer ──────────────────────────────────
   .ob-arac'ın İÇİNDE başlık da var (kitabın parçası) → kap gizlenmez, yalnız kabuk sıfırlanır;
   içindeki araçlar zaten d-print-none taşır. */
@media print{
  .ob-yonetim{ border:none; padding:0; margin-bottom:2rem; }
  .ob-yonetim + .ob-yonetim{ border-top:none; padding-top:0; }
  .ob-yonetim .oku-bolum-no{ position:static; background:none; padding:0; }
  .ob-yonetim .oku-bolum-ust{ border-bottom:none; padding:0; margin-bottom:0; }
  .ob-yonetim .oku-blok > .ob-arac{ background:none; border:none; padding:0; }
  .ob-yonetim .oku-blok > .manuscript{ padding:0; }
  .ob-ses, .ses-cubuk-kap{ display:none !important; }
}

/* Dar ekran: araç grubu başlığın altına iner ve tam genişlik kaplar (düğmeler küçülmez —
   erişilebilirlik kararının tamamı buna dayanıyor). */
@media (max-width:640px){
  .ob-yonetim{ padding:1.2rem .8rem 1.1rem; }
  .ob-yonetim .oku-bolum-ust > .oku-arac-grup,
  .ob-bas-satir > .oku-arac-grup{ margin-left:0; width:100%; }
  .oku-arac{ flex:1 1 auto; }
  .ob-yonetim .oku-blok > .manuscript{ padding:1rem .85rem 1.1rem; }
}

/* ===== Form + rozet uyumu (vanilla Bootstrap mavi vurguları → palet) ===== */
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb), .22); }
.form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
.form-control, .form-select{ border-color:var(--line); color:var(--ink); }
.form-control::placeholder{ color:var(--muted); opacity:.85; }
/* Bootstrap text-bg-* rozetlerini palete çek */
.badge.text-bg-warning{ background-color:var(--gilt-tint); color:var(--gilt-2); }
.badge.text-bg-secondary{ background-color:var(--surface); color:var(--muted); }
.badge.text-bg-danger{ background-color:var(--danger-tint); color:var(--danger); }
.badge.text-bg-light{ background-color:var(--surface); color:var(--ink-2); }
/* Modal köşeleri token yarıçapına */
.modal-content{ border:none; border-radius:var(--r-kart); box-shadow:var(--golge-2); }

/* ===== Bootstrap yardımcılarını temaya bağla (koyu modda kırılmasın) ===== */
.text-dark{ color:var(--ink) !important; }
.bg-light{ background-color:var(--surface) !important; }
.border{ border-color:var(--line) !important; }
.durum-pill.st-Yuklendi{ background:var(--mavi-tint); color:var(--mavi); }
/* Aşama şeridi / numara — bekleyen durum token'a (koyu uyumlu) */
.nokta.s-wait{ background:var(--line); color:var(--muted); }
.asama-no.s-wait{ background:var(--line); color:var(--muted); }
.serit .baglac{ background:var(--line); }
/* Promt kutusu — token (koyu modda da okunur) */
.prompt-kutu{ background:var(--surface); border-color:var(--line); color:var(--ink-2); }

/* ============================ SÜRÜM NOTLARI (/surumnotlari) ============================ */
/* Statik sürüm notları sayfası + üst bar sürüm rozeti. Tüm renkler tema TOKEN'ı → iki tema otomatik uyumlu. */
.surum-sayfa{ max-width:920px; }

/* Hero — marka gradyanı (indigo → amber); renkli zeminde beyaz metin (.marka-logo ile aynı desen) */
.surum-hero{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; color:#fff;
  padding:1.3rem 1.5rem; border-radius:var(--r-kart); box-shadow:var(--golge);
  background:linear-gradient(135deg, var(--primary), var(--gilt)); }
.surum-hero-ikon{ width:3.4rem; height:3.4rem; border-radius:var(--r-kontrol); flex:none; font-size:1.9rem;
  background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.surum-hero-metin{ flex:1 1 16rem; }
.surum-hero-metin h5{ font-weight:700; font-size:1.5rem; }
.surum-hero-metin p{ font-size:1.05rem; opacity:.92; }
.surum-hero-rozet{ text-align:center; flex:none; padding:.6rem 1.1rem; border-radius:var(--r-kontrol);
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28); }
.surum-hero-rozet .etiket{ display:block; font-size:.8rem; opacity:.9; letter-spacing:.3px; }
.surum-hero-rozet .deger{ display:block; font-weight:700; font-size:1.6rem; line-height:1.25; }

/* Timeline — dikey bağlantı çizgisi (son öğe hariç) + renkli marker (sürüm token rengi) */
.surum-timeline{ position:relative; margin-top:.4rem; }
.surum-item{ position:relative; padding-left:4rem; padding-bottom:1.6rem; }
.surum-item::before{ content:''; position:absolute; left:1.4rem; top:2.8rem; bottom:-.4rem; width:2px; background:var(--line); }
.surum-item:last-child::before{ display:none; }
.surum-marker{ position:absolute; left:0; top:0; width:3.1rem; height:3.1rem; border-radius:var(--r-kontrol);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; box-shadow:var(--golge); }

.surum-kart{ background:var(--paper); border-radius:var(--r-kart); padding:1.1rem 1.35rem; box-shadow:var(--golge);
  transition:box-shadow var(--gecis), transform var(--gecis);
  border-right:6px solid transparent; }   /* şerit yeri HER kartta ayrılır → "1"/"0" kartlar aynı genişlikte kalır */
.surum-kart:hover{ box-shadow:var(--golge-2); transform:translateY(-2px); }
/* ÖDEME İZİ (İÇ KULLANIM — SurumNotlari.cshtml > Tamamlandi): "0" = bedeli alınmadı → sağ kenarda BELİRGİN amber
   şerit (v1.28.2, kullanıcı kararı 19-08 "daha belirgin olsun" — eski --gilt-tint 3px göz taramasında seçilemiyordu).
   "1" (alındı) → şerit yok (transparent kalır). Asıl kaynak data-tamamlandi attribute'udur (F12/kaynak);
   şeritte YAZI/AÇIKLAMA yoktur — müşteriye anlamsız bir süs çizgisi olarak kalması bilinçli. Token → iki temada uyumlu. */
.surum-item[data-tamamlandi="0"] .surum-kart{ border-right-color:var(--gilt); }
.surum-kart-bas{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.surum-no{ font-weight:700; font-size:1.02rem; padding:.2rem .8rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); }
.surum-guncel{ font-size:.82rem; font-weight:600; padding:.18rem .7rem; border-radius:999px;
  color:var(--yesil); background:var(--yesil-tint); }
.surum-tarih{ margin-left:auto; font-size:.9rem; color:var(--muted); display:inline-flex; align-items:center; }
.surum-baslik{ font-weight:600; font-size:1.22rem; color:var(--ink); margin-bottom:.8rem; }
.surum-notlar{ list-style:none; margin:0; padding:0; }
.surum-notlar li{ display:flex; gap:.65rem; align-items:flex-start; padding:.5rem 0;
  font-size:1.06rem; color:var(--ink-2); line-height:1.6; }
.surum-notlar li i{ color:var(--yesil); font-size:1.1rem; margin-top:.2rem; flex:none; }
.surum-notlar li + li{ border-top:1px dashed var(--line); }
/* Not kategorisi (SurumNotlari.cshtml > Tur): ikon + etiket rengi buradan. Yeni Özellik/İyileştirme
   birincil, Hata Düzeltme uyarı rengi → müşteri bir bakışta türü ayırır. Token → iki tema da uyumlu. */
.surum-notlar li.not-yeni i,
.surum-notlar li.not-yeni .not-tur{ color:var(--primary); }
.surum-notlar li.not-iyilestirme i,
.surum-notlar li.not-iyilestirme .not-tur{ color:var(--primary-2); }
.surum-notlar li.not-hata i,
.surum-notlar li.not-hata .not-tur{ color:var(--danger); }
.not-govde{ flex:1; min-width:0; }   /* uzun metin ikonun altına taşmadan sarsın */
.not-tur{ font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.not-ayrac, .not-tire{ color:var(--muted); }
.not-alan{ font-weight:600; color:var(--ink); }
/* ⚠ overflow-wrap:anywhere — not metinlerinde boşluksuz UZUN dizi geçebiliyor (dosya adı/adres örneği:
   "seslendiren_grup-adı_içerik_tarz_model_sürümNo.mp3", v1.25.9). Sarmayan tek kelime kartı genişletiyor
   ve TÜM SAYFAYI yatay kaydırıyordu (375px ekranda 443px içerik). Miras alınır → içteki <strong>/<code>
   de sarar. `word-break:break-all` DEĞİL: o normal Türkçe kelimeleri de rastgele böler. */
.not-metin{ color:var(--ink-2); overflow-wrap:anywhere; }
.surum-alt-not{ margin-top:.6rem; padding:.8rem 1.1rem; font-size:.92rem; color:var(--muted);
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-kontrol); }

/* Üst bar sürüm rozeti → /surumnotlari (maliyet rozetiyle aynı dil; primary renk) */
.surum-rozet{ display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:700;
  background:var(--primary-tint); color:var(--primary-2); padding:.3rem .65rem; border-radius:999px;
  text-decoration:none; white-space:nowrap; transition:box-shadow var(--gecis), transform var(--gecis); }
.surum-rozet:hover{ color:var(--primary-2); box-shadow:var(--golge); transform:translateY(-1px); }


/* İSTATİSTİK PANELİ (hero'nun altı) — "kaç sürüm, kaç madde, hangi kategoriden kaçar".
   Rakamlar SurumNotlari.cshtml'de dizinin kendisinden sayılır; burada yalnız görünüm var.
   Kategori renkleri .not-<tur> ile AYNI token'lardan (yeni=primary · iyilestirme=primary-2 · hata=danger). */
.surum-ist{ background:var(--paper); border-radius:var(--r-kart); padding:1.1rem 1.35rem; box-shadow:var(--golge); }
.surum-ist-kutular{ display:flex; flex-wrap:wrap; gap:.7rem; }
.surum-ist-kutu{ flex:1 1 8rem; text-align:center; padding:.7rem .6rem; border-radius:var(--r-kontrol);
  background:var(--surface); border:1px solid var(--line); }
.surum-ist-kutu .deger{ display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-weight:700; font-size:1.5rem; line-height:1.2; color:var(--ink); }
.surum-ist-kutu .deger i{ font-size:1.05rem; color:var(--muted); }
.surum-ist-kutu .etiket{ display:block; margin-top:.15rem; font-size:.85rem; color:var(--muted); }
.surum-ist-kutu.not-yeni .deger, .surum-ist-kutu.not-yeni .deger i{ color:var(--primary); }
.surum-ist-kutu.not-iyilestirme .deger, .surum-ist-kutu.not-iyilestirme .deger i{ color:var(--primary-2); }
.surum-ist-kutu.not-hata .deger, .surum-ist-kutu.not-hata .deger i{ color:var(--danger); }
/* Dağılım şeridi — dilim genişlikleri inline yüzde (Razor); renk burada */
.surum-ist-bar{ display:flex; height:.55rem; margin-top:.9rem; border-radius:999px; overflow:hidden; background:var(--line); }
.surum-ist-bar .dilim{ display:block; height:100%; }
.surum-ist-bar .d-yeni{ background:var(--primary); }
.surum-ist-bar .d-iyilestirme{ background:var(--primary-2); }
.surum-ist-bar .d-hata{ background:var(--danger); }
.surum-ist-alt{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.7rem;
  font-size:.9rem; color:var(--muted); }

@media (max-width:576px){ .surum-hero-rozet{ flex:1 1 100%; } }

/* ============================== GRUP KÜMELERİ paneli (/anilar) ============================== */
/* Küme = kitaptan çıkacak seçki. Board'un üstünde; token'lı → iki tema otomatik. */
.kume-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kart);
  box-shadow:var(--golge); padding:1rem 1.1rem; }
.kume-panel-bas{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  flex-wrap:wrap; margin-bottom:.85rem; }
.kume-panel-baslik{ font-family:'Inter',system-ui,sans-serif; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.kume-panel-baslik .alt-yazi{ font-weight:400; }
/* Kartlar: geniş ekranda TAM 3 sütun (tablet 2 · mobil 1). auto-fill DEĞİL → geniş ekranda 5-6 kart
   yan yana dizilip küçülmez. minmax(0,1fr) uzun küme adının sütunu şişirmesini engeller. */
.kume-serit{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; }
@media (max-width:992px){ .kume-serit{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:576px){ .kume-serit{ grid-template-columns:1fr; } }
/* height:100% + grid'in stretch'i → aynı satırdaki kartlar EŞİT boyda (uzun/kısa ad hizayı bozmaz). */
.kume-kart{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kontrol);
  padding:1.05rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; height:100%;
  transition:box-shadow var(--gecis), transform var(--gecis); }
.kume-kart:hover{ box-shadow:var(--golge); transform:translateY(-1px); }
.kume-kart-ust{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.kume-ad{ font-size:1.2rem; font-weight:700; color:var(--ink); cursor:pointer; line-height:1.3; word-break:break-word;
  border-bottom:1px dashed transparent; transition:border-color var(--gecis); }
.kume-ad:hover{ border-bottom-color:var(--primary); color:var(--primary-2); }
.kume-say{ font-size:.95rem; color:var(--muted); }
/* color OVERRIDE ETME: .board-say zaten "indigo zemin + BEYAZ yazı" (bkz. ~523). Burada color:var(--primary-2)
   vardı → indigo zemine indigo yazı = rakam KOYU TEMADA GÖRÜNMÜYORDU ("4 grup" yerine "⬤ grup"). */
.kume-say .board-say{ font-weight:700; }
/* margin-top:auto → butonlar kartın ALTINA yaslanır. flex:1 0 auto (shrink YOK) → sığmayınca metin
   ezilmez, buton alt satıra düzgün akar ve satırı doldurur. */
.kume-kart-alt{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.35rem; }
.kume-kart-alt .btn{ flex:1 0 auto; white-space:nowrap; }
.kume-bos{ color:var(--muted); font-size:.9rem; padding:.5rem 0; }

/* Boş durum "1. Aşama" hero (küme yokken) — büyük, ikonlu, yönlendiren */
.kume-hero{ text-align:center; padding:2.75rem 1.5rem 2.25rem; display:flex; flex-direction:column; align-items:center; }
.kume-hero-adim{ display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; color:var(--primary-2); background:var(--primary-tint); padding:.32rem .85rem .32rem .4rem;
  border-radius:999px; margin-bottom:1.15rem; }
.kume-adim-no{ display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
  border-radius:999px; background:var(--primary); color:#fff; font-size:.9rem; font-weight:800; }
.kume-hero-ikon{ font-size:3.4rem; line-height:1; color:var(--gilt); margin-bottom:.85rem; }
.kume-hero-baslik{ font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin:0 0 .6rem; }
.kume-hero-aciklama{ font-size:1.02rem; color:var(--ink-2); max-width:34rem; margin:0 auto 1.6rem; line-height:1.65; }
.kume-hero-btn{ font-weight:700; padding:.65rem 1.6rem; }

/* Aşama 2 board sahnesi başlığı (küme çalışma alanı) */
.board-sahne-bas{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--line); }
.board-sahne-ad{ font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.board-sahne-ad .alt-yazi{ font-weight:400; }

/* ===== /kullanim > HATALAR bölümü (?hatalar=1) — aktif hatalar + sayfalı hata günlüğü =====
   TÜM renkler token'dan gelir (HEX YOK) → açık/koyu tema otomatik doğru. Sayfalama bağlantıları
   #hatalar çıpasına gider, o yüzden bölümün üstünde biraz nefes payı bırakılır. */
.hata-bolum{ scroll-margin-top:calc(var(--ustbar-h) + 1rem); }

/* Rozet ayrımı KRİTİK: iki hatanın TEPKİSİ farklı → renk de farklı.
   filtre engeli = kırmızı (retry ÇÖZMEZ) · geçici = amber (tekrar denenebilir) */
.hata-rozet{ display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:600;
  padding:.18rem .55rem; border-radius:999px; white-space:nowrap; line-height:1.45; }
.hata-rozet.hr-filtre{ background:var(--danger-tint); color:var(--danger-2); }
.hata-rozet.hr-gecici{ background:var(--gilt-tint); color:var(--gilt-2); }

/* Kaynak hücresi: nötr tip rozeti (video/grup/genel) + ad (video ise iş detayına bağlantı) */
.hata-tip{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:600;
  padding:.14rem .5rem; border-radius:999px; background:var(--surface); color:var(--muted);
  white-space:nowrap; margin-right:.4rem; }
.hata-kaynak-ad{ color:var(--ink); font-weight:500; text-decoration:none; word-break:break-word;
  border-bottom:1px solid transparent; transition:color var(--gecis), border-color var(--gecis); }
a.hata-kaynak-ad:hover{ color:var(--primary); border-bottom-color:var(--primary); }

/* Hata tipi / model adı gibi ikincil teknik etiket (rozetin altında) */
.hata-tipad{ color:var(--muted); font-size:.75rem; margin-top:.2rem; word-break:break-word;
  font-family:ui-monospace,Menlo,Consolas,monospace; }

/* Dostu (anlaşılır) hata metni — ham hata "Teknik ayrıntı"da katlı durur (HATA GİZLEME YOK) */
.hata-dostu{ color:var(--ink-2); font-size:.88rem; line-height:1.5; word-break:break-word; }
.hata-detay > summary{ cursor:pointer; color:var(--muted); font-size:.78rem; list-style:revert; }
.hata-detay > summary:hover{ color:var(--primary); }

/* Tablo: metin sütunu ezilmesin (dar ekranda .table-responsive yatay kaydırır) */
.hata-tablo td{ vertical-align:top; }
.hata-tablo thead th{ color:var(--muted); font-weight:600; font-size:.8rem; white-space:nowrap; }
.hata-metin-hucre{ min-width:19rem; }

/* Boş durum — iyi haber, bu yüzden yeşil tik */
.hata-bos{ color:var(--muted); font-size:.9rem; text-align:center; padding:1.6rem 1rem; }
.hata-bos .bi{ color:var(--yesil); }

/* "Şu an hatalı" sayacı (başlık yanında) */
.hata-say{ display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem; padding:.05rem .45rem;
  border-radius:999px; background:var(--danger-tint); color:var(--danger-2); font-size:.78rem; font-weight:700; }

/* Sayfalama şeridi (projede İLK sayfalama): « Önceki · sayfa X / Y · Sonraki » */
.hata-sayfalama{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap;
  padding:.75rem .9rem; border-top:1px solid var(--line); }
.hata-sayfalama .btn.disabled{ opacity:.45; pointer-events:none; }

/* ═══════════════ MOBİL LİSTE MODU — "ÖNCE BAŞLIKLAR" (v1.19.2) ═══════════════
   Sunucu bölüm gövdelerini hiç göndermez (KitapOkuVM.ListeModu); okumobil.js dokunulan bölümü
   AJAX ile getirip #bolumSahne'ye basar. Buradaki kurallar YALNIZ GÖRÜNÜM içindir — asıl kazanç
   sunucunun HTML'i hiç üretmemesidir (display:none hiçbir şey kazandırmazdı).
   ⚠ Renkler TOKEN: koyu tema otomatik doğru olsun (hardcode hex koyma). */

/* Görünüm şeridi: hangi moddayız + karşı moda geçiş. Liste modunda arama/yazdırma sınırını da söyler. */
.oku-gorunum{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap;
  background:var(--surface); border-radius:var(--r-kontrol); padding:.55rem .75rem; margin:.2rem 0 .9rem; }
.oku-gorunum .og-metin{ font-size:.85rem; color:var(--ink-2); line-height:1.35; }
.oku-gorunum .og-metin strong{ color:var(--ink); }
.oku-gorunum .og-gec{ flex:0 0 auto; white-space:nowrap; }
/* Tam sayfa modundayken "hafif görünüme geç" YALNIZ dar ekranda: masaüstünde tek sayfa zaten
   sorunsuz açılır ve düğme gürültü olur (kullanıcı kararı: mobil optimizasyonu). */
.oku-gorunum-dar{ display:none; }
@media (max-width: 991.98px){ .oku-gorunum-dar{ display:flex; } }

/* Liste modunda YAN içindekiler gizlenir: aynı listeyi iki kez göstermek (yan panel + İçindekiler
   bölümü) dar ekranda yalnız kaydırma yükü olurdu. Okuma sütunu tam genişliğe yayılır. */
.oku-sayfa.liste-modu > .row > aside{ display:none; }
.oku-sayfa.liste-modu > .row > .col-lg-9{ flex:0 0 100%; max-width:100%; }

/* Dokunma hedefi: listede satırlar parmakla açılacak → yükseklik ve tıklama alanı büyür. */
@media (max-width: 991.98px){
  .oku-sayfa.liste-modu .ick-satir{ min-height:2.9rem; align-items:center; }
}

/* Bir bölüm AÇIKKEN kitabın "kabuk" parçaları çekilir; ekranda yalnız o bölüm kalır.
   ⚠ Tek tek JS ile gizlemek yerine tek sınıf: yeni bir üst blok eklendiğinde unutulacak liste olmasın. */
.oku-sayfa.liste-modu.bolum-acik .oku-kapak,
.oku-sayfa.liste-modu.bolum-acik .oku-onsoz,
.oku-sayfa.liste-modu.bolum-acik .surum-pano,
.oku-sayfa.liste-modu.bolum-acik .oku-icindekiler{ display:none; }

/* Bölüm okurken yapışkan İSTATİSTİK ŞERİDİ (.ick-sabit) gizlenir: o şerit KİTAP toplamlarını gösterir
   (76 grup · 545 hikaye · 486 sayfa …) ve tek bölüm okurken hem gereksizdir hem de dar ekranda değerli
   yer kaplar. ⚠ Ayrıca "Bölümler" şeridiyle ÜST ÜSTE biniyordu (ölçüldü 02-08). Sınıf <body>'dedir:
   .ick-sabit body'nin doğrudan çocuğudur, .oku-sayfa üzerinden seçilemez (okumobil.js > bolumModu).
   ⚠ display kullanılır çünkü şeridin görünürlüğü opacity ile yönetiliyor (.ick-sabit.gorunur). */
body.bolum-acik .ick-sabit{ display:none; }

.bolum-sahne{ min-height:6rem; }

/* Sahnenin başındaki yapışkan şerit: listeye dönüş + açık bölümün sırası ve adı.
   ⚠ top DEĞERİ JS'TEN gelir (satır içi style): yönetim kabuğunda yapışkan üst bar var, şifresiz
   okuma kabuğunda YOK — sabit bir --ustbar-h payı orada tepede boş şerit bırakırdı. */
.bolum-serit{ position:sticky; z-index:20; display:flex; align-items:center; gap:.6rem;
  background:var(--ust); border-bottom:1px solid var(--line); box-shadow:var(--golge);
  border-radius:0 0 var(--r-kontrol) var(--r-kontrol); padding:.45rem .6rem; margin-bottom:1rem; }
.bolum-serit-ad{ font-size:.88rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Bölüm SIRASI (v1.42.2 — müşteri bildirimi 20-09: hafif görünümde numara yoktu): "05 - Ad" — şeritte, önceki/sonraki
   düğmelerinde ve "yükleniyor…" satırında AYNI kurucu (okumobil.js > etiketHtml). Rakamlar hizalı; şeritte ad soluk
   (--ink-2) kaldığından numara tam mürekkep. */
.bolum-no-kisa{ font-weight:700; font-variant-numeric:tabular-nums; }
.bolum-serit-ad .bolum-no-kisa{ color:var(--ink); }
.bolum-geri{ flex:0 0 auto; background:var(--btn-solid); color:#fff; border:0; border-radius:var(--r-kontrol);
  padding:.35rem .7rem; font-size:.85rem; font-weight:600; transition:background var(--gecis); }
.bolum-geri:hover{ background:var(--btn-solid-2); color:#fff; }

/* Bölüm sonu gezinmesi: ◀ önceki · Bölümler · sonraki ▶ (uzun bölümün sonunda yukarı kaydırmadan devam) */
.bolum-gezin{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:2rem; padding-top:1rem; }
.bolum-gezin .bolum-git{ max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bolum-yukleniyor{ display:flex; align-items:center; justify-content:center; gap:.2rem;
  color:var(--ink-2); padding:2.5rem 1rem; font-size:.95rem; }
/* HATA GİZLEME YOK: yükleme başarısızsa sahnede KALICI kutu (toast'a ek) + tekrar deneme yolu. */
.bolum-hata{ margin:1.5rem 0; }

/* ═══════════════ AKIŞ GÖRÜNÜMÜ (v1.40.0) — okuakis.js ═══════════════
   Bölümler İSKELET olarak gelir (aynı <section id class="oku-bolum oku-iskelet">), okurun çevresi dolar, uzaklaşan
   iskelete döner. Kurallar/gerekçe: CLAUDE.md §2 "AKIŞ GÖRÜNÜMÜ" + okuakis.js başı. Renkler TOKEN. */
/* Çapa/İçindekiler tıklaması ANINDA: uzun mesafeli yumuşak kaydırma sırasında dolan bölümler hedefi kaydırırdı.
   (Açıkça smooth isteyen JS çağrıları — sıradaki ses, "Devam et" — bundan etkilenmez.) */
html.oku-akis{ scroll-behavior:auto; overflow-anchor:none; }   /* anchoring KAPALI: düzeltme okuakis.js'te elle (gerekçe orada) */
.oku-iskelet{ min-height:6rem; }
.oku-iskelet-govde{ display:flex; flex-direction:column; gap:.6rem; padding:.3rem 0 1.2rem; }
.oku-iskelet-govde .oi-cizgi{ display:block; height:.8rem; border-radius:.4rem; background:var(--line); opacity:.5; }
.oku-iskelet-govde .oi-cizgi.kisa{ width:62%; }
.oku-iskelet.yukleniyor .oi-cizgi{ animation:oi-nabiz 1.1s ease-in-out infinite; }
@keyframes oi-nabiz{ 0%,100%{ opacity:.3; } 50%{ opacity:.75; } }
/* "Bölüm yükleniyor…" satırı yalnız istek SÜRERKEN görünür (uzak iskelet sessiz durur). */
.oku-iskelet-durum{ display:none; align-items:center; gap:.45rem; font-size:.85rem; color:var(--ink-2); }
.oku-iskelet.yukleniyor .oku-iskelet-durum{ display:flex; }
.oku-iskelet-hatakutu{ margin:.6rem 0 0; }
/* AĞ DAYANIKLILIĞI (v1.42.0, okuag.js): bekleme notu (alert-warning: "Bağlantı sorunu · 5 sn sonra yeniden (2/5)")
   ↔ tükenmiş (alert-danger + Tekrar dene). Bootstrap alert renkleri data-bs-theme ile iki temada hazır → hex yok.
   Not varken "Bölüm yükleniyor…" satırı GİZLENİR (iki durum satırı alt alta okunmasın; yeniden deneme spinner'ı notta). */
.oku-iskelet.oku-iskelet-hata .oku-iskelet-durum{ display:none; }
.oku-iskelet-hatakutu .oag-sayac{ font-variant-numeric:tabular-nums; }
.oku-iskelet-hatakutu .oag-deneme, .bolum-hata .oag-deneme{ color:inherit; opacity:.75; }
.bolum-hata .oag-sayac{ font-variant-numeric:tabular-nums; }
/* Son pencere gövdesi (okuag.js > sonModal → islemSonuc): ikonlu neden listesi + teknik ayrıntı. .islem-detay'ın
   8rem'lik tavanı bu içerik için dar (filtre-bulgu ile aynı gerekçe); :has() yoksa 8rem scroll'lu kalır. */
.islem-detay:has(.okuag-neden){ max-height:min(60vh, 28rem); }
.okuag-neden{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; text-align:left; }
.okuag-neden li{ display:flex; gap:.6rem; align-items:flex-start; line-height:1.45; color:var(--ink-2); }
.okuag-neden .bi{ flex:0 0 auto; font-size:1.2rem; line-height:1.2; color:var(--primary); }
.okuag-neden b{ color:var(--ink); font-weight:600; }
.okuag-teknik{ margin-top:.75rem; }
/* Pencerenin CANLI DÖNGÜ SATIRI (v1.42.1): "30 saniyede bir yeniden deneniyor · sonraki deneme 18 sn" / spinner'lı
   "Yeniden deneniyor…" — yükleyici saniyede bir yazar (okuAg.penceredeYaz). Zemin --paper: .islem-detay --surface'ten ayrılsın. */
.okuag-dongu{ display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem; padding:.5rem .65rem; border-radius:.4rem;
  background:var(--paper); color:var(--ink); font-weight:600; font-size:.92rem; line-height:1.35; }
.okuag-dongu .bi{ color:var(--primary); font-size:1.1rem; line-height:1; }
.okuag-dongu .spinner-border{ width:1rem; height:1rem; border-width:.15em; color:var(--primary); flex:0 0 auto; }
/* Görünüm şeridi düğme grubu (üç görünüm arası geçiş) */
.oku-gorunum .og-dugmeler{ display:flex; gap:.4rem; flex-wrap:wrap; }
@media (prefers-reduced-motion: reduce){ .oku-iskelet.yukleniyor .oi-cizgi{ animation:none; } }
@media print{ .oku-iskelet-govde{ display:none; } }

/* ═══════════════ PAYLAŞIM LİNK HAVUZU (SQL/33, v1.24.4) — #paylasimModal ═══════════════
   Kitap başına N paylaşım linki; satırlar kitapoku.js'te çizilir (satirHtml). Renkler TOKEN —
   koyu tema otomatik doğru (hardcode hex yok). */
.pl-satir{ border:1px solid var(--line); border-radius:.55rem; padding:.6rem .7rem; background:var(--paper); }
.pl-satir + .pl-satir{ margin-top:.6rem; }
.pl-satir.pl-kapali{ background:var(--surface); }
.pl-ust{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.pl-durum{ display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700;
  padding:.16rem .55rem; border-radius:999px; background:var(--surface); color:var(--muted);
  border:1px solid var(--line-2); flex:0 0 auto; }
.pl-durum.pl-acik{ background:var(--yesil-tint); color:var(--yesil); border-color:transparent; }
.pl-ad{ font-size:.95rem; color:var(--ink); }
/* Kapalı linkin adresi üstü çizili + soluk — "şu an çalışmıyor" bir bakışta okunsun. Kayıt durur;
   tekrar açılınca AYNI adres canlanır (silme DEĞİL — modal metni de bunu söylüyor). */
.pl-adres{ display:block; margin:.4rem 0 .5rem; padding:.4rem .6rem; background:var(--surface);
  border-radius:.4rem; word-break:break-all; font-size:.86rem; }
.pl-kapali .pl-adres{ text-decoration:line-through; opacity:.55; }
/* ÖZEL (KISA) ADRES (SQL/36, v1.25.12): kısa adres varsa .pl-adres ONU gösterir (birincil), uzun adres
   bu satırda ikincil kalır — silinmedi, yalnız geri plana alındı. Aynı kapalı-link kuralı buna da işler. */
.pl-uzun{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin:-.25rem 0 .5rem;
  font-size:.78rem; color:var(--muted); }
.pl-uzun a{ word-break:break-all; color:var(--muted); }
.pl-kapali .pl-uzun{ text-decoration:line-through; opacity:.55; }
.pl-arac{ display:flex; flex-wrap:wrap; gap:.4rem; }
/* Okuma takibi çipi (SQL/34): okurun tarayıcısının raporu — tekil linkte "%N okundu · tarih",
   toplu gönderimde "ilerleme izlenmez", kayıt yoksa nötr "okuma kaydı yok". */
.pl-okuma-satir{ margin:-.2rem 0 .5rem; }
.pl-okuma{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--muted);
  background:var(--surface); border:1px dashed var(--line-2); border-radius:999px; padding:.16rem .6rem; }
.pl-okuma.pl-okundu{ color:var(--yesil); background:var(--yesil-tint); border-style:solid; border-color:transparent; }
.pl-okuma.pl-toplu{ color:var(--gilt-2); background:var(--gilt-tint); border-style:solid; border-color:transparent; }

/* ═══════════════ OKUMA KONUMU — KALDIĞIN YER + % İLERLEME (v1.24.4) ═══════════════
   okukonum.js kurar; HER İKİ MODDA (şifresiz okur asıl hedef). Konum okurun CİHAZINDA durur
   (localStorage) — hiçbir uca istek atılmaz. Yazdırmada yok. */
.oku-devam{ position:fixed; left:1rem; bottom:1rem; z-index:60; display:flex; align-items:center; gap:.5rem;
  background:var(--ust); color:var(--ink); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--golge-2); padding:.4rem .5rem .4rem .85rem; font-size:.88rem; max-width:min(92vw, 30rem); }
/* v1.38.1: iki satır — üstte ŞU ANKİ konum ("12/43 sayfa (%28)"), altında soluk "en uzak %50". */
.oku-devam .od-yuzde{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.oku-devam .od-konum{ font-weight:700; color:var(--primary); }
.oku-devam .od-uzak{ font-size:.72rem; font-weight:500; color:var(--muted); }
.oku-devam .od-git{ border:0; border-radius:999px; background:var(--btn-solid); color:#fff; font-weight:600;
  font-size:.85rem; padding:.35rem .8rem; transition:background var(--gecis);
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.oku-devam .od-git:hover{ background:var(--btn-solid-2); }
.oku-devam .od-kapat{ border:0; background:none; color:var(--muted); font-size:1rem; line-height:1; padding:.2rem .3rem; }
/* v1.47.1: düğme + × TEK grup (okukonum.js) — gösterge sarınca × düğmenin yanında kalır. Şifresiz okurda sesli
   kitapta düğme HEP görünür ve sesin başlat/duraklat düğmesidir (Devam et ↔ Duraklat); çalarken turuncu (ses eylem rengi). */
.oku-devam .od-dugmeler{ display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto; }
.oku-devam .od-git.od-caliyor{ background:var(--e-ses); }
.oku-devam .od-git.od-caliyor:hover{ background:var(--e-ses-2); }
/* TELEFON: müşteri yazıyı çok yakınlaştırarak okuyor (A+ kök yazıyı büyütür → gösterge de büyür). Düğme parmak
   hedefi olarak büyür; "en uzak" satırı gizlenir; gösterge sağdaki "yukarı çık" düğmesine (2.8rem + 1rem)
   BİNMEZ — sığmazsa konum yazısı üst satıra, düğme + × alt satıra sarar (yuvarlak hap yerine köşeli kutu). */
@media (max-width:575.98px){
  .oku-devam{ left:.6rem; bottom:.6rem; flex-wrap:wrap; row-gap:.3rem; border-radius:1.35rem;
    max-width:calc(100vw - .6rem - 4.4rem); padding:.4rem .5rem .4rem .75rem; }
  .oku-devam .od-yuzde{ flex:1 1 auto; min-width:0; }
  .oku-devam .od-uzak, .oku-devam .od-sayfa-ad{ display:none; }
  /* .od-sarili (okukonum.js ölçer): düğme alt satıra düştü → sütun düzeni, kutu en geniş satır kadar dar kalır. */
  .oku-devam.od-sarili{ flex-direction:column; align-items:flex-start; flex-wrap:nowrap; }
  .oku-devam.od-sarili .od-dugmeler{ margin-left:0; }
  .oku-devam .od-dugmeler{ margin-left:auto; }
  .oku-devam .od-git{ font-size:.95rem; padding:.5rem .95rem; }
  .oku-devam .od-kapat{ padding:.45rem .4rem; }
}
@media print{ .oku-devam{ display:none; } }

/* "SESİ SÜRDÜR" (v1.38.2): tarayıcı sıradaki sesi kendiliğinden başlatmayınca (iPhone izin engeli) alt-ortada
   beliren düğme; dokunuş izin sayılır, bekleyen ses çalar. okuses.js kurar; pill'in (sol alt) üstünde durur. */
.oku-ses-surdur{ position:fixed; left:50%; bottom:4.6rem; transform:translateX(-50%); z-index:61; display:flex; align-items:center; gap:.6rem;
  max-width:min(92vw, 26rem); border:0; border-radius:999px; background:var(--btn-solid); color:#fff; text-align:left;
  padding:.55rem 1rem .55rem .8rem; box-shadow:var(--golge-2); font-size:.9rem; line-height:1.2; }
.oku-ses-surdur:hover{ background:var(--btn-solid-2); }
.oku-ses-surdur i{ font-size:1.6rem; line-height:1; }
.oku-ses-surdur span{ display:flex; flex-direction:column; gap:.1rem; }
.oku-ses-surdur small{ font-size:.72rem; opacity:.85; }
@media print{ .oku-ses-surdur{ display:none; } }

/* ═══════════════ İFADE AYARLARI (v1.24.8; v1.24.10'da HEP AÇIK + otomatik kayıt) ═══════════════
   sescubugu.js JS ile ekler (iki hostta da: okuma sayfası ses modalı + grup penceresi). ElevenLabs
   sitesindeki voice settings çubuklarının karşılığı; kurulum GENELİ ayar. Renkler TOKEN.
   ⚠ details/katlama YOK (kullanıcı kararı 15-08: "burası hep görünür olsun") — düz blok. */
.bs-ifade{ display:block; width:100%; margin-top:.45rem; border-top:1px dashed var(--line-2); padding-top:.45rem; }
.bsi-baslik{ font-size:.84rem; color:var(--ink-2); margin-bottom:.5rem; display:flex; align-items:center;
  gap:.35rem; flex-wrap:wrap; }
/* Otomatik kaydetme durum yazısı: "Kaydediliyor… / ✓ Kaydedildi / ⚠ Kaydedilemedi" (hata KALICI kalır). */
.bsi-durum{ margin-left:auto; font-size:.8rem; font-weight:600; color:var(--muted); }
.bsi-durum.ok{ color:var(--yesil); }
.bsi-durum.hata{ color:var(--danger); }
.bsi-govde{ display:flex; flex-direction:column; gap:.6rem; }
.bsi-satir label{ font-size:.86rem; font-weight:600; color:var(--ink); display:block; margin-bottom:.1rem; }
.bsi-satir label b{ color:var(--primary); font-weight:700; margin-left:.3rem; }
.bsi-satir .alt-yazi{ display:block; margin-top:.05rem; }
.bsi-satir .form-range{ max-width:22rem; display:block; }
.bsi-satir.form-check label{ font-weight:500; }
.bsi-kademe{ display:flex; gap:.4rem; flex-wrap:wrap; }
.bsi-kademe .btn{ background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2); }
/* Seçili kademe — "yapı/ayar" eylem rengi (mavi); .btn-mavi yalnız bu kapsamda tanımlı. */
.bsi-kademe .btn.btn-mavi{ background:var(--mavi); border-color:transparent; color:#fff; }
.bsi-alt{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* ═══════════ OKUMA SAYFASI AÇILIŞ PERDESİ — "Kitap yükleniyor…" (v1.27.1) ═══════════
   Sayfa projenin en büyük HTML'i; yavaş sunucuda gövde parça parça inerken düğmeler görünüp
   İŞLEVSİZ kalıyordu (script'ler en altta — 18-08 müşteri bildirimi "butonlar çalışmıyor").
   Perde gövdenin İLK öğesidir: yarım sayfayı TAM kapatır (zemin OPAK --surface) + tıklamayı keser;
   DOMContentLoaded'da .oy-gitti ile yumuşakça kalkar (kaldıran script KitapOku.cshtml'de INLINE).
   ⚠ z-index 4000: yapışkan üst barın ve şeritlerin üstünde; modal açık olamaz (sayfa daha yüklenmedi).
   ⚠ Renkler TOKEN → iki tema otomatik. Yazdırmada d-print-none (markup'ta). */
#okuYukleme{ position:fixed; inset:0; z-index:4000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.15rem; background:var(--surface);
  transition:opacity .4s ease; }
#okuYukleme.oy-gitti{ opacity:0; pointer-events:none; }

/* Açık kitap: ::before = renkli CİLT (vivid indigo, katmanlı gölge) · ::after = açık sayfa yatağı
   (ortasında sırt çizgisi — tek elemanda gradient) · 3 .oy-sayfa sağ yarımdan sola ÇEVRİLİR (rotateY,
   sıralı gecikme). Sayfalar z-index:1 → ::after'ın üstünde boyanır (::after normalde çocuklardan sonra
   çizilir, z-index olmasa sayfaları örterdi). */
.oy-kitap{ position:relative; width:104px; height:72px; perspective:460px; }
.oy-kitap::before{ content:""; position:absolute; inset:-7px -8px -10px; z-index:0;
  background:var(--primary); border-radius:14px; box-shadow:var(--golge-2); }
.oy-kitap::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:8px;
  background:linear-gradient(90deg, var(--paper) calc(50% - 1px),
    var(--line-2) calc(50% - 1px) calc(50% + 1px), var(--paper) calc(50% + 1px)); }
.oy-sayfa{ position:absolute; z-index:1; left:50%; top:5px; bottom:5px; width:calc(50% - 8px);
  background:var(--paper); border:1px solid var(--line-2); border-left:0; border-radius:0 6px 6px 0;
  transform-origin:left center; animation:oyCevir 1.5s cubic-bezier(.45,.05,.35,.95) infinite; }
.oy-sayfa.s2{ animation-delay:.18s; }
.oy-sayfa.s3{ animation-delay:.36s; }
@keyframes oyCevir{ 0%{ transform:rotateY(0deg); } 70%,100%{ transform:rotateY(-180deg); } }
.oy-yazi{ font-weight:600; color:var(--ink-2); letter-spacing:.02em; animation:oyNefes 1.5s ease-in-out infinite; }
@keyframes oyNefes{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* Hareket azaltma tercihi: animasyonsuz DURAN açık kitap + sabit yazı (perde yine çalışır). */
@media (prefers-reduced-motion:reduce){ .oy-sayfa, .oy-yazi{ animation:none; } }

/* ═══════════ HATA SAYFASI — 404/500 + diğer kodlar (v1.28.0) ═══════════
   Sunucunun çıplak tarayıcı hatası yerine uygulama temalı sayfa (Controllers/HataController +
   Views/Shared/HataSayfa; kabuk _AcikLayout — üst bar yok, sayfa şifresiz okura da çıkar).
   Renkler TOKEN → iki tema otomatik. Üstteki ince amber şerit (--gilt) imza vurgusudur. */
.hata-kap{ min-height:88vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; }
.hata-kart{ background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--gilt);
  border-radius:var(--r-kart); box-shadow:var(--golge); padding:2.6rem 2.2rem 2.2rem;
  max-width:34rem; width:100%; text-align:center; }
.hata-marka{ font-weight:700; font-size:.85rem; letter-spacing:.06em; color:var(--muted); margin-bottom:1.3rem; }
.hata-kod{ font-size:4.6rem; font-weight:800; line-height:1; color:var(--primary); letter-spacing:.02em; }
.hata-baslik{ font-size:1.35rem; font-weight:700; color:var(--ink); margin:.9rem 0 .55rem; }
.hata-aciklama{ color:var(--muted); font-size:.95rem; line-height:1.55; margin:0 auto 1.6rem; max-width:26rem; }
.hata-butonlar{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* ═══════════ İŞLEM GÜNLÜĞÜ — /islemler (v1.28.1) ═══════════
   Kim ne zaman ne yaptı (SQL/37; Views/Home/Islemler). Tablo/sayfalama /hatalar sınıflarını
   (hata-tablo · hata-sayfalama · hata-bos · panel-kart) AYNEN kullanır — burada yalnız sayfaya
   özgü iki parça var. Renkler TOKEN → iki tema otomatik. */
.islem-suzgec .form-control, .islem-suzgec .form-select{ min-width:9.5rem; }
.islem-kategori{ display:inline-block; padding:.14rem .55rem; border-radius:999px;
  font-size:.78rem; font-weight:600; white-space:nowrap;
  background:var(--primary-tint); color:var(--primary-2); }
.islem-yol{ font-family:SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem;
  color:var(--muted); word-break:break-all; }

/* ============================ METİN & SES MODÜLÜ (/metinler · /sesler — SQL/40) ============================ */
/* İki dikeyin ortak görsel dili. Tür KİMLİK renkleri okuma sayfasıyla AYNI token'lardan (--t-*):
   özet kahve · edebi kırmızı · M1 turuncu · M3 yeşil; imla rozeti birincil indigo. Hardcode hex YOK →
   koyu tema kendiliğinden doğru. Sınıflar mtn- önekli (mevcut sayfalarla çakışmaz). */

/* --- liste satırları --- */
.mtn-satirlar{ display:flex; flex-direction:column; gap:.6rem; }
.mtn-satir{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kart);
  padding:.7rem .95rem; box-shadow:var(--golge); }
.mtn-satir.mtn-hatali{ border-color:var(--danger); }
.mtn-tur{ width:2.25rem; height:2.25rem; border-radius:var(--r-kontrol); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.mtn-tur-yazi{ background:var(--primary-tint); color:var(--primary-2); }
.mtn-tur-ses{ background:var(--gilt-tint); color:var(--gilt-2); }   /* Sesler listesi (Faz B) */
.mtn-ic{ min-width:12rem; flex:1 1 14rem; }
.mtn-ad{ font-weight:650; }
.mtn-ad a{ color:var(--ink); text-decoration:none; }
.mtn-ad a:hover{ color:var(--primary); }
.mtn-meta{ font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.mtn-piller{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.mtn-sag{ display:flex; gap:.45rem; align-items:center; margin-left:auto; }
.mtn-hata-cip{ background:var(--danger-tint); color:var(--danger); font-size:.78rem; font-weight:600;
  padding:.3rem .6rem; border-radius:var(--r-kontrol); max-width:26rem; }
.mtn-canli{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-2); }
.mtn-bos-sayfa{ text-align:center; color:var(--muted); background:var(--paper); border:1px dashed var(--line-2);
  border-radius:var(--r-kart); padding:2.4rem 1rem; display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.mtn-bos-sayfa i{ font-size:2rem; }

/* --- rozetler (üretim durumu; dolu = tür kimliği, kesikli = henüz yok) --- */
.mrz{ font-size:.72rem; font-weight:650; padding:.15rem .55rem; border-radius:999px;
  border:1px solid transparent; white-space:nowrap; }
.mrz-var{ background:var(--bk-t); color:var(--bk); }
.mrz-yok{ border:1px dashed var(--line-2); color:var(--muted); background:transparent; }
.mrz-eski{ background:var(--gilt-tint); color:var(--gilt-2); }   /* "güncel değil" (cascade B rozeti) */
.mrz-imla{ --bk:var(--primary-2); --bk-t:var(--primary-tint); }
.mrz-ozet{ --bk:var(--t-ozet); --bk-t:var(--t-ozet-tint); }
.mrz-edebi{ --bk:var(--t-edebi); --bk-t:var(--t-edebi-tint); }
.mrz-man1{ --bk:var(--t-man1); --bk-t:var(--t-man1-tint); }
.mrz-man3{ --bk:var(--t-man3); --bk-t:var(--t-man3-tint); }
.mrz-ses{ --bk:var(--gilt-2); --bk-t:var(--gilt-tint); }        /* 🔊 N ses (kitap sayfası, SQL/43) */
/* .mrz-cev BURADA DEĞİL — ses parça bölümünde zaten tanımlı (tek tanım kalsın). */

/* ═══════════ METİN/SES KİTAPLARI (SQL/43 — hafif raf) ═══════════
   Liste rafı + kitap sayfası + kitap okuma sayfasının modüle özgü parçaları. Renkler TOKEN →
   iki tema otomatik; metin kitabı kimliği birincil indigo, ses kitabı kimliği amber (liste tür
   kutularıyla aynı ayrım). */

/* --- liste rafı: bölüm başlığı + kitap kartları --- */
.mtn-raf-bas{ display:flex; align-items:center; gap:.6rem; margin:1.15rem 0 .6rem;
  font-size:.74rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.mtn-raf-bas::after{ content:""; flex:1; height:1px; background:var(--line); }
.mtn-kitaplar{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:.75rem; }
.mtn-kkart{ background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--primary);
  border-radius:var(--r-kart); box-shadow:var(--golge); padding:.85rem 1rem;
  display:flex; flex-direction:column; gap:.45rem; }
.mtn-kkart-ses{ border-left-color:var(--gilt); }
.mtn-kkart-ad{ font-weight:750; color:var(--ink); font-size:.98rem; display:flex; gap:.5rem; align-items:center; }
.mtn-kkart-ad i{ color:var(--primary); }
.mtn-kkart-ses .mtn-kkart-ad i{ color:var(--gilt-2); }
.mtn-kkart-meta{ font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.mtn-kkart-sag{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem; }

/* --- kitap sayfası: bölüm sıra rozeti --- */
.mtn-bsira{ width:1.6rem; height:1.6rem; border-radius:50%; flex:none;
  background:var(--primary-tint); color:var(--primary-2); font-size:.78rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.mtn-bsira-ses{ background:var(--gilt-tint); color:var(--gilt-2); }
.metin-vurgu{ color:var(--ink); }

/* --- kitap okuma sayfası: kapak kuşu + önsöz + içindekiler + bölüm başlığı ---
   Bölüm gövdesindeki blok kartları KİTAP okuma sayfasının mevcut sınıflarını (.oku-blok/.ob-arac/
   .manuscript) aynen kullanır — burada yalnız MTS'ye özgü çerçeve var. */
.mts-kapak-kus{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gilt-2); margin-bottom:.3rem; }
.mts-onsoz{ font-family:Lora,Georgia,'Times New Roman',serif; font-style:italic; color:var(--ink-2);
  font-size:.98rem; line-height:1.65; max-width:52ch; margin:0 auto .6rem; }
.mts-icind{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kart);
  box-shadow:var(--golge); padding:1rem 1.2rem; margin:0 0 1.2rem; }
.mts-icind h5{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .55rem; }
.mts-ick{ display:flex; align-items:baseline; gap:.55rem; padding:.3rem 0; font-size:.92rem;
  color:var(--ink); border-bottom:1px dotted var(--line); flex-wrap:wrap; }
.mts-ick:last-child{ border-bottom:0; }
.mts-ick a{ color:var(--ink); text-decoration:none; }
.mts-ick a:hover{ color:var(--primary); }
.mts-ick .no{ color:var(--primary-2); font-weight:750; font-variant-numeric:tabular-nums; }
.mts-ick .dolgu{ flex:1; border-bottom:1px dotted var(--line-2); min-width:2rem; transform:translateY(-.25rem); }
.mts-ick .kel{ font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.mts-ick-soluk{ opacity:.55; }
.mts-bolum-bas{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:0 0 .8rem; }
.mts-bolum-no{ background:var(--primary); color:#fff; font-size:.68rem; font-weight:800;
  letter-spacing:.08em; border-radius:999px; padding:.18rem .7rem; flex:none; }
.mts-bolum-ad{ font-family:Lora,Georgia,'Times New Roman',serif; font-weight:600; color:var(--ink);
  font-size:1.35rem; margin:0; }
.mts-bolum-arac{ margin-left:auto; display:flex; gap:.4rem; flex-wrap:wrap; }

/* --- ☰ blok seçimi penceresi satırı + Ses Ekle mod kutusu --- */
.mts-blok-satir{ background:var(--surface); }
.mts-blok-satir label{ cursor:pointer; color:var(--ink); font-weight:600; font-size:.92rem; }
.mts-modsec{ border:1px solid var(--line); border-radius:var(--r-kart); padding:.7rem .9rem;
  background:var(--surface); display:flex; flex-direction:column; gap:.35rem; }

/* "Çevrilmemişleri çevir" (yapı/üretim eylemi = MAVİ). .btn-mavi bugüne dek yalnız .bsi-kademe
   kapsamındaydı → kapsam dışı kullanımda düğme stilsiz kalıyordu (inceleme bulgusu 21-08);
   genel tanım eklendi, kapsamlı kural aynı stili verdiğinden davranış değişmez. */
.btn-mavi{ background:var(--mavi); border-color:transparent; color:#fff; }
.btn-mavi:hover{ color:#fff; filter:brightness(1.06); }

/* --- detay: kırıntı + adım kartları --- */
.mtn-kirinti{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.95rem; }
.mtn-kirinti a{ color:var(--primary); text-decoration:none; }
.mtn-kirinti b{ color:var(--ink); }
.mtn-adim{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kart);
  box-shadow:var(--golge); margin-bottom:1.1rem; overflow:hidden; }
.mtn-adim-bas{ display:flex; align-items:center; gap:.6rem; padding:.72rem 1rem;
  border-bottom:1px solid var(--line); flex-wrap:wrap; color:var(--ink); }
.mtn-no{ width:1.55rem; height:1.55rem; border-radius:50%; background:var(--primary); color:#fff;
  font-size:.78rem; font-weight:750; display:flex; align-items:center; justify-content:center; flex:none; }
.mtn-adim-sag{ margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.mtn-adim-sag .form-select{ width:auto; }
.mtn-adim-govde{ padding:1rem 1.1rem; }

/* --- kaynak sekmeleri (Özgün / İmla düzeltilmiş) + araç şeridi --- */
.mtn-segt{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-kontrol); overflow:hidden; }
.mtn-sek{ padding:.3rem .75rem; font-size:.8rem; font-weight:650; border:0; color:var(--ink-2);
  background:var(--btn-zemin); cursor:pointer; }
.mtn-sek.akt{ background:var(--btn-solid); color:#fff; }
.mtn-serit{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; margin-bottom:.9rem; }
.mtn-serit .form-select{ width:auto; }
.mtn-serit-bosluk{ flex:1; }
.mtn-esas{ display:inline-flex; gap:.8rem; align-items:center; font-size:.8rem; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-kontrol); padding:.32rem .7rem; background:var(--surface); }
.mtn-esas label{ display:inline-flex; gap:.3rem; align-items:center; margin:0; cursor:pointer; }

/* --- metin gösterimi (edebi içerik serif — okuma sayfası geleneği) --- */
/* Lora _Layout'ta zaten yüklü (okuma sayfası ailesi). max-width SINIRI YOK (v1.29.8 — kullanıcı
   bildirimi 20-08: bloklar tam satır olunca 70ch sınırı metni sol yarıda bırakıp sağda boş alan
   açıyordu; "işaretlediğim alan boş"). Metin kabın tamamını kullanır — sınır GERİ EKLENMESİN. */
.mtn-serif{ font-family:Lora,Georgia,'Times New Roman',serif; font-size:.98rem; line-height:1.75;
  color:var(--ink); }
.mtn-serif p{ margin:0 0 .7rem; }
.mtn-fark{ background:var(--yesil-tint); box-shadow:inset 0 -2px 0 var(--yesil); border-radius:.15rem; padding:0 .12rem; }
.mtn-not{ font-size:.8rem; color:var(--muted); margin-top:.6rem; }
.mtn-bos{ color:var(--muted); font-size:.86rem; font-style:italic; }

/* --- üretim blokları (HER BLOK TAM SATIR; üst şerit kimlik rengi) ---
   auto-fit/minmax(320px) geniş ekranda 3-4 sütuna bölüyordu → araç şeridi dar sütunda yığılıyordu
   (kullanıcı 20-08: "çok sıkışık"). Önce 2'li denendi, o da elendi (aynı gün: "kullanılmayan
   bloklarda yanlar boş kalıyor") → karar: her satırda BİR blok. Çok sütuna GERİ DÖNME. */
.mtn-bloklar{ display:grid; grid-template-columns:1fr; gap:.9rem; }
.mtn-blok{ border:1px solid var(--line); border-top:3px solid var(--bk,var(--line-2)); border-radius:var(--r-kart);
  background:var(--paper); box-shadow:var(--golge); overflow:hidden; }
.mtn-blok-ozet{ --bk:var(--t-ozet); --bk-t:var(--t-ozet-tint); }
.mtn-blok-edebi{ --bk:var(--t-edebi); --bk-t:var(--t-edebi-tint); }
.mtn-blok-man1{ --bk:var(--t-man1); --bk-t:var(--t-man1-tint); }
.mtn-blok-man3{ --bk:var(--t-man3); --bk-t:var(--t-man3-tint); }
.mtn-blok-bas{ display:flex; align-items:center; gap:.5rem; justify-content:space-between;
  padding:.55rem .8rem; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mtn-blok-roz{ background:var(--bk-t); color:var(--bk); border-radius:.4rem; padding:.2rem .6rem;
  font-weight:750; font-size:.78rem; white-space:nowrap; }
.mtn-blok-arac{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
  /* ⚠ margin-left:auto ŞART (v1.41.5): başlığa ÜÇÜNCÜ öğe girdi (AI/ELLE kaynak rozeti) ve
     .mtn-blok-bas'ın space-between'i üç öğeyi eşit dağıtıp rozeti ortada bırakıyordu. Auto pay
     araçları sağa sabitler, rozet tür rozetinin YANINDA kalır. */
  margin-left:auto; }
.mtn-blok-arac .form-select{ width:auto; }
.mtn-blok-govde{ padding:.9rem 1rem; }
/* ELLE METİN GİRİŞİ daveti MTS detayında da kullanılır (v1.41.4) — görünüm ailesi ORTAK (.elle-giris,
   grup penceresiyle aynı kesik çerçeve); burada yalnız kap payı düzeltilir: blok gövdesinde davet TEK
   öğedir, üstünde boşluk gereksiz. Yeni bir davet yeri açarsan kendi kutu stilini YAZMA, bu aileyi kullan. */
.mtn-blok-govde > .elle-giris{ margin-top:0; }
/* ⚠ Davet metni MTS'te uzun (blok adı + ses cümlesi): esnemeyen bir flex öğesi olarak kalırsa kendi
   satırına düşer ve ikon TEK BAŞINA bir satırda kalır (19-09'da tarayıcıda görüldü). Kapsam bilerek
   MTS ile sınırlı — grup penceresindeki kısa davetlerin bugünkü dizilişi değişmesin. */
.mtn-blok-govde > .elle-giris > span,
.mtn-adim-govde > .elle-giris > span{ flex:1 1 18rem; }
.mtn-blok-govde .mtn-serif{ font-size:.92rem; line-height:1.65; }
.mtn-par{ width:4.3rem; }

/* --- detay hata/canlı şeritleri (HATA GİZLEME YOK: dostu mesaj + Teknik ayrıntı) --- */
.mtn-hata-buyuk{ background:var(--danger-tint); border:1px solid var(--danger); border-radius:var(--r-kart);
  padding:.9rem 1.1rem; margin-bottom:1rem; color:var(--ink-2); }
.mtn-hata-baslik{ color:var(--danger); font-weight:700; margin-bottom:.3rem; display:flex; gap:.45rem; align-items:center; }
.mtn-hata-teknik{ font-family:SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; color:var(--muted);
  white-space:pre-wrap; word-break:break-word; max-height:10rem; overflow:auto; }

/* --- sürüm penceresi satırları --- */
.mtn-surum{ border:1px solid var(--line); border-radius:var(--r-kontrol); padding:.6rem .8rem; background:var(--paper); }
.mtn-surum.aktif{ border-color:var(--primary); background:var(--primary-tint); }
.mtn-surum-bas{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.86rem; color:var(--ink); }
.mtn-surum-on{ font-size:.8rem; color:var(--muted); margin-top:.3rem; }

/* --- yeni metin / düzenleme pencereleri --- */
.mtn-yeni-ta{ font-family:Georgia,'Times New Roman',serif; line-height:1.6; }
.mtn-sayac{ font-size:.76rem; color:var(--muted); text-align:right; margin-top:.3rem; font-variant-numeric:tabular-nums; }

/* --- dış çizgili kırmızı düğme (Boşalt/Sil — eylem dili: sil KIRMIZI) --- */
.btn-dis-kirmizi{ background:transparent; border:1px solid var(--danger); color:var(--danger); }
.btn-dis-kirmizi:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }

/* --- SES dikeyi: parça listesi (KARAR 5 — 1..N parça; ▲▼ sırala) --- */
.prc-liste{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.prc{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-kontrol); padding:.5rem .7rem; }
.prc-sira{ width:1.5rem; height:1.5rem; border-radius:50%; background:var(--paper); border:1px solid var(--line-2);
  color:var(--muted); font-size:.74rem; font-weight:750; display:flex; align-items:center; justify-content:center; flex:none; }
.prc-ad{ font-weight:650; color:var(--ink); font-size:.86rem; overflow-wrap:anywhere; }
.prc-meta{ font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.prc-audio{ height:2.1rem; max-width:280px; flex:1 1 200px; min-width:150px; }
.prc-sag{ margin-left:auto; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.mrz-cev{ --bk:var(--yesil); --bk-t:var(--yesil-tint); }
.mtn-uyari{ background:var(--gilt-tint); border-radius:var(--r-kontrol); padding:.6rem .8rem; font-size:.82rem;
  color:var(--ink-2); margin:.4rem 0 .8rem; max-width:70ch; }
.mtn-uyari b{ color:var(--gilt-2); }
.mtn-kilit{ display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; color:var(--muted); font-size:.88rem; }

/* --- SES yükleme penceresi (çoklu dosya, sırayla; dosya başına ilerleme) --- */
.sy-drop{ border:2px dashed var(--line-2); border-radius:var(--r-kart); padding:1.4rem 1rem; text-align:center;
  color:var(--ink-2); background:var(--surface); cursor:pointer; }
.sy-drop b{ display:block; color:var(--ink); margin:.3rem 0 .1rem; }
.sy-drop small{ color:var(--muted); }
.sy-drop i.bi{ font-size:1.6rem; color:var(--gilt-2); }
.sy-dosya{ display:flex; align-items:center; gap:.7rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-kontrol); padding:.5rem .7rem; font-size:.82rem; color:var(--ink); }
.sy-prog{ height:.45rem; background:var(--line); border-radius:999px; overflow:hidden; width:100%; margin-top:.3rem; }
.sy-prog i{ display:block; height:100%; background:var(--primary); border-radius:999px; width:0; transition:width .2s; }
.bilgi-kutu{ background:var(--primary-tint); border-radius:var(--r-kontrol); padding:.6rem .8rem; }

/* --- üst bar sekme sayısı: "Kitaplar (2) · Metinler (9) · Sesler (3)" (kullanıcı kararı 19-08) --- */
.sekme-say{ font-size:.74rem; color:var(--muted); font-weight:650; font-variant-numeric:tabular-nums; }
.sekme.aktif .sekme-say{ color:inherit; opacity:.8; }


/* =====================================================================================================
   ELLE YÜKLENEN SES — AI | ELLE SEKMELERİ + ELLE PANELİ (v1.40.1, kullanıcı isteği 18-09)
   Ses çubuğu (sescubugu.js + _OkuBolum > SesCubugu) iki sekmeye ayrıldı: "AI ile üret" (mevcut kontroller) ·
   "Elle yükle" (mp3/wav yükle → ses tanıma + metin eşleştirme → rakamlı onay). Tüm renkler TOKEN → iki tema
   otomatik. Mockup: Mockup/elle-ses-mockup.html.
   ⚠ CSS yorumunda "yıldız + eğik çizgi" dizisi YAZMA (yorumu erken kapatır — 15-08 tuzağı).
   ===================================================================================================== */

/* 1) SEKMELER — .ti-sekmeler ailesi (segment düğmeleri; nav-tabs DEĞİL, alt çizgi sarmada bozulur). Çubuğun
      ilk çocuğu; modalda order:-1 ile en üstte kalır (markup sırası Razor + sescubugu.js'te sabit). */
.bs-sekmeler{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .5rem; flex:1 1 100%;
  border-bottom:1px solid var(--line); padding-bottom:.45rem; }
.bs-sekme{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; padding:.4rem .8rem;
  font-size:.95rem; line-height:1.25; border:1px solid transparent; border-radius:var(--r-kontrol);
  color:var(--ink-2); background:none; cursor:pointer; }
.bs-sekme:hover{ background:var(--surface); color:var(--ink); }
.bs-sekme.active{ background:var(--surface); border-color:var(--line); color:var(--primary); font-weight:600; }
.bs-sekme .bi{ font-size:1rem; }
/* AI <-> ELLE ZIT RENK (kullanici karari 19-09: "butonlar birbirine karisiyor, renkleri zit yapalim").
   AI = YESIL, Elle = AMBER; dil .btn-yesil / .btn-gilt ile ayni: AKTIF = dolgu + beyaz yazi, PASIF =
   renkli yazi + seffaf zemin -> hem AI/Elle hem aktif/pasif ayrimi bir bakista okunur. Renkler TOKEN,
   iki tema otomatik. Kural UC KURUCUYU birden kapsar (_OkuBolum > SesCubugu, sescubugu.js > html(),
   _MtsSesCubugu) cunku secici markup'taki data-sekme'ye baglidir; markup DEGISMEZ.
   UYARI: elle sesin ÇİPİ (.cip-elle) ve surum rozeti (.bss-r-elle) YESIL KALIR - orada amber
   "metin degisti" demektir (.cip-uret / .bss-r-degisti), ayni renge cekmek o ayrimi oldururdu. */
.bs-sekme[data-sekme="ai"]{ color:var(--yesil-2); }
.bs-sekme[data-sekme="elle"]{ color:var(--gilt-2); }
.bs-sekme[data-sekme="ai"]:hover{ background:var(--yesil-tint); color:var(--yesil-2); }
.bs-sekme[data-sekme="elle"]:hover{ background:var(--gilt-tint); color:var(--gilt-2); }
.bs-sekme.active[data-sekme="ai"]{ background:var(--yesil); border-color:var(--yesil); color:#fff; box-shadow:var(--golge); }
.bs-sekme.active[data-sekme="elle"]{ background:var(--gilt); border-color:var(--gilt); color:#fff; box-shadow:var(--golge); }
.bs-sekme.active[data-sekme="ai"]:hover{ background:var(--yesil-2); border-color:var(--yesil-2); color:#fff; }
.bs-sekme.active[data-sekme="elle"]:hover{ background:var(--gilt-2); border-color:var(--gilt-2); color:#fff; }
/* Sağdaki not aktif sesin KAYNAĞINI söyler (sekme = üretim yolu, not = çalan ses). */
.bs-sekme-not{ margin-left:auto; font-size:.85rem; color:var(--muted); display:inline-flex; align-items:center; gap:.35rem; }
.bs-sekme-not b{ color:var(--ink-2); font-weight:600; }
.ses-modal-govde .bs-sekmeler{ order:-1; }
.ses-modal-govde .bs-sekme{ min-height:2.75rem; }

/* 2) ELLE SEKMESİ AÇIKKEN AI-only kontroller GİZLENİR — .oku-ses-sabit gizleme listesi deseni: markup
      değişmez, çubuğun data-sekme'si karar verir. Ortak kalanlar: Sürümler · Sesi sil. */
.bolum-ses[data-sekme="elle"] > .alt-yazi, .bolum-ses[data-sekme="elle"] > .bs-ayar,
.bolum-ses[data-sekme="elle"] > .bs-motor, .bolum-ses[data-sekme="elle"] > .bs-ses,
.bolum-ses[data-sekme="elle"] > .bs-dinle, .bolum-ses[data-sekme="elle"] > .bs-tarz,
.bolum-ses[data-sekme="elle"] > .bolum-ses-uret, .bolum-ses[data-sekme="elle"] > .bolum-ses-izle,
.bolum-ses[data-sekme="elle"] > .bs-promt-kutu, .bolum-ses[data-sekme="elle"] > .bs-ifade,
.bolum-ses[data-sekme="elle"] > .bs-tarz-not, .bolum-ses[data-sekme="elle"] > .bs-yapi-panel,
.bolum-ses[data-sekme="elle"] > .bs-hata{ display:none !important; }
.bolum-ses:not([data-sekme="elle"]) > .bs-elle{ display:none !important; }
.ses-modal-govde .bs-elle{ order:6; flex:1 1 100%; }
/* Elle sekmesinde Sürümler düğmesi panelin ALTINA iner (AI sekmesindeki yeri değişmez — sekmeye kapsamlı). */
.ses-modal-govde .bolum-ses[data-sekme="elle"] > .bs-surum-kutu{ order:8; }
.ses-modal-govde .bs-surum-panel{ order:10; flex:1 1 100%; }
/* Sabit ses şeridinde (okuses.js) sekmeler ve panel görünmez — dinleme aracı, üretim aracı değil. */
.oku-ses-sabit > .bs-sekmeler, .oku-ses-sabit > .bs-elle{ display:none !important; }

/* 3) ELLE PANELİ — düşey akış (davet → dosya → sonuç). Çubuk flex-wrap olduğundan panel tam genişlik satırdır. */
.bs-elle{ display:flex; flex-direction:column; gap:.7rem; flex:1 1 100%; min-width:0; }
.bs-elle-alan{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; background:var(--paper);
  border:2px dashed var(--line-2); border-radius:var(--r-kart); padding:.9rem 1.1rem; color:var(--ink-2); }
.bs-elle-alan.surukle{ border-color:var(--primary); background:var(--primary-tint); }
.bs-elle-alan > .bi{ font-size:2rem; color:var(--e-ses); line-height:1; }
.bs-elle-alan .bea-metin{ flex:1 1 16rem; min-width:0; }
.bs-elle-alan .bea-metin b{ color:var(--ink); }
.bs-elle-alan .bea-metin .alt-yazi{ display:block; margin-top:.15rem; }
.bs-elle-alan .btn{ margin-left:auto; }
.bs-elle-hedef{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; font-size:.9rem; color:var(--ink-2); }
.bs-elle-hedef b{ color:var(--ink); }
.bs-elle-hedef .bi{ color:var(--primary); }
.bs-elle-dosya{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-kontrol); padding:.6rem .8rem; }
.bs-elle-dosya > .bi{ font-size:1.7rem; color:var(--e-ses); line-height:1; }
.bs-elle-dosya .bed-bilgi{ flex:1 1 14rem; min-width:0; }
.bs-elle-dosya .bed-ad{ font-weight:600; color:var(--ink); display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; word-break:break-all; }
.bs-elle-dosya .bed-alt{ color:var(--muted); font-size:.85rem; margin-top:.1rem; }
.bs-elle-dosya .bed-alt b{ color:var(--ink-2); font-weight:600; }
.bs-elle-dosya .progress{ flex:1 1 100%; height:8px; background:var(--btn-zemin); }
.bs-elle-dosya .progress-bar{ background:var(--e-ses); }
.bs-elle-dosya .bed-araclar{ display:inline-flex; gap:.4rem; margin-left:auto; flex-wrap:wrap; }
.bs-elle-adimlar{ list-style:none; margin:0 0 .6rem; padding:0; display:flex; flex-direction:column; gap:.3rem; font-size:.92rem; }
.bs-elle-adimlar li{ display:flex; align-items:center; gap:.5rem; color:var(--muted); }
.bs-elle-adimlar li.bitti{ color:var(--ink-2); }
.bs-elle-adimlar li.bitti .bi{ color:var(--yesil); }
.bs-elle-adimlar li.aktif{ color:var(--ink); font-weight:600; }
.bs-elle-adimlar .spinner-border{ width:1rem; height:1rem; border-width:.15em; color:var(--primary); }
.bs-elle-not{ font-size:.9rem; color:var(--ink-2); line-height:1.45; }
.bs-elle-not .bi{ color:var(--primary); }

/* 4) SONUÇ KARTI — RAKAMLI ÖN BİLGİ + ONAY. Eşleşme kaç olursa olsun Onayla açık (takipsiz seçenek YOK). */
.bs-elle-sonuc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-kart);
  padding:.85rem 1rem; display:flex; flex-direction:column; gap:.65rem; }
.bs-elle-sonuc.dusuk{ border-color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger); }
.bes-ust{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; }
.bes-yuzde{ font-family:Inter, system-ui, sans-serif; font-size:2.3rem; font-weight:700; line-height:1;
  color:var(--yesil); font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; gap:.35rem; }
.bes-yuzde small{ font-size:1rem; font-weight:600; color:var(--ink-2); }
.dusuk .bes-yuzde{ color:var(--danger); }
.bes-say{ color:var(--ink-2); font-size:.92rem; line-height:1.45; }
.bes-say b{ color:var(--ink); font-weight:600; }
/* Kapsama şeridi: metin boyunca nerede eşleşti (yeşil), nerede tanınamadı (amber). */
.bes-kapsama{ display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--btn-zemin); }
.bes-kapsama span{ display:block; height:100%; }
.bes-kapsama .ok{ background:var(--yesil); }
.bes-kapsama .yok{ background:var(--gilt); }
.bes-acik{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:.82rem; color:var(--muted); }
.bes-acik i{ display:inline-block; width:.7rem; height:.7rem; border-radius:2px; vertical-align:-1px; margin-right:.3rem; }
.bes-acik .ok i{ background:var(--yesil); } .bes-acik .yok i{ background:var(--gilt); }
.bes-bas{ font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.4rem; font-size:.92rem; }
.bes-bas .bi{ color:var(--gilt-2); }
.bes-liste{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.bes-liste li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; line-height:1.45; color:var(--ink-2); }
.bes-liste .zaman{ flex:0 0 auto; min-width:4.6rem; font-variant-numeric:tabular-nums; color:var(--muted); }
.bes-liste mark{ background:var(--gilt-tint); color:var(--gilt-2); padding:0 .15rem; border-radius:.2rem; }
.bes-liste q{ font-family:Lora, Georgia, serif; color:var(--ink); }
.bes-not{ font-size:.85rem; color:var(--muted); }
.bes-uyari{ display:flex; gap:.6rem; align-items:flex-start; background:var(--danger-tint); color:var(--danger);
  border-radius:var(--r-kontrol); padding:.6rem .85rem; font-size:.92rem; line-height:1.45; }
.bes-uyari .bi{ font-size:1.15rem; line-height:1.3; }
.bes-uyari b{ font-weight:700; }
.bes-araclar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.bes-araclar .bes-not{ flex:1 1 100%; }
.ses-modal-govde .bes-onayla{ background:var(--e-ses); color:#fff; border-color:var(--e-ses); }
.ses-modal-govde .bes-onayla:hover{ background:var(--e-ses-2); color:#fff; }

/* 5) METİN DEĞİŞTİ şeridi (kayıtlı elle seste): gilt = "dikkat / eski" (.ozet-banner dili). */
.bs-elle-degisti{ display:flex; gap:.6rem; align-items:flex-start; background:var(--gilt-tint); color:var(--gilt-2);
  border-radius:var(--r-kontrol); padding:.6rem .85rem; font-size:.92rem; line-height:1.45; }
.bs-elle-degisti .bi{ font-size:1.15rem; line-height:1.3; }
.bs-elle-degisti b{ font-weight:700; }
/* Eşleşme ayrıntısı paneli (kayıtlı elle seste; harita /zamanlama'dan çekilir, istemcide dolaşılır). */
.bs-elle-ayrinti-panel{ background:var(--surface); font-size:.9rem; display:flex; flex-direction:column; gap:.5rem; }

/* 6) BLOK SATIRI ÇİPİ + SÜRÜM ROZETİ: elle yüklenen ses sayfada da, sürüm listesinde de bir bakışta belli. */
.ob-ses-cip.cip-elle{ background:var(--yesil-tint); color:var(--yesil-2); border-color:var(--yesil); }
.bss-r-elle{ background:var(--yesil-tint); color:var(--yesil-2); }
.bss-r-degisti{ background:var(--gilt-tint); color:var(--gilt-2); }