/**
 * Endus3D Tasarım Sistemi
 * Kaynak: Claude Design handoff — Endüs3D.dc.html (2026-09-07)
 * Bu dosya token'ları ve tekrar kullanılan bileşen sınıflarını taşır.
 * Sayfa/şablon özel CSS ayrı dosyalarda kalır.
 */

:root {
	/* Marka */
	--e3d-green: #00543A;
	--e3d-green-deep: #062B27;
	--e3d-teal: #35B0A7;
	--e3d-teal-light: #9FD3C7;
	--e3d-teal-tint-bg: #EAF6F4;
	--e3d-teal-text: #0C544C;
	--e3d-navy: #10275E;
	--e3d-navy-tint-bg: #E6EAF6;

	/* Nötr */
	--e3d-cream: #F7F3EC;
	--e3d-black: #14140F;
	--e3d-muted-1: #6E6A60;
	--e3d-muted-2: #57544C;
	--e3d-muted-3: #8A8478;
	--e3d-border: #E2DCD1;
	--e3d-white: #FFFFFF;
	--e3d-dark-border: #2E2D25;
	--e3d-placeholder-a: #EAE4D8;
	--e3d-placeholder-b: #F1ECE2;

	/* Tipografi */
	--e3d-font-display: 'Marcellus', Georgia, serif;
	--e3d-font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* ---------- Temel ---------- */
body {
	background: var(--e3d-cream);
	font-family: var(--e3d-font-body);
	color: var(--e3d-black);
	font-weight: 300;
}
h1, h2, h3, .e3d-display {
	font-family: var(--e3d-font-display);
	font-weight: 400;
	color: var(--e3d-black);
	margin: 0;
}
a { color: var(--e3d-green); text-decoration: none; }
a:hover { color: var(--e3d-teal); }
* { box-sizing: border-box; }

.e3d-eyebrow {
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--e3d-teal);
}
.e3d-muted { color: var(--e3d-muted-1); font-weight: 300; }

/* ---------- Butonlar ---------- */
.e3d-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	font-size: 14.5px;
	letter-spacing: .06em;
	font-family: var(--e3d-font-body);
	border: 1px solid transparent;
	cursor: pointer;
	background: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.e3d-btn-primary {
	background: var(--e3d-green);
	color: var(--e3d-cream);
}
.e3d-btn-primary:hover { background: #043F2C; color: var(--e3d-cream); }
.e3d-btn-outline {
	border-color: var(--e3d-black);
	color: var(--e3d-black);
}
.e3d-btn-outline:hover { background: var(--e3d-black); color: var(--e3d-cream); }
.e3d-btn-cream {
	background: var(--e3d-cream);
	color: var(--e3d-green);
}
.e3d-btn:disabled,
.e3d-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
}

/* ---------- Placeholder görsel deseni (gerçek fotoğraf gelene kadar) ---------- */
.e3d-ph {
	background-image: repeating-linear-gradient(135deg, var(--e3d-placeholder-a) 0 10px, var(--e3d-placeholder-b) 10px 20px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.e3d-ph-label {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 11px;
	color: var(--e3d-muted-3);
	background: var(--e3d-cream);
	padding: 6px 11px;
}

/* ---------- Kartlar / seçim çipleri (varyasyon seçici burada, S1/S5 JS'i kullanır) ---------- */
.e3d-select-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 18px;
	min-height: 110px;
	cursor: pointer;
	background: var(--e3d-white);
	border: 1px solid var(--e3d-border);
	text-align: left;
	font-family: var(--e3d-font-body);
}
.e3d-select-card:hover { border-color: var(--e3d-muted-3); }
.e3d-select-card.is-active {
	border-color: var(--e3d-green);
	box-shadow: inset 0 0 0 1px var(--e3d-green), 0 6px 18px rgba(0,0,0,.06);
}
.e3d-select-card.is-active.accent-teal {
	border-color: var(--e3d-teal);
	box-shadow: inset 0 0 0 1px var(--e3d-teal), 0 6px 18px rgba(0,0,0,.06);
}
.e3d-select-card .title { font-family: var(--e3d-font-display); font-size: 19px; color: var(--e3d-black); }
.e3d-select-card .desc { font-size: 12.5px; line-height: 1.5; color: var(--e3d-muted-1); font-weight: 300; }
.e3d-select-card .note { font-size: 11.5px; letter-spacing: .1em; color: var(--e3d-green); margin-top: auto; }

.e3d-chip {
	padding: 10px 18px;
	font-size: 13.5px;
	letter-spacing: .03em;
	cursor: pointer;
	background: var(--e3d-white);
	border: 1px solid var(--e3d-border);
	color: var(--e3d-muted-2);
	font-family: var(--e3d-font-body);
}
.e3d-chip.is-active {
	border-color: var(--e3d-green);
	box-shadow: inset 0 0 0 1px var(--e3d-green);
	color: var(--e3d-black);
}
.e3d-chip.is-active.accent-teal {
	border-color: var(--e3d-teal-text);
	box-shadow: inset 0 0 0 1px var(--e3d-teal-text);
	color: var(--e3d-teal-text);
}

.e3d-badge {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 4px 8px;
	display: inline-block;
}
.e3d-badge-green { background: var(--e3d-green); color: #EAF2EC; }
.e3d-badge-teal { background: var(--e3d-teal); color: var(--e3d-green-deep); }
.e3d-badge-navy { background: var(--e3d-navy); color: #E6EAF6; }
.e3d-badge-outline-teal { background: var(--e3d-cream); border: 1px solid var(--e3d-teal); color: var(--e3d-teal-text); }