/* ═══════════════════════════════════════════════════════════════
   components.css · Bizz İntranet bileşen kütüphanesi
   40 bileşen · 6 grup · framework'süz CSS

   KURALLAR
   • Dosyada TEK HEX yok. Yalnız var(--token). tokens/colors.css tek HEX kaynağıdır.
   • Sınıf öneki  bz-        → Bootstrap 4 ile çakışmayı bu önek çözer
   • Değiştirici  --         → .bz-btn--primary
   • Durum        .is- / [attr] → .bz-btn.is-loading, .bz-btn[disabled]
   • Alt parça    __         → .bz-card__title
   • Her etkileşimli bileşende :focus-visible → box-shadow: var(--focus-ring)
   • Her dokunmatik hedef → min-height: var(--touch-min)
   • Hareket yalnız opacity + transform; reduced-motion altında kapanır
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · CORE
   ─────────────────────────────────────────────────────────────── */

/* 1.1 Icon ─ 24px kutu, 1,5px çizgi, HER ZAMAN currentColor */
.bz-icon {
  width: 24px; height: 24px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.bz-icon--16 { width: 16px; height: 16px; }
.bz-icon--18 { width: 18px; height: 18px; }
.bz-icon--20 { width: 20px; height: 20px; }
/* ⚠ ÖLÇÜLEN EKSİK (tasarım belgesi · 8 Eylül): merdiven 20'de bitiyordu.
   İkon boyutu SINIF olarak basıldığı için 24'ün üstü istenen her ölçü
   sessizce 24px'e (varsayılan kutu) düşüyordu — modül karolarında 32 ve
   44px ikon isteniyor. Basamaklar tamamlandı. */
.bz-icon--24 { width: 24px; height: 24px; }
.bz-icon--28 { width: 28px; height: 28px; }
.bz-icon--32 { width: 32px; height: 32px; }
.bz-icon--40 { width: 40px; height: 40px; }
.bz-icon--44 { width: 44px; height: 44px; }
.bz-icon--48 { width: 48px; height: 48px; }
.bz-icon--decorative { color: var(--icon-decorative); }

/* 1.2 Button */
.bz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min); min-width: 112px;
  padding: 11px var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-weight: var(--fw-strong);
  font-size: var(--fs-h6); line-height: 1.2;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.bz-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-btn:hover { text-decoration: none; }

.bz-btn--primary   { background: var(--brand-fill); color: var(--brand-contrast); }
.bz-btn--primary:hover  { background: var(--brand-fill-hover); }
.bz-btn--primary:active { background: var(--brand-fill-active); }

.bz-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.bz-btn--secondary:hover  { background: var(--surface-2); }
.bz-btn--secondary:active { border-color: var(--text-muted); }

.bz-btn--ghost { background: var(--brand-surface); color: var(--brand-text); }
.bz-btn--ghost:hover  { background: var(--brand-surface-strong); }
.bz-btn--ghost:active { background: var(--brand-surface-border); }

.bz-btn--danger { background: var(--danger-fill); color: var(--ink-0); }

/* Düğme METİN rengi eklenti kurallarına karşı korunur.
   Quill editörünün plugins.bundle.css'teki ".ql-snow a" kuralı (özgüllük 0,1,1)
   bizim ".bz-btn--primary"den (0,1,0) daha güçlü: editörün içindeki bir
   <a class="bz-btn bz-btn--primary"> LINK MAVİSİ oluyordu — yeşil zeminde ~2:1,
   okunmuyordu. Element+sınıf ile eşit özgüllüğe çıkıyoruz; components.css
   plugins'ten SONRA yüklendiği için bizimki kazanır. */
a.bz-btn--primary,   button.bz-btn--primary   { color: var(--brand-contrast); }
a.bz-btn--secondary, button.bz-btn--secondary { color: var(--text); }
a.bz-btn--ghost,     button.bz-btn--ghost     { color: var(--brand-text); }
a.bz-btn--danger,    button.bz-btn--danger    { color: var(--ink-0); }
.bz-btn--danger:hover  { filter: brightness(0.92); }
.bz-btn--danger:active { filter: brightness(0.85); }

.bz-btn--success { background: var(--success-fill); color: var(--ink-0); }
.bz-btn--success:hover { filter: brightness(0.92); }

.bz-btn--text { background: transparent; color: var(--text); min-width: 0; padding-inline: var(--space-2); }
.bz-btn--text:hover { background: var(--surface-2); }

.bz-btn--sm { min-width: 88px; padding: 8px var(--space-4); font-size: var(--fs-sm); }
.bz-btn--lg { min-width: 128px; padding: 13px var(--space-6); font-size: var(--fs-body); }
.bz-btn--block { width: 100%; }

.bz-btn[disabled], .bz-btn[aria-disabled="true"] {
  background: var(--border); color: var(--text-muted);
  border-color: transparent; cursor: not-allowed; filter: none;
}
.bz-btn.is-loading { cursor: progress; pointer-events: none; }
.bz-btn.is-loading .bz-btn__spinner { display: inline-block; }
.bz-btn__spinner {
  display: none; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: bz-spin 700ms linear infinite;
}
@keyframes bz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bz-btn__spinner { animation: none; border-top-color: currentColor; opacity: .5; }
}

/* 1.3 ButtonGroup ─ görünüm değiştirici (kart / liste / takvim) */
.bz-btngroup { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.bz-btngroup > .bz-btngroup__item {
  min-height: var(--touch-min); padding: 10px var(--space-4);
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans); font-weight: var(--fw-strong); font-size: var(--fs-sm);
  border: none; border-left: 1px solid var(--border-strong); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.bz-btngroup > .bz-btngroup__item:first-child { border-left: none; }
.bz-btngroup > .bz-btngroup__item:hover { background: var(--surface-2); }
.bz-btngroup > .bz-btngroup__item:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.bz-btngroup > .bz-btngroup__item.is-selected,
.bz-btngroup > .bz-btngroup__item[aria-pressed="true"] { background: var(--brand-fill); color: var(--brand-contrast); }

/* 1.4 IconButton ─ label (aria-label) ZORUNLU */
.bz-iconbtn {
  position: relative; flex: none;
  width: var(--touch-min); height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.bz-iconbtn:hover { background: var(--surface-2); }
.bz-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-iconbtn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.bz-iconbtn--ghost:hover { background: var(--surface-2); color: var(--text); }
.bz-iconbtn--primary { background: var(--brand-fill); border-color: transparent; color: var(--brand-contrast); }
.bz-iconbtn--primary:hover { background: var(--brand-fill-hover); }
.bz-iconbtn--sm { width: 36px; height: 36px; }
.bz-iconbtn[disabled] { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
.bz-iconbtn__dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--danger-fill); border: 1.5px solid var(--surface);
}

/* 1.5 Badge ─ durum rozeti; semantik tonlarda ikon ZORUNLU */
.bz-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-label); line-height: var(--lh-label);
  background: var(--surface-2); color: var(--text-muted);
  white-space: nowrap;
}
.bz-badge--brand   { background: var(--brand-surface); color: var(--brand-text); }
.bz-badge--success { background: var(--success-bg); color: var(--success-text); }
.bz-badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.bz-badge--danger  { background: var(--danger-bg);  color: var(--danger-text); }
.bz-badge--info    { background: var(--info-bg);    color: var(--info-text); }
/* Okunmamış sayacı ─ sayı erişilebilir isme de yazılır */
.bz-badge--count {
  background: var(--danger-fill); color: var(--ink-0);
  padding: 2px 6px; font-size: 10px; min-width: 18px; justify-content: center;
}

/* 1.6 Tag ─ SEÇİM çipi (durum için Badge kullanılır) */
.bz-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 32px; padding: 6px var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-label);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.bz-tag:hover { background: var(--border); }
.bz-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-tag.is-selected, .bz-tag[aria-pressed="true"] {
  background: var(--brand-fill); border-color: transparent; color: var(--brand-contrast);
}
.bz-tag--static { cursor: default; }
.bz-tag--static:hover { background: var(--surface-2); }
.bz-tag__remove { display: inline-flex; opacity: .75; cursor: pointer; }
.bz-tag__remove:hover { opacity: 1; }

/* 1.7 Avatar + AvatarGroup */
.bz-avatar {
  --bz-avatar-size: 34px;
  width: var(--bz-avatar-size); height: var(--bz-avatar-size); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); overflow: hidden;
  background: var(--brand-fill); color: var(--brand-contrast);
  font-family: var(--font-sans); font-weight: var(--fw-strong);
  font-size: calc(var(--bz-avatar-size) * 0.36); letter-spacing: .01em;
  text-transform: uppercase;
}
.bz-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.bz-avatar--28 { --bz-avatar-size: 28px; }
.bz-avatar--30 { --bz-avatar-size: 30px; }
.bz-avatar--32 { --bz-avatar-size: 32px; }
/* 36 ve 40: tasarım belgesinin mesajlaşma ekranı (oda satırı 40, mobil konuşma
   başlığı 36). Merdivende yoktu; 32'den 48'e atlıyordu. */
.bz-avatar--36 { --bz-avatar-size: 36px; }
.bz-avatar--40 { --bz-avatar-size: 40px; }
.bz-avatar--48 { --bz-avatar-size: 48px; }
.bz-avatar--64 { --bz-avatar-size: 64px; }
/* Ton varyantları ─ isimden türetilir, sunucu tarafında atanır */
.bz-avatar--t1 { background: var(--ink-300); color: var(--ink-900); }
.bz-avatar--t2 { background: var(--ink-500); color: var(--ink-0); }
.bz-avatar--t3 { background: var(--brand-200); color: var(--brand-900); }
.bz-avatar--ring { border: 3px solid var(--surface); }

/* 1.8 Card ─ modül kartı; ana sayfa blok ızgarasının yapı taşı */
.bz-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0; padding: var(--space-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.bz-card--flush { padding: 0; gap: 0; overflow: hidden; }
.bz-card--inverse {
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-color: transparent; box-shadow: none;
}
.bz-card--inverse .bz-card__title { color: var(--text-on-inverse); }
.bz-card__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.bz-card--flush > .bz-card__head { border-bottom: 1px solid var(--border); }
.bz-card:not(.bz-card--flush) > .bz-card__head { padding: 0; }
.bz-card__title {
  margin: 0; font-family: var(--font-sans); font-weight: var(--fw-strong);
  font-size: var(--fs-h6); line-height: var(--lh-h6);
}
.bz-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bz-card:not(.bz-card--flush) > .bz-card__body { padding: 0; }
.bz-card__foot {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-2);
}
/* Medya başlığı ─ görsel yoksa token'lı desen devreye girer */
.bz-card__media {
  position: relative; overflow: hidden;
  height: 82px; display: flex; align-items: flex-end;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--ink-200), var(--ink-100));
}
/* Gerçek görsel: YENİ SINIF ADI YOK — medya alanının içindeki <img> kapağı doldurur.
   Görsel yoksa yukarıdaki token'lı desen zaten görünür durumda kalır. */
.bz-card__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.bz-card__media--brand { background: linear-gradient(135deg, var(--brand-700), var(--brand-300)); }
.bz-card__media--empty { background: var(--surface-2); align-items: center; justify-content: center; }
/* Tıklanabilir kart */
a.bz-card, .bz-card--interactive { cursor: pointer; text-decoration: none; transition: border-color var(--dur-1) var(--ease-out); }
a.bz-card:hover, .bz-card--interactive:hover { border-color: var(--border-strong); text-decoration: none; }
a.bz-card:focus-visible, .bz-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 1.9 StatCard ─ tek metriği öne çıkaran kutu */
.bz-stat {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0; padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); font-family: var(--font-sans);
}
.bz-stat__label {
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
}
.bz-stat__row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.bz-stat__value {
  font-weight: var(--fw-display); font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2); color: var(--text);
}
/* Değişim yönü ok karakteriyle de anlatılır — renk tek başına yeterli değil */
.bz-stat__delta { font-weight: var(--fw-body); font-size: var(--fs-sm); color: var(--success-text); }
.bz-stat__delta--warning { color: var(--warning-text); }
.bz-stat__delta--neutral { color: var(--text-muted); }
.bz-stat__note { font-weight: var(--fw-body); font-size: var(--fs-sm); color: var(--text-muted); }

/* 1.10 Logo ─ "Bizz." wordmark + kare nokta (ayrı sembol YOK) */
.bz-logo { display: inline-flex; flex-direction: column; gap: 2px; }
.bz-logo__mark {
  --bz-logo-size: 24px;
  display: inline-flex; align-items: flex-end; gap: .07em; line-height: .9;
  font-family: var(--font-sans); font-weight: var(--fw-display);
  font-size: var(--bz-logo-size); letter-spacing: -0.045em; color: var(--text);
}
.bz-logo__mark .bz-logo__tight { letter-spacing: -0.07em; }
.bz-logo__dot {
  width: .16em; height: .16em; margin-bottom: .04em; flex: none;
  background: var(--brand); border-radius: .1em;
}
.bz-logo__tagline {
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: calc(var(--bz-logo-size) * 0.42); color: var(--text-muted);
}
.bz-logo--inverse .bz-logo__mark { color: var(--text-on-inverse); }
.bz-logo--inverse .bz-logo__tagline { color: var(--text-muted-on-inverse); }
.bz-logo--sm  .bz-logo__mark { --bz-logo-size: 17px; }
.bz-logo--md  .bz-logo__mark { --bz-logo-size: 24px; }
.bz-logo--lg  .bz-logo__mark { --bz-logo-size: 38px; }
.bz-logo--xl  .bz-logo__mark { --bz-logo-size: 54px; }

/* ───────────────────────────────────────────────────────────────
   2 · FORMS
   ─────────────────────────────────────────────────────────────── */

/* 2.1 Field ─ etiket + yardım + hata sarmalayıcısı */
.bz-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bz-field__label {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted);
}
.bz-field__req { color: var(--danger-text); }
.bz-field__hint {
  margin-top: var(--space-1);
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.bz-field__error {
  display: flex; align-items: center; gap: 6px; margin-top: var(--space-1);
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: var(--fs-sm); color: var(--danger-text);
}
.bz-field.is-invalid .bz-field__label { color: var(--danger-text); }

/* 2.2 Input / Textarea */
.bz-input {
  width: 100%; min-height: var(--touch-min);
  padding: 11px var(--space-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-weight: var(--fw-body); font-size: var(--fs-body);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.bz-input::placeholder { color: var(--text-muted); }
.bz-input:focus, .bz-input:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.bz-input[disabled] { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.bz-input[aria-invalid="true"], .bz-input.is-invalid {
  border-color: var(--danger); background: var(--danger-bg);
}
.bz-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
textarea.bz-input { min-height: 88px; resize: vertical; line-height: var(--lh-body); }
/* İkonlu alan */
.bz-inputwrap { position: relative; display: block; min-width: 0; }
.bz-inputwrap > .bz-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--icon-decorative); pointer-events: none;
}
.bz-inputwrap > .bz-input { padding-left: 40px; }

/* 2.3 Select */
.bz-select {
  width: 100%; min-height: var(--touch-min);
  padding: 11px 40px 11px var(--space-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-weight: var(--fw-body); font-size: var(--fs-body);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.bz-select:focus, .bz-select:focus-visible {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.bz-select[disabled] { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.bz-selectwrap { position: relative; display: block; min-width: 0; }
.bz-selectwrap > .bz-icon {
  position: absolute; right: 13px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: var(--icon-decorative); pointer-events: none;
}

/* 2.4 Checkbox / Radio / Switch ─ gerçek input odak halkasını taşır */
.bz-choice {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min); cursor: pointer; position: relative;
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: var(--fs-body); color: var(--text);
}
.bz-choice__input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.bz-choice__box, .bz-choice__radio, .bz-choice__switch {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.bz-choice__box {
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--brand-contrast);
}
.bz-choice__box > .bz-icon { opacity: 0; }
.bz-choice__input:checked ~ .bz-choice__box { background: var(--brand-fill); border-color: var(--brand-fill); }
.bz-choice__input:checked ~ .bz-choice__box > .bz-icon { opacity: 1; }

.bz-choice__radio {
  width: 20px; height: 20px; border-radius: var(--radius-full);
  border: 2px solid var(--border-strong); background: var(--surface);
}
.bz-choice__radio::after {
  content: ""; width: 9px; height: 9px; border-radius: var(--radius-full);
  background: var(--brand); transform: scale(0);
  transition: transform var(--dur-1) var(--ease-out);
}
.bz-choice__input:checked ~ .bz-choice__radio { border-color: var(--brand); }
.bz-choice__input:checked ~ .bz-choice__radio::after { transform: scale(1); }

.bz-choice__switch {
  width: 40px; height: 22px; padding: 2px; border-radius: var(--radius-full);
  background: var(--border-strong); justify-content: flex-start;
}
.bz-choice__switch::after {
  content: ""; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--ink-0); transition: transform var(--dur-1) var(--ease-out);
}
.bz-choice__input:checked ~ .bz-choice__switch { background: var(--brand-fill); }
.bz-choice__input:checked ~ .bz-choice__switch::after { transform: translateX(18px); }

.bz-choice__input:focus-visible ~ .bz-choice__box,
.bz-choice__input:focus-visible ~ .bz-choice__radio,
.bz-choice__input:focus-visible ~ .bz-choice__switch { box-shadow: var(--focus-ring); }
.bz-choice__input[disabled] ~ * { opacity: .55; }
.bz-choice:has(.bz-choice__input[disabled]) { cursor: not-allowed; opacity: .8; }

/* 2.5 SearchField */
.bz-search {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 0; min-height: var(--touch-min);
  padding: 9px var(--space-4);
  background: var(--surface-2); border-radius: var(--radius-full);
  color: var(--text-muted);
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.bz-search:focus-within { box-shadow: var(--focus-ring); }
.bz-search__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: var(--fs-sm); color: var(--text);
}
.bz-search__input::placeholder { color: var(--text-muted); }
.bz-search__input::-webkit-search-cancel-button { display: none; }
.bz-search__kbd {
  flex: none; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 10px;
}
.bz-search__clear { display: inline-flex; cursor: pointer; color: var(--icon-decorative); }
.bz-search__clear:hover { color: var(--text); }

/* 2.6 FileDrop ─ sürükle-bırakın klavye alternatifi her zaman vardır */
.bz-filedrop {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-5); text-align: center; cursor: pointer;
  background: var(--bg); border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg); font-family: var(--font-sans);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.bz-filedrop:hover { border-color: var(--brand-300); }
.bz-filedrop:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-filedrop.is-active { border-color: var(--brand); background: var(--brand-surface); }
.bz-filedrop.is-active .bz-filedrop__icon { color: var(--brand-text); }
.bz-filedrop__icon { color: var(--icon-decorative); }
.bz-filedrop__title { font-weight: var(--fw-label); font-size: var(--fs-sm); color: var(--text); }
.bz-filedrop__hint { font-weight: var(--fw-body); font-size: var(--fs-label); color: var(--text-muted); }

/* ───────────────────────────────────────────────────────────────
   3 · NAVIGATION
   8 kümenin tamamı her zaman görünür. İkon-only rail YASAK:
   daraltılmış halde bile etiket tooltip ile erişilebilir kalır.
   ─────────────────────────────────────────────────────────────── */

/* 3.1 SideNav ─ kalıcı sol navigasyon */
.bz-sidenav {
  display: flex; flex-direction: column; flex: none;
  width: var(--nav-w); height: 100%;
  padding: var(--space-4) var(--space-3);
  background: var(--surface); border-right: 1px solid var(--border);
  font-family: var(--font-sans);
}
.bz-sidenav__brand { padding: var(--space-2) var(--space-2) var(--space-5); }
.bz-sidenav__list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.bz-sidenav__section {
  padding: var(--space-5) var(--space-2) var(--space-2);
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
}
.bz-sidenav__item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text); text-decoration: none;
  font-weight: var(--fw-label); font-size: var(--fs-h6);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.bz-sidenav__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.bz-sidenav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-sidenav__item > .bz-icon { color: var(--icon-decorative); }
.bz-sidenav__item.is-active { background: var(--brand-surface); color: var(--brand-text); }
.bz-sidenav__item.is-active > .bz-icon { color: var(--brand-text); }
.bz-sidenav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-sidenav__foot { margin-top: auto; padding-top: var(--space-4); }
/* Daraltılmış: etiket gizlenmez, yalnız görsel olarak kırpılır */
.bz-sidenav--collapsed { width: var(--nav-w-collapsed); padding-inline: var(--space-2); }
.bz-sidenav--collapsed .bz-sidenav__label,
.bz-sidenav--collapsed .bz-sidenav__section { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* BIZZ-208: grup başlığı artık `.bz-sidenav__item` DEĞİL `.bz-navgroup__summary`.
   Bu kural ona da uygulanmazsa 72px rayda grup ikonu ortalanmaz — ölçüldü. */
.bz-sidenav--collapsed .bz-sidenav__item,
.bz-sidenav--collapsed .bz-navgroup__summary { justify-content: center; padding-inline: 0; position: relative; }
/* Daraltılmışta sayaç raya sığmaz: rakam yerine nokta. Sayı aria-label'da kalır. */
.bz-sidenav--collapsed .bz-sidenav__item .bz-badge--count {
  position: absolute; top: 4px; right: 12px;
  min-width: 8px; width: 8px; height: 8px; padding: 0;
  font-size: 0; line-height: 0; border: 1.5px solid var(--surface);
}

/* 3.2 TopBar ─ arama + zil + profil */
.bz-topbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--header-h); flex: none;
  padding-inline: var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}
.bz-topbar__title {
  margin: 0; font-weight: var(--fw-display); font-size: var(--fs-h4);
  line-height: var(--lh-h4); letter-spacing: var(--ls-h3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bz-topbar__search { flex: 1; max-width: 420px; }
.bz-topbar__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* 3.3 ClusterPanel ─ kümenin TÜM modülleri tek listede (2-tık güvencesi) */
.bz-clusterpanel {
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.bz-clusterpanel__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.bz-clusterpanel__title { margin: 0; font-weight: var(--fw-display); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.bz-clusterpanel__count { color: var(--text-muted); font-size: var(--fs-sm); }
/* Şartname §08-2: kümenin TÜM modülleri tek listede, ÜÇ KOLON. */
.bz-clusterpanel__grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .bz-clusterpanel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .bz-clusterpanel__grid { grid-template-columns: 1fr; } }
.bz-clusterpanel__link {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); color: var(--text); text-decoration: none;
  font-weight: var(--fw-label); font-size: var(--fs-sm);
  transition: background var(--dur-1) var(--ease-out);
}
.bz-clusterpanel__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.bz-clusterpanel__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-clusterpanel__link > .bz-icon { color: var(--icon-decorative); }

/* 3.4 Tabs ─ tek seviyeli sekme; aktif olan alt çizgiyle işaretlenir */
.bz-tabs {
  display: flex; align-items: stretch; gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.bz-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-4);
  border: none; border-bottom: 2px solid transparent; background: none;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-h6);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.bz-tabs__tab:hover { color: var(--text); }
.bz-tabs__tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.bz-tabs__tab.is-active, .bz-tabs__tab[aria-selected="true"] {
  color: var(--brand-text); border-bottom-color: var(--brand);
}
.bz-tabs__tab[disabled] { color: var(--icon-decorative); cursor: not-allowed; }

/* 3.5 Breadcrumb ─ ayraç dekoratiftir, ekran okuyucudan gizlenir */
.bz-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted);
}
.bz-crumbs__link { color: var(--text-muted); text-decoration: none; }
.bz-crumbs__link:hover { color: var(--text); text-decoration: underline; }
.bz-crumbs__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Ayrac bir METIN dugumu tasir; --text-subtle metin rengi degildir. */
.bz-crumbs__sep { color: var(--text-muted); }
.bz-crumbs__item[aria-current="page"] { color: var(--text); font-weight: var(--fw-label); }

/* 3.6 AppGrid ─ 98 yeteneğin tamamı; aranabilir, kümelenmiş */
.bz-appgrid { display: flex; flex-direction: column; gap: var(--space-6); font-family: var(--font-sans); }
.bz-appgrid__group { display: flex; flex-direction: column; gap: var(--space-3); }
.bz-appgrid__grouptitle {
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
}
.bz-appgrid__list {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
}
.bz-appgrid__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--text); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.bz-appgrid__item:hover { border-color: var(--brand-300); color: var(--text); text-decoration: none; transform: translateY(-2px); }
.bz-appgrid__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-appgrid__icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--brand-surface); color: var(--brand-text);
}
.bz-appgrid__label { font-weight: var(--fw-label); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.bz-appgrid__fav { position: absolute; }
@media (prefers-reduced-motion: reduce) { .bz-appgrid__item:hover { transform: none; } }

/* 3.7 MobileTabBar ─ mobilde alt bar; 5 öğeyi geçmez */
.bz-tabbar {
  display: flex; align-items: stretch;
  height: var(--mobile-tabbar-h);
  background: var(--surface); border-top: 1px solid var(--border);
  font-family: var(--font-sans);
}
.bz-tabbar__item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-muted); text-decoration: none;
  font-weight: var(--fw-label); font-size: 10px;
}
.bz-tabbar__item:hover { color: var(--text); text-decoration: none; }
.bz-tabbar__item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.bz-tabbar__item.is-active { color: var(--brand-text); }
.bz-tabbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* 3.8 CommandPalette ─ Ctrl+K; her yetenek 1 tıka iner */
.bz-cmdk {
  display: flex; flex-direction: column; min-width: 0;
  max-height: 60vh; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.bz-cmdk__field {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--border);
  color: var(--icon-decorative);
}
.bz-cmdk__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: var(--fs-body-lg); color: var(--text);
}
.bz-cmdk__input::placeholder { color: var(--text-muted); }
.bz-cmdk__list { overflow-y: auto; padding: var(--space-2); margin: 0; list-style: none; }
.bz-cmdk__group {
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
}
.bz-cmdk__item {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); color: var(--text); text-decoration: none;
  font-size: var(--fs-body); cursor: pointer;
}
.bz-cmdk__item:hover, .bz-cmdk__item.is-active, .bz-cmdk__item[aria-selected="true"] {
  background: var(--brand-surface); color: var(--brand-text); text-decoration: none;
}
.bz-cmdk__item > .bz-icon { color: var(--icon-decorative); }
.bz-cmdk__item.is-active > .bz-icon { color: var(--brand-text); }
.bz-cmdk__path { margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted); }
.bz-cmdk__foot {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border);
  font-size: var(--fs-label); color: var(--text-muted);
}
.bz-cmdk__kbd {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-family: var(--font-mono); font-size: 10px;
}

/* ───────────────────────────────────────────────────────────────
   4 · FEEDBACK
   Renk tek başına anlam taşımaz: her semantik tonda ikon vardır.
   ─────────────────────────────────────────────────────────────── */

/* 4.1 Banner ─ sayfa içi duyuru; zorunlu-okundu bunun üstüne kurulur */
.bz-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  font-family: var(--font-sans);
}
.bz-banner__icon { flex: none; color: var(--text-muted); }
.bz-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bz-banner__title { font-weight: var(--fw-strong); font-size: var(--fs-h6); line-height: var(--lh-h6); }
.bz-banner__text { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }
.bz-banner__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.bz-banner--brand   { background: var(--brand-surface); border-color: var(--brand-surface-border); }
.bz-banner--brand   .bz-banner__icon { color: var(--brand-text); }
.bz-banner--info    { background: var(--info-bg);    border-color: transparent; }
.bz-banner--info    .bz-banner__icon { color: var(--info-text); }
.bz-banner--success { background: var(--success-bg); border-color: transparent; }
.bz-banner--success .bz-banner__icon { color: var(--success-text); }
.bz-banner--warning { background: var(--warning-bg); border-color: transparent; }
.bz-banner--warning .bz-banner__icon { color: var(--warning-text); }
.bz-banner--danger  { background: var(--danger-bg);  border-color: transparent; }
.bz-banner--danger  .bz-banner__icon { color: var(--danger-text); }

/* 4.2 Toast ─ geçici bildirim; ekranın sağ altında yığılır */
.bz-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-width: 260px; max-width: 380px; padding: var(--space-3) var(--space-4);
  background: var(--surface-inverse); color: var(--text-on-inverse);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.bz-toast__icon { flex: none; }
.bz-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-toast__title { font-weight: var(--fw-strong); font-size: var(--fs-h6); }
.bz-toast__text { color: var(--text-muted-on-inverse); }
.bz-toast__close { flex: none; color: var(--text-muted-on-inverse); cursor: pointer; }
.bz-toast__close:hover { color: var(--text-on-inverse); }
.bz-toast--success .bz-toast__icon { color: var(--brand-300); }
.bz-toast--warning .bz-toast__icon { color: var(--warning); }
.bz-toast--danger  .bz-toast__icon { color: var(--danger); }
.bz-toaster {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2);
}

/* 4.3 Modal ─ odak hapsi + ESC ile kapanma JS tarafındadır */
.bz-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--ink-1000) 55%, transparent);
}
.bz-modal__dialog {
  display: flex; flex-direction: column; width: 100%; max-width: 560px;
  max-height: calc(100vh - var(--space-8));
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans); overflow: hidden;
}
.bz-modal--sm .bz-modal__dialog { max-width: 420px; }
.bz-modal--lg .bz-modal__dialog { max-width: 880px; }
.bz-modal__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.bz-modal__title { margin: 0; font-weight: var(--fw-display); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.bz-modal__close { margin-left: auto; }
/* Panel modalları Bootstrap'ten devralınırken (BIZZ-103 Faz 3) aradaki
   `.modal-content` sarmalayıcısı yapıda kaldı. `display: contents` onu düzenden
   şeffaf kılar: head/body/foot doğrudan `.bz-modal__dialog`in flex çocukları olur,
   yani dokuz görünümden iç içe <div> sökmeye gerek kalmaz. Sökme işlemi betikle
   yapılsaydı eşleşen kapanış etiketini bulmak kırılgan olurdu. */
.bz-modal__icerik { display: contents; }
.bz-modal__body { padding: 0 var(--space-5) var(--space-5); overflow-y: auto; }
.bz-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border); background: var(--surface-2);
}

/* 4.4 Drawer ─ yandan açılan panel; mobilde tam genişlik */
.bz-drawer {
  position: fixed; inset: 0; z-index: 70;
  display: flex; justify-content: flex-end;
  background: color-mix(in srgb, var(--ink-1000) 45%, transparent);
}
.bz-drawer--left { justify-content: flex-start; }
.bz-drawer__panel {
  display: flex; flex-direction: column;
  width: min(420px, 100%); height: 100%;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg); font-family: var(--font-sans);
}
.bz-drawer__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
}
.bz-drawer__title { margin: 0; font-weight: var(--fw-strong); font-size: var(--fs-h4); }
.bz-drawer__close { margin-left: auto; }
.bz-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.bz-drawer__foot {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border);
}

/* 4.5 EmptyState ─ her boş liste bir sonraki adımı önerir */
.bz-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-9) var(--space-5); text-align: center;
  font-family: var(--font-sans);
}
.bz-empty__art { width: 120px; max-width: 60%; opacity: .9; }
.bz-empty__icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--icon-decorative);
}
.bz-empty__title { font-weight: var(--fw-strong); font-size: var(--fs-h4); line-height: var(--lh-h4); }
.bz-empty__text { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); max-width: 42ch; }
.bz-empty__action { margin-top: var(--space-2); }
.bz-empty--inline { padding: var(--space-6) var(--space-4); }

/* 4.6 Skeleton ─ yükleniyor iskeleti; aria-hidden ile sunulur */
@keyframes bz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 4.7 ProgressBar ─ değer her zaman metinle de yazılır */
.bz-progress {
  display: block; overflow: hidden;
  height: 8px; border-radius: var(--radius-full);
  background: var(--surface-2);
}
.bz-progress--sm { height: 5px; }
.bz-progress--lg { height: 12px; }
/* Genişlik VERİDİR, biçim değil: yüzde `--oran` özel değişkeniyle geçirilir.
   Bu kural buraya alınana kadar her ekran kendi `.sv-oran { width: var(--oran) }`
   satırını yazıyordu (SurveyUI/Result sayfa içi <style> bloğu). Değer verilmezse
   davranış eskisiyle aynı: 0. */
.bz-progress__bar {
  display: block; height: 100%; width: var(--oran, 0);
  border-radius: var(--radius-full); background: var(--brand);
  transition: width var(--dur-3) var(--ease-out);
}
.bz-progress--success .bz-progress__bar { background: var(--success); }
.bz-progress--warning .bz-progress__bar { background: var(--warning); }
.bz-progress--danger  .bz-progress__bar { background: var(--danger); }
.bz-progress__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted);
}
.bz-progress__value { font-weight: var(--fw-label); color: var(--text); }

/* ───────────────────────────────────────────────────────────────
   5 · DATA
   ─────────────────────────────────────────────────────────────── */

/* 5.1 ListRow ─ haber/talep/kişi listelerinin tek satırı */
.bz-listrow {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min); padding: var(--space-3) var(--space-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-family: var(--font-sans);
  transition: background var(--dur-1) var(--ease-out);
}
.bz-listrow:last-child { border-bottom: none; }
a.bz-listrow:hover, .bz-listrow--interactive:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
a.bz-listrow:focus-visible, .bz-listrow--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-listrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-listrow__title {
  font-weight: var(--fw-label); font-size: var(--fs-h6); line-height: var(--lh-h6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bz-listrow__meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.bz-listrow__trail { display: flex; align-items: center; gap: var(--space-2); flex: none; margin-left: auto; }
/* Okunmamış: renk değil, kalınlık + nokta ile işaretlenir */
.bz-listrow.is-unread .bz-listrow__title { font-weight: var(--fw-display); }
.bz-listrow.is-unread::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: -6px;
  border-radius: var(--radius-full); background: var(--brand);
}
.bz-listrow.is-selected { background: var(--brand-surface); }

/* 5.2 DataTable ─ kabında kayar; gövde asla yatay kaymaz */
/* Kaydırma çubuğu GÖRÜNÜR bırakılır. Dar ekranda geniş tablo (ör. rehber:
   8 sütun ~914px) sağdan kesiliyor ve son sütunlar — dahili no, kişi kartı —
   erişilemez görünüyordu: kap kayıyordu ama kaydırılabildiğine dair HİÇBİR
   gösterge yoktu. Sayfa da kaymıyor (body overflow-x:hidden), yani kullanıcının
   sütunların devamı olduğunu anlamasının tek yolu bu çubuk.
   Aynı gerekçe org şemasında .bz-scroll-x için de uygulanmıştı (§3.67). */
.bz-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.bz-table-wrap::-webkit-scrollbar { height: 8px; }
.bz-table-wrap::-webkit-scrollbar-track { background: transparent; }
.bz-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
.bz-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text);
}
.bz-table th {
  padding: var(--space-3) var(--space-4); text-align: left; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted);
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.bz-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.bz-table tbody tr:last-child td { border-bottom: none; }
.bz-table tbody tr:hover { background: var(--surface-2); }
.bz-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.bz-table__sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; cursor: pointer; }
.bz-table__sort:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.bz-table--compact th, .bz-table--compact td { padding: var(--space-2) var(--space-3); }

/* 5.3 StatusStepper ─ talep durum akışı (açıldı → atandı → çözüldü) */
.bz-stepper { display: flex; align-items: flex-start; gap: 0; font-family: var(--font-sans); }
.bz-stepper__step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; text-align: center; }
.bz-stepper__step::before,
.bz-stepper__step::after {
  content: ""; position: absolute; top: 11px; height: 2px; background: var(--border);
}
.bz-stepper__step::before { left: 0; right: 50%; }
.bz-stepper__step::after  { left: 50%; right: 0; }
.bz-stepper__step:first-child::before,
.bz-stepper__step:last-child::after { display: none; }
.bz-stepper__dot {
  position: relative; z-index: 1; flex: none;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--border-strong); color: var(--text-muted);
}
.bz-stepper__label { font-weight: var(--fw-label); font-size: var(--fs-sm); color: var(--text-muted); }
.bz-stepper__date { font-size: var(--fs-label); color: var(--text-muted); }
.bz-stepper__step.is-done .bz-stepper__dot { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-contrast); }
.bz-stepper__step.is-done::before,
.bz-stepper__step.is-done::after { background: var(--brand); }
.bz-stepper__step.is-current .bz-stepper__dot { border-color: var(--brand); color: var(--brand-text); box-shadow: 0 0 0 4px var(--brand-surface); }
.bz-stepper__step.is-current .bz-stepper__label { color: var(--text); font-weight: var(--fw-strong); }
.bz-stepper__step.is-current::before { background: var(--brand); }

/* 5.4 OrgNode ─ katlanabilir organizasyon şeması düğümü */
.bz-orgnode { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font-family: var(--font-sans); }
.bz-orgnode__card {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 212px; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none; text-align: left;
}
.bz-orgnode__card:hover { border-color: var(--brand-300); color: var(--text); text-decoration: none; }
.bz-orgnode__card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-orgnode__body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.bz-orgnode__name { font-weight: var(--fw-strong); font-size: var(--fs-h6); line-height: var(--lh-h6); }
.bz-orgnode__role { font-size: var(--fs-sm); color: var(--text-muted); }
.bz-orgnode__unit { font-size: var(--fs-label); color: var(--brand-text); font-weight: var(--fw-label); }
.bz-orgnode__toggle { margin-left: auto; }
.bz-orgnode__children { display: flex; gap: var(--space-4); padding-top: var(--space-4); position: relative; }
.bz-orgnode__children::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: var(--space-4);
  background: var(--border);
}
.bz-orgnode.is-collapsed > .bz-orgnode__children { display: none; }
.bz-orgnode__count {
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-label);
}

/* ───────────────────────────────────────────────────────────────
   6 · MESSAGING
   ─────────────────────────────────────────────────────────────── */

/* 6.1 MessageBubble ─ grup/kanal ve 1:1 sohbet balonu */
.bz-msg { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; font-family: var(--font-sans); }
.bz-msg--me { flex-direction: row-reverse; }
.bz-msg__body {
  display: flex; flex-direction: column; gap: 2px;
  max-width: min(76ch, 78%); min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-sm);
}
.bz-msg--me .bz-msg__body {
  background: var(--brand-surface); border-color: var(--brand-surface-border);
  border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-sm);
}
.bz-msg__author { font-weight: var(--fw-label); font-size: var(--fs-label); color: var(--brand-text); }
.bz-msg__text { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.bz-msg__meta { display: flex; align-items: center; gap: var(--space-1); align-self: flex-end; font-size: var(--fs-label); color: var(--text-muted); }
.bz-msg__tick { color: var(--brand-text); }
.bz-msg__file {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1); padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: var(--text);
}
/* Yazıyor göstergesi */
.bz-msg__typing { display: inline-flex; gap: 3px; align-items: center; padding: var(--space-1) 0; }
.bz-msg__typing > i {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--icon-decorative); animation: bz-typing 1200ms ease-in-out infinite;
}
.bz-msg__typing > i:nth-child(2) { animation-delay: 160ms; }
.bz-msg__typing > i:nth-child(3) { animation-delay: 320ms; }
@keyframes bz-typing { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bz-msg__typing > i { animation: none; } }
.bz-msg__day {
  align-self: center; margin: var(--space-3) auto;
  padding: 3px var(--space-3); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-muted);
  font-size: var(--fs-label); font-weight: var(--fw-label);
}

/* 6.2 ReactionBar ─ çoklu reaksiyon; kendi reaksiyonun işaretli kalır */

/* ───────────────────────────────────────────────────────────────
   7 · KABUK VE SAYFA DESENLERİ
   Şartname §08 (navigasyon), §10 (üye ekranları), §11 (yönetim),
   §12 (responsive) bu desenleri ekran kurgusunun parçası olarak tanımlar.
   ─────────────────────────────────────────────────────────────── */

/* 7.1 Shell ─ kalıcı kabuk: sol navigasyon + üst bar + içerik */
.bz-shell { display: flex; min-height: 100vh; background: var(--bg); }
.bz-shell__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bz-shell__content { flex: 1; min-width: 0; padding: var(--space-6) var(--space-6) var(--space-10); }

/* TAM EKRAN (flush) kip — UYGULAMA BENZERİ ekranlar için.
   Mesajlar ve Asistan gibi ekranlar bir "sayfa" değil bir UYGULAMA yüzeyidir:
   kendi içinde kayar, başlık bloğu taşımaz (başlığı üst bar taşır) ve içerik
   alanının tamamını kaplar. Kabuğun dolgusu burada sıfırlanır, yükseklik de
   ekrana sabitlenir — yoksa ekranın etrafında boş bir çerçeve kalıyor ve
   konuşma tuvali ortada yüzen bir kutuya dönüyordu.
   Görünüm bunu ViewData["TamEkran"] = true ile ister. */
.bz-shell__content--flush {
  padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.bz-shell__content--flush > * { flex: 1; min-height: 0; }

/* ⚠ YÜKSEKLİK KABUKTAN GELİR, İÇERİKTEN DEĞİL. `.bz-shell__content` `flex: 1 1 0`
   taşıyor; dikey eksende bu, üzerine yazılan bir `height` kuralını ETKİSİZ
   bırakıyor (ölçüldü: kural yazılmasına rağmen yüzey içeriği kadar uzayıp
   sayfayı kaydırıyordu). Doğru yer kap: tam ekran kipinde kabuk ekran
   yüksekliğine sabitlenir, dağıtımı flex yapar. */
body.bz-tamekran { overflow: hidden; }
body.bz-tamekran .bz-shell { height: 100dvh; min-height: 0; }
body.bz-tamekran .bz-shell__main { min-height: 0; }

/* Kabuk SABİT: gezinme uzun sayfada da erişilebilir kalmalı — arama, bildirim
   ve menüye ulaşmak için başa kaydırmak gerekmez.
   Neden sticky, "fixed + iç kaydırma" değil: sayfa kaydırması, konum geri
   yükleme, Ctrl+F ve yazdırma tarayıcının kendi davranışında kalır; iç
   kaydırma kutusu bunların hepsini bozar. */
.bz-topbar {
  position: sticky; top: 0; z-index: 35;
}
/* §12: ≤768 sol menü çekmeceye iner, alt sekme çubuğu gelir */
@media (max-width: 768px) {
  .bz-shell > .bz-sidenav { display: none; }
  .bz-shell__content { padding: var(--space-4) var(--space-3) calc(var(--mobile-tabbar-h) + var(--space-8)); }

  /* ÜST BAR: mobilde 204px TAŞIYORDU. Sol menü ve alt sekme çubuğu için mobil
     kural vardı, üst bar için YOKTU: arama kutusu sabit genişlik istiyor, ikon
     kümesi de sığmayınca sağa taşıyordu. body'de overflow-x:hidden olduğu için
     kullanıcı kaydıramıyor — zil, mesaj ve profil KIRPILIP ERİŞİLEMEZ kalıyordu.
     Çözüm: arama daralabilsin, öğeler küçülebilsin, hiçbir şey taşmasın. */
  .bz-topbar {
    gap: var(--space-2);
    padding-inline: var(--space-3);
    min-width: 0;
    overflow: hidden;
  }
  .bz-topbar__title { display: none; }          /* başlık zaten sayfa içinde var */
  .bz-topbar__search { flex: 1 1 auto; min-width: 0; }
  .bz-topbar__search .bz-search__kbd { display: none; }   /* dokunmatikte Ctrl+K yok */
  .bz-topbar__actions { flex: 0 0 auto; gap: var(--space-1); min-width: 0; }

  /* SAYFA BAŞLIĞI: aksiyonlar sarmıyordu, başlık sütununu sıfıra sıkıştırıyordu —
     "Taleplerim" tek harfe ("T") iniyordu. Alt alta akmalı. */
  .bz-pagehead {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .bz-pagehead__actions { flex-wrap: wrap; }

  /* Alt sekme çubuğu ekranın altına SABİTLENİR. İçerik zaten bu yükseklik
     kadar alt boşluk ayırıyor (yukarıdaki padding), son satır altında kalmaz. */
  .bz-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  }
}

/* 7.2 Hero ─ ana sayfa ve küme sayfası manşeti.
   §12: görsel yüklenmezse token'lı gradyan devreye girer; oran masaüstünde
   21:9, telefonda 4:3. Metin her zaman koyu yüzey üstünde (--on-ink). */
.bz-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 220px; padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--ink-1000), var(--brand-900));
  color: var(--on-ink); font-family: var(--font-sans);
}
.bz-hero--media { aspect-ratio: 21 / 9; min-height: 0; }
.bz-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bz-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink-1000), transparent 65%);
}
/* İKİNCİ PERDE — soldan sağa. Metin sol hizalı; tek (alttan yukarı) perde,
   parlak bir gökyüzü metnin arkasına düştüğünde okunabilirliği kurtarmıyordu.
   İki katman üst üste bindiğinde metnin arkası her fotoğrafta koyu kalır. */
.bz-hero__scrim--start {
  background: linear-gradient(to right, var(--ink-1000), transparent 60%);
}
/* Karşılama bandı: 21/9 değil — üstteki çerçeve, vitrin değil. Sabit bir en-boy
   oranı vermek uzun adlarda metni taşırırdı; yükseklik içeriğe göre büyür. */
.bz-hero--karsilama { min-height: 240px; }
.bz-hero__text { position: relative; display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--measure-article); }
.bz-hero__eyebrow {
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-ink-muted);
}
.bz-hero__title {
  margin: 0; font-weight: var(--fw-display); font-size: var(--fs-h1);
  line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--on-ink);
}
.bz-hero__meta { font-size: var(--fs-sm); color: var(--on-ink-muted); }
@media (max-width: 768px) { .bz-hero--media { aspect-ratio: 4 / 3; } .bz-hero__title { font-size: var(--fs-h2); line-height: var(--lh-h2); } }

/* 7.3 PageHead ─ sayfa başlığı + açıklama + aksiyonlar (§10-3) */
.bz-pagehead {
  display: flex; align-items: flex-start; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-5); font-family: var(--font-sans);
}
.bz-pagehead__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.bz-pagehead__title { margin: 0; font-weight: var(--fw-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.bz-pagehead__sub { font-size: var(--fs-body); color: var(--text-muted); }
.bz-pagehead__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 7.3b PageHead --tight ─ BAŞLIK DİYETİ (tasarım belgesi 0.3)
   ÖLÇÜLEN: yüklü başlık bloğu dikeyde ~132px yiyor ve alt satırı çoğu ekranda
   breadcrumb'ın tekrarı. Sıkı kip tek satıra iner (~44px): başlık H2 boyunda,
   açıklama aynı satırda sağında, eylemler en sağda; breadcrumb üstte kalır.
   Uygulama benzeri ekranlarda (Mesajlar, Takvim, Pano) başlık bloğu HİÇ
   basılmaz — başlığı üst bar taşır. */
.bz-pagehead--tight {
  padding: var(--space-3) 0 var(--space-4);
  margin-bottom: 0;
  display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
}
.bz-pagehead--tight .bz-pagehead__titles {
  flex: 0 1 auto; flex-direction: row; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
}
.bz-pagehead--tight .bz-pagehead__title {
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: 0;
}
.bz-pagehead--tight .bz-pagehead__sub { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.bz-pagehead--tight .bz-pagehead__actions { margin-left: auto; }

/* 7.4 FilterBar ─ liste üstü filtre şeridi (§10-4).
   Çipler yoğun bağlamdadır: compact hedef + zorunlu komşu aralığı. */
.bz-filterbar {
  display: flex; align-items: center; gap: var(--touch-gap-min);
  flex-wrap: wrap; padding-block: var(--space-2); font-family: var(--font-sans);
}
.bz-filterbar > .bz-tag { min-height: var(--touch-min-compact); }
.bz-filterbar__label {
  font-weight: var(--fw-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
}
.bz-filterbar__spacer { margin-left: auto; }

/* 7.5 Pager ─ üretilen liste sayfalaması (§11-2) */
.bz-pager {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); font-family: var(--font-sans);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.bz-pager__list { display: flex; align-items: center; gap: var(--touch-gap-min); list-style: none; margin: 0; padding: 0; }
.bz-pager__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch-min-compact); min-height: var(--touch-min-compact);
  padding-inline: var(--space-2); border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent;
  color: var(--text); font-weight: var(--fw-label); font-size: var(--fs-sm);
  cursor: pointer; text-decoration: none;
}
.bz-pager__item:hover { background: var(--surface-2); text-decoration: none; }
.bz-pager__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-pager__item[aria-current="page"] { background: var(--brand-fill); color: var(--brand-contrast); }
.bz-pager__item[aria-disabled="true"] { color: var(--text-subtle); cursor: not-allowed; }

/* 7.6 FAB ─ mobilde birincil aksiyon, alt sağda (§08 tek el · §12) */

/* 7.7 Slider ─ ana ekranın "öne çıkanlar" görsel şeridi (BIZZ-263/1).

   ⚠ ÖLÇÜLEN KUSUR: panelde Slider varlığı, CRUD ekranı, çeviri tablosu ve
   HomePageModule kaydı ("Öne Çıkan Haberler" → `_Slider`) vardı; denetleyici de
   `Sliders` koleksiyonunu yüklüyordu. Ama ana ekrandaki `case "_Slider"` dalı
   HABER KARTI basıyordu — panelden eklenen slider ana sayfada HİÇ görünmüyordu.
   Basacak bir bileşen de yoktu; bu aile onun için eklendi.

   Yeni sınıf sayısı BİLEREK az: slaytın kendisi mevcut `.bz-hero--media`
   bileşenidir (oran, kapak görseli, karartma şeridi ve metin katmanı hazır;
   ≤768px'te zaten 21/9'dan 4/3'e düşüyor). Buraya yalnız "hangi slayt görünür"
   kabı ile gezinti şeridi eklendi.

   NOKTA (dot) GÖSTERGESİ YOK: 10px'lik nokta düğmeler --touch-min dokunma
   hedefini karşılamaz. Yerine "1 / 3" sayacı + iki ikon düğme kondu; ikisi de
   klavye ve dokunma için yeterli boyutta (.bz-iconbtn--sm = 36px).

   Otomatik geçiş CSS animasyonu DEĞİL, JS zamanlayıcısıdır (bizz.js §6); bu
   yüzden base.css'teki genel `prefers-reduced-motion` kuralı yetmez — tercih
   orada ayrıca ölçülür ve geçiş hiç başlatılmaz. */
.bz-slider {
  display: flex; flex-direction: column; gap: var(--space-3);
  min-width: 0; font-family: var(--font-sans);
}
/* Slaytlar `hidden` ile gizlenir (bizz.js sözleşmesi: açık/kapalı durumu
   `hidden` özniteliğiyle yönetilir). Yan kazanç: gizli slayttaki bağlantı
   sekme sırasından da kendiliğinden düşer. */
.bz-slider__viewport {
  position: relative; overflow: hidden; min-width: 0;
  border-radius: var(--radius-xl);
}
.bz-slider__slide { display: block; }
.bz-slider__slide > .bz-hero { width: 100%; }
/* .bz-hero'nun kendi odak stili yok — slayt tıklanabilir olduğunda halka ŞART. */
.bz-slider__slide a.bz-hero:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-slider__controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bz-slider__count {
  font-size: var(--fs-sm); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Sprite'ta tek yönlü `i-chev` var (sağa bakar); geri düğmesi onu çevirir.
   İkon adı UYDURULMADI — sprite'a yeni sembol eklenmedi. */
.bz-slider__back { transform: rotate(180deg); }

/* ───────────────────────────────────────────────────────────────
   8 · VERİ GÖRSELLEŞTİRME (§07)
   Kural: kategori ayrımı için renk YETERLİ SAYILMAZ — her seride etiket ve
   değer yazılır. Dizilim her zaman koyudan açığa (renk körlüğü).
   ─────────────────────────────────────────────────────────────── */
/* Çubuk alanı sabit yükseklikte; değer ve etiket bu rayın DIŞINDA durur ki
   kabın altından taşıp kırpılmasınlar. */

.bz-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-muted); }
.bz-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.bz-legend__swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--brand-700); }
.bz-legend__swatch--muted   { background: var(--brand-300); }
.bz-legend__swatch--warning { background: var(--warning); }
.bz-legend__swatch--info    { background: var(--info); }
.bz-legend__value { color: var(--text); font-weight: var(--fw-label); }

/* ───────────────────────────────────────────────────────────────
   9 · MESAJLAŞMA EKLERİ (§07 · İletişim)
   "Okundu işareti yalnız birebir sohbette; kanalda okuyan SAYISI gösterilir.
    İç not rengi tek başına yeterli değil — 'İç not' etiketi ZORUNLU."
   ─────────────────────────────────────────────────────────────── */

/* 9.1 İç not ─ yalnız ajanların gördüğü mesaj. Renk + etiket birlikte. */
.bz-msg--note .bz-msg__body {
  background: var(--warning-bg);
  border-color: var(--warning);
  border-left-width: 3px;
}
.bz-msg__notelabel {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-bottom: 2px; padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--warning-fill); color: var(--ink-0);
  font-weight: var(--fw-label); font-size: var(--fs-label);
}
/* 9.2 Kanal okuma sayısı ─ birebir sohbetteki tik yerine geçer */
.bz-msg__readcount { font-size: var(--fs-label); color: var(--text-muted); }
/* BIZZ-227: gonderenin kendi mesajinda "okundu" isareti. Renk degil METIN
   tasir; renk tek basina anlam tasimamali (erisilebilirlik). */
.bz-msg__read { font-size: var(--fs-label); color: var(--text-muted); white-space: nowrap; }

/* 9.3 Composer ─ mesaj yazma alanı; dosya sürükleme klavyeyle de yapılabilir */
.bz-composer {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border-top: 1px solid var(--border);
  font-family: var(--font-sans);
}
.bz-composer__input {
  flex: 1; min-width: 0; min-height: var(--touch-min); max-height: 140px;
  padding: 11px var(--space-4); resize: none;
  background: var(--surface-2); color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  font-family: var(--font-sans); font-weight: var(--fw-body);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.bz-composer__input::placeholder { color: var(--text-muted); }
.bz-composer__input:focus, .bz-composer__input:focus-visible {
  outline: none; border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.bz-composer__actions { display: flex; align-items: center; gap: var(--touch-gap-min); flex: none; }

/* ───────────────────────────────────────────────────────────────
   10 · KİŞİSEL KISAYOLLAR (§08-4)
   "Favorilerim + son görülenler sol menünün ÜSTÜNDE. Kullanıcı kendi 1 tık
    listesini kurar." — bu blok küme listesinden ÖNCE gelir.
   ─────────────────────────────────────────────────────────────── */
.bz-sidenav__group { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-3); }
.bz-sidenav__item--fav { min-height: var(--touch-min-compact); font-size: var(--fs-sm); font-weight: var(--fw-body); }
.bz-sidenav__item--fav > .bz-icon { color: var(--brand-text); }
.bz-sidenav__star { margin-left: auto; color: var(--text-subtle); }
.bz-sidenav__star.is-on { color: var(--brand-text); }

/* Pager: is-active, aria-current ile ayni gorunumu verir (ds-patterns uyumu) */
.bz-pager__item.is-active { background: var(--brand-fill); color: var(--brand-contrast); }

/* ───────────────────────────────────────────────────────────────
   11 · RESPONSIVE DAVRANIŞLAR (devir §8 · 4 ve 5)
   ─────────────────────────────────────────────────────────────── */

/* 9.4 Tepki çubuğu ─ paylaşım duvarında emoji seçici (BIZZ-253).
   ⚠ Şablonda SATIR İÇİ stille yazılmıştı (position/background/box-shadow hepsi
   `style="..."` içinde) ve renkler SABİTTİ — koyu kipte beyaz bir kutu olarak
   patlıyordu. Artık token'lardan ve iki kipte de doğru. */
.bz-react { position: relative; display: inline-block; }
.bz-react__emoji { font-size: var(--fs-body); line-height: 1; }
.bz-react__bar {
  position: absolute; bottom: calc(100% + var(--space-1)); left: 0;
  display: flex; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  white-space: nowrap; z-index: 10;
}
.bz-react__bar[hidden] { display: none; }
.bz-react__item {
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 22px; line-height: 1; cursor: pointer;
  background: none; border: none; border-radius: var(--radius-md);
}
.bz-react__item:hover { background: var(--surface-2); }
.bz-react__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Kendi tepkisini vermiş kullanıcının butonu: renk TEK başına ayırt edici
   değildir, emoji de değişir — ikisi birlikte durumu anlatır. */
.bz-react__on { color: var(--brand-text); }

/* 11.1 Tablo → KART (≤768). Gövde yatay kaymaz; her satır bir karta döner.
   Her <td> MUTLAKA data-label taşımalı — etiket ondan basılır. Atlanırsa
   hücre etiketsiz kalır ve tablo mobilde okunamaz hale gelir.

   EŞİK 480 → 768: rehber tablosu 8 sütunla ~914px yer istiyor; 481–768 arasında
   tablo olarak basılıyor ve son sütunlar (dahili no, kişi kartı) ekran dışında
   kalıyordu. Kart düzeni 360px'te zaten temiz çalıştığı için tablet de aynı
   düzeni kullanır; kaydırmaya gerek kalmadan tüm alanlar görünür. */
@media (max-width: 768px) {
  .bz-table-wrap { border: none; background: transparent; overflow-x: visible; }
  .bz-table, .bz-table tbody, .bz-table tr, .bz-table td { display: block; width: 100%; }
  .bz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bz-table tr {
    margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  }
  .bz-table tbody tr:hover { background: var(--surface); }
  .bz-table td {
    display: flex; align-items: baseline; gap: var(--space-3);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--border); text-align: left;
  }
  .bz-table tr td:last-child { border-bottom: none; }
  .bz-table td::before {
    content: attr(data-label);
    flex: none; min-width: 38%;
    font-weight: var(--fw-label); font-size: var(--fs-label);
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted);
  }
  /* Sayısal hücre kart düzeninde sola döner — sağa yaslama tek kolonda anlamsız */
  .bz-table td.bz-table__num { text-align: left; }
}

/* 11.2 StatusStepper dikey varyantı (≤768 otomatik, ayrıca --vertical ile zorlanır).
   Yatay şerit dar ekranda 4 adımı kırpıyordu. */
.bz-stepper--vertical,
.bz-stepper--vertical .bz-stepper__step { text-align: left; }
.bz-stepper--vertical {
  flex-direction: column; align-items: stretch; gap: var(--space-4);
}
.bz-stepper--vertical .bz-stepper__step {
  flex-direction: row; align-items: flex-start; gap: var(--space-3);
  padding-left: 0; min-height: 40px;
}
.bz-stepper--vertical .bz-stepper__step::before,
.bz-stepper--vertical .bz-stepper__step::after { display: none; }
/* Dikey bağlayıcı: noktadan bir sonrakine inen çizgi */
.bz-stepper--vertical .bz-stepper__step:not(:last-child) .bz-stepper__dot::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 2px; height: var(--space-4); background: var(--border);
}
.bz-stepper--vertical .bz-stepper__step.is-done .bz-stepper__dot::after { background: var(--brand); }
.bz-stepper--vertical .bz-stepper__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (max-width: 768px) {
  .bz-stepper { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .bz-stepper .bz-stepper__step {
    flex-direction: row; align-items: flex-start; gap: var(--space-3);
    text-align: left; min-height: 40px;
  }
  .bz-stepper .bz-stepper__step::before,
  .bz-stepper .bz-stepper__step::after { display: none; }
  .bz-stepper .bz-stepper__step:not(:last-child) .bz-stepper__dot::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: 2px; height: var(--space-4); background: var(--border);
  }
  .bz-stepper .bz-stepper__step.is-done .bz-stepper__dot::after { background: var(--brand); }
}

/* ───────────────────────────────────────────────────────────────
   12 · KABUK ETKİLEŞİM KATMANLARI
   Komut paleti örtüsü ve mobil menü çekmecesi. İkisi de `hidden`
   özniteliğiyle açılıp kapanır — JS sınıf uydurmaz.
   ─────────────────────────────────────────────────────────────── */

/* 12.1 Komut paleti örtüsü (Ctrl+K) */
.bz-cmdk-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--space-4) var(--space-4);
  background: color-mix(in srgb, var(--ink-1000) 55%, transparent);
}
.bz-cmdk-overlay[hidden] { display: none; }
.bz-cmdk-overlay > .bz-cmdk { width: 100%; max-width: 620px; }

/* 12.2 Mobil menü çekmecesi.
   ≤768px'de sol menü akıştan çıkar; başlıktaki menü düğmesi çekmece olarak açar.
   Masaüstünde bu kuralların hiçbiri çalışmaz — menü zaten yerindedir. */
@media (max-width: 768px) {
  .bz-shell > .bz-sidenav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 75;
    display: flex; width: min(var(--nav-w), 86vw);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--ease-out);
  }
  .bz-shell > .bz-sidenav[hidden] { display: flex; }      /* geçiş için akışta kalır */
  .bz-shell > .bz-sidenav.is-open { transform: translateX(0); }

  .bz-nav-scrim {
    position: fixed; inset: 0; z-index: 74;
    background: color-mix(in srgb, var(--ink-1000) 45%, transparent);
  }
  .bz-nav-scrim[hidden] { display: none; }
}
@media (min-width: 769px) {
  .bz-topbar__menu { display: none; }
  .bz-nav-scrim { display: none; }

  /* Sol menü sabit. align-self olmadan flex satırında dikeyde esner ve
     sticky hiç devreye girmez. Kendi içinde kayar — menü uzarsa alt öğeler
     erişilemez kalmasın. */
  .bz-shell > .bz-sidenav {
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh; height: 100dvh;
    overflow-y: auto; z-index: 30;
  }

  /* Alt sekme çubuğu mobil içindir. Bunu gizleyen kural HİÇ YOKTU — masaüstünde
     de görünüyordu. */
  .bz-tabbar { display: none; }
}

/* Dokunma hedefi: logo ve kırıntı bağlantısı görsel olarak küçük (47x22 ve 63x18)
   ama TIKLANABİLİR alan en az 24px yüksek olmalı (WCAG 2.2 "Target Size (Minimum)").
   Görsel boyut DEĞİŞMEZ: hedef, görünmez bir katmanla dikey olarak büyütülür.
   Katman yalnız dikeyde genişler (inset yatayda 0) — komşu öğelerin tıklamasını
   kapatmaz. Ölçüm: 47x22 -> 47x24, 63x18 -> 63x24. */
.bz-logo,
.bz-crumbs__link { position: relative; }

.bz-logo::after,
.bz-crumbs__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: var(--touch-min-compact, 24px);
}

/* Kırıntının ilk bağlantısı çok kısa olabiliyor (ölçüldü: "Bul" 19px). Hedef
   yatayda da en az 24px olmalı. Ayraca kadar 8px boşluk var; 24px'e çıkmak
   her iki yanda ~2.5px taşar, ayraç tıklanabilir değil — komşu hedef bozulmaz. */
.bz-crumbs__link::after { min-width: var(--touch-min-compact, 24px); }

/* ── Popup (ana sayfa duyuru penceresi) ────────────────────────────────────────
   bz-modal üzerine iki yardımcı. Eskiden bu içerik Bootstrap işaretlemesiyle ve
   satır-içi style ile basılıyordu; kabukta .modal kuralı yüklü olmadığı için de
   modal olarak hiç açılmıyor, sayfa dibine biçimsiz bir blok olarak düşüyordu.
   Renk yok — HEX kuralı korunur. */
.bz-popup__media {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md);
}

.bz-popup__embed {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden;
}

.bz-popup__embed > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* SVG sprite kabı — görsel olarak yok, erişilebilirlik ağacında da yok.
   Eskiden Razor'da satır-içi style ile gizleniyordu. */
.bz-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   YÖNETİM PANELİ (BIZZ-97)
   Panel, üye tarafıyla AYNI kabuğu kullanır (.bz-shell/.bz-sidenav/.bz-topbar);
   burada yalnız panelin kendine ait iki ihtiyacı var:
     1) menü iki düzeyli (üst başlık + alt öğeler) — üye tarafında düz küme listesi
     2) sayfa altı imza satırı
   Başka hiçbir şey eklenmedi: mobil çekmece, sabit menü, tablo kabı, form alanı
   hepsi zaten yukarıdaki bileşenlerde tanımlı.
   ═══════════════════════════════════════════════════════════════ */

/* Katlanabilir menü grubu — <details>/<summary> ile. JS YOK: tarayıcının kendi
   açma/kapama davranışı klavye ve ekran okuyucuyla zaten çalışıyor. Eskisi
   jQuery slideDown/slideUp ile yapılıyordu ve daraltılmış menüde kilitleniyordu. */
/* ── BIZZ-208: N SEVİYELİ MENÜ ──────────────────────────────────────────────
   Menü BIZZ-206'da N seviyeli hâle geldi; bu blok onun görsel karşılığı.
   Tasarımdan gelen adlar benimsendi: alt liste kabı `__list` yerine
   `__children`, başlık `> summary` yerine `.bz-navgroup__summary`.
   Yeniden adlandırmanın envanteri çıkarıldı (BIZZ-177 dersi): 1 Razor görünümü,
   2 JS seçicisi (_Header.cshtml menü araması), 3 CSS kuralı.

   ⚠ SEVİYE BAŞINA PUNTO KÜÇÜLMEZ. Küçültülseydi 4. seviye okunmaz olurdu;
   derinlik yalnız GİRİNTİ + AYRAÇ ÇİZGİSİ ile okunur. */
.bz-navgroup { min-width: 0; }
.bz-navgroup__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-sm); color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.bz-navgroup__summary::-webkit-details-marker { display: none; }
.bz-navgroup__summary:hover { background: var(--surface-2); }
.bz-navgroup__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-navgroup__summary .bz-icon { color: var(--icon-decorative); flex: none; }
.bz-navgroup__chev {
  margin-left: auto; flex: none;
  display: flex; align-items: center;
  color: var(--icon-decorative);
  transition: transform var(--dur-2) var(--ease-out);
}
.bz-navgroup[open] > .bz-navgroup__summary .bz-navgroup__chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .bz-navgroup__chev { transition: none; } }

/* Alt öğeler: bir kademe içeri, sol çizgi grubun nerede bittiğini gösterir.
   İç içe geçince girinti ve çizgi BİRİKİR — dört seviye böyle okunur. */
.bz-navgroup__children {
  margin: 2px 0 var(--space-2);
  margin-left: calc(var(--space-3) + 11px);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
  list-style: none;
}
.bz-navgroup__children .bz-sidenav__item { font-size: var(--fs-sm); }
.bz-navgroup__children .bz-navgroup__summary { min-height: var(--touch-min-compact); }

/* Aktif dal: kökten yaprağa vurgu — yönetici nerede olduğunu tıklamadan görsün. */
.bz-navgroup.is-branch > .bz-navgroup__summary { color: var(--brand-text); font-weight: var(--fw-strong); }
.bz-navgroup.is-branch > .bz-navgroup__summary .bz-icon,
.bz-navgroup.is-branch > .bz-navgroup__summary .bz-navgroup__chev { color: var(--brand-text); }
.bz-navgroup.is-branch > .bz-navgroup__children { border-left-color: var(--brand-300); }

/* Daraltılmış menüde grup başlığı ikon olarak kalır, alt liste gizlenir —
   72px'lik rayda alt liste okunamaz zaten. */
.bz-sidenav--collapsed .bz-navgroup__children,
.bz-sidenav--collapsed .bz-navgroup__chev { display: none; }

/* Daraltılmış kipte 2.+ seviye uçan panele taşınır. Kap `position: relative`
   olmalı; şu an Razor bunu basmıyor — kural hazır, işaretleme sonra. */
.bz-navgroup__flyout {
  position: absolute; left: 100%; top: 0; z-index: 30;
  margin-left: var(--space-2);
  min-width: 260px; max-width: 320px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.bz-navgroup__flyout .bz-navgroup__children { margin-left: var(--space-2); }

.bz-adminfoot {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Liste ekranları — bu iki kural EKRAN DOSYASINDA satır-içi <style> bloğundaydı
   (Shared/Index.cshtml). Tek stil kaynağı kuralı gereği buraya taşındı; davranış aynı.
   DataTables tabloyu kendi sarmalayıcısına alıyor ve genişliği kendi hesaplıyor —
   width:100% olmadan kabın içinde daralıp kalıyor. Tarih seçici ise modal üstünde
   açılabildiği için yüksek z-index istiyor. */
.custom-list-table { width: 100% !important; }
#ui-datepicker-div { z-index: 2000 !important; }

/* Veri ızgarası kabı — .bz-table-wrap KULLANILAMIYOR, nedeni önemli:
   §11.1'de tasarım sistemi ≤768px'te .bz-table'ı KARTA çeviriyor ve bu yüzden
   .bz-table-wrap'in yatay kaydırmasını KAPATIYOR (overflow-x: visible). Üye
   tablolarında doğru; panelde değil — buradaki tablo DataTables tarafından
   yönetiliyor, karta dönüşemez (sütun/satır DOM'u eklentinin).
   Ölçüm: .bz-table-wrap ile 375px'te overflow-x "visible" hesaplanıyordu ve
   /admin/News scrollWidth 794 (+419) taşıyordu. Burada kaydırma HER ZAMAN açık.
   Kaydırma çubuğu görünür bırakılır — tek dürüst gösterge odur. */
.bz-gridwrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.bz-gridwrap::-webkit-scrollbar { height: 8px; }
.bz-gridwrap::-webkit-scrollbar-track { background: transparent; }
.bz-gridwrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }

/* Kayıt görüntüleme (Viewer): etiket–değer satırları. Eskiden Bootstrap
   .list-group-item idi; ayırıcı çizgi ve hizalama buradan geliyor. */
.bz-viewerlist { list-style: none; margin: 0; padding: 0; }
.bz-viewerlist__row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.bz-viewerlist__row:last-child { border-bottom: none; }

/* Dil eşleştirme ızgarası — bayrak görselleri ve hücreler.
   Bayrak yüksekliği ekran dosyasında satır-içi style ile veriliyordu. */

/* Hesap menüsü — <details> ile. Bootstrap 4 dropdown'a bağımlılık yok; açma/kapama
   ve klavye erişimi tarayıcının kendi davranışı. */
.bz-usermenu { position: relative; }
.bz-usermenu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  border-radius: var(--radius-full);
}
.bz-usermenu > summary::-webkit-details-marker { display: none; }
.bz-usermenu > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bz-usermenu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  z-index: 40; min-width: 240px;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.bz-usermenu__head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.bz-usermenu__item {
  padding: var(--space-3) var(--space-4);
  color: var(--text); text-decoration: none;
}
.bz-usermenu__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.bz-usermenu__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ═══════════════════════════════════════════════════════════════
   BIZZ-97 · Faz 5 — 14 özel yönetim görünümünün ihtiyaçları
   Hepsi ekran dosyalarında SATIR-İÇİ <style>/style="" olarak duruyordu;
   tek stil kaynağı kuralı gereği buraya taşındı. Tek hex yok.
   ═══════════════════════════════════════════════════════════════ */

/* Kod/anahtar kutusu — 2FA kurulum anahtarı ve kurtarma kodları.
   Eskiden `<pre class="border p-2">` ve satır-içi
   `style="font-size:16px;line-height:2;letter-spacing:1px"` idi. */
.bz-codeblock {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Elle okunup yazılacak kodlar: harfler ayrışsın diye seyrek. */
.bz-codeblock--spaced { line-height: 2; letter-spacing: .08em; }

/* İçe aktarma önizlemesi: uzun listede sayfayı uzatmadan kendi içinde kaydır.
   Eskiden satır-içi `style="max-height:460px;overflow:auto"` idi. */
.bz-previewscroll { max-height: 460px; overflow-y: auto; }

/* Tablo satırı durum vurgusu — Bootstrap .table-danger/.table-warning yerine.
   Renk BURADA anlam taşıyor (içe aktarılamayan / güncellenecek satır), o yüzden
   korundu; ayrıca renge ek olarak satırda rozet de var (renk tek gösterge değil). */
.bz-table tbody tr.is-error   { background: var(--danger-bg); }
.bz-table tbody tr.is-warning { background: var(--warning-bg); }
.bz-table tbody tr.is-error:hover,
.bz-table tbody tr.is-warning:hover { filter: brightness(0.97); }

/* ── Yönetim girişi ve 2FA ekranı (Layout = null) ─────────────
   Bu iki sayfa kendi <head>'ini kuruyor ve Bracket'in koyu giriş kutusunu
   (.login-wrapper/.bg-black-7/.ht-100v) kullanıyordu. Kabuk buraya taşınınca
   o sayfalar bracket.css yüklemeyi tamamen bıraktı. */
.bz-authshell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg);
}
.bz-authcard {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.bz-authcard__title {
  font-weight: var(--fw-display); font-size: var(--fs-h2);
}
.bz-authcard__sub { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── Haftalık randevu takvimi (kuaför) ────────────────────────
   Eskiden iki ikiz ekranın içinde ~90 satırlık sayfa içi <style> bloğuydu ve
   `.modal`/`.modal-content`/`.close` gibi BOOTSTRAP'IN GENEL sınıflarını yeniden
   tanımlıyordu. Artık kendi ad alanında. */
.bz-cal {
  width: 100%; max-width: 1200px; margin-inline: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.bz-cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-fill); color: var(--brand-contrast);
}
.bz-cal__head .bz-iconbtn { color: var(--brand-contrast); }
.bz-cal__title { font-weight: var(--fw-strong); font-size: var(--fs-h5); }

.bz-cal__grid,
.bz-cal__body {
  display: grid;
  grid-template-columns: 88px repeat(7, minmax(0, 1fr));
  text-align: center;
}
.bz-cal__body { grid-auto-rows: 60px; }

.bz-cal__time {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  font-weight: var(--fw-label); font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.bz-cal__day {
  padding: var(--space-2);
  font-weight: var(--fw-strong); font-size: var(--fs-sm);
  background: var(--surface-2); color: var(--text);
  border-right: 1px solid var(--border);
}
.bz-cal__cell {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
}
.bz-cal__cell:hover { background: var(--surface-2); }
/* Geçmiş saat: eskiden JS satır-içi `style.backgroundColor` ve
   `style.pointerEvents` yazıyordu — durum artık sınıfla taşınıyor. */
.bz-cal__cell.is-past { background: var(--surface-2); cursor: default; pointer-events: none; }
.bz-cal__appt {
  position: absolute; inset: 4px 4px auto 4px;
  padding: 3px var(--space-2);
  background: var(--warning-bg); color: var(--warning-text);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── BIZZ-208: AY GÖRÜNÜMÜ (arketip H) ─────────────────────────────────────
   ⚠ NEDEN AYRI KİP: yukarıdaki `.bz-cal` bir HAFTA/SAAT ızgarasıdır
   (`88px repeat(7,…)`, `__time`, `__cell`, `__appt`) ve Randevular ekranını
   besliyor. Tasarımdan gelen takvim ise bir AY ızgarası ve aynı üç sınıfı
   (`.bz-cal`, `__grid`, `__day`) UYUMSUZ kurallarla yeniden tanımlıyordu.
   Olduğu gibi eklenseydi Randevular ekranı bozulurdu — ölçüldü.
   Bu yüzden ay görünümü `--ay` kipine kapsandı; iki düzen yan yana yaşıyor.
   Alt parçalar (`__dow`, `__num`, `__event`, `__more`) de kipe kapsandı ki
   hafta görünümüne sızmasınlar. */
.bz-cal--ay { display: flex; flex-direction: column; min-width: 0; border: 0; max-width: none; }
.bz-cal--ay .bz-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: var(--space-2); }
.bz-cal--ay .bz-cal__dow span {
  text-align: center;
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted);
}
.bz-cal--ay .bz-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  text-align: left;
}
/* Gün hücresinin TAMAMI hedeftir: ekleme sürükleyerek değil TIKLAYARAK yapılır. */
.bz-cal--ay .bz-cal__day {
  min-height: 104px; min-width: 0;
  padding: var(--space-1);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; font-weight: var(--fw-body);
}
.bz-cal--ay .bz-cal__day:hover { background: var(--surface-2); }
.bz-cal--ay .bz-cal__day:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.bz-cal--ay .bz-cal__num {
  align-self: flex-end; min-width: 24px; text-align: center;
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-label); color: var(--text-muted);
  padding: 2px 4px; border-radius: var(--radius-full);
}
.bz-cal--ay .bz-cal__day.is-out { background: var(--bg); }
.bz-cal--ay .bz-cal__day.is-out .bz-cal__num { color: var(--text-subtle); }
/* Geçmiş gün SOLUK ama görünür — kaybolmaz. */
.bz-cal--ay .bz-cal__day.is-past .bz-cal__event { opacity: .55; }
.bz-cal--ay .bz-cal__day.is-today .bz-cal__num { background: var(--brand-fill); color: var(--brand-contrast); }
.bz-cal--ay .bz-cal__event {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  padding: 3px var(--space-1); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-label);
  background: var(--brand-surface); color: var(--brand-text);
  border: 1px solid var(--brand-surface-border);
}
.bz-cal--ay .bz-cal__event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-cal--ay .bz-cal__event--warning { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
.bz-cal--ay .bz-cal__event--neutral { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.bz-cal--ay .bz-cal__more { font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--brand-text); padding: 2px var(--space-1); }
@media (max-width: 768px) {
  .bz-cal--ay .bz-cal__day { min-height: 72px; }
  .bz-cal--ay .bz-cal__event span { display: none; }
  .bz-cal--ay .bz-cal__event { width: 8px; height: 8px; padding: 0; border-radius: var(--radius-full); }
}

/* Takvimin kendi penceresi — Bootstrap modalı DEĞİL, o yüzden ayrı ad alanı. */
.bz-cal-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--ink-1000) 45%, transparent);
  overflow: auto;
}
.bz-cal-modal__panel {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Takvim dar ekranda sıkışmaz; kabı (.bz-card__body) kendi içinde kaydırır. */
@media (max-width: 768px) {
  .bz-cal { min-width: 720px; }
}

/* Kayıt görüntüleme: etiket sütunu sabit, değer(ler) kalanı paylaşır.
   Eskiden `col-md-2` + hesaplanan `col-md-@(10/N)` Bootstrap sınıflarıydı. */
.bz-viewerlist__label { flex: 0 0 180px; }
@media (max-width: 768px) { .bz-viewerlist__label { flex-basis: 100%; } }

/* Dil eşleştirme satırı: sütun sayısı dil sayısı kadar, hepsi EŞİT genişlikte.
   Bootstrap `.row > .col` davranışının birebir karşılığı (flex: 1 0 0%). */

/* Izgara hücresindeki küçük görsel önizlemesi. Eskiden JS satır-içi
   `style="height:20px;"` yazıyordu (74 liste ekranında, her satırda). */
.bz-cellthumb { height: 20px; width: auto; display: inline-block; }

/* ═══════════════════════════════════════════════════════════════
   BIZZ-160 · Üçüncü taraf bileşenlerin tasarım sistemine bağlanması
   Bracket teması (970 KB) kaldırılıp yerine yalın Bootstrap 4.1.3 (138 KB)
   konulunca bu üç bileşen kendi VARSAYILAN görünümüne düştü. Bracket onları
   panelin diline uyduruyordu; o iş artık burada, token'larla yapılıyor.
   Ölçüldü (önce/sonra imza karşılaştırması): modallar birebir aynı kaldı,
   fark yalnız bu bileşenlerdeydi.
   ═══════════════════════════════════════════════════════════════ */

/* ── select2 (form alanlarının açılır listesi) ────────────────
   Ölçüm: kendi varsayılanı 28px yükseklik + gri kenarlık. Yanındaki
   .bz-input 44px (--touch-min). Yani aynı formdaki iki alan farklı
   boydaydı ve select2 dokunmatik hedef ölçüsünün altında kalıyordu. */
/* height AÇIKÇA verilir: select2 kendi CSS'inde `height: 28px` yazıyor ve
   min-height onu EZMİYOR — ilk denemede alan 28px'te kaldı (ölçüldü). */
.select2-container--default .select2-selection--single {
  height: var(--touch-min);
  padding: 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  color: var(--text);
  padding-left: var(--space-2);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: var(--space-2); }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand); box-shadow: var(--focus-ring);
}
.select2-container--default .select2-dropdown {
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--brand-fill); color: var(--brand-contrast);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-2); color: var(--text); background: var(--surface);
}

/* ── DataTables sayfalama ─────────────────────────────────────
   Ölçüm: Bracket, içinde bulunulan sayfayı gri bir hapla işaretliyordu;
   yalın Bootstrap'te o işaret YOK — kullanıcı kaçıncı sayfada olduğunu
   düğmelerden anlayamıyordu. İşaret token'la geri kondu. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 8px var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--text-muted); background: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--text); background: var(--surface-2); border-color: var(--border);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--brand-contrast); background: var(--brand-fill); border-color: var(--brand-fill);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--icon-decorative); background: transparent; border-color: transparent; cursor: default;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Summernote (zengin metin editörü) ────────────────────────
   Kendi CSS'i (summernote-bs4) yüklü; yalnız kenarlık/köşe panelin
   diline uyduruluyor. Araç çubuğunun kendi düzenine dokunulmaz. */
.note-editor.note-frame {
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
.note-editor.note-frame .note-toolbar { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.note-editor.note-frame .note-editing-area .note-editable { background: var(--surface); color: var(--text); }

/* ── BIZZ-83 · erişilebilirlik düzeltmeleri ───────────────────
   Takvim (FullCalendar) — geçen/gelecek ayın günleri.
   ÖLÇÜLDÜ: bu günlerin numarası marka renginin %30 saydamlığıyla basılıyordu;
   beyaz üstünde ortaya çıkan renk #b6d4ce ve kontrast oranı 1,57 — WCAG AA'nın
   istediği 4,5'in çok altında, yani pratikte okunamıyordu (yemek menüsü takviminde
   5 düğüm). Saydamlık yerine token'lı "sönük metin" rengi: hem ayrımı korur
   (bu günler yine geri planda durur) hem okunur kalır. */
.fc .fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-top { opacity: 1; }
.fc .fc-day-other .fc-daygrid-day-frame .fc-daygrid-day-number { color: var(--text-muted); }

/* BIZZ-98: gün numarası tıklanabilir bir hedef ama genişliği RAKAM SAYISINA
   göre değişiyordu — ölçüldü: "1" için 14px, "9" için 17px, "28" için 24px.
   Tek haneli günler 24px'lik dokunma eşiğinin altında kalıyor, ayın ilk
   dokuz gününe telefonda isabet etmek zorlaşıyordu. Genişlik tabanı sabitlenir;
   iki haneli günler zaten daha genişse büyümeye devam eder (min-width). */
.fc .fc-daygrid-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min-compact, 24px);
  min-height: var(--touch-min-compact, 24px);
}

/* Summernote araç çubuğu düğmeleri 20×31 ölçüldü — yükseklik yeterli, GENİŞLİK
   eşiğin altındaydı. Yalnız yatayda tabana çekilir; editörün kendi satır
   yüksekliğine dokunulmaz ki araç çubuğu iki satıra taşmasın. */
.note-toolbar .note-btn { min-width: var(--touch-min-compact, 24px); }

/* ═══════════════════════════════════════════════════════════════
   BIZZ-98 · Dokunmatik hedef ölçüleri ve mobil arama
   ÖLÇÜLDÜ (375px, gerçek dokunmatik bağlam): taşma her ölçüde 0, alt sekme
   çubuğu ve çekmece çalışıyor — eksik olan HEDEF BOYUTLARIYDI. Sayfa başına
   8-9 etkileşimli öğe 44px'in altındaydı.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sol menüdeki kısayollar (favoriler) BİLEREK sıkışıktı: --touch-min-compact
     (32px) kullanıyorlar, ölçülen yükseklik 40px. Masaüstünde fareyle sorun değil;
     DOKUNMATİKTE 44px'in altında kalıyor ve yan yana duran satırlarda yanlış
     öğeye basmak kolaylaşıyor. Çekmece zaten tam ekran — yer sıkıntısı yok. */
  .bz-sidenav__item--fav { min-height: var(--touch-min); }

  /* Hesap menüsü: açma hedefi avatarın kendisiydi (ölçüldü: 30×30). */
  .bz-usermenu > summary { min-width: var(--touch-min); min-height: var(--touch-min); justify-content: center; }

  /* ÜST BARDAKİ ARAMA — ölçüldü: kap 67px'e sıkışıyor, içindeki girdi 9×26 px
     kalıyordu. O genişlikte ne yer tutucu okunuyor ne de parmakla isabet ediyor;
     pratikte kullanılamaz bir alandı. Girdi zaten yazmak için değil, komut
     paletini açmak için (data-bz-palette-open). Mobilde dürüst karşılığı bir
     ARAMA DÜĞMESİ: 44×44 dokunma alanı, tek ikon, aynı işi yapar. Yer de açılır:
     kap esnemeyi bırakır (flex 0 0 auto), kalan genişlik başlığa gider. */
  .bz-topbar__search { flex: 0 0 auto; }
  .bz-topbar__search .bz-search {
    position: relative;
    width: var(--touch-min); height: var(--touch-min);
    padding: 0; justify-content: center; cursor: pointer;
  }
  /* Girdi GİZLENMEZ, kutunun tamamını kaplayan saydam katmana dönüşür: hedef
     44×44 olur ama klavye odağı ve aria-label ("Ara") yerinde kalır. Gizleseydik
     kutu ya erişilemez olurdu ya da sarmalayıcıya rol vermek gerekirdi — o da
     iç içe etkileşim demekti (BIZZ-83). */
  .bz-topbar__search .bz-search__input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    padding: 0; opacity: 0; cursor: pointer;
  }

  /* Kırıntı yolu bağlantıları 19×18 ölçülmüştü. Hedef YALNIZ DİKEYDE 44'e
     çıkarılır; yatayda 24px'te (WCAG 2.5.8 AA eşiği) bırakılır. Genişliği de
     44'e çekseydik 19px'lik bir kırıntının katmanı her iki yana ~12px taşar,
     8px'lik ayraç boşluğunu aşıp KOMŞU kırıntının katmanının üstüne binerdi —
     yanlış bağlantıya gitmek 18px'e basamamaktan daha kötü. */
  .bz-crumbs__link::after { min-height: var(--touch-min); }

  /* Üst bardaki profil avatarı: ölçüldü 30×30 (.bz-avatar--32, kenarlık payı).
     Dairenin görsel çapı DEĞİŞMEZ — büyütseydik başlık çubuğunun dengesi
     bozulurdu; hedef, kırıntılardaki gibi görünmez bir katmanla genişletilir.
     Komşusu 40px'lik ikon düğmeleri, aralarında boşluk var; 44'lük katman
     onların üstüne binmez. */
  .bz-topbar__actions .bz-avatar { position: relative; }
  .bz-topbar__actions .bz-avatar::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--touch-min); height: var(--touch-min);
  }

  /* Marka bağlantısı (çekmece başlığı): kutusu 47×22, görünmez katmanı 47×32.
     24px'lik AA eşiğini zaten geçiyordu ama çekmecede yer boldu — 44'e çıkarıldı. */
  .bz-logo::after { height: var(--touch-min); }

  /* Akordiyon başlıkları: <summary class="bz-card__head"> ölçüldü 293×20 —
     AA eşiği olan 24px'in DE ALTINDA. Sebebi .bz-card:not(--flush) > __head
     kuralının dolguyu sıfırlaması; başlık metninin satır yüksekliği kadar
     kalıyor. Kural yalnız <summary> için daraltıldı: aynı sınıfı taşıyan
     tıklanamaz kart başlıkları (Account, PayrollUI, arama sonuçları…) hedef
     değil, boyları büyütülürse kartların dikey ritmi bozulurdu. */
  summary.bz-card__head { min-height: var(--touch-min); }

  /* Sayfa içi arama alanları (/uygulamalar, rehber, arama sonuçları): sarmalayıcı
     zaten 44 yüksekliğinde ama dolgusu girdiyi 26px'e sıkıştırıyordu — odak ve
     imleç hedefi girdinin kendisi olduğu için gerçek dokunma alanı 26'ydı.
     Dolgu yatayda korunur, dikeyde girdiye devredilir: görünüm aynı, hedef 44.
     Üst bardaki arama bu kuraldan SONRA gelen blokla ayrıca ezilir. */
  .bz-search { padding-top: 0; padding-bottom: 0; }
  .bz-search__input { align-self: stretch; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   BIZZ-208 · TASARIMDAN GELEN YENİ BİLEŞENLER
   Kaynak: new-design/ds-eksik-bilesenler.css (Claude Design teslimi).
   Promt yalnız DÖRT yeni bileşene izin vermişti; agent dördünü de üretti.
   Buraya token'larla, HEX'siz alındı. Çakışan iki bileşen (bz-navgroup,
   bz-cal) YUKARIDA kendi bloklarında fark bazlı birleştirildi — buraya
   kopyalanmadı, çünkü depoda zaten tanımlıydılar.
   ═══════════════════════════════════════════════════════════════ */

/* ── N1 · bz-fieldset — AYAR BÖLÜMÜ (arketip B) ─────────────────────────────
   Kart DEĞİL; kartın içinde yaşar. Bölümler arası ayraç .bz-divider. */
.bz-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.bz-fieldset__legend { padding: 0; font-family: var(--font-sans); font-weight: var(--fw-strong); font-size: var(--fs-body); color: var(--text); }
.bz-fieldset__desc { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); max-width: 60ch; }
.bz-fieldset__rows { display: flex; flex-direction: column; margin-top: var(--space-2); }
/* Tehlikeli bölüm başlığı: anlam yalnız renkle verilmez — yanına İKON konur. */
.bz-fieldset--danger .bz-fieldset__legend { color: var(--danger-text); display: flex; align-items: center; gap: var(--space-2); }

/* ── N1b · bz-formset — FORM GÖVDESİNİN SARMALI (arketip C · Detay) ─────────
   ⚠ `bz-fieldset` DEĞİL: o, ayar ekranındaki BÖLÜM başlığıdır (legend + rows).
   Bu ise Manage formunun tüm alanlarını saran taşıyıcıdır ve tek işi
   `disabled` niteliğini taşıyabilmektir. Tarayıcının fieldset varsayılan
   kenarlığı/dolgusu sıfırlanır; yerleşim değişmez, çıktı eskisiyle birebir aynı
   kalır (readonly DEĞİLKEN hiçbir kural uygulanmaz).

   Salt-okunur hâl: yönetici "İncele" yetkisiyle formu AÇAR ama YAZAMAZ.
   Metin seçilebilir kalır — burası bir inceleme ekranıdır, kopyalamak meşrudur.
   Kapatılan denetimlerin soluk görünmesi TARAYICININ kendi davranışıdır; üstüne
   yalnız imleç ipucu eklenir ki neden tıklanamadığı belli olsun. */
.bz-formset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bz-formset--readonly { cursor: not-allowed; }
.bz-formset--readonly .bz-input,
.bz-formset--readonly .bz-select,
/* Summernote üçüncü taraf: contenteditable div'i fieldset kapatmaz, JS kapatır
   (custom-site.manage.js). Burada yalnız aynı sessiz görünüm verilir. */
.bz-formset--readonly .note-editor { opacity: .75; }
/* ⚠ Aşağıdakiler form DENETİMİ değildir; `fieldset[disabled]` onlara işlemez.
   Üçü de GERÇEK TARAYICIDA ölçülerek bulundu — HTTP probu "input sayısı aynı"
   dediği için görünmüyorlardı:
     • "Dosya seç" bir <label>'dır. İçindeki <input type="file"> kapandığı için
       tıklama zaten bir şey yapmaz, ama düğme CANLI GÖRÜNÜYORDU. `:has()` ile
       etiketin kendisi hedeflenir (ilk yazımda `.custom-file` denenmişti —
       bu işaretlemede o sarmal YOK, kural hiç eşleşmiyordu).
     • Görsel/dosya "Sil" düğmeleri <span>'dır.
     • Bağlı kayıt hızlı ekleme (+ / kalem) <a>'dır ve açtığı kutu salt-okunur
       formda artık hiç basılmıyor; tıklanınca sessizce hiçbir şey olurdu. */
.bz-formset--readonly label:has(input[type="file"]),
.bz-formset--readonly .deleteFormImage,
.bz-formset--readonly .deleteFormFile,
.bz-formset--readonly .deleteForm,
.bz-formset--readonly .getQuickEntityAddForm,
.bz-formset--readonly .getRelatedEntityEditForm { pointer-events: none; opacity: .5; }

/* ── N1c · bz-field--satir — AYAR SATIRINDAKİ ALAN (BIZZ-218) ───────────────
   `bz-setrow__control` içindeki alanın kendi etiketi YOKTUR (satırın sol yarısında
   duruyor). Geriye yalnız kontrol kalır; dikey yığın yerine kendi genişliğinde
   dursun ki sağa hizalı satır düzeni bozulmasın. */
.bz-field--satir { gap: 0; }
.bz-field--satir > .bz-field__error { margin-top: var(--space-1); }

/* Anahtarın yanındaki "Açık/Kapalı" metni: durum yalnız renkle ve topuzun
   konumuyla verilmez, YAZIYLA da söylenir. Değeri custom-site.ayar.js tazeler. */
.bz-choice__durum { font-size: var(--fs-sm); color: var(--text-muted); min-width: 5ch; }
.bz-choice__input:checked ~ .bz-choice__durum { color: var(--text); }

/* Kaydedilmemiş değişiklik rozeti — satırın adının yanında. */
.bz-setrow__degisti { margin-left: var(--space-2); }

/* ── N2b · bz-kaydetserit — SABİT ALT ŞERİT (BIZZ-218) ──────────────────────
   Uzun ayar formunda "kaç değişiklik yaptım, neyi değiştirdim" sorusu sayfanın
   en altına inmeden yanıtlanmalı; şerit ekranın dibine yapışır.
   ⚠ `hidden` ile gizlenir: değişiklik yokken DOM'da durur ama yer kaplamaz. */
.bz-kaydetserit {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-5) calc(-1 * var(--space-5)) 0;
  padding: var(--space-3) var(--space-5);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.bz-kaydetserit[hidden] { display: none; }
.bz-kaydetserit__ozet { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── N2 · bz-setrow — AYAR SATIRI (arketip B) ───────────────────────────────
   ⚠ Satırın KENDİSİ tıklanabilir değildir; dokunma hedefi kontroldür.
   Ayar ekranlarındaki ekle/sil düğmesinin YOKLUĞU bu bileşenin varlık sebebi. */
.bz-setrow { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) 0; min-height: var(--touch-min); }
.bz-setrow + .bz-setrow { border-top: 1px solid var(--border); }
.bz-setrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-setrow__label { font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-body); color: var(--text); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bz-setrow__help { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); max-width: 52ch; }
.bz-setrow__control { flex: none; display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); }
.bz-setrow__control .bz-input { width: 120px; text-align: right; }
.bz-setrow__control .bz-selectwrap { min-width: 200px; }
/* Bağımlı ayar: üst switch kapalıyken soluk ve devre dışı — GİZLENMEZ.
   Yönetici neyin var olduğunu görmeli, yoksa ayarın varlığını hiç bilmez. */
.bz-setrow.is-disabled { opacity: .5; }
.bz-setrow.is-disabled .bz-setrow__control { pointer-events: none; }
/* Kaydedilmemiş değişiklik. Renk TEK BAŞINA anlam taşımaz: satıra ayrıca
   "Değişti" rozeti (.bz-badge) konur. */
.bz-setrow.is-changed { box-shadow: inset 3px 0 0 var(--brand); padding-left: var(--space-4); }
@media (max-width: 640px) {
  .bz-setrow { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .bz-setrow__main { flex: 1 1 100%; }
  .bz-setrow__control { margin-left: auto; }
}

/* ── N2c · bz-filterbar — DEFTER FİLTRE ŞERİDİ (arketip D) ──────────────────
   Izgaranın kolon süzgeci TEK DEĞER alır; defterde asıl soru bir ARALIKTIR.
   Şerit kartın ÜSTÜNDE durur: süzgeç ızgaranın bir parçası değil, defterin
   nasıl okunacağına dair bir karardır.
   ⚠ Dar ekranda alanlar alt alta iner; düğmeler en sona geçer. */
.bz-filterbar {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.bz-filterbar__alan { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 170px; }
.bz-filterbar__dugmeler { display: flex; gap: var(--space-2); flex: 0 0 auto; }
/* Özet tam satır kaplar: "neyin süzüldüğü" bir kenar notu değil, ekranın durumudur. */
.bz-filterbar__ozet { flex: 1 0 100%; margin: 0; }
.bz-filterbar__ozet[hidden] { display: none; }
@media (max-width: 640px) {
  .bz-filterbar__alan { flex: 1 1 100%; }
  .bz-filterbar__dugmeler { flex: 1 0 100%; }
}

/* ── N3b · bz-defterkunye / bz-defterfark — SATIR KÜNYESİ (arketip D) ───────
   Defter satırı açılınca ızgaranın ALTINDA açılan künye. Ayrı bir sayfaya
   gitmek "bu satırda ne yazıyor" sorusu için fazla pahalı.
   ⚠ ÖNCE/SONRA en üstte: defterin varlık sebebi o iki değerdir; künyenin
   geri kalanı bağlamdır. */
.bz-defterkunye { padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); }
.bz-defterfark { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.bz-defterfark__yan { padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
/* Anlam yalnız RENKLE verilmez: her yanın kendi yazılı başlığı var (Önce / Sonra). */
.bz-defterfark__yan--once  { border-left: 3px solid var(--border-strong); }
.bz-defterfark__yan--sonra { border-left: 3px solid var(--brand); }
.bz-defterfark__deger { margin: var(--space-1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.custom-list-table tbody tr.is-acik { background: var(--surface-2); }
@media (max-width: 640px) { .bz-defterfark { grid-template-columns: 1fr; } }

/* ── N3 · bz-desc — KÜNYE, anahtar–değer (arketip C ve D) ───────────────────
   <dl class="bz-desc"><dt>…</dt><dd>…</dd></dl>
   Boş değer "—" basar, satır GİZLENMEZ; uzun değer sarılır, kırpılmaz. */
.bz-desc { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; margin: 0; min-width: 0; }
.bz-desc dt { padding: var(--space-2) var(--space-4) var(--space-2) 0; font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }
.bz-desc dd { margin: 0; min-width: 0; padding: var(--space-2) 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); overflow-wrap: anywhere; }
.bz-desc dt + dd { border-top: none; }
.bz-desc dt:not(:first-of-type), .bz-desc dt:not(:first-of-type) + dd { border-top: 1px solid var(--border); }
.bz-desc dd:empty::before { content: "—"; color: var(--text-muted); }
@media (max-width: 640px) {
  .bz-desc { grid-template-columns: 1fr; }
  .bz-desc dt { padding-bottom: 0; }
  .bz-desc dt:not(:first-of-type) + dd { border-top: none; }
  .bz-desc dd { padding-top: 2px; }
}

/* ── N4 · bz-chart — GRAFİK ÇERÇEVESİ, yalnız çubuk + çizgi (arketip F) ─────
   Seri dizilimi KOYUDAN AÇIĞA sabittir: 700 → 300 → 200. Her seride etiket VE
   değer yazılır; anlam yalnız renkle verilmez. Veri yoksa .bz-empty basılır,
   boş eksen ÇİZİLMEZ. */
.bz-chart { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bz-chart__head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.bz-chart__title { font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-sm); color: var(--text); }
.bz-chart__head .bz-legend { margin-left: auto; }
.bz-chart__plot { display: flex; align-items: stretch; gap: var(--space-4); min-height: 160px; border-bottom: 1px solid var(--border); }
.bz-chart__group { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; gap: var(--space-1); }
.bz-chart__bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-1); width: 100%; max-width: 56px; height: 100%; }
.bz-chart__fill { width: 100%; background: var(--brand-700); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 2px; }
.bz-chart__fill--s2 { background: var(--brand-300); }
.bz-chart__fill--s3 { background: var(--brand-200); }
.bz-chart__value { font-family: var(--font-sans); font-weight: var(--fw-label); font-size: var(--fs-label); color: var(--text); white-space: nowrap; }
.bz-chart__x { display: flex; gap: var(--space-4); }
.bz-chart__x span { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-label); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kip değiştiricileri: tasarım ikisini de KULLANIYOR ama teslim edilen CSS'te
   TANIMLI DEĞİLDİ (ölçüldü). Çubuk kipi varsayılan; çizgi kipinde taban çizgisi
   SVG içinde yaşadığı için kabın alt kenarlığı kalkar. */
.bz-chart--bar .bz-chart__line { display: none; }
.bz-chart--line .bz-chart__plot { border-bottom: none; min-height: 0; }
.bz-chart--line .bz-chart__x { padding-top: var(--space-1); }
.bz-chart__line { width: 100%; height: 180px; display: block; }
.bz-chart__line .grid { stroke: var(--border); stroke-width: 1; }
.bz-chart__line .s1 { stroke: var(--brand-700); stroke-width: 2.5; fill: none; }
.bz-chart__line .s2 { stroke: var(--brand-300); stroke-width: 2.5; fill: none; }
.bz-chart__line .dot { fill: var(--brand-700); }
.bz-chart__line .dot--s2 { fill: var(--brand-300); }
.bz-chart__line text { font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-label); fill: var(--text); }
.bz-chart__line text.axis { fill: var(--text-muted); font-weight: var(--fw-body); }

/* ── ÜYE TARAFI EKLERİ (U1 · U2) ────────────────────────────────────────────
   Küme paneli iç başlığı: kalabalık kümede tarama bölüm bölüm insin.
   Başlık TIKLANABİLİR DEĞİLDİR; tık derinliği artmaz, kırpma yapılmaz. */
.bz-clusterpanel__section {
  grid-column: 1 / -1;
  padding: var(--space-4) var(--space-3) var(--space-1);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted);
}
.bz-clusterpanel__section:first-child { border-top: none; margin-top: 0; padding-top: var(--space-1); }

/* Komut paleti gruplandırması. Tasarım bu üçünü KULLANIYOR ama teslim edilen
   CSS'te tanımlı değildi (ölçüldü) — küme paneliyle aynı dille yazıldı. */
.bz-cmdk__head {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-family: var(--font-sans); font-weight: var(--fw-label);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-muted);
}
.bz-cmdk__cluster { display: flex; flex-direction: column; }
.bz-cmdk__cluster + .bz-cmdk__cluster { border-top: 1px solid var(--border); margin-top: var(--space-1); }
/* Sonuç satırında yeteneğin hangi kümeye ait olduğu — hedefi bulmayı kolaylaştırır. */
.bz-cmdk__label { margin-left: auto; padding-left: var(--space-3); font-size: var(--fs-label); color: var(--text-muted); white-space: nowrap; }

/* ── bz-auth · GİRİŞ KABUĞU (BIZZ-243) ─────────────────────────────────────
   ⚠ ÖLÇÜLEN KUSUR: üyenin gördüğü İLK ekran (giriş · kayıt · parola sıfırlama ·
   parola değiştirme) tasarım sisteminin DIŞINDAYDI. İçerik görünümlerinin
   beşi de zaten `bz-` ile yazılmıştı; kırık olan yalnız KABUKTU — eski panel
   temasının (Metronic) gövde sınıfları, Bootstrap ızgarası ve 23 renk taşıyan
   bir `KTAppSettings` bloğu.

   ⚠ RENKLER ARTIK TOKEN'DAN: panelden marka rengi değiştirildiğinde bu ekran da
   değişir. Eskiden değişmezdi — marka kimliği görünüme elle yazılıydı.

   ⚠ KIRILIM eski `.login__image` ile AYNI (991px): dar ekranda görsel sütun
   düşer, form tam genişliği alır. Davranış korunuyor, yalnız kaynağı değişiyor. */
.bz-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--bg);
}
.bz-auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}
/* Form genişliği okunabilirlik için sınırlı; ortalanır. */
.bz-auth__inner { width: 100%; max-width: 26rem; margin-inline: auto; }
.bz-auth__brand { display: inline-block; margin-bottom: var(--space-7); }
/* Eski `max-h-150px` yardımcı sınıfının karşılığı — ölçü korundu. */
.bz-auth__logo { display: block; max-height: 150px; width: auto; }

/* ⚠ KOYU KİPTE LOGO OKUNMUYORDU (BIZZ-243, piksel üzerinden ölçüldü):
   `login-logo.png` koyu lacivert bir işaret ve koyu kipin zemini de #0A1633.
   Logonun görünür piksellerinin zemine karşı ortalama karşıtlığı 1.75:1,
   en düşüğü 1.18:1 çıktı — grafikler için eşik 3:1.
   ÇÖZÜM: kurumun logosuna DOKUNULMADI; yalnız koyu kipte arkasına açık bir
   zemin konur. Böylece marka işareti aynen kalır ve okunur olur.
   ⚠ ASIL çözüm firmadan koyu kip için bir logo varyantı almaktır; o geldiğinde
   bu kural kaldırılır. Varyantı biz uyduramayız — marka kararı firmanındır. */
:root[data-mode="dark"] .bz-auth__brand {
  background: var(--surface-inverse); /* koyu kipte açık uç — tokens.css:232 */
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}
.bz-auth__cover {
  background-image: url('/assets/media/site/cover.jpg');
  background-size: cover;
  background-position: center;
}
@media (max-width: 991px) {
  .bz-auth { grid-template-columns: 1fr; }
  .bz-auth__cover { display: none; }
}

/* ---------------------------------------------------------------------------
   OLU BILESENLER KALDIRILDI (BIZZ-246) -- 9 aile / 31 sinif.

   OLCUM UC KATMANDA, BUYUK/KUCUK HARF DUYARSIZ VE SINIR DUYARLI:
     1) gorunum kaynagi (Razor yorumlari cikarilarak)
     2) JS + C# kaynagi (dinamik eklenenler dahil)
     3) 48 sayfalik canli cikti (28 uye + 20 panel)
   440 tanimli bz- sinifindan 271'i canli basiliyor, 83'u KOSULLU (kaynakta var,
   o 48 sayfada basmadi -- hata/yukleme/sohbet durumlari), 86'si hicbirinde yok.

   ⚠ FIRMA KARARI: tasarim sistemi bir KUTUPHANE. O 86'nin 53'u YASAYAN
   bilesenlerin kullanilmayan varyanti (bz-toast--danger, bz-banner--brand,
   bz-logo--sm/--lg/--xl, bz-chart__*, bz-msg__day/__file/__tick...). Bunlar
   API yuzeyi olarak KORUNDU -- yarin bir hata durumu yazildiginda hazir olsun.

   KALDIRILAN (koku de hicbir yerde gecmeyen aileler):
     bz-bars (10) . bz-skeleton (7) . bz-reactions (5) . bz-langcell (2)
     bz-fab (2) . bz-avatargroup (2) . bz-langrow . bz-flag . bz-textarea

   ⚠ UCU GIT GECMISINDE HIC KULLANILMAMIS: bz-skeleton, bz-fab, bz-reactions --
   yazilmis, hicbir gorunume hic uygulanmamis.
   ⚠ bz-reactions: tepki OZELLIGI CALISIYOR (bayrak acik, UserTimeline/React ucu
   var, timeline.js emoji cubugunu ciziyor) ama kendi isaretlemesini kullaniyor;
   bu bilesen onun kullanilmayan bir alternatifiydi.
   ⚠ bz-textarea: formlar cok satirli alanlarda da `bz-input` kullaniyor
   (18 gecis) -- tutarlilik sorusu olarak bildirildi, davranis degistirilmedi.

   ⚠ IKI ISTISNA -- "olu" listesindeydi ama BILEREK BIRAKILDI (base.css):
     . bz-col-1 / bz-col-2 : YASAYAN izgara olceginin (1-2-3-4-6-8-12) parcasi.
       3/4/6/8/12 fiilen kullaniliyor; olcekten tek basamak sokmek, firmanin
       "varyantlar kutuphane olarak kalsin" kararina aykiri olurdu.
       (bz-col-1 once yanlislikla silinmisti: `bz-col-12`nin ALT DIZESI oldugu
        icin once "kullaniliyor" sanilmis, sonra sinir duyarli olcumde "olu"
        cikmisti. Ikisi de yanlisti; kural geri kondu.)
     . bz-divider : tasarim sisteminin KENDI BELGESI onu bolum ayraci olarak
       gosteriyor (bu dosyada "Bolumler arasi ayrac .bz-divider"). Silmek
       belgeyi yanlislardi; yerine ne konacagi ayri bir tasarim karari.
   --------------------------------------------------------------------------- */

/* ═════════════════════════════════════════════════════════════════════════════
   13 · MODÜL YÜZEY PALETİ — kart tonu ve renkli ikon karosu
   Kaynak: tasarım belgesi "Bizz Üye · Tasarım Belgesi" (ds-modul-paleti.css).
   Token'lar tokens.css'te; burada yalnız onları kullanan sınıflar var.
   ═════════════════════════════════════════════════════════════════════════════ */

/* 13.1 .bz-mod ─ kart/şerit/panel yüzeyine ton verir.
   bz-card ile birlikte kullanılır: <div class="bz-card bz-mod bz-mod--sand">.
   Yalnız zemin ve kenarlık değişir; tipografi, boşluk ve gölge bileşenden gelir. */
.bz-mod { background: var(--mod-bg, var(--surface)); border-color: var(--mod-bd, var(--border)); }
.bz-mod--sage  { --mod-bg: var(--mod-sage-bg);  --mod-bd: var(--mod-sage-bd);  --mod-ink: var(--mod-sage-ink); }
.bz-mod--sand  { --mod-bg: var(--mod-sand-bg);  --mod-bd: var(--mod-sand-bd);  --mod-ink: var(--mod-sand-ink); }
.bz-mod--sky   { --mod-bg: var(--mod-sky-bg);   --mod-bd: var(--mod-sky-bd);   --mod-ink: var(--mod-sky-ink); }
.bz-mod--rose  { --mod-bg: var(--mod-rose-bg);  --mod-bd: var(--mod-rose-bd);  --mod-ink: var(--mod-rose-ink); }
.bz-mod--mint  { --mod-bg: var(--mod-mint-bg);  --mod-bd: var(--mod-mint-bd);  --mod-ink: var(--mod-mint-ink); }
.bz-mod--lilac { --mod-bg: var(--mod-lilac-bg); --mod-bd: var(--mod-lilac-bd); --mod-ink: var(--mod-lilac-ink); }
.bz-mod--clay  { --mod-bg: var(--mod-clay-bg);  --mod-bd: var(--mod-clay-bd);  --mod-ink: var(--mod-clay-ink); }
.bz-mod--stone { --mod-bg: var(--mod-stone-bg); --mod-bd: var(--mod-stone-bd); --mod-ink: var(--mod-stone-ink); }

/* Tonlu kartın İÇİNDEKİ ayraçlar tonla uyumlanır: kartın kendi --border
   ayracı pastel zeminde fazla sert kalıyordu. */
.bz-mod .bz-card__head { border-bottom-color: var(--mod-bd); }
.bz-mod .bz-listrow + .bz-listrow { border-top-color: var(--mod-bd); }
.bz-mod .bz-divider { background: var(--mod-bd); }

/* ⚠ RADYUS DENGESİ (firma notu, 8 Eylül): tonlu kartın köşesi 14px yuvarlak,
   içindeki beyaz satırlar ise KESKİN köşeliydi — satır kartın yuvarlak
   köşesine dayandığında sivri bir dil gibi taşıyordu. Satırlar zaten
   aralarında ton boşluğu bırakan ayrı beyaz bloklar; kabın yuvarlaklığından
   bir basamak küçük bir yarıçap alınca kartın içine oturuyorlar. */
.bz-mod .bz-listrow { border-radius: var(--radius-md); }
/* Tonlu kart içindeki iç kutu BEYAZ kalır — okuma alanı korunur. */
.bz-mod__inner { background: var(--surface); border: 1px solid var(--mod-bd, var(--border)); border-radius: var(--radius-md); }

/* 13.2 .bz-modicon ─ büyük renkli ikon karosu (48 / 64 / 88).
   Kutu tonun yüzeyi, ikon tonun mürekkebi.
   ⚠ Karo ZEMİNİ kartın tonuyla aynı OLAMAZ — aksi hâlde yalnız 1px kenarlık
   görünür ve karo boş bir çerçeveye döner (tasarım tarafında ölçüldü: kart ve
   karo ikisi de aynı rgb'ye düşüyordu). Tonlu kart üstünde karo --surface'e
   çıkar; renk mürekkepten okunur. Beyaz panel üstünde ise --fill ile tersine
   çalışır: zemin ton olur. */
.bz-modicon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--surface); color: var(--mod-ink, var(--icon-decorative));
  border: 1px solid var(--mod-bd, var(--border));
  transition: transform var(--dur-2) var(--ease-out);
}
/* ⚠ Boyutu KARO sahiplenir ve soy seçicisi kullanılır, çocuk (>) değil:
   ikon bir sarmalayıcı içinden basılabiliyor ve o durumda > kuralı sessizce
   düşer (tasarım tarafında ölçüldü: 44px kuralı hiç uygulanmıyordu). */
.bz-modicon .bz-icon { width: 24px; height: 24px; }
.bz-modicon--lg { width: 64px; height: 64px; border-radius: var(--radius-lg); }
.bz-modicon--lg .bz-icon { width: 32px; height: 32px; }
.bz-modicon--xl { width: 88px; height: 88px; border-radius: var(--radius-lg); }
.bz-modicon--xl .bz-icon { width: 44px; height: 44px; }
.bz-modicon--fill { background: var(--mod-bg, var(--surface-2)); }

/* Hareket bütçesi: yalnız transform. Karo 2px yükselir, ikon %6 büyür.
   GIF yok — kurum ağı izole. */
.bz-modicon .bz-icon { transition: transform var(--dur-2) var(--ease-out); }
a:hover .bz-modicon,
button:hover .bz-modicon,
.bz-card:hover .bz-modicon { transform: translateY(-2px); }
a:hover .bz-modicon .bz-icon,
button:hover .bz-modicon .bz-icon,
.bz-card:hover .bz-modicon .bz-icon { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .bz-modicon, .bz-modicon .bz-icon { transition: none; }
  a:hover .bz-modicon, button:hover .bz-modicon, .bz-card:hover .bz-modicon,
  a:hover .bz-modicon .bz-icon, button:hover .bz-modicon .bz-icon,
  .bz-card:hover .bz-modicon .bz-icon { transform: none; }
}

/* 13.3 .bz-modstrip ─ iç sayfa üst şeridi.
   İç sayfalarda tam kart tonlamak ağır kaçıyor; kategori kimliğini 3px'lik
   ince bir üst şeritle vermek yeterli. Yalnız dekor. */
.bz-modstrip { border-top: 3px solid var(--mod-bd, var(--border)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* 13.4 .bz-modwash ─ büyük yüzey için çok düşük yoğunluklu zemin.
   Kart beyaz kaldığı için kartlar zeminden ayrışır, kontrast düşmez. */
.bz-modwash { background: color-mix(in srgb, var(--mod-bg, var(--surface)) 55%, var(--bg)); }

/* 13.5 .bz-modpage ─ ANA SAYFA SICAK ZEMİNİ.
   Firma notu: "ana sayfa modülleri ya da arka planı renklensin, daha şık ve
   sıcak". Düz --bg yerine iki sıcak tonun (kum + kil) çok düşük yoğunluklu
   dikey geçişi. Gradyan token'lardan türer, HEX yok; ANA SAYFA DIŞINDA
   kullanılmaz. */
.bz-modpage {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mod-sand-bg) 60%, var(--bg)) 0%,
    color-mix(in srgb, var(--mod-clay-bg) 35%, var(--bg)) 46%,
    var(--bg) 100%);
}

/* 13.6 .bz-avatargroup ─ üst üste binen avatar yığını + "+N" balonu.
   ⚠ Bu aile bir tur önce "hiçbir görünümde kullanılmıyor" diye ÖLÜ CSS olarak
   budanmıştı (bkz. dosya sonundaki temizlik notu). Tasarım belgesi konuşma
   bilgi panelinde katılımcı yığınını istiyor — yani artık kullanılıyor ve
   geri geliyor. Budamanın gerekçesi "kullanılmıyor"du, "istenmiyor" değil.
   Aynı temizlikte düşen bz-skeleton / bz-fab / bz-bars / bz-reactions GERİ
   GELMEDİ: bu turda da kullanan bir ekran yok. */
.bz-avatargroup { display: inline-flex; align-items: center; }
.bz-avatargroup > .bz-avatar { border: 2px solid var(--surface); }
.bz-avatargroup > .bz-avatar + .bz-avatar,
.bz-avatargroup > .bz-avatargroup__more { margin-left: -10px; }
.bz-avatargroup__more {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: 2px solid var(--surface);
  background: var(--border); color: var(--text);
  font-family: var(--font-sans); font-weight: var(--fw-strong); font-size: 10px;
}