/* ============================================================
   Nefis Lokanta — tek stil dosyası
   Palet: krem (zemin) · domates (vurgu) · çelik (ikincil) · ink (metin)
   Karakter: 1978'den beri Ulus'ta hizmet veren sıcak bir esnaf lokantası
   ============================================================ */

/* 1. reset+tokens ============================================ */
:root {
  --krem: #F6F1E7;
  --domates: #C03A2B;
  --domates-acik: #E2745E;
  --celik: #5B6770;
  --ink: #2E2620;
  --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline-strong: color-mix(in srgb, var(--ink) 20%, transparent);
  --hairline-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --radius: 10px;
  --max-w: 1200px;
  --font-body: Seravek, "Segoe UI", Verdana, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sayfa içi çapa atlamaları anlık kalır, sayfalar arası gezinme sade tutulur. */
html { scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  background: var(--krem);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
ul[class], ol[class] { list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--domates); outline-offset: 3px; }

/* Skip link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--domates); color: var(--krem); font-weight: 700;
  padding: 12px 20px; border-radius: var(--radius);
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* 2. type+utilities ============================================ */
h1, h2, h3 { font-weight: 700; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5.5vw, 4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p { max-width: 62ch; }

.micro {
  display: inline-block; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; font-weight: 600; color: var(--celik);
}
.fiyat { font-variant-numeric: tabular-nums; }
.muted { opacity: .72; }
.domates-text { color: var(--domates); }

.container { max-width: var(--max-w); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: clamp(56px, 9vw, 112px); }
.hairline { border-top: 1px solid var(--hairline); }

/* Placeholder: içerik dolduğunda scroll-reveal ile güçlendirilecek;
   şimdilik varsayılan görünür durumda (bkz. gelecek görev, assets/app.js). */
.reveal { opacity: 1; transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid transparent; font-weight: 600; font-size: .92rem;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-domates {
  background: var(--domates); color: var(--krem); border-color: var(--domates);
}
.btn-domates:hover, .btn-domates:focus-visible {
  background: color-mix(in srgb, var(--domates) 85%, black);
  border-color: color-mix(in srgb, var(--domates) 85%, black);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 3. header+nav ================================================ */
.site-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  background: color-mix(in srgb, var(--krem) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: background .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--krem) 97%, transparent);
  border-bottom-color: var(--hairline-strong);
}
/* index.html only: the hero is full-bleed and dark, so the header can't
   rely on the ordinary translucent-krem-over-page-background look — it
   starts in the same solid state .scrolled reaches on other pages,
   regardless of scroll position, so ink nav text stays readable over the
   hero from the first paint. JS's scroll listener only ever *adds*
   .scrolled (never removes .is-home), so this is stable across scroll. */
.site-header.is-home {
  background: color-mix(in srgb, var(--krem) 97%, transparent);
  border-bottom-color: var(--hairline-strong);
}
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.brand-sign { width: 100px; height: 36px; flex: none; }
.brand-sign rect { fill: var(--krem); stroke: var(--domates); stroke-width: 2; }
.brand-sign text { fill: var(--ink); font-family: var(--font-body); font-weight: 700; }
.brand-text {
  display: inline-block; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; font-weight: 600; color: var(--celik);
}

.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a:not(.btn) {
  color: inherit; text-decoration: none; text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem; white-space: nowrap; position: relative; padding-block: 6px;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--domates); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--domates); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1023px) {
  /* No-JS fallback: nav-toggle stays hidden (it can't do anything without
     JS) and .nav-links renders inline as a plain, always-visible, stacked
     block — full primary nav stays reachable with JS disabled/blocked. */
  .nav-links {
    flex-basis: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--krem);
    padding: 16px 4px 24px;
    border-top: 1px solid var(--hairline);
  }
  .nav-links a { padding: 12px 8px; }
  .nav-links li { width: 100%; }

  /* JS-enhanced: hamburger-triggered slide-down overlay replaces the
     plain stacked block above. Everything here is scoped to html.js so
     the no-JS fallback above is what renders without app.js. */
  html.js .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; color: inherit;
  }
  html.js .nav-toggle span { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform .25s, opacity .25s; }
  html.js .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  html.js .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  html.js .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  html.js .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  html.js .nav-open .nav-links { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .24s ease, transform .24s ease; }
  html.js .site-header.nav-open { background: var(--krem); border-bottom-color: var(--hairline-strong); }
  html.js .nav-links li { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
  html.js .nav-open .nav-links li { opacity: 1; transform: none; }
  html.js .nav-open .nav-links li:nth-child(1) { transition-delay: .03s } html.js .nav-open .nav-links li:nth-child(2) { transition-delay: .06s }
  html.js .nav-open .nav-links li:nth-child(3) { transition-delay: .09s } html.js .nav-open .nav-links li:nth-child(4) { transition-delay: .12s }
}

/* Header row at narrow widths: brand shrinks to its signboard only so
   [brand | 44px toggle] fits at 320px. */
@media (max-width: 599px) {
  .site-header .brand-text { display: none; }
  .site-header .brand-sign { width: 84px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span, .nav-links, .nav-links li, .site-header { transition: none; }
}

/* 4. footer ===================================================== */
.site-footer {
  background: var(--ink); color: var(--krem);
  border-top: 1px solid var(--hairline);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.5fr; gap: 36px; padding-block: 56px 40px; }
.site-footer h3 { color: var(--domates-acik); font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; margin-bottom: 16px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--domates-acik); text-decoration: underline; }
.site-footer li { margin-bottom: 10px; }
.site-footer .brand { color: var(--krem); }
.site-footer .brand-text { color: color-mix(in srgb, var(--krem) 70%, transparent); }
.footer-tagline { color: var(--krem); opacity: .72; max-width: 30ch; margin-top: 10px; }
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a { display: inline-flex; padding: 8px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); color: var(--domates-acik); }
.social-row a:hover, .social-row a:focus-visible { border-color: var(--domates); color: var(--krem); }
.social-row svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid var(--hairline-soft); padding-block: 20px; }
.footer-bottom p { font-size: .8rem; opacity: .72; }

@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* 5. menü + board ============================================= */

/* -- Menü grupları (menu.html #yemekler) ------------------------- */
.yemekler-head { padding-bottom: 8px; }
.yemekler-body { padding-block: 8px 16px; }

.menu-group { margin-block: 36px; }
.menu-group:first-child { margin-top: 0; }
.menu-group .micro { display: block; margin-bottom: 10px; }

.menu-desc { color: var(--celik); font-size: .88rem; }

.menu-note { margin-top: 12px; font-size: .85rem; font-style: italic; color: var(--celik); }
.menu-note .fiyat { font-style: normal; font-weight: 700; color: var(--ink); }

/* -- Full-bleed breakout images between menu groups --------------
   Wrapper (.bleed) carries the breakout transform; .reveal stays on
   the <img> for the future scroll-reveal enhancement. Works nested
   inside a centered .container because margin-left:50% resolves
   against the (also centered) containing block, then translateX(-50%)
   of the wrapper's own 100vw width lands its left edge on the
   viewport edge. body{overflow-x:clip} absorbs the reflow. */
.bleed {
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  height: 60svh; overflow: hidden; margin-block: 44px;
}
.bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- Günün Menüsü board (index #gunun-menusu, menu #gunun-menusu-kompakt) */
.board-section { }
.board-section--kompakt { padding-block: clamp(32px, 5vw, 56px) 0; }
.board-head { margin-bottom: 24px; }
.board-head h2 { margin-top: 8px; }
.board-head--kompakt { margin-bottom: 18px; }

.board-note {
  background: color-mix(in srgb, var(--domates) 10%, transparent);
  color: color-mix(in srgb, var(--domates) 85%, black); font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius);
  margin-bottom: 16px;
}
.board-tabldot { color: var(--celik); font-size: .85rem; margin-bottom: 12px; }
.board-tabldot .fiyat { color: var(--ink); font-weight: 700; }

/* 7. reveals + board durumu ========================================== */

/* Enhanced reveal animation when JS is on */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s, transform .5s;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Board note hidden styling */
.board-note[hidden] { display: none; }

/* 6. sayfa bölümleri ============================================ */

/* -- Ortak yardımcılar ------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.section-head { margin-bottom: 24px; }
.section-head h2 { margin-top: 8px; }

/* Bleed'in daha sakin, konteynıra bağlı kalan kardeşi — yan yatmayan
   ama yine de geniş görünen fotoğraf blokları için. */
.wide-img {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; margin-block: 36px;
}
.wide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- Hero (index #hero) — full-bleed video/image background ------- */
.hero {
  position: relative; min-height: 92svh;
  display: grid; place-items: center;
  isolation: isolate; /* new stacking context so z-index:0/1/2 below stay local */
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video, .video-fallback {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-fallback { display: none; }

/* Ink scrim, lighter at top / stronger at bottom so the centered text
   block sits over a floor of ~.58 average opacity — keeps krem text at
   ≥4.5:1 even over a bright midtone photo (computed: worst-case top-edge
   stop over a mid-gray frame ≈ 6.3:1, bottom stop ≈ 9.2:1). */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(46, 38, 32, .45) 0%,
    rgba(46, 38, 32, .72) 100%);
}

.hero-copy {
  position: relative; z-index: 2;
  text-align: center; color: var(--krem);
  padding-block: clamp(40px, 7vw, 80px);
}
.hero-copy h1 { color: var(--krem); margin-bottom: 14px; }
.hero-line { font-size: 1.15rem; color: var(--krem); opacity: .92; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .video-fallback { display: block; }
}

/* -- Öne çıkanlar (index #one-cikanlar) --------------------------- */
.cikan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cikan-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hairline); transition: border-color .2s, transform .2s;
}
.cikan-card:hover, .cikan-card:focus-visible { border-color: var(--domates); transform: translateY(-3px); }
.cikan-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cikan-body { padding: 16px 18px 20px; }
.cikan-body h3 { margin-bottom: 4px; }
.cikan-desc { color: var(--celik); font-size: .88rem; margin-bottom: 10px; }
.cikan-body .fiyat { font-weight: 700; color: var(--domates); }

@media (max-width: 899px) { .cikan-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .cikan-grid { grid-template-columns: 1fr; } }

/* -- Hakkımızda teaser (index #hakkimizda-teaser) ----------------- */
.teaser-copy { max-width: 640px; margin-inline: auto; text-align: center; }
.teaser-copy p { margin-inline: auto; margin-bottom: 16px; }
.teaser-link { color: var(--domates); font-weight: 700; text-decoration: none; }
.teaser-link:hover, .teaser-link:focus-visible { text-decoration: underline; }

/* -- Yorumlar (index #yorumlar) ------------------------------------ */
.yorum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.yorum-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 24px; background: color-mix(in srgb, var(--krem) 100%, white 0%);
}
.yorum-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.yorum-stars svg { width: 15px; height: 15px; fill: var(--domates); }
.yorum-card p { font-size: .96rem; margin-bottom: 14px; }
.yorum-card cite { font-style: normal; font-weight: 700; font-size: .85rem; color: var(--celik); }

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

/* -- Ulaşım şeridi (index #ulasim) --------------------------------- */
.section.ulasim { padding-block: clamp(28px, 4vw, 44px); background: var(--ink); color: var(--krem); }
.ulasim-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px;
}
.ulasim-strip p { margin: 0; font-size: .92rem; }
.ulasim-strip a { color: var(--krem); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--krem) 45%, transparent); }
.ulasim-strip a:hover, .ulasim-strip a:focus-visible { color: var(--domates-acik); text-decoration-color: var(--domates-acik); }
.ulasim-not { opacity: .8; }

/* -- Hikaye (hakkimizda #hikaye) ------------------------------------ */
.hikaye-metin { max-width: 68ch; margin-top: 20px; }
.hikaye-metin p { margin-bottom: 16px; }

/* -- Zaman çizelgesi (hakkimizda #zaman-cizelgesi) ------------------ */
.zaman-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  list-style: none;
}
.zaman-step { border-top: 3px solid var(--domates); padding-top: 16px; }
.zaman-yil {
  display: block; font-weight: 700; font-size: 1.6rem;
  color: var(--domates); margin-bottom: 4px;
}
.zaman-step h3 { margin-bottom: 6px; }
.zaman-step p { color: var(--celik); font-size: .92rem; }

@media (max-width: 899px) { .zaman-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .zaman-list { grid-template-columns: 1fr; } }

/* -- Değerler (hakkimizda #degerler) -------------------------------- */
.degerler-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.deger-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 24px; border-left: 4px solid var(--domates);
}
.deger-card h3 { margin-bottom: 8px; }
.deger-card p { color: var(--celik); font-size: .92rem; }

@media (max-width: 899px) { .degerler-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .degerler-grid { grid-template-columns: 1fr; } }

/* -- Bilgiler (iletisim #bilgiler) ----------------------------------- */
.bilgiler-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 48px);
  align-items: start; margin-top: 28px;
}
.bilgiler-adres p { margin-bottom: 10px; }
.yol-tarifi { color: var(--celik); }
.bilgiler-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

.saat-tablosu { width: 100%; border-collapse: collapse; }
.saat-tablosu caption { text-align: left; margin-bottom: 12px; }
.saat-tablosu tr { border-top: 1px solid var(--hairline); }
.saat-tablosu th, .saat-tablosu td { padding: 12px 4px; text-align: left; font-weight: 600; }
.saat-tablosu tr.is-kapali th, .saat-tablosu tr.is-kapali td { color: var(--domates); font-weight: 700; }

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

/* -- Mekan (iletisim #mekan) ----------------------------------------- */
.mekan-note { color: var(--celik); margin-top: 8px; }

/* 8. v2 genişletme ============================================== */

/* -- Günün Menüsü board — satırlardan kartlara (index #gunun-menusu,
   menu #gunun-menusu-kompakt). JS sözleşmesi korunur: her kart hâlâ
   .board-row[data-day], .board-gun/.board-yemek/.board-fiyat sınıflarını
   taşır; JS bugünkü .board-row'a .is-bugun ekler (assets/app.js §4). */
.board-tabldot { margin-bottom: 20px; }

.board-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}

.board-row {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--krem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .2s;
}
.board-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-gun { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: var(--celik); }

.board-fiyat {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--celik); background: color-mix(in srgb, var(--celik) 6%, transparent);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.board-fiyat .fiyat { font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: normal; font-size: .82rem; }

.board-yemek { font-size: 1.05rem; font-weight: 700; margin: 0; }
.board-desc { color: var(--celik); font-size: .88rem; margin: 0; }
.board-corba { font-size: .82rem; font-weight: 600; color: color-mix(in srgb, var(--domates) 85%, black); margin: 0; }

/* Bugünün kartı — belirgin şekilde öne çıkar (JS uygular, bkz. app.js §4) */
.board-row.is-bugun {
  border-color: var(--domates); border-width: 2px;
  background: color-mix(in srgb, var(--domates) 8%, var(--krem));
}
.board-row.is-bugun .board-gun::after {
  content: " · BUGÜN";
  color: color-mix(in srgb, var(--domates) 85%, black);
  font-weight: 700;
}
.board-row.is-bugun .board-fiyat {
  background: color-mix(in srgb, var(--domates) 85%, black); color: var(--krem);
}
.board-row.is-bugun .board-fiyat .fiyat { color: var(--krem); }

@media (max-width: 899px) { .board-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .board-grid { grid-template-columns: 1fr; } }

/* Kompakt pano (menu.html) — daha az dolgu, daha küçük tipografi */
.board-grid--kompakt { gap: 12px; }
.board-grid--kompakt .board-row { padding: 16px 18px; gap: 6px; }
.board-grid--kompakt .board-yemek { font-size: .96rem; }
.board-grid--kompakt .board-desc { font-size: .82rem; }

@media (max-width: 899px) { .board-grid--kompakt { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .board-grid--kompakt { grid-template-columns: 1fr; } }

/* -- Menü kartları (menu.html #yemekler) — foto/metin kart ızgaraları -- */
.menu-group-intro { color: var(--celik); font-size: .9rem; font-style: italic; margin-top: 6px; margin-bottom: 18px; }

.menu-photo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-bottom: 16px;
}

.menu-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; background: var(--krem);
  transition: border-color .2s, transform .2s;
}
.menu-photo-grid .menu-card:hover, .menu-photo-grid .menu-card:focus-within { border-color: var(--domates); transform: translateY(-2px); }
.menu-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.menu-card-body { padding: 16px 18px; }

.menu-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu-card-top h3 { font-size: 1.02rem; }
.menu-card-body .menu-desc { margin-top: 6px; }
.menu-card-body .fiyat { font-weight: 700; color: var(--domates); white-space: nowrap; }

.menu-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.menu-variant {
  display: inline-block; font-size: .76rem; font-weight: 600;
  color: var(--celik); background: color-mix(in srgb, var(--celik) 6%, transparent);
  padding: 3px 9px; border-radius: 999px;
}

.menu-note-card {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 12px; margin-top: 16px;
}
.menu-note-card img { width: 84px; height: 84px; object-fit: cover; border-radius: calc(var(--radius) - 4px); flex: none; }
.menu-note-card .menu-note { margin: 0; font-style: italic; color: var(--celik); }
.menu-note-card .menu-note .fiyat { font-style: normal; font-weight: 700; color: var(--ink); }

@media (max-width: 899px) {
  .menu-photo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .menu-note-card { flex-direction: column; align-items: flex-start; }
  .menu-note-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* -- Bir Günümüz (hakkimizda #bir-gunumuz) — 5 adımlı zaman şeridi ----- */
.gun-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
  list-style: none;
}
.gun-adim { border-top: 3px solid var(--celik); padding-top: 16px; }
.gun-saat {
  display: block; font-weight: 700; font-size: 1.3rem;
  color: var(--celik); margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.gun-adim h3 { margin-bottom: 6px; }
.gun-adim p { color: var(--celik); font-size: .9rem; }

@media (max-width: 899px) { .gun-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .gun-strip { grid-template-columns: 1fr; } }