/* =========================================================
   OCAK — Mahalle Kafesi
   Tasarım tokenları + ortak bileşenler
   ========================================================= */

:root{
  /* Renkler */
  --paper:      #FFFFF9;   /* zemin: Figma'daki kırık beyaz */
  --paper-2:    #F4F3EF;   /* kart/panel zemini (Figma: kategori kutuları) */
  --ink:        #2B2420;   /* ana metin: kavrulmuş kahve tonu */
  --ink-soft:   #6B5F53;   /* ikincil metin */
  --wine:       #6E1F2A;   /* birincil vurgu: bordo/şarap */
  --wine-dark:  #4E1620;   /* hover/koyu ton */
  --brass:      #C9A227;   /* ikincil vurgu: pirinç sarısı */
  --olive:      #4B5A45;   /* üçüncül vurgu: etiketler */
  --moss:       #7F8439;   /* Figma: aktif menü rengi (nav altı çizgi) */
  --line:       #DDD0B6;   /* çizgi/kenarlık */
  --paper-rgb:  255, 255, 249;

  /* Tipografi — Figma: Inria Serif (başlık) + Inter (gövde) */
  --font-display: "Inria Serif", Georgia, serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  /* kafeşablon.pdf: el yazısı script başlıklar (Geçmişin İzinde, Hikayemiz, Menü…) */
  --font-script:  "Petit Formal Script", "Inria Serif", cursive;

  /* Ölçek */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 56px; /* kafeşablon.pdf: çok yuvarlak "hap" foto çerçeveleri */
  --container: 1120px;
  --shadow-sm: 0 2px 10px rgba(43,36,32,0.06);
  --shadow-md: 0 10px 30px rgba(43,36,32,0.10);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.15; font-weight: 600; }
p{ margin: 0 0 1em; }
button{ font: inherit; }

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 0.9em;
}

.section{ padding: 72px 0; }
.section-tight{ padding: 40px 0; }
@media (max-width: 720px){
  .section{ padding: 52px 0; }
}

.section-head{
  max-width: 640px;
  margin: 0 0 40px;
}
.section-head p{ color: var(--ink-soft); }

/* ---------- Butonlar ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--wine);
  color: var(--paper);
}
.btn-primary:hover{ background: var(--wine-dark); }
.btn-outline{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--wine); color: var(--wine); }
.btn-block{ width: 100%; justify-content: center; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--paper-rgb), 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100px;
  max-width: 100%;
  padding: 0 40px;
}
.site-header .brand{ justify-self: start; }
.site-header .main-nav{ justify-self: center; }
.site-header .nav-toggle{ justify-self: end; }
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
  flex-shrink: 0;
}
.brand img{ width: 32px; height: 36px; object-fit: contain; }
.site-header:not(.header-overlay) .brand img{ width: 62px; height: 70px; }
.brand small{
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.main-nav{ display: flex; align-items: center; gap: 8px; }
.main-nav ul{ display: flex; gap: clamp(10px, 2.4vw, 30px); }
.main-nav a{
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink-soft);
  transition: background-color .15s ease, color .15s ease;
}
.main-nav a:hover{ background: var(--paper-2); color: var(--ink); }
.main-nav a[aria-current="page"]{
  color: var(--moss);
  background: transparent;
  position: relative;
}
.main-nav a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--moss);
}
.nav-cta{ margin-left: 8px; }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg{ width: 20px; height: 20px; }

@media (max-width: 860px){
  .main-nav{
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    border-top: 1px solid var(--line);
  }
  .main-nav.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .main-nav ul{ flex-direction: column; gap: 6px; }
  .main-nav a{ display: block; padding: 14px 16px; font-size: 1.05rem; }
  .nav-cta{ margin: 12px 0 0; }
  .nav-cta .btn{ width: 100%; justify-content: center; }
  .nav-toggle{ display: inline-flex; }
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: rgba(var(--paper-rgb), 0.85);
  padding: 56px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-grid h4{
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-grid .brand{ color: var(--paper); margin-bottom: 10px; }
.footer-grid p{ color: rgba(var(--paper-rgb), 0.65); }
.footer-grid a{ color: rgba(var(--paper-rgb), 0.75); }
.footer-grid li{ margin-bottom: 8px; }
.footer-grid a:hover{ color: var(--brass); }
.footer-bottom{
  border-top: 1px solid rgba(var(--paper-rgb), 0.15);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(var(--paper-rgb), 0.5);
}
@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   SAYFA BAŞLIK ŞERİDİ — Menü/Etkinlikler/Galeri/Hakkımızda ortak
   ========================================================= */
.page-title-bar{ padding: 44px 0 8px; }
.page-title-bar-inner{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.page-title-bar-inner .eyebrow{ color: var(--moss); }
.page-title-bar-inner h1{ font-size: clamp(3rem, 8vw, 5.5rem); margin: 0; font-family: var(--font-body); font-weight: 700; letter-spacing: -0.02em; }
.page-title-photo{
  width: 420px; height: 190px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 0 0 auto;
}
.page-title-photo img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px){
  .page-title-photo{ width: 100%; height: 130px; }
  .page-title-bar-inner{ flex-direction: column; align-items: stretch; }
}

/* ---------- Öykümüz (genişleyen kart) ---------- */
.story-card{
  background: var(--paper-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.story-card summary{ list-style: none; cursor: pointer; padding: 32px; }
.story-card summary::-webkit-details-marker{ display: none; }
.story-card-text h2{ font-size: 1.8rem; margin-bottom: 12px; }
.story-card-text p{ color: var(--ink-soft); max-width: 640px; margin-bottom: 14px; }
.read-more-link{ font-weight: 600; color: var(--wine); font-size: 0.92rem; }
.story-card .chev{ display: inline-block; transition: transform .2s ease; }
.story-card[open] .chev{ transform: rotate(90deg); }
.story-card-full{ padding: 0 32px 32px; color: var(--ink-soft); max-width: 720px; }

/* ---------- 4 bilgi kartı ---------- */
.info-cards-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.info-card{ background: var(--paper); padding: 26px 22px; }
.info-card summary{ list-style: none; cursor: pointer; }
.info-card summary::-webkit-details-marker{ display: none; }
.info-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.info-card p{ color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 10px; }
.info-card .read-more-link{ font-size: 0.82rem; }
.info-card-full{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 860px){ .info-cards-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .info-cards-grid{ grid-template-columns: 1fr; } }

/* ---------- Basında Biz ---------- */
.press-row{ display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.press-label{ font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.press-logos{ display: flex; gap: 28px; flex-wrap: wrap; }
.press-logo-item{
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-soft);
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* ---------- Güncel Kalın (bülten) ---------- */
.newsletter-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.newsletter-photo img{ width: 100%; border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit: cover; }
.newsletter-form-wrap h2{ font-size: 1.6rem; margin-bottom: 8px; }
.newsletter-form-wrap p{ color: var(--ink-soft); margin-bottom: 20px; }
.newsletter-form{ display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.newsletter-form input[type="text"], .newsletter-form input[type="email"]{
  padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; background: var(--paper);
}
.newsletter-consent{ display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); }
.newsletter-consent input{ margin-top: 3px; }
.newsletter-note{ color: var(--olive); font-weight: 600; margin-top: 12px; }
@media (max-width: 780px){ .newsletter-grid{ grid-template-columns: 1fr; } }

/* ---------- Hakkımızda: hikaye + değerler ---------- */
.story-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.story-text p{ color: var(--ink-soft); }
.story-text h2{ font-size: 1.4rem; margin-top: 1.2em; }
.story-text h2:first-child{ margin-top: 0; }
.story-panel img, .story-panel svg{ width: 100%; height: auto; border-radius: var(--radius-md); }
@media (max-width: 860px){
  .story-grid{ grid-template-columns: 1fr; }
  .story-panel{ max-width: 340px; margin: 0 auto; }
}

.values-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.values-grid .card p{ color: var(--ink-soft); margin-bottom: 0; font-size: 0.92rem; }
@media (max-width: 900px){ .values-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } }

.cta-section{ text-align: center; }
.cta-box{ max-width: 560px; }
.cta-box p{ color: var(--ink-soft); margin-bottom: 24px; }

/* ---------- Kartlar / etiketler (ortak) ---------- */
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
}
.tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tag-olive{ background: rgba(75,90,69,0.12); color: var(--olive); }
.tag-brass{ background: rgba(201,162,39,0.16); color: #8a6c17; }
.tag-wine{ background: rgba(110,31,42,0.10); color: var(--wine); }

/* =========================================================
   MENÜ SAYFASI v3 — foto kartlı genel bakış + sidebar'lı detay
   ========================================================= */
.menu-grid-v2{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.menu-cat-card{
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
  text-align: left;
  padding: 0;
  font: inherit;
}
.menu-cat-card-media{
  aspect-ratio: 4/3;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
}
.menu-cat-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.menu-cat-card-media .icon-fallback{ width: 34px; height: 34px; opacity: 0.5; }
.menu-cat-card-foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.menu-cat-card-foot h3{ font-size: 1rem; margin: 0; }
.menu-cat-card-foot .arrow{ color: var(--ink); font-size: 1.1rem; }
@media (max-width: 1080px){ .menu-grid-v2{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .menu-grid-v2{ grid-template-columns: 1fr; } }

.menu-detail-layout{ display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
.menu-sidebar{ display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 20px; }
.menu-sidebar button{
  text-align: left; background: none; border: none; font: inherit;
  padding: 10px 4px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); cursor: pointer;
}
.menu-sidebar button.is-active{ color: var(--moss); font-weight: 600; }
.menu-detail-banner{ width: 100%; aspect-ratio: 16/6; border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 28px; }
.menu-detail-banner img{ width: 100%; height: 100%; object-fit: cover; }
.menu-detail-items{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.menu-detail-item{ border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.menu-detail-item-media{ aspect-ratio: 4/3; background: var(--paper-2); }
.menu-detail-item-media img{ width: 100%; height: 100%; object-fit: cover; }
.menu-detail-item-foot{ padding: 10px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.menu-detail-item-foot span:first-child{ font-size: 0.88rem; }
.menu-detail-item-foot span:last-child{ font-family: var(--font-display); font-weight: 600; color: var(--wine); white-space: nowrap; }
@media (max-width: 860px){
  .menu-detail-layout{ grid-template-columns: 1fr; }
  .menu-sidebar{ flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; gap: 4px 16px; }
  .menu-detail-items{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .menu-detail-items{ grid-template-columns: 1fr; }
}

/* =========================================================
   MENÜ SAYFASI — imza öğe: laminasyonlu sekme ayraçları
   ========================================================= */
.menu-tabs{
  position: sticky;
  top: 100px; /* header yüksekliği */
  z-index: 40;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}
.menu-tabs::-webkit-scrollbar{ display: none; }
.menu-tabs a{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  scroll-snap-align: start;
}
.menu-tabs a img{ width: 18px; height: 18px; }
.menu-tabs a.is-active{
  background: var(--paper);
  color: var(--wine);
  border-color: var(--line);
  transform: translateY(2px);
  box-shadow: 0 -2px 0 var(--brass) inset;
}

.menu-intro{ padding: 30px 24px 6px; }
.menu-intro h1{ font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 6px; }
.menu-intro p{ color: var(--ink-soft); font-size: 0.92rem; }

.menu-section{ padding: 34px 24px; scroll-margin-top: 150px; }
.menu-section-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.menu-section-title img{ width: 24px; height: 24px; color: var(--wine); }

.menu-list{ display: flex; flex-direction: column; gap: 22px; }
.menu-item{ padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.menu-item:last-child{ border-bottom: none; padding-bottom: 0; }
.menu-item-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.menu-item-head h3{ font-size: 1.08rem; margin: 0; }
.menu-price{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--wine);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.menu-item p{ color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 8px; }

@media (max-width: 600px){
  .menu-tabs{ top: 100px; }
  .menu-section{ padding: 26px 20px; }
}

/* =========================================================
   ANA SAYFA — Figma: fotoğraflı hero + saydam üst menü
   ========================================================= */
.header-overlay{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background-color .3s ease, border-color .3s ease;
}
.header-overlay .brand{ color: #fff; }
.header-overlay .brand img{ filter: brightness(0) invert(1); }
.header-overlay .main-nav a{ color: rgba(255,255,255,0.92); }
.header-overlay .main-nav a[aria-current="page"]{ color: var(--brass); background: transparent; }
.header-overlay .main-nav a:hover{ background: rgba(255,255,255,0.14); color: #fff; }
.header-overlay .nav-toggle{ border-color: rgba(255,255,255,0.5); color: #fff; }
.header-overlay.is-scrolled{
  background: rgba(20,16,14,0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(255,255,255,0.08);
}
/* Mobil menü açıkken zemin opak kağıt rengi olduğu için metni tekrar koyulaştır */
.header-overlay .main-nav.is-open a{ color: var(--ink); }
.header-overlay .main-nav.is-open a[aria-current="page"]{ color: var(--wine); background: var(--paper-2); }
.header-overlay .main-nav.is-open{ background: var(--paper); }

.brand-figma img{ width: 80px; height: 91px; object-fit: contain; flex-shrink: 0; }
.site-header:not(.header-overlay) .brand-figma img{ width: 100px; height: 114px; }
@media (max-width: 600px){
  .brand-figma img{ width: 52px; height: 59px; }
}
.header-overlay .main-nav ul{ gap: clamp(10px, 3vw, 50px); }
.header-overlay .main-nav a{ font-size: 1.2rem; font-weight: 400; padding: 10px 4px; }

.hero-photo{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  color: #fff;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(20,16,14,0.40) 0%, rgba(20,16,14,0.82) 88%),
    url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-photo-inner{
  width: 100%;
  max-width: var(--container);
  margin: 0;
  /* Figma: başlık y=276 / 1024 çerçeve yüksekliği ≈ %27 */
  padding: clamp(180px, 27vh, 320px) 24px 80px;
}
.eyebrow-light{ color: var(--brass); }
.hero-photo-title{
  font-size: 80px;
  font-family: "Inria Serif", Georgia, serif;
  font-weight: 400;
  color: #fff;
  line-height: normal;
  margin-bottom: 24px;
}
.accent-gold{ color: #BA831C; }
.hero-photo-lede{
  max-width: 480px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 0;
}
.btn-outline-light{ border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline-light:hover{ border-color: #fff; color: var(--brass); background: transparent; }

@media (max-width: 600px){
  .hero-photo-inner{ padding: 130px 20px 56px; }
}

/* ---------- Ana sayfa: hero ---------- */
.hero{ padding-top: 56px; }
.hero-grid{
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero h1{ font-size: clamp(2.3rem, 5vw, 3.6rem); }
.hero-lede{ font-size: 1.1rem; color: var(--ink-soft); max-width: 480px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 40px; }
.hero-stats{ display: flex; gap: 30px; flex-wrap: wrap; }
.hero-stats li{ display: flex; flex-direction: column; }
.hero-stats strong{ font-family: var(--font-display); font-size: 1.5rem; color: var(--wine); }
.hero-stats span{ font-size: 0.8rem; color: var(--ink-soft); }
.hero-visual img{ width: 100%; height: auto; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; max-width: 320px; margin: 0 auto; }
}

/* ---------- Ana sayfa: özellik kartları ---------- */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-icon{ width: 30px; height: 30px; margin-bottom: 14px; }
.feature-grid .card p{ color: var(--ink-soft); margin-bottom: 0; }
@media (max-width: 780px){
  .feature-grid{ grid-template-columns: 1fr; }
}

/* ---------- Ana sayfa: bugünün önerisi ---------- */
.pick-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.pick-grid p{ color: var(--ink-soft); }
.pick-card{ background: var(--paper-2); }
.pick-card h3{ font-size: 1.3rem; margin: 10px 0 8px; }
.pick-card p{ margin-bottom: 14px; }
.pick-price{ font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--wine); }
@media (max-width: 780px){
  .pick-grid{ grid-template-columns: 1fr; }
}

/* ---------- Ana sayfa: konum teaser ---------- */
.location-teaser{ background: var(--ink); color: var(--paper); }
.location-teaser .eyebrow{ color: var(--brass); }
.location-teaser p{ color: rgba(var(--paper-rgb), 0.7); }
.hours-list{ margin: 20px 0 28px; max-width: 320px; }
.hours-list li{
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.15);
  font-size: 0.95rem;
}

/* ---------- Etkinlikler: filtreler ---------- */
.filter-row{ display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filter-group label{ display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; }
.filter-group select{ padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; background: var(--paper); }
.filter-type{ flex: 1 1 auto; }
.filter-tabs{ display: flex; gap: 18px; flex-wrap: wrap; }
.filter-tab{ background: none; border: none; padding: 6px 0; font: inherit; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; }
.filter-tab.is-active{ color: var(--moss); border-bottom-color: var(--moss); font-weight: 600; }

/* ---------- Etkinlikler: v2 kartlar (fotoğraf karuseli) ---------- */
.event-list-v2{ display: flex; flex-direction: column; gap: 20px; margin: 24px 0 28px; }
.event-card-v2{ display: flex; gap: 24px; padding: 24px; background: var(--paper-2); border-radius: var(--radius-md); flex-wrap: wrap; }
.event-card-v2 .event-date{ flex: 0 0 64px; text-align: center; font-family: var(--font-display); color: var(--wine); }
.event-card-v2 .event-date strong{ display: block; font-size: 1.7rem; line-height: 1; }
.event-card-v2 .event-date span.month{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.event-card-v2-body{ flex: 1 1 260px; min-width: 200px; }
.event-card-v2-time{ font-size: 0.8rem; color: var(--ink-soft); }
.event-card-v2-body h3{ font-size: 1.15rem; margin: 6px 0; }
.event-card-v2-body p{ color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 10px; }
.event-detail-toggle{ background: none; border: none; color: var(--wine); font-weight: 600; font-size: 0.88rem; cursor: pointer; padding: 0; }
.event-card-v2-photos{ flex: 0 0 220px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-sm); }
.event-card-v2-photos img{ width: 200px; height: 130px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; scroll-snap-align: start; }
.event-card-v2-photos-empty{ width: 200px; height: 130px; border-radius: var(--radius-sm); background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.8rem; flex: 0 0 auto; }
.event-full-text{ flex-basis: 100%; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink-soft); font-size: 0.92rem; }
@media (max-width: 640px){
  .event-card-v2{ flex-direction: column; }
  .event-card-v2-photos{ flex: 0 0 auto; width: 100%; }
}

/* ---------- Etkinlikler ---------- */
.event-list{ display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.event-card{
  display: flex;
  gap: 22px;
  padding: 24px;
  background: var(--paper-2);
  border-radius: var(--radius-md);
}
.event-date{
  flex: 0 0 64px;
  text-align: center;
  font-family: var(--font-display);
  color: var(--wine);
}
.event-date strong{ display: block; font-size: 1.7rem; line-height: 1; }
.event-date span{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.event-body h3{ font-size: 1.15rem; margin: 8px 0 6px; }
.event-body p{ color: var(--ink-soft); margin-bottom: 0; font-size: 0.94rem; }
.event-note{ color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 560px){
  .event-card{ flex-direction: column; gap: 10px; }
  .event-date{ text-align: left; display: flex; align-items: baseline; gap: 8px; }
}

/* ---------- Galeri: kategori kartları + detay görünümü ---------- */
.gallery-cat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery-cat-card{
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
  text-align: left;
  padding: 0;
  font: inherit;
}
.gallery-cat-card-media{
  aspect-ratio: 4/3;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  position: relative;
}
.gallery-cat-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.gallery-cat-card-num{
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.gallery-cat-card-foot{ padding: 16px 18px; }
.gallery-cat-card-foot h3{ font-size: 1.1rem; margin-bottom: 4px; }
.gallery-cat-card-foot span{ font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 860px){ .gallery-cat-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ .gallery-cat-grid{ grid-template-columns: 1fr; } }

.gallery-back-btn{
  background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--wine);
  margin-bottom: 18px; padding: 0;
}
.gallery-detail-title{ font-size: 1.6rem; margin-bottom: 20px; }

/* ---------- Galeri ---------- */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 14px;
}
.gallery-item{
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--paper-2);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  overflow: hidden;
}
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; }
.gallery-item-tall{ grid-row: span 2; }
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .gallery-item-tall{ grid-row: span 1; }
}

/* ---------- İletişim sayfası ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: stretch;
}
.info-block{ margin-bottom: 26px; }
.info-block h3{
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.info-block a{ color: var(--wine); font-weight: 600; }
.hours-list-light li{ border-bottom-color: var(--line); color: var(--ink); }
.social-links{ display: flex; gap: 16px; }
.social-links a{ font-weight: 600; color: var(--wine); }

.contact-map{
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.contact-map iframe{ width: 100%; height: 100%; min-height: 320px; display: block; }

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

.form-wrap{ max-width: 620px; }
.form-row-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px){ .form-row-split{ grid-template-columns: 1fr; } }

.transit-title{ font-size: 1.1rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-family: var(--font-body); }
.transit-row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.transit-card{
  background: var(--paper-2);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
}
.transit-card img{ width: 30px; height: 30px; margin: 0 auto 10px; }
.transit-card-label{ font-size: 0.85rem; font-weight: 600; }
.transit-card-duration{ font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 780px){
  .transit-row{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px){
  .transit-row{ grid-template-columns: repeat(2, 1fr); }
}

.contact-form .form-row{ margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.contact-form label{ font-weight: 600; font-size: 0.9rem; }
.contact-form input, .contact-form textarea{
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus{
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(110,31,42,0.12);
}

/* =========================================================
   MENÜ SAYFASI v2 — Figma: 12 kategorili kart ızgarası
   ========================================================= */
.menu-title-hero{ padding: clamp(60px, 14vh, 160px) 0 8px; }
.menu-title-hero .eyebrow{ color: var(--moss); }
.menu-title-hero h1{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: var(--ink);
  line-height: 1.2;
}
.menu-title-hero p{ color: var(--ink-soft); max-width: 480px; margin-top: 14px; }

.menu-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 36px 0 64px;
}
.menu-card{
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.menu-card[open]{ box-shadow: var(--shadow-md); }
.menu-card summary{
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-card summary::-webkit-details-marker{ display: none; }
.menu-card-media{
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-card-media img{ width: 34px; height: 34px; filter: brightness(0) invert(1); opacity: 0.92; }
.menu-card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.menu-card-name{
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.menu-card-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.menu-card-chevron svg{ width: 10px; height: 10px; }
.menu-card[open] .menu-card-chevron{ transform: rotate(180deg); }

.menu-card-items{ padding: 6px 16px 18px; }
.menu-card-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
}
.menu-card-item:last-child{ border-bottom: none; }
.menu-card-item-thumb{
  width: 40px; height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}
.menu-card-item-text{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.menu-card-item-name{ line-height: 1.3; }
.menu-card-item-desc{
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.menu-card-item-price{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--wine);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

@media (max-width: 1080px){
  .menu-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .menu-grid{ grid-template-columns: 1fr; gap: 16px; padding: 24px 0 48px; }
  .menu-card-media{ height: 96px; }
}

/* Sayfa üstü küçük başlık şeridi (menü/hakkımızda/iletişim) */
.page-hero{
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1{ font-size: clamp(2rem, 4vw, 2.8rem); }
.page-hero p{ color: var(--ink-soft); max-width: 560px; font-size: 1.05rem; }

/* =========================================================
   YENİ TASARIM — kafeşablon.pdf (Kaffa Miro)
   Script+bold başlık ikilisi, hap şeklinde fotoğraflar,
   ok butonlu carousel'ler, tarih rozetleri, tarif/etkinlik
   detay görünümleri.
   ========================================================= */

/* ---- Başlık ikilisi ---- */
.heading-script{
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  color: var(--ink);
  line-height: 1.2;
}
.heading-bold{
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.section-head-center{
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: center;
}
.section-head-center p{ color: var(--ink-soft); margin-top: 10px; }

/* ---- Hap şeklinde foto çerçeveleri ---- */
.pill-media{
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--paper-2);
}
.pill-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px){
  :root{ --radius-pill: 32px; }
}

/* ---- Foto üstü adres/konum rozeti ---- */
.photo-pin-wrap{ position: relative; }
.pin-badge{
  position: absolute;
  left: 24px; bottom: 24px;
  background: var(--paper);
  border-radius: 999px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  max-width: calc(100% - 48px);
}
.pin-badge svg{ width: 16px; height: 16px; color: var(--wine); flex: 0 0 auto; }
@media (max-width: 600px){
  .pin-badge{ left: 14px; bottom: 14px; padding: 10px 16px; font-size: 0.78rem; }
}

/* ---- Büyük yuvarlak metin kartı (giriş paragrafları) ---- */
.blurb-card{
  background: var(--paper-2);
  border-radius: 40px;
  padding: 44px 56px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.blurb-card p{ color: var(--ink-soft); margin-bottom: 1.1em; }
.blurb-card p:last-child{ margin-bottom: 0; }
@media (max-width: 640px){
  .blurb-card{ padding: 30px 26px; border-radius: 28px; }
}

/* ---- Tanıtım kartı: foto + metin yan yana (ana sayfa Hikayemiz/Menü) ---- */
.teaser-card{
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 36px;
  align-items: center;
  background: var(--paper-2);
  border-radius: 44px;
  padding: 22px;
}
.teaser-card .pill-media{ aspect-ratio: 4/3; }
.teaser-card-body .heading-script{ margin-bottom: 10px; }
.teaser-card-body p{ color: var(--ink-soft); margin-bottom: 14px; }
.teaser-card-body .read-more-link{ font-weight: 600; color: var(--wine); }
@media (max-width: 720px){
  .teaser-card{ grid-template-columns: 1fr; padding: 16px; border-radius: 32px; }
}

/* ---- Ok butonlu yatay carousel (etkinlikler, galeri şeridi, menü kategorileri) ----
   Butonlar flex ile şeridin gerçek yanına yerleşir (mutlak konumlandırma
   az sayıda ürün olan kategorilerde fotoğrafın üstüne binmesine sebep
   oluyordu — bkz. tek ürünlü "İçecekler" kategorisi). */
.carousel-row{
  display: flex;
  align-items: center;
  gap: 10px;
}
.carousel-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px 2px 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.carousel-track::-webkit-scrollbar{ display: none; }
.carousel-track > *{ flex: 0 0 auto; scroll-snap-align: start; }
.carousel-btn{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease;
}
.carousel-btn:hover{ background: var(--paper-2); }
.carousel-btn svg{ width: 16px; height: 16px; }
@media (max-width: 720px){
  .carousel-btn{ display: none; }
}

.carousel-photo-item{
  display: block;
  width: 220px;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper-2);
}
.carousel-photo-item img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- İstatistik + CTA şeridi (ana sayfa alt bölüm) ---- */
.stats-cta{ text-align: center; }
.stats-row{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0 28px;
}
.stat-box{
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 30px;
  text-align: center;
  min-width: 130px;
}
.stat-box strong{
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--ink);
}
.stat-box span{ font-size: 0.8rem; color: var(--ink-soft); }

/* ---- Konum kartı (ana sayfa: tam genişlik foto + pin) ---- */
.location-card .pill-media{ aspect-ratio: 21/9; }
@media (max-width: 720px){
  .location-card .pill-media{ aspect-ratio: 4/3; }
}

/* ---- Etkinlik tarih rozeti (liste + detay ortak) ---- */
.date-badge{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.date-badge-month{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.date-badge-nums{ display: flex; flex-direction: column; line-height: 1; }
.date-badge-day{ font-family: var(--font-body); font-weight: 800; font-size: 2.3rem; color: var(--ink); }
.date-badge-year{ font-size: 1.05rem; color: var(--ink-soft); margin-top: 4px; }

/* ---- Etkinlikler: yeni liste satırı görünümü ---- */
.event-list-rows{ display: flex; flex-direction: column; }
.event-row{
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: none;
  border-left: none; border-right: none; border-top: none;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.event-list-rows .event-row:first-child{ padding-top: 0; }
.event-row:hover .event-row-media{ opacity: 0.92; }
.event-row-media{
  width: 200px; height: 140px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--paper-2);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.event-row-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.event-row-body{ flex: 1 1 auto; min-width: 0; }
.event-row-body h3{ font-size: 1.2rem; margin: 4px 0 2px; }
.event-row-person{ color: var(--ink-soft); font-size: 0.92rem; }
.event-row-range{ color: var(--ink-soft); font-size: 0.85rem; margin-top: 10px; }
.event-row-arrow{ flex: 0 0 auto; color: var(--ink-soft); font-size: 1.3rem; align-self: center; }
@media (max-width: 640px){
  .event-row{ flex-wrap: wrap; gap: 16px; }
  .event-row-media{ width: 100%; height: 180px; }
}

/* ---- Etkinlik detay görünümü ---- */
.event-detail-photo{
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 40px;
  background: var(--paper-2);
}
.event-detail-photo img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.event-detail-layout{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  max-width: 780px;
  margin: 0 auto;
}
.event-detail-date{
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
  padding-right: 40px;
}
.event-detail-date .date-badge-day{ font-size: 3.4rem; }
.event-detail-date .date-badge-year{ font-size: 1.6rem; }
.event-detail-info h2{ font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 4px; }
.event-detail-info .event-row-person{ font-size: 1.05rem; }
.event-detail-info .event-row-range{ margin-top: 18px; font-size: 0.95rem; }
@media (max-width: 640px){
  .event-detail-layout{ grid-template-columns: 1fr; }
  .event-detail-date{ border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 20px; }
}

/* ---- Menü: kategori carousel şeritleri (genel bakış) ---- */
.menu-cat-section{ padding: 34px 0; border-bottom: 1px solid var(--line); }
.menu-cat-section:last-child{ border-bottom: none; }
.menu-cat-section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.menu-cat-section-head h3{ font-size: 1.5rem; margin: 0; }
.menu-cat-carousel-item{ width: 190px; text-align: center; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.menu-cat-carousel-item .carousel-photo-item{ width: 100%; margin-bottom: 10px; border-radius: 20px; }
.menu-cat-carousel-item span{ font-size: 0.92rem; font-weight: 600; }
.menu-cat-see-all{ font-weight: 600; color: var(--wine); font-size: 0.9rem; margin-top: 14px; display: inline-block; }

/* ---- Menü: kategori detay ızgarası (3 sütun, foto+isim) ---- */
.menu-detail-items-v2{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.menu-detail-item-v2{ cursor: pointer; background: none; border: none; padding: 0; text-align: center; font: inherit; }
.menu-detail-item-v2-media{ aspect-ratio: 4/3; border-radius: 24px; overflow: hidden; background: var(--paper-2); margin-bottom: 10px; }
.menu-detail-item-v2-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-detail-item-v2 .name{ font-weight: 600; font-size: 0.95rem; }
.menu-detail-item-v2 .price{ display: block; font-family: var(--font-display); color: var(--wine); font-weight: 600; font-size: 0.88rem; margin-top: 2px; }
@media (max-width: 860px){ .menu-detail-items-v2{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .menu-detail-items-v2{ grid-template-columns: 1fr 1fr; gap: 14px; } }

/* ---- Menü: ürün/tarif detay görünümü ---- */
.recipe-layout{ max-width: 640px; margin: 0 auto; text-align: center; }
.recipe-photo{ border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 28px; background: var(--paper-2); }
.recipe-photo img{ width: 100%; display: block; object-fit: cover; aspect-ratio: 4/3; }
.recipe-name{ font-family: var(--font-script); font-size: clamp(1.8rem, 4vw, 2.3rem); font-weight: 400; margin-bottom: 4px; }
.recipe-price{ font-family: var(--font-display); font-weight: 600; color: var(--wine); font-size: 1.25rem; margin-bottom: 18px; }
.recipe-meta{ font-weight: 700; margin-bottom: 22px; color: var(--ink); }
.recipe-block{ margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px dashed var(--line); }
.recipe-block:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.recipe-block h4{ font-family: var(--font-body); font-weight: 700; margin-bottom: 12px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.recipe-block ul{ display: inline-block; text-align: left; color: var(--ink-soft); }
.recipe-block ul li{ padding: 3px 0; }
.recipe-block p{ color: var(--ink-soft); max-width: 560px; margin: 0 auto; }

/* ---- İletişim: yakınınızı keşfedin ---- */
.nearby-grid{ display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 14px; }
.nearby-map{ border-radius: 22px; overflow: hidden; min-height: 220px; }
.nearby-map iframe{ width: 100%; height: 100%; min-height: 220px; display: block; border: 0; }
.nearby-photo{ position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3/4; }
.nearby-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.nearby-photo figcaption{
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  color: #fff; font-weight: 600; font-size: 0.9rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.nearby-photo::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
@media (max-width: 860px){
  .nearby-grid{ grid-template-columns: repeat(2, 1fr); }
  .nearby-map{ grid-column: 1 / -1; aspect-ratio: 16/9; }
}
@media (max-width: 480px){
  .nearby-grid{ grid-template-columns: 1fr; }
}

/* ---- İletişim: intro kart üstteki compact info kartları ---- */
.contact-compact-grid{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .contact-compact-grid{ grid-template-columns: 1fr; } }

/* ---- İç sayfalar: kompakt foto banner (Hikayemiz/Menü/Etkinlikler/İletişim/Galeri) ---- */
.banner-photo{
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner-photo::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,14,0.30) 0%, rgba(20,16,14,0.72) 100%);
}
.banner-photo-title{ position: relative; z-index: 1; }
.banner-photo .heading-script{ color: #fff; }
.banner-photo .heading-bold{ color: #fff; }
@media (max-width: 600px){
  .banner-photo{ min-height: 220px; }
}