/* ==========================================================
   LEVANTIN36 — menu.css
   Menü sayfası: kategori çubuğu, arama, yemek kartları
   ========================================================== */

.menu-toolbar {
  position: sticky; top: var(--nav-h); z-index: 900;
  background: rgba(8, 26, 20, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gold-line);
  padding-block: 16px 14px;
  transition: top 0.5s var(--ease);
}
.site-header.is-scrolled ~ main .menu-toolbar { top: 70px; }
.menu-toolbar__row { display: flex; gap: 18px; align-items: center; }

.menu-search {
  position: relative; flex: 0 0 min(340px, 100%);
  display: flex; align-items: center;
}
.menu-search svg { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--gold); pointer-events: none; }
.menu-search input {
  width: 100%; min-height: 48px;
  padding: 0 44px 0 48px;
  background: rgba(5, 16, 12, 0.6);
  border: 1px solid var(--gold-line); border-radius: 100px;
  color: var(--ivory); font: inherit; font-weight: 300; font-size: 0.95rem;
  transition: border-color 0.3s, background 0.3s;
}
.menu-search input::placeholder { color: rgba(246, 242, 232, 0.45); }
.menu-search input:focus { outline: none; border-color: var(--gold); background: rgba(5, 16, 12, 0.9); }
.menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.menu-search__clear {
  position: absolute; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  display: none; place-items: center; color: var(--gold-soft);
}
.menu-search__clear svg { position: static; width: 14px; height: 14px; }
.menu-search.has-value .menu-search__clear { display: grid; }
.menu-search__clear:hover { background: rgba(181, 154, 99, 0.18); }

.cat-nav { position: relative; flex: 1; min-width: 0; }
.cat-nav::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(8, 26, 20, 0.95));
  pointer-events: none;
}
.cat-nav__scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-right: 40px; scroll-behavior: smooth; }
.cat-nav__scroll::-webkit-scrollbar { display: none; }
.cat-nav .chip { flex: none; }
.cat-nav .chip.is-spy:not([aria-pressed="true"]) { border-color: var(--gold); color: var(--ivory); }

.menu-status { margin-top: 12px; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246, 242, 232, 0.55); }
.menu-status b { color: var(--gold-soft); font-weight: 500; }

/* ---------- Bölümler ---------- */
.menu-body { padding-block: clamp(40px, 6vw, 80px) var(--section-y); background:
  radial-gradient(ellipse at 15% 0%, rgba(21, 98, 74, 0.2), transparent 50%),
  var(--charcoal); min-height: 60vh; }
.menu-section { padding-top: clamp(36px, 5vw, 64px); }
.menu-section[hidden] { display: none; }
.menu-section.is-entering { animation: section-in 0.9s var(--ease) both; }
.menu-section__head {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 34px;
  border-bottom: 1px solid var(--gold-line);
  position: relative;
}
.menu-section__head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 90px; height: 1px; background: var(--gold);
}
.menu-section__num { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; letter-spacing: 0.2em; }
.menu-section__title { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.menu-section__count { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(246, 242, 232, 0.5); }

.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; perspective: 1400px; }
.dish-grid--compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

/* ---------- Yemek kartı ---------- */
.dish {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(21, 98, 74, 0.2), rgba(8, 26, 20, 0.92));
  border: 1px solid var(--gold-line);
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.85);
}
.dish[hidden] { display: none; }
.dish:hover { border-color: var(--gold); box-shadow: 0 36px 60px -28px rgba(0, 0, 0, 0.95); }
.dish.is-target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 50px -8px rgba(181, 154, 99, 0.5); animation: target-pulse 2s var(--ease) 2; }

.dish__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--forest-2); }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.dish:hover .dish__media img { transform: scale(1.08); }
.dish__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(5, 16, 12, 0.55)); pointer-events: none; }
.dish__media:has(img:not(.is-placeholder)) { cursor: zoom-in; }

.dish__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; transform: translateZ(24px); }
.dish__name { font-size: 1.55rem; line-height: 1.15; }
.dish__desc { color: var(--muted); font-size: 0.92rem; margin-top: 10px; flex: 1; line-height: 1.6; }
.dish__note { margin-top: 10px; font-size: 0.8rem; color: var(--gold-soft); font-style: italic; }
.dish__price {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gold-line);
  font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.dish__price::before { content: ""; order: 2; width: 26px; height: 1px; background: var(--gold); }

/* Kompakt (içecek) kart */
.dish--compact { flex-direction: row; align-items: center; }
.dish--compact .dish__media { flex: 0 0 92px; width: 92px; aspect-ratio: 1; }
.dish--compact .dish__body { padding: 14px 18px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; transform: none; }
.dish--compact .dish__name { font-size: 1.2rem; }
.dish--compact .dish__price { margin: 0; padding: 0; border: 0; font-size: 1.25rem; white-space: nowrap; }
.dish--compact .dish__price::before { display: none; }

.menu-empty { display: none; text-align: center; padding: 80px 20px; }
.menu-empty.is-visible { display: block; }
.menu-empty h2 { font-size: 2.2rem; }
.menu-empty p { color: var(--muted); margin-top: 12px; }
.menu-empty .btn { margin-top: 26px; }

.menu-note { margin-top: 60px; text-align: center; font-size: 0.84rem; color: rgba(246, 242, 232, 0.5); }