/* ==========================================================================
   TANRIKUT BETON — main.css

   Tek stil dosyası. CSS framework kullanılmaz; utility seti üretilmez.
   Sadece gerçekten kullanılan bileşenler tanımlıdır.

   Token'ların tek kaynağı theme.json'dır. WordPress bunları
   --wp--preset--* ve --wp--custom--* değişkenlerine çevirir; burada yalnız
   kısa takma adlar tanımlanır ve DEĞER TEKRARI YAPILMAZ.

   İÇİNDEKİLER
     1.  Token'lar
     2.  Reset
     3.  Erişilebilirlik
     4.  Tipografi
     5.  Layout ve section'lar
     6.  Butonlar
     7.  Formlar
     8.  Tablolar
     9.  Prose (uzun içerik)
     10. Kartlar
     11. Header
     12. Masaüstü navigasyon
     13. Mobil menü
     14. Sayfa başlığı / breadcrumb
     15. Footer
     16. Mobil CTA çubuğu
     17. Sayfalama, boş durum, 404
     18. Pattern bileşenleri
     19. Teklif formu / iletişim sayfası
   ========================================================================== */

/* ==========================================================  1. TOKEN'LAR */

:root {
	/* Renk — değerler theme.json'da, burada yalnız kısa ad. */
	--tkb-accent:      var(--wp--preset--color--accent);
	--tkb-accent-600:  var(--wp--preset--color--accent-600);
	--tkb-ink:         var(--wp--preset--color--ink);
	--tkb-ink-700:     var(--wp--preset--color--ink-700);
	--tkb-ink-500:     var(--wp--preset--color--ink-500);
	--tkb-concrete:    var(--wp--preset--color--concrete);
	--tkb-line:        var(--wp--preset--color--concrete-200);
	--tkb-surface:     var(--wp--preset--color--surface);
	--tkb-text:        var(--wp--preset--color--text);
	--tkb-muted:       var(--wp--preset--color--muted);
	--tkb-whatsapp:    var(--wp--preset--color--whatsapp);

	/* Koyu zeminde metin kademeleri. */
	--tkb-on-dark:     rgba(255, 255, 255, 0.82);
	--tkb-on-dark-dim: rgba(255, 255, 255, 0.58);
	--tkb-on-accent:   var(--wp--preset--color--ink);
	--tkb-on-wa:       #06300F;

	/* Tipografi */
	--tkb-font-head:   var(--wp--preset--font-family--heading);
	--tkb-font-body:   var(--wp--preset--font-family--body);

	/* Ölçü */
	--tkb-radius:      var(--wp--custom--radius--md);
	--tkb-radius-sm:   var(--wp--custom--radius--sm);
	--tkb-gutter:      var(--wp--custom--container--gutter);
	--tkb-content:     1200px;
	--tkb-wide:        1440px;
	--tkb-tap:         var(--wp--custom--tap);
	--tkb-transition:  var(--wp--custom--transition);

	--tkb-topbar-h:    var(--wp--custom--header--topbar-height);
	--tkb-ticker-h:    34px;
	--tkb-ticker-sure: 55s;
	--tkb-header-h:    56px;
	--tkb-cta-h:       var(--wp--custom--cta-bar-height);

	--tkb-field-h:     var(--wp--custom--field--height);
	--tkb-field-border: var(--wp--custom--field--border);
	--tkb-error:       var(--wp--custom--state--error);
	--tkb-success:     var(--wp--custom--state--success);
}

@media (min-width: 1024px) {

	:root {
		/* 1024–1199: ara değer. Tam 40px kenar boşluğu bu bantta header'ı
		   taşırıyordu; geniş boşluğa 1200'den itibaren geçilir. */
		--tkb-gutter:   28px;
		--tkb-header-h: var(--wp--custom--header--main-height);
	}
}

@media (min-width: 1200px) {

	:root { --tkb-gutter: var(--wp--custom--container--gutter-wide); }
}

/* ============================================================== 2. RESET */

*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--tkb-surface);
	color: var(--tkb-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

/* `wp_nav_menu()` menu_class'ı YALNIZ üst <ul>'a uygular; alt menü <ul>'u
   `sub-menu tkb-submenu` sınıflarını alır. `.tkb-submenu` bu yüzden listeye
   ayrıca yazılır — aksi halde alt menü öğelerinde madde işareti görünüyor
   (runtime testinde mobil panelde tespit edildi). */
.tkb-menu,
.tkb-submenu,
.tkb-topbar__contact,
.tkb-contact-block,
.tkb-social,
.tkb-breadcrumbs__list { list-style: none; }

a { color: inherit; }

.tkb-icon { flex: 0 0 auto; }

/* Mobil panel açıkken arka plan kaymaz. */
.tkb-nav-open,
.tkb-nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ================================================= 3. ERİŞİLEBİLİRLİK */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tkb-skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 10000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip-path: none;
	background: var(--tkb-accent);
	color: var(--tkb-on-accent);
	font-weight: 700;
	text-decoration: none;
}

/* Odak halkası — WCAG 1.4.11 (en az 3:1).

   AÇIK zeminde sarı halka kullanılamaz: #FFD43E beyaz üstünde 1.42:1.
   Bu yüzden varsayılan halka koyu antrasittir (beyaz üstünde 17.99:1).
   KOYU zeminde ise antrasit görünmez; orada sarıya geçilir (12.63:1). */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--tkb-ink);
	outline-offset: 2px;
}

.tkb-header :where(a, button, input):focus-visible,
.tkb-footer :where(a, button, input):focus-visible,
.tkb-mobile-nav :where(a, button, input):focus-visible,
.tkb-cta-bar :where(a):focus-visible,
.tkb-section--dark :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--tkb-accent);
	outline-offset: 3px;
}

::selection {
	background: var(--tkb-accent);
	color: var(--tkb-on-accent);
}

/* Yalnız yöneticiye görünen kurulum uyarıları. */
.tkb-admin-hint {
	margin: 12px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--tkb-accent);
	background: var(--tkb-concrete);
	color: var(--tkb-muted);
	font-size: var(--wp--preset--font-size--small);
}

.tkb-footer .tkb-admin-hint,
.tkb-mobile-nav .tkb-admin-hint {
	background: var(--tkb-ink-700);
	color: var(--tkb-on-dark-dim);
	border-left-color: var(--tkb-accent);
}

/* ========================================================= 4. TİPOGRAFİ */

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--tkb-font-head);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: var(--wp--preset--font-size--h1); line-height: 1.12; }
h2 { font-size: var(--wp--preset--font-size--h2); }
h3 { font-size: var(--wp--preset--font-size--h3); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.3; }

.tkb-display {
	font-family: var(--tkb-font-head);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
}

/* Bölüm üst başlığı — geniş harf aralıklı, büyük harf. */
.tkb-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--tkb-muted);
	font-family: var(--tkb-font-head);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tkb-section--dark .tkb-eyebrow { color: var(--tkb-accent); }

/* Giriş paragrafı. */
.tkb-lead {
	max-width: 62ch;
	color: var(--tkb-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.tkb-section--dark .tkb-lead { color: var(--tkb-on-dark); }

/* Sarı vurgu çizgisi — başlık altı. */
.tkb-rule {
	width: 56px;
	height: 3px;
	margin: 18px 0 0;
	border: 0;
	background: var(--tkb-accent);
}

/* =============================================== 5. LAYOUT / SECTION'LAR */

.tkb-container {
	width: 100%;
	max-width: calc(var(--tkb-content) + (var(--tkb-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--tkb-gutter);
}

.tkb-container--wide {
	max-width: calc(var(--tkb-wide) + (var(--tkb-gutter) * 2));
}

.tkb-section         { padding-block: var(--wp--custom--section--normal); }
.tkb-section--compact { padding-block: var(--wp--custom--section--compact); }
.tkb-section--large   { padding-block: var(--wp--custom--section--large); }

.tkb-section--surface  { background: var(--tkb-surface); }
.tkb-section--concrete { background: var(--tkb-concrete); }

.tkb-section--dark {
	background: var(--tkb-ink);
	color: var(--tkb-on-dark);
}

.tkb-section--dark :where(h1, h2, h3, h4) { color: #fff; }

/* Ardışık aynı renkli section'lar arasında çift boşluk oluşmasın. */
.tkb-section--concrete + .tkb-section--concrete,
.tkb-section--dark + .tkb-section--dark { padding-top: 0; }

.tkb-grid { display: grid; gap: 24px; }

.tkb-grid--2 { grid-template-columns: 1fr; }
.tkb-grid--3 { grid-template-columns: 1fr; }
.tkb-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 600px) {
	.tkb-grid--2,
	.tkb-grid--3,
	.tkb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.tkb-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.tkb-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Blog ızgarası — mevcut şablonlar bu adı kullanıyor. */
.tkb-grid--cards { grid-template-columns: 1fr; }

@media (min-width: 600px) {
	.tkb-grid--cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.tkb-grid--cards { grid-template-columns: repeat(3, 1fr); }
}

/* ======================================================== 6. BUTONLAR */

.tkb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--tkb-tap);
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: var(--tkb-radius);
	background: none;
	color: inherit;
	font-family: var(--tkb-font-head);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--tkb-transition), border-color var(--tkb-transition), color var(--tkb-transition);
}

/* -- primary: marka sarısı. Üzerine ASLA beyaz metin gelmez. */
.tkb-btn--primary {
	background: var(--tkb-accent);
	border-color: var(--tkb-accent);
	color: var(--tkb-on-accent);
}

.tkb-btn--primary:hover,
.tkb-btn--primary:focus-visible {
	background: var(--tkb-accent-600);
	border-color: var(--tkb-accent-600);
}

.tkb-btn--primary:active { background: var(--tkb-accent-600); transform: translateY(1px); }

/* -- secondary: açık zeminde ikincil eylem. */
.tkb-btn--secondary {
	background: var(--tkb-concrete);
	border-color: var(--tkb-line);
	color: var(--tkb-text);
}

.tkb-btn--secondary:hover { background: var(--tkb-line); }

/* -- dark: açık zemin üzerinde güçlü kontrast. */
.tkb-btn--dark {
	background: var(--tkb-ink);
	border-color: var(--tkb-ink);
	color: #fff;
}

.tkb-btn--dark:hover { background: var(--tkb-ink-700); border-color: var(--tkb-ink-700); }

/* -- outline: hem açık hem koyu zeminde çalışır (currentColor). */
.tkb-btn--outline {
	border-color: currentColor;
	color: var(--tkb-text);
}

.tkb-btn--outline:hover { background: var(--tkb-text); color: var(--tkb-surface); }

.tkb-section--dark .tkb-btn--outline,
.tkb-header .tkb-btn--outline,
.tkb-footer .tkb-btn--outline { color: #fff; }

.tkb-section--dark .tkb-btn--outline:hover,
.tkb-header .tkb-btn--outline:hover,
.tkb-footer .tkb-btn--outline:hover {
	background: var(--tkb-accent);
	border-color: var(--tkb-accent);
	color: var(--tkb-on-accent);
}

/* -- whatsapp */
.tkb-btn--wa {
	background: var(--tkb-whatsapp);
	border-color: var(--tkb-whatsapp);
	color: var(--tkb-on-wa);
}

.tkb-btn--wa:hover { background: #1FBE5B; border-color: #1FBE5B; }

/* -- text-link: buton değil, vurgulu bağlantı. */
.tkb-btn--text {
	min-height: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	color: var(--tkb-text);
	text-decoration: underline;
	text-decoration-color: var(--tkb-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.tkb-btn--text:hover { color: var(--tkb-muted); }

.tkb-section--dark .tkb-btn--text { color: #fff; }

/* -- durumlar ve boyutlar */
.tkb-btn[disabled],
.tkb-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.tkb-btn--block { display: flex; width: 100%; }

.tkb-btn--sm { min-height: 40px; padding: 9px 16px; font-size: 0.875rem; }

.tkb-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ========================================================== 7. FORMLAR */

.tkb-field { display: grid; gap: 6px; margin-bottom: 18px; }

.tkb-label,
.wpcf7-form label {
	font-family: var(--tkb-font-head);
	font-size: 0.9375rem;
	font-weight: 600;
}

.tkb-required { color: var(--tkb-error); }

.tkb-hint {
	color: var(--tkb-muted);
	font-size: var(--wp--preset--font-size--small);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: var(--tkb-field-h);
	padding: 12px 14px;
	background: var(--tkb-surface);
	border: 1px solid var(--tkb-field-border);
	border-radius: var(--tkb-radius);
	color: var(--tkb-text);
	font-size: 1rem;
	transition: border-color var(--tkb-transition), box-shadow var(--tkb-transition);
	appearance: none;
}

textarea { min-height: 130px; padding-block: 12px; resize: vertical; }

select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235F6670'%3E%3Cpath d='M12 15.4 5.6 9 7 7.6l5 5 5-5L18.4 9 12 15.4Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px 20px;
}

::placeholder { color: var(--tkb-muted); opacity: 1; }

/* Form alanı odağı.

   `:where()` SIFIR özgüllüktedir; runtime testinde CF7/core kuralları bu
   bloğun box-shadow'unu eziyordu. Normal özgüllükte selector kullanılır ve
   halka box-shadow yerine outline ile verilir — daha dayanıklı. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--tkb-ink);
	outline: 2px solid var(--tkb-ink);
	outline-offset: 1px;
	/* Kenarlık KALINLIĞI değiştirilmez — 1px'den 2px'e çıkmak odaklanınca
	   1px'lik düzen kaymasına yol açıyordu. Gösterge outline ile verilir. */
}

:where(input, select, textarea)[disabled] {
	background: var(--tkb-concrete);
	color: var(--tkb-muted);
	cursor: not-allowed;
}

/* -- checkbox / radio: 48px dokunma alanı, görünür durum. */
.tkb-choice,
.wpcf7-acceptance .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: var(--tkb-tap);
	margin: 0 0 8px;
	padding-block: 12px;
}

input[type="checkbox"],
input[type="radio"] {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--tkb-ink);
}

/* -- hata: renk TEK BAŞINA kullanılmaz; metin + kenarlık + ikon birlikte. */
[aria-invalid="true"],
.wpcf7-not-valid {
	border-color: var(--tkb-error) !important;
	border-width: 2px !important;
}

.tkb-error-text,
.wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	color: var(--tkb-error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.tkb-error-text::before,
.wpcf7-not-valid-tip::before {
	content: "!";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tkb-error);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

/* -- Contact Form 7 yanıt kutusu */
.wpcf7-response-output {
	margin: 18px 0 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--tkb-line) !important;
	border-left: 4px solid var(--tkb-muted) !important;
	border-radius: var(--tkb-radius);
	background: var(--tkb-concrete);
	font-size: 0.9375rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-left-color: var(--tkb-error) !important;
	color: var(--tkb-error);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--tkb-success) !important;
	color: var(--tkb-success);
}

.wpcf7-spinner { margin-left: 10px; }

/* CF7 submit butonu tema butonuyla aynı görünür. */
.wpcf7-submit,
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tkb-tap);
	padding: 13px 28px;
	background: var(--tkb-accent);
	border: 1px solid var(--tkb-accent);
	border-radius: var(--tkb-radius);
	color: var(--tkb-on-accent);
	font-family: var(--tkb-font-head);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--tkb-transition);
}

.wpcf7-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover { background: var(--tkb-accent-600); }

/* ========================================================= 8. TABLOLAR */

/* Gutenberg tabloyu <figure class="wp-block-table"> içine alır; ek markup
   gerekmeden yatay kaydırma buradan sağlanır. */
.wp-block-table,
.tkb-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

/* min-width YALNIZ kaydırılabilir kabın içindeki tabloya verilir.
   Çıplak bir <table> (HTML bloğu, eski içerik) sayfayı yatay taşırmasın. */
.wp-block-table table,
.tkb-table-wrap table { min-width: 480px; }

caption {
	margin-bottom: 10px;
	color: var(--tkb-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

th, td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--tkb-line);
	text-align: left;
	vertical-align: top;
	/* URL veya uzun kelime hücreyi şişirip sayfayı yatay taşırmasın. */
	overflow-wrap: anywhere;
}

thead th {
	background: var(--tkb-ink);
	border-bottom: 0;
	color: #fff;
	font-family: var(--tkb-font-head);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

tbody tr:nth-child(even) { background: var(--tkb-concrete); }

tbody th { font-weight: 700; white-space: nowrap; }

/* Kaydırılabilir tabloda ipucu. */
@media (max-width: 599px) {

	.wp-block-table::after,
	.tkb-table-wrap::after {
		display: block;
		padding-top: 8px;
		color: var(--tkb-muted);
		font-size: 0.8125rem;
		content: "← Tabloyu yana kaydırabilirsiniz →";
	}
}

/* =========================================== 8b. BLOK LAYOUT KABI

   Klasik temada Gutenberg'in alignwide / alignfull hizalamalarının çalışması
   için içerik kabı burada tanımlanır. Blok pattern'ları kendi tam genişlikli
   section'larını kurabilsin; düz metin sayfaları ise okunur genişlikte kalsın.
   -------------------------------------------------------------------------- */

.tkb-blocks > * {
	max-width: var(--tkb-content);
	margin-inline: auto;
	padding-inline: var(--tkb-gutter);
}

.tkb-blocks > .alignwide { max-width: var(--tkb-wide); }

.tkb-blocks > .alignfull {
	max-width: none;
	padding-inline: 0;
}

/* Blog yazısı — okuma genişliği. Hizalanmış bloklar bundan muaftır. */
.tkb-blocks--narrow > *:not(.alignwide):not(.alignfull) {
	max-width: calc(72ch + (var(--tkb-gutter) * 2));
}

/* Ardışık bloklar arası ritim. */
.tkb-blocks > * + * { margin-top: 1.15em; }

/* Tam genişlikli section'lar kendi iç boşluklarını taşır. */
.tkb-blocks > .alignfull + .alignfull { margin-top: 0; }

/* ============================================================ 9. PROSE */

.tkb-prose {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.tkb-prose > * + * { margin-top: 1.15em; }

.tkb-prose :where(h2, h3, h4) { margin-top: 1.9em; margin-bottom: 0.55em; }

.tkb-prose :where(h2) + :where(h3) { margin-top: 1.1em; }

.tkb-prose p { margin: 0; }

.tkb-prose :where(ul, ol) { margin: 0; padding-left: 1.35em; }

.tkb-prose li + li { margin-top: 0.5em; }

.tkb-prose ul { list-style: disc; }
.tkb-prose ol { list-style: decimal; }

.tkb-prose ul li::marker { color: var(--tkb-accent-600); }

.tkb-prose a {
	color: var(--tkb-text);
	text-decoration: underline;
	text-decoration-color: var(--tkb-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tkb-prose a:hover { text-decoration-color: var(--tkb-text); }

.tkb-prose blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--tkb-accent);
	color: var(--tkb-text);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	line-height: 1.5;
}

.tkb-prose blockquote cite {
	display: block;
	margin-top: 10px;
	color: var(--tkb-muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.tkb-prose :where(img, figure) { border-radius: var(--tkb-radius); }

.tkb-prose figure { margin: 1.8em 0; }

.tkb-prose figcaption,
.wp-element-caption {
	margin-top: 10px;
	color: var(--tkb-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.tkb-prose hr {
	height: 1px;
	margin: 2.4em 0;
	border: 0;
	background: var(--tkb-line);
}

.tkb-prose :where(code, kbd) {
	padding: 2px 6px;
	border-radius: var(--tkb-radius-sm);
	background: var(--tkb-concrete);
	font-size: 0.9em;
}

.tkb-prose strong { font-weight: 700; }

/* =========================================================== 10. KARTLAR */

/* Ortak kart iskeleti — köşeli, endüstriyel, gölgesiz. */
.tkb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--tkb-surface);
	border: 1px solid var(--tkb-line);
	border-radius: var(--tkb-radius);
	overflow: hidden;
	transition: border-color var(--tkb-transition);
}

/* Hover yalnız kenarlık rengini değiştirir — layout shift üretmez. */
.tkb-card:hover { border-color: var(--tkb-ink); }

.tkb-card__media { display: block; overflow: hidden; }

/* Sabit oran -> CLS yok. */
.tkb-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tkb-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
}

.tkb-card__title { margin: 0; font-size: var(--wp--preset--font-size--h3); }

.tkb-card__title a { text-decoration: none; }

/* Kartın tamamını tıklanabilir yapmak OPT-IN'dir: yalnız .tkb-card--linked
   taşıyan kartlarda kaplama uygulanır. Kartta ikinci bir bağlantı varsa bu
   sınıf KULLANILMAZ — aksi halde bağlantılar üst üste biner. */
.tkb-card--linked .tkb-card__title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.tkb-card__text,
.tkb-card__excerpt {
	margin: 0;
	color: var(--tkb-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tkb-card__meta,
.tkb-card__date {
	margin-top: auto;
	padding-top: 6px;
	color: var(--tkb-muted);
	font-size: 0.8125rem;
}

/* -- hizmet kartı: sarı üst şerit */
.tkb-card--service { border-top: 3px solid var(--tkb-accent); }

.tkb-card--service .tkb-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: var(--tkb-radius);
	background: var(--tkb-concrete);
	color: var(--tkb-ink);
}

/* -- beton sınıfı kartı: sınıf kodu öne çıkar */
.tkb-card--class { text-align: left; }

.tkb-card--class .tkb-card__code {
	display: block;
	padding: 18px 22px 0;
	color: var(--tkb-ink);
	font-family: var(--tkb-font-head);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.tkb-card--class .tkb-card__code span { color: var(--tkb-accent-600); }

/* -- güven / avantaj kartı: kenarlıksız, beton zeminli */
.tkb-card--trust {
	background: var(--tkb-concrete);
	border-color: transparent;
	padding: 20px;
}

.tkb-card--trust:hover { border-color: transparent; }

.tkb-card--trust .tkb-card__body { padding: 0; }

.tkb-card--trust .tkb-card__title { font-size: var(--wp--preset--font-size--large); }

.tkb-section--dark .tkb-card--trust {
	background: var(--tkb-ink-700);
	color: var(--tkb-on-dark);
}

/* -- iletişim kartı */
.tkb-card--contact { background: var(--tkb-ink); border-color: var(--tkb-ink-500); color: var(--tkb-on-dark); }

.tkb-card--contact:hover { border-color: var(--tkb-accent); }

.tkb-card--contact .tkb-card__title { color: #fff; }

/* Surec adimi stilleri §18 (pattern bilesenleri) icinde tanimlidir. */

/* =========================================================== 11. HEADER */

/* Sticky, İÇ bara değil DIŞ header'a verilir.

   Neden: `position: sticky` bir öğeyi yalnız KENDİ EBEVEYNİNİN kutusu içinde
   tutar. `.tkb-header__main`'e sticky verildiğinde ebeveyni `.tkb-header`
   yalnız ~113px yüksekliğinde olduğu için bar sayfayla birlikte kayıp
   gidiyordu (ölçüldü: 900px kaydırmada top = -863px).

   Çözüm: header'ın tamamı sticky olur ve masaüstünde üst bar yüksekliği
   kadar NEGATİF offset alır. Böylece üst bar ekranın üstünden çıkar, ana bar
   tam 0'a yapışır. Scroll listener yok, JS yok, layout shift yok. */
.tkb-header {
	position: sticky;
	/* 1024 altında üst bar gizlidir; yalnız şerit yüksekliği kadar kayar. */
	top: calc(var(--tkb-ticker-h) * -1);
	z-index: 100;
	background: var(--tkb-ink);
	color: #fff;
}

@media (min-width: 1024px) {

	/* Üst bar görünür olduğu bantta onun yüksekliği kadar yukarı kaydırılır. */
	/* Şerit de üst barla birlikte yukarı çıkar; offset ikisinin toplamı. */
	.tkb-header { top: calc((var(--tkb-topbar-h) + var(--tkb-ticker-h)) * -1); }
}

/* -- 11a. Üst bar: normal akışta, kaydırınca yukarı çıkar. */

.tkb-topbar {
	display: none;
	border-bottom: 1px solid var(--tkb-ink-500);
	font-size: 0.8125rem;
}

@media (min-width: 1024px) {
	.tkb-topbar { display: block; }
}

.tkb-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--tkb-topbar-h);
}

.tkb-topbar__text {
	margin: 0;
	color: var(--tkb-on-dark-dim);
	letter-spacing: 0.01em;
}

.tkb-topbar__contact { display: flex; gap: 24px; }

.tkb-topbar__contact a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--tkb-on-dark);
	text-decoration: none;
	transition: color var(--tkb-transition);
}

.tkb-topbar__contact a:hover { color: var(--tkb-accent); }

/* -- 11b. Ana bar. Sticky davranışı §11 başındaki `.tkb-header` kuralındadır. */

.tkb-header__main {
	background: var(--tkb-ink);
	border-bottom: 1px solid var(--tkb-ink-500);
}

.tkb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--tkb-header-h);
}

/* Marka alanı KÜÇÜLEBİLİR olmalıdır.

   `flex: 0 0 auto` iken uzun bir site adı veya geniş bir logo header'ı yatay
   olarak taşırıyordu (runtime testinde 320px'te 119px, 1024px'te 100px taşma).
   Dönüşüm öğeleri (telefon + CTA) asla küçülmez; daralan taraf markadır. */
.tkb-brand {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.tkb-brand img {
	max-height: 34px;
	max-width: 100%;
	width: auto;
}

@media (min-width: 1024px) {
	.tkb-brand img { max-height: 48px; }
}

.tkb-brand__text {
	display: inline-flex;
	align-items: center;
	min-height: var(--tkb-tap);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #fff;
	font-family: var(--tkb-font-head);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.tkb-brand__text { font-size: 1.25rem; }
}

.tkb-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tkb-header__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--tkb-tap);
	min-height: var(--tkb-tap);
	padding: 0 6px;
	color: #fff;
	font-family: var(--tkb-font-head);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--tkb-transition);
}

.tkb-header__phone:hover { color: var(--tkb-accent); }

/* Mobilde yalnız ikon; etiket ve CTA masaüstünde görünür. */
.tkb-header__phone-label,
.tkb-header__cta { display: none; }

@media (min-width: 1024px) {

	.tkb-header__actions { gap: 10px; }

	.tkb-header__cta { display: inline-flex; }
}

/* 1024–1199 arası header dar: logo + 6 menü + telefon + CTA aynı satıra
   sığmıyordu (ölçüldü: 1024px'te 60px yatay taşma). Bu bantta telefon
   YAZISI gizlenir, ikon kalır — numara zaten üst barda görünüyor.
   1200'den itibaren etiket geri gelir. */
@media (min-width: 1200px) {

	.tkb-header__actions { gap: 14px; }

	.tkb-header__phone-label { display: inline; }
}

/* ============================================ 12. MASAÜSTÜ NAVİGASYON */

.tkb-nav--primary { display: none; min-width: 0; }

@media (min-width: 1024px) {
	.tkb-nav--primary { display: block; }
}
/* .tkb-nav-toggle'ın gizlenmesi §13'te, kendi tanımından SONRA yapılır —
   aksi halde sonraki temel kural bu media query'yi cascade'de ezer. */

.tkb-nav--primary .tkb-menu {
	display: flex;
	align-items: center;
	gap: 0;
}

.tkb-nav--primary .menu-item {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.tkb-nav--primary .menu-item > a {
	display: inline-block;
	padding: 12px 13px;
	color: var(--tkb-on-dark);
	font-family: var(--tkb-font-head);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color var(--tkb-transition);
}

@media (min-width: 1200px) {
	.tkb-nav--primary .menu-item > a { padding-inline: 16px; }
}

.tkb-nav--primary .menu-item > a:hover,
.tkb-nav--primary .menu-item > a[aria-current] { color: var(--tkb-accent); }

.tkb-nav--primary .menu-item > a[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--tkb-accent);
}

.tkb-nav--primary .tkb-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: -11px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--tkb-on-dark-dim);
}

.tkb-submenu-toggle__icon { transition: transform var(--tkb-transition); }

.tkb-submenu-open > .tkb-submenu-toggle .tkb-submenu-toggle__icon,
.tkb-submenu-toggle[aria-expanded="true"] .tkb-submenu-toggle__icon {
	transform: rotate(180deg);
}

/* Dropdown — hover, klavye odağı VE butonla açılır (hover'a bağımlı değil). */
.tkb-nav--primary .tkb-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 256px;
	padding: 6px 0;
	background: var(--tkb-ink-700);
	border-top: 2px solid var(--tkb-accent);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

@media (min-width: 1024px) {

	.tkb-nav--primary .menu-item:hover > .tkb-submenu,
	.tkb-nav--primary .menu-item.tkb-submenu-open > .tkb-submenu { display: block; }

	/* Klavye: odak alt menünün İÇİNDEYKEN açık kalır.
	   Dikkat — burada `.menu-item:focus-within` KULLANILMAZ. Kullanılsaydı,
	   Escape ile kapatıp odağı açma butonuna döndürdüğümüzde buton da
	   menu-item'ın içinde olduğu için menü anında yeniden açılırdı.
	   `.tkb-submenu:focus-within` yalnız alt menünün kendi içindeki odağa
	   bakar; buton dışarıda kaldığı için Escape gerçekten kapatır. */
	.tkb-nav--primary .tkb-submenu:focus-within { display: block; }
}

.tkb-nav--primary .tkb-submenu .menu-item { display: block; width: 100%; }

.tkb-nav--primary .tkb-submenu .menu-item > a {
	display: block;
	padding: 11px 20px;
	font-size: 0.9375rem;
	font-weight: 500;
	border-left: 2px solid transparent;
}

.tkb-nav--primary .tkb-submenu .menu-item > a:hover {
	background: var(--tkb-ink);
	border-left-color: var(--tkb-accent);
	color: #fff;
}

/* ====================================================== 13. MOBİL MENÜ */

.tkb-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tkb-tap);
	height: var(--tkb-tap);
	background: none;
	border: 1px solid var(--tkb-ink-500);
	border-radius: var(--tkb-radius);
	color: #fff;
}

.tkb-nav-toggle:hover { border-color: var(--tkb-accent); color: var(--tkb-accent); }

/* Masaüstünde hamburger yok. Bu kural, yukarıdaki temel tanımdan SONRA
   gelmek zorundadır; aksi halde cascade'de eziliyor. */
@media (min-width: 1024px) {
	.tkb-nav-toggle { display: none; }
}

.tkb-mobile-nav { position: fixed; inset: 0; z-index: 300; }

.tkb-mobile-nav[hidden] { display: none; }

.tkb-mobile-nav__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 14, 0.62);
}

.tkb-mobile-nav__panel {
	position: absolute;
	inset: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	width: min(92vw, 420px);
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px var(--tkb-gutter) 32px;
	background: var(--tkb-ink);
	color: #fff;
	animation: tkb-slide-in 180ms ease;
}

@keyframes tkb-slide-in {
	from { transform: translateX(16px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

.tkb-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tkb-ink-500);
}

.tkb-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tkb-tap);
	height: var(--tkb-tap);
	background: none;
	border: 1px solid var(--tkb-ink-500);
	border-radius: var(--tkb-radius);
	color: #fff;
}

.tkb-mobile-nav__close:hover { border-color: var(--tkb-accent); color: var(--tkb-accent); }

.tkb-nav--mobile { flex: 1 0 auto; padding-block: 8px 24px; }

.tkb-menu--mobile > .menu-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--tkb-ink-500);
}

.tkb-menu--mobile > .menu-item > a {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: var(--tkb-tap);
	padding: 12px 0;
	color: #fff;
	font-family: var(--tkb-font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.tkb-menu--mobile > .menu-item > a[aria-current] { color: var(--tkb-accent); }

.tkb-menu--mobile .tkb-submenu-toggle {
	flex: 0 0 var(--tkb-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tkb-tap);
	height: var(--tkb-tap);
	background: none;
	border: 0;
	color: var(--tkb-on-dark-dim);
}

.tkb-menu--mobile .tkb-submenu {
	display: none;
	flex: 1 0 100%;
	position: static;
	min-width: 0;
	margin-bottom: 8px;
	padding: 0 0 10px 14px;
	background: none;
	border-top: 0;
	border-left: 2px solid var(--tkb-ink-500);
	box-shadow: none;
}

.tkb-menu--mobile .menu-item.tkb-submenu-open > .tkb-submenu { display: block; }

.tkb-menu--mobile .tkb-submenu .menu-item > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 0;
	color: var(--tkb-on-dark);
	font-size: 1rem;
	font-weight: 400;
	text-decoration: none;
}

.tkb-menu--mobile .tkb-submenu .menu-item > a:hover { color: var(--tkb-accent); }

.tkb-mobile-nav__foot { display: grid; gap: 10px; }

.tkb-mobile-nav__mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tkb-tap);
	color: var(--tkb-on-dark);
	font-size: 0.9375rem;
	text-decoration: none;
	word-break: break-word;
}

.tkb-mobile-nav__area {
	margin: 0;
	color: var(--tkb-on-dark-dim);
	font-size: var(--wp--preset--font-size--small);
}

/* ======================================= 14. SAYFA BAŞLIĞI / BREADCRUMB */

.tkb-page-header {
	padding-block: clamp(24px, 4vw, 52px);
	background: var(--tkb-concrete);
	border-bottom: 1px solid var(--tkb-line);
}

.tkb-page-header__title { margin: 10px 0 0; }

.tkb-page-header__description { margin-top: 12px; color: var(--tkb-muted); max-width: 62ch; }

.tkb-breadcrumbs { font-size: var(--wp--preset--font-size--small); color: var(--tkb-muted); }

.tkb-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 8px; }

.tkb-breadcrumbs__item + .tkb-breadcrumbs__item::before {
	margin-right: 8px;
	content: "/";
	color: var(--tkb-muted);
}

.tkb-breadcrumbs a { text-decoration: none; }
.tkb-breadcrumbs a:hover { text-decoration: underline; }

/* =========================================================== 15. FOOTER */

.tkb-footer {
	margin-top: 72px;
	background: var(--tkb-ink);
	color: var(--tkb-on-dark);
}

.tkb-footer__columns {
	display: grid;
	gap: 32px;
	padding-block: clamp(40px, 5vw, 68px);
}

@media (min-width: 600px) {
	.tkb-footer__columns { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
}

@media (min-width: 1024px) {
	.tkb-footer__columns { grid-template-columns: 1.6fr 1fr 1fr 1.15fr; gap: 44px; }
}

/* -- YATAY TAŞMA KORUMASI

   Footer sütunları grid ÖĞESİDİR ve grid öğelerinin varsayılan
   `min-width: auto` değeri, içeriğinin min-content genişliğinin ALTINA
   inmelerini engeller. Marka metni `white-space: nowrap` taşıdığı için
   min-content'i tüm başlık kadardır; uzun bir site başlığı önce sütunu,
   sütun da tüm satırı genişletiyordu.

   Production'da 375px'te ölçülen 47px yatay taşma bu zincirden geliyordu
   (`clientWidth 360` / `scrollWidth 407`). `min-width: 0` zinciri keser.

   `overflow-x: hidden` ile GİZLENMEDİ — taşmanın kaynağı düzeltildi. */

.tkb-footer__col { min-width: 0; }

/* Footer'da marka metni tek satır değildir. Header'da kırpma (ellipsis)
   doğru — orada tek satırlık bir şerit var. Footer'da yer var; uzun başlık
   kırpılmak yerine alt satıra iner. */
.tkb-footer .tkb-brand {
	min-width: 0;
	max-width: 100%;
}

.tkb-footer .tkb-brand__text {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	overflow-wrap: anywhere;
	line-height: 1.25;
}

/* Uzun e-posta, URL, marka adı ve yönetici uyarısı metinleri sütunu
   genişletmesin — kırılacak boşluk yoksa karakterden kırılsın. */
.tkb-footer__heading,
.tkb-footer__desc,
.tkb-footer__slogan,
.tkb-footer__copy,
.tkb-footer__credit,
.tkb-footer .tkb-admin-hint,
.tkb-contact-block__item > a,
.tkb-contact-block__item > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.tkb-footer__heading {
	margin: 0 0 14px;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tkb-footer a {
	color: var(--tkb-on-dark);
	text-decoration: none;
	transition: color var(--tkb-transition);
}

.tkb-footer a:hover { color: var(--tkb-accent); }

.tkb-footer .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.9375rem;
}

.tkb-footer__desc {
	margin: 16px 0 0;
	/* `44ch` dar ekranda kabı aşabiliyor; okuma genişliği kısıtı sütunu
	   genişletmemeli. */
	max-width: min(44ch, 100%);
	color: var(--tkb-on-dark-dim);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tkb-footer__slogan {
	margin: 16px 0 0;
	color: var(--tkb-accent);
	font-family: var(--tkb-font-head);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tkb-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.tkb-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tkb-tap);
	height: var(--tkb-tap);
	border: 1px solid var(--tkb-ink-500);
	border-radius: var(--tkb-radius);
	transition: border-color var(--tkb-transition), color var(--tkb-transition);
}

.tkb-social a:hover { border-color: var(--tkb-accent); }

.tkb-contact-block { display: grid; gap: 8px; }

.tkb-contact-block__item > a,
.tkb-contact-block__item > span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	font-size: 0.9375rem;
	word-break: break-word;
}

.tkb-contact-block__item--area { color: var(--tkb-on-dark-dim); }

.tkb-footer__bottom {
	border-top: 1px solid var(--tkb-ink-500);
	color: var(--tkb-on-dark-dim);
	font-size: 0.8125rem;
}

.tkb-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-block: 18px;
}

.tkb-footer__copy,
.tkb-footer__credit { margin: 0; }

/* ============================================ 16. MOBİL CTA ÇUBUĞU */

.tkb-cta-bar { display: none; }

@media (max-width: 1023px) {

	.tkb-cta-bar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 150;
		display: grid;
		background: var(--tkb-ink);
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.3);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tkb-cta-bar--two { grid-template-columns: 1fr 1fr; }
	.tkb-cta-bar--one { grid-template-columns: 1fr; }

	.tkb-cta-bar__item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: var(--tkb-cta-h);
		font-family: var(--tkb-font-head);
		font-size: 0.9375rem;
		font-weight: 700;
		text-decoration: none;
	}

	.tkb-cta-bar__item--call { background: var(--tkb-accent); color: var(--tkb-on-accent); }
	.tkb-cta-bar__item--call:active { background: var(--tkb-accent-600); }

	.tkb-cta-bar__item--wa { background: var(--tkb-whatsapp); color: var(--tkb-on-wa); }

	/* Çubuk sayfanın sonunu örtmesin. */
	.tkb-has-cta-bar { padding-bottom: calc(var(--tkb-cta-h) + env(safe-area-inset-bottom)); }

	/* Panel açıkken çubuk gizlenir — panelin kendi butonları var. */
	.tkb-nav-open .tkb-cta-bar { display: none; }
}

/* ======================================= 17. SAYFALAMA / BOŞ DURUM / 404 */

.wp-block-query-pagination,
.navigation.pagination { margin-top: 40px; }

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--tkb-line);
	border-radius: var(--tkb-radius);
	font-weight: 600;
	text-decoration: none;
}

.nav-links .page-numbers:hover { border-color: var(--tkb-ink); }

.nav-links .page-numbers.current {
	background: var(--tkb-ink);
	border-color: var(--tkb-ink);
	color: #fff;
}

.tkb-empty,
.tkb-404 { max-width: 680px; }

.tkb-empty__title,
.tkb-404__title { margin-top: 0; }

.tkb-empty__text,
.tkb-404__text { color: var(--tkb-muted); }

.tkb-404__nav { margin-block: 24px; }

.tkb-menu--404 { display: flex; flex-wrap: wrap; gap: 4px 18px; }

.tkb-menu--404 .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.tkb-404 .tkb-contact-block,
.tkb-empty .tkb-contact-block { margin-top: 24px; }

.tkb-404 .tkb-contact-block__item > a,
.tkb-empty .tkb-contact-block__item > a { min-height: 44px; }

/* Arama formu — core html5 çıktısı. */
.search-form {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin-block: 20px;
}

.search-form label { flex: 1 1 auto; }

.search-form .search-field { width: 100%; }

/* =============================================== 18. PATTERN BİLEŞENLERİ

   Blok pattern'larının kullandığı, core bloklarla karşılanamayan az sayıda
   yardımcı sınıf. Yeni bileşen eklenmez — PHASE 4 design system'i kullanılır.
   -------------------------------------------------------------------------- */

/* -- Hero */

.tkb-hero { background: var(--tkb-ink); color: var(--tkb-on-dark); }

.tkb-hero :where(h1) { color: #fff; }

.tkb-hero__text { max-width: 58ch; }

.tkb-hero__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--tkb-radius);
}

/* Henüz görsel seçilmemiş core/image bloğu.

   WordPress'in `save()` çıktısı src'siz bir <img alt=""> içerir — bu, blok
   geçerliliği için ZORUNLUDUR (aksi halde editör "blok geçersiz" der).
   Ancak frontend'de kırık görsel simgesi bırakmaması gerekir; burada
   gizlenir. Editörde yükleme alanı normal görünmeye devam eder. */
img:not([src]),
img[src=""] { display: none; }

.wp-block-image:not(:has(img[src])) { display: none; }

/* -- Güven şeridi: rozet dizisi */

.tkb-badges { display: grid; gap: 14px; }

@media (min-width: 600px) {
	.tkb-badges { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.tkb-badges { grid-template-columns: repeat(4, 1fr); }
}

.tkb-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-left: 3px solid var(--tkb-accent);
	background: var(--tkb-concrete);
	font-family: var(--tkb-font-head);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.tkb-section--dark .tkb-badge {
	background: var(--tkb-ink-700);
	color: #fff;
}

/* -- Bölüm başlığı bloğu */

.tkb-sec-head { max-width: 62ch; margin-bottom: 32px; }

.tkb-sec-head :where(h2) { margin: 0; }

/* -- Beton sınıfı kartı içindeki kod satırı pattern'da paragraf olarak gelir. */

.tkb-card--class .tkb-card__body { gap: 6px; }

/* -- SSS: core/details bloğu */

.tkb-faq { display: grid; gap: 10px; }

.tkb-faq details {
	border: 1px solid var(--tkb-line);
	border-radius: var(--tkb-radius);
	background: var(--tkb-surface);
}

.tkb-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: var(--tkb-tap);
	padding: 14px 18px;
	cursor: pointer;
	font-family: var(--tkb-font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	list-style: none;
}

.tkb-faq summary::-webkit-details-marker { display: none; }

.tkb-faq summary::after {
	flex: 0 0 auto;
	content: "+";
	color: var(--tkb-accent-600);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.tkb-faq details[open] summary::after { content: "–"; }

.tkb-faq details[open] summary { border-bottom: 1px solid var(--tkb-line); }

.tkb-faq .wp-block-details-content,
.tkb-faq details > *:not(summary) { padding: 4px 18px 18px; }

.tkb-faq details > p { margin: 0; padding: 16px 18px; color: var(--tkb-muted); }

/* -- İlgili bağlantılar satırı */

.tkb-linkrow {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.tkb-linkrow a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--tkb-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* -- Core blok uyumu

   Gruplara `layout: default` (flow) verildiği için WordPress
   `:where(.is-layout-flow) > * + *` kuralıyla blok arası boşluk basar.
   Izgara ve kart içlerinde bu boşluk gap ile çakışır; burada sıfırlanır.
   `:where()` sıfır özgüllükte olduğu için düz sınıf seçicisi kazanır. */

.tkb-grid > *,
.tkb-badges > *,
.tkb-faq > *,
.tkb-card__body > *,
.tkb-btn-group > * { margin-block: 0; }

.tkb-sec-head > * + * { margin-block-start: 12px; }

/* -- WhatsApp buton varyantı (core/button üzerinde)

   Pattern'lar core/button kullanır; tema butonu theme.json'dan sarı gelir.
   WhatsApp yeşili için tek sınıf yeterlidir, yeni bileşen tanımlanmaz. */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tkb-tap);
	padding: 13px 24px;
	line-height: 1.1;
	text-decoration: none;
}

.wp-block-button.is-tkb-wa .wp-block-button__link {
	background-color: var(--tkb-whatsapp);
	color: var(--tkb-on-wa);
}

.wp-block-button.is-tkb-wa .wp-block-button__link:hover { background-color: #1FBE5B; }

/* -- Süreç adımı (pattern: surec-adimlari) */

.tkb-step__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 0 14px;
	border-radius: var(--tkb-radius);
	background: var(--tkb-accent);
	color: var(--tkb-on-accent);
	font-family: var(--tkb-font-head);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.tkb-step :where(h3) { margin: 0 0 8px; }

.tkb-step :where(p:not(.tkb-step__no)) { margin: 0; color: var(--tkb-muted); font-size: 0.9375rem; }

.tkb-section--dark .tkb-step :where(p:not(.tkb-step__no)) { color: var(--tkb-on-dark); }

/* -- Boş paragraflar (yer tutucu) frontend'de yer kaplamasın. */

.tkb-blocks p:empty { display: none; }

/* -- Görsel bekleyen sütunlar

   Hero ve tanıtım bölümlerinde görsel alanı, gerçek fotoğraf gelene kadar boş
   bırakılır (editörde yükleme alanı görünür). Frontend'de boş sütunun yer
   kaplaması metni gereksiz yere daraltıyordu; görsel yokken sütun çöker ve
   kardeşi tüm genişliği alır.

   `:has()` desteklemeyen tarayıcıda kurallar düşer — sütun boş görünür,
   sayfa bozulmaz. */

.tkb-media-col:not(:has(img[src])) { display: none; }

.wp-block-columns:has(.tkb-media-col:not(:has(img[src]))) > .wp-block-column {
	flex-basis: auto !important;
}

/* ============================ 19. TEKLİF FORMU / İLETİŞİM SAYFASI

   Form işaretlemesi inc/form.php'de tanımlıdır ve Contact Form 7 tarafından
   basılır. Buradaki kurallar §7'nin (FORMLAR) üzerine yalnız DÜZEN ekler;
   alan görünümü, odak halkası ve hata biçimi §7'de kalır. */

.tkb-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 24px;
}

@media (min-width: 640px) {
	.tkb-form__grid { grid-template-columns: 1fr 1fr; }
}

/* `.tkb-field` bir <p>'dir; §7'deki grid düzeni geçerli kalsın diye
   yalnız kenar boşluğu sıfırlanır. */
.tkb-form p.tkb-field { margin-top: 0; }

.tkb-field--wide { grid-column: 1 / -1; }

/* CF7 her alanı satır içi bir <span> ile sarar; alanın satırın tamamını
   kaplaması için blok seviyesine çekilir. */
.tkb-field .wpcf7-form-control-wrap { display: block; }

.tkb-field .tkb-hint { margin-top: 2px; }

/* -- KVKK / iletişim onayı */

.tkb-field--consent {
	margin-top: 6px;
	padding: 14px 16px;
	border: 1px solid var(--tkb-line);
	border-radius: var(--tkb-radius);
	background: var(--tkb-concrete);
}

.tkb-field--consent .wpcf7-list-item { margin: 0; }

.tkb-field--consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

/* -- gönder */

.tkb-form__submit { margin: 22px 0 0; }

.tkb-form__privacy { margin: 12px 0 0; font-size: var(--wp--preset--font-size--small); }

/* -- form yokken basılan yedek blok (CF7 devre dışıysa) */

.tkb-form-fallback {
	padding: 20px;
	border: 1px solid var(--tkb-line);
	border-left: 4px solid var(--tkb-accent);
	border-radius: var(--tkb-radius);
	background: var(--tkb-surface);
}

.tkb-form-fallback :where(p:first-child) { margin-top: 0; }
.tkb-form-fallback :where(p:last-child) { margin-bottom: 0; }

/* -- iletişim kartları

   Telefon / WhatsApp / e-posta / hizmet alanı. İçerik kısa koddan gelir
   (inc/conversion.php), sayfaya gömülmez. */

.tkb-contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.tkb-contact-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--tkb-line);
	border-radius: var(--tkb-radius);
	background: var(--tkb-surface);
}

.tkb-contact-card__label {
	color: var(--tkb-muted);
	font-family: var(--tkb-font-head);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Dokunma alanı 48px — kart içindeki bağlantı da bir dönüşüm noktasıdır. */
.tkb-contact-card__value {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--tkb-tap);
	margin: 0;
	color: var(--tkb-text);
	font-family: var(--tkb-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.tkb-contact-card__value:hover { color: var(--tkb-accent-600); }

.tkb-contact-card__value svg { flex: 0 0 auto; color: var(--tkb-accent-600); }

/* ================================== 20. KAYAN BİLGİ ŞERİDİ (TICKER)

   Header'ın en üstünde, sürekli sola kayan tek satır.

   MEKANİK: öğe listesi iki kez basılır, şerit `translateX(-50%)` kadar
   kaydırılır. Birinci kopyanın sonu ikincinin başıyla çakıştığı için
   döngü dikişsiz görünür. JavaScript yok — scroll olayı, timer ve
   layout ölçümü yok.

   Şerit `.tkb-header` İÇİNDE, üst barın da üstündedir; sticky offset
   ikisinin toplamı kadar negatiftir (§11). */

.tkb-ticker {
	position: relative;
	overflow: hidden;
	min-height: var(--tkb-ticker-h);
	background: var(--tkb-ink-700);
	border-bottom: 1px solid var(--tkb-ink-500);
}

/* Kenarlarda yumuşama — metin kesilmiş gibi durmasın. */
.tkb-ticker::before,
.tkb-ticker::after {
	content: "";
	position: absolute;
	inset-block: 0;
	z-index: 2;
	width: 56px;
	pointer-events: none;
}

.tkb-ticker::before {
	left: 0;
	background: linear-gradient(to right, var(--tkb-ink-700), transparent);
}

.tkb-ticker::after {
	right: 0;
	background: linear-gradient(to left, var(--tkb-ink-700), transparent);
}

.tkb-ticker__track {
	display: flex;
	width: max-content;
	animation: tkb-ticker-kay var(--tkb-ticker-sure) linear infinite;
	will-change: transform;
}

/* Okuma fırsatı: fare üzerindeyken ve klavye odağı içerideyken durur. */
.tkb-ticker:hover .tkb-ticker__track,
.tkb-ticker:focus-within .tkb-ticker__track { animation-play-state: paused; }

.tkb-ticker__group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tkb-ticker__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--tkb-ticker-h);
	color: var(--tkb-on-dark);
	font-family: var(--tkb-font-head);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Öğeleri ayıran sarı nokta — ayrıca ritim veriyor. */
.tkb-ticker__item::after {
	content: "";
	flex: 0 0 5px;
	width: 5px;
	height: 5px;
	margin-inline: 26px;
	border-radius: 50%;
	background: var(--tkb-accent);
	opacity: 0.75;
}

@keyframes tkb-ticker-kay {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* HAREKET AZALTMA

   §2'deki genel kural animasyon SÜRESİNİ `!important` ile 0.01ms'ye
   çekiyor. Bu şeritte o tek başına yetmez: animasyon bir kez ve anında
   çalışıp şeridi -%50'ye taşır, yani ikinci (aria-hidden) kopya görünür
   kalırdı. Bu yüzden dönüşüm burada açıkça sıfırlanır.

   Sonuç: şerit durur, ilk kopya görünür, gerekirse yatay kaydırılır —
   içerik kaybolmaz. */
@media (prefers-reduced-motion: reduce) {

	.tkb-ticker__track {
		transform: none !important;
		animation: none;
	}

	.tkb-ticker {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tkb-ticker::-webkit-scrollbar { display: none; }

	.tkb-ticker__group[aria-hidden="true"] { display: none; }

	.tkb-ticker::before,
	.tkb-ticker::after { display: none; }
}