/* =============================================================================
   Külek — "LOŞ SALON" katmanı
   =============================================================================
   style.css'ten SONRA yüklenir ve Foodix temasını QR menüyle (public/qr) aynı
   sanat yönüne çeker. Tema dosyalarına DOKUNULMAZ; bu dosya kaldırılırsa site
   eski (açık) hâline döner.

   SANAT YÖNÜ — QR menüyle birebir aynı dil:
   • Zemin, ürün fotoğraflarındaki koyu ahşap masanın rengi (#150504);
     tabaklar spot ışığı gibi parlar, ürün öne çıkar.
   • Logo yüksek kontrastlı bir serif → TÜM başlıklar Playfair Display (serif);
     gövde ve arayüz metinleri Hanken Grotesk (sans) kalır.
   • Basılı menü dili: ince ayraç çizgileri (hairline), iç keyline çerçeveler,
     geniş harf aralıklı küçük etiketler, altın vurgu (#D9A768), film greni.
   ========================================================================== */

/* ---- Playfair Display (kendi kopyaları) ---- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair/playfair-display-500.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair/playfair-display-600.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair/playfair-display-700.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair/playfair-display-italic-500.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair/playfair-display-italic-600.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ---- Tokenlar — temanın değişkenleri yeniden tanımlanır ---- */
:root {
  color-scheme: dark;

  /* Tema değişkenleri: başlık fontu artık serif. --heading-font'u kullanan
     BÜTÜN tema kuralları kendiliğinden serif'e döner. */
  --heading-font: 'Playfair Display', Georgia, serif;

  /* Loş salon paleti (QR menüyle aynı) */
  --zemin:        #150504;
  --zemin-dis:    #0A0201;
  --panel:        #200907;
  --krem:         #F7F1E1;
  --metin-soluk:  rgba(247, 241, 225, .65);
  --altin:        #D9A768;
  --kirmizi-acik: #E4574D;
  --kor-parlak:   #D91C12;              /* hover: kırmızının körüklenmiş hâli */

  --cizgi:        rgba(247, 241, 225, .16);
  --cizgi-soluk:  rgba(247, 241, 225, .09);

  /* Üst şeridin yüksekliği — başlığın ana sayfadaki üst payı da buradan gelir,
     ikisi birbirinden ayrı düşmesin. */
  --ustserit:     42px;

  /* Temanın YEŞİL ikincil rengi (#14A83A) kaldırıldı.
     Tema onu her yerde hover rengi olarak kullanıyordu: birincil butonun
     üzerine gelince buton yeşile dönüyordu — markada hiç yeri olmayan bir
     renk. Değişkeni tek yerden körüklenmiş kırmızıya bağlamak, gözden kaçan
     bileşenlerde de (bağlantı hover'ları, sepet/rozet düğmeleri) yeşilin
     geri gelmesini imkânsız kılar. */
  --secondary-color: var(--kor-parlak);

  /* Temanın kendi renk isimleri koyu düzene çevrilir:
     --gray-color temada "krem zemin" olarak kullanılıyordu → koyu panel. */
  /* DİKKAT — --primary-dark-color KOYU kalmalı.
     Tema onu iki ayrı işte kullanıyor: metin rengi (h1–h6, menü bağlantıları…)
     VE zemin rengi (.header-area.header-one.sticky, .primary-dark-bg,
     .navbar-toggler kenarlığı). Bir ara kreme çevrilmişti; metinler doğru
     görünüyordu ama ana sayfanın yapışkan başlığı krem zemine dönüp beyaz
     logoyu yutuyordu — ayrıca iletişim formunun BEYAZ bildirim kutusundaki
     başlık da krem olup kayboluyordu. Değişken artık zemin rengimizdir;
     kreme dönmesi gereken METİNLER aşağıda tek tek yazılır. */
  --primary-dark-color: var(--zemin);
  --gray-color: var(--panel);
  --gray-light-color: var(--panel);
  --text-color: rgba(247, 241, 225, .65);
}

/* =============================================================================
   Zemin + genel metin
   ========================================================================== */
/* Sayfa içi bağlantılar (geçiş inişi, yasal metinlerin içindekiler listesi,
   sayfa üstü kırıntı yolu) sıçramadan kaysın. */
html { scroll-behavior: smooth; }

body {
  background-color: var(--zemin);
  color: var(--metin-soluk);
}
::-webkit-scrollbar-track { background: var(--zemin-dis); }
::-webkit-scrollbar-thumb { background-color: #3A1610; }
::selection { background: var(--altin); color: #1A0605; }

h1, h2, h3, h4, h5, h6 { color: var(--krem); }

/* Film greni — QR menüyle aynı doku; üretilmiş görsellerin steril
   pürüzsüzlüğünü kırar. pointer-events:none → tıklamayı asla engellemez. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4000;                 /* çerez bandı (1200) ve header (999) üstü; sorun değil, %5 saydam */
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* =============================================================================
   Başlık ölçüleri — Barlow Condensed dar bir fonttu; Playfair geniş.
   Tema ölçüleri (60–115px) serifte taşar, hepsi yeni orana çekilir.
   ========================================================================== */
.section-title h2 {
  font: 600 42px/1.2 var(--heading-font);
  letter-spacing: .01em;
  text-transform: none;          /* serif başlık büyük harf istemez; logo dili kapakta kalır */
}
@media (max-width: 1199px) { .section-title h2 { font-size: 34px; line-height: 1.25; } }
@media (max-width: 767px)  { .section-title h2 { font-size: 28px; line-height: 1.3; } }
.section-title p { color: var(--metin-soluk); }

/* Bölüm ön başlığı: kırmızı kalın etiket → altın, geniş aralıklı küçük etiket */
.sub-title,
.home-one .sub-title,
.kulek-cta .sub-title {
  font: 600 12px var(--body-font);
  letter-spacing: .28em;
  color: var(--altin);
}
.sub-title i,
.home-one .sub-title i,
.kulek-cta .sub-title i { color: var(--altin); }

/* =============================================================================
   Butonlar — köşeler basılı menü gibi keskinleşir (3px), yazı küçülür
   ========================================================================== */
.theme-btn {
  font: 600 15px var(--body-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 38px;
}
.theme-btn.style-one {
  border-radius: 3px;
  background-color: var(--primary-color);
  color: #ffffff;
}
/* Hover: koyu zeminde butonu KARARTMAK onu geri çeker, tıklanabilirlik hissini
   zayıflatır. Kırmızı körüklenir ve altına sıcak bir kor ışığı düşer. */
.theme-btn.style-one:hover,
.theme-btn.style-one:focus {
  background-color: var(--kor-parlak);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(191, 17, 9, .38);
}
.theme-btn.style-two {
  border-radius: 3px;
  border: 1px solid var(--cizgi);
  color: var(--krem);
}
.theme-btn.style-two:hover {
  border-color: var(--altin);
  color: var(--altin);
  background-color: transparent;
}
/* Başlıktaki buton, hero'daki butonla AYNI ölçüde.
   Tema burada ayrı bir küçültme kuralı taşıyor (16px / 12px 28px / 8px köşe);
   .theme-btn'in temel ölçüleri ona yenildiği için değerler burada yinelenir. */
.header-navigation .nav-right-item .theme-btn {
  font-size: 15px;
  letter-spacing: .14em;
  padding: 16px 38px;
  border-radius: 3px;
}

/* =============================================================================
   ÜST ŞERİT (.topbar) — başlığın üzerinde, tüm sayfalarda
   ---------------------------------------------------------------------------
   Adres / saat / telefon + sosyal. İç sayfalarda normal akışta koyu bir bant;
   ANA SAYFADA hero fotoğrafının üzerinde yüzer (saydam zemin + saç teli alt
   çizgi), böylece hero tam ekran kalır ve şerit onu kısaltmaz.
   ========================================================================== */
.topbar {
  position: relative;
  z-index: 998;
  background-color: #0F0403;
  border-bottom: 1px solid var(--cizgi-soluk);
  font-size: 12.5px;
  line-height: 1;
  color: var(--metin-soluk);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  min-height: var(--ustserit);
}
.topbar__sag {
  display: flex;
  align-items: center;
  gap: 0;
}
.topbar__oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--metin-soluk);
  transition: color .3s ease;
}
.topbar__oge i { font-size: 13px; color: var(--altin); }
a.topbar__oge:hover { color: var(--krem); }
/* Sağ gruptaki öğeler arasına dikey saç teli ayraç */
.topbar__sag > * + * {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--cizgi-soluk);
}
.topbar__sosyal { display: flex; align-items: center; gap: 14px; }
.topbar__sosyal li { display: block; }
.topbar__sosyal a {
  display: block;
  font-size: 13px;
  color: var(--metin-soluk);
  transition: color .3s ease;
}
.topbar__sosyal a:hover { color: var(--altin); }

/* Ana sayfa: şerit fotoğrafın üzerinde yüzer, başlık da onun altında durur. */
.home-one .topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
  border-bottom-color: rgba(247, 241, 225, .12);
}
/* Tema `.transparent-header`'a top:20px (mobilde 0) veriyor; şerit geldiği için
   başlığın başlangıcı şeridin yüksekliğine çekilir. */
.transparent-header { top: var(--ustserit); }
@media (max-width: 1199px) { .transparent-header { top: var(--ustserit); } }

/* Dar ekran: üç bilgi + sosyal yan yana sığmıyor. Adres ve sosyal düşer,
   saat + telefon ortada kalır — telefon mobilde en değerli eylem. */
@media (max-width: 767px) {
  .topbar__oge--adres, .topbar__sosyal { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__sag { justify-content: center; }
  .topbar { font-size: 11.5px; }
  .topbar__oge { gap: 6px; }
  .topbar__sag > * + * { margin-left: 14px; padding-left: 14px; }
}
@media (max-width: 380px) {
  /* En dar ekranda saat de düşer; telefon tek başına kalır. */
  .topbar__oge--saat { display: none; }
  .topbar__sag > * + * { margin-left: 0; padding-left: 0; border-left: none; }
}

/* =============================================================================
   Header — her sayfada koyu; beyaz logo (base.php hep logo-white basar)
   ========================================================================== */
/* İç sayfalarda başlık `position: sticky`. Tema, kaydırınca eklenen `.sticky`
   sınıfıyla onu `position: fixed` yapıyordu; akıştan çıktığı için sayfa tam o
   anda başlık boyu kadar (~100px) yukarı ZIPLIYORDU. Sticky ile öğe akışta
   kalır, sıçrama olmaz; `.sticky` sınıfı yalnızca GÖRÜNÜMÜ değiştirir.
   (Ana sayfada başlık zaten `transparent-header` ile akış dışında olduğu için
   orada fixed'e dönmesi sorun değil.) */
.header-area.page-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--zemin);
  border-bottom: 1px solid var(--cizgi-soluk);
}
.header-area.page-header.sticky {
  position: sticky;
  -webkit-animation: none;
          animation: none;   /* temanın -200px'ten kayan girişi sticky'de bozuk duruyor */
}
/* Yapışkan başlık — ÜÇ seçici birden yazılır.
   Tema ana sayfaya `.header-area.header-one.sticky` (özgüllük 0,3,0) ile
   ayrı bir zemin veriyor; yalnızca `.header-area.sticky` (0,2,0) yazmak
   ana sayfada yetmiyordu, tema kuralı kazanıyordu. */
.header-area.sticky,
.header-area.header-one.sticky,
.header-area.header-two.sticky {
  background-color: rgba(14, 3, 2, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi-soluk);
  -webkit-box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
          box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

/* Menü bağlantıları: küçük, geniş harf aralıklı büyük harf — sitedeki etiket
   dilinin (ÇALIŞMA SAATLERİ, ADRES…) aynısı. Altlarında açılıp kapanan altın
   bir saç teli çizgi; etkin sayfada sabit durur. Yalnızca MASAÜSTÜ menüsünde:
   mobil çekmecede bağlantılar büyük ve normal yazımda kalır. */
@media (min-width: 1200px) {
  .header-navigation .main-menu ul > li { margin-left: 15px; margin-right: 15px; }
  .header-navigation .main-menu ul > li > a {
    font: 600 12.5px var(--body-font);
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 32px 0 31px;
    color: var(--krem);
  }
  .header-navigation .main-menu ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    height: 1px;
    background-color: var(--altin);
    transform: scaleX(0);
    transition: transform .35s ease;
  }
  .header-navigation .main-menu ul > li:hover > a::after,
  .header-navigation .main-menu ul > li.active > a::after { transform: scaleX(1); }
}
.header-navigation .main-menu ul > li > a {
  font-family: var(--body-font);
  color: var(--krem);
}
.header-navigation .main-menu ul > li:hover > a,
.header-navigation .main-menu ul > li.active > a,
.navigation-white .header-navigation .main-menu ul li:hover > a { color: var(--altin); }
/* Menü düğmesi: kenarlığı tema --primary-dark-color'dan alıyordu, o artık
   zemin rengi — koyu üstünde koyu kalırdı. Saç teli çizgiye bağlanır. */
.header-navigation .navbar-toggler { border-color: var(--cizgi); }
.header-navigation .navbar-toggler span { background-color: var(--krem); }

/* Mobil çekmece: beyaz kutu → koyu panel */
@media (max-width: 1199px) {
  .header-navigation .foodix-nav-menu {
    background-color: #1A0605;
    border-right: 1px solid var(--cizgi-soluk);
  }
  .header-navigation .foodix-nav-menu .main-menu ul li a { color: var(--krem); }
  .navigation-white .header-navigation .foodix-nav-menu .main-menu ul li > a { color: var(--krem); }
  .header-navigation .foodix-nav-menu .main-menu ul li:not(:last-child) { border-color: var(--cizgi-soluk); }
}
.mobile-menu-info__row, .mobile-menu-info__row i { color: var(--metin-soluk); }
.mobile-menu-info__social li a {
  border: 1px solid var(--cizgi);
  color: var(--krem);
}

/* =============================================================================
   ANA SAYFA HERO — "menü kapağı"
   ---------------------------------------------------------------------------
   Yan görsel kolonu kaldırıldı (bkz. foodix-home.php): arka planda zaten tam
   ekran bir fotoğraf var, ikinci bir fotoğraf onunla yarışıyordu. Yerine tek
   sütun, ortalı bir kapak düzeni: üst etiket → serif başlık → süsleme → giriş
   → buton; en altta künye şeridi. QR menünün kapağıyla aynı dil.

   Yerleşim: hero bir flex sütun. İçerik kalan boşluğu alıp dikeyde ortalanır,
   künye şeridi hep en alta yapışır — hero'nun boyu değişse de ikisi ayrı
   düşmez.
   ========================================================================== */
.hero-wrapper-four {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 160px 0 0;
}
@media (max-width: 1199px) {
  /* Telefonda tam ekran şart değil: künye 3 satıra düştüğü için sabit yükseklik
     içeriği sıkıştırıyordu. Boy içerikten gelsin. */
  .hero-wrapper-four { min-height: 0; padding: 140px 0 0; }

}
.hero-wrapper-four > .container {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 70px;
}

.hero-wrapper-four .hero-bg { background-color: var(--zemin); }
/* Perde HER durumda açık (temada yalnızca has-photo'da idi): placeholder da
   olsa gerçek fotoğraf da olsa yazı okunur. Fotoğraf alta doğru zemine ERİR —
   nerede bittiği belli olmaz; üstte de koyulaşır ki başlık çubuğu okunsun. */
/* İKİ SEÇİCİ BİRDEN — `.has-photo` de yazılmak ZORUNDA.
   Tema, hero'ya GERÇEK fotoğraf konduğunda `.has-photo` sınıfını ekliyor ve
   `.hero-wrapper-four .hero-bg.has-photo::after` (özgüllük 0,3,1) ile kendi
   perdesini uyguluyor: yalnızca soldan sağa karartan, ALTA DOĞRU ERİMEYEN bir
   gradyan. Placeholder'dayken bu sınıf yokken buradaki kural (0,2,1) çalışıyor
   ve erime doğru görünüyordu; gerçek fotoğraf konduğu an tema kuralı kazanıp
   hero'nun altında sert bir kesik bırakıyordu. Eşit özgüllükte yazıldığında
   sonra yüklendiği için bu dosya kazanır. */
.hero-wrapper-four .hero-bg::after,
.hero-wrapper-four .hero-bg.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* İKİ KATMAN, SIRASI ÖNEMLİ.
     1) DİKEY erime en ÜSTTE olmalı: %100'de opak zemine ulaşıp hero'yu sayfaya
        bağlayan dikişi o sağlıyor. Altına konsaydı yatay katman o opak satırı
        solda biraz daha koyultur ve hero'nun alt-solunda çizgi bırakırdı.
     2) YATAY perde: yazının olduğu SOL yarı koyu, sağ yarı açık. Böylece metin
        fotoğrafın sakin bölgesinde okunur (ölçüldü: sol üst std 26, orta 78) ve
        ızgara/alev/bakır sağda açıkta kalır — battaniye gibi tüm kareyi
        karartmak gerekmez. */
  background:
    linear-gradient(to bottom,
      rgba(10, 2, 1, .50) 0%,
      rgba(21, 5, 4, .12) 26%,
      rgba(21, 5, 4, .12) 58%,
      rgba(21, 5, 4, .50) 84%,
      var(--zemin) 100%),
    linear-gradient(90deg,
      rgba(10, 2, 1, .90) 0%,
      rgba(10, 2, 1, .78) 26%,
      rgba(10, 2, 1, .42) 48%,
      rgba(10, 2, 1, .12) 70%,
      rgba(10, 2, 1, .04) 100%);
}

/* Kapak: SOLA hizalı sütun.
   Ortalı dururken yazı, fotoğrafın en hareketli bandına (usta + maşa + ızgara)
   oturuyordu; okunabilirlik ancak tüm kareyi karartan kalın bir perdeyle
   sağlanıyor, fotoğrafın sıcaklığı ölüyordu. Sol üst bölge ölçülen en sakin
   alan — yazı oraya alındı, fotoğraf sağda nefes alıyor. */
.hero-kapak {
  width: 100%;
  max-width: 600px;
  margin-inline: 0 auto;
  text-align: left;
}
.hero-wrapper-four .hero-content .tag-line {
  font: 600 12.5px var(--body-font);
  letter-spacing: .30em;
  color: var(--altin);
  margin-bottom: 20px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
/* Başlık iki satıra DENGELİ kırılsın: "Her lokmada / aynı kalite".
   68px'te ilk satır doluyor, ikinci satırda tek başına "kalite" kalıyordu
   (550px'e karşı 173px) — blok sağ altından boş görünüyordu.

   Kırılımı `max-width: 7em` sağlıyor; ÖLÇÜLDÜ: "Her lokmada" 6,22em,
   "Her lokmada aynı" 8,09em. 7em ilkini alır, ikincisini almaz. Değer `em`
   olduğu için kutu punto ile birlikte büyür — kırılım her ekran genişliğinde
   AYNI kelimede olur, punto değişse de bozulmaz.

   Punto tavanı 96px: 6,22em × 96 ≈ 597px, yani 600px'lik kolonu doldurur. */
.hero-wrapper-four .hero-content h1 {
  font-size: clamp(38px, 5.9vw, 96px);
  max-width: 7em;
  line-height: 1.08;
  letter-spacing: .005em;
  text-transform: none;
  margin-bottom: 0;
  color: var(--krem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
/* Vurgulu kelime: kırmızı yerine italik altın — serif menülerin el yazısı tadı */
.hero-wrapper-four .hero-content h1 span {
  font-style: italic;
  font-weight: 600;
  color: var(--altin);
}
/* Süsleme: çizgi — elmas — çizgi (QR kapağıyla aynı; saf CSS, görsel yok) */
/* Süsleme: elmas SOL uçta, çizgi ondan sağa doğru söner.
   Önce ortalı bir ayraçtı (çizgi—elmas—çizgi); ortalı düzenden kalmıştı ve
   sola hizalı blokta simetrisi boşluğa asılı duruyordu. Artık paragraf
   işareti gibi sola çapalı. */
.hero-kapak__susleme {
  position: relative;
  display: block;
  width: 74px;
  height: 7px;
  margin: 26px 0 0;
}
.hero-kapak__susleme::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 15px;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(217, 167, 104, .75), rgba(217, 167, 104, 0));
}
.hero-kapak__susleme::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background-color: var(--altin);
}
.hero-wrapper-four .hero-content p {
  max-width: 42ch;
  margin: 24px 0 0;
  /* %65 opaklıkta ve 17px'te fotoğrafın üstünde silik kalıyordu; blokun ana
     gövde metni bu, arka planda durmamalı. */
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
  color: rgba(247, 241, 225, .84);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.hero-wrapper-four .hero-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 40px;
}

/* Dar ekranda "sol yarı" diye bir şey yok — kapak ORTAYA döner, perde de yatay
   değil dikey ağırlıklı olur (yoksa sol kenar aşırı koyulaşıp sağ kenar yanardı).

   DİKKAT: bu blok, üstteki hero kurallarının ARDINDAN gelmek ZORUNDA. Önce
   yukarıdaki genel medya sorgusuna yazılmıştı; özgüllükler eşit olduğu için
   kaynak sırası belirleyici oluyor ve masaüstü kuralları mobilde de kazanıp
   butonu sola yapıştırıyordu. */
@media (max-width: 1199px) {
  .hero-kapak { max-width: 720px; margin-inline: auto; text-align: center; }
  /* h1'in 7em'lik kutusu ortalı düzende sola yapışmasın */
  .hero-wrapper-four .hero-content h1 { margin-inline: auto; }
  /* Süsleme ortalı düzende yeniden simetrik: çizgi—elmas—çizgi */
  .hero-kapak__susleme { width: 190px; margin-left: auto; margin-right: auto; }
  .hero-kapak__susleme::before {
    left: 0;
    background: linear-gradient(to right, transparent, rgba(247, 241, 225, .32) 18%, rgba(247, 241, 225, .32) 82%, transparent);
  }
  .hero-kapak__susleme::after { left: 50%; transform: translateX(-50%) rotate(45deg); }
  .hero-wrapper-four .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-wrapper-four .hero-button { justify-content: center; }

  .hero-wrapper-four .hero-bg::after,
  .hero-wrapper-four .hero-bg.has-photo::after {
    background:
      linear-gradient(to bottom, rgba(10, 2, 1, .62) 0%, rgba(21, 5, 4, .40) 30%, rgba(21, 5, 4, .58) 76%, var(--zemin) 100%),
      radial-gradient(120% 80% at 50% 45%, rgba(10, 2, 1, 0) 30%, rgba(10, 2, 1, .55) 100%);
  }
}

/* --- Künye şeridi: saat / adres / telefon --------------------------------- */
.hero-kunye {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--cizgi-soluk);
}
.hero-kunye__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* flex + center: adres iki satıra düştüğünde diğer iki sütun yukarıda asılı
   kalmasın — üçü de kendi bandının dikey ortasında dursun. */
.hero-kunye__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 22px;
  text-align: center;
}
.hero-kunye__item + .hero-kunye__item { border-left: 1px solid var(--cizgi-soluk); }
.hero-kunye__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--altin);
}
.hero-kunye__value {
  display: block;
  margin-top: 9px;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--krem);
}
.hero-kunye__value a { transition: color .3s ease; }
.hero-kunye__value a:hover { color: var(--altin); }
@media (max-width: 767px) {
  /* Dar ekranda üç sütun sıkışıyordu → alt alta, ayraç çizgisi üste geçer */
  .hero-kunye__list { grid-template-columns: 1fr; }
  .hero-kunye__item { padding: 18px 16px; }
  .hero-kunye__item + .hero-kunye__item {
    border-left: none;
    border-top: 1px solid var(--cizgi-soluk);
  }
  .hero-kunye__value { font-size: 16px; }
}

/* Bağlantı hedefi yapışkan başlığın altında kalmasın (ileride biri
   #lezzetlerimiz'e bağlanırsa). */
#lezzetlerimiz { scroll-margin-top: 110px; }

/* =============================================================================
   Lezzet kartları (ana sayfa) — çift çerçeve + temiz fotoğraf
   ========================================================================== */
.taste-card {
  border-radius: 4px;
  border: 1px solid var(--cizgi);
  background-color: var(--panel);
}
.taste-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 3;
  border: 1px solid rgba(247, 241, 225, .22);
  border-radius: 2px;
  pointer-events: none;
}
.taste-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
}
.taste-card__overlay {
  background: linear-gradient(180deg, rgba(10, 2, 1, 0) 40%, rgba(10, 2, 1, .88) 100%);
}
.taste-card__title {
  font: 600 22px/1.25 var(--heading-font);
  text-transform: none;
  color: var(--krem);
}
.taste-card__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 241, 225, .7);
}

/* =============================================================================
   Neden Külek / Değerlerimiz kutuları — beyaz kutu → ince çerçeveli panel
   ========================================================================== */
.iconic-box.style-six {
  background-color: transparent;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
}
.iconic-box.style-six .icon { color: var(--altin); font-size: 64px; }
.iconic-box.style-six .content h4.title { font-size: 21px; font-weight: 600; }
.iconic-box.style-six .content p { font-size: 15px; font-weight: 400; color: var(--metin-soluk); }
/* Temanın hover'ı kutuyu kırmızıya boyuyordu; loş salonda kutu yalnızca ısınır */
.iconic-box.style-six:hover {
  background-color: var(--panel);
  border-color: rgba(217, 167, 104, .45);
}
.iconic-box.style-six:hover .icon,
.iconic-box.style-six:hover .content h4.title { color: var(--altin); }
.iconic-box.style-six:hover .content p { color: var(--metin-soluk); }

/* =============================================================================
   Sayfa başlığı bandı (iç sayfalar) — fotoğraf zemine erir, ortalı serif başlık
   ========================================================================== */
.page-banner .page-bg-wrapper { position: relative; }
.page-banner .page-bg-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 2, 1, .55) 0%, rgba(21, 5, 4, .55) 55%, var(--zemin) 100%);
}
.page-banner .container { position: relative; }

/* Geçiş burada BİLİNÇLİ olarak süslemesizdir: fotoğraf yukarıdaki gradyanla
   sayfa zeminine erir, altındaki bölümün kendi üst dolgusu (pt-100…pt-130)
   nefes payını verir. Bir ara buraya kural + altın mühürden oluşan bir ayraç
   konmuştu; müşteri sade geçişi tercih etti, kaldırıldı. Ana sayfa da aynı
   şekilde çalışır (hero'nun kendi alt gradyanı + .category-section'ın pt-130'u)
   — iki tarafta da ek bir öğe ya da dolgu ayarı yoktur. */

.page-banner-content h1 {
  font-size: 56px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--krem);
}
@media (max-width: 1199px) { .page-banner-content h1 { font-size: 40px; line-height: 1.2; } }
.page-banner-content ul.breadcrumb-link li {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.page-banner-content ul.breadcrumb-link li.active { color: var(--altin); }

/* =============================================================================
   Menü sayfası — bölümler koyu, çeşit kartları basılı menü satırı
   ========================================================================== */
.menu-page-section.gray-bg { background-color: #1A0605; }
.menu-item.style-three {
  background-color: transparent;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
}
.menu-item.style-three .menu-info h4.title { font-size: 22px; font-weight: 600; }
.menu-item.style-three .menu-info p { font-size: 15px; color: var(--metin-soluk); }
.menu-item.style-three .menu-info p.price {
  font: 600 26px var(--heading-font);
  color: var(--altin);
}
.menu-item.style-three .menu-thumbnail,
.menu-item.style-three .menu-thumbnail img { border-radius: 3px; }
.menu-image-box { border-radius: 4px; border: 1px solid var(--cizgi-soluk); }

/* --- Menü sayfası: ürün satırı ---------------------------------------------
   Basılı menü dili: solda kare fotoğraf, sağda ad — noktalı kılavuz — fiyat,
   altında açıklama ve ölçüler. QR menüdeki ürün kartıyla aynı sözlük. */
.urun {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--cizgi-soluk);
  border-radius: 4px;
  transition: border-color .35s ease, background-color .35s ease;
}
.urun:hover {
  border-color: var(--cizgi);
  background-color: rgba(247, 241, 225, .02);
}
.urun__foto {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  border: 1px solid var(--cizgi-soluk);
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--panel);
}
/* İç keyline — kart ailesiyle aynı çift çerçeve */
.urun__foto::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(247, 241, 225, .14);
  pointer-events: none;
}
.urun__foto img { width: 100%; height: 100%; object-fit: cover; }

.urun__ic { flex: 1 1 auto; min-width: 0; }
/* baseline: ad ile fiyat aynı çizgiye otursun; noktalı kılavuz da o çizgide */
.urun__ust { display: flex; align-items: baseline; gap: 10px; }
.urun__ad {
  flex: 0 1 auto;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--krem);
}
.urun__nokta {
  flex: 1 1 auto;
  min-width: 14px;
  border-bottom: 1px dotted rgba(247, 241, 225, .30);
  transform: translateY(-4px);
}
.urun__fiyat {
  flex: 0 0 auto;
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--altin);
}
.urun__aciklama {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--metin-soluk);
}
.urun__olcu {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 241, 225, .42);
}
/* Kategori başlıkları arası nefes payı */
.menu-page-section .section-title.mt-70 { margin-top: 70px; }

.menu-not {
  max-width: 68ch;
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi-soluk);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: rgba(247, 241, 225, .45);
}

@media (max-width: 575px) {
  .urun { gap: 14px; padding: 13px; }
  .urun__foto { width: 84px; height: 84px; }
  .urun__ad, .urun__fiyat { font-size: 17px; }
  .menu-page-section .section-title.mt-70 { margin-top: 50px; }
}

/* =============================================================================
   Hakkımızda — metin kutuları + fotoğraflı pankart
   ========================================================================== */
.intro-wrapper_two .text-box h3 {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--krem);
}
.intro-wrapper_two .text-box p { color: var(--metin-soluk); }
.about-image-box { border-radius: 4px; border: 1px solid var(--cizgi-soluk); }
/* Pankart: fotoğrafın üstüne loş perde; yazı her fotoğrafta okunur */
.intro-wrapper_two .play-wrapper { position: relative; border-radius: 4px; overflow: hidden; }
.intro-wrapper_two .play-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 2, 1, .55);
}
.intro-wrapper_two .play-wrapper h2 {
  position: relative;
  font-weight: 600;
  letter-spacing: .04em;
}

/* =============================================================================
   Galeri — bento kareleri çerçevelenir
   ========================================================================== */
.bento__item {
  border-radius: 4px;
  border: 1px solid var(--cizgi-soluk);
  background-color: var(--panel);
}
.bento__zoom { background: rgba(10, 2, 1, .6); color: var(--altin); }

/* Ana sayfa galeri şeridi bitişik kareler — aralarına ince çizgi */
.gallery-item.style-two .gallery-img { outline: 1px solid rgba(10, 2, 1, .8); }

/* =============================================================================
   İletişim — form ve bilgi paneli
   ========================================================================== */
.form_control {
  background-color: rgba(247, 241, 225, .05);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  color: var(--krem);
}
.form_control::placeholder { color: rgba(247, 241, 225, .45); }
.form_control:focus {
  background-color: rgba(247, 241, 225, .07);
  border-color: rgba(217, 167, 104, .55);
}
.form-status--success { background: rgba(20, 168, 58, .12); color: #7BE49B; border-color: rgba(123, 228, 155, .35); }
.form-status--error   { background: rgba(191, 17, 9, .12);  color: var(--kirmizi-acik); border-color: rgba(228, 87, 77, .38); }
.form-error { color: var(--kirmizi-acik); }

.contact-panel {
  background-color: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  box-shadow: none;
}
.contact-panel__row + .contact-panel__row { border-top: 1px solid var(--cizgi-soluk); }
.contact-panel__icon {
  background-color: rgba(247, 241, 225, .06);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  color: var(--altin);
}
.contact-panel__label {
  font-family: var(--body-font);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--altin);
}
.contact-panel__value { font-size: 20px; font-weight: 600; color: var(--krem); }
.contact-panel__value a:hover { color: var(--altin); }

/* Harita — koyu karo katmanına geçti (map.js). Yükleme zemini ve künye kutucuğu
   da o tona çekilir; yoksa karolar inene kadar beyaz bir kare parlıyor. */
.map-card { background: #14100E; }
.map-card__canvas { background: #14100E; }
.map-card__attrib {
  background: rgba(10, 2, 1, .62);
  color: rgba(247, 241, 225, .62);
  border-radius: 3px;
}

/* =============================================================================
   CTA bandı — bordo yerine kor; butonlar loş salon diline döner
   ========================================================================== */
.kulek-cta {
  background-color: #2A0705;
  border-top: 1px solid var(--cizgi-soluk);
  border-bottom: 1px solid var(--cizgi-soluk);
}
.kulek-cta h2 { color: var(--krem); }
.kulek-cta p  { color: var(--metin-soluk); }
.kulek-cta .theme-btn.style-one {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}
/* Sitedeki diğer birincil butonlarla aynı hover — CTA'nın kendi bordo zemini
   var ama buton dili her yerde tek olmalı. */
.kulek-cta .theme-btn.style-one:hover,
.kulek-cta .theme-btn.style-one:focus {
  background-color: var(--kor-parlak);
  border-color: var(--kor-parlak);
  color: #ffffff;
}
.kulek-cta .theme-btn.style-two {
  background-color: transparent;
  color: var(--krem);
  border: 1px solid var(--cizgi);
}
.kulek-cta .theme-btn.style-two:hover,
.kulek-cta .theme-btn.style-two:focus {
  background-color: transparent;
  color: var(--altin);
  border-color: var(--altin);
}

/* =============================================================================
   Footer — zeminden bir ton koyu; serif başlıklar
   ========================================================================== */
.footer-default {
  background-color: var(--zemin-dis);
  border-top: 1px solid var(--cizgi-soluk);
  color: var(--metin-soluk);
}
.footer-widget h4.widget-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--krem);
}
.footer-widget.footer-about-widget ul.social-link li a {
  background-color: transparent;
  border: 1px solid var(--cizgi);
  color: var(--krem);
}
.footer-widget.footer-about-widget ul.social-link li a:hover {
  background-color: transparent;
  border-color: var(--altin);
  color: var(--altin);
}
.footer-widget.footer-nav-widget .widget-content ul.widget-menu li a:hover,
.footer-widget.footer-contact-widget .widget-content ul.address-list li a:hover { color: var(--altin); }
.copyright-area { border-top: 1px solid var(--cizgi-soluk); }

/* Yasal metin bağlantıları — telif satırının üstünde kendi sırası.
   Aralarında ince ayraç çizgileri var: basılı menüdeki saç teli diliyle aynı.
   Ayraç çizgi, "·" karakteriyle değil kenarlıkla çizilir; satır sarınca
   sonda boşta kalan bir nokta bırakmaz. */
.legal-links {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cizgi-soluk);
}
.legal-links ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
}
.legal-links li { display: block; }
.legal-links li + li { border-left: 1px solid var(--cizgi); }
.legal-links a {
  display: block;
  padding: 2px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--metin-soluk);
  transition: color .3s ease;
}
/* İlk bağlantının solunda kenarlık yok; hizası telif satırıyla aynı olsun. */
.legal-links li:first-child a { padding-left: 0; }
.legal-links a:hover { color: var(--altin); }

@media (max-width: 575px) {
  .legal-links ul { justify-content: center; }
  /* Dar ekranda satır sarılınca dikey ayraçlar yanlış yerlere düşüyordu */
  .legal-links li + li { border-left: none; }
  .legal-links a { padding: 2px 10px; }
  .legal-links li:first-child a { padding-left: 10px; }
}

/* =============================================================================
   Yasal sayfalar + çerez bandı + durum kutuları
   ========================================================================== */
.legal__toc {
  background: var(--panel);
  border: 1px solid var(--cizgi-soluk);
  border-radius: 4px;
}
.legal__toc a { color: var(--metin-soluk); transition: color .3s ease; }
.legal__toc a:hover { color: var(--altin); }
.legal__updated { color: rgba(247, 241, 225, .45); opacity: 1; }
/* Metin içindeki bağlantılar (e-posta, telefon, kurum siteleri) */
.legal a { color: var(--altin); }
.legal a:hover { color: var(--krem); }
.legal strong { color: var(--krem); }
/* İletişim/veri sorumlusu kutusu — tema burada AÇIK gri bir kart kullanıyordu,
   koyu sayfada krem yazıyla birlikte okunmuyordu. */
.legal address {
  background: var(--panel);
  border: 1px solid var(--cizgi-soluk);
  border-radius: 4px;
  color: var(--metin-soluk);
}
/* Madde işaretleri: tema `ul { list-style: none }` dediği için yasal metinlerin
   listeleri işaretsiz, girintili satırlar hâlinde akıyordu — nerede başlayıp
   bittikleri seçilmiyordu. Sayfanın süsleme diliyle aynı küçük elmas konur.
   `.legal > ul` yalnızca İÇERİK listelerini seçer; içindekiler listesi
   (.legal__toc ul) doğrudan çocuk olmadığı için etkilenmez. */
.legal > ul { padding-left: 2px; }
.legal > ul > li { position: relative; padding-left: 22px; }
.legal > ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background-color: var(--altin);
  opacity: .75;
}

/* --- Bildirim balonları (iletişim formu) ---------------------------------
   Tema balonu BEYAZ bir karttı: koyu sayfanın üstünde ekrana yapıştırılmış
   bir yabancı gibi duruyordu. Sayfanın diliyle yeniden kuruldu — koyu panel,
   saç teli çerçeve, 4px köşe, serif başlık.
   Durum renkleri QR menüden geliyor: yeşil "açık" rozetiyle, kırmızı alerjen
   kutusuyla aynı tonlar. Yeşil burada süs değil, DURUM bilgisi taşıdığı için
   kalır (marka paletindeki yeşil yasağı dekoratif kullanım içindi). */
.kulek-toast {
  background-color: #1E0806;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .55);
}
.kulek-toast__icon { border-radius: 3px; }
.kulek-toast__title {
  letter-spacing: .10em;
  color: var(--krem);
}
.kulek-toast__text { color: var(--metin-soluk); }
.kulek-toast__close {
  border-radius: 50%;
  color: rgba(247, 241, 225, .45);
}
.kulek-toast__close:hover {
  background-color: rgba(247, 241, 225, .08);
  color: var(--krem);
}
/* Süre çubuğu koyu zeminde silik kalmasın diye altına ince bir yatak konur */
.kulek-toast__bar { opacity: .9; }

.kulek-toast--success .kulek-toast__icon {
  background-color: rgba(20, 168, 58, .14);
  color: #7BE49B;
}
.kulek-toast--success .kulek-toast__bar { background-color: #7BE49B; }

.kulek-toast--error .kulek-toast__icon {
  background-color: rgba(191, 17, 9, .16);
  color: var(--kirmizi-acik);
}
.kulek-toast--error .kulek-toast__bar { background-color: var(--kirmizi-acik); }
.cookie-bar {
  background: #1A0605;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
}

/* =============================================================================
   Ufak düzeltmeler
   ========================================================================== */
/* Hata sayfası ve boş durum metinleri zaten gövde renginden okunur. */
/* nice-select açık kenarlığı (kullanılan sayfa yok ama güvence) */
.nice-select { background: transparent; border-color: var(--cizgi); color: var(--krem); }

/* =============================================================================
   MOBİL DÜZELTMELERİ
   -----------------------------------------------------------------------------
   Gerçek cihaz ölçümüyle (390×844, iPhone 12) bulunan sorunlar. Hepsi yalnızca
   dar ekranı ilgilendirir; masaüstü görünüm birebir aynı kalır. Tasarım dili
   değiştirilmez — yalnızca parmakla kullanılabilirlik ve okunabilirlik.
   ========================================================================== */

/* --- 1) "Yukarı çık" butonu telefonda içeriğin üstüne biniyordu -------------
   Sağ altta sabit duran 50px'lik daire, menü sayfasında o anda ekranda olan
   ürünün FİYATINI kapatıyordu. Fiyat, menüdeki en kritik bilgi; onu bir
   gezinme kolaylığı için feda edemeyiz. Telefonda buton kaldırıldı (parmakla
   kaydırma zaten hızlı), tablet ve masaüstünde aynen duruyor.
   Tema jQuery ile fadeIn yaparken satır içi `display:block` yazdığı için
   !important şart. */
@media (max-width: 575px) {
  .back-to-top { display: none !important; }
}

/* --- 2) Üst şerit: 11.5px yazı ve 25px'lik dokunma alanı -------------------
   Telefon numarası mobildeki en değerli eylem ama parmak hedefi 25px'ti
   (önerilen ölçü 44px). Yazı bir punto büyütüldü, şerit 44px'e çıkarıldı ve
   dokunma alanı öğenin tamamına yayıldı. */
@media (max-width: 767px) {
  .topbar { font-size: 12.5px; }
  .topbar__inner { min-height: 44px; }
  .topbar__oge {
    min-height: 44px;
    padding: 6px 2px;
  }
}

/* --- 3) Alt bilgideki yasal bağlantılar --------------------------------------
   Dört bağlantı 24px yükseklikte ve yan yana sıkışıktı; yanlışına basmak
   kolaydı. Dokunma alanı 40px'e çıkarıldı, aralar açıldı. */
@media (max-width: 575px) {
  .legal-links ul { gap: 2px 6px; }
  .legal-links a { padding: 9px 10px; }
  .legal-links li:first-child a { padding-left: 10px; }
}

/* --- 3b) Diğer küçük dokunma hedefleri --------------------------------------
   Ölçüm sonrası kalan üç yer. Sıralama önem sırasına göre: mobil menünün
   içindeki telefon satırı (23px) en kritiğiydi — menüyü açan kişi zaten
   aramak üzere açıyor. Ardından alt bilgideki gezinme/iletişim bağlantıları
   ve iletişim sayfasındaki telefon/e-posta. Harita künyesi (OpenStreetMap ·
   CARTO) bilerek DIŞARIDA bırakıldı: tıklanmak için değil, kaynak belirtmek
   için duruyor ve büyütülürse sayfada gereksiz yer kaplar. */
@media (max-width: 767px) {
  /* Mobil menü: telefon / adres / saat satırları */
  .mobile-menu-info__row {
    margin-bottom: 6px;
    padding: 9px 0;
  }
  /* Alt bilgi: gezinme listeleri ve iletişim satırları */
  .footer-widget ul li a,
  .footer-widget .footer-contact-list li a {
    display: inline-block;
    padding: 6px 0;
  }
  /* İletişim sayfası: telefon ve e-posta */
  .contact-panel__value a {
    display: inline-block;
    padding: 6px 0;
  }
  /* Sayfa başlığı bandındaki "Ana Sayfa" kırıntısı */
  .page-banner-content ul.breadcrumb-link li a {
    display: inline-block;
    padding: 5px 0;
  }
}
/* Cümle içinde geçen bağlantılar (çerez bandı, yasal metinler) bilerek
   büyütülmedi: paragrafın satır aralığını bozar ve metin "zıplar". Yaygın
   kabul, akış içindeki metin bağlantılarını bu kuralın dışında tutar. */

/* --- 4) Ana sayfa telefonda 9773px (~12 ekran) uzunluğundaydı ---------------
   Lezzet kartları kare (1/1) olduğu için her kart neredeyse tam ekran
   kaplıyordu. Telefonda 4/3'e alındı: fotoğraf `cover` ile kırpıldığı için
   görsel kalite aynı kalır, sayfa ~1 000px kısalır ve kullanıcı menüye daha
   çabuk ulaşır. Kartlar arası boşluk da bir tık daraltıldı. */
@media (max-width: 575px) {
  .taste-card { aspect-ratio: 4 / 3; }
  .taste-card.mb-40 { margin-bottom: 24px; }
}

/* --- 5) Menü satırında fiyat hizası -----------------------------------------
   Dar ekranda uzun ürün adı iki satıra kırılınca, ad ile fiyat arasındaki
   noktalı kılavuz 5-6 noktaya düşüyor ve satır dağınık görünüyordu. Telefonda
   kılavuz kaldırıldı; fiyat sağa yaslanarak adın ilk satırıyla hizalı kalıyor
   (basılı menü mantığı korunur, artık kasıtlı görünür). */
@media (max-width: 575px) {
  .urun__nokta { display: none; }
  .urun__fiyat { margin-left: auto; }
}

/* --- 8) Sayfa kaydırıldıktan sonra mobil menü AÇILMIYORDU -------------------
   Belirti: kullanıcı aşağı kaydırıp hamburgere basınca çekmece açılıyor ama
   yalnızca logonun olduğu ~86px'lik bir şerit görünüyor; bağlantılar yok.
   Sayfanın en üstündeyken sorun yok.

   Sebep: yapışkan başlığa `backdrop-filter: blur(12px)` uygulanıyor. CSS'te
   backdrop-filter uygulanan bir öğe, İÇİNDEKİ `position: fixed` öğeler için
   yeni bir "içeren blok" oluşturur (transform ile aynı etki). Mobil çekmece
   (.foodix-nav-menu) başlığın İÇİNDE duruyor ve `height: 100%` ile açılıyor:
   kaydırma başlayıp `.sticky` sınıfı eklendiği anda bu %100, ekranın değil
   BAŞLIĞIN yüksekliği (86px) oluyor — çekmece bir şeride iniyor.

   Çözüm: çekmecenin var olduğu genişliklerde (<1200px) blur kaldırıldı.
   Görsel kayıp yok denecek kadar az: zemin zaten %92 opak, %97'ye çekildi.
   Masaüstünde çekmece yok (menü başlık içinde yatay durur), orada blur aynen
   devam ediyor. Çekmeceyi başlığın dışına taşımak da bir seçenekti ama aynı
   öğe masaüstünde yatay menü olarak kullanılıyor; taşımak temayı bozardı. */
@media (max-width: 1199px) {
  .header-area.sticky,
  .header-area.header-one.sticky,
  .header-area.header-two.sticky {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(14, 3, 2, .97);
  }
}

/* --- 7) Ana sayfa "Hakkımızda" görseli dikey olarak eziliyordu --------------
   Görselin HTML'inde width="1129" height="1393" öznitelikleri var. Temanın
   global kuralı `img { max-width: 100% }` GENİŞLİĞİ 364px'e indiriyor ama
   yüksekliği elinden geldiğince 1393px'te bırakıyordu: fotoğraf 1.23 olması
   gereken oranda değil, 3.83 oranında — yani %68 gerilmiş — çiziliyordu.
   1200px üstünde sorun görünmüyordu, çünkü orada ayrı bir kural devreye girip
   `object-fit: cover` uyguluyor (style.css → "Hakkımızda bloğu" bölümü).

   `height: auto` öznitelikteki yüksekliği iptal eder; oran korunur. Öznitelikler
   YERİNDE BIRAKILDI: tarayıcı görsel inmeden yer ayırdığı için sayfa zıplamaz
   (CLS). Bu, öznitelikli görsellerde standart eşliktir. */
@media (max-width: 1199px) {
  .about-section .about-image-box img {
    width: 100%;
    height: auto;
  }
}

/* --- 6) Hareketi azaltma tercihi --------------------------------------------
   İşletim sisteminde "hareketi azalt" açık olan ziyaretçide (baş dönmesi,
   vestibüler duyarlılık) tüm giriş animasyonları ve kaydırma yumuşatması
   kapanır. Telefonda WOW.js zaten devre dışı (theme.js → mobile: false);
   bu kural masaüstünü de kapsar. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .wow { visibility: visible !important; }
}