/* ==========================================================================
   İzzet Baysal — Dijital Biyografi Müzesi
   Ana Tasarım Sistemi
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=Bodoni+Moda:opsz,wght@6..96,600;6..96,700&family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Renk Paleti — tonlar referans görselden örneklendi:
     sol üst #0F0F0F, orta #181816, sol alt #272421, sağ orta #675C4E,
     sağ alt #716555. Yani siyahtan sıcak bir kum tonuna açılan geçiş. */
  --siyah: #1B1712;
  --sicak-1: #7F725E;   /* geçişin en açık ucu (sağ alt) */
  --sicak-2: #4A4239;
  --sicak-3: #272421;   /* sol alt */
  --sicak-4: #181816;   /* orta */

  --color-bg-primary: #1B1712;
  --color-bg-secondary: #241F18;
  --color-bg-tertiary: #2C261D;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-gold: #C9A184;
  --color-gold-light: #E3C49F;
  --color-logo-gold: #C9A227;
  --color-bronze: #A97E5F;
  --color-ink: #17140F;            /* açık zemin üstündeki koyu yazı */
  --color-cream: #EFE4D2;          /* referanstaki açık düğme dolgusu */
  --color-text-primary: #F3ECE3;
  --color-text-secondary: #C3B7A6;
  --color-border: rgba(243, 236, 227, 0.12);
  --color-border-strong: rgba(243, 236, 227, 0.26);
  --gradient-gold: linear-gradient(135deg, #A97E5F 0%, #E3C49F 50%, #A97E5F 100%);
  --gradient-bronze: linear-gradient(135deg, #8C6A4F 0%, #C9A184 100%);
  --gradient-fade: linear-gradient(180deg, transparent 0%, #1B1712 100%);

  /* Sayfanın sıcak zemin geçişi — referanstaki ışık sağ alttan gelir */
  /* Üç katman: (1) sağ alt köşedeki ana parıltı, (2) sağ kenar boyunca
     yukarı uzanan sıcak kuyruk, (3) alt kenar boyunca sola uzanan kuyruk.
     Tek bir daire referanstaki dağılımı vermiyordu: merkez fazla açılıyor,
     kenarlar fazla kararıyordu. */
  --gradient-sayfa:
    radial-gradient(88% 82% at 100% 100%, #7F725E 0%, #6B6153 14%, #474038 32%, rgba(27, 23, 18, 0) 64%),
    radial-gradient(44% 82% at 106% 62%, #857761 0%, #64594B 34%, rgba(27, 23, 18, 0) 84%),
    radial-gradient(118% 40% at 38% 104%, #35302A 0%, rgba(27, 23, 18, 0) 76%);

  /* Tipografi */
  --font-display: 'Playfair Display', serif;
  --font-hero: 'Playfair Display', 'Bodoni Moda', serif;
  --font-quote: 'Cormorant Garamond', serif;
  --font-script: 'Great Vibes', 'Cormorant Garamond', cursive;
  --font-body: 'Outfit', sans-serif;

  /* Boşluk / Ölçek */
  --section-padding: clamp(4rem, 10vw, 9rem);
  --container-width: min(1280px, 92vw);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* Geçişler */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-mid: 0.6s;
  --dur-slow: 1.1s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Çift dokunuşla yakınlaştırmayı kapatır; iki parmakla yakınlaştırma
     js/yakinlastirma.js tarafından engelleniyor. */
  touch-action: manipulation;
  scroll-behavior: smooth;
  font-size: 16px;
  /* Mobil tarayıcıların dokunmada bastığı mavi kutu kapatılıyor; geri
     bildirimi düğmelerin kendi :active durumları veriyor. */
  -webkit-tap-highlight-color: transparent;
}

/* Safari/Chrome mobilde vurgu bazı öğelere ayrıca uygulanıyor, o yüzden
   tıklanabilir öğelerde de tekrarlanıyor. */
a, button, summary, label, input, select, textarea,
[role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kaydırma kilidi: height:100vh gövdeyi ekran boyuna düşürüp sayfanın
   altını kırpıyor ve kaydırma konumunu bozuyordu. Bunun yerine gövde
   olduğu yerde sabitleniyor; konumu JS (scrollLock) top ile koruyor. */
body.no-scroll {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }

::selection { background: var(--color-gold); color: var(--color-bg-primary); }

/* Erişilebilirlik: klavye odağı */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  background: var(--color-gold);
  color: var(--color-bg-primary);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Ortak Yardımcılar ---------- */
.container {
  width: var(--container-width);
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gradient-gold);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: 1.2rem;
}

.section-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.section-head {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center .section-sub { margin-inline: auto; }
.section-head.center .eyebrow::before { display: none; }

section { position: relative; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 999px;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* Referanstaki ana eylem: krem dolgu, koyu yazı */
.btn-primary {
  color: var(--color-ink);
  background: linear-gradient(135deg, #EFE4D2 0%, #F7EFE1 52%, #E6D8C2 100%);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.65);
}

.btn-outline {
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(6px);
}
.btn-outline:hover {
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* ==========================================================================
   GİRİŞ PERDESİ — yükleme ekranı

   Karanlık bir salon. Tavandaki vitrin lambası titreyerek yanar, huzmede
   toz zerreleri süzülür, yerde bir ışık havuzu açılır. Logo ışığın içinden
   soldan sağa yazılır gibi netleşir; ardından harflerin üstünden altın bir
   parıltı geçer. Altında ince, altın bir yükleme çizgisi dolar. Bitince
   yazı "Hoş geldiniz"e döner, perde ortadan bir göz bebeği gibi açılır ve
   girişin vitrin ışığı devralır.

   --hiz bütün gecikme ve süreleri ölçekler: ilk ziyarette 1, aynı
   oturumda eve dönüşte kısa sürüm için 0.4 (main.js · .is-kisa).
   ========================================================================== */
@property --iris {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -20%;
}

#loading-screen {
  --hiz: 1;
  --isik: 255, 226, 176;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: default;
  background:
    radial-gradient(120% 90% at 50% 40%, #16120D 0%, #0D0B08 55%, #060504 100%);
}
#loading-screen.is-kisa { --hiz: 0.4; }
#loading-screen.hidden { display: none; }

/* ---------- Sahne: huzme, hâle, ışık havuzu, toz, gren ---------- */
.giris-sahne { position: absolute; inset: 0; pointer-events: none; }
.giris-sahne > * { position: absolute; }

.giris-huzme {
  left: 50%;
  top: -8%;
  width: 150vmax;
  height: 118%;
  transform: translateX(-50%);
  background: conic-gradient(from 167deg at 50% 0%,
    rgba(var(--isik), 0) 0deg,
    rgba(var(--isik), 0.12) 6deg,
    rgba(255, 238, 208, 0.3) 13deg,
    rgba(var(--isik), 0.12) 20deg,
    rgba(var(--isik), 0) 26deg,
    rgba(var(--isik), 0) 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
  filter: blur(6px);
  opacity: 0;
  animation: girisLamba calc(1.3s * var(--hiz)) linear calc(0.15s * var(--hiz)) forwards;
}
/* Lamba yanarken bir iki kez titrer, sonra oturur */
@keyframes girisLamba {
  0%   { opacity: 0; }
  12%  { opacity: 0.55; }
  18%  { opacity: 0.12; }
  30%  { opacity: 0.7; }
  36%  { opacity: 0.35; }
  100% { opacity: 1; }
}

/* Lambanın kendisi: tavanda, huzmenin tepesinde parlayan bir nokta */
.giris-kaynak {
  left: 50%;
  top: 0;
  width: 220px;
  height: 90px;
  transform: translate(-50%, -45%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 226, 0.95) 0%, rgba(var(--isik), 0.45) 30%, rgba(var(--isik), 0) 100%);
  filter: blur(2px);
  opacity: 0;
  animation: girisLamba calc(1.3s * var(--hiz)) linear calc(0.15s * var(--hiz)) forwards;
}

/* Logonun arkasındaki sıcak hâle */
.giris-hale {
  left: 50%;
  top: 44%;
  width: min(900px, 130vmin);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 161, 132, 0.2) 0%, rgba(201, 161, 132, 0.06) 38%, transparent 66%);
  opacity: 0;
  animation: girisBelir calc(1.6s * var(--hiz)) var(--ease-out) calc(0.6s * var(--hiz)) forwards,
             girisNefes 5s ease-in-out calc(2.2s * var(--hiz)) infinite alternate;
}
/* Yerdeki ışık havuzu */
.giris-havuz {
  left: 50%;
  bottom: 9%;
  width: min(760px, 110vw);
  height: min(150px, 22vw);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--isik), 0.2) 0%, rgba(var(--isik), 0.07) 55%, transparent 100%);
  filter: blur(8px);
  opacity: 0;
  animation: girisBelir calc(1.6s * var(--hiz)) var(--ease-out) calc(0.55s * var(--hiz)) forwards;
}
.giris-toz {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: girisBelir calc(1.8s * var(--hiz)) var(--ease-out) calc(0.5s * var(--hiz)) forwards;
}
/* İnce film greni ve köşe kararması: sahneyi dijital düzlükten kurtarır */
.giris-gren {
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.85 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  animation: girisGren 0.9s steps(6) infinite;
}
.giris-sahne::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 42%, transparent 45%, rgba(4, 3, 2, 0.75) 100%);
}
@keyframes girisGren {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-6%, -2%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}
@keyframes girisBelir { from { opacity: 0; } to { opacity: 1; } }
@keyframes girisNefes { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.08); } }

/* ---------- Orta: logo, ömür, yazı ---------- */
.giris-orta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.8rem, 4.5vh, 2.8rem);
  margin-top: -3vh;
  text-align: center;
}

.giris-logo {
  position: relative;
  width: clamp(250px, 36vw, 420px);
  aspect-ratio: 611 / 185;
}
/* Işık logoyu soldan sağa yazar: yumuşak kenarlı bir maske kayarken
   bulanıklık ve parlaklık oturur. */
.giris-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(12px) brightness(1.8);
  opacity: 0;
  transform: scale(1.05);
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: girisYazil calc(1.7s * var(--hiz)) cubic-bezier(0.25, 0.1, 0.2, 1) calc(0.55s * var(--hiz)) forwards;
}
@keyframes girisYazil {
  0%   { opacity: 0; filter: blur(12px) brightness(1.8); transform: scale(1.05); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  25%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
/* Harflerin üstünden geçen altın parıltı: logonun kendisi maske */
.giris-logo-parilti {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 238, 200, 0.95) 50%, transparent 62%);
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask: url("../assets/images/brand/logo-light.png") center / 100% 100% no-repeat;
  mask: url("../assets/images/brand/logo-light.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: girisParilti calc(1.3s * var(--hiz)) var(--ease-in-out) calc(2s * var(--hiz)) forwards;
}
@keyframes girisParilti { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* Yükleme çizgisi: yazının altında ince bir iz; dolan kısım altın, ucunda
   küçük bir ışık */
.giris-cizgi {
  display: flex;
  justify-content: center;
  margin-top: -0.9rem;
  opacity: 0;
  animation: girisBelir calc(1s * var(--hiz)) var(--ease-out) calc(1.1s * var(--hiz)) forwards;
}
.giris-cizgi i {
  position: relative;
  display: block;
  width: clamp(150px, 20vw, 220px);
  height: 1px;
  background: rgba(243, 236, 227, 0.16);
}
.giris-cizgi b {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(201, 161, 132, 0.4) 0%, #E3C49F 100%);
}
/* Çizginin ucundaki ışık: ölçeklenen çizgiden bağımsız, left ile gider */
.giris-cizgi i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--uc, 0%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #F6E7C8;
  box-shadow: 0 0 10px 3px rgba(var(--isik), 0.55), 0 0 26px 8px rgba(201, 161, 132, 0.25);
}

.loader-text {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(243, 236, 227, 0.62);
  opacity: 0;
  animation: girisBelir calc(1s * var(--hiz)) var(--ease-out) calc(1.25s * var(--hiz)) forwards;
  transition: opacity 0.35s var(--ease-out), color 0.35s var(--ease-out), letter-spacing 0.9s var(--ease-out);
}
.loader-text.is-degisiyor { opacity: 0 !important; }
#loading-screen.is-tamam .loader-text { color: #EFE0C4; letter-spacing: 0.42em; }
@keyframes girisYuksel { to { opacity: 1; transform: none; } }

.giris-gec {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom));
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 236, 227, 0.55);
  border: 1px solid rgba(243, 236, 227, 0.14);
  background: rgba(243, 236, 227, 0.04);
  opacity: 0;
  animation: girisBelir 0.8s var(--ease-out) calc(1.4s * var(--hiz)) forwards;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.giris-gec:hover { color: var(--color-text-primary); border-color: rgba(243, 236, 227, 0.35); }
#loading-screen.is-kisa .giris-gec { display: none; }

/* ---------- Açılış: perde ortadan açılır ---------- */
#loading-screen.is-acilis {
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent var(--iris), #000 calc(var(--iris) + 16%));
  mask-image: radial-gradient(circle at 50% 44%, transparent var(--iris), #000 calc(var(--iris) + 16%));
  animation:
    girisIris 1.25s cubic-bezier(0.7, 0, 0.2, 1) forwards,
    girisSon 1.25s ease-in 0.2s forwards;
}
#loading-screen.is-acilis .giris-orta {
  transition: transform 1.1s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.7s ease-in;
  transform: scale(1.1);
  opacity: 0;
}
#loading-screen.is-acilis .giris-huzme { animation: none; opacity: 1; filter: blur(6px) brightness(1.6); transition: filter 0.6s; }
#loading-screen.is-acilis .giris-gec { display: none; }
@keyframes girisIris { from { --iris: -20%; } to { --iris: 150%; } }
@keyframes girisSon { to { opacity: 0; } }

/* Hareket azaltılmışsa: titreme, toz, gren ve yazılma yok; sakin bir belirme */
@media (prefers-reduced-motion: reduce) {
  .giris-huzme, .giris-kaynak, .giris-hale, .giris-havuz, .giris-cizgi, .loader-text, .giris-gec {
    animation: girisBelir 0.5s ease-out forwards;
  }
  .giris-logo img { animation: none; opacity: 1; filter: none; transform: none; -webkit-mask-image: none; mask-image: none; }
  .giris-logo-parilti, .giris-toz, .giris-gren { display: none; }
  #loading-screen.is-acilis { -webkit-mask-image: none; mask-image: none; animation: girisSon 0.5s ease-out forwards; }
  #loading-screen.is-acilis .giris-orta { transform: none; }
}

/* ---------- Custom Cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--color-gold); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--color-border-strong);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s;
}
.cursor-ring.is-active { width: 54px; height: 54px; border-color: var(--color-gold); }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 1.6rem 0;
  transition: padding var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.navbar-inner {
  width: var(--container-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar.is-scrolled {
  padding: 0.9rem 0;
  background: rgba(22, 21, 20, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--color-border), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

/* ---------- Logo ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img {
  width: var(--brand-width, 172px);
  height: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand:hover img { opacity: 0.72; }
.navbar.is-scrolled .brand img { --brand-width: 152px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2vw, 2.4rem);
}
.nav-links a {
  position: relative;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  padding-bottom: 4px;
  transition: color var(--dur-fast);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--color-gold);
  transition: width var(--dur-fast) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--color-text-primary); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  z-index: 901;
}
.nav-toggle span {
  height: 1.5px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ==========================================================================
   HERO / GİRİŞ
   Tipografik bir müze levhası: künye bilgisi ekranın ortasında simetrik
   olarak dizilir, çevresinde ince çerçeve işaretleri ve süzülen tanecikler
   durur. Tüm ölçüler clamp() ile 360px'ten geniş ekrana kadar akışkan
   biçimde ölçeklenir.
   ========================================================================== */
.hero {
  --line: rgba(169, 126, 95, 0.32);

  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.6rem, 10svh, 7.5rem) 0 clamp(4.5rem, 12svh, 7.5rem);
  overflow: hidden;
}

/* Kâğıt dokusu — ayrı bir görsel dosyası gerektirmeyen ince tane */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Köşe çerçevesi (galeri levhası hissi) ---------- */
.hero-frame {
  position: absolute;
  inset: clamp(12px, 2.4vw, 30px);
  z-index: 1;
  pointer-events: none;
}
.hero-frame span {
  position: absolute;
  width: clamp(16px, 3vw, 30px);
  height: clamp(16px, 3vw, 30px);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 1.5s;
}
.hero-frame span:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hero-frame span:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.hero-frame span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.hero-frame span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.hero.hero-in .hero-frame span { opacity: 1; }

/* Sol kenarda dikey künye şeridi — yalnızca geniş ekranda */
.hero-plate {
  display: none;
  position: absolute;
  left: clamp(26px, 3.4vw, 52px);
  top: 50%;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 1.7s;
}
.hero.hero-in .hero-plate { opacity: 0.75; }

/* ---------- Sahne ---------- */
.hero-inner {
  position: relative;
  z-index: 2;
  width: var(--container-width);
  margin-inline: auto;
}

/* Tek sütun: üstte giriş sahnesi, altında künye (bkz. GİRİŞ SAHNESİ).
   Eskiden künye solda, çerçeveli portre sağdaydı; giriş artık her
   genişlikte mobildeki sahne düzenini kullanıyor. */
.hero-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* ---------- Künye ---------- */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
}

.hero-eyebrow {
  font-size: clamp(0.62rem, 1.5vw, 0.8rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: clamp(0.8rem, 2.2svh, 1.6rem);
}

.hero-title {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: min(clamp(3.2rem, 14vw, 8rem), 17svh);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.hero-title-mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.1em;
  vertical-align: bottom;
}
.hero-title-mask > span {
  display: inline-block;
  /* Koyu zeminde açık krem; ortadan geçen altın parıltı korunuyor. */
  background: linear-gradient(100deg, #EFE7DC 0%, #F6F0E7 36%, #E3C49F 47%, #F6F0E7 58%, #EFE7DC 100%);
  background-size: 280% 100%;
  background-position: 118% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero.hero-in .hero-title-mask > span { animation: textShimmer 9s var(--ease-in-out) 3.2s infinite; }

/* Tarih satırı: iki yanında merkezden açılan ince çizgiler */
/* Ömrünün iki ucu, adın altında ve alıntının üstünde: bir müze künyesi
   gibi, iki yanından merkezden açılan ince çizgilerle. Yazısı başlığın
   serifi (--font-hero); alıntı zaten italik bir serif olduğu için burada
   düz ve seyrek harflenmiş duruyor, ikisi birbirini tekrarlamıyor.

   Dar ekranda gizli: orada giriş bloğu zaten sıkışık ve aynı bilgi zaman
   çizelgesinde duruyor. Geniş ekranda açılıyor (bkz. GİRİŞ SAHNESİ). */
.hero-dates {
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 1.8vw, 1.3rem);
  margin-top: clamp(0.7rem, 1.8svh, 1.3rem);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.25vw, 1.26rem);
  letter-spacing: 0.3em;
  /* Harf aralığı sağa boşluk bırakıyor; çizgiyle arası eşitlensin diye
     son harfin payı geri alınıyor. */
  color: rgba(243, 236, 227, 0.82);
}
.hero-dates-yazi { margin-right: -0.3em; }
/* Çizgiler yazıdan dışarı doğru açılır. Sahnenin geri kalanıyla aynı
   mekanizma: başlangıç durumu yalnızca JS varken (.is-armed) kuruluyor,
   açılış da bir keyframe — böylece script çalışmazsa çizgiler olduğu
   gibi duruyor. */
.hero-dates .hero-rule {
  width: clamp(30px, 5vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 161, 132, 0) 0%, rgba(201, 161, 132, 0.62) 100%);
  transform-origin: right center;
}
.hero-dates .hero-rule:last-child {
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(201, 161, 132, 0.62) 0%, rgba(201, 161, 132, 0) 100%);
}
.hero.is-armed .hero-dates .hero-rule { transform: scaleX(0); }
.hero.is-armed.hero-in .hero-dates .hero-rule {
  animation: tarihCizgi 1.1s var(--ease-out) 1.9s both;
}
@keyframes tarihCizgi {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero-dash { color: var(--color-gold); }

.hero-quote {
  margin: clamp(1.4rem, 3.2svh, 2.6rem) 0 0;
  max-width: 42ch;
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--color-text-primary);
}

.hero-actions {
  margin-top: clamp(1.8rem, 4.4svh, 3.2rem);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.6rem, 1.6vw, 1rem);
}
.hero-actions .btn {
  padding: clamp(0.72rem, 1.6vh, 1.05rem) clamp(1.1rem, 2.6vw, 2.1rem);
  font-size: clamp(0.74rem, 1.4vw, 0.92rem);
}
.hero-actions .btn svg { flex: none; }

/* ---------- Girişin asıl eylemi: Dijital Müzeye Gir ----------
   Navbardaki "Dijital Müze" düğmesiyle aynı altın; girişte gözün ilk
   bulduğu yer olsun diye üç sakin hareket taşır: birkaç saniyede bir
   yüzeyinden geçen ışık, çevresinde nefes alan bir hâle ve üzerine
   gelince ileri kayan ok. Hareket azaltılmışsa hepsi durur. */
.btn-muze {
  color: #FFFFFF;
  font-weight: 600;
  background: linear-gradient(135deg, #A9821C 0%, #C9A227 52%, #A9821C 100%);
  box-shadow:
    0 12px 32px -10px rgba(201, 162, 39, 0.55),
    inset 0 1px 0 rgba(255, 244, 214, 0.45),
    inset 0 -1px 0 rgba(90, 64, 10, 0.35);
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
/* Üzerine gelince altın açılır, yazı mürekkebe döner (navbarla aynı) */
.btn-muze::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #E2C255 0%, #F0D77C 52%, #E2C255 100%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.btn-muze:hover { color: var(--color-ink); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(201, 162, 39, 0.7), inset 0 1px 0 rgba(255, 250, 230, 0.6); }
.btn-muze:hover::before { opacity: 1; }

/* Nefes alan hâle: düğmenin dışına doğru açılıp söner */
.btn-muze::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.5);
  animation: muze-hale 3.2s var(--ease-out) 2.6s infinite;
}
@keyframes muze-hale {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(201, 162, 39, 0); }
  100% { box-shadow: 0 0 0 14px rgba(201, 162, 39, 0); }
}

/* Yüzeyden geçen ışık: dar, eğik bir parıltı şeridi */
.btn-muze-isik {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.btn-muze-isik::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 248, 225, 0.55) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: muze-isik 5.5s var(--ease-in-out) 2.2s infinite;
}
@keyframes muze-isik {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  28%  { transform: translateX(330%) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}

.btn-muze .icon-ok { transition: transform var(--dur-fast) var(--ease-out); }
.btn-muze:hover .icon-ok { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn-muze::after,
  .btn-muze-isik::before { animation: none; }
}

/* ---------- Sahnelenmiş giriş (JS 'hero-in' sınıfını ekler) ---------- */
/* is-armed yalnızca JS varken eklenir; böylece script çalışmazsa içerik
   gizli kalmaz. */
.hero.is-armed .hero-anim {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s var(--ease-out) var(--d, 0ms),
    transform 1s var(--ease-out) var(--d, 0ms);
}
.hero.is-armed.hero-in .hero-anim { opacity: 1; transform: none; }

.hero.is-armed .hero-title-mask > span {
  transform: translateY(112%);
  transition: transform 1.25s var(--ease-out) 620ms;
}
.hero.is-armed.hero-in .hero-title-mask > span { transform: none; }

.hero-eyebrow { --d: 480ms; }
.hero-dates   { --d: 900ms; }
.hero-quote   { --d: 1080ms; }
.hero-actions { --d: 1240ms; }

/* ==========================================================================
   GİRİŞ SAHNESİ

   Karanlık bir salonda tek bir vitrin ışığı yanar: tavandan inen yumuşak
   bir huzme, başın arkasında altın bir hâle ve koyu bir disk. Portre o
   ışığın altında karanlıktan belirir, başının yanında imzası kendini yazar;
   geniş ekranda iki yanında ömrünün yılları durur ve adı, ceketin zemine
   karışan eteğinin üstüne biner — bir sergi afişi gibi.

   Mobil ve masaüstü aynı sahneyi kullanıyor. Dar ekranın ölçüleri
   responsive.css'te; burada masaüstünün ölçüleri ve iki genişliğin
   paylaştığı giriş koreografisi var.

   Konumlandırma notu: öğeler left: 50% + translateX(-50%) ile ortalanıyor,
   giriş canlandırmaları ise ayrı `scale`, derinlik kayması da ayrı
   `translate` özelliğini kullanıyor; üçü birbirinin üstüne yazmıyor.
   transform-origin'in x'i bu yüzden 0: kutunun sol kenarı, ortalamadan
   sonra sahnenin tam ortasına denk gelen noktadır.
   ========================================================================== */
.hero-sahne { display: none; }
.hero-sahne > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* Vitrin ışığı: tepeden başın üstüne inen huzme. Tepesi sahnenin çok
   üstünde (salonun tavanı), iki kenarı yumuşak; aşağı indikçe söner. */
.hero-sahne-huzme {
  left: 50%;
  top: -62%;
  width: 100%;
  height: 150%;
  transform: translateX(-50%);
  transform-origin: 0 0;
  background: conic-gradient(from 166deg at 50% 0%,
    rgba(255, 226, 176, 0) 0deg,
    rgba(255, 226, 176, 0.13) 9deg,
    rgba(255, 232, 190, 0.17) 14deg,
    rgba(255, 226, 176, 0.13) 19deg,
    rgba(255, 226, 176, 0) 28deg,
    rgba(255, 226, 176, 0) 360deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 86%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 48%, transparent 86%);
  filter: blur(4px);
}

/* ---------- Giriş koreografisi ----------
   Yükleme perdesi kalkınca (.hero-in) sırayla: ışık yanar, hâle açılır,
   portre karanlıktan netleşerek belirir, ad yükselir, imza soldan sağa
   kendini yazar. Ardından hâle yavaşça nefes alır.
   Başlangıç durumu yalnızca JS varken (.is-armed) uygulanıyor; script
   çalışmazsa sahne olduğu gibi görünür. Hareket azaltma açıksa
   animations.css bütün süreleri sıfırlıyor, sahne son hâliyle açılır. */
.hero.is-armed .hero-sahne-huzme,
.hero.is-armed .hero-sahne-isik,
.hero.is-armed .hero-sahne-disk,
.hero.is-armed .hero-sahne-portre { opacity: 0; }
.hero.is-armed .hero-sahne-imza {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.hero.is-armed.hero-in .hero-sahne-huzme {
  animation: sahneHuzme 2.6s var(--ease-out) 0.1s both;
}
.hero.is-armed.hero-in .hero-sahne-isik {
  animation:
    sahneIsik 2.4s var(--ease-out) 0.35s both,
    sahneNefes 7s ease-in-out 2.75s infinite alternate;
}
.hero.is-armed.hero-in .hero-sahne-disk {
  animation: sahneBelir 1.8s var(--ease-out) 0.5s both;
}
.hero.is-armed.hero-in .hero-sahne-portre {
  animation: sahnePortre 2.4s var(--ease-out) 0.45s both;
}
.hero.is-armed.hero-in .hero-sahne-imza {
  animation: sahneImza 2.3s cubic-bezier(0.45, 0.05, 0.3, 1) 1.55s both;
}

@keyframes sahneHuzme {
  0%   { opacity: 0; }
  38%  { opacity: 0.55; }
  46%  { opacity: 0.4; }
  100% { opacity: 1; }
}
@keyframes sahneIsik {
  from { opacity: 0; scale: 0.72; }
  to   { opacity: 1; scale: 1; }
}
@keyframes sahneNefes {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0.74; scale: 1.06; }
}
@keyframes sahneBelir {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sahnePortre {
  from { opacity: 0; scale: 1.07; filter: blur(14px) brightness(0.3); }
  55%  { opacity: 1; }
  to   { opacity: 1; scale: 1; filter: blur(0) brightness(1); }
}
@keyframes sahneImza {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ---------- Geniş ekran ----------
   Tek sütun, her şey ortada: sahne üstte, künye altında. --H sahnenin
   yüksekliği; hem sahnedeki her öğe hem de adın portreye binme payı ona
   göre ölçülüyor, böylece kompozisyon her ekranda aynı oranda kalıyor.
   Yükseklik ekranın boyuna, genişliğe göre de sınırlı: dar ve uzun bir
   pencerede yıllar kenardan taşmasın. */
@media (min-width: 901px) {
  /* Alt pay, "Kaydır" göstergesinden (~80 px) her zaman büyük tutuluyor:
     eskiden 11svh'ydi ve dizüstü yüksekliğinde gösterge düğmelerin
     altına giriyordu. Sahne de 54svh'den 42svh'ye indi; kazanılan yer
     künyenin satır aralarına ve bu alt paya dağıtıldı. Ölçüldü:
     1440×800, 1481×956 ve 1920×1080'de giriş ekrana sığıyor, düğmelerle
     gösterge arasında en az ~40 px kalıyor. */
  .hero {
    --H: min(42svh, 38vw);
    padding-top: clamp(4.8rem, 10svh, 7rem);
    padding-bottom: clamp(7.4rem, 15.5svh, 9.5rem);
  }

  .hero-columns {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
  }

  .hero-sahne {
    display: block;
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Izgara öğeleri ortalanıyor; tam genişlik payı zaten ortalıyor */
    justify-self: start;
    height: var(--H);
    --d: 150ms;
  }

  /* Başın arkasındaki sıcak hâle */
  .hero-sahne-isik {
    left: 50%;
    top: -16%;
    width: calc(var(--H) * 2.1);
    height: 104%;
    transform: translateX(-50%);
    transform-origin: 0 40%;
    background: radial-gradient(38% 44% at 50% 42%,
      rgba(219, 176, 104, 0.34) 0%,
      rgba(201, 161, 132, 0.14) 46%,
      rgba(27, 23, 18, 0) 74%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 84%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 84%);
  }

  /* Başla aynı eksende koyu disk; alt ucu omuzlarda söner */
  .hero-sahne-disk {
    left: 50%;
    top: 1%;
    width: calc(var(--H) * 0.76);
    aspect-ratio: 1;
    transform: translateX(-50%);
    transform-origin: 0 50%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(66, 55, 41, 0.82) 0%,
      rgba(47, 39, 30, 0.6) 60%,
      rgba(27, 23, 18, 0) 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 78%);
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 78%);
  }

  /* Kesim portre: dar ekrandakiyle aynı iki dosya (JPEG gövde + alfa
     maskesi). Başın ortası görselin ortasında değil, %5,85 solunda;
     kaydırma bu yüzden (bkz. responsive.css · .hero-sahne-portre). */
  .hero-sahne-portre {
    left: 50%;
    bottom: 0;
    height: 100%;
    aspect-ratio: 820 / 648;
    transform: translateX(calc(-50% + 5.85%));
    transform-origin: 0 30%;
    background: url("../assets/images/portrait/izzet-baysal-kesim.jpg") no-repeat center bottom / contain;
    /* İki maske üst üste: dosyanın kendi kesimi ve ek bir alt sönüm.
       Ad ve künye ceketin üstüne bindiği için göğüs hizasından itibaren
       portre dar ekrandakinden daha erken karanlığa karışıyor; yoksa
       künye satırı kravatın desenine takılıyordu. */
    -webkit-mask:
      url("../assets/images/portrait/izzet-baysal-maske.png") no-repeat center bottom / contain,
      linear-gradient(180deg, #000 0%, #000 50%, transparent 86%) no-repeat 0 0 / 100% 100%;
    -webkit-mask-composite: source-in;
    mask:
      url("../assets/images/portrait/izzet-baysal-maske.png") no-repeat center bottom / contain,
      linear-gradient(180deg, #000 0%, #000 50%, transparent 86%) no-repeat 0 0 / 100% 100%;
    mask-composite: intersect;
  }

  /* İmza başın sağındaki karanlıkta, hafif yukarı eğik */
  .hero-sahne-imza {
    left: calc(50% + var(--H) * 0.25);
    top: 7%;
    width: calc(var(--H) * 0.52);
    height: calc(var(--H) * 0.24);
    background: url("../assets/images/brand/imza.png") no-repeat left center / contain;
    opacity: 0.85;
    transform: rotate(-8deg);
    transform-origin: left center;
  }

  /* Künye: ortada; ad, ceketin zemine karışan eteğinin üstüne biner */
  .hero-content {
    text-align: center;
    margin-top: calc(var(--H) * -0.15);
  }
  .hero-eyebrow { margin-bottom: clamp(0.8rem, 1.8svh, 1.3rem); }
  .hero-title {
    font-size: min(clamp(3.4rem, 8vw, 7.4rem), 13.5svh);
    filter: drop-shadow(0 10px 34px rgba(10, 8, 6, 0.75));
  }
  .hero-dates { margin-top: clamp(1rem, 2.4svh, 1.6rem); }
  .hero-quote {
    margin: clamp(0.9rem, 2.2svh, 1.4rem) auto 0;
    max-width: none;
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    color: rgba(243, 236, 227, 0.86);
  }
  .hero-actions {
    justify-content: center;
    margin-top: clamp(1.6rem, 3.6svh, 2.6rem);
  }

  /* Kaydır göstergesi biraz daha derli toplu: kısa çizgi, alta yakın */
  .scroll-indicator { bottom: clamp(1rem, 2.4svh, 2rem); gap: 0.5rem; }
  .scroll-line { height: clamp(22px, 3.6svh, 36px); }

  /* Alçak masaüstü penceresi (≈800 px): sahne ve ad biraz daha küçülür ki
     giriş tek ekrana sığsın ve gösterge düğmelerden ayrı dursun */
  @media (max-height: 860px) {
    .hero { --H: min(37svh, 38vw); }
    .hero-title { font-size: min(clamp(3.2rem, 8vw, 7rem), 12.5svh); }
  }
  .hero-dates { display: flex; }

  /* Sıra: önce ışık ve portre, ad ancak yüz netleşirken yükselir */
  .hero.is-armed .hero-title-mask > span { transition-delay: 1.15s; }
  .hero-eyebrow { --d: 1250ms; }
  .hero-dates   { --d: 1600ms; }
  .hero-quote   { --d: 1800ms; }
  .hero-actions { --d: 2000ms; }

}

/* ---------- Kaydırma göstergesi ---------- */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3svh, 2.4rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-secondary);
  transition: color var(--dur-fast);
}
.scroll-indicator:hover { color: var(--color-gold); }
/* Giriş animasyonu iç öğelerde: göstergenin kendi opaklığını GSAP scroll ile
   yönetiyor, üzerine yazarsak başlangıç değeri kilitleniyor. */
.scroll-indicator span,
.scroll-line {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 1.6s;
}
.hero.hero-in .scroll-indicator span,
.hero.hero-in .scroll-line { opacity: 1; }
.scroll-indicator span {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: clamp(28px, 5svh, 46px);
  background: linear-gradient(180deg, var(--color-gold) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--color-gold-light);
  animation: scrollDrip 1.8s var(--ease-in-out) infinite;
}

/* ==========================================================================
   TIMELINE
   (Bu başlığın açılış işareti eksikti; kural bu yüzden hiç uygulanmıyor,
   zaman çizelgesinin üst boşluğu sıfır kalıyordu.)
   ========================================================================== */
.timeline-section {
  padding: var(--section-padding) 0;
  background: transparent;
}

/* ==========================================================================
   MÜZE (THREE.JS)
   ========================================================================== */
.museum-section {
  padding: var(--section-padding) 0 0;
  background: transparent;
}

.museum-head { width: var(--container-width); margin-inline: auto; }

/* Sahne, sayfanın geri kalanıyla aynı hizada duran çerçeveli bir pencere:
   tam genişlikte ve 82vh yüksekliğindeyken ekranı boğuyordu. */
.museum-stage {
  position: relative;
  width: var(--container-width);
  max-width: 1120px;
  margin: 2rem auto 0;
  height: min(58svh, 560px);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 26px 60px -40px rgba(0, 0, 0, 0.6);
}

#museum-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  /* Panorama fotoğrafı ekranda biraz cansız kalıyor; hafif canlandırma */
  filter: saturate(1.14) contrast(1.07);
}

.museum-hint {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 1.6rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  /* Panoramanın parlak yerlerinin önünde ikincil renk okunmuyordu:
     şerit koyu bir zemine oturuyor. */
  background: rgba(16, 13, 10, 0.72);
  border: 1px solid rgba(243, 236, 227, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: #EDE3D6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transition: opacity 0.6s;
}
/* Her ibare bir ikon ve bir yazıdan oluşuyor */
.museum-hint .hint-oge { display: inline-flex; align-items: center; gap: 0.42rem; }
.museum-hint .hint-ikon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--color-gold-light);
  opacity: 0.95;
}
.museum-hint.is-hidden { opacity: 0; pointer-events: none; }

.museum-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  background: var(--color-bg-primary);
  transition: opacity 0.7s var(--ease-in-out), visibility 0.7s;
}
.museum-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.museum-loading-bar {
  width: 180px; height: 2px;
  background: rgba(243, 236, 227, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.museum-loading-fill {
  height: 100%; width: 0%;
  background: var(--gradient-gold);
  transition: width 0.2s ease-out;
}

/* ---------- Sanal tur noktaları ---------- */
/* Nokta, sahnenin üstünde duran gerçek bir düğmedir; konumunu her karede
   museum.js panoramadaki yönünden hesaplayıp satır içi transform ile yazar.
   Bu yüzden kök öğeye CSS'te transform verilmez — büyüme, süzülme ve dalga
   animasyonlarının tümü içteki .hotspot-govde ve kardeşlerinde çalışır. */
.museum-hotspots {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.museum-hotspot {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.museum-hotspot.is-gorunur { opacity: 1; visibility: visible; }
.museum-stage.is-locked .museum-hotspots,
.museum-stage.is-gecis .museum-hotspots { opacity: 0; pointer-events: none; }

.hotspot-govde {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: nokta-suzul 3.4s var(--ease-in-out) infinite;
  transition: transform var(--dur-fast) var(--ease-out);
}
.museum-hotspot:hover .hotspot-govde,
.museum-hotspot:focus-visible .hotspot-govde {
  transform: scale(1.16);
  animation-play-state: paused;
}

/* Dolu altın disk: en parlak vitrinin önünde bile ayrışsın diye içi dolu,
   açık konturlu ve altında gölgeli. */
.hotspot-disk {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFF7EC 0%, #EBCDA8 44%, #C9A184 100%);
  border: 1px solid rgba(255, 246, 232, 0.9);
  box-shadow:
    0 0 0 5px rgba(201, 161, 132, 0.2),
    0 0 26px 4px rgba(227, 196, 159, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

/* Diskten dışa açılan üç dalga; gecikmeleri bölünerek atış sürekli olur */
.hotspot-dalga {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(235, 205, 168, 0.75);
  animation: nokta-dalga 2.9s var(--ease-out) infinite;
}
.hotspot-dalga.gecikme-1 { animation-delay: 0.95s; }
.hotspot-dalga.gecikme-2 { animation-delay: 1.9s; }

/* Etiket yalnızca noktanın üstüne gelince (ya da klavyeyle odaklanınca)
   açılır; salon, üstünde sürekli duran bir yazı olmadan görünsün. */
.hotspot-etiket {
  position: absolute;
  top: calc(50% + 26px);
  left: 50%;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: rgba(16, 13, 10, 0.78);
  border: 1px solid rgba(243, 236, 227, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, 7px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.museum-hotspot:hover .hotspot-etiket,
.museum-hotspot:focus-visible .hotspot-etiket { opacity: 1; transform: translate(-50%, 0); }

.museum-hotspot:focus-visible { outline: none; }
.museum-hotspot:focus-visible .hotspot-disk { border-color: #FFFFFF; }

/* Bilgi noktası: gidilecek değil bakılacak bir yeri işaret ettiği için
   gezinme noktasından ayrı bir silueti var — üç dalga yerine tek ve yavaş
   bir soluk. Rengi de ayrı: sedef beyazı, vitrinin kırmızı-turuncu ışığı
   içinde eriyordu; yerine parlak sarı altın ile koyu bir kontur geldi —
   açık zeminde kontur, koyu zeminde parlaklık taşıyor. */
.museum-hotspot.is-kart .hotspot-disk {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 36% 28%, #FFF1B8 0%, #F0C33C 45%, #C9A227 100%);
  border: 2px solid rgba(24, 18, 8, 0.78);
  box-shadow:
    0 0 0 3px rgba(255, 233, 160, 0.3),
    0 0 24px 5px rgba(240, 195, 60, 0.65),
    0 5px 14px rgba(0, 0, 0, 0.5);
}
.museum-hotspot.is-kart .hotspot-dalga {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-width: 2px;
  border-color: rgba(240, 195, 60, 0.8);
  animation-duration: 3.4s;
}
/* Fazla dalgalar bu türde kapalı: tek halka daha sakin okunuyor */
.museum-hotspot.is-kart .hotspot-dalga.gecikme-1,
.museum-hotspot.is-kart .hotspot-dalga.gecikme-2 { display: none; }

/* Geri dönüş noktası zemindedir; aynı biçim, daha sakin bronz ton */
.museum-hotspot.is-geri .hotspot-disk {
  background: radial-gradient(circle at 34% 28%, #F2E0CE 0%, #C9A184 46%, #8C6A4F 100%);
  box-shadow:
    0 0 0 5px rgba(169, 126, 95, 0.18),
    0 0 20px 3px rgba(169, 126, 95, 0.45),
    0 6px 16px rgba(0, 0, 0, 0.45);
}
.museum-hotspot.is-geri .hotspot-dalga { border-color: rgba(201, 161, 132, 0.6); }

@keyframes nokta-dalga {
  0%   { transform: scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes nokta-suzul {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Hareket azaltma tercihinde nokta durur ama görünürlüğünü korur */
@media (prefers-reduced-motion: reduce) {
  .hotspot-govde, .hotspot-dalga { animation: none; }
  .hotspot-dalga { opacity: 0.5; }
}


/* ---------- Duraklar arası perde ---------- */
/* Doku değişimi perde tam kapalıyken yapılır; süresi museum.js içindeki
   PERDE_SURESI ile aynı olmalıdır. */
.museum-veil {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: var(--color-bg-primary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.42s var(--ease-in-out), visibility 0.42s;
}
.museum-stage.is-gecis .museum-veil {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.veil-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-gold-light);
  opacity: 0;
}
.museum-stage.is-gecis .veil-pulse { animation: perde-nabiz 1.3s var(--ease-in-out) infinite; }
@keyframes perde-nabiz {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 0.9; transform: scale(1); }
}

/* ---------- Eser kartları ---------- */
/* Vitrindeki bilgi noktasına tıklanınca açılan katman. Sahnenin içinde
   durur; tam ekranda da panoramanın üstünde kalır.

   Katman kendisi kaymaz: kaydırma içteki .kart-kaydirma'da olur, böylece
   kapatma düğmesi katmanın köşesine çivilenir. Dikey ortalama, kayan
   alanın flex çocuğundaki `margin: auto` ile yapılıyor — justify-content
   ile ortalamanın tersine, içerik uzun olduğunda üst tarafa da
   kaydırılabiliyor. */
.museum-kartlar {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  overflow: hidden;
  background: rgba(10, 8, 6, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.museum-kartlar.is-open { opacity: 1; visibility: visible; }

.kart-kaydirma {
  flex: 1;
  display: flex;
  min-width: 0;
  padding: clamp(0.8rem, 2.4vw, 1.6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Katmanda birden çok kart seti duruyor (palto vitrini, çalışma masası…);
   noktanın hangisini açacağını museum.js seçiyor, yalnızca o set görünür. */
.kart-kutu {
  display: none;
  margin: auto;
  width: min(100%, 940px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.6vw, 1.2rem);
}
.kart-kutu.is-acik { display: grid; }

/* Dört kartlık set ikişerli iki sıra olur */
.kart-kutu-dort { width: min(100%, 900px); }

/* Kapatma düğmesi katmanın köşesinde sabit: kartlar kayarken yerinde kalır */
.kart-kapat {
  position: absolute;
  top: clamp(0.6rem, 1.8vw, 1rem);
  right: clamp(0.6rem, 1.8vw, 1rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text-primary);
  background: rgba(26, 21, 16, 0.92);
  border: 1px solid rgba(243, 236, 227, 0.24);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.kart-kapat:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
  transform: rotate(90deg);
}

.muze-kart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(38, 32, 25, 0.96) 0%, rgba(25, 21, 17, 0.96) 100%);
  box-shadow: 0 34px 80px -46px rgba(0, 0, 0, 0.95);
}

/* Fotoğraflar kırpılmıyor: palto dikey, levha yatay çerçevede duruyor;
   ikisini de aynı bantta kırpmak baş ya da etek kesiyordu. Kendi koyu
   zemininde bütün olarak duruyorlar. Yükseklik sahneye göre: salon küçük
   kutudayken kartların tamamı sığsın diye alçak, tam ekranda yüksek. */
/* Ölçüler iki kademeli: temel değerler sahne kendi kutusundayken kartların
   tamamının kaydırmadan sığmasına göre, .is-expanded altındakiler ise tam
   ekranın bolluğuna göre ayarlı. */
.kart-gorsel {
  margin: 0;
  height: clamp(78px, 13svh, 118px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 161, 132, 0.12) 0%, rgba(0, 0, 0, 0) 70%),
    #15110D;
  border-bottom: 1px solid var(--color-border);
}
.kart-gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }

.kart-metin { padding: clamp(0.7rem, 1.4vw, 1rem) clamp(0.8rem, 1.6vw, 1.15rem); }
.kart-ustbilgi {
  display: none;              /* dar sahnede yer açmak için; tam ekranda görünür */
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.muze-kart h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.25;
  color: var(--color-text-primary);
}
.kart-aciklama {
  margin: 0;
  font-size: clamp(0.72rem, 1vw, 0.8rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Öğütler numaralı ama madde imsiz: numaralar altın, metnin dışında durur.
   Punto, on maddenin çoğunun tek satırda kalacağı ölçüde seçildi. */
.ogut-liste {
  counter-reset: ogut;
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 0.22rem;
}
.ogut-liste li {
  counter-increment: ogut;
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-text-primary);
}
.ogut-liste li::before {
  content: counter(ogut, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--color-gold);
}

/* Tam ekranda her şey rahatlar */
.museum-stage.is-expanded .kart-gorsel { height: clamp(150px, 30svh, 300px); }
.museum-stage.is-expanded .kart-metin { padding: clamp(1rem, 1.8vw, 1.5rem); }
.museum-stage.is-expanded .kart-ustbilgi { display: block; }
.museum-stage.is-expanded .muze-kart h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin-bottom: 0.5rem; }
.museum-stage.is-expanded .kart-aciklama { font-size: 0.85rem; line-height: 1.7; }
.museum-stage.is-expanded .ogut-liste { margin-top: 1rem; padding-top: 0.9rem; gap: 0.5rem; }
.museum-stage.is-expanded .ogut-liste li { font-size: 0.83rem; line-height: 1.6; padding-left: 2.1rem; }
.museum-stage.is-expanded .ogut-liste li::before { font-size: 0.66rem; }

/* ---------- Salonun ortasına dönüş düğmesi ---------- */
/* Büyütme düğmesinin karşısında, sahnenin sağ üstünde; yalnızca ilk
   durağın dışındayken görünür. */
.museum-back {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EDE3D6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  /* Panoramanın parlak yerlerinin önünde ikincil renk okunmuyordu:
     şerit koyu bir zemine oturuyor. */
  background: rgba(16, 13, 10, 0.72);
  border: 1px solid rgba(243, 236, 227, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.museum-back.is-gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
.museum-back:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
  background: rgba(26, 21, 16, 0.88);
}
.museum-back svg { width: 16px; height: 16px; }
.museum-stage.is-locked .museum-back { opacity: 0; visibility: hidden; }

/* WebGL yoksa salon, panoramanın düz bir fotoğrafı olarak görünür */
.museum-stage.is-static {
  background-image: var(--panorama);
  background-size: cover;
  background-position: center;
}
.museum-stage.is-static #museum-canvas,
.museum-stage.is-static .museum-enter,
.museum-stage.is-static .museum-hotspots,
.museum-stage.is-static .museum-veil,
.museum-stage.is-static .museum-back,
.museum-stage.is-static .museum-expand { display: none; }

/* ==========================================================================
   MODAL (Timeline detay)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }

/* Kapatma düğmesi kutunun sabit bir köşesinde durur; içerik ayrı bir
   katmanda kayar. Önceden kutunun kendisi kaydığı için düğme yukarı
   kaçıyor ve uzun metinlerde (özellikle mobilde) gözden kayboluyordu. */
.modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(86svh, 760px);
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  transform: translateY(30px) scale(0.98);
  transition: transform 0.45s var(--ease-out);
}
.modal-overlay.is-open .modal-box { transform: translateY(0) scale(1); }

.modal-scroll {
  /* flex öğesi içeriğinin altına küçülmezse kaydırma hiç çalışmaz */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-close {
  position: absolute;
  top: clamp(0.9rem, 2.2vw, 1.4rem);
  right: clamp(0.9rem, 2.2vw, 1.4rem);
  z-index: 3;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  /* Görselin üzerine geldiğinde de okunur kalsın */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: var(--color-text-primary);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.modal-close svg { display: block; width: 16px; height: 16px; }
.modal-close:hover { color: var(--color-gold); border-color: var(--color-gold); transform: rotate(90deg); }

.modal-media {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.6rem;
  border: 1px solid var(--color-border);
}
.modal-media img { width: 100%; height: 100%; object-fit: cover; }
.modal-year { font-family: var(--font-display); color: var(--color-gold); font-size: 1.1rem; margin-bottom: 0.4rem; }
.modal-box h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1rem; }
.modal-box p { color: var(--color-text-secondary); font-weight: 300; }

/* ==========================================================================
   İLETİŞİM
   ========================================================================== */
.contact-section {
  padding: var(--section-padding) 0;
  background: transparent;
  position: relative;
}

.contact-grid {
  width: var(--container-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-info .section-title { margin-bottom: 1rem; }

.contact-detail {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.contact-detail svg { width: 18px; height: 18px; stroke: var(--color-gold); flex-shrink: 0; }

.social-links {
  display: flex;
  gap: 0.9rem;
  margin-top: 2.4rem;
}
.social-links a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
.social-links a svg { width: 18px; height: 18px; stroke: var(--color-text-primary); transition: stroke var(--dur-fast); }
.social-links a:hover { background: var(--color-gold); transform: translateY(-4px); border-color: var(--color-gold); }
.social-links a:hover svg { stroke: var(--color-bg-primary); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.field {
  position: relative;
}
.field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 0.55rem;
}
.field input, .field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field input:focus, .field textarea:focus {
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.085);
}
.field textarea { resize: vertical; min-height: 130px; }

.form-note {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  min-height: 1.2em;
}
.form-note.success { color: var(--color-gold-light); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--color-border);
  padding: 2.6rem 0;
}
.footer-inner {
  width: var(--container-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-inner p { color: var(--color-text-secondary); font-size: 0.85rem; }

/* Alt menü bağlantıları kaldırıldı; künye onların yerine, telif satırının
   karşısına geçti. */
.footer-inner .footer-credit {
  flex: 0 0 auto;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.footer-inner .footer-credit strong {
  font-weight: 500;
  color: var(--color-ink);
}

/* ---------- Sayaç / İstatistik şeridi ---------- */
/* Müze levhası dili: ince dikey ayraçlarla bölünmüş dört hücre, altın
   geçişli iri rakamlar ve altlarında küçük bir süsleme çizgisi. */
.stats-strip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(27, 23, 18, 0) 70%),
    linear-gradient(180deg, rgba(169, 126, 95, 0.05) 0%, rgba(169, 126, 95, 0.02) 100%);
}
.stats-inner {
  width: var(--container-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Hücreler satırın tamamını kaplar: "Eğitim ve sağlık eseri" iki satıra
     indiğinde komşu hücreler kısa kalıp yukarı yapışmasın, ayraç çizgileri
     de eşit boyda olsun. */
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  padding: clamp(2rem, 4.5vw, 3.4rem) 0;
}
/* Rakam ile etiket iki ayrı satırda: rakam satırı kendi boyunda (auto),
   etiket satırı kalan yüksekliği alır. Böylece dört rakam aynı hizada
   başlar — "Eğitim ve sağlık eseri" iki satıra indiğinde kendi sayısını
   yukarı kaydırmaz — etiketler ise kalan alanın ortasında durur. */
.stat-item {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: start;
  min-width: 0;
  padding-inline: clamp(0.4rem, 1.6vw, 1.4rem);
  text-align: center;
}
/* Hücreler arasında merkeze doğru soluklaşan ince ayraç */
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%, var(--color-border-strong) 35%, var(--color-border-strong) 65%, transparent 100%);
}
/* Rakamlar, Eserler sayfasındaki yıl rayıyla aynı yazı tipini kullanır
   (--font-body / 700); iki sayfadaki sayılar aynı dille okunsun. */
.stat-num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(160deg, #F0D9B8 0%, #D9B489 45%, #B98C68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rakam ile etiket arasındaki küçük süsleme çizgisi
   (.stat-num üzerinde değil: orada background-clip: text var) */
.stat-label::before {
  content: '';
  display: block;
  width: clamp(14px, 2.4vw, 26px);
  height: 1px;
  margin: clamp(0.5rem, 1.2vw, 0.8rem) auto clamp(0.45rem, 1vw, 0.7rem);
  background: var(--gradient-gold);
  opacity: 0.55;
}
.stat-label {
  max-width: 16ch;
  font-size: clamp(0.58rem, 1.05vw, 0.72rem);
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-wrap: balance;
}
/* ---------- Görsel yedeği (görsel yüklenemediğinde) ---------- */
.img-fallback {
  position: relative;
  background:
    linear-gradient(145deg, rgba(169, 126, 95, 0.10) 0%, rgba(255, 255, 255, 0.06) 45%, var(--color-bg-tertiary) 100%);
  overflow: hidden;
}
.img-fallback::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(169, 126, 95, 0.28);
  border-radius: inherit;
  pointer-events: none;
}
.img-fallback::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  text-align: center;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(169, 126, 95, 0.75);
}
.hero-media.img-fallback::before,
.hero-media.img-fallback::after { display: none; }

/* ==========================================================================
   GİRİŞ / MİRAS — "İzzet Baysal Kimdir?" (KİM)
   Bir ömür, iki yüz. Solda gençliğinden büyük bir fotoğraf; köşesine,
   ileri yaşlarından küçük bir çerçeve biner. Sağda anlatı: başlık, giriş,
   kendi el yazısından bir cümle ve ömrün üç perdesi. Altta künye şeridi.
   ========================================================================== */
.intro-section { padding: var(--section-padding) 0 clamp(3rem, 7vw, 5rem); }

.kim-izgara {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
}

/* ---- İki fotoğraf ---- */
.kim-fotolar {
  position: relative;
  width: min(100%, 470px);
  justify-self: center;
  margin: 0 clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem) 0;
}
/* Fotoğrafın ardında sıcak bir ışık */
.kim-fotolar::before {
  content: '';
  position: absolute;
  inset: -12% -18% -6% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 161, 132, 0.2), rgba(201, 161, 132, 0));
  filter: blur(8px);
  pointer-events: none;
}
.kim-foto { position: relative; margin: 0; }
.kim-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kim-foto-genc {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(243, 236, 227, 0.16);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.85);
}
.kim-foto-genc img { object-position: center 28%; filter: saturate(0.88) contrast(1.03); }

/* İleri yaşlarından küçük çerçeve: büyük fotoğrafın sağ alt köşesine biner.
   Kalın bir paspartu yerine ince bir kenar: kremden altına dönen 3 px'lik
   bir şerit ve dışında belli belirsiz bir çizgi. */
.kim-foto-yasli {
  position: absolute;
  right: calc(-1 * clamp(2rem, 5vw, 4rem));
  bottom: calc(-1 * clamp(2.5rem, 5vw, 3.5rem));
  width: 44%;
  aspect-ratio: 4 / 5;
  padding: 3px;
  border-radius: 19px;
  background: linear-gradient(155deg, #F3ECE3 0%, #E3CFB4 45%, #C9A184 100%);
  box-shadow:
    0 0 0 1px rgba(243, 236, 227, 0.12),
    0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.kim-foto-yasli img { border-radius: 16px; object-position: center 8%; }

/* ---- Anlatı ---- */
.kim-anlati .section-title { margin-bottom: 1.2rem; }
.kim-giris {
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  font-weight: 400;
  line-height: 1.8;
  color: #E6DDD0;
}

/* Kendi el yazısından bir cümle */
.kim-alinti {
  position: relative;
  margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--color-gold);
}
.kim-alinti p {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.3vw, 1.85rem);
  line-height: 1.35;
  color: #F6F0E7;
}
.kim-alinti cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Ömrün üç perdesi: ince çizgilerle ayrılan üç sütun */
.kim-perdeler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  padding: 1.4rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(243, 236, 227, 0.12);
}
.kim-perdeler li { padding: 0 1.2rem; border-left: 1px solid rgba(243, 236, 227, 0.1); }
.kim-perdeler li:first-child { padding-left: 0; border-left: 0; }
.kim-perde-yil {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-gold-light);
  font-variant-numeric: lining-nums;
}
.kim-perdeler strong {
  display: block;
  margin: 0.55rem 0 0.35rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.kim-perdeler p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.kim-dugmeler { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(2rem, 4vw, 2.6rem); }
.kim-dugmeler .btn { padding: 0.9rem 1.6rem; }
.kim-dugmeler .btn svg { transition: transform var(--dur-fast) var(--ease-out); }
.kim-dugmeler .btn-primary:hover svg { transform: translateX(3px); }

.intro-lead {
  font-family: var(--font-quote);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: 1.55;
  max-width: 54ch;
}
.intro-body {
  color: var(--color-text-secondary);
  font-weight: 300;
  max-width: 58ch;
}
.intro-body strong { color: var(--color-gold); font-weight: 600; }

/* ---- Künye: yatay cam şerit ---- */
.kim-kunye {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0.4rem;
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(243, 236, 227, 0.09) 0%, rgba(243, 236, 227, 0.025) 50%, rgba(243, 236, 227, 0.05) 100%);
  border: 1px solid rgba(243, 236, 227, 0.13);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.kim-kunye > div {
  padding: 1.1rem 1.2rem 1.2rem;
  border-left: 1px solid rgba(243, 236, 227, 0.1);
}
.kim-kunye > div:first-child { border-left: 0; }
.kim-kunye dt {
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.kim-kunye dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-text-primary);
}

/* ==========================================================================
   BLOG ÖNİZLEME (ana sayfa)
   ========================================================================== */
.blog-teaser {
  padding: var(--section-padding) 0;
  background: transparent;
}
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
.center-cta { text-align: center; margin-top: 3rem; }

/* Ortak yazı kartı */
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-tertiary);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid), box-shadow var(--dur-mid);
  height: 100%;
  text-align: left;
}
.post-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-border-strong);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.post-card-media {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: transparent;
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.post-card:hover .post-card-media img { transform: scale(1.07); }
.post-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 15, 15, 0.75) 100%);
}
.post-card-body { padding: 1.5rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.8rem;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-secondary); }
.post-meta .muted { color: var(--color-text-secondary); letter-spacing: 0.08em; }
.post-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.post-card p { font-size: 0.9rem; color: var(--color-text-secondary); font-weight: 300; flex: 1; }
.post-card .read-link {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.post-card .read-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.post-card:hover .read-link svg { transform: translateX(4px); }

/* ==========================================================================
   BLOG SAYFASI
   ========================================================================== */
.blog-hero {
  padding: clamp(9rem, 16vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(169, 126, 95, 0.10) 0%, transparent 62%);
  pointer-events: none;
}
.blog-hero .hero-title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  /* Ana sayfadaki başlıkla aynı mürekkep geçişi */
  background: linear-gradient(180deg, #F6F0E7 0%, #EFE4D2 58%, #C9A184 132%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-list { padding: 0 0 var(--section-padding); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.8rem;
}
.blog-grid .post-card.featured { grid-column: 1 / -1; }
.blog-grid .post-card.featured .post-card-media { aspect-ratio: 21/8; }
.blog-grid .post-card.featured h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }

.blog-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 2.8rem;
}
.blog-filter button {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.blog-filter button:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.blog-filter button.active {
  background: var(--color-cream);
  color: var(--color-ink);
  border-color: transparent;
  font-weight: 500;
}

/* ---------- Yazı okuyucu (overlay) ---------- */
.reader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--color-bg-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
}
.reader.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.reader-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient-gold);
  z-index: 1300;
  transition: width 0.1s linear;
}

.reader-close {
  position: fixed;
  top: 1.6rem; right: 1.6rem;
  z-index: 1310;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(10px);
  color: var(--color-text-primary);
  transition: transform var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.reader-close:hover { transform: rotate(90deg); color: var(--color-gold); border-color: var(--color-gold); }

.reader-hero {
  position: relative;
  height: 62vh;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.reader-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.9);
}
/* Görsel aşağıda okuma zeminine erir; başlık her görselde okunur kalsın
   diye alt yarı koyulaşır */
.reader-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 17, 13, 0.35) 0%, rgba(20, 17, 13, 0.15) 35%, rgba(20, 17, 13, 0.7) 75%, var(--color-bg-primary) 100%);
}
.reader-hero-inner {
  position: relative;
  z-index: 2;
  width: min(760px, 90vw);
  margin: 0 auto 3rem;
  text-align: center;
}
.reader-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  margin: 0.9rem 0;
  color: #F6F0E7;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(10, 8, 6, 0.6);
}
.reader-hero .post-meta .muted { color: rgba(243, 236, 227, 0.78); }

/* ---------- Okuma metni ----------
   Metin koyu zeminde sıcak bir krem: #3C3733 açık temadan kalmıştı ve
   koyu zeminde neredeyse görünmüyordu. Satır boyu ~68 karakter; yazı
   ağırlığı 400 (300 ince kalıyor, koyu zeminde gözü yoruyordu). */
.reader-body {
  --okuma: #E6DDD0;
  --okuma-soluk: #BDB1A0;
  width: min(680px, 88vw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 0 6rem;
  color: var(--okuma);
}
.reader-body p {
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--okuma);
  margin-bottom: 1.45rem;
  text-wrap: pretty;
  hyphens: manual;
}
/* Açılış paragrafı: iri italik, altında ince bir çizgiyle metinden ayrılır.
   Süslü büyük harf denendi; Türkçedeki noktalı İ, küçük bir i gibi
   görünüp kelimeden kopuk duruyordu. */
.reader-body p.lead {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.6;
  color: #F3ECE3;
  margin-bottom: 2.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(243, 236, 227, 0.1);
}
/* Bölüm başlığı: üstünde kısa altın bir çizgi */
.reader-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  line-height: 1.25;
  color: #F6F0E7;
  margin: 3.4rem 0 1.1rem;
}
.reader-body h2::before {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: var(--gradient-gold);
}
.reader-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  color: var(--color-gold-light);
  margin: 2.4rem 0 0.8rem;
}
/* Alıntı: sayfadan ayrılan cam bir pano, başında altın tırnak */
.reader-body blockquote {
  position: relative;
  margin: 2.8rem 0;
  padding: 1.8rem 1.8rem 1.8rem 2.2rem;
  border-radius: 18px;
  border: 1px solid rgba(201, 161, 132, 0.22);
  background: linear-gradient(150deg, rgba(201, 161, 132, 0.1) 0%, rgba(243, 236, 227, 0.03) 70%);
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: #F6F0E7;
}
.reader-body blockquote::before {
  content: '\201C';
  position: absolute;
  left: 0.9rem;
  top: 0.35rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.7;
}
.reader-body figure { margin: 3rem 0; }
.reader-body figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.reader-body figcaption {
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 161, 132, 0.5);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--okuma-soluk);
}
.reader-body ul.rich {
  list-style: none;
  margin: 1.4rem 0 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.reader-body ul.rich li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--okuma);
  font-weight: 400;
}
.reader-body ul.rich li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gradient-gold);
}
.reader-body strong { color: #F6F0E7; font-weight: 600; }
.reader-body em { color: #F3ECE3; }

.reader-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.reader-footer span { font-size: 0.85rem; color: var(--okuma-soluk); }

/* ==========================================================================
   MÜZE — kilitli (bulanık) durum ve giriş katmanı
   Sahne önce bulanık durur; dokunulduğunda 3B görünüm açılır. Böylece
   dokunmatikte sayfa kaydırırken panorama yanlışlıkla sürüklenmez.
   ========================================================================== */
.museum-enter {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem;
  text-align: center;
  /* Panoramanın parlak yerlerinde yazılar kayboluyordu: giriş ekranı artık
     fotoğrafın üstüne koyu bir örtü seriyor, metin her karede okunuyor. */
  background:
    radial-gradient(76% 76% at 50% 46%, rgba(12, 10, 8, 0.72) 0%, rgba(12, 10, 8, 0.88) 100%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.75) 100%);
  color: var(--color-text-primary);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.museum-stage.is-locked .museum-enter { opacity: 1; visibility: visible; }

.museum-enter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: rgba(22, 21, 20, 0.72);
  backdrop-filter: blur(8px);
  color: var(--color-gold);
}
.museum-enter-icon svg { width: 28px; height: 28px; }
.museum-enter-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.2vw, 1.65rem);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}
.museum-enter-sub {
  max-width: 38ch;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.6;
  color: #E4D9C9;
}

/* Giriş ekranındaki "Başlat" hapı: salonun kendiliğinden açılmadığı,
   ziyaretçinin başlatmasını beklediği ilk bakışta okunsun. */
.museum-enter-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding: 0.6rem 1.4rem 0.6rem 1.15rem;
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--gradient-gold);
  box-shadow: 0 10px 30px -14px rgba(227, 196, 159, 0.8);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.museum-enter-cta svg { width: 13px; height: 13px; }
.museum-enter:hover .museum-enter-cta {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -14px rgba(227, 196, 159, 0.95);
}
.museum-enter:hover .museum-enter-icon {
  border-color: var(--color-gold);
  background: rgba(255, 255, 255, 0.14);
}

/* Kilitliyken sahne bulanık; tıklamalar yalnızca giriş katmanına gider */
.museum-stage.is-locked #museum-canvas {
  filter: blur(9px) saturate(0.88);
  transform: scale(1.06);
  pointer-events: none;
}
.museum-stage.is-locked .museum-hint {
  opacity: 0;
  pointer-events: none;
}
#museum-canvas {
  transition: filter 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* ==========================================================================
   KAYDIRMALI ŞERİTLER — zaman çizelgesi ve arşiv
   Kartlar her ekran boyutunda yan yana dizilir; şerit çevrildikçe ortadaki
   kart net kalır, yanındakiler bulanıklaşıp geri plana çekilir.
   (.is-focus sınıfını animations.js ekler)
   ========================================================================== */
.snap-track {
  --snap-card-w: clamp(280px, 40vw, 520px);
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1rem, 2vw, 1.8rem);
  /* Tam genişliğe taşar: kartlar ekranın ortasına kilitlenebilsin */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0.6rem calc((100vw - var(--snap-card-w)) / 2) 1.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.snap-track::-webkit-scrollbar { display: none; }

.snap-track > * {
  flex: 0 0 var(--snap-card-w);
  max-width: var(--snap-card-w);
  scroll-snap-align: center;
  transition:
    filter 0.45s var(--ease-out),
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.snap-track > *:not(.is-focus) {
  filter: blur(4px);
  opacity: 0.42;
  transform: scale(0.94);
}
.snap-track > *.is-focus {
  filter: none;
  opacity: 1;
  transform: none;
}

/* Kaydırma ipucu — yalnızca dar ekranda (masaüstünde oklar var) */
.snap-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.snap-hint::before,
.snap-hint::after {
  font-size: 0.85rem;
  line-height: 1;
  animation-duration: 1.8s;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
}
.snap-hint::before { content: '←'; animation-name: snap-hint-left; }
.snap-hint::after { content: '→'; animation-name: snap-hint-right; }


/* ---- Arşiv (yazılar) ve haber şeridi ---- */
/* "height: 100%" burada işe yaramıyor: şeridin kesin bir yüksekliği yok,
   yüzde auto'ya düşüyor ve kartlar kendi içeriklerine göre farklı boyda
   kalıyor. align-self: stretch ile hepsi en uzun kartın boyuna çekilir. */
.teaser-grid.snap-track > .post-card {
  height: auto;
  align-self: stretch;
}

/* Haber başlıkları ve özetleri kaynaktan geldiği gibi uzunluk olarak çok
   değişkendi; kartı boyuna uzatmasın diye satır sayısıyla sınırlanır,
   taşan kısım "…" ile kesilir. */
.news-card h3,
.news-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card h3 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.news-card p {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ---------- Şerit gezinme okları (masaüstü) ---------- */
.snap-shell { position: relative; }

.snap-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(22, 21, 20, 0.72);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  transform: translateY(-50%);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.snap-nav svg { width: 22px; height: 22px; }
.snap-nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-gold);
  color: var(--color-gold);
}
/* Şerit tam genişlikte taştığı için oklar ekran kenarlarına yerleşir */
.snap-nav.prev { left: calc(50% - 50vw + clamp(0.8rem, 2vw, 2.2rem)); }
.snap-nav.next { right: calc(50% - 50vw + clamp(0.8rem, 2vw, 2.2rem)); }
.snap-nav[disabled] {
  opacity: 0.32;
  pointer-events: none;
}

/* Masaüstünde oklar, dar ekranlarda kaydırma ipucu görünür (responsive.css) */



/* ==========================================================================
   ZİYARETÇİ DEFTERİ — akan yorum şeritleri
   Üst şerit sola, alt şerit sağa kayar. Kesintisiz döngü, kartların
   iki kez basılıp şeridin tam bir grup boyu ötelenmesiyle sağlanır.
   ========================================================================== */

.reviews-section {
  padding: var(--section-padding) 0;
  overflow: hidden;
}

.reviews-section .section-head { width: var(--container-width); margin-inline: auto; }

.reviews-marquees {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Kenarlarda yumuşak solma: kartlar ekran dışına süzülerek çıksın. */
  -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%);
  /* Maske kutunun sınırında keser: şeritlerin eksi dış payı (aşağıda) ilk
     şeridin üst payını kutunun dışına taşıyordu, üzerine gelinip yükselen
     kartın üst kenarı maskede siliniyordu. İç pay o alanı kutuya katar. */
  padding-block: 10px;
}

/* Üzerine gelinen kart birkaç piksel yükseliyor; şeridin kendi payı
   olmazsa kartın üst kenarı taşma sınırında kırpılıyordu. Eksi dış pay
   şeritler arasındaki boşluğu korur. */
.marquee-row { overflow: hidden; padding-block: 10px; margin-block: -10px; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-left var(--marquee-duration, 60s) linear infinite;
  /* Şerit kendi kompozisyon katmanında kalsın: navbarın backdrop-filter'ı
     arkasından akan kartları her karede yeniden boyamak yerine hazır
     katmandan örneklesin (hero şeridinde de aynı ipucu var). */
  will-change: transform;
}
.marquee-track.dir-right { animation-name: marquee-right; }

.marquee-group { display: flex; }

/* Okumak isteyen dursun — yalnızca üzerine gelinen şerit durur,
   diğeri akmaya devam eder. */
.marquee-row:hover .marquee-track,
.marquee-row:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ---------- Yorum kartı ---------- */
.review-card {
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 360px);
  /* Boşluk track'e değil karta veriliyor: grup genişliği tam yarıya
     denk gelsin ve -50% ötelemede döngü şaşmasın. */
  margin-right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.75rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.review-card:hover {
  border-color: var(--color-gold-light);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

.review-text {
  font-family: var(--font-quote);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  flex: 1;
}

.review-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.review-name {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.review-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  margin-top: 0.2rem;
}

/* ---------- Kırpılan notun penceresi ---------- */
/* Kartta dört satıra sığmayan not, karta dokununca burada tam hâliyle
   açılır. Kutu, "Not Bırak" penceresiyle aynı .modal-overlay/.modal-box
   iskeletini kullanır; buradaki kurallar yalnızca içeriği biçimler. */
.review-modal .modal-box { text-align: left; }
.review-modal-text {
  margin-top: 0.9rem;
  font-family: var(--font-quote);
  font-size: clamp(1.02rem, 2.6vw, 1.18rem);
  line-height: 1.62;
  color: var(--color-text-primary);
}
.review-modal-foot {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Hareket azaltma: şeritler durur, ziyaretçi elle kaydırarak okur. */
@media (prefers-reduced-motion: reduce) {
  .marquee-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .marquee-track { animation: none; }
  .marquee-track .marquee-group[aria-hidden='true'] { display: none; }
  .review-card { scroll-snap-align: center; }
  .review-card:hover { transform: none; }
}

/* ==========================================================================
   HABERLER — vakıf haberleri
   Kartlar blog kartlarıyla aynı görsel dili kullanır; farkı, her kartın
   haberin kaynağına giden bir bağlantı olmasıdır.
   ========================================================================== */

.news-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}

/* Davetiye ve afiş görselleri dik formatta geliyor; 16/10 çerçevede
   kırpılmak yerine tümü görünsün diye içeri sığdırılıyor. */
.news-card .post-card-media img { object-fit: cover; object-position: center top; }

.news-source {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--color-text-secondary);
}
.news-source a {
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.news-source a:hover { color: var(--color-gold); border-color: var(--color-gold); }



/* ==========================================================================
   BÖLÜM HARİTASI — sayfanın küçültülmüş ölçeği
   Çentikler bölümlerin belgedeki gerçek konumuna oturur; altın işaretçi
   kaydırma ilerlemesiyle süzülür ve yaklaştığı çentikleri uzatıp
   koyulaştırır. Geniş ekranda solda dikey durur; yatay (dar ekran)
   hâli css/responsive.css içinde.

   Sınıf öneki "smap-": ad çakışmasını önlemek için. Projede daha önce
   zaman çizelgesinin yıl rayı .rail-fill, .rail-dot gibi adlar kullanıyordu.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.smap {
  position: fixed;
  left: 14px;
  top: 50%;
  z-index: 60;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.smap.is-visible { opacity: 1; visibility: visible; }

.smap-track {
  position: relative;
  width: 1px;
  height: min(58svh, 460px);
  background: rgba(243, 236, 227, 0.14);
}

/* Çentiklere isabet ettirmeyi kolaylaştıran görünmez alan; yalnızca
   çentik sütununu kaplar, içerik sütununa taşmaz. */
.smap-track::before {
  content: '';
  position: absolute;
  left: -12px; right: -34px; top: -20px; bottom: -20px;
}

.smap-fill {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: var(--gradient-gold);
  transform: scaleY(0);
  transform-origin: top center;
}

.smap-marker {
  position: absolute;
  top: 0; left: 0;
  width: 7px; height: 7px;
  background: var(--gradient-gold);
  box-shadow: 0 0 0 4px rgba(169, 126, 95, 0.12);
  transform: translate(-50%, -50%) rotate(45deg);
}

.smap-items { position: absolute; inset: 0; }

.smap-item {
  --k: 0;
  --pos: 0px;
  position: absolute;
  left: 0;
  top: var(--pos);
  transform: translateY(-50%);
}
.smap-item a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 7px 0;
}

/* Çentik: işaretçiye yaklaştıkça uzar ve griden altına döner. */
.smap-tick {
  position: relative;
  display: block;
  width: calc(8px + 18px * var(--k));
  height: 1px;
  background: rgba(243, 236, 227, 0.34);
}
.smap-tick::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-gold);
  opacity: var(--k);
}

/* "Buradasınız": aktif çentiğin ucunda küçük bir altın nokta. */
.smap-item.is-active .smap-tick::before {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translate(50%, -50%);
}

/* Bölüm adı. İçerik sütunu ortalanıp kenarda dar bir boşluk bıraktığı
   için ad zaman zaman içeriğin üstüne denk gelir; bu yüzden kendi
   zeminini taşıyan küçük bir künye plakası hâlinde duruyor. */
.smap-current {
  position: absolute;
  left: 34px;
  top: var(--etiket-pos, 0px);
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  padding: 0.34rem 0.6rem;
  border-radius: 3px;
  background: rgba(22, 20, 19, 0.82);
  box-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
@supports (backdrop-filter: blur(6px)) {
  .smap-current {
    background: rgba(22, 21, 20, 0.72);
    backdrop-filter: blur(7px);
  }
}

/* Ad harf harf açılır. */
.smap-current span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-9px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 26ms);
}
.smap-current.is-in span { opacity: 1; transform: translateX(0); }
.smap-space { width: 0.32em; }

@media (prefers-reduced-motion: reduce) {
  .smap, .smap-current span { transition: none; }
  .smap-current span { transition-delay: 0ms; }
}

/* ==========================================================================
   DİJİTAL MÜZE SAYFASI (muze.html)
   Salon girişi künyesi ve duvar levhası biçiminde ziyaret notu.
   ========================================================================== */

.hall-intro {
  position: relative;
  padding: clamp(7rem, 16vh, 10rem) 0 clamp(2.5rem, 6vh, 4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(27, 23, 18, 0) 62%),
    linear-gradient(180deg, var(--sicak-4) 0%, var(--color-bg-primary) 100%);
  overflow: hidden;
}

/* Salona açılan eşik çizgisi */
.hall-rule {
  position: absolute;
  top: clamp(5.4rem, 12vh, 7.6rem);
  left: 50%;
  width: 1px;
  height: clamp(1.6rem, 4vh, 2.8rem);
  background: linear-gradient(180deg, transparent, var(--color-gold));
  transform: translateX(-50%);
}

.hall-inner { text-align: center; }
.hall-inner .eyebrow { justify-content: center; }
.hall-inner .eyebrow::before { display: none; }

.hall-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.hall-lead {
  margin: 1.3rem auto 0;
  max-width: 58ch;
  font-family: var(--font-quote);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* Salon künyesi: müze girişindeki bilgi levhası gibi ince ayraçlı
   hücreler. Ayraçlar 1px grid boşluğunun arka planıyla çizilir; böylece
   hücreler alt satıra sardığında da çizgiler doğru kalır. */
.hall-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  margin: clamp(2rem, 5vh, 3.2rem) auto 0;
  max-width: 720px;
  background: var(--color-border);
  border-block: 1px solid var(--color-border);
}
.hall-meta > div {
  padding: 1.1rem 0.6rem;
  background: var(--color-bg-primary);
}
.hall-meta dt {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.hall-meta dd {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--color-text-primary);
}

/* ---------- Ziyaret notu ---------- */
/* Rehber artık salon künyesinin yerinde, girişte duruyor; bu bölümde
   yalnızca çıkış bağlantısı kaldı. */
.hall-guide { padding: clamp(2.4rem, 6vw, 4rem) 0 var(--section-padding); }

/* Gezinme adımları kendi bölümünde. Masaüstünde sahnenin üstünde,
   dar ekranda altında duruyor — sıralamayı <main> üzerindeki flex
   order belirliyor (bkz. responsive.css). */
.hall-steps { padding-block: clamp(1.4rem, 3.5vw, 2.4rem) 0; }
.hall-steps .guide-plate { text-align: left; }
.hall-steps .hall-note { margin-top: 1.4rem; text-align: center; }

/* muze.html'de bölüm sırası CSS ile değiştirildiği için <main> esnek
   bir sütun; sıralar aşağıda ve responsive.css'te veriliyor. */
body[data-page="museum"] #main {
  display: flex;
  flex-direction: column;
}
body[data-page="museum"] .hall-intro { order: 1; }
body[data-page="museum"] .hall-steps { order: 2; }
body[data-page="museum"] .museum-section { order: 3; }
body[data-page="museum"] .hall-guide { order: 4; }

/* Ayraçlar 1px grid boşluğunun arka planıyla çizilir: hücreler iki ya da
   tek sütuna sardığında çizgiler kendiliğinden doğru yere düşer. */
.guide-plate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  list-style: none;
}
.guide-plate li {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--color-bg-tertiary);
}

.guide-no {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-gold);
  letter-spacing: 0.08em;
}
.guide-plate h3 {
  margin: 0.7rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.guide-plate p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.hall-note {
  margin: 1.8rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.hall-note strong { font-weight: 500; color: var(--color-text-primary); }

/* ==========================================================================
   KOYU BÖLÜMLER — siyah zemin, altın vurgu
   Sayfa boyunca krem ton tekdüze kalıyordu; ziyaretçi defteri ve alt bilgi
   koyu bir taban oluşturarak sayfayı bitiriyor.
   ========================================================================== */

.reviews-section {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.22) 100%);
  color: var(--color-text-primary);
}

/* Krem bölümden koyuya geçişte ince bir altın eşik */
.reviews-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: min(280px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
  transform: translateX(-50%);
}

.reviews-section .eyebrow { color: var(--color-gold-light); }
.reviews-section .section-title { color: #F6F1ED; }
/* Referanstaki gibi başlığın ikinci yarısı altın */
.reviews-section .section-title .vurgu {
  background: linear-gradient(135deg, #C9A184 0%, #E3C49F 50%, #C9A184 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reviews-section .section-sub { color: rgba(233, 225, 219, 0.66); }

.reviews-section .review-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(201, 161, 132, 0.18);
  box-shadow: none;
}
.reviews-section .review-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(201, 161, 132, 0.42);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.reviews-section .review-text { color: rgba(240, 233, 228, 0.9); }
.reviews-section .review-foot { border-top-color: rgba(201, 161, 132, 0.16); }
.reviews-section .review-name { color: #F6F1ED; }
.reviews-section .review-meta { color: rgba(240, 233, 226, 0.72); }

/* Kenar sönümü koyu zemine göre yeniden ayarlanır */
.reviews-section .reviews-marquees {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ---------- Alt bilgi ---------- */
.site-footer {
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(201, 161, 132, 0.16);
}
.site-footer .footer-inner p { color: rgba(240, 233, 226, 0.74); }
.footer-inner .footer-credit { color: rgba(240, 233, 226, 0.74); }
.footer-inner .footer-credit strong { color: var(--color-gold-light); }

/* Künyedeki vakıf adı ve tasarımcı adı dış bağlantı. Metnin rengini korur;
   altın çizgi yalnızca üzerine gelince soldan açılır. */
.footer-inner a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 1px;
  transition: background-size 0.35s var(--ease-out, ease), color 0.25s ease;
}
.footer-inner a:hover,
.footer-inner a:focus-visible { background-size: 100% 1px; color: var(--color-gold-light); }
.footer-inner a:focus-visible { outline: 1px solid var(--color-gold); outline-offset: 3px; border-radius: 2px; }

/* Bölüm haritası koyu bölümün üzerindeyken ters kontrasta geçer:
   gri çentikler siyah zeminde kaybolduğu için açık tona döner. */
.smap.on-dark .smap-track { background: rgba(255, 255, 255, 0.16); }
.smap.on-dark .smap-tick { background: rgba(255, 255, 255, 0.36); }
.smap.on-dark .smap-current {
  background: rgba(22, 20, 19, 0.82);
  color: #F2EBE6;
  box-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   NAVBAR — altın eylem düğmesi
   ========================================================================== */

.nav-cta {
  padding: 0.52rem 1.12rem;
  border-radius: 999px;
  /* Beyaz yazının okunabilmesi için altın biraz koyu tutuldu. */
  background: linear-gradient(135deg, #A9821C 0%, #C9A227 52%, #A9821C 100%);
  color: #FFFFFF;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 10px rgba(169, 130, 28, 0.28);
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
/* Altın zeminde alt çizgi gereksiz */
.nav-cta::after { display: none; }
.nav-cta.active { color: #FFFFFF; }
/* Fareyle üstüne gelince altın koyulaşır, yazı siyaha döner */
.nav-cta:hover {
  color: var(--color-ink);
  background: linear-gradient(135deg, #E2C255 0%, #F0D77C 52%, #E2C255 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.38);
}

/* ---------- Dil değiştirici (TR / EN) ---------- */
/* Navbarın değil, sayfanın sağ orta kenarının öğesi: solda duran bölüm
   haritasının karşılığı olarak sabit bir dikey hap. Sayfa nerede olursa
   olsun aynı yerde kalır. */
.lang-switch.lang-float {
  position: fixed;
  top: 50%;
  right: clamp(0.5rem, 1.5vw, 1.4rem);
  transform: translateY(-50%);
  z-index: 880;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.4rem;
  border-radius: 999px;
  background: rgba(22, 21, 20, 0.55);
  border: 1px solid rgba(243, 236, 227, 0.12);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7);
}
/* Dikey hapta ayraç eğik çizgi değil, ince bir yatay çizgidir. */
.lang-switch.lang-float .lang-sep {
  display: block;
  width: 14px;
  height: 1px;
  margin: 0.15rem auto;
  background: var(--color-border-strong);
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}
.lang-switch button {
  padding: 0.2rem 0.15rem;
  /* Kalınlaşan seçili dil komşusunu itmesin diye yer sabit tutulur. */
  min-width: 1.75rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  /* Seçili olmayan dil geri çekilir; aradaki fark yalnızca tona değil
     parlaklığa da dayansın diye sönükleştirilir. */
  color: var(--color-text-secondary);
  opacity: 0.55;
  transition: color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.lang-switch button:hover { color: var(--color-text-primary); opacity: 1; }
.lang-switch button.active {
  color: var(--color-gold-light);
  opacity: 1;
  font-weight: 700;
}
.lang-switch span {
  font-size: 0.72rem;
  color: var(--color-border-strong);
}

/* Düğme artık menü listesinin değil, navbarın doğrudan çocuğu: mobilde
   menü kapalıyken de görünür kalabilsin diye.
   Masaüstünde en sağda durur ve hero geçilene kadar gizlidir; yeri
   korunur (visibility), böylece belirdiğinde menü yana kaymaz. */
@media (min-width: 901px) {
  .navbar-inner .brand { order: 1; }
  .navbar-inner .nav-links { order: 2; margin-left: auto; }
  .navbar-inner .nav-cta {
    order: 3;
    margin-left: clamp(0.6rem, 1.6vw, 1.6rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.45s var(--ease-out),
      transform 0.45s var(--ease-out),
      visibility 0.45s;
  }
  .navbar.is-past-hero .navbar-inner .nav-cta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ==========================================================================
   İSTATİSTİK ŞERİDİ
   Sayfa tek yüzey olduğu için kuşak kendi zeminini taşımıyor: yalnızca
   ince altın çizgiler ve hafif bir koyulaşmayla ayrışıyor.
   ========================================================================== */

.stats-strip {
  border-top: 1px solid rgba(201, 161, 132, 0.18);
  border-bottom: 1px solid rgba(201, 161, 132, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.14) 100%);
}

/* Sayaçlar iki çizgi arasında ortalı dursun: iç boşluk simetrik. Alttaki
   fazla boşluk daha önce zaman çizelgesine nefes payı bırakmak içindi, ama
   o pay çerçevenin içinde durunca içerik yukarıdan uzak, alt çizgiye yakın
   kalıyordu. Ayrım artık .intro-section'ın kendi alt boşluğundan geliyor. */
/* Üst ve alt boşluk eşit değil, çünkü ortalanması gereken şey kutular değil
   görünen mürekkep: rakamların satır kutusu (line-height: 1) basamakların
   üstünde birkaç piksel boş pay bırakıyor, altta ise etiket kutusuna neredeyse
   yapışık bitiyor. Toplam boşluk aynı kalacak biçimde üstten bir miktar
   alınıp alta veriliyor; şeridin yüksekliği değişmiyor. */
.stats-inner {
  padding-block:
    calc(clamp(2.2rem, 4.5vw, 3.4rem) - 0.2rem)
    calc(clamp(2.2rem, 4.5vw, 3.4rem) + 0.2rem);
  padding-inline: 0;
}

/* .reveal öğeleri 34px aşağıdan giriyor. Sayaçlar çerçeveli bir kutunun
   içinde olduğu için bu kayma, etiketleri alt çizginin üzerine taşırıyordu;
   şeritte giriş yalnızca opaklıkla yapılır. */
.stats-strip .reveal,
.stats-strip .reveal.is-visible {
  transform: none;
}

/* Koyu zeminde ayraç çizgileri açık tona döner */
.stats-strip .stat-item + .stat-item::before {
  background: linear-gradient(180deg,
    transparent 0%, rgba(201, 161, 132, 0.34) 35%, rgba(201, 161, 132, 0.34) 65%, transparent 100%);
}

/* Rakamlar siyah üzerinde parlasın diye altın açıldı */
.stats-strip .stat-num {
  background: linear-gradient(160deg, #F0D9B8 0%, #D9B489 45%, #B98C68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats-strip .stat-label { color: rgba(240, 233, 226, 0.78); }
.stats-strip .stat-label::before { opacity: 0.8; }

/* Şerit artık girişin hemen altında, Miras bölümünün dışında: kendi
   üst-alt payını taşıyor. */
.stats-strip { margin-block: 0 clamp(2rem, 5vw, 3.5rem); }

/* ==========================================================================
   ZİYARETÇİ DEFTERİ — "Not Bırak" düğmesi ve penceresi
   ========================================================================== */

.reviews-cta {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
}

/* Koyu zeminde altın çerçeveli düğme; üzerine gelince altınla dolar. */
.btn-gold {
  color: var(--color-gold-light);
  border: 1px solid rgba(201, 161, 132, 0.45);
  background: rgba(255, 255, 255, 0.03);
}
.btn-gold:hover {
  color: var(--color-ink);
  border-color: transparent;
  background: linear-gradient(135deg, #C9A184 0%, #E3C49F 52%, #C9A184 100%);
  transform: translateY(-2px);
}
.btn-gold svg { flex: none; }

/* ---------- Not penceresi ---------- */
.note-modal .modal-box {
  max-height: min(88svh, 720px);
  overflow-y: auto;
}
.note-modal .eyebrow { margin-bottom: 0.8rem; }
.note-modal .eyebrow::before { display: none; }
.note-modal h3 { margin-bottom: 0.6rem; }
.note-modal .note-lead {
  margin-bottom: 1.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.note-form { gap: 1.1rem; }
.note-form textarea { min-height: 120px; }
.note-actions { display: flex; justify-content: flex-end; }

/* Gönderildikten sonra formun yerini onay mesajı alır */
.note-done {
  display: none;
  text-align: center;
  padding: 0.6rem 0 0.2rem;
}
.note-modal.is-sent .note-form { display: none; }
.note-modal.is-sent .note-done { display: block; }
.note-done-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-gold);
  border: 1px solid rgba(169, 126, 95, 0.4);
}
.note-done p {
  font-family: var(--font-quote);
  font-size: 1.22rem;
  color: var(--color-text-primary);
}
.note-done .note-done-sub {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   SAYFA ZEMİNİ — kaydırmayla yer değiştiren tek parça gradyan
   Bölümlerin kendi zemini yok; ışık sayfa boyunca dolaşır, böylece sayfa
   bloklar hâlinde değil tek bir yüzey gibi okunur.
   Konum ve şiddet js/backdrop.js tarafından --g* değişkenleriyle sürülür.
   ========================================================================== */

.sayfa-zemin {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(88% 82% at var(--gx, 100%) var(--gy, 100%),
      rgba(160, 144, 118, var(--g1, 0.95)) 0%,
      rgba(107, 97, 83, calc(var(--g1, 0.95) * 0.8)) 14%,
      rgba(71, 64, 56, calc(var(--g1, 0.95) * 0.55)) 32%,
      rgba(27, 23, 18, 0) 64%),
    radial-gradient(44% 82% at var(--gx2, 106%) var(--gy2, 62%),
      rgba(133, 119, 97, var(--g2, 0.85)) 0%,
      rgba(100, 89, 75, calc(var(--g2, 0.85) * 0.7)) 34%,
      rgba(27, 23, 18, 0) 84%),
    radial-gradient(118% 40% at var(--gx3, 38%) var(--gy3, 104%),
      rgba(53, 48, 42, var(--g3, 0.9)) 0%,
      rgba(27, 23, 18, 0) 76%),
    var(--siyah);
  transition: background-position 0.2s linear;
}

/* Hero artık kendi zeminini taşımıyor: ışık sayfanın tamamına ait. */
.hero { background: transparent; }

/* Koyu tema için logonun yeniden renklendirilmiş sürümü kullanılıyor:
   üst satır krem (#F3ECE3), alt satır düğmeyle aynı altın (#C9A227).
   CSS filtresiyle yapılan dönüşüm altını soluklaştırıyordu. */

/* ==========================================================================
   SALONU BÜYÜTME
   ========================================================================== */
/* ---------- Salonu büyütme düğmesi ---------- */
/* 2B galeri düğmesinin karşısında, sahnenin sol üstünde; onunla aynı hap
   biçiminde, ikonun yanında etiketiyle. Büyütülmüşken hem ikon hem yazı
   "küçült" hâline döner. */
.museum-expand {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EDE3D6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  /* Panoramanın parlak yerlerinin önünde ikincil renk okunmuyordu:
     şerit koyu bir zemine oturuyor. */
  background: rgba(16, 13, 10, 0.72);
  border: 1px solid rgba(243, 236, 227, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.museum-expand:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
  background: rgba(26, 21, 16, 0.88);
}
.museum-expand svg { width: 16px; height: 16px; }
/* Duruma göre ikon ve etiket çifti: normalde "aç", büyütülmüşken "kapat" */
.museum-expand .ikon-kapat,
.museum-expand .etiket-kapat { display: none; }
.museum-stage.is-expanded .museum-expand .ikon-ac,
.museum-stage.is-expanded .museum-expand .etiket-ac { display: none; }
.museum-stage.is-expanded .museum-expand .ikon-kapat { display: block; }
.museum-stage.is-expanded .museum-expand .etiket-kapat { display: inline; }

/* Büyütülmüş salon: sahne, sayfanın önüne çıkan neredeyse tam ekran bir
   katmana dönüşür. Arkasına karartma serilir (body.salon-buyuk::before),
   böylece sahne gerçekten "öne çıkmış" gibi okunur. z-index navbarın
   (900) ve modalların (1000–1310) üzerinde. */
body.salon-buyuk::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1390;
  background: rgba(8, 7, 6, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: salon-karart 0.3s var(--ease-out);
}
.museum-stage.is-expanded {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 1400;
  width: min(96vw, 1760px);
  height: 92svh;
  max-width: none;
  max-height: none;
  min-height: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  border-color: var(--color-border-strong);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9);
  animation: salon-buyu 0.34s var(--ease-out);
}
@keyframes salon-karart {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes salon-buyu {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   ESERLER — beş başlık, yıl yıl döküm
   Referans düzen: solda dikey yıl rayı (bulunulan yıl büyük ve koyu),
   sağda seçili yılın görseli ve metni. Referansta görselin sağında duran
   iki dar önizleme kartı, burada görselin altına alındı.
   ========================================================================== */

.eser-bolum { padding: 0 0 var(--section-padding); }
/* Ana sayfada iki bölüm arka arkaya geliyor ve çizelgenin dev yıl filigranı
   alt kenara kadar indiği için eserler ona yapışmış gibi duruyordu. Burada
   çizelgenin altına fazladan pay, eserlerin üstüne de içerik genişliğinde
   ince bir ayraç konuyor: iki bölümün nerede bittiği belli oluyor. */
body[data-page="home"] .timeline-section { padding-bottom: calc(var(--section-padding) * 1.15); }
body[data-page="home"] .eser-bolum > .container {
  padding-top: calc(var(--section-padding) * 0.9);
  border-top: 1px solid var(--color-border);
}


/* ---------- Başlık sekmeleri ---------- */

.eser-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  /* Sekmelerle yıl rayı arası: eskiden araya giren özet satırının payını
     da bu üstleniyor. */
  margin-bottom: clamp(2.6rem, 5vw, 3.6rem);
}
.eser-tabs button {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.eser-tabs button:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.eser-tabs button.is-current {
  background: var(--gradient-gold);
  border-color: transparent;
  color: var(--color-bg-primary);
  font-weight: 600;
}

/* ---------- Gövde: yıl rayı + panel ---------- */
.eser-govde {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  /* Ray on yılla sınırlı ve kendi içinde kayıyor; panelle aynı boyda
     olmasına gerek yok. */
  align-items: start;
}

/* Yıl rayı: aynı anda on yıl görünür, kalanı kendi içinde kayar.
   Uçlar maskeyle soluklaşır; liste kesilmiş gibi değil, iki yöne doğru
   sönüyormuş gibi okunsun. Sağındaki ince çizgi referanstaki dikey
   ayracın karşılığı.
   --sira-h: bir yıl satırının yüksekliği (yazı + üst/alt padding + aralık) */
.eser-yillar-sarmal {
  --sira-h: 1.85rem;
  position: relative;
  border-right: 1px solid var(--color-border);
  padding-right: clamp(0.8rem, 2vw, 1.6rem);
  min-height: 0;
  /* On satır + seçili yılın büyümesinden gelen fazlalık */
  max-height: calc(var(--sira-h) * 10 + 0.9rem);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.eser-yillar-sarmal::-webkit-scrollbar { display: none; }

.eser-yillar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.eser-yillar button {
  position: relative;
  padding: 0.3rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, rgba(243, 236, 227, 0.4));
  /* Yalnızca renk geçişli: font-size geçişi her karede yeniden yerleşim
     tetikliyor ve ray boyunca takılmaya yol açıyor. */
  transition: color var(--dur-fast) var(--ease-out);
}
.eser-yillar button:hover { color: var(--color-text-secondary); }
/* Bulunulan yıl büyür, koyulaşır ve sağında ray üzerinde bir çentik açar */
.eser-yillar button.is-current {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.eser-yillar button.is-current::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(0.8rem, 2vw, 1.6rem) - 1px);
  width: 2px;
  height: 1.5em;
  transform: translateY(-50%);
  background: var(--gradient-gold);
}

/* ---------- Panel ---------- */
/* Görsel ve metin yan yana: metin görselin altında kalınca sayfanın çok
   aşağısına düşüyor ve bir bakışta görülemiyordu. */
.eser-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.eser-panel > * {
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
/* Yön duyarlı geçiş: ileri giderken içerik sola, geri giderken sağa kayar */
.eser-panel.is-changing > * { opacity: 0; transform: translateX(-18px); }
.eser-panel.is-changing.geri > * { transform: translateX(18px); }

.eser-kart {
  position: relative;
  margin: 0;
  /* Geniş oran + yükseklik sınırı: 4:3'te görsel ekranı kaplayıp altındaki
     metni aşağı itiyordu. */
  aspect-ratio: 4 / 3;
  max-height: 62svh;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-tertiary);
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.85);
}
.eser-kart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eser-kart-yil {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: var(--color-bg-primary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Metin ---------- */
.eser-metin { padding-top: 0.2rem; }
.eser-sayi {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.eser-baslik {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.eser-liste {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.eser-liste li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.eser-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--color-gold);
}

/* ---------- Görsel üzerindeki oklar, sayaç ve ilerleme çubuğu ---------- */
.eser-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(243, 236, 227, 0.22);
  background: rgba(20, 18, 16, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.eser-ok.prev { left: 0.8rem; }
.eser-ok.next { right: 0.8rem; }
.eser-ok svg { width: 18px; height: 18px; }
.eser-ok:hover { background: rgba(20, 18, 16, 0.78); border-color: var(--color-gold); color: var(--color-gold); }
/* Oklar karta gelince belirir; dokunmatikte hep görünür kalsın */
.eser-kart:hover .eser-ok,
.eser-ok:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .eser-ok { opacity: 1; }
}
/* Yılda tek eser varsa gezinecek bir şey yok */
.eser-kart.tek-eser .eser-ok,
.eser-kart.tek-eser .eser-sayac,
.eser-kart.tek-eser .eser-ilerleme { display: none; }

.eser-sayac {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 3;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(20, 18, 16, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
}

/* Sıradaki esere kalan süreyi gösteren ince çubuk */
.eser-ilerleme {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  width: 0;
  background: var(--gradient-gold);
}
@keyframes eser-ilerle {
  from { width: 0; }
  to   { width: 100%; }
}

/* ---------- Eser listesi: tıklanabilir maddeler ---------- */
.eser-liste li::before { top: 0.78em; }
.eser-liste button {
  font: inherit;
  color: inherit;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}
.eser-liste button:hover { color: var(--color-text-primary); }
.eser-liste button.is-current { color: var(--color-gold-light); }
.eser-liste li:has(button.is-current)::before {
  background: var(--color-gold-light);
  width: 12px;
}

/* ==========================================================================
   GİRİŞ — On altın öğüt
   Akan şerit yerine tek cümle: okuma süresi dolunca aşağı süzülüp yerini
   bir sonrakine bırakır. Pencerenin yüksekliği sabit olduğu için cümle
   uzunluğu değişse de girişin yerleşimi oynamaz.
   ========================================================================== */

.hero-ogut {
  width: min(64ch, 90vw);
  margin: clamp(1.8rem, 4vh, 3rem) auto 0;
  text-align: center;
}
.hero-ogut-baslik {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Sabit yükseklikli pencere: iki satırlık en uzun öğüde göre ölçüldü.
   Başlıkla arası dar: ikisi tek bir blok gibi okunsun. Pencere iki satır
   boyunda olduğu için tek satırlık cümlelerde üstte zaten boşluk kalıyor;
   ayrıca margin vermek araları gereğinden fazla açıyordu. */
.hero-ogut-pencere {
  position: relative;
  height: 3.6em;
  margin-top: 0.15rem;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-ogut-metin {
  margin: 0;
  font-family: var(--font-quote);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: rgba(243, 236, 227, 0.78);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
/* Çıkış: aşağı süzülür */
.hero-ogut-metin.cikiyor { opacity: 0; transform: translateY(1.6em); }
/* Giriş başlangıcı: yukarıda ve saydam, geçiş kapalı */
.hero-ogut-metin.giriyor {
  transition: none;
  opacity: 0;
  transform: translateY(-1.6em);
}

/* Öğüt şeridi: dar ekranda öğüt kutusu girişten çıkıp miras ile zaman
   çizelgesi arasına taşınıyor (yerini js/main.js değiştiriyor). Bant,
   sayaç şeridiyle aynı çerçeve ve zemini kullanıyor ki sayfada ikisi
   aynı türden bir duraklama gibi okunsun. Geniş ekranda kutu girişte
   kaldığı için bant boş ve görünmez. */
.ogut-serit:empty { display: none; }
.ogut-serit {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(27, 23, 18, 0) 70%),
    linear-gradient(180deg, rgba(169, 126, 95, 0.05) 0%, rgba(169, 126, 95, 0.02) 100%);
}
/* Geniş ekranda bant, üstündeki künye şeridine fazla yakındı */
@media (min-width: 1025px) {
  .ogut-serit { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
}
.ogut-serit .hero-ogut {
  width: var(--container-width);
  max-width: 64ch;
  margin-inline: auto;
  padding-block: clamp(2rem, 4.5vw, 3.4rem);
  margin-top: 0;
}

/* Dar ekranda parmakla gezinme ipucu (masaüstünde oklar var) */
.eser-ipucu {
  display: none;
  margin-top: 1.4rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}


/* ==========================================================================
   GÖRSEL KORUMASI
   Sağ tık ve sürükleme js/koruma.js'te kapatılıyor; burada tarayıcının
   kendi kaydetme kısayolları kapatılıyor: iOS'ta basılı tutunca açılan
   "Fotoğrafı Kaydet" menüsü (-webkit-touch-callout) ve görselin sürüklenen
   bir nesne gibi davranması (-webkit-user-drag). Metinler bundan
   etkilenmiyor; yazılar serbestçe seçilip kopyalanabiliyor.
   ========================================================================== */
img,
picture,
.kart-gorsel,
#museum-canvas {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}