/**
 * Zaman çizelgesi (timeline)
 * Elder Scrolls Türk teması
 */

.est-tl {
	position: relative;
	max-width: var(--est-container);
	margin: var(--est-space-5) auto var(--est-space-6);
	padding: var(--est-space-4) 0;
}

/* Ortadan inen çizgi */
.est-tl::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--est-line) 4%,
		var(--est-line) 96%,
		transparent
	);
}

/* --------------------------------------------------------------------------
   Olay satırı
   -------------------------------------------------------------------------- */
.est-tl__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--est-space-5);

	/* Kaydırınca belirme (lazy load) başlangıç durumu */
	opacity: 0;
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.est-tl__item--left  { transform: translate3d(-2.5em, 1.5em, 0); }
.est-tl__item--right { transform: translate3d(2.5em, 1.5em, 0); }

.est-tl__item.is-visible {
	opacity: 1;
	transform: none;
}

/* Çizgi üstündeki nokta */
.est-tl__dot {
	position: absolute;
	left: 50%;
	top: 1.35em;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--est-accent);
	border: 2px solid var(--est-bg);
	box-shadow: 0 0 0 1px var(--est-line);
}

/* Kutu */
.est-tl__card {
	width: calc(50% - 3em);
	background: var(--est-bg-raised);
	border: 1px solid var(--est-line-soft);
	border-radius: var(--est-radius);
	padding: var(--est-space-4);
	box-shadow: var(--est-shadow-sm);
}

.est-tl__item--bare .est-tl__card {
	padding-top: var(--est-space-3);
	padding-bottom: var(--est-space-3);
	background: transparent;
	border-style: dashed;
	box-shadow: none;
}

.est-tl__title {
	margin: 0;
	font-family: var(--est-font-heading);
	font-size: var(--est-h4);
	line-height: var(--est-leading-snug);
	color: var(--est-ink);
}

.est-tl__body {
	margin-top: var(--est-space-2);
}

.est-tl__body p {
	margin: 0 0 var(--est-space-2);
	font-size: var(--est-text-base);
	line-height: var(--est-leading-body);
	color: var(--est-ink-muted);
}

.est-tl__body p:last-child { margin-bottom: 0; }

/* Tarih (çizginin karşı tarafı) */
.est-tl__date {
	width: calc(50% - 3em);
	padding-top: 1.05em;
	font-family: var(--est-font-mono);
	font-size: var(--est-text-sm);
	font-weight: 500;
	letter-spacing: var(--est-tracking-wide);
	color: var(--est-gold-soft);
}

/* Sol kutu -> sağ tarih */
.est-tl__item--left .est-tl__card { order: 1; }
.est-tl__item--left .est-tl__date { order: 2; margin-left: 6em; text-align: left; }

/* Sağ kutu -> sol tarih */
.est-tl__item--right .est-tl__date { order: 1; text-align: right; }
.est-tl__item--right .est-tl__card { order: 2; margin-left: 6em; }

/* --------------------------------------------------------------------------
   Ejder Kırılması — çizginin ortasındaki özel kutu
   -------------------------------------------------------------------------- */
.est-tl__break {
	position: relative;
	display: flex;
	justify-content: center;
	margin: var(--est-space-5) 0;

	opacity: 0;
	transform: scale(0.96);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.est-tl__break.is-visible {
	opacity: 1;
	transform: none;
}

.est-tl__breakcard {
	position: relative;
	z-index: 1;
	width: min(46em, 100%);
	text-align: center;
	background: var(--est-bg-raised);
	border: 2px solid var(--est-accent);
	border-radius: var(--est-radius);
	padding: var(--est-space-4);
	box-shadow: 0 0 0 4px rgba(123, 34, 51, 0.08);
}

.est-tl__breaktitle {
	margin: 0 0 var(--est-space-2);
	font-family: var(--est-font-heading);
	font-size: var(--est-h4);
	letter-spacing: var(--est-tracking-heading);
	color: var(--est-accent);
}

.est-tl__breakbody p {
	margin: 0;
	font-style: italic;
	line-height: var(--est-leading-body);
	color: var(--est-ink-muted);
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {

	.est-tl::before { left: 6px; margin-left: 0; }

	.est-tl__item {
		flex-direction: column;
		margin-bottom: var(--est-space-4);
	}

	.est-tl__item--left,
	.est-tl__item--right { transform: translate3d(0, 1.5em, 0); }

	.est-tl__dot { left: 6px; margin-left: -5.5px; top: 0.45em; }

	.est-tl__card,
	.est-tl__date {
		width: auto;
		order: 0 !important;
		margin-left: 2.2em !important;
		text-align: left !important;
	}

	.est-tl__date {
		padding-top: 0;
		margin-bottom: var(--est-space-2);
	}

	.est-tl__break { margin-left: 2.2em; }
	.est-tl__breakcard { width: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.est-tl__item,
	.est-tl__break {
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}
}