/* =========================================================================
   Zamanı Değil, Sistemi Sat — okuma deneyimi
   ─────────────────────────────────────────────────────────────────────────
   TASARIM DİLİ

   Renk      Sepya. Kağıda yakın kırık bej zemin, sıcak koyu kahve metin,
             tek vurgu rengi amber. Bir ekranda birden fazla amber öğe yok.
   Tipografi Gövde Lora (serif), başlıklar Montserrat.
   Ölçü      Metin 37rem, görsel/tablo 52rem. İkisi de aynı merkezde.
             Kenar çubuğu yok — sayfa tek kolon, metin her zaman ortada.
   Yön bulma Üst çubuktaki "kitap haritası" okuduğun bölümü ve içindeki
             başlığı gösteriyor. Metnin yanından yer çalmıyor.
   Boşluk    --sp-1 … --sp-9 arası tek merdiven. Ara değer uydurulmuyor.

   ⚠ .k-metin bir ızgara. Çocuklarına yatay margin verme, sütun adı ver:
     "dar" (metin) ya da "genis" (görsel, tablo, kod).
     Satır adları -start/-end ile bitmek ZORUNDA. CSS'te "grid-column: dar"
     kısayolu yalnızca [dar-start]/[dar-end] varsa çalışır; Türkçe ek
     (-bas/-son) yazılırsa tarayıcı otomatik yerleştirmeye düşer ve
     paragraflar sütunlara dağılır.
   ========================================================================= */

/* ---------- 1. Tasarım değişkenleri ---------- */

:root {
  /* Sepya — açık tema */
  --k-bg:        #f5ede0;
  --k-bg-alt:    #ece0cd;
  --k-surface:   #fbf5ea;
  --k-ink:       #3b3229;
  --k-ink-soft:  #63564a;
  --k-ink-faint: #7a6a56;
  --k-rule:      #ddcfb8;
  --k-rule-soft: #e8dcc8;
  --k-amber:     #a06a10;
  --k-amber-lit: #f0e2c4;
  --k-amber-mid: #c99a3e;
  --k-golge:     rgba(59, 50, 41, .22);

  /* Butonlar — zemin/metin değişkenleriyle takas edilmez */
  --k-btn-bg:   #3b3229;
  --k-btn-fg:   #f8f2e7;
  --k-btn-bg-h: #a06a10;
  --k-btn-fg-h: #fffaf0;

  /* Tipografi */
  --k-serif: "Lora", Georgia, "Times New Roman", serif;
  --k-sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --k-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --tip-xs: .688rem;
  --tip-sm: .781rem;
  --tip-md: .875rem;
  --tip-lg: 1rem;
  --tip-xl: 1.125rem;

  /* Boşluk merdiveni */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Ölçüler */
  --k-dar:   37rem;   /* okunacak metin */
  --k-genis: 52rem;   /* görsel, tablo, kod, kartlar */
  --k-kenar: 1.25rem; /* ekran kenarı boşluğu */

  --k-radius:    8px;
  --k-radius-sm: 5px;
  --k-ust-h:     3.5rem;
}

body.dark {
  --k-bg:        #191510;
  --k-bg-alt:    #221c15;
  --k-surface:   #211b14;
  --k-ink:       #efe4d2;
  --k-ink-soft:  #b6a794;
  --k-ink-faint: #90816d;
  --k-rule:      #372e24;
  --k-rule-soft: #2b241c;
  --k-amber:     #e3ae57;
  --k-amber-lit: #33291a;
  --k-amber-mid: #b8862e;
  --k-golge:     rgba(0, 0, 0, .6);

  --k-btn-bg:   #efe4d2;
  --k-btn-fg:   #191510;
  --k-btn-bg-h: #e3ae57;
  --k-btn-fg-h: #191510;
}

@media (min-width: 40rem) { :root { --k-kenar: 2rem; } }
@media (min-width: 64rem) { :root { --k-kenar: 2.5rem; } }

/* ---------- 2. Temel ---------- */

.kitap-sayfa {
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-serif);
  font-size: 17px;
  line-height: 1.78;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 48rem) { .kitap-sayfa { font-size: 18px; } }
@media (min-width: 80rem) { .kitap-sayfa { font-size: 19px; } }

.kitap-sayfa *,
.kitap-sayfa *::before,
.kitap-sayfa *::after { box-sizing: border-box; }

.kitap-sayfa img { max-width: 100%; height: auto; display: block; }

/* :where() ile özgüllük sıfır — .k-dugme gibi sınıflar bunu ezebilsin.
   Düz "a { color: inherit }" yazılırsa dolu butonun yazısı zemin rengine
   dönüyor ve buton okunmaz oluyor. */
:where(.kitap-sayfa a) { color: inherit; }

.kitap-sayfa ::selection { background: var(--k-amber-lit); color: var(--k-ink); }

.kitap-sayfa :focus-visible {
  outline: 2px solid var(--k-amber);
  outline-offset: 2px;
  border-radius: var(--k-radius-sm);
}

.k-gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.k-atla {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--k-btn-bg);
  color: var(--k-btn-fg);
  padding: var(--sp-3) var(--sp-5);
  z-index: 200;
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
}
.k-atla:focus { left: var(--sp-2); top: var(--sp-2); }

/* ---------- 3. Düzen ---------- */

.k-kabuk {
  width: 100%;
  max-width: calc(var(--k-dar) + var(--k-kenar) * 2);
  margin-inline: auto;
  padding-inline: var(--k-kenar);
}

.k-kabuk--genis { max-width: calc(var(--k-genis) + var(--k-kenar) * 2); }

/* Okuma alanı: tek kolon, ortada. Kenar çubuğu yok. */
.k-okuma {
  width: 100%;
  max-width: calc(var(--k-genis) + var(--k-kenar) * 2);
  margin-inline: auto;
  padding-inline: var(--k-kenar);
}

/*
  Metin ızgarası. İki genişlik kademesi aynı merkezde hizalı:
  "dar" okunacak metin, "genis" görsel ve tablo.
  Yatay margin kullanılmıyor — margin kısayolu düzeni bozamıyor.
*/
.k-metin {
  display: grid;
  grid-template-columns:
    [genis-start] minmax(0, 1fr)
    [dar-start] min(100%, var(--k-dar)) [dar-end]
    minmax(0, 1fr) [genis-end];
}

.k-metin > * { grid-column: dar; min-width: 0; }

.k-metin > figure,
.k-metin > .k-tablo-sarmal,
.k-metin > table,
.k-metin > pre,
.k-metin > .k-kutu--genis { grid-column: genis; }

/* Başlık ve kartlar da aynı merkezde */
.k-orta     { max-width: var(--k-dar); margin-inline: auto; }
.k-orta-tam { max-width: var(--k-genis); margin-inline: auto; }

/* ---------- 4. Butonlar ---------- */

.k-dugme {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--k-ink-soft);
  background-color: transparent;
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius-sm);
  padding: .45rem .8rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  line-height: 1;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background-color .15s;
}

.k-dugme:hover,
.k-dugme:focus-visible { color: var(--k-amber); border-color: var(--k-amber); }

.k-dugme--dolu {
  background-color: var(--k-btn-bg);
  border-color: var(--k-btn-bg);
  color: var(--k-btn-fg);
}
.k-dugme--dolu:hover,
.k-dugme--dolu:focus-visible {
  background-color: var(--k-btn-bg-h);
  border-color: var(--k-btn-bg-h);
  color: var(--k-btn-fg-h);
}

.k-dugme--buyuk { font-size: var(--tip-sm); padding: .85rem 1.5rem; letter-spacing: .03em; }
.k-dugme--ikon  { padding: .45rem; width: 2rem; }
.k-dugme--ikon svg { width: 1rem; height: 1rem; }
.k-dugme[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.k-dugme svg { width: .9rem; height: .9rem; flex: none; }

/* ---------- 5. İlerleme çubuğu ---------- */

.k-ilerleme {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
}

.k-ilerleme__dolu { height: 100%; width: 0; background: var(--k-amber); transition: width .12s linear; }

/* ---------- 6. Üst çubuk ---------- */

.k-ust {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--k-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .k-ust {
    background: color-mix(in srgb, var(--k-bg) 86%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}

.k-ust[data-kaydi="evet"] { border-bottom-color: var(--k-rule); }

.k-ust__ic {
  max-width: calc(var(--k-genis) + var(--k-kenar) * 2);
  margin-inline: auto;
  padding: var(--sp-3) var(--k-kenar);
  min-height: var(--k-ust-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--k-sans);
}

.k-ust__marka {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--tip-sm);
  color: var(--k-ink);
  white-space: nowrap;
  flex: none;
}

.k-ust__piyon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--k-amber); }

.k-ust__sag { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); flex: none; }

/* Dar ekranda çubuk altı düğme taşıyor. Marka yazısı gidiyor, piyon kalıyor —
   kaybedilen en az bilgi o. Bölüm okları kalıyor, çünkü en sık kullanılan
   hareket bölüm değiştirmek. */
@media (max-width: 32rem) {
  .k-ust__marka span { display: none; }
  .k-ust__ic { gap: var(--sp-2); }
}

/*
  İki eksenli gezinme.
  Dikey oklar  ˄ ˅ : bölümün içindeki başlıklar arası
  Yatay oklar  ‹ ›  : bölümler arası
  İki eksen iki farklı ölçek demek; okuyucu hangisinde olduğunu okla anlıyor.
*/
.k-pusula { display: flex; align-items: center; gap: 2px; }
.k-pusula[hidden] { display: none; }
.k-pusula + .k-pusula { margin-left: var(--sp-2); }

.k-pusula .k-dugme:first-child:not(:last-child) { border-radius: var(--k-radius-sm) 0 0 var(--k-radius-sm); }
.k-pusula .k-dugme:last-child:not(:first-child)  { border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0; }

/* ---------- 7. Kitap haritası ---------- */
/*
  İçindekiler artık metnin yanında değil, üst çubukta.
  <details> kullanıyor — JavaScript olmadan da açılıp kapanıyor.
  Açıldığında tüm bölümleri gösteriyor, okuduğun bölüm ise içindeki
  başlıklarla birlikte açılmış halde geliyor.
*/
.k-harita { position: relative; flex: 1 1 auto; min-width: 0; }

.k-harita > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: .45rem .7rem;
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius-sm);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--k-ink-soft);
  transition: color .15s, border-color .15s, background-color .15s;
}

.k-harita > summary::-webkit-details-marker { display: none; }
.k-harita > summary:hover { color: var(--k-amber); border-color: var(--k-amber); }
.k-harita[open] > summary { color: var(--k-ink); border-color: var(--k-ink-faint); background: var(--k-bg-alt); }

.k-harita__ikon { flex: none; width: 1rem; height: 1rem; }

.k-harita__ne {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.k-harita__ok {
  flex: none;
  width: .4rem; height: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
  margin-left: auto;
}
.k-harita[open] .k-harita__ok { transform: rotate(-135deg) translateY(-1px); }

.k-harita__panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + var(--sp-2));
  left: 0;
  width: min(28rem, calc(100vw - var(--sp-4) * 2));
  max-height: min(30rem, calc(100dvh - var(--k-ust-h) - var(--sp-6)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--k-bg);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  box-shadow: 0 20px 50px -18px var(--k-golge);
  padding: var(--sp-2) 0;
  scrollbar-width: thin;
}

/*
  Dar ekranda panel, açan düğmeye değil ekrana göre konumlanıyor.
  Düğme başlığın ortasında durduğu için "right: 0" verilirse panelin sol
  yarısı ekran dışına taşıyor — mobilde tam olarak bu oluyordu.
*/
@media (max-width: 44rem) {
  .k-harita__panel {
    position: fixed;
    top: var(--k-ust-h);
    left: var(--sp-3);
    right: var(--sp-3);
    width: auto;
    max-height: calc(100dvh - var(--k-ust-h) - var(--sp-5));
  }
}

.k-harita__baslik {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
}

.k-harita__liste { list-style: none; margin: 0; padding: 0; }

.k-harita__bolum > a,
.k-harita__bolum > span {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  font-size: var(--tip-md);
  line-height: 1.4;
  border-left: 2px solid transparent;
}

.k-harita__bolum > a:hover { background: var(--k-bg-alt); }
.k-harita__bolum > span { opacity: .5; }

.k-harita__no {
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
}

.k-harita__ad { font-weight: 600; }
.k-harita__sure { font-size: var(--tip-xs); color: var(--k-ink-faint); white-space: nowrap; }

.k-harita__bolum--aktif > a {
  border-left-color: var(--k-amber);
  background: var(--k-amber-lit);
}
.k-harita__bolum--aktif .k-harita__no,
.k-harita__bolum--aktif .k-harita__ad { color: var(--k-amber); }

/* Okunan bölümün kendi başlıkları */
.k-harita__ic {
  list-style: none;
  margin: 0;
  padding: var(--sp-1) 0 var(--sp-3);
  border-left: 2px solid var(--k-amber-lit);
  margin-left: var(--sp-4);
}

.k-harita__ic a {
  display: block;
  padding: .3rem var(--sp-4) .3rem var(--sp-4);
  font-size: var(--tip-sm);
  line-height: 1.45;
  color: var(--k-ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
}

.k-harita__ic a:hover { color: var(--k-amber); background: var(--k-bg-alt); }
.k-harita__ic a.aktif { color: var(--k-amber); font-weight: 600; border-left-color: var(--k-amber); }

/* Hugo'nun .TableOfContents çıktısı: nav > ul > li > a, iç içe ul'larla */
.k-harita__ic ul { list-style: none; margin: 0; padding: 0; }
.k-harita__ic ul ul { padding-left: var(--sp-4); }
.k-harita__ic ul ul a { font-size: var(--tip-xs); color: var(--k-ink-faint); }
.k-harita__ic ul ul a:hover { color: var(--k-amber); }

@media (max-width: 44rem) {
  .k-harita__ne { display: none; }
  .k-harita__ok { margin-left: 0; }
  .k-harita { flex: none; }
}

/* Dar ekranda bölüm numarası kendi satırına insin, başlık sıkışmasın */
@media (max-width: 34rem) {
  .k-harita__bolum > a,
  .k-harita__bolum > span {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    padding-inline: var(--sp-3);
  }
  .k-harita__no { grid-column: 1 / -1; }
  .k-harita__ic { margin-left: var(--sp-3); }
  .k-harita__ic a { padding-inline: var(--sp-3); }
}

/* ---------- 8. Kitap kapağı ---------- */

.k-kapak { padding: var(--sp-8) 0 var(--sp-6); }

.k-kapak__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  text-align: center;
}

@media (min-width: 52rem) {
  .k-kapak__ic { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--sp-8); text-align: left; }
}

.k-kapak__resim { max-width: 14rem; margin-inline: auto; width: 100%; }
@media (min-width: 52rem) { .k-kapak__resim { max-width: none; } }

.k-kapak__resim img {
  width: 100%;
  border-radius: var(--k-radius);
  box-shadow: 0 2px 8px var(--k-golge), 0 30px 55px -25px var(--k-golge);
}

.k-rozet {
  display: inline-block;
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-amber);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: var(--sp-5);
}

.k-kapak__ust {
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-ink-soft);
  margin: 0 0 var(--sp-2);
}

.k-kapak__baslik {
  font-family: var(--k-sans);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
.k-kapak__baslik em { font-style: normal; color: var(--k-amber); }

.k-kapak__giris {
  font-size: var(--tip-xl);
  line-height: 1.65;
  color: var(--k-ink-soft);
  margin: 0 0 var(--sp-6);
  max-width: 32rem;
  text-wrap: pretty;
}
@media (max-width: 52rem) { .k-kapak__giris { margin-inline: auto; } }

.k-kapak__eylem { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
@media (min-width: 52rem) { .k-kapak__eylem { justify-content: flex-start; } }
@media (max-width: 30rem) { .k-kapak__eylem .k-dugme { flex: 1 1 100%; } }

.k-kunye {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  margin: var(--sp-6) 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
@media (min-width: 40rem) { .k-kunye { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.k-kunye li {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  font-family: var(--k-sans);
  border-left: 1px solid var(--k-rule);
  border-top: 1px solid var(--k-rule);
}
.k-kunye li:nth-child(odd) { border-left: 0; }
.k-kunye li:nth-child(-n+2) { border-top: 0; }
@media (min-width: 40rem) {
  .k-kunye li { border-top: 0; border-left: 1px solid var(--k-rule); }
  .k-kunye li:first-child { border-left: 0; }
}

.k-kunye b {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--k-ink);
  font-variant-numeric: tabular-nums;
}

.k-kunye span {
  display: block;
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  margin-top: var(--sp-1);
}

/* ---------- 9. İçindekiler listesi (kitap ana sayfası) ---------- */

.k-bolum-etiketi {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  margin: var(--sp-7) 0 var(--sp-4);
}

.k-bolum-listesi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--k-rule); }
.k-satir { border-bottom: 1px solid var(--k-rule); }

.k-satir__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-4);
  align-items: start;
  padding: var(--sp-4) var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: background-color .18s;
}
@media (min-width: 40rem) { .k-satir__ic { grid-template-columns: 4.5rem minmax(0, 1fr) auto; } }

a.k-satir__ic:hover, a.k-satir__ic:focus-visible { background-color: var(--k-bg-alt); }

.k-satir__no {
  display: block;
  grid-column: 1 / -1;
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
}
@media (min-width: 40rem) { .k-satir__no { grid-column: 1; padding-top: .3rem; } }
a.k-satir__ic:hover .k-satir__no { color: var(--k-amber); }

.k-satir__govde { display: block; min-width: 0; }

.k-satir__baslik {
  display: block;
  font-family: var(--k-sans);
  font-size: var(--tip-lg);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
  margin-bottom: var(--sp-1);
}

.k-satir__ozet { display: block; font-size: var(--tip-md); line-height: 1.6; color: var(--k-ink-soft); }

.k-satir__meta {
  display: block;
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--k-ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-top: .3rem;
}

.k-satir--kilitli .k-satir__ic { opacity: .55; }
.k-satir--kilitli .k-satir__meta { color: var(--k-amber); }

.k-satir--okundu .k-satir__no::after {
  content: "";
  display: inline-block;
  width: 1.5rem; height: 2px;
  background: var(--k-amber);
  margin-left: var(--sp-2);
  vertical-align: middle;
}
@media (min-width: 40rem) { .k-satir--okundu .k-satir__no::after { display: block; margin: var(--sp-2) 0 0; } }

/* ---------- 10. Bölüm başlığı ---------- */

.k-bolum-basi { padding: var(--sp-8) 0 var(--sp-5); }

.k-bolum-basi__no {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--k-amber);
  margin: 0 0 var(--sp-3);
}

.k-bolum-basi__baslik {
  font-family: var(--k-sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

.k-bolum-basi__ozet {
  font-size: var(--tip-xl);
  line-height: 1.6;
  color: var(--k-ink-soft);
  margin: 0 0 var(--sp-5);
  text-wrap: pretty;
}

.k-bolum-basi__meta {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--k-ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--k-rule);
}

.k-kapak-gorsel {
  margin: var(--sp-6) auto;
  max-width: var(--k-genis);
  border-radius: var(--k-radius);
  overflow: hidden;
  background: var(--k-bg-alt);
}

/* ---------- 11. Okuma metni ---------- */

.k-metin { padding-bottom: var(--sp-6); }

.k-metin p { margin: 0 0 1.35em; text-wrap: pretty; }

.k-metin h2 {
  font-family: var(--k-sans);
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: var(--sp-8) 0 var(--sp-4);
  scroll-margin-top: calc(var(--k-ust-h) + var(--sp-4));
  text-wrap: balance;
}

.k-metin h2::before {
  content: "";
  display: block;
  width: 2rem; height: 2px;
  background: var(--k-amber);
  margin-bottom: var(--sp-4);
}

.k-metin h3 {
  font-family: var(--k-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  margin: var(--sp-6) 0 var(--sp-3);
  scroll-margin-top: calc(var(--k-ust-h) + var(--sp-4));
}

.k-metin h4 {
  font-family: var(--k-sans);
  font-size: var(--tip-md);
  font-weight: 700;
  margin: var(--sp-5) 0 var(--sp-2);
  color: var(--k-ink-soft);
  scroll-margin-top: calc(var(--k-ust-h) + var(--sp-4));
}

.k-capa {
  float: left;
  margin-left: -1.1em;
  width: 1.1em;
  color: var(--k-amber);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
  font-weight: 400;
}
.k-metin h2:hover .k-capa,
.k-metin h3:hover .k-capa,
.k-metin h4:hover .k-capa,
.k-capa:focus-visible { opacity: 1; }
@media (max-width: 60rem) { .k-capa { display: none; } }

.k-metin a:not(.k-dugme):not(.k-capa) {
  color: var(--k-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--k-amber), var(--k-amber));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(100% - .08em);
  padding-bottom: .06em;
  transition: background-size .2s, color .2s;
}

.k-metin a:not(.k-dugme):not(.k-capa):hover,
.k-metin a:not(.k-dugme):not(.k-capa):focus-visible { color: var(--k-amber); background-size: 100% 2px; }

.k-metin strong { font-weight: 700; color: var(--k-ink); }
.k-metin em { font-style: italic; }

.k-metin ul, .k-metin ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.k-metin li { margin-bottom: .45em; }
.k-metin li::marker { color: var(--k-amber); }

.k-metin hr { border: 0; height: 1px; background: var(--k-rule); margin: var(--sp-7) auto; width: 6rem; }

.k-metin blockquote {
  margin: var(--sp-6) 0;
  padding: 0 0 0 var(--sp-5);
  border-left: 2px solid var(--k-amber);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--k-ink-soft);
  font-style: italic;
}
.k-metin blockquote p:last-child { margin-bottom: 0; }

/* ---------- 12. Tablo, kod, görsel ---------- */

.k-tablo-sarmal {
  margin: var(--sp-6) 0;
  overflow-x: auto;
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  -webkit-overflow-scrolling: touch;
}

.k-metin table {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
  margin: 0;
}

.k-metin > table {
  display: block;
  overflow-x: auto;
  margin: var(--sp-6) 0;
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
}

.k-metin th, .k-metin td {
  padding: var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--k-rule-soft);
  vertical-align: top;
}

.k-metin thead th {
  background: var(--k-bg-alt);
  font-weight: 700;
  font-size: var(--tip-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--k-ink-soft);
  border-bottom: 1px solid var(--k-rule);
  white-space: nowrap;
}

.k-metin tbody tr:last-child td { border-bottom: 0; }
.k-metin td[align="right"], .k-metin th[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }

.k-metin pre {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--k-bg-alt);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  overflow-x: auto;
  font-family: var(--k-mono);
  font-size: var(--tip-sm);
  line-height: 1.65;
  color: var(--k-ink);
}

.k-metin :not(pre) > code {
  font-family: var(--k-mono);
  font-size: .85em;
  background: var(--k-bg-alt);
  border: 1px solid var(--k-rule-soft);
  border-radius: 3px;
  padding: .08em .35em;
  word-break: break-word;
}

.k-figur { margin: var(--sp-7) 0; }
.k-figur img { width: 100%; border-radius: var(--k-radius); background: var(--k-bg-alt); }

.k-figur figcaption {
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
  line-height: 1.55;
  color: var(--k-ink-faint);
  margin-top: var(--sp-3);
  text-align: center;
  text-wrap: pretty;
}

/* ---------- 13. Kutular ---------- */

.k-kutu {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: var(--k-surface);
  border: 1px solid var(--k-rule);
  border-left: 3px solid var(--k-amber);
  border-radius: var(--k-radius);
  font-size: var(--tip-md);
}
.k-kutu > :last-child { margin-bottom: 0; }

.k-kutu__etiket {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-amber);
  margin: 0 0 var(--sp-3);
}

/* ---------- 14. Kaldığın yerden devam ---------- */

.k-devam {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  transform: translate(-50%, 200%);
  z-index: 95;
  background: var(--k-btn-bg);
  color: var(--k-btn-fg);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
  box-shadow: 0 14px 36px -12px var(--k-golge);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1);
  max-width: calc(100vw - var(--sp-6));
}

.k-devam[data-acik="evet"] { transform: translate(-50%, 0); }
.k-devam a { color: var(--k-btn-fg); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

.k-devam__kapat {
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
}
.k-devam__kapat:hover { opacity: 1; }

/* ---------- 15. Not alma ---------- */

.k-not-arac {
  position: absolute;
  z-index: 100;
  display: none;
  background: var(--k-btn-bg);
  border-radius: var(--k-radius-sm);
  padding: var(--sp-1);
  gap: 2px;
  box-shadow: 0 12px 28px -10px var(--k-golge);
}
.k-not-arac[data-acik="evet"] { display: flex; }

.k-not-arac button {
  background: transparent;
  border: 0;
  color: var(--k-btn-fg);
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.k-not-arac button:hover { background: rgba(160, 106, 16, .4); }

.k-metin mark.k-vurgu {
  background: var(--k-amber-lit);
  color: inherit;
  border-bottom: 1px solid var(--k-amber-mid);
  padding: .05em 0;
}

.k-notlar {
  margin: var(--sp-7) auto 0;
  max-width: var(--k-dar);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  padding: var(--sp-5);
}
.k-notlar[hidden] { display: none; }

.k-notlar h2 {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  margin: 0 0 var(--sp-4);
}

.k-notlar ul { list-style: none; margin: 0; padding: 0; }
.k-notlar li {
  font-size: var(--tip-md);
  line-height: 1.6;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--k-rule-soft);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.k-notlar li:first-child { border-top: 0; }

.k-notlar li button {
  flex: none;
  background: transparent;
  border: 0;
  color: var(--k-ink-faint);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px var(--sp-1);
}
.k-notlar li button:hover { color: var(--k-amber); }

/* ---------- 16. Bölüm sonu ---------- */

.k-sonraki {
  margin: var(--sp-7) auto 0;
  max-width: var(--k-genis);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, background-color .18s;
}

a.k-sonraki:hover, a.k-sonraki:focus-visible { border-color: var(--k-amber); background-color: var(--k-bg-alt); }

.k-sonraki__govde { flex: 1 1 auto; min-width: 0; }

.k-sonraki__yon {
  display: block;
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-amber);
  margin-bottom: var(--sp-2);
}

.k-sonraki__baslik {
  display: block;
  font-family: var(--k-sans);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: var(--sp-1);
}

.k-sonraki__ozet { display: block; font-size: var(--tip-md); line-height: 1.55; color: var(--k-ink-soft); }

.k-sonraki__ok {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  background: var(--k-btn-bg);
  color: var(--k-btn-fg);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  transition: background-color .18s;
}
a.k-sonraki:hover .k-sonraki__ok { background: var(--k-btn-bg-h); color: var(--k-btn-fg-h); }

.k-sonraki--kilitli { opacity: .8; }
.k-sonraki--kilitli .k-sonraki__ok { background: var(--k-rule); color: var(--k-ink-faint); }

@media (max-width: 30rem) { .k-sonraki__ozet { display: none; } }

.k-gezinme {
  margin: var(--sp-3) auto 0;
  max-width: var(--k-genis);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--k-rule);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
  overflow: hidden;
}
@media (min-width: 34rem) { .k-gezinme { grid-template-columns: 1fr 1fr; } }

.k-gezinme__oge {
  background: var(--k-bg);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: inherit;
  transition: background-color .18s;
  display: block;
}
a.k-gezinme__oge:hover { background-color: var(--k-bg-alt); }

.k-gezinme__yon {
  display: block;
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  margin-bottom: var(--sp-1);
}

.k-gezinme__baslik { display: block; font-family: var(--k-sans); font-size: var(--tip-md); font-weight: 600; line-height: 1.35; }
@media (min-width: 34rem) { .k-gezinme__oge--ileri { text-align: right; } }
.k-gezinme__oge--bos { opacity: .5; }
a.k-gezinme__oge:hover .k-gezinme__baslik { color: var(--k-amber); }

/* ---------- 17. Formlar ---------- */

.k-abone,
.k-yorum-kutu {
  margin: var(--sp-7) auto;
  max-width: var(--k-genis);
  padding: var(--sp-6);
  background: var(--k-bg-alt);
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius);
}
@media (max-width: 34rem) { .k-abone, .k-yorum-kutu { padding: var(--sp-5) var(--sp-4); } }

.k-abone { text-align: center; }

.k-abone h2, .k-yorum-kutu h2 {
  font-family: var(--k-sans);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-3);
  color: var(--k-ink);
}

.k-abone p, .k-yorum-kutu > p {
  color: var(--k-ink-soft);
  font-size: var(--tip-md);
  line-height: 1.65;
  margin: 0 0 var(--sp-5);
}
.k-abone p { max-width: 30rem; margin-inline: auto; }

.k-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.k-abone .k-form { max-width: 26rem; margin-inline: auto; }
.k-yorum-kutu .k-form { flex-direction: column; }

.k-form input[type="email"],
.k-form input[type="text"],
.k-form textarea {
  flex: 1 1 11rem;
  font-family: var(--k-sans);
  font-size: var(--tip-md);
  padding: .72rem .85rem;
  border: 1px solid var(--k-rule);
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  color: var(--k-ink);
  min-width: 0;
  width: 100%;
}

.k-form ::placeholder { color: var(--k-ink-faint); opacity: 1; }
.k-form input:focus, .k-form textarea:focus { outline: 2px solid var(--k-amber); outline-offset: -1px; border-color: transparent; }

.k-form textarea { min-height: 7.5rem; resize: vertical; font-family: var(--k-serif); font-size: var(--tip-lg); line-height: 1.6; }

.k-form button {
  flex: none;
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
  font-weight: 700;
  padding: .78rem 1.4rem;
  border: 1px solid var(--k-btn-bg);
  border-radius: var(--k-radius-sm);
  background-color: var(--k-btn-bg);
  color: var(--k-btn-fg);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.k-form button:hover:not(:disabled) { background-color: var(--k-btn-bg-h); border-color: var(--k-btn-bg-h); color: var(--k-btn-fg-h); }
.k-form button:disabled { opacity: .6; cursor: default; }
.k-yorum-kutu .k-form button { align-self: flex-start; }

@media (max-width: 30rem) {
  .k-abone .k-form input, .k-abone .k-form button { flex: 1 1 100%; }
  .k-yorum-kutu .k-form button { align-self: stretch; }
}

.k-ikili { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.k-ikili > * { flex: 1 1 10rem; min-width: 0; }

.k-form__not { font-size: var(--tip-xs) !important; color: var(--k-ink-faint) !important; margin: var(--sp-4) auto 0 !important; }

.k-durum { font-family: var(--k-sans); font-size: var(--tip-md); line-height: 1.5; margin-top: var(--sp-4); min-height: 1.2em; }
.k-durum[data-tip="basari"] { color: var(--k-amber); font-weight: 700; }
.k-durum[data-tip="hata"] { color: #b3402c; }
body.dark .k-durum[data-tip="hata"] { color: #e8836c; }

.k-puan { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin-bottom: var(--sp-3); }
.k-puan input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.k-puan label { cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--k-rule); transition: color .12s; }
.k-puan input:checked ~ label,
.k-puan label:hover,
.k-puan label:hover ~ label { color: var(--k-amber); }
.k-puan input:focus-visible + label { outline: 2px solid var(--k-amber); outline-offset: 2px; }

.k-puan__etiket {
  font-family: var(--k-sans);
  font-size: var(--tip-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  margin-bottom: var(--sp-2);
  display: block;
}

/* ---------- 18. Alt bilgi ---------- */

.k-alt {
  border-top: 1px solid var(--k-rule);
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8);
  font-family: var(--k-sans);
  font-size: var(--tip-sm);
  line-height: 1.6;
  color: var(--k-ink-faint);
  text-align: center;
}

.k-alt a { color: var(--k-ink-soft); text-decoration: none; border-bottom: 1px solid var(--k-rule); }
.k-alt a:hover { color: var(--k-amber); border-bottom-color: currentColor; }
.k-alt__baglar { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: center; margin-bottom: var(--sp-4); }
.k-alt__yazar { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); color: var(--k-ink-soft); }
.k-alt__yazar img { width: 2.25rem; height: 2.25rem; border-radius: 999px; object-fit: cover; }

/* ---------- 19. Hareket ---------- */

.k-belir { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .3, 1); }
.k-belir[data-gorundu="evet"] { opacity: 1; transform: none; }
.kitap-sayfa.js-yok .k-belir { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kitap-sayfa *, .kitap-sayfa *::before, .kitap-sayfa *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .k-belir { opacity: 1; transform: none; }
}

/* ---------- 20. Yazdırma ---------- */

@media print {
  .k-ilerleme, .k-ust, .k-devam, .k-abone,
  .k-yorum-kutu, .k-gezinme, .k-sonraki, .k-not-arac, .k-alt { display: none !important; }

  .kitap-sayfa { background: #fff; color: #000; font-size: 11pt; }
  .k-okuma { max-width: none; padding: 0; }
  .k-metin { display: block; }
  .k-metin a:not(.k-dugme) { background: none; }
  .k-metin h2, .k-metin h3 { break-after: avoid; }
  .k-metin table, .k-figur, .k-tablo-sarmal { break-inside: avoid; }
}