/* ==========================================================================
   Avlu — Alsancak, İzmir
   Tasarım sistemi. Renkler mekânın kendi malzemelerinden alındı:
   mürekkep siyahı (marka), el yapımı tabakların mavi sırı, ekşi maya kırıntısı,
   menüdeki altın ve masadaki kırmızı örtü.
   ========================================================================== */

:root {
  --ink:        #12100E;
  --ink-2:      #1B1815;
  --ink-3:      #262119;
  --glaze:      #1E4E59;
  --glaze-2:    #2F6B75;
  --gold:       #C59A6B;
  --gold-soft:  #D9B78F;
  --bone:       #E8DFD1;
  --bone-dim:   rgba(232, 223, 209, 0.62);
  --bone-faint: rgba(232, 223, 209, 0.14);
  --ember:      #8C3A22;

  --shell: 1240px;
  --alley: 640px;          /* dar sokak genişliği: metin sütunu */

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.8rem);
  --step-4:  clamp(2.8rem, 1.8rem + 4.8vw, 6.4rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- temel ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `height: auto` şart: <img> üzerindeki width/height öznitelikleri sunum
   ipucu olarak yüksekliği sabitliyor, genişlik daralınca görsel geriliyor.
   Yüksekliği kendi belirleyen kurallar (.disc, .plate__media, .hero__slide)
   daha özgül oldukları için bundan etkilenmez. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- iki dil ---------- */

/* Metinler artık data-i18n anahtarlarıyla JS tarafından yazılıyor.
   Varsayılan dışında bir dil seçiliyken sözlük yüklenene kadar gövde
   gizlenir; yoksa önce Türkçe görünüp sonra çevrilirdi. Açılış betiği
   2 sn sonra bu özniteliği her hâlükârda kaldırır. */
html[data-i18n-bekle] body { visibility: hidden; }

/* ---------- tipografi ---------- */

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
  display: block;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--bone);
  font-weight: 300;
}

p { margin: 0 0 1.15rem; color: var(--bone-dim); }
p:last-child { margin-bottom: 0; }

.prose { max-width: var(--alley); }
.prose p { font-size: var(--step-0); }

/* ---------- yerleşim ---------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.band { padding: clamp(4.5rem, 11vw, 9.5rem) 0; position: relative; }
.band--glaze { background: var(--glaze); }
.band--ink2 { background: var(--ink-2); }

.rule {
  height: 1px;
  background: var(--bone-faint);
  border: 0;
  margin: 0;
}

/* ---------- sır diski: sayfanın imzası ----------
   El çekilmiş tabakların düzensiz kenarını ve sırın dipte
   göllenmesini taklit eder. Sayfa boyunca tekrarlanan tek biçim. */

.disc {
  border-radius: 49% 51% 53% 47% / 52% 47% 53% 48%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 32%, var(--glaze-2), var(--glaze) 68%);
}

/* Alt seçici olmalı: <img> bir <picture> içinde durduğu için
   çocuk seçici (`.disc > img`) eşleşmez ve kırpma bozulur. */
.disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- başlık çubuğu ---------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  background: linear-gradient(to bottom, rgba(18, 16, 14, 0.92), rgba(18, 16, 14, 0));
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}

.masthead[data-stuck="true"] {
  background: rgba(18, 16, 14, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bone-faint);
}

.masthead__mark { flex: 0 0 auto; line-height: 0; }
.masthead__mark img { width: clamp(112px, 13vw, 158px); }

.masthead__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
}

.masthead__nav a {
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone-dim);
  transition: color 0.25s var(--ease);
  padding: 0.6rem 0;          /* parmakla vurmak için yükseklik */
}
.masthead__nav a:hover { color: var(--bone); }

@media (max-width: 800px) {
  .masthead__nav .is-optional { display: none; }
}

/* Dar ekranda başlık çubuğuna yalnızca marka, dil ve tek eylem sığar.
   Menüye giriş bölümündeki ve alt bilgideki bağlantılardan ulaşılır. */
@media (max-width: 620px) {
  .masthead { gap: 0.75rem; padding-inline: 1rem; }
  .masthead__mark img { width: 96px; }
  .masthead__nav { gap: 0.6rem; }
  .masthead__nav > a:not(.btn) { display: none; }
  .masthead__nav .btn { padding: 0.7rem 1rem; letter-spacing: 0.08em; }
}

/* En dar telefonlar. 620px bloğundan SONRA gelmeli, yoksa o blok bunu ezer. */
@media (max-width: 400px) {
  .masthead { gap: 0.5rem; padding-inline: 0.75rem; }
  .masthead__mark img { width: 78px; }
  .masthead__nav .btn { padding: 0.7rem 0.8rem; letter-spacing: 0.03em; font-size: 0.72rem; }
}

/* dil anahtarı */

.lang {
  display: inline-flex;
  border: 1px solid var(--bone-faint);
  border-radius: 999px;
  overflow: hidden;
}

.lang a {
  appearance: none;
  border: 0;
  text-decoration: none;
  background: transparent;
  color: var(--bone-dim);
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lang a[aria-current="true"] { background: var(--gold); color: var(--ink); }

/* ---------- düğmeler ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;        /* dar ekranda "MASA AYIRT" ikiye kırılıyordu */
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--ink); }

/* ---------- giriş: sokak ---------- */

/* Tam ekran, sinematik. Arkada geçiş yapan görseller, ortada wordmark.
   Bütün metin yükü kaldırıldı: burada mekân konuşur, tipografi değil. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__stage { position: absolute; inset: 0; }

/* Poster `poster` özniteliği yerine CSS arka planı: böylece ekran boyutuna
   göre doğru dosya seçilir ve ilk boyamada hazır olur. Poster videonun
   kendi karesi olduğu için oynatma başlarken görüntü değişmez — eskiden
   önce slayt görünüp sonra videoya atlıyordu, göze titreme olarak yansıyordu. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: url("img/avlu-video-poster-l.jpg") center / cover no-repeat var(--ink);
  filter: saturate(0.78) contrast(1.04) brightness(0.72);
}

@media (max-width: 700px) {
  .hero__video { background-image: url("img/avlu-video-poster.webp"); }
}

/* "pending" HTML'de yazılı gelir: JS varsa slayt katmanı hiç boyanmaz,
   dolayısıyla geçiş diye bir an olmaz. Video açılmazsa JS bu değeri
   kaldırır ve slaytlar devreye girer. JS yoksa kural hiç uygulanmaz. */
html.js .hero[data-video="pending"] .hero__video,
.hero[data-video="on"] .hero__video { display: block; }

html.js .hero[data-video="pending"] .hero__stage,
html.js .hero[data-video="pending"] .hero__dots,
html.js .hero[data-video="pending"] .hero__arrow,
.hero[data-video="on"] .hero__stage,
.hero[data-video="on"] .hero__dots,
.hero[data-video="on"] .hero__arrow { display: none; }

.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide[data-active="true"] { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.08) brightness(0.7);
}

/* Görselin üstündeki perde: kenarlar koyu, orta açık — wordmark nefes alsın. */
.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(18, 16, 14, 0.18), rgba(18, 16, 14, 0.74) 76%),
    linear-gradient(to bottom, rgba(18, 16, 14, 0.72), rgba(18, 16, 14, 0.1) 26%,
                    rgba(18, 16, 14, 0.2) 58%, rgba(18, 16, 14, 0.88));
}

.hero__lockup {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(1.5rem, 6vw, 4rem);
}

/* Canlı metin, bitmap değil: logo dosyası 443px genişliğinde ve bu ölçekte
   büyütülünce bulanıklaşıyor. Script marka başlık çubuğunda kalır. */
.hero__wordmark {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 144;
  font-weight: 300;
  font-size: clamp(2.1rem, 5.2vw, 6rem);
  line-height: 1;
  letter-spacing: 0.17em;
  margin-right: -0.17em;
  color: var(--gold);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .hero__wordmark { letter-spacing: 0.1em; margin-right: -0.1em; }
}

.hero__place {
  margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0;
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  margin-right: -0.42em;        /* son harfin boşluğu kutuyu şişirmesin */
  text-transform: uppercase;
  color: var(--bone);
}

.hero__cta { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }

/* --- taşıma denetimleri --- */

.hero__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.hero__arrow:hover { opacity: 1; background: rgba(232, 223, 209, 0.1); }
.hero__arrow--prev { left: clamp(0.5rem, 2.5vw, 2rem); }
.hero__arrow--next { right: clamp(0.5rem, 2.5vw, 2rem); }
.hero__arrow svg { width: 1.6rem; height: 1.6rem; }

.hero__dots {
  position: absolute;
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  left: 50%;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  gap: 0.75rem;
}

.hero__dots button {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero__dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(232, 223, 209, 0.35);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__dots button[aria-current="true"]::before { background: var(--gold); transform: scale(1.35); }

@media (max-width: 620px) {
  .hero__arrow { display: none; }   /* dar ekranda kaydırma yerine noktalar */
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

/* ---------- avlu açılışı ---------- */

.courtyard {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.courtyard__media { position: relative; }
.courtyard__media img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

.courtyard__inset {
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 46%;
  aspect-ratio: 1;
  border: 6px solid var(--glaze);
}

@media (max-width: 860px) {
  .courtyard { grid-template-columns: 1fr; }
  .courtyard__inset { position: static; width: 60%; margin: -2rem 0 0 auto; border-width: 4px; }
}

/* ---------- sofranın sırası ---------- */

.course-list {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  counter-reset: course;
}

.course {
  counter-increment: course;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--bone-faint);
  align-items: baseline;
}
.course:last-child { border-bottom: 1px solid var(--bone-faint); }

.course::before {
  content: counter(course, decimal-leading-zero);
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--step-1);
  color: var(--gold);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.course__name {
  font-size: var(--step-2);
  margin-bottom: 0.5rem;
}

.course__body { color: var(--bone-dim); max-width: 52ch; margin: 0; }

@media (max-width: 560px) {
  .course { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- imza tabaklar ---------- */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

.plate { display: flex; flex-direction: column; }

/* Her tabak aynı biçimde: dikdörtgenle daireyi karıştırmak dağınık duruyordu.
   Daire ayrıca masa kenarını, örtüyü ve kadrajdaki fazlalığı kesip atıyor. */
.plate__media {
  aspect-ratio: 1;
  margin-bottom: 1.6rem;
  position: relative;
  overflow: hidden;
  border-radius: 49% 51% 53% 47% / 52% 47% 53% 48%;
}

/* El çekilmiş tabaklar birbirinin kopyası olmadığı için kenar eğrisi de
   sırayla değişir — biçim, yandaki metnin söylediği şeyi tekrarlar. */
.plate:nth-child(4n + 2) .plate__media { border-radius: 52% 48% 47% 53% / 48% 53% 47% 52%; }
.plate:nth-child(4n + 3) .plate__media { border-radius: 47% 53% 51% 49% / 53% 49% 51% 47%; }
.plate:nth-child(4n + 4) .plate__media { border-radius: 51% 49% 48% 52% / 47% 52% 49% 53%; }

.plate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.plate:hover .plate__media img { transform: scale(1.045); }

.plate__label {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.7rem;
}
.plate__label .dot { color: var(--bone-faint); }

.plate__name { font-size: var(--step-2); margin-bottom: 0.7rem; }
.plate__note { color: var(--bone-dim); margin: 0; font-size: var(--step-0); }

/* ---------- mutfağın haritası ----------
   Fotoğraf yerine bilgi. Satırlar menüdeki gerçek malzeme kaynakları;
   son satır restoranın kendi adresi olduğu için altın renkte durur. */

.ledger {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--bone-faint);
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(9rem, 22%) 1fr;
  gap: 0.4rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.2rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--bone-faint);
  align-items: baseline;
}

.ledger__place {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: var(--step-2);
  line-height: 1.05;
  margin: 0;
  color: var(--bone);
}

.ledger__items {
  margin: 0;
  color: var(--bone-dim);
  max-width: 46ch;
}

.ledger__row--here .ledger__place,
.ledger__row--here .ledger__items { color: var(--gold); }

@media (max-width: 620px) {
  .ledger__row { grid-template-columns: 1fr; }
}

/* ---------- boş sır diski ----------
   Aynı imza biçim, fotoğrafsız: fırında akıp dipte göllenen sır. */

.disc--empty {
  background:
    radial-gradient(circle at 40% 26%, rgba(255, 255, 255, 0.13), transparent 46%),
    radial-gradient(circle at 52% 76%, var(--glaze-2), var(--glaze) 72%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.4);
}

/* menü sayfasının başlığına fotoğrafsız görsel çapa.
   Disk kenardan taşar ama başlık kutusu onu kırpar; negatif z-index yerine
   metni öne almak yığın bağlamından bağımsız olarak güvenilir çalışır. */
.menu-head { position: relative; overflow: hidden; }

.menu-head__disc {
  position: absolute;
  right: -4%;
  top: 22%;
  width: min(30vw, 300px);
  aspect-ratio: 1;
  border-radius: 49% 51% 53% 47% / 52% 47% 53% 48%;
  opacity: 0.5;
  pointer-events: none;
}

.menu-head > *:not(.menu-head__disc) { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .menu-head__disc { width: 46vw; right: -14%; top: auto; bottom: -8%; opacity: 0.32; }
}

/* ---------- sır bölümü ---------- */

.glaze-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.glaze-note .disc { aspect-ratio: 1; }
.band--glaze .eyebrow { color: var(--gold-soft); }
.band--glaze p { color: rgba(232, 223, 209, 0.78); }

@media (max-width: 800px) { .glaze-note { grid-template-columns: 1fr; } }

/* ---------- şarap ---------- */

.cellar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--bone-faint);
  border: 1px solid var(--bone-faint);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.cellar__item { background: var(--ink); padding: 1.6rem 1.5rem; }
.cellar__item h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.cellar__item p { font-size: var(--step--1); margin: 0; letter-spacing: 0.04em; }

/* ---------- misafirler ---------- */

.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.voice { border-top: 1px solid var(--gold); padding-top: 1.5rem; }

.voice blockquote {
  margin: 0 0 1.2rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--step-1);
  line-height: 1.4;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--bone);
}

.voice figcaption {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.score {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: "Fraunces", Georgia, serif;
}
.score__num { font-size: var(--step-3); color: var(--gold); line-height: 1; }
.score__of {
  font-family: "Archivo", sans-serif;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

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

.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }

.facts { list-style: none; margin: 0 0 2.5rem; padding: 0; }

.facts li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--bone-faint);
  align-items: start;
}

.facts dt, .facts .k {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.facts .v { color: var(--bone); }
.facts .v a { text-decoration: none; border-bottom: 1px solid var(--bone-faint); }
.facts .v a:hover { border-color: var(--gold); }
.facts .v small { display: block; color: var(--bone-dim); font-size: var(--step--1); margin-top: 0.25rem; }

@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* form */

.book { background: var(--ink-2); padding: clamp(1.75rem, 4vw, 2.75rem); }

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  font: inherit;
  font-size: var(--step-0);
  padding: 0.8rem 0.95rem;
  border-radius: 2px;
  transition: border-color 0.25s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(232, 223, 209, 0.3); }
.field textarea { resize: vertical; min-height: 5.5rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

.book__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.6rem; }
.book__alt { font-size: var(--step--1); color: var(--bone-dim); margin: 1.2rem 0 0; }
.book__alt a { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; }
.book__alt a:hover { border-color: var(--gold); }

/* ---------- alt bilgi ---------- */

.foot {
  border-top: 1px solid var(--bone-faint);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
}

.foot__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}

.foot img { width: 150px; opacity: 0.85; }

.foot__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot__links a {
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 0.55rem 0;
}
.foot__links a:hover { color: var(--gold); }

.foot__fine {
  margin-top: 2.5rem;
  font-size: var(--step--1);
  color: rgba(232, 223, 209, 0.38);
}

/* ==========================================================================
   Menü sayfası
   ========================================================================== */

.menu-head {
  padding: clamp(8rem, 18vh, 12rem) 0 clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--bone-faint);
}
.menu-head h1 { font-size: var(--step-4); }
.menu-head .lede { margin-top: 1.5rem; max-width: 46ch; }

/* kategori gezinme şeridi */

.menu-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 16, 14, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bone-faint);
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-nav::-webkit-scrollbar { display: none; }

.menu-nav ul {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem clamp(1.25rem, 4vw, 2.5rem);
  width: max-content;
  min-width: 100%;
}

.menu-nav a {
  display: block;
  white-space: nowrap;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.menu-nav a:hover { color: var(--bone); border-color: var(--bone-faint); }
.menu-nav a[aria-current="true"] { color: var(--gold); border-color: var(--gold); }

/* bölümler */

.course-block { padding: clamp(3rem, 7vw, 5.5rem) 0; border-bottom: 1px solid var(--bone-faint); }
.course-block:last-of-type { border-bottom: 0; }

.course-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.course-block__head h2 { font-size: var(--step-3); }

.course-block__title { flex: 1 1 18rem; }

.course-block__intro {
  margin: 0.9rem 0 0;
  color: var(--bone-dim);
  font-size: var(--step-0);
  max-width: 46ch;
}

/* Bölüm başlığının yanındaki tabak. Yalnızca elde gerçek fotoğrafı olan
   üç bölümde var — her başlığa koymak mekanik görünürdü. */
.course-block__disc {
  flex: 0 0 auto;
  width: clamp(88px, 15vw, 148px);
  aspect-ratio: 1;
  border-radius: 49% 51% 53% 47% / 52% 47% 53% 48%;
  overflow: hidden;
}
.course-block__disc img { width: 100%; height: 100%; object-fit: cover; }
.course-block:nth-of-type(even) .course-block__disc {
  border-radius: 52% 48% 47% 53% / 48% 53% 47% 52%;
}

.course-block__hours {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.dishes { border-top: 1px solid var(--bone-faint); }

/* Geniş ekranda iki sütun: gerçek bir menü gibi okunuyor ve sayfa
   yarı yarıya kısalıyor. Her satırın alt çizgisi olduğu için sütunlar
   ayrı ayrı da düzgün duruyor. */
@media (min-width: 900px) {
  .dishes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.dish {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--bone-faint);
  align-items: baseline;
}

.dish__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--step-1);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.dish__note {
  grid-column: 1;
  color: var(--bone-dim);
  font-size: var(--step--1);
  margin: 0;
  max-width: 62ch;
  line-height: 1.55;
}

.dish__price {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--step-0);
  color: var(--gold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tag {
  font-family: "Archivo", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* "Popüler" dolu altın rozetle yarışmasın: aynı biçim, içi boş.
   Kaynak Google'ın kendi işaretlediği iki yemek. */
.tag--pop {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(197, 154, 107, 0.5);
  font-weight: 600;
}

/* şarap tablosu: kadeh / şişe iki fiyat */

.pours {
  display: grid;
  grid-template-columns: 1fr 6.5rem 6.5rem;
  gap: 0.3rem 1rem;
  align-items: baseline;
}

.pours__head {
  display: contents;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.pours__head span { padding-bottom: 0.7rem; border-bottom: 1px solid var(--bone-faint); }
.pours__head span:not(:first-child) { text-align: right; }

.pour {
  display: contents;
}
.pour > * { padding: 1.05rem 0; border-bottom: 1px solid var(--bone-faint); }

.pour__name {
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--step-0);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin: 0;
}
.pour__name small {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: var(--step--1);
  color: var(--bone-dim);
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

.pour__price {
  text-align: right;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pour__price--none { color: rgba(232, 223, 209, 0.28); }

@media (max-width: 600px) {
  .pours { grid-template-columns: 1fr 5rem 5rem; gap: 0.3rem 0.6rem; }
  .pours__head, .pour__price { font-size: var(--step--1); }
}

/* ---------- fotoğrafı olan yemekler ----------
   Küçük daire hem "burada fotoğraf var" işareti hem önizleme.
   Fotoğrafı olmayan satırlar hiç değişmiyor, dolayısıyla boş bir
   söz verilmiş olmuyor. */

.dish__peek {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: zoom-in;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 49% 51% 53% 47% / 52% 47% 53% 48%;
  overflow: hidden;
  order: -1;                       /* adın soluna geçer */
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.dish__peek img { width: 100%; height: 100%; object-fit: cover; }
.dish__peek:hover { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(197, 154, 107, 0.55); }

/* ---------- büyütme penceresi ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(9, 8, 7, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.viewer[data-open="true"] { opacity: 1; }

/* Sınıf seçicisi tarayıcının `[hidden] { display:none }` kuralını ezdiği için
   bunu açıkça yazmak gerekiyor; yoksa kapalı pencere yerinde durup
   tıklamaları yakalayabilir. */
.viewer[hidden] { display: none; }

.viewer__box {
  max-width: min(100%, 34rem);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.35s var(--ease);
}
.viewer[data-open="true"] .viewer__box { transform: none; }

/* Büyütmede kırpma yok: fotoğraf kendi oranında durur.
   Daireye sığdırmak yüksekliğin dörtte birini kesiyordu, dikey çekilmiş
   tabaklarda yemeğin bir kısmı kadraj dışında kalıyordu. Daire dili
   küçük önizlemede ve ana sayfada zaten var. */
.viewer__media {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.75rem;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  background: var(--ink-2);
}
.viewer__media img {
  max-width: min(78vw, 24rem);
  max-height: 62vh;
  width: auto;
  height: auto;
}

.viewer__name {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: var(--step-2);
  margin: 0 0 0.6rem;
}
.viewer__note { color: var(--bone-dim); margin: 0 auto; max-width: 42ch; font-size: var(--step-0); }
.viewer__price {
  display: block;
  margin-top: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.viewer__close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.75rem);
  right: clamp(0.75rem, 3vw, 1.75rem);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--bone-faint);
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.viewer__close:hover { background: rgba(232, 223, 209, 0.12); border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .viewer, .viewer__box { transition: none; }
}

.menu-foot-note {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  color: var(--bone-dim);
  font-size: var(--step--1);
  max-width: var(--alley);
}

/* ---------- kaydırmada beliriş ---------- */

/* İçerik varsayılan olarak görünür durur. Gizleme yalnızca JS çalışıyorsa
   devreye girer; böylece script yüklenmezse sayfa boş kalmaz. */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}