/* ==========================================================================
   Makale içeriği: tipografi, uyarı kutuları, adımlar, kod, klavye tuşları.
   Hem sitede hem blok editöründe kullanılır.
   ========================================================================== */

:root {
	--sd-note: #2f6fd6;
	--sd-tip: #1f8a4c;
	--sd-warning: #b7791f;
	--sd-danger: #c2362f;
	--sd-code-bg: #102029;
	--sd-code-text: #e4edf2;
	--sd-code-line: #22394a;
	--sd-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
	--sd-ico-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
	--sd-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.5'/%3E%3C/svg%3E");
	--sd-ico-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l5 5v8l-5 5H8l-5-5V8l5-5Z'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
	--sd-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
	--sd-note: #7aa7f0;
	--sd-tip: #5cc68a;
	--sd-warning: #e7b357;
	--sd-danger: #f07f78;
	--sd-code-bg: #0a141b;
	--sd-code-line: #1d3140;
}

/* Metin ---------------------------------------------------------------- */
.sd-prose {
	font-size: 1.125rem;
	line-height: 1.7;
	overflow-wrap: break-word;
}
.sd-prose > * + * { margin-top: 1.1em; }
.sd-prose > * { margin-bottom: 0; }
.sd-prose h2,
.sd-prose h3,
.sd-prose h4 {
	font-family: var(--sd-font-head, "Bricolage", system-ui, sans-serif);
	line-height: 1.2;
	letter-spacing: -0.015em;
	scroll-margin-top: 96px;
	position: relative;
}
.sd-prose h2 { font-size: 1.75rem; font-weight: 750; margin-top: 2.2em; }
.sd-prose h3 { font-size: 1.32rem; font-weight: 700; margin-top: 1.8em; }
.sd-prose h4 { font-size: 1.1rem; font-weight: 700; margin-top: 1.5em; }
.sd-prose h2 + *,
.sd-prose h3 + *,
.sd-prose h4 + * { margin-top: 0.6em; }
.sd-prose a {
	color: var(--sd-primary);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.sd-prose a:hover { color: var(--sd-primary-strong); text-decoration-thickness: 2.5px; }
.sd-prose strong { font-weight: 700; }
.sd-prose ul,
.sd-prose ol { padding-left: 1.4em; }
.sd-prose li + li { margin-top: 0.4em; }
.sd-prose li > ul,
.sd-prose li > ol { margin-top: 0.4em; }
.sd-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.sd-prose figure { margin-left: 0; margin-right: 0; }
.sd-prose figcaption,
.sd-prose .wp-element-caption {
	font-size: 0.9rem;
	color: var(--sd-muted);
	margin-top: 0.5em;
	text-align: center;
}
.sd-prose blockquote {
	margin-left: 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--sd-line);
	color: var(--sd-muted);
	font-style: italic;
}
.sd-prose hr {
	border: 0;
	border-top: 1px solid var(--sd-line);
	margin: 2.4em 0;
}
.sd-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.98rem;
}
.sd-prose .wp-block-table { overflow-x: auto; }
.sd-prose th,
.sd-prose td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--sd-line);
	text-align: left;
	vertical-align: top;
}
.sd-prose th { font-weight: 700; background: var(--sd-surface-2); }

/* Başlık bağlantısı (#) */
.sd-anchor {
	margin-left: 0.35em;
	color: var(--sd-muted) !important;
	text-decoration: none !important;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.15s;
}
.sd-prose h2:hover .sd-anchor,
.sd-prose h3:hover .sd-anchor,
.sd-anchor:focus-visible { opacity: 1; }

/* Satır içi kod ve klavye tuşları ------------------------------------- */
.sd-prose :not(pre) > code {
	font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.86em;
	padding: 0.12em 0.4em;
	border-radius: 5px;
	background: var(--sd-surface-2);
	border: 1px solid var(--sd-line);
	white-space: break-spaces;
}
kbd {
	display: inline-block;
	min-width: 1.6em;
	padding: 0.08em 0.45em 0.12em;
	font-family: inherit;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--sd-text);
	background: var(--sd-surface, #fff);
	border: 1px solid var(--sd-line);
	border-bottom-width: 3px;
	border-radius: 6px;
	vertical-align: 0.08em;
}
.sd-keys { white-space: nowrap; }
.sd-keys > span { margin: 0 0.2em; color: var(--sd-muted); font-size: 0.85em; }

/* Kod blokları -------------------------------------------------------- */
.sd-prose pre,
.sd-codebox pre {
	font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--sd-code-text);
	background: var(--sd-code-bg);
	border-radius: 12px;
	padding: 1.1em 1.2em;
	overflow-x: auto;
	tab-size: 4;
	white-space: pre;
	margin: 0;
}
.sd-prose pre code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.sd-prose > pre,
.sd-prose > .wp-block-code { margin-top: 1.1em; }

.sd-codebox {
	position: relative;
	border-radius: 12px;
	background: var(--sd-code-bg);
	overflow: hidden;
}
.sd-codebox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 8px 6px 16px;
	border-bottom: 1px solid var(--sd-code-line);
	color: #9fb4c2;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.sd-codebox__lang::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sd-accent);
	margin-right: 8px;
	vertical-align: 1px;
}
.sd-codebox pre { border-radius: 0; background: transparent; }
.sd-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font: inherit;
	font-weight: 700;
	color: #d5e3ec;
	background: transparent;
	border: 1px solid var(--sd-code-line);
	border-radius: 8px;
	cursor: pointer;
}
.sd-copy:hover { background: rgba(255, 255, 255, 0.06); }
.sd-copy.is-done { color: #8fe0b0; border-color: #2c6b4a; }

/* Prism renkleri (koyu kod zemini için) */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #7f97a6; font-style: italic; }
.token.punctuation { color: #b5c6d1; }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted, .token.key, .token.atrule { color: #7fd1e0; }
.token.boolean, .token.number { color: #f6b26b; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a6e0a0; }
.token.operator, .token.entity, .token.url { color: #e8c07d; }
.token.keyword, .token.function, .token.class-name { color: #f0a7c7; }
.token.variable, .token.parameter { color: #ffd479; }
.token.regex, .token.important { color: #f6b26b; }
.token.important, .token.bold { font-weight: 700; }

/* Uyarı kutuları ------------------------------------------------------ */
.sd-callout,
.wp-block-group.is-style-sd-note,
.wp-block-group.is-style-sd-tip,
.wp-block-group.is-style-sd-warning,
.wp-block-group.is-style-sd-danger {
	--c: var(--sd-note);
	--i: var(--sd-ico-info);
	position: relative;
	padding: 1em 1.2em 1em 3.3em;
	border-radius: 12px;
	background: color-mix(in srgb, var(--c) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
	font-size: 1.02rem;
	line-height: 1.6;
}
.sd-callout::before,
.wp-block-group.is-style-sd-note::before,
.wp-block-group.is-style-sd-tip::before,
.wp-block-group.is-style-sd-warning::before,
.wp-block-group.is-style-sd-danger::before {
	content: "";
	position: absolute;
	left: 1.1em;
	top: 1.12em;
	width: 1.35em;
	height: 1.35em;
	background: var(--c);
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.sd-callout--tip, .wp-block-group.is-style-sd-tip { --c: var(--sd-tip); --i: var(--sd-ico-bulb); }
.sd-callout--warning, .wp-block-group.is-style-sd-warning { --c: var(--sd-warning); --i: var(--sd-ico-alert); }
.sd-callout--danger, .wp-block-group.is-style-sd-danger { --c: var(--sd-danger); --i: var(--sd-ico-stop); }
.sd-callout > * + *,
.wp-block-group[class*="is-style-sd-"] > * + * { margin-top: 0.6em; }
.sd-callout > :first-child,
.wp-block-group[class*="is-style-sd-"] > :first-child { margin-top: 0; }
.sd-callout__title {
	font-weight: 700;
	color: color-mix(in srgb, var(--c) 75%, var(--sd-text));
}

/* Adımlar ------------------------------------------------------------- */
.sd-steps,
.sd-prose ol.sd-steps,
.sd-prose ol.is-style-sd-steps,
ol.wp-block-list.is-style-sd-steps {
	list-style: none;
	counter-reset: sd-step;
	padding-left: 0;
}
.sd-steps > li,
ol.is-style-sd-steps > li {
	counter-increment: sd-step;
	position: relative;
	padding: 0 0 1.3em 3.2em;
	margin: 0;
}
.sd-steps > li::before,
ol.is-style-sd-steps > li::before {
	content: counter(sd-step);
	position: absolute;
	left: 0;
	top: -0.05em;
	width: 2.05em;
	height: 2.05em;
	display: grid;
	place-items: center;
	font-family: var(--sd-font-head, "Bricolage", system-ui, sans-serif);
	font-weight: 800;
	font-size: 0.95em;
	color: var(--sd-accent-ink, #2a1c00);
	background: var(--sd-accent);
	border-radius: 50%;
}
.sd-steps > li::after,
ol.is-style-sd-steps > li::after {
	content: "";
	position: absolute;
	left: calc(1.025em * 0.95 - 1px);
	top: 2.2em;
	bottom: 0.2em;
	width: 2px;
	background: var(--sd-line);
}
.sd-steps > li:last-child,
ol.is-style-sd-steps > li:last-child { padding-bottom: 0; }
.sd-steps > li:last-child::after,
ol.is-style-sd-steps > li:last-child::after { display: none; }
.sd-steps > li + li,
ol.is-style-sd-steps > li + li { margin-top: 0; }
.sd-steps__title { font-weight: 700; font-size: 1.08em; }
.sd-steps > li > * + * { margin-top: 0.5em; }
.sd-steps pre,
.sd-steps .sd-codebox { margin-top: 0.7em; }

/* Onay işaretli liste */
ul.is-style-sd-checks { list-style: none; padding-left: 0; }
ul.is-style-sd-checks > li { position: relative; padding-left: 1.9em; }
ul.is-style-sd-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.15em;
	height: 1.15em;
	background: var(--sd-primary);
	-webkit-mask: var(--sd-ico-check) center / contain no-repeat;
	mask: var(--sd-ico-check) center / contain no-repeat;
}

/* Açılır sorular (Ayrıntılar bloğu) */
.sd-prose details.wp-block-details {
	border: 1px solid var(--sd-line);
	border-radius: 12px;
	padding: 0.8em 1.1em;
	background: var(--sd-surface, #fff);
}
.sd-prose details.wp-block-details + details.wp-block-details { margin-top: 0.6em; }
.sd-prose details.wp-block-details summary { font-weight: 700; cursor: pointer; }
.sd-prose details.wp-block-details[open] summary { margin-bottom: 0.5em; }