/* İlk Lokma sitesi. Renk, yazı, boşluk ve köşe yalnızca tokens.css değişkenlerinden gelir (tools/check_site.py denetler). */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: var(--text-body);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--color-primary); text-underline-offset: 2px; }

a:hover, a:focus-visible { color: var(--color-primary-dark); }

a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Odak halkası: sayfa ve kart zemininde en az 3:1 (WCAG 1.4.11; tools/check_site.py denetler). */
:focus-visible { outline: 3px solid var(--color-accent-dark); outline-offset: 2px; border-radius: var(--space-1); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-8) * 2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-field);
}

.skip-link:focus { top: var(--space-4); }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--space-screen); }

/* Üst bilgi: logo ve sayfa bağlantıları; dar ekranda bağlantılar logonun altına iner. */
.site-header { border-bottom: 1px solid var(--color-divider); background: var(--color-background); }

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.logo { display: block; width: 168px; height: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a { font: var(--text-title); text-decoration: none; color: var(--color-text); }

.site-nav a:hover, .site-nav a:focus-visible { color: var(--color-primary); text-decoration: underline; }

.site-nav a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; }

main { display: block; padding: var(--space-8) 0; }

h1 { font: var(--text-display); margin: 0 0 var(--space-3); text-wrap: balance; }

h2 { font: var(--text-h1); margin: var(--space-8) 0 var(--space-3); scroll-margin-top: var(--space-4); text-wrap: balance; }

h3 { font: var(--text-h2); margin: var(--space-6) 0 var(--space-2); scroll-margin-top: var(--space-4); }

p, ul, ol, dl { margin: 0 0 var(--space-4); }

ul, ol { padding-left: var(--space-6); }

li { margin-bottom: var(--space-2); }

dt { font: var(--text-title); margin-top: var(--space-3); }

dd { margin: var(--space-1) 0 0; }

strong { font-weight: 700; }

.lead { font: var(--text-title); font-weight: 400; color: var(--color-text); max-width: 640px; }

.muted { color: var(--color-text-muted); font: var(--text-body-small); }

/* Ana sayfa */
.hero { padding: var(--space-6) 0 var(--space-4); }

.chip {
  display: inline-block;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font: var(--text-body-small);
  font-weight: 600;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}

.card {
  margin: 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
}

.card h2, .card h3 { font: var(--text-title); margin: 0 0 var(--space-2); }

.card p { margin: 0; color: var(--color-text-muted); }

.card::before {
  content: "";
  display: block;
  width: var(--space-8);
  height: var(--space-1);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-chip);
  background: var(--color-accent);
}

/* Bilgi kutuları */
.callout {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-info-light);
  color: var(--color-text);
}

.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }

.callout h2, .callout h3 { font: var(--text-title); margin: 0 0 var(--space-2); }

.callout--warning { background: var(--color-warning-light); }

.callout--danger { background: var(--color-danger-light); }

.callout--summary { background: var(--color-primary-light); }

/* Yasal metinler: okunabilir satır uzunluğu, içindekiler */
.doc { max-width: 720px; }

.doc-meta { color: var(--color-text-muted); font: var(--text-body-small); margin-bottom: var(--space-6); }

.toc {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.toc h2 { font: var(--text-title); margin: 0 0 var(--space-2); }

.toc ol { margin: 0; }

.toc li { margin-bottom: var(--space-1); }

.steps li { margin-bottom: var(--space-3); }

/* Henüz bilinmeyen bilgi (sahibinden gelecek); tools/check_site.py uyarır, --strict hata sayar. */
.yer-tutucu {
  padding: 0 var(--space-1);
  border-radius: var(--space-1);
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-surface);
  font: 700 16px/1 var(--font-family);
  text-decoration: none;
}

.btn:hover, .btn:focus-visible { background: var(--color-primary-dark); color: var(--color-surface); }

/* Alt bilgi */
.site-footer { border-top: 1px solid var(--color-divider); padding: var(--space-6) 0 var(--space-8); }

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.site-footer li { margin: 0; }

.site-footer p { margin: 0 0 var(--space-2); }

/* Besin sayfaları (besinler/; api deposundaki content/tools/web_uret.py üretir). */
.besin { max-width: 760px; }

.iz ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font: var(--text-body-small);
  color: var(--color-text-muted);
}

.iz li { margin: 0; }

.iz li + li::before { content: "›"; margin-right: var(--space-2); }

.besin-baslik h1 { margin-bottom: var(--space-1); }

.besin-kategori { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

.besin-kapak {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.rozet {
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  font: var(--text-body-small);
  font-weight: 600;
}

.rozet--uyari { background: var(--color-warning-light); border-color: var(--color-warning-light); color: var(--color-warning); }

.rozet--alerjen {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.rozet--olumlu {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.besin-alerjen { color: var(--color-accent-dark); font-weight: 600; }

.besin-bolum { padding-top: var(--space-2); }

.isaret { font: var(--text-label); line-height: 0; }

.isaret a { text-decoration: none; }

.yas-blogu, .ipucu, .sss-ogesi {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
}

.yas-blogu h3, .ipucu h3, .sss-ogesi h3 { font: var(--text-title); margin: 0 0 var(--space-2); }

.yas-blogu p:last-child, .ipucu p:last-child, .sss-ogesi p:last-child { margin-bottom: 0; }

.yas-gorsel { display: block; width: 100%; max-width: 360px; margin: 0 0 var(--space-3); border-radius: var(--radius-field); }

.yas-kesim { color: var(--color-text-muted); font: var(--text-body-small); }

.kilitli-baslik { color: var(--color-text-muted); }

.kilitli-baslik::after {
  content: "Premium";
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font: var(--text-label);
  vertical-align: middle;
}

.premium-kutu {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-field);
  background: var(--color-accent-light);
}

.premium-kutu p { margin: 0 0 var(--space-3); font-weight: 600; }

.magaza-baglantilari {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.magaza-baglantilari li { margin: 0; }

.btn--ikincil { background: var(--color-surface); color: var(--color-primary-dark); border: 2px solid var(--color-primary); }

.btn--ikincil:hover, .btn--ikincil:focus-visible { background: var(--color-primary-light); color: var(--color-primary-dark); }

.infografik { margin: var(--space-6) 0; text-align: center; }

.infografik-gorsel { display: block; width: 100%; max-width: 540px; margin: 0 auto; border-radius: var(--radius-card); }

.infografik figcaption { margin-top: var(--space-2); color: var(--color-text-muted); font: var(--text-body-small); }

.kaynaklar {
  margin: var(--space-4) 0 var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font: var(--text-body-small);
}

.kaynaklar-baslik { font: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-2); }

.kaynaklar ol { margin: 0; }

.kaynaklar li { margin-bottom: var(--space-1); scroll-margin-top: var(--space-4); }

.kaynaklar li:target { background: var(--color-warning-light); color: var(--color-text); }

.kaynaklar cite { font-style: normal; }

.kaynaklar a { overflow-wrap: anywhere; }

.besin-editor { margin-top: var(--space-8); color: var(--color-text-muted); font: var(--text-body-small); }

.besin-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2) var(--space-4);
  padding: 0;
  list-style: none;
}

.besin-listesi li { margin: 0; }

.besin-listesi a { font: var(--text-title); }

.uygulama-cagrisi {
  margin: var(--space-8) 0 0;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-primary-light);
}

.uygulama-cagrisi h2 { margin-top: 0; }