/* ============================================================
   MENÜ v3 — perde mimarisi
   Kapak: süzülen fotoğraf mozaiği. 8 perde: tam genişlik bant
   + kart/satır içerik. Her şey akışta; sabit katman yok.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

:root {
  --zemin: #0E120D;
  --panel: #161B14;
  --cizgi: rgba(255,255,255,.14);
  --soluk: rgba(255,255,255,.68);
  --amber: #F2B90D;
}
body {
  background: var(--zemin);
  color: #fff;
  font-family: 'Satoshi', system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; }
h1,h2,h3,h4 { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; letter-spacing: -.02em; }
.gizli-erisilebilir { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#smooth-wrapper { overflow: hidden; }

/* ---------- üst bar: çipli gezinme ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem clamp(1rem, 2.5vw, 2rem);
  background: linear-gradient(rgba(14,18,13,.92), rgba(14,18,13,.75) 70%, transparent);
}
.bar .geri, .bar .tel {
  flex: none;
  font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.bar .tel { color: var(--amber); }
.ciplar {
  flex: 1;
  display: flex; gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}
.ciplar::-webkit-scrollbar { display: none; }
.ciplar a {
  flex: none;
  font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: .82rem;
  padding: .5em 1em;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  text-decoration: none;
  color: var(--soluk);
  transition: all .25s ease;
  white-space: nowrap;
}
.ciplar a:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.ciplar a.aktif { background: var(--amber); border-color: var(--amber); color: #211a02; }

/* ---------- kapak: süzülen mozaik ---------- */
.kapak { position: relative; height: 108svh; overflow: clip; }
.mozaik {
  position: absolute; inset: -12% -2%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.5vw, 1.2rem);
}
.moz-kolon { display: flex; flex-direction: column; gap: clamp(.6rem, 1.5vw, 1.2rem); }
.moz-kolon:nth-child(2) { margin-top: -6%; }
.moz-kolon img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 14px;
  filter: saturate(1.04) contrast(1.02);
}
.kapak-ort {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 60% at 50% 62%, rgba(14,18,13,.88), rgba(14,18,13,.45) 60%, rgba(14,18,13,.35)),
    linear-gradient(rgba(14,18,13,.5), transparent 30%, transparent 60%, var(--zemin) 96%);
}
.kapak-yazi {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 5vw;
}
.mini {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 1.1rem;
}
.kapak h1 {
  font-size: clamp(5rem, 17vw, 16rem);
  line-height: .82;
  text-shadow: 0 10px 60px rgba(0,0,0,.5);
}
.ozet { margin-top: 1.3rem; color: rgba(255,255,255,.9); max-width: 48ch; }
.kaydir {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.kaydir::after { content:''; display:block; width:1px; height:42px; margin:.6rem auto 0;
  background:linear-gradient(#fff,transparent); animation: in 1.8s ease-in-out infinite; }
@keyframes in { 50% { transform: scaleY(.5); opacity:.4; } }

/* ---------- perde bandı ---------- */
.perde { scroll-margin-top: 60px; }
.band {
  position: relative;
  height: clamp(340px, 58svh, 560px);
  overflow: clip;
  display: flex; align-items: flex-end;
}
.band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,18,13,.55), rgba(14,18,13,.12) 40%, rgba(14,18,13,.88) 96%);
}
.band .no {
  position: absolute; right: 2vw; top: 8%;
  z-index: 2;
  font-family: 'Cabinet Grotesk'; font-weight: 900;
  font-size: clamp(7rem, 20vw, 17rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.32);
  pointer-events: none;
}
.band-yazi {
  position: relative; z-index: 2;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.band-yazi h2 {
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .9;
  text-shadow: 0 6px 40px rgba(0,0,0,.5);
}
.band-yazi p { margin-top: .6rem; color: rgba(255,255,255,.88); font-size: clamp(.95rem, 1.4vw, 1.15rem); }

/* ---------- perde içeriği ---------- */
.icerik {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2.4rem, 6vh, 4.5rem) clamp(1.2rem, 4vw, 3rem) clamp(3rem, 8vh, 5.5rem);
  display: flex; flex-direction: column; gap: clamp(2.4rem, 6vh, 4rem);
}
.grup h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1.3rem;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
}
.grup .adet {
  font-family: 'Satoshi'; font-weight: 700; font-size: .78rem;
  color: #211a02; background: var(--amber);
  padding: .15em .7em; border-radius: 999px;
}
.grup .boy { font-family: 'Satoshi'; font-weight: 700; font-size: .78rem; color: var(--soluk); letter-spacing: .06em; }

/* kartlar: tarifli ürünler */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 1rem;
}
.kart {
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 1.15rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.kart:hover { transform: translateY(-5px); border-color: rgba(242,185,13,.55); background: #1A2017; }
.kart-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.kart h4 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.15; }
.kart .fiyat {
  font-family: 'Cabinet Grotesk'; font-weight: 900;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--amber); white-space: nowrap;
}
.kart p { font-size: .88rem; line-height: 1.5; color: var(--soluk); flex: 1; }
.kart-alt { display: flex; gap: .9rem; align-items: center; }
.kcal { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.5); white-space: nowrap; }
.kucuk-boy { font-size: .74rem; font-weight: 700; color: var(--soluk); }

/* satırlar: kısa ürünler */
.satirlar { list-style: none; padding: 0; }
.satirlar li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.satirlar b { font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 1.02rem; }
.satirlar b .kcal { margin-left: .6em; }
.satirlar .n { flex: 1; border-bottom: 2px dotted rgba(255,255,255,.3); transform: translateY(-.3em); min-width: 1.5rem; }
.satirlar i { font-style: normal; font-family: 'Cabinet Grotesk'; font-weight: 900; color: var(--amber); white-space: nowrap; }
.satirlar.iki-kolon { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.satirlar.iki-kolon li { break-inside: avoid; }
.dip { margin-top: 1rem; font-weight: 700; font-size: .85rem; color: var(--amber); }

/* ---------- son ---------- */
.son { padding: clamp(2.5rem, 7vh, 4rem) clamp(1.2rem, 4vw, 3rem); background: #0A0D09; }
.son p { font-size: .85rem; color: var(--soluk); max-width: 72ch; margin-bottom: .8rem; }
.iletisim { font-weight: 700; }
.iletisim a { color: var(--amber); text-underline-offset: 4px; }

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .bar { gap: .6rem; }
  .bar .geri { display: none; }
  .ciplar { justify-content: flex-start; }
  .satirlar.iki-kolon { columns: 1; }
  .band .no { font-size: 6rem; top: 4%; }
  .mozaik { inset: -8% -6%; grid-template-columns: repeat(2, 1fr); }
  .moz-kolon:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kaydir::after { animation: none; } }