/*
 * Yerleşim katmanı: durum bandı, başlık, hero, mobil aksiyon çubuğu, alt bilgi.
 */

/* ============ Durum bandı ============
 * Sayfanın en üstünde, tek bir gerçeği söyler: şu anda ulaşılabiliriz.
 * Süs değil — kombisi bozulan kişinin ilk sorusunun cevabı.
 */

.ts-durum {
	background: var(--ts-lacivert);
	color: #fff;
	font-size: var(--ts-fs-sm);
}

.ts-durum__ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-b2);
	min-height: 42px;
	padding-block: 6px;
}

.ts-durum__acik {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

/* Yanıp sönen nokta: "şu anda açığız" sinyali. */
.ts-durum__nokta {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #35D07F;
	box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.7);
	animation: ts-nabiz 2.4s infinite;
}

@keyframes ts-nabiz {
	70% { box-shadow: 0 0 0 8px rgba(53, 208, 127, 0); }
	100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.ts-durum__nokta { animation: none; }
}

.ts-durum__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	letter-spacing: 0.01em;
}

.ts-durum__tel:hover { color: var(--ts-turuncu); }

/* ============ Başlık ============ */

.ts-baslik {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--ts-zemin) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ts-kenar);
}

.ts-baslik__ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-b2);
	min-height: 68px;
}

.ts-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: var(--ts-fs-lg);
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--ts-metin);
}

/* Ölçüler ve tema varyantı bilesen.css'teki "KKS logosu" bölümünde. */

.ts-logo__alt {
	display: block;
	font-size: var(--ts-fs-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ts-metin-silik);
}

/* Marka sayfasında logo kilidi markaya döner. Marka adı öne çıkar, ama
   kendi firma adımız alt satırda kalır — kimlik taklidi değil, bağlam.

   Renk kuralı marka renkleri bölümünde (bilesen.css). */
/* Logo kaldırıldığı için marka adı başlıktaki tek im: büyük yazılır. */
.ts-logo__marka {
	display: block;
	font-size: var(--ts-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.ts-logo--marka {
	padding-left: 12px;
	border-left: 3px solid var(--ts-marka-renk);
}

.ts-menu {
	display: none;
	gap: var(--ts-b3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Menü maddesi.
 *
 * Renk ertelenmiş: turuncu çizgi sürekli durmuyor, üzerine gelince
 * soldan açılıyor. Aynı davranış marka kartlarında da var — sitede
 * tekrarlanan bir dil, tek seferlik bir süsten daha düşünülmüş okunur.
 *
 * Alt çizgi için yer padding ile önden ayrıldı; sonradan eklenen bir
 * çizgi satır yüksekliğini değiştirip başlığı zıplatırdı. */
.ts-menu a {
	position: relative;
	display: block;
	padding-block: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--ts-fs-md);
	letter-spacing: -0.015em;
	color: var(--ts-metin-yumusak);
	transition: color var(--ts-gecis);
}

.ts-menu a::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: var(--ts-turuncu);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms ease;
}

.ts-menu a:hover,
.ts-menu a:focus-visible {
	color: var(--ts-metin);
}

.ts-menu a:hover::after,
.ts-menu a:focus-visible::after {
	transform: scaleX(1);
}

/* Bulunulan sayfa: çizgi kalıcı ve metin tam renkte. */
.ts-menu .ts-menu--acik {
	color: var(--ts-metin);
	font-weight: 700;
}

.ts-menu .ts-menu--acik::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ts-menu a::after { transition: none; }
}

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

@media (min-width: 900px) {
	.ts-menu { display: flex; }
}

/* ---- Başlığın dar ekran davranışı ----
 *
 * Telefonda başlık üç öğeyi yan yana sığdırmaya çalışırken firma adı üç,
 * slogan beş, düğme iki satıra bölünüyordu; başlık ekranın üçte birini
 * kaplıyordu. Slogan burada bilgi taşımıyor — ana sayfada zaten yazıyor —
 * bu yüzden kaldırılıyor, ad tek satıra sabitleniyor ve düğme kısalıyor.
 */
@media (max-width: 899px) {
	.ts-baslik__ic { gap: var(--ts-b1); }

	/* Temel boyut sıfır olmalı, `auto` değil.
	 *
	 * flex-wrap:wrap açıkken tarayıcı önce öğelerin temel boyutlarını
	 * satıra sığdırmayı dener; sığmazsa küçültmeye çalışmaz, doğrudan
	 * satırı kırar. Logonun temel boyutu içeriği kadar (242px) olduğu
	 * için arama düğmesiyle birlikte sığmıyor ve düğmeler alt satıra
	 * düşüyordu. Sıfır temel boyutla logo satıra sığar ve kalan yeri
	 * doldurur; ad uzunsa üç nokta ile kısalır. */
	.ts-logo {
		flex: 1 1 0;
		min-width: 0;
		font-size: var(--ts-fs-md);
	}

	.ts-logo > span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ts-logo__alt { display: none; }

	/* 480px altında firma adı üç noktayla kesiliyordu ve kırpılmış bir
	   ad hataya benziyor. KKS imi zaten im-yazı, adı taşıyor. Marka
	   sayfalarında im basılmadığı için metin orada kalmalı. */
	@media (max-width: 479px) {
		.ts-logo:not(.ts-logo--marka) > span:not(.ts-logo__metin) { display: none; }
	}

	.ts-logo__im { height: 26px; }

	.ts-logo__marka { font-size: var(--ts-fs-lg); }

	.ts-baslik__tel { white-space: nowrap; }

	/* "Hemen Ara" yerine yalnız ikon: 390px'te metin düğmeyi kırıyordu
	   ve düğmenin ne yaptığı ikondan zaten anlaşılıyor. Ekran okuyucu
	   için etiket aria-label'da duruyor. */
	.ts-baslik__tel span { display: none; }

	/* ---- Mobil menü ----
	 *
	 * Menü dar ekranda tamamen gizliydi: telefondan Şofben, Brülör,
	 * Klima ve Fiyat sayfalarına başlıktan ulaşmanın yolu yoktu, tek
	 * çıkış footer'dı. Alttaki sabit çubuk yalnız arama ve WhatsApp
	 * veriyor, gezinme vermiyor.
	 *
	 * Açılır çekmece yerine yatay kaydırılan şerit: tek dokunuşla
	 * hedefe gidiliyor, açma-kapama durumu tutmak gerekmiyor ve
	 * bağlantılar görünür olduğu için varlıkları keşfedilebilir.
	 */
	.ts-baslik__ic { flex-wrap: wrap; min-height: 56px; }

	/* min-width:0 olmadan nav içeriği kadar geniş kalıyor ve satırı
	   taşırıyor; flex öğelerinin varsayılan alt sınırı min-content. */
	.ts-baslik__ic > nav { flex: 1 0 100%; order: 3; min-width: 0; }

	.ts-menu {
		display: flex;
		gap: var(--ts-b3);
		overflow-x: auto;
		scrollbar-width: none;
		padding: 0 0 10px;
	}

	.ts-menu::-webkit-scrollbar { display: none; }

	.ts-menu li { flex: none; }

	.ts-menu a { white-space: nowrap; }
}

/* Tema düğmesi */
.ts-tema-dugme {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--ts-yuzey-vurgu);
	border: 1px solid var(--ts-kenar);
	border-radius: var(--ts-yaricap-sm);
	color: var(--ts-metin-yumusak);
	cursor: pointer;
}

.ts-tema-dugme:hover { color: var(--ts-turuncu); border-color: var(--ts-kenar-guclu); }
.ts-tema-dugme svg { width: 20px; height: 20px; }
.ts-tema-dugme .ts-ay { display: none; }
:root[data-tema="koyu"] .ts-tema-dugme .ts-ay { display: block; }
:root[data-tema="koyu"] .ts-tema-dugme .ts-gunes { display: none; }

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

.ts-baslik__tel { display: none; }
@media (min-width: 900px) { .ts-baslik__tel { display: inline-flex; } }

/* ============ Hero ============ */

.ts-hero {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background:
		radial-gradient(1100px 420px at 12% -12%, color-mix(in srgb, var(--ts-turuncu) 12%, transparent), transparent 62%),
		var(--ts-zemin-alt);
	overflow: hidden;
}

/* İnce teknik ızgara deseni — görsel dosyası yok, saf CSS. */
.ts-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--ts-kenar) 1px, transparent 1px),
		linear-gradient(90deg, var(--ts-kenar) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: 0.35;
	mask-image: radial-gradient(700px 380px at 78% 12%, #000, transparent 72%);
	pointer-events: none;
}

.ts-hero__ic { position: relative; z-index: 1; }

/* minmax(0, …) şart: grid sütununun varsayılan alt sınırı `auto`, yani
 * içindeki en geniş öğenin min-content genişliği. Arıza kodu formu
 * 421px'in altına sıkışmayı reddedince sütun onunla birlikte şişiyor ve
 * aynı sütundaki başlık da taşıyordu. Hero'da overflow:hidden olduğu
 * için taşan metin kaydırılmıyor, kırpılıyordu: telefonda H1 "Kombi ba"
 * diye kesiliyordu.
 *
 * Alt sınırı sıfırlamak sütunu kapsayıcıya bağlar; içerik ne olursa
 * olsun dışarı çıkamaz. */
.ts-hero__duzen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-b5);
	align-items: start;
}

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

.ts-hero h1 { margin-bottom: var(--ts-b2); }

.ts-hero__giris {
	font-size: var(--ts-fs-lg);
	color: var(--ts-metin-yumusak);
	max-width: 46ch;
	margin-bottom: var(--ts-b4);
}

.ts-hero__aksiyon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-b2);
	margin-bottom: var(--ts-b3);
}

.ts-hero__rozetler { display: flex; flex-wrap: wrap; gap: var(--ts-b1); }

/* ============ Video hero ============
 *
 * Hero'nun tamamı bir fotoğrafın üstünde durduğu için burada tema
 * geçerli değil: metin açık temada da koyu temada da beyaz. Zemin
 * kullanıcının tercihine değil videonun kendisine ait.
 *
 * Yükseklik `svh` ile ölçülüyor, `vh` ile değil. Mobil tarayıcıda
 * adres çubuğu kayarken `vh` sabit kalır ve hero ekrandan taşar;
 * `svh` küçük hâli esas alır, yani çubuk açıkken de tam oturur.
 */

.ts-hero--video {
	min-height: 88svh;
	display: grid;
	align-items: center;
	padding-block: var(--ts-b8);
	background: var(--ts-lacivert-koyu);
	color: #fff;
}

@media (min-width: 768px) {
	.ts-hero--video { min-height: 100svh; }
}

/* Teknik ızgara deseni videonun üstünde gürültü; sadece burada kapanır. */
.ts-hero--video::after { display: none; }

.ts-hero__ortam {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

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

/* Perde ile metin gölgesi AYRI iki katman — bilerek.
 *
 * Tek bir kalın perde ikisini birden yapmaya çalışıyordu: hem metni
 * okunur tutmak hem markanın lacivertini kadraja taşımak. Sonuç,
 * videonun kendisinin görünmemesiydi (ölçtük: kontrast 12,8:1, yani
 * gerekenin üç katı — bedeli görüntünün kararmasıydı).
 *
 * Şimdi perde ince: video görünüyor, marka rengi duruyor. Okunurluğu
 * ise metnin tam arkasındaki yumuşak gölge (.ts-hero__ic::before)
 * sağlıyor. Karartma yalnız gerektiği yerde, kadranın tamamında değil.
 *
 * Alt kenar biraz daha koyu: rozetler ve kaydırma oku orada. */
.ts-hero__perde {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--ts-lacivert-koyu) 46%, transparent) 0%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 22%, transparent) 42%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 58%, transparent) 100%);
}

/* Metnin arkasındaki yumuşak gölge.
 *
 * `z-index: -1` burada güvenli: .ts-hero__ic kendi yığın bağlamını
 * açıyor (position + z-index), dolayısıyla gölge metnin arkasına
 * geçiyor ama perdenin önünde kalıyor — sayfanın geri kalanına sızmıyor.
 *
 * Kenarı `transparent`e kadar yumuşuyor; sert kenarlı bir kutu videonun
 * üstünde dikdörtgen bir leke gibi durur. */
.ts-hero--video .ts-hero__ic::before {
	content: "";
	position: absolute;
	inset: -10% -8%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(64% 62% at 50% 52%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 86%, transparent) 0%,
		color-mix(in srgb, var(--ts-lacivert-koyu) 62%, transparent) 48%,
		transparent 82%);
}

.ts-hero--video .ts-hero__ic {
	text-align: center;
	display: grid;
	justify-items: center;
}

/* Harflerin kendi gölgesi — yumuşak gölgenin (::before) tamamlayıcısı.
 *
 * İkisi birlikte çalışıyor: blok gölge geniş alanı bir kademe indiriyor,
 * harf gölgesi ise harfin hemen dibindeki 1-2 pikseli. Videonun parlak
 * bir karesi tam harfin arkasına denk geldiğinde kurtaran bu ikincisi.
 *
 * Butonlara ve rozetlere uygulanmıyor: onların kendi opak zemini var,
 * gölge oraya bulaşınca yazı kirli görünüyor. */
.ts-hero--video .ts-hero__ic :is(h1, h2, p, .ts-etiket, .ts-hero__soru) {
	text-shadow:
		0 1px 2px rgba(8, 15, 28, 0.55),
		0 2px 14px rgba(8, 15, 28, 0.40);
}

.ts-hero--video .ts-hero__ic :is(.ts-btn, .ts-rozet) { text-shadow: none; }

/* Punto yalnız burada büyütülüyor, --ts-fs-3xl'e dokunmadan: o token
   4.327 landing sayfasının da H1'i ve orada 64px başlık, üstünde video
   olmayan bir sayfayı bağırtır. */
.ts-hero--video h1 {
	color: #fff;
	font-size: clamp(2.25rem, 4.6vw + 1.1rem, 4rem);
	max-width: 20ch;
	text-wrap: balance;
}

.ts-hero--video .ts-hero__giris {
	color: #DCE5F2;
	max-width: 58ch;
}

.ts-hero--video .ts-hero__aksiyon { justify-content: center; }
.ts-hero--video .ts-hero__rozetler { justify-content: center; }

/* Rozetler cam yüzey: videonun rengi altından geçiyor ama metin
   okunur kalıyor. Kenarlık tema değişkeninden değil beyazdan,
   çünkü altındaki zemin temaya değil videoya bağlı. */
.ts-hero--video .ts-rozet {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
	backdrop-filter: blur(6px);
}

.ts-hero--video .ts-etiket { color: #FFB183; }

/* Aşağı ok — hero tam ekran olunca altında içerik olduğu belli olmuyor.
   Kaydırma ipucu bunu söyler. */
.ts-hero__ok {
	position: absolute;
	left: 50%;
	bottom: var(--ts-b3);
	translate: -50% 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	animation: ts-ok-ini 2.4s ease-in-out infinite;
}

.ts-hero__ok:hover { background: rgba(255, 255, 255, 0.14); }

@keyframes ts-ok-ini {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* Mobilde hero butonları alt çubukla çakışmasın diye ok gizlenir. */
@media (max-width: 767px) {
	.ts-hero__ok { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ts-hero__ok { animation: none; }
}

/* ============ Mobil aksiyon çubuğu ============
 * Sayfanın neresinde olursa olsun arama iki dokunuş uzakta.
 * Hero'daki butonlar ekrandayken gizlenir — aynı aksiyonu iki kez
 * göstermek kararı zorlaştırır.
 */

.ts-mobil-cubuk {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--ts-kenar);
	border-top: 1px solid var(--ts-kenar);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateY(0);
	transition: transform var(--ts-gecis-yavas);
}

.ts-mobil-cubuk[data-gizli="1"] { transform: translateY(110%); }

.ts-mobil-cubuk a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--ts-cubuk-yukseklik);
	font-weight: 700;
	text-decoration: none;
}

.ts-mobil-cubuk__ara { background: var(--ts-turuncu); color: var(--ts-aksiyon-metin); }
.ts-mobil-cubuk__wa { background: var(--ts-whatsapp); color: #fff; }
.ts-mobil-cubuk svg { width: 20px; height: 20px; }

@media (min-width: 900px) {
	.ts-mobil-cubuk { display: none; }
}

/* ============ Alt bilgi ============ */

.ts-alt {
	background: var(--ts-lacivert-koyu);
	color: #C6D2E4;
	padding-block: var(--ts-b8) var(--ts-b4);
	margin-top: var(--ts-bolum);
}

.ts-alt a { color: #C6D2E4; text-decoration: none; }
.ts-alt a:hover { color: var(--ts-turuncu); }
.ts-alt h3 { color: #fff; font-size: var(--ts-fs-md); margin-bottom: var(--ts-b2); }
.ts-alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--ts-fs-sm); }

.ts-alt__duzen {
	display: grid;
	gap: var(--ts-b5);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ts-alt__son {
	margin-top: var(--ts-b6);
	padding-top: var(--ts-b3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--ts-fs-sm);
	color: #93A5BF;
}

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