/* ==========================================================================
   Barbarosa Restaurant & Cafe — Design System
   Palette sampled directly from the house emblem (assets/img/logo.jpg)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — #151314 is the emblem's own ground, so the logo sits seamlessly */
  --bg: #0b0a0b;
  --bg-elev: #121011;
  --surface: #151314;
  --surface-2: #1b1819;
  --surface-3: #221e1f;

  /* Gold ramp — sampled from the emblem, lightly saturated for UI legibility */
  --gold-50: #fbf3e0;
  --gold-100: #f4e6c4;
  --gold-200: #ead3a7;
  --gold-300: #d9c48f;
  --gold-400: #c9a961;
  --gold-500: #b08d3f;
  --gold-600: #8c7238;
  --gold-700: #65522a;
  --gold-800: #3d321b;
  --gold-900: #241e12;

  /* Text — warm off-white, never pure #fff on a warm black */
  --text: #f2ede4;
  --text-2: #bdb5a8;
  --text-3: #8c8579;
  --text-on-gold: #17130d;

  /* Lines */
  --line: #262223;
  --line-2: #322c2d;
  --line-gold: rgba(201, 169, 97, 0.22);
  --line-gold-strong: rgba(201, 169, 97, 0.42);

  /* Focus */
  --focus: var(--gold-300);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
    "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --fs-xl: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  --fs-2xl: clamp(2rem, 3.5vw + 1rem, 3.25rem);
  --fs-3xl: clamp(2.75rem, 8vw + 0.5rem, 6rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.5);

  /* Motion */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-enter: 550ms;

  /* Fixed z-index scale — no arbitrary values anywhere else */
  --z-base: 0;
  --z-raised: 10;
  --z-fab: 60;
  --z-search: 90;
  --z-nav: 100;
  /* Above the sticky bar and the search panel: the language control must stay
     reachable in every scroll position. Still below the skip link, and the
     dish dialog outranks it anyway by living in the browser's top layer. */
  --z-lang: 150;
  --z-skip: 200;

  /* Layout */
  --wrap: 72rem;
  --wrap-narrow: 46rem;
  --nav-h: 3.75rem;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Kill the blue/grey flash mobile browsers paint on tap. Inherited, so this
     covers every link, button and role="button" row on the page. The gold
     :focus-visible ring below is untouched — keyboard users still get it. */
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* Anchors land below the sticky category bar */
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  /* Reserve the scrollbar so locking body scroll for the dialog shifts nothing */
  scrollbar-gutter: stable;
}

/* The open search panel stacks under the bar, so anchors need more clearance */
html.search-open {
  scroll-padding-top: calc(var(--nav-h) + 4rem + var(--s-4));
}

/* Menu folded away — the hero sits directly above the contact section.
   Gated on .js so that with JavaScript off the whole menu stays in the page,
   visible and crawlable. */
.js.menu-collapsed .catbar,
.js.menu-collapsed .search,
.js.menu-collapsed .menu {
  display: none;
}

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

body {
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Warm vignette + fine grain: keeps large dark areas from banding.
   Fixed and static — never animated. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 55% at 50% -10%,
      rgba(176, 141, 63, 0.16),
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 45% at 50% 108%,
      rgba(140, 114, 56, 0.1),
      transparent 70%
    );
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--gold-400);
  color: var(--text-on-gold);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* Brushed-metal fill for the emblem wordmark only */
.gold-text {
  color: var(--gold-200);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gold-text {
    background-image: linear-gradient(
      170deg,
      var(--gold-100) 0%,
      var(--gold-300) 26%,
      var(--gold-500) 52%,
      var(--gold-200) 76%,
      var(--gold-400) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 48rem) {
  .wrap {
    padding-inline: var(--s-6);
  }
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  background: var(--gold-300);
  color: var(--text-on-gold);
  font-size: var(--fs-sm);
  font-weight: 500;
  transform: translateY(calc(-100% - var(--s-5)));
}

.skip-link:focus-visible {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hairline rule with a centred lozenge — echoes the emblem's engraving */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  color: var(--gold-600);
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1 1 auto;
  max-width: 5.5rem;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, currentColor);
}

.ornament::after {
  background-image: linear-gradient(90deg, currentColor, transparent);
}

.ornament__mark {
  width: 6px;
  height: 6px;
  flex: none;
  rotate: 45deg;
  border: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.875rem;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur) ease-out,
    border-color var(--dur) ease-out,
    color var(--dur) ease-out,
    transform var(--dur) ease-out;
}

.btn:active {
  transform: translateY(1px);
}

.btn--gold {
  background-color: var(--gold-300);
  color: var(--text-on-gold);
}

.btn--gold:hover {
  background-color: var(--gold-200);
}

.btn--ghost {
  border-color: var(--line-gold-strong);
  color: var(--gold-200);
}

.btn--ghost:hover {
  border-color: var(--gold-400);
  background-color: rgba(201, 169, 97, 0.08);
}

.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding-block: var(--s-9) var(--s-7);
  padding-top: max(var(--s-9), env(safe-area-inset-top));
  text-align: center;
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}

.hero__logo {
  width: clamp(11rem, 34vw, 16.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  /* The emblem ships on its own dark ground; feather it into the page */
  mask-image: radial-gradient(circle, #000 62%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 76%);
}

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__tagline {
  font-size: var(--fs-sm);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-2);
}

.hero__ornament {
  width: min(20rem, 70vw);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.hero__cue {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hero__cue-line {
  width: 1px;
  height: 2.5rem;
  background-image: linear-gradient(180deg, var(--gold-600), transparent);
}

/* --------------------------------------------------------------------------
   7. Category bar
   -------------------------------------------------------------------------- */
.catbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid var(--line);
  background-color: rgba(11, 10, 11, 0.86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: border-color var(--dur) ease-out;
}

.catbar.is-stuck {
  border-bottom-color: var(--line-gold);
}

.catbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--nav-h);
  padding-inline: var(--s-4);
  padding-right: max(var(--s-4), env(safe-area-inset-right));
  padding-left: max(var(--s-4), env(safe-area-inset-left));
}

.catbar__brand {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-200);
}

@media (max-width: 47.99rem) {
  .catbar__brand {
    display: none;
  }
}

.catbar__scroller {
  flex: 1 1 auto;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Padding lets the first and last pill clear the fade at the scroll ends */
  padding-inline: var(--s-2);
  /* Fade the overflow edges instead of a hard cut */
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 0.875rem,
    #000 calc(100% - 0.875rem),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 0.875rem,
    #000 calc(100% - 0.875rem),
    transparent 100%
  );
}

.catbar__scroller::-webkit-scrollbar {
  display: none;
}

.catbar__link {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 400;
  white-space: nowrap;
  color: var(--text-2);
  scroll-snap-align: center;
  transition:
    color var(--dur) ease-out,
    border-color var(--dur) ease-out,
    background-color var(--dur) ease-out;
}

.catbar__link:hover {
  color: var(--gold-200);
  border-color: var(--line-gold);
}

.catbar__link[aria-current="true"] {
  background-color: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--text-on-gold);
  font-weight: 500;
}

/* Scroll the category strip without a trackpad gesture. Hidden on phones,
   where swiping the strip is the natural move and the width is precious. */
.catbar__arrows {
  flex: none;
  display: none;
  gap: var(--s-2);
}

@media (min-width: 36rem) {
  .catbar__arrows {
    display: flex;
  }
}

.catbar__arrow,
.catbar__search-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition:
    color var(--dur) ease-out,
    border-color var(--dur) ease-out,
    opacity var(--dur) ease-out;
}

.catbar__arrow:hover:not(:disabled) {
  color: var(--gold-200);
  border-color: var(--line-gold-strong);
}

.catbar__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.catbar__arrow svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.catbar__search-toggle:hover,
.catbar__search-toggle[aria-expanded="true"] {
  color: var(--gold-200);
  border-color: var(--line-gold-strong);
}

.catbar__search-toggle svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* --------------------------------------------------------------------------
   8. Search
   -------------------------------------------------------------------------- */
.search {
  position: sticky;
  /* +1px clears the category bar's bottom border, so no seam shows through */
  top: calc(var(--nav-h) + 1px);
  z-index: var(--z-search);
  border-bottom: 1px solid var(--line);
  background-color: rgba(18, 16, 17, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.search[hidden] {
  display: none;
}

.search__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-3) var(--s-5);
}

.search__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  transition: border-color var(--dur) ease-out;
}

.search__field:focus-within {
  border-color: var(--line-gold-strong);
}

.search__field svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--text-3);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--s-2);
  border: 0;
  background: none;
  font-size: var(--fs-base);
}

.search__input:focus {
  outline: none;
}

.search__input::placeholder {
  color: var(--text-3);
}

/* Suppress the engine's own clear affordance — we ship a styled one */
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search__clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur) ease-out;
}

.search__clear:hover {
  color: var(--text);
}

.search__clear[hidden] {
  display: none;
}

.search__count {
  flex: none;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

@media (max-width: 35.99rem) {
  .search__count {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. Menu sections
   -------------------------------------------------------------------------- */
.menu {
  position: relative;
  z-index: var(--z-raised);
  padding-block: var(--s-8) var(--s-9);
}

.menu-section {
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
}

.menu-section:first-of-type {
  border-top: 0;
  padding-top: var(--s-6);
}

.menu-section[hidden] {
  display: none;
}

.section-head {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
  text-align: center;
}

.section-head__num {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.28em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-500);
}

.section-head__title {
  font-size: var(--fs-2xl);
  letter-spacing: 0.02em;
  color: var(--gold-100);
}

.section-head__note {
  max-width: 34rem;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

.section-head .ornament {
  width: min(16rem, 60vw);
}

/* --------------------------------------------------------------------------
   10. Menu items
   -------------------------------------------------------------------------- */
.items {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
  align-items: start;
}

/* Long-form dishes read better in a single measured column */
.items--detailed {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: var(--s-3);
}

.item {
  padding: var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition:
    background-color var(--dur) ease-out,
    border-color var(--dur) ease-out;
}

.item[hidden] {
  display: none;
}

@media (hover: hover) {
  .item:hover {
    background-color: var(--surface);
    border-color: var(--line-gold);
  }
}

.item__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.item__name {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
}

/* In a translated locale the dish keeps its Turkish name on a second line, so
   a guest can order by the name the kitchen uses. */
.item__name-main {
  display: block;
}

.item__name-orig {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-xs);
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-3);
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .item__name-orig {
  text-align: right;
}

/* The two-line name would drag the leader dots down with it, so pin the row
   to the first line. */
.item__head:has(.item__name-orig) {
  align-items: flex-start;
}

.item__head:has(.item__name-orig) .item__leader,
.item__head:has(.item__name-orig) .item__price {
  align-self: flex-start;
  margin-bottom: 0;
}

.item__head:has(.item__name-orig) .item__leader {
  margin-top: 0.6875rem;
}

/* Classic printed-menu leader dots between dish and price */
.item__leader {
  flex: 1 1 auto;
  min-width: 1.25rem;
  height: 0.4375rem;
  align-self: flex-end;
  margin-bottom: 0.3125rem;
  background-image: radial-gradient(
    circle at center,
    var(--gold-700) 0.9px,
    transparent 1.1px
  );
  background-size: 6px 100%;
  background-repeat: repeat-x;
}

.item__price {
  flex: none;
  font-size: var(--fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gold-300);
}

.item__price .cur {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--gold-500);
}

.item__desc {
  margin-top: var(--s-2);
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-3);
}

.item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.chip {
  padding: 0.1875rem var(--s-3);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-400);
}

/* Items that carry a photo or ingredients become clickable (see app.js).
   Rows without that data stay plain, so a half-filled menu never looks broken. */
.item--interactive {
  cursor: pointer;
}

.item--interactive:hover .item__name {
  color: var(--gold-200);
}

.item--has-photo {
  display: flex;
  /* Centred reads better than top-aligned across both one-line rows and rows
     that carry a description. */
  align-items: center;
  gap: var(--s-4);
}

.item__content {
  flex: 1 1 auto;
  min-width: 0;
}

.item__thumb {
  flex: none;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-sm);
  object-fit: cover;
  background-color: var(--surface-2);
}

/* Empty state for search */
.no-results {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding-block: var(--s-8);
  text-align: center;
}

.no-results[hidden] {
  display: none;
}

.no-results__title {
  font-size: var(--fs-xl);
  color: var(--gold-100);
}

.no-results__text {
  max-width: 28rem;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   11. Contact ("Hakkımızda")
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  z-index: var(--z-raised);
  padding-block: var(--s-8) var(--s-9);
  padding-bottom: max(var(--s-9), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-gold);
  background-color: var(--bg-elev);
}

.contact__head {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
  text-align: center;
}

.contact__title {
  font-size: var(--fs-2xl);
  color: var(--gold-100);
}

.contact__grid {
  display: grid;
  gap: var(--s-5);
  align-items: stretch;
}

/* Tablet: the phone runs full width, map and tour sit side by side. */
@media (min-width: 48rem) and (max-width: 67.99rem) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }

  .phone-card {
    grid-column: 1 / -1;
  }
}

/* Desktop: telephone — map — 360° tour, left to right. */
@media (min-width: 68rem) {
  .contact__grid {
    grid-template-columns: 19rem 1fr 1fr;
  }
}

.card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  overflow: hidden;
}

.phone-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  transition:
    border-color var(--dur) ease-out,
    background-color var(--dur) ease-out;
}

.phone-card:hover {
  border-color: var(--line-gold-strong);
  background-color: var(--surface-2);
}

.phone-card__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  color: var(--gold-300);
}

.phone-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.phone-card__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}

.phone-card__number {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw + 0.75rem, 2rem);
  font-weight: 600;
  /* Cormorant defaults to old-style figures; a number people dial needs lining */
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gold-200);
  direction: ltr;
}

.map-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 20rem;
}

/* The map keeps Google's own colours — no filter. It reads as an inset photo
   in the dark card, which is why the card's border and radius do the framing.

   The blue "Haritalar'da aç" chip in the top-left is hidden by oversizing the
   frame and pulling it up, so that strip falls outside the viewport. Google's
   logo and copyright line sit along the bottom and stay fully visible.

   No colour patch here on purpose: covering Google's white chrome with a white
   rectangle only works if the map underneath happens to be plain land, and on
   an unfiltered map it reads as a white box of its own. The place card is
   removed at the source instead — by what the embed is asked for (see the
   iframe src in index.html), not by painting over it. */
.map-card__viewport {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  background-color: var(--surface-2);

  /* Top crop height — enough to clear the blue chip. */
  --crop-top: 3rem;
}

.map-card__frame {
  position: absolute;
  top: calc(var(--crop-top) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--crop-top));
  border: 0;
}

.map-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line-2);
  background-color: var(--surface-2);
}

.map-card__name {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-2);
}

.map-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gold-300);
  transition: color var(--dur) ease-out;
}

.map-card__link:hover {
  color: var(--gold-100);
}

.map-card__link svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* --- 360° tour ---------------------------------------------------------- */
.pano-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 20rem;
}

.pano-card__viewport {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  background-color: var(--surface-2);
}

/* Pannellum measures this element, so it needs real dimensions before init. */
.pano-card__stage {
  position: absolute;
  inset: 0;
}

.pano-card__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floor selector, pinned to the right edge of the panorama. */
.pano-card__floors {
  position: absolute;
  top: 50%;
  right: var(--s-3);
  z-index: var(--z-raised);
  display: grid;
  gap: var(--s-2);
  transform: translateY(-50%);
}

.pano-card__floor {
  min-width: 4.25rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-pill);
  background-color: rgb(11 10 11 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--gold-200);
  cursor: pointer;
  transition:
    background-color var(--dur) ease-out,
    border-color var(--dur) ease-out,
    color var(--dur) ease-out;
}

.pano-card__floor:hover {
  border-color: var(--gold-400);
  color: var(--gold-100);
}

.pano-card__floor[aria-pressed="true"] {
  background-color: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--text-on-gold);
  font-weight: 500;
}

/* Mirror to the left edge in right-to-left locales */
[dir="rtl"] .pano-card__floors {
  right: auto;
  left: var(--s-3);
}

/* Keep the drag hint clear of the buttons on narrow cards */
@media (max-width: 30rem) {
  .pano-card__floor {
    min-width: 0;
    padding: var(--s-2);
  }
}

/* Drag affordance — a still panorama gives no hint that it can be turned.
   Fades out on first interaction (see app.js). */
.pano-card__hint {
  position: absolute;
  left: 50%;
  bottom: var(--s-4);
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-pill);
  background-color: rgb(11 10 11 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--gold-200);
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity var(--dur) ease-out;
}

.pano-card__hint svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.pano-card__hint.is-hidden {
  opacity: 0;
}

.pano-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line-2);
  background-color: var(--surface-2);
}

/* The tour button is a <button>, so give it the anchor's resets. */
.pano-card__bar .map-card__link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* Pannellum ships a light chrome; align what stays visible with the palette. */
.pano-card .pnlm-container {
  background: var(--surface-2);
  font-family: var(--font-body);
}

.pano-card .pnlm-load-box {
  background-color: rgb(11 10 11 / 0.85);
  color: var(--gold-200);
}

.pano-card .pnlm-lbox {
  background-color: transparent;
}

.colophon {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   12. Dish dialog
   -------------------------------------------------------------------------- */
.dish {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(88dvh, 46rem);
  /* The `* { margin: 0 }` reset wipes the UA's `margin: auto`, which is what
     centres a modal dialog — put it back explicitly. */
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

/* Author styles outrank the UA's `dialog:not([open]) { display: none }`, so the
   layout must be declared on the open state only — otherwise a closed dialog
   renders inline at the bottom of the page. */
.dish[open] {
  display: flex;
  flex-direction: column;
}

.dish::backdrop {
  background-color: rgb(4 3 3 / 0.78);
}

.dish__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background-color: rgb(11 10 11 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition:
    color var(--dur) ease-out,
    border-color var(--dur) ease-out;
}

.dish__close:hover {
  color: var(--gold-200);
  border-color: var(--line-gold-strong);
}

.dish__close svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.dish__media {
  flex: none;
  margin: 0;
  background-color: var(--surface-2);
}

.dish__media[hidden] {
  display: none;
}

.dish__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.dish__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--s-5);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
}

.dish__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.dish__title {
  font-size: var(--fs-xl);
  color: var(--gold-100);
}

.dish__price {
  flex: none;
  font-size: var(--fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gold-300);
}

.dish__desc {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.dish__desc[hidden] {
  display: none;
}

.dish__section {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.dish__section[hidden] {
  display: none;
}

.dish__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.dish__ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.dish__ingredients li {
  padding: 0.25rem var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

@media (prefers-reduced-motion: no-preference) {
  .dish[open] {
    animation: dish-in 200ms ease-out;
  }

  .dish[open]::backdrop {
    animation: dish-fade 200ms ease-out;
  }
}

@keyframes dish-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes dish-fade {
  from {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   13. Language picker

   Fixed bottom-left, mirroring back-to-top on the right. It has to live
   outside the category bar because that bar is hidden while the menu is
   folded, and the language choice must be reachable in every state.
   -------------------------------------------------------------------------- */
.lang {
  position: fixed;
  left: max(var(--s-5), env(safe-area-inset-left));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  z-index: var(--z-lang);
}

.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 2.875rem;
  padding-inline: var(--s-4);
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--r-pill);
  background-color: rgb(21 19 20 / 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-300);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    color var(--dur) ease-out,
    border-color var(--dur) ease-out;
}

.lang__trigger:hover {
  color: var(--gold-100);
  border-color: var(--gold-400);
}

.lang__trigger svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
}

@media (max-width: 26rem) {
  .lang__label {
    display: none;
  }

  .lang__trigger {
    padding-inline: 0;
    width: 2.875rem;
    justify-content: center;
  }
}

.lang__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--s-2));
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  gap: var(--s-1);
  max-height: 60dvh;
  overflow-y: auto;
  padding: var(--s-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
}

.lang__panel[hidden] {
  display: none;
}

.lang__option {
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-size: var(--fs-sm);
  text-align: start;
  white-space: nowrap;
  color: var(--text-2);
  cursor: pointer;
  transition:
    background-color var(--dur) ease-out,
    color var(--dur) ease-out;
}

.lang__option:hover {
  background-color: var(--surface-2);
  color: var(--gold-200);
}

.lang__option[aria-current="true"] {
  background-color: var(--gold-300);
  color: var(--text-on-gold);
  font-weight: 500;
}

/* --- right-to-left ------------------------------------------------------ */
[dir="rtl"] .item__head,
[dir="rtl"] .dish__head,
[dir="rtl"] .map-card__bar,
[dir="rtl"] .pano-card__bar,
[dir="rtl"] .search__inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .item__desc,
[dir="rtl"] .no-results__text,
[dir="rtl"] .dish__desc {
  text-align: right;
}

/* The leader dots are a horizontal rule, so they need no mirroring, but the
   price must stay on the reading-end side. */
[dir="rtl"] .item__price {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Latin brand names and the phone number stay left-to-right inside RTL text */
[dir="rtl"] .phone-card__number,
[dir="rtl"] .catbar__brand,
[dir="rtl"] .hero__title,
[dir="rtl"] .hero__tagline,
[dir="rtl"] .colophon,
[dir="rtl"] .map-card__name {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .lang {
  left: auto;
  right: max(var(--s-5), env(safe-area-inset-left));
}

[dir="rtl"] .lang__panel {
  left: auto;
  right: 0;
}

[dir="rtl"] .to-top {
  right: auto;
  left: max(var(--s-5), env(safe-area-inset-right));
}

[dir="rtl"] .pano-card__hint {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   14. Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid var(--line-gold-strong);
  border-radius: 50%;
  background-color: rgba(21, 19, 20, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-300);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition:
    opacity var(--dur) ease-out,
    transform var(--dur) ease-out,
    color var(--dur) ease-out;
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover {
  color: var(--gold-100);
}

.to-top svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* --------------------------------------------------------------------------
   15. Entrance motion — opacity + transform only
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-enter) ease-out var(--reveal-delay, 0ms),
    transform var(--dur-enter) ease-out var(--reveal-delay, 0ms);
}

/* Elements that also animate on hover must re-declare both lists, otherwise
   the .reveal rule wins the cascade and kills their hover feedback. */
.js .item.reveal,
.js .phone-card.reveal {
  transition:
    opacity var(--dur-enter) ease-out var(--reveal-delay, 0ms),
    transform var(--dur-enter) ease-out var(--reveal-delay, 0ms),
    background-color var(--dur) ease-out,
    border-color var(--dur) ease-out;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  .btn,
  .item,
  .to-top,
  .catbar__link,
  .phone-card {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   16. Print — a clean paper menu straight from the browser
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --text: #111;
    --text-2: #333;
    --text-3: #555;
    --gold-100: #6b5418;
    --gold-300: #6b5418;
    --gold-500: #8a6f22;
    --gold-700: #b9a476;
    --line: #ddd;
  }

  body {
    background: #fff;
    color: #111;
  }

  body::before,
  .hero__actions,
  .hero__cue,
  .catbar,
  .search,
  .to-top,
  .lang,
  .dish,
  .map-card__viewport,
  .pano-card__viewport {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding-block: 0 var(--s-5);
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .menu-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .item {
    break-inside: avoid;
  }

  .items {
    grid-template-columns: 1fr 1fr;
  }
}