/* Temel katman: reset, tipografi, düzen, a11y, tablolar. Yalnızca token referansı. */

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }

/* Gri sayfa zemini + beyaz kartlar (components.css §2) */
body {
	margin: 0; background: var(--color-ground); color: var(--color-text);
	font-family: var(--font-sans); font-size: var(--text-base);
	line-height: var(--leading-normal); overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0 }
ul, ol { padding: 0; list-style: none }

h1, h2, h3, h4 {
	color: var(--color-heading); font-weight: var(--weight-bold);
	line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}
h1 { font-size: var(--text-2xl) }
h2 { font-size: var(--text-xl) }
h3 { font-size: var(--text-lg) }
h4 { font-size: var(--text-md) }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: .15em }
a:hover { color: var(--color-link-hover) }

img, svg, video { max-width: 100%; height: auto; display: block }
button, input, select, textarea { font: inherit; color: inherit }

/* Odak göstergesi — canlıda global olarak silinmişti (WCAG 2.4.7). */
:focus-visible {
	outline: var(--focus-width) solid var(--color-focus);
	outline-offset: var(--focus-offset); border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: var(--space-2); top: -4rem; z-index: var(--z-skip);
	display: inline-flex; align-items: center; min-height: var(--tap-min);
	padding: var(--space-2) var(--space-4); background: var(--color-brand);
	color: var(--color-brand-ink); border-radius: var(--radius);
	text-decoration: none; transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: var(--space-2); color: var(--color-brand-ink) }

/* Düzen */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter) }
.site-main { padding-block: var(--space-4) var(--space-6); display: flow-root }

.prose { max-width: var(--prose-max) }
.prose > * + * { margin-top: var(--space-4) }
.prose ul, .prose ol { padding-left: var(--space-5) }
.prose ul { list-style: disc }
.prose ol { list-style: decimal }
.prose li + li { margin-top: var(--space-2) }
.prose strong { font-weight: var(--weight-bold) }
.prose a { color: var(--color-text); text-decoration: underline }
.prose a:hover { color: var(--color-brand) }

/* Başlıklar */
.page-header { margin-bottom: var(--space-4) }
.page-title, .entry__title { margin-bottom: var(--space-2); font-size: var(--text-2xl) }
.page-subtitle { color: var(--color-text-muted); max-width: var(--prose-max) }
.subsection-title {
	font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2);
	color: var(--color-text-muted); font-weight: var(--weight-medium);
}

/* Tablo: 400px'te SAYFA kaymaz, yalnızca tablo kaydırılır */
.table-scroll {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius); margin-bottom: var(--space-4);
}
.table-scroll:focus-visible { outline-offset: 0 }
.table-scroll.is-scrollable { box-shadow: var(--shadow-scroll) }
.table-scroll.is-scrolled-end { box-shadow: none }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface) }
.data-table th, .data-table td {
	padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top;
	border-bottom: var(--border-width) solid var(--color-border);
}
/* Gri başlık + zebra + kalın ilk sütun (canlı tablo dili) */
.data-table thead th {
	background: var(--color-surface-muted); font-weight: var(--weight-bold);
	font-size: var(--text-xs); color: var(--color-text-muted);
	text-transform: uppercase; letter-spacing: var(--tracking-wide); white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--color-surface-muted) }
.data-table tbody th, .data-table tbody td:first-child {
	font-weight: var(--weight-bold); color: var(--color-text); white-space: nowrap;
}
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0 }

/* Hareket tercihi */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}