/* ==========================================================================
   ONURCAN DÜĞÜN SALONLARI — Marka katmanı

   NEDEN AYRI DOSYA
   Şablonun renk paleti, tipografi ölçeği ve bileşen stilleri bu projede
   DEĞİŞTİRİLMEDİ. Müşteriye özgü olan her şey (yedi harfli kelime markası,
   iletişim rıhtımı, alt sayfa başlığı, salon künyesi) burada toplanır.
   Böylece tokens.css / components.css şablonla birebir aynı kalır ve bir
   sonraki proje bu dosyayı silip yenisini yazarak başlayabilir.

   Bu katman token okur, token TANIMLAMAZ. Yeni renk yoktur.
   ========================================================================== */

/* ==========================================================================
   1. Kelime markası — ONURCAN (yedi harf)

   Şablonun kompozisyonu DÖRT harf (NOVA) için ayarlanmıştı: harfler
   1em / 0,60em / 1,16em / 0,80em ölçülerinde iç içe geçiyordu. Yedi harfte
   aynı ölçüler satıra sığmaz — 375px'te ölçüldü: 13vw ile kompozisyon
   ~470px, kullanılabilir genişlik 335px.

   Bu yüzden --fs-hero token'ı DEĞİŞTİRİLMEDİ; yalnızca bu kompozisyonun
   kendi ölçüsü yeniden kuruldu. Ritim aynı ilkeyi korur: sesli harfler
   küçülüp yukarı çekilir, "C" öne çıkar, bir harf altın olur.
   ========================================================================== */

.hero__wordmark {
  /* ÖLÇÜLDÜ: bu kompozisyonun genişliği yazı tipi boyutunun 4,14 katı.
     Kısıt küçük ekrandır — 375px'te kullanılabilir genişlik 335px, yani
     tavan 335/4,14 = 80px = 21,3vw. 13,5vw bunun oldukça altında kalır
     (52px -> 217px) ve masaüstünde markayı yeterince iri tutar
     (1440px'te 176px -> 728px). */
  font-size: clamp(2.4rem, 13.5vw, 11rem);
}

/* Harfler asla satır kıramaz: kompozisyon tek bir nesnedir */
.hero__word--1 { white-space: nowrap; }

/* Ortak: her harf kendi kutusunda, üst üste binebilmek için konumlanmış */
.hero__l { display: inline-block; position: relative; }

/* O — küçültülmüş ve yukarı çekilmiş.
   RENK YOK: gerçek logoda "ONURCAN" tek parça gümüş bir kelime; harflerden
   birini altın yapmak markayı ikiye bölüyordu. Kompozisyon artık yalnızca
   ÖLÇÜ ve KONUM ile kuruluyor, renkle değil — altın vurgusu alt satırdaki
   "Düğün Salonları"na bırakıldı (logodaki altın yazı da orada).
   Yan etki: krem, altına göre daha yüksek kontrastlı; hero örtüsü ölçümü
   bu değişiklikle kötüleşmez, iyileşir (altın O 3,19:1 -> krem 4,80:1). */
.hero__l--o1 {
  font-size: 0.72em;
  top: -0.20em;
  margin-inline-end: -0.035em;
  z-index: 2;
}

.hero__l--n1 { z-index: 1; margin-inline-start: -0.01em; }

/* U — hafif küçülür, tabanı hizada kalsın diye aşağı iner */
.hero__l--u {
  font-size: 0.88em;
  top: 0.06em;
  margin-inline: -0.028em;
  z-index: 1;
}

.hero__l--r { z-index: 2; margin-inline-end: -0.03em; }

/* C — kompozisyonun en büyük harfi; "Onurcan"ın ikinci hecesini açar */
.hero__l--c {
  font-size: 1.10em;
  top: 0.04em;
  margin-inline-start: -0.02em;
  z-index: 2;
}

.hero__l--a {
  font-size: 0.78em;
  top: -0.16em;
  margin-inline: -0.02em -0.015em;
  z-index: 1;
}

.hero__l--n2 { z-index: 1; }

/* Alt satır: "DÜĞÜN SALONLARI" — birinci satırın altına girer */
.hero__word--2 {
  margin-top: -0.06em;
  font-size: 0.28em;
  letter-spacing: 0.16em;
  color: var(--c-gold-soft);
}

/* Çok dar ekranda alt satır iki kelimeye bölünebilsin */
@media (max-width: 400px) {
  .hero__word--2 { font-size: 0.30em; letter-spacing: 0.12em; }
}

/* --------------------------------------------------------------------------
   Hero okunabilirlik örtüsü — YENİDEN ÖLÇÜLDÜ (Tuzak 21)

   Örtü bir yerleşime değil, BELİRLİ bir görüntünün parlaklığına göre ayarlanır.
   Şablonun değerleri (orta duraklar 0,56 / 0,62) kendi videosuna göre
   tutturulmuştu ve ilk Onurcan videosunda (parlak beyaz mermer salon) altın
   metinde KALIYORDU — 30 kare örneklenip her karede metnin ARKASINDAKİ EN
   PARLAK piksele göre ölçüldüğünde 2,59:1 çıkıyordu. Aşağıdaki duraklar o
   ölçüme göre kaldırıldı.

   İKİNCİ ÖLÇÜM — "Hero section new video.mp4" (ilk dans, sis, mor ışık):
   Bu video öncekinden belirgin KOYU. Aynı yöntemle çözülen alt sınırlar:

       kelime markası bandı  rgb(204,202,201)  ->  alfa >= 0,503
       alt satır bandı       rgb(255,232,200)  ->  alfa >= 0,578
       caption bandı         rgb(159,175,175)  ->  alfa >= 0,399

   Aşağıdaki duraklar (bandlarda 0,63 / 0,61 / 0,65) üç eşiği de PAYLA geçiyor,
   bu yüzden DEĞİŞTİRİLMEDİ. Örtüyü bu videoya göre inceltmek teknik olarak
   mümkündü ama kazanç ölçülemeyecek kadar küçük, risk (okunabilirlik) gerçek.

   VİDEOYU DEĞİŞTİRİRSENİZ BU ÖLÇÜMÜ TEKRARLAYIN.
   -------------------------------------------------------------------------- */

.hero__media::after {
  background:
    linear-gradient(180deg,
      rgba(11, 26, 36, 0.80) 0%,
      rgba(11, 26, 36, 0.63) 34%,
      rgba(11, 26, 36, 0.64) 68%,
      rgba(11, 26, 36, 0.88) 100%);
}

/* --------------------------------------------------------------------------
   Marka mührü — harf aralığı ÖLÇÜLEREK bulundu

   Şablonun 3,05px değeri "NOVA BALO & DAVET · İSTANBUL · 2010 ·" yazısına
   göre ayarlanmıştı. Onurcan'ın yazısı farklı uzunlukta olduğu için aynı
   değer halkayı TAŞIRIYORDU (ölçüldü: oran 1,021 — textPath taşması sessizce
   kırpılır, bkz. Tuzak 9).

   Karakter sayarak hesaplanamaz (Tuzak 14). İki aralıkta ölçülüp doğru
   yerleştirildi:
       aralıksız uzunluk 179,1 · ölçülen boşluk sayısı 35,98
       hedef = yol uzunluğu (282,8) x 0,99 = 280,0
       gerekli aralık = (280,0 - 179,1) / 35,98 = 2,80px
   Doğrulama: 279,9 / 282,8 = 0,9898  (1,0'ın hemen altı — halka kapanır)

   Yazıyı değiştirirseniz bu ölçümü TEKRARLAYIN.
   -------------------------------------------------------------------------- */

.seal__text { letter-spacing: 2.80px; }

/* ==========================================================================
   1b. Gerçek logo (alt bilgi)

   Müşterinin logosu bir mockup fotoğrafından çıkarıldı (bkz. README) ve
   ŞEFFAF bir WebP olarak duruyor. İki kısıtı var, yerleşimi bunlar belirledi:

   1. Gümüş + altın, KOYU zemin için tasarlanmış bir logo. Krem zeminde
      görünmez oluyor (ölçüldü) — bu yüzden yalnızca alt bilgide, lacivert
      üzerinde kullanılıyor.
   2. Kilit (lockup) neredeyse kare: 442x430. Üstte arma, altında iki satır
      yazı. Başlık çubuğu 84px yüksekliğinde; logo oraya konsa "ONURCAN"
      yazısı 5px kalır ve okunmaz. Başlıkta bu yüzden vektör arma
      (#i-crest) kalıyor — 25px'te bile okunuyor.

   Kısacası: küçük yerde vektör arma, büyük ve koyu yerde gerçek logo.
   ========================================================================== */

.footer__logo {
  width: clamp(11rem, 20vw, 14.5rem);
  height: auto;
  display: block;
}

/* ==========================================================================
   2. İletişim rıhtımı — WhatsApp · Instagram · Telefon

   Her sayfada bulunur. Telefonda ALT KENARDA yatay bir çubuk, masaüstünde
   sağ kenarda dikey bir sütun olur: başparmak telefonda alt kenara,
   fare masaüstünde sağ kenara yakındır.

   Şablonun "başa dön" düğmesi de sağ altta duruyor; çakışmayı önlemek için
   .to-top bu sayfalarda yukarı kaydırılır (aşağıda).
   ========================================================================== */

.contact-dock {
  position: fixed;
  z-index: var(--z-sticky);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-dock__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cream);
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-spring);
}

/* Renk YUVARLAK ROZETTE durur, bağlantının kendisinde değil.
   Sebebi erişilebilirlik: telefonda etiket metni rozetin ALTINDA, koyu
   çubuğun üstünde kalır (krem/lacivert = 14,4:1). Rengi bağlantının
   tamamına verseydik etiket, Instagram gradyanının açık sarı ucunda
   okunmaz hâle gelirdi. */
.contact-dock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: none;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-soft),
              filter var(--dur-base) var(--ease-soft);
}

.contact-dock__link:hover .contact-dock__icon,
.contact-dock__link:focus-visible .contact-dock__icon {
  transform: scale(1.08);
  filter: brightness(1.08);
}

.contact-dock__link:active .contact-dock__icon { transform: scale(0.95); }

/* ---- Marka renkleri ------------------------------------------------------
   WhatsApp ve Instagram kendi resmî renkleriyle görünür: bu iki simge
   dünyada renkleriyle tanınıyor, gri bir daire içinde tanınırlığını
   kaybediyor. Telefon düğmesi markanın altın rengini korur ki üçlü
   Onurcan paletine bağlı kalsın.

   WhatsApp yeşili (#25D366) üzerine LACİVERT simge kullanıldı, beyaz değil:
   beyaz/yeşil 2,1:1 verirken lacivert/yeşil 8,9:1 veriyor.
   -------------------------------------------------------------------------- */
.contact-dock__link--wa .contact-dock__icon {
  background: #25D366;
  color: var(--c-night);
}

/* Instagram'ın köşeden yayılan gradyanı (resmî uygulama simgesindeki gibi:
   açık sarı sol-alt köşede kalır, simge magenta/mor üzerinde durur) */
.contact-dock__link--ig .contact-dock__icon {
  background:
    radial-gradient(circle at 30% 107%,
      #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  color: #FFFFFF;
}

.contact-dock__link--tel .contact-dock__icon {
  background: var(--c-gold);
  color: var(--c-night);
}

.contact-dock__label {
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

/* ---- Telefon: alt kenarda tam genişlik çubuk ---- */
@media (max-width: 767px) {
  .contact-dock {
    inset: auto 0 0 0;
    background: var(--c-deep);
    border-top: 1px solid var(--line-on-dark);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 24px rgba(11, 26, 36, 0.28);
  }

  .contact-dock li { flex: 1 1 0; display: flex; }

  .contact-dock__link {
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 4.5rem;          /* 72px — büyütüldü */
    padding-block: 0.55rem;
    border-inline-end: 1px solid var(--line-on-dark);
  }

  .contact-dock li:last-child .contact-dock__link { border-inline-end: none; }

  .contact-dock__icon { width: 2.5rem; height: 2.5rem; }   /* 40px rozet */
  .contact-dock__icon svg { width: 24px; height: 24px; }

  .contact-dock__label { font-size: 0.625rem; letter-spacing: 0.08em; }

  /* Sabit çubuk sayfanın son satırını örtmesin */
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0)); }

  /* Başa dön düğmesi çubuğun ÜSTÜNE çıkar */
  .to-top { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0)); }
}

/* ---- Masaüstü: sağ kenarda dikey sütun ---- */
@media (min-width: 768px) {
  .contact-dock {
    flex-direction: column;
    gap: var(--space-3);
    inset-inline-end: clamp(1rem, 3vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
  }

  .contact-dock__icon {
    width: 3.75rem;              /* 60px — büyütüldü (eskiden 48px) */
    height: 3.75rem;
    box-shadow: var(--sh-3);
  }

  .contact-dock__icon svg { width: 30px; height: 30px; }

  /* Etiket yalnızca ekran okuyucuya; renkli rozet + aria-label yeterli */
  .contact-dock__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Rıhtım dikey ortada, "başa dön" sağ altta — çakışmazlar */
}

/* ==========================================================================
   3. Alt sayfa başlığı (salon sayfaları)

   Ana sayfanın tam ekran hero'su alt sayfalarda yanlış olurdu: kullanıcı
   oraya bir salonu İNCELEMEK için gelir, karşılanmak için değil. Bu yüzden
   daha alçak, içeriği hemen gösteren bir başlık kullanılır.
   ========================================================================== */

.page-hero {
  position: relative;
  display: grid;
  place-items: end start;
  min-height: min(62svh, 34rem);
  overflow: hidden;
  background: var(--c-night);
  color: var(--fg-on-dark);
  isolation: isolate;
}

.page-hero__media { position: absolute; inset: 0; z-index: -2; }

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Okunabilirlik örtüsü: metin SOL ALTTA durduğu için ağırlık oraya verilir.
   Ölçüldü (bkz. README) — başlık 8,9:1, üst etiket 7,4:1. */
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 26, 36, 0.62) 0%, rgba(11, 26, 36, 0.30) 42%,
                    rgba(11, 26, 36, 0.78) 100%),
    linear-gradient(to right, rgba(11, 26, 36, 0.72) 0%, rgba(11, 26, 36, 0.12) 62%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 9rem var(--gutter) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--c-cream);
  margin: 0;
  text-shadow: 0 2px 30px rgba(11, 26, 36, 0.5);
}

.page-hero__lead {
  max-width: 46ch;
  color: rgba(248, 245, 239, 0.88);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* ---- Kırıntı yolu (breadcrumb) ---- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.78);
}

.crumbs a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* 44px dokunma hedefi */
}

.crumbs a:hover,
.crumbs a:focus-visible { color: var(--c-gold-soft); }

.crumbs li + li::before {
  content: "·";
  margin-inline-end: 0.5rem;
  color: var(--c-gold);
}

.crumbs [aria-current="page"] { color: var(--c-gold-soft); }

/* ==========================================================================
   4. Salon künyesi (spec strip)
   ========================================================================== */

.spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.spec li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line-on-dark);
}

.spec__val {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--c-gold-soft);
  font-variant-numeric: tabular-nums;
}

.spec__key {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  line-height: 1.5;
}

/* ==========================================================================
   5. Özellik listesi (bu salonda ne var)
   ========================================================================== */

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }

.feature-list li {
  position: relative;
  padding-inline-start: 1.9rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-muted);
}

.feature-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--c-gold-deep);
  transform: rotate(45deg);
}

/* ==========================================================================
   5a. İstatistik şeridi — üç öğeye indirgendi

   Şablonun .stats bileşeni dört öğe varsayar (repeat(4,1fr) masaüstünde).
   Salon SAYISINI bir "başarı" istatistiği gibi sunmak övünme çerçevesiydi
   ve müşteri isteğiyle kaldırıldı; geriye üç öğe kaldı. Üç öğeyi dört
   sütunlu ızgarada bırakmak sağda boş bir hücre bırakırdı — bunun yerine
   üç sütuna sabitlenip ortalanıyor.
   ========================================================================== */

.stats--3 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .stats--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 44rem;
    margin-inline: auto;
  }
}

/* ==========================================================================
   5b. Salon galerisi

   Şablonun .photo-trio'su tam olarak ÜÇ görsel varsayar; salonlarda 6–9
   fotoğraf var. Aynı dili konuşan ama sayıdan bağımsız bir ızgara:
   telefonda yatay mıknatıslı ray (şablonun telefon kararı korunur),
   masaüstünde üç sütun.
   ========================================================================== */

.venue-gallery {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .venue-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 639px) {
  .venue-gallery {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .venue-gallery::-webkit-scrollbar { display: none; }
  .venue-gallery > * { scroll-snap-align: center; }
}

/* ==========================================================================
   5c. Galerinin altıncı kutusu — Instagram kartı

   Galeri altı kutuda sabitlendi (bkz. build-pages.py). Altıncısı fotoğraf
   değil, Instagram'a çıkan bir kart. Zemininde o salonun bir sonraki
   fotoğrafı duruyor; üstünde yarı saydam bir örtü var, böylece kart
   ızgaranın parçası gibi okunuyor ama tıklanacak bir şey olduğu belli.

   Örtü OPAK DEĞİL: fotoğraf altından okunmaya devam etsin diye gradyan
   kullanıldı. Metnin kontrastı bu yüzden ölçüldü — en açık zemin pikselinde
   bile krem metin 4,5:1'i geçiyor (koyu uçta örtü 0,88 alfaya çıkıyor).
   ========================================================================== */

.ig-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--c-deep);
  isolation: isolate;
}

.ig-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zemin fotoğrafı bilgi taşımıyor, atmosfer taşıyor: hafifçe soluk ve
     yakınlaştırılmış dursun ki metin öne çıksın. */
  transform: scale(1.06);
  transition: transform var(--dur-slow) var(--ease-out);
}

.ig-card:hover img,
.ig-card:focus-visible img { transform: scale(1.12); }

/* Yarı saydam örtü — Instagram gradyanının izini taşır ama markayı boğmaz */
.ig-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(160deg,
      rgba(214, 36, 159, 0.42) 0%,
      rgba(253, 89, 73, 0.30) 38%,
      rgba(11, 26, 36, 0.86) 100%);
  transition: opacity var(--dur-base) var(--ease-soft);
}

.ig-card:hover::after,
.ig-card:focus-visible::after { opacity: 0.88; }

.ig-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  color: var(--c-cream);
}

.ig-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(248, 245, 239, 0.55);
  border-radius: 50%;
  margin-bottom: var(--space-1);
  transition: background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}

.ig-card:hover .ig-card__mark,
.ig-card:focus-visible .ig-card__mark {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-night);
}

.ig-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.25;
}

.ig-card__handle {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  /* Arapça'da bile soldan sağa kalmalı: bu bir kullanıcı adı, çeviri değil */
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   6. Salonlar arası gezinme (önceki / sonraki)
   ========================================================================== */

.venue-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-on-dark);
  border-block: 1px solid var(--line-on-dark);
}

@media (min-width: 768px) { .venue-nav { grid-template-columns: 1fr 1fr; } }

.venue-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--gutter);
  background: var(--c-deep);
  color: var(--fg-on-dark);
  min-height: 5.5rem;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-soft);
}

.venue-nav__link:hover,
.venue-nav__link:focus-visible { background: var(--c-sea); }

.venue-nav__link--next { text-align: end; align-items: flex-end; }

.venue-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold-soft);
}

.venue-nav__name {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
}

/* ==========================================================================
   7. Yer tutucu işareti

   Kapasite, fiyat ve benzeri DOĞRULANMAMIŞ sayılar bu sınıfla işaretlidir.
   Yayına almadan önce arayın: HTML'de her biri ayrıca
   <!-- YER TUTUCU --> yorumuyla da işaretlidir.
   Görünürde hiçbir etkisi yoktur; amaç aranabilir olmasıdır.
   ========================================================================== */

[data-placeholder] { /* görsel etki yok — bilinçli */ }

/* ==========================================================================
   8. Sağdan sola (Arapça) düzeltmeleri
   Şablonun rtl.css'i yalnızca kendi bileşenlerini bilir; buradaki yeni
   bileşenlerin aynalanması burada tanımlanır.
   ========================================================================== */

[dir="rtl"] .page-hero { place-items: end end; }
[dir="rtl"] .page-hero__inner { align-items: flex-end; text-align: end; }

/* transform-origin mantıksal anahtar kelime KABUL ETMEZ (bkz. Tuzak 15);
   sağ kenar yerleşimi zaten inset-inline-end ile aynalanır, yalnızca
   dikey ortalama transform'u korunur. */
[dir="rtl"] .page-hero__media::after {
  background:
    linear-gradient(180deg, rgba(11, 26, 36, 0.62) 0%, rgba(11, 26, 36, 0.30) 42%,
                    rgba(11, 26, 36, 0.78) 100%),
    linear-gradient(to left, rgba(11, 26, 36, 0.72) 0%, rgba(11, 26, 36, 0.12) 62%);
}

[dir="rtl"] .venue-nav__link--next { text-align: start; align-items: flex-start; }
[dir="rtl"] .venue-nav__link--prev { text-align: end; align-items: flex-end; }

/* Arapça'da kelime markası harf kompozisyonu LATİN harflerle yazılıdır
   (marka adı çevrilmez); yön değişse de kompozisyon soldan sağa kalır. */
[dir="rtl"] .hero__word--1 { direction: ltr; }

/* ==========================================================================
   9. Hareket azaltma
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .contact-dock__icon,
  .contact-dock__link { transition: none; }

  .ig-card img,
  .ig-card::after,
  .ig-card__mark { transition: none; }

  .ig-card img { transform: scale(1.06); }
  .ig-card:hover img,
  .ig-card:focus-visible img { transform: scale(1.06); }

  .contact-dock__link:hover .contact-dock__icon,
  .contact-dock__link:focus-visible .contact-dock__icon,
  .contact-dock__link:active .contact-dock__icon { transform: none; }
}