/* ═══════════════════════════════════════════════════════════════
   base.css · reset, tipografi temeli, ızgara, yardımcı sınıflar
   TEK HEX YOK. Yalnız var(--token).
   Yardımcı sınıflar da bz- önekli; Bootstrap 4 ile çakışmaz.
   ═══════════════════════════════════════════════════════════════ */

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

/* hidden özniteliği HER ZAMAN gizler.
   Tarayıcının kendi [hidden]{display:none} kuralı, bileşenlerin display
   tanımından (ör. .bz-empty{display:flex}) DAHA ZAYIFTIR ve eziliyordu:
   "hidden" konmuş bir boş durum kutusu ekranda görünmeye devam ediyordu —
   dolu bir listenin altında "henüz kayıt yok" yazıyordu.
   Bu yüzden ekran yazarları 24 ayrı yerde kendi [hidden] yamasını yazmış.
   Kural buraya alındı; yamalar artık gereksiz. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: none; padding: 0; cursor: pointer; }

/* ── Başlıklar ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text); text-wrap: balance; }

h1 { font-weight: var(--fw-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-weight: var(--fw-strong);  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-weight: var(--fw-strong);  font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-weight: var(--fw-strong);  font-size: var(--fs-h5); line-height: var(--lh-h5); }
h6 { font-weight: var(--fw-strong);  font-size: var(--fs-h6); line-height: var(--lh-h6); }

p { margin: 0; max-width: var(--measure-body); text-wrap: pretty; }

a { color: var(--brand-text); text-decoration: none; }
a:hover { color: var(--brand-text-hover); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* BIZZ-83 (a11y): rengi de burada veriliyor. Panel yalın Bootstrap yüklemeye
   başlayınca (BIZZ-160) `code` onun varsayılan pembesine (#e83e8c) düşüyordu:
   beyaz üstünde 3,81 — WCAG AA'nın istediği 4,5'in ALTINDA. Ölçüm: MemberImport'ta
   8, LdapSync'te 2 düğüm. Token'lı renk hem AA'yı geçiyor hem temayla değişiyor. */
code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); }
code { color: var(--brand-text); }

::selection { background: var(--brand-100); color: var(--ink-1000); }

/* ── Tipografi yardımcıları ────────────────────────────────── */
.bz-display   { font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.bz-body-lg   { font-weight: var(--fw-body); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.bz-body      { font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); }
.bz-small     { font-weight: var(--fw-body); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.bz-label     { font-weight: var(--fw-label); font-size: var(--fs-label); line-height: var(--lh-label);
                letter-spacing: var(--ls-label); text-transform: uppercase; }
.bz-muted     { color: var(--text-muted); }
/* Anlam taşıyan metin/ikon renkleri. Bracket'in tx-success/tx-danger'ının
   token'lı karşılığı — ızgara hücrelerini JS ürettiği için oradan da kullanılır. */
.bz-text-success { color: var(--success-text); }
.bz-text-danger  { color: var(--danger-text); }
.bz-strong    { font-weight: var(--fw-strong); }
.bz-measure   { max-width: var(--measure-body); }
.bz-measure-article { max-width: var(--measure-article); }
.bz-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Yalnız ekran okuyucu için */
.bz-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Klavye ile odaklanınca görünür — "içeriğe atla" bağlantısı */
/* Odaklanmadan önce EKRANIN TAMAMEN DIŞINDA durmalı: -64px yetmiyordu,
   gölgesi sayfanın üstünde gri bir leke olarak sızıyordu (her sayfada). */
.bz-skip-link {
  position: absolute; left: var(--space-4); top: -200px;
  z-index: 100; background: var(--surface); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); transition: top var(--dur-2) var(--ease-out);
}
.bz-skip-link:focus-visible { top: var(--space-4); outline: none; box-shadow: var(--focus-ring), var(--shadow-lg); }

/* ── Izgara · 12 kolon ─────────────────────────────────────────
   NOT (BIZZ-97 · Faz 5 ile güncellendi): burada eskiden "Razor sayfa iskeleti
   Bootstrap .row/.col-* ile kurulur" yazıyordu. YÖNETİM PANELİ için bu artık
   doğru değil — panelin görünümlerinde Bootstrap ızgarası kalmadı, sayfa
   iskeleti de bu ızgarayla (.bz-grid/.bz-col-*) ya da .bz-grid-auto/.bz-stack/
   .bz-row ile kuruluyor. Üye tarafının eski Metronic ekranlarında Bootstrap
   ızgarası hâlâ var; orası ayrı bir iş kolu. */
.bz-container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--space-4);
}
/* GENİŞ KAP — pano, liste ve küme ekranları için. Bu ekranlar TARANIR: kart
   ızgarası genişledikçe satır başına daha çok kart sığar, yani genişlik işe yarar.
   Okuma ekranları (haber/duyuru/ilan detayı) bu sınıfı ALMAZ — orada uzun satır
   okumayı zorlaştırır. */
.bz-container--wide { max-width: var(--container-wide); }
.bz-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}
/* Otomatik akan blok ızgarası — modül kartları için varsayılan */
.bz-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--bz-min, 240px), 100%), 1fr));
  gap: var(--space-4);
}
.bz-grid-auto--sm { --bz-min: 160px; }
.bz-grid-auto--xs { --bz-min: 96px; gap: var(--space-2); }
.bz-grid-auto--lg { --bz-min: 300px; }

.bz-col-1  { grid-column: span 1; }  .bz-col-2  { grid-column: span 2; }
.bz-col-3  { grid-column: span 3; }  .bz-col-4  { grid-column: span 4; }
.bz-col-6  { grid-column: span 6; }  .bz-col-8  { grid-column: span 8; }
.bz-col-12 { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .bz-col-4 { grid-column: span 6; }
  .bz-col-3 { grid-column: span 6; }
}
@media (max-width: 768px) {
  .bz-col-1, .bz-col-2, .bz-col-3, .bz-col-4,
  .bz-col-6, .bz-col-8 { grid-column: 1 / -1; }
  .bz-container { padding-inline: var(--space-3); }
}

/* ── Yerleşim yardımcıları ─────────────────────────────────── */
.bz-stack { display: flex; flex-direction: column; gap: var(--space-4); }
/* BIZZ-208: --4 ve --7 EKSİKTİ. `.bz-stack` varsayılanı zaten --space-4 olduğu
   için --4 gereksiz sayılmış, --7 ise hiç yazılmamış. Ama `conventions.md`
   "(--1..--8)" diyerek ikisini de VAAT EDİYORDU; tasarım belgeye güvenip
   `--4`ü 61 kez kullandı. Görsel sonuç tesadüfen doğruydu (varsayılanla aynı
   değer), --7 kullanılsaydı sessizce yanlış boşluk verecekti.
   Belge bir şeyi vaat ediyorsa kod onu karşılamalı. */
.bz-stack--1 { gap: var(--space-1); } .bz-stack--2 { gap: var(--space-2); }
.bz-stack--3 { gap: var(--space-3); } .bz-stack--4 { gap: var(--space-4); }
.bz-stack--5 { gap: var(--space-5); } .bz-stack--6 { gap: var(--space-6); }
.bz-stack--7 { gap: var(--space-7); } .bz-stack--8 { gap: var(--space-8); }

/* Madde imi/iç boşluğu olmayan liste. <ul>/<li> anlamsal olarak doğru olduğu
   ama görsel olarak liste istenmediği yerde (davranış kancası bir li'ye bağlı
   olabilir) kullanılır — satır içi style yazmaya gerek kalmasın diye. */
.bz-plainlist { list-style: none; margin: 0; padding: 0; }

.bz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bz-row--tight { gap: var(--space-2); }
.bz-row--nowrap { flex-wrap: nowrap; }
.bz-push { margin-left: auto; }
/* Satırdaki esneyen parça — kalan genişliği alır. min-width:0 şart:
   olmadan uzun içerik (select2, uzun metin) kutuyu taşırır. */
.bz-grow { flex: 1 1 auto; min-width: 0; }

/* Tablolar ve zaman çizelgesi kendi kabında kayar; gövde ASLA kaymaz */
/* Yatay kaydırma kutusu. Kaydırma çubuğu GÖRÜNÜR bırakılır: organizasyon
   şemasında içerik kutudan geniş olmasına rağmen hiçbir gösterge yoktu, kartlar
   kenardan kesiliyor ve kullanıcı kaydırılabildiğini anlamıyordu. Çubuk tek
   dürüst göstergedir; token'lı ve ince. */
.bz-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.bz-scroll-x::-webkit-scrollbar { height: 8px; }
.bz-scroll-x::-webkit-scrollbar-track { background: transparent; }
.bz-scroll-x::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

.bz-divider { height: 1px; background: var(--border); border: none; margin: 0; }

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

/* ── Yazdırma ──────────────────────────────────────────────── */
@media print {
  .bz-sidenav, .bz-topbar, .bz-tabbar, .bz-cmdk { display: none !important; }
  body { background: var(--ink-0); }
}