/* ============================================================
   Leyla Cave House — site.css
   Tasarım dili: Taş & Toprak temeli + Şafak atmosferi
   Zemin: kemik/kireçtaşı · Metin: gece mürekkebi · Vurgu: amber
   İkincil: şafak mavisi. Terracotta yok.
   Tüm metin/zemin çiftleri WCAG AA (kontrol: contrast.js).
   ============================================================ */

/* ---------- Fontlar (self-host) ----------
   Başlık: Young Serif — TEK ağırlık (Regular). Hiyerarşi ağırlıkla değil,
   boyut/renk/harf-aralığıyla kurulur. İtalik yüzü yoktur → hiçbir yerde
   font-style:italic çağrılmaz (sahte italik yasak).
   Gövde: Hanken Grotesk — Regular (400) + SemiBold (600). */
@font-face {
  font-family: 'Young Serif';
  src: url('/fonts/YoungSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/HankenGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/HankenGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Değişkenler ---------- */
:root {
  --bg:        #F6F1E7;   /* kemik */
  --bg-deep:   #EFE8D8;
  --ink:       #1F2430;   /* gece mürekkebi */
  --ink-2:     #232936;   /* koyu bölüm zemini */
  --muted:     #5B5546;   /* sıcak gri — bone üstünde 6.6:1 */
  --amber:     #8F5D14;   /* metin ambarı — bone üstünde 4.98:1 */
  --amber-mid: #B07A2E;   /* dolgu/çizgi ambarı (yalnız dekor) */
  --amber-hi:  #D9A054;   /* koyu zemin üstünde amber — 6.3:1 */
  --dawn:      #ECEFF4;   /* şafak mavisi bandı */
  --stone-1:   #EFE7D3;   /* placeholder taş */
  --stone-2:   #E2D5B9;
  --line:      rgba(31, 36, 48, 0.14);
  --line-soft: rgba(31, 36, 48, 0.08);
  --card:      #FFFFFF;
  /* Koyu zemin (ink/ink-2) üstünde soluk metin — açık temadaki --muted'in karşılığı */
  --ink-soft:   #C3CAD8;   /* ana destek metni */
  --ink-soft-2: #A9B1C2;   /* ikincil / footer */
  --ink-soft-3: #9AA3B5;   /* mikro etiket */
  --tag-brown:  #6E5A33;   /* açık zeminde sıcak kahve etiket (ph-tag/map-note) */
  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap-max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sec-pad: clamp(4.5rem, 9vw, 7.5rem);
  --overlap: 2.75rem;
}

/* ---------- Taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Young Serif tek ağırlık → weight belirtilmez (hepsi 400). Hiyerarşi boyut/renk/aralıkla. */
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.1; text-wrap: balance; }
p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: #EAD9B6; color: var(--ink); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.tour :focus-visible, .foot :focus-visible { outline-color: var(--amber-hi); }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); margin-inline: auto; }

/* ---------- Ortak parçalar ---------- */
.kicker, .sec-label {
  margin: 0 0 1.1rem;
  font-size: 0.72rem;          /* tek etiket kadansı (room-eyebrow/cal-head/loc-pois ile) */
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
/* CJK'de harf-aralığı ideografları açar + uppercase etkisiz — Latin editoryal
   tavrı burada yok; aralığı sıfırla (Latin diller etkilenmez). */
:lang(zh) .kicker, :lang(zh) .sec-label,
:lang(ja) .kicker, :lang(ja) .sec-label,
:lang(ko) .kicker, :lang(ko) .sec-label { letter-spacing: normal; }
.kicker::before, .sec-label::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
  margin-right: 0.8rem;
  transform: translateY(-1px);
}
h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.85rem);
  letter-spacing: -0.014em;
  line-height: 1.08;
  max-width: 24ch;
}
.lead { margin-top: 1.15rem; color: var(--muted); max-width: 46ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.8em;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: #303748; }

/* Airbnb birincil aksiyonu — amber dolgu, koyu mürekkep metin (AA: 5.0:1) */
.btn-airbnb {
  background: var(--amber-mid);
  color: #1A1206;
}
.btn-airbnb:hover { background: #A97425; }
.btn:active { transform: translateY(1px); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  color: var(--amber);
  font-size: 0.95rem;
  font-weight: 530;
  text-decoration: underline;
  text-decoration-color: rgba(143, 93, 20, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: text-decoration-color 0.2s ease;
}
.link-arrow:hover { text-decoration-color: var(--amber); }
.link-arrow .arr { display: inline-block; transition: translate 0.2s ease; }
.link-arrow:hover .arr { translate: 0.2em 0; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.7em 1.2em;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus-visible { top: 1rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 241, 231, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  padding-block: 1.05rem;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.wordmark:hover { opacity: 0.72; }
/* Young Serif italik içermez → "Cave" ayrımı renkle (amber), eğik değil. */
.wordmark em { font-style: normal; color: var(--amber); }
.nav-in nav { margin-left: auto; }
.nav-links {
  display: flex;
  gap: clamp(1.1rem, 2.5vw, 2.1rem);
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 480;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--amber); }
/* Dil değiştirici — native <details>, JS gerekmez. summary = pill tetikleyici,
   .lang-menu = altında açılan panel (9 dil). */
.lang { position: relative; }
.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.95em;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 520;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;          /* varsayılan açılır üçgeni kaldır (Firefox) */
  user-select: none;
  white-space: nowrap;
}
.lang > summary::-webkit-details-marker { display: none; } /* Safari/Chrome üçgeni */
.lang > summary:hover { border-color: var(--amber); color: var(--amber); }
.lang > summary svg { transition: transform 0.18s ease; }
.lang[open] > summary svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 120;
  min-width: 9.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--bg, #F6F1E7);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  box-shadow: 0 12px 30px -12px rgba(43, 33, 22, 0.35);
}
.lang-menu li { margin: 0; }
.lang-menu a {
  display: block;
  padding: 0.42rem 0.7rem;
  border-radius: 0.45rem;
  font-size: 0.86rem;
  font-weight: 480;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease;
}
.lang-menu a:hover { background: rgba(176, 122, 46, 0.10); color: var(--amber); }
.lang-menu a[aria-current="true"] {
  color: var(--amber);
  font-weight: 620;
}
@media (prefers-reduced-motion: reduce) {
  .lang > summary svg { transition: none; }
}

/* ---------- Mobil menü çekmecesi (yalnız <=719px; masaüstünde gizli) ---------- */
.mobil-nav { display: none; }
html.mobil-menu-acik { overflow: hidden; }
@media (max-width: 719px) {
  /* Mobilde .nav'ın backdrop-filter'ı KALDIRILIR: aksi halde fixed konumlu
     çekmece panelini header kutusuna hapseder (backdrop-filter, fixed torunlar
     için containing-block oluşturur). Masaüstünde blur korunur. */
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(246, 241, 231, 0.96); }
  /* Masaüstü satır-içi nav + switcher gizlenir; yerine hamburger */
  .nav-in > nav,
  .nav-in > .lang { display: none; }
  .mobil-nav { display: block; margin-left: auto; }

  .mobil-nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -0.4rem;
    list-style: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Açık çekmecede X, panelin (z-200) ÜSTÜNDE kalsın — kapatma erişilebilir olsun */
    position: relative; z-index: 210;
  }
  .mobil-nav-btn::-webkit-details-marker { display: none; }
  /* Hamburger: orta çizgi + ::before/::after ile 3 çizgi; açıkken X'e döner */
  .mobil-nav-cizgi { position: relative; }
  .mobil-nav-cizgi,
  .mobil-nav-cizgi::before,
  .mobil-nav-cizgi::after {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--ink); transition: transform .25s ease, background .2s ease;
  }
  .mobil-nav-cizgi::before,
  .mobil-nav-cizgi::after { content: ''; position: absolute; left: 0; }
  .mobil-nav-cizgi::before { top: -7px; }
  .mobil-nav-cizgi::after { top: 7px; }
  .mobil-nav[open] .mobil-nav-cizgi { background: transparent; }
  .mobil-nav[open] .mobil-nav-cizgi::before { transform: translateY(7px) rotate(45deg); }
  .mobil-nav[open] .mobil-nav-cizgi::after { transform: translateY(-7px) rotate(-45deg); }

  /* Panel = tam-ekran backdrop + sağdan kayan içerik (backdrop tıklama kapatır) */
  .mobil-nav-panel {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(31, 36, 48, 0.42);
    display: flex; justify-content: flex-end;
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  .mobil-nav[open] .mobil-nav-panel { opacity: 1; visibility: visible; }
  .mobil-nav-ic {
    width: min(84vw, 340px); height: 100%; overflow-y: auto;
    background: var(--bg);
    padding: 5.25rem 1.6rem 2rem;
    box-shadow: -18px 0 40px -20px rgba(43, 33, 22, 0.5);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  }
  .mobil-nav[open] .mobil-nav-ic { transform: translateX(0); }

  .mobil-nav-links { list-style: none; margin: 0; padding: 0; }
  .mobil-nav-links a {
    display: block; padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
    color: var(--ink); text-decoration: none;
  }
  .mobil-nav-links a:active { color: var(--amber); }

  .mobil-nav-diller { margin-top: 1.8rem; }
  .mobil-nav-diller-bas {
    display: block; margin-bottom: 0.7rem;
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
  }
  .mobil-nav-diller ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.8rem;
  }
  .mobil-nav-diller a {
    display: flex; align-items: center; min-height: 44px; padding: 0.4rem 0.2rem;
    font-size: 0.98rem; color: var(--ink); text-decoration: none;
  }
  .mobil-nav-diller a[aria-current="true"] { color: var(--amber); font-weight: 620; }
}
@media (prefers-reduced-motion: reduce) {
  .mobil-nav-panel, .mobil-nav-ic, .mobil-nav-cizgi,
  .mobil-nav-cizgi::before, .mobil-nav-cizgi::after { transition: none; }
}

/* ---------- Mobil dokunma hedefleri (≥44px; masaüstü dokunulmaz) ---------- */
@media (max-width: 719px) {
  /* Marka: nav'da tıklama alanı büyür */
  .wordmark { padding-block: 0.45rem; }
  /* Metin bağlantıları: breadcrumb/geri, önceki-sonraki daire, ikincil CTA */
  .link-arrow { padding-block: 0.5rem; align-items: center; }
  /* Footer nav + dil bağlantıları (19px → ≥44px) */
  .foot-col li { margin-bottom: 0.1rem; }
  .foot-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-langs { gap: 0.1rem 1.4rem; }
  /* Nokta bulutu Tam ekran + tam-ekrandaki Kapat pili (komşu zoom düğmeleri zaten 44px) */
  .nb-btn { min-height: 44px; display: inline-flex; align-items: center; }
  /* Seçili daire çipinin 'Daireyi gör →' eylem bağlantısı */
  .nb-chip-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.3rem; }
  /* Harita MapLibre zoom kontrolleri (vendor varsayılanı 29px) */
  .loc-map-band .maplibregl-ctrl-group button { width: 44px; height: 44px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(600px, calc(100svh - 4.6rem), 880px);
}
.hero-scene {
  position: absolute;
  inset: auto 0 0 0;
  height: min(68%, 640px);
  pointer-events: none;
}
.hero-scene svg { display: block; width: 100%; height: 100%; }
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(246, 241, 231, 0.95) 30%,
    rgba(246, 241, 231, 0.62) 54%,
    rgba(246, 241, 231, 0.12) 78%,
    rgba(246, 241, 231, 0) 100%);
}
.hero-in {
  position: relative;
  z-index: 2;
  padding-top: clamp(3.5rem, 8vh, 6.5rem);
}
.hero h1 {
  font-size: clamp(2.7rem, 6.1vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  max-width: 15ch;
}
.hero-sub {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 40ch;
  text-wrap: balance; /* tek kelimelik yetim satırı engeller */
}
.story-body, .lead, .tour-body, .room-desc,
.story-figure figcaption, .avail-note, .foot-brand p { text-wrap: pretty; }
.hero-cta {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  gap: 1.9rem;
  flex-wrap: wrap;
}
.hero-foot {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding-top: 4rem;
}
.hero-meta {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  width: fit-content;
  padding: 1.15rem 1.9rem;
  background: rgba(246, 241, 231, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: calc(-1 * var(--overlap));
}
.hero-meta li { display: grid; gap: 0.15rem; }
.hero-meta strong {
  font-family: var(--font-display);
  font-weight: 400; /* Young Serif tek yüz — UA bold'u sentetik kalınlaştırır */
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}
.hero-meta span { font-size: 0.82rem; color: var(--muted); }

/* ---------- Placeholder sistemi (kemer + amber ışık) ---------- */
.ph-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 16px 16px / 36% 36% 16px 16px;
  background: var(--stone-1);
  box-shadow: inset 0 0 0 1px rgba(143, 93, 20, 0.16);
}
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph {
  background:
    repeating-linear-gradient(171deg,
      rgba(31, 36, 48, 0.026) 0 2px, rgba(31, 36, 48, 0) 2px 10px),
    radial-gradient(115% 85% at 76% 30%,
      rgba(240, 196, 128, 0.42), rgba(240, 196, 128, 0) 58%),
    linear-gradient(202deg, #F1E8D5 0%, #E9DEC6 48%, #DCCFAF 100%);
}
.ph::before {
  /* oyma iç kemer çizgisi */
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(143, 93, 20, 0.22);
  border-radius: 50% 50% 12px 12px / 35% 35% 12px 12px;
  pointer-events: none;
}
.ph-light {
  /* görünmeyen kemerli pencereden taş duvara vuran sıcak ışık */
  position: absolute;
  top: 16%;
  right: 8%;
  width: 38%;
  height: 54%;
  border-radius: 50% 50% 10px 10px / 42% 42% 10px 10px;
  background: linear-gradient(190deg,
    rgba(255, 216, 152, 0.78) 0%,
    rgba(238, 180, 100, 0.42) 62%,
    rgba(238, 180, 100, 0.1) 100%);
  transform: skewY(7deg) rotate(-3deg);
  filter: blur(7px);
  pointer-events: none;
}
.ph-arch {
  /* tüfe oyulmuş kemerli kapı — içeriden sızan sıcak ışık (illüstratif, düz renk değil) */
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 33%;
  height: 47%;
  border-radius: 50% 50% 4px 4px / 62% 62% 4px 4px;
  background:
    radial-gradient(125% 78% at 50% 96%,
      rgba(255, 214, 150, 0.62) 0%,
      rgba(214, 150, 86, 0.34) 26%,
      rgba(58, 44, 36, 0.94) 60%);
  box-shadow:
    inset 0 1.5px 3px rgba(0, 0, 0, 0.38),
    0 -1px 0 rgba(255, 224, 178, 0.4);
  pointer-events: none;
}
.ph::after {
  /* zemine yayılan ışık gölü */
  content: "";
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 52%;
  height: 16%;
  background: radial-gradient(60% 100% at 55% 40%,
    rgba(240, 196, 128, 0.4), rgba(240, 196, 128, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
}
.ph-tag {
  position: absolute;
  left: 50%;
  bottom: 0.95rem;
  translate: -50% 0;
  padding: 0.4em 0.95em;
  background: rgba(246, 241, 231, 0.92);
  border: 1px solid rgba(143, 93, 20, 0.3);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 540;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tag-brown);
  white-space: nowrap;
}

/* ---------- Hikâye ---------- */
.story {
  position: relative;
  padding-block: calc(var(--sec-pad) + var(--overlap)) var(--sec-pad);
}
.story-ghost {
  position: absolute;
  bottom: -0.18em;
  left: -0.04em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(6.5rem, 18vw, 14rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(31, 36, 48, 0.04);
  pointer-events: none;
  user-select: none;
}
.story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.story-text { grid-column: 1 / 7; padding-top: 3rem; }
.story-body { margin-top: 1.4rem; color: var(--muted); max-width: 52ch; }
.story-figure { grid-column: 7 / 13; }
.story-figure .ph-frame { aspect-ratio: 4 / 5.3; }
.story-figure figcaption {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 38ch;
}
@media (min-width: 1024px) {
  .story-figure {
    margin-top: calc(-1 * clamp(5rem, 11vw, 10.5rem)); /* kemer, şafak sahnesine doğru gerçekten taşar */
    margin-right: -3.5vw;                              /* kenardan taşma */
  }
}

/* ---------- Daireler ---------- */
.rooms { padding-block: var(--sec-pad); }
.rooms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem);
}
.room-link {
  display: block;
  text-decoration: none;
}
.room .ph-frame { transition: transform 0.25s ease; }
.room-link:hover .ph-frame { transform: translateY(-6px); }
/* Uzun orta görsel YALNIZ ana sayfa .rooms-grid diyagonalinde (margin ofsetleriyle
   eşleşir). /daireler + /musaitlik düz ızgaralarında base 3/4 kalır → satır taban
   çizgisi hizalı (nth-child 1/3 zaten base 3/4 ile aynı, kaldırıldı). */
.rooms-grid .room:nth-child(2) .ph-frame { aspect-ratio: 4 / 5.2; }
.room-body { padding: 1.35rem 0.25rem 0; }
.room-eyebrow {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.room h3 {
  margin-top: 0.5rem;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.room-link:hover h3 { color: var(--amber); }
.room-desc {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 34ch;
}
.room-cap {
  display: inline-block;
  margin-top: 0.95rem;
  padding: 0.32em 0.9em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 520;
  letter-spacing: 0.04em;
  color: var(--ink);
}
/* Diyagonal ofsetler yalnız 3 sütunlu düzende (≥960) — 900–959 aralığında
   2 sütunlu gride uygulanınca 3. kart tek başına dev boşlukla düşüyordu.
   .rooms-grid kapsamı: /daireler listesindeki 4'lü kat gridleri düz kalır. */
@media (min-width: 960px) {
  .rooms-grid .room:nth-child(2) { margin-top: 3.5rem; }
  .rooms-grid .room:nth-child(3) { margin-top: 7rem; }
}
/* 2 sütunlu ara aralıkta hafif kademe: şablon simetrisini kırar */
@media (min-width: 720px) and (max-width: 959px) {
  .rooms-grid .room:nth-child(2) { margin-top: 2.25rem; }
}

/* Placeholder ışığı kart kart değişir — aynı pencere ışığının üç kez
   kopyalanmış görünmesini engeller (her dairenin penceresi başka yerde). */
.room:nth-child(2) .ph-light {
  top: 22%;
  right: auto;
  left: 10%;
  width: 34%;
  height: 48%;
  transform: skewY(-6deg) rotate(2.5deg);
}
.room:nth-child(2) .ph::after {
  right: auto;
  left: 6%;
}
.room:nth-child(3) .ph-light {
  top: 12%;
  right: 24%;
  width: 30%;
  height: 60%;
  transform: skewY(4deg) rotate(-1.5deg);
}
.story-figure .ph-light {
  top: 20%;
  right: 14%;
  width: 44%;
  height: 46%;
  transform: skewY(9deg) rotate(-5deg);
  filter: blur(10px);
}
/* Kapı/kemer de kart kart yer değiştirir — üç daire üç ayrı sahne, biri diğerinin kopyası değil */
.room:nth-child(2) .ph-light {
  background: linear-gradient(190deg,
    rgba(233, 213, 221, 0.72) 0%,
    rgba(203, 176, 168, 0.4) 62%,
    rgba(203, 176, 168, 0.1) 100%);
}
.room:nth-child(2) .ph-arch {
  left: 31%;
  width: 28%;
  height: 42%;
  background: radial-gradient(125% 78% at 50% 96%,
    rgba(236, 214, 214, 0.58) 0%, rgba(196, 168, 150, 0.34) 28%, rgba(52, 42, 40, 0.94) 60%);
}
.room:nth-child(2) .ph::after { background: radial-gradient(60% 100% at 50% 40%, rgba(214, 190, 196, 0.42), rgba(214, 190, 196, 0) 70%); }
.room:nth-child(3) .ph-light {
  background: linear-gradient(190deg,
    rgba(255, 210, 140, 0.82) 0%,
    rgba(238, 174, 92, 0.44) 62%,
    rgba(238, 174, 92, 0.1) 100%);
}
.room:nth-child(3) .ph-arch {
  left: 63%;
  width: 25%;
  height: 55%;
  background: radial-gradient(120% 74% at 50% 96%,
    rgba(255, 206, 128, 0.66) 0%, rgba(214, 146, 74, 0.36) 26%, rgba(58, 42, 32, 0.94) 60%);
}
.story-figure .ph-arch {
  left: 39%;
  width: 29%;
  height: 52%;
}

/* ---------- Doluluk bandı (şafak mavisi) ---------- */
.avail {
  background: var(--dawn);
  border-block: 1px solid var(--line-soft);
  padding-block: var(--sec-pad);
}
.avail-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.avail-text { grid-column: 1 / 6; }
.avail-cal { grid-column: 7 / 13; }
.cal-legend {
  display: flex;
  gap: 1.75rem;
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 0.55em; }
.sw {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 4px;
  display: inline-block;
}
.sw-free { background: var(--card); border: 1px solid rgba(31, 36, 48, 0.62); } /* beyaz üstünde ~#74777F: dawn zeminine 3.89:1, kutu içine 4.48:1 (WCAG 1.4.11 ≥3:1) */
.sw-full { background: var(--amber); }
.avail-note {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}
/* Airbnb birincil aksiyonu — bandın en net eylemi */
.avail-cta {
  margin-top: 1.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem 1.4rem;
  flex-wrap: wrap;
}
.avail-cta .btn {
  font-size: 1.02rem;
  padding: 1.05em 2.1em;
}
.avail-cta .btn .arr { transition: translate 0.2s ease; }
.avail-cta .btn:hover .arr { translate: 0.2em 0; }
.avail-cta-note {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.cal-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
  box-shadow: 0 24px 48px -32px rgba(31, 36, 48, 0.35);
}
.cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.cal-head strong {
  font-family: var(--font-display);
  font-weight: 400; /* Young Serif tek yüz — sentetik bold engellenir */
  font-size: 1.28rem;
  letter-spacing: -0.01em;
}
.cal-head span {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-table th {
  padding-bottom: 0.6rem;
  font-size: 0.68rem;
  font-weight: 540;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.cal-table td { padding: 2px; text-align: center; }
.day {
  display: grid;
  place-items: center;
  height: 2.35rem;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 470;
  color: var(--ink);
}
.day-full { background: var(--amber); color: var(--bg); font-weight: 520; }

/* ---------- Nokta bulutu bandı (koyu) ---------- */
.tour {
  background: linear-gradient(200deg, #262C3A 0%, var(--ink-2) 55%, #1D2230 100%);
  color: var(--bg);
  padding-block: var(--sec-pad) 0;
}
.tour .sec-label { color: var(--amber-hi); }
.tour h2 { color: var(--bg); }
.tour-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}
.tour-head-main { grid-column: 1 / 7; }
.tour-body { grid-column: 7 / 13; margin-top: 0; align-self: end; color: var(--ink-soft); max-width: 44ch; }
/* Tam genişlik canvas bandı — harita bandı kalıbıyla akraba.
   Sahne (canvas) + daire seçim paneli aynı bandın içinde: panel tam ekranda da görünür. */
.tour-band {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* min-height: panel içeriği (11 kart) daha uzunsa band ona uyar —
     dar masaüstünde (1000-1300px) panel kaydırmasız kalır */
  min-height: clamp(380px, 44vw, 580px);
  overflow: hidden;
  border-top: 1px solid rgba(246, 241, 231, 0.12);
  background:
    radial-gradient(90% 70% at 58% 56%, rgba(224, 166, 90, 0.10), rgba(224, 166, 90, 0) 65%),
    linear-gradient(180deg, #1C212D 0%, #242B39 100%);
}
.nb-stage { position: relative; flex: 1 1 auto; min-width: 0; }
.nb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y; /* dikey kaydırma tarayıcıda kalır, yatay sürükleme döndürür */
}
.nb-canvas.nb-grabbing { cursor: grabbing; }
.tour-hint {
  position: absolute;
  left: var(--gutter);
  bottom: 1.15rem;
  padding: 0.38em 0.9em;
  border: 1px solid rgba(246, 241, 231, 0.2);
  border-radius: 999px;
  background: rgba(31, 36, 48, 0.55);
  font-size: 0.7rem;
  font-weight: 520;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none; /* sürüklemeyi engellemesin */
}
.nb-btn {
  position: absolute;
  right: var(--gutter);
  bottom: 1.15rem;
  padding: 0.38em 1.05em;
  border: 1px solid rgba(246, 241, 231, 0.35);
  border-radius: 999px;
  background: rgba(31, 36, 48, 0.65);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  cursor: pointer;
}
.nb-btn:hover { border-color: var(--amber-hi); color: var(--amber-hi); }
/* Zoom düğmeleri — sahnenin sağında, Tam ekran pilinin üstünde dikey küme */
.nb-zoom {
  position: absolute;
  right: var(--gutter);
  bottom: 3.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.nb-zoom-btn {
  width: 2.75rem;  /* 44px — dokunmatikte tekerleksiz tek zoom yolu bu düğmeler,
                      WCAG hedef boyutunun altına inmesin */
  height: 2.75rem;
  border: 1px solid rgba(246, 241, 231, 0.35);
  border-radius: 50%;
  background: rgba(31, 36, 48, 0.65);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--bg);
  cursor: pointer;
  touch-action: none; /* basılı tutunca tekrar: parmak basılıyken sayfa kaymasın */
}
.nb-zoom-btn:hover { border-color: var(--amber-hi); color: var(--amber-hi); }
/* Ctrl'siz tekerlek ipucu — salt görsel katman, 1.5 sn görünür kalır */
.nb-wheel-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2 * var(--gutter));
  padding: 0.55em 1.1em;
  border: 1px solid rgba(246, 241, 231, 0.25);
  border-radius: 999px;
  background: rgba(26, 31, 42, 0.85);
  font-size: 0.78rem;
  font-weight: 550;
  text-align: center;
  color: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nb-wheel-tip.is-on { opacity: 1; }
.nb-close-btn { display: none; top: 1.15rem; bottom: auto; }
.tour-band.is-fs .nb-fs-btn { display: none; }
.tour-band.is-fs .nb-close-btn { display: block; }
.tour-band:fullscreen { height: 100%; }
/* Tam ekranda sahne kalan alanı doldurur (dar düzendeki sabit yükseklik kalkar) */
.tour-band.is-fs .nb-stage { height: auto; flex: 1 1 auto; min-height: 0; }
/* Fullscreen API yoksa: sabit konumlu tam ekran katmanı */
.tour-band.is-fs-fallback {
  position: fixed;
  inset: 0;
  z-index: 300; /* yapışkan menü (100) ve skip (200) üstünde */
  height: auto;
  margin: 0;
}
html.nb-kilit { overflow: hidden; }

/* Daire seçim paneli — sunucudan (DB) basılır; ≥1000px sağda dikey sütun */
.nb-panel {
  flex: 0 0 15.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.15rem 1.15rem 0.9rem;
  border-left: 1px solid rgba(246, 241, 231, 0.12);
  background: rgba(26, 31, 42, 0.62);
  overflow-y: auto;
}
.nb-panel-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-hi);
}
.nb-floor + .nb-floor { margin-top: 0.7rem; }
.nb-floor-h {
  margin: 0 0 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft-3);
}
.nb-floor-row { display: flex; flex-direction: column; gap: 0.4rem; }
/* Dikey panelde kart tek satır (ad solda, kat·kapasite sağda): 11 kart
   580px banda kaydırmasız sığar — Üst kat grubu ilk bakışta görünür. */
.nb-unit-btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(246, 241, 231, 0.18);
  border-radius: 8px;
  background: rgba(31, 36, 48, 0.55);
  font: inherit;
  text-align: left;
  color: var(--bg);
  cursor: pointer;
}
.nb-unit-btn[disabled] { opacity: 0.55; cursor: default; } /* JS yok: hareketsiz */
.nb-unit-btn:hover:not([disabled]) { border-color: var(--amber-hi); }
.nb-unit-btn[aria-pressed="true"] {
  border-color: var(--amber-hi);
  background: rgba(217, 160, 84, 0.16);
}
.nb-unit-btn[aria-pressed="true"] .nb-u-name { color: var(--amber-hi); }
.nb-u-name { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.nb-u-meta { font-size: 0.72rem; line-height: 1.4; color: var(--ink-soft); }

/* Bilgi çipi — seçili dairenin adı/kat/kapasite/açıklaması (DB'den) */
.nb-chip {
  position: absolute;
  left: var(--gutter);
  bottom: 1.15rem;
  max-width: min(21rem, calc(100% - 2 * var(--gutter)));
  padding: 0.8rem 1rem 0.75rem;
  border: 1px solid rgba(246, 241, 231, 0.22);
  border-radius: 10px;
  background: rgba(26, 31, 42, 0.88);
  color: var(--bg);
}
.nb-chip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.nb-chip-name { font-size: 0.95rem; font-weight: 600; }
.nb-chip-meta { font-size: 0.72rem; color: var(--ink-soft); }
.nb-chip-desc { margin: 0.25rem 0 0.5rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); }
.nb-chip-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--amber-hi);
  text-decoration: none;
}
.nb-chip-link:hover { text-decoration: underline; }
.nb-chip-link .arr { display: inline-block; }
/* Seçim varken ipucu pili gizlenir — yerini çip alır */
.tour-band.nb-has-sel .tour-hint { display: none; }

/* ---------- Konum ---------- */
.loc { padding-block: var(--sec-pad) 0; }
.loc-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}
.loc-head-main { grid-column: 1 / 7; }
.loc-lead { grid-column: 7 / 13; margin-top: 0; align-self: end; max-width: 44ch; }
.loc-pois {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.loc-pois li {
  display: grid;
  gap: 0.35rem;
  padding-top: 1.15rem;
}
.loc-pois strong {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  order: -1;
}
.loc-pois .poi-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
/* Tam genişlik kroki bandı — Göreme merkezi, peribacaları, işaretli ev */
.loc-map-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  height: clamp(340px, 40vw, 520px);
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: #F1EADB;
}
.loc-map-band > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-note,
.map-zoom-hint {
  position: absolute;
  left: var(--gutter);
  bottom: 1.15rem;
  padding: 0.42em 1em;
  background: rgba(246, 241, 231, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tag-brown);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
/* Gerçek harita (MapLibre) — kroki üstünde, 'load' olayında yumuşak geçişle görünür.
   JS yoksa ya da harita yüklenemezse kutu gizli kalır, kroki fallback görünür. */
.loc-map-band .map-live-box {
  /* .loc-map-band ataları: MapLibre'nin sonradan eklenen .maplibregl-map
     (position:relative) sınıfına karşı özgüllük üstünlüğü */
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.loc-map-band.map-live .map-live-box {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}
.loc-map-band.map-live .map-note { opacity: 0; visibility: hidden; }
/* Tıkla-yakınlaş ipucu: yalnız canlı haritada, ilk tıklamaya/dokunmaya dek */
.map-zoom-hint {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  z-index: 3; /* MapLibre kontrol katmanları z-index:2 — ipucu üstte kalsın */
  opacity: 0;
  visibility: hidden;
}
.loc-map-band.map-live .map-zoom-hint {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}
.loc-map-band.map-live.map-serbest .map-zoom-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
/* Dokunmatikte ipucu hiç gösterilmez: 'tıklayın' talimatı dokunuşta kilit
   açmaz (tasarım gereği — tek parmak sayfayı kaydırır); iki parmak yönergesini
   MapLibre'nin kendi cooperativeGestures katmanı verir */
@media (hover: none) {
  .map-zoom-hint { display: none; }
}
.map-pin { width: 36px; height: 46px; cursor: pointer; }
.map-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(31, 36, 48, 0.3)); }
.loc-map-band .maplibregl-popup-content {
  padding: 0.55rem 1.9rem 0.55rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(31, 36, 48, 0.18);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* Kontrol butonlarında amber odak halkası (MapLibre'nin mavi varsayılanı yerine) */
.loc-map-band .maplibregl-ctrl button:focus,
.loc-map-band .maplibregl-ctrl button:focus:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber);
}
.loc-map-band .maplibregl-ctrl button:focus:not(:focus-visible) { box-shadow: none; }

/* ---------- Footer ---------- */
.foot {
  background: var(--ink);
  color: var(--bg);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.foot .wordmark { color: var(--bg); }
.foot .wordmark em { color: var(--amber-hi); }
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 3rem clamp(2rem, 5vw, 5rem);
}
.foot-brand p {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft-2);
  max-width: 32ch;
}
.foot-contact {
  margin-top: 1.1rem;
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 32ch;
}
.foot-contact a {
  color: var(--ink-soft-2);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: color 0.15s ease;
}
.foot-contact a:hover { color: var(--amber-hi); }
.foot-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.foot-col h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft-2);
  max-width: none;
  margin-bottom: 1.1rem;
}
.foot-col li { margin-bottom: 0.6rem; font-size: 0.92rem; }
.foot-col a {
  color: var(--bg);
  text-decoration: none;
  transition: color 0.15s ease;
}
.foot-col a:hover { color: var(--amber-hi); }
/* Footer dil listesi: 9 dil → kompakt 2 sütun; geçerli dil amber + kalın */
.foot-langs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.4rem;
}
.foot-langs li { margin-bottom: 0; }
.foot-current { color: var(--amber-hi); font-weight: 620; }
.foot-soon { color: var(--ink-soft-2); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 241, 231, 0.14);
  font-size: 0.82rem;
  color: var(--ink-soft-2);
}

/* ---------- Kaydırma animasyonu (progressive enhancement) ---------- */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .link-arrow .arr, .avail-cta .btn .arr, .room .ph-frame, .skip, .wordmark { transition: none; }
  .loc-map-band .map-live-box, .loc-map-band.map-live .map-live-box, .map-note,
  .loc-map-band.map-live .map-zoom-hint, .loc-map-band.map-live.map-serbest .map-zoom-hint { transition: none; }
  .btn:active { transform: none; }
  .room-link:hover .ph-frame { transform: none; }
  .link-arrow:hover .arr, .avail-cta .btn:hover .arr { translate: 0; }
}

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1023px) {
  .story-text { grid-column: 1 / 8; }
  /* Tablet: kemer dev boş plakaya dönüşmesin — sınırla ve sağ kenardan taşır */
  .story-figure {
    grid-column: 6 / 13;
    justify-self: end;
    width: 100%;
    max-width: 24rem;
    margin-top: 1.5rem;
    margin-right: calc(-1 * min(var(--gutter), 1.75rem));
  }
}
@media (max-width: 999px) {
  /* Daire paneli canvas altına yatay kaydırılabilir şerit olur (scroll-snap).
     Sayfanın dikey kaydırması bozulmaz: yalnız şeridin kendi overflow-x'i kayar. */
  .tour-band { flex-direction: column; height: auto; }
  .nb-stage { height: clamp(340px, 52vw, 480px); flex: 0 0 auto; }
  .nb-panel {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid rgba(246, 241, 231, 0.12);
    overflow-y: visible;
    padding-bottom: 1rem;
  }
  .nb-panel-groups {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  .nb-floor { flex: 0 0 auto; scroll-snap-align: start; }
  .nb-floor + .nb-floor { margin-top: 0; }
  .nb-floor-row { flex-direction: row; gap: 0.5rem; }
  /* Yatay şeritte kart iki satıra döner (ad üstte, kat·kapasite altta) */
  .nb-unit-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: auto;
    min-width: 8.5rem;
    padding: 0.5rem 0.7rem;
  }
}
@media (max-width: 959px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .avail-text { grid-column: 1 / 13; }
  .avail-cal { grid-column: 1 / 13; max-width: 34rem; }
  .tour-head-main, .tour-body { grid-column: 1 / 13; }
  .loc-head-main { grid-column: 1 / 13; }
  .loc-lead { grid-column: 1 / 13; }
}
@media (max-width: 719px) {
  html { scroll-padding-top: 8.5rem; }
  .nav-in { padding-block: 0.85rem; }
  .hero { min-height: 0; }
  .hero-in { padding-top: 3rem; }
  .hero-scene { position: relative; inset: auto; order: 3; height: 300px; margin-top: -3.5rem; }
  .hero-veil {
    background: linear-gradient(180deg,
      var(--bg) 0%, rgba(246, 241, 231, 0.6) 30%, rgba(246, 241, 231, 0) 60%);
  }
  .hero-cta { margin-top: 1.9rem; gap: 1.4rem 1.9rem; }
  /* Mobilde birincil butonlar daha ferah: bol dolgu + biraz büyük yazı */
  .btn { padding: 1.15em 2.15em; font-size: 1.02rem; }
  .hero-foot { margin-top: 0; padding-top: 0; }
  .hero-meta {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
  }
  /* Mobilde stat'lar dikey yığılır (etiket üstte, değer altta) — sağa yaslı
     değer taşma riski olmadan; masaüstündeki stat diliyle aynı. */
  .hero-meta li { display: grid; gap: 0.15rem; }
  .hero-meta span { text-align: left; }
  .story { padding-top: 4rem; }
  .story-text { grid-column: 1 / 13; padding-top: 0; }
  .story-figure {
    grid-column: 1 / 13;
    justify-self: stretch;
    max-width: none;
    margin: 1rem 0 0;
  }
  .story-ghost { font-size: 6rem; bottom: -0.12em; }
  .rooms-grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .room .ph-frame, .room:nth-child(2) .ph-frame { aspect-ratio: 3 / 3.4; }
  .cal-card { padding: 1.1rem 0.9rem; }
  .day { height: 2.1rem; font-size: 0.8rem; border-radius: 7px; }
  .avail-cta { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .avail-cta .btn { width: 100%; justify-content: center; }
  .loc-pois { grid-template-columns: 1fr; }
  .loc-pois li { padding-block: 1rem; border-bottom: 1px solid var(--line-soft); }
  .loc-map-band { height: clamp(300px, 72vw, 400px); }
  /* Dar ekranda MapLibre kaynak yazısı sol altta iki satıra yayılıyor —
     ipucu pilini onun üstüne kaldır */
  .map-zoom-hint { bottom: 4.2rem; }
  .nb-stage { height: clamp(300px, 88vw, 420px); }
  /* Dar ekranda çip, alt köşedeki Tam ekran piliyle çakışmasın — üstüne çıkar.
     Sağda da sağ kenardaki zoom sütununa (gutter + 2.75rem düğme + nefes payı)
     girmesin: köşesi düğmelerin altına uzanıyordu */
  .nb-chip { bottom: 3.35rem; max-width: min(21rem, calc(100% - var(--gutter) - 4.6rem)); }
  /* Zoom kümesi dar ekranda sağda dikey ortaya alınır — geniş çiple çakışmasın */
  .nb-zoom { bottom: auto; top: 50%; transform: translateY(-50%); }
  /* Uzayan ipucu (tekerlek/çift tıklama) dar ekranda iki satıra kırılıp
     'Tam ekran' pilinin üstüne biniyor; dokunmatikte tekerlek önerisi de
     anlamsız — gizle (zoom +/− düğmeleri görevi üstlenir) */
  .tour-hint { display: none; }
  /* Kroki 'slice' kırpması dar ekranda sağ etiketi ortadan keser — gizle */
  .loc-map-band .map-lbl-museum { display: none; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  /* 43.2px tabanda 'kayada bir sabah.' konteynere sığmayıp 3 dengesiz satıra
     kırılıyor; 2.5rem'de 2 dengeli satır. */
  .hero h1 { font-size: 2.5rem; }
}

/* ============================================================
   Alt sayfalar — /daireler listesi, /daireler/:slug detayı, 404
   Ana sayfanın kalıplarını (sec-label, .room kartı, .avail bandı,
   .cal-card takvimi) yeniden kullanır; buradakiler yalnız ekler.
   ============================================================ */
.page-head { padding-block: clamp(2.75rem, 6vw, 4.5rem) 0; }
.page-h {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  letter-spacing: -0.016em;
  line-height: 1.06;
  max-width: 18ch;
}
.page-head .lead { max-width: 52ch; }

/* Liste: kat grupları */
.units-list { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sec-pad); }
.units-floor + .units-floor { margin-top: clamp(3rem, 6vw, 4.5rem); }
.units-floor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.units-floor-h { font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: -0.01em; }
.units-floor-count {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.units-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 959px) { .units-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 719px) { .units-grid { grid-template-columns: 1fr; } }
/* 4 daireli kat = tek sıra (3+1'de 4. kart dev boşlukla yalnız düşüyordu);
   960–1079 arasında 4 sütun darlaşır → 2x2'ye iner (yalnız kart kalmaz) */
@media (min-width: 1080px) { .units-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) and (max-width: 1079px) { .units-grid--4 { grid-template-columns: repeat(2, 1fr); } }
.room-more {
  display: inline-block;
  margin: 0.95rem 0 0 1.05rem;
  font-size: 0.85rem;
  font-weight: 560;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(143, 93, 20, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}
.room-more .arr { display: inline-block; transition: translate 0.2s ease; }
.room-link:hover .room-more { text-decoration-color: var(--amber); }
.room-link:hover .room-more .arr { translate: 0.2em 0; }

/* Detay: kırıntı + başlık bloğu + geniş görsel */
.unit-page { padding-block: clamp(2.75rem, 6vw, 4.5rem) 0; }
.crumbs { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.link-arrow:hover .arr-back { translate: -0.2em 0; } /* geri oku sola kayar */
.unit-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.unit-tags li {
  padding: 0.32em 0.95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 520;
  letter-spacing: 0.04em;
}
.unit-desc { margin-top: 1.35rem; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.unit-hero { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.ph-frame--wide { aspect-ratio: 16 / 7; }
@media (max-width: 719px) { .ph-frame--wide { aspect-ratio: 4 / 3.4; } }
.unit-avail { margin-top: var(--sec-pad); }

/* Detay: ay gezinmesi + bugün işareti */
.unit-cal .cal-head { align-items: center; }
.cal-nav { display: inline-flex; gap: 0.45rem; }
.cal-nav a,
.cal-nav .cal-nav-off {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  color: var(--amber);
  transition: border-color 0.15s ease;
}
.cal-nav a:hover { border-color: var(--amber); }
.cal-nav .cal-nav-off { color: var(--muted); opacity: 0.4; }
/* Bugün: kart zemininden ayrılan amber halka — dolu (amber) günde de okunur */
.day-today { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--amber-mid); }
/* Lejantta bugün halkasının karşılığı (dawn zemininde 3.1:1 — WCAG 1.4.11) */
.sw-today { background: var(--card); border: 1.5px solid var(--amber-mid); }

/* Detay: önceki/sonraki daire — mikro etiket + ad (site etiket dili: 0.72rem/0.14em) */
.unit-pn {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.unit-pn-item { display: grid; gap: 0.4rem; justify-items: start; }
.unit-pn-item--next { justify-items: end; text-align: right; }
.unit-pn-label {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 404 — hayalet rakam: ana sayfadaki story-ghost kalıbının sağ-alt eşi */
.notfound {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.notfound .wrap { position: relative; z-index: 1; }
.notfound-ghost {
  position: absolute;
  bottom: -0.14em;
  right: -0.02em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(6.5rem, 18vw, 14rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(31, 36, 48, 0.04);
  pointer-events: none;
  user-select: none;
}
.notfound .hero-cta { margin-top: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  .room-more .arr, .cal-nav a { transition: none; }
  .room-link:hover .room-more .arr { translate: 0; }
  .link-arrow:hover .arr-back { translate: 0; }
}

/* ---------- Müsaitlik: arama formu + ay genel görünümü + sonuç sayfası ---------- */

/* Tarih aralığı formu (ana sayfa bandı + /musaitlik) */
.avail-form { margin-top: 1.9rem; }
.avail-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.9rem 1rem;
}
.avail-field { display: grid; gap: 0.4rem; }
.avail-field label {
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.avail-field input[type="date"] {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.7em 0.85em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  min-width: 9.5rem;
  color-scheme: light; /* takvim açılırken sistem koyu temada da bone kartla uyum */
}
.avail-field input[type="date"]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-color: var(--amber);
}
.avail-submit { white-space: nowrap; }
.avail-submit .arr { display: inline-block; transition: translate 0.2s ease; }
.avail-submit:hover .arr { translate: 0.2em 0; }
.avail-form-error {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #8A2F1E; /* uyarı kızılı — bone/dawn üstünde ≥5:1 */
}

/* Ay genel görünümü: gün + küçük boş-daire rozeti (iki satırlı hücre) */
.day-ov { height: 2.75rem; line-height: 1; }
.day-num { font-size: 0.82rem; font-weight: 470; }
.day-free {
  margin-top: 0.14rem;
  font-size: 0.6rem;
  font-weight: 580;
  letter-spacing: 0.02em;
  color: var(--amber);
}
.day-ov.day-full .day-num { color: var(--bg); }
.day-ov.day-full .day-free { color: var(--bg); opacity: 0.85; }
/* Geçmiş günler (bu ayın başı, rezerve edilemez) soluk — göz seçilebilir günlere gitsin.
   Bugün halkası her zaman kazanır (bugün asla geçmiş değil). */
.day-ov.day-past .day-num { color: var(--muted); }
.day-ov.day-past .day-free { opacity: 0.4; }

/* /musaitlik sonuç sayfası */
.avail-page { padding-bottom: 0; }
.avail-page-head .avail-form { margin-top: 2rem; }
.avail-results { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sec-pad); }
.avail-results-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.avail-none { max-width: 32ch; }
.avail-busy-note {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* Sonuç kartı: bütün kartı saran tek link yerine iki ayrı eylem linki */
.room--result .room-media { display: block; }
.room--result .room-media .ph-frame { transition: transform 0.25s ease; }
.room--result .room-media:hover .ph-frame { transform: translateY(-6px); }
.room-title-link { color: inherit; text-decoration: none; }
.room-title-link:hover { color: var(--amber); }
.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  align-items: baseline;
  margin-top: 0.9rem;
}
.room-actions .room-more { margin: 0; }
.room-airbnb {
  font-size: 0.82rem;
  font-weight: 540;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(143, 93, 20, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.room-airbnb .arr { display: inline-block; transition: translate 0.2s ease; }
.room-airbnb:hover { text-decoration-color: var(--amber); }
.room-airbnb:hover .arr { translate: 0.2em 0; }

@media (max-width: 719px) {
  .avail-field { width: 100%; }
  .avail-field input[type="date"] { width: 100%; }
  .avail-submit { width: 100%; justify-content: center; }
  .day-ov { height: 2.5rem; }
  .day-num { font-size: 0.74rem; }
  .day-free { font-size: 0.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .avail-submit .arr, .room-airbnb .arr,
  .room--result .room-media .ph-frame { transition: none; }
  .avail-submit:hover .arr, .room-airbnb:hover .arr { translate: 0; }
  .room--result .room-media:hover .ph-frame { transform: none; }
}