/* ==========================================================================
   muze.css — Dijital Müze sayfasının kendi tasarımı

   Bu sayfa sitenin geri kalanından ayrı durur: style.css yüklenmez.
   Sıcak kum–altın editoryal dilin yerine sakin, modern bir galeri arayüzü
   var: nötr grafit bir zemin ve üzerinde yüzen buzlu cam paneller. Renk
   paleti baştan sona nötrdür — beyaz, gri ve siyah; vurgu rengi yoktur.

   Sayfa tek ekrandır. Sergi salonu görüntü alanının tamamını kaplar ve
   sayfa hiç kaydırılmaz (bkz. html, body { overflow: hidden }); arayüz
   panoramanın üstünde ince bir cam tabaka olarak durur.

   ARAYÜZ SADE TUTULUYOR: gezinme şeridi yok. Üstte ortada sönük duran
   marka ve sağ üstte menü düğmesi, altta ortada iki ikonluk tek bir bar
   (konum ve yardım) var — hepsi bu. Salonun kendisi ekranın tamamı
   olduğu için ayrıca bir tam ekran düğmesi de yok.

   İÇİNDEKİLER
   01 · Yazı tipi, sıfırlama, değişkenler
   02 · Üst katman (marka, menü düğmesi) ve açılır menü
   03 · Sahne
   04 · Sahne arayüzü (alt bar, yardım katmanı, ipuçları, künye satırı)
   05 · Sahne bileşenleri (museum.js'in sınıfları)
   06 · Eser kartları — yana kaydırmalı
   07 · Hareket azaltma
   08 · Kırılımlar
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500&display=swap');

/* ==========================================================================
   01 · Sıfırlama ve değişkenler
   ========================================================================== */

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

:root {
  /* Salonun bütün arayüzü giriş panelinin ("Salona hoş geldiniz") dilini
     konuşuyor: ana sayfanın sıcak koyu kahvesi, krem tonlu cam, krem
     birincil düğmeler, altın ayrıntılar ve serif başlıklar (bkz. 05 ·
     Giriş ekranı). Değerler style.css'teki ana sayfa paletinden. */

  /* Zemin */
  --zemin:    #1B1712;
  --zemin-2:  #241F18;

  /* Cam */
  --cam:      rgba(243, 236, 227, 0.06);
  --cam-uste: rgba(243, 236, 227, 0.11);
  --cam-koyu: rgba(27, 23, 18, 0.58);
  --hat:      rgba(243, 236, 227, 0.14);
  --hat-2:    rgba(243, 236, 227, 0.26);
  --golge:    0 40px 110px rgba(8, 6, 4, 0.55), 0 10px 30px rgba(8, 6, 4, 0.3);
  --golge-s:  0 10px 28px rgba(8, 6, 4, 0.34);
  --ic-isik:  inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Giriş panelinin camı: krem tonlu, köşeden köşeye hafif açılan bir
     parıltı. -ince sürümü salonun üstünde yüzen küçük parçalar (bar,
     düğmeler, balonlar) için; -pencere sürümü okunacak uzun yazı taşıyan
     pencereler için, altı daha koyu. */
  --cam-parilti: linear-gradient(150deg, rgba(243, 236, 227, 0.12) 0%, rgba(243, 236, 227, 0.035) 48%, rgba(243, 236, 227, 0.07) 100%);
  --cam-ince:    var(--cam-parilti), rgba(27, 23, 18, 0.52);
  --cam-pencere: var(--cam-parilti), rgba(30, 26, 20, 0.86);
  --pano-hat:    rgba(243, 236, 227, 0.15);

  /* Yazı */
  --ak:       #F3ECE3;
  --sis:      rgba(243, 236, 227, 0.68);
  --sis-2:    rgba(243, 236, 227, 0.46);

  /* Ana sayfanın vurgu renkleri */
  --krem:     #EFE4D2;   /* birincil düğmenin dolgusu */
  --murekkep: #17140F;   /* krem üstündeki yazı */
  --altin:    #C9A184;   /* üst satırlar, ikonlar */

  --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif:    'Playfair Display', Georgia, 'Times New Roman', serif;

  --yumusak:  cubic-bezier(0.22, 1, 0.36, 1);
  --akici:    cubic-bezier(0.65, 0, 0.35, 1);

  /* Kart yüzeyleri — ana sayfadaki künye kartıyla aynı sıcak kahve ton.
     Değerler style.css'teki --color-bg-tertiary / --color-bg-secondary ve
     --color-border ile aynı. */
  --kart:       #2C261D;               /* kartın yüzeyi */
  --kart-koyu:  #241F18;               /* kartın içindeki alt katman */
  --kart-cam:   rgba(243, 236, 227, 0.07);  /* panoramanın üstündeki cam kart */
  --kart-hat:   rgba(243, 236, 227, 0.12);
  --kart-hat-2: rgba(243, 236, 227, 0.26);
  /* Fotoğrafın altına inen karartma da soğuk siyah değil, kartla aynı sıcak
     tonun koyusu — kart ile fotoğraf arasında renk sıçraması olmuyor. */
  --kart-perde: 20, 17, 13;

  --r-l:      26px;
  --r-m:      18px;
  --r-s:      12px;
  --r-tam:    999px;

  --ust-y:    64px;                       /* üstte marka ve menü için ayrılan pay */
  /* Alt barın tam yüksekliği: içindeki 42 piksellik düğme + iki yandan
     0.3rem pay + 1 piksellik kenar. Salonun ortasına dönüş düğmesi de
     bu boyu kullanıyor ki iki çubuk yan yana aynı hizada dursun. */
  --bar-y:    calc(42px + 0.6rem + 2px);
  /* Vitrin penceresi: liste ve detay görünümü aynı çerçeveyi paylaşır,
     bu yüzden ölçü tek yerde duruyor. Pencere ekranı kaplamaz. */
  --panel-e:  min(470px, calc(100vw - 1.6rem));
  --panel-y:  min(740px, calc(100svh - 2.4rem));
  --panel-r:  32px;
  --kenar:    clamp(0.9rem, 3vw, 1.6rem); /* sahne arayüzünün kenar payı */
  --bulanik:  blur(30px) saturate(135%);
}

/* Sayfa tek ekran: tur başlamadan da, başladıktan sonra da kaydırma yok.
   touch-action: manipulation çift dokunuşla yakınlaştırmayı kapatır; iki
   parmakla yakınlaştırmayı js/yakinlastirma.js engelliyor. */
html, body {
  height: 100%;
  touch-action: manipulation;
  overflow: hidden;
  overscroll-behavior: none;
  /* Dokunmada beliren mavi vurgu kutusu kapatılıyor. */
  -webkit-tap-highlight-color: transparent;
}

a, button, summary, label, input, select, textarea,
[role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ak);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

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

/* Salonda hiçbir metin seçilemez, dolayısıyla kopyalanamaz. Kural burada
   bütün sayfayı kapsıyor; klavyeden gelen kopyalama (Ctrl/Cmd+C, Ctrl+A)
   ayrıca muze-ui.js · kopyalamayiKapat içinde durduruluyor. Bu sayfada
   metin girilen bir alan yok, o yüzden seçimi tümden kapatmak bir şeyi
   bozmuyor. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.skip-link {
  position: fixed;
  top: 0.6rem;
  left: 50%;
  z-index: 300;
  transform: translate(-50%, -200%);
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-tam);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--murekkep);
  background: var(--krem);
  transition: transform 0.25s var(--yumusak);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   02 · Üst katman ve menü

   Bu sayfada gezinme şeridi yok: panoramanın üstünde yalnızca ortada duran
   marka ile sağ üstteki menü düğmesi yüzer. Katmanın kendisi tıklanamaz
   (pointer-events: none), yalnızca içindeki iki öğe tıklanır; böylece
   üst kenardan da salon sürüklenebilir.
   ========================================================================== */

.muze-ust {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  height: calc(var(--ust-y) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) clamp(0.9rem, 3vw, 1.8rem) 0;
  pointer-events: none;
  transition: opacity 0.35s var(--yumusak), visibility 0.35s;
}
.muze-ust > * { pointer-events: auto; }

/* Marka sönük durur; üstüne gelince ya da klavyeyle odaklanınca
   tam görünür hâle gelir. */
.muze-marka {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-tam);
  opacity: 0.4;
  transition: opacity 0.3s var(--yumusak);
}
.muze-marka img { width: auto; height: 24px; }
.muze-marka:hover,
.muze-marka:focus-visible { opacity: 1; }

.menu-dugme {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  transition: background-color 0.25s, border-color 0.25s;
}
.menu-dugme:hover { background: var(--cam-parilti), rgba(44, 38, 29, 0.7); border-color: var(--hat-2); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--r-tam);
  background: var(--cam);
  border: 1px solid var(--hat);
}
.lang-switch button {
  padding: 0.3rem 0.62rem;
  border-radius: var(--r-tam);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--sis-2);
  transition: color 0.25s, background-color 0.25s;
}
.lang-switch button:hover { color: var(--ak); }
.lang-switch button.active { color: var(--murekkep); background: var(--krem); }

/* İki ince çizgi; menü açıkken çarpıya döner */
.menu-ikon { display: grid; gap: 5px; place-items: center; }
.menu-ikon i {
  display: block;
  width: 17px; height: 1.5px;
  border-radius: 1px;
  background: var(--ak);
  transition: transform 0.32s var(--yumusak);
}
.menu-dugme[aria-expanded="true"] .menu-ikon i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] .menu-ikon i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Açılır menü ----------
   Şerit kaldırıldığı için sitenin bağlantıları ve dil seçimi yalnızca
   burada. Menü düğmesi (z-index 120) bu katmanın üstünde kalır ki
   açıkken çarpıya dönen aynı düğmeyle kapatılabilsin. */
.muze-menu {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--ust-y) + 2rem + env(safe-area-inset-top)) max(1.5rem, 6vw) calc(1.6rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 55% at 100% 100%, rgba(127, 114, 94, 0.34) 0%, rgba(27, 23, 18, 0) 70%),
    radial-gradient(70% 40% at 0% 0%, rgba(201, 161, 132, 0.08) 0%, rgba(27, 23, 18, 0) 70%),
    linear-gradient(180deg, rgba(27, 24, 20, 0.97) 0%, rgba(21, 18, 15, 0.97) 60%, rgba(17, 15, 12, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 0.3s var(--yumusak);
}
.muze-menu[hidden] { display: none; }
.muze-menu.is-acik { opacity: 1; }

/* Ana sayfanın mobil menüsüyle aynı düzen (animations.css · Mobil menü):
   künye, numaralı satırlar, altta dil ve vakıf künyesi */
.menu-govde {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  min-height: 100%;
  margin: 0 auto;
  counter-reset: menu;
}
.menu-kunye {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--altin);
}
.menu-kunye::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, #A97E5F, #E3C49F); }

.menu-ic { display: flex; flex-direction: column; }
.menu-ic a {
  counter-increment: menu;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.02rem 0.2rem;
  border-bottom: 1px solid rgba(243, 236, 227, 0.08);
  font-size: clamp(1.3rem, 5.6vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(243, 236, 227, 0.8);
  transition: color 0.25s, padding 0.35s var(--yumusak), background-color 0.25s;
}
.menu-ic a::before {
  content: counter(menu, decimal-leading-zero);
  min-width: 1.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(243, 236, 227, 0.36);
  font-variant-numeric: tabular-nums;
}
.menu-ic a::after {
  content: '';
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
  transition: opacity 0.25s, transform 0.35s var(--yumusak);
}
.menu-ic a:hover,
.menu-ic a:active { color: var(--ak); padding-left: 0.45rem; }
.menu-ic a:hover::after,
.menu-ic a:active::after { opacity: 0.8; transform: translateX(3px) rotate(45deg); }
/* Açılışta odak ilk satıra gelir; beyaz bir kutu yerine hafif bir zemin */
.menu-ic a:focus { outline: none; }
.menu-ic a:focus-visible { border-radius: 12px; background-color: rgba(243, 236, 227, 0.06); }

.menu-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(243, 236, 227, 0.45);
}
.menu-dil button { padding: 0.38rem 0.85rem; letter-spacing: 0.06em; }

/* Satırlar sırayla, aşağıdan süzülerek girer */
.menu-kunye, .menu-ic a, .menu-alt { opacity: 0; transform: translateY(14px); }
.muze-menu.is-acik .menu-kunye,
.muze-menu.is-acik .menu-ic a,
.muze-menu.is-acik .menu-alt { animation: menu-gir 0.5s var(--yumusak) forwards; }
.muze-menu.is-acik .menu-kunye { animation-delay: 0.03s; }
.muze-menu.is-acik .menu-ic a:nth-child(1) { animation-delay: 0.07s; }
.muze-menu.is-acik .menu-ic a:nth-child(2) { animation-delay: 0.11s; }
.muze-menu.is-acik .menu-ic a:nth-child(3) { animation-delay: 0.15s; }
.muze-menu.is-acik .menu-ic a:nth-child(4) { animation-delay: 0.19s; }
.muze-menu.is-acik .menu-ic a:nth-child(5) { animation-delay: 0.23s; }
.muze-menu.is-acik .menu-ic a:nth-child(6) { animation-delay: 0.27s; }
.muze-menu.is-acik .menu-alt { animation-delay: 0.32s; }
@keyframes menu-gir { to { opacity: 1; transform: none; } }

@media (max-height: 640px) {
  .menu-ic a { padding: 0.72rem 0.2rem; font-size: 1.2rem; }
}


/* ==========================================================================
   03 · Sahne — görüntü alanının tamamı
   ========================================================================== */

.sahne-bolum {
  position: relative;
  height: 100svh;
  width: 100%;
}

.museum-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(90% 90% at 50% 45%, var(--zemin-2), #0F0D0A);
  cursor: grab;
  isolation: isolate;
}
.museum-stage:active { cursor: grabbing; }
.museum-stage.is-locked { cursor: pointer; }

#museum-canvas {
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.1s var(--yumusak), filter 0.8s var(--yumusak), transform 1.2s var(--yumusak);
}
.museum-stage.is-ready #museum-canvas { opacity: 1; transform: scale(1); }
/* Kilitliyken salon bulanık ve yumuşak durur; giriş kartı öndedir */
.museum-stage.is-locked #museum-canvas {
  filter: blur(14px) brightness(0.6);
  transform: scale(1.09);
}

/* Üst ve alt kenarda arayüzün okunmasını sağlayan yumuşak karartma */
.sahne-perde {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--yumusak);
  background:
    linear-gradient(180deg, rgba(12, 10, 7, 0.5) 0%, transparent 22%),
    linear-gradient(0deg, rgba(12, 10, 7, 0.55) 0%, transparent 26%);
}
.museum-stage.is-open .sahne-perde { opacity: 1; }


/* ==========================================================================
   04 · Sahne arayüzü
   ========================================================================== */

/* ---------- Alt bar (orta alt) ----------
   Salonun tek arayüz çubuğu. İçinde iki ikon düğme var: solda bulunulan
   durak, sağda yardım. İkisinin de yazısı yok; ne işe yaradıklarını
   üstlerinde beliren küçük balon söyler. Tıklanınca çubuğun üstünde
   birer kutu açılır. */
/* Ortalama transform ile değil, iki yandan sıfır + margin: auto ile
   yapılıyor. Böylece transform yalnızca açılış kaymasını taşıyor; eskiden
   ikisi aynı özelliği paylaştığı için translateX(-50%) yazmayı unutan her
   kural çubuğu sola kaçırıyordu. Sonuç: her ekran genişliğinde tam orta. */
.muze-bar {
  position: absolute;
  left: 0; right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 2 * var(--kenar));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem;
  border-radius: var(--r-tam);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s var(--yumusak), visibility 0.5s, transform 0.5s var(--yumusak);
}
.museum-stage.is-open .muze-bar {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.museum-stage.is-static .muze-bar { display: none; }

.bar-oge { position: relative; display: flex; }

.bar-dugme {
  position: relative;   /* balon düğmeye göre oturur, kutu ise .bar-oge'ye */
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--sis);
  transition: color 0.22s, background-color 0.22s;
}
.bar-dugme svg { width: 19px; height: 19px; }
.bar-dugme:hover { color: var(--ak); background: rgba(243, 236, 227, 0.1); }
.bar-dugme[aria-expanded="true"] { color: var(--ak); background: rgba(243, 236, 227, 0.16); }

/* Dil düğmesi ikon yerine iki harf taşır */
.bar-dil {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.bar-ayirac { width: 1px; height: 20px; background: var(--hat); }

/* İkonun ne olduğunu söyleyen balon — dokunmatikte yok, orada zaten
   parmak "üstüne gelemiyor" ve kutunun kendisi açılıyor. */
.bar-ipucu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-tam);
  background: var(--cam-parilti), rgba(27, 23, 18, 0.92);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ak);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s var(--yumusak);
}
@media (hover: hover) and (pointer: fine) {
  .bar-dugme:hover .bar-ipucu,
  .bar-dugme:focus-visible .bar-ipucu { opacity: 1; transform: translateX(-50%); }
  /* Kutu açıkken balon kutunun altında kalmasın */
  .bar-dugme[aria-expanded="true"] .bar-ipucu { opacity: 0; }
}

/* Düğmenin üstünde açılan kutu */
.bar-kutu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: max-content;
  max-width: min(320px, calc(100vw - 2rem));
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 22px;
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--golge), var(--ic-isik);
  text-align: left;
  transform: translateX(-50%);
  animation: kutu-in 0.24s var(--yumusak);
}
.bar-kutu[hidden] { display: none; }
@keyframes kutu-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

.kutu-ustbilgi {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--altin);
}
.kutu-ad {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ak);
}
.kutu-sayac {
  flex: 0 0 auto;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-tam);
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--sis);
  background: rgba(243, 236, 227, 0.1);
  border: 1px solid var(--pano-hat);
}
.kutu-yonerge {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hat);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--sis-2);
}
.kutu-liste { display: grid; gap: 2px; margin-top: 0.45rem; }
.kutu-liste button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-s);
  font-size: 0.85rem;
  font-weight: 450;
  color: var(--sis);
  text-align: left;
  transition: color 0.2s, background-color 0.2s;
}
.kutu-liste button:hover { color: var(--ak); background: rgba(243, 236, 227, 0.08); }
.kutu-liste button.is-aktif { color: var(--ak); background: rgba(243, 236, 227, 0.14); }
.liste-no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--sis-2);
  background: rgba(243, 236, 227, 0.08);
}
.kutu-liste button.is-aktif .liste-no { color: var(--murekkep); background: var(--krem); }

/* ---------- Salonun ortasına dönüş (sol alt) ---------- */
.museum-back {
  position: absolute;
  left: var(--kenar);
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Alt barla aynı yükseklik ve aynı alt hiza: iki çubuk tek bir şeridin
     parçası gibi okunuyor. */
  height: var(--bar-y);
  padding-inline: 1.05rem;
  border-radius: var(--r-tam);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--ak);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.4s var(--yumusak), visibility 0.4s, transform 0.4s var(--yumusak),
              color 0.25s, border-color 0.25s, background-color 0.25s;
}
.museum-back.is-gorunur { opacity: 1; visibility: visible; transform: none; }
.museum-back:hover { border-color: var(--hat-2); background: var(--cam-parilti), rgba(44, 38, 29, 0.66); }
.museum-back svg { width: 15px; height: 15px; color: var(--altin); }
.museum-stage.is-locked .museum-back { opacity: 0; visibility: hidden; }

/* ---------- Salon haritası (sağ alt) ----------
   Salonun kuşbakışı krokisi: ince çizgili bir plan ve üzerinde bulunulan
   yeri ve bakılan yönü gösteren bir işaret. Duraklara tıklanabilir. */
.muze-harita {
  position: absolute;
  right: var(--kenar);
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 11;
  width: clamp(168px, 17vw, 232px);
  padding: 0.7rem;
  border-radius: 22px;
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s var(--yumusak), visibility 0.5s, transform 0.5s var(--yumusak);
}
.museum-stage.is-open .muze-harita {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.museum-stage.is-static .muze-harita { display: none; }

.muze-harita svg { display: block; width: 100%; height: auto; overflow: visible; }

.harita-duvar {
  fill: none;
  stroke: rgba(243, 236, 227, 0.5);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Duvar resminin cephesi biraz daha belirgin */
.harita-vurgu {
  fill: none;
  stroke: rgba(243, 236, 227, 0.82);
  stroke-width: 3.4;
  stroke-linecap: round;
}
/* Nişlerdeki maket platformları */
.harita-doku {
  fill: none;
  stroke: rgba(243, 236, 227, 0.26);
  stroke-width: 1.6;
}

/* Duraklar: görünen küçük nokta, tıklama alanı ondan geniş */
.harita-durak { cursor: pointer; }
.harita-hedef { fill: transparent; }
.harita-nokta {
  fill: rgba(243, 236, 227, 0.42);
  transition: fill 0.22s;
}
.harita-durak:hover .harita-nokta { fill: var(--ak); }
.harita-durak:focus-visible { outline: none; }
.harita-durak:focus-visible .harita-nokta { fill: var(--ak); }
/* Bulunulan durağın noktası imlecin altında kaldığı için gizlenir */
.harita-durak.is-aktif .harita-nokta { fill: transparent; }

/* Bulunulan yer ve bakış yönü; iki katman (bkz. muze.html · harita-imlec).
   transform-box/origin, px cinsinden yazılan değerlerin viewBox
   birimleriyle aynı olmasını sağlıyor. */
.harita-imlec,
.harita-yon {
  transform-box: view-box;
  transform-origin: 0 0;
}
/* Durak değişiminde işaret kayarak gider; dönüş anında olur ki bakışın
   gerisinde kalmasın. */
.harita-imlec { transition: transform 0.5s var(--yumusak); }
.harita-koni { fill: rgba(201, 161, 132, 0.32); }
.harita-ben {
  fill: var(--krem);
  stroke: rgba(27, 23, 18, 0.65);
  stroke-width: 1.6;
}

/* Kroki bir düğme: basılınca salonun 3B planı açılır. Köşedeki küçük
   genişletme işareti sönük durur, üstüne gelince belirginleşir; üstte
   alt bardaki gibi bir ipucu balonu çıkar. */
.muze-harita { cursor: pointer; }
.muze-harita:hover,
.muze-harita:focus-visible {
  border-color: var(--hat-2);
  background: var(--cam-parilti), rgba(44, 38, 29, 0.7);
}
.muze-harita:focus-visible { outline: 2px solid rgba(243, 236, 227, 0.6); outline-offset: 3px; }
.muze-harita:hover .harita-duvar { stroke: rgba(243, 236, 227, 0.72); }
.harita-genislet {
  position: absolute;
  top: 7px; right: 7px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--sis-2);
  background: rgba(243, 236, 227, 0.06);
  transition: color 0.22s, background-color 0.22s, transform 0.3s var(--yumusak);
}
.harita-genislet svg { width: 11px; height: 11px; }
.muze-harita:hover .harita-genislet,
.muze-harita:focus-visible .harita-genislet {
  color: var(--ak);
  background: rgba(243, 236, 227, 0.14);
  transform: scale(1.08);
}
@media (hover: hover) and (pointer: fine) {
  .muze-harita:hover .harita-ipucu,
  .muze-harita:focus-visible .harita-ipucu { opacity: 1; transform: translateX(-50%); }
}

/* Konum kutusunun altındaki plan düğmesi */
.kutu-plan {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.55rem 0.6rem;
  border-top: 1px solid var(--hat);
  border-radius: 0 0 var(--r-s) var(--r-s);
  font-size: 0.85rem;
  font-weight: 450;
  color: var(--sis);
  text-align: left;
  transition: color 0.2s, background-color 0.2s;
}
.kutu-plan:hover { color: var(--ak); background: rgba(243, 236, 227, 0.08); }
.kutu-plan svg { width: 1.35rem; height: 1.1rem; flex: 0 0 auto; color: var(--altin); }

/* ---------- 3B plana geçiş sorusu ----------
   Salonda aşağı kaydırmayı sürdürünce ortada beliren küçük cam kutu.
   Yalnızca sorulduğunda görünür; panoramanın önünde kalıcı durmaz. */
.plan-sor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 26;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: min(400px, calc(100% - 2 * var(--kenar)));
  padding: 1.7rem 1.6rem 1.45rem;
  border-radius: 28px;
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--ic-isik), var(--golge);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px)) scale(0.97);
  transition: opacity 0.3s var(--yumusak), transform 0.4s var(--yumusak);
}
.plan-sor.is-open { opacity: 1; transform: translate(-50%, -50%); }
.plan-sor[hidden] { display: none; }

.plan-sor-ikon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 0.2rem;
  border-radius: 50%;
  color: var(--altin);
  background: rgba(243, 236, 227, 0.07);
  border: 1px solid var(--pano-hat);
}
.plan-sor-ikon svg { width: 20px; height: 20px; }
.plan-sor-baslik {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ak);
}
.plan-sor-metin {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--sis);
}
.plan-sor-dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.plan-sor-dugmeler button {
  min-height: 46px;
  padding: 0 1.3rem;
  border-radius: var(--r-tam);
  font-size: 0.88rem;
  font-weight: 550;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.3s var(--yumusak), box-shadow 0.3s;
}
.plan-sor-hayir {
  color: var(--ak);
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid var(--pano-hat);
}
.plan-sor-hayir:hover { border-color: var(--hat-2); background: rgba(243, 236, 227, 0.11); }
.plan-sor-evet {
  color: var(--murekkep);
  background: var(--krem);
  box-shadow: 0 10px 28px rgba(8, 6, 4, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.plan-sor-evet:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(8, 6, 4, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ---------- Salonun 3B planı ----------
   Ekranı kaplayan katman. Panoramanın üstüne yavaşça karışarak gelir:
   plan kamerası ilk karede panoramayla aynı yerden, aynı kadrajla baktığı
   için karışım bir dikiş göstermez (bkz. muze-plan.js · ac). Kapanırken
   de aynı karede panoramaya karışarak çekilir. */
.muze-plan {
  position: absolute;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  /* Planın sahne zeminiyle aynı: ana sayfanın sıcak koyu kahvesi */
  background:
    radial-gradient(88% 82% at 100% 100%, rgba(127, 114, 94, 0.62) 0%, rgba(71, 64, 56, 0.45) 26%, rgba(27, 23, 18, 0) 70%),
    radial-gradient(ellipse 62% 62% at 50% 46%, #3A332A 0%, rgba(39, 36, 33, 0.7) 55%, rgba(27, 23, 18, 0) 100%),
    #1B1712;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--akici), visibility 0s linear 0.45s;
}
.muze-plan.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--akici), visibility 0s;
}

.plan-tuval {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

/* Sol üstte planın adı: sergideki üst satırların dili — altın ikon,
   geniş aralıklı büyük harf — sade bir cam hapın içinde. Kapatma
   düğmesiyle aynı yükseklikte, aynı çizgide durur. */
.plan-ust {
  position: absolute;
  top: calc(var(--kenar) + env(safe-area-inset-top));
  left: var(--kenar);
  pointer-events: none;
}
.plan-baslik {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 44px;
  margin: 0;
  padding: 0 1.15rem 0 0.95rem;
  border-radius: var(--r-tam);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik), var(--golge-s);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak);
  white-space: nowrap;
}
.plan-baslik svg { width: 17px; height: 17px; flex: none; color: var(--altin); }

/* İpucu: altta ortada üç kısa hareket. Açılışta belirir, birkaç saniye
   sonra ya da ilk dokunuşta söner (muze-plan.js · is-ipucu). */
.plan-ipucu {
  position: absolute;
  left: 50%;
  bottom: calc(var(--kenar) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  padding: 0.35rem;
  border-radius: var(--r-tam);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik), var(--golge-s);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.6s var(--yumusak), transform 0.6s var(--yumusak);
}
.muze-plan.is-ipucu .plan-ipucu { opacity: 1; transform: translate(-50%, 0); }
.plan-ipucu-oge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.78rem;
  color: var(--sis);
}
.plan-ipucu-oge + .plan-ipucu-oge { border-left: 1px solid var(--pano-hat); }
.plan-ipucu-oge svg { width: 16px; height: 16px; flex: none; color: var(--altin); }
/* Aynı hareketin fareli ve dokunmatik ekrandaki adı */
.plan-dokun { display: none; }
@media (hover: none), (pointer: coarse) {
  .plan-fare { display: none; }
  .plan-dokun { display: inline; }
}
/* Dar ekranda üç hareket alt alta, sola hizalı bir kartta */
@media (max-width: 640px) {
  .plan-ipucu {
    flex-direction: column;
    align-items: stretch;
    padding: 0.3rem 0.2rem;
    border-radius: 20px;
  }
  .plan-ipucu-oge { padding: 0.5rem 0.9rem; }
  .plan-ipucu-oge + .plan-ipucu-oge { border-left: 0; border-top: 1px solid var(--pano-hat); }
}

.plan-kapat {
  position: absolute;
  top: calc(var(--kenar) + env(safe-area-inset-top));
  right: var(--kenar);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--ak);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--ic-isik), var(--golge-s);
  transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--yumusak);
}
.plan-kapat:hover { background: var(--cam-parilti), rgba(44, 38, 29, 0.7); border-color: var(--hat-2); transform: rotate(90deg); }
.plan-kapat:focus-visible { outline: 2px solid rgba(243, 236, 227, 0.7); outline-offset: 3px; }
.plan-kapat svg { width: 18px; height: 18px; }

/* Üstüne gelince beliren etiket: nesnenin üstünde, maketle birlikte
   hareket eder (yeri her karede muze-plan.js'ten yazılıyor). */
.plan-etiket {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  gap: 0.1rem;
  max-width: min(280px, 70vw);
  padding: 0.5rem 0.8rem 0.55rem;
  border-radius: 14px;
  background: var(--cam-parilti), rgba(27, 23, 18, 0.72);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik), var(--golge-s);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  will-change: transform;
}
.plan-etiket.is-gorunur { opacity: 1; }
.plan-etiket strong { font-family: var(--serif); font-size: 0.95rem; font-weight: 500; line-height: 1.3; color: var(--ak); }
.plan-etiket span { font-size: 0.72rem; color: var(--altin); }
/* Dokunmatikte etikete dokunmak seçili şeye götürür */
@media (hover: none), (pointer: coarse) {
  .plan-etiket.is-gorunur { pointer-events: auto; cursor: pointer; }
}

/* İlk açılışta dokular gelene kadar ortada küçük bir halka */
.plan-yukleniyor {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: var(--sis);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
}
.muze-plan.is-yukleniyor .plan-yukleniyor,
.muze-plan.is-hata .plan-yukleniyor { opacity: 1; visibility: visible; }
.plan-halka {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(243, 236, 227, 0.14);
  border-top-color: var(--krem);
  animation: plan-don 0.9s linear infinite;
}
@keyframes plan-don { to { transform: rotate(360deg); } }
.plan-hata { display: none; }
.muze-plan.is-hata .plan-halka,
.muze-plan.is-hata .plan-durum { display: none; }
.muze-plan.is-hata .plan-hata { display: block; }

/* Klavye ve ekran okuyucu listesi: görünmez, içine odak gelince sol
   altta küçük bir cam şerit olarak belirir. */
.plan-erisim {
  position: absolute;
  left: var(--kenar);
  bottom: calc(var(--kenar) + env(safe-area-inset-bottom));
  margin: 0;
  padding: 0;
  list-style: none;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.plan-erisim:focus-within {
  width: min(320px, calc(100% - 2 * var(--kenar)));
  height: auto;
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: none;
  padding: 0.3rem;
  border-radius: var(--r-m);
  background: rgba(27, 23, 18, 0.66);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
}
.plan-erisim button {
  display: block;
  width: 100%;
  padding: 0.42rem 0.7rem;
  border-radius: var(--r-s);
  font-size: 0.82rem;
  color: var(--sis);
  text-align: left;
}
.plan-erisim button:focus { outline: none; color: var(--ak); background: rgba(243, 236, 227, 0.12); }

/* Plan açıkken salonun kendi arayüzü çekilir */
.museum-stage:has(.muze-plan.is-open) .muze-bar,
.museum-stage:has(.muze-plan.is-open) .museum-back,
.museum-stage:has(.muze-plan.is-open) .muze-harita {
  opacity: 0;
  pointer-events: none;
}
body:has(.muze-plan.is-open) .muze-ust { opacity: 0; visibility: hidden; }

/* ---------- Künye satırı ----------
   Sayfa kaydırılmadığı için altbilgi giriş ekranında, salonun altında
   duruyor; tur başlayınca çekiliyor. */
.muze-altbilgi {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
  padding-inline: 1.2rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--sis-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--yumusak);
}
.muze-altbilgi strong { font-weight: 500; }
.museum-stage.is-locked .muze-altbilgi { opacity: 1; }
/* Satır tıklamayı panoramaya geçirir; yalnızca bağlantılar, satır görünürken
   tıklanabilir olur. Tur başlayıp satır söndüğünde yine yakalanmazlar. */
.muze-altbilgi a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--yumusak), color 0.25s;
}
.museum-stage.is-locked .muze-altbilgi a { pointer-events: auto; }
.muze-altbilgi a:hover,
.muze-altbilgi a:focus-visible { background-size: 100% 1px; color: #F3ECE3; }

/* ---------- Yardım katmanı ----------
   Alt bardaki soru işaretiyle açılır; salonun nasıl gezildiğini anlatır.
   Eser kartlarıyla aynı mantıkta: sahnenin içinde, panoramanın üstünde. */
.muze-yardim {
  position: absolute;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(12, 10, 7, 0.76);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--yumusak), visibility 0.35s;
}
.muze-yardim.is-open { opacity: 1; visibility: visible; }

.yardim-kart {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border-radius: 30px;
  background: var(--cam-pencere);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge), var(--ic-isik);
  transform: translateY(10px);
  transition: transform 0.4s var(--yumusak);
}
.muze-yardim.is-open .yardim-kart { transform: none; }

.yardim-kapat {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid var(--pano-hat);
  color: var(--ak);
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.3s var(--yumusak);
}
.yardim-kapat:hover { color: var(--ak); background: rgba(243, 236, 227, 0.12); border-color: var(--hat-2); transform: rotate(90deg); }

.yardim-ustbilgi {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--altin);
}
.yardim-kart h2 {
  margin-top: 0.55rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.yardim-liste {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
}
.yardim-liste li { display: flex; gap: 0.85rem; align-items: flex-start; }
.yardim-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid var(--pano-hat);
  color: var(--altin);
}
.yardim-ikon svg { width: 17px; height: 17px; }
.yardim-metin { display: grid; gap: 0.15rem; min-width: 0; }
.yardim-metin strong { font-size: 0.92rem; font-weight: 500; color: var(--ak); }
.yardim-metin span { font-size: 0.83rem; line-height: 1.55; color: var(--sis); }

.yardim-dipnot {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hat);
  font-size: 0.76rem;
  color: var(--sis-2);
}

/* ---------- Vitrin paneli · liste görünümü ----------
   Alt bardaki kartlar ikonu ekranı kaplayan bir katman değil, salonun
   ortasında duran tek bir pencere açar. Pencerede üstte başlık, altında
   durağa göre süzen haplar, en altta da vitrinlerin yana kaydığı kart
   destesi var: ortadaki kart tam boyunda durur, yanındakiler arkasına
   çekilir. Bir kartın üstüne basılınca aynı ölçüdeki detay penceresi
   açılır (bkz. 06 · Vitrin paneli · detay görünümü). */
.muze-dizin {
  position: absolute;
  inset: 0;
  z-index: 27;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 3vw, 1.3rem);
  background: rgba(12, 10, 7, 0.62);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--yumusak), visibility 0.32s;
}
.muze-dizin.is-open { opacity: 1; visibility: visible; }

/* Pencerenin kendisi. Ölçüsü detay penceresiyle aynı (--panel-e/--panel-y)
   ki liste ile detay arasında geçerken çerçeve yerinden oynamasın. */
.dizin-ic {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--panel-e);
  height: var(--panel-y);
  padding: 1.35rem 0 1.15rem;
  border-radius: var(--panel-r);
  background: var(--cam-pencere);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge), var(--ic-isik);
  overflow: hidden;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.4s var(--yumusak);
}
.muze-dizin.is-open .dizin-ic { transform: none; }

.dizin-ust {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-inline: 1.3rem;
}
.dizin-ustbilgi {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--altin);
}
.dizin-ust h2 {
  margin-top: 0.45rem;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 5.4vw, 1.95rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.dizin-kapat {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid var(--pano-hat);
  color: var(--ak);
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.3s var(--yumusak);
}
.dizin-kapat:hover { color: var(--ak); background: rgba(243, 236, 227, 0.12); border-color: var(--hat-2); transform: rotate(90deg); }

/* Süzgeç hapları tek sıra: sığmazsa yana kayar, çubuk gizli */
.dizin-suzgec {
  flex: 0 0 auto;
  display: flex;
  gap: 0.45rem;
  margin-top: 0.95rem;
  padding-inline: 1.3rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.dizin-suzgec::-webkit-scrollbar { display: none; }

.suzgec-hap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.52rem 1.05rem;
  border-radius: var(--r-tam);
  border: 1px solid var(--pano-hat);
  background: rgba(243, 236, 227, 0.05);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--sis);
  white-space: nowrap;
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
}
.suzgec-hap:hover { color: var(--ak); border-color: var(--hat-2); }
.suzgec-hap.is-secili {
  color: var(--murekkep);
  background: var(--krem);
  border-color: var(--krem);
  font-weight: 550;
  box-shadow: 0 6px 18px rgba(8, 6, 4, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- Kart destesi ----------
   Yatay bir ray: her kart sıraya yapışır, ortadaki tam boyundadır.
   Ortadaki kartı muze-ui.js işaretliyor (.is-merkez). */
/* Deste ile yan okları taşıyan yuva: oklar desteye göre ortalanıyor */
.dizin-deste-yuva {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  margin-top: 0.95rem;
}

.dizin-deste {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.35rem 2.9rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2.9rem;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.dizin-deste::-webkit-scrollbar { display: none; }

.dizin-bos[hidden] { display: none; }
.dizin-bos {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 2rem 1.3rem;
  font-size: 0.86rem;
  color: var(--sis-2);
  text-align: center;
}

/* Kartın kendisi tıklanabilir bir kutu değil: üstünde her yeri kaplayan
   saydam bir düğme duruyor. Böylece paylaş düğmesi kartın içinde kalabiliyor
   (düğme içinde düğme olmaz) ve yazılar tıklamayı engellemiyor. */
.vkart {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--pano-hat);
  background: var(--kart);
  box-shadow: var(--golge), var(--ic-isik);
  /* Ortadaki kartın yanındakiler arkada duruyor: küçülüp bulanıklaşıyor,
     kenardan yalnızca bir şeritleri görünüyor. */
  transform: scale(0.93);
  opacity: 0.62;
  filter: blur(4px);
  transition: transform 0.45s var(--yumusak), opacity 0.45s var(--yumusak),
              filter 0.45s var(--yumusak);
}
.vkart[hidden] { display: none; }
.vkart.is-merkez { transform: none; opacity: 1; filter: none; }

.vkart-resim { position: absolute; inset: 0; display: block; }
.vkart-resim img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.7s var(--yumusak);
}
.vkart.is-merkez:hover .vkart-resim img { transform: scale(1.06); }
.vkart-resim.gorsel-ust img { object-position: center 22%; }
.vkart-resim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(var(--kart-perde), 0.9) 0%,
    rgba(var(--kart-perde), 0.68) 18%,
    rgba(var(--kart-perde), 0.26) 39%,
    rgba(var(--kart-perde), 0) 62%);
}

/* Kartın tamamını kaplayan saydam düğme */
.vkart-ac {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%; height: 100%;
}
.vkart-ac:focus-visible { outline: 2px solid var(--ak); outline-offset: -4px; border-radius: 26px; }

.vkart-paylas {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(243, 236, 227, 0.34);
  background: var(--cam-ince);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  box-shadow: var(--ic-isik);
  color: var(--ak);
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.3s var(--yumusak);
}
.vkart-paylas svg { width: 19px; height: 19px; }
.vkart-paylas:hover { transform: scale(1.06); background: var(--cam-parilti), rgba(44, 38, 29, 0.7); }

/* Alt yazı bloğu tıklamayı yutmasın: yalnızca görünür, dokunulmaz */
.vkart-alt {
  text-shadow: 0 1px 12px rgba(12, 10, 7, 0.55);
  position: absolute;
  left: 1.05rem; right: 1.05rem; bottom: 0.9rem;
  z-index: 2;
  display: grid;
  gap: 0.35rem;
  pointer-events: none;
}
.vkart-ustbilgi {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--altin);
}
.vkart-ad {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5vw, 1.62rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ak);
  overflow-wrap: anywhere;
}
.vkart-olcu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.2rem;
  min-width: 0;
}
.vkart-rozet {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.24rem 0.65rem;
  border-radius: var(--r-tam);
  border: 1px solid rgba(243, 236, 227, 0.3);
  background: rgba(243, 236, 227, 0.06);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ak);
}
.vkart-rozet svg { width: 14px; height: 14px; color: var(--altin); }
.vkart-durak {
  font-size: 0.78rem;
  color: var(--sis);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Kartı aç" şeridi: giriş ekranındaki "Turu Başlat" gibi krem bir hap,
   sağ ucunda koyu daire içinde ok */
.vkart-cta {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  margin-top: 0.6rem;
  border-radius: var(--r-tam);
  background: var(--krem);
  box-shadow: 0 10px 28px rgba(8, 6, 4, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: none;
}
.vkart-cta-yazi {
  flex: 1 1 auto;
  padding: 0 3.2rem 0 1.1rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--murekkep);
}
.vkart-ok {
  position: absolute;
  right: 4px; top: 50%;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--murekkep);
  color: var(--krem);
  transform: translateY(-50%);
  transition: transform 0.35s var(--yumusak);
}
.vkart-ok svg { width: 18px; height: 18px; }
.vkart.is-merkez:hover .vkart-ok { transform: translateY(-50%) translateX(3px); }


/* ==========================================================================
   05 · Sahne bileşenleri
   Sınıf adları museum.js ile paylaşılıyor; değiştirilemez.
   ========================================================================== */

/* ---------- Giriş ekranı ----------
   Salon açılmadan önce bulanık panoramanın üstünde duran cam pano: solda
   karşılama ve düğmeler, sağda salonun kuşbakışı çizimi. Renkler ana
   sayfanınkiler (style.css): krem düğme, altın ayrıntılar, sıcak cam.
   Pano yükleme ekranı çekilince (html.is-yukleniyor kalkınca) parça
   parça yükselerek belirir; tur başlayınca hafifçe küçülüp söner. */
.museum-enter {
  --giris-krem:  var(--krem);
  --giris-murekkep: var(--murekkep);
  --giris-altin: var(--altin);
  --giris-yazi:  var(--ak);
  --giris-sis:   var(--sis);
  --giris-sis-2: var(--sis-2);
  --giris-hat:   rgba(243, 236, 227, 0.13);
  /* Pano, üstteki marka şeridi ile alttaki künye satırı arasındaki
     boşluğa sığar ve o boşluğun ortasında durur. */
  --ust-pay: calc(var(--ust-y) + env(safe-area-inset-top));
  --alt-pay: calc(2.6rem + env(safe-area-inset-bottom));

  position: absolute;
  top: calc(50% + (var(--alt-pay) - var(--ust-pay)) / 2);
  left: 50%;
  z-index: 11;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  width: min(960px, calc(100% - 2 * var(--kenar)));
  max-height: calc(100% - var(--ust-pay) - var(--alt-pay) - 1rem);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: 30px;
  color: var(--giris-yazi);
  background:
    linear-gradient(150deg, rgba(243, 236, 227, 0.11) 0%, rgba(243, 236, 227, 0.035) 46%, rgba(243, 236, 227, 0.06) 100%);
  backdrop-filter: blur(30px) saturate(135%);
  -webkit-backdrop-filter: blur(30px) saturate(135%);
  border: 1px solid rgba(243, 236, 227, 0.15);
  box-shadow:
    0 40px 110px rgba(8, 6, 4, 0.55),
    0 10px 30px rgba(8, 6, 4, 0.3),
    inset 0 1px 0 rgba(243, 236, 227, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.97);
  transition: opacity 0.55s var(--yumusak), transform 0.7s var(--yumusak), visibility 0s linear 0.7s;
}
.museum-enter::-webkit-scrollbar { display: none; }
.museum-stage.is-locked .museum-enter {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition: opacity 0.55s var(--yumusak), transform 0.7s var(--yumusak), visibility 0s;
}

/* Parçaların sırayla yükselişi: yükleme ekranı çekildiği anda başlar */
@keyframes giris-yuksel {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
html:not(.is-yukleniyor) .museum-stage.is-locked :is(.giris-metin > *, .giris-plan) {
  animation: giris-yuksel 0.9s var(--yumusak) both;
}
html:not(.is-yukleniyor) .museum-stage.is-locked .giris-metin > :nth-child(2) { animation-delay: 0.06s; }
html:not(.is-yukleniyor) .museum-stage.is-locked .giris-metin > :nth-child(3) { animation-delay: 0.12s; }
html:not(.is-yukleniyor) .museum-stage.is-locked .giris-metin > :nth-child(4) { animation-delay: 0.18s; }
html:not(.is-yukleniyor) .museum-stage.is-locked .giris-metin > :nth-child(5) { animation-delay: 0.24s; }
html:not(.is-yukleniyor) .museum-stage.is-locked .giris-plan { animation-delay: 0.16s; }

/* ---- Sol: karşılama ---- */
.giris-metin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.8rem, 3.6vw, 3rem);
  padding-right: clamp(1.4rem, 2.6vw, 2.2rem);
}

.giris-baslik {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.7vw, 2.95rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.giris-aciklama {
  margin-top: 1rem;
  max-width: 40ch;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--giris-sis);
  text-wrap: pretty;
}

/* Üç sayı: ince çizgilerle ayrılmış, büyük rakam üstte */
.giris-sayilar {
  display: flex;
  margin: 1.5rem 0 0;
}
.giris-sayilar dd { margin: 0; }
.giris-sayilar > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.2rem;
  padding-inline: 1.25rem;
  border-left: 1px solid var(--giris-hat);
}
.giris-sayilar > div:first-child { padding-left: 0; border-left: 0; }
.giris-sayilar dd {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.giris-sayilar dt {
  font-size: 0.72rem;
  color: var(--giris-sis-2);
}

.giris-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.9rem;
}
.giris-dugmeler button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.45rem;
  border-radius: var(--r-tam);
  font-size: 0.92rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: transform 0.35s var(--yumusak), box-shadow 0.35s var(--yumusak),
              background 0.3s, border-color 0.3s, color 0.3s;
}
.giris-dugmeler svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.35s var(--yumusak); }
.giris-dugmeler button:focus-visible { outline: 2px solid rgba(243, 236, 227, 0.75); outline-offset: 3px; }

.giris-basla {
  padding-right: 1.2rem;
  color: var(--giris-murekkep);
  background: var(--giris-krem);
  box-shadow: 0 10px 28px rgba(8, 6, 4, 0.32), inset 0 1px 0 rgba(243, 236, 227, 0.6);
}
.giris-plan-dugme {
  color: var(--giris-yazi);
  background: rgba(243, 236, 227, 0.06);
  border: 1px solid var(--giris-hat);
}
.giris-plan-dugme svg { width: 17px; height: 17px; color: var(--giris-altin); }

@media (hover: hover) and (pointer: fine) {
  .giris-basla:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(8, 6, 4, 0.4), inset 0 1px 0 rgba(243, 236, 227, 0.6);
  }
  .giris-basla:hover svg { transform: translateX(3px); }
  .giris-plan-dugme:hover {
    background: rgba(243, 236, 227, 0.11);
    border-color: rgba(243, 236, 227, 0.26);
  }
}
.giris-dugmeler button:active { transform: translateY(0) scale(0.98); }

/* Nasıl gezilir: üç kısa ipucu */
.giris-ipuclari {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  margin-top: auto;
  padding-top: 1.6rem;
  list-style: none;
  width: 100%;
}
.giris-metin > .giris-ipuclari { margin-top: 1.9rem; border-top: 1px solid var(--giris-hat); }
.giris-ipuclari li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--giris-sis-2);
}
.giris-ipuclari svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--giris-altin); opacity: 0.9; }

/* ---- Sağ: salonun kuşbakışı çizimi ---- */
.giris-plan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  margin: 0.6rem;
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(58, 51, 42, 0.5), rgba(20, 17, 13, 0.55));
  border: 1px solid rgba(243, 236, 227, 0.08);
  box-shadow: inset 0 1px 0 rgba(243, 236, 227, 0.05), inset 0 -30px 60px rgba(8, 6, 4, 0.25);
}
.giris-plan svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.giris-duvar {
  fill: rgba(243, 236, 227, 0.035);
  stroke: #F6EEE3;
  stroke-width: 1.7;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(255, 226, 190, 0.55));
}
.giris-kapi {
  stroke: rgba(243, 236, 227, 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 2.5;
}
.giris-nesne { fill: none; stroke: rgba(243, 236, 227, 0.2); stroke-width: 1; }
.giris-vitrin { fill: #F0B57E; opacity: 0.85; }

.giris-yol polyline {
  fill: none;
  stroke: rgba(246, 238, 227, 0.8);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3.2 4.6;
  animation: giris-akis 1.6s linear infinite;
}
@keyframes giris-akis { to { stroke-dashoffset: -7.8; } }

.giris-durak circle {
  fill: var(--giris-krem);
  stroke: rgba(27, 23, 18, 0.55);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px rgba(255, 226, 190, 0.45));
}
.giris-durak text {
  fill: var(--giris-murekkep);
  font-size: 10.5px;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: central;
}

.giris-duraklar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.1rem;
  list-style: none;
}
.giris-duraklar li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--giris-sis);
}
.giris-no {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 650;
  color: var(--giris-murekkep);
  background: var(--giris-krem);
}

/* Dar ekran: tek sütun. Çizim üstte; yazı, sayılar ve düğmeler onun
   altında ortalı. Pano ekrana sığmazsa önce çizim küçülür (esnek kutu,
   min-height: 0), yazı ve düğmeler hep tam görünür. İpuçları yardım
   katmanında zaten anlatıldığı için burada gizli. */
@media (max-width: 760px) {
  .museum-enter {
    /* Künye satırı telefonda iki satıra iniyor */
    --alt-pay: calc(3.7rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    border-radius: 26px;
  }
  .giris-plan {
    order: -1;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 0.65rem;
    margin: 0.5rem 0.5rem 0;
    padding: 0.9rem 1rem 0.8rem;
    border-radius: 20px;
  }
  .giris-plan svg { flex: 1 1 auto; min-height: 0; max-height: 150px; }
  .giris-duraklar { flex: 0 0 auto; gap: 0.35rem 0.9rem; }
  .giris-duraklar li { font-size: 0.72rem; }
  .giris-no { width: 18px; height: 18px; font-size: 0.62rem; }

  .giris-metin {
    flex: 0 0 auto;
    align-items: center;
    padding: 1.3rem 1.3rem 1.35rem;
    text-align: center;
  }
  .giris-baslik { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
  .giris-aciklama { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.55; }
  .giris-sayilar { margin-top: 1rem; justify-content: center; }
  .giris-sayilar > div { align-items: center; padding-inline: 1.1rem; }
  .giris-sayilar > div:first-child { padding-left: 1.1rem; }
  .giris-sayilar dd { font-size: 1.2rem; }
  /* İki düğme yan yana, eşit genişlikte: alt alta dizilince pano
     uzuyor ve ikinci düğme ikincil bir satır gibi kalıyordu. */
  .giris-dugmeler { flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; margin-top: 1.15rem; width: 100%; }
  .giris-dugmeler button {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding-inline: 0.7rem;
    font-size: clamp(0.76rem, 3.5vw, 0.88rem);
    white-space: nowrap;
  }
  .giris-basla { padding-right: 0.7rem; }
  .giris-ipuclari { display: none; }
}
/* Kısa telefon ekranı: her şey biraz daha sıkı */
@media (max-width: 760px) and (max-height: 720px) {
  .giris-plan svg { max-height: 118px; }
  .giris-plan { padding: 0.75rem 0.9rem 0.7rem; gap: 0.5rem; }
  .giris-metin { padding: 1.05rem 1.2rem 1.15rem; }
  .giris-baslik { font-size: clamp(1.6rem, 7vw, 1.95rem); }
  .giris-aciklama { font-size: 0.82rem; line-height: 1.5; }
  .giris-sayilar { margin-top: 0.8rem; }
  .giris-sayilar dd { font-size: 1.1rem; }
  .giris-dugmeler { margin-top: 0.95rem; }
  .giris-dugmeler button { min-height: 46px; }
}
/* Çok kısa telefon ekranı (iPhone SE gibi): çizim ve sayılar çekilir,
   karşılama ile iki düğme kalır */
@media (max-width: 760px) and (max-height: 600px) {
  .giris-plan, .giris-sayilar { display: none; }
}
/* Çok dar telefon: planın simgesi çekilir, yazılar sığsın */
@media (max-width: 360px) {
  .giris-plan-dugme svg { display: none; }
  .giris-dugmeler button { padding-inline: 0.5rem; }
}
/* Yatay tutulan dar telefon: iki düğme yan yana, yazı biraz küçük */
@media (max-width: 760px) and (orientation: landscape) {
  .giris-metin { padding: 1rem 1.4rem 1.1rem; }
  .giris-baslik { font-size: 1.6rem; }
  .giris-aciklama { max-width: 52ch; font-size: 0.8rem; }
  .giris-dugmeler { flex-direction: row; justify-content: center; width: auto; margin-top: 0.9rem; }
  .giris-dugmeler button { width: auto; min-height: 44px; }
}
/* Alçak ekran (yatay telefon): çizim yer kaplamasın */
@media (max-height: 560px) and (min-width: 761px) {
  .museum-enter {
    grid-template-columns: minmax(0, 1fr);
    width: min(620px, calc(100% - 2 * var(--kenar)));
    border-radius: 24px;
  }
  .giris-plan, .giris-ipuclari, .giris-sayilar { display: none; }
  .giris-metin { padding: 1.2rem 1.5rem 1.3rem; }
  .giris-baslik { font-size: 1.7rem; }
  .giris-aciklama { margin-top: 0.5rem; max-width: 62ch; font-size: 0.8rem; line-height: 1.55; }
  .giris-dugmeler { margin-top: 1rem; }
  .giris-dugmeler button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .giris-yol polyline { animation: none; }
  html:not(.is-yukleniyor) .museum-stage.is-locked :is(.giris-metin > *, .giris-plan) { animation: none; }
}

/* ---------- Sanal tur noktaları ----------
   Konumu museum.js her karede satır içi transform ile yazar; bu yüzden
   .museum-hotspot üzerinde transform kullanılmaz, animasyonlar içteki
   .hotspot-govde ve kardeşlerinde çalışır. */
.museum-hotspots {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

.museum-hotspot {
  /* Duvardaki sırası (museum.js yazıyor) ve ondan türeyen nabız gecikmesi:
     noktalar aynı kuşakta durduğu için dalgalar soldan sağa akan tek bir
     hareket gibi okunuyor. */
  --sira: 0;
  --kayma: calc(var(--sira) * 0.2s);
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--yumusak), 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 4.4s var(--akici) infinite;
  animation-delay: var(--kayma);
  transition: transform 0.25s var(--yumusak);
}
/* Noktanın altındaki koyu yumuşak hâle: fotoğrafın aydınlık yerlerinde
   beyaz disk zemine karışıyordu, bu hâle onu her zeminden ayırıyor. */
.hotspot-govde::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(12, 10, 7, 0.46) 0%,
    rgba(12, 10, 7, 0.28) 44%,
    rgba(12, 10, 7, 0) 74%);
  animation: nokta-hale 4.4s var(--akici) infinite;
  animation-delay: var(--kayma);
}
.museum-hotspot:hover .hotspot-govde,
.museum-hotspot:focus-visible .hotspot-govde { transform: scale(1.1); animation-play-state: paused; }

/* Fotoğrafın en aydınlık yerinde de ayrışsın diye koyu konturu ve
   altında gölgesi var. */
.hotspot-disk {
  position: relative;
  z-index: 2;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(27, 23, 18, 0.4);
  box-shadow:
    0 0 0 3px rgba(18, 15, 11, 0.28),
    0 0 0 6px rgba(255, 255, 255, 0.14),
    0 3px 12px rgba(0, 0, 0, 0.5);
}

.hotspot-dalga {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  animation: nokta-dalga 3.8s var(--yumusak) infinite;
  animation-delay: var(--kayma);
}
.hotspot-dalga.gecikme-1 { animation-delay: calc(1.27s + var(--kayma)); }
.hotspot-dalga.gecikme-2 { animation-delay: calc(2.54s + var(--kayma)); }

/* Etiket yalnızca noktanın üstüne gelince (ya da klavyeyle odaklanınca)
   çıkar. Sürekli açık dururken panoramanın önünü kapatıyorlardı; salon
   şimdi çıplak duruyor, yazı ancak sorulduğunda geliyor. Dokunmatikte
   üstüne gelme olmadığı için etiket görünmez — orada noktaya dokunmak
   zaten kartı ya da durağı açıyor. */
.hotspot-etiket {
  position: absolute;
  top: calc(50% + 19px);
  left: 50%;
  white-space: nowrap;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-tam);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ak);
  background: var(--cam-parilti), rgba(27, 23, 18, 0.72);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  opacity: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  transition: opacity 0.22s var(--yumusak), transform 0.22s var(--yumusak);
}
.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 {
  box-shadow: 0 0 0 3px var(--ak), 0 0 0 7px rgba(18, 15, 11, 0.5), 0 4px 16px rgba(0, 0, 0, 0.55);
}

/* Bilgi noktası: gidilecek değil bakılacak bir yeri işaret eder —
   içi dolu değil, halka biçiminde. */
.museum-hotspot.is-kart .hotspot-disk {
  width: 13px; height: 13px;
  background: rgba(243, 236, 227, 0.18);
  border: 2px solid #FFFFFF;
  box-shadow:
    0 0 0 3px rgba(18, 15, 11, 0.28),
    0 0 0 6px rgba(243, 236, 227, 0.12),
    0 3px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.museum-hotspot.is-kart .hotspot-dalga { animation-duration: 4.3s; }
.museum-hotspot.is-kart .hotspot-dalga.gecikme-1 { animation-delay: calc(1.43s + var(--kayma)); }
.museum-hotspot.is-kart .hotspot-dalga.gecikme-2 { animation-delay: calc(2.86s + var(--kayma)); }

/* Geri dönüş noktası zemindedir; aynı biçim, daha sakin */
.museum-hotspot.is-geri .hotspot-disk {
  background: rgba(243, 236, 227, 0.82);
  box-shadow:
    0 0 0 3px rgba(18, 15, 11, 0.26),
    0 0 0 6px rgba(243, 236, 227, 0.1),
    0 3px 11px rgba(0, 0, 0, 0.45);
}
.museum-hotspot.is-geri .hotspot-dalga { border-color: rgba(243, 236, 227, 0.5); }

/* Dalga yavaş ve sönük: nokta göze batmadan kendini belli etsin */
@keyframes nokta-dalga {
  0%   { transform: scale(1); opacity: 0; }
  14%  { opacity: 0.55; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes nokta-suzul {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes nokta-hale {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---------- Geçişte bekleme halkası ----------
   Duraklar arasında ekran kararmaz (museum.js · GEÇİŞ). Varılacak
   durağın panoraması henüz inmemişse — dokular salon açılmadan önceden
   indirildiği için nadiren — bakış noktaya dönerken ortada yalnızca
   küçük bir halka belirir; salon görünür kalır. */
.museum-veil {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--akici), visibility 0.3s;
}
.museum-stage.is-bekliyor .museum-veil { opacity: 1; visibility: visible; }
.veil-pulse {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 236, 227, 0.2);
  border-top-color: rgba(243, 236, 227, 0.85);
  box-shadow: 0 0 0 6px rgba(15, 13, 10, 0.35);
  opacity: 0;
}
.museum-stage.is-bekliyor .veil-pulse { opacity: 1; animation: halka-don 0.9s linear infinite; }
@keyframes halka-don { to { transform: rotate(360deg); } }

/* ---------- WebGL yoksa: düz panorama ---------- */
.sahne-uyari {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 8;
  transform: translateX(-50%);
  display: none;
  width: min(520px, calc(100% - 2rem));
  padding: 0.7rem 1.1rem;
  text-align: center;
  border-radius: var(--r-m);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  font-size: 0.8rem;
  color: var(--sis);
}
.museum-stage.is-static {
  background-image: var(--panorama);
  background-size: cover;
  background-position: center;
  cursor: default;
}
.museum-stage.is-static .sahne-uyari { display: block; }
.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 { display: none; }


/* ---------- Destenin yan okları ----------
   Dokunmatikte deste parmakla kayıyor; farede kaydırmanın görünür bir yolu
   olsun diye iki ok duruyor. Ok, desteyi tam bir kart ilerletiyor ve o
   yönde kart kalmayınca sönüyor. */
.deste-ok {
  position: absolute;
  top: 50%;
  margin-top: -19px;
  z-index: 3;
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cam-parilti), rgba(27, 23, 18, 0.7);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  color: var(--ak);
  transition: opacity 0.3s var(--yumusak), background-color 0.25s, transform 0.3s var(--yumusak);
}
.deste-ok svg { width: 17px; height: 17px; }
.deste-ok-sol { left: 0.3rem; }
.deste-ok-sag { right: 0.3rem; }
.deste-ok:hover { background: rgba(27, 23, 18, 0.86); }
.deste-ok-sol:hover { transform: translateX(-2px); }
.deste-ok-sag:hover { transform: translateX(2px); }
.deste-ok.is-pasif { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .muze-dizin.is-open .deste-ok { display: grid; }
}

/* ---------- Paylaşım bildirimi ----------
   Bağlantı panoya kopyalandığında panelin altında kısa süre görünür. */
.panel-bildirim {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 6;
  max-width: calc(100% - 2.4rem);
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-tam);
  background: var(--krem);
  border: 0;
  box-shadow: var(--golge-s), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--murekkep);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.3s var(--yumusak), transform 0.3s var(--yumusak);
}
.panel-bildirim.is-gorunur { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   06 · Vitrin paneli · detay görünümü
   Vitrindeki bilgi noktasına (ya da liste penceresindeki bir karta)
   basılınca açılan pencere. Ekranı kaplamaz; liste penceresiyle aynı
   ölçüdedir. Üstte büyük bir fotoğraf, onun üstüne binen yuvarlak köşeli
   bir yaprakta başlık, künye ve yazı, en altta da aynı vitrinin öbür
   kartlarının yana kaydığı küçük bir ray var.

   İçerik sayfadaki .kart-kutu setlerinden okunuyor: o setler artık
   görünmüyor, yalnızca veri kaynağı olarak duruyorlar (muze-ui.js ·
   detayKur). Katmanın açılıp kapanmasını museum.js yönetiyor.
   ========================================================================== */

.museum-kartlar {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 3vw, 1.3rem);
  background: rgba(12, 10, 7, 0.62);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.34s var(--yumusak), visibility 0.34s;
}
.museum-kartlar.is-open { opacity: 1; visibility: visible; }

/* Eski yatay ray: ekranda değil, içeriğin kaynağı */
.kart-kaydirma { display: none; }

/* Panellerden biri açıkken salonun kendi düğmeleri çekilir
   (:has desteklenmeyen tarayıcıda kural yok sayılır, düğmeler görünür
   kalır ama panelin altında durduğu için tıklanamaz). */
.museum-stage:has(.museum-kartlar.is-open) .muze-bar,
.museum-stage:has(.museum-kartlar.is-open) .museum-back,
.museum-stage:has(.museum-kartlar.is-open) .muze-harita,
.museum-stage:has(.muze-yardim.is-open) .muze-harita,
.museum-stage:has(.muze-yardim.is-open) .museum-back,
.museum-stage:has(.muze-dizin.is-open) .muze-harita,
.museum-stage:has(.muze-dizin.is-open) .museum-back {
  opacity: 0;
  pointer-events: none;
}

/* Üstteki marka ve menü düğmesi sahnenin dışında (position: fixed), bu
   yüzden panelin örtüsü onları kapatmaz; elle çekiliyorlar. visibility
   kullanılıyor ki içindeki tıklanabilir öğeler de kapansın. */
body:has(.museum-kartlar.is-open) .muze-ust,
body:has(.foto-buyut.is-open) .muze-ust,
body:has(.muze-yardim.is-open) .muze-ust,
body:has(.muze-dizin.is-open) .muze-ust {
  opacity: 0;
  visibility: hidden;
}

.detay {
  position: relative;
  display: block;
  width: var(--panel-e);
  height: var(--panel-y);
  border-radius: var(--panel-r);
  background: var(--kart);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge), var(--ic-isik);
  overflow: hidden;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.42s var(--yumusak);
}
.museum-kartlar.is-open .detay { transform: none; }

/* Pencerenin tek kaydırma kutusu. Fotoğraf üstte yapışık kalır, yazı
   yaprağı aşağıdan kaydırıldıkça onun önüne çıkar — yaprak yukarı
   çekilmiş bir sayfa gibi fotoğrafı örter. */
.detay-kaydir {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 236, 227, 0.2) transparent;
}
.detay-kaydir::-webkit-scrollbar { width: 6px; }
.detay-kaydir::-webkit-scrollbar-thumb { background: rgba(243, 236, 227, 0.2); border-radius: 999px; }
.detay-kaydir::-webkit-scrollbar-track { background: transparent; }

/* ---------- Fotoğraf ---------- */
.detay-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 38%;
  overflow: hidden;
  background: var(--kart-koyu);
}
.detay-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detay-hero.gorsel-ust img { object-position: center 22%; }

/* Köşedeki iki düğme kaydırma kutusunun dışında: yaprak fotoğrafın önüne
   çıktığında da yerlerinde kalıyorlar.

   Sağ üstteki yuva eskiden paylaş düğmesinindi; büyüteçle yer değiştirdiler.
   O köşe, üstteki sabit şeritte duran menü düğmesinin tam altına düşüyor ve
   :has() tanımayan tarayıcılarda şerit çekilmediği için dokunuşu menü
   yutuyordu — paylaş düğmesi telefonda çalışmıyordu. Büyüteç oraya taşındı;
   :has() olmayan tarayıcılarda o da güvende olsun diye köşe düğmeleri
   menünün üstüne çıkarıldı (z-index, .muze-ust'un 120'sinden büyük). */
.detay-geri,
.detay-buyut {
  position: absolute;
  top: 0.9rem;
  z-index: 130;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cam-ince);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(243, 236, 227, 0.26);
  color: var(--ak);
  box-shadow: 0 6px 18px rgba(8, 6, 4, 0.35), var(--ic-isik);
  transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.3s var(--yumusak);
}
.detay-geri { left: 0.9rem; }
.detay-buyut { right: 0.9rem; }
.detay-geri svg { width: 20px; height: 20px; }
.detay-buyut svg { width: 19px; height: 19px; }
.detay-geri:hover { background: var(--cam-parilti), rgba(44, 38, 29, 0.74); transform: translateX(-2px); }
.detay-buyut:hover { background: var(--cam-parilti), rgba(44, 38, 29, 0.74); transform: scale(1.06); }

/* Paylaş fotoğrafın sağ alt köşesinde: yaprak yükselince ilk örtülen yer
   orası, zaten örtülen fotoğrafın paylaşılacak yanı kalmıyor. */
.detay-paylas {
  position: absolute;
  top: auto; bottom: 2.4rem; right: 0.9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cam-ince);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(243, 236, 227, 0.22);
  color: var(--ak);
  box-shadow: 0 6px 18px rgba(8, 6, 4, 0.35), var(--ic-isik);
  opacity: 0.85;
  transition: opacity 0.25s, background-color 0.25s, transform 0.3s var(--yumusak);
}
.detay-paylas svg { width: 17px; height: 17px; }
.detay-paylas:hover {
  opacity: 1;
  background: var(--cam-parilti), rgba(44, 38, 29, 0.78);
  transform: scale(1.08);
}

/* ---------- Yazı yaprağı ----------
   Fotoğrafın üstüne biner; yuvarlak köşeleri ve tutamağıyla aşağıdan
   çekilmiş bir sayfa gibi durur. Yazı buranın içinde kayar. */
.detay-govde {
  position: relative;
  z-index: 2;
  /* Yaprağın çıkabileceği en yüksek nokta: üstte geri ve paylaş
     düğmeleri için 76 piksellik bir şerit kalıyor, fotoğrafın geri kalanı
     örtülüyor. Bu pay olmadan yaprak düğmelerin altına giriyordu. */
  min-height: calc(100% - 76px);
  margin-top: -26px;
  padding: 0 1.3rem 1.5rem;
  border-radius: 28px 28px 0 0;
  background:
    linear-gradient(180deg, rgba(243, 236, 227, 0.07) 0%, rgba(243, 236, 227, 0) 140px),
    var(--kart-koyu);
  border-top: 1px solid var(--pano-hat);
  box-shadow: 0 -18px 40px rgba(8, 6, 4, 0.5), var(--ic-isik);
}

.detay-tut {
  display: block;
  width: 44px; height: 4px;
  margin: 0.6rem auto 1rem;
  border-radius: var(--r-tam);
  background: rgba(243, 236, 227, 0.22);
}

.detay-baslik {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.detay-baslik h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.detay-rozet {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  margin-top: 0.15rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-tam);
  border: 1px solid var(--pano-hat);
  background: rgba(243, 236, 227, 0.06);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ak);
  white-space: nowrap;
}
.detay-rozet svg { width: 14px; height: 14px; color: var(--altin); }

.detay-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.6rem;
}
.detay-durak {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--sis);
}
.detay-durak svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--altin); }
.detay-durak span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.detay-devam,
.detay-tumu {
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--ak);
  text-decoration: underline;
  text-decoration-color: var(--altin);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.22s;
}
.detay-devam:hover,
.detay-tumu:hover { color: var(--altin); }

/* Yazı: önce üç satır, "Devamını oku" ile tamamı açılır */
.detay-metin { margin-top: 1rem; }
.detay-metin.is-kisa {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detay-metin > * + * { margin-top: 0.9rem; }
.detay-devam { display: inline-block; margin-top: 0.55rem; }
.detay-devam[hidden] { display: none; }

.detay-bolum[hidden] { display: none; }
.detay-bolum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.5rem;
}
.detay-bolum h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4.2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---------- Alttaki küçük kart rayı ---------- */
.detay-ray[hidden] { display: none; }
.detay-ray {
  display: flex;
  gap: 0.7rem;
  margin: 0.9rem -1.3rem 0;
  padding: 0.25rem 1.3rem 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.3rem;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.detay-ray::-webkit-scrollbar { display: none; }

/* ---------- Rayın yan okları ----------
   Ray, "Bu vitrindeki kartlar" başlığının altında yana kayıyor. Dokunmatikte
   parmakla; farede kaydırmanın görünür bir yolu olsun diye iki ok duruyor.
   Oklar yalnızca fareli ekranlarda görünür ve o yönde kart kalmayınca söner
   — liste penceresindeki deste oklarıyla aynı kural (bkz. .deste-ok). */
.detay-ray-sargi { position: relative; }

.ray-ok {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  z-index: 3;
  display: none;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cam-parilti), rgba(27, 23, 18, 0.74);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge-s), var(--ic-isik);
  color: var(--ak);
  transition: opacity 0.3s var(--yumusak), background-color 0.25s, transform 0.3s var(--yumusak);
}
.ray-ok svg { width: 16px; height: 16px; }
.ray-ok-sol { left: -0.5rem; }
.ray-ok-sag { right: -0.5rem; }
.ray-ok:hover { background: rgba(27, 23, 18, 0.9); }
.ray-ok-sol:hover { transform: translateX(-2px); }
.ray-ok-sag:hover { transform: translateX(2px); }
.ray-ok.is-pasif { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .museum-kartlar.is-open .ray-ok { display: grid; }
}

.mkart {
  position: relative;
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: block;
  padding: 0.5rem 0.5rem 0.8rem;
  border-radius: 22px;
  background: var(--cam-parilti);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik);
  text-align: left;
  transition: border-color 0.3s, background-color 0.3s, transform 0.35s var(--yumusak);
}
.mkart:hover { border-color: var(--kart-hat-2); transform: translateY(-2px); }
.mkart.is-aktif { border-color: var(--kart-hat-2); background: rgba(243, 236, 227, 0.1); }
.mkart:focus-visible { outline: 2px solid var(--ak); outline-offset: 2px; }

.mkart-resim {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--kart-koyu);
}
.mkart-resim img { width: 100%; height: 100%; object-fit: cover; }
.mkart-resim.gorsel-ust img { object-position: center 22%; }

.mkart-ad {
  display: block;
  margin: 0.7rem 0.25rem 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ak);
  overflow-wrap: anywhere;
}
.mkart-meta {
  display: block;
  margin: 0.22rem 0.25rem 0;
  font-size: 0.78rem;
  color: var(--sis);
}
.mkart-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.6rem 0.25rem 0;
}
.mkart-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.8rem;
  color: var(--sis);
}
.mkart-rozet svg { width: 14px; height: 14px; color: var(--altin); }
.mkart-ok {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--krem);
  color: var(--murekkep);
  box-shadow: 0 6px 16px rgba(8, 6, 4, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.35s var(--yumusak);
}
.mkart-ok svg { width: 17px; height: 17px; }
.mkart:hover .mkart-ok { transform: translateX(3px); }

.muze-kart {
  position: relative;   /* kart içi kaydırma işareti buna göre oturur */
  flex: 0 0 min(340px, 78vw);
  display: flex;
  flex-direction: column;
  /* Tavan: en uzun kart bile ekrana sığsın. Ray stretch olduğu için
     bütün kartlar aynı boya oturur — üst ve alt kenarları hizalıdır. */
  max-height: min(500px, calc(100svh - 132px));
  scroll-snap-align: center;
  border-radius: var(--r-m);
  background: var(--kart-cam);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--kart-hat);
  box-shadow: var(--golge), var(--ic-isik);
  overflow: hidden;
}

/* Görsel çerçeveyi tam doldurur: kenarlarda boşluk kalmaz */
.kart-gorsel {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--kart-hat);
}
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Dikey çekilmiş fotoğrafın ortası çerçeveye alınınca konunun üstü kesiliyor;
   böyle kartlarda kırpma yukarı kaydırılıyor. Büyütülen fotoğraf tam kalır. */
.kart-gorsel.gorsel-ust img { object-position: center 22%; }

.kart-metin {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(1rem, 2vw, 1.3rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 236, 227, 0.2) transparent;
}
.kart-metin::-webkit-scrollbar { width: 6px; }
.kart-metin::-webkit-scrollbar-thumb {
  background: rgba(243, 236, 227, 0.2);
  border-radius: 999px;
}
.kart-metin::-webkit-scrollbar-track { background: transparent; }
.kart-ustbilgi {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 0.5rem;
}
.muze-kart h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 0.5rem;
}
.kart-aciklama { font-size: 0.88rem; line-height: 1.7; color: var(--sis); }

/* Eser üzerindeki yazının kendisi: açıklamadan ince bir çizgiyle ayrılıyor */
.kart-alinti {
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(201, 161, 132, 0.55);
  font-size: 0.84rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--sis-2);
}

.ogut-liste {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hat);
  counter-reset: ogut;
}
.ogut-liste li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--sis);
  counter-increment: ogut;
}
.ogut-liste li::before {
  content: counter(ogut);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 650;
  color: var(--murekkep);
  background: var(--krem);
}


/* ---------- Fotoğrafı büyütme ----------
   Her kart görselinin köşesinde küçük bir büyüteç durur; tıklanınca o
   fotoğraf tek başına ekrana açılır. */
.gorsel-buyut {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cam-ince);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(243, 236, 227, 0.22);
  color: var(--ak);
  box-shadow: 0 6px 18px rgba(8, 6, 4, 0.35), var(--ic-isik);
  opacity: 0.85;
  transition: opacity 0.25s, background-color 0.25s, transform 0.3s var(--yumusak);
}
.gorsel-buyut svg { width: 16px; height: 16px; }
.gorsel-buyut:hover {
  opacity: 1;
  background: var(--cam-parilti), rgba(44, 38, 29, 0.78);
  transform: scale(1.08);
}

.foto-buyut {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: calc(var(--ust-y) + clamp(0.4rem, 2vw, 0.9rem)) clamp(1rem, 4vw, 2.5rem) clamp(1.2rem, 3vw, 2rem);
  background: rgba(12, 10, 7, 0.86);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--yumusak), visibility 0.35s;
}
.foto-buyut.is-open { opacity: 1; visibility: visible; }

.foto-cerceve {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  max-width: 100%;
  max-height: 100%;
}

/* Fotoğrafın penceresi: yakınlaştırılan görsel bunun içinde kayar, dışına
   taşan kısmı kırpılır. Çerçeve (kenarlık, yuvarlatma, gölge) görselin
   değil bu pencerenin üstünde — görsel kayarken çerçeve yerinde durur. */
.foto-tuval {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  line-height: 0;
  border-radius: 22px;
  border: 1px solid var(--pano-hat);
  box-shadow: var(--golge), var(--ic-isik);
  touch-action: none;            /* yakınlaştırmayı js kendi karşılıyor */
  cursor: zoom-in;
  transform: scale(0.97);
  transition: transform 0.4s var(--yumusak);
}
.foto-buyut.is-open .foto-tuval { transform: none; }
.foto-tuval.is-yakin { cursor: grab; }
.foto-tuval.is-surukleniyor { cursor: grabbing; }

/* Büyük kopya inerken: eski fotoğraf gizlenir, yerinde dönen bir halka
   bekler. Görsel gizliyken tuval ölçüsünü yitirmesin diye asgari bir boy
   veriliyor (bkz. muze-ui.js · gorseliHazirla). */
.foto-buyut.is-yukleniyor .foto-tuval {
  min-width: min(260px, 60vw);
  min-height: min(180px, 34vh);
  cursor: default;
}
.foto-buyut.is-yukleniyor .foto-tuval img { opacity: 0; }
.foto-buyut.is-yukleniyor .foto-tuval::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 236, 227, 0.14);
  border-top-color: rgba(243, 236, 227, 0.7);
  animation: halka-don 0.9s linear infinite;
}

.foto-cerceve img {
  display: block;
  max-width: min(1120px, 100%);
  max-height: calc(100svh - 250px);
  width: auto; height: auto;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Yakınlaştırma araçları: fotoğrafın altında duran cam bir şerit */
.foto-araclar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--r-tam);
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--hat);
  box-shadow: var(--golge-s), var(--ic-isik);
}
.foto-arac {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sis);
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.foto-arac svg { width: 17px; height: 17px; }
.foto-arac:hover:not(:disabled) { color: var(--ak); background: rgba(243, 236, 227, 0.12); }
.foto-arac:disabled { opacity: 0.35; cursor: default; }
.foto-arac:focus-visible { outline: 2px solid var(--hat-2); outline-offset: 2px; }
/* Ortadaki düğme aynı zamanda oranı gösteriyor: sığdırmak için tıklanır */
.foto-oran {
  width: auto;
  min-width: 60px;
  padding: 0 0.6rem;
  border-radius: var(--r-tam);
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.foto-yazi {
  max-width: 62ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--sis-2);
}

.foto-kapat {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: clamp(0.9rem, 2.4vw, 1.5rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cam-ince);
  backdrop-filter: var(--bulanik);
  -webkit-backdrop-filter: var(--bulanik);
  border: 1px solid var(--pano-hat);
  box-shadow: var(--ic-isik);
  color: var(--ak);
  transition: color 0.25s, background-color 0.25s, transform 0.3s var(--yumusak);
}
.foto-kapat:hover { color: var(--ak); background: var(--cam-parilti), rgba(44, 38, 29, 0.7); border-color: var(--hat-2); transform: rotate(90deg); }


/* ==========================================================================
   07 · Hareket azaltma
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Animasyon durunca nokta sönük kalmasın: halka ve hâle sabit durur */
  .hotspot-dalga { opacity: 0.5; transform: scale(1.5); }
  .hotspot-dalga.gecikme-1 { transform: scale(2); opacity: 0.3; }
  .hotspot-dalga.gecikme-2 { display: none; }
  .hotspot-govde::before { opacity: 1; }
  /* Deste ve ray kendiliğinden kaymasın, yerinde dursun */
  .dizin-deste, .detay-ray { scroll-behavior: auto; }

  /* Menünün içindekiler görünürlüğünü menu-gir animasyonundan alıyor.
     Animasyonlar kısıldığında bu satırlar olmadan menü boş açılıyordu —
     üstelik menü bu sayfadaki tek gezinme yolu. Son hâlleri doğrudan
     veriliyor. */
  .menu-kunye,
  .menu-ic a,
  .menu-alt {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}


/* ==========================================================================
   Yükleme ekranı
   Salon tamamen hazır olmadan sayfa açılmaz (bkz. js/muze-yukleme.js).
   Salonun planı tek bir ışık çizgisi olarak kendini çizer; çizginin
   ucu gerçek yükleme yüzdesidir. Vitrinler çizgi önlerinden geçince,
   duraklar panoramaları hazır olunca, masalar ve kolonlar plan kurulunca
   belirir. Zemin ana sayfanın koyu kahvesi; en sıcak ton vitrinlerin ışığı.
   ========================================================================== */
html.is-yukleniyor, html.is-yukleniyor body { cursor: progress; }

.muze-yukleme {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 44%, #2a241c 0%, #1f1a14 55%, #17130F 100%);
  color: var(--ak);
  transition: opacity 0.9s var(--akici), visibility 0s linear 0.9s;
}
.muze-yukleme.is-bitti { opacity: 0; visibility: hidden; pointer-events: none; }

.yukleme-ic {
  display: grid;
  justify-items: center;
  gap: clamp(1.4rem, 4vh, 2.4rem);
  width: min(640px, 100%);
  transition: transform 1.1s var(--yumusak), opacity 0.9s var(--akici), filter 0.9s;
}
.muze-yukleme.is-bitti .yukleme-ic { transform: scale(1.06); filter: blur(6px); }

.yukleme-marka {
  height: 24px;
  width: auto;
  opacity: 0.5;
}

.yukleme-plan { width: 100%; height: auto; overflow: visible; }
.yp-iz,
.yp-cizgi,
.yp-kapi {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yp-iz { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1.2; }
.yp-cizgi {
  stroke: var(--ak);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}
.yp-kapi { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 2 3; }

/* Salonun içindeki sıcak ışık: çizgi kapanınca dolar */
.yp-isik { opacity: 0; transition: opacity 1.4s var(--yumusak); }
.muze-yukleme.is-tamam .yp-isik { opacity: 1; }

.yp-nesneler * {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  transition: stroke 1s var(--yumusak);
}
.muze-yukleme.is-plan .yp-nesneler * { stroke: rgba(255, 255, 255, 0.3); }

.yp-vitrin {
  fill: rgba(255, 255, 255, 0.08);
  transition: fill 0.7s var(--yumusak), filter 0.7s var(--yumusak);
}
.yp-vitrin.is-yandi {
  fill: #ffdcae;
  filter: drop-shadow(0 0 3px rgba(255, 196, 128, 0.9)) drop-shadow(0 0 9px rgba(255, 170, 90, 0.45));
}

.yp-durak circle {
  fill: none;
  stroke: var(--ak);
  stroke-width: 1.4;
}
.yp-durak {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s var(--yumusak), transform 0.8s var(--yumusak);
}
.yp-durak.is-hazir { opacity: 1; transform: none; }

.yukleme-alt {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}
.yukleme-sayi {
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 3.8rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ak);
}
.yukleme-sayi small {
  margin-left: 0.12em;
  font-size: 0.36em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sis-2);
  vertical-align: 0.95em;
}
.yukleme-durum {
  margin: 0;
  min-height: 1.3em;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sis);
}

.yukleme-ogut {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(1.4rem, 6vh, 3.4rem) + env(safe-area-inset-bottom));
  width: min(480px, calc(100% - 3rem));
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  animation: yukleme-belir 1.6s var(--yumusak) 0.5s both;
}
.yukleme-ogut blockquote {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--sis);
}
.yukleme-ogut figcaption {
  margin-top: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sis-2);
}
@keyframes yukleme-belir { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }

@media (max-height: 560px) {
  .yukleme-ogut { display: none; }
}


/* ==========================================================================
   08 · Kırılımlar
   ========================================================================== */

@media (max-width: 720px) {
  :root { --ust-y: 56px; }
  .muze-marka img { height: 20px; }
  .menu-dugme { width: 40px; height: 40px; }
  /* Dar ekranda yazı düşer, düğme kare kalır — boyu yine alt barla aynı */
  .museum-back span { display: none; }
  .museum-back { width: var(--bar-y); padding-inline: 0; }
  .gorsel-buyut { width: 38px; height: 38px; top: 8px; right: 8px; }
  .muze-altbilgi { font-size: 0.7rem; }
  /* Mobilde harita yok: okunacak kadar büyütülünce panoramanın önünü
     kapatıyor, küçültülünce de kroki seçilmiyordu. Bulunulan durak zaten
     alt bardaki konum ikonunda yazılı. */
  .muze-harita { display: none; }
  /* Pencere dar ekranda kenarlara yaklaşır ama yine ekranı kaplamaz */
  :root {
    --panel-e: min(470px, calc(100vw - 1.1rem));
    --panel-y: min(740px, calc(100svh - 1.6rem));
  }
}

@media (max-width: 480px) {
  .mkart { flex: 0 0 86%; }
  .detay-govde { padding-inline: 1.1rem; }
  .detay-ray { margin-inline: -1.1rem; padding-inline: 1.1rem; scroll-padding-inline: 1.1rem; }
  /* Dar ekranda kutu düğmenin değil çubuğun ortasına oturur: çubuk zaten
     ekranın ortasında olduğu için kutu hiçbir kenardan taşmaz.
     .bar-oge'nin position: relative'i kalkınca konumlanma çubuğa geçiyor. */
  .bar-oge { position: static; }
  .bar-kutu { max-width: calc(100vw - 1.6rem); }
}