/*
 * 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;
}

/* Marka rengi yalnız üzerine gelince beliriyor.
 *
 * Önce her kartın üstünde 4px'lik dolu bir marka rengi vardı: on iki
 * kart, on iki farklı parlak renk. Hepsi gerçek üretici renkleri ama
 * sayfada aynı anda on iki vurgu olunca göz hiçbirine tutunamıyor ve
 * lacivert–turuncu paletiyle çarpışıyorlardı.
 *
 * Renk kaldırılmadı, ertelendi: kart üzerine gelindiğinde o markanın
 * rengi çizgi olarak beliriyor. Bilgi duruyor, gürültü gidiyor. */
.ts-marka-kart::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: var(--ts-marka-renk, var(--ts-kenar-guclu));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms ease;
}

.ts-marka-kart:hover::before,
.ts-marka-kart:focus-visible::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ts-marka-kart::before { transition: none; }
}

.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;
	/* Girdi alanlarının varsayılan min-width'i `auto`, yani tarayıcının
	   verdiği içsel genişliktir (~20 karakter). Flex öğesi olarak bunun
	   altına inemediği için form dar ekranda sıkışamıyor ve kapsayıcıyı
	   dışarı itiyordu. */
	min-width: 0;
	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.
 */
/* İşaretli liste — belirti ve kontrol maddeleri.
 *
 * Ana sayfadaki kontrol listesi aynı düzeni satır içi stille kuruyordu;
 * ikinci kullanım çıkınca bileşene taşındı. İm rengi bağlamdan gelsin
 * diye currentColor değil, kullanan yer --ts-isaret-renk ile veriyor. */
.ts-isaret-liste {
	display: grid;
	gap: var(--ts-b2);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 68ch;
}

.ts-isaret-liste li {
	display: flex;
	gap: var(--ts-b1);
	align-items: flex-start;
}

.ts-isaret-liste__im {
	flex: none;
	margin-top: 2px;
	color: var(--ts-isaret-renk, var(--ts-uyari));
}

.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;
}

/* ============ Yazı logosu ============
   Ayarlardan "logo metni" girilince görsel yerine basılır. Yükseklik
   ts_logo_im() ile aynı değişkenden gelir ki başlık, panel ve giriş
   ekranında görsel logoyla aynı yeri kaplasın. */
.ts-logo__metin {
	display: inline-block;
	font-size: calc(var(--ts-logo-boy, 34px) * 0.68);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--ts-lacivert);
}

.ts-logo__metin b {
	font-weight: 800;
	color: var(--ts-turuncu);
}

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

:root[data-tema="koyu"] .ts-logo__metin {
	color: #FFFFFF;
}

/* ============ KKS logosu ============
 *
 * Logonun gri harfleri koyu tema zemininde okunmuyor, o yüzden iki
 * varyant var ve tema durumuna göre biri gizleniyor. Üç durumun
 * üçü de yazılı (bkz. token.css başındaki not): rengin tek tanımı
 * medya sorgusu içinde kalırsa tema düğmesi yarım çalışır.
 */
.ts-logo__im {
	width: auto;
	height: 34px;
	flex: none;
}

.ts-logo__im--koyu {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) .ts-logo__im--acik {
		display: none;
	}

	:root:not([data-tema="acik"]) .ts-logo__im--koyu {
		display: block;
	}
}

:root[data-tema="koyu"] .ts-logo__im--acik {
	display: none;
}

:root[data-tema="koyu"] .ts-logo__im--koyu {
	display: block;
}

/* Kullanıcı açık temayı elle seçtiyse sistem tercihi ne olursa olsun
   özgün renkli logo döner. */
:root[data-tema="acik"] .ts-logo__im--acik {
	display: block;
}

:root[data-tema="acik"] .ts-logo__im--koyu {
	display: none;
}

/* ============ 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. */
/* Sütunun alt sınırı yine sıfırlanıyor: arıza kodu formu kendi içsel
   genişliğinde ısrar edince bu grid de şişiyor ve içindeki video ile
   panel hero'nun dışına taşıp kırpılıyordu. Bkz. yerlesim.css,
   .ts-hero__duzen — aynı hatanın bir kat aşağıdaki tekrarı. */
.ts-hero__cihaz { display: grid; grid-template-columns: minmax(0, 1fr); 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).
 */
/* ============ Yazılıyor efekti ============
 *
 * Cümleler farklı uzunlukta olduğu için satır sayısı değişiyor ve
 * altındaki her şey zıplıyordu. min-height iki satırlık yeri önden
 * ayırıyor: en uzun cümle geldiğinde düzen kaymıyor (CLS = 0).
 */
.ts-yazac {
	display: block;
	min-height: calc(2em * var(--ts-satir-siki));
}

/* Marka sayfasında soru satırı H1'in altında; tek satırlık yer yeter. */
.ts-hero__soru {
	margin: calc(var(--ts-b1) * -1) 0 var(--ts-b2);
	font-size: var(--ts-fs-xl);
	font-weight: 600;
	letter-spacing: var(--ts-aralik-siki);
	color: var(--ts-metin-yumusak);
}

.ts-hero__soru .ts-yazac {
	min-height: calc(1em * var(--ts-satir));
}

.ts-yazac__imlec {
	display: none;
	width: 0.06em;
	height: 0.82em;
	margin-left: 0.06em;
	background: var(--ts-turuncu);
	vertical-align: baseline;
}

/* İmleç yalnız efekt gerçekten çalışırken görünür. JS kapalıysa ya da
   hareket azaltma açıksa yanıp sönen bir çizgi bırakmak yanıltıcı. */
.ts-yazac--canli .ts-yazac__imlec {
	display: inline-block;
	animation: ts-imlec 1s steps(2, start) infinite;
}

@keyframes ts-imlec {
	to { visibility: hidden; }
}

/* ============ Cihaz illüstrasyonu ============
 *
 * Çizim lacivert çizgilerden oluşuyor; koyu temada lacivert zemin
 * üzerinde görünmez oluyordu. Logo ile aynı çözüm: iki varyant,
 * tema durumuna göre biri gizleniyor. Üç durum da yazılı, çünkü
 * rengin tek tanımı medya sorgusunda kalırsa tema düğmesi yarım
 * çalışır (bkz. token.css başındaki not).
 */
.ts-cihaz-gorsel img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-inline: auto;
}

/* Cihaz kartındaki çizim: kartın üstünü dolduruyor ama kart
   yüksekliğini şişirmemesi için sabit yükseklikte tutuluyor. */
.ts-cihaz-kart__gorsel {
	display: block;
	margin-bottom: var(--ts-b2);
}

.ts-cihaz-kart__gorsel img {
	width: 100%;
	max-width: 190px;
	height: 104px;
	object-fit: contain;
	object-position: left center;
	margin-inline: 0;
}

.ts-cihaz-gorsel__koyu { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) .ts-cihaz-gorsel__acik { display: none; }
	:root:not([data-tema="acik"]) .ts-cihaz-gorsel__koyu { display: block; }
}

:root[data-tema="koyu"] .ts-cihaz-gorsel__acik { display: none; }
:root[data-tema="koyu"] .ts-cihaz-gorsel__koyu { display: block; }

:root[data-tema="acik"] .ts-cihaz-gorsel__acik { display: block; }
:root[data-tema="acik"] .ts-cihaz-gorsel__koyu { display: none; }

.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. */
/* Rıza çubuğu açıkken mobil çubuk onun üstüne çıkar.
 *
 * Kardeş birleştiricisi (~) burada çalışmıyordu: rıza çubuğu wp_footer
 * kancasıyla basılıyor, yani DOM'da mobil çubuktan SONRA geliyor ve `~`
 * yalnız sonraki kardeşleri seçiyor. Kural sessizce ölüydü; iki çubuk
 * üst üste biniyordu. `:has()` ile yön bağımlılığı ortadan kalkıyor. */
body:has(.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; }
}


/* ============ Kaydırmayla hareket ============
 *
 * Kütüphane yok: tarayıcının kaydırma zaman çizelgesi (animation-timeline:
 * view()) kullanılıyor. Desteklemeyen tarayıcı @supports dışında kalır ve
 * yalnız .ts-belir belirmesini görür; hareket azaltma tercihinde hiçbiri
 * çalışmaz. Animasyonlar transform/opacity ile sınırlı, düzen kayması yok.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Cihaz çizimi kart görünürken aşağıdan süzülüp yerine oturur. */
		.ts-suzul {
			animation: ts-suzul linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}

		/* Adımlar: kartın sol kenarındaki çizgi kaydırmayla dolar. */
		.ts-adimlar .ts-adim {
			position: relative;
		}

		/* Numara rozeti 40px ve solda; çizgi rozetin ortasından aşağı iner. */
		.ts-adimlar .ts-adim::after {
			content: "";
			position: absolute;
			inset: 48px auto 4px 19px;
			width: 2px;
			border-radius: 2px;
			background: var(--ts-turuncu);
			transform-origin: top;
			transform: scaleY(0);
			animation: ts-dol linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 55%;
		}
	}
}

@keyframes ts-suzul {
	from { transform: translateY(32px) scale(0.94); }
	to { transform: none; }
}

@keyframes ts-dol {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

/* Kesit ana sayfa girişinde: hero sütununa sığsın, altındaki LCD ile
   arasında boşluk kalsın. */
.ts-hero__cihaz .ts-kombi {
	max-width: 360px;
	margin: 0 auto var(--ts-b4, 24px);
}


/* Cihaz sayfasında gerçek fotoğraf: çizimle aynı yeri kaplar. */
.ts-cihaz-gorsel--foto .ts-cihaz-foto {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 24px 60px -24px rgba(11, 18, 32, 0.55);
}

/* ============ Fotoğraf kartı ============
 *
 * Cihaz kartlarının büyük hâli: görsel kartın tamamını kaplar, başlık
 * görselin üstünde durur. Eski kartta görsel küçük bir şeritti ve dört
 * kart uzaktan aynı görünüyordu.
 *
 * Çizimler `contain` ile yerleştiriliyor, `cover` ile değil: cihaz
 * çizimlerinin kenarı boşluklu, `cover` onları kırpar ve kombi yarım
 * kalır. Fotoğraf kullanılan yerlerde `--kirp` sınıfı `cover`a geçirir.
 */

.ts-foto-kart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 300px;
	padding: var(--ts-b3);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: var(--ts-yuzey-vurgu);
	transition: border-color var(--ts-gecis), box-shadow var(--ts-gecis), transform var(--ts-gecis);
}

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

.ts-foto-kart__gorsel {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--ts-b3) var(--ts-b3) 30%;
}

.ts-foto-kart__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.6s var(--ts-egri, ease);
}

.ts-foto-kart--kirp .ts-foto-kart__gorsel { padding: 0; }
.ts-foto-kart--kirp .ts-foto-kart__gorsel img { object-fit: cover; }

.ts-foto-kart:hover .ts-foto-kart__gorsel img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.ts-foto-kart:hover .ts-foto-kart__gorsel img { transform: none; }
	.ts-foto-kart:hover { transform: none; }
}

/* Başlık şeridi: görselin altını karartıp metni okunur yapar. Kartın
   zemini temaya bağlı ama bu şerit değil — altında görsel var. */
.ts-foto-kart__yazi {
	position: relative;
	padding-top: var(--ts-b5);
	margin: calc(var(--ts-b3) * -1);
	margin-top: 0;
	padding-inline: var(--ts-b3);
	padding-bottom: var(--ts-b3);
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(11, 27, 51, 0.55) 32%,
		rgba(11, 27, 51, 0.94) 68%,
		rgba(11, 27, 51, 0.97) 100%);
	color: #fff;
}

.ts-foto-kart__yazi .ts-kart__baslik { color: #fff; margin-bottom: 2px; }
.ts-foto-kart__yazi .ts-kart__metin { color: #C6D2E4; margin: 0; }

/* ============ Üçlü blok: foto | metin | foto ============
 *
 * Ortadaki metin iki fotoğrafın arasında nefes alır. Mobilde fotoğraflar
 * metnin altına iner — üstte iki fotoğraf üst üste gelirse kullanıcı
 * metne ulaşmadan kaydırmaktan vazgeçiyor.
 */

.ts-uclu {
	display: grid;
	gap: var(--ts-b4);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.ts-uclu {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
		gap: var(--ts-b5);
	}
}

.ts-uclu__foto {
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	box-shadow: 0 24px 60px -28px rgba(11, 18, 32, 0.6);
}

.ts-uclu__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobilde metin önce gelsin: kaynak sırası foto-metin-foto, görsel sıra
   metin-foto-foto. `order` sadece tek sütunda devrede. */
@media (max-width: 899px) {
	.ts-uclu__metin { order: -1; }
	.ts-uclu__foto { aspect-ratio: 16 / 10; }
}

.ts-uclu__metin { text-align: center; }
.ts-uclu__metin p { margin-inline: auto; max-width: 46ch; }

/* ============ Yapışkan metin + fotoğraf ızgarası ============
 *
 * Sol sütun kaydırırken sabit durur, sağdaki fotoğraflar akar. Yapışkanlık
 * yalnız iki sütunlu düzende açık: tek sütunda sabitlenen başlık, altındaki
 * içeriği ekrandan kovuyor.
 */

.ts-yapiskan {
	display: grid;
	gap: var(--ts-b5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 980px) {
	.ts-yapiskan {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--ts-b8);
	}

	.ts-yapiskan__metin {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

.ts-yapiskan__izgara {
	display: grid;
	gap: var(--ts-b2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ts-yapiskan__foto {
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.ts-yapiskan__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.ts-yapiskan__foto:hover img { transform: scale(1.05); }

/* İkinci fotoğraf bir kademe aşağıdan başlar — ızgara düz bir duvar
   gibi durmasın, referanstaki kaydırılmış his oluşsun. */
@media (min-width: 700px) {
	.ts-yapiskan__izgara > :nth-child(even) { margin-top: var(--ts-b5); }
}

@media (prefers-reduced-motion: reduce) {
	.ts-yapiskan__foto:hover img { transform: none; }
}

/* ============ Masaüstü yüzen iletişim düğmeleri ============
 *
 * Mobilde alt çubuk (.ts-mobil-cubuk) zaten var; bunlar yalnız masaüstünde
 * görünür. z-index 45: yapışkan başlığın (40) üstünde, mobil çubuğun (50)
 * ve rıza çubuğunun (60) altında.
 */

.ts-yuzen {
	position: fixed;
	right: var(--ts-b3);
	bottom: var(--ts-b3);
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ts-b1);
}

/* Telefonda arama ve WhatsApp zaten alt çubukta; burada tekrarlanmaz.
   Rehbere kaydet kalır — karşılığı alt çubukta yok ve asıl telefonda
   işe yarıyor. Çubuğun üstüne çıkması için alt boşluk artıyor. */
@media (max-width: 767px) {
	.ts-yuzen { bottom: 76px; }

	/* Seçicide `a` var, çünkü aşağıdaki `.ts-yuzen a { display: grid }`
	   kuralı (0,1,1) sınıf seçicisinden (0,1,0) daha güçlü ve medya
	   sorgusu özgüllüğü değiştirmiyor — `display: none` eziliyordu. */
	.ts-yuzen a.ts-yuzen__wa,
	.ts-yuzen a.ts-yuzen__tel { display: none; }
}

.ts-yuzen a {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: #fff;
	box-shadow: var(--ts-golge-lg);
	transition: transform var(--ts-gecis);
}

.ts-yuzen a:hover { transform: scale(1.08); }
.ts-yuzen__wa { background: #25D366; }
.ts-yuzen__tel { background: var(--ts-turuncu); }

/* Rehber düğmesi lacivert: arama turuncu, WhatsApp yeşil — üçüncü bir
   eylem üçüncü bir renk istiyor, yoksa hangi düğmenin ne yaptığı
   ikonları okumadan anlaşılmıyor. */
.ts-yuzen__rehber {
	background: var(--ts-lacivert);
	width: auto;
	min-width: 52px;
	padding-inline: 14px;
	gap: 8px;
	grid-auto-flow: column;
	white-space: nowrap;
}

/* Yazı yalnız masaüstünde ve yalnız üzerine gelince: sürekli açık
   duran bir etiket üç düğmeyi bir menüye çevirir ve dikkati böler. */
.ts-yuzen__yazi {
	display: none;
	font-size: var(--ts-fs-sm);
	font-weight: 600;
}

@media (min-width: 768px) and (hover: hover) {
	.ts-yuzen__rehber:hover .ts-yuzen__yazi,
	.ts-yuzen__rehber:focus-visible .ts-yuzen__yazi { display: inline; }
	.ts-yuzen__rehber:hover { transform: none; }
}

/* Rıza çubuğu açıkken düğmeler onun üstüne çıkar. */
body:has(.ts-riza:not([hidden])) .ts-yuzen { bottom: 92px; }

@media (prefers-reduced-motion: reduce) {
	.ts-yuzen a:hover { transform: none; }
}

/* Hero aşağı oku — ikon setinde aşağı ok yok, sağ ok 90° çevriliyor. */
.ts-hero__ok svg { rotate: 90deg; }

/* ============ Marka sayfasında video hero ============
 *
 * Ana sayfadakinden iki farkı var, ikisi de bilinçli:
 *
 * 1. ALÇAK (62svh, 100svh değil). Bu sayfalar Google Ads iniş sayfası.
 *    Reklama tıklayan kişi kaydırmadan H1'i, arama butonunu ve hemen
 *    altındaki "Kısaca" bloğunu (model sayısı, fiyat aralığı, garanti)
 *    görmeli. Tam ekran hero o kanıtı katlamanın altına iterdi.
 *
 * 2. SOLA HİZALI. Ortalanmış başlık ana sayfada "biz kimiz" der;
 *    burada H1 aranan kelimenin birebir karşılığı ve soldan okunan
 *    bir belge gibi durması gerekiyor.
 */

.ts-hero--video.ts-hero--marka {
	min-height: 62svh;
	padding-block: var(--ts-b6) var(--ts-b5);
}

.ts-hero--video.ts-hero--marka .ts-hero__ic {
	text-align: left;
	justify-items: start;
}

.ts-hero--video.ts-hero--marka h1 { max-width: 22ch; }
.ts-hero--video.ts-hero--marka .ts-hero__giris { max-width: 54ch; }
.ts-hero--video.ts-hero--marka .ts-hero__aksiyon { justify-content: flex-start; }

/* Perde markanın kendi rengini taşıyor: tek video dosyası, 22 ayrı kimlik.
 *
 * Renk SOLDA yoğun, sağa doğru laciverte dönüyor — yani metnin durduğu
 * taraf her zaman en koyu yer. Markanın rengi açık olsa bile (ECA turkuazı
 * gibi) beyaz metnin kontrastı bu sıralamayla garanti altında. */
.ts-hero--video.ts-hero--marka .ts-hero__perde {
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--ts-marka-renk, var(--ts-lacivert)) 52%, rgba(8, 15, 28, 0.58)) 0%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 46%, transparent) 55%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 30%, transparent) 100%);
}

/* Marka sayfasında metin solda, dolayısıyla gölge de solda toplanıyor.
   Ana sayfadaki ortalanmış gölge burada sağ yarıyı boş yere karartırdı. */
.ts-hero--video.ts-hero--marka .ts-hero__ic::before {
	background: radial-gradient(60% 66% at 26% 50%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 78%, transparent) 0%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 50%, transparent) 50%,
		transparent 84%);
}

/* Video üstündeki metinler tema değişkenlerinden değil beyazdan besleniyor:
   altlarındaki zemin kullanıcının temasına değil videoya ait. */
.ts-hero--video.ts-hero--marka .ts-iz,
.ts-hero--video.ts-hero--marka .ts-iz a { color: rgba(255, 255, 255, 0.72); }
.ts-hero--video.ts-hero--marka .ts-iz a:hover { color: #fff; }

.ts-hero--video.ts-hero--marka .ts-marka-etiket {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	backdrop-filter: blur(6px);
}

.ts-hero--video.ts-hero--marka .ts-hero__soru { color: #E6EDF7; }

/* ============ Kampanya penceresi ============
 *
 * Servis talebi penceresiyle (.ts-talep) aynı dili konuşuyor: aynı
 * yarıçap, aynı gölge, aynı arka plan karartması. İki farklı pencere
 * iki farklı kutu gibi görünürse site iki yerden derlenmiş hissi verir.
 *
 * Genişlik .ts-talep'ten dar (440px): burada form yok, tek cümle ve
 * iki düğme var. Geniş kutu boş görünürdü.
 */

.ts-pencere {
	width: min(440px, 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);
	text-align: center;
}

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

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

.ts-pencere__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-pencere__kapat:hover { color: var(--ts-metin); background: var(--ts-yuzey-vurgu); }

.ts-pencere__etiket { margin-bottom: var(--ts-b1); }

.ts-pencere__baslik {
	font-size: var(--ts-fs-xl);
	margin-bottom: var(--ts-b1);
	text-wrap: balance;
}

.ts-pencere__metin {
	color: var(--ts-metin-yumusak);
	margin-bottom: var(--ts-b3);
}

.ts-pencere__aksiyon { display: grid; gap: var(--ts-b1); }

/* "Şimdi değil" bilerek düğme gibi görünmüyor: pencerenin amacı arama,
   vazgeçme yolu görünür olmalı ama aramayla yarışmamalı. */
.ts-pencere__vazgec {
	margin-top: var(--ts-b2);
	border: 0;
	background: transparent;
	color: var(--ts-metin-silik);
	font-size: var(--ts-fs-sm);
	text-decoration: underline;
	cursor: pointer;
	padding: 8px;
}

.ts-pencere__vazgec:hover { color: var(--ts-metin); }

/* Açılış hareketi. `allow-discrete`, display:none'dan çıkarken de
   geçişin çalışmasını sağlıyor; olmadan pencere birden belirir. */
@media (prefers-reduced-motion: no-preference) {
	.ts-pencere {
		opacity: 0;
		translate: 0 12px;
		transition: opacity 220ms ease, translate 220ms ease, overlay 220ms allow-discrete, display 220ms allow-discrete;
	}

	.ts-pencere[open] { opacity: 1; translate: 0 0; }

	@starting-style {
		.ts-pencere[open] { opacity: 0; translate: 0 12px; }
	}
}

/* Telefonda alt aksiyon çubuğu (.ts-mobil-cubuk) pencerenin altını
   kapatıyordu; pencere biraz yukarı alınıyor. */
@media (max-width: 767px) {
	.ts-pencere { margin-bottom: 84px; }
}