/* ==========================================================================
   zaman.css — Zaman Çizelgesi
   Karanlık bir oda. Arkada bölümün fotoğrafı, bulanık ve loş, odanın tek
   ışığı gibi yanar. Sağ üstte bölümün yılı dev boyda dizilir; kapak
   fotoğrafı bu yılın üstüne biner. Solda sıcak cam bir panel bölümü
   anlatır; en altta beş bölümün dizini.

   Sahnenin tek gösterişli anı bölüm değişimi: arka plan dizinde seçilen
   bölümden daire hâlinde açılır, yılın yalnızca değişen rakamları döner,
   fotoğraf altın bir blokla açılır. Gerisi sakin.

   İşaretleme index.html, davranış js/timeline.js. Yalnızca index.html yükler.
   ========================================================================== */

.zc,
.zc-okuma,
.zc-isik {
  --gece: #14110D;
  --krem: #F3ECE3;
  --duman: #C3B7A6;
  --altin: #C9A184;
  --altin-acik: #E3C49F;
  --kagit: #F1E8DA;
  --murekkep: #17140F;
  --bronz-koyu: #7A5A40;
  --yumusak: cubic-bezier(0.65, 0, 0.25, 1);
}
.zc :focus-visible,
.zc-isik :focus-visible { outline: 2px solid rgba(227, 196, 159, 0.85); outline-offset: 3px; }
.zc-yuvarlak:focus-visible,
.zc-okuma-kapat:focus-visible,
.zc-okuma-pencere .zc-okuma-kapat:focus-visible,
.zc-sonsuz-kapat:focus-visible {
  outline: none;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1B1712, 0 0 0 4px rgba(227, 196, 159, 0.9);
}
.gorunmez {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Bölüm ---------- */
.zc.timeline-section,
body[data-page="home"] .zc.timeline-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 7rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}

/* Arka plan: durağın fotoğrafı. Üst ve alt kenarı sayfaya karışır. */
.zc-fon {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gece);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
  pointer-events: none;
}
.zc-fon-kat {
  position: absolute;
  inset: -28px;
  background: var(--gece) var(--foto, none) center 30% / cover no-repeat;
  filter: blur(7px) brightness(0.56) saturate(0.7) sepia(0.2);
}
.zc-fon-kat + .zc-fon-kat { opacity: 0; }
/* Kenarlara doğru koyulaşan ışık: yazılar her fotoğrafta okunur kalır */
.zc-fon::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 66% 36%, rgba(20, 17, 13, 0.12) 0%, rgba(20, 17, 13, 0.45) 55%, rgba(20, 17, 13, 0.9) 100%),
    linear-gradient(90deg, rgba(20, 17, 13, 0.6) 0%, rgba(20, 17, 13, 0) 42%),
    linear-gradient(0deg, rgba(20, 17, 13, 0.75) 0%, rgba(20, 17, 13, 0) 30%);
}

.zc-ic {
  display: flex;
  flex-direction: column;
}

/* ---------- Başlık ---------- */
.zc-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.1rem;
}
.zc-bolum-baslik {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 0.9vw, 1.95rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--krem);
}

/* ---------- Sahne ---------- */
.zc-sahne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "panel dev"
    "panel baskilar";
  column-gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(0.6rem, 2.4vh, 1.8rem);
  min-height: 0;
}

/* Dev yıl. Panelin arkasına doğru uzar; sağa doğru kararır. Durak
   değişince yana kayar (js: yanaKaydir). */
.zc-dev {
  grid-area: dev;
  justify-self: start;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  margin: -0.19em 0 0 calc(-1 * clamp(3rem, 6.5vw, 7rem));
  font-family: var(--font-display);
  font-size: clamp(7rem, 15vw, 14.5rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--krem);
  pointer-events: none;
  user-select: none;
}
.zc-dev-yil {
  display: flex;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.32) 100%);
  mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.32) 100%);
}
/* Yana kayan kopya: eski yıl ya da fotoğraf, yerinden çıkarken. İki
   sınıflık seçici: .zc-foto'nun position: relative'ini ezmeli, yoksa
   kopya akışta kalıp asıl fotoğrafı daraltır. */
.zc-sahne .zc-kayan {
  position: absolute;
  z-index: -1;
  margin: 0;
  pointer-events: none;
}

/* Cam panel */
.zc-panel {
  grid-area: panel;
  align-self: start;
  position: relative;
  z-index: 2;
  margin-top: clamp(0.4rem, 4vh, 3rem);
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(243, 236, 227, 0.1) 0%, rgba(243, 236, 227, 0.025) 55%),
    rgba(24, 20, 15, 0.64);
  border: 1px solid rgba(243, 236, 227, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}
.zc-panel > * { transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out); }
.zc-panel > :nth-child(2) { transition-delay: 0.04s; }
.zc-panel > :nth-child(3) { transition-delay: 0.08s; }
.zc-panel > :nth-child(4) { transition-delay: 0.12s; }
.zc-panel > :nth-child(5) { transition-delay: 0.16s; }
.zc-panel.is-degisiyor > * {
  opacity: 0;
  transform: translateY(8px);
  transition-duration: 0.22s;
  transition-delay: 0s;
}

.zc-donem {
  margin: 0;
  font-family: var(--font-yil);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--altin);
}
.zc-baslik {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.15rem + 1.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--krem);
  text-wrap: balance;
}
.zc-ozet {
  max-width: 42ch;
  margin: 1.1rem 0 0;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--duman);
}
.zc-devam { margin-top: 1.5rem; padding: 0.85rem 1.55rem; }

/* ---------- Fotoğraf ----------
   Bölümün kapak fotoğrafı, her bölümde aynı 3:2 çerçevede. Yılın sağ alt
   kısmının üstüne biner. Arkasında, sağa ve aşağı kaymış ince bir çerçeve:
   duvara asılmış bir baskının gölgesi gibi; yılın üstünden geçmez. */
.zc-foto-alan {
  grid-area: baskilar;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  margin: calc(-1 * clamp(2rem, 4.6vw, 4.6rem)) 0 0;
}
.zc-foto-alan[hidden] { display: none; }

.zc-foto {
  position: relative;
  display: block;
  width: min(calc(100% - 16px), 44rem);
  margin-right: 16px;
  padding: 0;
  cursor: zoom-in;
}
.zc-foto::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid rgba(243, 236, 227, 0.2);
  border-radius: 6px;
  pointer-events: none;
  transition: border-color 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.zc-foto:hover::before { border-color: rgba(227, 196, 159, 0.55); transform: translate(3px, 3px); }
.zc-foto:focus-visible { outline-offset: 6px; }

.zc-foto-cerceve {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  background: #2A241C;
  box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.06), 0 50px 90px -40px rgba(0, 0, 0, 0.95);
}
.zc-foto-cerceve img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 1.2s var(--ease-out);
}
.zc-foto:hover .zc-foto-cerceve img { transform: scale(1.03); }

/* Köşedeki etiket: birden çok fotoğraf varsa sayısı; tek fotoğrafta
   yalnızca üstüne gelince beliren büyütme işareti */
.zc-foto-etiket {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(24, 20, 15, 0.62);
  border: 1px solid rgba(243, 236, 227, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: var(--krem);
  transition: opacity 0.3s var(--ease-out), background var(--dur-fast);
}
.zc-foto-etiket svg { width: 15px; height: 15px; flex: none; }
.zc-foto-etiket.is-tek { padding: 0.55rem; opacity: 0; }
.zc-foto:hover .zc-foto-etiket,
.zc-foto:focus-visible .zc-foto-etiket { opacity: 1; background: rgba(24, 20, 15, 0.82); }

/* Yuvarlak düğme (fotoğraf görüntüleyici) */
.zc-yuvarlak {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  color: var(--color-gold-light);
  background: rgba(31, 26, 20, 0.7);
  border: 1px solid var(--color-border-strong);
  transition: border-color var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
}
.zc-yuvarlak svg { width: 18px; height: 18px; }
.zc-yuvarlak:hover:not(:disabled) { border-color: var(--color-gold); background: rgba(201, 161, 132, 0.16); }
.zc-yuvarlak:disabled { opacity: 0.28; cursor: default; }

/* Sonsuzluk açıkken bölümün içeriği çekilir */
.zc-dev,
.zc-panel,
.zc-foto-alan { transition: opacity 0.5s var(--ease-out), visibility 0s; }
.zc-sahne.is-sonsuz .zc-dev,
.zc-sahne.is-sonsuz .zc-panel,
.zc-sahne.is-sonsuz .zc-foto-alan {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}

/* ---------- Bölüm dizini: bölüm şeridi ----------
   Soldaki anlatı paneliyle aynı sıcak cam bir şerit. Her bölüm bir hücre:
   tepesinde ince bir ilerleme çizgisi, altında Playfair'de yılı (sahnedeki
   dev yılın küçüğü) ve başlığı. Geçilen bölümlerin çizgisi sönük altın,
   seçilenin çizgisi soldan dolup parlar; gelecek bölümlerinki krem bir
   iz. Seçilen hücrenin arkasına yumuşak bir cam vurgu kayar
   (js/timeline.js · ekseniIsaretle: --x, --w). */
.zc-eksen { margin-top: clamp(0.9rem, 2.6vh, 1.8rem); }
.zc-eksen-liste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(7.5rem, 0.72fr);
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(243, 236, 227, 0.1) 0%, rgba(243, 236, 227, 0.025) 55%),
    rgba(24, 20, 15, 0.6);
  border: 1px solid rgba(243, 236, 227, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
}
/* Seçilenin arkasındaki cam vurgu */
.zc-eksen-liste::before {
  content: '';
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: var(--w, 0px);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(243, 236, 227, 0.13) 0%, rgba(243, 236, 227, 0.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 227, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -18px rgba(0, 0, 0, 0.8);
  transform: translateX(var(--x, 0px));
  transition: transform 0.7s var(--yumusak), width 0.7s var(--yumusak);
  pointer-events: none;
}
.zc-durak { position: relative; min-width: 0; }
/* Hücreler arasında ince ayraç; vurgunun altında kalır */
.zc-durak + .zc-durak::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(243, 236, 227, 0.08);
}
.zc-durak-dugme {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  height: 100%;
  padding: 1.15rem 1.2rem 0.85rem;
  border-radius: 16px;
  text-align: left;
  color: var(--duman);
  transition: background-color var(--dur-fast);
}
/* İlerleme çizgisi: iz ve onu dolduran altın */
.zc-durak-dugme::before,
.zc-durak-dugme::after {
  content: '';
  position: absolute;
  top: 0.6rem;
  left: 1.2rem;
  right: 1.2rem;
  height: 2px;
  border-radius: 2px;
}
.zc-durak-dugme::before { background: rgba(243, 236, 227, 0.13); }
.zc-durak-dugme::after {
  background: linear-gradient(90deg, rgba(201, 161, 132, 0.7), var(--altin-acik));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out), box-shadow 0.5s;
}
.zc-durak-dugme.is-gecti::after { transform: scaleX(1); opacity: 0.55; }
.zc-durak-dugme.is-aktif::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(227, 196, 159, 0.6);
  transition: transform 0.9s var(--yumusak) 0.1s, box-shadow 0.5s 0.6s;
}
.zc-durak-dugme:hover:not(.is-aktif) { background-color: rgba(243, 236, 227, 0.04); }
.zc-durak-dugme:focus-visible { outline-offset: -2px; border-radius: 16px; }

.zc-durak-yil {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 0.7vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  color: rgba(243, 236, 227, 0.5);
  transition: color 0.45s var(--ease-out);
}
.zc-durak-ad {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(243, 236, 227, 0.48);
  transition: color 0.45s var(--ease-out);
}
.zc-durak-dugme.is-gecti .zc-durak-yil { color: rgba(227, 196, 159, 0.72); }
.zc-durak-dugme:hover .zc-durak-yil,
.zc-durak-dugme:hover .zc-durak-ad { color: var(--krem); }
.zc-durak-dugme.is-aktif .zc-durak-yil { color: var(--krem); }
.zc-durak-dugme.is-aktif .zc-durak-ad { color: rgba(243, 236, 227, 0.85); }

/* Sonsuza dek: ∞ yılın yerinde, başlığı italik */
.zc-durak--sonsuz .zc-durak-yil {
  font-family: var(--font-yil);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2rem);
  line-height: 1;
  padding-top: 0.08em;
  color: rgba(227, 196, 159, 0.6);
}
.zc-durak--sonsuz .zc-durak-ad { font-family: var(--font-yil); font-size: 1rem; font-style: italic; line-height: 1.2; }
.zc-durak--sonsuz .zc-durak-dugme.is-aktif .zc-durak-yil {
  color: var(--altin-acik);
  text-shadow: 0 0 16px rgba(227, 196, 159, 0.55);
}

/* ---------- Kırılımlar ---------- */
@media (max-width: 1100px) {
  .zc-sahne { grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr); }
  .zc-dev { font-size: clamp(6rem, 14vw, 10rem); }
}

@media (max-width: 768px) {
  /* Dar ekranda sıra: fotoğraf, onun alt kenarına binen dev yıl, panel */
  .zc-sahne {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "baskilar" "dev" "panel";
    align-content: start;
    margin-top: 0.9rem;
  }
  .zc-dev {
    z-index: 2;
    margin: -0.47em 0 0 0.1em;
    font-size: clamp(4.4rem, 23vw, 7rem);
  }
  .zc-panel {
    margin-top: -0.2rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 18px;
  }
  .zc-donem { font-size: 1.02rem; }
  .zc-baslik { font-size: 1.6rem; }
  .zc-ozet {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .zc-devam { margin-top: 0.95rem; padding: 0.72rem 1.25rem; font-size: 0.86rem; }

  /* Fotoğraf panelle aynı genişlikte, aynı yuvarlaklıkta bir kart. Geniş
     ekrandaki kaydırılmış çerçeve çizgisi burada yok: dar ekranda sağ
     kenardan taşıyor, alt kenarı da yılın arkasında kesik kalıyordu. */
  .zc-foto-alan { margin: 0; justify-content: flex-start; }
  .zc-foto { width: 100%; margin-right: 0; }
  .zc-foto::before { content: none; }
  .zc-foto-cerceve {
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  }
  .zc-foto:focus-visible { outline-offset: 3px; border-radius: 20px; }
  /* Yılın bindiği alt kenar koyulaşır: rakamlar her fotoğrafta okunur */
  .zc-foto-cerceve::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 50%;
    background: linear-gradient(180deg, rgba(20, 17, 13, 0) 0%, rgba(20, 17, 13, 0.7) 100%);
    pointer-events: none;
  }
  .zc-foto-etiket { top: 0.7rem; right: 0.7rem; bottom: auto; }

  /* Dar ekranda şeritte yalnızca yıllar, ortalı; başlık panelde */
  .zc-eksen-liste {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 0.8fr);
    padding: 0.3rem;
    border-radius: 18px;
  }
  .zc-eksen-liste::before { top: 0.3rem; bottom: 0.3rem; border-radius: 13px; }
  .zc-durak + .zc-durak::before { display: none; }
  .zc-durak-dugme {
    align-items: center;
    min-height: 50px;
    padding: 0.95rem 0.1rem 0.55rem;
    border-radius: 13px;
  }
  .zc-durak-dugme::before,
  .zc-durak-dugme::after { top: 0.45rem; left: 0.55rem; right: 0.55rem; }
  .zc-durak-yil { font-size: 1.02rem; }
  .zc-durak-ad { display: none; }
  .zc-durak--sonsuz .zc-durak-yil { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zc-panel > *,
  .zc-eksen-liste::before,
  .zc-durak-dugme::after,
  .zc-foto-cerceve img { transition: none; }
}

/* ==========================================================================
   Ekrana sığdırma
   Ana sayfada kaydırıp zaman çizelgesine gelindiğinde bölümün tamamı tek
   ekranda görünür. Bölüm bir ekran yüksekliğindedir; üstteki sabit şeridin
   payı bölümün içinde ayrılır. Sayfa bölüme yaklaşınca yumuşakça tam
   hizaya oturur (yakınlık kipi: yalnızca yakındayken). Fotoğraf kalan
   yüksekliğe göre boyutlanır. Ekran çok kısaysa (yatay telefon) sığdırma
   bırakılır, bölüm doğal akışına döner.
   ========================================================================== */
@media (min-height: 640px) {
  html { scroll-snap-type: y proximity; }

  .zc.timeline-section,
  body[data-page="home"] .zc.timeline-section {
    --ust: 84px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    padding: calc(var(--ust) + clamp(0.4rem, 1.8vh, 1.4rem)) 0 clamp(0.5rem, 1.6vh, 1.2rem);
    scroll-snap-align: start;
    scroll-margin-top: 0;
  }
  .zc-ic { flex: 1; min-height: 0; }
  .zc-sahne { flex: 1; }
  .zc-foto-alan { container-type: size; }
  /* Arkadaki çerçeve de sığsın diye pay bırakılır */
  .zc-foto { width: min(calc(100% - 16px), 50rem, calc((100cqh - 1.4rem) * 1.5)); }
}

/* Orta yükseklikte (dizüstü) özet kısalır */
@media (min-height: 640px) and (max-height: 820px) {
  .zc-ozet { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .zc-panel { margin-top: 0.4rem; }
}

@media (max-width: 768px) and (min-height: 640px) {
  .zc.timeline-section,
  body[data-page="home"] .zc.timeline-section { --ust: 78px; }
  /* Fotoğrafın boyu ekranın yüksekliğinden gelir; bütün bölümlerde aynıdır */
  .zc-foto-alan { container-type: normal; }
  .zc-foto { width: 100%; }
  /* Uzun telefonda fotoğraf boşluğu doldurur (en çok kare), kısa telefonda
     panel ve dizin sığsın diye kısalır */
  .zc-foto-cerceve { aspect-ratio: auto; height: clamp(150px, calc(100svh - 470px), var(--container-width)); }
  .zc-ozet { -webkit-line-clamp: 2; }
}

/* ==========================================================================
   Okuma sayfası (Hikâyenin devamı)
   Tam ekran bir sayfa; renkleri dijital müzenin detay kartından (muze.css
   01 · değişkenler): sıcak kahve zemin, üstünde ince cam parıltısı.
   Kapak fotoğrafı sahnedeki yerinden doğrudan sayfanın üstündeki banda
   uçar (js: buyut), bu sırada zemin belirir ve altından yazı yaprağı
   yükselir. Dikey fotoğraf bantta kırpılmaz, bulanık kopyasının önünde
   bütün olarak durur. Fotoğrafı olmayan durakta sayfa doğrudan açılır.
   ========================================================================== */
.zc-okuma {
  --kart: #2C261D;
  --kart-koyu: #241F18;
  --pano-hat: rgba(243, 236, 227, 0.15);
  --cam-parilti: linear-gradient(150deg, rgba(243, 236, 227, 0.12) 0%, rgba(243, 236, 227, 0.035) 48%, rgba(243, 236, 227, 0.07) 100%);
  --ic-isik: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  position: fixed;
  inset: 0;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.34s var(--ease-out), visibility 0s linear 0.34s;
}
.zc-okuma.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-out), visibility 0s; }
/* Uçuşta katman hemen görünür, sayfa kendisi belirir; böylece uçan
   fotoğraf katmanla birlikte silikleşmez (js: okumaAc) */
.zc-okuma.is-open.is-ucus { transition: none; }

.zc-okuma-pencere {
  position: absolute;
  inset: 0;
  background: var(--kart);
}
/* Uçuşta sayfa bir bütün olarak silikleşmez (uçan fotoğraf onun içinde):
   zemin rengi, kapak ve kapat düğmesi ayrı ayrı belirir */
.zc-okuma.is-ucus .zc-okuma-pencere { animation: zc-zemin 0.5s var(--ease-out) both; }
.zc-okuma.is-ucus .zc-okuma-kapak,
.zc-okuma.is-ucus .zc-okuma-kapat { animation: zc-belir 0.5s var(--ease-out) both; }
@keyframes zc-zemin { from { background-color: transparent; } }
@keyframes zc-belir { from { opacity: 0; } to { opacity: 1; } }

.zc-okuma-kaydir {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (hover: hover) and (pointer: fine) {
  .zc-okuma-kaydir {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 161, 132, 0.5) transparent;
  }
}

/* Kapak yerinde durur; kaydırınca yazı yaprağı onun üstüne biner. Örtüldükçe
   fotoğraf hafifçe kararır ve büyür (js: kapagiOrt · --ortu 0–1). */
.zc-okuma-kapak {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 62vh;
  height: 62svh;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  background: var(--kart-koyu);
}
.zc-okuma-kapak-fon {
  position: absolute;
  inset: -40px;
  background: center / cover no-repeat;
  filter: blur(26px) brightness(0.5) saturate(0.8);
}
.zc-okuma-kapak:not(.is-dikey) .zc-okuma-kapak-fon { display: none; }
.zc-okuma-kapak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #14110D;
  opacity: calc(var(--ortu, 0) * 0.65);
  pointer-events: none;
}
.zc-okuma-foto {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(calc(1 + var(--ortu, 0) * 0.06));
  transform-origin: 50% 30%;
}
/* Dikey ya da kare fotoğraf kırpılmaz: ortada bütün olarak durur */
.zc-okuma-kapak.is-dikey .zc-okuma-foto { object-fit: contain; }
.zc-okuma.is-klon .zc-okuma-foto { visibility: hidden; }
/* Uçan kopya sayfanın içinde, kapağın üstünde ama yazı yaprağının altında:
   yaprak yükselirken fotoğrafın alt kenarını örter, inişte kapakla aynı
   katmanda durur */
.zc-okuma-klon {
  position: fixed;
  z-index: 0;
  display: block;
  max-width: none;
  margin: 0;
  object-fit: cover;
  pointer-events: none;
}

/* Fotoğraf kutusu: telefonda yok sayılır, fotoğraf kapağı doldurur */
.zc-okuma-foto-kutu { display: contents; }

/* Kapağın altı: seçili fotoğrafın iki satır yazısı, ince bir işaret
   çizgisi ve bölümün fotoğraf şeridi. Telefonda kapağın alt kenarına
   biner (yaprağın bindiği payın üstünde). */
.zc-kapak-alt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3.2rem 0 1rem;
  background: linear-gradient(0deg, rgba(20, 17, 13, 0.88) 0%, rgba(20, 17, 13, 0.6) 55%, rgba(20, 17, 13, 0) 100%);
}
.zc-kapak-alt[hidden] { display: none; }
.zc-serit-yazi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  max-width: min(90%, 34rem);
  margin: 0;
  text-align: center;
}
.zc-serit-baslik,
.zc-serit-alt {
  display: grid;
  max-width: 100%;
}
/* Satırın metni; değişirken eskisi ve yenisi üst üste durur, yumuşak
   kenarlı bir maske soldan sağa geçer (js: satirYaz) */
.zc-serit-metin {
  grid-area: 1 / 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.zc-serit-metin.is-giden,
.zc-serit-metin.is-gelen {
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.zc-serit-metin.is-gelen {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
}
.zc-serit-metin.is-giden {
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 60%);
}
.zc-serit-baslik {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--krem);
}
.zc-serit-alt {
  font-family: var(--font-yil);
  font-size: 1.02rem;
  font-style: italic;
  font-variant-numeric: lining-nums;
  line-height: 1.3;
  color: var(--duman);
}
.zc-serit-cizgi {
  width: 1px;
  height: 12px;
  margin: 0.45rem 0 0.3rem;
  background: rgba(243, 236, 227, 0.4);
}

/* Şerit (vv.mov): küçük resimler kendi oranlarında; seçili olan ortada
   en büyük, uzaklaştıkça küçülüp söner. Her resim şeridin ortasına
   oturtulur, yeri ve ölçeği js ile transform olarak yazılır (seritCiz). */
.zc-serit {
  --kucuk-ha: 56px;
  --kucuk-ara: 8px;
  position: relative;
  width: 100%;
  height: calc(var(--kucuk-ha) + 12px);
  overflow: hidden;
  touch-action: pan-y;
  /* En dıştaki resim kenarda kesilmesin, silinerek bitsin */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.zc-serit[hidden] { display: none; }
.zc-serit-ray {
  position: absolute;
  inset: 0;
}
.zc-serit-kucuk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--kucuk-ha) * var(--oran));
  height: var(--kucuk-ha);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: var(--kart);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  will-change: transform, opacity;
  transition: filter 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.zc-serit-kucuk:hover { filter: brightness(1.12); }
.zc-serit-kucuk.is-aktif {
  box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.25), 0 14px 28px -12px rgba(0, 0, 0, 0.95);
  cursor: zoom-in;
}
.zc-serit-kucuk img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.zc-serit-kucuk:focus-visible { outline: 2px solid rgba(227, 196, 159, 0.85); outline-offset: 2px; }

/* Kapakta fotoğraf değişirken yenisi, zeminiyle birlikte üstte belirir */
.zc-okuma-gecis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.zc-okuma-gecis .zc-okuma-kapak-fon { display: none; }
.zc-okuma-gecis.is-zeminli .zc-okuma-kapak-fon { display: block; }
.zc-okuma-gecis .zc-okuma-foto { position: absolute; inset: 0; transform: none; }

/* Yazı yaprağı: müze kartının alt katmanı, üstünde ince bir cam parıltısı */
.zc-okuma-kagit {
  position: relative;
  z-index: 1;
  min-height: 60vh;
  margin-top: -28px;
  padding: clamp(2.6rem, 6vh, 4rem) clamp(1.25rem, 5vw, 3.5rem) clamp(5rem, 10vh, 6.5rem);
  border-radius: 28px 28px 0 0;
  background:
    linear-gradient(180deg, rgba(243, 236, 227, 0.07) 0%, rgba(243, 236, 227, 0) 160px),
    var(--kart-koyu);
  border-top: 1px solid var(--pano-hat);
  box-shadow: 0 -18px 40px rgba(8, 6, 4, 0.5), var(--ic-isik);
  color: var(--krem);
  transform: translateY(28px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s, opacity 0.5s var(--ease-out) 0.18s;
}
.zc-okuma.is-open .zc-okuma-kagit { transform: none; opacity: 1; }
.zc-okuma.is-fotosuz .zc-okuma-kapak { display: none; }
.zc-okuma.is-fotosuz .zc-okuma-kagit {
  min-height: 100%;
  margin-top: 0;
  padding-top: clamp(4.5rem, 11vh, 6.5rem);
  border: 0;
  border-radius: 0;
}
.zc-okuma-kagit :focus-visible { outline: 2px solid rgba(227, 196, 159, 0.85); outline-offset: 3px; }

.zc-okuma-ust {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.zc-okuma-baslik {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--krem);
  text-wrap: balance;
}
.zc-okuma-etiketler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.8rem;
  margin: 1.2rem 0 0;
}
.zc-okuma-etiketler span { display: inline-flex; align-items: center; gap: 0.5rem; }
.zc-okuma-etiketler svg { width: 18px; height: 18px; color: var(--altin); }
.zc-okuma-etiketler b { font-size: 0.95rem; font-weight: 500; color: var(--duman); }
.zc-okuma-etiketler span:first-child b {
  font-family: var(--font-yil);
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

/* Metin sütunu: her şey (paragraflar, alıntılar, fotoğraflar) bu sütunun
   iki kenarına hizalanır */
.zc-okuma-metin {
  max-width: 64ch;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  font-size: 1.05rem;
}
.zc-okuma-metin p { margin: 0; font-weight: 300; line-height: 1.88; color: #D3C8B9; }
.zc-okuma-metin p + p { margin-top: 1.1rem; }
.zc-okuma-metin > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.82;
  color: var(--altin-acik);
}
.zc-okuma-metin h4 { margin-top: 2.4rem; font-size: 1.3rem; color: var(--altin-acik); }
/* Eklenen bölüm: üstünde ince bir ayraç ve yılı, başlığı daha büyük */
.zc-okuma-metin .metin-ara-yil {
  margin: clamp(3rem, 7vh, 4rem) 0 0;
  padding-top: clamp(2rem, 5vh, 2.8rem);
  border-top: 1px solid var(--pano-hat);
  font-family: var(--font-yil);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.3;
  color: var(--altin);
}
.zc-okuma-metin .metin-ara-yil + h4 {
  margin: 0.3rem 0 1.1rem;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.15;
  color: var(--krem);
}
.zc-okuma-metin h5 {
  margin: 2rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--altin-acik);
}
.zc-okuma-metin blockquote { margin: 1.6rem 0; border-left-color: var(--altin); }
.zc-okuma-metin blockquote p { font-size: 1.32rem; line-height: 1.55; color: var(--krem); }
.zc-okuma-metin blockquote cite { color: var(--duman); }

/* Fotoğraf işareti: görünmez; masaüstünde kapaktaki seçimi yazıya bağlar */
.metin-isaret { display: block; height: 0; }

/* Hikâye ↔ Fotoğraflar: başlığın altında iki seçenekli anahtar */
.zc-okuma-gorunum {
  display: flex;
  width: max-content;
  margin: clamp(1.6rem, 4vh, 2.2rem) auto 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(243, 236, 227, 0.04);
  box-shadow: inset 0 0 0 1px var(--pano-hat);
}
.zc-okuma-gorunum[hidden] { display: none; }
.zc-okuma-sekme {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--duman);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.zc-okuma-sekme:hover { color: var(--krem); }
.zc-okuma-sekme[aria-selected="true"] {
  background: rgba(227, 196, 159, 0.14);
  color: var(--krem);
  box-shadow: inset 0 0 0 1px rgba(227, 196, 159, 0.22);
}
.zc-okuma-sekme b {
  font-family: var(--font-yil);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--altin);
}
.zc-okuma-metin[hidden] { display: none; }

/* Galeri: fotoğraflar kendi oranlarıyla, eşit yükseklikte satırlara
   yaslanır; hiçbir fotoğraf kırpılmaz. Son satır gerilmesin diye
   ::after kalan boşluğu alır. */
.zc-okuma-galeri {
  --satir: 12.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 76rem;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  animation: zc-belir 0.45s var(--ease-out) both;
}
.zc-okuma-galeri[hidden] { display: none; }
.zc-okuma-galeri::after { content: ''; flex: 1e4 1 0; }
.galeri-foto {
  flex: var(--oran) 1 calc(var(--satir) * var(--oran));
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--kart);
  box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.1);
  cursor: zoom-in;
}
.galeri-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--oran);
  transition: transform 0.8s var(--ease-out);
}
.galeri-foto:hover img { transform: scale(1.03); }

@media (max-width: 640px) {
  .zc-okuma-galeri { --satir: 7.5rem; gap: 0.4rem; }
  .galeri-foto { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .zc-okuma-galeri { animation: none; }
  .galeri-foto img { transition: none; }
}

.zc-okuma-son { max-width: 64ch; margin: clamp(3rem, 7vh, 4.5rem) auto 0; }

/* Masaüstü: iki sütun. Solda kapak fotoğrafı kendi oranında, ekranın
   ortasında sabit durur; sağda en üstte görünüm anahtarı, altında sola
   yaslı başlık ve yazı akar. Yaprak kapağın üstüne binmez, bu yüzden
   --ortu kararması burada kullanılmaz. Kapağın yeri js: hedefKutu. */
@media (min-width: 1024px) {
  .zc-okuma-kaydir {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    column-gap: clamp(3rem, 5.5vw, 6.5rem);
    padding: 0 clamp(6rem, 8vw, 8rem) 0 clamp(2rem, 5vw, 5.5rem);
  }
  /* Sol sütun: 5:4'lük sabit bir çerçeve, altında yazı ve şerit; üçü
     birlikte sütunun dikey ortasında. Fotoğraf çerçevede kırpılmadan
     durur, boşluğu kendi bulanık kopyası doldurur; fotoğrafın oranı
     değişse de hiçbir şey yerinden oynamaz. */
  .zc-okuma-kapak {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 2.4vh, 1.6rem);
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: clamp(2rem, 6vh, 3.5rem) 0 clamp(1.4rem, 3.5vh, 2.2rem);
    overflow: visible;
    background: none;
  }
  .zc-okuma-kapak::after { display: none; }
  .zc-okuma-foto-kutu {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 5 / 4;
    max-height: calc(100svh - 15rem);
    overflow: hidden;
    border-radius: 18px;
    background: var(--kart-koyu);
    box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  }
  .zc-okuma-kapak:not(.is-dikey) .zc-okuma-kapak-fon { display: block; }
  .zc-kapak-alt {
    position: static;
    padding: 0;
    background: none;
  }
  .zc-serit-yazi { max-width: 100%; min-height: 2.7rem; justify-content: flex-end; }
  .zc-serit-baslik { font-size: 1.02rem; }
  .zc-serit-baslik .zc-serit-metin { -webkit-line-clamp: 2; }
  .zc-serit-alt { font-size: 1.12rem; }
  .zc-serit { --kucuk-ha: 78px; --kucuk-ara: 10px; }
  .zc-okuma-foto,
  .zc-okuma-kapak.is-dikey .zc-okuma-foto {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
    cursor: zoom-in;
  }

  .zc-okuma-kagit {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: clamp(2.5rem, 6vh, 3.5rem) 0 clamp(5rem, 10vh, 6.5rem);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .zc-okuma.is-fotosuz .zc-okuma-kagit { grid-column: 1 / -1; }

  /* Anahtar en üstte, sütun genişliğinde iki eşit yarı */
  .zc-okuma-gorunum {
    order: -1;
    width: 100%;
    margin: 0 0 clamp(2.2rem, 5vh, 3rem);
    padding: 5px;
    background: rgba(243, 236, 227, 0.06);
    box-shadow: none;
  }
  .zc-okuma-sekme { flex: 1; justify-content: center; padding: 0.7rem 1rem; }
  .zc-okuma-sekme[aria-selected="true"] {
    background: rgba(243, 236, 227, 0.1);
    color: var(--altin-acik);
    box-shadow: none;
  }

  .zc-okuma-ust { max-width: none; margin: 0; text-align: left; }
  .zc-okuma-baslik {
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 1.2rem + 2.2vw, 3.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
  }
  .zc-okuma-etiketler { justify-content: flex-start; margin-top: 1rem; }

  .zc-okuma-metin,
  .zc-okuma-son,
  .zc-okuma-galeri { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
  .zc-okuma-metin { margin-top: 1.6rem; font-size: 1.14rem; }
  .zc-okuma-metin p { line-height: 1.68; }
  .zc-okuma-metin p + p { margin-top: 0.9rem; }
  .zc-okuma-metin > p:first-child::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
  .zc-okuma-metin h4,
  .zc-okuma-metin .metin-ara-yil + h4,
  .zc-okuma-metin h5 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--krem);
  }
  .zc-okuma-metin h4 { margin: 3.2rem 0 0.9rem; font-size: clamp(1.8rem, 1rem + 1.3vw, 2.4rem); line-height: 1.04; }
  .zc-okuma-metin .metin-ara-yil + h4 { margin: 0.4rem 0 1rem; font-size: clamp(2.1rem, 1.1rem + 1.6vw, 2.9rem); }
  .zc-okuma-metin h5 { margin: 2.4rem 0 0.7rem; font-size: 1.45rem; line-height: 1.1; }
  .zc-okuma-galeri { --satir: 10rem; margin-top: 0; }
}
.zc-okuma-sonraki {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 1.4rem 1.6rem;
  border-radius: 22px;
  text-align: left;
  color: var(--krem);
  background: var(--cam-parilti), rgba(44, 38, 29, 0.6);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik);
  transition: border-color var(--dur-fast), transform 0.4s var(--ease-out);
}
.zc-okuma-sonraki small { font-size: 0.85rem; color: var(--altin); }
.zc-okuma-sonraki span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.35rem; }
.zc-okuma-sonraki b {
  font-family: var(--font-yil);
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--altin-acik);
}
.zc-okuma-sonraki em { font-family: var(--font-display); font-size: 1.25rem; font-style: normal; }
.zc-okuma-sonraki:hover { border-color: rgba(201, 161, 132, 0.55); transform: translateY(-2px); }

/* Kapat: ekranın sağ üst köşesinde; okuma sayfasında müze kartının
   köşe düğmeleri gibi cam */
.zc-okuma-kapat {
  position: fixed;
  top: clamp(1rem, 2.4vw, 1.8rem);
  right: clamp(1rem, 2.4vw, 1.8rem);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  color: var(--krem);
  background: rgba(24, 20, 15, 0.72);
  border: 1px solid rgba(243, 236, 227, 0.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-fast), background-color var(--dur-fast), transform 0.35s var(--ease-out);
}
.zc-okuma-kapat svg { width: 18px; height: 18px; }
.zc-okuma-kapat:hover { border-color: var(--altin); transform: rotate(90deg); }
.zc-okuma-pencere .zc-okuma-kapat {
  position: absolute;
  background: var(--cam-parilti), rgba(27, 23, 18, 0.52);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: 0 6px 18px rgba(8, 6, 4, 0.35), var(--ic-isik);
}

/* "Okumak için kaydır": pencerenin altında, sona gelince söner */
.zc-okuma-ipucu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.45rem;
  height: 7rem;
  margin: 0;
  padding-bottom: 1.2rem;
  background: linear-gradient(180deg, rgba(36, 31, 24, 0) 0%, rgba(36, 31, 24, 0.92) 55%, var(--kart-koyu) 75%);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--altin-acik);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-mid);
}
.zc-okuma-ipucu.is-gorunur { opacity: 1; }
.zc-okuma-ipucu svg { width: 15px; height: 15px; animation: modal-kaydir 1.8s var(--ease-in-out) infinite; }
.zc-okuma:not(.is-open) .zc-okuma-ipucu svg { animation: none; }

@media (max-width: 768px) {
  .zc-okuma-kapak { height: 46svh; min-height: 220px; }
  .zc-okuma-kagit { margin-top: -22px; border-radius: 22px 22px 0 0; }
  .zc-okuma-metin { font-size: 1rem; }
  .zc-okuma-kapat { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .zc-okuma-kagit { transform: none; transition: opacity 0.3s; }
}


/* ==========================================================================
   Fotoğraf görüntüleyici
   ========================================================================== */
.zc-isik {
  position: fixed;
  inset: 0;
  z-index: 1150;   /* okuma sayfasının da üstünde açılabilir */
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(12, 10, 8, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.zc-isik.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease-out), visibility 0s; }
.zc-isik-sahne {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  margin: 0;
  padding: clamp(4.5rem, 9vh, 6rem) clamp(4.5rem, 9vw, 8rem) 1rem;
  container-type: size;
}
/* Her fotoğraf, küçük olsa da, sahneyi aynı ölçüde doldurur: oranı
   korunarak alana sığan en büyük boyda durur (oran js'ten, --oran) */
.zc-isik-foto {
  width: min(100cqw, 100cqh * var(--oran, 1));
  height: auto;
  aspect-ratio: var(--oran, 1);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.1), 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  transform: scale(0.97);
  transition: transform 0.6s var(--ease-out);
}
.zc-isik.is-open .zc-isik-foto { transform: none; }
.zc-isik-alt {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 0 1.5rem 1.6rem;
  min-width: 0;
}
.zc-isik-yazi {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  max-width: 70ch;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.zc-isik-yazi b {
  font-family: var(--font-yil);
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-gold-light);
  white-space: nowrap;
}
.zc-isik-kucukler {
  display: flex;
  gap: 0.45rem;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}
.zc-isik-kucukler::-webkit-scrollbar { display: none; }
.zc-isik-kucuk {
  flex: none;
  width: 46px;
  height: 58px;
  padding: 0;
  border-radius: 7px;
  overflow: hidden;
  opacity: 0.4;
  box-shadow: 0 0 0 1px rgba(243, 236, 227, 0.14);
  transition: opacity var(--dur-fast), box-shadow var(--dur-fast);
}
.zc-isik-kucuk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zc-isik-kucuk:hover { opacity: 0.8; }
.zc-isik-kucuk.is-aktif { opacity: 1; box-shadow: 0 0 0 1.5px var(--color-gold-light); }
.zc-isik-ok { position: absolute; top: 50%; margin-top: -40px; width: 52px; height: 52px; }
.zc-isik-ok--geri { left: clamp(0.8rem, 2.5vw, 2rem); }
.zc-isik-ok--ileri { right: clamp(0.8rem, 2.5vw, 2rem); }
.zc-isik.is-tek .zc-isik-ok,
.zc-isik.is-tek .zc-isik-kucukler { display: none; }

@media (max-width: 768px) {
  .zc-isik-sahne { padding: 4.5rem 0.8rem 0.8rem; }
  .zc-isik-ok { display: none; }
}


/* ==========================================================================
   Sonsuza dek (son duraktan sonra)
   ========================================================================== */
.zc-sonsuz {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: hidden auto;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  /* Sahnenin üstüne yumuşak bir ışık: kenarları sayfaya karışır */
  background: radial-gradient(50% 58% at 50% 46%, rgba(201, 161, 132, 0.17) 0%, rgba(201, 161, 132, 0.05) 45%, rgba(201, 161, 132, 0) 72%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.zc-sahne.is-sonsuz .zc-sonsuz {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out), visibility 0s;
}

/* Altın zerreler: alttan yükselip sönerler */
.zc-sonsuz-toz { position: absolute; inset: 0; pointer-events: none; }
.zc-sonsuz-toz i {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: var(--b, 3px);
  height: var(--b, 3px);
  border-radius: 50%;
  background: #F0D9B8;
  box-shadow: 0 0 8px rgba(240, 217, 184, 0.8);
  opacity: 0;
}
.zc-sahne.is-sonsuz .zc-sonsuz-toz i { animation: zc-toz var(--s, 9s) linear var(--g, 0s) infinite; }
@keyframes zc-toz {
  0%   { opacity: 0; transform: translate(0, 0); }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.35; }
  100% { opacity: 0; transform: translate(var(--k, 20px), -560px); }
}
.zc-sonsuz-toz i:nth-child(1)  { --x: 8%;  --b: 2px; --s: 10s; --g: 0.2s; --k: 18px; }
.zc-sonsuz-toz i:nth-child(2)  { --x: 17%; --b: 3px; --s: 8s;  --g: 1.8s; --k: -14px; }
.zc-sonsuz-toz i:nth-child(3)  { --x: 26%; --b: 2px; --s: 11s; --g: 3.4s; --k: 22px; }
.zc-sonsuz-toz i:nth-child(4)  { --x: 34%; --b: 4px; --s: 9s;  --g: 0.9s; --k: -20px; }
.zc-sonsuz-toz i:nth-child(5)  { --x: 42%; --b: 2px; --s: 12s; --g: 4.6s; --k: 12px; }
.zc-sonsuz-toz i:nth-child(6)  { --x: 49%; --b: 3px; --s: 8.5s; --g: 2.6s; --k: -10px; }
.zc-sonsuz-toz i:nth-child(7)  { --x: 57%; --b: 2px; --s: 10.5s; --g: 0.5s; --k: 16px; }
.zc-sonsuz-toz i:nth-child(8)  { --x: 64%; --b: 3px; --s: 9.5s; --g: 3.9s; --k: -24px; }
.zc-sonsuz-toz i:nth-child(9)  { --x: 71%; --b: 2px; --s: 11.5s; --g: 1.3s; --k: 20px; }
.zc-sonsuz-toz i:nth-child(10) { --x: 78%; --b: 4px; --s: 8s;  --g: 5.2s; --k: -12px; }
.zc-sonsuz-toz i:nth-child(11) { --x: 85%; --b: 2px; --s: 10s; --g: 2.2s; --k: 14px; }
.zc-sonsuz-toz i:nth-child(12) { --x: 92%; --b: 3px; --s: 12s; --g: 4.1s; --k: -18px; }
.zc-sonsuz-toz i:nth-child(13) { --x: 21%; --b: 2px; --s: 13s; --g: 6s;   --k: 10px; }
.zc-sonsuz-toz i:nth-child(14) { --x: 68%; --b: 2px; --s: 12.5s; --g: 6.8s; --k: -8px; }

.zc-sonsuz-kapat {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--color-text-primary);
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid var(--color-border-strong);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform 0.3s var(--ease-out);
}
.zc-sonsuz-kapat svg { width: 16px; height: 16px; }
.zc-sonsuz-kapat:hover { border-color: var(--color-gold); background: rgba(243, 236, 227, 0.1); transform: rotate(90deg); }

.zc-sonsuz-ic {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 560px);
  text-align: center;
}

/* İşaret: altın bir çizgi kendini çizer; çizgi tamamlanınca ardında
   yumuşak bir hale belirir ve yavaşça nefes alır. */
.zc-sonsuz-cizgi { width: min(62%, 300px); height: auto; overflow: visible; }
.zc-sonsuz-hale,
.zc-sonsuz-yol {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.zc-sonsuz-hale {
  stroke: rgba(201, 161, 132, 0.3);
  stroke-width: 10;
  filter: blur(7px);
  opacity: 0;
}
.zc-sonsuz-yol {
  stroke: url(#zc-sonsuz-altin);
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(201, 161, 132, 0.45));
}
.zc-sahne.is-sonsuz .zc-sonsuz-yol { animation: zc-sonsuz-ciz 2.2s var(--ease-in-out) 0.25s forwards; }
.zc-sahne.is-sonsuz .zc-sonsuz-hale {
  animation: zc-sonsuz-hale 1.4s var(--ease-out) 1.9s forwards,
             zc-sonsuz-nefes 4.5s var(--ease-in-out) 3.3s infinite alternate;
}
@keyframes zc-sonsuz-ciz { to { stroke-dashoffset: 0; } }
@keyframes zc-sonsuz-hale { from { opacity: 0; } to { opacity: 1; } }
@keyframes zc-sonsuz-nefes { from { opacity: 1; } to { opacity: 0.45; } }

/* Yazılar işaretten sonra sırayla gelir (--gecikme işaretlemede) */
.zc-sonsuz-parca { opacity: 0; }
.zc-sahne.is-sonsuz .zc-sonsuz-parca { animation: zc-parca-gel 1s var(--ease-out) var(--gecikme, 0s) forwards; }
@keyframes zc-parca-gel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.zc-sonsuz-not {
  margin: 1.1rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.zc-sonsuz-soz { margin: 0.9rem 0 0; }
.zc-sonsuz-soz p {
  margin: 0;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.3;
  color: var(--color-text-primary);
  text-wrap: balance;
}
.zc-sonsuz-soz p::before { content: '“'; }
.zc-sonsuz-soz p::after { content: '”'; }
.zc-sonsuz-imza {
  display: block;
  width: 150px;
  height: 52px;
  margin-top: 0.5rem;
  background: url("../assets/images/brand/imza.png") no-repeat center / contain;
}
.zc-sonsuz-imza.zc-sonsuz-parca { opacity: 0; }
.zc-sahne.is-sonsuz .zc-sonsuz-imza { animation-name: zc-imza-gel; }
@keyframes zc-imza-gel { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.75; transform: none; } }
.zc-sonsuz-miras {
  max-width: 40ch;
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.zc-sonsuz-bastan { margin-top: 1.4rem; padding: 0.8rem 1.4rem; }
.zc-sonsuz-bastan svg { width: 16px; height: 16px; color: var(--color-gold-light); transition: transform 0.5s var(--ease-out); }
.zc-sonsuz-bastan:hover svg { transform: rotate(-200deg); }

/* Her açılışta animasyonlar baştan başlasın */
.zc-sonsuz.is-sifirla *,
.zc-sonsuz.is-sifirla .zc-sonsuz-yol,
.zc-sonsuz.is-sifirla .zc-sonsuz-hale { animation: none !important; }


@media (max-width: 640px) {
  .zc-sonsuz-cizgi { width: min(70%, 240px); }
  .zc-sonsuz-soz p { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zc-sahne.is-sonsuz .zc-sonsuz-yol { animation: none; stroke-dashoffset: 0; }
  .zc-sonsuz-toz { display: none; }
  .zc-sahne.is-sonsuz .zc-sonsuz-hale,
  .zc-sahne.is-sonsuz .zc-sonsuz-parca { animation: none; opacity: 1; }
  .zc-sahne.is-sonsuz .zc-sonsuz-imza { opacity: 0.75; }
}