/*! Metastaz Components 2.7.2 — TEK KAYNAK C:/dev/metastaz-design/kaynak/bilesen (üretilir, elle düzeltilmez). Önce metastaz-design.css. */
/* ---- Metastaz Components ortak (2.7.0): atlama bağlantısı, simge, odak halkası ---------------------------------------------
   Atlama bağlantısı (WCAG 2.4.1): klavye/kumandada İLK Tab'da görünür kapsül, dokunmatikte hiç görünmez. Hedef ana içerik.
   Odak (sahip 10-25 "TV/D-pad tam odak"): küçük denetimlerde (çubuk düğmeleri, sekme, hizmet hücresi) ton + 2 px halka; satırlarda Design ton zemini. */
.mz-atla { position: fixed; z-index: calc(var(--mz-z-sheet) + 10); top: calc(var(--mz-safe-t) + var(--mz-sp-8)); left: var(--mz-edge);
  display: inline-flex; align-items: center; min-height: var(--mz-hit); padding: 0 var(--mz-sp-16); border-radius: var(--mz-r-full);
  background: var(--mz-elevated); color: var(--mz-link); box-shadow: var(--mz-float); font: var(--mz-w-button) 15px/20px var(--mz-font); text-decoration: none;
  transform: translateY(calc(-100% - var(--mz-sp-24))); opacity: 0; pointer-events: none; }
.mz-atla:focus, .mz-atla:focus-visible { transform: none; opacity: 1; pointer-events: auto; outline: 0; box-shadow: var(--mz-float), 0 0 0 var(--mz-sp-2) var(--mz-bg), 0 0 0 var(--mz-sp-4) var(--mz-primary); }
.mz-sim { width: var(--mz-sp-24); height: var(--mz-sp-24); flex: none; }
[data-mz-hedef]:focus { outline: 0; }   /* atlama hedefi (tabindex=-1) odak alınca çerçevelenmez; içerik başlar */
@media (prefers-reduced-motion: no-preference) { .mz-atla { transition: transform var(--mz-dur-short) var(--mz-ease-standard), opacity var(--mz-dur-short) linear; } }
mz-bar, mz-bar *, mz-ben, mz-ben *, mz-foot, mz-foot *, mz-tabbar, mz-tabbar *, mz-services, mz-services *, mz-alert, mz-alert *, mz-toast, mz-toast *, mz-card, mz-card *, mz-field, mz-field *, mz-segment, mz-segment *, mz-switch, mz-switch * { box-sizing: border-box; }
mz-ben .mz-sheet-panel, mz-foot, mz-services, mz-alert .mz-alert, mz-toast .mz-toast { font-family: var(--mz-font); -webkit-font-smoothing: antialiased; }
/* 2.7.1: çizgi kalınlığı CSS'ten (satır içi style= yok: style-src 'self' CSP'li servislerde — Recipes, metastaz.org — engelleniyordu) */
svg[data-mz-cizgi], svg.mz-sim { stroke-width: var(--mz-icon-stroke); }
/* 2.7.1: Metastaz Çubuğu varsa Design sayfa iskeletinin (mz-page/mz-head) kök üst boşluğu çubuğun altından başlar (çift boşluk yok) */
body:has(> mz-bar) { --mz-top-extra: calc(var(--mz-cubuk-baslik) - var(--mz-sayfa-ust)); }

/* ---- .mz-btn sözleşmesi (Metastaz Components 2.6.0): davranışsız parça sınıf olarak kalır (kaynak/bilesenler.css §5). Burada yalnız 2.6 adları:
   --filled (varsayılan, ad eşi), --l (55, varsayılan ad eşi). Hedef: her boyda dokunma ≥ 44 (s = 32 + ::after 6/6). Ekranda tek birincil (Lens tek-birincil-eylem). */
.mz-btn--filled { background: var(--mz-primary-fill); color: var(--mz-on-primary); }
.mz-btn--l { min-height: var(--mz-control-l); }
@media (prefers-reduced-motion: reduce) { .mz-btn { transition: none; } }

/* ---- <mz-list> + <mz-row> (Metastaz Components 2.6.0): Design .mz-list/.mz-row ölçüleriyle; satır 55, alt yazılı ≥ 64, yan 21, ayırıcı 1 px */
mz-list { display: block; margin: 0 0 var(--mz-gap-group); padding: 0; background: var(--mz-surface); border-radius: var(--mz-r-card); overflow: hidden; box-shadow: var(--mz-card-shadow); }
mz-list[variant="plain"] { background: none; border-radius: 0; box-shadow: none; overflow: visible; }
mz-list:has(> mz-row:only-of-type) { border-radius: var(--mz-r-kisa); }   /* tek satırlık kart: oranlı köşe (Labs 10-08) */
mz-list[variant="plain"]:has(> mz-row:only-of-type) { border-radius: 0; }
mz-row { position: relative; display: block; }
mz-row:not(:defined) { min-height: var(--mz-row); }            /* JS gelmeden yer ayrılır (kayma yok) */
mz-row[sub]:not(:defined) { min-height: var(--mz-row-sub); }
mz-row > .mz-row { min-height: var(--mz-row); }
mz-row[sub] > .mz-row { min-height: var(--mz-row-sub); }
mz-row + mz-row > .mz-row::before { content: ""; position: absolute; top: 0; left: calc(var(--mz-row-pad) + var(--mz-sp-30) + var(--mz-gap-icon)); right: 0; height: var(--mz-hairline-w); background: var(--mz-hairline); }
mz-row:not([data-ikonlu]) + mz-row > .mz-row::before, mz-row + mz-row:not([data-ikonlu]) > .mz-row::before { left: var(--mz-row-pad); }
mz-row[disabled] > .mz-row { color: var(--mz-off); pointer-events: none; }
mz-row > label.mz-row { cursor: pointer; }
mz-row > .mz-row:focus-visible { outline: 0; background: var(--mz-tint); }
mz-row > button.mz-row { width: 100%; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* 2.7.0 action */
mz-row > button.mz-row:active { background: var(--mz-press); }

/* ---- <mz-section> (Metastaz Components 2.6.0): bölüm ritmi TEK yerde. Başlık → açıklama 8 · açıklama (ya da başlık) → ilk kutu 31 ·
   kutu → kutu 21 · bölüm → bölüm 34 · ikinci düzeyde açıklamasız başlık → kutu 9 (grup başlığı). İçerideki kutuların kendi dış payı sıfırlanır. */
mz-section { display: flex; flex-direction: column; gap: var(--mz-gap-stack); margin: 0 0 var(--mz-gap-group); }
mz-section:last-child { margin-bottom: 0; }
mz-section > :not(.mz-section-bas):not(.mz-group-title):not(.mz-group-foot) { margin-top: 0; margin-bottom: 0; }   /* kutuların kendi dış payı (kart 21, liste 34) ritme eklenmesin */
mz-section > .mz-section-bas { margin-bottom: calc(var(--mz-sp-31) - var(--mz-gap-stack)); }
mz-section[level="2"]:not([data-aciklamali]) > .mz-section-bas { margin-bottom: calc(var(--mz-gap-title) - var(--mz-gap-stack)); }
mz-section > .mz-group-title { margin: calc(var(--mz-sp-31) - var(--mz-gap-stack)) 0 calc(var(--mz-gap-title) - var(--mz-gap-stack)); }
mz-section > .mz-group-title:first-child, mz-section > .mz-section-bas + .mz-group-title { margin-top: 0; }
mz-section > .mz-group-foot { margin: calc(var(--mz-sp-8) - var(--mz-gap-stack)) var(--mz-pad) 0; }
.mz-section-baslik { margin: 0; font: var(--mz-w-title) 22px/28px var(--mz-font); letter-spacing: -.012em; color: var(--mz-text); text-wrap: balance; }
mz-section[level="2"] .mz-section-baslik { padding: 0 var(--mz-row-pad); font: var(--mz-w-section) 18px/23px var(--mz-font); color: var(--mz-muted); }
.mz-section-aciklama { margin: var(--mz-sp-8) 0 0; font: var(--mz-w-body) 15px/20px var(--mz-font); letter-spacing: var(--mz-ls-subhead); color: var(--mz-muted); text-wrap: pretty; }
mz-section[level="2"] .mz-section-aciklama { padding: 0 var(--mz-row-pad); }
mz-section:not(:defined)[title] { padding-top: calc(var(--mz-sp-28) + var(--mz-sp-31)); }   /* JS gelmeden başlığın yeri */

/* ---- <mz-state> (Metastaz Components 2.6.0): boş/hata/yükleniyor/çevrimdışı/bayat — Design .mz-empty ritmi (simge → başlık 16, başlık → metin 4, metin → eylem 20) */
mz-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--mz-sp-48) var(--mz-pad); }
mz-state:not(:defined) { min-height: var(--mz-sp-120); }
mz-state > .mz-tone { margin-bottom: var(--mz-sp-16); }
.mz-state-baslik { margin: 0; font: var(--mz-w-title) 20px/25px var(--mz-font); letter-spacing: -.012em; color: var(--mz-text); text-wrap: balance; }
.mz-state-metin { margin: var(--mz-sp-4) 0 0; max-width: var(--mz-maxw-form); font: var(--mz-w-body) 15px/20px var(--mz-font); letter-spacing: var(--mz-ls-subhead); color: var(--mz-muted); text-wrap: pretty; }
.mz-state-yas { margin: var(--mz-sp-8) 0 0; font: var(--mz-w-body) 13px/18px var(--mz-font); color: var(--mz-muted); font-variant-numeric: tabular-nums; }
mz-state > .mz-btn { margin-top: var(--mz-sp-20); }
mz-state[kind="error"] .mz-state-baslik { color: var(--mz-text); }   /* hata kırmızısı simgede; başlık okunur siyah/beyaz (suçlamayan ton) */
mz-state[variant="satir"] { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--mz-sp-12); min-height: var(--mz-row-sub); padding: var(--mz-sp-16) var(--mz-pad); }
mz-state[variant="satir"] > * { margin: 0; }
mz-state[variant="satir"] .mz-state-baslik { font: var(--mz-w-row) 15px/20px var(--mz-font); color: var(--mz-muted); }

/* ---- <mz-card> (2.7.0): Design .mz-card ölçüleriyle (köşe 17, iç 21 / optik 20-23, kart → kart 21). Simgeli kartta tonlu 30 daire + 13 boşluk. */
mz-card { display: block; margin: 0 0 var(--mz-gap-stack); }
mz-card:not(:defined) { min-height: var(--mz-row-sub); }
mz-card > .mz-kart { margin: 0; }
.mz-kart--simgeli, .mz-kart.mz-card--link { display: flex; align-items: flex-start; gap: var(--mz-gap-icon); }
.mz-kart.mz-card--link { align-items: center; }
.mz-kart-ana { display: block; flex: 1 1 auto; min-width: 0; }
.mz-kart-ust { display: flex; align-items: center; gap: var(--mz-sp-8); }
.mz-kart-ana > :not(.mz-kart-ust):not(.mz-card-text):first-child { margin-top: 0; }
.mz-kart-ana > .mz-actions, .mz-kart-ana > .mz-btn { margin-top: var(--mz-sp-16); }
.mz-kart-gizle { margin-top: var(--mz-sp-12); }
.mz-sheet-ic mz-card > .mz-kart { background: var(--mz-sheet-surface); }

/* ---- <mz-field> (2.7.0): Design .mz-field (etiket → alan 8, alan 47 / köşe 13, alan → alan 18). Hata simgesi Design'da
   (.mz-input[aria-invalid], tur 3 B; açık/koyu), kenar gri kalır. Burada yalnız çoklu hata özeti. */
mz-field { display: block; }
.mz-alan-ozet { margin: 0 0 var(--mz-sp-24); padding: var(--mz-pad-top) var(--mz-pad) var(--mz-pad-bottom); border-radius: var(--mz-r-card); background: var(--mz-surface); box-shadow: inset var(--mz-sp-4) 0 0 var(--mz-danger); }
.mz-alan-ozet-baslik { margin: 0; font: var(--mz-w-card) 17px/22px var(--mz-font); color: var(--mz-text); }
.mz-alan-ozet ul { margin: var(--mz-sp-8) 0 0; padding: 0 0 0 var(--mz-sp-20); }
.mz-alan-ozet a { display: inline-flex; align-items: center; min-height: var(--mz-hit); color: var(--mz-danger-text); font: var(--mz-w-body) 15px/20px var(--mz-font); }   /* bağ 44 (08-access) */
.mz-alan-ozet li + li { margin-top: 0; }

/* ---- <mz-segment> (2.7.0): Design .mz-seg ölçüleri (iz 44, köşe 16, parça 2 px içeride). Yerel radio görünmez ama odaklanır. */
mz-segment { display: flex; padding: 0; border-radius: var(--mz-r-ic); background: var(--mz-ctl-track); }
mz-segment > label { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: var(--mz-control-m); padding: 0 var(--mz-sp-12);
  border: var(--mz-sp-2) solid transparent; border-radius: var(--mz-r-ic); background-clip: padding-box; cursor: pointer; text-align: center;
  color: var(--mz-text); font: var(--mz-w-row) 15px/20px var(--mz-font); letter-spacing: var(--mz-ls-subhead); -webkit-tap-highlight-color: transparent; }
mz-segment > label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
mz-segment > label:has(input:checked) { background-color: var(--mz-seg-on); font-weight: var(--mz-w-button); box-shadow: 0 0 0 .5px var(--mz-icon-edge); }
mz-segment > label:has(input:focus-visible) { box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); }
mz-segment > label:has(input:disabled) { color: var(--mz-off); cursor: default; }

/* ---- <mz-switch> (2.7.0): Design .mz-switch (51 × 31). Etiketli satır 44+ dokunma, etiket solda, anahtar sağda. */
mz-switch { display: block; }
.mz-switch-satir { display: flex; align-items: center; justify-content: space-between; gap: var(--mz-sp-12); min-height: var(--mz-hit); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mz-switch-ad { flex: 1 1 auto; min-width: 0; font: var(--mz-w-row) 17px/22px var(--mz-font); letter-spacing: var(--mz-ls-body); color: var(--mz-text); }
mz-switch .mz-switch input:disabled ~ span { opacity: .45; }

/* ---- <mz-services> Metastaz hizmetleri (2.7.0): katalog/urunler.json TEK kaynak (ad, kısa ad, adres, simge). kesfet.css'in yerine.
   Izgara (Ben çekmecesi, varsayılan): telefonda 4 sütun, simge 52 + ad 13/600 + ne işe yaradığı 11 gri. Liste: satır 64, simge 30. */
mz-services { display: block; }
mz-services:not(:defined) { min-height: var(--mz-sp-120); }
.mz-hizmet-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mz-sp-8) var(--mz-sp-4); margin: 0; padding: var(--mz-sp-12) var(--mz-sp-8); list-style: none;
  background: var(--mz-surface); border-radius: var(--mz-r-card); box-shadow: var(--mz-card-shadow); }
.mz-sheet-ic .mz-hizmet-izgara { background: var(--mz-sheet-surface); }
@media (min-width: 560px) { .mz-hizmet-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
mz-services[variant="plain"] .mz-hizmet-izgara { padding: 0; background: none; box-shadow: none; }
.mz-hizmet { display: flex; flex-direction: column; align-items: center; gap: var(--mz-sp-2); min-height: var(--mz-hit); padding: var(--mz-sp-8) var(--mz-sp-2); border-radius: var(--mz-r-ic);
  color: var(--mz-text); text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; }
.mz-hizmet > img { width: var(--mz-hizmet-simge); height: var(--mz-hizmet-simge); flex: none; margin-bottom: var(--mz-sp-4); }
.mz-hizmet-ad { display: block; max-width: 100%; font: var(--mz-w-button) 13px/16px var(--mz-font); letter-spacing: 0; overflow-wrap: anywhere; }
.mz-hizmet-alt { display: block; max-width: 100%; font: var(--mz-w-body) 11px/13px var(--mz-font); letter-spacing: .006em; color: var(--mz-muted); overflow-wrap: anywhere; }
.mz-hizmet:active { background: var(--mz-press); }
.mz-hizmet:focus-visible { outline: 0; background: var(--mz-tint); box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); }
.mz-hizmet .mz-badge { margin-top: var(--mz-sp-2); }
mz-services[variant="list"] mz-row img { width: var(--mz-hizmet-simge-liste); height: var(--mz-hizmet-simge-liste); flex: none; margin-right: var(--mz-gap-icon); }

/* ---- <mz-foot> (2.7.0): sayfa altı. Yasal bağlar 44 dokunma (metin bağı muaf DEĞİL, 08-access), ekosistem satırı en altta. */
mz-foot { display: block; }
.mz-alt { padding: var(--mz-sp-40) 0 calc(var(--mz-safe-b) + var(--mz-sp-32)); color: var(--mz-muted); box-shadow: inset 0 var(--mz-hairline-w) 0 var(--mz-hairline); }
.mz-alt-ic { max-width: calc(var(--mz-maxw) + 2 * var(--mz-edge)); margin: 0 auto; padding: 0 var(--mz-edge); }
mz-foot[width="wide"] .mz-alt-ic { max-width: calc(var(--mz-maxw-wide) + 2 * var(--mz-edge)); }
.mz-alt-servis { margin-bottom: var(--mz-sp-20); font: var(--mz-w-body) 13px/18px var(--mz-font); }
.mz-alt-servis a { color: var(--mz-link); }
.mz-alt-hukuk { display: flex; flex-wrap: wrap; gap: 0 var(--mz-sp-20); margin: 0 0 var(--mz-sp-12); }
.mz-alt-hukuk > a { display: inline-flex; align-items: center; min-height: var(--mz-hit); color: var(--mz-link); text-decoration: none; font: var(--mz-w-body) 15px/20px var(--mz-font); letter-spacing: var(--mz-ls-subhead); border-radius: var(--mz-r-xs); }
.mz-alt-eko { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mz-sp-8) var(--mz-sp-12); font: var(--mz-w-body) 13px/18px var(--mz-font); }
.mz-alt-eko > .mz-isaret { width: var(--mz-sp-16); height: auto; color: var(--mz-muted); flex: none; }
.mz-alt-eko > a { display: inline-flex; align-items: center; min-height: var(--mz-hit); color: var(--mz-muted); text-decoration: none; }
.mz-alt-eko > .mz-alt-hizmetler { margin-left: auto; }
.mz-alt-hukuk > a:focus-visible, .mz-alt-eko > a:focus-visible { outline: 0; background: var(--mz-tint); box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); }

/* ---- <mz-tabbar> (2.7.0): YALNIZ içerik bölümleri (en çok 5, her sekmede yazı). Hesap/Profil/Ayarlar sekme OLMAZ, "Ben"dedir (mz lint hesap-sekmede).
   Görünüm Design .mz-tabbar (telefon altta 64 + güvenli alan; ≥ 1024 üstte ortalı hap). Gövde sekme çubuğunun altında kalmaz (otomatik alt pay). */
mz-tabbar { display: block; }
/* bileşen kendi görünümünü taşır (yalnız belirteç yükleyen servislerde de: ID) — Design .mz-tabbar ile aynı değerler */
mz-tabbar .mz-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--mz-z-bar) + 10); display: flex; justify-content: center;
  padding: 0 max(var(--mz-sp-8), env(safe-area-inset-left)) var(--mz-safe-b); background: var(--mz-bg); box-shadow: 0 calc(var(--mz-hairline-w) * -1) 0 var(--mz-hairline); font-family: var(--mz-font); }
mz-tabbar .mz-tabbar-in { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: calc(var(--mz-maxw) - var(--mz-sp-120)); }
mz-tabbar .mz-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mz-sp-3); height: var(--mz-tabbar); padding: 0 var(--mz-sp-4);
  color: var(--mz-muted); text-decoration: none; font-size: var(--mz-tab-label); line-height: 17px; font-weight: var(--mz-w-row); -webkit-tap-highlight-color: transparent; }
mz-tabbar .mz-tab > svg { width: var(--mz-tab-icon); height: var(--mz-tab-icon); flex: none; }
mz-tabbar .mz-tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
mz-tabbar .mz-tab[aria-current] { color: var(--mz-link); font-weight: var(--mz-w-emph); }
mz-tabbar:not(:defined) { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--mz-tabbar) + var(--mz-safe-b)); background: var(--mz-bg); }
mz-tabbar:not(:defined) > * { visibility: hidden; }
body.mz-sekmeli { padding-bottom: calc(var(--mz-tabbar) + var(--mz-safe-b)); }
@media (min-width: 1024px) { body.mz-sekmeli { padding-bottom: 0; } }
.mz-tab:focus-visible { box-shadow: inset 0 0 0 var(--mz-sp-2) var(--mz-primary); }
@media (min-width: 1024px) { mz-tabbar .mz-tab { position: relative; } mz-tabbar .mz-tab::after { content: ""; position: absolute; inset: calc(var(--mz-sp-3) * -1) 0; } }   /* hap 38 + iz 3/3 = 44 dokunma */
/* ≥ 1024: sekme hapı Metastaz Çubuğu'nun satırında, ortada (iPadOS 18 üst sekme); çubuğun kendi bölüm bağları gizlenir (tek gezinme). */
@media (min-width: 1024px) {
  mz-tabbar .mz-tabbar { z-index: calc(var(--mz-z-bar) + 1); height: calc(var(--mz-bar) + var(--mz-ust)); padding: var(--mz-ust) 0 0; align-items: center; background: transparent; pointer-events: none; }
  mz-tabbar .mz-tabbar-in { pointer-events: auto; }
  body.mz-sekmeli mz-bar .mz-bar-nav { display: none; }
}
/* seçili sekme dolgulu simge, ötekiler çizgi (aria-current'a bağlı: servis HTMX ile işaretlese de doğru) */
mz-tabbar .mz-tab[aria-current] > .mz-sekme-bos, mz-tabbar .mz-tab:not([aria-current]) > .mz-sekme-dolu { display: none; }

/* ---- <mz-bar> Metastaz Çubuğu (2.7.0, GEZINME.md §4) -----------------------------------------------------------------------
   Göz her serviste aynı 3 noktaya bakar: SOL ÜST = neredeyim / geri · SAĞ ÜST = Ara + "Ben" (en çok 2 yuva) · ALT = bölümler (mz-tabbar).
   Çubuk 44 + güvenli alan; yapışkan; kayınca altta 1 px ayırıcı (yalnız opaklık geçer). Geniş ekranda (≥ 1024) bölüm bağları ortada.
   Servis kendi üst çubuğunu/menüsünü yazamaz (mz lint oz-cubuk / oz-menu). */
mz-bar { position: sticky; top: 0; z-index: var(--mz-z-bar); display: block; padding-top: var(--mz-ust); background: var(--mz-bg); color: var(--mz-text); font-family: var(--mz-font); }
mz-bar:not(:defined) { min-height: calc(var(--mz-bar) + var(--mz-ust)); }
mz-bar:not(:defined) > * { visibility: hidden; }
mz-bar[surface="plain"] { background: var(--mz-bg-plain); }
.mz-page > mz-bar { margin: 0 calc(-1 * var(--mz-edge)); }
mz-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--mz-hairline-w); background: var(--mz-hairline); opacity: 0; pointer-events: none; }
mz-bar[data-kaydi]::after { opacity: 1; }
.mz-bar-ic { position: relative; display: flex; align-items: center; gap: var(--mz-sp-8); height: var(--mz-bar); max-width: calc(var(--mz-maxw) + 2 * var(--mz-edge)); margin: 0 auto; padding: 0 var(--mz-edge); }
mz-bar[width="wide"] .mz-bar-ic { max-width: calc(var(--mz-maxw-wide) + 2 * var(--mz-edge)); }
.mz-bar-sol { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.mz-bar-sag { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--mz-sp-4); margin-right: calc(var(--mz-sp-5) * -1); }   /* Ben dairesinin GÖRÜNEN kenarı içerik hattında (44 dokunma − 34 daire) / 2 */
/* sol: servis işareti + adı (kök) ya da ‹ Geri (alt sayfa) — ikisi de 44 dokunma */
.mz-bar-marka, .mz-bar-geri { display: inline-flex; align-items: center; min-width: 0; min-height: var(--mz-hit); color: var(--mz-text); text-decoration: none; -webkit-tap-highlight-color: transparent; border-radius: var(--mz-r-ic); }
.mz-bar-marka { gap: var(--mz-sp-8); font: var(--mz-w-emph) 17px/22px var(--mz-font); letter-spacing: -.012em; }
.mz-bar-marka > img, .mz-bar-marka > .mz-bar-simge { flex: none; width: var(--mz-sp-28); height: var(--mz-sp-28); }
.mz-bar-marka > .mz-isaret { flex: none; width: var(--mz-isaret); height: auto; color: var(--mz-text); }
.mz-bar-marka > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-bar-geri { gap: var(--mz-sp-2); margin-left: calc(var(--mz-sp-8) * -1); padding-right: var(--mz-sp-8); color: var(--mz-link); font: var(--mz-w-body) 17px/22px var(--mz-font); }
.mz-bar-geri > .mz-sim { width: var(--mz-sp-28); height: var(--mz-sp-28); }
.mz-bar-geri > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* orta: alt sayfada başlık (kayınca belirir), geniş ekranda bölüm bağları */
.mz-bar-baslik { position: absolute; left: 50%; top: 50%; max-width: 50%; transform: translate(-50%, -50%); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--mz-w-emph) 17px/22px var(--mz-font); letter-spacing: -.012em; color: var(--mz-text); opacity: 0; pointer-events: none; }
mz-bar[data-kaydi] .mz-bar-baslik, mz-bar[title-inline] .mz-bar-baslik { opacity: 1; }
.mz-bar-nav { display: none; }
@media (min-width: 1024px) {
  .mz-bar-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: var(--mz-sp-4); }
  .mz-bar-nav > a { display: inline-flex; align-items: center; min-height: var(--mz-hit); padding: 0 var(--mz-sp-12); border-radius: var(--mz-r-s); color: var(--mz-muted); text-decoration: none; font: var(--mz-w-row) 15px/20px var(--mz-font); letter-spacing: var(--mz-ls-subhead); }
  .mz-bar-nav > a:hover { color: var(--mz-text); }
  .mz-bar-nav > a[aria-current] { color: var(--mz-text); font-weight: var(--mz-w-emph); }
}
/* sağ: Ara (simge) · servisin tek eylemi · Ben (yuvarlak). Hepsi 44 dokunma. */
.mz-bar-dugme { position: relative; display: inline-grid; place-items: center; width: var(--mz-hit); height: var(--mz-hit); padding: 0; margin: 0; border: 0; border-radius: var(--mz-r-full);
  background: none; color: var(--mz-link); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mz-bar-dugme > .mz-sim { width: var(--mz-sp-24); height: var(--mz-sp-24); }
/* servisin tek eylemi: iOS çubuk düğmesi gibi YAZI düğmesi (kapsül değil: çubuk-orantı ve hap tekrarı yok), 44 dokunma, bağlantı mavisi */
.mz-bar-sag > [slot="action"] { flex: none; display: inline-flex; align-items: center; min-height: var(--mz-hit); min-width: var(--mz-hit); padding: 0 var(--mz-sp-8); margin: 0; border: 0; border-radius: var(--mz-r-ic);
  background: none; color: var(--mz-link); font: var(--mz-w-row) 17px/22px var(--mz-font); letter-spacing: -.012em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; }
.mz-bar-sag > [slot="action"]:active { opacity: .6; }
.mz-bar-sag > [slot="action"]:focus-visible { outline: 0; background: var(--mz-tint); box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); }
.mz-ben-yuz { display: grid; place-items: center; width: var(--mz-ben); height: var(--mz-ben); border-radius: var(--mz-r-full); overflow: hidden;
  background: var(--mz-primary-fill); color: var(--mz-on-primary);   /* dolgulu mavi daire: her serviste aynı, göze ilk çarpan yuvarlak; beyaz/primary-fill ≥ 4,5 (ton zeminde mavi 4,26 kalıyordu, Lens 10-25) */ font: var(--mz-w-emph) 14px/1 var(--mz-font); letter-spacing: 0; }
.mz-ben-yuz > .mz-sim { width: var(--mz-sp-20); height: var(--mz-sp-20); }
.mz-ben-yuz > img { width: 100%; height: 100%; object-fit: cover; }
.mz-ben-dugme:active .mz-ben-yuz, .mz-bar-dugme:active { opacity: .7; }
/* odak: küçük hedef → ton + 2 px halka (TV'de 3 m'den görünsün; zoom 1,5'te 3 px) */
.mz-bar-dugme:focus-visible, .mz-bar-marka:focus-visible, .mz-bar-geri:focus-visible, .mz-bar-nav > a:focus-visible { outline: 0; background-color: var(--mz-tint); box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); }
.mz-ben-dugme:focus-visible { background: none; box-shadow: none; }
.mz-ben-dugme:focus-visible .mz-ben-yuz { box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-bg), 0 0 0 var(--mz-sp-4) var(--mz-primary); }
@media (prefers-reduced-motion: no-preference) {
  mz-bar::after, .mz-bar-baslik { transition: opacity var(--mz-dur-short) linear; }
}
/* 2.7.1: aynı eylem sayfada görünürken çubukta gizli (kopya düğme yok); görünmez öğe odak sırasından da çıkar */
mz-bar[data-eylem-gizli] .mz-bar-sag > [slot="action"] { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .mz-bar-sag > [slot="action"] { transition: opacity var(--mz-dur-short) linear, visibility var(--mz-dur-short) linear; } }

/* ---- <mz-sheet> (Metastaz Components 2.6.0) -------------------------------------------------------------------------------
   Telefonda alttan açılan sayfa, ≥ 768 ortada pencere. DIŞ panel sürüklenir + opak + yuvarlak + overflow:hidden; İÇ kap kaydırır
   (Deprem 10-24 kanıtı: kaydırıcı + opak zemin + transform aynı öğede olunca birleştirici köşeyi düzleştiriyordu). Geçişte yalnız transform. */
mz-sheet { position: fixed; inset: 0; z-index: var(--mz-z-sheet); display: flex; align-items: flex-end; justify-content: center; }
mz-sheet:not([open]) { display: none; }
mz-sheet:not(:defined)[open] { position: static; display: block; }   /* JS yoksa: içerik sayfada düz akar, kaybolmaz */
.mz-sheet-perde { position: absolute; inset: 0; background: var(--mz-scrim); }
.mz-sheet-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--mz-sheet-w-l);
  max-height: calc(100dvh / var(--mz-tv-olcek, 1) - var(--mz-safe-t) - var(--mz-sheet-ust));
  overflow: hidden; overscroll-behavior: contain; background: var(--mz-sheet-bg); border-radius: var(--mz-r-sheet) var(--mz-r-sheet) 0 0; box-shadow: var(--mz-float);
  color: var(--mz-text); font-family: var(--mz-font); }
.mz-sheet-panel:focus { outline: 0; }
mz-sheet[size="s"] > .mz-sheet-panel { max-width: var(--mz-sheet-w-s); }
mz-sheet[detent="large"] > .mz-sheet-panel { height: calc(100dvh / var(--mz-tv-olcek, 1) - var(--mz-safe-t) - var(--mz-sheet-ust)); }
mz-sheet[detent="medium"] > .mz-sheet-panel { height: 50dvh; }
.mz-sheet-ic { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: var(--mz-sheet-ic-ust) var(--mz-edge) calc(var(--mz-safe-b) + var(--mz-sheet-ic-alt)); }
.mz-sheet-ic > br { display: none; }
.mz-sheet-alt { flex: none; padding: var(--mz-sp-12) var(--mz-edge) calc(var(--mz-safe-b) + var(--mz-sp-16)); background: var(--mz-sheet-bg); box-shadow: 0 -.5px 0 var(--mz-hairline); }
.mz-sheet-alt ~ .mz-sheet-ic, .mz-sheet-ic:has(~ .mz-sheet-alt) { padding-bottom: var(--mz-sp-16); }
/* tutamak: iOS çekmece; kaymaz (panelde), dokunma alanı 156 × 34 */
.mz-sheet-tutamak { position: absolute; top: var(--mz-sheet-tutamak-ust); left: 50%; z-index: 2; width: var(--mz-sheet-tutamak-w); height: var(--mz-sheet-tutamak-h);
  margin-left: calc(var(--mz-sheet-tutamak-w) / -2); border-radius: var(--mz-r-full); background: var(--mz-ctl-track); touch-action: none; cursor: grab; }
.mz-sheet-tutamak::after { content: ""; position: absolute; inset: calc(var(--mz-sp-14) * -1) calc(var(--mz-sp-60) * -1) calc(var(--mz-sp-15) * -1); }
mz-sheet[dismiss="button"] .mz-sheet-tutamak, mz-sheet[dismiss="none"] .mz-sheet-tutamak { display: none; }
/* kapat: 30 daire (iOS), dokunma 44; içerik hattında (sağ = kenar), kaymaz */
.mz-sheet-kapat { position: absolute; top: var(--mz-sheet-kapat-ust); right: var(--mz-edge); z-index: 2; display: grid; place-items: center;
  width: var(--mz-close); height: var(--mz-close); padding: 0; margin: 0; border: 0; border-radius: var(--mz-r-full);
  background: var(--mz-fill); color: var(--mz-muted); cursor: pointer; font-size: 0; }
.mz-sheet-kapat::before { content: ""; width: var(--mz-sp-12); height: var(--mz-sp-12); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1 1 11' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1 1 11' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mz-sheet-kapat::after { content: ""; position: absolute; inset: calc((var(--mz-hit) - var(--mz-close)) / -2); }
.mz-sheet-kapat:focus-visible { outline: 0; box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-sheet-bg), 0 0 0 var(--mz-sp-4) var(--mz-primary); }
.mz-sheet-baslik { margin: 0 0 var(--mz-sp-16); padding-right: calc(var(--mz-close) + var(--mz-sp-12)); font: var(--mz-w-title) 22px/28px var(--mz-font); letter-spacing: -.012em; color: var(--mz-text); text-wrap: balance; }
mz-sheet[dismiss="none"] .mz-sheet-baslik { padding-right: 0; }
/* sayfa içi gri düğme: sheet-bg üstünde fill az ayrışıyor → saydam iz (Deprem 10-24 Lens) */
.mz-sheet-ic .mz-btn--gray, .mz-sheet-alt .mz-btn--gray { background: var(--mz-ctl-track); }
/* sayfa içi gruplar bir kat yukarı yüzey (koyuda #2C2C2E) */
.mz-sheet-ic .mz-list, .mz-sheet-ic mz-list, .mz-sheet-ic .mz-card { background: var(--mz-sheet-surface); }
@media (min-width: 768px) {
  mz-sheet { align-items: center; padding: var(--mz-sp-24); }
  .mz-sheet-panel { border-radius: var(--mz-r-card); max-height: calc(100dvh / var(--mz-tv-olcek, 1) - var(--mz-sp-48)); }
  .mz-sheet-tutamak { display: none; }
}

/* ---- <mz-ben> "Ben" çekmecesi (2.7.0): hesap · bu hizmet · yardım · Metastaz hizmetleri · gizlilik/koşullar · çıkış.
   Kendi yüzeyi yok: <mz-sheet> (alt sayfa / ortada pencere) + <mz-list> + <mz-services> ölçüleriyle çizilir. */
mz-ben { display: block; }
mz-ben:not(:defined) > :not(mz-sheet) { display: none; }
.mz-ben-sayfa .mz-sheet-ic > mz-list, .mz-ben-sayfa .mz-sheet-ic > .mz-card, .mz-ben-sayfa .mz-sheet-ic > mz-services { margin-bottom: var(--mz-gap-group); }
.mz-ben-sayfa .mz-sheet-ic > :last-child { margin-bottom: 0; }
/* hesap satırı: 34 yuvarlak (çubuktaki "Ben" ile aynı yüz) */
.mz-ben-av { display: grid; place-items: center; flex: none; width: var(--mz-ben); height: var(--mz-ben); border-radius: var(--mz-r-full); overflow: hidden;
  background: var(--mz-primary-fill); color: var(--mz-on-primary); font: var(--mz-w-emph) 14px/1 var(--mz-font); }
.mz-ben-av > img { width: 100%; height: 100%; object-fit: cover; }
.mz-ben-av > .mz-sim { width: var(--mz-sp-20); height: var(--mz-sp-20); }
.mz-ben-av--l { width: var(--mz-hizmet-simge); height: var(--mz-hizmet-simge); background: var(--mz-tint); color: var(--mz-link); }   /* yalnız simge (yazı yok): ton zemin yeter */
.mz-ben-av--l > .mz-sim { width: var(--mz-sp-28); height: var(--mz-sp-28); }
.mz-ben-hesap mz-row > .mz-row > .mz-ben-av { margin-right: var(--mz-gap-icon); }
/* oturumsuz: tek birincil eylem "Giriş yap", ikincil "Hesap aç" (50+ için iki büyük düğme, metin bağı değil) */
.mz-ben-giris-ust { display: flex; align-items: center; gap: var(--mz-gap-icon); }
.mz-ben-giris-ust .mz-card-text { margin-top: var(--mz-gap-card-title); }
.mz-ben-giris-eylem { display: flex; gap: var(--mz-gap-btn); margin-top: var(--mz-sp-16); margin-bottom: var(--mz-pad-optik); }
.mz-ben-giris-eylem > .mz-btn { flex: 1 1 0; min-width: 0; }
.mz-sheet-ic .mz-ben-giris { background: var(--mz-sheet-surface); }
/* 2.7.2 Yardım · Gizlilik · Koşullar: hesabın altında tek kısa satır — yazı düğmeleri, her biri 44 dokunma, aralarında nokta; yardım metni yerinde açılır */
.mz-ben-kisa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--mz-sp-4); margin: calc(var(--mz-sp-12) - var(--mz-gap-group)) 0 var(--mz-sp-16); }
.mz-ben-kisa > a, .mz-ben-kisa > button { display: inline-flex; align-items: center; min-height: var(--mz-hit); padding: 0 var(--mz-sp-12); margin: 0; border: 0; border-radius: var(--mz-r-ic); background: none;
  color: var(--mz-link); font: var(--mz-w-row) 15px/20px var(--mz-font); letter-spacing: var(--mz-ls-subhead); text-decoration: none; cursor: pointer; }
.mz-ben-kisa > * + *::before { content: "·"; margin: 0 var(--mz-sp-12) 0 calc(var(--mz-sp-12) * -1 - var(--mz-sp-4)); color: var(--mz-muted); pointer-events: none; }
.mz-ben-kisa > :focus-visible { outline: 0; background: var(--mz-tint); box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); }
.mz-ben-kisa > [aria-expanded="true"] { font-weight: var(--mz-w-emph); }
.mz-ben-yardim { margin: 0 0 var(--mz-gap-group); }
.mz-ben-yardim-metin { margin: 0 0 var(--mz-sp-12); padding: 0 var(--mz-row-pad); font: var(--mz-w-body) 15px/20px var(--mz-font); color: var(--mz-body); text-wrap: pretty; }
.mz-ben-yardim mz-list { margin: 0; }

/* ---- <mz-alert> (2.7.0): Design .mz-alert (270, köşe 17, ortada) + perde. Kapalıyken hiçbir şey çizmez. Düğmeler 44+.
   Design .mz-alert/.mz-alert-scrim kendi CSS animasyonunu taşır (mz-pop/mz-fade): bileşen hareketi mz.hareket'ten → CSS animasyonu kapatılır. */
mz-alert { display: contents; }
mz-alert .mz-alert-scrim, mz-alert .mz-alert { animation: none; }
mz-alert .mz-alert-actions > button { min-height: var(--mz-hit); }
mz-alert .mz-alert-actions > button:focus-visible { outline: 0; background: var(--mz-tint); box-shadow: inset 0 0 0 var(--mz-sp-2) var(--mz-primary); }

/* ---- <mz-toast> (2.7.0): Design .mz-toast (kapsül 22, temaya uyan yüzey, gölge). Yalnız opacity + transform geçer; azaltılmışta yalnız solma. */
mz-toast { display: contents; }
mz-toast .mz-toast { z-index: calc(var(--mz-z-sheet) + 20); }
body.mz-sekmeli mz-toast .mz-toast { bottom: calc(var(--mz-tabbar) + var(--mz-safe-b) + var(--mz-sp-12)); }
mz-toast .mz-toast > .mz-sim { width: var(--mz-sp-20); height: var(--mz-sp-20); }
mz-toast .mz-toast--ok > .mz-sim { color: var(--mz-ok); } mz-toast .mz-toast--error > .mz-sim { color: var(--mz-danger); }
mz-toast .mz-toast button:focus-visible { outline: 0; box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-primary); border-radius: var(--mz-r-ic); }
@media (prefers-reduced-motion: reduce) { mz-toast .mz-toast, mz-toast .mz-toast.is-open { transform: translate(-50%, 0); transition: opacity var(--mz-dur-reduced) linear; } }