/* Teleteknik Hikaye — Apple tarzı kaydırma anlatımı. Tema stillerine karşı sağlamlaştırılmıştır. */
.tth, .tth * { box-sizing: border-box !important; }
.tth {
	--tth-bg: #0b0b0d; --tth-text: #f5f4f0; --tth-muted: #94949d; --tth-line: rgba(255,255,255,.12); --tth-glow: #7dd3fc;
	display: block !important; position: relative; background: var(--tth-bg); color: var(--tth-text) !important;
	overflow: visible; text-align: left; /* overflow:hidden position:sticky'yi bozar; aşağıda clip kullanılıyor */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; line-height: 1.5 !important;
}
@supports (overflow: clip) { .tth { overflow: clip; } }
.tth h2, .tth h3, .tth p { margin: 0 !important; padding: 0 !important; background: none !important; text-transform: none !important; font-family: inherit !important; }
.tth h2, .tth h3 { color: var(--tth-text) !important; letter-spacing: -.02em; }
.tth a { text-decoration: none !important; }

/* 1) Kaydırdıkça kelime kelime aydınlanan metin. position:sticky KULLANILMAZ (bazı
   temalarda üst kapsayıcının overflow ayarıyla çakışıyor); bunun yerine JS, kaydırma
   konumuna göre bölümü fixed/absolute arasında geçirir. JS hiç çalışmazsa bölüm
   normal, tek ekranlık bir alan olarak kalır (aşağıdaki reduced-motion kuralı). */
.tth-scrub { position: relative; }
.tth-scrub__pin {
	display: flex !important; flex-direction: column; justify-content: center; align-items: center;
	min-height: 100svh; padding: 90px 24px; box-sizing: border-box; overflow: hidden;
}
.tth-scrub__pin.is-fixed { position: fixed !important; top: 0; left: 0; z-index: 5; }
.tth-scrub__pin.is-after { position: absolute !important; left: 0; right: 0; bottom: 0; top: auto; }
.tth-scrub__stick { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }
.tth-glow { position: absolute; inset: -15%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
	background: radial-gradient(ellipse 38% 34% at 30% 34%, rgba(125,211,252,.16), transparent),
	            radial-gradient(ellipse 38% 34% at 66% 64%, color-mix(in srgb, var(--tth-accent, #ffb238) 22%, transparent), transparent);
	animation: tth-drift 15s ease-in-out infinite alternate; }
.tth-scrub.is-in .tth-glow { opacity: 1; }
@keyframes tth-drift { from { transform: translateY(0) scale(1); } to { transform: translateY(2%) scale(1.05); } }
.tth-eyebrow { position: relative; color: var(--tth-accent, #ffb238) !important; font-size: 15px !important; font-weight: 600 !important; margin-bottom: 22px !important; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.tth-scrub.is-in .tth-eyebrow { opacity: 1; transform: none; }
.tth-statement { position: relative; max-width: 22ch; margin: 0 auto; font-size: clamp(30px, 6.2vw, 68px) !important; font-weight: 750 !important; line-height: 1.08 !important; letter-spacing: -.025em; color: var(--tth-text) !important; }
.tth-statement.is-split { max-width: 20ch; }
.tth-w { display: inline; opacity: .16; transition: opacity .15s linear; }
.tth-scrub.is-in .tth-w { opacity: 1; transition: opacity .6s ease; }

/* 2) Dört başlık */
.tth-pillars { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0; max-width: 1080px; margin: 0 auto; padding: 24px 24px 72px; }
.tth-pillar { padding: 34px 30px 38px; border-top: 1px solid var(--tth-line); }
.tth-pillar:nth-child(even) { border-left: 1px solid var(--tth-line); }
.tth-icon { width: 60px; height: 60px; display: block; color: var(--tth-accent, #ffb238); margin-bottom: 22px; overflow: visible; }
.tth-icon [stroke] { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); transition: stroke-dashoffset 1.4s cubic-bezier(.19,1,.22,1) .15s; }
.tth-pillar.is-in .tth-icon [stroke] { stroke-dashoffset: 0; }
.tth-pillar h3 { font-size: clamp(20px, 2.4vw, 26px) !important; font-weight: 700 !important; }
.tth-pillar p { margin-top: 10px !important; color: var(--tth-muted) !important; font-size: 16px !important; max-width: 34ch; }

/* 3) Kapanış */
.tth-closing { text-align: center; padding: 40px 24px 96px; border-top: 1px solid var(--tth-line); max-width: 1080px; margin: 0 auto; padding-top: 88px; }
.tth-closing__title { font-size: clamp(34px, 7vw, 80px) !important; font-weight: 800 !important; line-height: 1.02 !important; }
.tth-closing__sub { margin-top: 18px !important; color: var(--tth-muted) !important; font-size: clamp(16px, 2vw, 20px) !important; }
.tth-closing__cta { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tth-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 15.5px; line-height: 1; border: 1px solid var(--tth-line); transition: transform .15s, border-color .15s, color .15s; }
.tth-btn:hover { transform: translateY(-1px); }
.tth-btn--accent { background: var(--tth-accent, #ffb238) !important; border-color: var(--tth-accent, #ffb238) !important; color: #0b0b0d !important; }
.tth-btn--ghost { color: var(--tth-text) !important; border-color: rgba(255,255,255,.22) !important; }
.tth-btn--ghost:hover { border-color: var(--tth-accent, #ffb238) !important; color: var(--tth-accent, #ffb238) !important; }

/* Giriş animasyonu: hafif odaktan çıkma + yükselme (Apple tarzı) */
.tth-reveal { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1), filter .9s cubic-bezier(.19,1,.22,1); }
.tth-reveal.is-in { opacity: 1; transform: none; filter: none; }
.tth-pillar:nth-child(2).tth-reveal { transition-delay: .1s; }
.tth-pillar:nth-child(3).tth-reveal { transition-delay: .05s; }
.tth-pillar:nth-child(4).tth-reveal { transition-delay: .15s; }
.tth-closing__sub.tth-reveal { transition-delay: .1s; }
.tth-closing__cta.tth-reveal { transition-delay: .2s; }

@media (max-width: 720px) {
	.tth-pillars { grid-template-columns: 1fr !important; padding: 8px 16px 48px; }
	.tth-pillar:nth-child(even) { border-left: 0; }
	.tth-pillar { padding: 28px 12px 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.tth-w, .tth-eyebrow, .tth-glow { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
	.tth-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
	.tth-icon [stroke] { stroke-dashoffset: 0 !important; transition: none !important; }
	.tth-scrub { height: auto !important; }
	.tth-scrub__pin { position: relative !important; min-height: 0; }
}