/* Şahin Islama Köfte — derlenmiş stil katmanları: 00-fonts.css, 01-tokens.css, 02-base.css, 03-components.css, 04-header.css, 05-hero.css, 06-values.css, 07-story.css, 08-menu.css, 09-contact.css, 10-footer.css, 11-responsive.css, 12-duyuru.css, 13-sayfalar.css, 14-whatsapp.css, 15-tam-site.css */

/* ===== 00-fonts.css ===== */
/* ==================================================================
   TİPOGRAFİ — kendi sunucumuzda barındırılan fontlar
   Fraunces (sıcak, yumuşak serif — başlıklar, fiyatlar, vurgular)
   Bricolage Grotesque (karakterli grotesk — metin, menü, butonlar).
   Eksenler sabitlendi (SOFT 100; italikte WONK 1), Türkçe için alt küme
   alındı: tüm aile ~185 KB. Üçüncü taraf isteği yok.
   Lisans: SIL Open Font License 1.1 (ikisi de).
   ================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/fraunces.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-2193, U+2122, U+2212, U+20AC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/fraunces-ext.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-2193, U+2122, U+2212, U+20AC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("fonts/fraunces-italic-ext.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/bricolage.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2190-2193, U+2122, U+2212, U+20AC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/bricolage-ext.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}


/* ===== 01-tokens.css ===== */
/* ==================================================================
   TASARIM SİSTEMİ — renk, tipografi, boşluk ve yüzey belirteçleri
   Tüm değerler referans tasarımdan ölçülerek türetilmiştir (1440px kanvas).
   ================================================================== */

:root {
  /* --- yüzeyler --------------------------------------------------- */
  --bg: #0b0b0d;
  --bg-strip: #111114;
  --bg-story: #08080a;
  --bg-menu: #151517;
  --bg-contact: #0c0c0e;
  --bg-footer: #0d0d0f;
  --surface: #17171a;
  --surface-warm: #171512;

  /* --- metin ------------------------------------------------------ */
  --text: #f2f0eb;
  --text-2: #a6a3a0;
  --muted: #68666a;

  /* --- sıcak altın aksan (ölçülü kullanılır) ---------------------- */
  --gold: #d9b87c;
  --gold-soft: #e9d7ac;
  --gold-cream: #f0e4c4;
  --gold-deep: #a98351;
  --gold-fill: #ab8552;
  --gold-fill-hi: #c19a63;
  --gold-line: rgba(217, 184, 124, 0.42);

  /* --- çizgiler / gölgeler ---------------------------------------- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 18px 40px -28px rgba(0, 0, 0, 0.9);

  /* --- tipografi --------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-h2: clamp(1.5rem, 2.42vw, 2.125rem); /* 24 → 34 */
  --fs-h3: clamp(1.0625rem, 1.3vw, 1.125rem); /* 17 → 18 */
  --fs-eyebrow: clamp(0.8125rem, 1.05vw, 0.9375rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-nav: 0.875rem;
  --fs-btn: 0.7813rem;

  /* --- yerleşim ---------------------------------------------------- */
  --gutter: 24px;
  --container: 1200px;
  --container-wide: 1280px;
  --header-h: 116px;


  /* --- hareket ----------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 56px; }
}
@media (min-width: 1360px) {
  :root { --gutter: 80px; }
}


/* ===== 02-base.css ===== */
/* ==================================================================
   TEMEL — reset, tipografi tabanı, yardımcı sınıflar
   ================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(217, 184, 124, 0.28); color: #fff; }

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

/* --- yerleşim yardımcıları ---------------------------------------- */
.container      { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.container-wide { width: min(var(--container-wide), 100% - var(--gutter) * 2); margin-inline: auto; }

.u-br-lg { display: none; }
@media (min-width: 901px) { .u-br-lg { display: inline; } }

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

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 18px; background: var(--gold-fill); color: #17120a;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- ortak tipografi ---------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  font-style: italic;
}
.eyebrow--gold { color: var(--gold); }

.section-head { text-align: center; }
.section-head__title {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--text);
}

/* --- görünürlük animasyonu ---------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== 03-components.css ===== */
/* ==================================================================
   BİLEŞENLER — logo, butonlar
   ================================================================== */

/* --- LOGO ----------------------------------------------------------
   Şahin logosu: "Şahın" yazısı + ı'nın noktası köz alevi + ISLAMA KÖFTE.
   Vektör (src/assets/logo/), yazılar yola çevrilmiş — font yüklenmesini
   beklemez, her ekranda aynı görünür. Yükseklik --logo-h ile ayarlanır. */
.logo { display: inline-flex; align-items: center; line-height: 0; --logo-h: 62px; }
.logo svg { display: block; height: var(--logo-h); width: auto; overflow: visible; }
.logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.logo--footer { --logo-h: 92px; }

/* --- BUTONLAR ------------------------------------------------------ */
.btn {
  --btn-h: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--btn-h);
  padding: 0 33px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-fill-hi) 0%, var(--gold-fill) 55%, #9c7846 100%);
  color: #150f07;
  border-color: rgba(255, 240, 210, 0.18);
}
.btn--gold:hover { background: linear-gradient(180deg, #d0a96f 0%, #b8945e 55%, #a88451 100%); }

.btn--outline {
  border-color: var(--gold-line);
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.015);
}
.btn--outline:hover {
  border-color: var(--gold);
  background: rgba(217, 184, 124, 0.09);
  color: #f4e6c8;
}

.btn--sm { --btn-h: 46px; padding: 0 32px; font-size: 0.7813rem; letter-spacing: 0.115em; }
.btn--block { width: 100%; }

.btn__icon { display: inline-flex; color: var(--gold); }
.btn__icon svg { width: 16px; height: 16px; }
.btn--gold .btn__icon { color: inherit; }


/* ===== 04-header.css ===== */
/* ==================================================================
   HEADER + MOBİL MENÜ
   ================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height 0.35s var(--ease), background-color 0.35s var(--ease),
              border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0.55) 0%, rgba(5, 5, 6, 0) 100%);
  opacity: 1;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.site-header.is-scrolled {
  height: 92px;
  background: rgba(10, 10, 12, 0.92);
  border-bottom-color: var(--border);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header.is-scrolled::before { opacity: 0; }

.site-header__inner {
  position: relative;
  height: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* --- masaüstü navigasyon ------------------------------------------ */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 33px; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;   /* "Ana Sayfa" iki satıra bölünmesin */
  color: rgba(242, 240, 235, 0.92);
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover { color: var(--gold-soft); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold); }

/* --- sağ blok ------------------------------------------------------ */
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav + .site-header__actions { margin-left: clamp(24px, 4.7vw, 68px); }

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;   /* numara iki satıra bölünmesin */
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.045em;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.site-header__phone:hover { color: var(--gold-soft); }
.site-header__phone-icon { display: inline-flex; flex: 0 0 auto; color: var(--gold); }
.site-header__phone-icon svg { width: 16px; height: 16px; }

/* --- hamburger ----------------------------------------------------- */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
}
.menu-toggle__box { position: relative; display: block; width: 22px; height: 12px; }
.menu-toggle__box::before,
.menu-toggle__box::after,
.menu-toggle__bar {
  content: "";
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: var(--gold-soft);
  transition: transform 0.32s var(--ease), opacity 0.2s var(--ease), width 0.32s var(--ease);
}
.menu-toggle__box::before { top: 0; }
.menu-toggle__bar { top: 50%; width: 16px; }
.menu-toggle__box::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__box::before { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__box::after { transform: translateY(-5.5px) rotate(-45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar { opacity: 0; width: 0; }

/* --- mobil menü ----------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(8, 8, 10, 0.985);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; }

.mobile-nav__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
}
.mobile-nav__list { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  opacity: 0;
  transform: translateY(12px);
}
.mobile-nav.is-open .mobile-nav__link {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.mobile-nav__link::after { display: none; }
.mobile-nav__footer { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav__hours {
  margin-top: 6px;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

body.is-locked { overflow: hidden; }


/* ===== 05-hero.css ===== */
/* ==================================================================
   AÇILIŞ — editoryal bölünmüş düzen
   Solda düz zeminde başlık ve gerçek bilgiler; sağda çerçeveli, kendi
   çözünürlüğünde gösterilen ürün fotoğrafı. Fotoğraf asla büyütülmez,
   metin asla fotoğrafın üstüne binmez.
   ================================================================== */

.acilis {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 28px) 0 72px;
  background: #0a0908;
}

/* sıcak köz ışığı — fotoğrafın arkasında, çok hafif */
.acilis__isik {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 74% 46%, rgba(201, 122, 54, 0.17), rgba(201, 122, 54, 0) 70%),
    radial-gradient(30% 40% at 8% 96%, rgba(217, 184, 124, 0.07), rgba(217, 184, 124, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35) 100%);
}

.acilis__ic {
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: clamp(560px, calc(100svh - var(--header-h) - 110px), 700px);
}

/* ---------------- metin ------------------------------------------- */
.acilis__ust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.acilis__ust-cizgi { width: 44px; height: 1px; background: var(--gold); flex: 0 0 auto; }

.acilis__baslik { margin: 26px 0 0; font-family: var(--font-display); font-weight: 400; }
.acilis__baslik-ince {
  display: block;
  margin-bottom: 8px;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.625rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--gold-soft);
}
.acilis__baslik-buyuk {
  display: block;
  font-weight: 800;
  font-size: clamp(3.75rem, 7.6vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fbf8f1;
}

.acilis__baslik-buyuk em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.acilis__yazi {
  margin: 28px 0 0;
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #bdb8b1;
}

.acilis__eylem { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* kanıt satırı: puan · porsiyon · saat */
.acilis__kanit {
  display: flex;
  flex-wrap: nowrap;
  margin: 46px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.acilis__kanit-oge { padding: 0 30px; border-left: 1px solid var(--border); }
.acilis__kanit-oge:first-child { padding-left: 0; border-left: 0; }
.acilis__kanit-deger {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: lining-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.acilis__kanit-deger .puan__yildiz { width: 20px; height: 20px; color: var(--gold); }
.acilis__kanit-etiket { margin: 9px 0 0; font-size: 0.8125rem; color: var(--text-2); }
.acilis__kanit-etiket a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); transition: color .25s var(--ease), border-color .25s var(--ease); }
.acilis__kanit-etiket a:hover { color: var(--gold-cream); border-bottom-color: var(--gold-line); }
.acilis .acik-rozet--sade { display: inline-flex; margin: 0; padding: 0; border: 0; border-radius: 0; font-size: inherit; color: inherit; }
.acilis .acik-rozet--sade[hidden] { display: none; }
.acik-rozet:not([hidden]) + .acilis__kanit-yedek { display: none; }

/* ---------------- sahne ------------------------------------------- */
.acilis__sahne {
  position: relative;
  display: grid;
  justify-items: end;
  padding-left: 12%;
}

.acilis__cerceve {
  position: relative;
  z-index: 1;
  width: min(100%, clamp(400px, 31vw, 520px));
  aspect-ratio: 4 / 5;
}
/* altın ofset çerçeve */
.acilis__cerceve::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-line);
  pointer-events: none;
}

.acilis__kareler {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #15130f;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
}
.acilis__kare { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.acilis__kare.is-active { opacity: 1; }
.acilis__kare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--odak, 50% 50%);
  transform: scale(1.07);
  transition: transform 8s linear;
}
.acilis__kare.is-active img { transform: scale(1); }

/* fiyat etiketi — çerçevenin sağ kenarından taşar */
.acilis__etiketler { position: absolute; z-index: 2; right: -26px; bottom: 40px; }
.acilis__etiket {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 20px 13px 18px;
  white-space: nowrap;
  background: #0a0908;
  border-right: 2px solid var(--gold);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.acilis__etiket.is-active { opacity: 1; transform: none; transition-delay: 0.35s; }
.acilis__etiket-ad { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-cream); }
.acilis__etiket-fiyat { font-family: var(--font-display); font-size: 1.375rem; line-height: 1; color: var(--gold); font-weight: 700; }

/* döner damga */
.acilis__damga { position: absolute; z-index: 3; top: -46px; right: -46px; width: 124px; height: 124px; overflow: visible; }
.acilis__damga-zemin { fill: #0a0908; stroke: var(--gold-line); stroke-width: 1; }
.acilis__damga-yazi {
  transform-origin: 60px 60px;
  animation: acilis-don 36s linear infinite;
  font-family: var(--font-sans);
  font-size: 9.2px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--gold);
}
.acilis__damga-alev { fill: var(--gold); }
@keyframes acilis-don { to { transform: rotate(360deg); } }

/* mekân fotoğrafı */
.acilis__mekan {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 118px;
  width: 36%;
  max-width: 236px;
  margin: 0;
  padding: 6px 6px 0;
  background: #0a0908;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}
.acilis__mekan img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.acilis__mekan figcaption {
  padding: 9px 4px 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* slayt seçici */
.acilis__secici {
  width: min(100%, clamp(400px, 31vw, 520px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.acilis__secim {
  display: grid;
  gap: 4px;
  padding: 0;
  text-align: left;
  color: var(--text-2);
  transition: color .3s var(--ease);
}
.acilis__secim:hover, .acilis__secim.is-active { color: var(--text); }
.acilis__secim:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.acilis__secim-no { font-family: var(--font-display); font-size: 0.875rem; color: var(--gold); }
.acilis__secim-ad { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acilis__secim-cubuk { position: relative; height: 2px; margin-top: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.acilis__secim-cubuk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.acilis__secim.is-active .acilis__secim-cubuk::after { transform: scaleX(1); }
.acilis.is-oynuyor .acilis__secim.is-active .acilis__secim-cubuk::after { animation: acilis-dolum var(--sure, 6.5s) linear forwards; }
@keyframes acilis-dolum { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ilk açılış: yumuşak giriş */
.js .acilis__metin > *, .js .acilis__sahne { opacity: 0; transform: translateY(14px); animation: acilis-gir 0.9s var(--ease) forwards; }
.js .acilis__metin > :nth-child(2) { animation-delay: 0.08s; }
.js .acilis__metin > :nth-child(3) { animation-delay: 0.16s; }
.js .acilis__metin > :nth-child(4) { animation-delay: 0.24s; }
.js .acilis__metin > :nth-child(5) { animation-delay: 0.32s; }
.js .acilis__sahne { animation-delay: 0.15s; animation-duration: 1.1s; }
@keyframes acilis-gir { to { opacity: 1; transform: none; } }

/* JS yoksa yalnızca ilk kare */
.no-js .acilis__secici { display: none; }

@media (prefers-reduced-motion: reduce) {
  .acilis__damga-yazi { animation: none; }
  .acilis__kare, .acilis__etiket { transition: none; }
  .acilis__kare img, .acilis__kare.is-active img { transform: none; transition: none; }
  .js .acilis__metin > *, .js .acilis__sahne { opacity: 1; transform: none; animation: none; }
}

/* ---------------- duyarlı ------------------------------------------ */
@media (max-width: 1280px) {
  .acilis__sahne { padding-left: 8%; }
  .acilis__kanit-oge { padding: 0 22px; }
}

@media (max-width: 1100px) {
  .acilis__ic { gap: 44px; }
  .acilis__cerceve, .acilis__secici { width: min(100%, 400px); }
  .acilis__kanit-oge { padding: 0 18px; }
  .acilis__kanit-deger { font-size: 1.5rem; }
  .acilis__mekan { width: 34%; bottom: 112px; }
  .acilis__damga { width: 104px; height: 104px; top: -36px; right: -30px; }
}

@media (max-width: 900px) {
  .acilis { padding-top: calc(var(--header-h) + 20px); padding-bottom: 56px; }
  .acilis__ic { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .acilis__sahne { order: -1; padding-left: 0; justify-items: center; }
  .acilis__cerceve, .acilis__secici { width: min(100%, 520px); }
  .acilis__cerceve { aspect-ratio: 5 / 5.2; }
  .acilis__mekan { display: none; }
  .acilis__secici { margin-top: 36px; }
}

@media (max-width: 760px) {
  .acilis { padding-top: calc(var(--header-h) + 8px); }
  .acilis__ic { gap: 34px; }
  .acilis__cerceve { aspect-ratio: 5 / 4; }
  .acilis__cerceve::before { inset: 10px -8px -10px 8px; }
  .acilis__damga { width: 78px; height: 78px; top: -18px; right: -4px; }
  .acilis__etiketler { right: -8px; bottom: 16px; }
  .acilis__etiket { padding: 10px 13px 9px 14px; gap: 12px; }
  .acilis__etiket-ad { font-size: 0.6875rem; letter-spacing: 0.16em; }
  .acilis__etiket-fiyat { font-size: 1.125rem; }
  .acilis__secici { display: none; }

  .acilis__baslik { margin-top: 18px; }
  .acilis__baslik-ince { font-size: 1.375rem; }
  .acilis__baslik-buyuk { font-size: clamp(3rem, 14vw, 4rem); }
  .acilis__yazi { margin-top: 18px; font-size: 1rem; line-height: 1.7; }
  .acilis__eylem { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
  .acilis__eylem .btn { padding-inline: 10px; }
  .acilis__kanit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; padding-top: 20px; }
  .acilis__kanit-oge { padding: 0 12px; }
  .acilis__kanit-deger { font-size: 1.25rem; gap: 5px; }
  .acilis__dk { display: none; }
  .acilis__kanit-deger .puan__yildiz { width: 15px; height: 15px; }
  .acilis__kanit-etiket { font-size: 0.75rem; line-height: 1.4; margin-top: 7px; }
}

@media (max-width: 380px) {
  .acilis__eylem { grid-template-columns: 1fr; }
  .acilis__kanit-oge { padding: 0 8px; }
}

/* duyuru şeridi açıkken */
body.duyurulu .acilis { padding-top: calc(var(--header-h) + var(--duyuru-h) + 28px); }


/* ===== 06-values.css ===== */
/* ==================================================================
   DEĞER ŞERİDİ — dört marka vaadi
   ================================================================== */

.values {
  background: var(--bg-strip);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 54px 0;
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-left: 44px;
}

.value {
  display: flex;
  align-items: center;
  gap: 14px;
}

.value__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--gold);
}
.value__icon svg { width: 100%; height: 100%; }

.value__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.value__title {
  font-size: 1.0313rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.value__text {
  font-size: 0.9063rem;
  font-weight: 300;
  line-height: 1.4;
  color: #b7b4b0;
}


/* ===== 07-story.css ===== */
/* ==================================================================
   HİKAYEMİZ — bölünmüş editoryal blok
   ================================================================== */

.story {
  position: relative;
  min-height: 432px;
  display: flex;
  align-items: center;
  padding: 58px 0 40px;
  background: var(--bg-story);
  overflow: hidden;
  isolation: isolate;
}

.story__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  z-index: -2;
}
.story__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.story__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      var(--bg-story) 0%,
      rgba(8, 8, 10, 0.78) 12%,
      rgba(8, 8, 10, 0.2) 32%,
      rgba(8, 8, 10, 0.04) 60%,
      rgba(8, 8, 10, 0.14) 100%);
}

.story__inner { position: relative; }
.story__content { max-width: 320px; }
@media (min-width: 901px) { .story__content { padding-left: 14px; } }

.story__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 2.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--text);
}
.story__text {
  margin-top: 34px;
  max-width: 300px;
  font-size: 0.875rem;
  line-height: 1.72;
  color: rgba(224, 221, 218, 0.96);
}
.story__content .btn { margin-top: 36px; }


/* ===== 08-menu.css ===== */
/* ==================================================================
   MENÜDEN ÖNE ÇIKANLAR — yatay kaydırmalı kart dizisi
   ================================================================== */

.menu {
  position: relative;
  padding: 24px 0 6px;
  background: var(--bg-menu);
  overflow: hidden;
}
.menu::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background: radial-gradient(58% 70% at 50% 22%, rgba(80, 62, 40, 0.16) 0%, rgba(21, 21, 23, 0) 72%);
  pointer-events: none;
}
.menu > * { position: relative; }

.menu__carousel { position: relative; margin-top: 29px; }
.menu__viewport-wrap { overflow: visible; }

.menu__track {
  display: grid;
  grid-auto-flow: column;
  --kart: 4;                       /* görünen kart sayısı (menu.js yazar) */
  --sut: min(var(--kart), 4);      /* 4'ten az ürün varsa satırı doldur */
  grid-auto-columns: calc((100% - (var(--sut) - 1) * 24px) / var(--sut));
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.menu__track::-webkit-scrollbar { display: none; }

.menu-card { scroll-snap-align: start; min-width: 0; }

.menu-card__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.menu-card__media {
  position: relative;
  aspect-ratio: 282 / 194;
  overflow: hidden;
  background: #100e0c;
}
.menu-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 0.9s var(--ease);
}
.menu-card__body { padding: 15px 20px 50px; }
.menu-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--gold-cream);
}
.menu-card__text {
  margin-top: 5px;
  font-size: 0.8438rem;
  line-height: 1.5;
  color: #b0adaa;
}
/* Fiyat — açıklamanın devamında, altın tonda ve satır sonunda kopmadan */
.menu-card__fiyat {
  display: inline-block;
  margin-left: 2px;
  color: var(--gold-cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (hover: hover) {
  .menu-card__inner:hover {
    border-color: rgba(217, 184, 124, 0.3);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
  }
  .menu-card__inner:hover .menu-card__img { transform: scale(1.045); }
}

/* --- oklar ---------------------------------------------------------- */
.menu__arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: rgba(242, 240, 235, 0.78);
  background: rgba(12, 12, 14, 0.4);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu__arrow svg { width: 18px; height: 18px; }
.menu__arrow--prev { left: clamp(6px, calc((100vw - var(--container)) / 2 - 71px), 49px); }
.menu__arrow--next { right: clamp(6px, calc((100vw - var(--container)) / 2 - 71px), 49px); }
.menu__arrow:hover {
  border-color: var(--gold-line);
  color: var(--gold-soft);
  background: rgba(217, 184, 124, 0.08);
}
.menu__arrow[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.menu__arrow[aria-disabled="true"]:hover {
  border-color: var(--border-strong);
  color: rgba(242, 240, 235, 0.78);
  background: rgba(12, 12, 14, 0.4);
}

/* Kart tamamı tıklanabilir — kategori sayfasına gider */
.menu-card__inner { position: relative; }
.menu-card__bag { position: absolute; inset: 0; z-index: 1; }
.menu-card__bag:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }


/* ===== 09-contact.css ===== */
/* ==================================================================
   REZERVASYON / YOL TARİFİ / HARİTA
   ================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  min-height: 313px;
  background: var(--bg-contact);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.contact__col { padding: 40px 32px 20px 64px; }
.contact__col--divided {
  border-left: 1px solid var(--border);
  padding-left: 68px;
}

.contact__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--gold);
}
.contact__text {
  margin-top: 14px;
  max-width: 232px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(224, 221, 218, 0.95);
}
.contact__col .btn { margin-top: 22px; --btn-h: 41px; padding: 0 24px; }

.contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 1.6875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--gold-soft);
  transition: color 0.3s var(--ease);
}
.contact__phone:hover { color: #f6e8c8; }

.contact__hours,
.contact__address {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 12px;
  font-size: 0.8438rem;
  line-height: 1.65;
  color: #b3b0ad;
}
.contact__address { margin-top: 22px; transition: color 0.3s var(--ease); }
.contact__address:hover { color: var(--text); }
.contact__address-line { display: block; }

.contact__icon { flex: 0 0 auto; display: inline-flex; color: var(--gold); }
.contact__icon svg { width: 18px; height: 18px; }
.contact__phone .contact__icon svg { width: 21px; height: 21px; }
.contact__hours .contact__icon,
.contact__address .contact__icon { margin-top: 2px; }

/* --- harita --------------------------------------------------------- */
.contact__map {
  position: relative;
  display: block;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: #14161c;
}
.contact__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 1.2s var(--ease);
}
.contact__map-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.06) 30%, rgba(10, 10, 12, 0.16) 100%);
}
.contact__map:hover .contact__map-img { transform: scale(1.03); }

.contact__map-card {
  position: absolute;
  left: 41.5%;
  top: 26%;
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(52%, 300px);
  padding: 17px 20px;
  border-radius: 4px;
  background: rgba(18, 15, 12, 0.82);
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.9);
}
.contact__map-pin { flex: 0 0 auto; color: #e0ac52; }
.contact__map-pin svg { width: 32px; height: 32px; }
.contact__map-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact__map-title {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  color: #f4f2ee;
}
.contact__map-sub {
  font-size: 0.9063rem;
  font-weight: 300;
  color: rgba(214, 212, 209, 0.9);
}


/* ===== 10-footer.css ===== */
/* ==================================================================
   FOOTER
   ================================================================== */

.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  min-height: 112px;
  padding: 14px 80px 14px 64px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer__nav { margin-left: clamp(24px, 8.6vw, 124px); }
.footer__list { display: flex; align-items: center; gap: 42px; flex-wrap: wrap; }
.footer__link {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: rgba(242, 240, 235, 0.86);
  transition: color 0.3s var(--ease);
}
.footer__link:hover { color: var(--gold-soft); }

.footer__aside {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
}

.footer__social { display: flex; align-items: center; gap: 32px; }
.social {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(238, 236, 232, 0.92);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.social svg { width: 17px; height: 17px; }
/* referanstaki gibi: iki dolu, iki çizgisel rozet */
.social--facebook,
.social--maps {
  background: rgba(226, 224, 220, 0.88);
  border-color: transparent;
  color: #17161a;
}
.social--facebook svg, .social--maps svg { width: 19px; height: 19px; }
.social--google { border-color: var(--gold-line); color: var(--gold); }
.social:not(.social--placeholder):hover {
  color: var(--gold-soft);
  border-color: var(--gold-line);
  background: rgba(217, 184, 124, 0.09);
}
.social--placeholder { opacity: 0.72; cursor: default; }

.footer__copy {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.015em;
  color: #9a9794;
  text-align: right;
}
.footer__legal { margin-left: 6px; }
.footer__legal-link { color: var(--text-2); transition: color 0.3s var(--ease); }
.footer__legal-link:hover { color: var(--gold-soft); }
.footer__legal-sep { margin: 0 6px; }


/* ===== 11-responsive.css ===== */
/* ==================================================================
   RESPONSIVE — 1440 / 1280 / 1024 / 900 / 768 / 640 / 430 / 375
   Mobil, masaüstünün sıkıştırılmışı değil; kendi kurgusu vardır.
   ================================================================== */

/* ---------- ≤ 1280px ------------------------------------------------ */
@media (max-width: 1280px) {
  :root { --header-h: 104px; }
  .nav__list { gap: 26px; }
  .site-header__actions { gap: 22px; }
  .values__grid { gap: 26px; }
  .contact__col { padding: 40px 26px 30px 48px; }
  .contact__col--divided { padding-left: 48px; }
  .site-footer__inner { padding-inline: 48px; }
  .footer__list { gap: 24px; }
  .footer__social { gap: 24px; }
}

/* ---------- ≤ 1100px : navigasyonu mobil moda al -------------------- */
@media (max-width: 1100px) {
  .values__grid { padding-left: 0; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__actions { margin-left: auto; gap: 18px; }
  .site-header__directions { display: none; }
  .menu__track { --sut: min(var(--kart), 3); grid-auto-columns: calc((100% - (var(--sut) - 1) * 20px) / var(--sut)); gap: 20px; }
  .menu__arrow { top: 34%; }
}

/* ---------- ≤ 1024px ------------------------------------------------ */
@media (max-width: 1024px) {
  .story__media { width: 52%; }
  .story__content { max-width: 300px; }
  .contact { grid-template-columns: minmax(0, 58%) minmax(0, 42%); }
  .contact__col { padding: 36px 20px 28px 40px; }
  .contact__col--divided { padding-left: 40px; }
  .contact__phone { font-size: 1.5rem; }
  .site-footer__inner { padding-inline: 40px; gap: 28px; }
  .footer__nav { margin-left: 40px; }
}

/* ---------- ≤ 900px : hikaye ve harita dikey kurguya geçer ---------- */
@media (max-width: 900px) {
  .story {
    display: block;
    min-height: 0;
    padding: 0 0 56px;
  }
  .story__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    z-index: 0;
  }
  .story__fade {
    background: linear-gradient(180deg,
      rgba(8, 8, 10, 0.35) 0%,
      rgba(8, 8, 10, 0.05) 40%,
      rgba(8, 8, 10, 0.92) 92%,
      var(--bg-story) 100%);
  }
  .story__inner { margin-top: -34px; }
  .story__content { max-width: 560px; }

  .contact { display: block; }
  .contact__cols { grid-template-columns: 1fr; }
  .contact__col { padding: 40px var(--gutter) 34px; }
  .contact__col--divided {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: var(--gutter);
  }
  .contact__text { max-width: 420px; }
  .contact__map {
    border-left: 0;
    border-top: 1px solid var(--border);
    aspect-ratio: 16 / 9;
  }
  .contact__map-card { left: auto; right: 5%; top: 50%; transform: translateY(-50%); width: min(70%, 320px); }
}

/* ---------- ≤ 768px ------------------------------------------------- */
@media (max-width: 768px) {
  :root { --header-h: 84px; }

  .site-header.is-scrolled { height: 72px; }

  .logo--header { --logo-h: 46px; }
  .logo--footer { --logo-h: 80px; }

  .values { padding: 38px 0; }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }

  .menu { padding: 44px 0 24px; }
  .menu__track { --sut: min(var(--kart), 2); grid-auto-columns: calc((100% - (var(--sut) - 1) * 18px) / var(--sut)); gap: 18px; }
  .menu__arrow { display: none; }
  .menu-card__body { padding: 14px 16px 22px; }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 34px var(--gutter) 30px;
  }
  .footer__nav { margin-left: 0; }
  .footer__list { justify-content: center; gap: 18px 22px; }
  .footer__aside { margin-left: 0; align-items: center; gap: 16px; }
  .footer__social { gap: 18px; }
  .social { width: 40px; height: 40px; }
  .social svg { width: 18px; height: 18px; }
  .footer__copy { text-align: center; }
}

/* ---------- ≤ 560px ------------------------------------------------- */
@media (max-width: 560px) {

  .values { padding: 32px 0; }
  .values__grid { grid-template-columns: 1fr; gap: 22px; }
  .value { gap: 15px; }
  .value__icon { width: 38px; height: 38px; }

  .story { padding-bottom: 46px; }
  .story__media { aspect-ratio: 4 / 3; }
  .story__content .btn { width: 100%; }

  .menu__track { grid-auto-columns: min(78%, 300px); }
  .menu__viewport-wrap { width: 100%; padding-inline: var(--gutter); }
  .menu__track { scroll-padding-inline: 0; }

  .contact__col .btn { width: 100%; }
  .contact__map { aspect-ratio: 4 / 3; }
  .contact__map-card { left: 50%; right: auto; transform: translate(-50%, -50%); width: min(86%, 320px); }
}

/* ---------- ≤ 400px ------------------------------------------------- */
@media (max-width: 400px) {
  .contact__phone { font-size: 1.375rem; }
  .site-header__actions { gap: 12px; }
  .site-header__phone { font-size: 0.8125rem; letter-spacing: 0.01em; gap: 6px; }
  .mobile-nav__link { font-size: 1.25rem; }
}




/* ===== 12-duyuru.css ===== */
/* ==================================================================
   DUYURU ŞERİDİ — panelden açılır/kapanır
   Kapalıyken hiç render edilmez; --duyuru-h 0 kalır ve yerleşim değişmez.
   ================================================================== */
:root { --duyuru-h: 0px; }
body.duyurulu { --duyuru-h: 40px; }

.duyuru {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  height: var(--duyuru-h);
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #17140e 0%, #241d12 50%, #17140e 100%);
  border-bottom: 1px solid rgba(217, 184, 124, 0.22);
}
.duyuru__ic {
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.055em;
  color: var(--gold-soft);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.duyuru__bag { display: inline-flex; align-items: center; gap: 9px; color: inherit; }
.duyuru__bag:hover { color: #f4e6c8; }
.duyuru__ok { color: var(--gold); transition: transform 0.3s var(--ease); }
.duyuru__bag:hover .duyuru__ok { transform: translateX(3px); }

/* şerit açıkken header aşağı kayar (açılışın payı 05-hero.css'te) */
body.duyurulu .site-header { top: var(--duyuru-h); }
body.duyurulu .mobile-nav__inner { padding-top: calc(var(--header-h) + var(--duyuru-h) + 24px); }

@media (max-width: 768px) {
  body.duyurulu { --duyuru-h: 36px; }
  .duyuru__ic { font-size: 0.75rem; letter-spacing: 0.03em; }
}


/* ===== 13-sayfalar.css ===== */
/* ==================================================================
   İÇ SAYFALAR — sayfa başı, metin, menü listeleri, galeri, SSS,
   iletişim, rehber, yasal metinler, 404. Ana sayfa etkilenmez.
   Ana sayfayla aynı belirteçler (01-tokens.css) kullanılır.
   ================================================================== */

/* --- sayfa başı (dar hero) ------------------------------------------ */
.sayfa-basi {
  position: relative;
  padding: calc(var(--header-h) + var(--duyuru-h, 0px) + 56px) 0 52px;
  background: var(--bg-story);
  overflow: hidden;
  isolation: isolate;
}
.sayfa-basi__medya { position: absolute; inset: 0; z-index: -1; }
.sayfa-basi__medya img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(0.55); }
.sayfa-basi__medya::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.72) 45%, rgba(8,8,10,0.35) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.15) 40%, rgba(8,8,10,0.85) 100%);
}
.sayfa-basi--duz { background: var(--bg-strip); border-bottom: 1px solid var(--border); }
.sayfa-basi--dar { padding-bottom: 40px; }
.sayfa-basi__ic { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.sayfa-basi__baslik {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--text);
}
.sayfa-basi__giris { margin: 0 auto; max-width: 62ch; font-size: 1rem; line-height: 1.7; color: var(--text-2); }

/* --- kırıntı ------------------------------------------------------- */
.kirinti { margin-bottom: 18px; font-size: 0.8125rem; letter-spacing: 0.04em; }
.kirinti__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.kirinti__oge + .kirinti__oge::before { content: "/"; margin-right: 6px; color: var(--muted); }
.kirinti__bag { color: var(--text-2); text-decoration: none; }
.kirinti__bag:hover { color: var(--gold-soft); }

/* --- metin bölümü + olgu kutusu ------------------------------------ */
.metin-bolum { padding: 64px 0; background: var(--bg); }
.metin-bolum__ic { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 48px; align-items: start; }
.metin-bolum__ic--tek { grid-template-columns: minmax(0, 760px); justify-content: center; }
.prose { font-size: 1rem; line-height: 1.8; color: var(--text-2); }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose__giris { font-size: 1.0625rem; color: var(--text); }
.prose h2 {
  margin: 1.8em 0 0.6em;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gold-cream);
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }
.prose strong { color: var(--text); font-weight: 500; }
.prose--hukuk { font-size: 0.9375rem; }

.olgu-kutu {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  padding: 26px 28px;
}
.olgu-kutu__baslik {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.olgu-kutu__liste { margin: 0; }
.olgu-kutu__satir { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.9rem; line-height: 1.5; }
.olgu-kutu__satir:first-child { border-top: 0; padding-top: 0; }
.olgu-kutu__satir dt { color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; padding-top: 3px; }
.olgu-kutu__satir dd { margin: 0; color: var(--text); }

/* --- değer şeridi (iç sayfa varyantı) ------------------------------ */
.deger-serit { background: var(--bg-strip); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 44px 0; }
.deger-serit__ic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.deger__baslik { margin: 0 0 6px; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-cream); }
.deger__metin { margin: 0; font-size: 0.9rem; color: var(--text-2); }

/* --- CTA şeridi ---------------------------------------------------- */
.cta-serit { background: var(--bg-contact); border-top: 1px solid var(--border); padding: 48px 0; }
.cta-serit__ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-serit__baslik { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.01em; color: var(--gold-cream); }
.cta-serit__metin { margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.cta-serit__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- ilgili kartlar ----------------------------------------------- */
.ilgili { padding: 56px 0; background: var(--bg-menu); border-top: 1px solid var(--border); }
.ilgili__baslik { margin: 0 0 26px; text-align: center; }
.ilgili__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.ilgili__bag { display: block; background: var(--surface-warm); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.ilgili__bag:hover { border-color: rgba(217,184,124,.3); transform: translateY(-3px); }
.ilgili__gorsel { display: block; width: 100%; aspect-ratio: 560 / 386; object-fit: cover; }
.ilgili__metin { display: block; padding: 16px 18px 20px; }
.ilgili__ad { display: block; font-family: var(--font-display); font-size: 1.1875rem; letter-spacing: -0.005em; color: var(--gold-cream); font-weight: 600; }
.ilgili__kisa { display: block; margin-top: 5px; font-size: 0.875rem; color: #b0adaa; line-height: 1.5; }

/* --- menü sayfaları ------------------------------------------------ */
.menu-atla { position: sticky; top: 0; z-index: 5; background: rgba(11,11,13,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.menu-atla__ic { display: flex; gap: 6px 26px; overflow-x: auto; padding: 14px 0; scrollbar-width: none; }
.menu-atla__ic::-webkit-scrollbar { display: none; }
.menu-atla__bag { flex: 0 0 auto; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.menu-atla__bag:hover { color: var(--gold-soft); border-bottom-color: var(--gold-line); }
.menu-kategori { padding: 56px 0; background: var(--bg); scroll-margin-top: 60px; }
.menu-kategori + .menu-kategori { border-top: 1px solid var(--border); }
.menu-kategori--tek { background: var(--bg-menu); }
.menu-kategori__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; }
.menu-kategori__baslik { margin: 0; text-align: left; }
.menu-kategori--tek .menu-kategori__baslik { text-align: center; margin-bottom: 26px; }
.menu-kategori__kisa { margin: 8px 0 0; color: var(--text-2); font-size: 0.9375rem; }
.menu-kategori__detay { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--gold-line); }
.menu-kategori__detay:hover { color: var(--gold-soft); }
.menu-kategori__not { margin: 18px 0 0; font-size: 0.8125rem; color: var(--muted); }
.urun-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.urun { display: flex; flex-direction: column; background: var(--surface-warm); border: 1px solid var(--border); }
.urun__medya img { display: block; width: 100%; aspect-ratio: 560 / 386; object-fit: cover; }
.urun__govde { padding: 18px 20px 22px; }
.urun__ust { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.urun__ad { margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--gold-cream); }
.urun__fiyat { flex: 0 0 auto; font-family: var(--font-display); font-size: 1.0625rem; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.urun__aciklama { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.55; color: #b0adaa; }

/* Fiyat listesi — görselsiz kategoriler (çorba, salata, içecek). İki sütun,
   ad ile fiyat arasında noktalı kılavuz; klasik lokanta menüsü düzeni. */
.fiyat-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 0; }
.fiyat-satir { padding: 16px 0 14px; border-bottom: 1px solid var(--border); }
.fiyat-satir__ust { display: flex; align-items: baseline; gap: 12px; }
.fiyat-satir__ad { margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--gold-cream); }
.fiyat-satir__cizgi { flex: 1 1 auto; min-width: 24px; border-bottom: 1px dotted rgba(214, 178, 106, 0.45); transform: translateY(-5px); }
.fiyat-satir__fiyat { flex: 0 0 auto; font-family: var(--font-display); font-size: 1.125rem; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.fiyat-satir__aciklama { margin: 5px 0 0; font-size: 0.875rem; line-height: 1.5; color: #b0adaa; }

/* --- SSS ----------------------------------------------------------- */
.sss { padding: 56px 0; background: var(--bg); border-top: 1px solid var(--border); }
.sss__ic { max-width: 820px; }
.sss__baslik { margin: 0 0 22px; text-align: center; }
.sss__oge { border-top: 1px solid var(--border); }
.sss__oge:last-child { border-bottom: 1px solid var(--border); }
.sss__soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__isaret { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.sss__isaret::before, .sss__isaret::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.sss__isaret::before { width: 14px; height: 1px; }
.sss__isaret::after { width: 1px; height: 14px; }
.sss__oge[open] .sss__isaret::after { transform: translate(-50%, -50%) rotate(90deg); }
.sss__cevap { padding: 0 4px 20px; color: var(--text-2); line-height: 1.7; max-width: 70ch; }
.sss__cevap p { margin: 0; }

/* --- galeri -------------------------------------------------------- */
.galeri { padding: 48px 0 64px; background: var(--bg); }
.galeri__filtre { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.galeri__filtre-dugme { appearance: none; background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); padding: 8px 16px; font: inherit; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all .25s var(--ease); }
.galeri__filtre-dugme:hover, .galeri__filtre-dugme.is-secili { border-color: var(--gold); color: var(--gold-cream); }
.galeri__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.galeri__oge[hidden] { display: none; }
.galeri__bag { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.galeri__bag img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.galeri__bag:hover img { transform: scale(1.04); }
.galeri__etiket { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; background: rgba(11,11,13,.75); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-cream); }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,5,6,.94); padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__figur { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox__gorsel { max-width: 100%; max-height: 80vh; object-fit: contain; }
.lightbox__altyazi { margin-top: 12px; color: var(--text-2); font-size: 0.875rem; }
.lightbox__kapat, .lightbox__ok { position: absolute; appearance: none; background: rgba(23,23,26,.8); border: 1px solid var(--border-strong); color: var(--text); width: 46px; height: 46px; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lightbox__kapat { top: 20px; right: 20px; }
.lightbox__ok { top: 50%; transform: translateY(-50%); }
.lightbox__ok--geri { left: 20px; }
.lightbox__ok--ileri { right: 20px; }

/* --- yorumlar ------------------------------------------------------ */
.yorum-platform { padding: 56px 0 64px; background: var(--bg); }
.yorum-platform__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; list-style: none; margin: 0 0 36px; padding: 0; }
.yorum-platform__oge { background: var(--surface-warm); border: 1px solid var(--border); padding: 28px; text-align: center; }
.yorum-platform__ad { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.005em; color: var(--gold-cream); font-weight: 600; }
.yorum-platform__aciklama { margin: 0 0 18px; color: var(--text-2); font-size: 0.9375rem; }
.yorum-cagri { text-align: center; padding: 32px; border: 1px solid var(--gold-line); }
.yorum-cagri__metin { margin: 0 0 16px; font-family: var(--font-display); font-size: 1.125rem; color: var(--text); }
.yorum-not { margin: 22px 0 0; text-align: center; font-size: 0.8125rem; color: var(--muted); }

/* --- iletişim ------------------------------------------------------ */
.iletisim { padding: 56px 0 64px; background: var(--bg); }
.iletisim__ic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.iletisim__kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.iletisim__kart { background: var(--surface-warm); border: 1px solid var(--border); padding: 24px; }
.iletisim__baslik { margin: 0 0 10px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.iletisim__buyuk { display: block; margin: 0 0 8px; font-family: var(--font-display); font-size: 1.5rem; color: var(--text); text-decoration: none; letter-spacing: -0.005em; font-weight: 600; }
.iletisim__buyuk--kucuk { font-size: 1.125rem; }
.iletisim__metin { margin: 0 0 14px; font-size: 0.875rem; color: var(--text-2); line-height: 1.55; }
.iletisim__adres { font-style: normal; margin: 0 0 14px; color: var(--text); line-height: 1.6; }
.iletisim__bag { color: var(--gold-soft); text-decoration: none; word-break: break-all; }
.iletisim__dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.iletisim__harita { position: relative; display: block; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.iletisim__harita img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 900 / 491; }
.iletisim__harita-etiket { position: absolute; left: 20px; bottom: 20px; display: grid; gap: 2px; padding: 14px 18px; background: rgba(11,11,13,.9); border: 1px solid var(--border-strong); color: var(--text); font-size: 0.875rem; }
.iletisim__harita-etiket strong { font-weight: 500; }
.iletisim__harita-etiket span { color: var(--text-2); }

/* --- rehber -------------------------------------------------------- */
.yazi-liste { padding: 56px 0 64px; background: var(--bg); }
.yazi-liste__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.yazi-kart__bag { display: block; background: var(--surface-warm); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.yazi-kart__bag:hover { border-color: rgba(217,184,124,.3); transform: translateY(-3px); }
.yazi-kart__gorsel { display: block; width: 100%; aspect-ratio: 560 / 386; object-fit: cover; }
.yazi-kart__govde { display: block; padding: 18px 20px 22px; }
.yazi-kart__tarih { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.yazi-kart__baslik { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--gold-cream); font-weight: 600; }
.yazi-kart__ozet { display: block; margin-top: 8px; font-size: 0.875rem; line-height: 1.55; color: #b0adaa; }
.yazi { padding: 56px 0 64px; background: var(--bg); }
.yazi__ic { max-width: 760px; }
.yazi__meta { margin: 0 0 22px; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.yazi__kapanis { margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 0.9375rem; }
.yazi__kapanis a { color: var(--gold-soft); }

/* --- duyarlı ------------------------------------------------------- */
@media (max-width: 1024px) {
  .deger-serit__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeri__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iletisim__ic { grid-template-columns: 1fr; }
  .adimlar__liste { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sayfa-basi { padding-top: calc(var(--header-h) + var(--duyuru-h, 0px) + 28px); padding-bottom: 40px; }
  .metin-bolum { padding: 44px 0; }
  .metin-bolum__ic { grid-template-columns: 1fr; gap: 30px; }
  .cta-serit__ic { flex-direction: column; align-items: flex-start; }
  .iletisim__kartlar { grid-template-columns: 1fr; }
  .menu-kategori { padding: 40px 0; }
  .menu-kategori__bas { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .deger-serit__ic { grid-template-columns: 1fr; }
  .galeri__izgara { grid-template-columns: 1fr; gap: 12px; }
  .urun-liste { grid-template-columns: 1fr; }
  .fiyat-liste { grid-template-columns: 1fr; }
  .olgu-kutu__satir { grid-template-columns: 1fr; gap: 2px; }
  .cta-serit__dugmeler .btn { width: 100%; }
  .lightbox__ok { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ilgili__bag, .yazi-kart__bag, .galeri__bag img { transition: none; }
}


/* ===== 14-whatsapp.css ===== */
/* ==================================================================
   YÜZEN WHATSAPP DÜĞMESİ — her sayfada, her ekranda sağ altta.
   Marka yeşili bilinçli olarak kullanılır; sitenin altın-koyu paletiyle
   çakışmaması için düğme küçük tutulur ve koyu bir halka ile ayrılır.
   ================================================================== */

.wa {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;                 /* lightbox (100) ve mobil menü altında kalır */

  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 15px;
  border-radius: 999px;

  background: #25d366;         /* WhatsApp marka yeşili */
  color: #0b1a10;
  text-decoration: none;

  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.wa__ikon { display: inline-flex; }
.wa__ikon svg { width: 26px; height: 26px; }
.wa__yazi { display: inline-block; }

@media (hover: hover) {
  .wa:hover {
    background: #1fbe5a;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.25);
  }
}
.wa:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Dar ekranlarda yalnızca yuvarlak simge — içeriği kapatmasın */
@media (max-width: 640px) {
  .wa {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .wa__yazi { display: none; }
  .wa__ikon svg { width: 29px; height: 29px; }
}

/* Mobil menü ya da lightbox açıkken gizlenir (üstlerine binmesin).
   Her ikisi de <body>'ye .is-locked ekler. */
body.is-locked .wa { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .wa { transition: none; }
  .wa:hover { transform: none; }
}

/* Yazdırmada görünmez */
@media print { .wa { display: none; } }


/* ===== 15-tam-site.css ===== */
/* ==================================================================
   TAM SİTE EKLERİ — Google puanı, açık/kapalı rozeti, olanaklar,
   tıklanınca yüklenen harita, rezervasyon formu, çerez bandı.
   ================================================================== */

/* ---- Google puanı (metin + tek yıldız; 5 yıldız çizilmez) -------- */
.puan {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none;
  font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0.04em;
}
.puan__yildiz { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }
.puan__metin { border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), color .25s var(--ease); }
.puan:hover .puan__metin { border-bottom-color: var(--gold-line); color: var(--gold-cream); }
.puan:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.puan--buyuk { font-size: 1.0625rem; margin-bottom: 10px; }
.puan--buyuk .puan__yildiz { width: 20px; height: 20px; }


.puan-kart {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center;
  padding: 32px 36px; margin: 0 0 28px;
  background: var(--surface-warm); border: 1px solid var(--gold-line);
}
.puan-kart__sol { padding-right: 36px; border-right: 1px solid var(--border); }
.puan-kart__etiket { margin: 0 0 6px; font-size: 0.75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.puan-kart__rakam { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); color: var(--text); }
.puan-kart__rakam span { font-size: 3.25rem; line-height: 1; }
.puan-kart__rakam small { font-size: 1.125rem; color: var(--text-2); align-self: flex-end; margin-bottom: 6px; }
.puan-kart__rakam .puan__yildiz { width: 30px; height: 30px; }
.puan-kart__alt { margin: 8px 0 0; font-size: 0.875rem; color: var(--text-2); }
.puan-kart__metin { margin: 0 0 16px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; max-width: 56ch; }
.puan-kart__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Açık / kapalı rozeti ---------------------------------------- */
.acik-rozet {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 5px 12px 5px 10px; border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 0.8125rem; letter-spacing: .02em; color: var(--text);
}
.acik-rozet[hidden] { display: none; }
.acik-rozet__nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.acik-rozet--acik .acik-rozet__nokta { background: #4cc38a; box-shadow: 0 0 0 3px rgba(76,195,138,.18); }
.acik-rozet--yakin .acik-rozet__nokta { background: #e0b04c; box-shadow: 0 0 0 3px rgba(224,176,76,.18); }
.acik-rozet--kapali .acik-rozet__nokta { background: #d06a5a; }

/* ---- Olanaklar --------------------------------------------------- */
.olanak-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.olanak-liste li { position: relative; padding-left: 22px; color: var(--text); font-size: 0.9375rem; }
.olanak-liste li::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 5px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg);
}

/* ---- Harita: görsel + tıklanınca iframe --------------------------- */
.harita-kutu {
  position: relative; grid-column: 1 / -1;
  overflow: hidden; border: 1px solid var(--border); background: var(--surface);
  height: clamp(360px, 36vw, 460px);
}
.harita-kutu__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; }
.harita-kutu__katman {
  position: absolute; right: 24px; bottom: 24px; width: min(440px, calc(100% - 48px));
  padding: 22px 24px 20px; background: rgba(11,11,13,.94); border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.9);
}
.harita-kutu__baslik { margin: 0 0 2px; font-family: var(--font-display); font-size: 1.25rem; color: var(--text); letter-spacing: -0.005em; font-weight: 600; }
.harita-kutu__adres { margin: 0 0 14px; font-size: 0.875rem; color: var(--text-2); }
.harita-kutu__dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.harita-kutu__not { margin: 12px 0 0; font-size: 0.75rem; color: var(--muted); }
.harita-kutu__cerceve { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
.harita-kutu.is-yuklu .harita-kutu__katman,
.harita-kutu.is-yuklu .harita-kutu__gorsel { display: none; }
.no-js [data-harita-yukle] { display: none; }

/* İletişim yerleşimi: kartlar üç sütun, harita altta tam genişlik */
.iletisim__ic { grid-template-columns: 1fr; gap: 22px; }
.iletisim__kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iletisim__kart .puan { white-space: nowrap; }

/* ---- Rezervasyon ------------------------------------------------- */
.rezervasyon { padding: 72px 0; background: var(--bg-strip); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); scroll-margin-top: var(--header-h); }
.rezervasyon__ic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.rezervasyon__baslik { margin: 6px 0 18px; }
.rezervasyon__metin p { color: var(--text-2); line-height: 1.65; margin: 0 0 14px; max-width: 46ch; }
.rezervasyon__metin a { color: var(--gold-soft); }
.rezervasyon__metin .section-head__eyebrow { margin: 0; color: var(--gold); font-size: 0.8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rezervasyon__not { font-size: 0.8125rem; color: var(--muted) !important; }

.rez-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 32px; background: var(--surface-warm); border: 1px solid var(--border); }
.rez-form__alan { display: grid; gap: 8px; min-width: 0; }
.rez-form__alan--tam { grid-column: 1 / -1; }
.rez-form label { font-size: 0.75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rez-form label span { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.rez-form input, .rez-form select, .rez-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 0;
  font: 400 1rem/1.4 var(--font-sans); color-scheme: dark;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rez-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.rez-form textarea { resize: vertical; min-height: 92px; }
.rez-form input:focus, .rez-form select:focus, .rez-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,184,124,.18); }
.rez-form ::placeholder { color: var(--muted); }
.rez-form__hata { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-left: 2px solid #d06a5a; background: rgba(208,106,90,.08); color: #f0c6bf; font-size: 0.875rem; }
.rez-form__hata[hidden] { display: none; }
.rez-form__alt { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Çerez bandı (yalnızca GA4 kimliği girilince) ---------------- */
.cerez {
  position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 70;
  max-width: 440px; padding: 18px 20px; background: rgba(17,17,20,.97); border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.9);
}
.cerez[hidden] { display: none; }
.cerez__metin { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.55; color: var(--text-2); }
.cerez__metin a { color: var(--gold-soft); }
.cerez__dugmeler { display: flex; gap: 10px; justify-content: flex-end; }

/* ---- duyarlı ------------------------------------------------------ */
@media (max-width: 1100px) {
  .iletisim__kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rezervasyon__ic { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .iletisim__kartlar { grid-template-columns: 1fr; }
  .puan-kart { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .puan-kart__sol { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--border); }
  .harita-kutu { height: auto; }
  .harita-kutu__gorsel { position: relative; height: 260px; object-position: 12% 45%; }
  .harita-kutu__katman { position: relative; right: auto; bottom: auto; width: auto; border: 0; border-top: 1px solid var(--border); box-shadow: none; }
  .harita-kutu.is-yuklu { height: 420px; }
}
@media (max-width: 560px) {
  .rez-form { grid-template-columns: 1fr; padding: 22px 18px; }
  .rez-form .btn { width: 100%; }
  .cerez { left: 12px; right: 84px; max-width: none; }
  .cerez__dugmeler .btn { flex: 1; padding: 0 12px; }
}
@media print { .cerez, .rez-form, .harita-kutu { display: none; } }