/* ==========================================================================
   NOKSEL — Ana sayfa
   Onaylı tasarımın (tasarim1) yapısı korunmuştur.
   Renk, font ve yazı boyutları inc/config.php'den gelir.
   ========================================================================== */

/* --- Ortak bölüm ---------------------------------------------------------- */

.section-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 96px 48px;
}

.section-header { text-align: center; margin-bottom: 56px; }
.section-header--left { text-align: left; }

.section-label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--blue);
}

.section-title {
	margin-bottom: 16px;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	color: var(--ink);
}

.section-title--light { color: var(--white); }
.section-label--light { color: var(--green-light); }

.section-line { width: 48px; height: 3px; background: var(--green); margin: 0 auto; }
.section-line--left { margin: 0; }

/* --- HERO ----------------------------------------------------------------- */

#hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	background: var(--ink);
}

/* Arka plan katmanı — video ya da görsel slider */
.hero-media {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero-media[hidden] { display: none; }

.hero-video,
.hero-slider,
.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slide {
	opacity: 0;
	transition: opacity 1.1s ease-in-out;
}

.hero-slide.is-active { opacity: 1; }

/* Tek görselde geçiş yok */
.hero-slider:not(.is-slider) .hero-slide { opacity: 1; transition: none; }

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* Yoğunluk panelden ayarlanır — bkz. hero.php, --hero-veil-* */
	background: linear-gradient(
		100deg,
		rgba(30, 35, 40, var(--hero-veil-1, 0.82)) 40%,
		rgba(30, 35, 40, var(--hero-veil-2, 0.35)) 100%
	);
}

.hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 48px;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	padding: 6px 14px;
	background: rgba(60, 178, 135, 0.15);
	border: 1px solid rgba(60, 178, 135, 0.4);
}

.hero-badge .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	animation: nkPulse 2s infinite;
}

.hero-badge .label {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-tag);
	text-transform: uppercase;
	color: var(--green-light);
}

@keyframes nkPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero-title {
	margin-bottom: 24px;
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: var(--ls-tight);
	color: var(--white);
}

.hero-title .accent { color: var(--green); }

.hero-subtitle {
	max-width: 560px;
	margin-bottom: 40px;
	font-family: var(--font-body);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 300;
	line-height: var(--lh-loose);
	color: rgba(255, 255, 255, 0.72);
}

.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-scroll {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.hero-scroll-line {
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
	animation: nkScrollLine 1.8s ease-in-out infinite;
}

@keyframes nkScrollLine {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- STATS BAR ------------------------------------------------------------ */

#stats { background: var(--navy); }

.stats-inner {
	display: flex;
	align-items: center;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 56px 48px;
}

.stat-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 0 32px;
}

.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { padding-right: 0; }

.stat-num-wrap { display: flex; align-items: baseline; gap: 4px; }

.stat-num {
	font-family: var(--font-display);
	font-size: var(--fs-stat);
	font-weight: 800;
	line-height: 1;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}

.stat-unit {
	font-family: var(--font-display);
	font-size: var(--fs-stat-unit);
	font-weight: 800;
	line-height: 1;
	color: var(--green);
}

.stat-label {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.stat-divider { flex-shrink: 0; width: 1px; height: 60px; background: rgba(255, 255, 255, 0.12); }

/* --- ÜRÜNLER -------------------------------------------------------------- */

#urunler { background: var(--white); }

.products-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 12px;
	height: 640px;
}

.product-card {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var(--navy-deep);
}

.product-card--large { grid-column: 1; grid-row: 1 / 3; }

.product-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(21, 47, 86, 0.92) 0%, rgba(21, 47, 86, 0.32) 60%, transparent 100%);
	transition: background 0.4s ease;
}

.product-card:hover .product-overlay {
	background: linear-gradient(to top, rgba(21, 47, 86, 0.96) 0%, rgba(21, 47, 86, 0.55) 60%, rgba(21, 47, 86, 0.2) 100%);
}

.product-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.product-card:hover img { transform: scale(1.06); }

.product-content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 32px;
}

.product-card--large .product-content { padding: 48px; }

.product-tag {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-size: var(--fs-tag);
	font-weight: 700;
	letter-spacing: var(--ls-tag);
	text-transform: uppercase;
	color: var(--green-light);
}

.product-name {
	margin-bottom: 12px;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.15;
	color: var(--white);
}

.product-card--large .product-name { font-size: var(--fs-h3-lg); }

.product-desc {
	max-height: 0;
	margin-bottom: 20px;
	overflow: hidden;
	opacity: 0;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.65);
	transition: max-height 0.4s ease, opacity 0.4s ease;
}

.product-card:hover .product-desc { max-height: 90px; opacity: 1; }

.product-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	transform: translateY(8px);
	font-family: var(--font-display);
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--green-light);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.product-card:hover .product-link,
.product-card:focus-within .product-link { opacity: 1; transform: translateY(0); }

/* --- ÜRÜN KARTLARI --------------------------------------------------------
   Metin fotoğrafın üzerinde değil altında.

   Hizalama: başlık, açıklama ve künye blokları sabit yüksekliktedir. Böylece
   üç karttaki ayraç çizgileri ve alt satır aynı hizada kalır — başlık iki
   satıra çıksa da bozulmaz.
   -------------------------------------------------------------------------- */

.pcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pcard {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	transition: border-color 0.3s ease;
}

.pcard:hover { border-color: var(--blue-light); }

.pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-alt);
}

.pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.pcard:hover .pcard__media img { transform: scale(1.04); }

/* Sıra numarası — görselin köşesinde, künye hissi */
.pcard__index {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	padding: 8px 14px;
	background: var(--navy);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}

.pcard__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px 24px 22px;
}

/* Sol kenardaki ince aksan — hover'da yükselir */
.pcard__body::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 3px;
	height: 0;
	background: var(--green);
	transition: height 0.35s ease;
}

.pcard:hover .pcard__body::before { height: 100%; }

.pcard__tag {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-size: var(--fs-tag);
	font-weight: 700;
	letter-spacing: var(--ls-tag);
	text-transform: uppercase;
	color: var(--blue);
}

/* İki satırlık sabit yükseklik — kısa başlıkta da hiza korunur */
.pcard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	min-height: 2.5em;
	margin-bottom: 12px;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.pcard__title a { color: var(--ink); text-decoration: none; }
.pcard__title a:hover { color: var(--navy); }

/* Üç satırlık sabit yükseklik */
.pcard__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	min-height: calc(3 * var(--lh-body) * 1em);
	margin-bottom: 20px;
	overflow: hidden;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--muted);
}

/* Teknik künye — etiket solda, değer sağda. Her kartta iki satır. */
.pcard__specs {
	display: grid;
	gap: 9px;
	margin-bottom: 20px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.pcard__specs div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	min-height: 1.4em;
}

/* Veri yoksa satır boş kalır ama yer tutar */
.pcard__specs .is-empty { visibility: hidden; }

.pcard__specs dt {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	color: var(--muted);
	white-space: nowrap;
}

.pcard__specs dd {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: end;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.pcard__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 2.2em;
	margin-top: auto;
}

.pcard__cap {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* Solda veri olmasa bile "Detaylar" her kartta sağda kalır */
.pcard__link { margin-inline-start: auto; }

.pcard__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--blue);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.pcard__link .icon { transition: transform 0.2s ease; }
.pcard:hover .pcard__link { color: var(--navy); }
.pcard:hover .pcard__link .icon { transform: translateX(3px); }

@media (max-width: 900px) {
	.pcards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
	.pcards { grid-template-columns: 1fr; }
	.pcard__media { aspect-ratio: 16 / 9; }
	.pcard__body { padding: 22px 20px 20px; }
	.pcard__desc { margin-bottom: 16px; }
	.pcard__specs { margin-bottom: 16px; }
}

/* --- SEKTÖRLER ------------------------------------------------------------ */

#sektorler { background: var(--surface-alt); }

.sectors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 48px;
}

.sector-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 340px;
	padding: 40px 28px;
	background: var(--white);
	border-bottom: 3px solid transparent;
	text-decoration: none;
	transition: background 0.35s ease, border-color 0.35s ease;
}

.sector-card:hover { background: var(--navy); border-bottom-color: var(--green); }

.sector-icon { margin-bottom: auto; padding-bottom: 48px; color: var(--blue); transition: color 0.35s ease; }
.sector-card:hover .sector-icon { color: var(--green); }

.sector-title {
	margin-bottom: 12px;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
	transition: color 0.35s ease;
}

.sector-card:hover .sector-title { color: var(--white); }

.sector-desc {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--ink-light);
	transition: color 0.35s ease;
}

.sector-card:hover .sector-desc { color: rgba(255, 255, 255, 0.55); }

/* --- RAKAMLAR ------------------------------------------------------------- */

#rakamlar { background: var(--navy); }

.numbers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.number-card { padding: 48px 36px; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.number-card:last-child { border-right: none; }

.number-label {
	margin-bottom: 16px;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: var(--ls-tag);
	text-transform: uppercase;
	color: var(--blue-light);
}

.number-value {
	margin-bottom: 20px;
	font-family: var(--font-display);
	font-size: var(--fs-number);
	font-weight: 800;
	line-height: 1;
	color: var(--white);
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

.number-card:hover .number-value { color: var(--green); }

.number-unit { margin-inline-start: 6px; font-size: 1rem; font-weight: 600; color: var(--green); }

.number-bar {
	width: 40px;
	height: 3px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 0.14);
	transition: width 0.4s ease, background 0.3s ease;
}

.number-card:hover .number-bar { width: 100%; background: var(--green); }

.number-desc {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.42);
}

/* --- TARİHÇE -------------------------------------------------------------- */

#hakkimizda { background: var(--white); }

.timeline-wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.timeline-left { position: sticky; top: 120px; }

.timeline-heading {
	margin: 12px 0 20px;
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	color: var(--ink);
}

.timeline-accent { color: var(--blue); }

.timeline-intro {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: var(--lh-loose);
	color: var(--muted);
}

.timeline-right { display: flex; flex-direction: column; }

.timeline-item {
	position: relative;
	display: flex;
	gap: 36px;
	padding: 40px 0;
	border-bottom: 1px solid var(--line);
}

.timeline-item:last-child { border-bottom: none; }

.tl-year {
	flex-shrink: 0;
	min-width: 120px;
	font-family: var(--font-display);
	font-size: var(--fs-year);
	font-weight: 800;
	line-height: 1;
	color: #eef1f5;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

.timeline-item:hover .tl-year { color: var(--blue-light); }

.tl-title {
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 700;
	color: var(--ink);
}

.tl-desc {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--muted);
}

.timeline-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 138px;
	top: 50px;
	width: 3px;
	height: 0;
	background: var(--green);
	transition: height 0.4s ease;
}

.timeline-item:hover::before { height: calc(100% - 80px); }

/* --- KALİTE --------------------------------------------------------------- */

#kalite { background: var(--navy); }

.quality-inner { max-width: var(--wrap); margin: 0 auto; padding: 96px 48px; }
.quality-header { text-align: center; margin-bottom: 64px; }

.quality-sub {
	max-width: 480px;
	margin: 24px auto 0;
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: var(--lh-loose);
	color: rgba(255, 255, 255, 0.45);
}

.certs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }

.cert-card {
	display: block;
	padding: 40px 20px;
	background: var(--navy-deep);
	text-align: center;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease;
}

.cert-card:hover { background: var(--blue); transform: translateY(-4px); }

.cert-icon { display: inline-block; margin-bottom: 16px; color: var(--blue-light); transition: color 0.3s ease; }
.cert-card:hover .cert-icon { color: var(--green); }

.cert-name {
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	color: var(--white);
}

.cert-desc {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.4);
}

.cert-valid { display: block; margin-top: 8px; font-size: var(--fs-label); color: var(--green); }

/* --- TEKNOLOJİ ------------------------------------------------------------ */

#teknoloji { background: var(--surface-alt); }

.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.tech-intro {
	margin-bottom: 40px;
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: var(--lh-loose);
	color: var(--ink-light);
}

.tech-features { display: flex; flex-direction: column; gap: 32px; }
.tech-feature { display: flex; gap: 20px; align-items: flex-start; }

.tech-feat-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(28, 66, 121, 0.07);
	border: 1px solid rgba(28, 66, 121, 0.2);
	color: var(--blue);
}

.tech-feat-title {
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
}

.tech-feat-desc {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--muted);
}

.tech-img-wrap { position: relative; }

.tech-img {
	display: block;
	width: 100%;
	height: 520px;
	object-fit: cover;
	filter: grayscale(20%);
	transition: filter 0.5s ease;
}

.tech-img-wrap:hover .tech-img { filter: grayscale(0); }

.tech-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, rgba(21, 47, 86, 0.5) 100%);
}

.tech-badge-float {
	position: absolute;
	bottom: 24px;
	inset-inline-start: 24px;
	padding: 16px 20px;
	background: rgba(21, 47, 86, 0.9);
	backdrop-filter: blur(8px);
	border-inline-start: 3px solid var(--green);
}

.tech-badge-num {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-badge);
	font-weight: 800;
	color: var(--white);
}

.tech-badge-lbl {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* --- SÜRDÜRÜLEBİLİRLİK ---------------------------------------------------- */

#surdurulebilirlik { background: var(--white); }

.sust-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.sust-img-side { position: relative; overflow: hidden; }

.sust-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(15%);
	transition: filter 0.6s ease;
}

.sust-img-side:hover .sust-photo { filter: grayscale(0); }

.sust-photo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(21, 47, 86, 0.55) 0%, rgba(21, 47, 86, 0.2) 100%);
}

.sust-stat-box { position: absolute; bottom: 32px; inset-inline-start: 32px; display: flex; gap: 2px; }

.sust-stat {
	padding: 16px 24px;
	background: rgba(21, 47, 86, 0.9);
	backdrop-filter: blur(8px);
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
}

.sust-stat span {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--green);
}

.sust-text-side { display: flex; flex-direction: column; justify-content: center; padding: 56px; }

.sust-lead {
	margin-bottom: 28px;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	color: var(--ink-light);
}

.sust-items { display: grid; grid-template-columns: 1fr 1fr; }

.sust-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sust-item:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 20px; }
.sust-item:nth-child(even) { padding-left: 20px; }
.sust-item:nth-child(3), .sust-item:nth-child(4) { border-bottom: none; }

.sust-item-bar {
	flex-shrink: 0;
	width: 3px;
	background: var(--green-light);
	opacity: 0.4;
	transition: opacity 0.3s ease, background 0.3s ease;
}

.sust-item:hover .sust-item-bar { opacity: 1; background: var(--green); }

.sust-item-title {
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 700;
	color: var(--ink);
}

.sust-item-desc {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--muted);
}

/* --- REFERANS PROJELER ---------------------------------------------------- */

#projeler { background: var(--surface-alt); }

.proj-header-wrap { max-width: var(--wrap); margin: 0 auto; padding: 80px 48px 40px; }

/*
 * Altı eşit kart (3×2). Kartlar arasındaki 3px boşluk özgün tasarımdaki
 * mozaik hissini koruyor. Sıra panelden: Ana Sayfa → Projeler.
 */
.proj-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 320px;
	gap: 3px;
	width: 100%;
}

.proj-item {
	position: relative;
	display: block;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var(--navy-deep);
	text-decoration: none;
	transition: background-size 0.6s ease;
}

.proj-item:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }

.proj-item-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(21, 47, 86, 0.95) 0%, rgba(21, 47, 86, 0.32) 50%, transparent 100%);
	transition: background 0.4s ease;
}

.proj-item:hover .proj-item-overlay {
	background: linear-gradient(to top, rgba(21, 47, 86, 0.98) 0%, rgba(21, 47, 86, 0.55) 70%, rgba(21, 47, 86, 0.12) 100%);
}

.proj-item-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: block; padding: 28px 30px; }

.proj-sector {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-size: var(--fs-tag);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--green-light);
}

.proj-name {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--white);
}


.proj-detail {
	display: block;
	margin-bottom: 20px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.5);
}

.proj-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	transform: translateY(8px);
	font-family: var(--font-display);
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--green-light);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.proj-item:hover .proj-cta,
.proj-item:focus-within .proj-cta { opacity: 1; transform: translateY(0); }

/* --- HABERLER ------------------------------------------------------------- */

#blog { background: var(--surface-alt); }

.blog2-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }

/*
 * "Tümünü Gör" — ana sayfa bölümlerinin ortak bağlantısı.
 * Blog'daki özgün görünüm esas alındı; noksel_tumunu_gor() basıyor.
 */
.see-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--blue);
	font-family: var(--font-display);
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	text-decoration: none;
	color: var(--blue);
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}

.see-all:hover { gap: 10px; color: var(--green); border-color: var(--green); }

/* Koyu zeminli bölümler (Kalite). */
.see-all--light { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.see-all--light:hover { color: var(--green-light); border-color: var(--green-light); }

.see-all-wrap { margin-top: 36px; }
.see-all-wrap--center { display: flex; justify-content: center; margin-top: 48px; }

/* Başlığın sağında duran sürüm (Projeler, Haberler). */
.see-all-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }

@media (max-width: 600px) {
	.see-all-row { flex-direction: column; align-items: flex-start; }
}

.blog2-list { display: flex; flex-direction: column; }

.blog2-item {
	display: grid;
	grid-template-columns: 64px 160px 1fr 40px;
	align-items: center;
	gap: 32px;
	padding: 32px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	transition: background 0.2s ease;
}

.blog2-item:first-child { border-top: 1px solid var(--line); }
.blog2-item:hover { background: rgba(28, 66, 121, 0.03); }

.blog2-num {
	font-family: var(--font-display);
	font-size: var(--fs-index);
	font-weight: 800;
	line-height: 1;
	color: #e8eaed;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

.blog2-item:hover .blog2-num { color: var(--blue-light); }

.blog2-meta { display: flex; flex-direction: column; gap: 6px; }

.blog2-cat {
	font-family: var(--font-body);
	font-size: var(--fs-tag);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
}

.blog2-date { font-family: var(--font-body); font-size: var(--fs-xs); color: #aaa; }

.blog2-title {
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink);
	transition: color 0.2s ease;
}

.blog2-item:hover .blog2-title { color: var(--blue); }

.blog2-excerpt {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: #888;
}

.blog2-arrow { color: #ccc; transition: color 0.2s ease, transform 0.2s ease; }
.blog2-item:hover .blog2-arrow { color: var(--blue); transform: translateX(4px); }

/* --- İLETİŞİM CTA --------------------------------------------------------- */

#iletisim { position: relative; overflow: hidden; background: var(--navy-deep); }

.cta-inner {
	position: relative;
	z-index: 2;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 120px 48px;
	text-align: center;
}

.cta-glow {
	position: absolute;
	top: -200px;
	inset-inline-end: -200px;
	z-index: 1;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(78, 146, 206, 0.22) 0%, transparent 70%);
	pointer-events: none;
}

.cta-title {
	margin: 12px 0 24px;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	color: var(--white);
}

.cta-sub {
	max-width: 520px;
	margin: 0 auto 40px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: var(--lh-loose);
	color: rgba(255, 255, 255, 0.5);
}

.cta-main-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 20px 56px;
	background: transparent;
	border: 2px solid var(--blue-mid);
	font-family: var(--font-display);
	font-size: var(--fs-btn-lg);
	font-weight: 800;
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--white);
	transition: background 0.25s ease, border-color 0.25s ease;
}

.cta-main-btn:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* Butonun altındaki doğrudan iletişim satırı */
.cta-direct {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 28px;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.45);
}

.cta-direct a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.cta-direct a:hover { color: var(--white); }
.cta-direct .icon { color: var(--green); }

/* --- Duyarlılık ----------------------------------------------------------- */

@media (max-width: 900px) {
	.timeline-wrap { grid-template-columns: 1fr; gap: 40px; }
	.timeline-left { position: static; }
	.certs-grid { grid-template-columns: repeat(3, 1fr); }
	.tech-grid { grid-template-columns: 1fr; gap: 48px; }
	.tech-img { height: 360px; }
	.sust-split { grid-template-columns: 1fr; }
	.sust-img-side { height: 320px; }
	.sust-text-side { padding: 48px 24px; }
	.sectors-grid { grid-template-columns: repeat(2, 1fr); }
	.numbers-grid { grid-template-columns: repeat(2, 1fr); }
	.number-card:nth-child(2n) { border-right: none; }
	.number-card:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
	.proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 280px; }
	.blog2-item { grid-template-columns: 48px 1fr 32px; gap: 16px; }
	.blog2-meta { display: none; }
}

@media (max-width: 768px) {
	.section-inner,
	.quality-inner { padding: 64px 20px; }
	.hero-content { padding: 0 20px; }
	.stats-inner { flex-direction: column; gap: 32px; padding: 48px 20px; }
	.stat-item { align-items: center; padding: 0; text-align: center; }
	.stat-divider { width: 80px; height: 1px; }
	.products-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
	.product-card--large { grid-column: 1; grid-row: auto; min-height: 360px; }
	.product-card { min-height: 280px; }
	.product-desc { max-height: 90px; opacity: 1; }
	.product-link { opacity: 1; transform: none; }
	.proj-cta { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.sectors-grid { grid-template-columns: 1fr; }
	.numbers-grid { grid-template-columns: 1fr; }
	.number-card { border-right: none; }
	.certs-grid { grid-template-columns: repeat(2, 1fr); }
	.timeline-item { flex-direction: column; gap: 8px; }
	.timeline-item::before { display: none; }
	.tl-year { min-width: auto; font-size: 2rem; }
	.sust-items { grid-template-columns: 1fr; }
	.sust-item:nth-child(odd) { border-right: none; padding-right: 0; }
	.sust-item:nth-child(even) { padding-left: 0; }
	.sust-item:nth-child(3) { border-bottom: 1px solid var(--line); }
	.blog2-num { display: none; }
	.blog2-item { grid-template-columns: 1fr 32px; }
	.proj-header-wrap { padding: 48px 20px 24px; }
	.cta-inner { padding: 80px 20px; }
}

@media (max-width: 600px) {
	.proj-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
}

/*
 * Ana sayfadaki bölüm başlıkları ortalı (müşteri isteği, 2026-10-06).
 * Başlığın yanında duran "Tümünü Gör" bağlantısı başlığın altına geçiyor.
 */
.see-all-row--merkez { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.see-all-row--merkez > div { text-align: center; }
.see-all-row--merkez .section-line { margin-inline: auto; }

@media (max-width: 600px) {
	.see-all-row--merkez { align-items: center; }
}

/* Tarihçe listesi kendi içinde kayar; alt kenarda içeriğin devamı belli olsun
   diye solma var, sona gelince (is-sonda) kalkıyor. */
.timeline-right--kaydir {
	max-height: 560px;
	overflow-y: auto;
	padding-inline-end: 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

.timeline-right--kaydir.is-sonda {
	-webkit-mask-image: none;
	mask-image: none;
}

.timeline-right--kaydir:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.timeline-right--kaydir::-webkit-scrollbar { width: 6px; }
.timeline-right--kaydir::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.timeline-right--kaydir::-webkit-scrollbar-thumb:hover { background: var(--blue-light); }
.timeline-right--kaydir .timeline-item:first-child { padding-top: 0; }

@media (max-width: 900px) {
	.timeline-right--kaydir { max-height: 440px; padding-inline-end: 12px; }
}