/**
 * Kod bloğu düzeltmesi — Prism toolbar'ı kodun üstünden kaldırır.
 *
 * Wavy teması Prism'in toolbar + show-language + copy-to-clipboard
 * eklentilerini kendi paketinde getiriyor ve toolbar'ı `position:absolute;
 * top:15px` ile <pre> içine koyuyor. <pre>'nin üst dolgusu 22.5px, toolbar
 * ise 31px yüksek — yani ilk kod satırının 23px'i toolbar'ın altında kalıyor.
 * Etiketin arka planı da şeffaf olduğu için yazı kodun üstüne biniyor.
 *
 * Buradaki çözüm toolbar'ı <pre>'nin üstünde kendi şeridine alır ve <pre>'ye
 * o şerit kadar üst dolgu verir. Tema dosyalarına dokunulmadığı için tema
 * güncellemelerinden etkilenmez.
 */

div.code-toolbar {
	position: relative;
	margin: 1.5em 0;
}

/* Toolbar artık kodun üstünde kendi şeridi. */
div.code-toolbar > .toolbar {
	top: 1px;
	right: 1px;
	left: 1px;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	background: #eef0f4;
	border-bottom: 1px solid #dfe3ea;
	border-radius: 8px 8px 0 0;
	opacity: 1;
}

/* Kod, şeridin altından başlasın. */
div.code-toolbar > pre[class*="language-"] {
	margin: 0;
	padding-top: 56px;
	overflow-x: hidden;
}

/**
 * Uzun satırlar yatay kaydırma yerine sarsın.
 *
 * Modelin bazı turlarda satır sonu üretmemesi yüzünden bir kod bloğu tek
 * satıra düşebiliyor; `white-space: pre` ile bu blok 2800px genişliğinde bir
 * şeride dönüşüp kutunun (758px) dışına taşıyor ve okunamıyor. Sarma,
 * doğru biçimli blokları da bozmuyor — yalnız çok uzun satırları katlıyor.
 */
div.code-toolbar > pre[class*="language-"] > code[class*="language-"],
.text pre[class*="language-"] > code[class*="language-"] {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* Dil etiketi: şeridin içinde sade bir üst yazı. */
div.code-toolbar > .toolbar > .toolbar-item > span {
	background: transparent;
	color: #5b6472;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
	border-radius: 6px;
	font-size: 11px;
	padding: 5px 12px;
}

/**
 * "PLAINTEXT" etiketi hiçbir şey anlatmıyor — dili bilinmeyen bloklarda
 * etiketi tümden gizle. Gerçek dil etiketi (SQL, YAML, PYTHON…) görünür kalır.
 */
div.code-toolbar:has( > pre.language-plaintext ) > .toolbar > .toolbar-item > span,
div.code-toolbar:has( > pre.language-none ) > .toolbar > .toolbar-item > span {
	display: none;
}

/**
 * Prism'in henüz çalışmadığı ara durum.
 *
 * Ölçüldü: tema Prism'i gecikmeli tetikliyor, o aralıkta <pre> hiç
 * `language-` sınıfı taşımıyor ve yukarıdaki kurallar tutmuyor. İç <code>
 * ise temanın `white-space: pre` değerinde kalıp uzun satırda kutuyu
 * aşıyordu (ölçüm: 798px içerik / 743px kutu). Bu yüzden sarma kuralı
 * sınıftan bağımsız olarak hem <pre>'ye hem iç <code>'a yazılıyor.
 */
.text pre:not([class*="language-"]),
.text pre:not([class*="language-"]) > code:not([class*="language-"]) {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	div.code-toolbar > .toolbar {
		height: 36px;
		padding: 0 8px;
	}

	div.code-toolbar > pre[class*="language-"] {
		padding-top: 48px;
	}
}