/*! Metastaz Components 2.9.0 — TEK KAYNAK C:/dev/metastaz-design/kaynak/bilesen (üretilir, elle düzeltilmez). Önce metastaz-design.css. */
/* Metastaz Symbols v1 — Standart 11. uret_semboller.py üretir. Boyut/hiza :where() ile (özgüllük 0): bileşenin boyut sınıfı (mz-sim, mz-chev…) her zaman kazanır. */
/* Çizgi yazı ağırlığını izler. Taban = gövde yazısı (480) = Design belirteci --mz-icon-stroke (sahip 10-07: 2,0). Arayüz etiketi (640) = taban + 0,4 = 2,4 (varsayılan). */
:root{--mz-sembol-taban:var(--mz-icon-stroke,2);--mz-sembol-cizgi:calc(var(--mz-sembol-taban) + .4)}
:where(.mz-sembol,mz-sembol){display:inline-block;flex:none;width:1.3em;height:1.3em;vertical-align:-.3em;overflow:visible}
.mz-sembol,mz-sembol>svg{fill:none;stroke:currentColor;stroke-width:var(--mz-sembol-w,var(--mz-sembol-cizgi));stroke-linecap:round;stroke-linejoin:round}
mz-sembol>svg{display:block;width:100%;height:100%;overflow:visible}
:where(.mz-sembol.kucuk,mz-sembol[boy=kucuk]){width:1.05em;height:1.05em;vertical-align:-.17em}
:where(.mz-sembol.buyuk,mz-sembol[boy=buyuk]){width:1.7em;height:1.7em;vertical-align:-.5em}
.mz-sembol.govde,mz-sembol[agirlik=govde]{--mz-sembol-w:var(--mz-sembol-taban)}
.mz-sembol.satir,mz-sembol[agirlik=satir]{--mz-sembol-w:calc(var(--mz-sembol-taban) + .2)}
.mz-sembol.baslik,mz-sembol[agirlik=baslik]{--mz-sembol-w:calc(var(--mz-sembol-taban) + .7)}
.mz-sembol.buyuk-baslik,mz-sembol[agirlik=buyuk]{--mz-sembol-w:calc(var(--mz-sembol-taban) + 1)}
[dir=rtl] .mz-sembol.ayna,[dir=rtl] mz-sembol.ayna{transform:scaleX(-1)}
@media (min-width:1280px) and (hover:none) and (pointer:none){:root{--mz-sembol-cizgi:calc(var(--mz-sembol-taban) + .7)}}
@media (forced-colors:active){.mz-sembol,mz-sembol>svg{stroke:CanvasText}}

/* ---- 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; }
/* 2.8.0 (video genelleme K10): <mz-segment kaydir> — 4+ bölüm sığmayınca eşit sıkışmaz; parça içeriği kadar, şerit yatay kayar (kanal sekmeleri) */
mz-segment[kaydir] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
mz-segment[kaydir]::-webkit-scrollbar { display: none; }
mz-segment[kaydir] > label { flex: none; padding: 0 var(--mz-sp-16); scroll-snap-align: start; }

/* ---- <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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 2.7.10: Apple ana ekran etiketi gibi tek satır */
.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); min-height: var(--mz-tabbar); padding: 0 var(--mz-sp-4);   /* 2.7.15: min (yazı büyürse sekme büyür) */
  color: var(--mz-muted); text-decoration: none; font-size: var(--mz-tab-label); line-height: 1.22; 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; padding-block: .12em; margin-block: -.12em; }   /* 2.7.15: inen harfler (g, ş, ç, y) kırpma kutusunun içinde; yerleşim değişmez */
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(max(var(--mz-tabbar), var(--mz-tabbar-gercek, 0px)) + var(--mz-safe-b)); }   /* 2.7.15: sekme yazıyla büyüdüyse gerçek yükseklik (JS ölçer) */
@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; }
  /* 2.7.13 (Stream bildirimi 10-26): yukarıdaki telefon kuralları (mz-tabbar .mz-tab, öncelik 0,1,1) Design'ın masaüstü hap kuralını (.mz-tab, 0,1,0)
     eziyordu: sekme 64 px dikey kalıp 44'lük çubuk satırından yukarı taşıyor, hap kesiliyordu. Masaüstü hap değerleri bileşenin kendi önceliğiyle: */
  mz-tabbar .mz-tabbar-in { width: auto; padding: var(--mz-sp-3); border-radius: var(--mz-r-full); background: var(--mz-fill); }
  mz-tabbar .mz-tab { flex-direction: row; gap: var(--mz-sp-6); height: 38px; min-height: 0;   /* 2.7.15b: telefonun min-height 64'ü hapı büyütüyordu (denetçi) */
    padding: 0 var(--mz-sp-16); border-radius: var(--mz-r-full);
    font-size: 15px; line-height: 20px; letter-spacing: var(--mz-ls-subhead); color: var(--mz-text); }
  mz-tabbar .mz-tab > svg { width: 20px; height: 20px; }
  mz-tabbar .mz-tab[aria-current] { background: var(--mz-seg-on); color: var(--mz-text); box-shadow: 0 0 0 .5px var(--mz-icon-edge), 0 2px 6px rgba(0, 0, 0, .10); }
}
/* 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-bar-zemin, var(--mz-bg));   /* 2.7.5: sayfanın zemini (dikiş yok) */ 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); }
/* 2.7.13: çubuk TAM OPAK (2.7.11'in %80 yarı saydam malzemesi geri alındı: sahip kuralı "yapışkan çubuk opak kalır", nöbet 10-26 S08).
   Zemin sayfanın zeminidir (dikiş yok); ayrım yalnız kayınca alttaki 1 px çizgi. */
.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)); }
@media (min-width: 1024px) { body.mz-sekmeli mz-bar .mz-bar-ic { max-width: calc(var(--mz-maxw-wide) + 2 * var(--mz-edge)); } }   /* 2.8.0 (video K14): sekme hapı çubuk satırının ortasına gelince 680 genişlikte hizmet adını kesiyordu ("Vide…") → sekmeli sayfada çubuk geniş satırda */
.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; }
mz-bar[data-ara-gizli] .mz-bar-sag > .mz-bar-ara { visibility: hidden; opacity: 0; }   /* 2.7.3: sayfadaki arama kutusu ekrandayken */
@media (prefers-reduced-motion: no-preference) { .mz-bar-sag > [slot="action"], .mz-bar-sag > .mz-bar-ara { 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("semboller/gezinme.kapat.svg") center / contain no-repeat;
          mask: url("semboller/gezinme.kapat.svg") 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-ic { padding-top: var(--mz-edge); }   /* 2.7.13: pencere köşesinde üst = yan (tutamak yok) */
  .mz-sheet-kapat { top: calc(var(--mz-edge) - (var(--mz-close) - 28px) / 2); }   /* başlık satırıyla (28) ortalı, sağ = üst köşe boşluğu */
  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(max(var(--mz-tabbar), var(--mz-tabbar-gercek, 0px)) + var(--mz-safe-b) + var(--mz-sp-12)); }   /* 2.7.15b: yazıyla büyüyen sekme çubuğunun üstünde */
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; } }

/* <mz-akis> (2.7.12, Standart 13 içerik akışı): genelleme sınamasında 2.0–2.7.12 kuralları sosyal akışı "Ayarlar" gibi kurdu (her gönderi ayrı
   gruplu kart, büyük boşluk, ekranda 1,5 gönderi, görsel kartı taşıyordu). Kategori liderleri ölçüldü (X, Bluesky, Reddit; Threads giriş istediği için ölçülemedi):
   tam genişlik satır + ince ayırıcı, avatar 40 sol sütunda, ad · kullanıcı · zaman TEK satır, metin avatarın sağında, görsel içerik sütununda
   yuvarlak, eylemler simge 20 + sayı 13. Metastaz kimliği: kenar 25, Metastaz Sans, Symbols, metin 16/21 (50+ okur için X'in 15'inden büyük).
   <mz-akis><a class="mz-akis-yaz" href="…"><span class="mz-avatar">DY</span>Ne düşünüyorsun?</a>
     <article><span class="mz-avatar" data-ton="pink">AK</span><header><b>Ad</b><span>@kul</span><time>2 dk</time></header><p>…</p>[img|video|picture]
       [header'ın sonunda <button class="mz-akis-daha" aria-label="Diğer"><mz-sembol ad="gezinme.daha"></mz-sembol></button>: sessize al / bildir / engelle]
       <footer><button aria-label="Yanıtla"><mz-sembol ad="iletisim.yanitla"></mz-sembol>12</button>…</footer></article></mz-akis> */
mz-akis { display: flow-root; max-width: var(--mz-maxw); margin: 0 auto; background: var(--mz-bg-plain); }
mz-akis > article, .mz-akis-yaz { box-shadow: inset 0 calc(-1 * var(--mz-hairline-w)) 0 var(--mz-hairline); }
mz-akis > article { display: grid; grid-template-columns: var(--mz-sp-40) minmax(0, 1fr); column-gap: var(--mz-sp-12); padding: var(--mz-sp-12) var(--mz-edge) var(--mz-sp-4); }
mz-akis .mz-avatar { width: var(--mz-sp-40); height: var(--mz-sp-40); font: var(--mz-w-emph) 15px/20px var(--mz-font); }
mz-akis > article > .mz-avatar { grid-row: 1 / span 6; align-self: start; }
mz-akis .mz-avatar[data-ton="pink"] { --mz-ton: var(--mz-t-pink); } mz-akis .mz-avatar[data-ton="green"] { --mz-ton: var(--mz-t-green); }
mz-akis .mz-avatar[data-ton="orange"] { --mz-ton: var(--mz-t-orange); } mz-akis .mz-avatar[data-ton="red"] { --mz-ton: var(--mz-t-red); }
mz-akis .mz-avatar[data-ton="purple"] { --mz-ton: var(--mz-t-purple); } mz-akis .mz-avatar[data-ton="cyan"] { --mz-ton: var(--mz-t-cyan); }
mz-akis > article > header { display: flex; align-items: baseline; gap: var(--mz-sp-4); min-width: 0; font: var(--mz-type-subhead); letter-spacing: var(--mz-ls-subhead); color: var(--mz-muted); white-space: nowrap; }
mz-akis > article > header > b { overflow: hidden; text-overflow: ellipsis; font-weight: var(--mz-w-emph); color: var(--mz-text); }
mz-akis > article > header > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
mz-akis > article > header > time { flex: none; }
mz-akis > article > header > time::before { content: "· "; }
mz-akis > article > p { margin: var(--mz-sp-2) 0 0; font: var(--mz-type-callout); letter-spacing: var(--mz-ls-callout); color: var(--mz-text); overflow-wrap: anywhere; text-wrap: pretty; }
mz-akis > article > :is(img, video, picture, figure) { display: block; grid-column: 2; width: 100%; max-height: 510px; height: auto; margin: var(--mz-sp-10) 0 0; object-fit: cover;
  border-radius: var(--mz-r-ic); box-shadow: 0 0 0 var(--mz-hairline-w) var(--mz-hairline); }
mz-akis > article > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }
mz-akis > article > footer { grid-column: 2; display: flex; justify-content: space-between; max-width: 300px; margin-block: var(--mz-sp-2) 0; margin-inline-start: calc(-1 * var(--mz-sp-10)); }   /* mantıksal kenar: sağdan sola dilde de simge hizası metinle aynı */
mz-akis > article > footer > :is(button, a) { display: inline-flex; align-items: center; gap: var(--mz-sp-6); min-width: var(--mz-hit); min-height: var(--mz-hit); padding: 0 var(--mz-sp-10);
  border: 0; background: none; color: var(--mz-muted); font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote); font-feature-settings: "tnum"; text-decoration: none; cursor: pointer;
  border-radius: var(--mz-r-full); transition: transform var(--mz-dur-short) var(--mz-ease); }
mz-akis > article > footer mz-sembol { width: 20px; height: 20px; vertical-align: 0; }
mz-akis > article > footer [aria-pressed="true"] { color: var(--mz-t-pink); }
mz-akis > article > footer [aria-pressed="true"][data-eylem="yeniden"] { color: var(--mz-t-green); }   /* yeniden paylaşıldı: yeşil (X/Bluesky dili); beğeni pembe; simge çizgi kalır */
/* Diğer (…) menüsü: sessize al / bildir / engelle (moderasyon her gönderide bir dokunuş; X, Bluesky). Başlık satırının sonunda, 44 dokunma alanı satır yüksekliğini büyütmez. */
mz-akis > article > header > .mz-akis-daha { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--mz-hit); min-height: var(--mz-hit);
  margin-block: calc(-1 * var(--mz-sp-12)); margin-inline: auto calc(-1 * var(--mz-sp-12)); padding: 0; border: 0; background: none; color: var(--mz-muted); border-radius: var(--mz-r-full); cursor: pointer; align-self: center; }
mz-akis > article > header > .mz-akis-daha mz-sembol { width: 20px; height: 20px; }
mz-akis > article > header > .mz-akis-daha:focus-visible { outline: 0; background: var(--mz-tint); }
mz-akis > article > footer :is(button, a):active { transform: scale(.92); }
mz-akis > article > footer :is(button, a):focus-visible { outline: 0; background: var(--mz-tint); }
mz-akis > mz-segment { margin: var(--mz-sp-8) var(--mz-edge) var(--mz-sp-12); }
.mz-akis-yaz { display: flex; align-items: center; gap: var(--mz-sp-12); min-height: var(--mz-row-sub); padding: var(--mz-sp-12) var(--mz-edge); color: var(--mz-muted); text-decoration: none; font: var(--mz-type-body); letter-spacing: var(--mz-ls-body); }
.mz-akis-yaz:focus-visible { outline: 0; background: var(--mz-tint); }
@media (prefers-reduced-motion: reduce) { mz-akis > article > footer :is(button, a) { transition: none; } mz-akis > article > footer :is(button, a):active { transform: none; } }
body.mz:has(> main > mz-akis), body.mz:has(> mz-akis) { background: var(--mz-bg-plain); }   /* akış sayfası beyaz/siyah zeminde (X, Threads); çubuk sayfa zeminini izler */

/* ---- <mz-dikey-akis> (2.8.0, Standart 14): dikey kısa video sayfası. Her öge tam ekran (yapışmalı kaydırma), yazı ve eylemler alt/yan PERDE üstünde.
   Kural (sozlesme): kısa videolar KENDİ sekmesindedir; ana akışa en çok bir gizlenebilir raf olarak girer (<mz-raf dikey gizle="kisa">) — YouTube "Shorts sızması" şikâyeti.
   Sayfa <html data-theme="dark"> ile açılır (sahne siyah; Apple TV / Fotoğraflar tam ekran dili). */
mz-dikey-akis { display: block; container-type: size; height: calc(100dvh / var(--mz-tv-olcek, 1) - var(--mz-bar) - var(--mz-ust) - max(var(--mz-tabbar), var(--mz-tabbar-gercek, 0px)) - var(--mz-safe-b));   /* denetçi M2: üst çubuk düşülmüyordu; 2. tur: TV zoom 1,5 altında dvh de büyür → ölçeğe bölünür (Design body/sheet/alert ile aynı) */ overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory;
  scrollbar-width: none; background: var(--mz-md-sahne); color: var(--mz-md-yazi); }
mz-dikey-akis::-webkit-scrollbar { display: none; }
mz-dikey-akis > article { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
mz-dikey-akis > article > .mz-medya { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: var(--mz-md-sahne); }
mz-dikey-akis > article > .mz-medya > img, mz-dikey-akis > article > .mz-medya > video { object-fit: cover; }   /* kısa video 9:16 çekilir: ekranı doldurur */
.mz-dikey-bilgi { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--mz-sp-56) calc(var(--mz-edge) + var(--mz-hit) + var(--mz-sp-12)) var(--mz-sp-20) var(--mz-edge); background: var(--mz-md-perde); }
.mz-dikey-bilgi > p { text-shadow: var(--mz-md-golge); margin: var(--mz-sp-8) 0 0; font: var(--mz-type-subhead); letter-spacing: var(--mz-ls-subhead); color: var(--mz-md-yazi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-dikey-bilgi > .mz-kimlik { margin: 0; }
.mz-dikey-bilgi > .mz-kimlik b, .mz-dikey-bilgi > .mz-kimlik b a { color: var(--mz-md-yazi); }
.mz-dikey-bilgi > .mz-kimlik span:not(.mz-avatar) { color: var(--mz-md-yazi-2); }
.mz-dikey-eylem { position: absolute; right: var(--mz-sp-12); bottom: var(--mz-sp-24); z-index: 2; display: grid; gap: var(--mz-sp-16); justify-items: center; }
.mz-dikey-eylem > button { position: relative; display: grid; justify-items: center; gap: var(--mz-sp-2); min-width: var(--mz-hit); padding: 0; border: 0; background: none; color: var(--mz-md-yazi); cursor: pointer;
  font: var(--mz-type-caption); font-weight: var(--mz-w-emph); font-feature-settings: "tnum"; text-shadow: var(--mz-md-golge); }   /* açık karede sayı okunur (1,3:1 idi) */
.mz-dikey-eylem > button > mz-sembol { width: 44px; height: 44px; padding: var(--mz-sp-10); border-radius: var(--mz-r-full); background: var(--mz-md-rozet); }
.mz-dikey-eylem > button[aria-pressed="true"] > mz-sembol { color: var(--mz-danger); }
.mz-dikey-eylem > button:focus-visible { outline: 0; } .mz-dikey-eylem > button:focus-visible > mz-sembol { box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-md-yazi); }
@container (min-width: 600px) {   /* geniş kutu (masaüstü/TV; kabın genişliğine göre, ekrana değil): ortada 9:16 sahne, eylemler sahnenin sağında (masaüstü/TV) */
  mz-dikey-akis > article > .mz-medya { inset: var(--mz-sp-16) auto var(--mz-sp-16) 50%; width: auto; height: calc(100% - var(--mz-sp-32)); aspect-ratio: var(--mz-md-oran-dikey); transform: translateX(-50%); border-radius: var(--mz-r-l); }
  .mz-dikey-bilgi { inset: auto auto var(--mz-sp-16) 50%; width: calc(100cqh * 9 / 16); transform: translateX(-50%); border-radius: 0 0 var(--mz-r-l) var(--mz-r-l); padding-right: var(--mz-edge); }
  .mz-dikey-eylem { right: auto; left: calc(50% + 100cqh * 9 / 32 + var(--mz-sp-16)); }
}


/* ---- Vitrin (Standart 12, 2.7.12): metastaz.org'un Apple turunda (10-25) elle yazdığı kahraman/bant/karo/kanıt TEK kaynakta.
   JS yok: içerik HTML'de kalır (arama motoru, CSP, JS kapalı tarayıcı). Ölçüler apple.com/tr ölçümünden (docs/standartlar/hig-esleme.md).
   Kırılımlar: 760 (orta), 1000 (geniş) — belirtecler.json bilesen.vitrin. */

/* üst etiket (eyebrow): Apple App Store "TRY NOW", Music "NEW EP", apple.com "YENİ" — 12/16/640, ikincil renk, büyük harf (lang="tr" → İ) */
.mz-eyebrow { display: block; margin: 0 0 var(--mz-sp-6); font: var(--mz-type-eyebrow); letter-spacing: var(--mz-ls-eyebrow); text-transform: uppercase; color: var(--mz-muted); }
.mz-eyebrow--yeni { color: var(--mz-wait-text); }
.mz-eyebrow--vurgu { color: var(--mz-link); }

/* tanıtım hapı: apple.com kapsül düğme; dokunma 44 (telefonda Apple 36 → bizde 44, HIG 44 alt sınırı). Birincil = dolgulu, ikincil = tonlu. */
.mz-btn.mz-btn--hap.mz-btn--hap { display: inline-flex; width: auto; min-height: var(--mz-hit); padding: 0 var(--mz-sp-22); border-radius: var(--mz-r-ctl); font-size: 17px; line-height: 22px; }   /* 2.7.13: 44 düğme köşe 16 (kapsül yalnız S 32; sahip "bazen radyus fazla bazen az") */
.mz-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mz-sp-12); margin-top: var(--mz-sp-20); }
/* "Daha fazla" açılır: <details class="mz-df"><summary class="mz-btn mz-btn--hap mz-btn--tinted">…</summary><p>…</p></details> */
.mz-df > summary { list-style: none; cursor: pointer; }
.mz-df > summary::-webkit-details-marker { display: none; }
.mz-df[open] { flex-basis: 100%; }
.mz-df > p { max-width: 32em; margin: var(--mz-sp-12) auto 0; font: var(--mz-type-body); letter-spacing: var(--mz-ls-body); color: var(--mz-muted); text-wrap: pretty; }

/* <mz-hero>: sayfanın kahramanı. Çocuklar: [.mz-eyebrow] h1 [p] [.mz-cta] [.mz-gorsel]. Telefon 48 → orta 64 → geniş 80, ağırlık 600 (Apple). */
mz-hero { display: block; padding: var(--mz-vt-ust) var(--mz-edge) 0; text-align: center; background: var(--mz-bg-plain); overflow: hidden; }
mz-hero > h1 { max-width: 14em; margin: 0 auto; font: var(--mz-type-display-m); letter-spacing: var(--mz-ls-display-m); color: var(--mz-text); text-wrap: balance; }
mz-hero > p { max-width: 26em; margin: var(--mz-sp-8) auto 0; font: var(--mz-w-body) var(--mz-vt-kahraman-alt) var(--mz-font); letter-spacing: var(--mz-ls-reading-q); color: var(--mz-muted); text-wrap: balance; }
mz-hero:not(:has(> .mz-gorsel)) { padding-bottom: var(--mz-vt-ust); }

/* görsel: kasıtlı kesik + solma (org 3. tur dersi: sert kesik yok, alttaki bölüme taşma yok). <div class="mz-gorsel"><picture>…</picture></div> */
.mz-gorsel { display: flex; justify-content: center; align-items: flex-start; max-height: min(var(--mz-vt-gorsel-yuk), 104vw); margin-top: var(--mz-vt-gorsel-ara); overflow: hidden; }
.mz-gorsel img { display: block; width: min(420px, 100vw); max-width: none; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(min(var(--mz-vt-gorsel-yuk), 104vw) - var(--mz-vt-solma)), transparent min(var(--mz-vt-gorsel-yuk), 104vw));
  mask-image: linear-gradient(to bottom, #000 calc(min(var(--mz-vt-gorsel-yuk), 104vw) - var(--mz-vt-solma)), transparent min(var(--mz-vt-gorsel-yuk), 104vw)); }
mz-hero > .mz-gorsel { max-height: min(calc(var(--mz-vt-gorsel-yuk) + 100px), 124vw); }
mz-hero > .mz-gorsel img { width: min(500px, 104vw);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(min(calc(var(--mz-vt-gorsel-yuk) + 100px), 124vw) - var(--mz-vt-solma)), transparent min(calc(var(--mz-vt-gorsel-yuk) + 100px), 124vw));
  mask-image: linear-gradient(to bottom, #000 calc(min(calc(var(--mz-vt-gorsel-yuk) + 100px), 124vw) - var(--mz-vt-solma)), transparent min(calc(var(--mz-vt-gorsel-yuk) + 100px), 124vw)); }

@media (min-width: 760px) {
  mz-hero > h1 { font: var(--mz-type-display-xl); letter-spacing: var(--mz-ls-display-xl); }
}
@media (min-width: 1000px) {
  mz-hero { padding-top: var(--mz-vt-ust-genis); }
  mz-hero:not(:has(> .mz-gorsel)) { padding-bottom: var(--mz-vt-ust-genis); }
  mz-hero > h1 { font: var(--mz-type-display-2xl); letter-spacing: var(--mz-ls-display-2xl); }
  mz-hero > p { font: var(--mz-w-body) var(--mz-vt-kahraman-alt-genis) var(--mz-font); letter-spacing: var(--mz-ls-title1); }
  .mz-gorsel { max-height: var(--mz-vt-gorsel-yuk-genis); margin-top: var(--mz-vt-gorsel-ara-genis); }
  .mz-gorsel img { width: 520px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--mz-vt-gorsel-yuk-genis) - var(--mz-vt-solma)), transparent var(--mz-vt-gorsel-yuk-genis));
    mask-image: linear-gradient(to bottom, #000 calc(var(--mz-vt-gorsel-yuk-genis) - var(--mz-vt-solma)), transparent var(--mz-vt-gorsel-yuk-genis)); }
  mz-hero > .mz-gorsel { max-height: calc(var(--mz-vt-gorsel-yuk-genis) + 100px); }
  mz-hero > .mz-gorsel img { width: 600px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--mz-vt-gorsel-yuk-genis) + 100px - var(--mz-vt-solma)), transparent calc(var(--mz-vt-gorsel-yuk-genis) + 100px));
    mask-image: linear-gradient(to bottom, #000 calc(var(--mz-vt-gorsel-yuk-genis) + 100px - var(--mz-vt-solma)), transparent calc(var(--mz-vt-gorsel-yuk-genis) + 100px)); }
}

/* <mz-kanit>: tek satır ölçüm şeridi (metastaz.org 10-25: "383 KB · 0 çerez · başka şirkete 0 istek"). Sayılar ELLE YAZILMAZ:
   kit derlemesi (metastaz-kit/vitrin/kanit.py) çıktıyı ölçüp yazar ve data-olculdu="<YYYY-MM-DD>" koyar; mz lint 'kanit-olcumsuz' bunu arar.
   <mz-kanit data-olculdu="2026-10-26;h=fb98cbb05c38"><span>383 KB</span><span>0 çerez</span><span>başka şirkete 0 istek</span></mz-kanit> */
mz-kanit { display: block; margin: var(--mz-sp-24) auto 0; padding: 0 var(--mz-edge); text-align: center; font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote);
  color: var(--mz-muted); font-feature-settings: "tnum"; text-wrap: balance; }
mz-kanit > span { white-space: nowrap; }
mz-kanit > span + span::before { content: " · "; }

/* <mz-karo-izgara>: küçük, eşit ürün karoları (apple.com küçük ürün karosu; metastaz.org "Diğer hizmetler" 10-25 2. tur).
   <mz-karo-izgara [baslik="…"]><h2>…</h2><a href="…"><img …><span><b>Ad</b><small>Tek satır</small></span></a>…</mz-karo-izgara>
   Sütun: telefonda 2, ≥ 760'ta 4 (açık sayı, ara genişlikte 3+1 kırılmaz); karo dar kalırsa ad simgenin altına iner (kaba göre); simge 40 (Apple maskesi %22,5), ad 17/640, alt satır 13/18 ikincil; taşarsa … ; bütün karo dokunulur (≥ 64). */
mz-karo-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mz-vt-karo-ara);   /* AÇIK sütun sayısı: telefonda 2, ≥ 760'ta 4 (auto-fill 434–565 px'te 3+1 kırıyordu, denetçi 2. tur) */
  padding: var(--mz-sp-40) max(var(--mz-edge), calc((100% - var(--mz-maxw-wide)) / 2)) var(--mz-sp-48); background: var(--mz-bg); }
mz-karo-izgara > h2 { grid-column: 1 / -1; margin: 0 0 var(--mz-sp-12); text-align: center; font: var(--mz-type-display-s); letter-spacing: var(--mz-ls-display-s);   /* vitrin hiyerarşisi: bant başlıkları 600 gösterim, bölüm başlığı da gösterim ailesinden (denetçi L7) */ color: var(--mz-text); text-wrap: balance; }
mz-karo-izgara > a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mz-sp-8) var(--mz-sp-10); min-width: 0; min-height: var(--mz-vt-karo-min); padding: var(--mz-sp-12);
  border-radius: var(--mz-r-card); background: var(--mz-surface); box-shadow: var(--mz-card-shadow); color: var(--mz-text); text-decoration: none;
  transition: transform var(--mz-dur-short) var(--mz-ease), background-color var(--mz-dur-short) linear; }
mz-karo-izgara > a > img, mz-karo-izgara > a > svg { flex: none; width: var(--mz-vt-karo-simge); height: var(--mz-vt-karo-simge); border-radius: 22.5%; }
mz-karo-izgara > a > span { display: flex; flex-direction: column; flex: 1 1 120px; min-width: 0; }   /* 2.7.13: 100 → 120 (430 px telefonda 18 harflik alt satır kesiliyordu); yan yana 40 + 10 + 120 sığmazsa ad simgenin altına iner (kabın genişliğine göre, ekrana göre değil) */
mz-karo-izgara > a b, mz-karo-izgara > a small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
mz-karo-izgara > a b { font: var(--mz-type-headline); font-weight: var(--mz-w-emph); letter-spacing: var(--mz-ls-headline); }
mz-karo-izgara > a small { font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote); color: var(--mz-muted); }
mz-karo-izgara > a:active { transform: scale(.98); }
/* odak: Design kararı (Labs 10-08) mavi ton zemin, halkasız; karo yüzeyi korunur, ton ÜSTÜNE biner (gri düğme gibi). Genel .mz a:focus-visible kuralını (0,5,1) geçmek için aynı :not zinciri + öğe. */
mz-karo-izgara > a:focus-visible, .mz mz-karo-izgara > a:not(.mz-btn):not([class*="btn"]):not([class*="primary"]):focus-visible { outline: 0; box-shadow: var(--mz-card-shadow); background-color: var(--mz-surface); background-image: linear-gradient(var(--mz-tint), var(--mz-tint)), linear-gradient(var(--mz-tint), var(--mz-tint)); }   /* ton iki kat: yüzey üstünde tek kat 1,15:1 idi (TV D-pad'de sönük) */
@media (hover: hover) { mz-karo-izgara > a:hover { background-color: var(--mz-elevated-2); } }
@media (min-width: 760px) { mz-karo-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mz-vt-karo-ara-genis); } }
@media (prefers-reduced-motion: reduce) { mz-karo-izgara > a { transition: none; } mz-karo-izgara > a:active { transform: none; } }
@media (max-width: 340px) { mz-karo-izgara > a { padding-inline: var(--mz-sp-8); } mz-karo-izgara { gap: var(--mz-sp-8); } }   /* 320 px telefonda "Uygulamalar" kesilmesin (ara genişlik sınaması kalibrasyon/karo_genislik.mjs) */

/* ---- Medya ailesi (2.8.0, Standart 14 — video genelleme sınaması 10-26). Kendi ölçümüz: YouTube/Netflix/Apple TV yan yana, kopya değil.
   .mz-medya (kapak çerçevesi) · .mz-medya-kart (kapak + bilgi) · <mz-medya-izgara> · <mz-raf> · .mz-medya-kart--satir · .mz-kimlik · <mz-katlanir>
   Şikâyetlerden düzeltilen: ikincil bilgi düşük karşıtlık (YouTube gri 12 px) → footnote 13/18 --mz-muted (≥ 4,5); "kısa video sızması" → raf
   gizlenebilir ve en çok bir tane (yazar kuralı, sozlesme); dev kapak (masaüstünde 2 sütun) → en az 288, 1280'de 4 sütun. */

/* kapak çerçevesi: oran sabit (CLS yok), görsel kırpılır, süre rozeti + izlenme çubuğu kapak ÜSTÜNDE; tüm kapak tek odak durağı */
.mz-medya { position: relative; display: block; aspect-ratio: var(--mz-md-oran); overflow: hidden; border-radius: var(--mz-r-s); background: var(--mz-fill);
  color: var(--mz-md-yazi); text-decoration: none; -webkit-tap-highlight-color: transparent; isolation: isolate; }
.mz-medya--dikey { aspect-ratio: var(--mz-md-oran-dikey); }
.mz-medya > img, .mz-medya > video, .mz-medya > picture, .mz-medya > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-medya-sure { position: absolute; right: var(--mz-sp-6); bottom: var(--mz-sp-6); z-index: 1; padding: var(--mz-sp-2) var(--mz-sp-6); border-radius: var(--mz-r-xs);
  background: var(--mz-md-rozet); color: var(--mz-md-yazi); font: var(--mz-type-caption); font-weight: var(--mz-w-emph); font-feature-settings: "tnum"; letter-spacing: var(--mz-ls-caption); }
.mz-medya-sure--canli { background: var(--mz-danger-solid); }
.mz-medya-izlendi { position: absolute; inset: auto 0 0 0; z-index: 1; width: 100%; height: var(--mz-md-ilerleme); margin: 0; border: 0; appearance: none; -webkit-appearance: none;
  background: var(--mz-md-yazi-2); color: var(--mz-primary); }
.mz-medya-izlendi::-webkit-progress-bar { background: var(--mz-md-yazi-2); }
.mz-medya-izlendi::-webkit-progress-value { background: var(--mz-primary); }
.mz-medya-izlendi::-moz-progress-bar { background: var(--mz-primary); }
.mz-medya--dikey > .mz-medya-baslik { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--mz-sp-24) var(--mz-sp-10) var(--mz-sp-10); background: var(--mz-md-perde);
  color: var(--mz-md-yazi); font: var(--mz-type-subhead); font-weight: var(--mz-w-emph); letter-spacing: var(--mz-ls-subhead);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* odak (klavye/TV): halka + TV'de hafif büyüme (Apple TV odak dili, paralaks yok); hareket azaltılmışsa büyüme yok */
.mz-medya:focus-visible, .mz .mz-medya:not(.mz-btn):not([class*="btn"]):not([class*="primary"]):focus-visible { outline: 0; background-color: var(--mz-fill); box-shadow: 0 0 0 var(--mz-sp-3) var(--mz-bg), 0 0 0 calc(var(--mz-sp-3) * 2) var(--mz-link); }   /* genel bağlantı odağı (ton zemin, gölgesiz) kapakta görünmüyordu */
@media (prefers-reduced-motion: no-preference) {
  .mz-medya { transition: transform var(--mz-dur-short) var(--mz-ease), box-shadow var(--mz-dur-short) linear; }
  .mz-medya:active { transform: scale(.98); }
}
@media (min-width: 1280px) and (hover: none), (min-width: 1280px) and (pointer: none) {   /* TV (D-pad; Design TV koşuluyla aynı): odaklı kapak büyür, gölge katmanı */
  .mz-medya:focus-visible, .mz .mz-medya:not(.mz-btn):not([class*="btn"]):not([class*="primary"]):focus-visible { transform: scale(var(--mz-md-tv-olcek)); box-shadow: 0 0 0 calc(var(--mz-sp-3) * 2) var(--mz-link), var(--mz-float); z-index: 2; }
}

/* kart: kapak + bilgi (avatar | başlık 2 satır + üst bilgi | ⋯) */
.mz-medya-kart { position: relative; display: flex; flex-direction: column; gap: var(--mz-sp-12); min-width: 0; }
.mz-medya-bilgi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--mz-sp-12); align-items: start; }
.mz-medya-bilgi > .mz-avatar { width: 36px; height: 36px; font-size: 13px; }
.mz-medya-bilgi:not(:has(> .mz-avatar)) { grid-template-columns: minmax(0, 1fr) auto; }
.mz-medya-bilgi h3 { margin: 0; font: var(--mz-type-headline); letter-spacing: var(--mz-ls-headline); color: var(--mz-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-medya-bilgi h3 a { color: inherit; text-decoration: none; }
.mz-medya-bilgi h3 a::after { content: ""; position: absolute; inset: 0; }   /* bütün kart tek dokunma alanı (başlık bağlantısı kartı kaplar); avatar ve ⋯ üstte */
.mz-medya-bilgi > .mz-avatar, .mz-medya-daha { position: relative; z-index: 1; }
.mz-medya-bilgi > a.mz-avatar { text-decoration: none; overflow: visible; }   /* avatar kendi taşmasını kırpıyordu → genişletme görünmüyordu */
.mz-medya-bilgi > a.mz-avatar::after { content: ""; position: absolute; inset: -4px; }
.mz-medya-bilgi p { margin: var(--mz-sp-4) 0 0; font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote); color: var(--mz-muted); }
.mz-medya-bilgi p a, .mz .mz-medya-bilgi p a:not([class]) { color: inherit; text-decoration: none; }   /* genel bağlantı rengi (0,3,1) kanal adını maviye boyuyordu */
.mz-medya-daha { position: relative; display: grid; place-items: center; width: var(--mz-control-s); height: var(--mz-control-s); margin: calc(var(--mz-sp-4) * -1) 0 0 0;   /* sağa taşmaz: ızgarada komşu kartın avatarıyla dokunma çakışıyordu */
  padding: 0; border: 0; border-radius: var(--mz-r-full); background: none; color: var(--mz-muted); cursor: pointer; }
.mz-medya-daha::after { content: ""; position: absolute; inset: calc((var(--mz-hit) - var(--mz-control-s)) / -2); }
.mz-medya-daha > mz-sembol { width: 20px; height: 20px; }

/* ızgara: telefonda tek sütun ve kapak KENARDAN KENARA (köşesiz; video ekranı en geniş hâliyle), yazı 25 içeride; ≥ 600 ölçülü ızgara */
mz-medya-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mz-sp-28) var(--mz-sp-16); margin: var(--mz-sp-12) 0 var(--mz-sp-32); }
@media (max-width: 599px) {
  mz-medya-izgara > .mz-medya-kart > .mz-medya { margin-inline: calc(var(--mz-edge) * -1); border-radius: 0; }
}
@media (min-width: 600px) { mz-medya-izgara { grid-template-columns: repeat(auto-fill, minmax(var(--mz-md-izgara-min), 1fr)); gap: var(--mz-sp-32) var(--mz-sp-16); } }

/* satır: küçük kapak + metin (arama, sıradaki, kitaplık). Başlık 2 satır, üst bilgi 2 satıra kadar. */
.mz-medya-kart--satir { display: grid; grid-template-columns: var(--mz-md-satir-kapak) minmax(0, 1fr); gap: var(--mz-sp-12); align-items: start; }
.mz-medya-kart--satir > .mz-medya-bilgi { grid-template-columns: minmax(0, 1fr) auto; }
.mz-medya-kart--satir > .mz-medya-bilgi > .mz-avatar { display: none; }
.mz-medya-kart--satir .mz-medya-bilgi h3 a::after { inset: -14px 0 -2px 0; }   /* satır kartı: dokunma alanı satırlar arası boşluğun yarısına uzar (tek satır başlık üstte 44) */
.mz-medya-kart--satir .mz-medya-bilgi h3 { font: var(--mz-type-subhead); font-weight: var(--mz-w-emph); letter-spacing: var(--mz-ls-subhead); }
.mz-medya-liste { display: grid; gap: var(--mz-sp-16); margin: var(--mz-sp-12) 0 var(--mz-sp-24); }

/* raf: yatay kaydırılan satır (başlık + Tümü + gizle). Kenar payı kaydırma alanının içinde; yapışma (snap); klavye/TV ile odaklanan kart görünüre kayar */
mz-raf { display: block; margin: var(--mz-sp-8) 0 var(--mz-sp-28); }
mz-raf > header { display: flex; align-items: center; gap: var(--mz-sp-8); min-height: var(--mz-hit); }
mz-raf > header > h2 { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--mz-type-title3); letter-spacing: var(--mz-ls-title3); color: var(--mz-text); }
mz-raf > header > a { display: inline-flex; align-items: center; min-height: var(--mz-hit); padding: 0 var(--mz-sp-4); font: var(--mz-type-subhead); color: var(--mz-link); text-decoration: none; }
mz-raf > header > button { position: relative; display: grid; place-items: center; width: var(--mz-control-s); height: var(--mz-control-s); padding: 0; border: 0; border-radius: var(--mz-r-full);
  background: var(--mz-fill); color: var(--mz-muted); cursor: pointer; }
mz-raf > header > button::after { content: ""; position: absolute; inset: calc((var(--mz-hit) - var(--mz-control-s)) / -2); }
mz-raf > header > button > mz-sembol { width: 16px; height: 16px; }
.mz-raf-ic { display: grid; grid-auto-flow: column; grid-auto-columns: var(--mz-md-raf-kart); gap: var(--mz-sp-12); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--mz-edge) * -1); padding: var(--mz-sp-8) var(--mz-edge) var(--mz-sp-12); scroll-padding-inline: var(--mz-edge); }
.mz-raf-ic::-webkit-scrollbar { display: none; }
.mz-raf-ic > * { scroll-snap-align: start; }
mz-raf[dikey] .mz-raf-ic { grid-auto-columns: var(--mz-md-dikey-kart); }
mz-raf[gizli] { display: none; }
@media (min-width: 760px) { .mz-raf-ic { grid-auto-columns: var(--mz-md-raf-kart-genis); gap: var(--mz-sp-16); } mz-raf[dikey] .mz-raf-ic { grid-auto-columns: var(--mz-md-dikey-kart-genis); } }
.mz-raf-ok { display: none; }
@media (hover: hover) and (min-width: 1024px) {   /* fareyle: rafın iki ucunda ok (klavye/TV zaten oklarla kaydırır) */
  mz-raf { position: relative; }
  .mz-raf-ok { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: var(--mz-hit); height: var(--mz-hit); padding: 0; border: 0; border-radius: var(--mz-r-full);
    background: var(--mz-elevated); color: var(--mz-text); box-shadow: var(--mz-float); cursor: pointer; opacity: 0; transition: opacity var(--mz-dur-short) linear; }
  .mz-raf-ok--geri { left: calc(var(--mz-sp-8) * -1); } .mz-raf-ok--ileri { right: calc(var(--mz-sp-8) * -1); }
  mz-raf:hover .mz-raf-ok:not([hidden]), .mz-raf-ok:focus-visible { opacity: 1; }
  .mz-raf-ok > mz-sembol { width: 20px; height: 20px; }
}

/* kimlik satırı: avatar | ad + alt | eylem (kanal satırı, yazar, kişi). Kartsız düzende de hizalı. */
.mz-kimlik { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--mz-sp-12); min-height: var(--mz-hit); margin: var(--mz-sp-12) 0; }
.mz-kimlik > .mz-avatar { width: 40px; height: 40px; }
.mz-kimlik > div { min-width: 0; }
.mz-kimlik b { display: block; min-width: 0; font: var(--mz-type-headline); letter-spacing: var(--mz-ls-headline); color: var(--mz-text); white-space: nowrap; }
.mz-kimlik b a { display: block; overflow: hidden; text-overflow: ellipsis; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: none; }   /* ad satırı 22 → dokunma 44 (iç dolgu; kesme bağlantının kendisinde) */
.mz-kimlik span:not(.mz-avatar) { display: block; font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote); color: var(--mz-muted); }
.mz-kimlik > .mz-btn { width: auto; }

/* katlanır metin: 3 satır + "Daha fazla" (açıklama). Zaman bağlantıları <a data-zaman="130">2:10</a> oynatıcıyı o ana götürür. */
mz-katlanir { display: block; margin: var(--mz-sp-12) 0; padding: var(--mz-sp-12) var(--mz-sp-16); border-radius: var(--mz-r-ic); background: var(--mz-fill); }
mz-katlanir > .mz-kat-ust { margin: 0 0 var(--mz-sp-4); font: var(--mz-type-subhead); font-weight: var(--mz-w-emph); letter-spacing: var(--mz-ls-subhead); color: var(--mz-text); }
mz-katlanir > .mz-kat-metin { margin: 0; font: var(--mz-type-subhead); letter-spacing: var(--mz-ls-subhead); color: var(--mz-text); white-space: pre-line; }
mz-katlanir:not([acik]) > .mz-kat-metin { display: -webkit-box; -webkit-line-clamp: var(--mz-kat-satir, 3); -webkit-box-orient: vertical; overflow: hidden; }
/* bölümler: açıklamadaki satır içi zaman bağlantısı yerine 44'lük çip şeridi (telefonda 13 px satır içi bağlantı dokunulmaz; YouTube bölüm kartı dili) */
.mz-bolumler > .mz-chip { font-feature-settings: "tnum"; }
.mz-bolumler > .mz-chip > b { font-weight: var(--mz-w-emph); color: var(--mz-link); }
.mz-kat-dugme { position: relative; margin-top: var(--mz-sp-4); padding: var(--mz-sp-4) 0; border: 0; background: none; font: var(--mz-type-subhead); font-weight: var(--mz-w-emph); color: var(--mz-text); cursor: pointer; }
.mz-kat-dugme::after { content: ""; position: absolute; inset: -10px -8px; }
/* sayfa başı (kanala bağlı olmayan h1: oynatma listesi, kitaplık) */
.mz-sayfa-bas { padding: var(--mz-sp-20) 0 var(--mz-sp-8); }
.mz-sayfa-bas > .mz-large-title { margin: 0; }
.mz-sayfa-bas > .mz-sub { margin: var(--mz-sp-4) 0 0; }
.mz-sayfa-bas > .mz-actions { display: flex; flex-wrap: wrap; gap: var(--mz-gap-btn); margin-top: var(--mz-sp-16); }
.mz-sayfa-bas > .mz-actions > .mz-btn { width: auto; }
/* numaralı liste (oynatma listesi sırası) ve şimdiki öge */
ol.mz-medya-liste { padding: 0; list-style: none; counter-reset: mz-sira; }
.mz-medya-liste--numarali > .mz-medya-kart--satir { grid-template-columns: var(--mz-sp-24) var(--mz-md-satir-kapak) minmax(0, 1fr); counter-increment: mz-sira; }
.mz-medya-liste--numarali > .mz-medya-kart--satir::before { content: counter(mz-sira); align-self: center; font: var(--mz-type-footnote); font-feature-settings: "tnum"; color: var(--mz-muted); text-align: center; }
.mz-medya-kart--satir[aria-current] { border-radius: var(--mz-r-s); box-shadow: 0 0 0 var(--mz-sp-6) var(--mz-tint); background: var(--mz-tint); }
.mz-medya-liste--numarali > .mz-medya-kart--satir[aria-current]::before { content: "▶"; color: var(--mz-link); }

/* ---- <mz-oynatici> (2.8.0, Standart 14): video oynatıcı kabuğu. Tarayıcının kendi denetimleri yerine her tarayıcıda aynı, Design ölçülü kabuk.
   YouTube şikâyetleri (2025 oynatıcı): ince/düşük karşıtlıklı ilerleme çubuğu, perdesiz denetimler, imleç çıkınca kaybolan denetim →
   ilerleme 4 (sürüklerken 8), BEYAZ dolgu gri iz üstünde (Apple oynatıcı dili), denetimler alt perde üstünde, duraklatılmışken ve odak içerideyken (TV) hiç gizlenmez. */
mz-oynatici { position: relative; display: block; aspect-ratio: var(--mz-md-oran); overflow: hidden; background: var(--mz-md-sahne); color: var(--mz-md-yazi);
  font-family: var(--mz-font); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
mz-oynatici > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--mz-md-sahne); }
.mz-oy-katman { position: absolute; inset: 0; z-index: 1; display: grid; transition: opacity var(--mz-dur-short) linear; }
mz-oynatici[gizli] .mz-oy-katman { opacity: 0; }
mz-oynatici[gizli] { cursor: none; }
.mz-oy-buyuk { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--mz-r-full);
  background: var(--mz-md-rozet); color: var(--mz-md-yazi); cursor: pointer; }
.mz-oy-buyuk > mz-sembol { width: 30px; height: 30px; }
mz-oynatici[oynuyor] .mz-oy-buyuk { display: none; }
.mz-oy-alt { position: absolute; inset: auto 0 0 0; padding: var(--mz-sp-32) var(--mz-sp-12) var(--mz-sp-4); background: var(--mz-md-perde); pointer-events: none; }   /* perde dokunulmaz; yalnız çocukları (denetçi H2) */
.mz-oy-alt > * { pointer-events: auto; }
.mz-oy-buyuk { z-index: 2; }
/* ilerleme: input[type=range] (erişilebilir: ok tuşları, aria-valuetext "2 dk 10 sn / 12 dk 48 sn"). Görünen iz 4, dokunma alanı 44. */
.mz-oy-cizgi { position: relative; height: var(--mz-hit); margin: 0 var(--mz-sp-4) calc(var(--mz-sp-12) * -1); }
.mz-oy-ilerleme { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mz-oy-ilerleme::-webkit-slider-runnable-track { height: var(--mz-md-oy-ilerleme); border-radius: var(--mz-r-full);
  background: linear-gradient(to right, var(--mz-md-yazi) var(--mz-oy-deger, 0%), color-mix(in srgb, var(--mz-md-yazi) 32%, transparent) var(--mz-oy-deger, 0%)); transition: height var(--mz-dur-short) var(--mz-ease); }
.mz-oy-ilerleme::-moz-range-track { height: var(--mz-md-oy-ilerleme); border-radius: var(--mz-r-full); background: color-mix(in srgb, var(--mz-md-yazi) 32%, transparent); }
.mz-oy-ilerleme::-moz-range-progress { height: var(--mz-md-oy-ilerleme); border-radius: var(--mz-r-full); background: var(--mz-md-yazi); }
.mz-oy-ilerleme::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: calc((var(--mz-md-oy-ilerleme) - 14px) / 2); border-radius: var(--mz-r-full); background: var(--mz-md-yazi);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transform: scale(0); transition: transform var(--mz-dur-short) var(--mz-ease); }
.mz-oy-ilerleme::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: var(--mz-r-full); background: var(--mz-md-yazi); transform: scale(0); }
.mz-oy-ilerleme:is(:hover, :focus-visible, :active)::-webkit-slider-runnable-track { height: var(--mz-md-oy-ilerleme-surukle); }
.mz-oy-ilerleme:is(:hover, :focus-visible, :active)::-webkit-slider-thumb { transform: scale(1); margin-top: calc((var(--mz-md-oy-ilerleme-surukle) - 14px) / 2); }
.mz-oy-ilerleme:is(:hover, :focus-visible, :active)::-moz-range-thumb { transform: scale(1); }
.mz-oy-ilerleme:focus-visible { outline: 0; }
.mz-oy-cizgi:has(.mz-oy-ilerleme:focus-visible) { box-shadow: inset 0 0 0 var(--mz-sp-2) var(--mz-md-yazi); border-radius: var(--mz-r-xs); }
.mz-oy-bolum { position: absolute; top: 50%; width: 2px; height: var(--mz-md-oy-ilerleme-surukle); margin: calc(var(--mz-md-oy-ilerleme-surukle) / -2) 0 0 -1px; background: var(--mz-md-sahne); pointer-events: none; }
.mz-oy-dugmeler { display: flex; align-items: center; gap: var(--mz-sp-2); min-height: var(--mz-hit); }
.mz-oy-dugmeler > button { position: relative; display: grid; place-items: center; width: var(--mz-hit); height: var(--mz-hit); padding: 0; border: 0; border-radius: var(--mz-r-full); background: none; color: var(--mz-md-yazi); cursor: pointer; }
.mz-oy-dugmeler > button > mz-sembol { width: 22px; height: 22px; }
.mz-oy-dugmeler > button[hidden] { display: none; }
.mz-oy-dugmeler > button[aria-pressed="true"] { background: color-mix(in srgb, var(--mz-md-yazi) 20%, transparent); }
.mz-oy-dugmeler > button:focus-visible, .mz-oy-buyuk:focus-visible { outline: 0; box-shadow: 0 0 0 var(--mz-sp-2) var(--mz-md-yazi); }
.mz-oy-zaman { margin: 0 var(--mz-sp-6); font: var(--mz-type-footnote); font-weight: var(--mz-w-emph); font-feature-settings: "tnum"; color: var(--mz-md-yazi); white-space: nowrap; }
.mz-oy-zaman > span { color: var(--mz-md-yazi-2); }
.mz-oy-bosluk { flex: 1 1 auto; }
mz-oynatici:fullscreen { aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) { .mz-oy-katman, .mz-oy-ilerleme::-webkit-slider-runnable-track, .mz-oy-ilerleme::-webkit-slider-thumb { transition: none; } }

/* izleme düzeni: telefonda oynatıcı kenardan kenara (çubuğun hemen altında); ≥ 1100 iki sütun (sol: oynatıcı + bilgi + yorumlar, sağ: sıradaki 400).
   YouTube 2026 denemesi (yorumlar yan sütunda, video küçülür) şikâyet aldı → yorumlar videonun altında kalır. */
.mz-izle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--mz-sp-32); }
.mz-page > .mz-izle:first-child { margin-top: 0; }
.mz-izle-ana > mz-oynatici:first-child { margin-inline: calc(var(--mz-edge) * -1); }
.mz-izle-ana > h1 { margin: var(--mz-sp-12) 0 var(--mz-sp-4); font: var(--mz-type-title3); letter-spacing: var(--mz-ls-title3); color: var(--mz-text); text-wrap: pretty; }
.mz-izle-ana > .mz-izle-ust { margin: 0; font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote); color: var(--mz-muted); }
.mz-izle-yan > h2, .mz-izle-ana > h2 { margin: var(--mz-sp-24) 0 var(--mz-sp-8); font: var(--mz-type-title3); letter-spacing: var(--mz-ls-title3); color: var(--mz-text); }
@media (min-width: 1100px) {
  .mz-izle { grid-template-columns: minmax(0, 1fr) var(--mz-md-yan); padding-top: var(--mz-sp-24); }
  .mz-izle-ana > mz-oynatici:first-child { margin-inline: 0; border-radius: var(--mz-r-l); }
  .mz-izle-ana > h1 { font: var(--mz-type-title2); letter-spacing: var(--mz-ls-title2); }
  .mz-izle-yan > h2:first-child { margin-top: 0; }
}

/* ---- .mz-profil-bas (2.8.0, Standart 14): kanal / kişi başlığı. Telefonda ortalı (Apple Kişiler/App Store geliştirici sayfası dili), ≥ 760 solda avatar.
   <header class="mz-profil-bas"><span class="mz-avatar" data-ton>…</span><h1>Ad</h1><p>@kullanıcı · 184 B abone · 212 video</p><p class="mz-profil-not">Kısa açıklama</p><div class="mz-actions">…</div></header> */
.mz-profil-bas { display: grid; justify-items: center; text-align: center; gap: var(--mz-sp-4); padding: var(--mz-sp-24) 0 var(--mz-sp-12); }
.mz-profil-bas > .mz-avatar { width: 88px; height: 88px; margin-bottom: var(--mz-sp-8); font: var(--mz-type-title2); letter-spacing: var(--mz-ls-title2); }
.mz-profil-bas > h1 { margin: 0; font: var(--mz-type-title1); letter-spacing: var(--mz-ls-title1); color: var(--mz-text); text-wrap: balance; }
.mz-profil-bas > p { margin: 0; font: var(--mz-type-footnote); letter-spacing: var(--mz-ls-footnote); color: var(--mz-muted); font-feature-settings: "tnum"; }
.mz-profil-bas > .mz-profil-not { max-width: 32em; margin-top: var(--mz-sp-4); font: var(--mz-type-subhead); letter-spacing: var(--mz-ls-subhead); color: var(--mz-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-profil-bas > .mz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mz-gap-btn); margin-top: var(--mz-sp-12); }
.mz-profil-bas > .mz-actions > .mz-btn { width: auto; min-width: 160px; }
@media (min-width: 760px) {
  .mz-profil-bas { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; column-gap: var(--mz-sp-24); padding-top: var(--mz-sp-32); }
  .mz-profil-bas > .mz-avatar { grid-row: 1 / span 5; width: 120px; height: 120px; margin: 0; font: var(--mz-type-title1); }
  .mz-profil-bas > .mz-actions { justify-content: flex-start; }
}

/* <mz-urun-bandi>: amiral ürün bandı (apple.com ürün karosu; metastaz.org 10-25 2-3. tur). Çocuklar: [.mz-eyebrow] h2 [p] [.mz-cta] [.mz-gorsel].
   Telefon 32 → orta 48 → geniş 56, ağırlık 600. Açık temada zemin sırayla gruplu gri / beyaz (kahramandan sonra ilk bant gri; Apple #F5F5F7 / #FFF);
   koyu temada hepsi tek siyah + ince üst çizgi (org dersi: koyu gri bantlar "çamurlu" görünüyordu). */
mz-urun-bandi { display: block; padding: var(--mz-vt-bant-ust) var(--mz-edge) 0; text-align: center; background: var(--mz-bg); overflow: hidden; }
/* kahraman beyaz → ilk bant gri, sonra sırayla (Apple ana sayfa: komşu iki bölüm aynı zeminde durmaz) */
mz-urun-bandi:nth-of-type(even), mz-urun-bandi[ton="ikincil"] { background: var(--mz-bg-plain); }
mz-urun-bandi[ton="birincil"] { background: var(--mz-bg); }
mz-urun-bandi:not(:has(> .mz-gorsel)) { padding-bottom: var(--mz-vt-bant-ust); }
mz-urun-bandi > h2 { max-width: 16em; margin: 0 auto; font: var(--mz-type-display-s); letter-spacing: var(--mz-ls-display-s); color: var(--mz-text); text-wrap: balance; }
mz-urun-bandi > p { max-width: 26em; margin: var(--mz-sp-6) auto 0; font: var(--mz-w-body) var(--mz-vt-bant-alt) var(--mz-font); letter-spacing: var(--mz-ls-reading); color: var(--mz-muted); text-wrap: balance; }
mz-urun-bandi > .mz-cta { margin-top: var(--mz-sp-16); }
mz-urun-bandi > .mz-urun-simge { display: block; width: 56px; height: 56px; margin: 0 auto var(--mz-sp-12); border-radius: 22.5%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mz-urun-bandi { background: var(--mz-bg); box-shadow: inset 0 var(--mz-hairline-w) 0 var(--mz-hairline); }
}
:root[data-theme="dark"] mz-urun-bandi { background: var(--mz-bg); box-shadow: inset 0 var(--mz-hairline-w) 0 var(--mz-hairline); }
@media (min-width: 760px) {
  mz-urun-bandi > h2 { font: var(--mz-type-display-m); letter-spacing: var(--mz-ls-display-m); }
}
@media (min-width: 1000px) {
  mz-urun-bandi { padding-top: var(--mz-vt-bant-ust-genis); }
  mz-urun-bandi:not(:has(> .mz-gorsel)) { padding-bottom: var(--mz-vt-bant-ust-genis); }
  mz-urun-bandi > h2 { font: var(--mz-type-display-l); letter-spacing: var(--mz-ls-display-l); }
  mz-urun-bandi > p { font: var(--mz-w-body) var(--mz-vt-bant-alt-genis) var(--mz-font); letter-spacing: var(--mz-ls-title2); }
}