/* Yeme-icme arketipi.
   Imza ogesi: MENU INDEKSI - tam genislik satir, sol yemek adi, sag fiyat,
   arada noktali leader, hover'da imlecin yaninda o yemegin fotografi.
   Esit boyutlu 3 kart YOK. */

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--kenar);
  transition: transform 300ms var(--ease-out);
}

/* Nav rengi hero varyantina bagli: tam-kesim'de gorselin uzerinde beyaz,
   bolunmus'te acik kagit zemin uzerinde murekkep.
   (mix-blend-mode: difference acik paletlerde metni gorunmez yapiyordu.) */
.hero--tam-kesim ~ * .nav, body:has(.hero--tam-kesim) .nav { color: #fff; }
body:has(.hero--bolunmus) .nav { color: var(--ink); }
body:has(.hero--bolunmus) .nav .cta--cizgi { border-color: var(--rule); }

/* Bolunmus hero'da nav linkleri sag yaridaki GORSELIN uzerine denk geliyor.
   Yalnizca sayfanin en ustundeyken beyaza cevir; asagi kaydirinca zemin
   kagit oldugu icin murekkep rengine geri doner. */
body:has(.hero--bolunmus) .nav[data-ust='1'] .nav-linkler { color: #fff; }
body:has(.hero--bolunmus) .nav[data-ust='1'] .cta--cizgi { border-color: rgb(255 255 255 / 45%); }

/* Telefon butonu: `.cta--cizgi { color: var(--ink) }` ozgullukte kazanip
   butonu KOYU birakiyordu; acik bir yemek fotografinin uzerinde okunmuyordu
   (İncir Waffle). Ustelik beyaz metin de guvenli degil - fotografin parlakligi
   isletmeden isletmeye degisiyor. Bu yuzden buton MAT bir hap: zemin her zaman
   kagit, metin murekkep. Fotograf ne olursa olsun okunur. */
body:has(.hero--bolunmus) .nav[data-ust='1'] .nav-tel {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.nav[data-gizli='1'] { transform: translateY(-100%); }

.nav-marka {
  font-family: var(--f-display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1;
}

.nav-linkler { display: flex; gap: var(--sp-5); align-items: center; }
.nav-linkler a { font-size: var(--step--1); }

@media (max-width: 780px) {
  .nav-linkler a:not(.nav-tel) { display: none; }
}

/* ----------------------------------------------------------------- hero */

.hero { position: relative; }

/* --- varyant: tam-kesim */

.hero--tam-kesim { height: 100svh; min-height: 620px; }

.hero--tam-kesim .hero-gorsel { position: absolute; inset: 0; }
.hero--tam-kesim .hero-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.hero--tam-kesim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 12%) 45%, rgb(0 0 0 / 30%) 100%);
}

.hero--tam-kesim .hero-ic {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 var(--kenar) clamp(2rem, 5vw, 4rem);
  color: #fff;
}

/* Baslik optik olarak kenara hizalanir (sol yan yatak duzeltmesi).
   max-width min() ile sinirli: 18ch Fraunces'te 1700px'i asip konteyneri
   tasiriyor ve satirlar .satir overflow:hidden ile kirpiliyordu. */
.hero--tam-kesim .display {
  margin-left: -0.055em;
  max-width: min(16ch, 100%);
}

/* --- varyant: bolunmus */

.hero--bolunmus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  min-height: 100svh;
}

/* Gorsel y=0'dan basliyor, yani sabit nav'in altindan geciyor. Nav linkleri
   fotografin uzerine denk geldigi icin okunabilirlik perdesi sart: notr
   siyah, yalnizca nav yuksekligi kadar, asagi dogru siliniyor.
   (Dekoratif gradient degil - okunabilirlik perdesi; renk katmiyor.) */
.hero--bolunmus .hero-gorsel::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 42%), rgb(0 0 0 / 0%));
  pointer-events: none;
}

.hero--bolunmus .display {
  font-size: clamp(2.6rem, 5vw, 5.8rem);
  max-width: min(13ch, 100%);
}

.hero--bolunmus .hero-ic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--sp-8) + 1rem) var(--sp-7) var(--sp-7) var(--kenar);
}

.hero--bolunmus .hero-ic { order: 1; }
.hero--bolunmus .hero-gorsel { order: 2; position: relative; }
.hero--bolunmus .hero-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .hero--bolunmus { grid-template-columns: 1fr; min-height: 0; }
  .hero--bolunmus .hero-ic { padding: calc(var(--sp-8) + 1rem) var(--kenar) var(--sp-6); }
  .hero--bolunmus .hero-gorsel { height: 62svh; }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.hero--tam-kesim .hero-meta { color: rgb(255 255 255 / 78%); }

.hero-alt {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.45;
}

.hero--tam-kesim .hero-alt { color: rgb(255 255 255 / 88%); }
.hero--bolunmus .hero-alt { color: var(--muted); }

.hero-cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero--tam-kesim .cta { background: #fff; border-color: #fff; color: #111; }
.hero--tam-kesim .cta--cizgi { background: transparent; color: #fff; border-color: rgb(255 255 255 / 45%); }

/* --------------------------------------------------------------- hikaye */

.hikaye {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: start;
}

.hikaye-etiket { position: sticky; top: calc(var(--sp-8) - 1rem); }

.hikaye-metin p + p { margin-top: var(--sp-5); }
/* Olcu: 62-72ch. Kolon genisligi 880px'e ciktiginda satir 90ch oluyordu. */
.hikaye-metin p { font-size: var(--step-1); line-height: 1.55; max-width: 40ch; }
.hikaye-metin p:first-child { color: var(--ink); }
.hikaye-metin p + p { color: var(--muted); font-size: var(--step-0); max-width: 62ch; }

/* Kasitli farkli aspect-ratio: hepsi kare = slop */
.hikaye-gorseller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.hikaye-gorseller .g1 { aspect-ratio: 4 / 5; }
.hikaye-gorseller .g2 { aspect-ratio: 1 / 1; align-self: end; }

@media (max-width: 900px) {
  .hikaye { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hikaye-etiket { position: static; }
}

/* ---------------------------------------------------- MENU INDEKSI (imza) */

.menu-bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.menu-liste { border-top: 1px solid var(--rule); }

.menu-satir {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: baseline;
  gap: var(--sp-3);
  padding: clamp(0.9rem, 1.6vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 350ms var(--ease-out);
}

.menu-ad {
  font-family: var(--f-display);
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

/* Noktali leader: menu tipografisinin klasigi */
.menu-nokta {
  align-self: end;
  height: 1px;
  margin-bottom: 0.42em;
  background-image: radial-gradient(circle, var(--rule) 1px, transparent 1.2px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

/* Fiyat verisi yoksa noktali leader hicbir seye gitmez; kolonu kaldiririz.
   Uydurma fiyat yazmaktansa fiyati hic gostermemek tercih edilir. */
.menu-liste--fiyatsiz .menu-satir { grid-template-columns: minmax(0, 1fr); }

.menu-fiyat {
  font-family: var(--f-mono);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.menu-aciklama {
  grid-column: 1 / -1;
  margin-top: 4px;
  max-width: 58ch;
  font-size: var(--step--1);
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .menu-satir:hover { padding-left: var(--sp-4); }
  .menu-satir:hover .menu-fiyat { color: var(--accent); }
}

/* Imlecin yaninda beliren yemek fotografi */
.menu-peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 220px;
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 260ms var(--ease-out), transform 400ms var(--ease-out);
  border-radius: 2px;
  overflow: hidden;
}

.menu-peek.acik { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.menu-peek img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) { .menu-peek { display: none; } }

/* ----------------------------------------------------------- yatay serit */

.serit { padding-block: var(--bolum-y); overflow: hidden; }

.serit-ray {
  display: flex;
  gap: var(--sp-4);
  padding-inline: var(--kenar);
  will-change: transform;
}

.serit-oge { flex: 0 0 auto; width: clamp(240px, 30vw, 420px); }
.serit-oge:nth-child(3n + 1) { aspect-ratio: 3 / 4; }
.serit-oge:nth-child(3n + 2) { aspect-ratio: 1 / 1; align-self: center; }
.serit-oge:nth-child(3n + 3) { aspect-ratio: 4 / 5; align-self: flex-end; }

@media (max-width: 780px) {
  .serit-ray { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); }
  .serit-oge { scroll-snap-align: center; width: 76vw; }
}

/* --------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: var(--sp-4);
}

.marquee-ic { display: flex; width: max-content; }

.marquee-ic > span {
  padding-inline: var(--sp-5);
  font-family: var(--f-display);
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--muted);
}

/* -------------------------------------------------------------- yorumlar */

.yorumlar { display: grid; gap: var(--sp-7); }

.yorum {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
  gap: var(--sp-6);
  align-items: start;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.yorum blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--step-3);
  line-height: 1.22;
  letter-spacing: -0.018em;
}

.yorum-kim { font-size: var(--step--1); color: var(--muted); }
.yorum-yildiz { font-family: var(--f-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; }

@media (max-width: 780px) {
  .yorum { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* --------------------------------------------------------------- ziyaret */

.ziyaret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7);
}

.saat-tablo { width: 100%; border-collapse: collapse; }

.saat-tablo td {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.saat-tablo td:last-child { text-align: right; font-family: var(--f-mono); color: var(--muted); }
.saat-tablo tr[data-bugun='1'] td { color: var(--accent); }
.saat-tablo tr[data-bugun='1'] td:last-child { color: var(--accent); }

.iletisim-liste { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.iletisim-liste dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.iletisim-liste dd { margin: 0; font-size: var(--step-1); }

@media (max-width: 780px) { .ziyaret { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------------------------------------------------------------- footer */

.footer {
  padding: var(--sp-6) var(--kenar) var(--sp-7);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
}

.footer .kunye { font-size: var(--step--1); color: var(--muted); }

/* Gorseli olmayan isletme (Maps'te fotograf yok, Unsplash anahtari yok).
   Bos <img src=""> yerine bolumu tamamen kaldirip tipografik hero'ya duseriz;
   kirik gorsel ikonu siteyi aninda ucuz gosteriyor. */
.hero--gorselsiz .hero-ic { color: var(--ink); }
.hero--gorselsiz .hero-ic::before { display: none; }
.hero--gorselsiz {
  min-height: auto;
  padding-block: clamp(7rem, 16vh, 12rem) clamp(4rem, 8vh, 7rem);
  background: var(--paper-2, var(--paper));
  border-bottom: 1px solid var(--rule);
}

/* Mobilde hero tek kolona indigi icin pay yalnizca genis ekranda gecerli. */
@media (min-width: 901px) { .hero--bolunmus { --hero-pay: 0.52; } }