/**
 * EOK — Ürün sayfası (/oyuncu-koltugu/{slug}/).
 * Tema token'ları (--eok-*) + landing.css üzerine kurulu; yorum/form
 * blokları landing.css'teki .eok-comments / .eok-cform stilini miras alır.
 * Başlangıç sürümü — ince tasarım geçişi sonra.
 */

/* ---------------- Above-the-fold: iki sütun ---------------- */
.eok-pp-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--eok-sp-5);
}
@media ( min-width: 860px ) {
	.eok-pp-top {
		grid-template-columns: minmax( 0, 46% ) minmax( 0, 1fr );
		gap: clamp( 28px, 4vw, 56px );
		align-items: start;
	}
}

.eok-pp-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid var(--eok-rule);
	border-radius: var(--eok-radius);
	overflow: hidden;
	display: grid;
	place-items: center;
}
@media ( min-width: 860px ) {
	.eok-pp-media { position: sticky; top: var(--eok-sp-5); }
}
.eok-pp-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.eok-pp-media__noimg { width: 48px; height: 48px; border: 2px solid var(--eok-tick); border-radius: 50%; opacity: .5; }

.eok-pp-title {
	margin: 0 0 var(--eok-sp-3);
	font-size: clamp( 1.5rem, 1.1rem + 1.8vw, 2.2rem );
	line-height: 1.14;
	letter-spacing: -0.01em;
}

/* Künye satırı */
.eok-pp-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eok-sp-3) var(--eok-sp-4);
	align-items: center;
	margin: 0 0 var(--eok-sp-4);
	padding-bottom: var(--eok-sp-4);
	border-bottom: 1px solid var(--eok-rule);
	font-size: var(--eok-fs-300);
	color: var(--eok-ink-soft);
}
.eok-pp-meta__link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--eok-ink-soft); text-decoration: none;
}
.eok-pp-meta__link:hover { color: var(--eok-fit); }
.eok-pp-meta__link svg { color: var(--eok-ink-faint); }

/* ---------------- Buybox: durum + fiyat + CTA ---------------- */
.eok-pp-buybox {
	display: grid;
	gap: var(--eok-sp-3);
	padding: var(--eok-sp-4);
	background: #fff;
	border: 1px solid var(--eok-rule);
	border-radius: var(--eok-radius);
	margin: 0 0 var(--eok-sp-4);
}

/* Yeşil "Stokta" rozeti */
.eok-pp-stock {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: var(--eok-fs-300);
	font-weight: 700;
	line-height: 1.4;
}
.eok-pp-stock::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.eok-pp-stock.is-in  { color: #fff; background: var(--eok-fit, #1f9d55 ); }
.eok-pp-stock.is-out { color: var(--eok-ink-faint); background: var(--eok-paper-sunk); }

.eok-pp-price { display: flex; align-items: baseline; gap: var(--eok-sp-3); flex-wrap: wrap; }
.eok-pp-price__label { font-size: var(--eok-fs-300); color: var(--eok-ink-faint); }
.eok-pp-price__val { font-size: clamp( 1.6rem, 1.2rem + 1.4vw, 2.1rem ); font-weight: 800; color: var(--eok-ink); }
.eok-pp-price__was { font-size: var(--eok-fs-400); color: var(--eok-ink-faint); text-decoration: line-through; }
.eok-pp-price__soon { margin: 0; color: var(--eok-ink-faint); }

.eok-pp-cta {
	display: inline-flex; justify-content: center; align-items: center;
	padding: 13px 22px;
	font-weight: 700;
	color: #fff;
	background: var(--eok-fit, #1f9d55 );
	border-radius: var(--eok-radius-ctl, 10px );
	text-decoration: none;
	transition: filter .15s ease;
}
.eok-pp-cta:hover { filter: brightness( 1.06 ); }

.eok-pp-history-link,
.eok-pp-readreviews,
.eok-pp-summary__more {
	color: var(--eok-green, #1f9d55 );
	font-weight: 600;
	text-decoration: none;
}
.eok-pp-history-link:hover,
.eok-pp-readreviews:hover,
.eok-pp-summary__more:hover { text-decoration: underline; }

.eok-pp-summary {
	margin: 0 0 var(--eok-sp-3);
	color: var(--eok-ink-soft);
	line-height: 1.55;
}
.eok-pp-summary__more { margin-left: 6px; white-space: nowrap; }
.eok-pp-readreviews { display: inline-block; }

/* ---------------- Satıcılar + özellik tabloları ---------------- */
.eok-pp-h2 {
	margin: 0 0 var(--eok-sp-5);
	font-size: clamp( 1.3rem, 1.05rem + 1.1vw, 1.7rem );
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.eok-pp-sellertable,
.eok-pp-spectable {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--eok-fs-300);
}
.eok-pp-sellertable th,
.eok-pp-sellertable td,
.eok-pp-spectable th,
.eok-pp-spectable td {
	padding: var(--eok-sp-3) var(--eok-sp-3);
	border-bottom: 1px solid var(--eok-rule);
	text-align: left;
	vertical-align: middle;
}
.eok-pp-sellertable thead th { color: var(--eok-ink-faint); font-size: var(--eok-fs-200); text-transform: uppercase; letter-spacing: .06em; }
.eok-pp-sellertable tr.is-cheapest td { background: color-mix( in srgb, var(--eok-fit) 7%, #fff ); }
.eok-pp-sellertable__go { text-align: right; white-space: nowrap; }
.eok-pp-sellertable__go a { color: var(--eok-green, #1f9d55 ); font-weight: 600; text-decoration: none; }
.eok-pp-badge {
	display: inline-block; margin-left: 8px;
	padding: 2px 8px; border-radius: 999px;
	font-size: var(--eok-fs-200); font-weight: 700;
	color: #fff; background: var(--eok-fit, #1f9d55 );
}

.eok-pp-spectable th { width: 42%; color: var(--eok-ink-soft); font-weight: 600; }
.eok-pp-spectable td { color: var(--eok-ink); font-variant-numeric: tabular-nums; }

.eok-pp-flags { display: flex; flex-wrap: wrap; gap: var(--eok-sp-2); margin: 0 0 var(--eok-sp-4); padding: 0; list-style: none; }
.eok-pp-flag {
	padding: 5px 12px; border-radius: 999px;
	font-size: var(--eok-fs-300); font-weight: 600;
	color: var(--eok-ink-soft);
	background: var(--eok-paper-sunk);
	border: 1px solid var(--eok-rule);
}

.eok-pp-note { margin: var(--eok-sp-3) 0 0; font-size: var(--eok-fs-300); color: var(--eok-ink-faint); }

/* Çapa hedeflerinde başlık header'ın altına kaymasın */
.eok-anchor { display: block; height: 0; }
[id].eok-comments,
.eok-pp-historysec,
#eok-pp-specs { scroll-margin-top: var(--eok-sp-6); }


/* ---------------- Fiyat geçmişi: kart mini + alt tab ---------------- */
.eok-pp-spark { margin-top: var(--eok-sp-1); }
/* Kart içi kompakt grafik: landing.css'teki 260px'i ez. */
.eok-chart--mini { height: 88px; }

.eok-pp-tabs {
	display: inline-flex; gap: 4px; margin-bottom: var(--eok-sp-4);
	padding: 4px; background: var(--eok-paper-sunk); border-radius: 999px;
}
.eok-pp-tab {
	appearance: none; border: 0; cursor: pointer;
	padding: 8px 20px; border-radius: 999px;
	font: inherit; font-weight: 700; font-size: var(--eok-fs-300);
	color: var(--eok-ink-soft); background: transparent;
	transition: background .15s ease, color .15s ease;
}
.eok-pp-tab.is-active { background: #fff; color: var(--eok-ink); box-shadow: 0 1px 3px rgba( 16, 16, 16, .08 ); }

.eok-pp-tabpanel[hidden] { display: none; }

.eok-pp-histtable { width: 100%; border-collapse: collapse; font-size: var(--eok-fs-300); }
.eok-pp-histtable th,
.eok-pp-histtable td { padding: 10px var(--eok-sp-3); border-bottom: 1px solid var(--eok-rule); text-align: left; }
.eok-pp-histtable thead th { color: var(--eok-ink-faint); font-size: var(--eok-fs-200); text-transform: uppercase; letter-spacing: .06em; }
.eok-pp-histtable td.eok-num { font-variant-numeric: tabular-nums; }
.eok-pp-histtable td.is-up   { color: var(--eok-signal); font-weight: 600; }
.eok-pp-histtable td.is-down { color: var(--eok-fit); font-weight: 600; }

/* ---------------- İnceleme / Soru blokları (miras + ayrım) ---------------- */
/* İki akışı görsel olarak ayır: soru bloğuna hafif farklı sol vurgu. */
.eok-comments--questions { background: color-mix( in srgb, var(--eok-fit) 3%, transparent ); }
.eok-comments--reviews .eok-comments__formtitle,
.eok-comments--questions .eok-comments__formtitle { color: var(--eok-ink); }


/* ---------------- Benzer koltuklar: tek satır yatay kaydırma ---------------- */
/* Yüksek özgüllük: landing.css'teki .eok-cards / .eok-card grid kurallarını kesin ez. */
section.eok-pp-similar .eok-cards {
	display: grid !important;
	grid-template-columns: none !important;   /* landing'in olası çok-kolon grid'ini iptal et */
	grid-auto-flow: column !important;
	grid-auto-columns: 220px !important;
	gap: var(--eok-sp-4);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--eok-sp-3);
	scrollbar-width: thin;
}
section.eok-pp-similar .eok-cards > .eok-card {
	scroll-snap-align: start;
	width: 220px !important;
	max-width: 220px !important;
	min-width: 220px !important;
	margin: 0 !important;
}
@media ( max-width: 560px ) {
	section.eok-pp-similar .eok-cards { grid-auto-columns: 168px !important; }
	section.eok-pp-similar .eok-cards > .eok-card { width: 168px !important; max-width: 168px !important; min-width: 168px !important; }
} tam kolonu doldur */
.eok-pp-similar .eok-cards > .eok-card {
	scroll-snap-align: start;
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* ---------------- En çok karşılaştırılan: yatay kaydırılan şerit ---------------- */
/* --narrow max-width'ini bu bölümde kesin ez (aksi halde şerit dar kalıyordu). */
/* Bölümü benzer koltuklarla AYNI genişliğe getir: narrow'u iptal etme,
   normal wrap gibi ortala (kenar boşlukları korunur, sola yapışmaz). */
section.eok-pp-comparedsec .eok-wrap.eok-wrap--narrow {
	max-width: var( --eok-wrap, 1200px ) !important;
	margin-inline: auto !important;
}

section.eok-pp-comparedsec .eok-pp-versus-strip {
	display: grid !important;
	grid-template-columns: none !important;
	grid-auto-flow: column !important;
	grid-auto-columns: 380px !important;
	gap: var(--eok-sp-5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: var(--eok-sp-3);
	scrollbar-width: thin;
}
section.eok-pp-comparedsec .eok-pp-versus {
	margin: 0 !important;
	scroll-snap-align: start;
	width: 380px !important;
	max-width: 380px !important;
	min-width: 380px !important;
	overflow: hidden;
}
/* Tablo kolona zorla sığsın: sabit yerleşim + yüzde genişlikler */
section.eok-pp-comparedsec .eok-pv-table {
	width: 100% !important;
	table-layout: fixed !important;
	font-size: var(--eok-fs-200);
}
section.eok-pp-comparedsec .eok-pv-table th[scope="row"] { width: 44% !important; }
section.eok-pp-comparedsec .eok-pv-table td { width: 28% !important; word-break: break-word; }
section.eok-pp-comparedsec .eok-pv-table th,
section.eok-pp-comparedsec .eok-pv-table td { padding: 7px 8px !important; }
section.eok-pp-comparedsec .eok-pv__thumb { max-width: 88px !important; }
section.eok-pp-comparedsec .eok-pv__name { font-size: var(--eok-fs-200) !important; }
@media ( max-width: 560px ) {
	section.eok-pp-comparedsec .eok-pp-versus-strip { grid-auto-columns: 300px !important; }
	section.eok-pp-comparedsec .eok-pp-versus { width: 300px !important; max-width: 300px !important; min-width: 300px !important; }
}

/* ---------------- En çok karşılaştırılan (görselli + linkli tablo) ---------------- */
.eok-pp-versus + .eok-pp-versus { margin-top: var(--eok-sp-6); }

.eok-pv-table { width: 100%; border-collapse: collapse; font-size: var(--eok-fs-300); }
.eok-pv-table th[scope="row"] { text-align: left; color: var(--eok-ink-soft); font-weight: 600; width: 34%; }
.eok-pv-table td,
.eok-pv-table th { padding: 10px var(--eok-sp-3); border-bottom: 1px solid var(--eok-rule); vertical-align: middle; }
.eok-pv-table td { font-variant-numeric: tabular-nums; }
.eok-pv-table tr.is-diff td { background: color-mix( in srgb, var(--eok-fit) 5%, transparent ); }

/* Başlık: görsel + isim + link */
.eok-pv-table__media th { vertical-align: bottom; padding-bottom: var(--eok-sp-3); }
.eok-pv__thumb {
	display: block; aspect-ratio: 1 / 1; max-width: 140px; background: #fff;
	border: 1px solid var(--eok-rule); border-radius: var(--eok-radius); overflow: hidden;
	margin-bottom: var(--eok-sp-2);
}
.eok-pv__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.eok-pv__noimg { display: block; width: 100%; height: 100%; background: var(--eok-paper-sunk); }
.eok-pv__name {
	display: block; font-weight: 700; line-height: 1.25; color: var(--eok-ink);
	font-size: var(--eok-fs-300);
}
.eok-pv__name a { color: var(--eok-ink); text-decoration: none; }
.eok-pv__name a:hover { color: var(--eok-fit); text-decoration: underline; }
.eok-pv__tag {
	display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
	font-size: var(--eok-fs-200); font-weight: 700; color: #fff; background: var(--eok-ink);
}
.eok-pv-table__cta td { border-bottom: 0; }
.eok-pv__go { color: var(--eok-green, #1f9d55 ); font-weight: 600; text-decoration: none; }
.eok-pv__go:hover { text-decoration: underline; }

@media ( max-width: 560px ) {
	.eok-pv-table th[scope="row"] { width: 40%; }
	.eok-pv__thumb { max-width: 96px; }
	.eok-pv__name { font-size: var(--eok-fs-200); }
}

/* ---------------- İnceleme yıldız puanı ---------------- */
.eok-stars { display: inline-flex; gap: 2px; line-height: 1; }
.eok-stars svg { width: 18px; height: 18px; }
.eok-stars .is-on { fill: #f5a623; stroke: #f5a623; }
.eok-stars .is-off { fill: none; stroke: var(--eok-tick); }

/* Ortalama rozeti (blok başlığı yanında) */
.eok-rating-avg { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: var(--eok-fs-300); color: var(--eok-ink-soft); }
.eok-rating-avg strong { font-size: var(--eok-fs-500); color: var(--eok-ink); }

/* Formda yıldız seçici (radyo, JS'siz de çalışır) */
.eok-rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 6px 0 2px; }
.eok-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.eok-rate label { cursor: pointer; color: var(--eok-tick); display: inline-flex; }
.eok-rate label svg { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; }
/* Hover/seçim: seçilen ve solundakiler (row-reverse olduğu için ~ ile sağdakiler) sarı */
.eok-rate input:checked ~ label,
.eok-rate label:hover,
.eok-rate label:hover ~ label { color: #f5a623; }

/* Yorum satırında yıldız */
.eok-comment__stars { margin: 2px 0 6px; }

/* ---------------- Görsel üstü aksiyonlar (favori / karşılaştır / kopyala) ---------------- */
.eok-pp-media { position: relative; }
.eok-pp-actions {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	display: flex; flex-direction: column; gap: 8px;
}
.eok-pp-act {
	appearance: none; border: 1px solid var(--eok-rule); cursor: pointer;
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba( 255, 255, 255, .92 ); backdrop-filter: blur( 4px );
	color: var(--eok-ink-soft);
	transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}
.eok-pp-act:hover { color: var(--eok-fit); border-color: var(--eok-fit); }
.eok-pp-act:active { transform: scale( .92 ); }
.eok-pp-act svg { width: 19px; height: 19px; pointer-events: none; }
.eok-pp-act.is-on { color: #e0245e; border-color: #e0245e; background: #fff; }
.eok-pp-act.is-on svg { fill: currentColor; }
.eok-pp-act.is-cmp-on { color: var(--eok-fit); border-color: var(--eok-fit); }
.eok-pp-act__flash {
	position: absolute; right: 48px; top: 50%; transform: translateY( -50% );
	white-space: nowrap; background: var(--eok-ink); color: #fff;
	font-size: var(--eok-fs-200); font-weight: 600;
	padding: 4px 9px; border-radius: 6px; opacity: 0; pointer-events: none;
	transition: opacity .15s ease;
}
.eok-pp-act__flash.is-show { opacity: 1; }


/* ---------------- Mobil responsive düzeltmeleri ---------------- */
@media ( max-width: 859px ) {
	/* Yapışkan görsel mobilde gerekmez */
	.eok-pp-media { position: relative; top: auto; }
	.eok-pp-title { font-size: clamp( 1.35rem, 1.1rem + 3.5vw, 1.9rem ); }
	/* Buybox tam genişlik, CTA parmak dostu */
	.eok-pp-cta { width: 100%; padding: 15px 20px; }
	/* Künye satırı sıkışmasın */
	.eok-pp-meta { gap: 8px 14px; font-size: var(--eok-fs-200); }
}
@media ( max-width: 560px ) {
	/* Aksiyon butonları biraz küçülsün, foto köşesinde durur */
	.eok-pp-act { width: 36px; height: 36px; }
	.eok-pp-act svg { width: 17px; height: 17px; }
	/* Tab bar taşarsa kaydır */
	.eok-pp-tabs { max-width: 100%; }
	/* Fiyat geçmişi ve özellik tabloları: hücre içi kelime kırma */
	.eok-pp-histtable th, .eok-pp-histtable td,
	.eok-pp-spectable th, .eok-pp-spectable td,
	.eok-pp-sellertable th, .eok-pp-sellertable td { padding: 9px 8px; }
	.eok-pp-histtable { font-size: var(--eok-fs-200); }
	/* Fiyat büyük kalmasın taşmasın */
	.eok-pp-price__val { font-size: clamp( 1.4rem, 1.1rem + 4vw, 1.9rem ); }
	/* Yatay tablo taşmasını güvenceye al: kaydırılabilir sarmalayıcı */
	.eok-pp-spectable, .eok-pp-sellertable, .eok-pp-histtable { display: block; overflow-x: auto; white-space: nowrap; }
}