/* TRDS belge sitesi. Bileşen biçimlerinden ayrıdır, her sınıf 'dok-' ile başlar.
   Görsel dil: açık zemin, bir yazı tipi, hafif kenarlıklar, canlı önizleme.
   Renkler bileşen belirteçlerinden gelir, böylece koyu tema ve yüksek karşıtlık
   burada da çalışır. */

.dok {
  font-family: "Public Sans", var(--trds-yazi-aile-govde);
  font-size: var(--trds-yazi-boyut-16);
  line-height: 1.6;
}
/* Belge düzyazısı. Örnek sahnesindeki bileşen paragraflarına dokunmaz,
   onlar kendi kenar boşluklarını taşır. */
.dok p:not(.dok-ornek__sahne *, .dok-kart__olcek *, .dok-dizin__olcek *) { margin: 0 0 var(--trds-aralik-4); max-width: 68ch; }
/* Örnekler sistemin kendi yazı boyutunda görünür, belge boyutunda değil. */
.dok-ornek__sahne, .dok-kart__olcek, .dok-dizin__olcek {
  font-size: var(--trds-metin-govde);
  line-height: var(--trds-yazi-satir-normal);
}
.dok code {
  font-family: "IBM Plex Mono", var(--trds-yazi-aile-tek);
  font-size: 0.88em;
}
.dok :not(pre) > code {
  padding: 0.08em 0.35em;
  border-radius: var(--trds-kose-1);
  background: var(--trds-renk-notr-yuzey-yumusak);
  border: 1px solid var(--trds-renk-notr-kenar-silik);
}

.dok-kap {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- üst çubuk ---------- */
.dok-ust {
  background: var(--trds-renk-notr-taban-varsayilan);
  color: var(--trds-renk-notr-taban-karsit-varsayilan);
  border-block-end: 4px solid var(--trds-renk-kimlik-serit);
}
.dok-ust__ic {
  display: flex;
  align-items: center;
  gap: var(--trds-aralik-6);
  min-height: 4.25rem;
  padding-block: var(--trds-aralik-2);
}
.dok-marka {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--trds-aralik-3);
  align-items: center;
  color: inherit;
  text-decoration: none;
  margin-inline-end: auto;
}
.dok-marka__isaret {
  grid-row: span 2;
  width: 2.25rem; height: 2.25rem;
  background: #fff;
  border-radius: 50%;
  padding: 0.15rem;
  object-fit: contain;
}
.dok-marka__ad { font-weight: 700; font-size: var(--trds-yazi-boyut-18); line-height: 1.1; letter-spacing: 0.01em; }
.dok-marka__alt { font-size: var(--trds-yazi-boyut-12); opacity: 0.8; line-height: 1.2; }
.dok-ust__menu { display: flex; gap: var(--trds-aralik-1); }
.dok-ust__menu a {
  color: inherit;
  text-decoration: none;
  padding: var(--trds-aralik-2) var(--trds-aralik-3);
  border-radius: var(--trds-kose-2);
  font-weight: 500;
  font-size: var(--trds-yazi-boyut-14);
  border-block-end: 0 !important;
}
.dok-ust__menu a:hover { background: rgb(255 255 255 / 0.12); }
.dok-ust__menu a[aria-current] { background: rgb(255 255 255 / 0.16); }
.dok-ust__erisim .trds-erisim__dugme { font-size: var(--trds-yazi-boyut-14); }
/* Dar ekranda menü, Menü düğmesi ile açılır. Çekirdek 48rem altında gizler.
   Belge sitesi yedi bağlantı taşır, bu yüzden eşik 60rem olur. */
@media (max-width: 60rem) {
  .dok-ust__ic { flex-wrap: wrap; gap: var(--trds-aralik-3); }
  .dok-ust__menu-dugmesi { display: inline-flex; align-items: center; }
  .dok-ust__menu { display: none; flex-basis: 100%; flex-direction: column; gap: 0; order: 10; }
  .trds-baslik-cubugu--acik .dok-ust__menu { display: flex; }
  .dok-ust__menu a { border-radius: 0; padding-block: var(--trds-aralik-3); border-block-end: 1px solid rgb(255 255 255 / 0.12); }
}

/* ---------- gövde ve kenar çubuğu ---------- */
.dok-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--trds-aralik-8);
  padding-block: var(--trds-aralik-7) var(--trds-aralik-11);
}
@media (min-width: 64rem) {
  .dok-govde--kenarli { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--trds-aralik-10); }
}
.dok-icerik { min-width: 0; }
.dok-govde:not(.dok-govde--genis) .dok-icerik { max-width: 52rem; }

.dok-kenar { font-size: var(--trds-yazi-boyut-14); }
@media (min-width: 64rem) {
  .dok-kenar__ic { position: sticky; top: var(--trds-aralik-5); max-height: calc(100vh - 2.5rem); overflow-y: auto; padding-inline-end: var(--trds-aralik-2); }
}
@media (max-width: 63.99rem) {
  .dok-kenar { display: none; }
}
/* Başlıklar bağlantı metniyle aynı hizada durur. Bağlantı kutusu sola
   taşmaz, çünkü kenar çubuğu bir kaydırma kabıdır ve taşanı kırpar. */
.dok-kenar__baslik {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 var(--trds-aralik-4);
  padding: 0 var(--trds-aralik-2) var(--trds-aralik-3);
  border-block-end: 1px solid var(--trds-renk-notr-kenar-silik);
  font-weight: 700; font-size: var(--trds-yazi-boyut-16);
}
.dok-kenar__baslik a { color: inherit; text-decoration: none; }
.dok-kenar__baslik span { color: var(--trds-renk-notr-metin-silik); font-weight: 400; font-size: var(--trds-yazi-boyut-12); }
.dok-kenar__grup { margin: 0 0 var(--trds-aralik-5); }
.dok-kenar__grup-ad {
  margin: 0 0 var(--trds-aralik-1);
  padding-inline: var(--trds-aralik-2);
  font-size: var(--trds-yazi-boyut-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trds-renk-notr-metin-silik);
}
.dok-kenar__liste { list-style: none; margin: 0; padding: 0; }
.dok-kenar__liste a {
  display: flex; align-items: center; gap: var(--trds-aralik-2);
  padding: 0.35rem var(--trds-aralik-2);
  border-radius: var(--trds-kose-2);
  color: var(--trds-renk-notr-metin-varsayilan);
  text-decoration: none;
}
.dok-kenar__liste a:hover { background: var(--trds-renk-notr-yuzey-yumusak); }
.dok-kenar__liste a[aria-current] {
  background: var(--trds-renk-birincil-zemin-yumusak);
  color: var(--trds-renk-birincil-metin-guclu);
  font-weight: 700;
}

/* ---------- başlıklar ---------- */
.dok-h1, .dok-h2, .dok-h3, .dok-h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--trds-renk-notr-metin-varsayilan);
  text-wrap: balance;
}
.dok-h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: 0 0 var(--trds-aralik-4); }
.dok-h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin: var(--trds-aralik-9) 0 var(--trds-aralik-4); padding-block-start: var(--trds-aralik-5); border-block-start: 1px solid var(--trds-renk-notr-kenar-silik); }
.dok-h3 { font-size: var(--trds-yazi-boyut-18); margin: var(--trds-aralik-6) 0 var(--trds-aralik-3); }
.dok-h4 { font-size: var(--trds-yazi-boyut-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--trds-renk-notr-metin-silik); margin: 0 0 var(--trds-aralik-2); }
.dok-giris { font-size: var(--trds-yazi-boyut-18); color: var(--trds-renk-notr-metin-silik); max-width: 62ch; margin-bottom: var(--trds-aralik-6); }
.dok-ust-bilgi { font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-silik); margin: 0 0 var(--trds-aralik-2); }
.dok-baslik-blok { margin-block-end: var(--trds-aralik-6); }
.dok-yol { margin-block: 0 var(--trds-aralik-5); }
.dok-silik { color: var(--trds-renk-notr-metin-silik); }

.dok-liste { padding-inline-start: 1.25rem; max-width: 68ch; margin: 0 0 var(--trds-aralik-5); }
.dok-liste li { margin-block-end: var(--trds-aralik-2); padding-inline-start: 0.25rem; }
.dok-liste li::marker { color: var(--trds-renk-notr-metin-silik); }
.dok-liste--sik li { margin-block-end: var(--trds-aralik-1); font-size: var(--trds-yazi-boyut-14); }

/* ---------- sayfa içi menü ---------- */
.dok-icindekiler {
  display: flex; flex-wrap: wrap; gap: var(--trds-aralik-1) var(--trds-aralik-4);
  margin: 0 0 var(--trds-aralik-6);
  padding: var(--trds-aralik-3) 0;
  border-block: 1px solid var(--trds-renk-notr-kenar-silik);
  font-size: var(--trds-yazi-boyut-14);
}
.dok-icindekiler a { color: var(--trds-renk-birincil-metin-varsayilan); text-decoration: none; }
.dok-icindekiler a:hover { text-decoration: underline; }

/* ---------- durumlar ---------- */
.dok-rozet {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: var(--trds-yazi-boyut-12);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.5;
}
.dok-rozet::before { content: ''; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.dok-rozet--kararli { color: var(--trds-renk-basari-metin-varsayilan); background: var(--trds-renk-basari-zemin-yumusak); }
.dok-rozet--beta { color: var(--trds-renk-birincil-metin-varsayilan); background: var(--trds-renk-birincil-zemin-yumusak); }
.dok-rozet--alfa { color: var(--trds-renk-uyari-metin-varsayilan); background: var(--trds-renk-uyari-zemin-yumusak); }
.dok-rozet--degerlendiriliyor { color: var(--trds-renk-notr-metin-silik); background: var(--trds-renk-notr-yuzey-yumusak); }
.dok-rozet--yok { color: var(--trds-renk-notr-metin-silik); background: transparent; border: 1px dashed var(--trds-renk-notr-kenar-varsayilan); }
.dok-rozet--yok::before { display: none; }
.dok-rozet--ozel { color: var(--trds-renk-birincil-metin-varsayilan); background: var(--trds-renk-birincil-zemin-yumusak); }

.dok-durumlar {
  display: flex; flex-wrap: wrap; gap: var(--trds-aralik-5);
  margin: var(--trds-aralik-4) 0 0;
  padding: var(--trds-aralik-3) var(--trds-aralik-4);
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-2);
  background: var(--trds-renk-notr-zemin-yumusak);
}
.dok-durumlar > div { display: flex; flex-direction: column; gap: 0.2rem; }
.dok-durumlar dt { font-size: var(--trds-yazi-boyut-12); color: var(--trds-renk-notr-metin-silik); text-transform: uppercase; letter-spacing: 0.06em; }
.dok-durumlar dd { margin: 0; }

.dok-anahtar { display: grid; gap: var(--trds-aralik-2); margin: 0 0 var(--trds-aralik-5); max-width: 68ch; }
.dok-anahtar > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--trds-aralik-3); align-items: baseline; }
.dok-anahtar dt { margin: 0; font-weight: 700; }
.dok-anahtar dd { margin: 0; color: var(--trds-renk-notr-metin-silik); }
.dok-anahtar--genis > div { grid-template-columns: 8rem 1fr; padding-block: var(--trds-aralik-2); border-block-end: 1px solid var(--trds-renk-notr-kenar-silik); }

.dok-tr {
  display: inline-block;
  padding: 0 0.35rem;
  border-radius: 3px;
  background: var(--trds-renk-kimlik-serit);
  color: var(--trds-renk-kimlik-arma);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  vertical-align: 0.2em;
}
.dok-tr--buyuk { font-size: 0.9rem; vertical-align: 0.5em; }

/* ---------- kahraman ---------- */
.dok-kahraman { padding-block: var(--trds-aralik-6) var(--trds-aralik-9); max-width: 44rem; }
.dok-kahraman__ust { font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-silik); margin: 0 0 var(--trds-aralik-3); letter-spacing: 0.02em; }
.dok-kahraman__baslik { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 var(--trds-aralik-5); text-wrap: balance; }
.dok-kahraman__metin { font-size: var(--trds-yazi-boyut-20); color: var(--trds-renk-notr-metin-silik); margin: 0 0 var(--trds-aralik-6); max-width: 36rem; }
.dok-kahraman__eylemler { display: flex; flex-wrap: wrap; gap: var(--trds-aralik-3); }
.dok-kahraman__eylemler .trds-button { text-decoration: none; }

.dok-ucsutun {
  display: grid; gap: var(--trds-aralik-6);
  padding-block: var(--trds-aralik-7);
  border-block: 1px solid var(--trds-renk-notr-kenar-silik);
}
@media (min-width: 48rem) { .dok-ucsutun { grid-template-columns: repeat(3, 1fr); gap: var(--trds-aralik-8); } }
.dok-ucsutun__baslik { margin: 0 0 var(--trds-aralik-2); font-size: var(--trds-yazi-boyut-20); }
.dok-ucsutun__baslik a { color: var(--trds-renk-birincil-metin-varsayilan); text-decoration: none; }
.dok-ucsutun__baslik a:hover { text-decoration: underline; }
.dok-ucsutun p { margin: 0; color: var(--trds-renk-notr-metin-silik); font-size: var(--trds-yazi-boyut-16); }

.dok-bolum { padding-block: var(--trds-aralik-8) 0; }
.dok-bolum__ust { margin-block-end: var(--trds-aralik-5); max-width: 62ch; }
.dok-bolum__baslik { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--trds-aralik-2); }
.dok-bolum__metin { color: var(--trds-renk-notr-metin-silik); margin: 0; }
.dok-bolum > .dok-bolum__metin { margin-block-start: var(--trds-aralik-5); }

/* ---------- kartlar ---------- */
.dok-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--trds-aralik-4);
}
.dok-kart {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-3);
  background: var(--trds-renk-notr-yuzey-varsayilan);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.dok-kart:hover {
  border-color: var(--trds-renk-notr-kenar-varsayilan);
  box-shadow: var(--trds-golge-2);
  transform: translateY(-1px);
}
.dok-kart__onizleme {
  height: 9.5rem;
  overflow: hidden;
  padding: var(--trds-aralik-4);
  background: var(--trds-renk-notr-yuzey-yumusak);
  border-block-end: 1px solid var(--trds-renk-notr-kenar-silik);
  pointer-events: none;
  user-select: none;
}
.dok-kart__olcek {
  width: 145%;
  transform: scale(0.69);
  transform-origin: top left;
}
.dok-kart__olcek > * { margin-block-start: 0 !important; }
.dok-kart__olcek .trds-baslik-cubugu,
.dok-kart__olcek .trds-alt-bilgi,
:is(.dok-ornek__sahne, .dok-kart__olcek, .dok-dizin__olcek) :is(.trds-gecici-alan, .trds-yuzen, .trds-alt-gezinme, .trds-basa-don, .trds-cikis) { position: static; width: auto; box-shadow: var(--trds-golge-1); }
:is(.dok-ornek__sahne, .dok-kart__olcek, .dok-dizin__olcek) .trds-alt-gezinme { display: flex; }
:is(.dok-ornek__sahne, .dok-kart__olcek, .dok-dizin__olcek) .trds-u-yapiskan { position: static; }
:is(.dok-kart__olcek, .dok-dizin__olcek) :is(.trds-yuzen, .trds-basa-don) { display: inline-flex; }
:is(.dok-kart__olcek, .dok-dizin__olcek) .trds-cikis { display: flex; justify-content: flex-start; }
:is(.dok-kart__olcek, .dok-dizin__olcek) .trds-erisim__panel { position: static; inset: auto; margin-block-start: var(--trds-aralik-3); max-width: 100%; box-shadow: none; }
.dok-kart__olcek .trds-tanitici,
.dok-kart__olcek .trds-edevlet,
.dok-kart__olcek .trds-kvkk { margin: 0; }
.dok-kart__olcek .trds-kap { padding-inline: var(--trds-aralik-3); }
.dok-kart__olcek .trds-erisim__panel { position: static; margin-block-start: var(--trds-aralik-2); }
.dok-kart__govde { padding: var(--trds-aralik-3) var(--trds-aralik-4) var(--trds-aralik-4); display: flex; flex-direction: column; gap: 0.15rem; }
.dok-kart__ad { margin: 0; font-weight: 700; font-size: var(--trds-yazi-boyut-16); color: var(--trds-renk-notr-metin-varsayilan); line-height: 1.3; }
.dok-kart__ad a { color: inherit; text-decoration: none; }
.dok-kart__ad a:hover { text-decoration: underline; }
/* Kartın tamamı tıklanır. Bağlantı yalnız başlıktadır, kalan alan üstüne yayılır. */
.dok-kart__ad a::after { content: ''; position: absolute; inset: 0; }
.dok-kart:has(.dok-kart__ad a:focus-visible) { outline: var(--trds-olcu-odak-kalinlik) solid var(--trds-renk-odak-dolgu); outline-offset: 2px; }
.dok-kart__ad a:focus-visible { outline: none; background: none; color: inherit; box-shadow: none; }
.dok-kart__en { font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-silik); }

/* ---------- bileşen dizini ---------- */
.dok-suzgec {
  margin: var(--trds-aralik-6) 0 var(--trds-aralik-5);
  padding: var(--trds-aralik-5);
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-3);
  background: var(--trds-renk-notr-zemin-yumusak);
}
.dok-suzgec__ara { max-width: 28rem; margin-block-end: var(--trds-aralik-4); }
.dok-suzgec__ara .trds-etiket { font-size: var(--trds-yazi-boyut-14); }
.dok-suzgec__satir { display: flex; flex-wrap: wrap; gap: var(--trds-aralik-5) var(--trds-aralik-7); }
.dok-suzgec__grup { margin: 0; padding: 0; border: 0; min-width: 0; }
.dok-suzgec__grup legend { padding: 0; margin-block-end: var(--trds-aralik-2); font-size: var(--trds-yazi-boyut-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--trds-renk-notr-metin-silik); }
.dok-suzgec__secim { min-height: 2.5rem; font-size: var(--trds-yazi-boyut-14); width: auto; min-width: 12rem; padding-block: 0.3rem; }
.dok-suzgec__cipler { display: flex; flex-wrap: wrap; gap: var(--trds-aralik-2); }
.dok-cip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 var(--trds-aralik-3);
  border: 1px solid var(--trds-renk-notr-kenar-varsayilan);
  border-radius: 999px;
  background: var(--trds-renk-notr-yuzey-varsayilan);
  font-size: var(--trds-yazi-boyut-14);
  cursor: pointer;
  user-select: none;
}
.dok-cip input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--trds-renk-birincil-taban-varsayilan); }
.dok-cip:has(input:checked) { background: var(--trds-renk-birincil-zemin-yumusak); border-color: var(--trds-renk-birincil-kenar-varsayilan); color: var(--trds-renk-birincil-metin-guclu); font-weight: 500; }
.dok-cip:has(input:focus-visible) { outline: var(--trds-olcu-odak-kalinlik) solid var(--trds-renk-odak-dolgu); }
.dok-suzgec__sayi { margin: var(--trds-aralik-4) 0 0; font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-silik); font-variant-numeric: tabular-nums; }
.dok-suzgec__temizle { margin-block-start: var(--trds-aralik-2); padding-inline: 0; min-height: 2rem; font-size: var(--trds-yazi-boyut-14); }

.dok-dizin { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--trds-aralik-4); }
@media (min-width: 56rem) { .dok-dizin { grid-template-columns: 1fr 1fr; } }
.dok-dizin__oge[hidden] { display: none; }
.dok-dizin__kart {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-3);
  background: var(--trds-renk-notr-yuzey-varsayilan);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dok-dizin__kart:hover { border-color: var(--trds-renk-notr-kenar-varsayilan); box-shadow: var(--trds-golge-2); }
.dok-dizin__onizleme {
  display: block;
  height: 10rem;
  overflow: hidden;
  padding: var(--trds-aralik-4);
  background: var(--trds-renk-notr-yuzey-yumusak);
  border-block-end: 1px solid var(--trds-renk-notr-kenar-silik);
}
.dok-dizin__olcek { width: 145%; transform: scale(0.69); transform-origin: top left; pointer-events: none; user-select: none; }
.dok-dizin__olcek > * { margin-block-start: 0 !important; }
.dok-dizin__olcek .trds-baslik-cubugu, .dok-dizin__olcek .trds-alt-bilgi, .dok-dizin__olcek .trds-tanitici,
.dok-dizin__olcek .trds-edevlet, .dok-dizin__olcek .trds-kvkk { margin: 0; }
.dok-dizin__olcek .trds-kap { padding-inline: var(--trds-aralik-3); }
.dok-dizin__olcek .trds-erisim__panel { position: static; margin-block-start: var(--trds-aralik-2); }
.dok-dizin__govde { display: flex; flex-direction: column; gap: var(--trds-aralik-2); padding: var(--trds-aralik-4) var(--trds-aralik-5) var(--trds-aralik-5); }
.dok-dizin__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--trds-aralik-3); }
.dok-dizin__ad { margin: 0; font-size: var(--trds-yazi-boyut-18); font-weight: 700; line-height: 1.2; }
.dok-dizin__ad a { color: var(--trds-renk-notr-metin-varsayilan); text-decoration: none; }
.dok-dizin__ad a:hover { text-decoration: underline; }
/* Kartın tamamı tıklanır, ama bağlantı yalnız başlıktadır. */
.dok-dizin__ad a::after { content: ''; position: absolute; inset: 0; }
.dok-dizin__kart { position: relative; }
.dok-dizin__en { margin: 0; font-size: var(--trds-yazi-boyut-12); color: var(--trds-renk-notr-metin-silik); letter-spacing: 0.02em; }
.dok-dizin__ozet { margin: 0; font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-varsayilan); max-width: none; }
.dok-dizin__tek { list-style: none; margin: var(--trds-aralik-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--trds-aralik-1); }
.dok-dizin__tek li { padding: 0.05rem 0.5rem; border-radius: 4px; background: var(--trds-renk-notr-yuzey-yumusak); border: 1px solid var(--trds-renk-notr-kenar-silik); font-size: var(--trds-yazi-boyut-12); font-family: "IBM Plex Mono", monospace; color: var(--trds-renk-notr-metin-silik); }
.dok-dizin__bos { padding: var(--trds-aralik-6); border: 1px dashed var(--trds-renk-notr-kenar-varsayilan); border-radius: var(--trds-kose-3); color: var(--trds-renk-notr-metin-silik); }

/* ---------- gruplar ---------- */
.dok-gruplar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block-start: 1px solid var(--trds-renk-notr-kenar-silik); }
@media (min-width: 48rem) { .dok-gruplar { grid-template-columns: 1fr 1fr; column-gap: var(--trds-aralik-8); } }
.dok-gruplar li { padding: var(--trds-aralik-4) 0; border-block-end: 1px solid var(--trds-renk-notr-kenar-silik); }
.dok-gruplar a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--trds-aralik-3); color: inherit; text-decoration: none; }
.dok-gruplar a:hover .dok-gruplar__ad { text-decoration: underline; }
.dok-gruplar__ad { font-weight: 700; }
.dok-gruplar__sayi { font-family: "IBM Plex Mono", monospace; font-size: var(--trds-yazi-boyut-12); color: var(--trds-renk-notr-metin-silik); }
.dok-gruplar p { margin: var(--trds-aralik-1) 0 0; font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-silik); }

/* ---------- örnek ---------- */
.dok-ornek {
  margin: 0 0 var(--trds-aralik-6);
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-3);
  background: var(--trds-renk-notr-yuzey-varsayilan);
}
.dok-ornek__cubuk {
  display: flex; justify-content: space-between; align-items: center; gap: var(--trds-aralik-3);
  padding: var(--trds-aralik-2) var(--trds-aralik-4);
  border-block-end: 1px solid var(--trds-renk-notr-kenar-silik);
  background: var(--trds-renk-notr-zemin-yumusak);
  border-start-start-radius: var(--trds-kose-3);
  border-start-end-radius: var(--trds-kose-3);
  font-size: var(--trds-yazi-boyut-14);
}
.dok-ornek__ad { font-weight: 700; }
.dok-ornek__not { color: var(--trds-renk-notr-metin-silik); font-size: var(--trds-yazi-boyut-12); }
/* Sahne taşmayı kırpmaz. Açılır panel gibi parçalar dışarı çıkabilir. */
/* Önizleme zemini alt bilgi ile aynı tondadır. Koyu temada kart yüzeyinden ayrılır. */
.dok-ornek__sahne { padding: var(--trds-aralik-6); overflow: visible; background: var(--trds-renk-notr-yuzey-yumusak); }
/* Tam genişlik bileşen kenardan kenara durur. Kendi kabı sayfa dolgusunu taşır,
   böylece bayrak ve çizgi gerçek sayfadaki gibi hizalanır. */
.dok-ornek__sahne--tam { padding: 0; }
.dok-ornek__sahne--tam .trds-kap { max-width: none; }
.dok-ornek__sahne--tam .trds-alt-bilgi { margin-block-start: 0; }
.dok-ornek__sahne > :last-child { margin-block-end: 0; }
.dok-ornek__sahne .trds-alan, .dok-ornek__sahne .trds-alan-grubu,
.dok-ornek__sahne .trds-edevlet, .dok-ornek__sahne .trds-kvkk { margin-block: 0; }
.dok-ornek__kod { border-block-start: 1px solid var(--trds-renk-notr-kenar-silik); }
.dok-ornek__kod > summary {
  padding: var(--trds-aralik-3) var(--trds-aralik-4);
  cursor: pointer;
  font-size: var(--trds-yazi-boyut-14);
  font-weight: 500;
  color: var(--trds-renk-birincil-metin-varsayilan);
  list-style: none;
}
.dok-ornek__kod > summary::-webkit-details-marker { display: none; }
.dok-ornek__kod > summary::before { content: '+ '; font-family: "IBM Plex Mono", monospace; }
.dok-ornek__kod[open] > summary::before { content: '− '; }
.dok-ornek__kod pre { margin: 0; border-radius: 0 0 var(--trds-kose-3) var(--trds-kose-3); }

pre, .dok-kod {
  margin: 0 0 var(--trds-aralik-5);
  padding: var(--trds-aralik-4) var(--trds-aralik-5);
  overflow-x: auto;
  background: var(--trds-renk-notr-taban-varsayilan);
  color: var(--trds-renk-notr-taban-karsit-varsayilan);
  border-radius: var(--trds-kose-3);
  font-size: var(--trds-yazi-boyut-14);
  line-height: 1.6;
  tab-size: 2;
}
pre code { font-size: inherit; }

.dok-wcag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trds-aralik-2); font-size: var(--trds-yazi-boyut-14); }
.dok-wcag > span { color: var(--trds-renk-notr-metin-silik); margin-inline-end: var(--trds-aralik-2); }
.dok-olcut {
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--trds-yazi-boyut-12);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: 999px;
  color: var(--trds-renk-birincil-metin-varsayilan);
  text-decoration: none;
}
.dok-olcut:hover { border-color: var(--trds-renk-birincil-kenar-varsayilan); }

/* ---------- tablolar ---------- */
.dok-tablo-kap { margin: 0 0 var(--trds-aralik-6); border: 1px solid var(--trds-renk-notr-kenar-silik); border-radius: var(--trds-kose-3); }
.dok-tablo { font-size: var(--trds-yazi-boyut-14); min-width: 0; }
.dok-tablo thead th { font-size: var(--trds-yazi-boyut-12); letter-spacing: 0.06em; text-transform: uppercase; color: var(--trds-renk-notr-metin-silik); background: var(--trds-renk-notr-zemin-yumusak); }
.dok-tablo th[scope='row'] { font-weight: 500; }
.dok-tablo tbody tr:hover { background: var(--trds-renk-notr-zemin-yumusak); }
.dok-matris { min-width: 44rem; }

/* ---------- simgeler ---------- */
.dok-simgeler {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--trds-aralik-3);
}
.dok-simge {
  display: flex; flex-direction: column; align-items: center; gap: var(--trds-aralik-2);
  padding: var(--trds-aralik-4) var(--trds-aralik-2);
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-3);
  background: var(--trds-renk-notr-yuzey-varsayilan);
  text-align: center;
}
.dok-simge__gorsel { width: 2rem; height: 2rem; fill: currentColor; color: var(--trds-renk-notr-metin-varsayilan); }
.dok-simge__ad { font-size: var(--trds-yazi-boyut-14); font-weight: 500; }
.dok-simge__kod { font-size: 0.68rem; color: var(--trds-renk-notr-metin-silik); background: none !important; border: 0 !important; padding: 0 !important; word-break: break-all; }

/* ---------- entegrasyon ---------- */
.dok-entegrasyon__ust { display: flex; align-items: center; gap: var(--trds-aralik-3); }
.dok-entegrasyon__ust .dok-h2 { margin-block-end: 0; flex: 1; }
.dok-entegrasyon__kod { display: grid; gap: var(--trds-aralik-4); margin: var(--trds-aralik-4) 0; }
@media (min-width: 56rem) { .dok-entegrasyon__kod { grid-template-columns: 1fr 1fr; } }
.dok-entegrasyon__kod pre { margin: 0; height: 100%; }

/* ---------- temeller ---------- */
.dok-olcek-blok { margin: 0 0 var(--trds-aralik-6); }
.dok-olcek-blok .dok-h3 { font-family: "IBM Plex Mono", monospace; font-size: var(--trds-yazi-boyut-14); text-transform: uppercase; letter-spacing: 0.08em; color: var(--trds-renk-notr-metin-silik); }
.dok-renkler { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--trds-aralik-2); }
.dok-renk {
  display: grid; grid-template-columns: 2.25rem 1fr; grid-template-rows: auto auto; column-gap: var(--trds-aralik-3); align-items: center;
  padding: var(--trds-aralik-2);
  border: 1px solid var(--trds-renk-notr-kenar-silik);
  border-radius: var(--trds-kose-2);
}
.dok-renk__ornek { grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: var(--trds-kose-2); border: 1px solid rgb(0 0 0 / 0.08); }
.dok-renk__ad { font-size: var(--trds-yazi-boyut-14); font-weight: 500; }
.dok-renk__deger { font-size: var(--trds-yazi-boyut-12); color: var(--trds-renk-notr-metin-silik); background: none !important; border: 0 !important; padding: 0 !important; }

.dok-tip { border-block-start: 1px solid var(--trds-renk-notr-kenar-silik); margin: 0 0 var(--trds-aralik-6); }
.dok-tip__satir { display: flex; justify-content: space-between; align-items: baseline; gap: var(--trds-aralik-4); padding: var(--trds-aralik-3) 0; border-block-end: 1px solid var(--trds-renk-notr-kenar-silik); }
.dok-tip__ornek { line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dok-tip__ad { flex: 0 0 auto; font-size: var(--trds-yazi-boyut-12); color: var(--trds-renk-notr-metin-silik); background: none !important; border: 0 !important; }

.dok-aralik { display: grid; gap: var(--trds-aralik-2); }
.dok-aralik__satir { display: grid; grid-template-columns: 7rem 1fr 4rem; gap: var(--trds-aralik-4); align-items: center; font-size: var(--trds-yazi-boyut-14); }
.dok-aralik__cubuk { display: block; block-size: 0.9rem; background: var(--trds-renk-birincil-taban-varsayilan); border-radius: 2px; }

/* ---------- aşamalar ---------- */
.dok-asamalar { display: grid; gap: var(--trds-aralik-3); margin: 0 0 var(--trds-aralik-6); padding: 0; list-style: none; }
@media (min-width: 56rem) { .dok-asamalar { grid-template-columns: repeat(2, 1fr); } }
.dok-asama { padding: var(--trds-aralik-5); border: 1px solid var(--trds-renk-notr-kenar-silik); border-radius: var(--trds-kose-3); background: var(--trds-renk-notr-yuzey-varsayilan); }
.dok-asama__no { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--trds-renk-birincil-taban-varsayilan); color: var(--trds-renk-birincil-taban-karsit-varsayilan); font-size: var(--trds-yazi-boyut-12); font-weight: 700; margin-block-end: var(--trds-aralik-3); }
.dok-asama__ad { margin: 0 0 var(--trds-aralik-1); font-size: var(--trds-yazi-boyut-18); font-weight: 700; }
.dok-asama__ozet { margin: 0 0 var(--trds-aralik-3); color: var(--trds-renk-notr-metin-silik); font-size: var(--trds-yazi-boyut-14); }
.dok-asama ul { margin: 0; padding-inline-start: 1.1rem; font-size: var(--trds-yazi-boyut-14); }
.dok-asama li { margin-block-end: var(--trds-aralik-1); }

/* ---------- alt bilgi ---------- */
.dok-alt {
  margin-block-start: var(--trds-aralik-11);
  padding-block: var(--trds-aralik-8) var(--trds-aralik-9);
  border-block-start: 1px solid var(--trds-renk-notr-kenar-silik);
  background: var(--trds-renk-notr-yuzey-yumusak);
  font-size: var(--trds-yazi-boyut-14);
}
.dok-alt__ic { display: grid; gap: var(--trds-aralik-6); }
@media (min-width: 48rem) { .dok-alt__ic { grid-template-columns: 2fr 1fr 1fr; gap: var(--trds-aralik-9); } }
.dok-alt__sutun { display: flex; flex-direction: column; gap: var(--trds-aralik-2); }
.dok-alt__baslik { font-weight: 700; margin: 0 0 var(--trds-aralik-1); }
.dok-alt__metin { margin: 0; color: var(--trds-renk-notr-metin-silik); max-width: 40ch; }
.dok-alt a { color: var(--trds-renk-notr-metin-varsayilan); }

/* ---------- örnek sayfalar ---------- */
.dok-ornekler { display: grid; gap: var(--trds-aralik-6); margin-block: var(--trds-aralik-6); }
@media (min-width: 64rem) { .dok-ornekler { grid-template-columns: 1fr 1fr; } }
.dok-ornek-kart { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--trds-renk-notr-kenar-silik); border-radius: var(--trds-kose-3); background: var(--trds-renk-notr-yuzey-varsayilan); overflow: hidden; }
.dok-ornek-kart:hover { border-color: var(--trds-renk-notr-kenar-varsayilan); box-shadow: var(--trds-golge-2); }
.dok-ornek-kart__cerceve { position: relative; height: 18rem; overflow: hidden; background: var(--trds-renk-notr-yuzey-yumusak); border-block-end: 1px solid var(--trds-renk-notr-kenar-silik); }
.dok-ornek-kart__cerceve iframe { width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: top left; pointer-events: none; }
.dok-ornek-kart__govde { padding: var(--trds-aralik-4) var(--trds-aralik-5) var(--trds-aralik-5); position: relative; }
.dok-ornek-kart__ad { margin: 0 0 var(--trds-aralik-1); font-size: var(--trds-yazi-boyut-20); }
.dok-ornek-kart__ad a { color: inherit; text-decoration: none; }
.dok-ornek-kart__ad a::after { content: ''; position: absolute; inset: 0; }
.dok-ornek-kart:has(.dok-ornek-kart__ad a:focus-visible) { outline: var(--trds-olcu-odak-kalinlik) solid var(--trds-renk-odak-dolgu); }
.dok-ornek-kart__kurum { margin: 0 0 var(--trds-aralik-2); font-size: var(--trds-yazi-boyut-14); color: var(--trds-renk-notr-metin-silik); }
.dok-ornek-kart__kurum a { position: relative; z-index: 1; }
.dok-ornek-kart__ozet { margin: 0 0 var(--trds-aralik-3); font-size: var(--trds-yazi-boyut-14); }
.dok-ornek-kart__bilesenler { margin: 0; display: flex; flex-wrap: wrap; gap: var(--trds-aralik-1); }
.dok-ornek-kart__bilesenler span { padding: 0.05rem 0.5rem; border-radius: 4px; background: var(--trds-renk-notr-yuzey-yumusak); border: 1px solid var(--trds-renk-notr-kenar-silik); font-size: var(--trds-yazi-boyut-12); color: var(--trds-renk-notr-metin-silik); }