/* datakingo.com — tek stil dosyası. Kaynak: sites/datakingo/DESIGN.md
   Dış kaynak, betik, geçiş ve animasyon yok. */

:root {
  --renk-zemin: #F5F2EA;
  --renk-metin: #14201B;
  --renk-metin-ikincil: #4A5A53;
  --renk-vurgu: #0B6B4F;
  --renk-cizgi: rgb(20 32 27 / 0.16); /* mürekkebin saydamı; yeni renk değil */
  --font-govde: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-kod: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --b1: 8px; --b2: 16px; --b3: 24px; --b4: 40px; --b5: 64px;
}

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

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

body {
  margin: 0;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  font-family: var(--font-govde);
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.6;
  overflow-wrap: break-word;
}

.sayfa {
  box-sizing: content-box;
  max-width: 55ch; /* ölçüm: bu fontta satır başına en çok 68 karakter verir (68ch, 81 veriyordu) */
  margin-inline: auto;
  padding: var(--b3) 20px var(--b5);
}

/* Üst bant: logo ve dil bağlantısı */
.ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b2);
  margin-bottom: var(--b5);
}
.ust img { display: block; height: 32px; width: auto; }
.ust a { font-size: 0.9375rem; }

/* Başlıklar: tek aile, kalınlık 600, üç boyut */
h1, h2, h3 { font-weight: 600; line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); letter-spacing: -0.01em; margin: 0 0 var(--b3); }
h2 { font-size: 1.375rem; margin: var(--b4) 0 var(--b2); }
h3 { font-size: 1.0625rem; margin: var(--b3) 0 var(--b1); }

p { margin: 0 0 var(--b2); }
ul, ol { margin: 0 0 var(--b2); padding-left: 1.25em; }
li + li { margin-top: var(--b1); }
strong { font-weight: 600; }
.ikincil { color: var(--renk-metin-ikincil); font-size: 0.9375rem; }

a { color: var(--renk-vurgu); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--renk-vurgu); outline-offset: 2px; border-radius: 2px; }

code { font-family: var(--font-kod); font-size: 0.875em; overflow-wrap: anywhere; }

:target { scroll-margin-top: var(--b3); }

/* Tablo: her genişlikte satır satır yığılır. Metin sütunu dar (yaklaşık 530 px);
   üç sütun ve uzun izin adresleri yan yana sığmıyor (ölçüldü). İlk hücre satırın başlığıdır.
   HTML'de role="table|row|cell" yazılır; display:block tablo anlamını düşürür. */
table, tbody, tr, td { display: block; width: 100%; }
table { margin: 0 0 var(--b3); border-top: 1px solid var(--renk-cizgi); }
thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
tr { padding: var(--b2) 0; border-bottom: 1px solid var(--renk-cizgi); }
td + td { margin-top: var(--b1); }
td:first-child { font-weight: 600; }
/* sütun başlığı, data-baslik yazılan hücrede küçük etiket olarak görünür */
td[data-baslik]::before { content: attr(data-baslik); display: block; font-size: 0.8125rem; font-weight: 600; color: var(--renk-metin-ikincil); }
td:first-child[data-baslik]::before { content: none; }

/* Alt bilgi */
.alt {
  margin-top: var(--b5);
  padding-top: var(--b3);
  border-top: 1px solid var(--renk-cizgi);
  color: var(--renk-metin-ikincil);
  font-size: 0.9375rem;
}
.alt p { margin-bottom: var(--b1); }

@media (min-width: 48em) {
  body { font-size: 1.125rem; } /* 18 px */
  .sayfa { padding-top: var(--b4); }
  h2 { margin-top: var(--b5); }
  h3 { font-size: 1.125rem; margin-top: var(--b4); }
}

@media print {
  body { background: #fff; }
  a { color: inherit; }
}