/*
 * Bileşen katmanı.
 *
 * Kural: turuncu YALNIZ birincil aksiyonda kullanılır. Her yerde
 * kullanılırsa vurgu gücünü kaybeder ve "hangi butona basmalıyım"
 * sorusu doğar — dönüşüm odaklı bir sitede en pahalı hata budur.
 */

/* ============ Butonlar ============ */

.ts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ts-b1);
	min-height: 52px;
	padding: 0 var(--ts-b3);
	border: 2px solid transparent;
	border-radius: var(--ts-yaricap);
	background: var(--ts-yuzey-vurgu);
	color: var(--ts-metin);
	font-weight: 700;
	font-size: var(--ts-fs-md);
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ts-gecis), border-color var(--ts-gecis), transform var(--ts-gecis);
}

.ts-btn:hover { transform: translateY(-1px); }
.ts-btn:active { transform: translateY(0); }

.ts-btn--birincil {
	background: var(--ts-turuncu);
	color: var(--ts-aksiyon-metin);
	box-shadow: var(--ts-golge);
}
.ts-btn--birincil:hover { background: var(--ts-turuncu-koyu); }

.ts-btn--wa {
	background: var(--ts-whatsapp);
	color: #fff;
}
.ts-btn--wa:hover { background: var(--ts-whatsapp-uzeri); }

.ts-btn--cerceve {
	background: transparent;
	border-color: var(--ts-kenar-guclu);
	color: var(--ts-metin);
}
.ts-btn--cerceve:hover { border-color: var(--ts-turuncu); }

.ts-btn--buyuk { min-height: 60px; font-size: var(--ts-fs-lg); padding-inline: var(--ts-b4); }
.ts-btn--tam { width: 100%; }

.ts-btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ============ Kartlar ============ */

.ts-kart {
	display: flex;
	flex-direction: column;
	padding: var(--ts-b3);
	background: var(--ts-yuzey);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-lg);
	transition: border-color var(--ts-gecis), box-shadow var(--ts-gecis), transform var(--ts-gecis);
}

a.ts-kart { text-decoration: none; color: inherit; }

a.ts-kart:hover {
	border-color: var(--ts-kenar-guclu);
	box-shadow: var(--ts-golge);
	transform: translateY(-2px);
}

.ts-kart__baslik { font-size: var(--ts-fs-lg); margin-bottom: var(--ts-b1); }
.ts-kart__metin { color: var(--ts-metin-yumusak); font-size: var(--ts-fs-sm); margin-bottom: 0; }
.ts-kart__alt { margin-top: auto; padding-top: var(--ts-b2); }

/* ---- Marka kartı ----
 * Marka adı sitenin KENDİ tipografisiyle yazılır; logo veya logoya
 * benzer stilize yazı kullanılmaz. Renk yalnız ızgarada göz taramasını
 * kolaylaştıran ince bir şerittir.
 */
.ts-marka-kart {
	position: relative;
	align-items: center;
	text-align: center;
	padding: var(--ts-b3) var(--ts-b2);
	overflow: hidden;
}

.ts-marka-kart::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--ts-marka-renk, var(--ts-kenar-guclu));
}

.ts-marka-kart__ad {
	font-size: var(--ts-fs-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: var(--ts-b1);
}

.ts-marka-kart__rozet {
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ts-metin-silik);
}

/* ============ LCD paneli — imza öğesi ============
 * Kombinin kendi ekranını taklit eder. Arıza kodu arayan kullanıcı
 * cihazında gördüğü şeyi ekranda tanır; bu tanıma anı güven kurar.
 */

.ts-lcd {
	background: var(--ts-lcd-zemin);
	border: 1px solid #1D2634;
	border-radius: var(--ts-yaricap);
	padding: var(--ts-b3);
	box-shadow: inset 0 0 32px rgba(255, 138, 61, 0.06), var(--ts-golge);
}

.ts-lcd__etiket {
	color: var(--ts-lcd-silik);
	font-family: var(--ts-yazi-mono);
	font-size: var(--ts-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: var(--ts-b1);
}

.ts-lcd__giris {
	display: flex;
	align-items: center;
	gap: var(--ts-b1);
}

.ts-lcd__giris input {
	flex: 1;
	min-height: 52px;
	padding: 0 var(--ts-b2);
	background: #060A10;
	border: 1px solid #232D3D;
	border-radius: var(--ts-yaricap-sm);
	color: var(--ts-lcd-metin);
	font-family: var(--ts-yazi-mono);
	font-size: var(--ts-fs-xl);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ts-lcd__giris input::placeholder { color: var(--ts-lcd-silik); }

.ts-lcd__sonuc { margin-top: var(--ts-b2); }

/* Arıza kodu çipi — kombi ekranındaki gibi. */
.ts-kod {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(255, 138, 61, 0.12);
	border: 1px solid rgba(255, 138, 61, 0.35);
	border-radius: var(--ts-yaricap-sm);
	color: var(--ts-lcd-metin);
	font-family: var(--ts-yazi-mono);
	font-size: var(--ts-fs-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
}

/* Sorgu sonucu satırı — panelin içinde, LCD zemininde okunur. */
.ts-kod-sonuc {
	display: flex;
	align-items: baseline;
	gap: var(--ts-b1);
	padding: 10px 0;
	border-top: 1px solid #1D2634;
	color: #C6D0DE;
	font-size: var(--ts-fs-sm);
	line-height: 1.5;
}

.ts-kod-sonuc:first-child { border-top: 0; }
.ts-kod-sonuc .ts-kod { flex: none; }
.ts-kod-sonuc__metin { min-width: 0; }
.ts-kod-sonuc__marka { color: #fff; font-weight: 600; }

/* Ciddiyet, metnin kendisinde değil kenarda durur: satır kalabalıklaşmasın. */
.ts-kod-sonuc__isaret {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--ts-basari);
}

.ts-kod-sonuc[data-ciddiyet="yuksek"] .ts-kod-sonuc__isaret { background: var(--ts-tehlike); }
.ts-kod-sonuc[data-ciddiyet="orta"] .ts-kod-sonuc__isaret { background: var(--ts-turuncu); }

.ts-kod-sonuc__ipucu {
	display: block;
	margin-top: 2px;
	color: var(--ts-lcd-silik);
	font-size: var(--ts-fs-xs);
}

.ts-lcd__not {
	margin-top: var(--ts-b2);
	padding-top: var(--ts-b2);
	border-top: 1px solid #1D2634;
	color: var(--ts-lcd-silik);
	font-size: var(--ts-fs-xs);
	line-height: 1.6;
}

.ts-lcd__not a { color: var(--ts-lcd-metin); }

/* ============ Rozet ve etiketler ============ */

.ts-rozet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--ts-yuzey-vurgu);
	border: 1px solid var(--ts-kenar);
	border-radius: 999px;
	font-size: var(--ts-fs-sm);
	font-weight: 600;
	color: var(--ts-metin-yumusak);
}

.ts-rozet svg { width: 16px; height: 16px; flex: none; color: var(--ts-basari); }

/* ============ Uyarı kutusu ============ */

.ts-uyari-kutu {
	padding: var(--ts-b2) var(--ts-b3);
	background: var(--ts-tehlike-zemin);
	border-left: 4px solid var(--ts-tehlike);
	border-radius: var(--ts-yaricap-sm);
	color: var(--ts-metin);
}

.ts-uyari-kutu strong { color: var(--ts-tehlike); }
.ts-uyari-kutu p:last-child { margin-bottom: 0; }

/* Uyum ibaresi — her marka sayfasında otomatik basılır. */
.ts-uyum {
	display: block;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-sm);
	border-top: 1px solid var(--ts-kenar);
	padding-top: var(--ts-b2);
	margin-top: var(--ts-b3);
}

/* ============ Fiyat tablosu ============
 * Bu tablo yalnız kullanıcı için değil: üretken arama motorlarının
 * doğrudan alıntıladığı yapı budur. Semantik table zorunlu.
 */

.ts-tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ts-tablo {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--ts-fs-sm);
}

.ts-tablo caption {
	text-align: left;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-sm);
	padding-bottom: var(--ts-b1);
}

.ts-tablo th,
.ts-tablo td {
	padding: var(--ts-b2);
	text-align: left;
	border-bottom: 1px solid var(--ts-kenar);
	vertical-align: top;
}

.ts-tablo th {
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ts-metin-silik);
	white-space: nowrap;
}

.ts-tablo td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-tablo tbody tr:hover { background: var(--ts-yuzey-vurgu); }

.ts-fiyat { font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-fiyat--eski { color: var(--ts-metin-silik); text-decoration: line-through; font-weight: 400; margin-right: 6px; }
.ts-fiyat-not { color: var(--ts-metin-silik); font-size: var(--ts-fs-xs); }

/* ============ Süreç adımları ============
 * Numaralandırma yalnız burada: servis süreci gerçekten sıralıdır,
 * sıra bilgisi kullanıcı için anlam taşır.
 */

.ts-adim { position: relative; padding-left: 56px; }

.ts-adim__no {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: var(--ts-lacivert);
	color: #fff;
	border-radius: 50%;
	font-family: var(--ts-yazi-mono);
	font-weight: 500;
	font-size: var(--ts-fs-md);
}

:root[data-tema="koyu"] .ts-adim__no { background: var(--ts-lacivert-acik); }

/* ============ Açılır-kapanır (SSS) ============ */

.ts-sss__oge {
	border-bottom: 1px solid var(--ts-kenar);
}

.ts-sss__soru {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-b2);
	padding: var(--ts-b3) 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: var(--ts-fs-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	cursor: pointer;
}

.ts-sss__ikon { flex: none; transition: transform var(--ts-gecis); }
.ts-sss__soru[aria-expanded="true"] .ts-sss__ikon { transform: rotate(45deg); }

.ts-sss__cevap { padding-bottom: var(--ts-b3); color: var(--ts-metin-yumusak); max-width: var(--ts-okuma); }
.ts-sss__cevap[hidden] { display: none; }

/* ============ Marka sayfası ============ */

/* İz (breadcrumb) — küçük, sessiz, ama yönü hep belli. */
.ts-iz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--ts-b2);
	font-size: var(--ts-fs-sm);
	color: var(--ts-metin-silik);
}

.ts-iz a { color: var(--ts-metin-silik); text-decoration: none; }
.ts-iz a:hover { color: var(--ts-metin); text-decoration: underline; }

/* Marka etiketi: renk markadan gelir, biçim her markada aynı kalır. */
.ts-marka-etiket {
	display: inline-block;
	margin-bottom: var(--ts-b2);
	padding: 6px 14px;
	border: 1px solid var(--ts-marka-renk);
	border-radius: 999px;
	font-size: var(--ts-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ts-hero--marka { padding-block: var(--ts-b5) var(--ts-b4); }
.ts-hero--marka h1 { max-width: 18ch; }
.ts-hero--marka .ts-uyum { margin-top: var(--ts-b3); }

.ts-etiket-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ts-not {
	margin-top: var(--ts-b2);
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-sm);
	line-height: 1.6;
}

.ts-kapanis { background: var(--ts-lacivert); color: #fff; }
.ts-kapanis h2 { color: #fff; }
.ts-kapanis p { color: rgba(255, 255, 255, 0.78); }
.ts-kapanis__ic { text-align: center; }
.ts-kapanis__ic .ts-hero__aksiyon { justify-content: center; }

/* ============ Kanıt kartı ============
 * Sayı önce, etiket sonra. Ziyaretçi tarayarak okuyor; büyük rakam
 * göz için durak noktası oluşturuyor.
 */
.ts-kanit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ts-b1);
	padding: var(--ts-b3);
	background: var(--ts-yuzey);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-lg);
}

.ts-kanit svg { color: var(--ts-turuncu); }

.ts-kanit__deger {
	font-size: var(--ts-fs-2xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.ts-kanit__etiket { color: var(--ts-metin-yumusak); font-size: var(--ts-fs-sm); }

/* ============ Mahalle listesi ============
 * 72 mahalle adı. Sütunlara bölünür çünkü tek sütun ekranı gereksiz
 * uzatır; tarama sırasında göz kendi mahallesini arıyor.
 */
.ts-mahalle-liste {
	columns: 190px;
	column-gap: var(--ts-b3);
	list-style: none;
	margin: var(--ts-b3) 0 0;
	padding: 0;
}

.ts-mahalle-liste li {
	break-inside: avoid;
	padding: 7px 0;
	border-bottom: 1px solid var(--ts-kenar);
	font-size: var(--ts-fs-sm);
	color: var(--ts-metin-yumusak);
}

a.ts-rozet { text-decoration: none; transition: border-color var(--ts-gecis), color var(--ts-gecis); }
a.ts-rozet:hover { border-color: var(--ts-turuncu); color: var(--ts-metin); }

.ts-mahalle-liste a {
	display: block;
	color: var(--ts-metin-yumusak);
	text-decoration: none;
}

.ts-mahalle-liste a:hover { color: var(--ts-turuncu); }

/* ============ Reklam iniş sayfası ============
 * Tek amaçlı sayfa: menü, alt bilgi bağlantıları ve keşif yolları
 * kapatılır. Reklama tıklayan kullanıcı ne istediğini biliyor;
 * seçenek sunmak dönüşümü düşürür.
 */
.ts-reklam-sayfa .ts-menu,
.ts-reklam-sayfa .ts-alt__duzen { display: none; }

.ts-reklam-sayfa .ts-alt { padding-block: var(--ts-b3); }

.ts-reklam__ic { max-width: 640px; }

.ts-hero--reklam { padding-block: var(--ts-b4); }
.ts-hero--reklam h1 { max-width: 16ch; }

.ts-reklam .ts-hero__aksiyon { flex-direction: column; align-items: stretch; }

.ts-reklam__vaat {
	list-style: none;
	margin: var(--ts-b3) 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ts-reklam__vaat li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ts-metin-yumusak);
	font-size: var(--ts-fs-sm);
}

.ts-reklam__vaat svg { flex: none; color: var(--ts-basari); }

@media (min-width: 640px) {
	.ts-reklam .ts-hero__aksiyon { flex-direction: row; }
	.ts-reklam .ts-btn--tam { width: auto; flex: 1; }
}

/* ============ Marka renkleri ============
 *
 * Açık temada marka adı markanın kendi renginde yazılır: Demirdöküm
 * kırmızı, Vaillant yeşil, Bosch lacivert.
 *
 * Koyu temada beyaza döner. Marka renklerinin çoğu koyu ve doygun
 * (Bosch #005691, Vaillant #2E7D32); koyu zeminde okunmuyor.
 * Kimlik kaybolmuyor: şerit, çerçeve ve ikon marka renginde kalıyor —
 * ince bir çizgi olarak doygun renk koyu zeminde de görünür.
 *
 * Kural neden token değil de selektör: özel özellikler tanımlandıkları
 * öğede çözülür. --ts-marka-renk kart üzerinde satır içi verildiği için
 * :root'ta yazılan bir var() zinciri onu göremez, yedeğe düşer.
 */
.ts-logo__marka,
.ts-marka-etiket,
.ts-marka-kart__ad {
	color: var(--ts-marka-renk, var(--ts-lacivert));
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) .ts-logo__marka,
	:root:not([data-tema="acik"]) .ts-marka-etiket,
	:root:not([data-tema="acik"]) .ts-marka-kart__ad {
		color: #FFFFFF;
	}
}

:root[data-tema="koyu"] .ts-logo__marka,
:root[data-tema="koyu"] .ts-marka-etiket,
:root[data-tema="koyu"] .ts-marka-kart__ad {
	color: #FFFFFF;
}

/* ============ Marka imi ============
 *
 * Kombiye elektrik verildiğinde ekranın yaptığı segman testi: yedi
 * segmanın tamamı yanar. Panel her iki temada da koyu kalır — gerçek
 * bir gösterge zaten koyudur — ama gece temasında sayfa zemini de
 * koyulaştığı için ince bir çerçeve eklenir, yoksa im kaybolur.
 *
 * İm marka sayfalarında da bizim rengimizde kalır. Kombi markasının
 * rengini almak, o markanın yetkili servisiymişiz izlenimi verirdi.
 */
.ts-im__panel {
	fill: var(--ts-lcd-zemin);
}

.ts-im__segman {
	fill: var(--ts-lcd-metin);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) .ts-im__panel {
		stroke: var(--ts-kenar);
		stroke-width: 1;
	}
}

:root[data-tema="koyu"] .ts-im__panel {
	stroke: var(--ts-kenar);
	stroke-width: 1;
}

/* ============ Kombi kesiti — imza görseli ============
 *
 * Kapağı açık bir kombi. Sayfa aşağı kaydırıldıkça kapak kapanır:
 * ilerleme --ts-kapak (0 = açık, 1 = kapalı) JS'ten gelir.
 *
 * Degradelerin duraklarına doğrudan renk yazmak yerine sınıf verildi;
 * böylece gövde ve kapak tema değişkenlerini takip ediyor. Bakır, alev
 * ve kart gibi gerçek malzeme renkleri ise sabit — bakır koyu temada
 * da bakırdır.
 */

.ts-kombi {
	--ts-kapak: 0;
	position: relative;
	max-width: 360px;
	margin-inline: auto;
}

.ts-kombi__cizim {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 24px 48px rgba(8, 18, 34, 0.22));
}

/* ---- Degrade durakları ---- */
.ts-gs-govde-1 { stop-color: var(--ts-yuzey); }
.ts-gs-govde-2 { stop-color: var(--ts-yuzey-vurgu); }
.ts-gs-govde-3 { stop-color: var(--ts-kenar); }

.ts-gs-hazne-1 { stop-color: var(--ts-zemin-alt); }
.ts-gs-hazne-2 { stop-color: var(--ts-zemin); }

.ts-gs-kapak-1 { stop-color: var(--ts-yuzey); }
.ts-gs-kapak-2 { stop-color: var(--ts-yuzey-vurgu); }
.ts-gs-kapak-3 { stop-color: var(--ts-kenar); }

/* ---- Gövde ---- */
.ts-k-duvar-golge { fill: rgba(8, 18, 34, 0.28); }
.ts-k-kenar-isik { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }
.ts-k-oda { fill: color-mix(in srgb, var(--ts-kenar) 34%, transparent); }
.ts-k-baca-ic { fill: var(--ts-zemin); }
.ts-k-halka { fill: none; stroke: var(--ts-kenar-guclu); stroke-width: 2; }
.ts-k-mil { fill: var(--ts-metin-silik); }

/* Fan yavaşça döner: cihazın çalıştığını söyleyen tek hareket. */
.ts-k-fan {
	transform-origin: center;
	transform-box: fill-box;
	animation: ts-fan-don 7s linear infinite;
}

@keyframes ts-fan-don { to { transform: rotate(360deg); } }

/* ---- Isı değiştirici ---- */
.ts-k-esanjor {
	fill: none;
	stroke: url(#ts-g-bakir);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Boruların üstüne düşen ince ışık — düz çizgiyi silindir yapıyor. */
.ts-k-bakir-isik {
	fill: none;
	stroke: rgba(255, 226, 190, 0.5);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.ts-k-kanatcik rect { fill: #C9743A; opacity: 0.22; }

/* ---- Alev ---- */
.ts-k-alev {
	fill: url(#ts-g-alev);
	transform-origin: center bottom;
	transform-box: fill-box;
	animation: ts-alev 2.1s ease-in-out infinite;
}

.ts-k-alevler .ts-k-alev:nth-child(2) { animation-delay: -0.4s; }
.ts-k-alevler .ts-k-alev:nth-child(3) { animation-delay: -1.2s; }
.ts-k-alevler .ts-k-alev:nth-child(4) { animation-delay: -0.7s; }
.ts-k-alevler .ts-k-alev:nth-child(5) { animation-delay: -1.6s; }
.ts-k-alevler .ts-k-alev:nth-child(6) { animation-delay: -0.2s; }

@keyframes ts-alev {
	0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.92; }
	50% { transform: scaleY(1.26) scaleX(0.94); opacity: 1; }
}

/* ---- Diğer organlar ---- */
.ts-k-tank-cizgi { stroke: rgba(0, 0, 0, 0.25); stroke-width: 2; }
.ts-k-tank-isik { fill: rgba(255, 255, 255, 0.3); }
.ts-k-iz { fill: none; stroke: rgba(190, 255, 224, 0.55); stroke-width: 1.5; }
.ts-k-yonga { fill: #101922; }
.ts-k-lehim circle { fill: rgba(220, 235, 245, 0.7); }
.ts-k-boru rect { opacity: 0.85; }

/* ---- Kapak ---- */
.ts-kombi__kapak {
	transform-origin: left center;
	transform-box: fill-box;
	transform: scaleX(var(--ts-kapak));

	/* Tamamen açıkken kapak sıfır genişliğe iner ve sol kenarda koyu bir
	   çubuk olarak görünür. Son kırıntıda söndürülüyor. */
	opacity: clamp(0, calc(var(--ts-kapak) * 12), 1);
}

.ts-k-mentese { fill: url(#ts-g-metal); opacity: 0.55; }

.ts-k-dilim rect { fill: var(--ts-kenar); opacity: 0.8; }
.ts-k-dugme { fill: var(--ts-kenar); }
.ts-k-dugme-isik { fill: var(--ts-yuzey); }
.ts-k-dugme-iz { fill: none; stroke: var(--ts-metin-silik); stroke-width: 2; stroke-linecap: round; }
.ts-k-ekran-kenar { fill: none; stroke: rgba(0, 0, 0, 0.5); stroke-width: 1.5; }

.ts-k-ekran-yazi {
	fill: #7DF3A8;
	font-family: var(--ts-yazi-mono);
	font-size: 40px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.ts-k-ekran-alt {
	fill: rgba(125, 243, 168, 0.55);
	font-family: var(--ts-yazi-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
}

/* Kapak yüzeyindeki her şey kapak kapanırken belirir; yarı açık kapağın
   üstünde asılı duran yazı görseli bozuyor. */
.ts-kombi__kapak text,
.ts-k-dugme-iz,
.ts-k-dilim { opacity: calc(var(--ts-kapak) * var(--ts-kapak)); }

/* ---- Alt yazılar ---- */
.ts-kombi__parcalar {
	margin: var(--ts-b2) 0 0;
	color: var(--ts-metin-silik);
	font-family: var(--ts-yazi-mono);
	font-size: var(--ts-fs-xs);
	letter-spacing: 0.04em;
	text-align: center;
	line-height: 1.7;
}

.ts-kombi__not {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 6px 0 0;
	color: var(--ts-metin-yumusak);
	font-size: var(--ts-fs-sm);
	font-weight: 600;
}

.ts-kombi__nokta {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--ts-turuncu);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ts-turuncu) 22%, transparent);
}

/* Kesit ve ekran tek bir cihaz olarak okunsun. */
.ts-hero__cihaz { display: grid; gap: var(--ts-b3); }

/* ============ Servis videosu ============
 *
 * Kaynak dikey çekim (9:16). Yatay bir kutuya kırpmak kombinin üst
 * kısmını kesiyordu, o yüzden oran korunuyor ve genişlik sınırlanıyor.
 *
 * `aspect-ratio` poster inmeden de yeri ayırır; video sonradan
 * yüklendiğinde düzen kaymaz (CLS = 0).
 */
.ts-video {
	position: relative;
	margin: 0 auto;
	width: min(320px, 100%);
	border-radius: 18px;
	overflow: hidden;
	background: var(--ts-lcd-zemin);
	box-shadow: 0 18px 40px -22px rgba(11, 27, 51, 0.55);
	isolation: isolate;
}

.ts-video__oynatici {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

/* Yazı videonun üstünde durduğu için kontrast karartma şart; parlak
   bir karede beyaz metin okunmaz hâle gelir. */
.ts-video__yazi {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--ts-b5) var(--ts-b3) var(--ts-b3);
	background: linear-gradient(to top, rgba(12, 16, 23, 0.94), rgba(12, 16, 23, 0.7) 48%, transparent);
	color: #FFFFFF;
}

.ts-video__ustyazi {
	display: block;
	font-family: var(--ts-yazi-mono);
	font-size: var(--ts-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ts-lcd-metin);
}

.ts-video__baslik {
	margin: 6px 0 0;
	font-size: var(--ts-fs-lg);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--ts-aralik-siki);
}

.ts-video__not {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(12, 16, 23, 0.55);
	font-size: var(--ts-fs-xs);
	color: rgba(255, 255, 255, 0.78);
}

/* Hareket azaltma tercihinde kapak hiç görünmez ve hiçbir şey oynamaz.
   Kesitin değeri hareketinde değil, gösterdiği şeyde. */
@media (prefers-reduced-motion: reduce) {
	.ts-k-fan,
	.ts-k-alev { animation: none; }

	.ts-kombi__kapak { display: none; }
}

/* ============ Kampanya bandı ============
 * Yalnız indirimin BUGÜN geçerli olduğu günlerde basılır. "Yarın
 * indirim var" demek, bugün arayacak kişiyi yarına erteler.
 */

.ts-kampanya {
	display: flex;
	align-items: center;
	gap: var(--ts-b2);
	flex-wrap: wrap;
	padding: var(--ts-b2) var(--ts-b3);
	margin-bottom: var(--ts-b3);
	background: color-mix(in srgb, var(--ts-turuncu) 10%, var(--ts-yuzey));
	border: 1px solid color-mix(in srgb, var(--ts-turuncu) 35%, transparent);
	border-radius: var(--ts-yaricap);
}

.ts-kampanya__yuzde {
	flex: none;
	display: grid;
	place-items: center;
	min-width: 62px;
	padding: 8px 12px;
	background: var(--ts-turuncu);
	color: var(--ts-aksiyon-metin);
	border-radius: var(--ts-yaricap-sm);
	font-size: var(--ts-fs-lg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ts-kampanya__metin { display: grid; gap: 2px; min-width: 0; }
.ts-kampanya__metin strong { font-size: var(--ts-fs-md); }
.ts-kampanya__metin span { color: var(--ts-metin-yumusak); font-size: var(--ts-fs-sm); }

.ts-kampanya__gun {
	margin-left: auto;
	flex: none;
	color: var(--ts-turuncu);
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Eski fiyat silinmeden duruyor: indirimli fiyatı tek başına yazmak
   indirimi görünmez kılar, müşteri kazandığını fark etmez. */
.ts-fiyat--eski {
	display: block;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-xs);
	font-variant-numeric: tabular-nums;
}

.ts-fiyat--yeni {
	color: var(--ts-turuncu);
	font-variant-numeric: tabular-nums;
}

/* ============ Hata kodu listesi ============
 * Tablo yerine açılır blok: her kaydın açıklaması, olası nedenleri ve
 * çözüm adımları var. Tabloda bunlar sığmıyordu; kod ve anlam dışındaki
 * her şey görünmez kalıyordu.
 *
 * <details> kapalı gelse de içerik HTML'de duruyor — arama motoru
 * okuyor, kullanıcı 62 kodluk metin duvarıyla karşılaşmıyor.
 */

.ts-kod-liste {
	display: grid;
	gap: 8px;
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap);
	padding: 8px;
	background: var(--ts-yuzey);
}

.ts-kod-kart {
	border-radius: var(--ts-yaricap-sm);
	background: var(--ts-zemin-alt);
}

.ts-kod-kart > summary {
	display: flex;
	align-items: center;
	gap: var(--ts-b2);
	padding: 12px var(--ts-b2);
	cursor: pointer;
	list-style: none;
	border-radius: var(--ts-yaricap-sm);
	border-left: 3px solid var(--ts-basari);
}

.ts-kod-kart > summary::-webkit-details-marker { display: none; }
.ts-kod-kart[data-ciddiyet="yuksek"] > summary { border-left-color: var(--ts-tehlike); }
.ts-kod-kart[data-ciddiyet="orta"] > summary { border-left-color: var(--ts-turuncu); }
.ts-kod-kart > summary:hover { background: var(--ts-yuzey-vurgu); }

.ts-kod-kart > summary:focus-visible {
	outline: 2px solid var(--ts-turuncu);
	outline-offset: 2px;
}

.ts-kod-kart .ts-kod { flex: none; }

.ts-kod-kart__anlam {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	font-size: var(--ts-fs-sm);
}

.ts-kod-kart__reset {
	flex: none;
	padding: 2px 8px;
	border: 1px solid var(--ts-kenar-guclu);
	border-radius: 999px;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ts-kod-kart__ic {
	padding: 0 var(--ts-b2) var(--ts-b2) calc(var(--ts-b2) + 3px);
	font-size: var(--ts-fs-sm);
	color: var(--ts-metin-yumusak);
}

.ts-kod-kart__ic h3 {
	font-size: var(--ts-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ts-metin-silik);
	margin: var(--ts-b2) 0 6px;
}

.ts-kod-kart__ic ul,
.ts-kod-kart__ic ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.ts-kod-kart__ic p { margin-bottom: 0; }
.ts-kod-kart__parca { margin-top: var(--ts-b2); color: var(--ts-metin-silik); }

/* Künye listesi — iletişim sayfası. */
.ts-kunye { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--ts-b3); margin: 0 0 var(--ts-b3); }
.ts-kunye dt { color: var(--ts-metin-silik); font-size: var(--ts-fs-sm); }
.ts-kunye dd { margin: 0; font-weight: 600; }
.ts-kunye a { color: var(--ts-turuncu); text-decoration: none; }
.ts-kunye a:hover { text-decoration: underline; }

/* ============ Servis talebi penceresi ============
 * <dialog> kullanılıyor: odak hapsi, Esc ile kapanma ve arka planın
 * erişilemez olması tarayıcıdan geliyor. Bunları JS'le taklit etmek
 * her seferinde eksik kalıyor — özellikle ekran okuyucularda.
 */

.ts-talep {
	width: min(560px, calc(100vw - 2rem));
	padding: var(--ts-b4);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-lg);
	background: var(--ts-yuzey);
	color: var(--ts-metin);
	box-shadow: var(--ts-golge-lg);
}

.ts-talep::backdrop { background: rgba(8, 14, 26, 0.62); backdrop-filter: blur(2px); }

.ts-talep__kapat-form { display: flex; justify-content: flex-end; margin-bottom: -8px; }

.ts-talep__kapat {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--ts-yaricap-sm);
	background: transparent;
	color: var(--ts-metin-silik);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.ts-talep__kapat:hover { background: var(--ts-yuzey-vurgu); color: var(--ts-metin); }
.ts-talep h2 { font-size: var(--ts-fs-2xl); margin-bottom: 6px; }
.ts-talep__giris { color: var(--ts-metin-yumusak); font-size: var(--ts-fs-sm); margin-bottom: var(--ts-b3); }

.ts-talep__alanlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ts-b2);
	margin-bottom: var(--ts-b3);
}

.ts-talep__genis { grid-column: 1 / -1; }
.ts-talep label { display: grid; gap: 6px; }

.ts-talep label > span {
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ts-metin-silik);
}

.ts-talep input,
.ts-talep select,
.ts-talep textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px var(--ts-b2);
	background: var(--ts-zemin-alt);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-sm);
	color: var(--ts-metin);
	font: inherit;
	font-size: var(--ts-fs-md);
}

.ts-talep textarea { min-height: 84px; resize: vertical; }

.ts-talep input:focus-visible,
.ts-talep select:focus-visible,
.ts-talep textarea:focus-visible {
	outline: 2px solid var(--ts-turuncu);
	outline-offset: 1px;
	border-color: transparent;
}

/* :user-invalid kullanılıyor, :invalid değil.
   :invalid boş bir zorunlu alanı daha kullanıcı dokunmadan kırmızıya
   boyuyordu; form açılır açılmaz hata vermiş gibi görünüyordu.
   :user-invalid yalnız kullanıcı alandan çıktıktan sonra devreye girer. */
.ts-talep input:user-invalid,
.ts-talep textarea:user-invalid { border-color: var(--ts-tehlike); }

/* Buton metni tek satırda kalmalı: iki satıra kırılan buton dokunma
   hedefini bozuyor ve ucuz görünüyor. */
.ts-talep__aksiyon .ts-btn { white-space: nowrap; }

.ts-talep__aksiyon { display: grid; gap: var(--ts-b2); }
@media (min-width: 520px) { .ts-talep__aksiyon { grid-template-columns: 1.4fr 1fr; } }

.ts-talep__not {
	margin: var(--ts-b2) 0 0;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-xs);
	text-align: center;
}

/* ============ Özet bloğu ============
 * Sayfanın en üstünde duran, kendi başına ayakta duran olgu paragrafı.
 *
 * İki okuyucusu var: sayfayı okumaya vakti olmayan kişi aradığı üç şeyi
 * (nereye geliyorsunuz, ne kadar, ne zaman) burada buluyor; yapay zekâ
 * sistemleri ise alıntılanabilir bir pasaj buluyor. İkincisi için
 * konulmuş ama birincisi için de gerçekten yararlı — yalnız arama motoru
 * için olsaydı sayfada yabancı dururdu.
 */

.ts-ozet {
	max-width: 62ch;
	margin: var(--ts-b3) 0 0;
	padding: var(--ts-b3);
	background: var(--ts-yuzey);
	border: 1px solid var(--ts-kenar);
	border-left: 3px solid var(--ts-turuncu);
	border-radius: var(--ts-yaricap);
}

.ts-ozet__etiket {
	margin: 0 0 6px;
	color: var(--ts-turuncu);
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ts-ozet__metin {
	margin: 0;
	color: var(--ts-metin-yumusak);
	font-size: var(--ts-fs-sm);
	line-height: 1.75;
}

/* ============ Müşteri yorumları ============
 * Üç kartlık taşıyıcı + nokta yerine değişken yükseklikli duvar.
 * Karusel, okunmayan iki yorumu gizler ve dokunma hedefi küçük olan
 * noktalarla gezinme dayatır; duvarda hepsi aynı anda görünür.
 */

.ts-yorum-duvar {
	columns: 3 300px;
	column-gap: var(--ts-b3);
}

.ts-yorum {
	break-inside: avoid;
	margin: 0 0 var(--ts-b3);
	padding: var(--ts-b3);
	background: var(--ts-yuzey);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-lg);
}

.ts-yorum__puan {
	margin: 0 0 var(--ts-b1);
	color: var(--ts-turuncu);
	font-size: var(--ts-fs-md);
	letter-spacing: 0.12em;
}

.ts-yorum blockquote {
	margin: 0 0 var(--ts-b2);
	padding: 0;
	border: 0;
	color: var(--ts-metin);
	font-size: var(--ts-fs-md);
	line-height: 1.65;
}

.ts-yorum figcaption { display: grid; gap: 2px; font-size: var(--ts-fs-sm); }
.ts-yorum figcaption span { color: var(--ts-metin-silik); font-size: var(--ts-fs-xs); }

/* Örnek yorum kılık değiştiremesin: kesikli çerçeve ve rozet, gerçek
   yorumdan ilk bakışta ayırt edilmesini sağlıyor. */
.ts-yorum--ornek {
	border-style: dashed;
	border-color: var(--ts-kenar-guclu);
	opacity: 0.82;
}

.ts-yorum__ornek-rozet {
	display: inline-block;
	margin-bottom: var(--ts-b1);
	padding: 2px 8px;
	background: var(--ts-yuzey-vurgu);
	border-radius: 999px;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ============ Rıza çubuğu ============
 * Ekranın altında, tek satır. Tam ekran kaplayan bir katman koymadım:
 * kombisi bozulan kişiyi telefona ulaşmadan önce bir duvarla
 * karşılamak, ölçüm uğruna müşteri kaybetmek demek.
 *
 * Mobil aksiyon çubuğunun üstünde duruyor, onu örtmüyor.
 */

.ts-riza {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ts-b2) var(--ts-b3);
	padding: var(--ts-b2) var(--ts-b3);
	padding-bottom: calc(var(--ts-b2) + env(safe-area-inset-bottom, 0px));
	background: var(--ts-yuzey);
	border-top: 1px solid var(--ts-kenar);
	box-shadow: var(--ts-golge-lg);
}

.ts-riza[hidden] { display: none; }

.ts-riza__metin {
	margin: 0;
	max-width: 62ch;
	color: var(--ts-metin-yumusak);
	font-size: var(--ts-fs-sm);
	line-height: 1.6;
}

.ts-riza__metin a { color: var(--ts-turuncu); }
.ts-riza__dugmeler { display: flex; gap: var(--ts-b2); flex: none; }
.ts-riza__dugmeler .ts-btn { min-height: 44px; padding-inline: var(--ts-b3); font-size: var(--ts-fs-sm); }

/* Rıza çubuğu görünürken mobil aksiyon çubuğu onun üstüne çıksın. */
.ts-riza:not([hidden]) ~ .ts-mobil-cubuk { bottom: 76px; }

@media (max-width: 640px) {
	.ts-riza { flex-direction: column; align-items: stretch; }
	.ts-riza__dugmeler .ts-btn { flex: 1; }
}