/* ================================================================
   version 407 — Coffee & Matcha Studio  |  Menu CSS
   Adım 4: Design Token Sistemi + Animasyonlar
   ================================================================ */

@font-face {
  font-family: "Space Grotesk 407";
  src: url("assets/fonts/SpaceGrotesk-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope 407";
  src: url("assets/fonts/Manrope-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond Local";
  src: url("assets/fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond Local";
  src: url("assets/fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans Local";
  src: url("assets/fonts/DMSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans Local";
  src: url("assets/fonts/DMSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans Local";
  src: url("assets/fonts/DMSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* ── Root Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --display-font: "Space Grotesk 407", "Space Grotesk", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, sans-serif;
  --font: "Manrope 407", "Manrope", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Renk Sistemi */
  --jade:          #7b947e;
  --jade-soft:     #a0b29f;
  --matcha-deep:   #253127;
  --moss:          #b8c5b7;
  --strawberry:    #d6dadd;
  --metal:         #c8ced0;
  --metal-dark:    #7d8586;
  --white-metal:   #f7f9f8;
  --cream:         #f7f3e8;
  --rice:          #faf8f2;

  /* Arka Plan */
  --bg:            #070908;
  --panel:         #0d1110;
  --panel-2:       #111514;
  --ink:           #f4f7f5;
  --paper:         #ffffff;
  --paper-soft:    #f0f5f0;
  --muted:         #aeb7b4;
  --soft:          #ffffff;

  /* Vurgular */
  --brass:         var(--jade);   /* Semantic alias */
  --brass-deep:    var(--matcha-deep);
  --line:          rgba(238, 245, 236, 0.10);
  --line-strong:   rgba(238, 245, 236, 0.24);
  --wood:          var(--jade);
  --shadow:        0 22px 54px rgba(0, 0, 0, 0.56);

  /* Boyut */
  --radius-card:   8px;
  --radius-media:  8px;
  --touch-target:  44px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  letter-spacing: 0;
}

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  padding-bottom: 0;
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.10), transparent 300px),
    linear-gradient(180deg, rgba(167, 176, 174, 0.045), transparent 380px),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }

.has-intro .site-header,
.has-intro main {
  opacity: 0;
  animation: pageReveal 560ms ease 3350ms forwards;
}

.category-chip,
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  white-space: nowrap;
}

.is-dialog-open { overflow: hidden; }

.metal-text,
.venue-hero h1,
.hero h1,
.section-copy-block h2,
.section-heading-row h2,
.location-grid h2,
.section-heading h2,
.menu-card-name,
.dialog-name,
.feature-tile > span:last-child {
  font-family: var(--display-font);
  background: linear-gradient(112deg, #ffffff 4%, #e8ecea 34%, #aeb7b4 64%, #ffffff 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Matcha Opening Animation ───────────────────────────────────── */
.matcha-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f2f4f0 url("assets/intro/version407-matcha-intro-poster.jpg") center / cover no-repeat;
  pointer-events: none;
  animation: introExit 820ms ease 3250ms forwards;
}

.matcha-intro::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 21%, rgba(6, 8, 7, 0.72) 100%),
    linear-gradient(90deg, rgba(6, 8, 7, 0.42), transparent 38%, rgba(6, 8, 7, 0.16));
}

.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  filter: saturate(0.88) contrast(1.06) brightness(0.96);
  transform: scale(1.012);
  animation: introVideoSettle 3700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-film {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(244, 247, 245, 0.58), transparent 28%),
    linear-gradient(180deg, rgba(244, 247, 245, 0.28), transparent 34%, rgba(6, 8, 7, 0.76) 100%);
  mix-blend-mode: multiply;
  opacity: 0.78;
}

.intro-wordmark {
  position: absolute;
  top: 24%;
  left: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  width: min(86vw, 520px);
  opacity: 0;
  transform: translate3d(-50%, 16px, 0);
  animation: introCopyIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 430ms forwards;
}

.intro-wordmark span {
  color: rgba(245, 248, 246, 0.78);
  font-family: var(--display-font);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.intro-wordmark strong {
  font-family: var(--display-font);
  font-size: 86px;
  font-weight: 700;
  line-height: 0.9;
  background: linear-gradient(112deg, #ffffff 0%, #f0f3f2 30%, #9fa8a6 58%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.intro-wordmark em {
  margin-top: 8px;
  color: rgba(245, 248, 246, 0.78);
  font-family: var(--display-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

/* ── Shared Site Chrome ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid rgba(238, 245, 236, 0.10);
  background: rgba(12, 17, 14, 0.78);
  backdrop-filter: blur(16px);
}

.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 40px;
  color: var(--white-metal);
  white-space: nowrap;
}

.site-logo span {
  color: var(--metal);
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 500;
}

.site-logo strong {
  font-family: var(--display-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a,
.button,
.text-link {
  min-height: 40px;
  border-radius: 8px;
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 600;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: rgba(244, 247, 245, 0.76);
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: rgba(244, 247, 245, 0.08);
  color: var(--white-metal);
}

.button,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button {
  padding: 0 18px;
  border: 1px solid var(--line-strong);
}

.button-primary {
  border-color: rgba(244, 247, 245, 0.40);
  background: linear-gradient(135deg, rgba(244, 247, 245, 0.18), rgba(125, 133, 134, 0.12));
  color: var(--white-metal);
}

.button-secondary {
  background: rgba(244, 247, 245, 0.06);
  color: var(--ink);
}

.text-link {
  color: var(--metal);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Landing Page ───────────────────────────────────────────────── */
.venue-hero {
  position: relative;
  min-height: 86svh;
  overflow: hidden;
  background: var(--bg);
}

.venue-hero-photo,
.venue-hero-shade {
  position: absolute;
  inset: 0;
}

.venue-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 48%;
  filter: saturate(0.55) contrast(1.10) brightness(0.58);
}

.venue-hero-shade {
  background:
    linear-gradient(180deg, rgba(7, 9, 8, 0.22), rgba(7, 9, 8, 0.52) 50%, rgba(7, 9, 8, 0.94)),
    linear-gradient(90deg, rgba(7, 9, 8, 0.92), rgba(7, 9, 8, 0.20) 58%, rgba(7, 9, 8, 0.72));
}

.venue-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  min-height: inherit;
  max-width: 1120px;
  margin: 0 auto;
  padding: 118px 18px 42px;
}

.venue-hero h1 {
  max-width: 760px;
  margin: 10px 0 6px;
  font-size: 58px;
  font-weight: 700;
  line-height: 0.92;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.62);
}

.brand-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  max-width: 100%;
  white-space: nowrap;
}

.brand-title span,
.brand-title strong {
  display: inline-block;
  background: linear-gradient(112deg, #ffffff 0%, #eef2f1 32%, #9aa4a2 64%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-title span {
  font-size: 0.48em;
  font-weight: 500;
}

.brand-title strong {
  font-size: 1em;
  font-weight: 700;
}

.brand-subtitle {
  margin: 0 0 14px;
  color: rgba(235, 241, 238, 0.80);
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.54);
}

.brand-title-compact {
  font-size: 52px;
}

.venue-lead {
  max-width: 620px;
  margin: 0;
  color: rgba(244, 247, 245, 0.78);
  font-size: 16px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.venue-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 680px);
  margin: 34px 0 0;
  border: 1px solid rgba(238, 245, 236, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(238, 245, 236, 0.08);
}

.venue-meta div {
  padding: 12px;
  background: rgba(12, 17, 14, 0.62);
}

.venue-meta dt {
  margin: 0 0 4px;
  color: rgba(238, 245, 236, 0.56);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.venue-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.section-band {
  padding: 58px 0;
  background: var(--bg);
}

.section-band-alt {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(184, 192, 186, 0.05), transparent),
    #0f1512;
}

.section-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

.studio-grid,
.location-grid {
  display: grid;
  gap: 28px;
}

.section-copy-block h2,
.section-heading-row h2,
.location-grid h2 {
  max-width: 760px;
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.08;
}

.section-copy-block p:not(.eyebrow),
.location-grid p {
  max-width: 640px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.studio-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.photo-panel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 247, 245, 0.10);
  border-radius: 8px;
  background: var(--panel);
}

.photo-panel > img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  filter: saturate(0.62) contrast(1.08) brightness(0.80);
}

.photo-icon,
.feature-icon,
.menu-photo-icon {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 247, 245, 0.28);
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(244, 247, 245, 0.18), rgba(125, 133, 134, 0.10)),
    rgba(7, 9, 8, 0.58);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}

.photo-icon {
  right: 10px;
  top: 10px;
}

.feature-icon {
  top: 12px;
  left: 12px;
}

.menu-photo-icon {
  top: 8px;
  right: 8px;
  z-index: 9;
  width: 34px;
  height: 34px;
}

.photo-icon img,
.feature-icon img,
.menu-photo-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.menu-photo-icon img {
  width: 20px;
  height: 20px;
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.feature-tile {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel);
}

.feature-tile > img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(0.58) contrast(1.08) brightness(0.66);
  transition: transform 220ms ease, filter 220ms ease;
}

.feature-tile > span:last-child {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.72);
}

.feature-tile:hover > img {
  filter: saturate(0.68) contrast(1.08) brightness(0.76);
  transform: scale(1.025);
}

.address-line {
  margin-top: 14px;
}

.info-list {
  display: grid;
  gap: 8px;
}

.info-list a {
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(238, 245, 236, 0.045);
}

.info-list span {
  color: rgba(238, 245, 236, 0.56);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.info-list strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}

/* ── Media Frame ─────────────────────────────────────────────────── */
.media-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  background:
    radial-gradient(circle at 50% 78%, rgba(42, 74, 53, 0.28), transparent 31%),
    radial-gradient(circle at 34% 18%, rgba(61, 107, 79, 0.06), transparent 28%),
    linear-gradient(145deg, rgba(90, 138, 106, 0.04), rgba(0, 0, 0, 0.28)),
    #0d1410;
  isolation: isolate;
  transform-style: preserve-3d;
  animation-delay: var(--fx-delay, 0ms);
  will-change: transform;
}

.media-frame::before {
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 1px solid rgba(61, 107, 79, 0.14);
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(138, 175, 122, 0.06), transparent 32%),
    linear-gradient(315deg, rgba(61, 107, 79, 0.08), transparent 44%);
  opacity: 0.52;
  pointer-events: none;
  content: "";
}

.media-frame > img,
.media-frame > video {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 57%;
  filter: saturate(0.92) contrast(1.06) brightness(0.88);
  transform: translateZ(0);
  animation-delay: var(--fx-delay, 0ms);
}

/* Cold cup / bottle */
.visual-cold-cup > img,
.visual-cold-bottle > img {
  z-index: 4;
  filter: saturate(0.96) contrast(1.04) brightness(0.90);
}

/* ── Media Orbit / Plinth / FX ───────────────────────────────────── */
.media-orbit,
.media-plinth,
.media-fx {
  position: absolute;
  pointer-events: none;
}

.media-orbit {
  inset: 8px;
  z-index: 1;
  border: 1px solid rgba(61, 107, 79, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(61, 107, 79, 0.14), transparent 47%),
    linear-gradient(120deg, transparent, rgba(90, 138, 106, 0.08), transparent);
  opacity: 0.7;
  filter: blur(0.2px);
  transform: rotate(-8deg) scaleX(0.92);
}

.media-plinth {
  right: 12%;
  bottom: 8px;
  left: 12%;
  z-index: 2;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 68%);
  filter: blur(2px);
  opacity: 0.72;
  animation: plinthPulse 6.8s ease-in-out infinite;
  animation-delay: var(--fx-delay, 0ms);
}

.media-fx {
  z-index: 5;
  display: none;
}

/* ── FX: Matcha Steam ────────────────────────────────────────────── */
.fx-steam {
  width: 22px;
  height: 50px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(138, 175, 122, 0.44), transparent 58%),
    radial-gradient(ellipse at 46% 72%, rgba(90, 138, 106, 0.24), transparent 64%);
  filter: blur(8px);
  mix-blend-mode: screen;
}

.fx-steam-a { top: 13px; left: 45%; animation: matchaSteamColumnA 5.2s ease-in-out infinite; }
.fx-steam-b { top: 21px; left: 57%; animation: matchaSteamColumnB 6.4s ease-in-out infinite 0.9s; }

/* ── FX: Bubble / Dew ────────────────────────────────────────────── */
.fx-bubble {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(90, 138, 106, 0.24);
  border-radius: 999px;
  background: rgba(61, 107, 79, 0.10);
  box-shadow:
    18px 20px 0 -1px rgba(90, 138, 106, 0.10),
    -12px 38px 0 -2px rgba(61, 107, 79, 0.10);
  opacity: 0.62;
}

.fx-bubble-a { right: 28%; bottom: 24%; animation: bubbleRiseA 5.4s ease-in-out infinite; }
.fx-bubble-b { left: 28%;  bottom: 18%; animation: bubbleRiseB 6.2s ease-in-out infinite 0.65s; }

/* Green dew drop (soğuk matcha) */
.motion-green-dew .fx-bubble {
  width: 2px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(138, 175, 122, 0.62), rgba(90, 138, 106, 0.16), transparent);
  box-shadow:
    10px 16px 0 -0.5px rgba(138, 175, 122, 0.32),
    -8px 34px 0 -0.5px rgba(61, 107, 79, 0.20),
    16px 48px 0 -1px rgba(138, 175, 122, 0.18);
  filter: blur(0.2px);
  opacity: 0;
}

.motion-green-dew .fx-bubble-a {
  top: 23%; right: 33%; bottom: auto; left: auto;
  animation: greenDewDropA 5.4s cubic-bezier(0.34, 0, 0.28, 1) infinite;
  animation-delay: var(--fx-delay, 0ms);
}

.motion-green-dew .fx-bubble-b {
  top: 17%; right: 48%; bottom: auto; left: auto;
  height: 15px;
  animation: greenDewDropB 6.2s cubic-bezier(0.34, 0, 0.28, 1) infinite;
  animation-delay: calc(var(--fx-delay, 0ms) + 960ms);
}

/* ── FX: Jade Spark ──────────────────────────────────────────────── */
.fx-spark {
  width: 32px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(61, 107, 79, 0.44), transparent);
  box-shadow: 0 0 10px rgba(61, 107, 79, 0.18);
}

.fx-spark-a { top: 18%; right: 12%; transform: rotate(-22deg); animation: jadeSheen 6.6s ease-in-out infinite; }
.fx-spark-b { bottom: 26%; left: 10%; transform: rotate(18deg);  animation: jadeSheen 7.4s ease-in-out infinite 1.2s; }

/* ── FX: Leaf Rock ───────────────────────────────────────────────── */
.fx-roast {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(90, 138, 106, 0.72);
  box-shadow:
    12px 18px 0 -1px rgba(138, 175, 122, 0.38),
    -16px 30px 0 -1px rgba(61, 107, 79, 0.30),
    22px 42px 0 -2px rgba(90, 138, 106, 0.24);
  filter: blur(0.4px);
}

.fx-roast-a { right: 22%; bottom: 18%; animation: leafDriftA 6.8s ease-in-out infinite; }
.fx-roast-b { left:  20%; bottom: 24%; animation: leafDriftB 7.6s ease-in-out infinite 0.9s; }

.fx-beanburst {
  display: none;
  z-index: 5;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(42, 74, 53, 0.86);
  box-shadow:
    12px -18px 0 -1px rgba(90, 138, 106, 0.72),
    -18px -8px 0 -1px rgba(30, 56, 38, 0.82),
    28px 8px 0 -2px rgba(138, 175, 122, 0.42),
    -28px 18px 0 -2px rgba(61, 107, 79, 0.44);
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.38));
  opacity: 0;
}

.fx-beanburst-a { left: 42%; top: 28%; animation: leafBurstA 7.8s ease-in-out infinite; animation-delay: var(--fx-delay, 0ms); }
.fx-beanburst-b { right: 34%; top: 35%; transform: scale(0.84) rotate(16deg); animation: leafBurstB 8.4s ease-in-out infinite; animation-delay: calc(var(--fx-delay, 0ms) + 720ms); }

/* ── FX Visibility Rules ─────────────────────────────────────────── */
.motion-matcha-steam .fx-steam,
.visual-hot-cup .fx-steam       { display: block; }

.motion-green-dew .fx-bubble,
.visual-cold-cup .fx-bubble     { display: block; }

.motion-bottle-rock .fx-spark,
.motion-leaf-rock .fx-spark,
.visual-cold-bottle .fx-spark,
.visual-bean-pack .fx-spark     { display: block; }

.motion-leaf-rock .fx-roast,
.visual-bean-pack .fx-roast     { display: block; }

.motion-leaf-rock .fx-beanburst,
.visual-bean-pack .fx-beanburst { display: block; }

/* ── In-View Activation ──────────────────────────────────────────── */
.menu-card.is-in-view,
.quick-item.is-in-view {
  border-color: rgba(61, 107, 79, 0.22);
}

.menu-card.is-in-view {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.menu-card.is-in-view::after {
  background: linear-gradient(112deg, transparent 8%, rgba(90, 138, 106, 0.04) 42%, rgba(61, 107, 79, 0.06) 50%, transparent 70%);
  animation-duration: 7.8s;
}

.menu-card.is-in-view .media-frame::before,
.quick-item.is-in-view .media-frame::before {
  opacity: 0.58;
  animation: frameLiveSheen 7.4s ease-in-out infinite;
  animation-delay: var(--fx-delay, 0ms);
}

.menu-card.is-in-view .media-orbit,
.quick-item.is-in-view .media-orbit {
  opacity: 0.56;
  animation: orbitBreath 6.4s ease-in-out infinite;
}

.menu-card.is-in-view .media-plinth,
.quick-item.is-in-view .media-plinth {
  opacity: 0.72;
  animation-duration: 5.8s;
}

.menu-card.is-in-view .fx-steam,
.quick-item.is-in-view .fx-steam {
  width: 28px;
  height: 66px;
  filter: blur(9px);
}

.menu-card.is-in-view .fx-bubble,
.quick-item.is-in-view .fx-bubble {
  transform: scale(1.04);
  opacity: 0.46;
}

.menu-card.is-in-view .fx-spark,
.quick-item.is-in-view .fx-spark { opacity: 0.48; }

.menu-card.is-in-view .media-badge,
.quick-item.is-in-view .media-badge {
  border-color: rgba(61, 107, 79, 0.36);
  color: rgba(238, 245, 236, 0.92);
}

/* ── Motion Overlays ─────────────────────────────────────────────── */
.motion-matcha-steam::after,
.motion-green-dew::after,
.motion-layer-float::after,
.motion-leaf-rock::after,
.motion-bottle-rock::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  animation-delay: var(--fx-delay, 0ms);
}

.motion-matcha-steam::after {
  background:
    radial-gradient(ellipse at 54% 22%, rgba(90, 138, 106, 0.22), transparent 29%),
    radial-gradient(ellipse at 46% 14%, rgba(90, 138, 106, 0.14), transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.30;
  animation: matchaSteamRise 5.2s ease-in-out infinite;
}

.motion-green-dew::after {
  z-index: 5;
  background:
    linear-gradient(180deg, transparent 8%, rgba(138, 175, 122, 0.28) 22%, rgba(90, 138, 106, 0.12) 62%, transparent 92%) 56% -18% / 2px 62% no-repeat,
    linear-gradient(180deg, transparent 4%, rgba(138, 175, 122, 0.20) 30%, rgba(61, 107, 79, 0.08) 68%, transparent 96%) 67% -12% / 1.5px 55% no-repeat,
    linear-gradient(180deg, transparent 12%, rgba(138, 175, 122, 0.16) 34%, rgba(90, 138, 106, 0.06) 76%, transparent 100%) 41% -16% / 1.5px 48% no-repeat,
    radial-gradient(circle at 61% 31%, rgba(138, 175, 122, 0.28), transparent 5%),
    radial-gradient(circle at 45% 45%, rgba(90, 138, 106, 0.20), transparent 4%);
  filter: blur(0.15px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  animation: greenDewRun 5.8s cubic-bezier(0.34, 0, 0.26, 1) infinite;
}

.motion-layer-float::after {
  background:
    linear-gradient(112deg, transparent 22%, rgba(90, 138, 106, 0.06) 45%, transparent 62%),
    radial-gradient(circle at 24% 22%, rgba(61, 107, 79, 0.07), transparent 14%);
  opacity: 0.18;
  transform: translateX(-65%);
  animation: layerShimmer 5.6s ease-in-out infinite;
}

.motion-leaf-rock::after,
.motion-bottle-rock::after {
  background:
    linear-gradient(100deg, transparent 20%, rgba(61, 107, 79, 0.08) 42%, transparent 58%),
    radial-gradient(circle at 78% 82%, rgba(42, 74, 53, 0.16), transparent 28%);
  opacity: 0.14;
  transform: translateX(-60%);
  animation: jadeSheen 7.4s ease-in-out infinite;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  background: var(--bg);
}

.menu-hero {
  min-height: 440px;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.48) contrast(1.12) brightness(0.58);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 17, 14, 0.06), rgba(12, 17, 14, 0.88) 68%, var(--bg)),
    linear-gradient(90deg, rgba(12, 17, 14, 0.92), rgba(12, 17, 14, 0.14));
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  min-height: inherit;
  max-width: 1040px;
  margin: 0 auto;
  padding: 112px 18px 28px;
}

.eyebrow,
.section-heading p,
.menu-card-kicker,
.quick-strip-head p {
  margin: 0;
  color: rgba(200, 206, 208, 0.78);
  font-family: var(--display-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13ch;
  margin: 8px 0 8px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.06;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.56);
}

.hero p:not(.eyebrow):not(.brand-subtitle) {
  max-width: 500px;
  margin: 0;
  color: rgba(244, 247, 245, 0.76);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Menu Tools (Chip Filtre) ────────────────────────────────────── */
.menu-tools {
  position: sticky;
  top: 64px;
  z-index: 30;
  padding: 0 16px;
  background: rgba(12, 17, 14, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar { display: none; }

.category-chip {
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--metal);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.category-chip.is-active,
.category-chip:hover {
  border-color: rgba(244, 247, 245, 0.38);
  background: rgba(244, 247, 245, 0.08);
  color: var(--white-metal);
}

/* ── Menu Body ───────────────────────────────────────────────────── */
.menu-body {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 88px;
}

.section-heading {
  margin: 32px 0 16px;
}

.section-heading h2 {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.12;
}

.section-heading p { margin-bottom: 4px; }

.section-summary {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 600px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

.menu-card {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(244, 247, 245, 0.028), transparent 42%), var(--panel);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.menu-card::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 8%, rgba(90, 138, 106, 0.04) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity 7.8s ease;
}

.menu-card-main {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-media) var(--radius-media) 0 0;
}

.menu-card-body {
  padding: 10px 10px 12px;
}

.menu-card-kicker { margin-bottom: 3px; }

.menu-card-name {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.18;
}

.menu-card-desc {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.menu-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.menu-card-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--white-metal);
}

.menu-card-price-draft {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}

/* Tag pill */
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }

.tag {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.tag-featured {
  border-color: rgba(244, 247, 245, 0.28);
  background: rgba(244, 247, 245, 0.06);
  color: var(--metal);
}

/* ── Media Badge ─────────────────────────────────────────────────── */
.media-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 8;
  max-width: calc(100% - 12px);
  padding: 3px 6px;
  border: 1px solid rgba(61, 107, 79, 0.16);
  border-radius: 999px;
  background: rgba(12, 17, 14, 0.76);
  color: rgba(238, 245, 236, 0.76);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* ── Dialog (Detay) ──────────────────────────────────────────────── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 17, 14, 0.86);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.dialog-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dialog {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 62;
  width: min(100%, 560px);
  max-height: 88svh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  transform: translate3d(-50%, 100%, 0);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
  pointer-events: none;
}

.dialog.is-open {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  pointer-events: auto;
}

.dialog-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: var(--panel);
}

.dialog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(0.92) contrast(1.06) brightness(0.88);
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(12, 17, 14, 0.72);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.dialog-body {
  padding: 20px 20px 40px;
}

.dialog-kicker { margin-bottom: 4px; }

.dialog-name {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.12;
}

.dialog-desc {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.dialog-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.dialog-price {
  font-size: 24px;
  font-weight: 600;
}

.dialog-price-unit {
  font-size: 13px;
  color: var(--muted);
}

.dialog-price-unit:empty { display: none; }

.dialog-tags { margin-top: 12px; }

/* ── Quick Strip ─────────────────────────────────────────────────── */
.quick-strip {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.quick-strip-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}

.quick-strip-head h3 {
  margin: 0;
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 700;
}

.quick-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.quick-row::-webkit-scrollbar { display: none; }

.quick-item {
  flex: 0 0 120px;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms ease;
}

.quick-item-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.quick-item-body {
  padding: 7px 8px 9px;
}

.quick-item-name {
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 2px;
}

.quick-item-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ── @keyframes ──────────────────────────────────────────────────── */
@keyframes plinthPulse {
  0%, 100% { opacity: 0.52; transform: scaleX(0.88); }
  50%       { opacity: 0.78; transform: scaleX(1.04); }
}

@keyframes orbitBreath {
  0%, 100% { opacity: 0.38; transform: rotate(-8deg) scaleX(0.92); }
  50%       { opacity: 0.62; transform: rotate(-6deg) scaleX(0.96); }
}

@keyframes matchaSteamRise {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  28%  { opacity: 0.22; }
  72%  { opacity: 0.14; transform: translateY(-18px) scaleX(1.08); }
  100% { opacity: 0; transform: translateY(-28px) scaleX(0.96); }
}

@keyframes matchaSteamColumnA {
  0%, 100% { opacity: 0; transform: translateY(0) scaleX(1); }
  30%       { opacity: 0.28; }
  65%       { opacity: 0.18; transform: translateY(-22px) scaleX(1.12); }
}

@keyframes matchaSteamColumnB {
  0%, 100% { opacity: 0; transform: translateY(0) scaleX(0.9); }
  35%       { opacity: 0.22; }
  68%       { opacity: 0.14; transform: translateY(-18px) scaleX(1.08); }
}

@keyframes greenDewDropA {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: 0.72; }
  68%  { opacity: 0.58; transform: translateY(28px); }
  82%  { opacity: 0; transform: translateY(36px); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes greenDewDropB {
  0%   { opacity: 0; transform: translateY(0); }
  9%   { opacity: 0.62; }
  64%  { opacity: 0.48; transform: translateY(22px); }
  78%  { opacity: 0; transform: translateY(30px); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes greenDewRun {
  0%   { opacity: 0; transform: translate3d(0, -16px, 0); }
  14%  { opacity: 0.82; }
  72%  { opacity: 0.52; transform: translate3d(0, 0, 0); }
  88%  { opacity: 0; transform: translate3d(0, 12px, 0); }
  100% { opacity: 0; transform: translate3d(0, -16px, 0); }
}

@keyframes layerShimmer {
  0%, 100% { opacity: 0; transform: translateX(-65%); }
  38%       { opacity: 0.22; transform: translateX(0); }
  68%       { opacity: 0.16; transform: translateX(40%); }
}

@keyframes jadeSheen {
  0%, 100% { opacity: 0; }
  42%       { opacity: 0.52; }
  68%       { opacity: 0.36; }
}

@keyframes leafDriftA {
  0%, 100% { opacity: 0.48; transform: translateY(0) rotate(0deg); }
  50%       { opacity: 0.72; transform: translateY(-6px) rotate(-4deg); }
}

@keyframes leafDriftB {
  0%, 100% { opacity: 0.44; transform: translateY(0) rotate(0deg); }
  50%       { opacity: 0.68; transform: translateY(-5px) rotate(3deg); }
}

@keyframes leafBurstA {
  0%, 72%, 100% { opacity: 0; }
  8%   { opacity: 0; transform: scale(0.6) rotate(0deg); }
  22%  { opacity: 0.82; transform: scale(1.0) rotate(12deg); }
  44%  { opacity: 0.62; transform: scale(1.08) rotate(22deg); }
  64%  { opacity: 0.18; transform: scale(1.16) rotate(30deg); }
}

@keyframes leafBurstB {
  0%, 74%, 100% { opacity: 0; }
  10%  { opacity: 0; transform: scale(0.6) rotate(0deg); }
  26%  { opacity: 0.74; transform: scale(0.96) rotate(-10deg); }
  48%  { opacity: 0.54; transform: scale(1.04) rotate(-18deg); }
  66%  { opacity: 0.16; transform: scale(1.12) rotate(-24deg); }
}

@keyframes bubbleRiseA {
  0%, 100% { opacity: 0; transform: translateY(0); }
  18%       { opacity: 0.58; }
  68%       { opacity: 0.38; transform: translateY(-12px); }
  84%       { opacity: 0; }
}

@keyframes bubbleRiseB {
  0%, 100% { opacity: 0; transform: translateY(0); }
  20%       { opacity: 0.52; }
  66%       { opacity: 0.32; transform: translateY(-10px); }
  82%       { opacity: 0; }
}

@keyframes frameLiveSheen {
  0%, 100% { opacity: 0.38; }
  48%       { opacity: 0.62; }
}

@keyframes introExit {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes introVideoSettle {
  0%   { transform: scale(1.035); filter: saturate(0.82) contrast(1.02) brightness(1.04); }
  100% { transform: scale(1.012); filter: saturate(0.88) contrast(1.06) brightness(0.96); }
}

@keyframes introCopyIn {
  0%   { opacity: 0; transform: translate3d(-50%, 16px, 0); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

@keyframes pageReveal {
  to { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   Production Hardening — Daniel's reuse katmanı (20260612a)
   ════════════════════════════════════════════════════════════════ */

/* Erişilebilirlik: klavye için görünür brass focus halkası */
.menu-card:focus-visible,
.category-chip:focus-visible,
.site-nav a:focus-visible,
.site-logo:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.dialog-close:focus-visible,
.info-list a:focus-visible,
.feature-tile:focus-visible,
.menu-fallback-retry:focus-visible {
  outline: 2px solid var(--jade-soft);
  outline-offset: 3px;
}

.menu-card:focus:not(:focus-visible),
.dialog-close:focus:not(:focus-visible) {
  outline: none;
}

/* Scroll-life: üst brass ilerleme çizgisi (JS rAF ile sürülür) */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 90;
  height: 2px;
  background: linear-gradient(90deg, var(--jade), var(--moss));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Tek seferlik giriş koreografisi — yalnız html.js-anim altında yaşar.
   JS kapalı/observer kurulamazsa js-anim düşer ve içerik koşulsuz görünür. */
html.js-anim .menu-card,
html.js-anim .section-heading {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--enter-delay, 0ms);
  will-change: opacity, transform;
}

html.js-anim .menu-card.has-entered,
html.js-anim .section-heading.has-entered {
  opacity: 1;
  transform: none;
}

/* Section numara dili (01 —) */
.section-number {
  margin-right: 6px;
  color: var(--jade-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Marka marquee */
.brand-marquee {
  margin: 6px 0 0;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}

.marquee-track span {
  flex: 0 0 auto;
  padding-right: 1.1em;
  color: rgba(200, 206, 208, 0.42);
  font-family: var(--display-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

/* Veri dayanıklılık fallback (beyaz ekran yerine) */
.menu-fallback {
  max-width: 520px;
  margin: 60px auto;
  padding: 30px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  text-align: center;
}

.menu-fallback-brand {
  margin: 0 0 10px;
  color: var(--jade-soft);
  font-family: var(--display-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-fallback h2 {
  margin: 0 0 8px;
  font-family: var(--display-font);
  font-size: 22px;
  font-weight: 600;
}

.menu-fallback p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.menu-fallback-retry {
  min-height: var(--touch-target);
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(244, 247, 245, 0.06);
  color: var(--ink);
  font-family: var(--display-font);
  font-weight: 600;
}

.menu-fallback-addr {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.8;
}

/* Dialog sürükleme tutamağı (swipe-to-dismiss affordance) */
.dialog-grip {
  display: flex;
  justify-content: center;
  padding: 9px 0 5px;
  background: var(--panel-2);
  border-radius: 16px 16px 0 0;
}

.dialog-grip::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(244, 247, 245, 0.28);
}

.dialog .dialog-media { border-radius: 0; }

/* noscript statik bilgi kartı */
.noscript-note {
  max-width: 560px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--ink);
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}

/* ── Responsive / Motion Preferences ────────────────────────────── */
@media (min-width: 720px) {
  .site-header {
    padding-right: 28px;
    padding-left: 28px;
  }

  .intro-wordmark strong {
    font-size: 104px;
  }

  .intro-wordmark span {
    font-size: 25px;
  }

  .venue-hero h1 {
    font-size: 96px;
  }

  .brand-title-compact {
    font-size: 78px;
  }

  .brand-subtitle {
    font-size: 14px;
  }

  .venue-lead {
    font-size: 18px;
  }

  .studio-grid,
  .location-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
  }

  .section-copy-block h2,
  .section-heading-row h2,
  .location-grid h2 {
    font-size: 42px;
  }

  .hero h1 {
    font-size: 68px;
  }

  .section-heading h2 {
    font-size: 32px;
  }

  .dialog-name {
    font-size: 36px;
  }
}

@media (max-width: 719px) {
  .site-header {
    gap: 8px;
  }

  .site-logo strong {
    font-size: 24px;
  }

  .site-nav a {
    padding: 0 8px;
    font-size: 12px;
  }

  .venue-hero {
    min-height: 88svh;
  }

  .venue-hero-photo {
    object-position: 52% 48%;
  }

  .venue-hero-content {
    padding-top: 96px;
  }

  .venue-meta {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .venue-meta-compact {
    grid-template-columns: 1fr;
  }

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

  .feature-tile {
    min-height: 210px;
  }

  .section-heading-row {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 480px) {
  .site-logo span {
    display: none;
  }

  .intro-wordmark {
    top: 23%;
  }

  .intro-wordmark strong {
    font-size: 74px;
  }

  .intro-wordmark span {
    font-size: 20px;
  }

  .venue-hero h1 {
    font-size: 54px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .brand-title-compact {
    font-size: 46px;
  }

  .menu-tools {
    padding: 0 10px;
  }

  .chip-row {
    gap: 6px;
  }

  .category-chip {
    padding: 0 12px;
    font-size: 12px;
  }

  .card-grid {
    gap: 10px;
  }

  .menu-card-name {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .matcha-intro {
    display: none;
  }

  .has-intro .site-header,
  .has-intro main {
    opacity: 1;
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .scroll-progress,
  .brand-marquee {
    display: none;
  }

  html.js-anim .menu-card,
  html.js-anim .section-heading {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}