/* =========================================================
   MEŞHUR SARIYER BÖREKÇİSİ
   assets/css/style.css
   Mobil öncelikli tasarım.
   Harici font, framework veya CDN bağımlılığı yoktur.
   ========================================================= */
/* =========================================================
   BÖLÜM: Design Tokens
   ========================================================= */
:root {
  /* Renk */
  --renk-marka: #7a4a25;
  --renk-marka-koyu: #573317;
  --renk-marka-acik: #ead8c8;
  --renk-vurgu: #b8782e;
  --renk-metin: #29241f;
  --renk-metin-soluk: #5a534b;
  --renk-zemin: #f8f4ee;
  --renk-zemin-alt: #efe7dc;
  --renk-kart: #fffcf8;
  --renk-kenarlik: #d8c9ba;
  --renk-basari: #37694e;
  --renk-uyari: #7d4d13;
  --renk-yakinda-zemin: #f3e3c4;
  --renk-yakinda-metin: #6c4314;
  --renk-focus: #1769aa;
  /* Yardımcı renk tokenları */
  --renk-marka-kontrast: #fffaf4;
  /* Alt bilgi sitenin kendi kahverengisinde kalıyor (koyu/siyah denendi, istenmedi).
     Ölçülen kontrastlar #573317 zemininde (09.09.2026): metin 9,36 · soluk 7,60 ·
     etiket 5,87 · telefon 7,09 · rozet 8,01 — hepsi AA üstü. Beşi de bekçi testinde. */
  --renk-footer-zemin: #573317;
  --renk-footer-metin: #f5eade;
  --renk-footer-soluk: #e2d3c6;
  --renk-footer-etiket: #e9b366;
  --renk-footer-vurgu: #f5c877;
  --renk-footer-rozet-zemin: #ead8c8;
  --renk-footer-rozet-metin: #573317;
  --renk-footer-cizgi: #8a5a33;
  --renk-pasif: #514a43;
  --renk-pasif-zemin: #e9e2da;
  /* Tipografi */
  --font-baslik: Georgia, "Times New Roman", serif;
  --font-govde: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3.5rem;
  --fw-normal: 400;
  --fw-orta: 600;
  --fw-kalin: 700;
  --lh-sik: 1.1;
  --lh-normal: 1.5;
  --lh-genis: 1.7;
  --ls-baslik: -0.02em;
  --ls-rozet: 0.06em;
  /* Boşluk */
  --bosluk-1: 0.25rem;
  --bosluk-2: 0.5rem;
  --bosluk-3: 0.75rem;
  --bosluk-4: 1rem;
  --bosluk-5: 1.25rem;
  --bosluk-6: 1.5rem;
  --bosluk-8: 2rem;
  --bosluk-10: 2.5rem;
  --bosluk-12: 3rem;
  --bosluk-16: 4rem;
  --bolum-bosluk-mobil: 4rem;
  --bolum-bosluk-masaustu: 6rem;
  --icerik-genislik: 75rem;
  /* Biçim */
  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.5rem;
  --radius-tam: 999rem;
  --golge-s: 0 0.25rem 1rem rgba(52, 38, 25, 0.06);
  --golge-m: 0 0.75rem 2rem rgba(52, 38, 25, 0.09);
  --golge-l: 0 1.5rem 3rem rgba(52, 38, 25, 0.12);
  --gecis-hizli: 150ms ease;
  --gecis-normal: 250ms ease;
  /* Boyut / düzen */
  --dokunma-min: 2.75rem;
  --ikon-boyut: 1.25rem;
  --ikon-buyuk-boyut: 2rem;
  --ikon-kucuk-boyut: 1rem;
  --header-yukseklik: 4.75rem;
  --mobil-bar-yukseklik: 4.5rem;
  --mobil-bar-esik: 180px;
  --cizgi-ince: 0.0625rem;
  --cizgi-orta: 0.125rem;
  --focus-kalinlik: 0.1875rem;
  --focus-ofset: 0.1875rem;
  --harita-yukseklik: 20rem;
  --gorsel-min-yukseklik: 19rem;
  --icerik-dar: 44rem;
  --icerik-orta: 52rem;
  --opacity-pasif: 1;
  /* Hero / dekorasyon */
  --hero-dekor-buyuk: 24rem;
  --hero-dekor-kucuk: 13rem;
  --hero-dekor-ofset: -7rem;
  --desen-boyut: 2rem;
  --scroll-offset: 6rem;
}
/* =========================================================
   BÖLÜM: Reset / Normalize
   Tek teknik istisna: reset bloğunda temel sabitler kullanılabilir.
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  min-width: 0;
}
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  border: 0;
}
a {
  color: inherit;
}
table {
  border-collapse: collapse;
}
/* =========================================================
   BÖLÜM: Temel Sayfa
   ========================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}
body {
  overflow-x: hidden;
  color: var(--renk-metin);
  background: var(--renk-zemin);
  font-family: var(--font-govde);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-acik {
  overflow: hidden;
}
main {
  min-width: 0;
}
a {
  text-decoration: none;
}
button {
  color: inherit;
}
::selection {
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka);
}
/* Hedefe atlandığında odak alan bölümde görünür çerçeve olmasın,
   ama odak yönetimi çalışsın. */
[tabindex="-1"]:focus {
  outline: none;
}
/* =========================================================
   BÖLÜM: Erişilebilirlik
   ========================================================= */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: var(--bosluk-3);
  left: var(--bosluk-3);
  padding: var(--bosluk-3) var(--bosluk-4);
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka-koyu);
  border-radius: var(--radius-s);
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
  transform: translateY(-200%);
  transition: transform var(--gecis-hizli);
}
.skip-link:focus {
  transform: translateY(0);
}
:focus-visible {
  outline: var(--focus-kalinlik) solid var(--renk-focus);
  outline-offset: var(--focus-ofset);
}
/* =========================================================
   BÖLÜM: Ortak Yerleşim
   ========================================================= */
.kapsayici {
  width: min(
    calc(100% - (var(--bosluk-5) * 2)),
    var(--icerik-genislik)
  );
  margin-inline: auto;
}
.bolum {
  padding-block: var(--bolum-bosluk-mobil);
}
.bolum-basi {
  max-width: var(--icerik-dar);
  margin-bottom: var(--bosluk-8);
}
.bolum-baslik {
  color: var(--renk-metin);
  font-family: var(--font-baslik);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
  letter-spacing: var(--ls-baslik);
}
.bolum-aciklama {
  /* --icerik-dar tek başına 1440 px'te 88 karakterlik satır veriyordu; rahat
     okuma bandı 45-75 karakter. 68ch sınırı yazı tipi ayarıyla birlikte
     ölçekleniyor, sabit piksel gibi kırılmıyor. (05.09.2026) */
  max-width: min(var(--icerik-dar), 68ch);
  margin-top: var(--bosluk-4);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-base);
  line-height: var(--lh-genis);
}
.ikon {
  width: var(--ikon-boyut);
  height: var(--ikon-boyut);
  flex: 0 0 auto;
}
.ikon-buyuk {
  width: var(--ikon-buyuk-boyut);
  height: var(--ikon-buyuk-boyut);
}
.ikon-kucuk {
  width: var(--ikon-kucuk-boyut);
  height: var(--ikon-kucuk-boyut);
}
/* =========================================================
   BÖLÜM: Butonlar
   ========================================================= */
.btn {
  display: inline-flex;
  min-height: var(--dokunma-min);
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-3) var(--bosluk-5);
  border: var(--cizgi-ince) solid transparent;
  border-radius: var(--radius-m);
  font-size: var(--fs-sm);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--gecis-hizli),
    border-color var(--gecis-hizli),
    color var(--gecis-hizli),
    transform var(--gecis-hizli),
    box-shadow var(--gecis-hizli);
}
.btn-birincil {
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka);
  border-color: var(--renk-marka);
  box-shadow: var(--golge-s);
}
.btn-birincil:hover {
  background: var(--renk-marka-koyu);
  border-color: var(--renk-marka-koyu);
  transform: translateY(calc(var(--bosluk-1) * -0.5));
}
.btn-ikincil {
  color: var(--renk-marka-koyu);
  background: transparent;
  border-color: var(--renk-marka);
}
.btn-ikincil:hover {
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka);
}
.btn-sade {
  justify-content: flex-start;
  min-height: var(--dokunma-min);
  padding-inline: 0;
  color: var(--renk-marka-koyu);
  background: transparent;
  border-radius: var(--radius-s);
}
.btn-sade::after {
  content: "\2192";
  transition: transform var(--gecis-hizli);
}
.btn-sade:hover::after {
  transform: translateX(var(--bosluk-1));
}
.btn-pasif {
  color: var(--renk-pasif);
  background: var(--renk-pasif-zemin);
  border-color: var(--renk-kenarlik);
  box-shadow: none;
  cursor: not-allowed;
  opacity: var(--opacity-pasif);
}
.btn-pasif:hover {
  color: var(--renk-pasif);
  background: var(--renk-pasif-zemin);
  border-color: var(--renk-kenarlik);
  transform: none;
}
/* =========================================================
   BÖLÜM: Rozetler / Placeholder
   ========================================================= */
.rozet {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--radius-tam);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
  letter-spacing: var(--ls-rozet);
  text-transform: uppercase;
}
.rozet-notr {
  color: var(--renk-marka-koyu);
  background: var(--renk-marka-acik);
}
.rozet-yakinda {
  color: var(--renk-yakinda-metin);
  background: var(--renk-yakinda-zemin);
  border: var(--cizgi-ince) solid var(--renk-vurgu);
}
.doldurulacak {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: var(--bosluk-1) var(--bosluk-2);
  color: var(--renk-metin-soluk);
  background: var(--renk-zemin);
  border: var(--cizgi-ince) dashed var(--renk-metin-soluk);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-rozet);
  overflow-wrap: anywhere;
}
/* =========================================================
   BÖLÜM: Header
   ========================================================= */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: var(--renk-kart);
  border-bottom: var(--cizgi-ince) solid var(--renk-kenarlik);
  box-shadow: var(--golge-s);
}
.site-header-ic {
  position: relative;
  display: flex;
  min-height: var(--header-yukseklik);
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-4);
}
.marka {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--bosluk-2);
  border-radius: var(--radius-s);
}
.marka-adi {
  color: var(--renk-marka-koyu);
  font-family: var(--font-baslik);
  font-size: var(--fs-lg);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
  letter-spacing: var(--ls-baslik);
}
.marka-konum {
  margin-top: var(--bosluk-1);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  line-height: var(--lh-sik);
}
.mobil-menu-btn {
  display: inline-flex;
  width: var(--dokunma-min);
  height: var(--dokunma-min);
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--renk-marka-koyu);
  background: var(--renk-zemin);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition:
    color var(--gecis-hizli),
    background-color var(--gecis-hizli),
    border-color var(--gecis-hizli);
}
.mobil-menu-btn:hover {
  background: var(--renk-zemin-alt);
  border-color: var(--renk-marka-acik);
}
.ikon-kapat {
  display: none;
}
.mobil-menu-btn[aria-expanded="true"] .ikon-hamburger {
  display: none;
}
.mobil-menu-btn[aria-expanded="true"] .ikon-kapat {
  display: block;
}
.ana-menu {
  position: absolute;
  top: calc(100% + var(--bosluk-2));
  right: 0;
  left: 0;
  display: none;
  padding: var(--bosluk-4);
  color: var(--renk-metin);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
  box-shadow: var(--golge-m);
}
.ana-menu.menu-acik {
  display: block;
}
.menu-liste-nav {
  display: grid;
  gap: var(--bosluk-1);
  list-style: none;
}
.menu-link {
  position: relative;
  display: flex;
  min-height: var(--dokunma-min);
  align-items: center;
  padding: var(--bosluk-3) var(--bosluk-4);
  color: var(--renk-metin);
  border-radius: var(--radius-m);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
  transition:
    color var(--gecis-hizli),
    background-color var(--gecis-hizli);
}
.menu-link:hover {
  color: var(--renk-marka-koyu);
  background: var(--renk-zemin-alt);
}
.menu-link.aktif {
  color: var(--renk-marka-koyu);
  background: var(--renk-marka-acik);
}
.header-btn {
  width: 100%;
  margin-top: var(--bosluk-3);
}
/* =========================================================
   BÖLÜM: Hero
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  background:
    linear-gradient(
      135deg,
      var(--renk-zemin) 0%,
      var(--renk-zemin-alt) 55%,
      var(--renk-marka-acik) 100%
    );
}
.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  border-radius: var(--radius-tam);
  pointer-events: none;
}
.hero::before {
  width: var(--hero-dekor-buyuk);
  height: var(--hero-dekor-buyuk);
  top: var(--hero-dekor-ofset);
  right: var(--hero-dekor-ofset);
  background:
    radial-gradient(
      circle,
      var(--renk-marka-acik) 0%,
      transparent 68%
    );
}
.hero::after {
  width: var(--hero-dekor-kucuk);
  height: var(--hero-dekor-kucuk);
  right: var(--bosluk-4);
  bottom: calc(var(--hero-dekor-ofset) * 0.5);
  border: var(--cizgi-orta) dashed var(--renk-vurgu);
  opacity: 0.68;
}
.hero-ic {
  padding-block: var(--bolum-bosluk-mobil);
}
.hero-baslik {
  max-width: var(--icerik-dar);
  margin-top: var(--bosluk-5);
  color: var(--renk-metin);
  font-family: var(--font-baslik);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
  letter-spacing: var(--ls-baslik);
}
.hero-metin {
  max-width: var(--icerik-dar);
  margin-top: var(--bosluk-5);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-lg);
  line-height: var(--lh-genis);
}
.hero-butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-6);
}
.hero-butonlar .btn {
  flex: 1 1 auto;
}
.hero-saat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-6);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-sm);
}
.hero-saat-etiket {
  font-weight: var(--fw-orta);
}
/* =========================================================
   BÖLÜM: Hızlı Erişim
   ========================================================= */
.bolum-hizli {
  padding-block: var(--bosluk-6);
  background: var(--renk-kart);
  border-top: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-bottom: var(--cizgi-ince) solid var(--renk-kenarlik);
}
.hizli-erisim {
  display: grid;
  gap: var(--bosluk-4);
}
.hizli-kart {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--bosluk-3);
  padding: var(--bosluk-5);
  background: var(--renk-zemin);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
  transition:
    border-color var(--gecis-normal),
    transform var(--gecis-normal),
    box-shadow var(--gecis-normal);
}
.hizli-kart:hover {
  border-color: var(--renk-marka-acik);
  box-shadow: var(--golge-s);
  transform: translateY(calc(var(--bosluk-1) * -1));
}
.hizli-kart > .ikon {
  color: var(--renk-marka);
}
.hizli-ust {
  color: var(--renk-metin);
  font-family: var(--font-baslik);
  font-size: var(--fs-xl);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
}
.hizli-alt {
  color: var(--renk-metin-soluk);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
/* =========================================================
   BÖLÜM: Menü
   ========================================================= */
.bolum-menu {
  background: var(--renk-zemin);
}
.menu-sekmeler {
  display: flex;
  width: 100%;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-6);
  padding-bottom: var(--bosluk-2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.menu-sekme {
  flex: 0 0 auto;
  min-height: var(--dokunma-min);
  padding: var(--bosluk-3) var(--bosluk-4);
  color: var(--renk-metin-soluk);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-tam);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--gecis-hizli),
    background-color var(--gecis-hizli),
    border-color var(--gecis-hizli),
    transform var(--gecis-hizli);
}
.menu-sekme:hover {
  color: var(--renk-marka-koyu);
  border-color: var(--renk-marka);
}
.menu-sekme[aria-selected="true"] {
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka);
  border-color: var(--renk-marka);
}
.menu-panel {
  padding: var(--bosluk-4);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
  box-shadow: var(--golge-s);
}
.menu-panel[hidden] {
  display: none;
}
.menu-grup + .menu-grup {
  margin-top: var(--bosluk-8);
}
.menu-grup-baslik {
  margin-bottom: var(--bosluk-3);
  color: var(--renk-marka-koyu);
  font-family: var(--font-baslik);
  font-size: var(--fs-xl);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
}
.menu-liste {
  display: grid;
  list-style: none;
}
.menu-satir {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: baseline;
  gap: var(--bosluk-3);
  min-width: 0;
  padding-block: var(--bosluk-4);
  border-bottom: var(--cizgi-ince) solid var(--renk-kenarlik);
}
.menu-satir:last-child {
  border-bottom: 0;
}
.menu-satir::before {
  grid-column: 2;
  align-self: center;
  content: "";
  border-bottom: var(--cizgi-ince) dotted var(--renk-kenarlik);
}
.menu-urun {
  grid-column: 1;
  min-width: 0;
  color: var(--renk-metin);
  font-weight: var(--fw-orta);
  overflow-wrap: anywhere;
}
.menu-fiyat {
  grid-column: 3;
  color: var(--renk-marka-koyu);
  font-weight: var(--fw-kalin);
  white-space: nowrap;
}
.menu-hacim {
  color: var(--renk-metin-soluk);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}
.menu-not {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-5);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-sm);
  line-height: var(--lh-genis);
}
/* =========================================================
   BÖLÜM: Kahvaltı
   ========================================================= */
.bolum-kahvalti {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--renk-zemin-alt);
}
.bolum-kahvalti::before {
  position: absolute;
  z-index: -1;
  width: var(--hero-dekor-buyuk);
  height: var(--hero-dekor-buyuk);
  right: var(--hero-dekor-ofset);
  bottom: var(--hero-dekor-ofset);
  content: "";
  background:
    radial-gradient(
      circle,
      var(--renk-yakinda-zemin) 0%,
      transparent 70%
    );
  border-radius: var(--radius-tam);
}
.kahvalti-govde {
  display: grid;
  gap: var(--bosluk-6);
}
.bilgi-kutular {
  display: grid;
  gap: var(--bosluk-3);
  list-style: none;
}
.bilgi-kutu {
  display: grid;
  min-width: 0;
  /* align-content: start — kutular komşusuyla eşit yükseklikte kalıyor ama
     içerik üstte toplanıyor. Öncesinde satırlar kutu boyunca gerilip etiket
     ile değer arasında kocaman bir boşluk bırakıyordu (05.09.2026). */
  align-content: start;
  gap: var(--bosluk-2);
  padding: var(--bosluk-5);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-m);
}
.bilgi-etiket {
  color: var(--renk-marka-koyu);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  letter-spacing: var(--ls-rozet);
  text-transform: uppercase;
}
.bilgi-deger {
  color: var(--renk-metin);
  line-height: var(--lh-genis);
}
.gorsel-yer-tutucu {
  position: relative;
  display: grid;
  min-height: var(--gorsel-min-yukseklik);
  place-items: center;
  overflow: hidden;
  padding: var(--bosluk-6);
  background:
    linear-gradient(
      135deg,
      var(--renk-zemin) 0%,
      var(--renk-marka-acik) 100%
    );
  border: var(--cizgi-orta) dashed var(--renk-kenarlik);
  border-radius: var(--radius-l);
}
.gorsel-yer-tutucu::before {
  position: absolute;
  width: var(--hero-dekor-kucuk);
  height: var(--hero-dekor-kucuk);
  content: "";
  border: var(--cizgi-orta) solid var(--renk-marka-acik);
  border-radius: var(--radius-tam);
  opacity: 0.68;
}
.gorsel-yer-tutucu::after {
  position: absolute;
  width: var(--desen-boyut);
  height: var(--desen-boyut);
  content: "";
  background: var(--renk-vurgu);
  border-radius: var(--radius-tam);
  box-shadow:
    calc(var(--desen-boyut) * 2) calc(var(--desen-boyut) * -1)
      0 var(--renk-marka-acik),
    calc(var(--desen-boyut) * -2) var(--desen-boyut)
      0 var(--renk-marka-acik);
  opacity: 0.68;
}
.gorsel-etiket {
  position: relative;
  z-index: 2;
  display: inline-flex;
  padding: var(--bosluk-2) var(--bosluk-3);
  color: var(--renk-metin-soluk);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-tam);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-normal);
  text-align: center;
}
.bolum-uyari {
  width: fit-content;
  margin-top: var(--bosluk-6);
  padding: var(--bosluk-3) var(--bosluk-4);
  color: var(--renk-uyari);
  background: var(--renk-yakinda-zemin);
  border-left: var(--cizgi-orta) solid var(--renk-uyari);
  border-radius: var(--radius-s);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
}
/* =========================================================
   BÖLÜM: Hakkımızda
   ========================================================= */
.bolum-hakkimizda {
  background: var(--renk-zemin-alt);
}
.hakkimizda-govde {
  display: grid;
  gap: var(--bosluk-8);
}
.hakkimizda-metin .bolum-baslik {
  max-width: var(--icerik-dar);
}
.ozellik-liste {
  display: grid;
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-8);
  list-style: none;
}
.ozellik {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--bosluk-4);
  color: var(--renk-metin);
  line-height: var(--lh-genis);
}
.ozellik .ikon {
  margin-top: var(--bosluk-1);
  color: var(--renk-marka);
}
.bilgi-kutular-ikili {
  align-content: start;
}
/* =========================================================
   BÖLÜM: Konum
   ========================================================= */
.bolum-konum {
  background: var(--renk-zemin);
}
.konum-govde {
  display: grid;
  gap: var(--bosluk-8);
}
.konum-sol {
  min-width: 0;
}
.adres {
  color: var(--renk-metin);
  font-style: normal;
  line-height: var(--lh-genis);
}
.konum-sol > .btn {
  width: 100%;
  margin-top: var(--bosluk-5);
}
.saat-tablo {
  width: 100%;
  margin-top: var(--bosluk-8);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.saat-baslik {
  padding-bottom: var(--bosluk-3);
  color: var(--renk-metin);
  font-family: var(--font-baslik);
  font-size: var(--fs-xl);
  font-weight: var(--fw-kalin);
  text-align: left;
}
.saat-tablo th,
.saat-tablo td {
  padding: var(--bosluk-3);
  border-bottom: var(--cizgi-ince) solid var(--renk-kenarlik);
  font-size: var(--fs-sm);
  text-align: left;
  vertical-align: middle;
}
.saat-tablo th {
  width: 40%;
  color: var(--renk-metin);
  font-weight: var(--fw-orta);
}
.saat-tablo td {
  color: var(--renk-metin-soluk);
}
.saat-tablo tr:last-child th,
.saat-tablo tr:last-child td {
  border-bottom: 0;
}
.harita {
  overflow: hidden;
  min-height: var(--harita-yukseklik);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
}
/* Gömülü harita kendi en-boy oranını taşımıyor; kutuyu biz veriyoruz. */
.harita-cerceve {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--harita-yukseklik);
  border: 0;
}
/* =========================================================
   BÖLÜM: İletişim
   ========================================================= */
.bolum-iletisim {
  background: var(--renk-zemin-alt);
}
.iletisim-grid {
  display: grid;
  gap: var(--bosluk-4);
}
.iletisim-kart {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk-3);
  padding: var(--bosluk-6);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
  transition:
    transform var(--gecis-normal),
    border-color var(--gecis-normal),
    box-shadow var(--gecis-normal);
}
.iletisim-kart:hover {
  border-color: var(--renk-marka-acik);
  box-shadow: var(--golge-s);
  transform: translateY(calc(var(--bosluk-1) * -1));
}
.iletisim-kart > .ikon {
  color: var(--renk-marka);
}
.iletisim-baslik-kucuk {
  color: var(--renk-metin);
  font-family: var(--font-baslik);
  font-size: var(--fs-xl);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-sik);
}
.iletisim-deger {
  color: var(--renk-metin-soluk);
  font-size: var(--fs-base);
}
.iletisim-kart .btn {
  margin-top: auto;
}
.sosyal {
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-6);
  border-top: var(--cizgi-ince) solid var(--renk-kenarlik);
}
.sosyal-liste {
  display: grid;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-4);
  list-style: none;
}
.sosyal-oge {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background: var(--renk-kart);
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-m);
}
.sosyal-oge .ikon {
  color: var(--renk-marka);
}
.sosyal-adi {
  color: var(--renk-metin);
  font-weight: var(--fw-orta);
}
/* =========================================================
   BÖLÜM: Footer
   ========================================================= */
.site-footer {
  padding-top: var(--bosluk-10);
  padding-bottom: calc(
    var(--bosluk-6) + var(--mobil-bar-yukseklik)
  );
  color: var(--renk-footer-metin);
  background: var(--renk-footer-zemin);
}
.footer-govde {
  display: grid;
  gap: var(--bosluk-8);
}
.footer-sutun {
  display: grid;
  align-content: start;
  gap: var(--bosluk-3);
}
.footer-marka-basi {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
}
.footer-logo {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
}
.footer-logo-tabak {
  fill: var(--renk-footer-vurgu);
}
.footer-logo-buhar {
  fill: none;
  stroke: var(--renk-footer-vurgu);
  stroke-width: 2;
  stroke-linecap: round;
}
.site-footer .marka-adi {
  color: var(--renk-footer-metin);
}
.footer-slogan {
  color: var(--renk-footer-etiket);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
  letter-spacing: 0.04em;
}
.footer-aciklama {
  max-width: 34ch;
  color: var(--renk-footer-soluk);
  font-size: var(--fs-sm);
}
/* Sütun başlıkları: küçük, seyrek harfli, marka tonunda — sütunu bir bakışta ayırıyor. */
.footer-etiket {
  color: var(--renk-footer-etiket);
  font-family: var(--font-govde);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-adres {
  color: var(--renk-footer-soluk);
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: var(--satir-govde);
}
.footer-baglanti,
.footer-saat {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--dokunma-min);
  gap: var(--bosluk-2);
  color: var(--renk-footer-metin);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
  /* Instagram kullanıcı adı bölünemeyen uzun bir sözcük; dar sütunda taşmasın. */
  overflow-wrap: anywhere;
}
.footer-baglanti {
  border-radius: var(--radius-s);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: color var(--gecis-hizli), text-decoration-color var(--gecis-hizli);
}
.footer-baglanti:hover {
  color: var(--renk-footer-vurgu);
  text-decoration-color: currentColor;
}
.footer-baglanti .ikon,
.footer-saat .ikon {
  flex: 0 0 auto;
  color: var(--renk-footer-etiket);
}
/* Telefon alt bilginin en belirgin öğesi: aranması istenen numara bu. */
.footer-tel {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--dokunma-min);
  gap: var(--bosluk-2);
  color: var(--renk-footer-vurgu);
  border-radius: var(--radius-s);
  font-size: var(--fs-xl);
  font-weight: var(--fw-kalin);
  letter-spacing: 0.01em;
}
.footer-tel .ikon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}
.footer-rozet {
  width: fit-content;
  padding: var(--bosluk-1) var(--bosluk-3);
  color: var(--renk-footer-rozet-metin);
  background: var(--renk-footer-rozet-zemin);
  border-radius: var(--radius-tam);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
}
.footer-not {
  max-width: 32ch;
  color: var(--renk-footer-soluk);
  font-size: var(--fs-xs);
  line-height: var(--satir-govde);
}
.footer-alt {
  display: grid;
  gap: var(--bosluk-4);
  margin-top: var(--bosluk-8);
  padding-top: var(--bosluk-5);
  border-top: var(--cizgi-ince) solid var(--renk-footer-cizgi);
}
.footer-telif {
  color: var(--renk-footer-soluk);
  font-size: var(--fs-xs);
}
.footer-linkler ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-1) var(--bosluk-5);
  list-style: none;
}
.footer-linkler a {
  display: inline-flex;
  min-height: var(--dokunma-min);
  align-items: center;
  color: var(--renk-footer-soluk);
  border-radius: var(--radius-s);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
  transition: color var(--gecis-hizli);
}
.footer-linkler a:hover {
  color: var(--renk-footer-vurgu);
}
/* =========================================================
   BÖLÜM: Mobil Sticky İletişim
   ========================================================= */
.mobil-bar {
  position: fixed;
  z-index: 90;
  right: var(--bosluk-3);
  bottom: var(--bosluk-3);
  left: var(--bosluk-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: var(--mobil-bar-yukseklik);
  overflow: hidden;
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka-koyu);
  border: var(--cizgi-ince) solid var(--renk-marka);
  border-radius: var(--radius-l);
  box-shadow: var(--golge-l);
  opacity: 0;
  visibility: hidden;
  transform: translateY(
    calc(var(--mobil-bar-yukseklik) + var(--bosluk-6))
  );
  transition:
    opacity var(--gecis-normal),
    visibility var(--gecis-normal),
    transform var(--gecis-normal);
}
.mobil-bar.gorunur {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobil-bar-btn {
  display: flex;
  min-width: 0;
  min-height: var(--mobil-bar-yukseklik);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-1);
  padding: var(--bosluk-2);
  color: var(--renk-marka-kontrast);
  border-right: var(--cizgi-ince) solid var(--renk-marka);
  font-size: var(--fs-xs);
  font-weight: var(--fw-orta);
  line-height: var(--lh-sik);
  text-align: center;
  transition: background-color var(--gecis-hizli);
}
.mobil-bar-btn:last-child {
  border-right: 0;
}
.mobil-bar-btn:hover {
  background: var(--renk-marka);
}
/* =========================================================
   BÖLÜM: 360 px
   ========================================================= */
@media (min-width: 22.5rem) {
  .kapsayici {
    width: min(
      calc(100% - (var(--bosluk-6) * 2)),
      var(--icerik-genislik)
    );
  }
  .menu-panel {
    padding: var(--bosluk-5);
  }
}
/* =========================================================
   BÖLÜM: 390 px
   ========================================================= */
@media (min-width: 24.375rem) {
  .hero-butonlar .btn {
    flex-grow: 0;
  }
  .saat-tablo th,
  .saat-tablo td {
    padding: var(--bosluk-4);
  }
}
/* =========================================================
   BÖLÜM: 768 px
   ========================================================= */
@media (min-width: 48rem) {
  .bolum {
    padding-block: var(--bolum-bosluk-masaustu);
  }
  .bolum-baslik {
    font-size: var(--fs-3xl);
  }
  .site-header-ic {
    gap: var(--bosluk-6);
  }
  .mobil-menu-btn {
    display: none;
  }
  .ana-menu {
    position: static;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bosluk-4);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .menu-liste-nav {
    display: flex;
    align-items: center;
    gap: var(--bosluk-1);
  }
  .menu-link {
    padding-inline: var(--bosluk-3);
  }
  .header-btn {
    width: auto;
    margin-top: 0;
  }
  .hero-ic {
    padding-block: var(--bolum-bosluk-masaustu);
  }
  .hero-baslik {
    font-size: var(--fs-4xl);
  }
  .hizli-erisim {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hizli-kart {
    padding: var(--bosluk-6);
  }
  .menu-panel {
    padding: var(--bosluk-6);
  }
  .kahvalti-govde {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .bilgi-kutular {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hakkimizda-govde {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr);
    align-items: start;
  }
  .bilgi-kutular-ikili {
    grid-template-columns: 1fr;
  }
  .konum-govde {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }
  .harita,
  .harita-cerceve {
    min-height: 100%;
  }
  .iletisim-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sosyal-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-govde {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--bosluk-6);
  }
  .footer-alt {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer {
    padding-bottom: var(--bosluk-6);
  }
  .mobil-bar {
    display: none;
  }
}
/* =========================================================
   BÖLÜM: 1024 px
   ========================================================= */
@media (min-width: 64rem) {
  .bolum-basi {
    margin-bottom: var(--bosluk-10);
  }
  .menu-sekmeler {
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-8);
  }
  .menu-sekme {
    padding-inline: var(--bosluk-5);
  }
  .menu-panel {
    padding: var(--bosluk-8);
  }
  .hakkimizda-govde,
  .konum-govde {
    gap: var(--bosluk-12);
  }
  .iletisim-kart {
    padding: var(--bosluk-8);
  }
}
/* =========================================================
   BÖLÜM: 1280 px
   ========================================================= */
@media (min-width: 80rem) {
  /* Geniş ekranda metin sola toplandığı için fotoğrafın sağ tarafı
     açılabilir. %66'ya kadar tam karartma: metin sütunu en geniş
     ekranda bile görüntünün %58'ini geçmiyor. */
  .hero::before {
    background: linear-gradient(
      90deg,
      var(--renk-marka-koyu) 0%,
      var(--renk-marka-koyu) 66%,
      color-mix(in srgb, var(--renk-marka-koyu) 58%, transparent) 85%,
      color-mix(in srgb, var(--renk-marka-koyu) 24%, transparent) 100%
    );
  }
  .hero-ic {
    padding-block: calc(
      var(--bolum-bosluk-masaustu) + var(--bosluk-6)
    );
  }
  .hero-metin {
    font-size: var(--fs-xl);
  }
}
/* =========================================================
   BÖLÜM: 1440 px
   ========================================================= */
@media (min-width: 90rem) {
  .hero::before {
    right: calc(var(--hero-dekor-ofset) * 0.5);
  }
  .hero::after {
    right: var(--bosluk-16);
  }
}
/* Hareket azaltma kuralları dosyanın en sonunda toplandı. */

/* =========================================================
   BÖLÜM: GÖRSEL VE HAREKET TOKENLARI
   ========================================================= */
:root {
  --sure-kisa: 120ms;
  --sure-orta: 250ms;
  --sure-uzun: 560ms;
  --sure-hero: 700ms;
  --sure-sayac: 900ms;
  --gecikme-kademe: 70ms;
  --egri-yumusak: cubic-bezier(0.22, 1, 0.36, 1);
  --egri-cikis: cubic-bezier(0.4, 0, 0.2, 1);
  --hareket-mesafe: var(--bosluk-4);
  --hareket-sekme: var(--bosluk-2);
  --olcek-hero: 1.06;
  --olcek-hover: 1.04;
  --olcek-basma: 0.97;
  --yukselme-kart: calc(var(--bosluk-1) / -2);
  --foto-hero-oran: 16 / 9;
  --foto-standart-oran: 4 / 3;
  --foto-galeri-oran: 1 / 1;
  /* 08.09.2026: menü kategori kareleri 3/2'den 1/1'e geçti. Tugay'ın yeni
     fotoğrafları dikey çekim; 3/2 yatay çerçevede kutu içecekler ve uzun
     bardaklar üstten alttan kesiliyordu. Karede ürün tam sığıyor.
     (Not: bu token iki kez tanımlanmıştı — 4/3 satırı ölü koddu, kaldırıldı.) */
  --foto-kategori-oran: 1 / 1;
  /* min(): hangisi küçükse o. vh bileşeni tarayıcı yazı tipi ayarından etkilenmez. */
  --foto-kategori-en-fazla-genislik: min(28rem, 100%);
  --foto-kategori-en-fazla-yukseklik: 26vh;
  --foto-etiket-opaklik: 0.78;
  --doku-opaklik: 0.035;
  /* 04.09.2026: hero fotoğrafı akşam karesinden gündüz karesine geçti; gündüz
     görsel daha parlak olduğu için 0.76 kontrast payını +0.10'a düşürüyordu.
     0.80'de pay +0.63. Bu değeri değiştiren T3 kontrast testini yeniden çalıştırmalı. */
  --hero-karartma: 0.80;
  --renk-foto-etiket: var(--renk-marka-koyu);
  --renk-foto-etiket-metin: var(--renk-marka-kontrast);
  --galeri-kart-genislik: 78%;
  --galeri-kart-genislik-buyuk: 46%;
  --shimmer-baslangic: -120%;
  --shimmer-bitis: 120%;
}

/* =========================================================
   BÖLÜM: Fotoğraf sistemi
   ========================================================= */
.foto {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  background:
    radial-gradient(circle at 20% 20%, var(--renk-marka-acik), transparent 38%),
    linear-gradient(135deg, var(--renk-zemin-alt), var(--renk-marka-acik));
  border: var(--cizgi-ince) solid var(--renk-kenarlik);
  border-radius: var(--radius-l);
  box-shadow: var(--golge-s);
}
.foto img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* DÜZELTME: görseller varsayılan olarak GÖRÜNÜR.
   Solarak gelme yalnızca JS etkinken devreye girer; JS çalışmazsa
   fotoğraflar kaybolmaz. */
.js-hareket .foto img {
  opacity: 0;
  transition:
    opacity var(--sure-orta) var(--egri-cikis),
    transform var(--sure-orta) var(--egri-cikis);
}
.js-hareket .foto.foto-yuklendi img { opacity: 1; }
.foto-etiket {
  position: absolute;
  z-index: 5;
  top: var(--bosluk-3);
  left: var(--bosluk-3);
  display: inline-flex;
  align-items: center;
  padding: var(--bosluk-1) var(--bosluk-2);
  color: var(--renk-foto-etiket-metin);
  background: var(--renk-foto-etiket);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  line-height: var(--lh-normal);
  opacity: var(--foto-etiket-opaklik);
  pointer-events: none;
}

/* Oranlar */
.foto-hero { aspect-ratio: var(--foto-hero-oran); }
/* DÜZELTME (04.09.2026, 2. tur): önce sabit yükseklik vardı, çerçeveyi geniş ekranda
   6.30:1 şeride çeviriyordu. Sonra rem tabanlı genişlik sınırı koydum; o da tarayıcının
   yazı tipi boyutu büyük olan kullanıcılarda (kök ~20px) 715 px'e çıkıp menüyü ekrandan
   itti. Çözüm: yüksekliği GÖRÜNTÜ ALANINA bağlamak (vh) — kullanıcı ayarından etkilenmez —
   ve geniş ekranda fotoğrafı listenin YANINA almak. Menü asıl içerik; fotoğraf ona
   eşlik eder, onu aşağı itmez. */
.foto-kategori {
  aspect-ratio: var(--foto-kategori-oran);
  width: 100%;
  max-width: var(--foto-kategori-en-fazla-genislik);
  max-height: var(--foto-kategori-en-fazla-yukseklik);
  margin-inline: auto;
  margin-bottom: var(--bosluk-6);
  border-radius: var(--radius-m);
}
.foto-kahvalti,
.foto-ic-mekan { aspect-ratio: var(--foto-standart-oran); }
.foto-galeri { aspect-ratio: var(--foto-galeri-oran); }

/* Yüklenme parıltısı — yalnızca JS etkinken */
.js-hareket .foto.foto-yukleniyor::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 30%, var(--renk-kart) 50%, transparent 70%);
  transform: translateX(var(--shimmer-baslangic));
  animation: foto-parilti var(--sure-hero) var(--egri-yumusak) 1;
}
@keyframes foto-parilti {
  from { transform: translateX(var(--shimmer-baslangic)); }
  to   { transform: translateX(var(--shimmer-bitis)); }
}

/* =========================================================
   BÖLÜM: Hero — fotoğraf artık gerçek arka plan
   (mevcut .hero, .hero::before, .hero::after kurallarının yerine geçer)
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--renk-marka-koyu), var(--renk-marka));
}
.hero .foto-hero {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero .foto-hero img {
  width: 100%;
  height: 100%;
  transform: scale(var(--olcek-hero));
  transition:
    opacity var(--sure-orta) var(--egri-cikis),
    transform var(--sure-hero) var(--egri-yumusak);
}
.hero.hero-giris-tamam .foto-hero img { transform: scale(1); }
.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: auto;
  height: auto;
  content: "";
  /* DÜZELTME: tek yönlü dar gradient, metnin sağ yarısını açık zeminde
     bırakıyordu. Dar ekranda metin tüm genişliği kapladığı için karartma
     tam kapsıyor; geniş ekranda metin sola toplandığından sağa doğru
     açılan yön veriliyor (1024 px kırılımında). */
  background: linear-gradient(
    90deg,
    var(--renk-marka-koyu) 0%,
    var(--renk-marka-koyu) 100%
  );
  border: 0;
  border-radius: 0;
  opacity: var(--hero-karartma);
  pointer-events: none;
}
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  content: "";
  background: radial-gradient(circle at 20% 45%, var(--renk-vurgu), transparent 48%);
  border: 0;
  border-radius: 0;
  opacity: var(--doku-opaklik);
  pointer-events: none;
}
.hero-ic { position: relative; z-index: 2; }
.hero-baslik { color: var(--renk-marka-kontrast); }
.hero-metin,
.hero-saat { color: var(--renk-footer-metin); }
.hero .rozet-notr {
  color: var(--renk-marka-kontrast);
  background: var(--renk-marka);
  border: var(--cizgi-ince) solid var(--renk-marka-acik);
}
.hero .btn-ikincil {
  color: var(--renk-marka-kontrast);
  border-color: var(--renk-marka-kontrast);
}
.hero .btn-ikincil:hover {
  color: var(--renk-marka-koyu);
  background: var(--renk-marka-kontrast);
}

/* =========================================================
   BÖLÜM: Hero giriş hareketi
   Gizleme yalnızca JS .js-hareket ekledikten sonra başlar.
   DÜZELTME: nth-of-type yerine nth-child — hero öğeleri farklı
   etiket tipleri (p, h1, p, div, p) olduğu için nth-of-type
   yanlış sıralıyordu.
   ========================================================= */
.js-hareket [data-hero-item] {
  opacity: 0;
  transform: translateY(var(--hareket-mesafe));
  transition:
    opacity var(--sure-uzun) var(--egri-yumusak),
    transform var(--sure-uzun) var(--egri-yumusak);
}
.js-hareket .hero.hero-giris [data-hero-item] {
  opacity: 1;
  transform: translateY(0);
}
.js-hareket .hero.hero-giris [data-hero-item]:nth-child(1) { transition-delay: calc(var(--gecikme-kademe) * 1); }
.js-hareket .hero.hero-giris [data-hero-item]:nth-child(2) { transition-delay: calc(var(--gecikme-kademe) * 2); }
.js-hareket .hero.hero-giris [data-hero-item]:nth-child(3) { transition-delay: calc(var(--gecikme-kademe) * 3); }
.js-hareket .hero.hero-giris [data-hero-item]:nth-child(4) { transition-delay: calc(var(--gecikme-kademe) * 4); }
.js-hareket .hero.hero-giris [data-hero-item]:nth-child(5) { transition-delay: calc(var(--gecikme-kademe) * 5); }

/* =========================================================
   BÖLÜM: Scroll ile belirme
   ========================================================= */
.js-hareket [data-reveal] {
  opacity: 0;
  transform: translateY(var(--hareket-mesafe));
  transition:
    opacity var(--sure-uzun) var(--egri-yumusak),
    transform var(--sure-uzun) var(--egri-yumusak);
}
.js-hareket [data-reveal].gorundu {
  opacity: 1;
  transform: translateY(0);
}
.js-hareket [data-stagger] [data-reveal-item] {
  opacity: 0;
  transform: translateY(var(--hareket-mesafe));
  transition:
    opacity var(--sure-uzun) var(--egri-yumusak),
    transform var(--sure-uzun) var(--egri-yumusak);
}
.js-hareket [data-stagger].gorundu [data-reveal-item] {
  opacity: 1;
  transform: translateY(0);
}
.js-hareket [data-stagger].gorundu [data-reveal-item]:nth-child(1) { transition-delay: calc(var(--gecikme-kademe) * 0); }
.js-hareket [data-stagger].gorundu [data-reveal-item]:nth-child(2) { transition-delay: calc(var(--gecikme-kademe) * 1); }
.js-hareket [data-stagger].gorundu [data-reveal-item]:nth-child(3) { transition-delay: calc(var(--gecikme-kademe) * 2); }
.js-hareket [data-stagger].gorundu [data-reveal-item]:nth-child(4) { transition-delay: calc(var(--gecikme-kademe) * 3); }
.js-hareket [data-stagger].gorundu [data-reveal-item]:nth-child(5) { transition-delay: calc(var(--gecikme-kademe) * 4); }
.js-hareket [data-stagger].gorundu [data-reveal-item]:nth-child(6) { transition-delay: calc(var(--gecikme-kademe) * 5); }

/* =========================================================
   BÖLÜM: Kart hover — kart değil, içindeki görsel büyür
   ========================================================= */
.hizli-kart,
.iletisim-kart,
.galeri-oge {
  overflow: hidden;
  transition:
    transform var(--sure-orta) var(--egri-cikis),
    border-color var(--sure-orta) var(--egri-cikis),
    box-shadow var(--sure-orta) var(--egri-cikis);
}
.hizli-kart:hover,
.iletisim-kart:hover,
.galeri-oge:hover {
  transform: translateY(var(--yukselme-kart));
  box-shadow: var(--golge-m);
}
.foto img { transition: transform var(--sure-orta) var(--egri-cikis); }
.foto:hover img,
.hizli-kart:hover .foto img,
.iletisim-kart:hover .foto img,
.galeri-oge:hover img { transform: scale(var(--olcek-hover)); }

/* =========================================================
   BÖLÜM: Menü panel geçişi
   ========================================================= */
.menu-panel.panel-giris {
  animation: panel-giris var(--sure-orta) var(--egri-cikis) 1;
}
@keyframes panel-giris {
  from { opacity: 0; transform: translateY(var(--hareket-sekme)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   BÖLÜM: Buton basılma
   ========================================================= */
.btn,
.mobil-bar-btn {
  transform-origin: center;
  transition:
    transform var(--sure-kisa) var(--egri-cikis),
    color var(--sure-orta) var(--egri-cikis),
    background-color var(--sure-orta) var(--egri-cikis),
    border-color var(--sure-orta) var(--egri-cikis),
    box-shadow var(--sure-orta) var(--egri-cikis);
}
.btn.basiliyor,
.mobil-bar-btn.basiliyor { transform: scale(var(--olcek-basma)); }

/* =========================================================
   BÖLÜM: Sticky header
   DÜZELTME: scaleY(0.97) kaldırıldı — yazıyı dikeyde eziyordu.
   Kaydırınca yalnızca gölge belirginleşiyor.
   ========================================================= */
.site-header {
  transition: box-shadow var(--sure-orta) var(--egri-cikis);
}
.site-header.header-kaydirildi { box-shadow: var(--golge-m); }

/* =========================================================
   BÖLÜM: Hakkımızda yerleşimi
   ========================================================= */
.foto-ic-mekan { min-width: 0; }
.hakkimizda-govde { display: grid; gap: var(--bosluk-6); }

/* =========================================================
   BÖLÜM: Galeri
   ========================================================= */
.bolum-galeri {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--renk-zemin-alt);
}
.bolum-galeri::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: radial-gradient(circle, var(--renk-marka) var(--cizgi-ince), transparent var(--cizgi-ince));
  background-size: var(--desen-boyut) var(--desen-boyut);
  opacity: var(--doku-opaklik);
  pointer-events: none;
}
.galeri-serit {
  display: flex;
  gap: var(--bosluk-4);
  width: 100%;
  padding-bottom: var(--bosluk-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.galeri-oge {
  flex: 0 0 var(--galeri-kart-genislik);
  scroll-snap-align: start;
  border-radius: var(--radius-l);
}
.galeri-not {
  max-width: var(--icerik-dar);
  margin-top: var(--bosluk-5);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-sm);
  line-height: var(--lh-genis);
}

/* =========================================================
   BÖLÜM: Bölüm zemin dokusu
   ========================================================= */
.bolum-menu,
.bolum-kahvalti,
.bolum-hakkimizda,
.bolum-konum,
.bolum-iletisim {
  position: relative;
  isolation: isolate;
}
.bolum-menu::before,
.bolum-konum::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: radial-gradient(circle, var(--renk-marka) var(--cizgi-ince), transparent var(--cizgi-ince));
  background-size: var(--desen-boyut) var(--desen-boyut);
  opacity: var(--doku-opaklik);
  pointer-events: none;
}

/* =========================================================
   BÖLÜM: Görsel katmanı — 390 px
   ========================================================= */
@media (min-width: 24.375rem) {
  .galeri-oge { flex-basis: var(--galeri-kart-genislik-buyuk); }
}

/* =========================================================
   BÖLÜM: Görsel katmanı — 768 px
   ========================================================= */
@media (min-width: 48rem) {
  .hakkimizda-govde {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
  .hakkimizda-metin { min-width: 0; }
  .bilgi-kutular-ikili {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .galeri-serit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bosluk-5);
    overflow: visible;
    scroll-snap-type: none;
  }
  .galeri-oge { width: 100%; flex: none; }
}

/* =========================================================
   BÖLÜM: Görsel katmanı — 1024 px
   ========================================================= */
@media (min-width: 64rem) {
  .hakkimizda-govde {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.7fr);
    gap: var(--bosluk-8);
  }
  .bilgi-kutular-ikili {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BÖLÜM: Hareket azaltma — bütün hareket durur
   (dosyanın en sonunda kalmalı)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* !important burada bilinçli: evrensel seçici (*) özgüllük olarak
     sınıflı kurallara yenildiği için, kaynak sırası ne olursa olsun
     .foto img gibi kuralların geçişini sıfırlayamıyor. Erişilebilirlik
     geçersiz kılması olduğu için istisna yapıldı. */
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
  .js-hareket [data-reveal],
  .js-hareket [data-stagger] [data-reveal-item],
  .js-hareket [data-hero-item],
  .js-hareket .foto img {
    opacity: 1;
    transform: none;
  }
  .hero .foto-hero img,
  .hero.hero-giris-tamam .foto-hero img,
  .foto:hover img,
  .hizli-kart:hover .foto img,
  .iletisim-kart:hover .foto img,
  .galeri-oge:hover img,
  .hizli-kart:hover,
  .iletisim-kart:hover,
  .galeri-oge:hover,
  .btn.basiliyor,
  .mobil-bar-btn.basiliyor { transform: none; }
  .js-hareket .foto.foto-yukleniyor::after { display: none; }
  .menu-panel.panel-giris { animation: none; }
}

/* ---------------------------------------------------------------
   Menü paneli — geniş ekran düzeni (04.09.2026)
   Fotoğraf listenin YANINA geçer. Gerekçe: tek sütunda fotoğraf
   menüyü ekran dışına itiyordu, özellikle tarayıcı yazı tipi büyük
   olan kullanıcılarda. 64rem altında tek sütun kalır.
   NOT: bu kural bilerek dosyanın sonunda, kendi @media'sinde duruyor —
   ilk denemede yanlışlıkla 22.5rem (mobil) bloğuna girip 360px'te
   yatay taşmaya yol açmıştı.
   --------------------------------------------------------------- */
@media (min-width: 64rem) {
  .menu-panel {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: var(--bosluk-6);
    align-items: start;
  }
  /* Fotoğraf sütunu ARTIK SATIRLARI GERMİYOR.
     Önce galeri `grid-row: 1 / -1` ile bütün satırlara yayılıyordu; galeri
     menü listesinden uzun olduğunda tarayıcı fazla yüksekliği satırlara
     dağıtıyor ve menü başlıkları birbirinden kopuyordu ("Kır Pidesi neden
     bu kadar aşağıda?" — 05.09.2026). Artık menü grupları tek bir
     `.menu-icerik` kutusunda ve ızgara TEK SATIR: solda fotoğraflar, sağda
     menü; yükseklikler birbirini etkilemiyor. */
  .menu-panel > .kategori-galeri {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    max-width: 100%;
    max-height: none;
    margin: 0;
  }
  .menu-panel > .menu-icerik {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
}

/* =========================================================
   BÖLÜM: Metin içi bağlantı
   Sitenin genel kuralı `a { text-decoration: none }`. Bu yüzden
   akış metninin içine giren bağlantı, ayrıca altı çizilmezse
   düz metinden ayırt edilemiyor. Rengi değiştirmek tek başına
   yetmez (renk ayrımı zayıf olan kullanıcılar için).
   Bu blok bilinçli olarak hiçbir @media içinde DEĞİL; her
   genişlikte geçerli olması gerekiyor.
   ========================================================= */
.metin-baglanti {
  /* Satır içi bağlantı; dikey dolgu satır yüksekliğini bozmadan
     dokunma alanını büyütüyor (ölçüm: 96x19 -> daha rahat hedef). */
  padding-block: 0.2em;
  /* Instagram kullanıcı adı tek parça uzun bir sözcük: kök yazı tipi 20 px olan
     tarayıcıda 390 px ekranda 352 px yer kaplıyor ve sayfayı 13 px yana taşırıyordu
     (09.09.2026 ölçümü). "anywhere", "break-word"den farklı olarak öğenin
     min-content genişliğini de küçültür; taşmayı asıl kesen bu. */
  overflow-wrap: anywhere;
  color: var(--renk-marka-koyu);
  font-weight: var(--fw-orta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.metin-baglanti:hover {
  text-decoration-thickness: var(--cizgi-orta);
}

/* =========================================================
   BÖLÜM: Menü kategori galerisi
   Kategoriye ait fotoğraflar; hepsi aynı boyutta KARE (1:1, 700×700).
   · 1024 px üstünde sol sütunda ALT ALTA — menünün yanındaki boşluğu doldurur.
   · 1024 px altında YATAY KAYDIRILABİLİR ŞERİT. Sabit satır denendi ve
     bırakıldı: İçecekler sekmesinde 7 kare yan yana sıkışınca her biri ~55 px
     kalıyordu, hiçbir şey seçilmiyordu (08.09.2026 ölçümü). Şeritte kareler
     sabit genişlikte; 3,5 tanesi görünüyor, yarım görünen kare kaydırılabildiğini
     belli ediyor. Menü asıl içerik olduğu için dikeyde tek satırdan fazla yer
     kaplamıyor (D14).
   ========================================================= */
.kategori-galeri {
  display: flex;
  gap: var(--bosluk-2);
  width: 100%;
  margin-bottom: var(--bosluk-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding-bottom: var(--bosluk-2);
}
.kategori-galeri .foto-kategori {
  /* clamp: 320 px'te %28 = 69 px kalıyordu, kareler seçilmiyordu.
     Alt sınır 6rem, üst sınır 11rem. */
  flex: 0 0 clamp(6rem, 28%, 11rem);
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  aspect-ratio: var(--foto-kategori-oran);
  scroll-snap-align: start;
}

@media (min-width: 64rem) {
  .kategori-galeri {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--bosluk-3);
    overflow: visible;
    padding-bottom: 0;
    max-width: var(--foto-kategori-en-fazla-genislik);
  }
  .kategori-galeri .foto-kategori {
    flex: none;
    width: 100%;
  }
}

/* =========================================================
   BÖLÜM: 404 sayfası
   Tek ekranlık, ayrı bir sayfa (404.html). Kendi <style> bloğu yok:
   renk, tipografi ve buton biçimleri tek kaynaktan gelsin diye ana
   stil dosyasını kullanıyor. (07.09.2026)
   ========================================================= */
.hata-sayfa {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding-block: var(--bosluk-10);
  background: var(--renk-zemin);
}
.hata-govde {
  display: grid;
  justify-items: center;
  max-width: var(--icerik-dar);
  text-align: center;
}
.hata-kod {
  margin-top: var(--bosluk-8);
  color: var(--renk-marka);
  font-family: var(--font-baslik);
  font-size: var(--fs-3xl);
  line-height: 1;
}
.hata-sayfa .bolum-baslik {
  margin-top: var(--bosluk-3);
}
.hata-sayfa .bolum-aciklama {
  margin-inline: auto;
}
.hata-butonlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-6);
}
.hata-adres {
  margin-top: var(--bosluk-8);
  color: var(--renk-metin-soluk);
  font-size: var(--fs-sm);
  line-height: var(--lh-genis);
}