/* =====================================================================
   teknikbul — ANA SAYFA DESENLERİ (patterns/*.php)
   ---------------------------------------------------------------------
   KAPSAM: yalnızca `tk-` önekli bileşenler. Bu dosyada `.tb-` ile BAŞLAYAN
   hiçbir seçici yoktur — plugin bileşenleri (`.tb-btn`, `.tb-chip`,
   `.tb-badge`, `.tb-checklist`) olduğu gibi kullanılır, ezilmez. Tema
   kabuğu (`.tbt-`) da ezilmez; ondan yalnızca `.tbt-mono`, `.tbt-kicker`,
   `.tbt-ruled`, `.tbt-flag` yardımcıları KULLANILIR.

   TEK İSTİSNA `.tk-kart__ikon svg`: `tk_ikon()` sprite'ı `.tb-icon` ile
   basar ve o kural ikonu 24px'e kilitler; kart ikonu kutusunda 44px olmak
   zorundadır. Seçici `.tk-` ile başladığı için plugin bileşeni GLOBAL
   olarak ezilmez, yalnızca bu kutunun içinde geçerlidir.

   TOKEN KAYNAĞI: `:root` üzerindeki `--tbt-*` (theme.css). Plugin'in
   `--tb-*` token'ları `.tb-root` içine kapalıdır ve plugin devre dışıyken
   TANIMSIZ kalır; bu dosya onlara bağlanmaz ki desenlerin iskeleti plugin
   olmadan da ayakta kalsın. İki token setinin DEĞERLERİ birebir aynıdır
   (theme.css §1 ile tb.css §E2 kilitli).

   YÜKLEME: `patterns/varliklar.php` → `tk_stil()`. Ön yüzde dosya
   `teknikbul-patterns` handle'ıyla `<link>` olarak kaydedilir (tarayıcı
   önbelleğine girsin, her istekte HTML gövdesini şişirmesin); satır içi
   gömme yalnızca enqueue borusunun hiç çalışmadığı bağlamlara (düzenleyici
   önizlemesi, REST hidrasyonu) kalır.

   BAĞIMLILIK `array( 'teknikbul-theme' )` OLMAK ZORUNDA: bu dosya
   tb.css'ten SONRA gelmezse `.tb-root :where(*){max-width:none}` kuralı
   `.tk-head`, `.tk-shell`, `.tk-hero__inner` ve `.tk-faq__a` ölçülerini
   sıfırlar (ikisi de 0,1,0; kaynak sırası belirler).

   @layer KULLANILMAZ. WP core `global-styles`'ı unlayered yayıyor;
   unlayered CSS özgüllükten bağımsız olarak tüm layer'ları yener.

   RENK KİLİDİ (ölçülmüş):
     #003366 + beyaz  = 12.61:1
     #FF6600 + beyaz  =  2.94:1  YASAK (3:1 UI eşiğini bile geçmiyor)
     #FF6600 + navy   =  4.29:1  metinsiz aksan olarak kullanılıyor
     #5A6B7C + beyaz  =  5.48:1  ikincil metin minimumu
     #E6EEF5 + navy   = 10.76:1  koyu zeminde ikincil metin
     rgba(255,255,255,.5) navy üstünde = #8099B3 → navy ile 4.27:1 (ghost kenar)
   GÖLGE: bu dosyada `box-shadow` YOKTUR. Yüzeyler kenarla ayrılır.
   ===================================================================== */

/* =====================================================================
   1) BÖLÜM İSKELETİ
   `<main>` `is-layout-constrained`; çekirdek `:root :where(.is-layout-
   constrained) > *` ile 16px margin-block-start enjekte ediyor (0,1,0).
   Bölümler kendi dikey ritmini `--tbt-section-y` ile kurar, araya çekirdek
   boşluğu girerse ritim bozulur.
   ================================================================== */
.tk-sec {
	position: relative;
	margin-block: 0;
	padding-block: var(--tbt-section-y);
}

/* `.tb-section` / `.tb-container` yalnızca plugin etkinken yüklenir.
   Aynı değerlerin `tk-` karşılığı burada da durur ki bölüm iskeleti
   plugin devre dışıyken de ayakta kalsın. Markup'ta İKİSİ BİRDEN
   yazılır: hangisi sonra yüklenirse yüklensin sonuç aynıdır. */
.tk-shell {
	box-sizing: border-box;
	max-width: var(--tbt-container);
	margin-inline: auto;
	padding-inline: var(--tbt-gutter);
}

/* Alt yüzey — bölüm ayrımı gölgeyle değil, yüzey + hairline ile. */
.tk-sec--alt {
	background: var(--tbt-surface-2);
	border-block: 1px solid var(--tbt-border-soft);
}

/* Bölümler arası ayrım GÖLGE değil ÇİZGİdir (mühendislik çizimi disiplini). */
.tk-sec--ruled {
	border-top: 1px solid var(--tbt-border-soft);
}

/* ---------------------------------------------------------------------
   BÖLÜM ÜST BLOĞU — İKİ KOLON
   ÖLÇÜLEN HATA: `.tk-head{max-width:68ch}` başlığı DA açıklamayı DA tek bir
   dar kolona sıkıştırıyordu; 1200px'lik kabuğun sağ yarısı her bölümde
   bomboş kalıyordu (1440px ekran görüntüsünde doğrulandı).
   DOĞRUSU: ölçü sınırı BLOĞA değil METNE aittir. Başlık kısa kalır (18ch),
   açıklama yanında ikinci kolona geçer (56ch) ve bölüm içeriği (grid,
   defter, adımlar) `.tk-head`in DIŞINDA tam genişlikte durur.
   ------------------------------------------------------------------ */
.tk-head {
	display: grid;
	gap: var(--tbt-s-4);
	margin: 0 0 var(--tbt-s-10);
}
.tk-head > h2 {
	margin: 0;
	text-wrap: balance;
}
.tk-head__p {
	margin: 0;
	max-width: 58ch;
}
@media (min-width: 900px) {
	.tk-head {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--tbt-s-6) var(--tbt-s-12);
		align-items: start;
	}
	.tk-head > h2 {
		max-width: 20ch;
	}
	.tk-head__p {
		padding-top: var(--tbt-s-1);
	}
}

/* TEK KOLON VARYANTI — desen dar bir sayfa kolonunda render ediliyorsa
   (ör. SSS artık `/hakkimizda/` gövdesinde, ≈660px) iki kolon sıkışır. */
@media (min-width: 900px) {
	.tk-head--tek {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tbt-s-4);
	}
	.tk-head--tek > h2 {
		max-width: 26ch;
	}
	.tk-head--tek .tk-head__p {
		padding-top: 0;
	}
}

/* ORTALANMIŞ VARYANT — acrepair bölüm başlığı deseni.
   Üstte hap etiket, altında iki satırlık büyük başlık; İKİNCİ SATIR MARKA
   MAVİSİ. Ürün kararı: bu kompozisyon "nasıl çalışır" bölümüne aittir;
   her bölümde tekrarlanırsa vurgu olmaktan çıkar. */
.tk-head--orta {
	justify-items: center;
	max-width: 46rem;
	margin-inline: auto;
	gap: var(--tbt-s-5);
	text-align: center;
}
.tk-head--orta > h2 {
	font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.125rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
@media (min-width: 900px) {
	.tk-head--orta {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tbt-s-5);
	}
	.tk-head--orta > h2 {
		max-width: 22ch;
	}
	.tk-head--orta .tk-head__p {
		padding-top: 0;
	}
}

/* Başlığın marka mavisi ikinci satırı — #003366, beyaz üstünde 12.61:1. */
.tk-mavi {
	color: var(--tbt-navy);
}

/* HAP ETİKET — beyaz zemin, 1px kenar, tam yuvarlak. acrepair'in
   "Our Process" etiketi. Rozet DEĞİLDİR: rozet 8px köşeli ve tarihlidir
   (DESIGN §5.3); bu yalnızca bölüm adıdır. */
.tk-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--tbt-s-2);
	min-height: 32px;
	margin: 0;
	padding: 0 var(--tbt-s-3);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-pill);
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
}

/* Küçük büyük-harf etiket. `tb-eyebrow` HİÇBİR CSS dosyasında tanımlı
   değildi; desenler artık bu sınıfı kullanıyor. */
.tk-eyebrow {
	margin: 0 0 var(--tbt-s-4);
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* Navy bant üstünde: --tbt-navy-50, navy ile 10.76:1. */
.tk-eyebrow--acik {
	color: var(--tbt-navy-50);
}

.tk-sub {
	margin: var(--tbt-s-4) 0 0;
	color: var(--tbt-ink-2);
}

/* Koyu zeminde ikincil metin: --tbt-navy-50, navy üstünde 10.76:1. */
.tk-on-navy-sub {
	color: var(--tbt-navy-50);
}

/* =====================================================================
   2) HERO — ortada metin, etrafında yüzen ürün kartları
   Referans: tsquare.com.tr hero mekaniği (yerel kaynak incelendi).
   Katman sırası: canvas (-2) → parıltı/vinyet (-1) → kartlar (1) → metin (5)
   ================================================================== */
.tk-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Sabit başlık zaten `.tbt-header-area` ile 56/72px yer ayırıyor. Buraya
	   ayrıca 72-128px dolgu konunca nav ile içerik arasında ~200px'lik boş
	   beyaz bir şerit kalıyordu. Dolgu, başlığın ayırdığı payın ÜSTÜNE binen
	   ek nefes payı kadar olmalı — daha fazlası ölü alan. */
	padding-top: clamp(1.75rem, 3.2vw, 3rem);
	padding-bottom: clamp(3.5rem, 6vw, 6rem);
	/* VENTRO ZEMINI: yumusak mavi dikey serit. Referansta bu bir uzak
	   sunucu gorseli; CSS ile ureterek 0 bayt agirlikla ayni etkiyi aliyoruz.
	   Seritler cok dusuk kontrastli — metnin arkasinda gurultu yapmamali. */
	background:
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, .55) 0 clamp(38px, 4.4vw, 64px),
			rgba(255, 255, 255, 0)   clamp(38px, 4.4vw, 64px) clamp(76px, 8.8vw, 128px)),
		linear-gradient(180deg, #E4EEF9 0%, #EFF5FB 46%, var(--tbt-surface) 100%);
}

/* Animasyonlu ağ örgüsü — her şeyin arkasında. */
.tk-hero__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
}

/* Marka parıltısı: üstten aşağı yumuşak navy radial'ler. */
.tk-hero::before {
	content: "";
	position: absolute;
	inset: -10% 0 auto 0;
	height: 70%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(45% 50% at 50% 0%, rgba(0, 51, 102, .16), transparent 70%),
		radial-gradient(30% 40% at 85% 5%, rgba(0, 51, 102, .10), transparent 70%),
		radial-gradient(30% 40% at 15% 5%, rgba(255, 102, 0, .07), transparent 70%);
	filter: blur(28px);
}

/* Vinyet: merkezdeki metnin ağ örgüsü üzerinde okunabilir kalması için.
   Kenarlara doğru beyaza yaklaşır — kartlar bu sayede yüzer görünür. */
.tk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* ÖLÇÜLEN HATA: bu vinyet merkezden dışa doğru %94 opaklığa çıkıyordu ve
	   hero'nun ÜST şeridini (merkeze en uzak bölge) tamamen beyaza boğuyordu —
	   ekran görüntüsünde nav ile içerik arasında ~150px'lik ölü beyaz alan
	   olarak görünüyordu. Vinyetin varlık sebebi metni canvas ağ örgüsünün
	   üzerinde okunur tutmaktı; canvas kaldırıldı, şeritli zemin zaten çok
	   düşük kontrastlı. Bu yüzden yalnızca ALTA doğru yumuşak bir geçiş kalır,
	   üst kenar hiç boyanmaz. */
	background: linear-gradient(180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 62%,
		rgba(255, 255, 255, .55) 88%,
		var(--tbt-surface) 100%);
}

/* ---------------------------------------------------------------------
   METİN KOLONU — kartların ÜSTÜNDE (z-index 5)
   ------------------------------------------------------------------ */
.tk-hero__inner {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tbt-s-5);
	/* Yüzen kartlar 1024px'ten itibaren görünür; metin kolonu ancak kartlar
	   dışarı sığdığında genişler. Aksi halde kart metne DEĞİYOR (ölçüldü). */
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--tbt-gutter);
	text-align: center;
}
@media (min-width: 1400px) {
	.tk-hero__inner {
		max-width: 760px;
	}
}

/* ---------------------------------------------------------------------
   H1 KIRILMASI
   ÖLÇÜLEN HATA: `max-width:16ch` + 68px punto → "Belgesi kontrol /
   edilmiş / teknik servis ustaları." — "edilmiş" tek başına satırda kaldı.
   DOĞRUSU: ölçüyü kolon belirler, `ch` değil. Punto her kırılma noktasında
   iki satırın da SIĞACAĞI değerde tutulur; `text-wrap: balance` kalan
   dengesizliği alır. <768px'te `<br>` kapanır ve üç satır DENGELİ kırılır —
   zorlanmış `<br>` orada yetim satır üretiyordu.
   ------------------------------------------------------------------ */
.tk-hero__title {
	margin: 0;
	max-width: none;
	color: var(--tbt-ink);
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

@media (max-width: 767px) {
	.tk-hero__title .tk-br {
		display: none;
	}
}

.tk-hero__sub {
	margin: 0;
	max-width: 60ch;
	color: var(--tbt-ink-3);
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
}

.tk-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tbt-s-3);
}

.tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tbt-s-2);
	min-height: 48px;
	padding: 0 var(--tbt-s-6);
	border: 1px solid transparent;
	border-radius: var(--tbt-r-pill);
	font-family: inherit;
	font-size: var(--tbt-fs-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--tbt-t-base) var(--tbt-ease),
		border-color var(--tbt-t-base) var(--tbt-ease),
		transform var(--tbt-t-fast) var(--tbt-ease);
}

/* Birincil = NAVY + beyaz (12.61:1). Turuncu dolgu + beyaz metin YASAK. */
.tk-btn--dolu {
	background: var(--tbt-navy);
	color: #FFF;
}

.tk-btn--dolu:hover {
	background: var(--tbt-navy-700);
}

.tk-btn--dolu svg {
	transition: transform var(--tbt-t-base) var(--tbt-ease);
}

.tk-btn--dolu:hover svg {
	transform: translateX(3px);
}

.tk-btn--hayalet {
	border-color: var(--tbt-border);
	background: rgba(255, 255, 255, .7);
	color: var(--tbt-navy);
}

.tk-btn--hayalet:hover {
	border-color: var(--tbt-navy-300);
	background: #FFF;
}

.tk-btn:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------------
   HERO ARAMA ÇUBUĞU — hizmet / il / ilçe
   KAPSAM TÜRKİYE GENELİ: 81 ilin tamamı seçilebilir. Native `<select>`;
   973 ilçe için OS tekerleği hem daha hızlı hem sıfır byte (DESIGN §7.4).
   GÖLGE YOK: bu bir yüzen kart değil, sayfanın kendi yüzeyidir. Ayrım
   kenarla yapılır (DESIGN §5.4).
   ------------------------------------------------------------------ */
.tk-ara {
	display: grid;
	gap: var(--tbt-s-2);
	width: 100%;
	padding: var(--tbt-s-2);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-lg);
	text-align: left;
}
@media (min-width: 860px) {
	.tk-ara {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: center;
		gap: 0;
	}
}

.tk-ara__f {
	display: grid;
	gap: 2px;
	min-width: 0;
	padding: var(--tbt-s-2) 0;
}
.tk-ara__f + .tk-ara__f {
	border-top: 1px solid var(--tbt-border-soft);
}
@media (min-width: 860px) {
	.tk-ara__f {
		padding: 0 var(--tbt-s-2);
	}
	.tk-ara__f + .tk-ara__f {
		border-top: 0;
		border-left: 1px solid var(--tbt-border-soft);
	}
}

.tk-ara__lbl {
	padding-left: var(--tbt-s-2);
	color: var(--tbt-ink-3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* 16px ZORUNLU: iOS Safari daha küçüğünde odakta sayfayı yakınlaştırır. */
.tk-ara__sel {
	width: 100%;
	min-height: 40px;
	padding: 0 var(--tbt-s-2);
	background: transparent;
	border: 0;
	color: var(--tbt-ink);
	font-family: inherit;
	font-size: var(--tbt-fs-base);
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}
.tk-ara__sel:disabled {
	color: var(--tbt-ink-muted);
	cursor: not-allowed;
}

.tk-ara__btn {
	width: 100%;
}
@media (min-width: 860px) {
	.tk-ara__btn {
		width: auto;
	}
}

/* Dürüstlük notu: ilçe listesinin nereden geldiğini söyler. */
.tk-hero__ipucu {
	max-width: 62ch;
	margin: calc(var(--tbt-s-2) * -1) 0 0;
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.5;
}

/* Kanıt satırı — yıldız/uydurma sayı YOK, gerçek sicil verisi. */
.tk-hero__kanit {
	display: inline-flex;
	align-items: center;
	gap: var(--tbt-s-2);
	margin: 0;
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
}

.tk-hero__plaka {
	padding: 2px 7px;
	border-radius: var(--tbt-r-sm);
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   YÜZEN KARTLAR
   Geniş ekranda metnin etrafına saçılır. `pointer-events:none` sarmalayıcı,
   kartların kendisi `auto` — hover çalışır ama metin seçimini engellemez.
   ------------------------------------------------------------------ */
/* Kutu ekranın kenarına kadar açılır (yalnızca 16px kenar payı bırakır);
   kartlar bu sayede metin kolonundan uzağa oturur. Önceki 1420px sabiti,
   1440px ekranda kartı H1'e 4px yaklaştırıyordu (ölçüldü). */
.tk-hero__floats {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(100% - 2rem, 1500px);
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.tk-mock {
	position: absolute;
	pointer-events: auto;
	background: #FFF;
	border: 1px solid var(--tbt-border);
	border-radius: 14px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 24px 48px -16px rgba(15, 23, 42, .16),
		0 4px 12px -4px rgba(0, 51, 102, .10);
	overflow: hidden;
	transform: rotate(var(--rot, 0deg));
	animation: tk-yuz 7s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	transition:
		transform var(--tbt-t-base) var(--tbt-ease),
		box-shadow var(--tbt-t-base) var(--tbt-ease);
}

.tk-mock:hover {
	animation-play-state: paused;
	transform: translateY(-4px) rotate(var(--rot, 0deg));
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 30px 60px -18px rgba(15, 23, 42, .22),
		0 6px 18px -6px rgba(0, 51, 102, .16);
}

@keyframes tk-yuz {
	0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
	50%      { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}

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

/* --- Konumlar (1400px+) --- */
.tk-mock--muhur    { top: 5%;  left: 0;    width: 214px; --rot: -4deg; --d: 0s;   z-index: 3; }
.tk-mock--kart     { top: 3%;  right: 0;   width: 250px; --rot: 4deg;  --d: .6s;  z-index: 2; }
.tk-mock--belge    { top: 42%; left: 0;    width: 210px; --rot: 3deg;  --d: 1.2s; z-index: 2; }
.tk-mock--defter   { top: 40%; right: 0;   width: 220px; --rot: -3deg; --d: 1.8s; z-index: 3; }
.tk-mock--iletisim { bottom: 6%; left: 2%;  width: 224px; --rot: 4deg;  --d: 2.4s; z-index: 2; }
.tk-mock--akis     { bottom: 4%; right: 2%; width: 240px; --rot: -4deg; --d: 3s;   z-index: 2; }

/* Orta ekran: kartlar küçülür ve kenara yaslanır. Eşik 1279 → 1399:
   1280-1399 arasında tam boy kartlar metin kolonuna değiyordu. */
@media (max-width: 1399px) {
	.tk-mock--muhur    { width: 178px; }
	.tk-mock--kart     { width: 210px; }
	.tk-mock--belge    { width: 182px; top: 45%; }
	.tk-mock--defter   { width: 188px; top: 43%; }
	.tk-mock--iletisim { width: 192px; left: 0; }
	.tk-mock--akis     { width: 200px; right: 0; }
}

/* Dar ekran: kolaj GİZLENİR. tsquare da aynısını yapıyor — 6 kartı 360px'e
   sıkıştırmak metni okunmaz hale getirir. Mobilde hero saf metin + CTA. */
@media (max-width: 1023px) {
	.tk-hero__floats {
		display: none;
	}

	.tk-hero {
		padding-top: clamp(3rem, 9vw, 4.5rem);
		padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
	}
}

/* ---------------------------------------------------------------------
   KART İÇLERİ
   ------------------------------------------------------------------ */

/* TL — doğrulama mührü */
.tk-mock--muhur {
	display: flex;
	align-items: center;
	gap: var(--tbt-s-3);
	padding: var(--tbt-s-4);
}

.tk-muhur__ring {
	position: relative;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
}

.tk-muhur__ring svg {
	width: 100%;
	height: 100%;
}

/* ÖLÇÜLEN HATA: `display:grid` içinde çıplak "3" metni ANONİM bir grid
   öğesi oluyor, `<span>/3</span>` ikinci öğe → ikisi ALT ALTA düşüyor ve
   "/3" halkanın alt kenarından taşıyordu. Flex + baseline ile "3/3" tek
   satırda, büyük rakam ve küçük "/3" aynı taban çizgisinde durur. */
.tk-muhur__num {
	position: absolute;
	inset: 0;
	display: flex;
	/* `flex-wrap` YOKSA `align-content` yok sayılır ve tek satırlık içerik
	   kutunun TEPESİNE yapışır (ölçüldü: "3/3" halkanın üst kenarına çıktı).
	   wrap + align-content:center satırı dikeyde ortalar, align-items:
	   baseline büyük rakamla küçük "/3"ü aynı taban çizgisinde tutar. */
	flex-wrap: wrap;
	align-items: baseline;
	align-content: center;
	justify-content: center;
	color: var(--tbt-navy);
	font-weight: 700;
	line-height: 1;
}

.tk-muhur__n {
	font-size: 16px;
}

.tk-muhur__t {
	font-size: 10px;
	opacity: .6;
}

.tk-muhur__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tk-muhur__lbl {
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-xs);
	font-weight: 600;
	line-height: 1.3;
}

.tk-muhur__tag {
	color: var(--tbt-ink-3);
	font-size: 11px;
}

/* TR — usta kartı */
.tk-mock--kart {
	padding: var(--tbt-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-3);
}

.tk-k__ust {
	display: flex;
	align-items: center;
	gap: var(--tbt-s-3);
}

.tk-k__mono {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
	font-size: 13px;
	font-weight: 700;
}

.tk-k__ad {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
}

.tk-k__baslik {
	width: 78%;
	height: 10px;
	border-radius: 3px;
	background: rgba(15, 23, 42, .13);
}

.tk-k__alt {
	width: 48%;
	height: 8px;
	border-radius: 3px;
	background: rgba(15, 23, 42, .07);
}

.tk-k__rozet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 4px 9px;
	border-radius: var(--tbt-r-sm);
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
	font-size: 11px;
	font-weight: 600;
}

.tk-k__rozet svg {
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
}

.tk-k__btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

/* Kartta HER ZAMAN tam 2 buton — 360px kuralı mockup'ta da korunur. */
.tk-k__btn {
	display: grid;
	place-items: center;
	height: 30px;
	border-radius: var(--tbt-r-sm);
	color: #FFF;
	font-size: 11px;
	font-weight: 600;
}

.tk-k__btn--ara { background: var(--tbt-navy); }
.tk-k__btn--wa  { background: #188741; }   /* beyaz üstünde 4.58:1 */

/* ML — belge listesi */
.tk-mock--belge {
	padding: var(--tbt-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-2);
}

.tk-b__baslik,
.tk-d__baslik,
.tk-i__ust {
	color: var(--tbt-ink-3);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tk-b__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.tk-b__liste li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tbt-ink);
	font-size: 12px;
	font-weight: 500;
}

.tk-b__liste i {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tbt-navy);
	position: relative;
}

.tk-b__liste i::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 3px;
	width: 4px;
	height: 7px;
	border: solid #FFF;
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
}

.tk-b__not {
	padding-top: var(--tbt-s-2);
	border-top: 1px solid var(--tbt-border-soft);
	color: var(--tbt-ink-3);
	font-size: 10px;
	line-height: 1.4;
}

/* MR — ilçe defteri */
.tk-mock--defter {
	padding: var(--tbt-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-2);
}

.tk-d__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.tk-d__liste li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tbt-s-3);
	padding: 7px 0;
	border-bottom: 1px solid var(--tbt-border-soft);
	color: var(--tbt-ink);
	font-size: 12px;
	font-weight: 500;
}

.tk-d__liste li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tk-d__liste b {
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
	font-size: 11px;
	font-weight: 700;
}

/* BR — başvuru akışı */
.tk-mock--akis {
	padding: var(--tbt-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-3);
}

.tk-a__ust {
	display: flex;
	align-items: center;
	gap: var(--tbt-s-2);
}

.tk-a__ok {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #188741;
	color: #FFF;
}

.tk-a__ok svg {
	width: 12px;
	height: 12px;
}

.tk-a__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.tk-a__t {
	color: var(--tbt-ink);
	font-size: 12px;
	font-weight: 600;
}

.tk-a__s {
	color: var(--tbt-ink-3);
	font-size: 10px;
}

.tk-a__log {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--tbt-s-2) var(--tbt-s-3);
	border-radius: var(--tbt-r-sm);
	background: var(--tbt-surface-2);
	font-size: 10px;
}

.tk-a__log div {
	display: flex;
	align-items: center;
	gap: 7px;
}

.tk-a__log span { color: var(--tbt-ink-3); }
.tk-a__log b    { color: var(--tbt-ink); font-weight: 600; }
.tk-a__log i    { margin-left: auto; color: #188741; font-style: normal; }

/* BL — iletişim anı */
.tk-mock--iletisim {
	padding: var(--tbt-s-4);
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-2);
}

.tk-i__satir {
	display: flex;
	align-items: center;
	gap: var(--tbt-s-2);
}

.tk-i__ico {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--tbt-navy);
	color: #FFF;
}

.tk-i__ico svg {
	width: 13px;
	height: 13px;
}

.tk-i__txt {
	color: var(--tbt-ink);
	font-size: 13px;
	font-weight: 600;
}

.tk-i__not {
	color: var(--tbt-ink-3);
	font-size: 10px;
	line-height: 1.4;
}
/* =====================================================================
   3) KATEGORİ KARTLARI — moveu servis kartı deseni
   ---------------------------------------------------------------------
   ÖLÇÜLEN HATA: desen `tb-cat-grid` / `tb-cat` / `tb-cat--soon`
   kullanıyordu; ÜÇÜ DE hiçbir CSS dosyasında tanımlı değildi (plugin'in
   `tb.css`inde de yok). Sonuç: 10 kategori tek sütunda alt alta, ikonlar
   24px, "YAKINDA" düz metin — kart yok, grid yok. Bileşen `tk-` önekiyle
   yeniden yazıldı; artık sahibi bu dosyadır.

   DESEN: 2 kolon · YATAY kart · SOLDA kategori ikonu karesi · SAĞDA
   başlık + açıklama + aksiyon. Beyaz zemin, 1px kenar, GÖLGE YOK.
   STOK FOTOĞRAF YOK: elimizde kategori görseli yok, uydurulmaz.

   Kartlar EŞİT YÜKSEKLİKTE (grid stretch), içerik ÜST hizalı, aksiyon
   satırı `margin-top:auto` ile alta yaslanır.
   ================================================================== */
.tk-kart-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tbt-s-4);
}
@media (min-width: 768px) {
	.tk-kart-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tbt-s-5);
	}
}
.tk-kart-grid > li {
	display: grid;
}

.tk-kart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--tbt-s-5);
	height: 100%;
	padding: var(--tbt-s-5);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-lg);
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--tbt-t-base) var(--tbt-ease),
		background-color var(--tbt-t-base) var(--tbt-ease);
}
a.tk-kart:hover {
	border-color: var(--tbt-navy-300);
	background: var(--tbt-surface-2);
}

/* İkon karesi — moveu'nun görsel alanının dürüst karşılığı. */
.tk-kart__ikon {
	display: grid;
	place-items: center;
	align-self: start;
	width: 96px;
	height: 96px;
	border-radius: var(--tbt-r);
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
}
/* `.tb-icon` 24px'e kilitli; kart ikonu bu kutuda 44px olmalı. */
.tk-kart__ikon svg {
	width: 44px;
	height: 44px;
}

.tk-kart__govde {
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-2);
	min-width: 0;
}

.tk-kart__ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tbt-s-2);
}

.tk-kart__baslik {
	color: var(--tbt-ink);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
}

/* Kayıt sayısı VERİdir → mono rozet. */
.tk-kart__n {
	padding: 1px var(--tbt-s-2);
	border-radius: var(--tbt-r-sm);
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
	font-size: var(--tbt-fs-xs);
	font-weight: 700;
}

.tk-kart__aciklama {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-sm);
	line-height: 1.5;
}

/* Aksiyon: koyu yuvarlak ok kutusu + etiket, ince kenarlı hap. */
.tk-kart__aksiyon {
	display: inline-flex;
	align-items: center;
	align-self: start;
	gap: var(--tbt-s-2);
	margin-top: auto;
	padding: var(--tbt-s-1) var(--tbt-s-4) var(--tbt-s-1) var(--tbt-s-1);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-pill);
	color: var(--tbt-navy);
	font-size: var(--tbt-fs-xs);
	font-weight: 600;
}

.tk-kart__ok {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--tbt-navy);
	color: #FFF;
}
.tk-kart__ok svg {
	width: 15px;
	height: 15px;
}
a.tk-kart:hover .tk-kart__ok {
	background: var(--tbt-navy-700);
}
a.tk-kart:hover .tk-kart__aksiyon {
	border-color: var(--tbt-navy-300);
}

/* KAPALI KATEGORİ: görünür ama TIKLANAMAZ. Sahte link vermek, dizinin tek
   varlığı olan güveni aşındırır. Kesikli kenar "henüz açılmadı" der;
   `--tbt-ink-3` alt yüzeyde 5.20:1 ile okunur kalır. */
.tk-kart--kapali {
	background: var(--tbt-surface-2);
	border-style: dashed;
}
.tk-kart--kapali .tk-kart__ikon {
	background: var(--tbt-surface);
	color: var(--tbt-ink-3);
}
.tk-kart--kapali .tk-kart__baslik {
	color: var(--tbt-ink-2);
}

.tk-kart__aksiyon--pasif {
	min-height: 32px;
	padding-inline: var(--tbt-s-3);
	border-style: dashed;
	color: var(--tbt-ink-3);
	letter-spacing: .08em;
	text-transform: uppercase;
}

@media (max-width: 479px) {
	.tk-kart {
		gap: var(--tbt-s-4);
		padding: var(--tbt-s-4);
	}
	.tk-kart__ikon {
		width: 64px;
		height: 64px;
	}
	.tk-kart__ikon svg {
		width: 32px;
		height: 32px;
	}
	.tk-kart__baslik {
		font-size: 1.0625rem;
	}
}

/* =====================================================================
   4) DOĞRULAMA MÜHRÜ
   Ürünün en önemli pikseli. Çip değil MÜHÜR: çift hairline, köşeli,
   navy. Yeşil DEĞİL — yeşil onay zihinde "geçici bildirim" okur.
   ================================================================== */
.tk-cols {
	display: grid;
	gap: var(--tbt-s-10);
}
@media (min-width: 900px) {
	.tk-cols {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: var(--tbt-s-12);
		align-items: start;
	}
}

.tk-seal {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--tbt-s-2);
	margin: 0;
	padding: var(--tbt-s-8) var(--tbt-s-6);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-navy);
	border-radius: var(--tbt-r);
	text-align: center;
}
/* İç hairline — mühür idyomu. Kutu-içinde-kutu DEĞİL: içerik taşımaz. */
.tk-seal::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(0, 51, 102, .28);
	border-radius: calc(var(--tbt-r) - 3px);
	pointer-events: none;
}
.tk-seal__icon {
	width: 44px;
	height: 44px;
	color: var(--tbt-navy);
}
.tk-seal__t {
	margin: var(--tbt-s-2) 0 0;
	color: var(--tbt-navy);
	font-size: var(--tbt-fs-sm);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .10em;
	text-transform: uppercase;
}
.tk-seal__d {
	color: var(--tbt-navy);
	font-size: var(--tbt-fs-base);
}
.tk-seal__meta {
	margin: var(--tbt-s-1) 0 0;
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Mührün altındaki "kartlarda böyle görünür" örneği. */
.tk-example {
	margin: var(--tbt-s-6) 0 0;
}
.tk-example__cap {
	margin: 0 0 var(--tbt-s-3);
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tk-doc-h {
	margin: var(--tbt-s-10) 0 var(--tbt-s-3);
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-base);
	font-weight: 600;
}
.tk-doc-h:first-child {
	margin-top: 0;
}

/* İstenen belgeler — numaralar mono, satırlar hairline ile ayrılır. */
.tk-docs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tbt-border);
}
.tk-docs li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--tbt-s-4);
	padding: var(--tbt-s-3) 0;
	border-bottom: 1px solid var(--tbt-border-soft);
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-sm);
}
.tk-docs__n {
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
}

/* Resmî not — turuncu DEĞİL navy kot çizgisi. Alt yüzeyli bölümde
   görünür kalsın diye zemini beyaz. */
.tk-warn {
	margin: 0;
	padding: var(--tbt-s-4) var(--tbt-s-5);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-left: 3px solid var(--tbt-navy);
	border-radius: var(--tbt-r);
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-sm);
	line-height: 1.5;
}

/* =====================================================================
   5) ADIMLAR — kutu DEĞİL, hairline ile bağlı kolonlar
   Kategori gridi zaten kutulardan oluşuyor; adımları da kutulasaydık
   sayfa "kutu içinde kutu" ritmine düşerdi.
   ================================================================== */
.tk-steps {
	display: grid;
	gap: var(--tbt-s-8);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tk-step;
}
.tk-step {
	padding-top: var(--tbt-s-5);
	border-top: 1px solid var(--tbt-border);
}
.tk-step__n {
	display: block;
	margin-bottom: var(--tbt-s-3);
	color: var(--tbt-navy);
	font-size: var(--tbt-fs-sm);
	letter-spacing: .08em;
}
.tk-step__t {
	margin: 0 0 var(--tbt-s-2);
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-base);
	font-weight: 600;
	line-height: 1.35;
}
.tk-step__p {
	margin: 0;
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-sm);
}

@media (min-width: 768px) {
	.tk-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;
		border-top: 1px solid var(--tbt-border);
	}
	.tk-step {
		padding: var(--tbt-s-6) var(--tbt-s-6) 0;
		border-top: 0;
	}
	.tk-step + .tk-step {
		border-left: 1px solid var(--tbt-border);
	}
	.tk-step:first-child {
		padding-left: 0;
	}
	.tk-step:last-child {
		padding-right: 0;
	}
}

/* =====================================================================
   6) SİCİL DEFTERİ — ilçe satırları
   Footer'daki `.tbt-index` düz bir plaka listesidir; burası ilçeye göre
   GRUPLANMIŞ defterdir. İkisi aynı veriyi farklı okur, tekrar değildir.
   ================================================================== */
.tk-ledger {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tbt-border);
}
.tk-ledger__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--tbt-s-2) var(--tbt-s-4);
	padding: var(--tbt-s-4) 0;
	border-bottom: 1px solid var(--tbt-border-soft);
}
@media (min-width: 640px) {
	.tk-ledger__row {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}
.tk-ledger__plate {
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
}
.tk-ledger__name {
	min-width: 0;
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-base);
	font-weight: 600;
}
.tk-ledger__links {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tbt-s-2);
}
@media (min-width: 640px) {
	.tk-ledger__links {
		grid-column: auto;
		justify-content: flex-end;
	}
}
/* Çip içindeki mono sayı — `#5A6B7C`, beyaz üstünde 5.48:1. */
.tk-n {
	margin-left: var(--tbt-s-2);
	color: var(--tbt-ink-3);
}

/* =====================================================================
   7) ARZ BANDI (navy)
   ================================================================== */
.tk-band__grid {
	display: grid;
	gap: var(--tbt-s-8);
}
@media (min-width: 900px) {
	.tk-band__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
		gap: var(--tbt-s-12);
		align-items: end;
	}
}
.tk-facts {
	display: grid;
	gap: var(--tbt-s-3);
	margin: var(--tbt-s-6) 0 0;
	padding: 0;
	list-style: none;
}
.tk-facts li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--tbt-s-3);
	color: var(--tbt-navy-50);
	font-size: var(--tbt-fs-sm);
	line-height: 1.5;
}
/* Onay ikonları TURUNCU DEĞİL: turuncu ana sayfada tam iki metinsiz
   aksanda kullanılır (`.tbt-flag` çubukları). `--tbt-navy-50` navy
   üstünde 10.76:1. */
.tk-facts svg {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--tbt-navy-50);
}
.tk-band__actions {
	display: grid;
	gap: var(--tbt-s-3);
}
/* DESIGN §11.6: `--tb-navy-300` kenar navy üstünde 1.97:1 ile 3:1 UI
   eşiğinin altında kalıyor. Bu bant için kenar beyaz %50 saydamlığa
   çekildi → harmanlanan renk #8099B3, navy ile 4.27:1 (olculdu). */
.tk-ghost-fix {
	border-color: rgba(255, 255, 255, .5);
}

/* =====================================================================
   8) SSS — <details>/<summary>, JS GEREKMEZ
   Plugin'in `.tb-faq` akordeonu `[data-tb-toggle]` + tb.js ister; tb.js
   yalnızca sayfanın İLK `.tb-root`'unu tarar, bu bölüm ise sonuncudur.
   `<details>` her koşulda açılır — JS kapalıyken de, hata verdiğinde de.
   ================================================================== */
.tk-faq {
	border-top: 1px solid var(--tbt-border-soft);
}
.tk-faq__item {
	border-bottom: 1px solid var(--tbt-border-soft);
}
.tk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tbt-s-4);
	min-height: var(--tbt-s-12);
	padding: var(--tbt-s-4) 0;
	color: var(--tbt-ink);
	font-size: clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.tk-faq__q::-webkit-details-marker { display: none; }
.tk-faq__q::marker { content: ""; }
.tk-faq__i {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--tbt-navy);
}
.tk-faq__item[open] .tk-faq__i {
	transform: rotate(180deg);
}
.tk-faq__a {
	max-width: var(--tbt-measure);
	margin: 0;
	padding-bottom: var(--tbt-s-5);
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-sm);
}
.tk-faq__a p { margin: 0; }
.tk-faq__a p + p { margin-top: var(--tbt-s-3); }

/* =====================================================================
   9) SIRALI/AYRAÇLI YARDIMCILAR
   ================================================================== */
.tk-list-reset {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Bölüm sonu tek satırlık dipnot — dürüstlük notları burada durur. */
.tk-foot {
	max-width: var(--tbt-measure);
	margin: var(--tbt-s-8) 0 0;
	padding-top: var(--tbt-s-4);
	border-top: 1px solid var(--tbt-border-soft);
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.5;
}
.tk-foot--dark {
	border-top-color: var(--tbt-rule-dark);
	color: var(--tbt-navy-50);
}

/* =====================================================================
   10) HAREKET
   `.tbt-reveal` tema JS'i tarafından açılır ve `@media (scripting:none)`
   ile `prefers-reduced-motion` güvenceleri theme.css'te tanımlıdır; bu
   dosya yeni bir animasyon TANIMLAMAZ (E7 listesi kapalıdır).
   Tek istisna: kesin hareketsizlik güvencesi.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.tk-faq__item[open] .tk-faq__i {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   VENTRO HERO EKLERI — dondurulmus istatistik kartlari, kivrim oklar,
   satir ici muhur cipi.
   Referans: ventro.framer.website hero'su. Oradaki iki kart uydurma sosyal
   kanit ("12k+ Happy Client's") tasiyor; bizimkiler yalnizca gercek veri.
   ------------------------------------------------------------------ */
.tk-stat {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 172px;
	padding: var(--tbt-s-4);
	border-radius: 18px;
	background: #FFF;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 18px 40px -14px rgba(0, 51, 102, .20),
		0 4px 12px -4px rgba(0, 51, 102, .10);
	/* Rotasyon TABAN stilde olmak zorunda: yalnizca keyframe'e konursa
	   `prefers-reduced-motion` animasyonu kapattigi anda kartlar dimdik
	   kaliyor ve ventro kompozisyonu bozuluyor (ekran goruntusuyle olculdu). */
	transform: rotate(var(--rot, 0deg));
	animation: tk-yuz 7s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}

.tk-stat--sol { top: 22%; left: 2%;  --rot: -13deg; --d: 0s;  }
.tk-stat--sag { top: 15%; right: 2%; --rot: 11deg;  --d: 1.4s; }

.tk-stat__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
}

/* Turuncu YALNIZCA ikon rengi — metin tasimadigi icin kontrast esigi aranmaz. */
.tk-stat__ico--turuncu {
	background: #FFEDE0;
	color: var(--tbt-orange-ink);
}

.tk-stat__ico svg { width: 18px; height: 18px; }

.tk-stat__n {
	color: var(--tbt-ink);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.tk-stat__lbl {
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.35;
}

/* Kivrim oklar — saf dekorasyon, ekran okuyucuya kapali. */
.tk-doodle {
	position: absolute;
	z-index: 1;
	width: 62px;
	height: 84px;
	color: var(--tbt-navy-300);
	opacity: .72;
}

.tk-doodle--sol { top: 44%; left: 13%;  transform: rotate(-8deg); }
.tk-doodle--sag { top: 38%; right: 13%; transform: rotate(8deg); }

/* Satir ici muhur cipi — ventro'da bu bir fotograf, bizde marka isareti. */
.tk-cip {
	display: inline-grid;
	place-items: center;
	width: .78em;
	height: .78em;
	margin-inline: .06em .16em;
	border-radius: .22em;
	background: var(--tbt-navy);
	color: #FFF;
	vertical-align: .02em;
}

.tk-cip svg { width: .44em; height: .44em; }

/* Dar ekranda dekoratif katman tamamen kalkar: 390px'te bu kartlar metnin
   uzerine biner ve hero'yu okunmaz yapar. */
@media (max-width: 1023px) {
	.tk-stat,
	.tk-doodle {
		display: none;
	}
}

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

/* =====================================================================
   11) /hakkimizda/ — SAYFA DESENLERİ (`.tk-hk-*`)
   ---------------------------------------------------------------------
   Referans: acrepair about — ORTALANMIŞ bölüm başlığı (hap etiket + iki
   satırlık başlık, ikinci satır marka mavisi), kenar-öncelikli yüzeyler,
   beyaz / `--tbt-surface-2` dönüşümlü zeminler, tek navy bant, dikey
   hairline ile ayrılmış istatistik satırı. GÖLGE YOK.

   ÖLÇÜ KİLİDİNİ AÇMA: sayfa gövdesi `page.html` içinde
   `.tbt-wrap > .tbt-prose` altında yaşar ve `.tbt-prose` 68ch'e kilitlidir
   (hukuki metinler için doğru, tam genişlik bölümler için değil). Aşağıdaki
   üç kural YALNIZCA `.tk-hk-sec` sayfada varsa tetiklenir; başka hiçbir
   sayfa etkilenmez. Negatif margin ile taşma denenmedi: `.tbt-prose`
   kolonu `.tbt-wrap` içinde SOLA yaslıdır, `calc(50% - 50vw)` bu yüzden
   ekranın ortasına değil kolonun ortasına hizalar (ölçüldü).
   ================================================================== */
.tbt-wrap:has(> .tbt-prose > .tk-hk-sec) {
	max-width: none;
	padding: 0;
}
.tbt-prose:has(> .tk-hk-sec) {
	max-width: none;
}
/* `.tbt-prose > * + *` 16px enjekte ediyor (0,2,0); bölüm kendi dikey
   ritmini `--tbt-section-y` ile kurar. Sınıf iki kez yazılır → (0,2,0)
   eşitliğini kaynak sırası değil ÖZGÜLLÜK çözer. */
.tbt-prose > .tk-hk-sec.tk-hk-sec {
	margin-top: 0;
}

/* `.tbt-prose` tipografi kuralları (h2/h3 üst boşluğu, ul dolgusu,
   li aralığı) hepsi (0,2,0). Bölüm içindeki her akış öğesi sıfırlanır. */
.tk-hk-sec.tk-hk-sec :is(h2, h3, h4, p, ul, ol, dl, dt, dd) {
	margin: 0;
	padding-left: 0;
}
.tk-hk-sec.tk-hk-sec :is(ul, ol) {
	list-style: none;
}
.tk-hk-sec.tk-hk-sec li + li {
	margin-top: 0;
}

/* Yukarıdaki sıfırlama (0,2,1) BİLEŞEN margin'lerini de siliyor: `.tk-foot`
   bir `<p>`, `.tk-hk-serit`/`.tk-hk-stats`/`.tk-hk-cips` birer `<ul>`.
   Ölçüldü: istatistik satırı başlığa, çipler istatistiğe yapışıyordu.
   Geri verilen boşluklar aynı özgüllükte yazılır. */
.tk-hk-sec.tk-hk-sec .tk-hk-serit,
.tk-hk-sec.tk-hk-sec .tk-hk-stats {
	margin-top: var(--tbt-s-10);
}
.tk-hk-sec.tk-hk-sec .tk-hk-cips {
	margin-top: var(--tbt-s-8);
}
.tk-hk-sec.tk-hk-sec .tk-hk-not,
.tk-hk-sec.tk-hk-sec .tk-foot {
	margin-top: var(--tbt-s-8);
}
.tk-hk-sec.tk-hk-sec .tk-hk-panel__t {
	margin-bottom: var(--tbt-s-4);
}
.tk-hk-sec.tk-hk-sec .tk-hk-panel__not {
	margin-top: var(--tbt-s-4);
}

/* Başlık ölçüsü: `.tk-head--orta > h2` 22ch'e kilitli. Bu sayfanın iki
   satırlık başlıkları 23-24 karakter; 22ch'te ikinci satır üçe kırılıyordu
   (ölçüldü, 1440px). Ölçü yalnızca BU sayfa için 26ch'e açılır. */
.tk-hk-sec.tk-hk-sec .tk-head--orta > h2 {
	max-width: 26ch;
}

/* Ortalanmış bölümün dipnotu — `.tk-foot` sola yaslı 68ch bir bloktur ve
   ortalanmış kompozisyonun altında kaçık durur. Aynı işi yapar, ortalanır
   ve hairline taşımaz (bölüm zaten kendi çizgisiyle kapanıyor). */
.tk-hk-not {
	max-width: 74ch;
	margin-inline: auto;
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.55;
	text-align: center;
}
.tk-hk-not--acik {
	color: var(--tbt-navy-50);
}

.tk-hk-sec {
	color: var(--tbt-ink);
}

/* `.tbt-prose a { color: var(--tbt-navy) }` (0,2,0) bölüm içindeki HER
   bağlantıyı navy yapıyor. Dolu butonun beyaz metni navy zeminde
   kayboluyordu (ölçüldü). Sınıf iki kez yazılarak (0,3,0) alınır. */
.tk-hk-sec.tk-hk-sec .tk-btn--dolu {
	color: #FFF;
}
.tk-hk-sec.tk-hk-sec .tk-btn--hayalet,
.tk-hk-sec.tk-hk-sec .tk-hk-link {
	color: var(--tbt-navy);
}
.tk-hk-sec.tk-hk-sec .tk-hk-link {
	color: inherit;
}

/* Sayfa başlığı bloğunun (`.tbt-sheet`) alt çizgisi zaten var; ilk
   bölümün kendi üst çizgisi ona 0px mesafede ikinci bir hairline
   basıyordu (ölçüldü: 2px'lik kalın çizgi). */
.tk-hk-ilk {
	border-top: 0;
}

/* ---------------------------------------------------------------------
   11.1) GİRİŞ ŞERİDİ — başlığın altındaki üç gerçek sayı
   Sayı ve tarih dışında mono kullanılmaz.
   ------------------------------------------------------------------ */
.tk-hk-serit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tbt-s-5) 0;
	margin: var(--tbt-s-10) 0 0;
}
.tk-hk-serit > li {
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-1);
	padding-inline: clamp(var(--tbt-s-5), 4vw, var(--tbt-s-10));
	text-align: center;
}
.tk-hk-serit > li + li {
	border-left: 1px solid var(--tbt-border);
}
/* ÖLÇÜLEN HATA (390px): üç öğe 2+1 olarak sarıyor ve alt satıra düşen
   öğenin SOL çizgisi havada kalıyordu. Dar ekranda şerit üç eşit kolonlu
   bir ızgaraya döner — çizgiler yine kolonları ayırır, yetim kalmaz. */
@media (max-width: 559px) {
	.tk-hk-serit {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.tk-hk-serit > li {
		padding-inline: var(--tbt-s-2);
	}
}
.tk-hk-serit__n {
	color: var(--tbt-navy);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}
.tk-hk-serit__l {
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
   11.2) DÖRTLÜ KUTU GRIDİ — ne yapıyoruz
   Kategori kartı (`.tk-kart`) DEĞİL: o kart 96px ikon karesiyle yatay
   kurulur ve "tıklanabilir kategori" okur. Bu kutular dikey, 44px ikonlu
   ve bağlantısızdır.
   ------------------------------------------------------------------ */
.tk-hk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tbt-s-4);
}
@media (min-width: 720px) {
	.tk-hk-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--tbt-s-5);
	}
}
/* `<li>` blok kalırsa içindeki kutunun `height:100%`i "auto'nun %100'ü" =
   auto olarak çözülür ve kartlar eşit boyda durmaz (ölçüldü). */
.tk-hk-grid > li {
	display: grid;
}
.tk-hk-kutu {
	display: flex;
	flex-direction: column;
	gap: var(--tbt-s-3);
	height: 100%;
	padding: var(--tbt-s-6);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-lg);
}
.tk-hk-kutu__ikon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--tbt-r);
	background: var(--tbt-navy-50);
	color: var(--tbt-navy);
}
.tk-hk-kutu__ikon svg {
	width: 22px;
	height: 22px;
}
.tk-hk-kutu__t {
	color: var(--tbt-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}
.tk-hk-kutu__p {
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-sm);
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
   11.3) İKİLİ GÖVDE — solda belge paneli, sağda dört adım
   ------------------------------------------------------------------ */
.tk-hk-ikili {
	display: grid;
	gap: var(--tbt-s-8);
}
@media (min-width: 900px) {
	.tk-hk-ikili {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
		gap: var(--tbt-s-12);
		align-items: start;
	}
	/* Künye bölümünde iki kolon da METİN taşır; 380px'lik dar kolon orada
	   bağlantı kartlarını üç satıra kırıyordu. */
	.tk-hk-ikili--esit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tk-hk-panel {
	padding: var(--tbt-s-6);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-lg);
}
.tk-hk-panel__t {
	margin: 0 0 var(--tbt-s-4);
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.tk-hk-belgeler {
	border-top: 1px solid var(--tbt-border-soft);
}
.tk-hk-belgeler > li {
	display: grid;
	gap: 2px;
	padding: var(--tbt-s-3) 0;
	border-bottom: 1px solid var(--tbt-border-soft);
}
.tk-hk-belgeler > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.tk-hk-belge__ad {
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-base);
	font-weight: 600;
}
.tk-hk-belge__kaynak {
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.45;
}
.tk-hk-panel__not {
	margin-top: var(--tbt-s-4);
	padding-top: var(--tbt-s-4);
	border-top: 1px solid var(--tbt-border-soft);
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.5;
}

/* Adımlar — kutu değil, hairline ile bağlı satırlar (`.tk-steps` idyomu,
   burada 4 adım DİKEY sıralanır; 4 kolon 1200px'te 200px'e düşüyordu). */
.tk-hk-akis {
	border-top: 1px solid var(--tbt-border);
}
.tk-hk-akis > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--tbt-s-2) var(--tbt-s-5);
	padding: var(--tbt-s-5) 0;
	border-bottom: 1px solid var(--tbt-border-soft);
}
/* Son adımın çizgisi dipnotun çizgisiyle çakışıyordu; liste kendi son
   çizgisiyle değil, bölüm boşluğuyla kapanır. */
.tk-hk-akis > li:last-child {
	border-bottom: 0;
}
.tk-hk-akis__n {
	grid-row: span 2;
	color: var(--tbt-navy);
	font-size: var(--tbt-fs-sm);
	letter-spacing: .08em;
}
.tk-hk-akis__t {
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-base);
	font-weight: 600;
	line-height: 1.35;
}
.tk-hk-akis__p {
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-sm);
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
   11.4) NAVY BANT — sınırlarımız
   Sayfadaki TEK koyu yüzey. acrepair'de aynı rolü fiyat bandı üstlenir;
   bizde en çok okunması gereken blok hukuki sınırlardır.
   ------------------------------------------------------------------ */
.tk-hk-band {
	background: var(--tbt-navy);
	border-block: 0;
	color: #FFF;
}
.tk-hk-band .tk-head--orta > h2 {
	color: #FFF;
}
/* İkinci satır: navy üstünde #E6EEF5 = 10.76:1. */
.tk-hk-acik {
	color: var(--tbt-navy-50);
}
/* Koyu zeminde hap etiket: beyaz %50 saydam kenar → #8099B3, navy ile
   4.27:1 (ölçüldü, patterns.css başlığındaki renk kilidi). */
.tk-hk-pill--koyu {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: var(--tbt-navy-50);
}
.tk-hk-band .tk-head__p {
	color: var(--tbt-navy-50);
}
/* Navy zeminde `.tbt-prose a`nın navy'si görünmez olur; dipnot bağlantıları
   beyaza çekilir (navy üstünde 12.61:1). */
.tk-hk-band.tk-hk-band a {
	color: #FFF;
}

.tk-hk-maddeler {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--tbt-rule-dark);
}
@media (min-width: 860px) {
	.tk-hk-maddeler {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--tbt-s-12);
	}
}
.tk-hk-madde {
	display: grid;
	gap: var(--tbt-s-2);
	padding: var(--tbt-s-5) 0;
	border-bottom: 1px solid var(--tbt-rule-dark);
}
/* `.tbt-prose h3 { color: var(--tbt-ink) }` (0,2,0) madde başlıklarını
   navy zeminde #0F172A yapıyordu — okunmuyordu (ölçüldü). */
.tk-hk-band.tk-hk-band .tk-hk-madde__t {
	color: #FFF;
}
.tk-hk-madde__t {
	color: #FFF;
	font-size: var(--tbt-fs-base);
	font-weight: 600;
	line-height: 1.35;
}
.tk-hk-madde__p {
	color: var(--tbt-navy-50);
	font-size: var(--tbt-fs-sm);
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
   11.5) İSTATİSTİK SATIRI — acrepair "Our Stats"
   Dört kolon, dikey hairline, mono rakam. UYDURMA SAYI YOK: değerler ya
   sabit tanım (10 kategori, 81 il, 3 belge) ya da sicilden okunur.
   ------------------------------------------------------------------ */
.tk-hk-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: var(--tbt-s-10) 0 0;
	border-top: 1px solid var(--tbt-border);
}
.tk-hk-stats > li {
	padding: var(--tbt-s-6) var(--tbt-s-4);
	text-align: center;
}
.tk-hk-stats > li:nth-child(2n) {
	border-left: 1px solid var(--tbt-border);
}
.tk-hk-stats > li:nth-child(n + 3) {
	border-top: 1px solid var(--tbt-border-soft);
}
@media (min-width: 768px) {
	.tk-hk-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.tk-hk-stats > li + li {
		border-left: 1px solid var(--tbt-border);
	}
	.tk-hk-stats > li:nth-child(n + 3) {
		border-top: 0;
	}
}
.tk-hk-stat__n {
	display: block;
	color: var(--tbt-navy);
	font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
/* Tarih rakamdan uzundur; aynı puntoda kolonu taşırıyordu (ölçüldü). */
.tk-hk-stat__n--tarih {
	font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
	line-height: 1.35;
}
.tk-hk-stat__l {
	display: block;
	margin-top: var(--tbt-s-2);
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	line-height: 1.45;
}

/* Kategori adları — çip. Bağlantı DEĞİL: kategori sayfası ancak o ilçede
   yayında kayıt varken açılır, buradan sahte link verilmez. */
.tk-hk-cips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tbt-s-2);
	margin: var(--tbt-s-10) 0 0;
}
.tk-hk-cip {
	display: inline-flex;
	align-items: center;
	min-height: var(--tbt-s-8);
	padding-inline: var(--tbt-s-3);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-pill);
	color: var(--tbt-ink-2);
	font-size: var(--tbt-fs-xs);
	font-weight: 500;
}

/* ---------------------------------------------------------------------
   11.6) KÜNYE — bağlantı satırları + 5651 m.3 alanları
   ------------------------------------------------------------------ */
.tk-hk-baglantilar {
	display: grid;
	gap: var(--tbt-s-3);
}
.tk-hk-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--tbt-s-2) var(--tbt-s-4);
	padding: var(--tbt-s-5);
	background: var(--tbt-surface);
	border: 1px solid var(--tbt-border);
	border-radius: var(--tbt-r-lg);
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--tbt-t-base) var(--tbt-ease),
		background-color var(--tbt-t-base) var(--tbt-ease);
}
.tk-hk-link:hover {
	border-color: var(--tbt-navy-300);
	background: var(--tbt-surface-2);
}
.tk-hk-link__t {
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-base);
	font-weight: 600;
}
.tk-hk-link__p {
	grid-column: 1;
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-sm);
	line-height: 1.5;
}
.tk-hk-link__ok {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tbt-navy);
	color: #FFF;
}
.tk-hk-link__ok svg {
	width: 16px;
	height: 16px;
}
.tk-hk-link:hover .tk-hk-link__ok {
	background: var(--tbt-navy-700);
}

.tk-hk-kunye {
	display: grid;
	border-top: 1px solid var(--tbt-border);
}
.tk-hk-kunye > div {
	display: grid;
	gap: 2px;
	padding: var(--tbt-s-4) 0;
	border-bottom: 1px solid var(--tbt-border-soft);
}
@media (min-width: 560px) {
	.tk-hk-kunye > div {
		grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
		align-items: baseline;
		gap: var(--tbt-s-2) var(--tbt-s-5);
	}
}
.tk-hk-kunye dt {
	color: var(--tbt-ink-3);
	font-size: var(--tbt-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tk-hk-kunye dd {
	color: var(--tbt-ink);
	font-size: var(--tbt-fs-sm);
	overflow-wrap: anywhere;
}
/* Henüz doldurulmamış yer tutucu — dolu bir değermiş gibi okunmasın. */
.tk-hk-bos {
	color: var(--tbt-ink-3);
}

/* ---------------------------------------------------------------------
   ANA SAYFA: HERO SABIT BASLIGIN ARKASINA UZANIR
   ---------------------------------------------------------------------
   `.tbt-header-area` sabit basliga akista yer ayirir ve BEYAZDIR. Ana
   sayfada hero'nun seritli zemini onun ALTINDAN basladigi icin nav ile
   icerik arasinda beyaz bir bant kaliyordu (kullanici ekran goruntusuyle
   isaretledi).

   Cozum: yalnizca ana sayfada ayrilan yuksekligi 0'a indir ve ayni miktari
   hero'nun ust dolgusuna ekle. Boylece zemin y=0'dan baslar, logo seritli
   zeminin uzerinde yuzer, icerigin baslangic noktasi DEGISMEZ.

   Diger sayfalarda (liste, detay, form) ayirma AYNEN kalir: oralarda
   icerik beyaz zeminde ve sabit basligin altina girmemeli.
   ------------------------------------------------------------------ */
body.home .tbt-header-area {
	height: 0;
}

body.home .tk-hero {
	padding-top: calc(var(--tbt-header-h) + clamp(1.75rem, 3.2vw, 3rem));
}