/* Nairi Ocakbaşı
   Konsept: Kor ışığında basılı bir ocakbaşı menüsü. Logodaki ay yayından gelen kemer çerçeveler,
   altın varak tonları, fiyatlar noktalı çizgiyle. Tek ve bilinçli koyu tema. */
:root {
  --kor: #14100d;        /* zemin: sönmüş kömür */
  --kor-2: #1c1511;      /* yüzey */
  --kul: #2e241c;        /* çizgi / ayraç */
  --kemik: #efe4d2;      /* metin */
  --duman: #b2a28d;      /* ikincil metin */
  --altin: #d6ac72;      /* logo altını */
  --altin-acik: #f2d49e;
  --alev: #e2692f;       /* sadece canlı durumlar: acılı, açık */
  --yesil: #8fc27a;      /* açık durumu */

  --f-baslik: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-govde: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem;
  --ust-h: 64px;
  --kemer: 999px 999px 14px 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-h) + 64px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--kor);
  color: var(--kemik);
  font: 400 1.0625rem/1.6 var(--f-govde);
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--kor); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-baslik); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.1; color: var(--altin-acik); }
h3 { font-size: 1.15rem; color: var(--altin); letter-spacing: .06em; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--altin-acik); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 1180px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.ust-etiket { margin: 0 0 var(--s2); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--duman); }
.bolum-bas { display: grid; gap: 0; margin-bottom: var(--s6); }

/* Duyuru bandı */
.duyuru { background: var(--alev); color: #1a0d06; font-weight: 500; }
.duyuru .wrap { display: flex; gap: var(--s3); align-items: center; justify-content: center; padding-block: var(--s2); text-align: center; }

/* Üst bar */
.ust {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--kor) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kul);
}
.ust__ic { min-height: var(--ust-h); display: flex; align-items: center; gap: var(--s5); }
.marka { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.marka img { width: 44px; height: auto; }
.marka__ad { font-family: var(--f-baslik); font-size: 1.35rem; letter-spacing: .28em; color: var(--altin-acik); }
.ust__nav { display: flex; gap: var(--s5); margin-left: auto; }
.ust__nav a { text-decoration: none; color: var(--duman); font-size: .95rem; letter-spacing: .04em; padding-block: var(--s2); }
.ust__nav a:hover { color: var(--altin-acik); }
.dil { display: flex; border: 1px solid var(--kul); border-radius: 999px; padding: 3px; }
.dil button {
  font: 500 .8rem/1 var(--f-govde); letter-spacing: .1em; color: var(--duman);
  background: none; border: 0; border-radius: 999px; padding: .5rem .7rem; cursor: pointer;
}
.dil button[aria-pressed="true"] { background: var(--altin); color: var(--kor); }
@media (max-width: 760px) {
  .ust__nav { display: none; }
  .dil { margin-left: auto; }
}

/* Giriş */
.giris { position: relative; overflow: hidden; border-bottom: 1px solid var(--kul);
  background:
    radial-gradient(60% 70% at 78% 105%, rgba(226,105,47,.22), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, rgba(214,172,114,.07), transparent 70%),
    var(--kor); }
.kivilcim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.giris__ic { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: center; padding-block: var(--s8) var(--s8); }
.giris__metin { display: grid; gap: var(--s5); justify-items: start; min-width: 0; }
.giris__logo { width: min(400px, 88%); height: auto; filter: drop-shadow(0 0 28px rgba(226,105,47,.18)); }
.giris__slogan { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2; color: var(--kemik); max-width: 18ch; }
.durum { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); font-size: .95rem; color: var(--duman);
  border: 1px solid var(--kul); border-radius: 999px; padding: .35rem .85rem; background: var(--kor-2); }
.durum__nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--duman); }
.durum.acik .durum__nokta { background: var(--yesil); box-shadow: 0 0 0 4px rgba(143,194,122,.18); }
.durum.acik { color: var(--kemik); }
.eylemler { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: .6rem 1.25rem; border-radius: 999px; text-decoration: none; font-weight: 500; letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--altin) 55%, transparent); color: var(--altin-acik); background: transparent;
  transition: background .2s, color .2s;
}
.btn:hover { background: color-mix(in srgb, var(--altin) 14%, transparent); }
.btn--altin { background: var(--altin); color: var(--kor); border-color: var(--altin); }
.btn--altin:hover { background: var(--altin-acik); }

/* Kemer çerçeve (logodaki ay yayı) */
.kemer { position: relative; margin: 0; border-radius: var(--kemer); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%;
  background: radial-gradient(70% 60% at 50% 85%, rgba(226,105,47,.45), transparent 70%), linear-gradient(180deg, #241a13, #120d0a); }
.kemer::after { content: ""; position: absolute; inset: 10px; border-radius: var(--kemer); border: 1px solid rgba(242,212,158,.45); pointer-events: none; }
.kemer img { width: 100%; height: 100%; object-fit: cover; }
.kemer.bos::before, .galeri__oge.bos::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 34%; aspect-ratio: 383/271;
  background: url("../assets/amblem.png") center / contain no-repeat; opacity: .55;
}
.kemer--giris { justify-self: end; width: min(100%, 470px); }

@media (max-width: 860px) {
  .giris__ic { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6) var(--s7); }
  .giris__metin { justify-items: center; text-align: center; }
  .giris__slogan { max-width: 22ch; }
  .eylemler { justify-content: center; }
  .kemer--giris { justify-self: center; width: min(100%, 360px); aspect-ratio: 5 / 5.4; }
}

/* Menü */
.menu { padding-block: var(--s8) var(--s7); }
.menu__arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.ara { flex: 1 1 320px; max-width: 460px; display: flex; align-items: center; gap: var(--s2);
  background: var(--kor-2); border: 1px solid var(--kul); border-radius: 999px; padding: 0 var(--s4); }
.ara:focus-within { border-color: var(--altin); }
.ara svg { width: 20px; height: 20px; fill: none; stroke: var(--duman); stroke-width: 1.8; flex: none; }
.ara input { flex: 1; min-width: 0; background: none; border: 0; color: var(--kemik); font: inherit; padding: .75rem 0; outline: none; }
.ara input::placeholder { color: color-mix(in srgb, var(--duman) 75%, transparent); }
.lejant { margin: 0; color: var(--duman); font-size: .95rem; }
.oneri-isaret { color: var(--altin); }

.sekmeler { position: sticky; top: calc(var(--ust-h) + env(safe-area-inset-top, 0px)); z-index: 10;
  background: color-mix(in srgb, var(--kor) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-block: 1px solid var(--kul); }
.sekmeler__ray { display: flex; gap: var(--s2); overflow-x: auto; padding-block: var(--s3); scrollbar-width: none; scroll-snap-type: x proximity; }
.sekmeler__ray::-webkit-scrollbar { display: none; }
.sekme {
  flex: none; scroll-snap-align: start; font: 500 .95rem/1 var(--f-govde); color: var(--duman);
  background: transparent; border: 1px solid var(--kul); border-radius: 999px; padding: .6rem 1rem; cursor: pointer; white-space: nowrap;
}
.sekme:hover { color: var(--kemik); border-color: color-mix(in srgb, var(--altin) 45%, var(--kul)); }
.sekme[aria-selected="true"] { background: var(--altin); border-color: var(--altin); color: var(--kor); }
.sekme__sayi { opacity: .65; margin-left: .35rem; font-variant-numeric: tabular-nums; }
.sekmeler.pasif .sekme[aria-selected="true"] { background: transparent; color: var(--duman); border-color: var(--kul); }

.menu__panel { padding-top: var(--s6); min-height: 40vh; }
.kategori + .kategori { margin-top: var(--s7); }
.kategori__bas { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); }
.kategori__bas h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); text-transform: none; letter-spacing: .02em; color: var(--altin-acik); }
.kategori__bas span { color: var(--duman); font-size: .9rem; font-variant-numeric: tabular-nums; }
.kategori__bas::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--kul), transparent); align-self: center; }

.urunler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
@media (max-width: 820px) { .urunler { grid-template-columns: 1fr; } }
.urun { padding-block: var(--s3); border-bottom: 1px dashed color-mix(in srgb, var(--kul) 80%, transparent); min-width: 0; }
.urun__satir { display: flex; align-items: baseline; gap: var(--s2); }
.urun__ad { font-size: 1.1rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.urun__ad .oneri-isaret { margin-right: .35rem; }
.urun__nokta { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--duman) 55%, transparent); transform: translateY(-.3em); }
.urun__fiyat { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--altin-acik); white-space: nowrap; }
.urun__alt { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; margin-top: 2px; }
.urun__aciklama { margin: 0; color: var(--duman); font-size: .95rem; line-height: 1.45; }
.etiket { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--duman); border: 1px solid var(--kul); border-radius: 4px; padding: 1px 6px; }
.etiket--acili { color: var(--alev); border-color: color-mix(in srgb, var(--alev) 45%, transparent); }
.etiket--oneri { color: var(--altin); border-color: color-mix(in srgb, var(--altin) 40%, transparent); }
mark { background: color-mix(in srgb, var(--altin) 35%, transparent); color: inherit; border-radius: 2px; }
.bos-sonuc { color: var(--duman); padding-block: var(--s6); }
.menu__not { margin: var(--s6) 0 0; color: var(--duman); font-size: .9rem; }

/* Hakkımızda */
.hakkimizda { padding-block: var(--s8); background: linear-gradient(180deg, var(--kor), var(--kor-2)); border-block: 1px solid var(--kul); }
.hakkimizda__ic { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s8); align-items: center; }
.kemer--hak { width: min(100%, 400px); }
.hakkimizda__metin { min-width: 0; }
.hakkimizda__metin h2 { margin-bottom: var(--s5); }
.hakkimizda__p { margin: 0; font-size: 1.2rem; line-height: 1.7; max-width: 58ch; color: var(--kemik); white-space: pre-line; }
.hakkimizda__p::first-letter { font-family: var(--f-baslik); color: var(--altin); font-size: 3.4em; float: left; line-height: .9; padding: .06em .12em 0 0; }
@media (max-width: 820px) {
  .hakkimizda__ic { grid-template-columns: 1fr; gap: var(--s6); }
  .kemer--hak { justify-self: center; width: min(100%, 320px); }
}

/* Galeri */
.galeri { padding-block: var(--s8); }
.galeri__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 220px; gap: var(--s3); }
.galeri__oge { position: relative; margin: 0; border-radius: 10px; overflow: hidden; min-width: 0;
  background: radial-gradient(70% 60% at 50% 90%, rgba(226,105,47,.35), transparent 70%), linear-gradient(180deg, #241a13, #120d0a); }
.galeri__oge:first-child { grid-row: span 2; }
.galeri__oge img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galeri__oge:hover img { transform: scale(1.04); }
.galeri__oge figcaption { position: absolute; inset: auto 0 0; padding: var(--s6) var(--s4) var(--s3); font-size: .95rem;
  background: linear-gradient(0deg, rgba(10,7,5,.85), transparent); color: var(--kemik); }
@media (max-width: 820px) { .galeri__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; } }
@media (prefers-reduced-motion: reduce) { .galeri__oge img { transition: none; } }

/* İletişim */
.iletisim { padding-block: var(--s8); background: var(--kor-2); border-top: 1px solid var(--kul); }
.iletisim__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 900px) { .iletisim__izgara { grid-template-columns: 1fr; } }
.kart { display: grid; align-content: start; gap: var(--s3); padding: var(--s5); border: 1px solid var(--kul); border-radius: 14px; background: var(--kor); min-width: 0; }
.adres, .telefon { margin: 0; font-size: 1.15rem; user-select: text; }
.telefon { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.baglanti { color: var(--altin-acik); text-underline-offset: 4px; justify-self: start; }
.kanallar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.kanallar a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid var(--kul); text-decoration: none; color: var(--kemik); font-size: .95rem; }
.kanallar a:hover { border-color: var(--altin); color: var(--altin-acik); }
.kanallar svg { width: 16px; height: 16px; fill: currentColor; }
.saatler { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.saatler td { padding: .35rem 0; border-bottom: 1px solid var(--kul); }
.saatler td:last-child { text-align: right; color: var(--duman); }
.saatler tr.bugun td { color: var(--altin-acik); font-weight: 700; }
.saatler tr.kapali td:last-child { color: var(--alev); }
.harita { margin-top: var(--s5); border-radius: 14px; overflow: hidden; border: 1px solid var(--kul); height: 340px; position: relative;
  background: repeating-linear-gradient(45deg, var(--kor) 0 14px, var(--kor-2) 14px 28px); }
.harita__not { position: absolute; inset: 0; margin: auto; height: max-content; text-align: center; color: var(--duman); padding-inline: var(--s4); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }

/* Alt bilgi */
.alt { border-top: 1px solid var(--kul); }
.alt__ic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding-block: var(--s6) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
.alt__ic img { width: 56px; height: auto; }
.alt__ad { margin: 0; font-family: var(--f-baslik); color: var(--altin-acik); font-size: 1.15rem; }
.alt__satir, .alt__telif { margin: 0; color: var(--duman); font-size: .9rem; }
.alt__telif { margin-left: auto; }