/* ==========================================================================
   Zaman Çizelgesi — Frontend
   ========================================================================== */

.zc-bolum {
	background: #ffffff !important;
	padding: 70px 24px;
	box-sizing: border-box;
}
.zc-bolum * { box-sizing: border-box; }

/* --- Başlık alanı --- */
.zc-baslik-alan { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.zc-ust-etiket {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 13px;
	font-weight: 700;
	color: #2a6df4;
	margin-bottom: 14px;
}
.zc-bolum-baslik {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 700;
	color: #14223a;
	margin: 0 0 16px;
	line-height: 1.15;
}
.zc-bolum-alt { color: #5a6b7b; font-size: 17px; line-height: 1.6; margin: 0; }

/* --- Çizelge --- */
.zc-sarmal { max-width: 1200px; margin: 0 auto; overflow-x: auto; }

.zc-track {
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 100%;
	min-height: 500px;       /* sabit bant: içerik uzasa da hiza bozulmaz */
}

/* Ortadan geçen çizgi (sabit Y = %50) */
.zc-track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	transform: translateY(-50%);
	background: #dbe7f5;
	border-radius: 3px;
	z-index: 0;
}

.zc-oge {
	position: relative;
	flex: 1 1 0;
	min-width: 230px;
}

/* Bağlayıcı kısa dikey çizgi (çizgiden kutuya, sabit 36px) */
.zc-oge::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 36px;
	background: #cdd9e8;
	z-index: 1;
}
.zc-oge.zc-yon-ust::before { bottom: 50%; }
.zc-oge.zc-yon-alt::before { top: 50%; }

/* Sarmal yarılar layout'u etkilemesin */
.zc-yari { display: contents; }

/* Nokta — çizginin tam üstünde, sabit konum */
.zc-nokta {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2a6df4;
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px #2a6df4, 0 6px 14px rgba(42,109,244,.45);
	z-index: 2;
}

/* İçerik kutusu — mutlak konum; yüksekliği hizayı etkilemez */
.zc-kutu {
	position: absolute;
	left: 0;
	right: 0;
	padding: 0 14px;
	text-align: center;
}
.zc-oge.zc-yon-ust .zc-kutu { bottom: calc(50% + 36px); }
.zc-oge.zc-yon-alt .zc-kutu { top: calc(50% + 36px); }

.zc-yil {
	display: inline-block;
	color: #2a6df4;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .5px;
	margin-bottom: 8px;
}
.zc-baslik {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: 700;
	color: #14223a;
	margin: 0 0 10px;
	line-height: 1.25;
}
.zc-aciklama { color: #516072; font-size: 15px; line-height: 1.6; margin: 0; }

/* --- Giriş animasyonu --- */
.zc-anim { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.zc-anim.gorundu { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.zc-anim { opacity: 1; transform: none; transition: none; }
}

.zc-bos { text-align: center; color: #8a93a0; padding: 40px; }

/* ==========================================================================
   MOBİL: dikey çizelge (çizgi solda) — mutlak konumları sıfırla
   ========================================================================== */
@media (max-width: 820px) {
	.zc-bolum { padding: 50px 18px; }
	.zc-baslik-alan { margin-bottom: 40px; }
	.zc-sarmal { overflow-x: visible; }

	.zc-track { flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; }
	.zc-track::before {
		left: 9px; right: auto; top: 4px; bottom: 4px;
		width: 3px; height: auto; transform: none;
	}

	.zc-oge {
		min-width: 0;
		padding: 0 0 30px 30px;
	}
	.zc-oge::before { display: none; }       /* dikey bağlayıcıyı kapat */

	.zc-nokta { left: 9px; top: 6px; transform: translate(-50%, 0); }

	.zc-yari { display: block; }
	.zc-kutu {
		position: static;
		left: auto; right: auto; top: auto; bottom: auto;
		padding: 0;
		text-align: left;
	}
}