/* ==========================================================================
   Video Tema — tasarım stilleri (DOC/HTML index + panel <style> blokları birebir).
   Tailwind CDN yanında yalnız özel efektler burada.
   ========================================================================== */

body { font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.display { font-family: 'Fraunces', serif; }
.mono { font-family: 'DM Mono', monospace; }

/* —— İmza: öğrenme rotası —— */
.track { position: relative; }
.track-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(226,162,59,.35); }
.track-node { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 9999px; background: #14152E; border: 1.5px solid #E2A23B; }
.track-node.is-done { background: #E2A23B; }

.ink-grid {
	background-image:
		radial-gradient(120% 90% at 88% 10%, rgba(226,162,59,.12), transparent 58%),
		linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size: 100% 100%, 56px 56px, 56px 56px;
}

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(20,21,46,.4); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* —— Slider —— */
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease; }
.slide.active { opacity: 1; visibility: visible; }
.slide-figure { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .7s ease .1s, transform .7s ease .1s; }
.slide.active .slide-figure { opacity: 1; transform: none; }
.slide-copy > * { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.slide.active .slide-copy > * { opacity: 1; transform: none; }
.slide.active .slide-copy > *:nth-child(1){ transition-delay:.05s }
.slide.active .slide-copy > *:nth-child(2){ transition-delay:.13s }
.slide.active .slide-copy > *:nth-child(3){ transition-delay:.21s }
.slide.active .slide-copy > *:nth-child(4){ transition-delay:.29s }

/* Görsel çubuk 28x3 kalır; padding + content-box ile tık/dokunma hedefi ~40px. */
.dot { width: 28px; height: 3px; box-sizing: content-box; padding: 18px 6px; background-clip: content-box; border-radius: 9999px; background-color: rgba(255,255,255,.2); cursor: pointer; transition: background-color .3s ease; }
.dot.active { background-color: #E2A23B; }

*:focus-visible { outline: 2px solid #E2A23B; outline-offset: 2px; border-radius: 4px; }

/* —— Panel (sidebar nav-link) —— */
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.625rem .875rem; border-radius:.75rem; color:rgba(251,251,252,.65); font-size:15px; transition:background .2s,color .2s; }
.nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-link.active { background:rgba(226,162,59,.14); color:#F2C879; }
.nav-link.active svg { color:#E2A23B; }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d8d8e2;border-radius:8px}

/* —— Header açılır alt menü (masaüstü) —— */
.vt-nav-item:hover > .vt-submenu,
.vt-nav-item:focus-within > .vt-submenu { display:block; }

@media (prefers-reduced-motion: reduce) {
	.reveal, .slide-figure, .slide-copy > * { opacity: 1 !important; transform: none !important; transition: none; }
	html { scroll-behavior: auto; }
}

/* Footer menü linkleri: mobilde rahat dokunma hedefi (≥40px) — görsel yoğunluk korunur. */
.vt-fmenu a {
	display: inline-block;
	padding: 10px 0;
	line-height: 1.25;
}

/* —— WhatsApp hattı (sol alt, yüzen) ——
   Kapsayıcı pointer-events:none → sol alt bölgedeki tıklamalar bloke olmaz; yalnız buton tıklanabilir. */
.vt-wa {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 90;
	pointer-events: none;
}
.vt-wa-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 20px 0 15px;
	border-radius: 999px;
	background: #25D366;
	color: #fff;
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(20, 21, 46, .18), 0 2px 6px rgba(20, 21, 46, .10);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.vt-wa-btn:hover,
.vt-wa-btn:focus-visible {
	background: #1FB855;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(20, 21, 46, .24), 0 3px 8px rgba(20, 21, 46, .12);
}
.vt-wa-ico {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}
/* Yumuşak nabız halkası — dikkat çeker ama rahatsız etmez. */
.vt-wa-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, .35);
	animation: vt-wa-pulse 2.8s ease-out infinite;
	pointer-events: none;
}
.vt-wa-btn { position: relative; }
@keyframes vt-wa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .35); }
	70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* Mobilde yalnız ikon (yuvarlak) — içerik alanını kapatmaz. */
@media (max-width: 639px) {
	.vt-wa { left: 14px; bottom: 14px; }
	.vt-wa-btn { width: 56px; padding: 0; justify-content: center; gap: 0; }
	.vt-wa-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.vt-wa-btn::before { animation: none; }
	.vt-wa-btn { transition: none; }
}