/* =========================================================
   Boğaz Turu Zaman Tüneli — timeline.css
   Renkleri değiştirmek için sadece aşağıdaki değişkenleri düzenle.
   Markaya uydurmak için (Yeşil Kubbe):
     --bt-accent:#0a7845;  --bt-accent-2:#ed5c21;
   ========================================================= */

.bt-timeline {
	--bt-accent:   #0e7fb8;   /* ana renk — Boğaz mavisi */
	--bt-accent-2: #14b8a6;   /* ikincil — teal (çizgi gradyanı) */
	--bt-ink:      #1f2a37;   /* başlık/metin */
	--bt-muted:    #6b7280;   /* ikincil metin */
	--bt-card-bg:  #ffffff;
	--bt-line:     #e5e7eb;   /* pasif çizgi/kenar */
	--bt-radius:   16px;
	--bt-node:     46px;      /* daire boyutu */
	--bt-rail:     24px;      /* çizginin soldan konumu */
	--bt-gap:      26px;      /* duraklar arası boşluk */

	position: relative;
	max-width: 760px;
	margin: 0;
	padding: 8px 10px;
	font-family: inherit;
	color: var(--bt-ink);
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.bt-timeline * { box-sizing: border-box; }

/* Başlık */
.bt-head { text-align: left; margin: 0 0 30px; padding: 0 6px; }
.bt-title {
	margin: 0;
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.bt-subtitle { margin: 8px 0 0; color: var(--bt-muted); font-size: 15px; line-height: 1.5; }

/* Raylar */
.bt-track { position: relative; }

.bt-line {
	position: absolute;
	top: calc(var(--bt-node) / 2);
	bottom: calc(var(--bt-node) / 2);
	left: var(--bt-rail);
	width: 3px;
	background: var(--bt-line);
	border-radius: 3px;
	transform: translateX(-50%);
}
.bt-line-fill {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: var(--bt-fill, 0px);
	background: linear-gradient(180deg, var(--bt-accent), var(--bt-accent-2));
	border-radius: 3px;
	transition: height 0.25s ease-out;
	will-change: height;
}

/* Sepetli motor — çizginin dolan ucunda ilerler, duraklara "yanaşır" */
.bt-vehicle {
	position: absolute;
	left: 50%;
	top: var(--bt-fill, 0px);
	transform: translate(-50%, -50%);
	width: var(--bt-node);
	height: var(--bt-node);
	border-radius: 50%;
	background: var(--bt-card-bg);
	border: 3px solid var(--bt-accent);
	display: grid; place-items: center;
	color: var(--bt-accent);
	box-shadow: 0 5px 14px -5px rgba(0, 0, 0, 0.3);
	box-shadow: 0 5px 14px -5px color-mix(in srgb, var(--bt-accent) 55%, rgba(0, 0, 0, 0.45));
	transition: top 0.25s ease-out;
	pointer-events: none;
	z-index: 3;
}
.bt-vehicle svg { width: 34px; height: auto; display: block; }

/* Liste */
.bt-list { list-style: none; margin: 0; padding: 0; position: relative; }

.bt-item {
	position: relative;
	padding: 0 0 var(--bt-gap) calc(var(--bt-rail) + var(--bt-node) / 2 + 16px);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
	transition-delay: var(--bt-delay, 0ms);
}
.bt-item:last-child { padding-bottom: 0; }
.bt-item.is-visible { opacity: 1; transform: none; }

/* Düğüm (daire) */
.bt-node {
	position: absolute;
	left: var(--bt-rail);
	top: 0;
	transform: translateX(-50%);
	width: var(--bt-node);
	height: var(--bt-node);
	border-radius: 50%;
	background: var(--bt-card-bg);
	border: 3px solid var(--bt-line);
	display: grid; place-items: center;
	z-index: 2;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.bt-num { font-size: 14px; font-weight: 800; color: var(--bt-muted); transition: color 0.3s ease; }
.bt-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--bt-line); transition: background 0.3s ease; }

.bt-item.is-active .bt-node {
	border-color: var(--bt-accent);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--bt-accent) 14%, transparent);
	transform: translateX(-50%) scale(1.04);
}
.bt-item.is-active .bt-num { color: var(--bt-accent); }
.bt-item.is-active .bt-dot { background: var(--bt-accent); }

/* Kart */
.bt-card {
	background: var(--bt-card-bg);
	border: 1px solid var(--bt-line);
	border-radius: var(--bt-radius);
	padding: 14px 18px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
.bt-item.is-active .bt-card {
	border-color: color-mix(in srgb, var(--bt-accent) 35%, var(--bt-line));
	box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--bt-accent) 60%, transparent);
}
.bt-name { display: block; font-weight: 700; font-size: clamp(15px, 2.2vw, 17px); line-height: 1.35; }
.bt-desc { display: block; margin-top: 5px; color: var(--bt-muted); font-size: 14px; line-height: 1.5; }

/* Hover (yalnızca fare destekli cihazlar) */
@media (hover: hover) {
	.bt-card:hover { transform: translateY(-3px); }
}

/* Daha geniş ekranlarda biraz daha ferah */
@media (min-width: 600px) {
	.bt-timeline { --bt-rail: 28px; --bt-node: 50px; }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
	.bt-item { opacity: 1; transform: none; transition: none; }
	.bt-line-fill, .bt-vehicle, .bt-node, .bt-card { transition: none; }
	.bt-vehicle { display: none; }
}