/*
 * deck bileşen dili — /_deck/bilesen.css (hq/contracts/panel-gorunum.md §6, hq#69). Görünüm «Kontrol Odası»
 * (hq decisions/2026-10-15-ops-gorunum-kontrol-odasi.md): ince çizgi, küçük yarıçap, mono sayılar, tek vurgu.
 * Sınıf ADLARI ve anlamları sözleşmede; görünümleri burada. TOKEN DEĞERİ İÇERMEZ: renk ve ölçü yalnız
 * var(--deck-*) ile — tek değer kaynağı tema.css. Yapısal sabitler dışında birimli sayı yok (1–3 px çizgi,
 * hap için 999px, 100% doldurma); türetilmiş ölçüler calc(token × katsayı) — bilesen.test.ts denetler.
 *
 * Yükleme: fontlar.css → tema.css → BU DOSYA → panel (düz <link>; §3: satır içi betik yok, CSP gevşetilmez).
 * Bu dosya yüklenmezse panel kendi asgari stiliyle işlevsel ve okunur kalır (§6.3 muhtaçlık yasağı).
 * Davranış sınıfa BAĞLANMAZ — JS kancası data-* ile (§6.3). Çekmecenin açılıp kapanması panelindir.
 * SIZINTI SIFIRLAMA: bileşenler deck'in yazmadığı görünüm özelliklerini (box-shadow, text-transform,
 * letter-spacing) açıkça sıfırlar — panelin yedek stili dk- bileşenine sızmasın (vaka: starter-social#54).
 *
 * Kontrast (bilesen.test.ts ölçer, iki şemada): birincil düğme vurgu-metin/vurgu · tehlike zemin/hata · ikincil
 * metin/yüzey-2 · rozet durum rengi / %10 karışık yüzey ≥ 4.5 · uyarı metni / %8 karışık yüzey ≥ 4.5 ·
 * girdi kenarı (--deck-kenar-2) zemine ve yüzeye ≥ 3 (WCAG 1.4.11) · odak halkası ≥ 3.
 */

:root {
  --deck-bilesen-v: 2;
}

/* ── Odak — ZORUNLU (§6.5 karar 1): bütün etkileşimli bileşenlerde --deck-odak halkası. */
:where(.dk-dugme, .dk-girdi, .dk-secim, .dk-metin-alani, .dk-sekme, .dk-cip, .dk-sayfalama a, .dk-tablo a, .dk-kart a, .dk-uyari a):focus-visible {
  outline: 2px solid var(--deck-odak);
  outline-offset: 2px;
}

/* ── Sayı ve bölüm etiketi (ek, 2026-10-15) */
.dk-sayi {
  font-family: var(--deck-yazi-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
}
.dk-ust-etiket {
  font-family: var(--deck-yazi-dar);
  font-size: var(--deck-olcek-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: calc(var(--deck-olcek-xs) * 0.1);
  text-transform: uppercase;
  color: var(--deck-metin-2);
}

/* ── Düğme */
.dk-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--deck-bosluk-2);
  padding: calc(var(--deck-bosluk-1) * 1.75) calc(var(--deck-bosluk-1) * 3);
  font: inherit;
  font-size: var(--deck-olcek-s);
  font-weight: 600;
  line-height: 1.25;
  color: var(--deck-metin);
  background: var(--deck-yuzey-2);
  border: 1px solid var(--deck-kenar);
  border-radius: calc(var(--deck-yaricap) - 1px);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, transform 60ms ease;
}
.dk-dugme:hover { border-color: var(--deck-kenar-2); }
.dk-dugme:active { transform: translateY(1px); }
.dk-dugme:disabled, .dk-dugme[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.dk-dugme--birincil {
  color: var(--deck-vurgu-metin, var(--deck-zemin));
  background: var(--deck-vurgu);
  border-color: var(--deck-vurgu);
}
/* Fareyle üstüne gelince zemin rengi DEĞİŞMEZ (kontrast korunur) — yalnız yumuşak bir hale. */
.dk-dugme--birincil:hover { border-color: var(--deck-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deck-vurgu) 26%, transparent); }

.dk-dugme--ikincil { color: var(--deck-metin); background: var(--deck-yuzey-2); border-color: var(--deck-kenar); }

.dk-dugme--tehlike { color: var(--deck-zemin); background: var(--deck-hata); border-color: var(--deck-hata); }
.dk-dugme--tehlike:hover { border-color: var(--deck-hata); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deck-hata) 26%, transparent); }

.dk-dugme--kucuk { padding: var(--deck-bosluk-1) calc(var(--deck-bosluk-1) * 2.5); font-size: var(--deck-olcek-xs); }

/* ── Form */
.dk-etiket {
  display: block;
  margin: var(--deck-bosluk-3) 0 calc(var(--deck-bosluk-1) * 1.5);
  font-size: var(--deck-olcek-s);
  font-weight: 600;
  color: var(--deck-metin);
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}
.dk-girdi, .dk-secim, .dk-metin-alani {
  display: block;
  width: 100%;
  padding: calc(var(--deck-bosluk-1) * 2) calc(var(--deck-bosluk-1) * 3);
  font: inherit;
  font-size: var(--deck-olcek-m);
  line-height: 1.4;
  color: var(--deck-metin);
  background: var(--deck-zemin);
  /* Kenar 3:1 (WCAG 1.4.11): ayırıcı --deck-kenar girdi sınırı için yetmez → --deck-kenar-2. */
  border: 1px solid var(--deck-kenar-2);
  border-radius: calc(var(--deck-yaricap) - 1px);
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dk-girdi:hover, .dk-secim:hover, .dk-metin-alani:hover { border-color: var(--deck-metin-2); }
.dk-girdi:focus, .dk-secim:focus, .dk-metin-alani:focus { border-color: var(--deck-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deck-vurgu) 22%, transparent); }
.dk-girdi::placeholder, .dk-metin-alani::placeholder { color: var(--deck-metin-3); }
.dk-girdi[aria-invalid="true"], .dk-secim[aria-invalid="true"], .dk-metin-alani[aria-invalid="true"] { border-color: var(--deck-hata); }
.dk-metin-alani { min-height: calc(var(--deck-bosluk-4) * 4); resize: vertical; }
.dk-hata { margin: var(--deck-bosluk-1) 0 0; font-size: var(--deck-olcek-s); color: var(--deck-hata); }

/* ── Tablo: başlık dar büyük harf; sayısal hücre panelin `dk-sayi`sıyla hizalanır */
.dk-tablo { width: 100%; border-collapse: collapse; font-size: var(--deck-olcek-s); }
.dk-tablo th, .dk-tablo td {
  padding: calc(var(--deck-bosluk-1) * 2.5) var(--deck-bosluk-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--deck-kenar);
}
.dk-tablo th {
  font-family: var(--deck-yazi-dar);
  font-size: var(--deck-olcek-xs);
  font-weight: 600;
  color: var(--deck-metin-3);
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  background: none;
  white-space: nowrap;
}
.dk-tablo thead th { background: var(--deck-yuzey-2); }
.dk-tablo tbody tr:last-child td { border-bottom: 0; }
.dk-tablo tbody tr:hover { background: var(--deck-yuzey-2); }
.dk-tablo tbody tr:hover > :first-child { box-shadow: inset 2px 0 0 var(--deck-vurgu); }
.dk-tablo--yogun th, .dk-tablo--yogun td { padding: calc(var(--deck-bosluk-1) * 1.5) calc(var(--deck-bosluk-1) * 3); }

/* ── Kart / yüzey: ince çizgi, küçük yarıçap, gölgesiz (gölge yalnız açılan katmanlarda) */
.dk-kart {
  padding: var(--deck-bosluk-3);
  background: var(--deck-yuzey);
  border: 1px solid var(--deck-kenar);
  border-radius: var(--deck-yaricap);
  box-shadow: none;
}
.dk-kart--duz { padding: 0; overflow: hidden; }
.dk-kart-baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--deck-bosluk-2);
  margin: 0;
  padding: calc(var(--deck-bosluk-1) * 2.75) var(--deck-bosluk-3);
  border-bottom: 1px solid var(--deck-kenar);
  font-size: var(--deck-olcek-m);
  font-weight: 600;
  color: var(--deck-metin);
}
.dk-kart-baslik > :where(h2, h3) { margin: 0; font-size: var(--deck-olcek-m); font-weight: 600; }
.dk-kart-baslik a { font-size: var(--deck-olcek-s); font-weight: 500; color: var(--deck-vurgu); text-decoration: none; }
.dk-kart-baslik a:hover { text-decoration: underline; }

/* ── Rozet / durum (varsayılan = nötr) */
.dk-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--deck-bosluk-1);
  padding: 0 calc(var(--deck-bosluk-1) * 1.75);
  font-size: var(--deck-olcek-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  color: var(--deck-metin-2);
  background: color-mix(in srgb, var(--deck-metin-2) 10%, var(--deck-yuzey));
  border: 1px solid color-mix(in srgb, var(--deck-metin-2) 28%, var(--deck-yuzey));
}
.dk-rozet--notr { color: var(--deck-metin-2); background: color-mix(in srgb, var(--deck-metin-2) 10%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-metin-2) 28%, var(--deck-yuzey)); }
.dk-rozet--basari { color: var(--deck-basari); background: color-mix(in srgb, var(--deck-basari) 10%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-basari) 30%, var(--deck-yuzey)); }
.dk-rozet--uyari { color: var(--deck-uyari); background: color-mix(in srgb, var(--deck-uyari) 10%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-uyari) 30%, var(--deck-yuzey)); }
.dk-rozet--hata { color: var(--deck-hata); background: color-mix(in srgb, var(--deck-hata) 10%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-hata) 30%, var(--deck-yuzey)); }
.dk-rozet--vurgu { color: var(--deck-vurgu); background: color-mix(in srgb, var(--deck-vurgu) 10%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-vurgu) 30%, var(--deck-yuzey)); }
.dk-rozet--bilgi { color: var(--deck-bilgi); background: color-mix(in srgb, var(--deck-bilgi) 10%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-bilgi) 30%, var(--deck-yuzey)); }
/* Kod etiketi: köşeli, mono, büyük harf (TELİF, PRO …) — renk varyantıyla birlikte kullanılır */
.dk-rozet--kare { border-radius: calc(var(--deck-yaricap) / 2); font-family: var(--deck-yazi-mono); font-weight: 600; text-transform: uppercase; }

/* ── Durum ışığı: renk tek başına anlam taşımaz — yanında metin olur */
.dk-isik {
  display: inline-block;
  flex: none;
  width: calc(var(--deck-bosluk-1) * 1.5);
  height: calc(var(--deck-bosluk-1) * 1.5);
  border-radius: 999px;
  background: var(--deck-metin-3);
  vertical-align: middle;
}
.dk-isik--basari { background: var(--deck-basari); }
.dk-isik--uyari { background: var(--deck-uyari); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deck-uyari) 22%, transparent); }
.dk-isik--hata { background: var(--deck-hata); box-shadow: 0 0 0 3px color-mix(in srgb, var(--deck-hata) 22%, transparent); }
.dk-isik--notr { background: transparent; box-shadow: inset 0 0 0 1px var(--deck-metin-3); }

/* ── Özet şeridi: sayaç hücreleri ince çizgiyle bölünür (kart yığını değil) */
.dk-ozet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--deck-bosluk-4) * 7.5), 100%), 1fr));
  background: var(--deck-yuzey);
  border: 1px solid var(--deck-kenar);
  border-radius: var(--deck-yaricap);
  overflow: hidden;
}
.dk-sayac {
  display: flex;
  flex-direction: column;
  gap: calc(var(--deck-bosluk-1) * 2.5);
  min-width: 0;
  padding: calc(var(--deck-bosluk-1) * 3.75) var(--deck-bosluk-3) calc(var(--deck-bosluk-1) * 3.5);
  border-right: 1px solid var(--deck-kenar);
  margin-right: -1px;
}
.dk-sayac-deger {
  font-family: var(--deck-yazi-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--deck-olcek-xxl);
  font-weight: 500;
  line-height: 1;
  color: var(--deck-metin);
  letter-spacing: normal;
}
.dk-sayac-alt { font-size: var(--deck-olcek-xs); color: var(--deck-metin-3); }
.dk-sayac--dikkat { background: color-mix(in srgb, var(--deck-uyari) 7%, var(--deck-yuzey)); }
.dk-sayac--dikkat .dk-sayac-deger, .dk-sayac--dikkat .dk-ust-etiket { color: var(--deck-uyari); }

/* ── Değişim (▲/▼ rozeti) */
.dk-degisim {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--deck-bosluk-1) / 2);
  padding: 0 calc(var(--deck-bosluk-1) * 1.5);
  font-family: var(--deck-yazi-mono);
  font-size: var(--deck-olcek-xs);
  line-height: 1.6;
  border-radius: calc(var(--deck-yaricap) / 2);
  color: var(--deck-metin-2);
  background: color-mix(in srgb, var(--deck-metin-2) 10%, var(--deck-yuzey));
  white-space: nowrap;
}
.dk-degisim--artis { color: var(--deck-basari); background: color-mix(in srgb, var(--deck-basari) 12%, var(--deck-yuzey)); }
.dk-degisim--azalis { color: var(--deck-hata); background: color-mix(in srgb, var(--deck-hata) 12%, var(--deck-yuzey)); }

/* ── Çip (süzgeç) */
.dk-cip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--deck-bosluk-1) * 1.75);
  padding: calc(var(--deck-bosluk-1) * 1.25) calc(var(--deck-bosluk-1) * 2.5);
  font: inherit;
  font-size: var(--deck-olcek-s);
  color: var(--deck-metin-2);
  background: transparent;
  border: 1px solid var(--deck-kenar);
  border-radius: calc(var(--deck-yaricap) - 2px);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dk-cip:hover { color: var(--deck-metin); border-color: var(--deck-kenar-2); }
.dk-cip .dk-sayi { font-size: var(--deck-olcek-xs); color: var(--deck-metin-3); }
.dk-cip--aktif, .dk-cip--aktif:hover { color: var(--deck-vurgu); font-weight: 600; background: color-mix(in srgb, var(--deck-vurgu) 12%, var(--deck-yuzey)); border-color: var(--deck-vurgu); }
.dk-cip--aktif .dk-sayi { color: var(--deck-vurgu); }

/* ── Sayfalama */
.dk-sayfalama { display: flex; flex-wrap: wrap; align-items: center; gap: var(--deck-bosluk-1); }
.dk-sayfalama a, .dk-sayfalama span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--deck-bosluk-1) * 7);
  height: calc(var(--deck-bosluk-1) * 7);
  padding: 0 var(--deck-bosluk-2);
  font-family: var(--deck-yazi-mono);
  font-size: var(--deck-olcek-xs);
  color: var(--deck-metin-2);
  border: 1px solid var(--deck-kenar);
  border-radius: calc(var(--deck-yaricap) - 2px);
  text-decoration: none;
  box-sizing: border-box;
}
.dk-sayfalama a:hover { color: var(--deck-metin); border-color: var(--deck-kenar-2); }
.dk-sayfalama [aria-current="page"] { color: var(--deck-zemin); background: var(--deck-metin); border-color: var(--deck-metin); font-weight: 600; }

/* ── Sekmeler / gezinme */
.dk-sekmeler {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Alt çizgi kenarlık değil iç gölge: etkin sekmenin 2px çizgisi üstüne biner, taşma/kaydırma çubuğu doğmaz. */
  box-shadow: inset 0 -1px 0 var(--deck-kenar);
}
.dk-sekme {
  display: inline-flex;
  align-items: center;
  gap: var(--deck-bosluk-2);
  padding: calc(var(--deck-bosluk-1) * 2.25) calc(var(--deck-bosluk-1) * 3.5);
  font: inherit;
  font-size: var(--deck-olcek-m);
  font-weight: 500;
  color: var(--deck-metin-2);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.dk-sekme:hover { color: var(--deck-metin); border-bottom-color: var(--deck-kenar-2); }
.dk-sekme--aktif, .dk-sekme--aktif:hover { color: var(--deck-metin); font-weight: 600; border-bottom-color: var(--deck-vurgu); }

/* Dikey ray (sol menü): gösterge alt çizgi değil SOL ÇUBUK; satırlar sıkı; uzun adlar SARAR (aynı platformun
   iki hesabı "threads @yuefo" / "threads @yuefolabs" kırpılmadan ayırt edilsin). Yatay sekmeler nowrap kalır. */
.dk-sekmeler--dikey {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--deck-bosluk-1) / 2);
  overflow: visible;
  box-shadow: none;
}
.dk-sekmeler--dikey .dk-sekme {
  justify-content: flex-start;
  gap: calc(var(--deck-bosluk-1) * 2.5);
  padding: calc(var(--deck-bosluk-1) * 1.75) var(--deck-bosluk-2);
  font-size: var(--deck-olcek-s);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 0;
  border-left: 2px solid transparent;
  border-radius: 0 calc(var(--deck-yaricap) - 2px) calc(var(--deck-yaricap) - 2px) 0;
}
.dk-sekmeler--dikey .dk-sekme:hover { border-bottom-color: transparent; background: color-mix(in srgb, var(--deck-yuzey-2) 60%, transparent); }
.dk-sekmeler--dikey .dk-sekme--aktif, .dk-sekmeler--dikey .dk-sekme--aktif:hover {
  color: var(--deck-metin);
  font-weight: 600;
  background: var(--deck-yuzey-2);
  border-left-color: var(--deck-vurgu);
}

/* ── Boş durum */
.dk-bos {
  padding: calc(var(--deck-bosluk-4) * 1.5) var(--deck-bosluk-4);
  text-align: center;
  font-size: var(--deck-olcek-s);
  color: var(--deck-metin-2);
  border: 1px dashed var(--deck-kenar);
  border-radius: var(--deck-yaricap);
}

/* ── Uyarı / bildirim (varsayılan = bilgi, vurgu tonunda). Metin ana metin rengindedir; durum kenardan okunur. */
.dk-uyari {
  margin: 0 0 var(--deck-bosluk-3);
  padding: calc(var(--deck-bosluk-1) * 2.5) var(--deck-bosluk-3);
  font-size: var(--deck-olcek-s);
  color: var(--deck-metin);
  background: color-mix(in srgb, var(--deck-vurgu) 8%, var(--deck-yuzey));
  border: 1px solid color-mix(in srgb, var(--deck-vurgu) 30%, var(--deck-yuzey));
  border-left: 3px solid var(--deck-vurgu);
  border-radius: calc(var(--deck-yaricap) - 2px);
  box-shadow: none;
}
.dk-uyari--basari { background: color-mix(in srgb, var(--deck-basari) 8%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-basari) 30%, var(--deck-yuzey)); border-left-color: var(--deck-basari); }
.dk-uyari--uyari { background: color-mix(in srgb, var(--deck-uyari) 8%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-uyari) 30%, var(--deck-yuzey)); border-left-color: var(--deck-uyari); }
.dk-uyari--hata { background: color-mix(in srgb, var(--deck-hata) 8%, var(--deck-yuzey)); border-color: color-mix(in srgb, var(--deck-hata) 30%, var(--deck-yuzey)); border-left-color: var(--deck-hata); }

/* ── Sayfa başlığı */
.dk-baslik {
  margin: 0 0 var(--deck-bosluk-3);
  font-size: var(--deck-olcek-xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--deck-metin);
  text-transform: none;
  letter-spacing: normal;
}

/* ── Çekmece: sağdan açılan işlem paneli. Açılıp kapanma (hidden, :target, data-*) panelindir. */
.dk-cekmece-ortu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--deck-zemin) 72%, transparent);
}
.dk-cekmece {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--deck-bosluk-4) * 18));
  background: var(--deck-yuzey);
  border-left: 1px solid var(--deck-kenar-2);
  box-shadow: calc(var(--deck-bosluk-4) * -1) 0 calc(var(--deck-bosluk-4) * 2) color-mix(in srgb, var(--deck-zemin) 55%, transparent);
  overflow-y: auto;
}
.dk-cekmece > header, .dk-cekmece > footer { flex: none; padding: var(--deck-bosluk-3) calc(var(--deck-bosluk-1) * 5); }
.dk-cekmece > header { border-bottom: 1px solid var(--deck-kenar); }
.dk-cekmece > footer { display: flex; justify-content: flex-end; gap: var(--deck-bosluk-2); border-top: 1px solid var(--deck-kenar); background: var(--deck-yuzey-2); }

/* ── Durum şeridi: sayfa altı, mono, kısık */
.dk-durum-seridi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--deck-bosluk-1) * 1.5) calc(var(--deck-bosluk-1) * 4.5);
  padding: calc(var(--deck-bosluk-1) * 1.75) calc(var(--deck-bosluk-1) * 4.5);
  font-family: var(--deck-yazi-mono);
  font-size: var(--deck-olcek-xs);
  color: var(--deck-metin-3);
  background: var(--deck-zemin);
  border-top: 1px solid var(--deck-kenar);
}

/* ── Grafik: sunucu SVG'si; renk ve kalınlık sınıftan (tema değişince grafik de değişir) */
.dk-grafik { display: block; width: 100%; overflow: visible; }
.dk-grafik-izgara { stroke: var(--deck-kenar); stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.dk-grafik-cizgi { fill: none; stroke: var(--deck-vurgu); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dk-grafik-alan { fill: var(--deck-vurgu); fill-opacity: 0.08; stroke: none; }
.dk-grafik-cubuk { fill: var(--deck-kenar-2); fill-opacity: 0.55; }
.dk-grafik-cubuk--vurgu { fill: var(--deck-vurgu); fill-opacity: 0.9; }
.dk-grafik-imlec { stroke: var(--deck-metin-3); stroke-width: 1px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dk-grafik text { fill: var(--deck-metin-3); font-family: var(--deck-yazi-mono); font-size: var(--deck-olcek-xs); }
.dk-kivilcim { display: block; flex: none; overflow: visible; }
.dk-kivilcim .dk-grafik-cizgi { stroke-width: 1.5; }
.dk-kivilcim .dk-grafik-alan { fill-opacity: 0.1; }

/* ── Oran çubuğu: dağılım (paket, kaynak) ya da ilerleme. İki biçim: HTML (parça genişliği panelin CSS'iyle) ya da
   SVG (CSP'li panelde satır içi genişlik verilemez → sunucu <svg class="dk-oran"><rect class="dk-oran-parca…">). */
.dk-oran {
  display: flex;
  gap: 2px;
  width: 100%;
  height: calc(var(--deck-bosluk-1) * 1.5);
  overflow: hidden;
  border-radius: 1px;
  background: var(--deck-yuzey-2);
}
.dk-oran-parca { min-width: 1px; background: var(--deck-kenar-2); fill: var(--deck-kenar-2); }
.dk-oran-parca--vurgu { background: var(--deck-vurgu); fill: var(--deck-vurgu); }
.dk-oran-parca--notr { background: var(--deck-metin-2); fill: var(--deck-metin-2); }
.dk-oran-parca--zayif { background: color-mix(in srgb, var(--deck-vurgu) 45%, var(--deck-yuzey)); fill: color-mix(in srgb, var(--deck-vurgu) 45%, var(--deck-yuzey)); }