/**
 * DevreTech — yalnızca geniş ekranda sol/sağ boşlukta hafif devre yolları
 * (html pseudo — body ::before mega menü ile çakışmasın diye)
 */

html.devre-kenar::before,
html.devre-kenar::after {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	width: clamp(0px, calc((100vw - var(--genislik, 1280px)) / 2), 100px);
	pointer-events: none;
	opacity: 0;
	background-repeat: repeat-y;
	background-size: 100px 200px;
	z-index: 0;
}

@media (min-width: 1180px) {
	html.devre-kenar::before,
	html.devre-kenar::after {
		opacity: 1;
	}
}

html.devre-kenar::before {
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='200' viewBox='0 0 100 200'%3E%3Cpath d='M12 0v40h30v20H12v50M12 110h45v25H12v65' fill='none' stroke='%231a4b8c' stroke-width='1' stroke-opacity='0.14' stroke-linecap='round'/%3E%3Ccircle cx='42' cy='60' r='2' fill='%23e85d04' fill-opacity='0.25'/%3E%3Ccircle cx='12' cy='110' r='1.5' fill='%231a4b8c' fill-opacity='0.2'/%3E%3C/svg%3E");
}

html.devre-kenar::after {
	right: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='200' viewBox='0 0 100 200'%3E%3Cpath d='M88 0v55h-35v20h35v45M88 140h-50v25h50v35' fill='none' stroke='%231a4b8c' stroke-width='1' stroke-opacity='0.14' stroke-linecap='round'/%3E%3Ccircle cx='53' cy='75' r='2' fill='%23e85d04' fill-opacity='0.25'/%3E%3Ccircle cx='88' cy='140' r='1.5' fill='%231a4b8c' fill-opacity='0.2'/%3E%3C/svg%3E");
}

@media (max-width: 1179px) {
	html.devre-kenar::before,
	html.devre-kenar::after {
		display: none;
	}
}
