/*
  layout.css — nav, panel sistemi (hero/split/cta), seam ayracı, footer.
  Kart YOK (bkz. docs/DESIGN_SYSTEM.md — "Ferah Panel"). Yön taşıyan
  fiziksel özellikler (left/right) yerine mantıksal (inset-inline-*)
  kullanılır ki dir="rtl" otomatik çevirsin (bkz. RTL_CHECKLIST.md).
  Sayfa kendi <style> bloğunda --accent/--accent-deep/--accent-light'ı
  --resto-accent* değerlerine eşler.
*/

/* ---------- Nav ----------
   İki durumu var:
   · saydam  — fotoğraflı hero'nun üstünde, beyaz logo/metin
   · yerleşik (.is-scrolled) — kırık beyaz zemin, koyu logo/metin

   Mobilde marka ADI DEĞİL sadece logo görünür: "Moss Lounge The Bosphorus"
   metni 390px'lik bir ekranda burger ve dil seçiciyle aynı satıra
   sığmıyor, `nowrap` yüzünden hepsi üst üste biniyordu (kullanıcı geri
   bildirimi: "nav bar çok karışık, birbirine girmiş"). Logo bu sorunu
   kaynağında çözüyor — sabit ve dar bir genişlik. */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-inline: var(--sp-4);
  background: transparent;
  /* `--paper` DEĞİL: koyu temada o koyu bir renk ve saydam nav fotoğrafın
     üstünde okunmaz oluyordu. `--on-photo` temadan bağımsız açık tondur. */
  color: var(--on-photo);
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease,
              transform 0.3s ease;
}

.nav.is-scrolled {
  /* Kırçıl kadife kırmızı — İKİ temada da nav'ın kimliği bu (kullanıcı
     kararı). Üç katman: iki çapraz, çok düşük opaklıklı çizgi örgüsü
     "kumaş kırçılı" hissi verir (uzaktan düz renk, yakından doku); altta
     kadife dikey gradyan derinlik kurar. Ana kırmızıdan (#8E1526) bilerek
     bir tık KOYU: bar derin durunca butonlar öne çıkar, hiyerarşi doğru
     kurulur. Doz gözle ayarlandı — kırçıl "fark edilen değil hissedilen"
     olmalı; görünmüyorsa .07'ye çıkar, gürültü yaptıysa .03'e in. */
  background:
    repeating-linear-gradient(115deg,
      rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(245deg,
      rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #7A1424 0%, #6E1220 55%, #5C0E1B 100%);
  /* Metin her zaman AÇIK, --ink değil. Alt kenar temaya göre: gündüz koyu
     kırmızı kılçık, gece kadife bordo şerit. */
  color: var(--on-photo);
  box-shadow: 0 1px 0 var(--nav-cizgi, var(--sand)), 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ---------- Marka / logo ---------- */
.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(--nav-h);
}

.nav__logo {
  height: 26px;
  width: auto;
  display: block;
  transition: opacity 0.35s ease;
}

/* Logo HER durumda açık varyant: saydam nav fotoğraf üstünde, yerleşik nav
   ise iki temada da koyu zeminde (gündüz Cartier kırmızısı, gece sıcak
   siyah) — koyu logoya geçilecek bir yüzey kalmadı. Koyu varyant DOM'da
   duruyor ki palet ileride açık bir bara dönerse tek satırla geri gelsin. */
.nav__logo--light { display: block; }
.nav__logo--dark { display: none; }

/* ---------- Bağlantılar ---------- */
.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* Serbest alanı bu marj yutar: linkler + araçlar sağda tek küme olur.
     Mobilde menü `position:fixed` olduğu için marjın bir etkisi yok. */
  margin-inline-start: auto;
}

/* ---------- Araçlar: dil seçici (+ JS'in eklediği tema anahtarı) ----------
   Kasıtlı olarak MENÜNÜN DIŞINDA: mobilde menü çekmeceye dönüşür ve içindeki
   her şey burger açılana kadar görünmezdir. Dil seçici çekmecedeyken siteye
   yanlış dilde gelen kullanıcı onu hiç bulamıyordu — dil, keşfedilmek için
   her zaman görünür olmak zorunda. */
.nav__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  /* CLS rezervi (2026-09-02, ONY): theme.js tema düğmesini (34px) sonradan
     dil seçicinin önüne ekliyor ve kutu büyüyünce soldaki menü kayıyordu
     (ölçümde #navMenu en büyük CLS kaynağıydı). Nihai genişlik baştan
     ayrılır (34 + 16 boşluk + 77 dil seçici = 127; masaüstü ve telefonda
     aynı ölçüldü). Düğme gelene dek dil seçici sağa yaslı nihai yerinde
     bekler, düğme soldaki boşluğa oturur; menü hiç kıpırdamaz. */
  min-inline-size: 127px;
  justify-content: flex-end;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.88rem;
  font-weight: 600;
}

.nav__links a {
  padding-block: 4px;
  border-block-end: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible,
.nav__links a[aria-current="page"] {
  border-block-end-color: currentColor;
}

/* ---------- Tema anahtarı ----------
   Dil seçicinin hemen yanında durur; ikisi de "sayfayı nasıl görmek
   istiyorum" ayarı. Görsel ağırlığı dil butonundan DAHA AZ: tek ikon,
   çerçevesiz — tema bir kerelik bir tercih, dil ise sürekli görünmesi
   gereken bir bilgi. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* Mobilde de barın içinde kompakt ikon olarak kalır (çekmeceye taşınmaz):
   dil seçiciyle birlikte .nav__tools içinde yaşar ve bar her iki
   kırılımda da aynı düzeni kullanır. */

/* ---------- Dil seçici (açılır) ----------
   Üç dil kodu yan yana dururken hem yer kaplıyor hem de "TR EN AR"
   dizisi mobilde tıklanamayacak kadar küçük hedefler üretiyordu. Artık
   tek bir buton açılır bir liste gösteriyor ve seçenekler dilin KENDİ
   adıyla yazılı (Türkçe / English / العربية) — kullanıcı kendi dilini
   tanıdığı biçimde görür. */
.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-switch__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.lang-switch__btn:hover,
.lang-switch__btn:focus-visible,
.lang-switch__btn[aria-expanded="true"] {
  opacity: 1;
}

.lang-switch__globe {
  width: 15px;
  height: 15px;
  flex: none;
}

.lang-switch__chevron {
  width: 11px;
  height: 11px;
  flex: none;
  transition: transform 0.25s ease;
}

.lang-switch__btn[aria-expanded="true"] .lang-switch__chevron {
  transform: rotate(180deg);
}

.lang-switch__list {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 160px;
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 6px;
  z-index: 5;
}

.lang-switch__list[hidden] {
  display: none;
}

.lang-switch__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease;
}

.lang-switch__list a:hover,
.lang-switch__list a:focus-visible {
  background: var(--stone);
}

/* Seçili dil — işaretle, ama tıklanabilirliğini kaldırma (kullanıcı
   yanlışlıkla açtıysa aynı sayfada kalmayı seçebilmeli) */
.lang-switch__list a[aria-current="true"] {
  color: var(--accent-deep, var(--brass-deep));
}

.lang-switch__list a[aria-current="true"]::after {
  content: "•";
  font-size: 1.1rem;
  line-height: 1;
}

.lang-switch__code {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 700;
}

/* ---------- Burger ---------- */
.nav__burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav__burger-bar {
  position: absolute;
  inset-inline-start: 11px;
  width: 20px;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
}

.nav__burger-bar:nth-child(1) { inset-block-start: 15px; }
.nav__burger-bar:nth-child(2) { inset-block-start: 20.2px; }
.nav__burger-bar:nth-child(3) { inset-block-start: 25.4px; }

/* Açıkken çarpıya dönüşür — ayrı bir "kapat" ikonu göstermeye gerek yok */
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  transform: translateY(5.2px) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  transform: translateY(-5.2px) rotate(-45deg);
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .nav {
    padding-inline: var(--sp-2);
  }

  /* Mobilde nav aşağı kaydırırken çekilir, yukarı kaydırınca veya ekrana
     dokununca geri gelir (bkz. js/nav.js). Küçük ekranda 62px'lik sabit bir
     şerit, içeriğin görünür alanının onda birini sürekli yiyordu.
     Masaüstünde bu kural YOK: orada yer sıkıntısı yok ve fare kullanıcısı
     "nav nereye gitti" sorusunu yaşamamalı. */
  .nav.is-hidden {
    transform: translateY(-100%);
  }

  /* Not: "çekmece açıkken gizleme" kuralı burada CSS ile
     `.nav:has(.nav__menu.is-open)` şeklinde yazılmıştı ve ÇALIŞMADI —
     Chrome, seçici eşleşmediği hâlde (`nav.matches(...)` false döndüğü hâlde)
     kuralı uyguluyor ve `translateY(-100%)`i eziyordu; `:has()` içindeki sınıf
     dinamik olarak değiştiğinde görülen bir stil-geçersizleme hatası.
     Bu koşul artık js/nav.js'te: menü açılırken `showNav()` çağrılıyor ve
     `hideNav()` menü açıkken hiçbir şey yapmıyor. */

  .nav__burger {
    display: block;
  }

  /* Menü artık nav'ın ALTINA açılan tam genişlikte bir panel. Eski sürüm
     `position:fixed` + `max-height:0` ile gizleniyordu ama nav'ın kendi
     satırında kalan dil kodları taşıyor ve linkleri örtüyordu — bu yüzden
     "Anasayfa" tıklanamıyordu. Artık kapalıyken DOM'da görünmez
     (`visibility`), dolayısıyla hiçbir şeyin üstünü kapatamaz. */
  .nav__menu {
    position: fixed;
    inset-block-start: var(--nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2);
    /* Tam opak: `rgba(...,0.98)` + blur ile arkadaki sayfa (özellikle
       pirinç `seam` hairline'ları) menü metinlerinin üstünden geçiyor gibi
       görünüyordu — kullanıcı geri bildirimi: "yazıların üstünde çizgiler". */
    background: var(--paper);
    border-block-end: 1px solid var(--sand);
    box-shadow: 0 12px 28px rgba(44, 42, 38, 0.1);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    /* Konum DEĞİŞTİRMEYEN açılış: çekmece eskiden 8px aşağı kayarak geliyor
       ve 240ms boyunca linkler hareket hâlinde oluyordu. Hızlı dokunan
       kullanıcı gördüğü yere basıyor ama parmak değdiğinde öğe artık orada
       değil — bir üstteki ya da alttaki link tetikleniyordu (kullanıcı
       geri bildirimi: "bazen alttakine tıklıyor bazen üsttekine").
       Dokunma hedefleri sabit durmalı; açılış artık sadece solma. */
    transition: opacity 0.2s ease, visibility 0.2s;
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 1rem;
  }

  /* 52px'lik dokunma hedefi — mobilde 44px asgari önerilir, linkler
     arasında yanlış tıklama olmasın diye biraz üstünde tutuldu */
  /* Çizgiler kaldırıldı: 4 linklik kısa bir listede satır aralığı ayrımı
     zaten veriyordu. Masaüstündeki temel kural her linke saydam bir
     `border-block-end` koyar ve AKTİF sayfada onu `currentColor` yapar —
     çekmecede bu, zaten yeşile boyanmış linkin altında başıboş bir çizgi
     olarak görünüyordu (kullanıcı geri bildirimi: "yazıların üstünde
     çizgiler var"). Mobilde aktif durumu SADECE renk taşır.
     Dokunma hedefi 52px olarak korundu. */
  .nav__links a,
  .nav__links a:hover,
  .nav__links a:focus-visible,
  .nav__links a[aria-current="page"] {
    /* `display: block` ŞART: `<a>` satır içi bir öğedir ve satır içi
       öğelerde dikey dolgu yerleşimi etkilemez — kutu görsel olarak büyür
       ama komşusunun alanına taşar. Ölçtüğümüzde linkler 52px yüksekliğinde
       ama yalnızca 32px aralıklıydı, yani 20px ÜST ÜSTE biniyorlardı.
       Çakışan bölgeye denk gelen dokunuş üsttekini ya da alttakini
       tetikliyordu (kullanıcı geri bildirimi: "bazen alttakine tıklıyor
       bazen üsttekine"). Blok yapınca dolgu gerçek yükseklik olur. */
    display: block;
    padding: 16px var(--sp-2);
    color: var(--ink);
    border-block-end-color: transparent;
    border-radius: var(--radius);
    transition: background-color 0.12s ease;
  }

  .nav__links li + li {
    margin-block-start: 6px;
  }

  /* Dokunma anında hangi satırın seçildiğini GÖSTER: navigasyon başlayana
     kadarki sürede kullanıcı doğru yere bastığını görsün. */
  .nav__links a:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .nav__links a[aria-current="page"] {
    color: var(--accent-deep, var(--brass-deep));
  }

  /* Dil seçici artık çekmecede DEĞİL, barın kendisinde (bkz. .nav__tools):
     siteye yanlış dilde gelen kullanıcı dili burger'ı açmadan görmeli.
     Masaüstündeki kompakt hap biçimi ve yüzen liste burada da geçerli —
     ayrıca bir mobil biçim yok. Dokunma hedefi hatırı sayılır kalsın diye
     dikey dolgu bir tık artırılır. */
  .lang-switch__btn {
    padding-block: 9px;
  }
}

/* ---------- Çekilmiş nav'ın izi: 3 çizgi ----------
   Nav yukarı kaydığında köşede kalan küçük burger (bkz. js/nav.js → peek).
   Sadece kaydırma payı olmayan sayfalarda görünür; kaydırılabilir sayfada
   yukarı kaydırmak zaten nav'ı geri getirir, orada ikinci bir düğme
   gereksiz kalabalık olurdu.

   Nav'ın kendisiyle aynı anda hareket eder ama TERS yönde okunur: nav
   yukarı çekilirken bu belirir, nav inerken kaybolur. Böylece ikisi tek bir
   öğenin iki hâli gibi durur, iki ayrı kontrol gibi değil.

   Masaüstünde hiç yok — orada nav zaten gizlenmiyor. */
.nav__peek {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-end: var(--sp-2);
  z-index: 49;                  /* nav'ın (50) hemen altında */
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transform: scale(0.82);
  /* Görünmezken tıklanamaz olmalı: aksi hâlde sağ üstte 44px'lik görünmez
     bir düğme duruyor ve altındaki şeye basmayı engelliyor. */
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Görünür hâl BİLEREK medya sorgusunun DIŞINDA. Önce `@media (max-width:860px)`
   içindeydi ve sınıf eklendiği hâlde uygulanmıyordu; kuralın çalışması için
   iki koşulun birden tutması gerekiyordu (sınıf + medya). Görünürlüğü tek
   koşula indirdik: sınıf. Medya sorgusu artık SADECE `display`i yönetiyor,
   yani masaüstünde düğme hiç var olmuyor ve `is-visible` orada bir şey
   değiştiremiyor. */
.nav__peek.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.nav__peek span {
  position: absolute;
  inset-inline-start: 13px;
  width: 18px;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
}

.nav__peek span:nth-child(1) { inset-block-start: 16px; }
.nav__peek span:nth-child(2) { inset-block-start: 21px; }
.nav__peek span:nth-child(3) { inset-block-start: 26px; }

@media (max-width: 860px) {
  .nav__peek {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__peek,
  .nav__peek.is-visible {
    transform: none;
  }
}

/* ---------- Panels — tam ekrana yakın, kart YOK ---------- */
.panel {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--section-y) var(--sp-6);
  position: relative;
}

/* İki katman: üstte marka gradyanının yarı saydam hali (metin kontrastı
   için — sabit rgb() değerleri, token'ların yaklaşık karşılığı, çünkü
   CSS custom property'ler doğrudan rgba() içine gömülemiyor), altta
   gerçek fotoğraf (galeri görseliyle PAYLAŞILIYOR — ayrı bir dosya YOK). */
.panel--hero {
  /* Hero her iki temada da AYNI fotoğrafın üstünde durur, dolayısıyla metni
     temayla değişmemeli. `--paper` yazılıydı ve koyu temada başlık siyaha
     dönüp okunmaz oluyordu (kullanıcı geri bildirimi). */
  color: var(--on-photo);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-block-end: var(--sp-12);
  /* Yaklaşan fotoğraf kenarlardan taşmasın. */
  overflow: hidden;
}

/* ---------- Fotoğraf katmanı ----------
   Zemin artık bölümün kendi `background`ı DEĞİL, ayrı bir katman. Sebebi
   hareket: çok yavaş bir yaklaşma `transform: scale()` ile yapılıyor.
   `background-size`ı animasyonlamak her karede yeniden boyama demekti
   (bkz. docs/ANIMATION_STANDARDS.md → Performans); transform ise
   compositor'da çalışır.

   Üç katman: en üstte metnin oturduğu alta sabitlenmiş bir PERDE, altında
   marka gradyanı, en altta fotoğraf. Perde fotoğrafa değil KONUMA bağlı:
   marka gradyanı tek başına koyu bir fotoğrafa göre ayarlanmıştı ve aydınlık
   bir fotoğraf konduğunda üst etiket okunmaz oluyordu. Perde, hangi fotoğraf
   gelirse gelsin metnin kontrastını garantiler.

   İki bildirim: ilki JPEG (her tarayıcı anlar), ikincisi AVIF'i `image-set`
   ile önerir. `image-set` desteklemeyen tarayıcı ikinci satırı GÖRMEZDEN
   GELİR ve JPEG'de kalır — `<picture>` fallback'inin CSS karşılığı budur.
   Hero bir CSS zemini olduğu için `<picture>` kullanılamıyor. */
.panel--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(to top, rgba(18, 17, 15, 0.78) 0%, rgba(18, 17, 15, 0.34) 32%, rgba(18, 17, 15, 0) 58%), linear-gradient(165deg, rgba(28, 30, 27, 0.62) 0%, rgba(44, 42, 38, 0.55) 45%, rgba(70, 97, 79, 0.72) 130%), url('/demo/moss/images/gallery/ikram-nargile-lounge-4.jpg');
  background-image:
    linear-gradient(to top, rgba(18, 17, 15, 0.78) 0%, rgba(18, 17, 15, 0.34) 32%, rgba(18, 17, 15, 0) 58%),
    linear-gradient(165deg, rgba(28, 30, 27, 0.62) 0%, rgba(44, 42, 38, 0.55) 45%, rgba(70, 97, 79, 0.72) 130%),
    image-set(url('/demo/moss/images/gallery/ikram-nargile-lounge-4.avif') type('image/avif'),
              url('/demo/moss/images/gallery/ikram-nargile-lounge-4.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Tek yönlü ve çok yavaş: döngü YOK. Başa saran bir yaklaşma her turda
     sıçrar ve sonsuz ortam hareketi, azaltılmış hareket tercihinin asıl
     hedefidir. Ölçek hep 1'in üstünde kalır, yoksa kenarlarda boşluk açılır. */
  animation: heroYaklas 26s cubic-bezier(0.2, 0.5, 0.3, 1) both;
}

/* ---------- Video hero (opsiyonel) ----------
   Bu sınıf yalnızca yapılandırmasında video olan sürümlerde eklenir
   (bkz. tools/markala.mjs). Sınıf yoksa aşağıdaki kuralların hiçbiri
   eşleşmez, fotoğraflı hero olduğu gibi çalışır.

   Katman sırası aşağıdan yukarı: bölümün kendi zemini (poster) → video →
   gradyan perde → metin. Poster zemin olarak duruyor ki video yüklenene
   kadar ve azaltılmış hareket tercihinde ekran boş kalmasın. */
.panel--hero-video .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.panel--hero-video::before {
  z-index: 1;
  /* Fotoğraf katmanı yok; poster bölümün kendi zemininde. Yaklaşma da yok,
     video zaten hareketli. */
  background-image: linear-gradient(to top, rgba(18, 17, 15, 0.78) 0%, rgba(18, 17, 15, 0.34) 32%, rgba(18, 17, 15, 0) 58%), linear-gradient(165deg, rgba(28, 30, 27, 0.62) 0%, rgba(44, 42, 38, 0.55) 45%, rgba(70, 97, 79, 0.72) 130%);
  animation: none;
}

.panel--hero-video > *:not(.hero-video) {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  /* Video gizlenir, altındaki poster görünür kalır. */
  .panel--hero-video .hero-video { display: none; }
}

/* Video hero'nun poster karesi bölümün kendi zemini: video yüklenene kadar
   ve azaltılmış hareket tercihinde görünen kare budur. */
.panel--hero-video {
  background-image: url('/demo/moss/images/gallery/hero-poster.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Metin fotoğrafın üstünde kalsın. */
.panel--hero > * {
  position: relative;
  z-index: 1;
}

@keyframes heroYaklas {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}

/* ---------- Açılış hamlesi ----------
   Dört öğe 80ms arayla yerleşir; aralık kasıtlı olarak dar, böylece kademe
   değil TEK bir hareket gibi okunur. */
.panel--hero > .eyebrow,
.panel--hero > h1,
.panel--hero > p,
.panel--hero > .hero-cta {
  animation: heroYerlesir 0.72s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.panel--hero > h1 { animation-delay: 0.08s; }
.panel--hero > p { animation-delay: 0.16s; }
.panel--hero > .hero-cta { animation-delay: 0.24s; }

@keyframes heroYerlesir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Yaklaşma tamamen kalkar; metin yer değiştirmeden, sadece belirir. */
  .panel--hero::before { animation: none; }

  .panel--hero > .eyebrow,
  .panel--hero > h1,
  .panel--hero > p,
  .panel--hero > .hero-cta {
    animation: heroBelirir 0.25s ease both;
    animation-delay: 0s;
  }
}

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

/* Rozet KENDİ satırında, konum bilgisinin ÜSTÜNDE: yan yana dururken
   "SÜLEYMANİYE, İSTANBUL · ŞU AN AÇIK · 02:00" tek bir uzun şeride
   dönüşüyor ve en değerli bilgi (açık mı) kalabalığın içinde kayboluyordu. */
.panel--hero .eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* KIRMIZI DEĞİL, krem: doygun kırmızı video/foto karmaşasına yenilip
     kayboluyordu (kullanıcı geri bildirimi). Hero'da hiyerarşi başlıkta;
     kırmızı düz zeminlerde (nav, buton) yaşar. */
  color: #EDE4DA;
  margin-block-end: var(--sp-3);
  font-weight: 600;
}

:lang(ar) .panel--hero .eyebrow {
  letter-spacing: normal;
}

/* ---------- Hero eylem çağrısı ----------
   Fotoğrafın üstünde duran tek eylem. Renkler tema token'ı DEĞİL sabit
   değer: zemin her iki temada da aynı koyu fotoğraf, dolayısıyla hover'daki
   metin rengi `var(--ink)` olsaydı koyu temada açık zemine açık metin
   düşerdi. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-block-start: var(--sp-4);
  padding: 0.85em 1.65em;
  /* Sitedeki diğer birincil butonlarla AYNI: dolu bronz zemin. Şeffaf
     çerçeveli hâli fotoğrafın üstünde "ikincil eylem" gibi okunuyordu,
     oysa hero'daki tek eylem bu. */
  border: 1px solid var(--accent-deep, var(--brass-deep));
  border-radius: var(--radius);
  background: var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hero-cta__icon {
  width: 15px;
  height: 15px;
  flex: none;
  /* Sprite'taki chevron ZATEN aşağı bakıyor (`M14 20l10 10 10-10`), döndürme
     gerekmez. Aşağı yön dilden bağımsız olduğu için RTL'de de aynı kalır. */
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background: var(--accent, var(--brass));
  border-color: var(--accent, var(--brass));
  color: var(--on-accent, #FBF8F3);
}

/* ---------- Canlı açık/kapalı rozeti ----------
   Renkli nokta burada dekorasyon değil: gerçek bir durumu taşıyor, o yüzden
   "süs nokta kullanma" kuralının meşru istisnası. Renkler yine sabit değer,
   çünkü fotoğrafın üstünde duruyor.

   JS gelene kadar `hidden`: yanlış bir durumu bir an gösterip düzeltmek,
   hiç göstermemekten kötüdür. */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  order: -1;                /* konum satırının ÜSTÜNE */
  /* Konum satırından bir tık KÜÇÜK: ikisi aynı boyda olunca hangisinin
     asıl başlık olduğu belirsizleşiyordu. */
  font-size: 0.78em;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(251, 248, 243, 0.72);
}

.hero-status::before {
  width: 6px;
  height: 6px;
}

.hero-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.hero-status[data-durum="acik"] { color: var(--live-green, #22C55E); }

/* "Şu an açık" noktası NEFES ALIR: noktanın üstünden 2 sn'de bir halka
   yayılıp söner — canlı yayın dili. transform+opacity, compositor işi.
   Halka ayrı bir öğe değil, rozetin ::after'ı; noktanın (::before, satır
   başında) üstüne mantıksal konumla bindirilir, RTL'de de doğru yerde. */
.hero-status {
  position: relative;
}

.hero-status[data-durum="acik"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 7px;
  height: 7px;
  margin-block-start: -3.5px;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  animation: canliNabiz 2s ease-out infinite;
}

@keyframes canliNabiz {
  0%        { transform: scale(1);   opacity: 0.6; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-status[data-durum="acik"]::after {
    animation: none;
    opacity: 0;
  }
}
.hero-status[data-durum="yakin"] { color: #E8B893; }
.hero-status[data-durum="kapali"] { color: rgba(251, 248, 243, 0.6); }

/* Dar ekranda etiket ile rozet alt alta düşer; o hâlde dikey ayraç
   anlamsızlaşır ve satır başında asılı kalır. */


/* Büyük harf CSS'ten geliyor, HTML metninden DEĞİL: ekran okuyucular
   "KUSURSUZ" yazan bir metni harf harf hecelemeye eğilimli, `text-transform`
   ile kaynak metin normal kalır. Ayrıca Türkçe'nin i/İ dönüşümü `lang="tr"`
   sayesinde tarayıcı tarafından doğru yapılır. Arapça'da büyük/küçük harf
   kavramı olmadığı için kural orada sessizce etkisizdir — ayrı bir istisna
   yazmaya gerek yok. */
.panel--hero h1 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  max-width: 16ch;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.panel--hero p {
  font-size: 1.15rem;
  max-width: 42ch;
  margin-block-start: var(--sp-3);
  color: var(--on-photo-soft);
}

/* Masaüstünde hero'nun alt köşesinde mutlak konumlu; mobilde metnin
   ALTINA, normal akışa döner (absolute konum uzun başlık/lead ile
   çakışabiliyordu — bkz. aşağıdaki @media). */
.panel--hero .scroll-cue {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-6);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: color-mix(in srgb, var(--on-photo) 72%, transparent);
}

:lang(ar) .panel--hero .scroll-cue {
  letter-spacing: normal;
}

/* Dikey "nefes alan" scroll göstergesi — küçük nokta yukarı/aşağı süzülür */
.scroll-cue__track {
  width: 16px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.55;
  position: relative;
  flex: none;
}

.scroll-cue__dot {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 4px;
  width: 4px;
  height: 4px;
  margin-inline-start: -2px;
  border-radius: 50%;
  background: currentColor;
  animation: scrollCueBreathe 1.8s ease-in-out infinite;
}

@keyframes scrollCueBreathe {
  0% { transform: translateY(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__dot {
    animation: none;
    opacity: 0.9;
  }
}

/* Mobilde hero içeriği (eyebrow/başlık/lead) uzayınca absolute konum
   metinle çakışıyordu — scroll-cue'yu normal akışa alıp içeriğin
   HEMEN ALTINA, kendi boşluğuyla yerleştiriyoruz. */
@media (max-width: 640px) {
  .panel--hero .scroll-cue {
    position: static;
    margin-block-start: var(--sp-6);
  }
}

.panel--split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-8);
  max-width: var(--container-max);
  margin-inline: auto;
}

.panel--split.is-reverse .split__media {
  order: 2;
}

.panel--split.is-reverse .split__content {
  order: 1;
}

.split__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
}

.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__media[data-caption]::after {
  content: attr(data-caption);
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
  padding: 0.4em 0.8em;
  border-radius: var(--radius);
}

.split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46ch;
}

.split__eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--brass-deep));
  font-weight: 700;
  margin-block-end: var(--sp-2);
}

:lang(ar) .split__eyebrow {
  letter-spacing: normal;
}

/* Hakkımızda sayfasında bu başlık artık <h1> (sayfanın tek başlığı olmalı,
   bkz. o dosyadaki not); kural ikisini de kapsıyor ki başlık türü değişince
   alt boşluk sessizce kaybolmasın. */
.split__content h1,
.split__content h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin-block-end: var(--sp-3);
}

.split__content p {
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Hakkımızda paneli: eskiden HTML'de inline `style` ile ayarlanıyordu
   (min-height + nav payı). Sistem dışı değer üretmemek için buraya taşındı. */
.about-panel {
  min-height: 90vh;
  padding-block-start: calc(var(--sp-8) + var(--nav-h));
}

.split__p2 {
  margin-block-start: var(--sp-3);
}

.split__meta {
  display: flex;
  gap: var(--sp-4);
  margin-block-start: var(--sp-4);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.split__meta strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

:lang(ar) .split__meta strong {
  font-family: var(--font-arabic);
}

/* Fasıla — pirinç dikiş: bölümler arasındaki tek imza öğesi */
.seam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  max-width: var(--container-max);
  margin-inline: auto;
}

.seam::before,
.seam::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--brass);
  opacity: 0.5;
}

.seam__mark {
  width: 8px;
  height: 8px;
  background: var(--brass);
  transform: rotate(45deg);
  flex: none;
}

/* Eskiden koyu (--ink) bir bloktu; ferah palete geçişte açık zemine
   alındı. Sayfadaki TEK koyu alan artık footer — sayfayı kapatan bir
   çapa olarak duruyor, ama gövdenin hiçbir yerini basıklaştırmıyor. */
.panel--cta {
  background: var(--paper);
  color: var(--ink);
  flex-direction: column;
  text-align: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 70vh;
}

/* Etiket + başlık tek blok: `.panel--cta`nın çocukları arasında 32px boşluk
   var (gap: --sp-4) ve etiket doğrudan çocuk olsaydı başlıktan kopuk
   dururdu. Diğer bölümlerde etiket başlığa yapışıktır; sarmalayıcı o ritmi
   burada da korur. */
.panel--cta__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: center;
}

.panel--cta h2 {
  /* Serif versal harfler grotesk'ten geniş: 20ch sınırı başlığı dört satıra
     bölüyordu. Sınır genişletildi, punto bir tık küçüldü. */
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  max-width: 26ch;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

:lang(ar) .panel--cta h2 {
  text-transform: none;
  letter-spacing: normal;
}

.panel--cta p {
  color: var(--ink-soft);
  max-width: 44ch;
  font-size: 1.1rem;
}

.cta-row {
  display: flex;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.panel--cta .info-list {
  margin-block-start: var(--sp-2);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */
/* Footer rengi doğrudan `--ink`ten DEĞİL, kendi rolünden gelir: koyu temada
   `--ink` açık bir renk olduğu için footer bembeyaz olurdu (bkz. tokens.css). */
footer.site-footer {
  padding: var(--sp-6);
  background: var(--footer-bg);
  color: var(--footer-fg);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__inner h3 {
  font-size: 1rem;
  color: var(--footer-fg);
  margin-block-end: var(--sp-1);
}

.site-footer__inner a:hover {
  color: var(--brass);
}

/* Google Maps — footer'daki adresi (Emirhan Cd. No:4B, Süleymaniye) gösterir.
   Ayrı bir renk/spacing değeri üretmeden mevcut sistemle (radius,
   container-max) uyumlu. */
.site-footer__map {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-block-start: var(--sp-4);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--footer-line);
}

.site-footer__map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: grayscale(0.3) contrast(1.05);
}

.site-footer__bottom {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--footer-line);
  text-align: center;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--footer-fg) 72%, transparent);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* `svh` = adres çubuğu AÇIKKEN geçerli olan küçük viewport yüksekliği.
     Mobil tarayıcıda `100vh` çubuk gizliyken ölçülen BÜYÜK değerdir; panel
     o yüksekliği alınca içeriğinin altı çubuğun arkasında kalıyor
     (hero'da kaydırma göstergesi, CTA'da buton). `vh` önce yazıldı ki
     `svh` desteklemeyen tarayıcı onu kullansın. */
  .panel {
    padding: var(--section-y) var(--sp-4);
    min-height: 100svh;
  }

  .panel--cta {
    min-height: 70svh;
  }
  .panel--split {
    grid-template-columns: 1fr;
  }
  .panel--split.is-reverse .split__media,
  .panel--split.is-reverse .split__content {
    order: initial;
  }
  .split__media {
    aspect-ratio: 16 / 10;
  }
  /* Dikey dolgu 16px'ten 10px'e: marka bloğu zaten 62px yükseklik taşıyor,
     16+16 dolgu barı 94px'e şişiriyordu — "dolgusu çok geniş duruyor"
     (kullanıcı geri bildirimi). 62+20=82px, ~%13 kısalma. */
  .nav {
    padding: 10px var(--sp-3);
  }
}