/* ==========================================================================
   MAJORULTRA RESTAURANT — GLOBAL
   Tasarım sistemi referans ekranlardan ve kurumsal kimlik dosyasından türetildi.
   Karakter: beyaz zeminli, ferah, yüksek okunabilirlikte, ticari.
   Marka paleti css/marka.css'ten gelir (kaynak _dev/marka.json, karar #23);
   burada hex YAZILMAZ. Koyu ve birincil renk yalnızca CTA, başlık, banner ve
   aktif durumda; zemin açık.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENLAR
   -------------------------------------------------------------------------- */
:root {
  /* — MARKA —
     Değerler css/marka.css'ten gelir (üretilmiş; kaynak _dev/marka.json).
     Buraya hex YAZILMAZ: marka değiştiğinde tek dosya değişsin (karar #23).
     Saydam tonlar rgb üçlüsünden kurulur ki kendi alfaları korunsun. */
  --kirmizi-700: var(--marka-birincil-700);
  --kirmizi-600: var(--marka-birincil-600);
  --kirmizi-500: var(--marka-birincil-500);
  --kirmizi-400: var(--marka-birincil-400);
  --kirmizi-sis: rgba(var(--marka-birincil-rgb), .08);
  --kirmizi-sis-2: rgba(var(--marka-birincil-rgb), .15);

  --lacivert-900: var(--marka-koyu-900);
  --lacivert-800: var(--marka-koyu-800);
  --lacivert-700: var(--marka-koyu-700);
  --lacivert-600: var(--marka-koyu-600);
  --lacivert-sis: rgba(var(--marka-koyu-rgb), .06);

  --altin-700: var(--marka-ikincil-700);
  --altin-600: var(--marka-ikincil-600);
  --altin-500: var(--marka-ikincil-500);
  --altin-400: var(--marka-ikincil-400);
  --altin-sis: rgba(var(--marka-ikincil-rgb), .18);

  /* — YÜZEY — */
  --zemin: #FAFAFA;
  --zemin-2: #F1F3F6;
  --yuzey: #FFFFFF;
  --yuzey-2: #F7F8FA;
  --cizgi: #E8EAEE;
  --cizgi-koyu: #D8DCE3;

  /* — METİN — */
  --metin: var(--marka-koyu-800);
  --metin-2: #5B6676;
  --metin-3: #8A94A3;

  /* DÖRDÜNCÜ TON TANIMSIZDI (Sprint 10.3).

     ÖLÇÜLEN KUSUR: tema üç yerde `var(--metin-4)` yazıyor (avantajlı
     menüdeki liste fiyatı, paket kartındaki üstü çizili tutar, ödeme
     sayfasındaki alt çizgi) ama böyle bir değişken hiçbir yerde tanımlı
     değil. Tarayıcı bildirimi sessizce atıyor: o metinler soluk DEĞİL,
     çevresindeki metinle aynı renkte çıkıyordu — yani "üstü çizili eski
     fiyat" ile "ödenecek fiyat" aynı ağırlıkta görünüyordu.

     YENİ BİR RENK UYDURULMADI, en soluk tona bağlandı. Uydurmak bir tasarım
     kararıdır ve tasarım `theme-reference`ın işidir; burada yapılan şey,
     temanın açıkça istediği "soluk" niteliğini var olan bir tonla
     karşılamak. Tema erişilebilir olduğunda gerçek dördüncü ton
     tanımlanabilir (`B-048`). */
  --metin-4: var(--metin-3);
  --metin-ters: #FFFFFF;

  /* — DURUM — */
  --basari-500: #15A34A;
  --basari-sis: rgba(21, 163, 74, .10);
  --uyari-500: #E8A200;
  --uyari-sis: rgba(255, 193, 7, .18);
  --hata-500: #DC2626;
  --hata-sis: rgba(220, 38, 38, .08);
  --bilgi-sis: rgba(11, 29, 51, .05);

  /* — ARALIK — */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 40px;  --sp-8: 56px;
  --sp-9: 72px;  --sp-10: 96px; --sp-11: 128px;

  /* — TİPOGRAFİ — */
  --font-baslik: "Archivo", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-metin: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-dev:   clamp(2.35rem, 5.2vw, 4rem);
  --fs-h1:    clamp(1.85rem, 3.4vw, 2.75rem);
  --fs-h2:    clamp(1.45rem, 2.5vw, 2.05rem);
  --fs-h3:    clamp(1.18rem, 1.8vw, 1.48rem);
  --fs-h4:    1.0625rem;
  --fs-lg:    1.0625rem;
  --fs-md:    0.9375rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.8125rem;
  --fs-micro: 0.6875rem;

  --ls-dev: -0.028em;
  --ls-baslik: -0.018em;
  --ls-etiket: 0.1em;

  /* — GEOMETRİ — */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* — GÖLGE — */
  --sh-1: 0 1px 2px rgba(11, 29, 51, .05);
  --sh-2: 0 1px 3px rgba(11, 29, 51, .06), 0 4px 12px rgba(11, 29, 51, .05);
  --sh-3: 0 2px 6px rgba(11, 29, 51, .06), 0 12px 32px rgba(11, 29, 51, .09);
  --sh-4: 0 24px 64px rgba(11, 29, 51, .18);
  --sh-kirmizi: 0 6px 18px -6px rgba(225, 6, 0, .45);

  /* — YERLEŞİM — */
  --kap: 1320px;
  --kap-dar: 820px;
  --oluk: clamp(16px, 3.4vw, 40px);
  --header-h: 84px;

  /* — HAREKET — */
  --e-cik: cubic-bezier(.16, 1, .3, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);
  --e-yay: cubic-bezier(.34, 1.42, .64, 1);
  --t-1: 120ms;
  --t-2: 200ms;
  --t-3: 320ms;

  --z-yapiskan: 40;
  --z-header: 60;
  --z-perde: 80;
  --z-panel: 90;
  --z-tost: 120;

  --mu-simsek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");

  /* — LACİVERT PANEL İÇİ: koyu zeminde metin ve çizgi — */
  --lacivert-cizgi: rgba(255, 255, 255, .14);
  --ters-2: rgba(255, 255, 255, .88);
  --ters-3: rgba(255, 255, 255, .70);
  --ters-4: rgba(255, 255, 255, .56);

  --basari-600: #12873E;
  --basari-400: #3FBF6D;
  --hata-600: #B91C1C;
  --hata-400: #EF4444;

  /* — SATIR YÜKSEKLİĞİ (eski bileşenler için) — */
  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-normal: 1.55;
  --lh-loose: 1.72;

  --kap-genis: 1440px;
  --kesik: 0px;
  --kesik-sm: 0px;
  --arac-h: 0px;
}

/* Lacivert panel: koyu zeminli bölümler içinde semantik değişkenler döner.
   Böylece kart, form ve buton bileşenleri değişmeden çalışır. */
.mu-lacivert-panel {
  --yuzey: var(--lacivert-700);
  --yuzey-2: var(--lacivert-600);
  --zemin: var(--lacivert-800);
  --zemin-2: var(--lacivert-700);
  --cizgi: var(--lacivert-cizgi);
  --cizgi-koyu: rgba(255, 255, 255, .24);
  --metin: #FFFFFF;
  --metin-2: var(--ters-3);
  --metin-3: var(--ters-4);
  background: var(--lacivert-800);
  color: #fff;
  color-scheme: dark;
}
.mu-lacivert-panel h1, .mu-lacivert-panel h2,
.mu-lacivert-panel h3, .mu-lacivert-panel h4 { color: #fff; }
.mu-lacivert-panel .mu-fiyat { color: #fff; }
.mu-lacivert-panel .mu-etiket { color: #fff; }
.mu-lacivert-panel .mu-etiket::before { background: var(--altin-500); }

/* --------------------------------------------------------------------------
   2. SIFIRLAMA
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  min-height: 100vh;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-metin);
  font-size: var(--fs-md);
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.kilit { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--cizgi); }
::selection { background: var(--kirmizi-500); color: #fff; }

:focus-visible {
  outline: 3px solid rgba(225, 6, 0, .4);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. TİPOGRAFİ
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-baslik);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--ls-baslik);
  color: var(--metin);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 800; }
p { text-wrap: pretty; }

/* Marka başlığı — ağır, hafif eğik, sıkışık: hero ve kampanya başlıkları */
.mu-dev {
  font-family: var(--font-baslik);
  font-size: var(--fs-dev);
  font-weight: 900;
  font-style: italic;
  font-stretch: 88%;
  line-height: 1.02;
  letter-spacing: var(--ls-dev);
  text-transform: uppercase;
  color: var(--lacivert-800);
  text-wrap: balance;
}
.mu-dev em { font-style: italic; color: var(--kirmizi-500); }
.mu-dev--ters { color: #fff; }
.mu-dev--ters em { color: var(--altin-500); }

.mu-metin-lg { font-size: var(--fs-lg); line-height: 1.7; color: var(--metin-2); }
.mu-metin    { font-size: var(--fs-md); line-height: 1.72; color: var(--metin-2); }
.mu-metin-sm { font-size: var(--fs-sm); line-height: 1.62; color: var(--metin-2); }

/* Bölüm etiketi — şimşek + majüskül */
.mu-etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-baslik);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lacivert-800);
}
.mu-etiket::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  background: var(--kirmizi-500);
  -webkit-mask: var(--mu-simsek) center / contain no-repeat;
  mask: var(--mu-simsek) center / contain no-repeat;
}
.mu-etiket--sade::before { display: none; }
.mu-etiket--ters { color: #fff; }
.mu-etiket--ters::before { background: var(--altin-500); }

.mu-vurgu { color: var(--kirmizi-500); }
.mu-lacivert { color: var(--lacivert-800); }

/* --------------------------------------------------------------------------
   4. FİYAT — ₺179,90 (kuruş küçük ve yukarıda)
   -------------------------------------------------------------------------- */
.mu-fiyat {
  font-family: var(--font-baslik);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lacivert-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}
.mu-fiyat__s { font-weight: 700; margin-right: 1px; }
.mu-fiyat__k { font-size: .66em; font-weight: 700; margin-top: .06em; }
.mu-fiyat--eski {
  color: var(--metin-3);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.mu-fiyat--kirmizi { color: var(--kirmizi-500); }
.mu-fiyat--ters { color: #fff; }

/* --------------------------------------------------------------------------
   5. YERLEŞİM
   -------------------------------------------------------------------------- */
.mu-kap {
  width: 100%;
  max-width: var(--kap);
  margin-inline: auto;
  padding-inline: var(--oluk);
}
.mu-kap--dar { max-width: var(--kap-dar); }
.mu-kap--genis { max-width: var(--kap-genis); }

.mu-bolum { padding-block: clamp(36px, 5.4vw, 68px); }
.mu-bolum--sik { padding-block: clamp(24px, 3.4vw, 40px); }
.mu-bolum--gevsek { padding-block: clamp(48px, 7vw, 96px); }
.mu-bolum--beyaz { background: var(--yuzey); }
.mu-bolum--gri { background: var(--zemin-2); }

.mu-yigin { display: flex; flex-direction: column; }
.mu-yigin--2 { gap: var(--sp-2); }
.mu-yigin--3 { gap: var(--sp-3); }
.mu-yigin--4 { gap: var(--sp-4); }
.mu-yigin--5 { gap: var(--sp-5); }
.mu-yigin--6 { gap: var(--sp-6); }

.mu-izgara { display: grid; gap: var(--sp-4); }

/* Bölüm başlığı */
.mu-bolum-bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.mu-bolum-bas__sol { max-width: 64ch; display: flex; flex-direction: column; gap: 6px; }
.mu-bolum-bas__sol p { color: var(--metin-2); font-size: var(--fs-sm); }

/* Beyaz kart — sistemin temel kabı */
.mu-kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
}
.mu-kart--golge { box-shadow: var(--sh-2); }

/* Erişilebilirlik */
.mu-gizli-gorsel {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.mu-atla {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--kirmizi-500);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: var(--fs-sm);
  transition: transform var(--t-2) var(--e-cik);
}
.mu-atla:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   6. BUTONLAR
   -------------------------------------------------------------------------- */
.mu-btn {
  --btn-yuk: 46px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-yuk);
  padding: 0 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-metin);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1.5px solid transparent;
  transition: background var(--t-2) var(--e-std), color var(--t-2) var(--e-std),
              border-color var(--t-2) var(--e-std), transform var(--t-1) var(--e-std),
              box-shadow var(--t-2) var(--e-std), opacity var(--t-2);
}
.mu-btn:active:not(:disabled) { transform: translateY(1px); }
.mu-btn:disabled, .mu-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.mu-btn .mu-ikon { width: 18px; height: 18px; flex: none; }

.mu-btn--kirmizi { background: var(--kirmizi-500); color: #fff; box-shadow: var(--sh-kirmizi); }
.mu-btn--kirmizi:hover:not(:disabled) { background: var(--kirmizi-600); }
.mu-btn--kirmizi:disabled { box-shadow: none; }

.mu-btn--lacivert { background: var(--lacivert-800); color: #fff; }
.mu-btn--lacivert:hover:not(:disabled) { background: var(--lacivert-700); }

.mu-btn--altin { background: var(--altin-500); color: var(--lacivert-900); }
.mu-btn--altin:hover:not(:disabled) { background: var(--altin-400); }

.mu-btn--cizgi {
  background: var(--yuzey);
  border-color: var(--cizgi-koyu);
  color: var(--metin);
}
.mu-btn--cizgi:hover:not(:disabled) { border-color: var(--kirmizi-500); color: var(--kirmizi-500); }

.mu-btn--dolgu { background: var(--yuzey-2); color: var(--metin); border-color: var(--cizgi); }
.mu-btn--dolgu:hover:not(:disabled) { background: var(--zemin-2); border-color: var(--cizgi-koyu); }

.mu-btn--hayalet { background: transparent; color: var(--metin-2); }
.mu-btn--hayalet:hover:not(:disabled) { color: var(--kirmizi-500); background: var(--kirmizi-sis); }

.mu-btn--tehlike { background: var(--hata-500); color: #fff; }
.mu-btn--tehlike:hover:not(:disabled) { background: #B91C1C; }

.mu-btn--sm  { --btn-yuk: 36px; padding: 0 14px; font-size: var(--fs-xs); }
.mu-btn--lg  { --btn-yuk: 54px; padding: 0 28px; font-size: var(--fs-md); }
.mu-btn--tam { width: 100%; }

.mu-btn.is-yukleniyor { color: transparent !important; pointer-events: none; }
.mu-btn.is-yukleniyor::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: mu-don 700ms linear infinite;
}
.mu-btn--cizgi.is-yukleniyor::after,
.mu-btn--dolgu.is-yukleniyor::after,
.mu-btn--altin.is-yukleniyor::after,
.mu-btn--hayalet.is-yukleniyor::after { color: var(--metin); }
@keyframes mu-don { to { transform: rotate(360deg); } }

/* Metin bağlantısı */
.mu-bag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--kirmizi-500);
  transition: gap var(--t-2) var(--e-cik), color var(--t-2);
}
.mu-bag:hover { gap: 10px; color: var(--kirmizi-600); }
.mu-bag .mu-ikon { width: 15px; height: 15px; }

/* İkon butonu */
.mu-ibtn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  color: var(--metin-2);
  border: 1px solid transparent;
  transition: background var(--t-2), color var(--t-2), border-color var(--t-2);
}
.mu-ibtn:hover { background: var(--yuzey-2); color: var(--metin); }
.mu-ibtn .mu-ikon { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   7. ROZET · PUAN · ACI
   -------------------------------------------------------------------------- */
.mu-rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.mu-rozet .mu-ikon { width: 12px; height: 12px; }
.mu-rozet--kirmizi  { background: var(--kirmizi-500); color: #fff; }
.mu-rozet--lacivert { background: var(--lacivert-800); color: #fff; }
.mu-rozet--altin    { background: var(--altin-500); color: var(--lacivert-900); }
.mu-rozet--yesil    { background: var(--basari-sis); color: var(--basari-500); }
.mu-rozet--notr     { background: var(--yuzey-2); color: var(--metin-2); border: 1px solid var(--cizgi); }
.mu-rozet--hata     { background: var(--hata-sis); color: var(--hata-500); }

/* ÜRÜN ROZETİ VARYANTLARI (B-007). `ProductBadges`in beş varyantından yalnız
   `altin` tanımlıydı; kart sınıfı `mu-rozet--` + BadgeCode diye kurduğu için
   öteki dördü fotoğrafın üstünde taban stille, renksiz çiziliyordu.
   Rozet görselin üstünde durur (`.mu-urun__rozet`), bu yüzden kartta zaten
   kullanılan DOLU biçim izlenir (kirmizi · altin). Renk AİLESİ panelin aynı
   anlamlı paletinden gelir (`.ay-vitrin-rozet--*`): ates = kırmızı,
   fistik = başarı, safran = uyarı, kor = panelin turuncusu (orada da bir
   belirteç değil, sabit değer). Yeni renk uydurulmadı. */
.mu-rozet--ates     { background: var(--kirmizi-500); color: #fff; }
.mu-rozet--kor      { background: #C2410C; color: #fff; }
.mu-rozet--fistik   { background: var(--basari-600); color: #fff; }
.mu-rozet--safran   { background: var(--uyari-500); color: var(--lacivert-900); }

.mu-aci { display: inline-flex; gap: 2px; align-items: center; }
.mu-aci .mu-ikon { width: 13px; height: 13px; color: var(--cizgi-koyu); }
.mu-aci .is-dolu { color: var(--kirmizi-500); }

.mu-puan { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--metin-3); }
.mu-yildizlar { display: inline-flex; gap: 1px; color: var(--altin-500); }
.mu-yildizlar .mu-ikon { width: 13px; height: 13px; }
.mu-yildizlar .is-bos { color: var(--cizgi-koyu); }
.mu-puan__oy { font-weight: 600; }

/* --------------------------------------------------------------------------
   8. HEADER
   -------------------------------------------------------------------------- */
.mu-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--t-2) var(--e-std);
}
.mu-header.is-kaydi { box-shadow: 0 4px 20px -8px rgba(11, 29, 51, .18); }

.mu-header__ic {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* Logo — maskotlu kilit, header'dan taşar */
.mu-logo { flex: none; display: block; position: relative; }
.mu-logo img {
  width: auto;
  height: 66px;
  display: block;
  transition: transform var(--t-3) var(--e-yay);
}
.mu-logo:hover img { transform: scale(1.04) rotate(-1.5deg); }
@media (min-width: 1080px) {
  .mu-logo img { height: 104px; margin-block: -18px; }
}

/* Ana gezinti */
.mu-nav { display: none; margin-inline: auto; }
.mu-nav__liste { display: flex; align-items: center; gap: 2px; }
.mu-nav__bag {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin-2);
  transition: color var(--t-2), background var(--t-2);
}
.mu-nav__bag:hover { color: var(--metin); background: var(--yuzey-2); }
.mu-nav__bag[aria-current="page"] { color: var(--kirmizi-500); }
.mu-nav__bag[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: var(--kirmizi-500);
}

.mu-header__aks { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
/* Gezinti göründüğünde kendi auto kenarlarıyla ortalanır; aksiyonların da
   auto kenarı olursa denge bozulur. 1080'in altında gezinti display:none
   olduğu için auto kenar KALMALI — yoksa aksiyonlar sola yapışır. */
@media (min-width: 1080px) {
  .mu-nav + .mu-header__aks { margin-inline-start: 0; }
}

.mu-header__oge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin);
  transition: background var(--t-2);
}
.mu-header__oge:hover { background: var(--yuzey-2); }
.mu-header__oge-ikon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--cizgi-koyu);
  color: var(--lacivert-800);
  position: relative;
  flex: none;
}
.mu-header__oge-ikon .mu-ikon { width: 19px; height: 19px; }
.mu-header__oge-yazi { display: none; }
@media (min-width: 1080px) { .mu-header__oge-yazi { display: inline; } }

.mu-sepet-btn__sayac {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--kirmizi-500);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-baslik);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--yuzey);
  transform: scale(0);
  transition: transform var(--t-2) var(--e-yay);
}
.mu-sepet-btn.is-dolu .mu-sepet-btn__sayac { transform: scale(1); }
.mu-sepet-btn.is-atti .mu-sepet-btn__sayac { animation: mu-zipla 420ms var(--e-yay); }
@keyframes mu-zipla { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }

.mu-header__cta { display: none; }
.mu-hamburger { display: inline-grid; }

@media (min-width: 1080px) {
  .mu-nav { display: block; }
  .mu-hamburger { display: none; }
}

/* Gezinti ile aksiyonlar arasında yer kalmadan CTA'yı açma:
   1080–1399 arası menü tam görünür, "Hemen Sipariş Ver" ise gizlenir. */
@media (min-width: 1080px) and (max-width: 1399px) {
  .mu-nav__liste { gap: 0; }
  .mu-nav__bag { padding: 10px 10px; font-size: var(--fs-xs); }
  .mu-nav__bag[aria-current="page"]::after { left: 10px; right: 10px; }
  .mu-header__oge { gap: 7px; padding: 8px; }
  .mu-header__ic { gap: var(--sp-4); }
  .mu-logo img { height: 88px; margin-block: -10px; }
}
/* CTA göründüğü anda ikincil eylemler ikona iner: logo + tam gezinti +
   hesap/sepet yazısı + CTA birlikte 1320'lik kaba sığmıyor. Kural 1400'ün
   üstünün tamamında geçerli — .mu-kap 1320'de sabitlendiği için ekran
   büyüdükçe kapta yeni yer açılmaz. */
@media (min-width: 1400px) {
  .mu-header__cta { display: inline-flex; margin-inline-start: 8px; }
  .mu-header__oge-yazi { display: none; }
  .mu-header__oge { padding-inline: 10px; }
}

/* Hesap açılır menüsü */
.mu-hesap { position: relative; }
.mu-hesap__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-2) var(--e-std), transform var(--t-2) var(--e-cik), visibility var(--t-2);
}
.mu-hesap.is-acik .mu-hesap__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mu-hesap__bas { padding: 10px 12px 12px; border-bottom: 1px solid var(--cizgi); margin-bottom: 6px; }
.mu-hesap__bas strong { display: block; font-size: var(--fs-sm); color: var(--metin); }
.mu-hesap__bas span { font-size: var(--fs-xs); color: var(--metin-3); }
.mu-hesap__oge {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin-2);
  transition: background var(--t-1), color var(--t-1);
}
.mu-hesap__oge:hover { background: var(--yuzey-2); color: var(--metin); }
.mu-hesap__oge .mu-ikon { width: 17px; height: 17px; color: var(--metin-3); }
.mu-hesap__oge--cikis { color: var(--hata-500); }
.mu-hesap__oge--cikis .mu-ikon { color: currentColor; }

/* Üst duyuru şeridi */
.mu-serit { background: var(--lacivert-800); color: #fff; }
.mu-serit__ic {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 26px;
  padding-block: 9px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}
.mu-serit__ic > * { display: inline-flex; align-items: center; gap: 7px; }
.mu-serit .mu-ikon { width: 15px; height: 15px; color: var(--altin-500); }
.mu-serit a:hover { color: var(--altin-400); }
.mu-serit__gizle { display: none; }
@media (min-width: 760px) { .mu-serit__gizle { display: inline-flex; } }

/* --------------------------------------------------------------------------
   9. MOBİL PANEL
   -------------------------------------------------------------------------- */
.mu-perde {
  position: fixed;
  inset: 0;
  z-index: var(--z-perde);
  background: rgba(11, 29, 51, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-3) var(--e-std), visibility var(--t-3);
}
.mu-perde.is-acik { opacity: 1; visibility: visible; }

.mu-mobil {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-panel);
  width: min(380px, 88vw);
  background: var(--yuzey);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform var(--t-3) var(--e-cik);
  overscroll-behavior: contain;
  box-shadow: var(--sh-4);
}
.mu-mobil.is-acik { transform: translateX(0); }
.mu-mobil__bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--cizgi);
  flex: none;
}
.mu-mobil__bas img { height: 56px; width: auto; }
.mu-mobil__govde { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.mu-mobil__grup + .mu-mobil__grup { margin-top: var(--sp-5); }
.mu-mobil__grup-bas {
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: 8px;
}
.mu-mobil__bag {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--metin);
}
.mu-mobil__bag:hover, .mu-mobil__bag:focus-visible { background: var(--yuzey-2); }
.mu-mobil__bag[aria-current="page"] { color: var(--kirmizi-500); background: var(--kirmizi-sis); }
.mu-mobil__bag .mu-ikon { width: 16px; height: 16px; color: var(--metin-3); }
.mu-mobil__alt {
  flex: none;
  padding: var(--sp-5);
  border-top: 1px solid var(--cizgi);
  display: grid;
  gap: 10px;
  background: var(--yuzey-2);
}
.mu-mobil__tel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--metin-2);
}
.mu-mobil__tel .mu-ikon { width: 16px; height: 16px; color: var(--kirmizi-500); }

/* --------------------------------------------------------------------------
   10. ARAMA KATMANI
   -------------------------------------------------------------------------- */
.mu-arama {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: flex;
  justify-content: center;
  padding: max(9vh, 68px) var(--oluk) var(--sp-5);
  background: rgba(11, 29, 51, .42);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-2) var(--e-std), visibility var(--t-2);
}
.mu-arama.is-acik { opacity: 1; visibility: visible; }
.mu-arama__kutu {
  width: min(680px, 100%);
  align-self: flex-start;
  background: var(--yuzey);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  overflow: hidden;
  transform: translateY(-14px) scale(.985);
  transition: transform var(--t-3) var(--e-cik);
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 640px);
}
.mu-arama.is-acik .mu-arama__kutu { transform: none; }
.mu-arama__alan {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cizgi);
  flex: none;
}
.mu-arama__alan .mu-ikon { width: 21px; height: 21px; color: var(--kirmizi-500); flex: none; }
.mu-arama__alan input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--metin);
}
.mu-arama__alan input::placeholder { color: var(--metin-3); font-weight: 500; }
.mu-arama__esc {
  font-size: 11px;
  font-weight: 700;
  color: var(--metin-3);
  border: 1px solid var(--cizgi-koyu);
  border-radius: 5px;
  padding: 4px 7px;
  flex: none;
}
.mu-arama__sonuc { overflow-y: auto; padding: 8px; }
.mu-arama__grup-bas {
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
  padding: 10px 10px 6px;
}
.mu-arama__oge {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--t-1);
}
.mu-arama__oge:hover, .mu-arama__oge.is-secili { background: var(--yuzey-2); }
.mu-arama__oge img {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  flex: none;
}
.mu-arama__oge-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mu-arama__oge-ad { font-size: var(--fs-sm); font-weight: 800; color: var(--metin); }
.mu-arama__oge-kat { font-size: var(--fs-xs); color: var(--metin-3); }
.mu-arama__oge-fiyat { margin-inline-start: auto; font-size: var(--fs-sm); }
.mu-arama__ipucu {
  padding: 11px 18px;
  border-top: 1px solid var(--cizgi);
  font-size: var(--fs-xs);
  color: var(--metin-3);
  display: flex; gap: 16px; flex-wrap: wrap;
  flex: none;
  background: var(--yuzey-2);
}

/* --------------------------------------------------------------------------
   11. SAYFA BAŞLIĞI & KIRINTI
   -------------------------------------------------------------------------- */
.mu-sayfa-bas {
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  padding-block: clamp(22px, 3.2vw, 40px) clamp(20px, 3vw, 34px);
}
.mu-sayfa-bas__ic { display: grid; gap: var(--sp-3); max-width: 76ch; }
.mu-sayfa-bas h1 { font-size: var(--fs-h1); }
.mu-sayfa-bas p { font-size: var(--fs-md); color: var(--metin-2); max-width: 64ch; }
.mu-sayfa-bas a:not(.mu-btn) { color: var(--kirmizi-500); font-weight: 700; }

.mu-kirinti { margin-bottom: 2px; }
.mu-kirinti ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mu-kirinti li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--metin-3); }
.mu-kirinti li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--cizgi-koyu);
  border-right: 1.5px solid var(--cizgi-koyu);
  transform: rotate(45deg);
}
.mu-kirinti a { transition: color var(--t-1); }
.mu-kirinti a:hover { color: var(--kirmizi-500); }
.mu-kirinti [aria-current="page"] { color: var(--metin-2); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */

/* Sipariş çağrısı — footer'dan hemen önce gelen lacivert şerit */
.mu-footer-cagri { background: var(--lacivert-800); color: #fff; }
.mu-footer-cagri__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-block: clamp(28px, 4vw, 46px);
}
.mu-footer-cagri__soz { display: grid; gap: 10px; }
.mu-footer-cagri__soz .mu-dev { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.mu-footer-cagri__aks { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.mu-footer-cagri__tel {
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
.mu-footer-cagri__tel:hover:not(:disabled) { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }

.mu-footer { background: var(--yuzey); border-top: 1px solid var(--cizgi); }

/* İletişim sütunu */
.mu-footer__bilgi { display: grid; gap: var(--sp-4); }
.mu-footer__bilgi-sat { display: flex; gap: 11px; align-items: flex-start; }
.mu-footer__bilgi-sat .mu-ikon { width: 17px; height: 17px; color: var(--kirmizi-500); flex: none; margin-top: 2px; }
.mu-footer__bilgi-sat > span {
  font-size: var(--fs-sm);
  color: var(--metin-2);
  line-height: 1.6;
  min-width: 0;
}
.mu-footer__bilgi-sat strong {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: 3px;
}
.mu-footer__bilgi-sat a:hover { color: var(--kirmizi-500); }
.mu-footer__ust {
  display: grid;
  gap: var(--sp-7);
  padding-block: clamp(36px, 5vw, 60px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .mu-footer__ust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mu-footer__ust { grid-template-columns: 1.35fr repeat(3, .85fr) 1.3fr; gap: var(--sp-6); } }

.mu-footer__marka { display: grid; gap: var(--sp-4); align-content: start; }
.mu-footer__marka img { height: 92px; width: auto; }
.mu-footer__slogan {
  font-family: var(--font-baslik);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-style: italic;
  color: var(--lacivert-800);
}
.mu-footer__sosyal { display: flex; gap: 8px; }
.mu-footer__sosyal a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  color: var(--metin-2);
  transition: all var(--t-2);
}
.mu-footer__sosyal a:hover { color: #fff; background: var(--kirmizi-500); border-color: var(--kirmizi-500); }
.mu-footer__sosyal .mu-ikon { width: 17px; height: 17px; }

/* SEVİYE-BAĞIMSIZ SEÇİCİ (Sprint 8.6 erişilebilirlik geçişi).
   Tema bu başlıkları `h3` yazmıştı ve seçici de `h3` diyordu; ama başlık
   seviyesi bir GÖRÜNÜM değil, bir YAPI kararıdır. Sayfanın `h1`inden sonra
   gelen bu sütunlar `h2` olmalı — ölçüldü: /menu, /blog ve /sss sayfalarında
   `h1 > h3` atlaması vardı ve ekran okuyucuya eksik bir seviye duyuruyordu.
   Seçici ikisini de kapsıyor: markup düzeldi, görünüm değişmedi. */
.mu-footer__sutun :is(h2, h3) {
  font-family: var(--font-baslik);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--lacivert-800);
  margin-bottom: var(--sp-4);
}
.mu-footer__sutun li + li { margin-top: 9px; }
.mu-footer__sutun a { font-size: var(--fs-sm); color: var(--metin-2); transition: color var(--t-1); }
.mu-footer__sutun a:hover { color: var(--kirmizi-500); }

.mu-bulten__bas {
  font-family: var(--font-baslik);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--lacivert-800);
  margin-bottom: 8px;
}
.mu-bulten p { font-size: var(--fs-sm); color: var(--metin-2); margin-bottom: var(--sp-4); }

.mu-footer__alt {
  border-top: 1px solid var(--cizgi);
  padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.mu-footer__alt p { font-size: var(--fs-xs); color: var(--metin-3); }
.mu-footer__yasal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mu-footer__yasal a { font-size: var(--fs-xs); color: var(--metin-3); transition: color var(--t-1); }
.mu-footer__yasal a:hover { color: var(--kirmizi-500); }

.mu-odeme-simge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mu-odeme-simge img { height: 24px; width: auto; }

/* --------------------------------------------------------------------------
   13. ORTAK YARDIMCILAR
   -------------------------------------------------------------------------- */
.mu-ikon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mu-ikon--dolu { fill: currentColor; stroke: none; }

.mu-orta { text-align: center; }
.mu-orta .mu-bolum-bas { flex-direction: column; align-items: center; text-align: center; }
.mu-orta .mu-bolum-bas__sol { align-items: center; }
.mu-yok { display: none !important; }

/* Adet seçici — sepet, ürün detayı ve hesap kartlarında ortak */
.mu-adet {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--yuzey);
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: var(--r-sm);
}
.mu-adet__btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 5px;
  color: var(--metin-2);
  transition: background var(--t-1), color var(--t-1);
}
.mu-adet__btn .mu-ikon { width: 16px; height: 16px; }
.mu-adet__btn:hover:not(:disabled) { background: var(--yuzey-2); color: var(--kirmizi-500); }
.mu-adet__btn:disabled { opacity: .35; cursor: not-allowed; }
.mu-adet__deger {
  min-width: 30px;
  text-align: center;
  font-family: var(--font-baslik);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}
.mu-adet--sm { padding: 2px; }
.mu-adet--sm .mu-adet__btn { width: 28px; height: 28px; }
.mu-adet--sm .mu-adet__btn .mu-ikon { width: 14px; height: 14px; }
.mu-adet--sm .mu-adet__deger { min-width: 26px; font-size: var(--fs-xs); }
.mu-adet--lg .mu-adet__btn { width: 42px; height: 42px; }
.mu-adet--lg .mu-adet__deger { min-width: 44px; font-size: var(--fs-lg); }

/* Açık / kapalı durum noktası */
.mu-acik-isaret, .mu-kapali-isaret {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.mu-acik-isaret {
  background: var(--basari-400);
  box-shadow: 0 0 0 0 rgba(63, 191, 109, .6);
  animation: mu-nabiz 2.4s ease-out infinite;
}
.mu-kapali-isaret { background: var(--metin-3); }
@keyframes mu-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(63, 191, 109, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 191, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 191, 109, 0); }
}

/* İskelet */
.mu-iskelet { position: relative; overflow: hidden; background: var(--zemin-2); border-radius: var(--r-sm); }
.mu-iskelet::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  animation: mu-parla 1.35s infinite;
}
@keyframes mu-parla { to { transform: translateX(100%); } }

/* Yatay ray */
.mu-ray {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.mu-ray::-webkit-scrollbar { display: none; }
.mu-ray > * { scroll-snap-align: start; flex: none; }

/* Çip */
.mu-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--cizgi);
  background: var(--yuzey);
  color: var(--metin-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--t-2) var(--e-std);
}
.mu-cip:hover { border-color: var(--cizgi-koyu); color: var(--metin); }
.mu-cip[aria-pressed="true"], .mu-cip.is-aktif {
  background: var(--kirmizi-sis);
  border-color: var(--kirmizi-500);
  color: var(--kirmizi-500);
}
.mu-cip .mu-ikon { width: 15px; height: 15px; }
.mu-cip__sayi { font-size: var(--fs-micro); opacity: .7; font-weight: 800; }

.mu-kaydir { scrollbar-width: thin; scrollbar-color: var(--cizgi-koyu) transparent; }
.mu-kaydir::-webkit-scrollbar { width: 8px; height: 8px; }
.mu-kaydir::-webkit-scrollbar-track { background: transparent; }
.mu-kaydir::-webkit-scrollbar-thumb { background: var(--cizgi-koyu); border-radius: 99px; }
.mu-kaydir::-webkit-scrollbar-thumb:hover { background: var(--metin-3); }

/* Yukarı çık */
.mu-yukari {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: var(--z-yapiskan);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  color: var(--metin-2);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: all var(--t-3) var(--e-cik);
}
.mu-yukari.is-gorunur { opacity: 1; visibility: visible; transform: none; }
.mu-yukari:hover { background: var(--kirmizi-500); border-color: var(--kirmizi-500); color: #fff; }
@media (max-width: 640px) { .mu-yukari { bottom: 78px; right: 14px; } }

/* Mobil yapışkan sipariş barı */
.mu-mobil-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-yapiskan);
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--sp-4) max(10px, env(safe-area-inset-bottom));
  background: var(--yuzey);
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -6px 24px -14px rgba(11, 29, 51, .35);
  transform: translateY(110%);
  transition: transform var(--t-3) var(--e-cik);
}
.mu-mobil-bar.is-gorunur { transform: none; }
.mu-mobil-bar__bilgi { flex: 1; min-width: 0; }
.mu-mobil-bar__adet {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.mu-mobil-bar__tutar { font-size: var(--fs-lg); }
@media (min-width: 900px) { .mu-mobil-bar { display: none; } }

/* Alıntı */
.mu-alinti {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-left: 4px solid var(--kirmizi-500);
  margin-block: var(--sp-6);
}
.mu-alinti p {
  font-family: var(--font-baslik);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.42;
  color: var(--lacivert-800);
  letter-spacing: -.012em;
}
.mu-alinti cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 700;
  color: var(--metin-3);
}

/* İstatistik */
.mu-sayilar { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .mu-sayilar { grid-template-columns: repeat(4, 1fr); } }
.mu-sayi { display: grid; gap: 4px; }
.mu-sayi__deger {
  font-family: var(--font-baslik);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--lacivert-800);
  line-height: 1;
}
.mu-sayi__ad { font-size: var(--fs-sm); font-weight: 700; color: var(--metin); }
.mu-sayi__not { font-size: var(--fs-xs); color: var(--metin-3); }

/* Zengin metin */
.mu-yazi { max-width: 74ch; }
.mu-yazi h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--cizgi);
}
.mu-yazi h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.mu-yazi h3 { font-size: var(--fs-h4); margin-top: var(--sp-5); margin-bottom: var(--sp-3); }
.mu-yazi p { margin-bottom: var(--sp-4); line-height: 1.78; color: var(--metin-2); }
.mu-yazi p.mu-giris { font-size: var(--fs-lg); color: var(--metin); line-height: 1.72; }
.mu-yazi ul, .mu-yazi ol { margin-bottom: var(--sp-4); display: grid; gap: 9px; }
.mu-yazi li { position: relative; padding-left: 26px; color: var(--metin-2); line-height: 1.7; }
.mu-yazi ul li::before {
  content: "";
  position: absolute; left: 5px; top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kirmizi-500);
}
.mu-yazi ol { counter-reset: mu-sira; }
.mu-yazi ol li { padding-left: 32px; }
.mu-yazi ol li::before {
  counter-increment: mu-sira;
  content: counter(mu-sira);
  position: absolute; left: 0; top: 2px;
  font-family: var(--font-baslik);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--kirmizi-500);
}
.mu-yazi a:not(.mu-btn) {
  color: var(--kirmizi-500);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mu-yazi strong { color: var(--metin); font-weight: 800; }
.mu-yazi table { margin-block: var(--sp-5); font-size: var(--fs-sm); }
.mu-yazi th, .mu-yazi td { padding: 12px 14px; border: 1px solid var(--cizgi); text-align: left; }
.mu-yazi th { background: var(--yuzey-2); font-weight: 800; color: var(--metin); }
.mu-yazi td { color: var(--metin-2); }
.mu-yazi__tablo-sar {
  overflow-x: auto;
  border-radius: var(--r-sm);
  /* Kaydırma gölgesi: dar ekranda tablonun devam ettiğini gösterir */
  background:
    linear-gradient(90deg, var(--yuzey) 32%, rgba(255, 255, 255, 0)) left / 26px 100% no-repeat local,
    linear-gradient(270deg, var(--yuzey) 32%, rgba(255, 255, 255, 0)) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 29, 51, .14), rgba(11, 29, 51, 0)) left / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 29, 51, .14), rgba(11, 29, 51, 0)) right / 13px 100% no-repeat scroll,
    var(--yuzey);
}
.mu-yazi code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-radius: 5px;
  padding: 1px 6px;
}

/* Bilgi kutusu */
.mu-kutu {
  display: flex; gap: 13px;
  padding: var(--sp-5);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--kirmizi-500);
  border-radius: var(--r-md);
  margin-block: var(--sp-5);
}
.mu-kutu .mu-ikon { width: 19px; height: 19px; color: var(--kirmizi-500); flex: none; margin-top: 2px; }
.mu-kutu__govde { font-size: var(--fs-sm); line-height: 1.7; color: var(--metin-2); }
.mu-kutu__govde strong { display: block; color: var(--metin); margin-bottom: 4px; font-size: var(--fs-md); }
.mu-kutu--uyari { border-left-color: var(--altin-500); }
.mu-kutu--uyari .mu-ikon { color: var(--altin-600); }

/* --------------------------------------------------------------------------
   KAYDIRMA GÖLGESİ
   Yatayda kayan kutunun kenarında yalnızca kaydırılacak içerik varken
   beliren gölge. JS yok: "local" katmanlar içerikle birlikte kayıp gölgeyi
   açar, "scroll" katmanlar sabit kalır.
   -------------------------------------------------------------------------- */
.mu-kaydir-golge {
  background:
    linear-gradient(90deg, var(--yuzey) 32%, rgba(255, 255, 255, 0)) left / 26px 100% no-repeat local,
    linear-gradient(270deg, var(--yuzey) 32%, rgba(255, 255, 255, 0)) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 29, 51, .14), rgba(11, 29, 51, 0)) left / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 29, 51, .14), rgba(11, 29, 51, 0)) right / 13px 100% no-repeat scroll,
    var(--yuzey);
}

/* --------------------------------------------------------------------------
   14. TAŞMA KORUMASI
   Izgara/esnek çocuklar min-width:auto yüzünden içeriğinden geniş olmasın.
   -------------------------------------------------------------------------- */
.mu-menu > *, .mu-sss > *, .mu-hesap-alan > *, .mu-hero-secim > *,
.mu-yazi-alan > *, .mu-hikaye-govde > *, .mu-odeme > *, .mu-sepet > *,
.mu-iletisim > *, .mu-takip > *, .mu-detay > *, .mu-profil > *,
.mu-yasal > *, .mu-teslimat-bas__ic > *, .mu-kariyer-bas__ic > *,
.mu-hero__ic > *, .mu-cirak__ic > *, .mu-fr-kriter__ic > *,
.mu-fr-basvuru__ic > *, .mu-basvuru__ic > *, .mu-talep__ic > *,
.mu-kupon-bolum__ic > *, .mu-tedarik__ic > *, .mu-hesap-bolum > *,
.mu-auth > *, .mu-blog > *, .mu-siparis > *, .mu-guven__ic > * { min-width: 0; }

.mu-ray, .mu-istasyon__ray, .mu-tekrar, .mu-yanina,
.mu-tepsi__yuvalar, .mu-sekme-ray { max-width: 100%; }

.mu-yazi p, .mu-yazi li, .mu-satir__ad, .mu-urun__ad,
.mu-fis-urun__ad, .mu-adres__metin { overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .mu-header__ic { gap: var(--sp-3); }
  .mu-logo img { height: 56px; }
  .mu-header__oge { padding: 6px; }
  .mu-header__oge-ikon { width: 36px; height: 36px; }
  .mu-serit__ic { font-size: 11px; gap: 4px 14px; }
}

/* ---------------------------------------------------------------------------
   `[hidden]` KORUMASI — ÖLÇÜLEN KUSUR (Sprint 33)

   Tarayıcının `[hidden] { display: none }` kuralı KULLANICI AJANI
   katmanındadır; yazar katmanındaki her `display` onu yener. Aşağıdaki
   sınıflar Razor'da `hidden` özniteliğiyle yazılıyor ama korumasız bir
   `display` aldıkları için AÇILIŞTA GÖRÜNÜYORLARDI. `prop("hidden", ...)`
   çağrıları da bu yüzden hiçbir şey yapmıyordu.

   Proje bu tuzağı zaten biliyordu (`avantajli-menu.css` · `grid.css`);
   dokuz yer o korumayı almamıştı. `SozGizliKalirTests` artık onuncuyu
   engelliyor.
   --------------------------------------------------------------------------- */
.mu-bag[hidden] { display: none; }

/* =============================================================================
   B-101 · SATIR İÇİ BİÇEMİN KARŞILIKLARI (Sprint 39)
   =============================================================================
   Aşağıdaki sınıflar, betiklerde `style="..."` diye yazılan TASARIM
   kararlarının yerine geçiyor. Ayrım şu: hesaplanmış bir DEĞER satır içinde
   kalabilir (ve CSS özel değişkeniyle taşınır); bir tasarım kararı kalamaz.
   ========================================================================== */

/* İSKELET ÖLÇÜLERİ. Yükleme iskeleti içeriğin şeklini taklit ediyor: başlık
   satırı kısa, gövde satırı uzun. Bunlar TASARIMDIR — her çağıranın kendi
   yüzdesini yazması, aynı iskeletin yerden yere değişmesi demekti. */
.mu-isk-satir-bas   { height: 15px; width: 65%; }
.mu-isk-satir-uzun  { height: 11px; width: 92%; }
.mu-isk-satir-kisa  { height: 11px; width: 48%; }
.mu-isk-dugme       { height: 34px; width: 100%; margin-top: var(--sp-2); }
.mu-isk-gorsel-sm   { height: 64px; width: 64px; flex: none; }
.mu-isk-satir-orta  { height: 14px; width: 42%; }
.mu-isk-satir-alt   { height: 11px; width: 66%; }
.mu-isk-govde       { flex: 1; display: grid; gap: var(--sp-2); }

/* İSKELET YÜKSEKLİĞİ ÇAĞIRANDAN GELİR ve bir VERİDİR: blok mu satır mı.
   Değişkenle taşınıyor; verilmezse tek satırlık varsayılan geçerli. */
.mu-iskelet--olcu { height: calc(var(--yukseklik, 18) * 1px); }

/* İLERLEME ÇUBUĞUNUN DOLULUĞU DA VERİDİR (sepet · çekmece). */
.mu-fis-ilerleme__dolgu,
.mu-ilerleme__dolgu { width: calc(var(--oran, 0) * 1%); }

/* SPRITE GİZLENİR ama `display: none` DEĞİL: `display:none` olan bir SVG'nin
   içindeki `<symbol>`lere bazı tarayıcılar `<use>` ile ulaşamıyor. Ölçüsüz ve
   akıştan çıkarılmış bir kutu, ikisini birden çözüyor. */
.mu-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ARALIKLAR — betiklerde satır içi yazılan tasarım kararları. */
.mu-ayrik-ust    { margin-top: var(--sp-4); }
.mu-ayrik-ust-lg { margin-top: var(--sp-5); }
.mu-ayrik-ust-xl { margin-top: var(--sp-7); }
.mu-ayrik-alt    { margin-bottom: var(--sp-3); }
.mu-ayrik-alt-lg { margin-bottom: var(--sp-4); }
.mu-ayrik-alt-xl { margin-bottom: var(--sp-5); }

/* İNCE AÇIKLAMA SATIRI: kartın altında duran, ikincil ve ortalanmış not. */
.mu-ince-not {
  font-size: var(--fs-xs);
  color: var(--metin-3);
  text-align: center;
  line-height: 1.5;
}
.mu-ince-not--sol { text-align: start; }

/* TAM SATIR: ızgarada bütün sütunları kaplar. */
.mu-tam-satir { grid-column: 1 / -1; }

/* METİN İÇİ BAĞLANTI: rengini cümleden alır. */
.mu-metin-bag { color: inherit; text-decoration: underline; }

/* Küçük ayrık: form eyleminin listeden ayrılması için yeterli olan en dar
   aralık. */
.mu-ayrik-ust-sm { margin-top: var(--sp-2); }