/* ===== KİTAP KURGUSU =====
   Her bölüm tam ekran bir sayfadır. Aşağı kaydırmak, sayfanın sonuna
   gelindiğinde bir sonraki bölüme çevirir. Uzun bölümler kendi içinde kayar.
   JavaScript yoksa veya hareket kısıtlıysa sayfa düz bir belge gibi okunur. */

html.kitap, html.kitap body{height:100%}
html.kitap body{
  overflow:hidden;
  display:flex;flex-direction:column;
  height:100svh;
}

html.kitap nav.bar{position:static;flex:none}
html.kitap .guncel{flex:none}
html.kitap .progress{z-index:40}

/* sayfa sahnesi */
html.kitap .sahne{
  flex:1;min-height:0;
  position:relative;
  perspective:1800px;
}
html.kitap .sayfa{
  position:absolute;inset:0;
  display:none;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding-block:clamp(26px,5vh,54px);
  border-top:0;
}
/* Sayfa çevirme kapakla aynı yönde çalışır: ileri giderken o anki sayfa
   sol menteşeden sola doğru çevrilip gider, yeni sayfa altında düz durur.
   Geri dönerken çevrilen sayfa aynı yoldan geri kapanır, eski sayfa altta
   bekler. Yani hareket eden her zaman "çevrilen yaprak"tır. */
html.kitap .sayfa.aktif{
  display:block;
  z-index:2;
}
html.kitap .sayfa.altta{
  display:block;
  z-index:1;
}
html.kitap .sayfa.cevrilen{
  display:block;
  z-index:3;
  transform-origin:left center;
  backface-visibility:hidden;
  overflow:hidden;
  pointer-events:none;
  /* gerçek bir yaprak gibi donuk olsun, altındaki sayfa içinden görünmesin */
  background:var(--paper);
  box-shadow:18px 0 44px -22px rgba(0,0,0,.65);
  animation:sayfaCevir .62s cubic-bezier(.5,0,.2,1) both;
}
html.kitap .sayfa.cevrilen.geri{
  animation-name:sayfaCevirGeri;
}
@keyframes sayfaCevir{
  0%{opacity:1;transform:rotateY(0)}
  62%{opacity:1}
  100%{opacity:0;transform:rotateY(-105deg)}
}
@keyframes sayfaCevirGeri{
  0%{opacity:0;transform:rotateY(-105deg)}
  38%{opacity:1}
  100%{opacity:1;transform:rotateY(0)}
}

/* kitap kurgusunda gereksiz öğeler */
html.kitap .ticker{display:none}
html.kitap footer{display:none}

/* çalışmalar şeridi kaydırmaya bağlı değil */
html.kitap .pin{height:auto;border-top:0;padding:0}
html.kitap .pin-stage{position:static;height:auto;overflow:visible;padding-top:0;gap:24px}
html.kitap .pin-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
html.kitap .pin-rail::-webkit-scrollbar{display:none}
html.kitap .pin-track{transform:none!important;padding-block:4px}
html.kitap .card{scroll-snap-align:center;min-height:0}
html.kitap .pin-meter{display:none}
html.kitap .pin-head{padding-inline:20px;max-width:1020px;margin:0 auto;width:100%}

/* alt denetim çubuğu */
.kitap-kontrol[hidden]{display:none}
html.kitap .kitap-kontrol{
  flex:none;
  display:flex;align-items:center;gap:14px;
  border-top:1px solid var(--line);
  padding:10px 20px;
  max-width:1020px;margin:0 auto;width:100%;
}
.kitap-kontrol button{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--ink);
  padding:8px 13px;border-radius:2px;cursor:pointer;
  transition:border-color .25s,color .25s;
}
.kitap-kontrol button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.kitap-kontrol button:disabled{opacity:.3;cursor:default}
.kitap-no{
  flex:1;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.kitap-alt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--muted);white-space:nowrap;
}
@media (max-width:620px){
  .kitap-alt{display:none}
  html.kitap .kitap-kontrol{gap:10px;padding:9px 16px}
}

/* sayfa sonu ipucu */
.sayfa-son{
  margin-top:34px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.sayfa-son i{display:block;flex:1;height:1px;background:var(--line)}
html:not(.kitap) .sayfa-son{display:none}

@media (prefers-reduced-motion:reduce){
  html.kitap .sayfa.aktif,
  html.kitap .sayfa.cevrilen{animation:none}
}