@import url('fonts.css');

/* ============================================================
   Oxori No.7 — asırlık taş, meşe ve dövme bakır.
   Hiçbir yüzey pürüzsüz değil: taş kaba, ahşap damarlı,
   metal dövülmüş ve eskimiş.
   ============================================================ */

  :root {
  /* ANA RENK — logonun yeşili, eskitilmiş tonları */
  --green-ink: #141B16;      /* en koyu zemin */
  --green: #212C23;          /* ana bölüm zemini */
  --green-raise: #2E3B32;    /* logo yeşili — kart yüzeyi */
  --green-lite: #3C4C40;     /* kenar / vurgu */
  --moss: #4E6046;           /* yosun */

  /* Kahve — ahşap ve taş aksanı (ikincil) */
  --oak: #3A2B1D;
  --oak-deep: #241A11;
  --oak-lite: #4A3726;

  /* Dövme bakır & eskimiş altın */
  --copper: #A87833;
  --copper-lite: #D9AC63;
  --copper-deep: #5E4014;
  --brass-edge: #7C5A22;

  /* Parşömen */
  --parchment: #EAE0CC;
  --parchment-soft: #BDB49C;
  --parchment-mute: #8E8874;

  --ember: #A8451F;

  --shell: min(1180px, 92vw);
  --rail: clamp(1.25rem, 4vw, 3rem);

  --step--1: clamp(.78rem, .76rem + .1vw, .85rem);
  --step-0: clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + .34vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.36rem + .68vw, 2.1rem);
  --step-3: clamp(2rem, 1.68rem + 1.6vw, 3.2rem);
  --step-4: clamp(2.7rem, 1.9rem + 3.9vw, 5.6rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* Eskitme: ince çizikler (yaş) */
  --scratches:
    repeating-linear-gradient(64deg, transparent 0 7px, rgba(0,0,0,.16) 7px 8px, transparent 8px 19px),
    repeating-linear-gradient(-51deg, transparent 0 11px, rgba(233,220,195,.045) 11px 12px, transparent 12px 27px);
  /* Eskitme: kaba tane */
  --grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  /* Patina: bakırın yeşile dönmüş lekeleri */
  --patina:
    radial-gradient(38% 60% at 12% 78%, rgba(90, 122, 88, .45), transparent 68%),
    radial-gradient(30% 48% at 86% 22%, rgba(90, 122, 88, .36), transparent 70%),
    radial-gradient(22% 40% at 62% 88%, rgba(74, 104, 74, .3), transparent 72%);

  /* Ahşap damar dokusu */
  --grain:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.014) 2px 5px,
      rgba(0,0,0,.1) 5px 8px, rgba(255,255,255,.008) 8px 13px);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* Duvar TEK parça: sayfanın tamamı boyunca kesintisiz döşenir.
     Bölüm başına döşenirse her sınırda desen sıfırlanır ve kesik görünür. */
  background-color: var(--green-ink);
  background-image:
    linear-gradient(180deg, rgba(30, 41, 32, .62), rgba(19, 26, 20, .66)),
    url('wall.svg');
  background-blend-mode: multiply, normal;
  background-size: auto, 560px 420px;
  background-repeat: repeat, repeat;
  color: var(--parchment);
  font-family: 'Karla', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Kaba tane — eskitme */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--copper-lite);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-variation-settings: 'SOFT' 12, 'WONK' 1;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(233,220,195,.06);
}

p { margin: 0; }
/* Işık havuzunun üstünde kalsın diye konumlandırılmış */
.shell { width: var(--shell); margin-inline: auto; position: relative; z-index: 1; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--copper);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--parchment-soft); max-width: 46ch; }

/* ============ ATMOSFER ============
   Is, nem ve loş ışık tek bir sabit katmanda. Bölüm başına vinyet
   çizilirse her sınırda iki karartma üst üste biner ve bant oluşur;
   viewport'a sabitlenmiş tek katmanda dikiş yeri hiç yoktur. */
.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.atmos > span { position: absolute; inset: 0; display: block; }
.atmos__vignette {
  background:
    radial-gradient(78% 44% at 50% -8%, rgba(217, 172, 99, .14), transparent 64%),
    radial-gradient(118% 74% at 50% 42%, transparent 18%, rgba(9, 13, 10, .88) 100%);
}
/* Aşağı indikçe ateşin sıcaklığı yükselir (scroll ile açılır) */
.atmos__ember {
  opacity: 0;
  background:
    radial-gradient(78% 48% at 50% 110%, rgba(168, 69, 31, .3), transparent 66%),
    radial-gradient(96% 62% at 50% 104%, rgba(217, 172, 99, .14), transparent 72%);
}

/* ============ DÖVME BAKIR BUTON ============ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 2.1rem;
  border-radius: 2px;
  border: 1px solid var(--copper-deep);
  background:
    var(--grit),
    var(--scratches),
    var(--patina),
    linear-gradient(180deg, rgba(255,235,190,.16), rgba(0,0,0,.2)),
    linear-gradient(180deg, #A87833 0%, #8A6027 52%, #6E4A1C 100%);
  background-blend-mode: overlay, overlay, multiply, normal, normal;
  background-size: 160px 160px, auto, auto, auto, auto;
  color: #241708;
  font: 800 var(--step--1)/1 'Karla', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 225, 170, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 231, 183, .45),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    0 3px 0 #3A2710,
    0 8px 16px -8px rgba(0, 0, 0, .9);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .25s var(--ease);
}
/* köşe perçinleri */
.btn::before,
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #F0D9A6, #6B4A18 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.btn::before { left: .65rem; }
.btn::after { right: .65rem; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 2px 6px rgba(0,0,0,.55); }

/* İkincil: duvara vidalanmış demir levha */
.btn--ghost {
  background:
    var(--grit),
    var(--scratches),
    radial-gradient(40% 70% at 15% 80%, rgba(90, 122, 88, .3), transparent 70%),
    linear-gradient(180deg, rgba(233,220,195,.07), rgba(0,0,0,.3));
  background-blend-mode: overlay, overlay, multiply, normal;
  background-size: 160px 160px, auto, auto, auto;
  border: 1px solid var(--brass-edge);
  color: var(--copper-lite);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  box-shadow: inset 0 1px 0 rgba(233,220,195,.12), 0 3px 0 rgba(0,0,0,.5), 0 8px 16px -10px rgba(0,0,0,.9);
}
.btn--ghost:hover { background: linear-gradient(180deg, rgba(217,172,99,.16), rgba(0,0,0,.25)); }

/* ============ ÜST ÇUBUK — meşe kiriş ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .8rem var(--rail);
  background:
    var(--grit), var(--scratches),
    radial-gradient(55% 120% at 88% 100%, rgba(58, 43, 29, .35), transparent 70%),
    var(--grain),
    linear-gradient(180deg, #2F3D33, #1B241D);
  background-blend-mode: overlay, overlay, multiply, normal, normal;
  background-size: 160px 160px, auto, auto, auto, auto;
  border-bottom: 3px solid #0E140F;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.95), inset 0 1px 0 rgba(217,172,99,.16);
}
/* Kirişin alt kenarına gerilmiş bakır tel: okuma ilerlemesi */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--copper-deep), var(--copper-lite));
  box-shadow: 0 0 10px rgba(217, 172, 99, .5);
}
.topbar__mark { display: flex; align-items: center; text-decoration: none; }
.topbar__mark img { width: clamp(124px, 13vw, 156px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment-soft);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--copper-lite); }
.nav a.btn, .nav a.btn:hover { color: #241708; }
@media (max-width: 760px) { .nav .nav__link { display: none; } }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: min(92svh, 900px);
  padding-top: clamp(4.5rem, 10vh, 7rem);
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--rail) clamp(5rem, 11vh, 7rem);
  text-align: center;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(1.3rem, 3vh, 2rem); }

/* Rozet: bakır çemberle duvara asılı */
.hero__badge {
  width: clamp(150px, 22vw, 226px);
  height: auto;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(160deg, #C99B4E, #5E4014 55%, #8A6027);
  box-shadow:
    inset 0 2px 0 rgba(255, 231, 183, .25),
    0 26px 46px -18px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(0,0,0,.5);
}

.hero h1 { font-size: var(--step-4); font-variation-settings: 'SOFT' 20, 'WONK' 1; max-width: 16ch; }
.hero h1 em {
  font-style: normal;
  display: block;
  font-family: 'Yellowtail', cursive;
  font-weight: 400;
  font-size: .82em;
  line-height: 1.12;
  color: var(--copper-lite);
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}

.hero__sub { color: var(--parchment-soft); max-width: 34ch; font-size: var(--step-1); line-height: 1.5; }
.hero__en { font-size: var(--step--1); letter-spacing: .06em; color: var(--parchment-mute); font-style: italic; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.hero__scroll {
  position: absolute;
  bottom: 1.3rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  display: grid;
  justify-items: center;
  gap: .45rem;
}
.hero__scroll span { display: block; width: 1px; height: 28px; background: linear-gradient(var(--copper), transparent); }
@media (max-height: 780px), (max-width: 620px) { .hero__scroll { display: none; } }



/* ============ ASILI AMPULLER (Alaçatı vibe) ============
   Sarkık telde sıcak ampuller. Gerçek katman olarak eklenir ki
   bölümlerin taş duvar arka planıyla çakışmasın. */
.lit { position: relative; }
.lights {
  position: absolute;
  left: -24px;
  right: -24px;
  height: 96px;
  z-index: 0;
  pointer-events: none;
  background: url('lights.svg') repeat-x center top;
  background-size: 360px 96px;
  filter: drop-shadow(0 6px 16px rgba(255, 190, 90, .28));
  transform-origin: top center;
  animation: sway 7s ease-in-out infinite;
}
/* Ampullerin duvara döktüğü sıcak ışık havuzu — bölüm sınırını
   sert bir çizgi yerine yumuşak bir aydınlıkla işaretler. */
.lights::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  height: 300px;
  background: radial-gradient(56% 100% at 50% 0%, rgba(240, 192, 112, .13), transparent 74%);
  animation: pool 6.5s ease-in-out infinite;
}
.lights--top { top: -4px; }
.lights--mid { top: 46%; opacity: .5; background-size: 300px 80px; animation-duration: 9s; animation-direction: reverse; }
.lights--low { bottom: 6%; opacity: .62; background-size: 320px 86px; animation-duration: 8s; animation-direction: reverse; }
.lights--low::after { display: none; }

@keyframes sway {
  0%, 100% { transform: rotate(-.22deg) translateY(0); }
  50%      { transform: rotate(.22deg) translateY(2px); }
}
@keyframes pool {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lights, .lights::after { animation: none; }
}

/* ============ DUVARA ASILI ÇERÇEVE (ortak dil) ============
   Her kart bir tablo: bakır çerçeve, pasparta derinliği,
   üstünde çivi ve gergin tel, duvara düşen sert gölge. */
.hung {
  position: relative;
  padding: 13px;
  margin-top: 26px;
  border: 1px solid var(--oak-deep);
  background:
    var(--grit),
    var(--scratches),
    linear-gradient(148deg, #C9A45B 0%, #6B4A18 34%, #A87833 62%, #52380F 100%);
  background-blend-mode: overlay, overlay, normal;
  background-size: 160px 160px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 186, .35),
    0 26px 40px -24px rgba(0, 0, 0, .98),
    0 6px 14px -8px rgba(0, 0, 0, .8);
  rotate: var(--tilt, 0deg);
}
/* çivi + tel */
.hung::before {
  content: '';
  position: absolute;
  top: -29px;
  left: 50%;
  translate: -50% 0;
  width: 110px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27110%27%20height%3D%2734%27%3E%3Cpath%20d%3D%27M55%207%20L10%2030%20M55%207%20L100%2030%27%20stroke%3D%27%25238A6E3E%27%20stroke-width%3D%271.8%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.95%27%2F%3E%3Cpath%20d%3D%27M55%207%20L10%2030%20M55%207%20L100%2030%27%20stroke%3D%27%2523000000%27%20stroke-width%3D%27.6%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.5%27%20transform%3D%27translate%280%2C1.4%29%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%277%27%20r%3D%275%27%20fill%3D%27%2523241A0E%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%276.4%27%20r%3D%274%27%20fill%3D%27%2523C9A45B%27%2F%3E%3Ccircle%20cx%3D%2753.8%27%20cy%3D%275.2%27%20r%3D%271.5%27%20fill%3D%27%2523F6E7BE%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  pointer-events: none;
}
/* pasparta: içerideki koyu yeşil alan */
.hung__mat {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background:
    var(--grit),
    var(--scratches),
    radial-gradient(60% 80% at 88% 92%, rgba(58, 43, 29, .38), transparent 72%),
    linear-gradient(180deg, #2F3D33 0%, #26312A 58%, #1D2620 100%);
  background-blend-mode: overlay, overlay, multiply, normal;
  background-size: 160px 160px, auto, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(201, 164, 91, .32),
    inset 0 0 30px rgba(0, 0, 0, .65);
}
.hung:nth-of-type(3n+1) { --tilt: -.5deg; }
.hung:nth-of-type(3n+2) { --tilt: .45deg; }
.hung:nth-of-type(3n+3) { --tilt: -.35deg; }

/* Video tablosu — dikey portre */
.reel { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .reel { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } }
.reel__frame { max-width: 420px; width: 100%; justify-self: center; }
.reel__frame video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #131A15; }
.reel__plate {
  margin-top: .9rem;
  text-align: center;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #2A1F10;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 232, 186, .4);
}
.reel__body { display: grid; gap: 1.1rem; }
.reel__body p { color: var(--parchment-soft); max-width: 52ch; }
.reel__sound { align-self: start; justify-self: start; cursor: pointer; }

/* ============ BÖLÜMLER ============ */
.section { padding: clamp(4rem, 11vh, 8rem) var(--rail); position: relative; }
.section__head { display: grid; gap: .8rem; margin-bottom: clamp(2.2rem, 5vh, 3.4rem); max-width: 54ch; }
.section__head h2 { font-size: var(--step-3); }

.rule { height: 2px; background: linear-gradient(90deg, var(--brass-edge), transparent); }
.flourish { display: block; width: min(280px, 62%); height: 12px; color: var(--copper); opacity: .85; }

/* ============ HİKAYE ============ */
.story { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .story { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.story__body { display: grid; gap: 1.15rem; }
.story__body p { color: var(--parchment-soft); max-width: 58ch; }
.story__body strong { color: var(--parchment); font-weight: 700; }

/* Duvara asılı tablolar sütunu */
.pillars { display: grid; gap: clamp(1.8rem, 3.4vw, 2.6rem); }


/* ============ TARİHİ FOTOĞRAF + KÜNYE ============
   Sararmış bir sepya baskı, altında daktiloyla yazılmış müze künyesi. */
.plate { margin: 26px 0 0; display: block; }
.plate__photo {
  position: relative;
  display: grid;
  align-content: end;
  gap: .3rem;
  min-height: clamp(178px, 24vw, 214px);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  overflow: hidden;
  /* Sararmış baskı: sepya zemin + tane + köşe kararması */
  background:
    var(--grit),
    radial-gradient(120% 100% at 50% 40%, rgba(214, 186, 132, .16), transparent 62%),
    radial-gradient(140% 110% at 50% 50%, transparent 34%, rgba(26, 18, 10, .85) 100%),
    linear-gradient(168deg, #6A5A41 0%, #4C4030 42%, #33291D 100%);
  background-blend-mode: overlay, screen, multiply, normal;
  background-size: 160px 160px, auto, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(20, 14, 8, .8), inset 0 0 44px rgba(24, 16, 8, .6);
  filter: sepia(.28) contrast(1.02);
}
/* baskı üstündeki çizik ve leke izleri */
.plate__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: var(--scratches);
}
/* Karikatür sahne: baskının içindeki çizim */
.plate__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
  mix-blend-mode: luminosity;
}
/* çizimin üstünde metnin okunması için alttan karartma */
.plate__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,18,10,.1) 30%, rgba(20,13,7,.86) 100%);
  pointer-events: none;
}
.plate__no {
  position: relative;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .3em;
  color: #E7D7B2;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
.plate__photo h3 {
  position: relative;
  font-size: var(--step-2);
  color: #F4E9D2;
  text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 1px 0 rgba(0,0,0,.6);
}
/* Künye: parşömen şerit, daktilo hissi */
.plate__label {
  padding: .85rem 1rem .9rem;
  background:
    var(--grit),
    linear-gradient(180deg, #E3D6B6, #CFBF9B);
  background-blend-mode: multiply, normal;
  background-size: 160px 160px, auto;
  color: #3A2C18;
  font-size: .82rem;
  line-height: 1.5;
  font-style: italic;
  text-align: center;
  border-top: 1px solid rgba(20, 14, 8, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* ============ MENÜ — dövme çerçeveli tabela ============ */
.menu__board {
  position: relative;
  padding: 13px;
  border: 2px solid #100B06;
  background:
    var(--grit), var(--scratches),
    radial-gradient(40% 60% at 8% 92%, rgba(58, 43, 29, .4), transparent 70%),
    radial-gradient(34% 50% at 94% 8%, rgba(120, 150, 118, .12), transparent 72%),
    var(--grain),
    linear-gradient(180deg, #2C3A2F 0%, #26312800 58%, #1D2620 100%),
    linear-gradient(180deg, #2C3A2F, #1D2620);
  background-blend-mode: overlay, overlay, multiply, multiply, normal, normal, normal;
  background-size: 160px 160px, auto, auto, auto, auto, auto, auto;
  box-shadow:
    inset 0 0 0 2px var(--brass-edge),
    inset 0 0 0 3px rgba(0,0,0,.55),
    inset 0 0 80px rgba(0, 0, 0, .6),
    0 22px 44px -26px rgba(0, 0, 0, .95);
}
.menu__board:not(.hung)::before,
.menu__board:not(.hung)::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #EBD3A0, #4A3212 72%);
  box-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.menu__board::before { top: 11px; left: 11px; }
.menu__board::after { bottom: 11px; right: 11px; }

.menu__grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 860px) { .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu__cat { display: grid; gap: 1rem; align-content: start; }
.menu__cat h3 { font-size: var(--step-2); }
.menu__cat > .rule { margin-top: -.35rem; }
.menu__item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .35rem 1rem; padding: .55rem 0; }
.menu__item + .menu__item { border-top: 1px dashed rgba(168, 120, 51, .3); }
.menu__name { font-family: 'Fraunces', serif; font-weight: 600; font-size: var(--step-1); font-variation-settings: 'SOFT' 10; }
.menu__price { font-weight: 800; color: var(--copper-lite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__desc { grid-column: 1 / -1; font-size: var(--step--1); color: var(--parchment-mute); line-height: 1.55; max-width: 52ch; }

.menu__state { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.4rem, 3vw, 2rem); border: 1px dashed rgba(168,120,51,.45); background: rgba(20, 14, 9, .45); }
.menu__state p { color: var(--parchment-soft); max-width: 50ch; }

.skeleton { display: grid; gap: .85rem; }
.skeleton div { height: 13px; background: linear-gradient(90deg, rgba(168,120,51,.1), rgba(168,120,51,.22), rgba(168,120,51,.1)); background-size: 200% 100%; animation: shimmer 1.7s infinite linear; }
.skeleton div:nth-child(2n) { width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton div { animation: none; } }

/* ============ GALERİ — eski çerçeveli duvar resimleri ============ */
.gallery { display: grid; gap: clamp(1rem, 2.5vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery figure {
  position: relative;
  margin: 0;
  padding: 14px;
  border: 1px solid #120C07;
  background: linear-gradient(160deg, #C99B4E, #5E4014 48%, #8A6027);
  box-shadow: 0 22px 40px -24px rgba(0,0,0,.95);
  rotate: var(--tilt, 0deg);
}
.gallery figure:nth-child(3n+1) { --tilt: -.7deg; }
.gallery figure:nth-child(3n+3) { --tilt: .8deg; }
.gallery figure::after {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  box-shadow: inset 0 0 26px rgba(0,0,0,.7), inset 0 0 0 2px rgba(20,14,9,.85);
}
.gallery img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  filter: sepia(.34) saturate(.85) contrast(1.05) brightness(.95);
  transition: filter .8s var(--ease);
}
.gallery figure:hover img { filter: sepia(.12) saturate(1) contrast(1.06) brightness(1); }

/* ============ ZİYARET ============ */
.visit { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 720px) { .visit { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.visit__card {
  position: relative;
  padding: 13px;
  border: 1px solid #150E08;
  background:
    var(--grit), var(--scratches),
    radial-gradient(45% 65% at 92% 88%, rgba(58, 43, 29, .35), transparent 72%),
    var(--grain),
    linear-gradient(180deg, #334136 0%, #2A362C 55%, #202A22 100%);
  background-blend-mode: overlay, overlay, multiply, normal, normal;
  background-size: 160px 160px, auto, auto, auto, auto;
  box-shadow: inset 0 1px 0 rgba(217,172,99,.18), 0 14px 26px -16px rgba(0,0,0,.95);
}
.visit__card:not(.hung)::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(168, 120, 51, .28);
  pointer-events: none;
}
.visit__card h3 { font-size: var(--step-1); font-weight: 700; }
.visit__card p, .visit__card li { color: var(--parchment-soft); }
.visit__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.visit__card li { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.visit__card li span:last-child { color: var(--parchment); font-weight: 700; }
.visit__card a { color: var(--copper-lite); text-decoration: none; border-bottom: 1px solid rgba(217,172,99,.35); }
.visit__card a:hover { border-bottom-color: var(--copper-lite); }

/* ============ SİPARİŞ BANDI + FOOTER ============ */
.strip {
  position: relative;
  padding: clamp(4rem, 10vh, 6.5rem) var(--rail);
  text-align: center;
  display: grid;
  gap: 1.3rem;
  justify-items: center;
}
/* Meşe panel, kenarlarında duvara karışır: sert çizgi yerine erime. */
.strip::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--grit), var(--scratches),
    radial-gradient(55% 70% at 12% 15%, rgba(58, 43, 29, .32), transparent 70%),
    radial-gradient(60% 100% at 50% 100%, rgba(168, 69, 31, .22), transparent 65%),
    var(--grain),
    linear-gradient(180deg, #27332A 0%, #202A22 50%, #161E18 100%);
  background-blend-mode: overlay, overlay, multiply, screen, normal, normal;
  background-size: 160px 160px, auto, auto, auto, auto, auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 86%, transparent 100%);
}
/* Panelin üst kenarında ince bakır ışık — iki uçta söner */
.strip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(217, 172, 99, .34), transparent);
}
.strip > * { position: relative; z-index: 1; }
.strip h2 { font-size: var(--step-3); max-width: 18ch; }

.footer {
  position: relative;
  padding: 3.2rem var(--rail) 3rem;
  display: grid;
  gap: 1.3rem;
  justify-items: center;
  text-align: center;
  background:
    var(--grit),
    radial-gradient(60% 80% at 50% 0%, rgba(120, 150, 118, .1), transparent 70%),
    linear-gradient(180deg, rgba(26, 35, 28, 0) 0%, rgba(23, 31, 24, .88) 26%, #101710 100%);
  background-blend-mode: overlay, multiply, normal;
  background-size: 160px 160px, auto, auto;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 172, 99, .3), transparent);
}
.footer > img { width: clamp(150px, 18vw, 190px); height: auto; opacity: .9; }
.footer__meta { font-size: var(--step--1); color: var(--parchment-mute); display: grid; gap: .3rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; }
.footer__links a { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--parchment-soft); }
.footer__links a:hover { color: var(--copper-lite); }

/* Mobil sabit çubuk — demir ray */
.dock {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: .85rem;
  translate: -50% 0;
  display: none;
  gap: .55rem;
  padding: .5rem;
  border: 1px solid #120C07;
  background:
    var(--grit), var(--grain),
    linear-gradient(180deg, #2E3B32, #1A231C);
  background-blend-mode: overlay, normal, normal;
  background-size: 160px 160px, auto, auto;
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.95), inset 0 1px 0 rgba(217,172,99,.16);
}
.dock .btn { padding: .78rem 1.15rem; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; }
.dock .btn::before, .dock .btn::after { display: none; }
@media (max-width: 760px) { .dock { display: flex; } .footer { padding-bottom: 6rem; } }

/* ============ AÇILIŞ ============
   Sayfa açılırken mekânın ışıkları yanar: karanlık duvar aydınlanır,
   rozet ve başlık sırayla yerine gelir. Tek seferlik, ~1 saniye. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero { animation: roomLightUp 1s var(--ease-out-quart) backwards; }
  .js .hero__badge { animation: badgeIn .95s var(--ease-out-expo) .05s backwards; }
  .js .hero h1 { animation: heroRise .9s var(--ease-out-expo) .16s backwards; }
  .js .hero__sub { animation: heroRise .9s var(--ease-out-expo) .26s backwards; }
  .js .hero__en { animation: heroRise .9s var(--ease-out-expo) .34s backwards; }
  .js .hero__cta { animation: heroRise .9s var(--ease-out-expo) .42s backwards; }
}
@keyframes roomLightUp { from { filter: brightness(.32) saturate(.55); } }
@keyframes badgeIn { from { opacity: 0; transform: scale(.92) translate3d(0, 12px, 0); } }
@keyframes heroRise { from { opacity: 0; transform: translate3d(0, 20px, 0); } }

/* ============ GİRİŞ HAREKETİ ============
   Gizleme yalnız JS varken uygulanır: script çalışmazsa (veya tarayıcı
   observer'ı hiç tetiklemezse) içerik zaten görünür durumda kalır. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity .7s var(--ease-out-quart) var(--rd, 0ms),
    transform .85s var(--ease-out-expo) var(--rd, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Duvara asılan tablo: bir tık yukarıdan, fazladan eğik gelir ve yerine oturur.
   Bileşenin kendi gölgesine dokunulmaz; hareket yalnız konum ve açıyla. */
.js .hung.reveal {
  transform: translate3d(0, -14px, 0) scale(.985);
  rotate: calc(var(--tilt, 0deg) - 1.6deg);
  transition:
    opacity .6s var(--ease-out-quart) var(--rd, 0ms),
    transform .95s var(--ease-out-expo) var(--rd, 0ms),
    rotate 1.15s var(--ease-out-expo) var(--rd, 0ms);
}
.js .hung.reveal.is-in {
  opacity: 1;
  transform: none;
  rotate: var(--tilt, 0deg);
}

/* Süsleme: ortadaki taştan dışarı doğru çizilir. */
.js .flourish__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out-expo) .18s;
}
.js .flourish__left { stroke-dashoffset: -1; }
.js .reveal.is-in .flourish__draw { stroke-dashoffset: 0; }
.js .flourish__gem { opacity: 0; transition: opacity .5s var(--ease) .1s; }
.js .reveal.is-in .flourish__gem { opacity: 1; }

/* Menü kasadan geldiğinde kategoriler sırayla düşer. */
.menu__cat { animation: menuIn .7s var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes menuIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .hung.reveal { opacity: 1; transform: none; rotate: var(--tilt, 0deg); transition: none; }
  .js .flourish__draw { stroke-dashoffset: 0; transition: none; }
  .js .flourish__gem { opacity: 1; }
  .menu__cat { animation: none; }
}

/* ============ SCROLL'A BAĞLI İLERLEME ============
   Destekleyen tarayıcılarda sayfa indikçe ateş ısınır, hero geride
   kalır, üst kirişte bakır bir ilerleme teli dolar. Desteklemeyende
   hiçbiri görünmez; sayfa aynı şekilde çalışır. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .atmos__ember {
      animation: emberRise linear both;
      animation-timeline: scroll(root block);
      animation-range: 12vh 100%;
    }
    @keyframes emberRise { to { opacity: 1; } }

    .topbar::after {
      animation: railFill linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes railFill { to { transform: scaleX(1); } }

    .hero__inner {
      animation: heroSink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 80vh;
    }
    @keyframes heroSink { to { transform: translate3d(0, -42px, 0); opacity: .28; } }

    .hero__scroll {
      animation: heroHint linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 24vh;
    }
    @keyframes heroHint { to { opacity: 0; } }
  }
}

.hidden { display: none !important; }

/* İç pasparta düzeni */

.visit__card .hung__mat { display: grid; gap: .75rem; align-content: start; }
.menu__board .hung__mat { padding: clamp(1.5rem, 3.5vw, 2.6rem); }

/* Hikâye metni — açılış cümlesi ve imza */
.story__lead {
  font-family: 'Fraunces', serif;
  font-size: var(--step-2);
  font-variation-settings: 'SOFT' 24, 'WONK' 1;
  line-height: 1.22;
  color: var(--parchment);
  text-wrap: balance;
  margin-bottom: .4rem;
}
.story__sign {
  margin-top: .6rem;
  align-self: start;
  justify-self: start;
  padding: .6rem 1.1rem;
  background: linear-gradient(180deg, #E3D6B6, #CFBF9B);
  color: #3A2C18;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid rgba(20,14,8,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -14px rgba(0,0,0,.9);
  rotate: -.6deg;
}
.story__body { align-content: start; }