/* ===================================================================
   KIRMIZI MÜREKKEP — Hasan Saraç teması
   Basılı sayfa dünyası. Kırmızı (#9E0000) el yazmalarındaki
   rubrikasyon gibi davranır: süslemez, yapı gösterir.
   Kâğıt zemin zorunludur — bu kırmızı açık zeminde 7.5:1 kontrast
   verir, koyu zeminde 2.2:1'e düşüp okunmaz olur.
   =================================================================== */
:root {
  --paper: #F4F0E6;
  --paper-2: #EDE7D9;
  --paper-3: #E5DDCB;
  --ink: #1A1613;
  --ink-2: #4A4238;
  --margin: #6F6659;
  --rubric: #9E0000;
  --rule: #D8D0BE;
  --rule-2: #BCB29B;
  --f-text: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --f-mono: "IBM Plex Mono", Menlo, monospace;
  --wrap: 1180px;
  --read: 64ch;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.15
}

p {
  margin: 0 0 1rem
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

:focus-visible {
  outline: 2px solid var(--rubric);
  outline-offset: 3px
}

::selection {
  background: var(--rubric);
  color: var(--paper)
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.5rem 0
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto
}

@media (max-width:600px) {
  .wrap {
    width: calc(100% - 1.5rem)
  }
}

.mono {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--margin)
}

.mono-red {
  color: var(--rubric)
}

/* ---------------- üst çubuk: running head ---------------- */
.head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule)
}

.head::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--rubric)
}

.head-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: .7rem
}

.head-name {
  display: grid;
  gap: .16rem;
  margin-right: auto;
  white-space: nowrap
}

.hn-name {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.05
}

.hn-name b {
  color: var(--rubric);
  font-weight: 500
}

.hn-motto {
  font-style: italic;
  font-size: .8125rem;
  color: var(--margin);
  line-height: 1.25
}

@media (max-width:600px) {
  .hn-motto {
    display: none
  }
}

/* ---------------- menü ---------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav>li {
  position: relative
}

.nav>li>a {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--margin);
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  display: block;
  transition: color .2s, border-color .2s;
}

.nav>li>a:hover {
  color: var(--rubric);
  border-bottom-color: var(--rubric)
}

.nav ul {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 70;
  display: none;
  min-width: 19rem;
  max-width: 24rem;
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  box-shadow: 0 12px 30px -14px rgba(26, 22, 19, .45);
}

.nav li:hover>ul,
.nav li:focus-within>ul {
  display: block
}

.nav ul a {
  display: block;
  padding: .42rem 1rem;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  transition: .18s;
}

.nav ul a:hover {
  color: var(--rubric);
  background: var(--paper-2);
  border-left-color: var(--rubric)
}

.lang {
  display: flex;
  gap: .5rem;
  align-items: center
}

.lang a {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  color: var(--margin);
  border: 1px solid var(--rule-2);
  padding: .2rem .45rem
}

.lang a:hover {
  color: var(--rubric);
  border-color: var(--rubric)
}

.navtoggle {
  display: none;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rubric)
}

@media (max-width:900px) {
  .navtoggle {
    display: block
  }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-2);
    padding: .5rem 1.25rem 1rem;
    display: none;
  }

  .head-in.open .nav {
    display: flex
  }

  .nav>li>a {
    padding-block: .6rem;
    border-bottom: 1px solid var(--rule)
  }

  .nav ul {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    min-width: 0;
    max-width: none;
    padding: .15rem 0 .5rem .9rem
  }
}

/* ---------------- kapak: frontispis + başlık sayfası ---------------- */
.title-page {
  border-bottom: 1px solid var(--rule)
}

.spread {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
  position: relative;
}

.spread::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 42%;
  border-left: 1px solid var(--rule)
}

@media (max-width:820px) {
  .spread {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-block: 2rem
  }

  .spread::before {
    display: none
  }
}

.frontis img {
  margin: 0  auto;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1) sepia(.12) contrast(1.06);
  border: 1px solid var(--rule-2)
}

@media (max-width:820px) {
  .frontis {
    max-width: 200px
  }
}

.title-block {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center
}

@media (max-width:820px) {
  .title-block {
    justify-items: start;
    text-align: left
  }
}

.title-block h1 {
  font-size: clamp(2.2rem, 6.5vw, 4.2rem);
  letter-spacing: .02em;
  line-height: 1
}

.title-rule {
  width: min(280px, 70%);
  border-top: 2px solid var(--rubric)
}

.epigraph {
  max-width: 38ch;
  display: grid;
  gap: .55rem;
}

.epigraph q {
  font-style: italic;
  quotes: "\201C" "\201D";
  color: var(--rubric);
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.45
}

/* ---------------- bölüm: kenar rayı + metin ---------------- */
.part {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem)
}

.part-in {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem)
}

@media (max-width:960px) {
  .part-in {
    grid-template-columns: 1fr;
    gap: 1rem
  }
}

.rail {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: .35rem;
  align-content: start
}

@media (max-width:960px) {
  .rail {
    position: static;
    display: flex;
    align-items: baseline;
    gap: .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--rule)
  }
}

.rail-label {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rubric)
}

.rail-note {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--margin);
  line-height: 1.5
}

.part-body {
  min-width: 0
}

.part-body>h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: .01em;
  margin-bottom: .85rem
}

/* ---------------- metin gövdesi (CMS'ten gelen HTML) ---------------- */
.prose {
  max-width: 66ch
}

.prose p {
  margin: 0 0 1rem
}

.prose em,
.prose i {
  font-style: italic
}

.prose strong,
.prose b {
  font-weight: 600
}

.prose a {
  color: var(--rubric);
  border-bottom: 1px solid rgba(158, 0, 0, .3)
}

.prose a:hover {
  border-bottom-color: var(--rubric)
}

.prose img {
  margin: 1.25rem 0;
  border: 1px solid var(--rule-2)
}

.prose h1,
.prose h2,
.prose h3 {
  margin: 1.75rem 0 .75rem;
  font-size: 1.4rem
}

.prose blockquote {
  margin: 1.25rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rubric);
  font-style: italic;
  color: var(--ink-2)
}

.prose ul,
.prose ol {
  margin: 0 0 1rem 1.25rem;
  padding: 0
}

.prose li {
  margin-bottom: .35rem
}

.prose hr {
  border-top: 1px solid var(--rule)
}

.spot {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 0 1.1rem
}

/* ---------------- detay: kitap sayfası düzeni ---------------- */
.detail-fig {
  float: right;
  width: min(210px, 40%);
  margin: .25rem 0 1.15rem 1.75rem
}

.detail-fig img {
  width: 100%;
  border: 1px solid var(--rule-2)
}

.detail-fig figcaption {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px solid var(--rule)
}

@media (max-width:640px) {
  .detail-fig {
    float: none;
    width: min(170px, 52%);
    margin: 0 0 1.15rem
  }
}

.detail-meta {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.35rem
}

.detail-epi {
  font-style: italic;
  color: var(--rubric);
  line-height: 1.55;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rubric);
  margin-bottom: 1.3rem
}

/* ---------------- dizin / katalog satırları ---------------- */
.list {
  border-top: 1px solid var(--rule-2)
}

.row-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: clamp(.8rem, 2vw, 1.35rem);
  align-items: center;
  padding-block: .75rem;
  border-bottom: 1px solid var(--rule);
  transition: background .2s;
}

.row-item:hover {
  background: var(--paper-2)
}

.row-item img {
  width: 64px;
  height: 86px;
  object-fit: cover;
  border: 1px solid var(--rule-2)
}

.row-item .nm {
  font-size: 1.1rem;
  line-height: 1.25
}

.row-item:hover .nm {
  color: var(--rubric)
}

.row-item .sp {
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.4;
  margin: 0
}

.row-item .kt {
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--margin);
  white-space: nowrap;
  text-align: right
}

@media (max-width:700px) {
  .row-item {
    grid-template-columns: 52px minmax(0, 1fr);
    row-gap: .2rem
  }

  .row-item img {
    width: 52px;
    height: 70px
  }

  .row-item .kt {
    grid-column: 2/-1;
    text-align: left
  }
}

/* portre dizini: yuvarlak küçük görsel */
.row-item.portrait img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.05)
}

.row-item.portrait {
  grid-template-columns: 52px minmax(0, 1fr) auto
}

/* ---------------- eserler rayı (her sayfanın altında) ---------------- */
.shelf {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem)
}

.shelf-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem
}

.shelf-head h3 {
  font-size: 1.35rem
}

.shelf-rail {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin
}

.shelf-rail a {
  flex: none;
  width: 96px
}

.shelf-rail img {
  width: 96px;
  height: 144px;
  object-fit: cover;
  border: 1px solid var(--rule-2);
  transition: .2s
}

.shelf-rail a:hover img {
  border-color: var(--rubric);
  transform: translateY(-3px)
}

/* ---------------- kolofon ---------------- */
.colophon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2)
}

.colophon a {
  background: var(--paper);
  padding: 1.05rem 1.1rem;
  display: grid;
  gap: .3rem
}

.colophon a:hover {
  background: var(--paper-2)
}

.colophon a:hover .v {
  color: var(--rubric)
}

.colophon .v {
  font-size: 1.05rem;
  word-break: break-word
}

footer {
  padding-block: 1.75rem 2.5rem
}

.fin {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap
}

/* ---------------- sayfalama ---------------- */
.pager {
  display: flex;
  gap: .35rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  flex-wrap: wrap
}

.pager a,
.pager span {
  display: block;
  padding: .32rem .7rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  border: 1px solid var(--rule-2);
  color: var(--margin);
  font-variant-numeric: tabular-nums;
}

.pager a:hover {
  color: var(--rubric);
  border-color: var(--rubric)
}

.pager .on a {
  background: var(--rubric);
  border-color: var(--rubric);
  color: var(--paper)
}

.notice {
  padding: 1.5rem 0;
  color: var(--margin);
  font-family: var(--f-mono);
  font-size: .8125rem
}

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

/* ---------------- alfabetik dizin başlıkları ---------------- */
.index-letter {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-top: 1.5rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--rubric);
}

.index-letter:first-child {
  margin-top: 0
}

.index-letter .L {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rubric);
  line-height: 1
}

.index-group+.index-letter {
  margin-top: 1.75rem
}

/* ---------------- katalog satırı: yıl sütunu ---------------- */
.row-item.book {
  grid-template-columns: 3.5rem 60px minmax(0, 1fr) auto
}

.row-item .yr {
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--rubric);
  font-variant-numeric: tabular-nums
}

@media (max-width:700px) {
  .row-item.book {
    grid-template-columns: 52px minmax(0, 1fr);
    row-gap: .2rem
  }

  .row-item .yr {
    grid-column: 1/-1;
    order: -1
  }
}

/* ---------------- bölüm bağlantısı ---------------- */
.more {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rubric);
  display: inline-block;
  margin-top: 1rem
}

.more:hover {
  border-bottom: 1px solid var(--rubric)
}

/* ---------------- yaşam öyküsü künyesi ---------------- */
.facts {
  display: grid;
  border-top: 1px solid var(--rule-2);
  margin-top: .25rem
}

.facts .f {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: .85rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--rule)
}

.facts dt {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--rubric);
  padding-top: .15rem;
  margin: 0
}

.facts dd {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-2);
  line-height: 1.5
}

.life {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 16rem);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: start
}

@media (max-width:760px) {
  .life {
    grid-template-columns: 1fr
  }
}
/* ---------------- CMS metnindeki editör artıkları ---------------- */
/* WYSIWYG'den kalan satır içi punto/hizalama zorlamaları temaya baskın çıkmasın */
.prose [style*="font-size"]{font-size:inherit !important}
.prose [style*="text-align"]{text-align:inherit !important}
.prose [style*="font-family"]{font-family:inherit !important}
/* metinde ayraç olarak kullanılmış "..." satırları */
.prose hr.ara{
  width:4.5rem; margin:1.75rem 0; border:0; border-top:1px solid var(--rule-2);
}
.prose p:last-child{margin-bottom:0}

/* ---------------- okuma paneli (kitap sayfası) ---------------- */
.page{position:fixed; inset:0; z-index:100; display:none; background:rgba(26,22,19,.42)}
.page.acik{display:block}
.page-sheet{
  position:absolute; inset:0; left:50%; transform:translateX(-50%);
  width:min(860px,100%); background:var(--paper); overflow-y:auto;
  box-shadow:0 0 60px rgba(26,22,19,.4);
  animation:sayfa-gir .34s cubic-bezier(.2,.8,.25,1);
}
@keyframes sayfa-gir{from{transform:translateX(-50%) translateY(1.5%); opacity:0}
                     to{transform:translateX(-50%); opacity:1}}
.running{
  position:sticky; top:0; z-index:3; background:var(--paper);
  display:flex; align-items:baseline; gap:1rem;
  padding:.95rem clamp(1.25rem,4vw,3rem) .7rem;
  border-bottom:1px solid var(--rubric);
}
.running .r-sec{margin-right:auto}
.page-close{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rubric); white-space:nowrap;
}
.page-close:hover{border-bottom:1px solid var(--rubric)}
.page-in{padding:clamp(1.5rem,3.5vw,2.5rem) clamp(1.25rem,4vw,3rem) 4rem}
.page-in .part-body > h2{font-size:clamp(1.8rem,4.4vw,2.8rem); margin-bottom:.7rem}
.page-yukleniyor{
  padding:3rem clamp(1.25rem,4vw,3rem); font-family:var(--f-mono);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--margin);
}
body.kilitli{overflow:hidden}
/* satırlar tıklanabilir görünsün */
.row-item, .shelf-rail a{cursor:pointer}

/* ---------------- bölüm bağlantıları ---------------- */
/* yapışkan başlık bölüm başlığını örtmesin */
section[id]{scroll-margin-top:5.5rem}
/* menüde bulunulan bölüm belirsin */
.nav > li > a.etkin{color:var(--rubric); border-bottom-color:var(--rubric)}