/* ============================================================================
   Ürün detay (single-urun.php) + ürün kategorisi (taxonomy-urun_kategori.php)
   ----------------------------------------------------------------------------
   Renk / tipografi / boşluk değerleri theme.json tokenlarından okunur; bu
   dosyada ham hex ya da px font-size YOKTUR. Yarı saydam tonlar color-mix ile
   token üzerinden üretilir.

   KAPSAMLAMA: bütün seçiciler `.eb-scope-urun` altındadır. parts/ dizinindeki
   dosyalar paralel yazılıyor ve hepsi app.css'ten sonra alfabetik yükleniyor;
   .eb-accordion / .eb-ctaband / .eb-mediacard gibi paylaşılan bileşen adlarını
   başka bir parça dosyası da tanımlarsa bu iki sayfa tipi etkilenmez, bu dosya
   da başka sayfaları bozmaz. (İleride app.css'e taşınmaları önerilir.)

   Breakpoint'ler app.css ile aynı: 1080px · 900px · 640px. Yenisi eklenmedi.
   ========================================================================= */

/* Hero ve iki kolonlu bölümler üstten hizalanır (app.css merkezliyor). */
.eb-scope-urun .eb-split { align-items: start; }

/* Split kolonu içindeki bölüm başlığı kendi alt boşluğunu taşımaz. */
.eb-scope-urun .eb-split .eb-sechead { margin-bottom: var(--wp--preset--spacing--30); }

/* --------------------------------------------------------- sayfa başlığı */

.eb-scope-urun .eb-pagehead {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}
.eb-scope-urun .eb-pagehead .eb-crumbs { margin-bottom: var(--wp--preset--spacing--50); }
.eb-scope-urun .eb-pagehead h1 { margin: 14px 0 18px; }
.eb-scope-urun .eb-pagehead__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--body);
}
.eb-scope-urun .eb-pagehead__meta { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------- ürün hero */

.eb-scope-urun .eb-urunhero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80); }
.eb-scope-urun .eb-urunhero .eb-crumbs { margin-bottom: var(--wp--preset--spacing--50); }
.eb-scope-urun .eb-urunhero__body h1 { margin: 14px 0 16px; }
.eb-scope-urun .eb-urunhero__lead {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--body);
}
.eb-scope-urun .eb-urunhero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eb-scope-urun .eb-urunhero__geri { margin: var(--wp--preset--spacing--40) 0 0; }

/* --------------------------------------------------------- model listesi */

.eb-scope-urun .eb-modellist {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.eb-scope-urun .eb-modelrow {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r-xl);
	overflow: hidden;
}
.eb-scope-urun .eb-modelrow > * { min-width: 0; }

/* Masaüstünde görsel kolonu satır yüksekliğini doldurur (mutlak konum, yüzde
   yükseklik belirsizliği olmasın); ≤900px'te akışa dönüp 4:3 olur. */
.eb-scope-urun .eb-modelrow__media { position: relative; min-height: 280px; }
.eb-scope-urun .eb-modelrow__frame {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
	border: 0;
	border-right: 1px solid var(--wp--preset--color--line-soft);
}

.eb-scope-urun .eb-modelrow__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
}
.eb-scope-urun .eb-modelrow__title { margin: 0 0 8px; font-size: var(--wp--preset--font-size--heading-md); }
.eb-scope-urun .eb-modelrow__title a { color: inherit; text-decoration: none; }
.eb-scope-urun .eb-modelrow__title a:hover { color: var(--wp--preset--color--accent); }
.eb-scope-urun .eb-modelrow__excerpt {
	margin: 0;
	max-width: 62ch;
	color: var(--wp--preset--color--body);
}
.eb-scope-urun .eb-modelrow__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 14px var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--line-soft);
}
.eb-scope-urun .eb-modelrow__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}

/* --------------------------------------------------------- tablolar */

/* .eb-scroll-x sarmalayıcısı app.css'te; kenarlık/yuvarlama burada. */
.eb-scope-urun .eb-tablo {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r-lg);
}
.eb-scope-urun .eb-tablo-ipucu {
	display: none;
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Karşılaştırma tablosu — 6 kolon, dar ekranda .eb-scroll-x içinde kayar,
   ürün adı kolonu kaydırma sırasında sabit kalır. */
.eb-scope-urun .eb-ctable {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
}
.eb-scope-urun .eb-ctable :is(th, td) {
	padding: 15px 18px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
}
.eb-scope-urun .eb-ctable tr:last-child :is(th, td) { border-bottom: 0; }
.eb-scope-urun .eb-ctable thead th {
	background: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-warm);
	white-space: nowrap;
}
.eb-scope-urun .eb-ctable tbody th {
	position: sticky;
	left: 0;
	background: var(--wp--preset--color--surface);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.eb-scope-urun .eb-ctable thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}
.eb-scope-urun .eb-ctable tbody th a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: inherit;
	text-decoration: none;
}
.eb-scope-urun .eb-ctable tbody th a:hover { color: var(--wp--preset--color--accent); }
.eb-scope-urun .eb-ctable__bos { color: var(--wp--preset--color--muted-warm); }

/* Ürün specs tablosu (label ↔ value). Yalnızca 2 kolon olduğu için dar ekranda
   kaydırmak yerine sarması daha okunur: min-width sıfırlanır. Sarmalayıcı yine
   .eb-scroll-x — bölünemeyen uzun bir değer gelirse gövde değil tablo kayar. */
.eb-scope-urun .eb-dl {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r-lg);
	overflow: hidden;
}
.eb-scope-urun .eb-dl :is(th, td) {
	padding: 15px 22px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
}
.eb-scope-urun .eb-dl tr:last-child :is(th, td) { border-bottom: 0; }
.eb-scope-urun .eb-dl th {
	width: 38%;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}
.eb-scope-urun .eb-dl td { font-weight: 600; color: var(--wp--preset--color--ink); }

/* --------------------------------------------------------- prose */

.eb-scope-urun .eb-urun-prose > :first-child { margin-top: 0; }

/* --------------------------------------------------------- referans kartı */

.eb-scope-urun .eb-mediacard {
	display: block;
	text-decoration: none;
	color: inherit;
}
.eb-scope-urun .eb-mediacard .eb-frame__img { transition: scale .5s var(--eb-ease); }
.eb-scope-urun .eb-mediacard:hover .eb-frame__img { scale: 1.04; }
.eb-scope-urun .eb-mediacard__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 14px;
}
.eb-scope-urun .eb-mediacard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.eb-scope-urun .eb-mediacard__ilce {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.eb-scope-urun .eb-mediacard__ilce .eb-icon { color: var(--wp--preset--color--accent); }
.eb-scope-urun .eb-mediacard__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-sm);
}
.eb-scope-urun .eb-mediacard:hover .eb-mediacard__title { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------- akordeon (SSS) */

.eb-scope-urun .eb-accordion {
	display: grid;
	gap: 12px;
	/* 1440px kapsayıcıda sola yapışıyordu, sağda ~550px ölü alan kalıyordu
	   (kullanıcı bildirdi). Ana sayfadaki .eb-sss ile aynı davranış: ortalanır.
	   Ölçü 860px elle yazılmıştı; aynı sayfadaki ürün açıklamasından 282px
	   genişti ve sayfa iki ayrı eksende duruyordu. --eb-metin-eksen'e bağlandı. */
	max-width: var(--eb-metin-eksen);
	margin-inline: auto;
}
/* Ortalanan akordeonun üstündeki bölüm başlığı da aynı ölçüde ortalanmalı,
   yoksa başlık solda kalıp akordeon ortada duruyor. */
.eb-scope-urun .eb-sssbolum .eb-sechead {
	max-width: var(--eb-metin-eksen);
	margin-inline: auto;
}

/* TEKNİK DÖKÜM HERO'NUN SAĞ KOLONUNDA.
   Eskiden ayrı bir bölümdü (.eb-specbolum). Hero'nun sağında butonlardan sonra
   ölü alan kalıyordu (kullanıcı bildirdi); tablo oraya taşındı, bölüm silindi.
   Kolon daraldığı için tablo kompakt: küçük punto, ince ayırıcılar, üstte
   ayrım çizgisi. Taşma riski .eb-scroll-x'te zaten karşılanıyor. */
.eb-scope-urun .eb-urunhero__spec {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}
.eb-scope-urun .eb-urunhero__spec .eb-scroll-x { margin-top: var(--wp--preset--spacing--30); }
.eb-scope-urun .eb-urunhero__spec .eb-dl { font-size: var(--wp--preset--font-size--small); }
.eb-scope-urun .eb-urunhero__spec .eb-dl :is(th, td) {
	padding-block: 10px;
	vertical-align: top;
}
.eb-scope-urun .eb-urunhero__spec .eb-dl th {
	width: 40%;
	padding-right: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}
.eb-scope-urun .eb-accordion__item {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--eb-r);
	overflow: hidden;
}
.eb-scope-urun .eb-accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 14px 20px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}
.eb-scope-urun .eb-accordion__q::-webkit-details-marker { display: none; }
.eb-scope-urun .eb-accordion__q:hover { color: var(--wp--preset--color--accent); }
.eb-scope-urun .eb-accordion__q:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}
.eb-scope-urun .eb-accordion__q .eb-icon {
	color: var(--wp--preset--color--accent);
	transition: rotate .25s var(--eb-ease);
}
.eb-scope-urun .eb-accordion__item[open] .eb-accordion__q .eb-icon { rotate: 180deg; }
.eb-scope-urun .eb-accordion__a {
	padding: 16px 20px 20px;
	border-top: 1px solid var(--wp--preset--color--line-soft);
}
.eb-scope-urun .eb-accordion__a p { margin: 0; color: var(--wp--preset--color--body); }

/* --------------------------------------------------------- CTA bandı */

.eb-scope-urun .eb-ctasec { padding-block: 0 var(--wp--preset--spacing--80); }
.eb-scope-urun .eb-ctaband {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--eb-r-xl);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface-alt);
}
.eb-scope-urun .eb-ctaband__stripe {
	position: absolute;
	inset-inline: 0;
	top: 0;
	border-radius: 0;
}
.eb-scope-urun .eb-ctaband__text { max-width: 48ch; }
.eb-scope-urun .eb-ctaband h2 { margin: 0 0 10px; color: var(--wp--preset--color--surface-alt); }
/* Koyu zemin: muted-warm değil --eb-on-ink (denetim 4,27:1 ölçtü). */
.eb-scope-urun .eb-ctaband p { margin: 0; color: var(--eb-on-ink); }
.eb-scope-urun .eb-ctaband__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================ responsive */

@media (max-width: 1080px) {
	/* app.css .eb-split'i tek kolona indiriyor; görsel kolonu artık satır
	   yüksekliğini dolduramaz, tekrar 4:3'e döner. */
	.eb-scope-urun .eb-modelrow { grid-template-columns: 380px minmax(0, 1fr); }
	.eb-scope-urun .eb-modelrow__body { padding: var(--wp--preset--spacing--40); }
}

@media (max-width: 900px) {
	.eb-scope-urun .eb-modelrow { grid-template-columns: 1fr; }
	.eb-scope-urun .eb-modelrow__media { min-height: 0; }
	.eb-scope-urun .eb-modelrow__frame {
		position: static;
		aspect-ratio: 4 / 3;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--line-soft);
	}
	.eb-scope-urun .eb-tablo-ipucu { display: block; }
	.eb-scope-urun .eb-ctaband { padding: var(--wp--preset--spacing--50); }
}

@media (max-width: 640px) {
	.eb-scope-urun .eb-pagehead { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
	.eb-scope-urun .eb-urunhero { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }

	/* Dokunma hedefi: butonlar tam genişlik, 48px min-height app.css'ten gelir. */
	.eb-scope-urun .eb-urunhero__actions .eb-btn,
	.eb-scope-urun .eb-modelrow__actions .eb-btn,
	.eb-scope-urun .eb-ctaband__actions .eb-btn { width: 100%; }

	.eb-scope-urun .eb-ctable :is(th, td) { padding: 13px 14px; }
	.eb-scope-urun .eb-dl :is(th, td) { padding: 12px 14px; }
	.eb-scope-urun .eb-dl th { width: 42%; }
	.eb-scope-urun .eb-accordion__q { padding: 13px 15px; }
	.eb-scope-urun .eb-accordion__a { padding: 14px 15px 17px; }
}