/* =========================================================================
   MAKYAJ — mikroetkileşimler ve rötuşlar.
   Hepsi CSS: hover/focus/active GSAP'a taşınmaz (CLAUDE.md §5.1).
   transform + opacity dışına çıkılmaz → CLS 0, compositor'da bedava.
   ========================================================================= */

/* ─────────────── Okuma çubuğu — sayfanın üstünde ince amber şerit ─────────── */
.tk-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background: var(--tk-primary);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 300;
	pointer-events: none;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .tk-progress { display: none; } }

/* ─────────────────────────── BUTONLAR ─────────────────────────── */
/* Ok kayar — "ileri" hissi. Ok metne dahil değil, ::after ile eklenir. */
.tk-btn { position: relative; overflow: hidden; }
.tk-btn--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .55s ease;
	pointer-events: none;
}
.tk-btn--primary:hover::before { transform: translateX(120%); }
.tk-btn:active { transform: translateY(0) scale(.985); }

/* ──────────────────────── METİN BAĞLANTILARI ──────────────────────── */
/* Alt çizgi soldan sağa çizilir */
.tk-textlink,
.tk-work__link {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
}
.tk-textlink::after,
.tk-work__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: var(--tk-primary);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--tk-t-med);
}
.tk-textlink:hover::after,
.tk-work__link:hover::after,
a:hover > .tk-textlink::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* Kart içindeki textlink kartın hover'ıyla da çizilsin */
.tk-card:hover .tk-textlink::after { transform: scaleX(1); transform-origin: left; }

/* ────────────────────────── NAVİGASYON ────────────────────────── */
.tk-nav a { position: relative; }
.tk-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: var(--tk-primary);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--tk-t-med);
}
.tk-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.tk-nav a[aria-current]::after { transform: scaleX(1); }

/* ───────────────────────── İKON KUTUSU ───────────────────────── */
/* Kart hover'ında ikon hafifçe döner — canlılık, dikkat dağıtmadan */
.tk-icon { transition: transform var(--tk-t-med), box-shadow var(--tk-t-med); }
.tk-card:hover .tk-icon,
.tk-mega__link:hover .tk-icon {
	transform: rotate(-6deg) scale(1.06);
	box-shadow: 0 8px 20px var(--tk-primary-glow);
}

/* ─────────────────────── EYEBROW ÇİZGİSİ ─────────────────────── */
/* Bölüm göründüğünde çizgi uzar */
.tk-eyebrow::before { transition: width .5s cubic-bezier(.22,.61,.36,1); }
.tk-motion [data-tk-reveal] .tk-eyebrow::before,
.tk-motion [data-tk-reveal-group] .tk-eyebrow::before { width: 0; }
.tk-motion .tk-in .tk-eyebrow::before,
.tk-motion [data-tk-reveal].tk-in .tk-eyebrow::before { width: 34px; }

/* ───────────────────────── GÖRSELLER ───────────────────────── */
/* Çerçeveye hafif iç gölge — düz görselleri "yerleştirilmiş" gösterir */
.tk-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
	pointer-events: none;
}

/* ──────────────────────────── SSS ──────────────────────────── */
.tk-faq__item summary::after { transition: transform var(--tk-t-med), background var(--tk-t-fast); }
.tk-faq__item[open] summary::after { transform: rotate(180deg); }
.tk-faq__item[open] { background: var(--tk-surface); border-radius: var(--tk-r-md); }
.tk-faq__item[open] summary,
.tk-faq__item[open] > p { padding-inline: 20px; }

/* Açılırken içerik yumuşak insin */
@media (prefers-reduced-motion: no-preference) {
	.tk-faq__item[open] > p { animation: tk-faq-in .3s ease both; }
	@keyframes tk-faq-in {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ───────────────────────── FORM ALANLARI ───────────────────────── */
.tk-field {
	transition: border-color var(--tk-t-fast), box-shadow var(--tk-t-fast), background var(--tk-t-fast);
}
.tk-field:focus {
	box-shadow: 0 0 0 4px var(--tk-primary-wash);
}
.tk-drop { transition: border-color var(--tk-t-fast), background var(--tk-t-fast), transform var(--tk-t-fast); }
.tk-drop:hover { border-color: var(--tk-primary); background: var(--tk-surface); }

/* ─────────────────────── SOSYAL & FOOTER ─────────────────────── */
.tk-footer__list a { position: relative; display: inline-block; }
.tk-footer__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--tk-primary);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--tk-t-med);
}
.tk-footer__list a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ─────────────────────── HEADER YOĞUNLAŞMA ─────────────────────── */
/* Kaydırınca header biraz incelir — dikkat içeriğe kaysın */
.tk-header__bar { transition: padding var(--tk-t-med); }
.tk-header.tk-stuck .tk-header__bar { padding-block: 12px; }
.tk-header.tk-stuck .custom-logo { height: 32px; transition: height var(--tk-t-med); }

/* ───────────────────────── SEÇİM RENGİ ───────────────────────── */
::selection { background: var(--tk-primary); color: var(--tk-ink); }

/* ─────────────────── KAYDIRMA ÇUBUĞU (masaüstü) ─────────────────── */
@media (min-width: 900px) {
	* { scrollbar-width: thin; scrollbar-color: var(--tk-line-strong) transparent; }
	*::-webkit-scrollbar { width: 10px; height: 10px; }
	*::-webkit-scrollbar-track { background: transparent; }
	*::-webkit-scrollbar-thumb {
		background: var(--tk-line-strong);
		border-radius: 999px;
		border: 3px solid var(--tk-white);
	}
	*::-webkit-scrollbar-thumb:hover { background: var(--tk-gray); }
}

/* ─────────────────────────── MOBİL RÖTUŞ ─────────────────────────── */
@media (max-width: 782px) {
	/* Dokunma hedefleri en az 44px — WCAG 2.5.5 */
	.tk-nav a,
	.tk-footer__list a,
	.tk-filter { min-height: 44px; display: flex; align-items: center; }

	/* Mobilde hover yok; kartlar basılınca tepki versin */
	.tk-card:active,
	.tk-work:active,
	.tk-founder:active { transform: scale(.99); }

	/* Uzun başlıklar taşmasın */
	.tk-hero-title,
	.tk-page-title,
	.tk-h2 { overflow-wrap: break-word; hyphens: auto; }

	/* Bölüm aralıkları mobilde biraz sıkışsın */
	.tk-ctaband { padding: 34px 24px; text-align: center; }
	.tk-ctaband::before { display: none; }
	.tk-ctaband .tk-btn { width: 100%; justify-content: center; }
}

/* Dokunmatik cihazda hover efektlerini kapat — "yapışık hover" olmasın */
@media (hover: none) {
	.tk-card:hover,
	.tk-work:hover,
	.tk-founder:hover,
	.tk-pillar:hover { transform: none; box-shadow: none; }
	.tk-btn--primary:hover { transform: none; box-shadow: none; }
}

/* ═══════════════ DOKUNMA HEDEFLERİ (WCAG 2.5.5) ═══════════════
   Ölçüldü: hamburger 30px, sosyal ikon 36px, footer telefon/e-posta 17px.
   Mobilde parmakla ıskalanan hedefler; hepsi en az 44px'e çıkarıldı.
   Görsel boyut aynı kalır — yalnız tıklanabilir alan büyür. */

.tk-burger {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* Logo bağlantısı: görsel 32-38px kalır, hedef 44px olur */
.custom-logo-link { min-height: 44px; }

@media (max-width: 782px) {
	/* Footer'daki telefon/e-posta satırları */
	.tk-footer__nap a,
	.tk-nap__v a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Sosyal ikonlar */
	.tk-social a { width: 44px; height: 44px; }
	.tk-footer .tk-social a { width: 44px; height: 44px; }

	/* CTA bandındaki buton gerçekten tam genişlik olsun —
	   sarmalayıcı <div> flex-column içinde daralıyordu. */
	.tk-ctaband--center > *,
	.tk-ctaband > * { width: 100%; }
	.tk-ctaband .tk-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════ WHATSAPP ═══════════════════════════ */
/* Marka rengi DEĞİL, WhatsApp yeşili kullanılıyor: tanınırlık burada
   markadan önemli — kullanıcı ne olduğunu bir bakışta anlamalı. */
:root { --tk-wa: #25D366; --tk-wa-dark: #1da851; }

/* İletişim sayfasındaki satır bağlantısı */
.tk-wa-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--tk-ink);
	font-weight: 600;
}
.tk-wa-link svg { width: 20px; height: 20px; color: var(--tk-wa); flex-shrink: 0; }
.tk-wa-link:hover { color: var(--tk-wa-dark); }

/* Yüzen buton */
.tk-wa-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 150;              /* footer üstü, çekmece (200) altı */
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 54px;
	padding: 0 15px;
	border-radius: 999px;
	background: var(--tk-wa);
	color: #fff;
	box-shadow: 0 8px 26px rgba(37, 211, 102, .38);
	transition: gap .28s ease, padding .28s ease, transform var(--tk-t-fast), box-shadow var(--tk-t-fast);
	overflow: hidden;
}
.tk-wa-float svg { width: 26px; height: 26px; flex-shrink: 0; }
.tk-wa-float:hover,
.tk-wa-float:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(37, 211, 102, .5);
	gap: 10px;
	padding-right: 22px;
}

/* Etiket kapalıyken sıfır genişlik — hover/odakta açılır */
.tk-wa-float__t {
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	font: 600 var(--tk-fs-xs) var(--tk-font-head);
	transition: max-width .28s ease, opacity .2s ease;
}
.tk-wa-float:hover .tk-wa-float__t,
.tk-wa-float:focus-visible .tk-wa-float__t { max-width: 120px; opacity: 1; }

/* Dokunmatikte hover yok → etiket hep kapalı, sade daire kalsın */
@media (hover: none) {
	.tk-wa-float { padding: 0; width: 54px; justify-content: center; }
	.tk-wa-float__t { display: none; }
}

/* Mobilde biraz küçült, kenara yaklaştır */
@media (max-width: 560px) {
	.tk-wa-float { right: 14px; bottom: 14px; height: 50px; width: 50px; }
	.tk-wa-float svg { width: 24px; height: 24px; }
}

/* Hareket azaltma: geçişler kapalı, buton yine görünür */
@media (prefers-reduced-motion: reduce) {
	.tk-wa-float,
	.tk-wa-float__t { transition: none; }
}