/* =========================================================
   Sanal Sergi Salonu — arayüz
   Salon 3B'de yaşıyor; buradaki her şey onun üstünde duran ince bir katman.
   Kural: arayüz görünmesin, sergi görünsün.
   ========================================================= */

:root {
  color-scheme: dark;   /* site kendi koyu temasını yönetir — tarayıcı auto-dark eserleri bozmasın */
  --zemin:       #0a0908;
  --metin:       #ece6da;
  --soluk:       #948b7d;
  --altin:       #c9a961;
  --serif: Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--serif);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

#salon {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

[hidden] { display: none !important; }

/* ================= Perdeler (yükleniyor / giriş kapısı) ================= */
.perde {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;            /* center DEĞİL: içerik uzayınca ("Sergi hakkında" / telefon) kayabilsin */
  justify-content: center;
  overflow-y: auto;                   /* telefonda dikey kaydırma — alt kısım okunabilsin */
  -webkit-overflow-scrolling: touch;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(ellipse 65% 60% at 50% 40%, rgba(201, 169, 97, 0.07), transparent 70%),
    #080807;                            /* tam opak: arkadaki salon sızıp silüet gibi görünmesin */
}

.perde-ic { max-width: 620px; margin: auto; }   /* margin auto: kısa içerik ortalanır, uzun içerik yukarı yaslanıp kayar */

.fisilti {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--soluk);
}

.cizgi {
  margin: 22px auto 0;
  width: 220px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* Kapıdaki bekleme çizgisi — yalnız "Salona gir" eserler inmeden basılırsa
   görünür. Kapı artık yüklemeyi beklemediği için çoğu ziyaretçi bunu hiç görmez. */
.kapi-yuk { margin: 4px auto 0; }
.kapi-yuk .cizgi { margin-top: 10px; width: 180px; }

/* ================= KISA GEZİ ================= */

/* --- kapıdaki öneri ---
   Görünür bir KUTU: "başka bir gezi seç" bu kutunun içinde durunca kimin
   altındaki seçenek olduğu belli oluyor. Eskiden serbest duruyordu ve
   "Salona gir"in seçeneğiymiş gibi okunuyordu (Zuhal). Kutunun altındaki
   geniş boşluk da "Salona gir"i ayrı bir yol olarak ayırıyor. */
.gezi-teklif {
  margin: 20px auto 30px; max-width: 430px;
  padding: 18px 20px 14px;
  border: 1px solid rgba(201, 169, 97, 0.28);
  background: rgba(201, 169, 97, 0.045);
}
.gezi-teklif .buton { margin: 0; }
.gezi-teklif-not {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--altin); margin: 12px 0 0;
}
.gezi-baska { margin: 6px 0 0; font-size: 11.5px; }
.gezi-liste { margin: 14px auto 4px; max-width: 460px; text-align: left; }
.gezi-liste-oge {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d8cfc0; cursor: pointer;
}
.gezi-liste-oge:hover { border-color: var(--altin); background: rgba(201, 169, 97, 0.1); }
.gezi-liste-oge .gl-ad {
  display: block; font-family: var(--serif); font-size: 15px; color: #efe7d8;
}
.gezi-liste-oge .gl-alt {
  display: block; font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.06em; color: var(--soluk); margin-top: 3px;
}
/* Yapılan gezi: rozet değil, iz. Üstü çizilmez, "tamamlandı" yazmaz. */
.gezi-liste-oge.yapildi .gl-ad::before {
  content: "· "; color: rgba(201, 169, 97, 0.55);
}
.gezi-liste-oge.yapildi { opacity: 0.62; }

/* --- haritanın içindeki gezi kapısı --- */
.minimap-gezi { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 12px; }
.mm-gezi-ac {
  width: 100%; padding: 10px 14px;
  background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.45);
  color: var(--altin); font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.12em; text-transform: lowercase; cursor: pointer;
}
.mm-gezi-ac:hover { background: rgba(201, 169, 97, 0.2); }
.minimap-gezi-liste { margin-top: 8px; max-height: 40vh; overflow-y: auto; text-align: left; }

/* --- salondaki ilerleme göstergesi (sol üst, .nerede'nin altı) ---
   Bilerek ALTIN DEĞİL: altın serginin vurgu rengi, bir ilerleme göstergesi
   vurgu almamalı. Yalnız İÇİNDE BULUNULAN durak altın. */
.gezi-durum {
  position: fixed; z-index: 30; pointer-events: none;
  left: calc(24px + env(safe-area-inset-left));
  top: calc(52px + env(safe-area-inset-top));
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em;
  color: rgba(148, 139, 125, 0.75);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.gezi-cizgiler { display: flex; gap: 4px; margin-top: 6px; }
.gezi-cizgiler i { display: block; width: 12px; height: 2px; background: rgba(148, 139, 125, 0.25); }
.gezi-cizgiler i.gecti { background: rgba(201, 169, 97, 0.45); }
.gezi-cizgiler i.simdi { background: var(--altin); }

/* --- "devam" (sağ alt) --- */
.gezi-devam {
  position: fixed; z-index: 46; pointer-events: auto;
  right: calc(26px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 44px; min-height: 44px; padding: 11px 20px;
  background: rgba(14, 12, 10, 0.86);
  border: 1px solid rgba(201, 169, 97, 0.5); border-radius: 999px;
  color: var(--altin); font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.14em; text-transform: lowercase; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: halkaBelir 400ms ease both;
}
.gezi-devam:hover { background: rgba(201, 169, 97, 0.18); }

/* --- bitiş kartı: ekranın ALT üçte biri --- */
.gezi-son {
  position: fixed; z-index: 47; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 32px));
  padding: 20px 24px 18px; text-align: center;
  background: rgba(12, 11, 10, 0.95);
  border: 1px solid rgba(201, 169, 97, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: halkaBelir 600ms ease both;
  max-height: 72vh; overflow-y: auto;
}
.gezi-son-kapat {
  position: absolute; top: 8px; right: 10px;
  width: 40px; height: 40px; line-height: 1;
  background: none; border: none; cursor: pointer;
  color: var(--soluk); font-size: 17px;
}
.gezi-son-kapat:hover { color: var(--altin); }
.gezi-son-ust {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: lowercase; color: var(--soluk); margin: 0;
}
.gezi-son h3 {
  font-family: var(--serif); font-weight: normal; font-size: 24px;
  color: var(--altin); margin: 6px 0 2px;
}
.gezi-son-alt { font-family: var(--sans); font-size: 11px; color: var(--soluk); margin: 0 0 14px; }
.gezi-sunulan { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px; margin-bottom: 14px; }
.gezi-sunulan-baslik {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em;
  text-transform: lowercase; color: var(--soluk); margin: 0 0 8px;
}
.gezi-sunulan-oge {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #d8cfc0; cursor: pointer;
}
.gezi-sunulan-oge:hover { border-color: var(--altin); }
.gezi-sunulan-oge .gs-ad { display: block; font-family: var(--serif); font-size: 14px; }
.gezi-sunulan-oge .gs-alt {
  display: block; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.06em; color: var(--soluk); margin-top: 2px;
}
.gezi-son-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gezi-son-dugmeler .buton-kucuk,
.gezi-son-dugmeler .buton-sade { margin: 0; }

/* Telefonda hareket pad'i sağ altta duruyor (3×36 px + 2×5 px boşluk = 118 px,
   alt kenardan 14 px). "devam" onunla çakışmasın diye pad'in ÜSTÜNE alınır:
   14 + 118 + 12 = 144 px. Pad gezide de açık kalıyor — ziyaretçi her an kendi
   yürüyebilmeli, gezi bir ray değil. */
@media (max-width: 520px) {
  .gezi-durum { left: calc(14px + env(safe-area-inset-left)); top: calc(46px + env(safe-area-inset-top)); }
  .gezi-devam {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(144px + env(safe-area-inset-bottom));
  }
  /* Bitiş kartı da pad'in üstünde kalsın, düğmeleri kapanmasın. */
  .gezi-son { bottom: calc(140px + env(safe-area-inset-bottom)); max-height: 58vh; }
}

/* "nasıl gezilir" — katlanmış yönerge sekmesi. Kapıda tek ana eylem kalsın diye. */
.nasil { margin: 24px auto 4px; max-width: 560px; }
.nasil > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.08em;
  color: #cdc4b4;
  border: 1px solid rgba(201, 169, 97, 0.35); border-radius: 999px;
  padding: 8px 20px;
}
.nasil > summary::-webkit-details-marker { display: none; }
.nasil > summary::after { content: "  ›"; color: var(--altin); }
.nasil[open] > summary::after { content: "  ⌄"; }
.nasil > summary:hover { color: var(--altin); border-color: var(--altin); }

/* Açılınca içerik OKUNAKLI olsun: sola dayalı, satır satır, iri punto.
   Eskiden ortalanmış ve tek satıra sıkışmış bir liste gibiydi. */
.nasil[open] {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 22px 14px;
}
.nasil .yonergeler { margin: 16px 0 8px; }
.nasil .yonerge {
  display: block; text-align: left;
  font-size: 14.5px; line-height: 2.0; color: #bdb4a6;
}
.nasil .yonerge span { display: block; }
.nasil .yonerge i { color: var(--altin); font-style: italic; }
.nasil .kapi-not {
  margin: 0; text-align: left; max-width: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 12px;
  font-size: 13.5px; line-height: 1.8;
}

.cizgi span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--altin);
  transition: width 0.3s;
}

.ust-baslik {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 20px;
}

#sergiAdi {
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 400;
  line-height: 1.15;
}

.alt-baslik {
  margin-top: 14px;
  font-style: italic;
  color: var(--soluk);
}

/* Sanatçının adı — serginin altında, sessizce */
.sanatci-adi {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--altin);
}

/* Kapıdaki küçük not: ışık ve ses kaydırıcıları keşfedilmesin, söylensin */
.kapi-not {
  margin: 0 auto 26px;
  max-width: 420px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--soluk);
}

.kapi-not b { color: #cdc4b4; font-weight: 600; }

/* Sanatçı iletişim (mail) — giriş kapısının altında, sade */
.kapi-iletisim { margin-top: 26px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; color: var(--soluk); }
.kapi-iletisim a { color: var(--altin); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 97, 0.3); }
.kapi-iletisim a:hover { border-bottom-color: var(--altin); }

/* Sanatçı metni — yazıldıysa açılır */
.hakkinda-metin {
  margin: 18px auto 0;
  max-width: 520px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  white-space: pre-wrap;
  color: #c9c1b4;
}

/* Yönergeler — kısa, bir kez, sonra unutulsun */
.yonergeler { margin: 42px 0 30px; }

.yonerge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--soluk);
}

.yonerge i { font-style: italic; }

.masaustu-cihaz .dokunmatik,
.dokunmatik-cihaz .masaustu { display: none; }

kbd {
  display: inline-block;
  min-width: 24px;
  margin-right: 3px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--metin);
}

.buton {
  display: inline-block;
  padding: 14px 40px;
  background: none;
  border: 1px solid var(--altin);
  color: var(--altin);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s, color 0.35s;
}

.buton:hover { background: var(--altin); color: var(--zemin); }

.buton-sade {
  display: block;
  margin: 22px auto 0;
  padding: 6px;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--soluk);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.buton-sade:hover { color: var(--metin); border-color: var(--soluk); }

/* ================= Halka kapanış (çıkışta kendi sözlerin) ================= */
.halka {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(ellipse 65% 60% at 50% 40%, rgba(201, 169, 97, 0.08), transparent 70%),
    rgba(8, 8, 7, 0.96);
  backdrop-filter: blur(6px);
  animation: halkaBelir 700ms ease both;
}
@keyframes halkaBelir { from { opacity: 0; } to { opacity: 1; } }

.halka-ic { max-width: 640px; width: 100%; }

.halka-ust {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--soluk);
}

.halka-ic h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  color: var(--altin);
  margin: 8px 0 26px;
}

.halka-liste {
  max-height: 52vh;
  overflow-y: auto;
  text-align: left;
  margin-bottom: 20px;
}

.halka-kart {
  padding: 16px 20px;
  margin-bottom: 14px;
  border-left: 2px solid var(--altin);
  background: rgba(255, 255, 255, 0.03);
}

.halka-eser {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 8px;
}

.halka-soz {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--metin);
  white-space: pre-wrap;
}

.halka-not {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--soluk);
  margin-bottom: 22px;
}

/* ================= Mekânı yumuşatanlar ================= */

/* Vinyet: kenarlar hafifçe kararır. Göz merkezde dinlenir,
   mekân daha derin görünür. Gerçek galeride de kenarlarda ışık azdır. */
.vinyet {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 78% at 50% 50%,
              transparent 40%, rgba(0, 0, 0, 0.42) 100%);
}

/* Salona girerken karanlıktan açılan perde — kapıdan içeri girme anı */
.gecis {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease;
}

.gecis.kapali { opacity: 1; }

/* Gezide UZUN bacaklar için kesme. Salonun iki ucu 82 metre; yürüyerek
   geçmek 13 saniye koridor demek — geziyi tam da öldürmek istediğimiz
   sıkıntıya sokar. Kısa bir karartma yön kaybettirmeden taşır. */
.gecis.hizli { transition-duration: 700ms; }

/* ================= Salon içi arayüz ================= */
/* Kural: arayüz susar, sergi konuşur. Nişangâh yok — burası oyun değil. */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }

/* Baktığın eserin adı — aşağıda, sessizce */
.ipucu {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(236, 230, 218, 0.88);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  animation: yumusakBelir 0.7s ease;
}

@keyframes yumusakBelir {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ipucu .tus {
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 169, 97, 0.75);
}

/* Köşedeki düğmeler */
.kose-dugmeler {
  position: absolute;
  top: 22px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

/* ---- Ayar kaydırıcıları (ışık ve ses — aynı kalıp) ---- */
.ayar-kutusu {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: rgba(14, 12, 10, 0.78);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

.ayar-etiket, .ayar-yazi {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #e8dcc2;
}

.ayar-yazi { min-width: 44px; text-align: right; color: var(--altin); }

/* Ses kapalıyken kutu sönük durur — açıkken ışık kutusuyla aynı parlaklıkta */
.ayar-kutusu.sonuk { border-color: rgba(201, 169, 97, 0.22); }
.ayar-kutusu.sonuk .ayar-yazi { color: rgba(232, 220, 194, 0.5); }

.ayar-kaydirici {
  width: 90px;
  height: 3px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(201, 169, 97, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.ayar-kaydirici::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--altin);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.6);
}

.ayar-kaydirici::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--altin);
  cursor: pointer;
}

.sade-dugme {
  padding: 9px 18px;
  background: rgba(14, 12, 10, 0.78);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: #e8dcc2;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.sade-dugme:hover {
  background: var(--altin);
  border-color: var(--altin);
  color: #14120e;
}

/* ---- Oda çubuğu: dört mekân, her zaman görünür ---- */
.oda-cubugu {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  display: none;   /* kaldırıldı — odalara giriş yalnız HARİTADAN; üst sekme görüntüyü bozuyordu */
  gap: 2px;
  padding: 3px;
  background: rgba(14, 12, 10, 0.8);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.oda-cubugu button {
  padding: 8px 16px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(232, 226, 214, 0.62);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}

.oda-cubugu button:hover { color: var(--altin); }

.oda-cubugu button.aktif {
  background: rgba(201, 169, 97, 0.18);
  color: var(--altin);
}

/* (Telefon düzeni dosyanın sonundaki TELEFON bloğunda — hepsi tek yerde.) */

/* Otururken beliren "kalk" düğmesi */
.kalk-dugmesi {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 34px;
  background: rgba(14, 12, 10, 0.8);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: #e8dcc2;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  transition: background 0.25s, color 0.25s;
}

.kalk-dugmesi:hover { background: var(--altin); color: #14120e; }

/* Nasıl gezilir — bir kez görünür, sonra sessizce çekilir */
.hatirlatma {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 12px 26px;
  background: rgba(12, 11, 9, 0.72);
  border: 1px solid rgba(201, 169, 97, 0.22);
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(232, 226, 214, 0.85);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.hatirlatma.gorunur { opacity: 1; transform: translateX(-50%) translateY(0); }
.hatirlatma b { color: var(--altin); font-weight: 600; }

#salon { cursor: grab; }
#salon:active { cursor: grabbing; }

.yuru {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  padding: 18px 46px;
  background: rgba(10, 9, 8, 0.6);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 999px;
  color: var(--altin);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.yuru:active { background: rgba(201, 169, 97, 0.22); }

/* Mobil hareket pad'i (ileri/geri/sol/sağ) — yalnız dokunmatik cihazda JS açar. */
.hareket-pad {
  position: fixed; z-index: 20;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 5px;
  pointer-events: none;          /* boşluklar tıklanmasın, yalnız düğmeler */
}
.hp-btn {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14, 12, 10, 0.72);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 8px;
  color: var(--altin);
  font-size: 15px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  touch-action: none;
}
.hp-btn:active { background: rgba(201, 169, 97, 0.32); color: #14120e; }
.hp-ileri { grid-column: 2; grid-row: 1; }
.hp-sol   { grid-column: 1; grid-row: 2; }
.hp-sag   { grid-column: 3; grid-row: 2; }
.hp-geri  { grid-column: 2; grid-row: 3; }

/* ============ Salon haritası (minimap) ============ */
.harita-ac {
  position: fixed; z-index: 20; pointer-events: auto;   /* #hud pointer-events:none — buton dokunuşu geri aç */
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(20px + env(safe-area-inset-bottom));
  padding: 9px 18px;
  background: rgba(14, 12, 10, 0.72);
  border: 1px solid rgba(201, 169, 97, 0.45); border-radius: 999px;
  color: var(--altin); font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.14em; text-transform: lowercase; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.harita-ac:hover { background: rgba(201, 169, 97, 0.16); }

/* "harita" düğmesinin YANINDAKİ kalıcı not. Oda çubuğu v5'te kaldırıldığı için
   odalara yalnız haritadan geçiliyor — ziyaretçi bunu her an görsün.
   Salonun görüntüsünü bozmasın diye çerçevesiz ve soluk; dokunuşu düğmeden
   çalmasın diye pointer-events: none. Dar ekranda düğmenin ALTINA iner. */
.harita-not {
  position: fixed; z-index: 20; pointer-events: none;
  left: calc(104px + env(safe-area-inset-left));
  bottom: calc(29px + env(safe-area-inset-bottom));
  color: rgba(201, 169, 97, 0.62);
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}
/* Dar ekranda yan yana sığmaz -> notu düğmenin ÜSTÜNE al.
   Düğme: bottom 20px + yükseklik ~32px = 52px'e kadar dolu; 60px onu temizler.
   (Ölçüldü: 14/4px denemesinde not düğmenin üstüne biniyordu.) */
@media (max-width: 520px) {
  .harita-not {
    left: calc(14px + env(safe-area-inset-left));
    bottom: calc(60px + env(safe-area-inset-bottom));
    font-size: 10px; letter-spacing: 0.06em;
  }
}

.minimap {
  position: fixed; inset: 0; z-index: 45; pointer-events: auto;   /* #hud pointer-events:none — panel+kutu dokunuşunu geri aç */
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 6, 5, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Yatay/kısa ekran: harita salonun ortasını kaplamasın — panel yüksekliğe göre küçülsün */
@media (orientation: landscape) and (max-height: 560px) {
  .minimap { padding: 10px; }
  .minimap-ic { max-width: min(440px, 84vh); padding: 30px 18px 16px; }
  .minimap-siirler { max-height: 52vh; }
}
.minimap-ic {
  position: relative; width: 100%; max-width: 440px;
  padding: 40px 24px 24px; background: rgba(16, 14, 11, 0.96);
  border: 1px solid rgba(201, 169, 97, 0.3); border-radius: 4px;
}
.minimap-kapat { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--soluk); font-size: 20px; cursor: pointer; }
.minimap-kapat:hover { color: var(--altin); }
.minimap-baslik { text-align: center; margin-bottom: 16px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--altin); }
.minimap-alan { position: relative; width: 100%; padding-bottom: 82%; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); }
.oda-kutu {
  position: absolute; background: rgba(201, 169, 97, 0.1);
  border: 1px solid rgba(201, 169, 97, 0.4); color: #e8dcc2;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.03em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; transition: background 0.2s;
}
.oda-kutu:hover { background: rgba(201, 169, 97, 0.3); color: #fff; }
.oda-kutu.siir-oda { border-style: dashed; }
.oda-kutu.siir-oda::after { content: "♪"; position: absolute; top: 1px; right: 4px; font-size: 9px; color: var(--altin); }

.minimap-siirler { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; }
.mm-oda-ad { text-align: center; color: var(--altin); font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; margin-bottom: 6px; }
.mm-siir { text-align: left; padding: 9px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: #d8cfc0; font-family: var(--serif); font-size: 14px; cursor: pointer; }
.mm-siir:hover { border-color: var(--altin); color: #fff; }
.mm-geri, .mm-git { margin-top: 8px; padding: 8px 14px; background: none; border: 1px solid rgba(201,169,97,0.4); color: var(--altin); font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.mm-geri:hover, .mm-git:hover { background: rgba(201,169,97,0.16); }
/* "odaya git" butonu: şiir listesinin ÜSTÜNDE, kaydırınca sabit (sticky) ve dolu zeminli */
.mm-git.ust { position: sticky; top: 0; z-index: 2; margin-top: 0; margin-bottom: 8px; padding: 11px 14px; font-size: 12px; background: rgba(16,14,11,0.98); border-color: var(--altin); }
.mm-git.ust:hover { background: rgba(201,169,97,0.2); }

/* ================= Eserin karşısında ================= */
.detay {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background: rgba(6, 6, 5, 0.97);
  animation: belir 0.35s ease;
}

@keyframes belir { from { opacity: 0; } to { opacity: 1; } }

.detay-ic {
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 44px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}

/* ŞİİR / SÖZ AÇIKKEN: resim yok, ızgara da olmasın.
   Eskiden resim gizlendiği hâlde ızgara iki sütun kalıyordu; şiir soldaki
   528 px'e sıkışıyor, sağda 563 px boş panel duruyordu. Uzun dizeler
   sarılıyordu — ve sarılan bir satır yeni bir dizeden ayırt edilemiyordu.
   Şiirin ölçüsü (satır uzunluğu) onun nefesidir; kırılmamalı. */
.detay.yalniz-yazi .detay-ic {
  grid-template-columns: 1fr;
  max-width: 820px;
}

/* Eser görseli + BÜYÜTEÇ — tek blok.
   overflow:hidden büyüteç için ŞART (zoom taşmasın); sticky ile birlikte
   çalışmadığı için sticky BIRAKILDI. Eskiden iki ayrı .detay-gorsel bloğu
   vardı ve ikincisi sticky'yi ezerken 'top:80px' öksüz kalıp görseli
   masaüstünde 80px aşağı kaydırıyordu — o hata giderildi. */
.detay-gorsel {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  padding: 16px;
  background: linear-gradient(145deg, #3a3128, #241e18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75);
}

.detay-gorsel img { width: 100%; display: block; }

.detay-gorsel img {
  /* transform ve transform-origin artık JS'ten sürülüyor (kademesiz zoom /
     tekerlek / pinch). Geçiş kısa: pinch sırasında takip etsin, gecikmesin. */
  transition: transform 0.08s ease-out;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;          /* pinch'i tarayıcı sayfa zoom'una kaptırmasın */
}

.detay-gorsel { cursor: zoom-in; }
.detay-gorsel.buyuk { cursor: zoom-out; }

.buyutec-ipucu {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 9px;
  background: rgba(14, 12, 10, 0.82);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #e8dcc2;
  pointer-events: none;
  transition: opacity 0.25s;
}

.detay-gorsel.buyuk .buyutec-ipucu { opacity: 0; }

.detay-yil {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--altin);
}

.detay-bilgi h2 {
  margin-top: 12px;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
}

.detay-kunye {
  margin-top: 8px;
  font-style: italic;
  color: var(--soluk);
}

/* Sadece sanatçı modunda (?sanatci) görünür */
.dosya-kodu {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 2px;
  font-family: Consolas, monospace;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--altin);
}

.blok {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blok h3 {
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--altin);
}

.blok p { color: #c9c1b4; }

.siir-adi { font-style: italic; margin-bottom: 10px; }

/* ŞİİRİN METNİ

   pre-wrap KALIYOR — bilerek: bazı şiirler baştaki boşluklarıyla yaşıyor
   (basamaklı düşüşler). Onları silmek şiiri bozar.

   ASILI GİRİNTİ KALDIRILDI. Uzun dizeler sarılınca "sarılan satır yeni dize
   sanılmasın" diye eklenmişti (text-indent -1.9em + padding 1.9em), ama
   her dizenin İLK cümlesini içeri itip hizayı bozuyordu — estetiği kırdı.
   Şimdi her dize soldan başlar; şiir defterdeki gibi hizalı durur.
   (Sarılma riski için ölçü zaten 820px'e sınırlı ve punto 17px — çoğu dize
   sığıyor; sığmayan uzun dizeler nadirdir.)

   line-height 1.65: kıta boşluğu (boş satır) satır aralığından ayırt edilsin. */
.siir-metni {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  white-space: pre-wrap;
  color: #c9c1b4;
}

#detaySes {
  width: 100%;
  margin-top: 20px;
  filter: invert(0.9) hue-rotate(180deg);
}

.detay-kapat {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 45;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--soluk);
  font-size: 22px;
  cursor: pointer;
  transition: color 0.3s;
}

.detay-kapat:hover { color: var(--altin); }

/* Duygular */
.duygular { display: flex; flex-wrap: wrap; gap: 10px; }

.duygu {
  padding: 8px 18px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--soluk);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
}

.duygu:hover { border-color: var(--altin); color: var(--altin); }

.duygu.secili {
  background: rgba(201, 169, 97, 0.14);
  border-color: var(--altin);
  color: var(--altin);
}

.not-kucuk {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: #6f675c;
}

.blok .not-kucuk { margin-top: 14px; }

/* Ziyaretçiye sözünün nereye gittiğini SÖYLEYEN not — yazmadan ÖNCE okunmalı,
   sonra değil. Fısıltı değil, okunur bir uyarı. */
.not-once {
  margin: 14px 0 16px;
  padding: 10px 14px;
  background: rgba(201, 169, 97, 0.07);
  border-left: 2px solid rgba(201, 169, 97, 0.5);
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9a9184;
}

.not-once b { color: #cdc4b4; font-weight: 600; }

/* ---- Giriş: oda adları ---- */
.odalar {
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--altin);
}

/* ---- Hangi odadayım ---- */
.nerede {
  position: absolute;
  top: 24px;
  left: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(148, 139, 125, 0.5);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  transition: color 0.5s;
}

/* Ziyaretçiye sorulan soru — büyük değil, sakin */
.soru-alt {
  margin-top: -8px;
  margin-bottom: 18px;
  font-size: 15px;
  font-style: italic;
  color: var(--soluk);
}

/* ---- Şiiri dinle ---- */
.dinle-alani {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 16px 18px;
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 3px;
}

.dinle-buton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--altin);
  border: none;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #14120e;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.25s;
}

.dinle-buton:hover { opacity: 0.85; }

.dinle-simge { font-size: 14px; line-height: 1; }

.dinle-cubuk {
  position: relative;
  flex: 1;
  height: 20px;                 /* geniş tutma alanı — parmakla/fareyle kolay yakalanır */
  cursor: pointer;
  touch-action: none;           /* dokunmatikte sürüklerken sayfa kaymasın */
  display: flex;
  align-items: center;
}

/* ince görsel ray (tutma alanı büyük ama ray zarif kalsın) */
.dinle-cubuk::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 3px;
  background: rgba(201, 169, 97, 0.25);
}

.dinle-cubuk span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0%;
  height: 5px;
  border-radius: 3px;
  background: var(--altin);
  pointer-events: none;         /* tıklama/sürükleme çubuğa gitsin */
}

/* sürükleme tutamağı — dolgu ucunda küçük daire */
.dinle-cubuk span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--altin);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.18);
}

.dinle-sure {
  min-width: 42px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--soluk);
  text-align: right;
}

#detaySes { display: none; }

/* Seslendiren — dinle alanının hemen altında, sessiz bir künye */
.seslendiren {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--soluk);
  font-style: italic;
}

/* ---- Ziyaretçinin duygusu ---- */
/* KARŞILAŞMAYI YAVAŞLAT (madde 12): eser 6 sn yalnız kaldıktan sonra
   duygu bloğu 900 ms'de yumuşakça belirir. (prefers-reduced-motion açıksa
   aşağıdaki global kural animasyonu kapatır; blok yine de görünür.) */
.duygu-blok.beliriyor {
  animation: duyguBelir 900ms ease both;
}
@keyframes duyguBelir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.duygu-blok h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--metin);
  margin-bottom: 20px;
}

#duyguYazi {
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--metin);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s;
}

#duyguYazi:focus { border-color: var(--altin); }
#duyguYazi::placeholder { color: #6f675c; font-style: italic; }

.duygu-alt {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
}

.buton-kucuk {
  padding: 9px 26px;
  background: none;
  border: 1px solid var(--altin);
  color: var(--altin);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.buton-kucuk:hover { background: var(--altin); color: var(--zemin); }

.duygu-durum {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  line-height: 1.6;
  color: var(--altin);
}

/* İsteğe bağlı isim alanı */
.duygu-ad {
  width: 100%;
  margin-top: 12px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--metin);
  font-family: var(--serif);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
}
.duygu-ad:focus { border-color: var(--altin); }
.duygu-ad::placeholder { color: #6f675c; font-style: italic; }

/* İki düğme yan yana (dar ekranda alt alta) */
.duygu-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}
.duygu-dugmeler .buton-kucuk { margin: 0; }

/* İzin onay kutusu — "gönder"e basılınca belirir */
.duygu-izin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--metin);
}
.duygu-izin input { width: 16px; height: 16px; accent-color: var(--altin); cursor: pointer; }

.duygu-gizlilik { margin-top: 14px; }

/* Eser panelinde yorum blokları: sağ sütunun köşesinde kalmasın diye
   panelin altına, tam genişliğe (ve okunur bir ölçüye) alındı. */
.detay-ic > .tam-genis { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 760px; }

/* Anı defterinde "sen de bir iz bırak" alanı (form sınıfları paylaşılıyor). */
.defter-yaz { margin: 2px 0 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.defter-yaz h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--metin); margin-bottom: 8px; }
#defterYazi {
  width: 100%; margin-top: 12px; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--metin); font-family: var(--serif); font-size: 16px; line-height: 1.7;
  resize: vertical; outline: none; transition: border-color 0.3s;
}
#defterYazi:focus { border-color: var(--altin); }
#defterYazi::placeholder { color: #6f675c; font-style: italic; }

/* ================= Anı Defteri ================= */
.defter {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(ellipse 65% 60% at 50% 40%, rgba(201, 169, 97, 0.07), transparent 70%),
    rgba(8, 8, 7, 0.97);
  backdrop-filter: blur(6px);
  animation: halkaBelir 700ms ease both;
}

/* İç kutu ekran yüksekliğine sığar ve KENDİSİ tek parça kaydırılır:
   başlık, yazma formu ve yorumlar tek bir sayfa gibi yukarı-aşağı gider.

   Eskiden iki sorun vardı:
   1) Yükseklik sınırı hiç yoktu -> form + liste ekranı taşınca alttaki
      yorumlar ekranın altına düşüyor, dış kaydırma olmadığı için
      oraya hiç ulaşılamıyordu.
   2) Sonra yalnız LİSTE kaydırılır yapıldı; bu sefer form bütün kutuyu
      kaplayıp yorumlara telefonda ~180 px'lik bir delik bırakıyordu —
      "paylaşılanlar okunmuyor" (Zuhal). Ölçüldü: liste 179 px / kutu 780 px.
   Çözüm: kaydırma listede değil, kutunun kendisinde. */
.defter-ic {
  max-width: 680px; width: 100%;
  max-height: calc(100vh - 64px);   /* .defter padding'i (32px×2) kadar boşluk */
  /* Telefonda 100vh adres çubuğunu SAYAR -> kutu ekrandan taşar ve alt kısmı
     görünmez olur. dvh gerçek görünür yüksekliktir; desteklemeyen tarayıcı
     üstteki vh satırında kalır. */
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* defterin sonunda arkadaki sayfa kaymasın */
  -webkit-overflow-scrolling: touch;
}

/* Kutunun tamamı kaydığı için başlık şeridi ÜSTTE SABİT kalır —
   uzun bir defterde "Kapat" için en başa dönmek gerekmesin. */
.defter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(12, 11, 10, 0.96);
  backdrop-filter: blur(4px);
}
.defter-bar span {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--altin);
}
.defter-bar .buton-sade { margin: 0; }

.defter-alt {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--soluk);
  margin: 14px 0 22px;
}

/* Liste artık kendi içinde kaydırılmaz — kaydırma .defter-ic'te (yukarı bak).
   Böylece yorumlar dar bir pencereden değil, boyları kadar görünür. */
.defter-liste {
  text-align: left;
}

.defter-kart {
  padding: 16px 20px;
  margin-bottom: 14px;
  border-left: 2px solid var(--altin);
  background: rgba(255, 255, 255, 0.03);
}

.defter-oge {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 8px;
}

.defter-soz {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--metin);
  white-space: pre-wrap;
}

/* Ziyaretçi notları — eser/şiir panelinde (anı defteri kartlarıyla aynı dil) */
.eser-yorum-liste .defter-kart:last-child { margin-bottom: 0; }

/* =============== İNCELEME — "daha yakından" (yazılı bakış) =============== */
/* Davet: eser panelinde, kenarda, sessiz. Gecikmeli belirir, kaçırılabilir. */
.inceleme-davet {
  display: inline-block; margin-top: 16px; padding: 7px 18px;
  background: rgba(201, 169, 97, 0.06);
  border: 1px solid rgba(201, 169, 97, 0.45); border-radius: 999px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.18em; text-transform: lowercase;
  color: var(--altin); cursor: pointer;
  opacity: 0; transition: opacity 1.2s ease, color 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Normal eserde "çağıran" hâl: küçük halka + belirince iki kez yumuşak nefes.
   Anıt eserde (.cagiran EKLENMEZ) sakin kalır — parıldamaz, halka koymaz. */
.inceleme-davet.cagiran::before { content: "◦"; margin-right: 0.55em; opacity: 0.85; }
.inceleme-davet.beliriyor { opacity: 0.92; }
.inceleme-davet.cagiran.beliriyor { animation: davet-nefes 3.2s ease-in-out 2; }
.inceleme-davet:hover { color: #fff; background: rgba(201, 169, 97, 0.16); border-color: var(--altin); opacity: 1; }

/* Liste kartında eserin salondaki odası. Tıklanınca salonda o eserin
   karşısına götürüyor — künyeden ayrı, sessiz ama bir kapı olduğu belli. */
.liste-oda {
  display: inline-block; margin: 6px 0 0; padding: 0;
  background: none; border: none; border-bottom: 1px dotted rgba(201, 169, 97, 0.4);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--soluk); cursor: pointer; text-align: left;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.liste-oda:hover { color: var(--altin); border-bottom-color: var(--altin); }

/* Liste içinde bölüm başlığı (şimdilik yalnız Sözler): oda adı 18 kartın
   altına tek tek yazılmasın, bölümün başında bir kez dursun. */
.liste-bolum { padding: 34px 4vw 4px; }
.liste-bolum h2 {
  margin: 0 0 6px;
  font-family: var(--serif, Georgia, serif); font-size: 22px; font-weight: normal;
  letter-spacing: 0.06em; color: var(--altin);
}

/* ---- "Eva Deniz kimdir?" ----
   Katlı durur, soran açar. Eva'nın kendi sesiyle yarışmasın diye sessiz:
   küçük punto, soluk renk, süs yok. */
.eva-kimdir { margin-top: 12px; }
.eva-kimdir > summary {
  display: inline-block; list-style: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em;
  color: var(--soluk); border-bottom: 1px dotted rgba(201, 169, 97, 0.4);
  padding-bottom: 1px; transition: color 0.3s ease;
}
.eva-kimdir > summary::-webkit-details-marker { display: none; }
.eva-kimdir > summary:hover { color: var(--altin); }
.eva-kimdir[open] > summary { color: var(--altin); margin-bottom: 8px; }
/* Açıldığında altındaki metne yapışmasın (inceleme katmanında hemen ardından
   Eva'nın giriş cümlesi geliyor). */
.eva-kimdir[open] { margin-bottom: 18px; }
.eva-kimdir p {
  margin: 0 0 8px; max-width: 60ch;
  font-family: var(--serif, Georgia, serif); font-size: 14px;
  line-height: 1.75; color: var(--soluk);
}
.eva-kimdir p:last-child { margin-bottom: 0; }
.eva-kimdir[hidden] { display: none; }

/* Listede: kartların üstünde, bir kez. */
.eva-kimdir-liste { padding: 0 4vw 4px; }

/* ---- Tek bir eseri / şiiri paylaş ----
   "daha yakından" davetinin dilinde ama daha sessiz: parıldamaz, çağırmaz.
   Ziyaretçi arayanda bulsun, aramayanı rahatsız etmesin. */
.paylas-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.paylas-oge {
  display: inline-block; padding: 7px 18px;
  background: none;
  border: 1px solid rgba(201, 169, 97, 0.32); border-radius: 999px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--soluk); cursor: pointer;
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.paylas-oge::before { content: "↗"; margin-right: 0.6em; opacity: 0.8; }
.paylas-oge:hover { color: var(--altin); background: rgba(201, 169, 97, 0.1); border-color: var(--altin); }
.paylas-oge[hidden] { display: none; }

.paylas-durum {
  font-family: var(--serif, Georgia, serif); font-size: 12.5px; font-style: italic;
  color: var(--altin); opacity: 0.85;
}

/* İlk kez inceleme daveti görülünce, altında tek seferlik nazik ipucu. */
.inceleme-davet-ipucu {
  margin: 9px 0 0; font-family: var(--serif, Georgia, serif); font-size: 12.5px;
  font-style: italic; color: var(--soluk); opacity: 0; transition: opacity 1s ease;
}
.inceleme-davet-ipucu.beliriyor { opacity: 0.72; }

@keyframes davet-nefes {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
  50%      { box-shadow: 0 0 18px 3px rgba(201, 169, 97, 0.38); }
}

/* Overlay: dünya kararır, eser büyür. Ayrı sayfa değil — üstte bir katman. */
.inceleme {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(ellipse at center, rgba(8, 10, 12, 0.94), rgba(3, 4, 5, 0.99) 78%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.9s ease;
}
.inceleme.aciliyor { opacity: 1; }
.inceleme[hidden] { display: none; }

.inceleme-sahne { display: flex; align-items: center; gap: 3vw; width: 92vw; max-width: 1500px; height: 88vh; }
.inceleme-gorsel { flex: 0 1 auto; margin: 0; display: flex; align-items: center; justify-content: center; max-width: 65%; max-height: 100%; }
.inceleme-gorsel img { max-width: 100%; max-height: 88vh; border-radius: 2px; box-shadow: 0 0 90px rgba(0, 0, 0, 0.6); }

/* Metin: sağda dar sütun — eserin ÜSTÜNDE değil; gri-yumuşak, eser tam parlak. */
.inceleme-metin { flex: 1 1 0; max-width: 30%; min-width: 260px; align-self: center; max-height: 88vh; overflow-y: auto; opacity: 0; transition: opacity 1s ease; }
.inceleme-metin.beliriyor { opacity: 1; }
.inceleme-yoldas { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soluk); margin-bottom: 6px; }
.inceleme-giris { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.7; color: #b7ae9f; margin-bottom: 24px; }
.inceleme-gozlem { font-family: var(--serif); font-size: 16px; line-height: 1.85; color: #cfc7b8; margin-bottom: 18px; opacity: 0; transform: translateY(6px); transition: opacity 0.7s ease, transform 0.7s ease; }
.inceleme-gozlem.beliriyor { opacity: 1; transform: none; }
.inceleme-gozlem.kapanis { font-style: italic; color: #d8cfbe; margin-top: 10px; }
.inceleme-devam { display: block; margin: 4px auto 28px; padding: 6px 22px; background: none; border: none; cursor: pointer; color: var(--soluk); font-size: 22px; letter-spacing: 0.3em; transition: color 0.3s ease; }
.inceleme-devam:hover { color: var(--altin); }
/* ANIT / İTHAF eseri (sesin sustuğu an) — yorum yok; yalnız ithaf + ziyaretçiyi
   tuvalin önündeki 3B karanfil köşesine yönlendiren cümle. (Karanfil jesti
   panelde DEĞİL; salondaki karanfilKosesiKur'da.) */
.inceleme-ithaf { font-family: var(--serif); font-size: 19px; line-height: 1.9; font-style: italic; color: #e6ddcb; margin-bottom: 26px; }
.inceleme-karanfil-davet { color: #b9b1a2; font-size: 15px; margin-bottom: 22px; }
.inceleme-cikis { position: fixed; top: 24px; right: 28px; z-index: 61; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; color: var(--soluk); transition: color 0.3s ease; }
.inceleme-cikis:hover { color: var(--altin); }
.inceleme-ipucu { position: fixed; bottom: 18px; left: 0; right: 0; z-index: 61; text-align: center; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; color: var(--soluk); opacity: 0.55; }
.inceleme-ipucu[hidden] { display: none; }

@media (max-width: 820px) {
  .inceleme-sahne { flex-direction: column; height: 92vh; gap: 2vh; padding-top: 44px; }
  .inceleme-gorsel { max-width: 100%; max-height: 52vh; }
  .inceleme-gorsel img { max-height: 52vh; }
  .inceleme-metin { max-width: 92vw; min-width: 0; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .inceleme, .inceleme-metin, .inceleme-gozlem, .inceleme-davet { transition-duration: 0.01ms; }
  .inceleme-gozlem { transform: none; }
  .inceleme-davet.cagiran.beliriyor { animation: none; }
}

.defter-bos {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--soluk);
  text-align: center;
  padding: 40px 10px;
}

.liste-kart.siir { grid-template-columns: 1fr; }

/* "daha yakından" — liste görünümündeki Eva Deniz katmanı.
   Salonda adım adım açılır; burada okumak isteyene tek seferde. */
.liste-inceleme { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px; }
.liste-inceleme > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em;
  color: var(--altin);
  border: 1px solid rgba(201, 169, 97, 0.35); border-radius: 999px;
  padding: 6px 16px;
}
.liste-inceleme > summary::-webkit-details-marker { display: none; }
.liste-inceleme > summary::after { content: "  ›"; }
.liste-inceleme[open] > summary::after { content: "  ⌄"; }
.liste-inceleme > summary:hover { border-color: var(--altin); }
.liste-inceleme p {
  font-family: var(--serif); font-size: 15px; line-height: 1.85;
  color: #bdb4a6; margin: 14px 0 0; max-width: 62ch;
}
.liste-inceleme .li-yoldas {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em;
  color: var(--soluk); font-style: italic;
}
.liste-inceleme .li-giris { color: #d8cfc0; }
.liste-inceleme .li-arastirma,
.liste-inceleme .li-kapanis {
  border-left: 2px solid rgba(201, 169, 97, 0.3); padding-left: 14px;
}

/* ================= Liste görünümü ================= */
.liste {
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow-y: auto;
  background: #12100e;
}

.liste-bar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px;
  background: rgba(10, 9, 8, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--soluk);
}

.liste-bar .buton-sade { margin: 0; }

.liste-ic { max-width: 900px; margin: 0 auto; padding: 50px 24px 90px; }

.liste-kart {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.liste-kart h3 { font-size: 24px; font-weight: 400; margin-bottom: 6px; }
.liste-kart p { margin-top: 12px; color: #c9c1b4; }
.liste-kart img { width: 100%; }

/* ================= Salon boş ================= */
.bos-salon {
  position: fixed;
  left: 50%;
  bottom: 60px;
  z-index: 25;
  transform: translateX(-50%);
  max-width: 520px;
  padding: 26px 34px;
  text-align: center;
  background: rgba(10, 9, 8, 0.8);
  border: 1px solid rgba(201, 169, 97, 0.28);
}

.bos-salon code {
  display: inline-block;
  margin: 10px 0;
  padding: 4px 10px;
  background: rgba(201, 169, 97, 0.12);
  color: var(--altin);
  font-family: Consolas, monospace;
  font-size: 13px;
}

/* ================= Küçük ekran ================= */
@media (max-width: 860px) {
  .detay-ic { grid-template-columns: 1fr; padding: 70px 20px 50px; gap: 34px; }
  .detay.yalniz-yazi .detay-ic { padding: 70px 20px 50px; }
  .detay-gorsel { position: relative; }   /* static DEĞİL: "büyütmek için tıkla" ipucu resme yapışık kalsın, alta kaçıp çakışmasın */
  .liste-kart { grid-template-columns: 1fr; gap: 18px; }
  .ipucu { font-size: 12px; padding: 8px 14px; }
}

/* ================= TELEFON =================
   Salonda ekranın dört köşesi de dolu: sağ üstte iki kaydırıcı + çık,
   altta altı düğmeli oda çubuğu + yürü + kalk. Dar ekranda hepsi
   birbirinin üstüne biniyordu.

   Çözüm: HUD ekranın kenarlarına yapışır, oda çubuğu YATAY KAYAR
   (altı düğme sığmaya çalışıp okunmaz hâle gelmesin), kaydırıcılar
   incelir ama KALIR — çünkü ışık ve ses serginin parçası, süs değil.

   dvh: telefon tarayıcısının adres çubuğu inip kalkarken ekran
   yüksekliği değişir; vh yanlış ölçer, dvh doğru ölçer.
   safe-area: çentikli/yuvarlak köşeli ekranlarda kenara yapışmasın. */
@media (max-width: 760px) {
  .kose-dugmeler {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 70vw;
  }

  .ayar-kutusu { padding: 6px 10px; gap: 7px; }
  .ayar-kaydirici { width: 62px; }
  .ayar-etiket { font-size: 10px; letter-spacing: 0.06em; }
  .ayar-yazi { display: none; }          /* yüzde yazısı yer kaplıyor; kaydırıcı zaten görünür */

  .sade-dugme { padding: 8px 12px; font-size: 11px; }

  /* Oda çubuğu: sığdırmaya çalışma — kaydır. */
  .oda-cubugu {
    top: auto;
    bottom: calc(150px + env(safe-area-inset-bottom));
    left: 8px;
    right: 8px;
    transform: none;
    max-width: none;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .oda-cubugu::-webkit-scrollbar { display: none; }
  .oda-cubugu button { flex: 0 0 auto; padding: 9px 12px; font-size: 11px; letter-spacing: 0; }

  .yuru { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .kalk-dugmesi { bottom: calc(214px + env(safe-area-inset-bottom)); }

  .nerede { font-size: 12px; }
  .hatirlatma {
    font-size: 12px; padding: 10px 16px; text-align: center;
    bottom: calc(214px + env(safe-area-inset-bottom));   /* hareket pad'i + oda çubuğunun üstünde kalsın */
    white-space: normal; max-width: calc(100vw - 32px);
  }

  /* Şiir telefonda: asılı girinti kalsın ama punto biraz insin,
     yoksa uzun dizeler ikide bir sarılır. */
  .siir-metni { font-size: 15.5px; }
}

/* Çok dar telefonlar */
@media (max-width: 400px) {
  .ayar-kaydirici { width: 48px; }
  .kose-dugmeler { max-width: 78vw; }
}

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