/*
 * Motion sistemi , Framer-esinli fakat framer-motion olmadan.
 * IntersectionObserver + CSS keyframes, zero dependency.
 *
 * Kullanım:
 *  - Reveal: <div class="reveal" data-reveal>…</div>  (motion.js tetikler)
 *  - Marquee: <div class="marquee">…</div>  (motion.js pause-on-hover)
 *  - FAQ: <details class="faq__item">…</details>  (motion.js smooth expand)
 *
 * prefers-reduced-motion: reduce , tüm animasyonlar nötrlenir.
 */

/* =========================
   Reveal (scroll-triggered fade + translateY)
   ========================= */

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--dur-reveal) var(--ease-out-brand),
		transform var(--dur-reveal) var(--ease-out-brand);
	will-change: opacity, transform;
}

.reveal[data-inview="true"] {
	opacity: 1;
	transform: translateY(0);
}

/* Sıra gecikmeleri , kart gridinde peş peşe akış yaratır. */
.reveal[data-reveal-delay="1"] { transition-delay: 60ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 120ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 180ms; }
.reveal[data-reveal-delay="4"] { transition-delay: 240ms; }
.reveal[data-reveal-delay="5"] { transition-delay: 300ms; }

/* JS yüklenemezse içerik gizli kalmasın , no-js fallback. */
.no-js .reveal {
	opacity: 1;
	transform: none;
}

/* =========================
   Marquee (sonsuz yatay kayan şerit)
   ========================= */

.marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Kenarlarda yumuşak fade */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee__track {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding-right: var(--space-8);
	animation: marquee-x var(--dur-marquee) linear infinite;
	animation-play-state: running;
	will-change: transform;
}

.marquee[data-paused="true"] .marquee__track,
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
	white-space: nowrap;
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--color-text);
	font-optical-sizing: auto;
}

.marquee__item::after {
	content: "·";
	color: var(--color-brand);
	font-weight: 700;
	font-size: 1.2em;
	line-height: 0.8;
}

/* Son ayırıcıyı gizle , track iki kez duplike olduğu için görsel süreklilik bozulmaz */
.marquee__item:last-child::after {
	/* iki şerit için görsel pürüzü önlemek adına yumuşat */
	opacity: 0.4;
}

@keyframes marquee-x {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* =========================
   Kart hover refine , mevcut .post-card'ı override etmeyip zenginleştirir
   ========================= */

.post-card {
	transition:
		transform var(--dur) var(--ease-out-brand),
		box-shadow var(--dur) var(--ease-out-brand);
}

.post-card:hover {
	transform: translateY(-2px) scale(1.01);
}

/* =========================
   Buton press refine
   ========================= */

.btn:active,
.button:active,
input[type="submit"]:active {
	transform: scale(0.97);
	transition: transform 80ms var(--ease-out-brand);
}

/* =========================
   FAQ accordion (native <details>)
   Grid-rows 0fr→1fr trick'i ile smooth expand
   ========================= */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 760px;
	margin: 0 auto;
}

.faq__item {
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease-out-brand);
}

.faq__item[open] {
	box-shadow: var(--shadow-hover);
}

.faq__summary {
	list-style: none;
	cursor: pointer;
	padding: var(--space-6) var(--space-7);
	font-size: var(--fs-ui);
	font-weight: var(--fw-600);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	user-select: none;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--dur) var(--ease-out-brand);
}

.faq__item[open] .faq__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-out-brand);
}

.faq__item[open] .faq__body {
	grid-template-rows: 1fr;
}

.faq__body-inner {
	overflow: hidden;
	min-height: 0;
}

.faq__body-inner > div {
	padding: 0 var(--space-7) var(--space-6);
	color: var(--color-text-secondary);
	font-size: var(--fs-body);
	line-height: 1.65;
}

/* =========================
   prefers-reduced-motion , erişilebilirlik
   ========================= */

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal[data-inview="true"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.marquee__track {
		animation: none !important;
	}

	.post-card:hover {
		transform: none;
	}

	.btn:active {
		transform: none;
	}

	.faq__body {
		transition: none;
	}

	.faq__summary::after {
		transition: none;
	}
}