/* ==========================================================================
   VARYON YAPI — Large-Scale Construction & Engineering Presentation
   Palette:
   --v-base-dark:      #171B1E;
   --v-concrete-gray:  #555E63;
   --v-light-concrete: #D7D9D6;
   --v-broken-white:   #F4F3EF;
   --v-orange:         #D87336; (Controlled accent only for lines, active states, numbers)
   --v-orange-hover:   #E58348;
   --v-steel:          #8D969B;
   --v-card-bg:        #1F2428;
   --v-card-bg-dark:   #131719;
   --v-border:         #2D353A;
   --v-border-subtle:  #22272B;
   ========================================================================== */

:root {
	--v-base-dark: #171B1E;
	--v-concrete-gray: #555E63;
	--v-light-concrete: #D7D9D6;
	--v-broken-white: #F4F3EF;
	--v-orange: #D87336;
	--v-orange-hover: #E58348;
	--v-steel: #8D969B;
	--v-card-bg: #1F2428;
	--v-card-bg-dark: #121517;
	--v-border: #2E363C;
	--v-border-subtle: #20262A;
	--v-font-head: 'Syne', 'Space Grotesk', sans-serif;
	--v-font-mono: 'Space Grotesk', monospace;
	--v-font-body: 'Plus Jakarta Sans', sans-serif;
}

/* Reset & Global Base */
.page-template-page-demo-varyon-yapi {
	margin: 0;
	padding: 0;
	background-color: var(--v-base-dark);
	color: var(--v-light-concrete);
	font-family: var(--v-font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.page-template-page-demo-varyon-yapi *,
.page-template-page-demo-varyon-yapi *::before,
.page-template-page-demo-varyon-yapi *::after {
	box-sizing: border-box;
}

.varyon-wrapper {
	width: 100%;
	min-height: 100vh;
	background-color: var(--v-base-dark);
	color: var(--v-light-concrete);
	overflow-x: hidden;
}

.varyon-container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 28px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--v-font-head);
	color: var(--v-broken-white);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 16px 0;
}

p {
	margin: 0 0 16px 0;
	color: #A6AFB5;
}

a {
	text-decoration: none;
	color: inherit;
	transition: all 0.25s ease;
}

/* Section Common */
.varyon-section {
	padding: 100px 0;
	border-bottom: 1px solid var(--v-border-subtle);
	position: relative;
}

.varyon-section-dark {
	background-color: var(--v-card-bg-dark);
}

.varyon-sec-head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 55px auto;
}

.v-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	background: rgba(216, 115, 54, 0.1);
	border: 1px solid rgba(216, 115, 54, 0.35);
	color: var(--v-orange);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-family: var(--v-font-mono);
}

.v-sec-title {
	font-size: 38px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--v-broken-white);
	margin-bottom: 14px;
}

.v-sec-sub {
	font-size: 15px;
	color: var(--v-steel);
	line-height: 1.7;
	margin: 0;
}

/* Buttons */
.btn-varyon-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: var(--v-orange);
	color: #FFF;
	padding: 14px 28px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid var(--v-orange);
	cursor: pointer;
	transition: all 0.25s ease;
	font-family: var(--v-font-mono);
}

.btn-varyon-primary:hover {
	background-color: var(--v-orange-hover);
	border-color: var(--v-orange-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(216, 115, 54, 0.3);
}

.btn-varyon-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: transparent;
	color: var(--v-broken-white);
	padding: 14px 28px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid var(--v-border);
	cursor: pointer;
	transition: all 0.25s ease;
	font-family: var(--v-font-mono);
}

.btn-varyon-ghost:hover {
	background-color: rgba(215, 217, 214, 0.08);
	border-color: var(--v-light-concrete);
	color: #FFF;
}

/* 1. TOPBAR */
.varyon-topbar {
	background-color: #0F1214;
	border-bottom: 1px solid var(--v-border-subtle);
	padding: 9px 0;
	font-size: 12px;
	font-family: var(--v-font-mono);
}

.varyon-topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.varyon-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--v-steel);
}

.v-pulse-dot {
	width: 7px;
	height: 7px;
	background-color: var(--v-orange);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--v-orange);
	animation: pulseOrange 2s infinite;
}

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

.v-top-tag {
	color: var(--v-broken-white);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.v-top-divider {
	color: var(--v-border);
}

.v-top-stat strong {
	color: var(--v-light-concrete);
}

.varyon-topbar-right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.v-top-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--v-orange);
	font-weight: 600;
}

.v-top-link:hover {
	color: var(--v-broken-white);
}

.v-top-coord {
	color: var(--v-concrete-gray);
	font-size: 11px;
}

/* 2. HEADER */
.varyon-header {
	background-color: rgba(23, 27, 30, 0.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--v-border);
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 16px 0;
}

.varyon-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.varyon-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.varyon-logo-text {
	display: flex;
	flex-direction: column;
}

.varyon-logo-main {
	font-family: var(--v-font-head);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--v-broken-white);
	line-height: 1;
}

.varyon-logo-sub {
	font-family: var(--v-font-mono);
	font-size: 9px;
	letter-spacing: 0.22em;
	color: var(--v-steel);
	margin-top: 4px;
}

.varyon-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.varyon-nav-link {
	font-size: 13.5px;
	font-weight: 600;
	color: #B4BCBF;
	letter-spacing: 0.02em;
}

.varyon-nav-link:hover {
	color: var(--v-orange);
}

/* 3. HERO SLIDER */
.varyon-hero-slider {
	position: relative;
	width: 100%;
	height: 760px;
	background-color: var(--v-base-dark);
	overflow: hidden;
}

.varyon-slider-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.varyon-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
	display: flex;
	align-items: center;
}

.varyon-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.varyon-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.04);
	transition: transform 6s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.varyon-slide.active .varyon-slide-bg {
	transform: scale(1);
}

.varyon-blueprint-grid {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(215, 217, 214, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(215, 217, 214, 0.04) 1px, transparent 1px);
	background-size: 50px 50px;
	pointer-events: none;
	z-index: 2;
}

.varyon-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(23, 27, 30, 0.96) 0%, rgba(23, 27, 30, 0.82) 45%, rgba(23, 27, 30, 0.4) 100%);
	z-index: 3;
}

.varyon-slide-content {
	position: relative;
	z-index: 5;
	max-width: 720px;
}

.v-slide-tag {
	display: inline-block;
	font-family: var(--v-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--v-orange);
	background: rgba(216, 115, 54, 0.12);
	padding: 6px 12px;
	border: 1px solid rgba(216, 115, 54, 0.3);
	margin-bottom: 20px;
}

.v-slide-title {
	font-size: 54px;
	line-height: 1.1;
	font-weight: 800;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.v-accent-text {
	color: var(--v-orange);
	display: block;
}

.v-slide-desc {
	font-size: 16.5px;
	line-height: 1.7;
	color: #CBD3D8;
	margin-bottom: 34px;
}

.v-slide-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.varyon-slider-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: linear-gradient(180deg, transparent 0%, rgba(15, 18, 20, 0.95) 100%);
	padding: 20px 0 28px 0;
}

.v-slider-control-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--v-border);
	padding-top: 18px;
}

.v-slide-steps {
	display: flex;
	gap: 20px;
}

.v-step-btn {
	background: transparent;
	border: none;
	color: var(--v-concrete-gray);
	font-size: 12.5px;
	font-family: var(--v-font-mono);
	font-weight: 700;
	padding: 6px 10px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.25s ease;
}

.v-step-num {
	color: var(--v-orange);
	margin-right: 6px;
}

.v-step-btn.active, .v-step-btn:hover {
	color: var(--v-broken-white);
	border-bottom-color: var(--v-orange);
}

.v-slider-arrows {
	display: flex;
	align-items: center;
	gap: 12px;
}

.v-arr-btn {
	width: 40px;
	height: 40px;
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	color: var(--v-broken-white);
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.v-arr-btn:hover {
	background: var(--v-orange);
	border-color: var(--v-orange);
	color: #FFF;
}

.v-progress-counter {
	font-family: var(--v-font-mono);
	font-size: 12px;
	color: var(--v-steel);
}

/* 4. PROJEYİ İNŞA ET (Build Experience) */
.build-experience-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 30px;
}

.build-stages-sidebar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 600px;
	overflow-y: auto;
	padding-right: 8px;
}

.build-stage-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 14px 16px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.build-stage-item.active {
	border-color: var(--v-orange);
	background: rgba(216, 115, 54, 0.08);
}

.bs-num {
	font-family: var(--v-font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--v-orange);
}

.bs-text strong {
	display: block;
	font-size: 13.5px;
	color: var(--v-broken-white);
	margin-bottom: 2px;
}

.bs-text span {
	font-size: 11.5px;
	color: var(--v-steel);
	line-height: 1.4;
	display: block;
}

.build-visual-stage {
	background: var(--v-card-bg-dark);
	border: 1px solid var(--v-border);
	padding: 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.build-stage-indicator-card {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 24px;
	margin-bottom: 24px;
}

.stage-tag {
	display: inline-block;
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	letter-spacing: 0.15em;
	margin-bottom: 8px;
}

.stage-name {
	font-size: 22px;
	color: var(--v-broken-white);
	margin-bottom: 10px;
}

.stage-info {
	font-size: 14px;
	color: #B2B8BC;
	line-height: 1.6;
	margin-bottom: 20px;
}

.stage-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	border-top: 1px solid var(--v-border-subtle);
	padding-top: 16px;
}

.sm-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sm-lbl {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-steel);
}

.sm-val {
	font-size: 13.5px;
	color: var(--v-light-concrete);
}

/* Building Canvas Simulation */
.building-canvas {
	position: relative;
	height: 280px;
	background: #0E1113;
	border: 1px solid var(--v-border);
	overflow: hidden;
	margin-bottom: 24px;
	background-image: 
		linear-gradient(rgba(215, 217, 214, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(215, 217, 214, 0.05) 1px, transparent 1px);
	background-size: 30px 30px;
}

.b-layer {
	position: absolute;
	inset: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
	opacity: 0;
	transform: translateY(20px);
}

.b-layer.active {
	opacity: 1;
	transform: translateY(0);
}

.b-layer-ground {
	background: linear-gradient(180deg, transparent 75%, #3B4247 100%);
}

.b-layer-piles {
	background: repeating-linear-gradient(90deg, #555E63 0, #555E63 4px, transparent 4px, transparent 40px);
	height: 40px;
	top: auto;
	bottom: 10px;
}

.b-layer-foundation {
	background: #555E63;
	height: 25px;
	top: auto;
	bottom: 45px;
	left: 20%;
	right: 20%;
	border: 1px solid #8D969B;
}

.b-layer-structure {
	border: 2px solid var(--v-orange);
	top: 50px;
	bottom: 70px;
	left: 25%;
	right: 25%;
	background: repeating-linear-gradient(180deg, transparent 0, transparent 30px, rgba(216, 115, 54, 0.2) 30px, rgba(216, 115, 54, 0.2) 32px);
}

.b-layer-facade {
	background: rgba(141, 150, 155, 0.4);
	border: 1px solid var(--v-broken-white);
	top: 50px;
	bottom: 70px;
	left: 25%;
	right: 25%;
}

.b-layer-mep {
	background: repeating-linear-gradient(90deg, transparent 0, transparent 35px, rgba(72, 187, 120, 0.3) 35px, rgba(72, 187, 120, 0.3) 37px);
	top: 50px;
	bottom: 70px;
	left: 25%;
	right: 25%;
}

.b-layer-interior {
	background: rgba(244, 243, 239, 0.2);
	top: 50px;
	bottom: 70px;
	left: 25%;
	right: 25%;
}

.b-layer-landscape {
	background: linear-gradient(90deg, #2D4A36 0%, transparent 20%, transparent 80%, #2D4A36 100%);
	height: 20px;
	top: auto;
	bottom: 25px;
}

.stage-nav-controller {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.stage-step-dots {
	display: flex;
	gap: 6px;
}

.s-dot {
	width: 8px;
	height: 8px;
	background: var(--v-concrete-gray);
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.2s ease;
}

.s-dot.active {
	background: var(--v-orange);
	transform: scale(1.3);
}

/* 5. İNTERAKTİF YAPI KESİTİ */
.section-cut-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 30px;
}

.cut-system-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cut-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 16px 20px;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cut-btn.active {
	border-color: var(--v-orange);
	background: rgba(216, 115, 54, 0.1);
}

.cut-code {
	display: block;
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	margin-bottom: 2px;
}

.cut-title {
	display: block;
	font-size: 15px;
	color: var(--v-broken-white);
}

.cut-sub {
	display: block;
	font-size: 12px;
	color: var(--v-steel);
	margin-top: 2px;
}

.cut-btn-arrow {
	font-family: var(--v-font-mono);
	color: var(--v-steel);
	font-size: 16px;
}

.cut-btn.active .cut-btn-arrow {
	color: var(--v-orange);
	transform: translateX(4px);
}

.cut-display-panel {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 36px;
}

.cb-tag {
	display: inline-block;
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	letter-spacing: 0.15em;
	margin-bottom: 10px;
}

.cb-title {
	font-size: 22px;
	color: var(--v-broken-white);
	margin-bottom: 12px;
}

.cb-desc {
	font-size: 14.5px;
	color: #B5BDC2;
	line-height: 1.6;
	margin-bottom: 26px;
}

.cb-specs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	border-top: 1px solid var(--v-border-subtle);
	padding-top: 20px;
	margin-bottom: 26px;
}

.cb-spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cb-spec .lbl {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-steel);
}

.cb-spec .val {
	font-size: 13.5px;
	color: var(--v-light-concrete);
}

.cb-visual-schema {
	background: #111416;
	border: 1px solid var(--v-border);
	padding: 24px;
	text-align: center;
	font-family: var(--v-font-mono);
	font-size: 11.5px;
	color: var(--v-steel);
}

.schema-core-box {
	background: rgba(216, 115, 54, 0.15);
	border: 1px dashed var(--v-orange);
	color: var(--v-orange);
	padding: 12px;
	margin-bottom: 12px;
	font-weight: 700;
}

.schema-perimeter-lines {
	display: flex;
	justify-content: space-around;
	border-top: 1px solid var(--v-border);
	padding-top: 10px;
}

/* 6. PROJECT REEL */
.project-reel-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.project-pafta {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	overflow: hidden;
	transition: all 0.3s ease;
}

.project-pafta:hover {
	border-color: var(--v-steel);
}

.pafta-image {
	min-height: 380px;
	background-size: cover;
	background-position: center;
	position: relative;
	border-right: 1px solid var(--v-border);
}

.p-code {
	position: absolute;
	top: 20px;
	left: 20px;
	font-family: var(--v-font-mono);
	font-size: 16px;
	font-weight: 800;
	color: #FFF;
	background: var(--v-base-dark);
	padding: 6px 14px;
	border: 1px solid var(--v-border);
}

.pafta-body {
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.p-cat {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	letter-spacing: 0.12em;
	margin-bottom: 8px;
}

.p-title {
	font-size: 26px;
	color: var(--v-broken-white);
	margin-bottom: 12px;
}

.p-desc {
	font-size: 14.5px;
	color: #B5BDC2;
	line-height: 1.6;
	margin-bottom: 24px;
}

.p-meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid var(--v-border-subtle);
	padding-top: 18px;
	margin-bottom: 24px;
	font-size: 12.5px;
}

.p-meta span {
	color: var(--v-steel);
}

.p-meta strong {
	color: var(--v-light-concrete);
}

/* 7. CASE STUDY MODAL */
.varyon-modal {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
}

.varyon-modal.open {
	display: flex;
}

.v-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	backdrop-filter: blur(8px);
}

.v-modal-dialog {
	position: relative;
	z-index: 10;
	background: var(--v-card-bg);
	border: 1px solid var(--v-orange);
	padding: 40px;
	max-width: 800px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
}

.v-modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	background: transparent;
	border: none;
	color: var(--v-steel);
	font-size: 22px;
	cursor: pointer;
}

.cs-code {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	letter-spacing: 0.15em;
}

.cs-title {
	font-size: 24px;
	color: var(--v-broken-white);
	margin-top: 4px;
	margin-bottom: 20px;
}

.cs-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--v-border);
	padding-bottom: 12px;
}

.cs-tab {
	background: var(--v-card-bg-dark);
	border: 1px solid var(--v-border);
	color: var(--v-steel);
	padding: 8px 14px;
	font-family: var(--v-font-mono);
	font-size: 11.5px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cs-tab.active {
	border-color: var(--v-orange);
	background: var(--v-orange);
	color: #FFF;
}

.cs-tab-pane {
	display: none;
}

.cs-tab-pane.active {
	display: block;
}

.cs-tab-pane h4 {
	font-size: 17px;
	color: var(--v-broken-white);
	margin-bottom: 8px;
}

.cs-tab-pane p {
	font-size: 14px;
	color: #CBD3D8;
	line-height: 1.6;
	margin-bottom: 16px;
}

.cs-img-box {
	height: 260px;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--v-border);
}

/* 8. ŞANTİYE NABZI */
.pulse-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.pulse-model-view {
	border: 1px solid var(--v-border);
	background: var(--v-card-bg);
}

.pulse-building-visual {
	height: 100%;
	min-height: 380px;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 24px;
}

.pulse-overlay-data {
	background: rgba(23, 27, 30, 0.9);
	border: 1px solid var(--v-border);
	padding: 16px;
	width: 100%;
}

.p-badge {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	letter-spacing: 0.1em;
	display: block;
	margin-bottom: 4px;
}

.p-coord {
	font-size: 12.5px;
	color: var(--v-light-concrete);
}

.pulse-metrics-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pulse-metric-card {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 18px 22px;
}

.pm-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.pm-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--v-broken-white);
}

.pm-percent {
	font-family: var(--v-font-mono);
	font-size: 15px;
	color: var(--v-orange);
}

.pm-bar {
	height: 6px;
	background: #111416;
	border: 1px solid var(--v-border);
	overflow: hidden;
	margin-bottom: 8px;
}

.pm-fill {
	height: 100%;
	background: var(--v-orange);
}

.pm-status {
	font-size: 11.5px;
	color: var(--v-steel);
}

/* 9. BUGÜN SAHADA */
.field-timeline-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.f-time-card {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 24px;
	position: relative;
	transition: all 0.2s ease;
}

.f-time-card.active, .f-time-card:hover {
	border-color: var(--v-orange);
	background: rgba(216, 115, 54, 0.06);
}

.ft-time {
	font-family: var(--v-font-mono);
	font-size: 16px;
	font-weight: 800;
	color: var(--v-orange);
	margin-bottom: 12px;
}

.ft-title {
	display: block;
	font-size: 14.5px;
	color: var(--v-broken-white);
	margin-bottom: 8px;
}

.ft-desc {
	font-size: 12.5px;
	color: var(--v-steel);
	line-height: 1.5;
	margin: 0;
}

/* 10. MALZEME LAB */
.material-lab-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 30px;
}

.mat-selector-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mat-btn {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 16px 20px;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
}

.mat-btn strong {
	display: block;
	font-size: 15px;
	color: var(--v-broken-white);
}

.mat-btn span {
	display: block;
	font-size: 12px;
	color: var(--v-steel);
	margin-top: 2px;
}

.mat-btn.active {
	border-color: var(--v-orange);
	background: rgba(216, 115, 54, 0.12);
}

.mat-preview-box {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mat-bg {
	height: 240px;
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--v-border);
}

.mat-info-card {
	padding: 30px;
}

.m-code {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	letter-spacing: 0.15em;
	display: block;
	margin-bottom: 8px;
}

.m-title {
	font-size: 20px;
	color: var(--v-broken-white);
	margin-bottom: 10px;
}

.m-desc {
	font-size: 14px;
	color: #B5BDC2;
	line-height: 1.6;
	margin-bottom: 20px;
}

.m-specs {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid var(--v-border-subtle);
	padding-top: 16px;
	font-size: 12.5px;
}

.m-specs span {
	color: var(--v-steel);
}

.m-specs strong {
	color: var(--v-light-concrete);
}

/* 11. BÜTÜNLEŞİK MÜHENDİSLİK */
.engineering-schema-box {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 40px;
}

.schema-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.schema-item {
	background: var(--v-base-dark);
	border: 1px solid var(--v-border);
	padding: 24px;
	position: relative;
	border-top: 3px solid var(--v-orange);
}

.s-icon {
	font-family: var(--v-font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--v-orange);
	margin-bottom: 10px;
}

.s-title {
	display: block;
	font-size: 15px;
	color: var(--v-broken-white);
	margin-bottom: 8px;
}

.s-text {
	font-size: 13px;
	color: #A6AFB5;
	line-height: 1.5;
	margin: 0;
}

/* 12. PROJECT CONTROL */
.control-console-box {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 36px;
}

.console-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.c-nav-btn {
	background: var(--v-card-bg-dark);
	border: 1px solid var(--v-border);
	color: var(--v-steel);
	padding: 10px 18px;
	font-family: var(--v-font-mono);
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.c-nav-btn.active {
	border-color: var(--v-orange);
	background: var(--v-orange);
	color: #FFF;
}

.console-body {
	background: var(--v-base-dark);
	border: 1px solid var(--v-border);
	padding: 26px;
}

.c-status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.cs-state {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cs-indicator.green {
	width: 8px;
	height: 8px;
	background: #48BB78;
	border-radius: 50%;
	box-shadow: 0 0 8px #48BB78;
}

.cs-state strong {
	font-size: 14.5px;
	color: var(--v-broken-white);
}

.cs-tag {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-orange);
	background: rgba(216, 115, 54, 0.12);
	padding: 4px 10px;
	border: 1px solid rgba(216, 115, 54, 0.3);
}

.c-desc {
	font-size: 14px;
	color: #B5BDC2;
	line-height: 1.6;
	margin-bottom: 20px;
}

.c-params {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	border-top: 1px solid var(--v-border-subtle);
	padding-top: 16px;
}

.c-param {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.p-lbl {
	font-family: var(--v-font-mono);
	font-size: 11px;
	color: var(--v-steel);
}

.p-val {
	font-size: 13.5px;
	color: var(--v-light-concrete);
}

/* 13. DRONE SECTION */
.varyon-drone-section {
	position: relative;
	padding: 140px 0;
	background: #0E1113;
	overflow: hidden;
}

.drone-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.45;
}

.drone-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--v-base-dark) 0%, transparent 50%, var(--v-base-dark) 100%);
}

.drone-content {
	position: relative;
	z-index: 5;
	max-width: 700px;
}

.drone-title {
	font-size: 42px;
	line-height: 1.2;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.drone-desc {
	font-size: 16px;
	color: #CBD3D8;
	line-height: 1.7;
}

/* 14. EKİP & DİSİPLİNLER */
.disciplines-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.disc-card {
	background: var(--v-card-bg);
	border: 1px solid var(--v-border);
	padding: 28px;
}

.d-num {
	font-family: var(--v-font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--v-orange);
	display: block;
	margin-bottom: 8px;
}

.d-title {
	font-size: 16px;
	color: var(--v-broken-white);
	display: block;
	margin-bottom: 8px;
}

.d-text {
	font-size: 13px;
	color: var(--v-steel);
	line-height: 1.5;
	margin: 0;
}

/* 15. FINAL SECTION */
.varyon-final-section {
	position: relative;
	padding: 120px 0;
	background: #0F1214;
	text-align: center;
}

.final-bg-blueprint {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(216, 115, 54, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(216, 115, 54, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.final-content-box {
	position: relative;
	z-index: 5;
	max-width: 760px;
	margin: 0 auto;
}

.final-title {
	font-size: 50px;
	line-height: 1.15;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.final-desc {
	font-size: 16px;
	color: #CBD3D8;
	line-height: 1.7;
	margin-bottom: 34px;
}

.final-actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* 16. FOOTER */
.varyon-footer {
	background: #0B0E10;
	border-top: 1px solid var(--v-border);
	padding: 70px 0 30px 0;
	font-size: 13.5px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
	gap: 40px;
	margin-bottom: 50px;
}

.footer-desc {
	font-size: 13px;
	color: var(--v-steel);
	margin-top: 14px;
	max-width: 320px;
}

.footer-heading {
	font-size: 14.5px;
	color: var(--v-broken-white);
	margin-bottom: 18px;
	font-family: var(--v-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 10px;
}

.footer-links a {
	color: var(--v-steel);
}

.footer-links a:hover {
	color: var(--v-orange);
}

.f-addr, .f-tel, .f-mail {
	margin-bottom: 8px;
	color: var(--v-steel);
}

.footer-bottom {
	border-top: 1px solid var(--v-border-subtle);
	padding-top: 24px;
	text-align: center;
	font-size: 12px;
	color: var(--v-concrete-gray);
	font-family: var(--v-font-mono);
}

/* Responsive */
@media (max-width: 1024px) {
	.varyon-nav {
		display: none;
	}
	.build-experience-grid,
	.section-cut-grid,
	.pulse-grid,
	.material-lab-grid {
		grid-template-columns: 1fr;
	}
	.project-pafta {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.varyon-topbar {
		display: none;
	}
	.v-slide-title {
		font-size: 36px;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.v-slide-steps {
		display: none;
	}
}