/* 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;
}

/* ===== 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;
  --gilt:#e08a00; --gilt-2:#b86f00; --gilt-tint:#fff3df;
  --mavi:#2f7ad6; --mavi-tint:#e8f1fb; --yesil:#12a571; --yesil-tint:#e3f6ef;
  --danger:#e0483f; --danger-tint:#fdece9;
  --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;
}

/* ===== 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;
  --gilt:#f4b13a; --gilt-2:#facc5a; --gilt-tint:#2a2413;
  --mavi:#4f97ec; --mavi-tint:#15243a; --yesil:#22c891; --yesil-tint:#0f2a22;
  --danger:#f0675d; --danger-tint:#2e1a18;
  --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;
}

/* 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) */
.ustbar{ 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); }
/* 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:transparent; border:1px solid var(--line); color:var(--ink-2); 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(--surface); color:var(--primary); border-color:var(--primary); }

/* 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); }
.ustbar .btn-ghost{ color:var(--ink-2); border-color:var(--line); }
.ustbar .btn-ghost:hover{ background:var(--surface); color:var(--ink); }

/* 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; }
/* 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; }

.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; }

/* ---------- Seslendirme promtu: bloklar + cümle duyguları (transkript benzeri) ---------- */
.prompt-bloklar{ display:flex; flex-direction:column; gap:.6rem; }
.prompt-blok{ background:var(--surface); border:1px solid var(--line); border-radius:.4rem; padding:.7rem .8rem; }
.prompt-blok-bas{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem; }
.prompt-blok .blok-no{ font-weight:600; color:var(--ink); font-size:.85rem; }
.duygu-rozet.genel{ background:var(--gilt-tint); color:#e65100; font-weight:600; font-size:.74rem; }
.blok-yon{ font-size:.84rem; color:var(--ink-2); background:var(--primary-tint); border-radius:.3rem;
  padding:.35rem .6rem; margin-bottom:.5rem; }
.blok-yon i{ color:var(--primary-2); margin-right:.35rem; }
.prompt-cumle{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:.4rem; padding:.32rem 0;
  border-top:1px dashed var(--line); }
.prompt-cumle:first-child{ border-top:none; }
.prompt-cumle .cumle-metin{ flex:1 1 auto; min-width:12rem; color:var(--ink-2); font-size:.92rem; line-height:1.5; }
.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; }
.prompt-ham summary{ cursor:pointer; color:var(--primary-2); font-size:.85rem; }

/* 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; }
.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: sıcak nötr çerçeve (yan-şerit/renkli yerine) */
.btn-ghost{ background:transparent; color:var(--ink-2); border:1px solid var(--line); box-shadow:none; }
.btn-ghost:hover{ background:var(--surface); color:var(--ink); border-color:var(--muted); }
.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; }

.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:.5rem .7rem; font-size:.8rem; max-height:8.5rem; overflow:auto; white-space:pre-wrap; word-break:break-word; }

/* Segment tablosu */
.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; }

/* 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) */
#toastKutu{ position:fixed; right:1rem; bottom:1rem; z-index:1080; display:flex; flex-direction:column; gap:.5rem; }
.toast-mini{ background:#323232; color:#fff; padding:.7rem 1rem; border-radius:.3rem; font-size:.88rem; box-shadow:var(--golge-2); max-width:340px; }
.toast-mini.hata{ background:var(--danger); }

/* 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; }
}

/* 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; }
.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); }

/* ---------- Seslendirme (kaynak başına) + düzenlenebilir yapı editörü ---------- */
.seslendirme-kart{ background:var(--surface); border-radius:.4rem; padding:.6rem .7rem; }
.sk-editor{ display:flex; flex-direction:column; gap:.5rem; }
.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:7rem; }
.sesl-cumle .sesl-etiket{ max-width:8.5rem; }
.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 board'u (sürükle-bırak) ===== */
.board{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; align-items:flex-start; min-height:14rem; }
.board-col{ flex:0 0 17rem; width:17rem; background:var(--paper); border-radius:.4rem; box-shadow:var(--golge);
  display:flex; flex-direction:column; max-height:calc(100vh - 13rem); }
.board-col-pool{ background:var(--primary-tint); }
.board-col-birlesik{ outline:2px solid var(--gilt); }
.board-col-bas{ display:flex; align-items:center; gap:.35rem; padding:.55rem .65rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.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-col-govde{ padding:.55rem; overflow-y:auto; flex:1; min-height:4rem; }
.board-col-govde.drop-hedef{ background:var(--gilt-tint); outline:2px dashed var(--gilt); outline-offset:-4px; border-radius:.3rem; }
.board-grup-bas{ flex:1; min-width:6.5rem; }
.board-col-yeni{ flex:0 0 11rem; width:11rem; background:transparent; box-shadow:none; border:1px dashed var(--line); }
.board-col-yeni .btn{ min-height:5rem; color:var(--muted); }
.board-bos{ text-align:center; color:var(--muted); font-size:.84rem; padding:1.1rem .4rem; border:1px dashed var(--line); border-radius:.3rem; }
.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) ===== */
.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; }

/* ===== 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) */
.toc-sticky{ position:sticky; top:1rem; max-height:calc(100vh - 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; }

/* 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-kapak-etiket{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gilt-2); margin-bottom:.9rem; }
.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); }

/* Bölüm */
.oku-bolum{ scroll-margin-top:1rem; margin-bottom:2.8rem; }
.oku-bolum-no{ font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gilt-2); margin-bottom:.3rem; }
.oku-bolum-bas{ font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--ink); font-size:1.55rem; line-height:1.25; margin:0 0 .35rem; }
.oku-bolum-tarih{ color:var(--muted); font-size:.85rem; margin-bottom:1rem; }
.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 sesi (oku + dinle) */
.oku-ses{ display:flex; align-items:center; gap:.45rem; background:var(--surface); border-radius:.4rem;
  padding:.5rem .7rem; margin-bottom:1.1rem; color:var(--muted); }
.oku-ses audio{ height:2.1rem; flex:1 1 auto; max-width:24rem; }
.oku-bos-bolum{ color:var(--muted); font-style:italic; background:var(--surface); border-radius:.4rem; padding:.9rem 1.1rem; }

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

/* 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; }
  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; }
.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:22rem; overflow:auto; }

/* ===== 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); }