/*
Theme Name: first-theme
Theme URI: https://example.com/first-theme
Author: Your Name
Author URI: https://example.com
Description: Starter theme for a WordPress site. Customize as needed.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: first-theme
*/

/* Basic reset and starter styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	line-height: 1.5;
	color: #222;
	background: #fff;
}

.site-header, .site-footer {
	padding: 20px;
	background: #f5f5f5;
}

.site-title {
	font-size: 1.25rem;
	font-weight: 700;
}

.site-content {
	max-width: 900px;
	margin: 32px auto;
	padding: 0 16px;
}

.entry-title { font-size: 1.5rem; margin-bottom: 8px; }
.entry-content { margin-bottom: 24px; }

/* --- User provided homepage CSS --- */
body {
	background-color: #0B1120;
	color: #f1f5f9;
}
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #0B1120;
}
::-webkit-scrollbar-thumb {
	background: #334155;
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: #475569;
}

@media (min-width: 768px) {
	.connector-line::before {content: "";
		position: absolute;
		top: 50%;
		width: 3rem; /* Kart ile ana çizgi arasındaki boşluk kadar */
		height: 2px;
		background-color: #334155;
		transition: all 0.4s ease;
	}
	.connector-line::after {content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 6px;
		height: 6px;
		background-color: #334155;
		border-radius: 50%;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 0 0 2px #0B1120;
		z-index: 10;
	}
	/* Anchor central connector markers to the card edge so dots always sit flush */
	.connector-right::before {
		right: 100%;
	}
	.connector-right::after {
		right: 100%; transform: translate(50%, -50%);
	}
	.connector-left::before {
		left: 100%;
	}
	.connector-left::after {
		left: 100%; transform: translate(-50%, -50%);
	}
	.timeline-item:hover .connector-line::before {
		background-color: #3b82f6;
		box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
	}
	.timeline-item:hover .connector-line::after {
		background-color: #60a5fa;
		box-shadow: 0 0 12px rgba(96, 165, 250, 0.8), 0 0 0 2px #0B1120;
		transform: translate(-50%, -50%) scale(1.5);
	}
	.timeline-item:hover .connector-left::after {
		transform: translate(50%, -50%) scale(1.5);
	}

	/* Horizontal connector from central line to card + node/dot */
	.card-with-connector::before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 3rem; /* Kart ile ana çizgi arasındaki boşluk kadar */
		height: 2px;
		background-color: #334155;
		transition: all 0.3s ease;
		z-index: 6;
	}

	.card-with-connector::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #334155;
		box-shadow: 0 0 0 4px #0B1120;
		transition: all 0.3s ease;
		z-index: 7;
	}

	/* Right-side cards: anchor connector to card left edge */
	.connector-right .card-with-connector::before { right: 100%; }
	.connector-right .card-with-connector::after { right: 100%; transform: translate(-50%, -50%); }

	/* Left-side cards: anchor connector to card right edge */
	.connector-left .card-with-connector::before { left: 100%; }
	.connector-left .card-with-connector::after { left: 100%; transform: translate(50%, -50%); }

	/* Hover state colors */
	.timeline-item:hover .card-with-connector::before { background-color: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.45); }
	.timeline-item:hover .card-with-connector::after { background-color: #60a5fa; box-shadow: 0 0 8px rgba(96,165,250,0.5), 0 0 0 4px #0B1120; transform: scale(1.4); }
}

/* Timeline: card body and badge styles (matches provided image) */
.card-body {
	background: linear-gradient(180deg,#fbf7ef 0%, #f9f6f0 100%);
	color: #0b1120;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}
.card-body h3 { color: #0b1120 !important; }
.card-body p, .card-body .text-base { color: #334155 !important; }
.card-body .badge {
	background: #ffffff;
	color: #0b1120;
	border: 1px solid #e6e6e6;
	box-shadow: 0 6px 18px rgba(11,17,32,0.06);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.card-body .inline-flex, .card-body a { color: #0b1120 !important; border-color: transparent; }
.card-body--dark { color: #e6eefb !important; }
.card-body--dark .badge { background: rgba(255,255,255,0.04); color: #cbd5e1; border-color: rgba(255,255,255,0.06); box-shadow: none; }

/* End user-provided CSS */