/* === EOK VS widget (blog gönderisine gömülen karşılaştırma) === */
.eok-vs { margin: 0 0 var(--eok-sp-6); }
.eok-vs__title {
	margin: 0 0 var(--eok-sp-4);
	font-family: var(--eok-font-display); font-weight: 900;
	letter-spacing: -0.01em; line-height: 1.15;
}
.eok-vs__pickers {
	display: grid; grid-template-columns: 1fr auto 1fr;
	gap: var(--eok-sp-3); align-items: center; margin-bottom: var(--eok-sp-4);
}
.eok-vs__vs {
	font-family: var(--eok-font-display); font-weight: 800;
	color: var(--eok-ink-faint); font-size: var(--eok-fs-400);
}
.eok-vs__pick { display: block; min-width: 0; }
.eok-vs__select {
	width: 100%; max-width: 100%; box-sizing: border-box;
	padding: var(--eok-sp-2) var(--eok-sp-3);
	font-family: var(--eok-font-display); font-weight: 700;
	font-size: var(--eok-fs-300); color: var(--eok-ink);
	background: #fff; border: 1px solid var(--eok-tick); border-radius: var(--eok-radius-ctl);
	cursor: pointer;
}
.eok-vs__select:focus { outline: 2px solid var(--eok-fit); outline-offset: 1px; }
.eok-vs__table.is-loading { opacity: .5; transition: opacity .15s ease; }

.eok-vs-cmp__media th { vertical-align: bottom; padding-bottom: var(--eok-sp-3); }
.eok-vs-cmp__thumb {
	display: block; aspect-ratio: 4 / 3; background: #fff;
	border: 1px solid var(--eok-rule); border-radius: var(--eok-radius); overflow: hidden;
}
.eok-vs-cmp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.eok-vs-cmp__noimg { display: block; width: 100%; height: 100%; background: var(--eok-paper-sunk); }
.eok-vs-cmp__name {
	display: block; margin-top: var(--eok-sp-2);
	font-family: var(--eok-font-display); font-weight: 800;
	font-size: var(--eok-fs-300); line-height: 1.25; color: var(--eok-ink);
}

@media (max-width: 640px) {
	.eok-vs__pickers { grid-template-columns: 1fr; }
	.eok-vs__vs { justify-self: center; }
	.eok-vs-cmp__name { font-size: var(--eok-fs-200); }
	.eok-vs-cmp__thumb { aspect-ratio: 1 / 1; }
}
/* VS altı marka facet linkleri */
.eok-vs__more {
	display: flex; flex-wrap: wrap; gap: var(--eok-sp-4);
	margin: var(--eok-sp-3) 0 0;
}
.eok-vs__more a {
	font-family: var(--eok-font-display); font-weight: 700; font-size: var(--eok-fs-300);
	color: var(--eok-green); text-decoration: none;
}
.eok-vs__more a:hover { text-decoration: underline; }