/* Spica Bistro. Renkler tabeladan: şişe yeşili zemin, ışıklı krem harfler, pirinç. */
:root {
  --sc-canvas:     #0C120F;
  --sc-surface:    #141C17;
  --sc-ink:        #EFE6D2;
  --sc-ink-soft:   #B3AD99;
  --sc-accent:     #D9A74A;
  --sc-accent-ink: #0C120F;
  --sc-font-display: "Fraunces", Georgia, serif;
  --sc-font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --tabela: #173327;
  --cizgi: color-mix(in oklab, var(--sc-ink) 22%, transparent);
}

body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); }

/* Motor bağlanmadan önce sabitlenen bölümlere son boylarını ver; yoksa bağlanınca sayfa kayar (CLS) */
.giris { height: 520vh; } .mutfak { height: 460vh; } .katman { height: 340vh; } .kapanis { height: 120vh; }
:is(.giris, .mutfak, .katman, .kapanis) > [data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.giris > [data-sc-stage] :is(.sc-stage__poster, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-display { font-family: var(--sc-font-display); font-weight: 400; font-variation-settings: "opsz" 96; letter-spacing: -0.015em; }
.sc-body { line-height: 1.65; }

.atla { position: fixed; left: var(--sc-4); top: -4rem; z-index: 50; padding: var(--sc-2) var(--sc-4); background: var(--sc-ink); color: var(--sc-canvas); border-radius: 2px; }
.atla:focus { top: var(--sc-4); }

/* Tabeladaki "— BISTRO —" çizgisi: küçük etiketlerin tek süsü */
.cizgili {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 var(--sc-4);
}
.cizgili::before, .cizgili::after { content: ""; width: 2.25rem; height: 1px; background: var(--cizgi); }

/* Üst bar */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  padding-top: max(var(--sc-4), env(safe-area-inset-top));
  padding-bottom: var(--sc-7);
  background: linear-gradient(to bottom, rgb(12 18 15 / 0.92) 0%, rgb(12 18 15 / 0.6) 55%, transparent 100%);
  pointer-events: none;
}
.ust > * { pointer-events: auto; }
.ust__marka { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--sc-ink); text-decoration: none; }
.ust__ad { font-family: var(--sc-font-display); font-size: 1.35rem; letter-spacing: 0.16em; text-transform: uppercase; font-variation-settings: "opsz" 24; }
.ust__alt { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.56rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--sc-ink-soft); }
.ust__alt::before, .ust__alt::after { content: ""; width: 0.9rem; height: 1px; background: var(--cizgi); }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--sc-6);
  background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: 2px;
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.dugme--kucuk { min-height: 40px; padding: 0 var(--sc-4); font-size: var(--sc-t-xs); }
@media (hover: hover) and (pointer: fine) { .dugme:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); } }
.dugme:active { transform: translateY(1px); }
a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* 1 · Giriş */
/* Bant scrim'i başlık bloğunun tepesine kadar uzatır: ilk kare caddenin en aydınlık anı */
.giris__scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 48%, transparent) 48%,
    transparent 72%);
}
/* Bara varınca sahne sayfanın rengine kararır; mutfak aynı zeminden açılır, böylece iki bölüm tek geçiş gibi okunur */
.giris__karartma { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--sc-canvas); opacity: clamp(0, (var(--sc-p, 0) - 0.84) / 0.14, 1); }
.giris .sc-copy { z-index: 2; }
.giris .cizgili { color: var(--sc-ink); text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.giris__metin { max-width: min(36rem, 46vw); }
.giris__h1 { margin: 0; font: inherit; }
.giris__h1 .cizgili { display: flex; width: max-content; }
.giris__baslik { display: block; margin: 0; line-height: 0.95; }
.giris__metin h2 { margin: 0; }
.giris__alt { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); }
.giris .sc-display { text-shadow: 0 2px 24px rgb(0 0 0 / 0.4); }

/* 2 · Mutfak rayı */
.mutfak [data-sc-stage] { display: flex; align-items: center; background: var(--sc-canvas); }
.mutfak__ray { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); padding-inline: var(--sc-gutter); }
.mutfak__bas { flex: 0 0 min(26rem, 80vw); }
.mutfak__bas .sc-body { margin-top: var(--sc-4); }
.kare { flex: 0 0 auto; margin: 0; width: calc(min(62vh, 640px) * 9 / 16); }
.kare--asagi { transform: translateY(7vh); }
.kare video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 2px; background: var(--sc-surface); box-shadow: var(--sc-e2); }
.kare figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); }
.mutfak__son { flex: 0 0 18rem; margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); color: var(--sc-ink-soft); }

/* 3 · Katmanlar (imza). Burger videosu scroll ile açılır ve kapanır; etiketler açık anda görünür. */
.katman__sahne { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: var(--sc-8); padding-inline: var(--sc-gutter); background: #070E0A; }
.katman__metin .sc-body { margin-top: var(--sc-5); }
.katman__metin h2 { margin: 0; }
.burger { position: relative; width: min(84vh, 100%); aspect-ratio: 1; justify-self: center; }
.burger :is(video[data-sc-scrub], .sc-stage__poster) {
  object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.etiketler { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.etiketler li {
  position: absolute; top: var(--y); left: 77%; translate: 0 -50%;
  display: flex; align-items: center; gap: var(--sc-3);
  font-size: var(--sc-t-sm); letter-spacing: 0.02em; color: var(--sc-ink); white-space: nowrap; text-shadow: 0 1px 8px rgb(0 0 0 / 0.8);
  padding: 0.5em 0.8em; border-radius: 2px; background: rgb(7 14 10 / 0.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.etiketler li::before { content: ""; flex: none; width: 2.25rem; height: 1px; background: var(--sc-accent); }
.etiketler li.sol { left: auto; right: 77%; flex-direction: row-reverse; }

/* 4 · Menü */
.menu { background: #0F1612; padding-top: clamp(3rem, 6vw, 6rem); }
.menu__izgara { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.menu__giris { margin: var(--sc-4) 0 0; max-width: 46ch; color: var(--sc-ink-soft); line-height: 1.6; }
.menu dl { margin: var(--sc-6) 0 0; border-top: 1px solid var(--cizgi); }
.menu dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sc-4); padding: var(--sc-4) 0; border-bottom: 1px solid var(--cizgi); }
.menu dt { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-variation-settings: "opsz" 36; }
.menu dd { margin: 0; align-self: center; color: var(--sc-ink-soft); line-height: 1.55; }
.menu dd small { display: block; margin-top: var(--sc-1); font-size: var(--sc-t-xs); color: color-mix(in oklab, var(--sc-ink-soft) 80%, var(--sc-canvas)); }
.menu__not { margin-top: var(--sc-6); max-width: 46ch; color: var(--sc-ink-soft); line-height: 1.6; }
.menu__not a, .salon a, .alt a { color: var(--sc-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.menu__foto { margin: 0; position: sticky; top: 14vh; }
.menu__foto img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: var(--sc-e3); }
.menu__foto figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* 5 · Salon */
.salon { position: relative; padding-bottom: var(--sc-section); }
.salon__foto { margin: 0; }
.salon__foto img { display: block; width: 100%; height: min(86vh, 56vw); object-fit: cover; }
.salon__metin { position: relative; margin-top: calc(-1 * clamp(4rem, 12vw, 11rem)); max-width: 34rem; margin-left: var(--sc-gutter); padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--sc-canvas); box-shadow: var(--sc-e3); }
.salon__metin h2 { margin: 0; }
.salon__metin .sc-body { margin-top: var(--sc-4); }
.salon__puan { margin: var(--sc-6) 0 0; display: flex; align-items: baseline; gap: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.salon__sayi { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); color: var(--sc-accent); font-variant-numeric: tabular-nums; }

/* 6 · Kapanış */
.kapanis__sahne { display: grid; align-items: center; }
.kapanis__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kapanis__perde { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 18 15 / 0.94) 0%, rgb(12 18 15 / 0.82) 38%, rgb(12 18 15 / 0.1) 72%); }
.kapanis__icerik { position: relative; z-index: 2; max-width: 34rem; margin-left: var(--sc-gutter); }
.kapanis__icerik h2 { margin: 0; }
.kapanis__adres { margin-top: var(--sc-5); font-style: normal; line-height: 1.6; color: var(--sc-ink-soft); }
.saatler { margin: var(--sc-5) 0 0; display: grid; gap: var(--sc-2); }
.saatler > div { display: flex; justify-content: space-between; max-width: 20rem; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--cizgi); }
.saatler dd { margin: 0; font-variant-numeric: tabular-nums; }
.kapanis__eylem { display: flex; align-items: center; gap: var(--sc-6); margin-top: var(--sc-7); flex-wrap: wrap; }
.kapanis__tel { color: var(--sc-ink); font-size: var(--sc-t-lg); text-decoration: none; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--cizgi); padding: var(--sc-3) 0; }
.alt {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; gap: var(--sc-6); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--sc-4) var(--sc-gutter) max(var(--sc-4), env(safe-area-inset-bottom)); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}

/* Telefon: kendi düzeni, masaüstünün küçültülmüşü değil */
@media (max-width: 760px) {
  .giris__metin { max-width: none; right: var(--sc-gutter); }
  .giris .sc-display--xl { font-size: var(--sc-t-3xl); }
  .giris .sc-display--lg { font-size: var(--sc-t-2xl); }
  .giris__alt { font-size: var(--sc-t-base); }

  .mutfak__bas { flex-basis: 72vw; }
  .kare { width: 58vw; }
  .kare--asagi { transform: translateY(4vh); }
  .mutfak__son { flex-basis: 60vw; }

  .katman__sahne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; gap: var(--sc-2); padding-top: 5rem; }
  .katman__metin .sc-body { display: none; }
  .katman .sc-display--lg { font-size: var(--sc-t-2xl); }
  /* Telefonda burger tam genişlik; etiketler iki yanda kısa ve küçük */
  .burger { width: min(100vw, 64vh); margin-inline: calc(-1 * var(--sc-gutter)); justify-self: center; }
  .etiketler li { left: 76%; font-size: 0.7rem; gap: var(--sc-2); }
  .etiketler li.sol { right: 76%; }
  .etiketler li::before { width: 0.9rem; }

  .menu__izgara { grid-template-columns: 1fr; }
  .menu dl > div { grid-template-columns: 6.5rem 1fr; }
  .menu__foto { position: static; }

  .salon__foto img { height: 78vh; }
  .salon__metin { margin-inline: var(--sc-4); margin-top: -5rem; }

  .kapanis__perde { background: linear-gradient(0deg, rgb(12 18 15 / 0.96) 0%, rgb(12 18 15 / 0.86) 58%, rgb(12 18 15 / 0.2) 100%); }
  .kapanis__sahne { align-items: end; }
  .kapanis__icerik { margin: 0 var(--sc-gutter) 5.5rem; }
  .kapanis .sc-display--lg { font-size: var(--sc-t-2xl); }
  .alt { justify-content: flex-start; gap: var(--sc-4); }
}

/* Hareket azaltılınca döngüler oynamaz, kartlar sabit durur */
@media (prefers-reduced-motion: reduce) {
  .kare--asagi { transform: none; }
}

/* Menü: ürün adının üstüne gelince (dokunmatikte dokununca) Yemeksepeti fotoğrafı açılır */
.urun {
  font: inherit; color: inherit; background: none; border: 0; padding: 0.15em 0; margin: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out);
  touch-action: manipulation;
}
.urun:hover, .urun:focus-visible, .urun[aria-expanded="true"] { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
.urun:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 1px; }
.ayrac { color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); }

.onizleme {
  position: fixed; left: 0; top: 0; z-index: 30; margin: 0;
  width: clamp(212px, 18vw, 272px); padding: 8px;
  background: var(--sc-surface); border: 1px solid var(--cizgi); border-radius: 2px; box-shadow: var(--sc-e3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0); scale: 0.96; transform-origin: var(--koken, bottom left);
  transition: opacity 140ms var(--sc-ease-out), scale 140ms var(--sc-ease-out), visibility 0s linear 140ms;
}
.onizleme.acik { opacity: 1; visibility: visible; pointer-events: auto; scale: 1; transition-delay: 0s; }
.onizleme img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; background: var(--sc-canvas); transition: opacity 120ms var(--sc-ease-out); }
.onizleme img.yukleniyor { opacity: 0; }
.onizleme__alt { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3); margin-top: 8px; }
.onizleme__ad { margin: 0; min-width: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 24; font-size: var(--sc-t-sm); line-height: 1.25; color: var(--sc-ink); }
.onizleme__siparis {
  flex: none; display: inline-flex; align-items: center; gap: 0.35em; min-height: 36px; padding: 0 12px;
  background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: 2px; text-decoration: none; white-space: nowrap;
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.03em;
  transition: background-color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .onizleme__siparis:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); } }
.onizleme__siparis:active { transform: translateY(1px); }
.onizleme__siparis:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
@media (pointer: coarse) { .onizleme__siparis { min-height: 44px; padding: 0 14px; } }

@media (prefers-reduced-motion: reduce) {
  .onizleme, .onizleme img { transition: opacity 100ms linear; }
  .onizleme, .onizleme.acik { scale: none; }
}