/* ===== docs.css — minimal ve okunaklı ===== */

/* Değişkenler */
:root {
	--bg: #ffffff;
	--fg: #161616;
	--fg-dim: #6f6f6f;
	--accent: #2b6adf;
	--border: #e2e2e2;
	--surface: #f7f7f7;
	--code-bg: #f3f3f3;
	--mono: "JetBrains Mono", "Courier New", monospace;
}
[data-theme="dark"] {
	--bg: #111213;
	--fg: #e6e6e6;
	--fg-dim: #9aa0a6;
	--accent: #7aa2ff;
	--border: #2a2d31;
	--surface: #15171a;
	--code-bg: #17191c;
}

/* Reset (kısa) */
* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--mono);
	line-height: 1.55;
}
a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	opacity: 0.9;
}
img {
	max-width: 100%;
	display: block;
}

/* ===== Üst başlık ve gezinme ===== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.header-content {
	max-width: 1050px;
	margin: 0 auto;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.site-title {
	color: var(--fg);
	font-weight: 700;
}
.prompt {
	color: var(--accent);
}
.theme-toggle {
	font: inherit;
	background: var(--surface);
	color: var(--fg);
	border: 1px solid var(--border);
	padding: 6px 10px;
	cursor: pointer;
}

/* Dropdown menü (hover + klavye + .nav-open desteği) */
.nav {
	display: flex;
	gap: 12px;
	align-items: center;
}
.nav-item {
	position: relative;
}
.nav-link {
	display: inline-block;
	padding: 6px 10px;
	color: var(--fg);
}
.nav-menu,
.menu {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: -1px; /* boşluk yok */
	min-width: 12rem;
	background: var(--bg);
	border: 1px solid var(--border);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	display: none;
	padding: 6px 0;
	z-index: 100;
}
.nav-menu a,
.menu a {
	display: block;
	padding: 7px 10px;
	color: var(--fg);
}
.nav-menu a:hover,
.menu a:hover {
	background: var(--surface);
}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item:hover > .menu,
.nav-item:focus-within > .menu {
	display: block;
}
.nav-item.nav-open > .nav-menu,
.nav-item.nav-open > .menu {
	display: block;
}

/* ===== Doküman iskeleti ===== */
.docs-shell {
	max-width: 1050px;
	margin: 20px auto;
	padding: 0 14px;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 18px;
}
.docs-nav {
	align-self: start;
	position: sticky;
	top: 66px;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 8px;
	padding: 12px;
}
.docs-search {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--fg);
	border-radius: 6px;
	margin-bottom: 10px;
}
.docs-nav :where(h4) {
	margin: 8px 0 6px;
	color: var(--fg-dim);
	font-size: 0.95rem;
}
.docs-nav a {
	display: block;
	padding: 6px 0;
	color: var(--fg);
}

/* İçerik kutusu */
.docs-content {
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 8px;
	padding: 16px;
}
.docs-header {
	border-bottom: 1px solid var(--border);
	padding-bottom: 8px;
	margin-bottom: 12px;
}
.docs-title {
	margin: 0 0 4px 0;
	font-size: 1.25rem;
}
.docs-subtle {
	margin: 0;
	color: var(--fg-dim);
}

/* Metin ritmi */
.docs-body {
	font-size: 0.98rem;
}
.docs-body :where(p, ul, ol, pre, blockquote, figure) {
	margin: 10px 0;
}
.docs-body :where(h2) {
	margin: 18px 0 8px 0;
	font-size: 1.12rem;
}
.docs-body :where(h3) {
	margin: 14px 0 6px 0;
	font-size: 1.02rem;
}
.docs-body :where(h2, h3, [id]) {
	scroll-margin-top: 80px;
}
.docs-body :where(ul, ol) {
	padding-left: 20px;
}
.docs-body :where(blockquote) {
	border-left: 3px solid var(--border);
	padding: 6px 10px;
	color: var(--fg-dim);
	background: transparent;
}

/* Kod ve satır içi kod */
code {
	font-family: var(--mono);
	font-size: 0.92rem;
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.08em 0.32em;
}
pre {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 12px;
	overflow: auto;
}
pre code {
	border: 0;
	padding: 0;
	background: transparent;
	font-size: 0.92rem;
}

/* Tablo (doküman içeriği için) */
.docs-body table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 10px 0;
	font-size: 0.95rem;
}
.docs-body thead th {
	text-align: left;
	background: var(--bg);
	color: var(--fg);
	border: 1px solid var(--border);
	padding: 6px 8px;
}
.docs-body tbody td {
	border: 1px solid var(--border);
	padding: 6px 8px;
	vertical-align: top;
	background: var(--surface);
}
.nowrap {
	white-space: nowrap;
}
.break {
	word-break: break-word;
}

/* Rozet ve küçük yardımcılar */
.badge {
	display: inline-block;
	font-size: 0.72rem;
	padding: 2px 6px;
	margin-left: 6px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg);
	color: var(--fg-dim);
}

/* Sayfalama */
.docs-pager {
	margin-top: 16px;
	border-top: 1px solid var(--border);
	padding-top: 10px;
}
.docs-pager a {
	color: var(--accent);
}

/* Alt bilgi */
.site-footer {
	border-top: 1px solid var(--border);
	margin-top: 24px;
}
.site-footer .container {
	max-width: 1050px;
	margin: 0 auto;
	padding: 14px;
}

/* Erişilebilir odak */
:where(a, button, .docs-search):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Mobil */
@media (max-width: 760px) {
	.docs-shell {
		grid-template-columns: 1fr;
	}
	.docs-nav {
		position: static;
	}
	.header-content {
		flex-wrap: wrap;
		gap: 10px;
	}
	.nav {
		flex-wrap: wrap;
	}
	.nav-menu,
	.menu {
		min-width: 11rem;
	}
}