/* Kaymak Tepesi — token katmanı, kabuk ve ortak bileşenler.
   Kaynak: design/TASARIM-SISTEMI.md (§Renk token'ları, §Tipografi, §Boşluk).
   Sayfa mizaçları body[data-sayfa] altında; aile aynı kalır, aksan değişir. */

:root {
  /* Renk — çekirdek */
  --zemin: #F4FAFA;
  --zemin-alt: #E3F0F0;
  --zemin-kart: #FFFFFF;
  --cizgi-renk: #D6E6E8;
  --metin: #17384A;
  --metin-soluk: #4A6472;
  --derin: #123B4D;
  --footer: #0D2C3B;
  --footer-metin: #B8D8DC;
  --aksan: #2E8C96;
  --aksan-metin: #F4FAFA;
  --aksan-ikinci: #7FB069;

  /* Durum / rozet */
  --yesil: #3E7A52;      --yesil-zemin: #E8F3EC;
  --turuncu: #B0653C;    --turuncu-zemin: #F7EBE1;
  --etiket: #5A6B33;     --etiket-zemin: #EFF3E4;

  /* Tipografi */
  --govde-font: "Manrope", system-ui, -apple-system, sans-serif;
  --baslik-font: "Manrope", system-ui, -apple-system, sans-serif;
  --hero-boyut: clamp(32px, 5.5vw, 56px);
  --h2-boyut: clamp(26px, 4.2vw, 36px);
  --h3-boyut: clamp(18px, 2.4vw, 21px);

  /* Boşluk */
  --bolum-dikey: clamp(48px, 8vw, 88px);
  --bolum-yatay: clamp(20px, 5vw, 48px);
  --genislik: 1160px;
  --b1: 4px; --b2: 8px; --b3: 12px; --b4: 16px; --b5: 20px; --b6: 24px;

  /* Radius */
  --r-cip: 99px; --r-kart: 16px; --r-giris: 8px; --r-rozet: 4px;

  --cizgi: 1px solid var(--cizgi-renk);
}

/* Sayfa mizaçları — tasarım sistemi §Vurgu haritası */
body[data-sayfa="kahvalti"] {
  --zemin: #F7F4EC; --zemin-alt: #EFE9DB; --zemin-kart: #FFFDF8;
  --cizgi-renk: #E3DCCA;
  --metin: #2B2A24; --metin-soluk: #5C594F; --derin: #2B2A24;
  --footer: #211F1A; --footer-metin: #C9C4B2;
  --aksan: #5A6B33; --aksan-metin: #F7F4EC; --aksan-ikinci: #B0653C;
}
body[data-sayfa="otel"] {
  --zemin: #F3FAFB; --zemin-alt: #E3F0F0; --zemin-kart: #FFFFFF;
  --cizgi-renk: #CFE4E8;
  --metin: #123B4D; --metin-soluk: #3E6472;
  --aksan: #1E7A8C; --aksan-metin: #F3FAFB; --aksan-ikinci: #EFEAD8;
}
body[data-sayfa="receller"] {
  --zemin: #F8F1E4; --zemin-alt: #F1E4CC; --zemin-kart: #FFFDF8;
  --cizgi-renk: #E4D5BC;
  --metin: #5C2233; --metin-soluk: #7A5B4A; --derin: #5C2233; --footer: #5C2233;
  --footer-metin: #E8C7B8;
  --aksan: #8C3041; --aksan-metin: #F8F1E4; --aksan-ikinci: #B0653C;
  --baslik-font: "Source Serif 4", Georgia, serif;
}
/* Sitedeki tek koyu sayfa — bilinçli istisna, koyu TEMA değil.
   Sistem tema tercihine bakan bir medya sorgusu kullanılmaz: bu bir
   kullanıcı tercihi değil, akşam servisinin ambiyansı; misafir gündüz
   baksa da akşam sayfası koyudur (tasarım sistemi §Değişmez kurallar).
   Kural test/aksam-sayfasi.test.js tarafından korunuyor. */
body[data-sayfa="aksam"] {
  --zemin: #241C15; --zemin-alt: #2E241B; --zemin-kart: #241C15;
  --cizgi-renk: #3A2E22;
  --metin: #F2EBE0; --metin-soluk: #C9B896; --derin: #1B140F;
  --footer: #140F0B; --footer-metin: #C9B896;
  --aksan: #D98E4A; --aksan-metin: #241C15; --aksan-ikinci: #A08D6E;
  --etiket: #A8B383; --etiket-zemin: #33261A;
  --turuncu: #D98E4A; --turuncu-zemin: #33261A;
  --yesil: #A8B383; --yesil-zemin: #33261A;
  --baslik-font: "Archivo", system-ui, sans-serif;
}

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 16px/1.65 var(--govde-font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--baslik-font);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--b3);
  text-wrap: pretty;
}
h1 { font-size: var(--hero-boyut); font-weight: 300; }
h2 { font-size: var(--h2-boyut); font-weight: 300; }
h3 { font-size: var(--h3-boyut); font-weight: 800; }
h4 { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
h1 strong, h2 strong, h3 strong { font-weight: 800; color: inherit; }
body[data-sayfa="aksam"] h1, body[data-sayfa="aksam"] h2 { font-weight: 900; letter-spacing: 0.01em; }
body[data-sayfa="aksam"] h1 strong, body[data-sayfa="aksam"] h2 strong { color: var(--aksan); }
body[data-sayfa="receller"] h1, body[data-sayfa="receller"] h2 { font-weight: 600; }

p { margin: 0 0 var(--b3); }
a { color: var(--aksan); text-decoration: none; }
a:hover { color: var(--metin); }
img { max-width: 100%; display: block; }
address { font-style: normal; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

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

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

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--aksan); color: var(--aksan-metin);
  padding: var(--b3) var(--b5); font-weight: 700;
}
.atla:focus { left: 0; }

.kicker {
  font-size: 11.5px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--aksan); margin: 0 0 var(--b3); text-transform: uppercase;
}

/* Bölüm ritmi — arka arkaya iki blok aynı zemini kullanmaz. */
/* İçerik genişliği dolguyla sınırlanır, çocuklara max-width verilerek DEĞİL:
   `margin-inline: auto` bir ızgara öğesini stretch'ten çıkarıp max-content
   genişliğine sabitler ve iç ızgaralar sayfayı yatay kaydırtır. */
main > section {
  padding: var(--bolum-dikey) max(var(--bolum-yatay), (100% - var(--genislik)) / 2);
  background: var(--zemin);
}
main > section:nth-of-type(even) { background: var(--zemin-alt); }
main.minimal { padding: var(--bolum-dikey) var(--bolum-yatay); }

/* --- Düğmeler --- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 24px;
  border-radius: var(--r-cip);
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  transition: background-color 0.15s, color 0.15s;
}
.dugme--birincil { background: var(--aksan); color: var(--aksan-metin); }
.dugme--birincil:hover { background: var(--derin); color: var(--aksan-metin); }
.dugme--ikincil { border: 1.5px solid var(--aksan); color: var(--aksan); }
.dugme--ikincil:hover { background: var(--aksan); color: var(--aksan-metin); }
.dugme--pasif { background: var(--zemin-alt); color: var(--metin-soluk); cursor: default; }

/* --- Duyuru şeridi --- */
.duyuru {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--derin); color: var(--aksan-metin);
  padding: 10px var(--b4);
  font-size: 12.5px; font-weight: 700; text-align: center;
}
.duyuru:hover { color: var(--aksan-metin); }
.duyuru-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--aksan-ikinci); flex: none; }
.duyuru-ok { color: var(--aksan-ikinci); font-weight: 800; flex: none; }
body[data-sayfa="aksam"] .duyuru { background: var(--aksan); color: var(--derin); }
body[data-sayfa="aksam"] .duyuru-nokta,
body[data-sayfa="aksam"] .duyuru-ok { color: var(--derin); background: var(--derin); }
body[data-sayfa="aksam"] .duyuru-ok { background: none; }

/* --- Üst kabuk --- */
.ust {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: var(--b3);
  align-items: center; justify-content: space-between;
  padding: 10px max(clamp(16px, 4vw, 48px), (100% - var(--genislik)) / 2);
  background: color-mix(in srgb, var(--zemin) 96%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--cizgi);
}
/* Dokunma hedefi min 44px (tasarım sistemi §Erişilebilirlik). Marka,
   footer bağlantıları ve çipler görsel olarak küçük ama tıklama alanları
   44px'e tamamlanır. */
.marka { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--metin); }
.marka:hover { color: var(--aksan); }
.marka-isaret {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #2E8C96, #7FB069);
  display: flex; align-items: center; justify-content: center;
  color: #F4FAFA; font-weight: 800; font-size: 13px;
}
.marka-ad { font-weight: 800; font-size: 15px; letter-spacing: 0.04em; }

.nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  font-size: 13.5px; font-weight: 600;
}
.nav > a { color: var(--metin-soluk); min-height: 44px; display: inline-flex; align-items: center; }
.nav > a:hover { color: var(--metin); }
.nav > a[aria-current="page"] {
  color: var(--metin); font-weight: 800;
  box-shadow: inset 0 -2px 0 var(--aksan);
}
.nav > a[data-alt-marka] { color: #8C3041; }
body[data-sayfa="aksam"] .nav > a[data-alt-marka] { color: var(--aksan-ikinci); }
/* `.nav > a` seçicisi (0,1,1) `.dugme--birincil`i (0,1,0) eziyordu; nav'daki
   WhatsApp düğmesinin yazısı soluk gri kalıyor ve okunmuyordu. */
.nav > a.dugme--birincil { color: var(--aksan-metin); }
.nav > a.dugme--birincil:hover { color: var(--aksan-metin); }
.nav-wa { padding: 11px 18px; font-size: 13px; }

.dil { display: flex; border: 1px solid var(--cizgi-renk); border-radius: var(--r-cip); overflow: hidden; }
.dil a {
  padding: 6px 12px; min-height: 32px; display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--metin-soluk);
}
.dil a[aria-current="true"] { background: var(--aksan); color: var(--aksan-metin); }

.menu-dugme { display: none; }

/* --- Hero --- */
.blok-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: clamp(48px, 9vw, 96px) max(var(--bolum-yatay), (100% - var(--genislik)) / 2) clamp(40px, 7vw, 64px);
  background: var(--zemin-alt);
}
.blok-hero[data-boy="buyuk"] { min-height: min(600px, 78vh); }
.blok-hero[data-boy="kucuk"] { min-height: min(440px, 60vh); }
.hero-fon { position: absolute; inset: 0; z-index: 0; }
.hero-fon .hero-kare {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-fon .hero-kare:first-child { opacity: 1; }
.hero-fon .hero-kare[data-aktif] { opacity: 1; }
.blok-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--zemin) 93%, transparent) 0%,
    color-mix(in srgb, var(--zemin) 74%, transparent) 40%,
    color-mix(in srgb, var(--zemin) 10%, transparent) 74%,
    transparent 100%);
}
body[data-sayfa="aksam"] .blok-hero::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--zemin) 35%, transparent) 0%,
    color-mix(in srgb, var(--zemin) 20%, transparent) 40%,
    color-mix(in srgb, var(--zemin) 92%, transparent) 100%);
}
.hero-govde { position: relative; z-index: 2; width: 100%; }
.hero-govde h1 { max-width: 14ch; margin-bottom: var(--b4); }
.hero-alt { font-size: 16.5px; color: var(--metin-soluk); max-width: 52ch; }
.hero-eylem { margin: var(--b6) 0 0; }

/* --- Metin + görsel --- */
.blok-metin-gorsel {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.blok-metin-gorsel > *, .blok-instagram > *, .blok-konum > * { min-width: 0; }
.blok-metin-gorsel[data-pos="sol"] .mg-metin { order: 2; }
.blok-metin-gorsel[data-pos="sol"] .mg-gorsel { order: 1; }
.mg-gorsel { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: var(--b3); }
.mg-gorsel .mg-kare { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.mg-gorsel .mg-kare:first-child { grid-row: span 2; }
.mg-gorsel:has(.mg-kare:only-child) { grid-template-columns: 1fr; grid-auto-rows: 340px; }
.mg-gorsel:has(.mg-kare:nth-child(2):last-child) .mg-kare:first-child { grid-row: span 2; }
.mg-eylem { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: var(--b6); }
.mg-not { font-size: 12.5px; color: var(--metin-soluk); }
.govde { color: var(--metin-soluk); max-width: 60ch; }

/* Landing'deki Reçellerin Annesi bandı: alt markanın kraft mizacını
   landing içinde taşır (design/Anasayfa.dc.html reçel bölümü). */
/* Bölüm ritmindeki zemin dönüşümünü ezer (main > section:nth-of-type(even)) —
   bu bandın zemini mizacın parçası, sırasının değil. */
main > section.blok-metin-gorsel[data-vurgu="receller"] {
  background: #F8F1E4;
  --aksan: #8C3041; --aksan-metin: #F8F1E4; --metin: #5C2233; --metin-soluk: #7A5B4A;
  --cizgi-renk: #E4D5BC;
  color: var(--metin);
}
.blok-metin-gorsel[data-vurgu="receller"] h2 {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 600;
}

/* --- Galeri --- */
.galeri {
  display: grid; gap: var(--b3);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  grid-auto-rows: 170px; margin-top: var(--b6);
}
/* Beş ve üstü karede ilk kare 2×2 (design/Anasayfa.dc.html galeri). */
.galeri li:first-child { grid-column: span 2; grid-row: span 2; }
/* Üç kare: iki kolon, ilki iki satır boyu — prototipteki metin yanı grid. */
.galeri[data-adet="3"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 165px; }
.galeri[data-adet="3"] li:first-child { grid-column: span 1; }
/* Dört kare: eşit dört kolon, büyütme yok — aksi halde sağda boşluk kalır. */
.galeri[data-adet="4"] { grid-template-columns: repeat(4, 1fr); }
.galeri[data-adet="4"] li:first-child { grid-column: span 1; grid-row: span 1; }
.galeri[data-adet="2"] { grid-template-columns: 1fr 1fr; }
.galeri[data-adet="2"] li:first-child { grid-column: span 1; grid-row: span 1; }
.galeri[data-adet="1"] { grid-template-columns: 1fr; grid-auto-rows: 340px; }
.galeri[data-adet="1"] li:first-child { grid-column: span 1; grid-row: span 1; }
.galeri-kare { display: block; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
.galeri-kare img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.galeri-kare:hover img { transform: scale(1.04); }

/* --- Kart ızgarası --- */
.kartlar { display: grid; gap: var(--b6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--b6); }
.kart {
  display: block; height: 100%; color: var(--metin);
  background: var(--zemin-kart); border: var(--cizgi);
  border-radius: 18px; overflow: hidden;
}
.kart:hover { color: var(--metin); border-color: var(--aksan); }
.kart-gorsel { position: relative; display: block; height: 210px; background: var(--zemin-alt); }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kart-rozet {
  position: absolute; top: 14px; left: 14px;
  background: var(--aksan); color: var(--aksan-metin);
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-cip);
}
.kart-govde { display: block; padding: var(--b6) 26px 28px; }
.kart-ad { display: block; font-family: var(--baslik-font); font-weight: 800; font-size: 21px; }
.kart-ozet { display: block; font-size: 14px; color: var(--metin-soluk); margin: 10px 0 16px; }
.kart-satir { display: flex; gap: var(--b3); justify-content: space-between; align-items: center; }
.kart-meta { font-weight: 800; font-size: 14px; }
.kart-ok { font-size: 13.5px; font-weight: 700; color: var(--aksan); white-space: nowrap; }

/* Kart mizacı hedef dikeyden gelir: kahvaltı kartı krem, akşam kartı koyu,
   otel kartı turkuaz — landing'de üç iş kolu kendi sesiyle görünür
   (design/Anasayfa.dc.html). */
.kart[data-dikey="kahvalti"] { background: #F7F4EC; border-color: #E3DCCA; --aksan: #5A6B33; --aksan-metin: #F7F4EC; --metin-soluk: #5C594F; }
.kart[data-dikey="kahvalti"] .kart-ad, .kart[data-dikey="kahvalti"] .kart-meta { color: #2B2A24; }
.kart[data-dikey="aksam"] { background: #241C15; border-color: #3A2E22; --aksan: #D98E4A; --aksan-metin: #241C15; --metin-soluk: #C9B896; }
.kart[data-dikey="aksam"] .kart-ad { color: #F2EBE0; font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-size: 20px; }
.kart[data-dikey="aksam"] .kart-meta { color: #C9B896; font-weight: 500; font-size: 12.5px; }
.kart[data-dikey="otel"] { background: #F3FAFB; border-color: #CFE4E8; --aksan: #1E7A8C; --aksan-metin: #F3FAFB; --metin-soluk: #3E6472; }
.kart[data-dikey="otel"] .kart-ad { color: #123B4D; }
.kart[data-dikey="otel"] .kart-meta { color: #3E6472; font-weight: 500; font-size: 12.5px; }

/* --- Numaralı özellikler (landing) --- */
.blok-ozellik-numarali {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Izgara öğesinin varsayılan min-width'i `auto`dur: içindeki ikinci ızgara
   kendi en-çok-içerik genişliğine şişer ve sayfayı yatay kaydırtır. */
.blok-ozellik-numarali > * { min-width: 0; }
.numaralilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; min-width: 0; }
.numarali { display: flex; gap: 14px; padding: 18px 0; border-top: var(--cizgi); }
.numarali-no {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--zemin-alt); color: var(--aksan);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.numarali-ad { display: block; font-weight: 800; font-size: 15px; }
.numarali-aciklama { display: block; font-size: 13.5px; line-height: 1.55; color: var(--metin-soluk); margin-top: 4px; }
.yan-alinti { margin: 28px 0 0; padding: var(--b6) 28px; background: var(--zemin); border: var(--cizgi); border-radius: 14px; }
.yan-alinti blockquote { margin: 0; }
.yan-alinti blockquote p { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 17px; margin: 0; }
.yan-alinti blockquote p::before { content: "\201C"; }
.yan-alinti blockquote p::after { content: "\201D"; }
.yan-alinti figcaption { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: var(--metin-soluk); }

/* --- Sosyal / puan kartları --- */
.sosyal-liste { display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--b6); }
.sosyal-kart {
  display: block; height: 100%; color: var(--metin);
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 14px; padding: 18px 20px;
}
a.sosyal-kart:hover { color: var(--metin); border-color: var(--aksan); }
.sosyal-platform { display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--metin-soluk); }
.sosyal-buyuk { display: block; font-weight: 800; font-size: 19px; margin-top: 6px; overflow-wrap: anywhere; }
.sosyal-alt { display: block; font-size: 12.5px; color: var(--metin-soluk); margin-top: 3px; }
.sosyal-cta { display: block; font-size: 12.5px; font-weight: 700; color: var(--aksan); margin-top: 10px; }

/* --- Süreç adımları (Reçellerin Annesi) --- */
.adimlar { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 40px; }
.adim { display: block; background: var(--zemin); border: var(--cizgi); border-radius: var(--r-kart); overflow: hidden; }
.adim-gorsel { position: relative; display: block; height: 190px; background: var(--zemin-alt); }
.adim-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.adim-no {
  position: absolute; top: var(--b3); left: var(--b3);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--aksan); color: var(--aksan-metin);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.adim-govde { display: block; padding: 14px 16px 16px; }
.adim-ad { display: block; font-family: var(--baslik-font); font-weight: 700; font-size: 16px; }
.adim-aciklama { display: block; font-size: 12.5px; line-height: 1.55; color: var(--metin-soluk); margin-top: 4px; }
.motto {
  font-family: "Source Serif 4", Georgia, serif; font-style: italic;
  font-size: clamp(16px, 2.6vw, 19px); line-height: 1.7; color: var(--aksan);
  margin: 36px auto 0; max-width: 640px; text-align: center;
}

/* --- Instagram bandı --- */
.blok-instagram {
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.insta-metin h2 { margin-top: var(--b3); }
.insta-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.insta-izgara li { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--zemin-alt); }
.insta-izgara img { width: 100%; height: 100%; object-fit: cover; }
.insta-izgara:empty { display: none; }

/* --- Özellik listesi --- */
.ozellikler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: var(--b6); }
.ozellik {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: var(--r-cip);
  padding: 10px 18px; font-size: 13.5px; font-weight: 700;
}
.ozellik::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--aksan-ikinci); flex: none; }

/* --- Alıntı --- */
.blok-alinti figure { margin: 0; max-width: 720px; margin-inline: auto; }
.blok-alinti blockquote {
  margin: 0; padding: var(--b6) 28px;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 14px;
}
.blok-alinti blockquote p { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 18px; margin: 0; }
.blok-alinti figcaption { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; margin-top: var(--b3); font-size: 12.5px; color: var(--metin-soluk); }
.alinti-ad { font-weight: 700; }
.yildiz { color: var(--turuncu); letter-spacing: 0.08em; }

/* --- CTA --- */
/* Koyu şerit. Metin rengi --aksan-metin DEĞİL: akşam mizacında o renk
   koyudur (amber düğme üstündeki yazı için), koyu zeminde okunmaz. */
.blok-cta {
  display: flex; flex-wrap: wrap; gap: var(--b6);
  align-items: center; justify-content: space-between;
  background: var(--derin) !important; color: #F4FAFA;
}
.blok-cta h2, .blok-cta .govde { color: #F4FAFA; }
.blok-cta .govde { opacity: 0.85; }
.blok-cta .dugme--ikincil { border-color: var(--aksan); color: #F4FAFA; }
.blok-cta .dugme--ikincil:hover { background: var(--aksan); color: var(--aksan-metin); }
.cta-eylem { display: flex; flex-wrap: wrap; gap: var(--b3); }

/* --- Konum --- */
.blok-konum {
  display: grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.konum-harita { border-radius: var(--r-kart); overflow: hidden; border: var(--cizgi); }
.konum-harita iframe { display: block; width: 100%; min-height: 320px; height: 100%; border: 0; }
.blok-konum .konum-tel a { font-weight: 700; font-size: 18px; min-height: 44px; display: inline-flex; align-items: center; }
.saatler { font-size: 14px; color: var(--metin-soluk); max-width: 320px; }
/* Gün satırları alt alta; her satırda gün solda, aralık sağda.
   Tek satırlık hâl (yedi gün aynıysa) <p class="saatler">. */
ul.saatler { display: flex; flex-direction: column; }
.saatler li, p.saatler { display: flex; gap: var(--b4); justify-content: space-between; padding: 3px 0; }
.saatler li[data-bugun] { font-weight: 800; color: var(--metin); }

/* --- Menü önizleme --- */
.onizleme-ust { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; align-items: baseline; }
.onizleme-ust .daha { font-size: 13px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.onizleme-liste { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 30px; }
.onizleme-kart { display: block; background: var(--zemin-kart); border: var(--cizgi); border-radius: var(--r-kart); overflow: hidden; }
.onizleme-gorsel { display: block; height: 170px; background: var(--zemin-alt); }
.onizleme-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.onizleme-govde { display: block; padding: var(--b4) 18px 18px; }
.onizleme-ust-satir { display: flex; gap: var(--b2); justify-content: space-between; align-items: baseline; }
.onizleme-kart .kalem-ad { font-family: var(--baslik-font); font-weight: 700; font-size: 16px; }
.onizleme-kart .kalem-fiyat { font-weight: 800; color: var(--aksan); white-space: nowrap; }
.onizleme-kart .kalem-aciklama { display: block; font-size: 12.5px; color: var(--metin-soluk); margin-top: 5px; }

/* --- Rozetler --- */
.rozetler { display: flex; flex-wrap: wrap; gap: var(--b1); margin-top: auto; padding-top: 6px; }
.etiket {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-cip);
  color: var(--etiket); background: var(--etiket-zemin);
}
.alerjen {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-cip);
  color: var(--turuncu); background: var(--turuncu-zemin);
}
/* İkonlar renkle değil ŞEKİLLE ayrışır (tasarım sistemi §Rozetler). */
.alerjen-ikon {
  width: 11px; height: 11px; flex: none;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.alerjen--gluten .alerjen-ikon { -webkit-mask-image: var(--ikon-gluten); mask-image: var(--ikon-gluten); }
.alerjen--sut .alerjen-ikon { -webkit-mask-image: var(--ikon-sut); mask-image: var(--ikon-sut); }
.alerjen--yumurta .alerjen-ikon { -webkit-mask-image: var(--ikon-yumurta); mask-image: var(--ikon-yumurta); }
.alerjen--findik .alerjen-ikon { -webkit-mask-image: var(--ikon-findik); mask-image: var(--ikon-findik); }
.alerjen--susam .alerjen-ikon { -webkit-mask-image: var(--ikon-susam); mask-image: var(--ikon-susam); }
:root {
  --ikon-gluten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2V14M5 5L8 3L11 5M5 8L8 6L11 8M5 11L8 9L11 11'/%3E%3C/svg%3E");
  --ikon-sut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 2H10V4L12 7V14H4V7L6 4Z'/%3E%3C/svg%3E");
  --ikon-yumurta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M8 3C10.5 3 12 6 12 9C12 11.8 10.2 13.5 8 13.5C5.8 13.5 4 11.8 4 9C4 6 5.5 3 8 3Z'/%3E%3C/svg%3E");
  --ikon-findik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M8 3C11 3 12.5 5.5 12.5 8C12.5 11 10.5 13.5 8 13.5C5.5 13.5 3.5 11 3.5 8C3.5 5.5 5 3 8 3ZM8 3V6'/%3E%3C/svg%3E");
  --ikon-susam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cellipse cx='5.5' cy='6' rx='2' ry='3'/%3E%3Cellipse cx='10' cy='9.5' rx='2' ry='3'/%3E%3C/svg%3E");
}
.sinirsiz {
  font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: var(--r-cip);
  border: 1px solid currentColor; color: var(--etiket); white-space: nowrap;
}
.dikey-rozet {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-rozet);
  color: var(--aksan); background: var(--zemin-alt);
}
.dil-etiket {
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border: var(--cizgi); border-radius: var(--r-rozet); color: var(--metin-soluk);
}

/* --- Serpme kahvaltı --- */
.serpme { background: var(--zemin-kart); border: var(--cizgi); border-radius: 18px; overflow: hidden; }
.serpme-ust {
  display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; align-items: flex-start;
  padding: 22px var(--b5) 18px; background: var(--zemin-alt);
}
.serpme-ust h2, .serpme-ust h3 { margin: 0; font-weight: 800; font-size: 24px; }
.serpme-fiyat { margin: 0; text-align: right; white-space: nowrap; }
.serpme-fiyat strong { display: block; font-size: 28px; font-weight: 800; line-height: 1; }
.serpme-fiyat span { font-size: 11px; color: var(--metin-soluk); }
.cipler { display: flex; gap: var(--b2); overflow-x: auto; padding: var(--b3) var(--b5); scrollbar-width: none; }
.cipler::-webkit-scrollbar { display: none; }
.cip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 8px 14px; border-radius: var(--r-cip);
  border: 1px solid var(--cizgi-renk); background: var(--zemin-kart);
  font-size: 12px; font-weight: 700; color: var(--metin-soluk); cursor: pointer;
}
.cip[aria-pressed="true"], .cip[data-aktif] { background: var(--aksan); border-color: var(--aksan); color: var(--aksan-metin); }
.cip-sayi { opacity: 0.65; font-weight: 500; }
.serpme-grup { padding: var(--b4) var(--b5); border-top: var(--cizgi); scroll-margin-top: 140px; }
.grup-ust { display: flex; justify-content: space-between; align-items: baseline; }
.grup-ust h4 { margin: 0; color: var(--aksan); letter-spacing: 0.05em; text-transform: uppercase; }
.grup-sayi { font-size: 10px; color: var(--metin-soluk); }
.serpme-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Kart boyutu sabit: satırda tek kart kalsa da büyümez
   (tasarım sistemi §Kart boyut kuralı). */
.serpme-kalem {
  flex: 0 1 calc(50% - 3px); min-width: 150px; min-height: 104px;
  display: flex; flex-direction: column;
  background: var(--zemin); border: var(--cizgi); border-radius: 10px;
  padding: var(--b2) 10px;
}
.kalem-ust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kalem-ad { font-weight: 700; font-size: 12.5px; }
.kalem-aciklama {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 11px; line-height: 1.4; color: var(--metin-soluk); margin-top: 2px;
}
.serpme-kosul { padding: var(--b4) var(--b5) 18px; margin: 0; background: var(--zemin-alt); font-size: 11.5px; color: var(--metin-soluk); }

/* --- Menü kategorileri --- */
.menu-kategori { padding-top: 18px; scroll-margin-top: 150px; }
.kategori-ust { display: flex; justify-content: space-between; align-items: baseline; }
.kategori-ust h3 { margin: 0; }
.kategori-sayi { font-size: 10px; color: var(--metin-soluk); }
.kategori-not { font-size: 12.5px; color: var(--metin-soluk); }
.menu-liste { display: flex; flex-direction: column; gap: 10px; margin-top: var(--b3); }
.menu-kalem {
  display: flex; gap: var(--b3); align-items: center; overflow: hidden;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 14px;
  padding: 0 14px 0 0;
}
.menu-kalem:not([data-onizleme]) { padding-left: 14px; }
.menu-kalem[data-onizleme] { cursor: pointer; }
.kalem-gorsel { flex: none; align-self: stretch; aspect-ratio: 1; min-height: 64px; }
.kalem-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kalem-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: var(--b3) 0; }
.kalem-fiyat { flex: none; font-weight: 800; font-size: 14.5px; }

/* --- Yorumlar --- */
.yorum-ust { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; align-items: center; }
.puan-rozeti {
  display: inline-flex; align-items: center; gap: var(--b2); margin: 0;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: var(--r-cip);
  padding: 9px 16px; font-size: 13px; color: var(--metin-soluk);
}
.yorum-izgara { display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 26px; }
.yorum {
  margin: 0; display: flex; flex-direction: column;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 14px; padding: var(--b5) 22px;
}
.yorum blockquote { margin: 0; flex: 1; }
.yorum blockquote p { font-size: 14.5px; }
.yorum blockquote p::before { content: "\201C"; }
.yorum blockquote p::after { content: "\201D"; }
.yorum figcaption { display: flex; flex-wrap: wrap; gap: var(--b2) var(--b3); align-items: center; margin-top: var(--b4); font-size: 12px; color: var(--metin-soluk); }
.yorum-ad { font-weight: 800; color: var(--metin); }

/* --- Ürün ızgarası --- */
.urun-liste { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: var(--b6); }
.urun-kart {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 14px;
}
.urun-kart[data-tukendi] { opacity: 0.62; }
.urun-gorsel { position: relative; display: block; height: 160px; background: var(--zemin-alt); }
.urun-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.urun-rozet {
  position: absolute; top: var(--b3); left: var(--b3);
  background: var(--derin); color: var(--aksan-metin);
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-cip);
}
.urun-govde { display: flex; flex-direction: column; flex: 1; padding: var(--b4) 18px 18px; }
.urun-ust { display: flex; gap: var(--b2); justify-content: space-between; align-items: baseline; }
.urun-ust h3 { margin: 0; font-size: 17.5px; }
.urun-fiyat { font-weight: 800; color: var(--aksan); white-space: nowrap; }
.urun-birim { font-size: 12px; color: var(--metin-soluk); margin: 3px 0 0; }
.urun-aciklama { font-size: 12.5px; color: var(--metin-soluk); margin: var(--b2) 0 0; }
.urun-siparis { margin-top: var(--b3); width: 100%; font-size: 12.5px; }
.blok-daha { margin-top: var(--b6); }

/* --- Kampanya kartı (tasarım sistemi §84 sırası) --- */
.kampanya-izgara { display: grid; gap: var(--b5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; margin-top: var(--b6); }
.kampanya-kart { background: var(--zemin-kart); border: var(--cizgi); border-radius: 18px; overflow: hidden; }
.kampanya-kart[data-sona-erdi] { opacity: 0.72; }
.kampanya-kart[data-tur="fix-menu"] {
  background: #241C15; color: #F2EBE0; border-color: #3A2E22;
  --metin-soluk: #C9B896; --aksan: #D98E4A; --cizgi-renk: #3A2E22;
}
.kampanya-kart[data-tur="fix-menu"] h3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 900; }
.kampanya-gorsel { height: 170px; }
.kampanya-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kampanya-govde { padding: var(--b5) 22px 22px; }
.kampanya-ust { display: flex; gap: var(--b3); justify-content: space-between; align-items: flex-start; }
.kampanya-ust h3 { margin: 0; font-size: 20px; }
.kazanc-kutu { flex: none; text-align: right; }
.kazanc-alt { display: block; font-size: 10.5px; color: var(--metin-soluk); margin-top: 3px; }
.kampanya-kart[data-tur="fix-menu"] .kazanc {
  background: none; color: var(--aksan);
  font-family: "Archivo", system-ui, sans-serif; font-size: 22px; font-weight: 900; padding: 0;
}
.kazanc {
  display: inline-block; white-space: nowrap; border-radius: var(--r-cip);
  background: var(--yesil-zemin); color: var(--yesil);
  font-size: 12px; font-weight: 800; padding: 6px 13px;
}
.dikey-rozetler { display: flex; flex-wrap: wrap; gap: var(--b1); margin-top: 10px; }
.avantajlar { display: flex; flex-direction: column; gap: var(--b2); margin-top: var(--b4); }
.avantaj { display: flex; gap: 9px; font-size: 13.5px; color: var(--metin-soluk); line-height: 1.5; }
.avantaj::before { content: "✓"; color: var(--yesil); font-weight: 800; flex: none; }
.kurs { padding: var(--b3) 0; border-top: var(--cizgi); }
.kurs-ad { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aksan); }
.kurs-kalemler { display: block; font-size: 13px; line-height: 1.7; margin-top: 4px; }
.etkinlik { display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--b4); }
.etkinlik dt { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin-soluk); }
.etkinlik dd { font-weight: 800; margin-top: 2px; }
.partner {
  display: flex; align-items: center; gap: var(--b3); margin-top: var(--b4);
  background: var(--zemin); border: var(--cizgi); border-radius: 10px; padding: 10px 14px;
}
.partner-logo { width: 56px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--cizgi-renk); border-radius: 7px; }
.partner-logo img { max-height: 100%; width: auto; }
.partner-ad { font-weight: 800; font-size: 13.5px; }
.gecerlilik { font-size: 12px; color: var(--metin-soluk); margin: var(--b3) 0 0; }
.sona-erdi {
  display: inline-block; margin: var(--b3) 0 0; padding: 6px 13px;
  border-radius: var(--r-cip); background: var(--zemin-alt); color: var(--metin-soluk);
  font-size: 11.5px; font-weight: 800;
}
/* "Nasıl yararlanılır" şeridi atlanamaz — her kartta, vurgulu kutuda. */
.nasil {
  display: flex; align-items: center; gap: 10px; margin: var(--b4) 0 0;
  background: var(--zemin); border: var(--cizgi); border-radius: 10px; padding: 11px 14px;
  font-size: 12.5px;
}
.kampanya-kart[data-tur="fix-menu"] .nasil { background: #33261A; }
.nasil-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--aksan); flex: none; }
.kosullar { font-size: 11px; line-height: 1.6; color: var(--metin-soluk); margin: var(--b3) 0 0; }
.filtre-cipler { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b5); }
.bos-hal {
  max-width: 560px; margin: var(--b6) auto 0; text-align: center;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 18px;
  padding: clamp(32px, 6vw, 56px);
}
.bos-baslik { font-weight: 800; font-size: 19px; }

/* --- Modal (oda detayı + menü quick-preview) --- */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(0px, 2vw, 24px); }
.modal[hidden] { display: none; }
.modal-perde { position: absolute; inset: 0; background: rgba(13, 44, 59, 0.78); }
.modal-kutu {
  position: relative; z-index: 1; width: 100%; max-width: 680px;
  max-height: 100%; overflow: auto; display: flex; flex-direction: column;
  background: var(--zemin-kart); color: var(--metin);
  border-radius: clamp(0px, 2vw, 20px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}
.modal-kapat {
  position: absolute; top: var(--b3); right: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(13, 44, 59, 0.55); color: #F3FAFB;
  display: flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer;
}
.modal-galeri { position: relative; flex: none; height: 300px; background: var(--zemin-alt); }
.modal-galeri .modal-kare { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.modal-galeri .modal-kare:first-child { display: block; }
.modal-galeri .modal-kare[data-aktif] { display: block; }
.modal-galeri:empty { display: none; }
.galeri-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #123B4D;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; cursor: pointer;
}
.galeri-ok[data-yon="onceki"] { left: 10px; }
.galeri-ok[data-yon="sonraki"] { right: 10px; }
.modal-govde { padding: 22px var(--b6) 26px; }
.modal-ust { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; align-items: baseline; }
.modal-ust h3 { margin: 0; font-size: 23px; }
.kunye { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 18px; }
.kunye > div { background: var(--zemin); border: var(--cizgi); border-radius: 10px; padding: 10px 12px; }
.kunye dt { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin-soluk); }
.kunye dd { font-weight: 700; font-size: 13.5px; margin-top: 3px; }
.donanim { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--b4); }
.donanim li { font-size: 11.5px; font-weight: 700; color: var(--yesil); background: var(--yesil-zemin); border-radius: var(--r-cip); padding: 4px 11px; }
.modal-eylem { display: flex; gap: 10px; margin-top: 22px; }
.modal-eylem .dugme { flex: 1; }
body[data-modal-acik] { overflow: hidden; }

/* --- Footer --- */
.alt {
  display: grid; gap: var(--b6) clamp(24px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: clamp(40px, 6vw, 64px) max(var(--bolum-yatay), (100% - var(--genislik)) / 2) 28px;
  background: var(--footer); color: var(--footer-metin);
  font-size: 13.5px;
}
.alt a { color: var(--footer-metin); min-height: 44px; display: inline-flex; align-items: center; }
.alt a:hover { color: #FFFFFF; }
.alt .marka-ad { display: block; color: #FFFFFF; margin-bottom: var(--b3); }
.alt .saatler { color: inherit; }
.alt .saatler li[data-bugun] { color: #FFFFFF; }
.sosyal { display: flex; flex-direction: column; gap: var(--b2); }
.alt-telif { grid-column: 1 / -1; margin: 0; padding-top: var(--b5); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; opacity: 0.75; }

/* --- Mobil --- */
@media (max-width: 860px) {
  .menu-dugme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; cursor: pointer;
  }
  .menu-cizgi, .menu-cizgi::before, .menu-cizgi::after {
    content: ""; display: block; width: 22px; height: 2px;
    background: var(--metin); border-radius: 2px; transition: transform 0.2s;
  }
  .menu-cizgi { position: relative; }
  .menu-cizgi::before { position: absolute; top: -7px; }
  .menu-cizgi::after { position: absolute; top: 7px; }
  .menu-dugme[aria-expanded="true"] .menu-cizgi { background: transparent; }
  .menu-dugme[aria-expanded="true"] .menu-cizgi::before { transform: translateY(7px) rotate(45deg); }
  .menu-dugme[aria-expanded="true"] .menu-cizgi::after { transform: translateY(-7px) rotate(-45deg); }

  /* JS yoksa menü açık kalır — kapalı menüyü açacak bir şey olmadığında
     gezinmeyi büsbütün kaybetmek kabul edilemez. */
  html[data-js] .nav[hidden] { display: none; }
  .nav {
    flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: var(--b2); padding-top: var(--b3);
  }
  .nav > a { padding: var(--b2) 0; }
  .dil { align-self: flex-start; }
  .nav-wa { align-self: flex-start; }
  .serpme-kalem { flex: 1 1 100%; }
  .galeri li:first-child { grid-column: span 2; grid-row: span 1; }
  .modal-kutu { max-width: none; height: 100%; border-radius: 0; }
  .modal-galeri { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Prototiplerdeki küçük bileşenler --- */

/* Hero altındaki güven satırı: puanlar ve takipçi sayısı (Anasayfa). */
.hero-guven {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  margin-top: clamp(28px, 5vw, 56px); font-size: 13px; color: var(--metin-soluk);
}
.hero-guven li { display: inline-flex; align-items: center; gap: 6px; }
.hero-guven li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--aksan-ikinci); margin-right: 10px;
}
.hero-guven strong { font-weight: 800; color: var(--metin); }

/* Hero eylem satırındaki bilgi rozeti ("Hafta sonu erken gelin"). */
.hero-eylem { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-rozet {
  background: color-mix(in srgb, var(--zemin-kart) 90%, transparent);
  border: var(--cizgi); border-radius: var(--r-cip);
  padding: 10px 18px; font-size: 13px; font-weight: 700;
}

/* Bölüm başlığının yanındaki açıklama ("Karta tıklayın — galeri ve özellikler"). */
.bolum-ust { display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: space-between; align-items: baseline; }
.bolum-ust > *:first-child { margin-bottom: 0; }
.bolum-not { font-size: 13px; color: var(--metin-soluk); }

/* Liste altındaki not kutusu (mangal notu, sipariş koşulları). */
.blok-not, .siparis-not {
  margin-top: var(--b5); padding: 14px 18px;
  background: var(--zemin-kart); border: var(--cizgi); border-radius: 12px;
  font-size: 13px; line-height: 1.65; color: var(--metin-soluk);
}

/* Sona eren kampanyalar bölümü. */
.arsiv { margin-top: clamp(40px, 7vw, 56px); }
.arsiv .kampanya-izgara { opacity: 0.82; }