/* Harvekon · Motion ana sayfa · esnek kurallar, içerik eşitlemesi ve teklif
   formu yerleri (16 Ekim 2026);
   denetim raporundaki düzeltmeler şablonlara göre (17 Ekim 2026) */

/* Harvekon · hareketli ana sayfa (tuval sürümü) */
:root {
	color-scheme: light;
}

[hidden] {
	display: none !important;
}

/* Harvekon · hareketli ana sayfa
   Düzen: teknik çizim paftası. Koyu grafit bantlarda logo mavisi ızgara, açık
   bölümlerde çizim kâğıdı;
   içerik 1200 px kapta, bölümler kaydırdıkça sahne sahne açılır. Tek tema:
   marka kendi açık/koyu bant düzenini taşır. */
:root {

	/* renk (Harvekon tasarım sistemi) */
	--mavi: #009ee3;          /* logo mavisi */
	--koyu-mavi: #006e9e;
	--grafit: #232525;
	--gece: #1a1c1c;          /* grafitin derin tonu: gölge ve bant geçişleri */
	--koyu-gri: #4a4d4d;
	--acik-gri: #c5c6c6;
	--kagit: #ececec;         /* çok açık gri */
	--beyaz: #fff;
	--hata: #b42318;

	/* yazı */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
	--font-mono: ui-monospace, "SF Mono", menlo, consolas, "Liberation Mono", monospace;

	/* ölçü */
	--genis: 1200px;
	--kenar: 24px;
	--b1: 4px;
	--b2: 8px;
	--b3: 12px;
	--b4: 16px;
	--b5: 24px;
	--b6: 32px;
	--b7: 48px;
	--b8: 64px;
	--b9: 96px;
	--kose-kucuk: 2px;
	--kose-orta: 4px;
	--kontrol: 48px;
	--kontrol-kucuk: 40px;
	--ust-boy: 129px;

	/* hareket */
	--egri: cubic-bezier(0.2, 0.7, 0.2, 1);
	--egri-yumusak: cubic-bezier(0.16, 1, 0.3, 1);
	--egri-iki: cubic-bezier(0.65, 0, 0.35, 1);

	/* açık bant anlamları (varsayılan) */
	--zemin: var(--beyaz);
	--yuzey: var(--beyaz);
	--metin: var(--koyu-gri);
	--baslik: var(--grafit);
	--baglanti: var(--koyu-mavi);
	--vurgu: var(--mavi);
	--cizgi: var(--acik-gri);
	--kontrol-kenari: var(--koyu-gri);
	--eylem: var(--koyu-mavi);
	--eylem-yazi: var(--beyaz);
	--eylem-vurgu: var(--grafit);
	--eylem-vurgu-yazi: var(--beyaz);
	--odak: var(--koyu-mavi);

	color-scheme: light;
}

@media (max-width: 599px) {

	:root {
		--kenar: 16px;
	}
}

/* koyu bant: grafit zemin, beyaz başlık, logo mavisi eylem (yazı grafit) */
.bant-koyu {
	--zemin: var(--grafit);
	--yuzey: var(--grafit);
	--metin: var(--acik-gri);
	--baslik: var(--beyaz);
	--baglanti: var(--mavi);
	--vurgu: var(--mavi);
	--cizgi: var(--koyu-gri);
	--kontrol-kenari: var(--acik-gri);
	--eylem: var(--mavi);
	--eylem-yazi: var(--grafit);
	--eylem-vurgu: var(--beyaz);
	--eylem-vurgu-yazi: var(--grafit);
	--odak: var(--mavi);
	color-scheme: dark;
	background-color: var(--zemin);
	color: var(--metin);
}

/* açık gri bant: logo mavisi gri zeminde zayıf kaldığı için vurgu koyu
   maviye döner */
.bant-gri {
	--zemin: var(--kagit);
	--vurgu: var(--koyu-mavi);
	background-color: var(--zemin);
	color: var(--metin);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--ust-boy) + 16px);
}

body {
	margin: 0;
	background: var(--beyaz);
	color: var(--metin);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss03";
	overflow-x: clip;
}

/* bölümler kendi içeriklerini yatayda kırpar: açılış hareketleri sayfayı
   yana taşırmasın (yapışkan öğeler çalışmaya devam eder) */
main > section,
footer {
	overflow-x: clip;
}

/* telefonun üst güvenli alanı, sayfa kayarken üst alanın rengini taşır */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: env(safe-area-inset-top, 0);
	z-index: 120;
	background: var(--ust-zemin, var(--grafit));
	pointer-events: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
blockquote {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
}

a {
	color: inherit;
}

::selection {
	background: color-mix(in srgb, var(--mavi) 30%, transparent);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--odak);
	outline-offset: 2px;
}

.sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.gorunmez {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.secilir {
	user-select: all;
	-webkit-user-select: all;
}

/* kap: yan boşluk güvenli alanı da kapsar */
.kap {
	width: 100%;
	max-width: calc(var(--genis) + 2 * var(--kenar));
	margin-inline: auto;
	padding-left: max(var(--kenar), env(safe-area-inset-left, 0px));
	padding-right: max(var(--kenar), env(safe-area-inset-right, 0px));
}

/* ---------- yazı ölçeği ---------- */
.baslik-1 {
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--baslik);
	text-wrap: balance;
}

.baslik-3 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--baslik);
}

.govde-buyuk {
	font-size: 20px;
	line-height: 32px;
}

.govde {
	font-size: 16px;
	line-height: 26px;
}

.vurgu {
	color: var(--vurgu);
}

@media (max-width: 599px) {

	.baslik-1 {
		font-size: 30px;
		line-height: 38px;
	}

	.baslik-3 {
		font-size: 20px;
		line-height: 28px;
	}

	.govde-buyuk {
		font-size: 18px;
		line-height: 28px;
	}
}

/* üst etiket: logo üçgeni motifi */
.ust-etiket {
	display: inline-flex;
	align-items: center;
	gap: var(--b2);
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--baslik);
}

.ust-etiket::before {
	content: "";
	flex: none;
	width: 12px;
	height: 10px;
	background: var(--vurgu);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: 50% 0;
}

/* ---------- simge ---------- */
.simge {
	display: inline-block;
	flex: none;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wa-glif {
	flex: none;
	width: 20px;
	height: 20px;
	fill: currentcolor;
	stroke: none;
}

/* ---------- düğme ---------- */
.dugme {
	--d-zemin: transparent;
	--d-yazi: var(--baslik);
	--d-kenar: var(--kontrol-kenari);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--b2);
	min-height: var(--kontrol);
	padding: 0 var(--b5);
	border: 1px solid var(--d-kenar);
	border-radius: var(--kose-kucuk);
	background: var(--d-zemin);
	color: var(--d-yazi);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.35s var(--egri), color 0.35s var(--egri), border-color 0.35s var(--egri), box-shadow 0.35s var(--egri), transform 0.5s var(--egri-yumusak);
	-webkit-tap-highlight-color: transparent;
}

.dugme > span {
	display: inline-flex;
	align-items: center;
	gap: var(--b2);
}

.dugme--birincil {
	--d-zemin: var(--eylem);
	--d-yazi: var(--eylem-yazi);
	--d-kenar: var(--eylem);
	overflow: hidden;
	isolation: isolate;
}

/* birincil düğmede üzerine gelince alttan dolan vurgu zemini */
.dugme--birincil::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--eylem-vurgu);
	transform: translateY(101%);
	transition: transform 0.5s var(--egri-yumusak);
}

.dugme--birincil:hover {
	--d-yazi: var(--eylem-vurgu-yazi);
	--d-kenar: var(--eylem-vurgu);
}

.dugme--birincil:hover::before {
	transform: none;
}

.dugme--ikincil:hover {
	--d-kenar: var(--baslik);
	box-shadow: inset 0 0 0 1px var(--baslik);
}

.dugme--kucuk {
	min-height: var(--kontrol-kucuk);
	padding: 0 var(--b4);
	font-size: 14px;
	line-height: 20px;
}

.dugme--tam {
	width: 100%;
}

.dugme-dizisi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b3);
	align-items: center;
}

/* ---------- bağlantı ---------- */
.baglanti {
	color: var(--baglanti);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.baglanti:hover {
	text-decoration-thickness: 2px;
}

.baglanti-ok {
	display: inline-flex;
	align-items: center;
	gap: var(--b2);
	color: var(--baglanti);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 2px no-repeat;
	transition: background-size 0.45s var(--egri-yumusak);
	padding-bottom: 2px;
}

.baglanti-ok:hover {
	background-size: 100% 2px;
}

/* tek başına bağlantı: dokunma alanı en az 40 px; görünüş ve düzen aynı,
   alan yazının üstüne ve altına taşar (denetim raporundaki düzeltme; Beest
   onayı, 17 Ekim 2026) */
.baglanti-ok {
	position: relative;
}

.baglanti-ok::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 40px;
	transform: translateY(-50%);
}

.baglanti-ok .simge {
	width: 18px;
	height: 18px;
	transition: transform 0.45s var(--egri-yumusak);
}

.baglanti-ok:hover .simge {
	transform: translateX(3px);
}

/* kartın tamamını kaplayan bağlantı */
.kart-baglanti {
	color: inherit;
	text-decoration: none;
}

.kart-baglanti::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kart-baglanti:focus-visible {
	outline: none;
}

/* ---------- bölüm ---------- */
.bolum {
	position: relative;
	padding-block: var(--b9);
	background: var(--zemin);
}

.bolum__ic {
	display: grid;
	gap: var(--b7);
}

.bolum-basligi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b4) var(--b6);
	align-items: flex-end;
	justify-content: space-between;
}

.bolum-basligi__metin {
	display: grid;
	gap: var(--b4);
	max-width: 720px;
	justify-items: start;
}

.bolum-basligi__metin .govde {
	font-size: 18px;
	line-height: 28px;
}

.bolum-basligi__eylemler {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b2) var(--b6);
	align-items: center;
}

.bolum-basligi--orta {
	justify-content: center;
	text-align: center;
}

.bolum-basligi--orta .bolum-basligi__metin {
	justify-items: center;
}

@media (max-width: 959px) {

	.bolum {
		padding-block: var(--b8);
	}
}

@media (max-width: 599px) {

	.bolum {
		padding-block: var(--b7);
	}

	.bolum__ic {
		gap: var(--b6);
	}

	.bolum-basligi__metin .govde {
		font-size: 16px;
		line-height: 26px;
	}
}

/* ---------- teknik çizim desenleri ---------- */
.izgara {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.izgara--giris,
.izgara--kapanis,
.izgara--hizmet {
	background-image:
		linear-gradient(rgb(0 158 227 / 0.11) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.11) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
}

.izgara--giris {
	-webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 62%);
	mask-image: linear-gradient(90deg, transparent 15%, #000 62%);
}

.izgara--kapanis {
	-webkit-mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 90% at 85% 0%, #000 0%, transparent 70%);
}

.izgara--hizmet {
	-webkit-mask-image: radial-gradient(90% 70% at 10% 0%, #000 0%, transparent 75%);
	mask-image: radial-gradient(90% 70% at 10% 0%, #000 0%, transparent 75%);
	opacity: 0.8;
}

/* imlecin çevresinde ızgara belirginleşir (yalnızca ince imleçli cihazlarda,
   hareket açıkken) */
.izgara-isik {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	background-image:
		linear-gradient(rgb(0 158 227 / 0.45) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.45) 1px, transparent 1px),
		linear-gradient(rgb(160 222 250 / 0.14) 1px, transparent 1px),
		linear-gradient(90deg, rgb(160 222 250 / 0.14) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%);
	mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%);
	transition: opacity 0.6s var(--egri);
}

.isik-acik .izgara-isik {
	opacity: 1;
}

/* açık zemin çizim kâğıdı */
.cizim-alani {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--beyaz);
	background-image:
		linear-gradient(rgb(0 110 158 / 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 110 158 / 0.1) 1px, transparent 1px),
		linear-gradient(rgb(35 37 37 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgb(35 37 37 / 0.045) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.cizim-alani > svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* çizimlerdeki canlı öğeler: ışıklar ve kesikli akış (yalnızca görünürken
   çalışır) */
@keyframes yanip {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

@keyframes akis {

	to {
		stroke-dashoffset: -40;
	}
}

@keyframes akis-9 {

	to {
		stroke-dashoffset: -36;
	}
}

@keyframes seviye {

	0%,
	100% {
		transform: scaleY(0.55);
	}

	50% {
		transform: scaleY(0.9);
	}
}

.akis {
	fill: none;
	stroke: var(--mavi);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 15;
	animation: akis 1.2s linear infinite paused;
}

.canli .akis,
.canli .hk-akis-9 {
	animation-play-state: running;
}

.hk-akis-9 {
	animation: akis-9 1.4s linear infinite paused;
}

.led {
	fill: var(--mavi);
}

.led--yan {
	animation: yanip 2.2s ease-in-out infinite paused;
}

.canli .led--yan {
	animation-play-state: running;
}

.seviye {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: seviye 7s ease-in-out infinite paused;
}

.canli .seviye {
	animation-play-state: running;
}

.durdur .akis,
.durdur .hk-akis-9,
.durdur .led--yan,
.durdur .seviye {
	animation-play-state: paused !important;
}

/* ============================================================ ÜST ALAN
   Sayfanın başında koyu (girişle tek yüzey), aşağı kaydırınca açık ve biraz
   daha ince.
   Kaydırırken hep görünür kalır. Renkler aynı yumuşak eğriyle geçer. */
.ust {
	--u-zemin: var(--grafit);
	--u-yazi: var(--beyaz);
	--u-ikinci: var(--acik-gri);
	--u-cizgi: var(--koyu-gri);
	--logo-ust: #ececec;
	--logo-alt: #c5c6c6;
	--eylem: var(--mavi);
	--eylem-yazi: var(--grafit);
	--eylem-vurgu: var(--beyaz);
	--eylem-vurgu-yazi: var(--grafit);
	--baslik: var(--beyaz);
	--kontrol-kenari: var(--acik-gri);
	--odak: var(--mavi);
	--baglanti: var(--mavi);
	position: sticky;
	top: env(safe-area-inset-top, 0);
	z-index: 100;
	color: var(--u-yazi);
}

.ust[data-ton="acik"] {
	--u-zemin: rgb(255 255 255 / 0.9);
	--u-yazi: var(--grafit);
	--u-ikinci: var(--koyu-gri);
	--u-cizgi: rgb(197 198 198 / 0.7);
	--logo-ust: #4a4d4d;
	--logo-alt: #232525;
	--eylem: var(--koyu-mavi);
	--eylem-yazi: var(--beyaz);
	--eylem-vurgu: var(--grafit);
	--eylem-vurgu-yazi: var(--beyaz);
	--baslik: var(--grafit);
	--kontrol-kenari: var(--koyu-gri);
	--odak: var(--koyu-mavi);
	--baglanti: var(--koyu-mavi);
}

.ust__cubuk {
	position: relative;
	z-index: 2;
	background: var(--u-zemin);
	border-bottom: 1px solid var(--u-cizgi);
	transition: background-color 0.5s var(--egri), border-color 0.5s var(--egri), box-shadow 0.5s var(--egri);
}

.ust[data-ton="acik"] .ust__cubuk {
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	box-shadow: 0 10px 30px rgb(35 37 37 / 0.07);
}

.ust--panel .ust__cubuk {
	background: var(--beyaz);
	box-shadow: none;
}

.ust__satir {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) minmax(0, 520px) minmax(max-content, 1fr);
	align-items: center;
	gap: var(--b6);
	min-height: 80px;
	padding-block: var(--b4);
	transition: min-height 0.6s var(--egri-yumusak), padding 0.6s var(--egri-yumusak);
}

.ust__logo {
	justify-self: start;
	display: inline-flex;
	color: inherit;
	border-radius: var(--kose-kucuk);
}

.logo {
	display: block;
	height: 40px;
	width: auto;
	overflow: visible;
	transition: height 0.6s var(--egri-yumusak);
}

.logo .l-ust {
	fill: var(--logo-ust);
	transition: fill 0.5s var(--egri);
}

.logo .l-alt {
	fill: var(--logo-alt);
	transition: fill 0.5s var(--egri);
}

.logo .l-mavi,
.logo .l-yazi {
	fill: var(--mavi);
}

.ust__arama {
	width: 100%;
}

.ust__eylem {
	justify-self: end;
	display: flex;
	gap: var(--b2);
	align-items: center;
}

.ust__wa {
	width: var(--kontrol);
	padding: 0;
	--d-kenar: transparent;
	--d-yazi: var(--eylem);
}

.ust__wa .wa-glif {
	width: 26px;
	height: 26px;
}

.ust__wa:hover {
	--d-kenar: transparent;
	--d-yazi: var(--eylem-vurgu);
	box-shadow: none;
}

/* Blog: menü satırından üst satıra, WhatsApp ile Teklif iste arasına ikincil
   düğme olarak alındı (Beest kararı, 17 Ekim 2026);
   Teklif iste'yle aynı boy; 960 px altında gizli, orada mobil menüde (mobil
   değişmedi). */
.ust__menu-dugmesi {
	display: none;
}

.ust__menu-satiri {
	transition: height 0.6s var(--egri-yumusak);
}

/* menü simgesi: üç çizgi açılınca çarpıya döner. Kutu tasarımdaki simgeyle
   aynı (20 px), çizgiler 24'lük ızgaranın 4–20 aralığında */
.menu-ikon {
	position: relative;
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

.menu-ikon span {
	position: absolute;
	left: 3px;
	right: 3px;
	height: 2px;
	border-radius: 1px;
	background: currentcolor;
	transition: transform 0.5s var(--egri-yumusak), opacity 0.3s var(--egri);
}

.menu-ikon span:nth-child(1) {
	top: 4px;
}

.menu-ikon span:nth-child(2) {
	top: 9px;
}

.menu-ikon span:nth-child(3) {
	top: 14px;
}

[aria-expanded="true"] > .menu-ikon span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

[aria-expanded="true"] > .menu-ikon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

[aria-expanded="true"] > .menu-ikon span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* arama kutusu */
.arama {
	display: grid;
	gap: var(--b2);
	width: 100%;
}

.arama__satir {
	display: flex;
}

.arama__alan {
	flex: 1 1 0;
	width: 100%;
	min-width: 0;
	height: var(--kontrol);
	padding: 0 var(--b3);
	border: 1px solid var(--kontrol-kenari);
	border-right: 0;
	border-radius: var(--kose-kucuk) 0 0 var(--kose-kucuk);
	background: var(--yuzey);
	color: var(--baslik);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.5s var(--egri), border-color 0.5s var(--egri), color 0.5s var(--egri), box-shadow 0.3s var(--egri);
}

.arama__alan::placeholder {
	color: var(--metin);
	opacity: 1;
}

.arama__alan::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.arama__alan:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--odak);
}

.arama__satir .dugme {
	border-radius: 0 var(--kose-kucuk) var(--kose-kucuk) 0;
}

.ust__arama .arama__alan {
	height: var(--kontrol-kucuk);
	background: transparent;
	color: var(--u-yazi);
	border-color: var(--kontrol-kenari);
}

.ust__arama .arama__alan::placeholder {
	color: var(--u-ikinci);
}

.ust__arama .dugme {
	min-height: var(--kontrol-kucuk);
	padding-inline: var(--b3);
}

/* ana menü */
.ana-menu {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
}

.ana-menu ul {
	display: flex;
	gap: var(--b1);
}

.ana-menu__orta {
	grid-column: 2;
}

.ana-menu__sag {
	grid-column: 3;
	justify-self: end;
}

.ana-menu__baglanti {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--b1);
	min-height: var(--kontrol);
	padding: 0 var(--b3);
	border: 0;
	background: none;
	color: var(--u-yazi);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.5s var(--egri);
}

.ana-menu__baglanti::after {
	content: "";
	position: absolute;
	left: var(--b3);
	right: var(--b3);
	bottom: 0;
	height: 2px;
	background: var(--u-yazi);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.5s var(--egri-yumusak), background-color 0.3s var(--egri);
}

.ana-menu__baglanti:hover::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.ana-menu__baglanti[aria-expanded="true"]::after {
	transform: scaleX(1);
	background: var(--mavi);
}

.ana-menu__baglanti .simge {
	width: 16px;
	height: 16px;
	transition: transform 0.5s var(--egri-yumusak);
}

.ana-menu__baglanti[aria-expanded="true"] .simge {
	transform: rotate(180deg);
}

.ana-menu__sag li:last-child .ana-menu__baglanti {
	margin-right: calc(-1 * var(--b3));
}

/* masaüstü: logo iki satırın ortasında ve büyük (tuvaldeki "logo ortada"
   düzeni).
   Kaydırırken yalnızca renk açılır; boy, logo ve düğmelerin yeri tuvaldeki
   gibi sabit kalır. */
@media (min-width: 1200px) {

	.ust__logo {
		position: relative;
		top: calc(var(--kontrol) / 2);
		margin-block: -8px;
	}

	.ust .logo {
		height: 56px;
	}
}

@media (max-width: 1199px) {

	.ana-menu {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--b1);
	}

	.ana-menu__orta,
	.ana-menu__sag {
		grid-column: auto;
	}

	.ana-menu__sag li:last-child .ana-menu__baglanti {
		margin-right: 0;
	}
}

@media (max-width: 959px) {

	.ust__satir {
		display: flex;
		flex-wrap: wrap;
		gap: var(--b3) var(--b4);
		min-height: 0;
		padding-block: var(--b3);
	}

	.ust__arama {
		order: 3;
		flex-basis: 100%;
	}

	.ust__eylem {
		margin-left: auto;
	}

	.ust__menu-dugmesi {
		display: inline-flex;
	}

	.ust__menu-satiri {
		display: none;
	}

	.ust__blog {
		display: none;
	}

	/* arama satırı kaydırırken de görünür kalır */
}

@media (max-width: 599px) {

	.ust .logo {
		height: 32px;
	}

	.ust__eylem .dugme {
		min-height: var(--kontrol-kucuk);
		padding-inline: var(--b3);
		font-size: 14px;
		line-height: 20px;
	}

	.ust__eylem .ust__wa,
	.ust__eylem .ust__menu-dugmesi {
		width: var(--kontrol-kucuk);
		padding: 0;
	}

	.ust__menu-yazi {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* kaydırma göstergesi: üst alanın alt kenarında logo mavisi çizgi */
.ust__ilerleme {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;
	height: 2px;
	pointer-events: none;
}

.ust__ilerleme span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--koyu-mavi), var(--mavi));
	transform: scaleX(var(--ilerleme, 0));
	transform-origin: 0 50%;
	box-shadow: 0 0 10px rgb(0 158 227 / 0.6);
}

/* ---------- açılır paneller (Ürünler, Hizmetler) ---------- */
.mega {
	--zemin: var(--beyaz);
	--metin: var(--koyu-gri);
	--baslik: var(--grafit);
	--baglanti: var(--koyu-mavi);
	--eylem: var(--koyu-mavi);
	--eylem-yazi: var(--beyaz);
	--eylem-vurgu: var(--grafit);
	--eylem-vurgu-yazi: var(--beyaz);
	--kontrol-kenari: var(--koyu-gri);
	--cizgi: var(--acik-gri);
	--odak: var(--koyu-mavi);
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1;
	background: var(--beyaz);
	color: var(--metin);
	border-bottom: 1px solid var(--acik-gri);
	box-shadow: 0 24px 60px rgb(35 37 37 / 0.18);
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	transition: clip-path 0.7s var(--egri-yumusak), opacity 0.4s var(--egri);
	max-height: calc(100vh - 140px);
	overflow: auto;
	overscroll-behavior: contain;
}

.mega.acik {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

.mega__ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--b7);
	padding-block: var(--b6) var(--b6);
}

.mega__ic--tek {
	grid-template-columns: minmax(0, 1fr);
}

.mega__ust {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--b4);
	margin-bottom: var(--b4);
}

.menu-etiket {
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grafit);
}

.menu-no {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	color: var(--koyu-mavi);
	margin-right: var(--b2);
	letter-spacing: 0.04em;
}

.mega__gruplar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--b3);
}

.mega-grup {
	display: grid;
	gap: var(--b2);
	padding: var(--b2);
	border: 1px solid transparent;
	border-radius: var(--kose-orta);
	color: var(--grafit);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	transition: border-color 0.3s var(--egri), background-color 0.3s var(--egri);
}

.mega-grup__cizim {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--kose-kucuk);
	overflow: hidden;
	background: var(--kagit);
	background-image: linear-gradient(rgb(0 110 158 / 0.08) 1px, transparent 1px), linear-gradient(90deg, rgb(0 110 158 / 0.08) 1px, transparent 1px);
	background-size: 32px 32px;
	background-position: -1px -1px;
}

.mega-grup__cizim svg {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.7s var(--egri-yumusak);
}

.mega-grup:hover {
	border-color: var(--acik-gri);
	background: #fafafa;
}

.mega-grup:hover .mega-grup__cizim svg {
	transform: scale(1.06);
}

.mega__yan {
	display: grid;
	align-content: start;
	gap: var(--b3);
	padding-left: var(--b6);
	border-left: 1px solid var(--acik-gri);
}

.mega__markalar {
	display: grid;
}

.mega-marka {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--b3);
	padding: 9px 0;
	border-bottom: 1px solid var(--kagit);
	text-decoration: none;
	color: var(--grafit);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.3s var(--egri), padding 0.45s var(--egri-yumusak);
}

.mega-marka:hover {
	color: var(--koyu-mavi);
	padding-left: 6px;
}

.mega-marka__sayi {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 13px;
	color: var(--koyu-gri);
}

/* sütun sayısı grup sayısı kadar, yedi ve üstünde dörtlü ızgara (Beest
   kararı, 16 Ekim 2026: gruplar, hizmetler ve markalar yönetim panelinden
   eklenip çıkarılır) */
.mega__hgruplar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--b5);
}

.mega__hgruplar:has(> :nth-child(7)) {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega-hgrup {
	display: grid;
	align-content: start;
	gap: var(--b3);
	padding-top: var(--b3);
	border-top: 2px solid var(--grafit);
}

.mega-hgrup__baslik {
	color: var(--grafit);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	text-decoration: none;
}

.mega-hgrup__baslik:hover {
	color: var(--koyu-mavi);
}

.mega-hgrup__liste {
	display: grid;
	gap: 6px;
}

.mega-hgrup__liste a {
	color: var(--koyu-gri);
	text-decoration: none;
	font-size: 15px;
	line-height: 22px;
}

.mega-hgrup__liste a:hover {
	color: var(--koyu-mavi);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mega__alt {
	background: var(--kagit);
}

.mega__alt-ic {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--b3) var(--b5);
	padding-block: var(--b4);
}

.mega__cagri {
	color: var(--grafit);
	font-size: 15px;
}

/* panel açılırken içerik sırayla belirir */
.mega [data-sira] {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s var(--egri), transform 0.7s var(--egri-yumusak);
	transition-delay: calc(var(--sira, 0) * 35ms + 80ms);
}

.mega.acik [data-sira] {
	opacity: 1;
	transform: none;
}

.ortu {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgb(26 28 28 / 0.45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.5s var(--egri);
}

.ortu.acik {
	opacity: 1;
}

/* ---------- mobil menü ---------- */
.mobil-menu {
	--zemin: var(--beyaz);
	--metin: var(--koyu-gri);
	--baslik: var(--grafit);
	--baglanti: var(--koyu-mavi);
	--eylem: var(--koyu-mavi);
	--eylem-yazi: var(--beyaz);
	--eylem-vurgu: var(--grafit);
	--eylem-vurgu-yazi: var(--beyaz);
	--kontrol-kenari: var(--koyu-gri);
	--odak: var(--koyu-mavi);
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1;
	max-height: calc(100dvh - 100%);
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--beyaz);
	color: var(--metin);
	box-shadow: 0 24px 60px rgb(35 37 37 / 0.2);
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.7s var(--egri-yumusak);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobil-menu.acik {
	clip-path: inset(0 0 0 0);
}

.mobil-menu__liste > li {
	border-bottom: 1px solid var(--acik-gri);
}

.mobil-satir {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--grafit);
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.mobil-satir .simge {
	transition: transform 0.5s var(--egri-yumusak);
}

.mobil-satir[aria-expanded="true"] .simge {
	transform: rotate(180deg);
}

.mobil-alt {
	display: grid;
	gap: var(--b3);
	padding: 0 0 var(--b5);
}

.mobil-gruplar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--b2);
}

.mobil-grup {
	display: grid;
	gap: 6px;
	color: var(--grafit);
	text-decoration: none;
	font-size: 14px;
	line-height: 19px;
	font-weight: 600;
}

.mobil-grup__cizim {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--kose-kucuk);
	background: var(--kagit);
	overflow: hidden;
}

.mobil-grup__cizim svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mobil-hgrup {
	margin-top: var(--b2);
	color: var(--grafit);
	font-weight: 700;
}

.mobil-hizmetler {
	display: grid;
	gap: 4px;
	padding-left: 28px;
}

.mobil-hizmetler a {
	color: var(--koyu-gri);
	text-decoration: none;
	display: block;
	padding: 4px 0;
}

.mobil-iletisim {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--b2);
	padding-block: var(--b5);
}

.mobil-iletisim__satir {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--b2);
	color: var(--grafit);
	font-weight: 600;
	text-decoration: none;
}

.mobil-iletisim__satir .simge {
	width: 18px;
	height: 18px;
	color: var(--koyu-mavi);
}

/* atlama bağlantısı */
.atlama {
	position: fixed;
	top: calc(12px + env(safe-area-inset-top, 0px));
	left: max(12px, env(safe-area-inset-left, 0px));
	z-index: 400;
	padding: var(--b3) var(--b4);
	border-radius: var(--kose-kucuk);
	background: var(--mavi);
	color: var(--grafit);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform 0.4s var(--egri-yumusak);
}

.atlama:focus {
	transform: none;
}

/* ============================================================ GİRİŞ
   Koyu zemin, sağda teknik çizim: açılışta pano çizilir, kaydırınca parçalarına
   ayrılır (patlatılmış görünüş).
   Masaüstünde giriş ilk ekranı doldurur, ışık bandı ekranın altına oturur. */
.giris {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
}

@media (min-width: 960px) {

	.giris {
		min-height: min(calc(100svh - var(--ust-boy)), 820px);
	}

	.giris.giris--sabit {
		min-height: calc(100svh - var(--ust-boy));
	}

	.giris > .giris__ic {
		flex: 1 0 auto;
	}
}

.giris__ic {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
	gap: var(--b6);
	align-items: center;
	padding-block: var(--b7) var(--b6);
}

.giris__metin {
	display: grid;
	gap: var(--b5);
	align-content: center;
	justify-items: start;
	min-width: 0;
}

.giris__baslik {
	font-size: 56px;
	line-height: 60px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--baslik);
	text-wrap: balance;
}

.giris__baslik .satir {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.giris__baslik .satir > span {
	display: inline-block;
	will-change: transform;
}

.giris__baslik .vurgu {
	color: var(--mavi);
}

/* açılışın sonunda vurgu satırının üzerinden bir kez ışık geçer */
.giris__baslik .vurgu.parilti > span {
	background: linear-gradient(100deg, var(--mavi) 0%, var(--mavi) 42%, #d6f1fd 50%, var(--mavi) 58%, var(--mavi) 100%);
	background-size: 260% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: parilti 1.8s var(--egri-iki) 1 forwards;
}

@keyframes parilti {

	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0% 0;
	}
}

.giris__ozet {
	max-width: 560px;
	color: var(--acik-gri);
}

.giris__dugmeler .dugme {
	min-height: 52px;
}

.giris__ipucu {
	display: none;
	align-items: center;
	gap: var(--b3);
	margin-top: var(--b3);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.04em;
	color: rgb(197 198 198 / 0.7);
}

.hareket .giris__ipucu {
	display: inline-flex;
}

.giris__fare {
	position: relative;
	flex: none;
	width: 18px;
	height: 28px;
	border: 1.5px solid currentcolor;
	border-radius: 10px;
}

.giris__fare span {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 2px;
	height: 6px;
	margin-left: -1px;
	border-radius: 1px;
	background: var(--mavi);
	animation: fare 2s var(--egri-iki) infinite;
}

@keyframes fare {

	0% {
		transform: translateY(0);
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	70% {
		transform: translateY(8px);
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/* pano çizimi: yükseklik ekrana göre (en çok 552, en az 400 px); ekran
   yüksekliğinden düşülen: üst alan 129, giriş iç
   boşlukları 80 ve ışık bandı 132 px (Beest kararı, 17 Ekim 2026: bant yeni
   boyuyla; önce 322) */
.pano {
	position: relative;
	margin: 0 -40px 0 0;
	justify-self: start;
}

@media (min-width: 960px) {

	.pano {
		--boy: clamp(400px, calc(100svh - 341px), 552px);
		width: min(calc(100% + 40px), calc(var(--boy) * 760 / 690));
	}
}

.pano::before {
	content: "";
	position: absolute;
	left: 12%;
	top: 2%;
	width: 86%;
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(closest-side, rgb(0 158 227 / 0.17), transparent);
	animation: nefes 9s ease-in-out infinite alternate paused;
}

.canli.pano::before {
	animation-play-state: running;
}

@keyframes nefes {

	from {
		transform: scale(0.94);
		opacity: 0.8;
	}

	to {
		transform: scale(1.06);
		opacity: 1;
	}
}

.pano__svg {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.pano .k {
	transition: opacity 0.6s var(--egri);
}

.pano.vurgu-var .k {
	opacity: 0.22;
}

.pano.vurgu-var .k.vurgulu {
	opacity: 1;
}

.pano .k.vurgulu .ki {
	filter: drop-shadow(0 0 6px rgb(0 158 227 / 0.55));
}

.patlat rect,
.patlat line {
	fill: none;
	stroke: var(--mavi);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	vector-effect: non-scaling-stroke;
}

.patlat rect {
	stroke-opacity: 0.55;
}

.patlat line {
	stroke-opacity: 0.7;
}

.patlat__nokta {
	fill: none;
	stroke: var(--mavi);
	stroke-width: 1;
	stroke-opacity: 0.7;
}

/* çizim masası nişangâhı: imleci izleyen ince çizgiler ve pafta bölgesi (A1,
   B2 …) */
.nisan {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s var(--egri);
}

.isik-acik .nisan {
	opacity: 1;
}

.nisan__x,
.nisan__y {
	position: absolute;
	background: rgb(0 158 227 / 0.28);
}

.nisan__x {
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	transform: translate3d(0, var(--ny, -10px), 0);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.nisan__y {
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	transform: translate3d(var(--nx, -10px), 0, 0);
	-webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}

.nisan__etiket {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate3d(calc(var(--nx, -100px) + 12px), calc(var(--ny, -100px) + 12px), 0);
	padding: 2px 6px;
	border: 1px solid rgb(0 158 227 / 0.45);
	border-radius: 2px;
	background: rgb(26 28 28 / 0.7);
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.06em;
	color: #a0defa;
	white-space: nowrap;
}

.pano__tarama {
	position: absolute;
	left: -4%;
	right: -4%;
	top: 0;
	height: 2px;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(90deg, transparent, rgb(0 158 227 / 0.9) 18%, #bfe9fb 50%, rgb(0 158 227 / 0.9) 82%, transparent);
	box-shadow: 0 0 18px 2px rgb(0 158 227 / 0.55), 0 0 2px rgb(255 255 255 / 0.9);
}

.pano__tarama::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 60px;
	background: linear-gradient(to top, rgb(0 158 227 / 0.12), transparent);
}

/* çizim notları: hizmet gruplarına giden bağlantılar */
.not {
	position: absolute;
	z-index: 2;
	display: grid;
	gap: 2px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	color: var(--beyaz);
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--kose-kucuk);
	padding: 2px 4px;
	margin: -2px -4px;
	transition: color 0.3s var(--egri), background-color 0.4s var(--egri);
}

.not--satir {
	display: flex;
	align-items: baseline;
	gap: var(--b2);
}

.not--alttan {
	translate: 0 -100%;
}

.not b {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--mavi);
	letter-spacing: 0.04em;
}

.not small {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: var(--acik-gri);
}

.not__ad {
	background: linear-gradient(var(--mavi), var(--mavi)) 0 100% / 0 1px no-repeat;
	transition: background-size 0.5s var(--egri-yumusak);
}

.not:hover .not__ad,
.not:focus-visible .not__ad {
	background-size: 100% 1px;
}

.not:hover,
.not:focus-visible {
	background: rgb(35 37 37 / 0.72);
}

.cizgi-not line:first-child {
	transition: opacity 0.4s;
}

/* ---------- ışık bandı: rakamlar ---------- */
.bant {
	--ik-cizgi: var(--beyaz);
	--ik-vurgu: color-mix(in oklab, var(--mavi), #fff 62%);
	--ik-isik: var(--beyaz);
	--ik-zemin: var(--koyu-mavi);
	position: relative;
	z-index: 2;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(100deg, color-mix(in oklab, var(--koyu-mavi), #000 22%) 0%, var(--koyu-mavi) 30%, color-mix(in oklab, var(--koyu-mavi), var(--mavi) 30%) 58%, var(--koyu-mavi) 82%, color-mix(in oklab, var(--koyu-mavi), #000 18%) 100%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 -18px 48px -26px rgb(0 158 227 / 0.6);
	color: var(--beyaz);
}

.bant::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -70% -25%;
	pointer-events: none;
	background:
		radial-gradient(28% 50% at 22% 50%, rgb(0 158 227 / 0.5), transparent 70%),
		radial-gradient(22% 46% at 68% 55%, rgb(160 222 250 / 0.16), transparent 70%);
	animation: aurora 16s ease-in-out infinite alternate paused;
	translate: var(--bant-kay, 0) 0;
}

.bant::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px),
		linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.bant__isik {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.bant__isik::before {
	content: "";
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: 0;
	width: 240px;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.13) 50%, transparent);
	transform: translateX(-320px) skewX(-18deg);
	animation: supur 7s ease-in-out infinite paused;
	animation-delay: 1.6s;
}

.bant__isik::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 260px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9), transparent);
	box-shadow: 0 0 12px rgb(160 222 250 / 0.9);
	animation: kenar 4.5s linear infinite paused;
}

.bant.canli::before,
.bant.canli .bant__isik::before,
.bant.canli .bant__isik::after {
	animation-play-state: running;
}

@keyframes kenar {

	from {
		transform: translateX(-280px);
	}

	to {
		transform: translateX(calc(100vw + 20px));
	}
}

@keyframes aurora {

	0% {
		transform: translateX(-9%);
	}

	50% {
		transform: translateX(3%) scaleY(1.15);
	}

	100% {
		transform: translateX(11%);
	}
}

@keyframes supur {

	0% {
		transform: translateX(-320px) skewX(-18deg);
	}

	38%,
	100% {
		transform: translateX(calc(100vw + 320px)) skewX(-18deg);
	}
}

.gs {
	display: grid;
	grid-template-columns: repeat(4, auto);
	padding-block: 24px;
	text-shadow: 0 1px 2px rgb(0 40 60 / 0.3);
}

/* rakam sayısından bağımsız: 960 px ve üstünde beşe kadar tek satır, altı ve
   üstünde üçlü ızgara */
@media (min-width: 960px) {

	.gs {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: auto;
	}

	.gs:has(> :nth-child(6)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, auto);
	}

	.gs:has(> :nth-child(6)) > .gs__oge:nth-child(3n + 1) {
		padding-left: 0;
		border-left: 0;
	}
}

.gs dt,
.gs dd {
	margin: 0;
}

/* etiket rakamın yanında; iç boşluklar ve rakamla etiket arası 22 px etikete
   yer açmak için küçük (Beest kararı, 17 Ekim 2026; önce 28/12 ve 16 px) */
.gs__oge {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: var(--b3);
	padding-inline: 24px 8px;
}

.gs__oge:first-child {
	padding-left: 0;
}

.gs__oge + .gs__oge {
	border-left: 1px solid rgb(255 255 255 / 0.2);
}

.gs__deger {
	display: flex;
	align-items: center;
	flex: none;
	font-size: 44px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gs__sayi {
	display: inline-block;
	text-align: right;
}

.gs__arti {
	color: color-mix(in oklab, var(--mavi), #fff 62%);
}

/* etiketler vurgulu (Beest kararı, 17 Ekim 2026: önce 17 px, dar ekranda 15,
   telefonda 14 px); masaüstünde en çok üç satır */
.gs__ad {
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
}

.gs__ikon {
	display: grid;
	place-items: center;
	flex: none;
	margin: -4px var(--b4) -4px 0;
	--ik-boy: 60px;
}

/* 1180–1279 px: dört öğe 60 px simgeyle sığmıyor (Beest kararı, 17 Ekim
   2026) */
@media (min-width: 1180px) and (max-width: 1279px) {

	.gs__ikon {
		--ik-boy: 48px;
		margin-right: var(--b3);
	}
}

.gs__oge .ik {
	transition: filter 0.35s var(--egri), transform 0.6s var(--egri-yumusak);
}

.gs__oge:hover .ik {
	filter: drop-shadow(0 0 8px rgb(255 255 255 / 0.55));
	transform: scale(1.06);
}

/* hareketli çizgi ikonları */
.ik {
	display: block;
	flex: none;
	width: var(--ik-boy, 48px);
	height: var(--ik-boy, 48px);
	overflow: visible;
	fill: none;
	stroke: var(--ik-cizgi);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ik .v {
	stroke: var(--ik-vurgu);
}

.ik .ince {
	stroke-width: 1.1;
	opacity: 0.55;
}

.ik .led {
	fill: var(--ik-isik);
	stroke: none;
	animation: yanip 1.5s ease-in-out infinite paused;
}

.ik .ik-disli-a {
	animation: don 9s linear infinite paused;
}

.ik .ik-disli-b {
	animation: don 7s linear infinite reverse paused;
}

.ik .ik-rozet {
	fill: var(--ik-zemin);
	stroke: var(--ik-vurgu);
}

.ik .ik-tik {
	stroke-width: 1.9;
	stroke-dasharray: 12;
	stroke-dashoffset: 12;
	animation: tik 4s ease-in-out infinite paused;
}

.ik .ik-pencere {
	fill: transparent;
	animation: pencere 2.1s ease-in-out infinite paused;
}

.ik .ik-duman {
	fill: var(--ik-cizgi);
	stroke: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: duman 2.6s ease-out infinite paused;
}

.ik .ik-nabiz {
	transform-box: fill-box;
	transform-origin: center;
	animation: nabiz 2.2s ease-out infinite paused;
}

.ik .ik-oynat {
	fill: var(--ik-isik);
	stroke: var(--ik-isik);
	stroke-width: 1.2;
}

.ik .ik-ilerleme {
	transform-origin: 10.5px 28.5px;
	animation: ilerle 5s linear infinite paused;
}

.canli .ik .led,
.canli .ik .ik-disli-a,
.canli .ik .ik-disli-b,
.canli .ik .ik-tik,
.canli .ik .ik-pencere,
.canli .ik .ik-duman,
.canli .ik .ik-nabiz,
.canli .ik .ik-ilerleme {
	animation-play-state: running;
}

@keyframes don {

	to {
		transform: rotate(360deg);
	}
}

@keyframes tik {

	0%,
	15% {
		stroke-dashoffset: 12;
		opacity: 1;
	}

	40%,
	88% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@keyframes pencere {

	0%,
	100% {
		fill: transparent;
	}

	30%,
	60% {
		fill: var(--ik-isik);
	}
}

@keyframes duman {

	0% {
		opacity: 0;
		transform: translateY(0) scale(0.5);
	}

	25% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
		transform: translateY(-8px) scale(1.4);
	}
}

@keyframes nabiz {

	0% {
		transform: scale(0.85);
		opacity: 0.9;
	}

	100% {
		transform: scale(1.65);
		opacity: 0;
	}
}

@keyframes ilerle {

	0% {
		transform: scaleX(0);
	}

	88% {
		transform: scaleX(1);
		opacity: 1;
	}

	100% {
		transform: scaleX(1);
		opacity: 0;
	}
}

/* ---------- duyarlı ---------- */
@media (max-width: 1199px) {

	.pano {
		margin-right: 0;
	}
}

/* dar masaüstü: iki eşit sütun; çizim sağdaki notlara yer bırakacak kadar
   küçülür */
@media (min-width: 960px) and (max-width: 1199px) {

	.giris__ic {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.giris__baslik {
		font-size: 48px;
		line-height: 52px;
	}

	.pano {
		width: min(calc(100% - 100px), calc(var(--boy) * 760 / 690));
	}
}

@media (max-width: 1179px) {

	.gs__oge {
		flex-direction: column-reverse;
		justify-content: flex-end;
		align-items: flex-start;
		gap: var(--b2);
		padding-inline: 20px 8px;
	}

	.gs__ikon {
		--ik-boy: 40px;
		margin-right: var(--b3);
	}

	.gs__deger {
		font-size: 36px;
		line-height: 44px;
	}

	.gs__ad {
		font-size: 19px;
		line-height: 24px;
	}
}

@media (max-width: 959px) {

	.giris__baslik {
		font-size: 48px;
		line-height: 52px;
	}

	.giris__ic {
		grid-template-columns: 1fr;
	}

	.giris__ic > .pano {
		order: -1;
		max-width: 640px;
		width: 100%;
	}

	.gs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--b5);
	}

	.gs__oge:nth-child(2n + 1) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 599px) {

	.izgara--giris {
		-webkit-mask-image: linear-gradient(0deg, transparent 30%, #000 75%);
		mask-image: linear-gradient(0deg, transparent 30%, #000 75%);
	}

	.giris__ic {
		padding-block: var(--b6) var(--b5);
		gap: var(--b5);
	}

	.giris__baslik {
		font-size: 36px;
		line-height: 42px;
		letter-spacing: -0.02em;
	}

	.giris__dugmeler {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.pano .not,
	.pano .cizgi-not,
	.pano .kilavuz {
		display: none;
	}

	.gs {
		padding-block: 24px;
		column-gap: var(--b4);
	}

	.gs__oge,
	.gs__oge + .gs__oge {
		padding-inline: 0;
		border-left: 0;
	}

	.gs__ikon {
		--ik-boy: 34px;
		margin-right: var(--b2);
	}

	.gs__deger {
		font-size: 30px;
		line-height: 36px;
	}

	.gs__ad {
		font-size: 17px;
		line-height: 22px;
	}
}

/* ============================================================ ÜÇ KAPI */
.kapilar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--b5);
}

/* kapı sayısından bağımsız: 960 px ve üstünde dörde kadar tek satır, beş ve
   üstünde üçlü ızgara */
@media (min-width: 960px) {

	.kapilar {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.kapilar:has(> :nth-child(5)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kapi {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--beyaz);
	border: 1px solid var(--acik-gri);
	border-radius: var(--kose-orta);
	overflow: hidden;
	transition: border-color 0.4s var(--egri), box-shadow 0.6s var(--egri), transform 0.7s var(--egri-yumusak);
}

.kapi .cizim-alani {
	aspect-ratio: 16 / 10;
	border-bottom: 1px solid var(--acik-gri);
}

.kapi .cizim-alani > svg {
	transition: transform 1.2s var(--egri-yumusak);
}

.kapi__govde {
	display: grid;
	gap: var(--b2);
	padding: var(--b5) var(--b5) var(--b6);
}

.kapi__ok {
	display: inline-flex;
	align-items: center;
	gap: var(--b2);
	margin-top: var(--b2);
	font-weight: 600;
	color: var(--koyu-mavi);
}

.kapi__ok .simge {
	transition: transform 0.5s var(--egri-yumusak);
}

.kapi:has(.kart-baglanti:hover) {
	border-color: var(--grafit);
	box-shadow: 0 18px 40px rgb(35 37 37 / 0.12);
	transform: translateY(-4px);
}

.kapi:has(.kart-baglanti:hover) .cizim-alani > svg {
	transform: scale(1.04);
}

.kapi:has(.kart-baglanti:hover) .kapi__ok .simge {
	transform: translateX(4px);
}

.kapi:has(.kart-baglanti:focus-visible) {
	outline: 3px solid var(--odak);
	outline-offset: 2px;
}

/* ============================================================ ÜRÜN
   GRUPLARI: VİTRİN */

/* Grup sayısından bağımsız vitrin (Beest kararı, 16 Ekim 2026: gruplar,
   hizmetler ve markalar yönetim panelinden eklenip çıkarılır). İlk grup büyük
   (2 × 2), ikincisi geniş
   (2 × 1), kalanlar dörtlü ızgarada; grup satırları 268 px. Arama bandı son
   satırdaki boş hücreleri doldurur (bir grup
   kaldıysa üç hücre, iki grup kaldıysa iki hücre); son satır doluysa alta, tam
   satıra iner; üç grup kaldıysa sonuncusu iki
   hücreye genişler. Sekiz grupla diziliş öncekiyle aynı. Öbür ana sayfanın
   (SecenekA) kurallarıyla aynı. */
.vitrin {
	display: grid;
	gap: var(--b5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vitrin__oge {
	display: flex;
	min-width: 0;
	height: 268px;
}

.vitrin__oge:first-child {
	grid-column: span 2;
	grid-row: span 2;
	height: auto;
}

.vitrin__oge:nth-child(2) {
	grid-column: span 2;
}

.vitrin__oge--ara {
	grid-column: 1 / -1;
	height: auto;
}

.vitrin__oge--ara:nth-child(4n + 2) {
	grid-column: span 3;
	height: 268px;
}

.vitrin__oge--ara:nth-child(4n + 3) {
	grid-column: span 2;
	height: 268px;
}

.vitrin:has(> .vitrin__oge--ara:nth-child(4n)) > .vitrin__oge:nth-last-child(2) {
	grid-column: span 2;
}

/* arama bandı grup satırına girince içerik dikeyde ortada; iki hücrede
   başlık formun üstünde */
@media (min-width: 960px) {

	.vitrin__oge--ara:is(:nth-child(4n + 2), :nth-child(4n + 3)) .vitrin__ara {
		align-content: center;
	}

	.vitrin__oge--ara:nth-child(4n + 3) .vitrin__ara {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--b4);
		padding: var(--b6);
	}
}

@media (min-width: 1200px) {

	.vitrin__oge--ara:nth-child(4n + 2) .vitrin__ara {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	}
}

.vitrin-kutu {
	--baslik: var(--grafit);
	--metin: var(--koyu-gri);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	border: 1px solid var(--acik-gri);
	border-radius: var(--kose-orta);
	background: var(--beyaz);
	color: var(--metin);
	transition: transform 0.6s var(--egri-yumusak), box-shadow 0.6s var(--egri), border-color 0.4s var(--egri);
}

.vitrin-kutu__cizim {
	flex: 1;
	min-height: 0;
	padding: var(--b5) var(--b5) 0;
	transition: transform 1s var(--egri-yumusak);
}

.vitrin-kutu__cizim > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vitrin-kutu__alt {
	display: flex;
	align-items: flex-end;
	gap: var(--b3);
	padding: var(--b3) var(--b4) var(--b4) var(--b5);
}

.vitrin-kutu__metin {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 2px;
	padding-bottom: 2px;
}

.vitrin-kutu__baslik {
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--baslik);
	text-wrap: balance;
}

.vitrin-kutu__marka {
	font-size: 13px;
	line-height: 18px;
	color: var(--metin);
}

.vitrin-kutu:is(:hover, :focus-within) {
	transform: translateY(-5px);
	box-shadow: 0 18px 36px rgb(35 37 37 / 0.16);
}

.vitrin-kutu:is(:hover, :focus-within) .vitrin-kutu__cizim {
	transform: scale(1.045);
}

.vitrin-kutu:has(.kart-baglanti:focus-visible) {
	outline: 3px solid var(--koyu-mavi);
	outline-offset: 2px;
}

.vitrin-kutu .hk-led {
	transition: opacity 0.3s;
}

.vitrin-kutu:is(:hover, :focus-within) .hk-led {
	animation: yanip 1.6s ease-in-out infinite;
}

.vitrin-kutu .hk-led:nth-of-type(3n) {
	animation-delay: 0.5s;
}

.vitrin-kutu .hk-led:nth-of-type(3n + 1) {
	animation-delay: 1s;
}

.vitrin-kutu:is(:hover, :focus-within) .hk-akis-9 {
	animation-play-state: running;
}

/* PLC kutusunda tarama döngüsü: ışıklar sırayla yanar (yalnızca görünürken) */
.vitrin-kutu--buyuk.canli .hk-led {
	animation: tarama 2.4s steps(1, end) infinite;
	animation-delay: calc(var(--n, 0) * 0.3s);
}

@keyframes tarama {

	0%,
	100% {
		opacity: 0.25;
	}

	12%,
	40% {
		opacity: 1;
	}
}

/* operatör paneli kutusunda süreç ekranı: sıvı bir tanktan ötekine geçer,
   eğilim çizgisi yeniden çizilir */
.vitrin-kutu--genis .hmi-seviye-1,
.vitrin-kutu--genis .hmi-seviye-2 {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.vitrin-kutu--genis.canli .hmi-seviye-1 {
	animation: tank-a 7s ease-in-out infinite;
}

.vitrin-kutu--genis.canli .hmi-seviye-2 {
	animation: tank-b 7s ease-in-out infinite;
}

.vitrin-kutu--genis.canli .hmi-trend {
	stroke-dasharray: 54;
	animation: egilim 3.6s ease-in-out infinite;
}

@keyframes tank-a {

	0%,
	100% {
		transform: scaleY(1);
	}

	50% {
		transform: scaleY(0.42);
	}
}

@keyframes tank-b {

	0%,
	100% {
		transform: scaleY(0.55);
	}

	50% {
		transform: scaleY(1.3);
	}
}

@keyframes egilim {

	0% {
		stroke-dashoffset: 54;
	}

	55%,
	85% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: -54;
	}
}

.vitrin-kutu--tek {
	background-image:
		linear-gradient(rgb(0 110 158 / 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 110 158 / 0.08) 1px, transparent 1px),
		linear-gradient(rgb(35 37 37 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(35 37 37 / 0.035) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.vitrin-kutu--tek:is(:hover, :focus-within) {
	border-color: var(--grafit);
}

.vitrin-kutu--tek .ok-dugme {
	width: var(--kontrol-kucuk);
	height: var(--kontrol-kucuk);
}

.vitrin-kutu--tek .ok-dugme .simge {
	width: 24px;
	height: 24px;
}

.vitrin-kutu--buyuk {
	--baslik: var(--beyaz);
	--metin: var(--acik-gri);
	border-color: transparent;
	background-color: var(--grafit);
	background-image:
		linear-gradient(rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.vitrin-kutu--buyuk::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: -1;
	pointer-events: none;
	border: 1px solid rgb(197 198 198 / 0.18);
	border-radius: 2px;
	transition: border-color 0.5s var(--egri);
}

.vitrin-kutu--buyuk::after {   /* imleci izleyen yumuşak ışık */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(320px circle at var(--kx, 50%) var(--ky, 50%), rgb(0 158 227 / 0.16), transparent 70%);
	transition: opacity 0.5s var(--egri);
}

.vitrin-kutu--buyuk:hover::after {
	opacity: 1;
}

.vitrin-kutu--buyuk:is(:hover, :focus-within)::before {
	border-color: rgb(0 158 227 / 0.5);
}

.vitrin-kutu--buyuk svg * {
	vector-effect: non-scaling-stroke;
}

.vitrin-kutu--buyuk .vitrin-kutu__cizim {
	padding: 64px 72px 8px;
}

.vitrin-kutu--buyuk .vitrin-kutu__alt {
	padding: var(--b6);
}

.vitrin-kutu--buyuk .vitrin-kutu__metin {
	gap: var(--b1);
}

.vitrin-kutu--buyuk .vitrin-kutu__baslik {
	font-size: 44px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.vitrin-kutu--buyuk .vitrin-kutu__marka {
	font-size: 15px;
	line-height: 22px;
}

.vitrin-kutu--buyuk:is(:hover, :focus-within) {
	box-shadow: 0 22px 44px rgb(35 37 37 / 0.28);
}

.vitrin-kutu--genis {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	border-color: transparent;
	background: var(--mavi);
}

.vitrin-kutu--genis .vitrin-kutu__cizim {
	grid-column: 2;
	grid-row: 1;
	padding: var(--b5) var(--b5) var(--b5) 0;
}

.vitrin-kutu--genis .vitrin-kutu__alt {
	grid-column: 1;
	grid-row: 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--b6);
}

.vitrin-kutu--genis .vitrin-kutu__metin {
	flex: none;
	gap: var(--b1);
}

.vitrin-kutu--genis .vitrin-kutu__baslik {
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.vitrin-kutu--genis .vitrin-kutu__marka {
	font-size: 14px;
	line-height: 20px;
	color: var(--grafit);
}

.vitrin-kutu--genis .ok-dugme {
	background: var(--beyaz);
}

.vitrin-kutu--genis:is(:hover, :focus-within) .ok-dugme {
	background: var(--grafit);
	color: var(--beyaz);
}

.vitrin-kutu:is(:hover, :focus-within) .ok-dugme {
	background: var(--mavi);
}

.vitrin-kutu:is(:hover, :focus-within) .ok-dugme .simge:first-child {
	transform: translate(150%, -150%);
}

.vitrin-kutu:is(:hover, :focus-within) .ok-dugme .simge + .simge {
	transform: none;
}

.vitrin__ara {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	align-items: center;
	gap: var(--b6);
	width: 100%;
	padding: var(--b6) var(--b7);
	border-radius: var(--kose-orta);
}

.vitrin__ara-baslik {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--baslik);
}

.vitrin__arama .dugme {
	padding-inline: var(--b6);
}

.vitrin__arama .arama__alan {
	background: transparent;
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: 0.02em;
}

.vitrin__arama .arama__alan::placeholder {
	font-family: var(--font-mono);
}

/* yuvarlak ok düğmesi: ok çapraz kayarak yer değiştirir */
.ok-dugme {
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
	width: var(--kontrol);
	height: var(--kontrol);
	border-radius: 50%;
	background: var(--kagit);
	color: var(--grafit);
	pointer-events: none;
	transition: background-color 0.35s var(--egri), color 0.35s var(--egri);
}

.ok-dugme .simge {
	grid-area: 1 / 1;
	width: 32px;
	height: 32px;
	transition: transform 0.55s var(--egri-yumusak);
}

.ok-dugme .simge + .simge {
	transform: translate(-150%, 150%);
}

/* ============================================================ HİZMETLER:
   GENİŞLEYEN PANELLER */
.hizmetler {
	position: relative;
	isolation: isolate;
	background: linear-gradient(to bottom, var(--kagit) 50%, var(--beyaz) 50%);
}

.hizmetler__zemin {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--grafit);
	overflow: hidden;
}

.hizmetler__sahne {
	position: relative;
	z-index: 1;
	padding-block: var(--b9);
}

.hizmetler__sahne.bant-koyu {
	background: transparent;
}

.hizmetler__ic {
	display: grid;
	gap: var(--b7);
}

.hp {
	display: flex;
	gap: var(--b2);
	height: 560px;
	min-width: 0;
}

.hp__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--b6);
	border-radius: var(--kose-orta);
	transition: flex-grow 1s var(--egri-yumusak);
}

.hp__gorsel {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.hp__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.58) saturate(0.8);
	transform: scale(1.1);
	transition: filter 1s var(--egri), transform 1.6s var(--egri-yumusak);
}

.hp__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.95) 0%, rgb(35 37 37 / 0.72) 44%, rgb(35 37 37 / 0) 78%);
}

.hp__panel::before {   /* açık panelin üst kenarında ilerleme çizgisi */
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 100%;
	z-index: 2;
	background: var(--mavi);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1.2s var(--egri-yumusak);
}

.hp__dikey {
	position: absolute;
	left: var(--b5);
	bottom: var(--b6);
	margin: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	color: var(--beyaz);
	transition: opacity 0.4s var(--egri);
}

.hp__acik {
	flex: none;
	width: 460px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: var(--b5);
	row-gap: var(--b3);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 0.35s var(--egri), transform 0.7s var(--egri-yumusak);
}

.hp__acik > * {
	grid-column: 1;
}

.hp__acik > .ok-dugme {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: end;
}

.hs-sayi {
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mavi);
}

.hp__baslik {
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--beyaz);
}

.hp__baglanti {
	color: inherit;
	text-decoration: none;
}

.hp__baglanti::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hp__baglanti:focus-visible {
	outline: none;
}

.hp__panel:has(.hp__baglanti:focus-visible) {
	outline: 3px solid var(--mavi);
	outline-offset: -3px;
}

.hp__liste {
	display: grid;
	gap: var(--b1);
}

.hp__liste a {
	position: relative;
	z-index: 2;
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	color: rgb(255 255 255 / 0.86);
	text-decoration: none;
}

.hp__liste a .simge {
	display: inline-block;
	vertical-align: -2px;
	margin-left: 6px;
	width: 16px;
	height: 16px;
	color: var(--mavi);
	transition: transform 0.4s var(--egri-yumusak);
}

.hp__liste a:hover {
	color: var(--beyaz);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hp__liste a:hover .simge {
	transform: translateX(3px);
}

.tek-satir {
	white-space: nowrap;
}

.hp__liste li {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s var(--egri), transform 0.7s var(--egri-yumusak);
}

/* açık panel (JS .aktif verir; betik yoksa üzerine gelinen ya da ilki) */
.hp__panel.aktif {
	flex-grow: 4.6;
}

.hp__panel.aktif .hp__gorsel img {
	filter: none;
	transform: scale(1);
}

.hp__panel.aktif .hp__dikey {
	opacity: 0;
}

.hp__panel.aktif .hp__acik {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition-delay: 0.3s;
}

.hp__panel.aktif .hp__liste li {
	opacity: 1;
	transform: none;
}

.hp__panel.aktif .hp__liste li:nth-child(1) {
	transition-delay: 0.4s;
}

.hp__panel.aktif .hp__liste li:nth-child(2) {
	transition-delay: 0.47s;
}

.hp__panel.aktif .hp__liste li:nth-child(3) {
	transition-delay: 0.54s;
}

.hp__panel.aktif .hp__liste li:nth-child(4) {
	transition-delay: 0.61s;
}

.hp__panel.aktif .hp__liste li:nth-child(5) {
	transition-delay: 0.68s;
}

.hp__panel.aktif .hp__liste li:nth-child(6) {
	transition-delay: 0.75s;
}

.hp__panel.aktif .hp__liste li:nth-child(7) {
	transition-delay: 0.82s;
}

.hp__panel.aktif .hp__liste li:nth-child(8) {
	transition-delay: 0.89s;
}

.hp__panel.aktif .hp__liste li:nth-child(n + 9) {
	transition-delay: 0.96s;
}

/* grubun fotoğrafı yüklenmemişse panel teknik ızgaralı koyu zeminde (Beest
   kararı, 16 Ekim 2026: gruplar, hizmetler ve markalar yönetim panelinden
   eklenip çıkarılır) */
.hp__panel:not(:has(> .hp__gorsel img)) {
	background-color: var(--grafit);
	background-image:
		linear-gradient(rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgb(0 158 227 / 0.12) 1px, transparent 1px),
		linear-gradient(rgb(197 198 198 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(197 198 198 / 0.05) 1px, transparent 1px);
	background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
	background-position: -1px -1px;
}

.hp__panel.aktif::before {
	transform: scaleX(1);
}

/* Örnek görsel etiketi bütün örnek fotoğraflarda, şablonlardaki gibi
   (fotoğrafın sağ üst köşesinde hap; denetim raporundaki düzeltme; Beest onayı,
   17 Ekim 2026).
   Hizmet panelinde yalnızca açık panelde (dar panele sığmaz); 959 px ve
   altında paneller alt alta, hep görünür. */
.ornek-not {
	position: absolute;
	right: var(--b4);
	top: var(--b4);
	z-index: 1;
	padding: 4px var(--b3);
	border-radius: 999px;
	background: rgb(35 37 37 / 0.8);
	color: var(--beyaz);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	pointer-events: none;
}

.hp__gorsel .ornek-not {
	opacity: 0;
	transition: opacity 0.25s var(--egri);
}

.hp__panel.aktif .hp__gorsel .ornek-not {
	opacity: 1;
	transition-delay: 0.3s;
}

.hp__panel.aktif .ok-dugme {
	background: var(--mavi);
}

.hp__panel.aktif .ok-dugme .simge:first-child {
	transform: translate(150%, -150%);
}

.hp__panel.aktif .ok-dugme .simge + .simge {
	transform: none;
}

html:not(.js) .hp__panel:is(:hover, :focus-within),
html:not(.js) .hp:not(:has(.hp__panel:is(:hover, :focus-within))) .hp__panel:first-child {
	flex-grow: 4.6;
}

html:not(.js) .hp__panel:is(:hover, :focus-within) .hp__acik,
html:not(.js) .hp:not(:has(.hp__panel:is(:hover, :focus-within))) .hp__panel:first-child .hp__acik {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

html:not(.js) .hp__liste li {
	opacity: 1;
	transform: none;
}

html:not(.js) .hp__panel:is(:hover, :focus-within) .ornek-not,
html:not(.js) .hp:not(:has(.hp__panel:is(:hover, :focus-within))) .hp__panel:first-child .ornek-not {
	opacity: 1;
}

/* ============================================================ PROJELER:
   YATAY GALERİ */
.projeler {
	position: relative;
	background: var(--beyaz);
}

.projeler__sahne {
	padding-block: var(--b9) var(--b8);
	display: grid;
	gap: var(--b6);
}

.sayac {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--koyu-gri);
	font-variant-numeric: tabular-nums;
}

.sayac__simdi {
	font-size: 22px;
	font-weight: 600;
	color: var(--grafit);
	min-width: 2ch;
}

.galeri {
	position: relative;
	display: grid;
}

.galeri__pencere {
	grid-area: 1 / 1;
	min-width: 0;
	overflow: hidden;
}

.galeri__iz {
	display: flex;
	gap: var(--b5);
	margin: 0;
	padding-block: var(--b3) var(--b7);
	margin-bottom: calc(-1 * var(--b7));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-left: max(var(--kenar), env(safe-area-inset-left, 0px), calc((100% - var(--genis)) / 2));
	padding-right: max(var(--kenar), env(safe-area-inset-right, 0px), calc((100% - var(--genis)) / 2));
	scroll-padding-inline: max(var(--kenar), calc((100% - var(--genis)) / 2));
}

.galeri__iz::-webkit-scrollbar {
	display: none;
}

.galeri__oge {
	flex: 0 0 368px;
	display: flex;
	scroll-snap-align: start;
}

.galeri__ok {
	grid-area: 1 / 1;
	align-self: center;
	position: relative;
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--kontrol);
	height: var(--kontrol);
	margin-top: var(--b3);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--beyaz);
	color: var(--grafit);
	box-shadow: 0 6px 20px rgb(35 37 37 / 0.28);
	cursor: pointer;
	transition: background-color 0.3s var(--egri), opacity 0.3s var(--egri), visibility 0.3s, transform 0.4s var(--egri-yumusak);
}

.galeri__ok .simge {
	width: 24px;
	height: 24px;
}

.galeri__ok--geri {
	justify-self: start;
	margin-left: max(var(--b2), calc(max(var(--kenar), (100% - var(--genis)) / 2) - var(--kontrol) / 2));
}

.galeri__ok--ileri {
	justify-self: end;
	margin-right: max(var(--b2), calc(max(var(--kenar), (100% - var(--genis)) / 2) - var(--kontrol) / 2));
}

.galeri__ok:hover {
	background: var(--mavi);
	transform: scale(1.06);
}

.galeri__ok:active {
	transform: scale(0.94);
}

.galeri__ok:focus-visible {
	outline: 3px solid var(--koyu-mavi);
	outline-offset: 2px;
}

.galeri__ok:disabled {
	opacity: 0;
	visibility: hidden;
}

.galeri__ilerleme {
	position: relative;
	height: 2px;
	background: var(--kagit);
	overflow: hidden;
}

.galeri__ilerleme span {
	position: absolute;
	inset: 0;
	background: var(--grafit);
	transform: scaleX(var(--g, 0.08));
	transform-origin: 0 50%;
}

.proje {
	--baslik: var(--beyaz);
	--metin: var(--acik-gri);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--kose-orta);
	background: var(--grafit);
	color: var(--metin);
	transition: transform 0.6s var(--egri-yumusak), box-shadow 0.6s var(--egri);
}

.proje__gorsel {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.proje__gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--egri-yumusak);
}

.proje::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgb(35 37 37 / 0.97) 0%, rgb(35 37 37 / 0.88) 28%, rgb(35 37 37 / 0) 60%);
}

.proje__icerik {
	display: grid;
	gap: var(--b2);
	padding: var(--b5);
}

.proje__etiketler {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--b1);
}

.proje__etiketler li {
	padding: 2px var(--b2);
	border: 1px solid rgb(255 255 255 / 0.24);
	border-radius: var(--kose-kucuk);
	background: rgb(255 255 255 / 0.07);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	color: var(--beyaz);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.proje__alt {
	display: flex;
	align-items: flex-end;
	gap: var(--b4);
}

.proje__baslik {
	flex: 1;
	min-width: 0;
	padding-bottom: 10px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--beyaz);
	text-wrap: balance;
}

.proje:hover,
.proje:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgb(35 37 37 / 0.3);
}

.proje:hover .proje__gorsel img,
.proje:focus-within .proje__gorsel img {
	transform: scale(1.06);
}

.proje:hover .ok-dugme,
.proje:focus-within .ok-dugme {
	background: var(--mavi);
}

.proje:hover .ok-dugme .simge:first-child,
.proje:focus-within .ok-dugme .simge:first-child {
	transform: translate(150%, -150%);
}

.proje:hover .ok-dugme .simge + .simge,
.proje:focus-within .ok-dugme .simge + .simge {
	transform: none;
}

.proje:has(.kart-baglanti:focus-visible) {
	outline: 3px solid var(--odak);
	outline-offset: 2px;
}

/* ============================================================ VİDEOLAR */
.izgara-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--b5);
}

.video {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--beyaz);
	border: 1px solid color-mix(in srgb, var(--acik-gri) 60%, var(--beyaz));
	border-radius: var(--kose-orta);
	overflow: hidden;
	transition: border-color 0.35s var(--egri), box-shadow 0.6s var(--egri), transform 0.6s var(--egri-yumusak);
}

.video__kapak {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--kagit);
}

.video__kapak > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--egri-yumusak);
}

.oynat {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kose-kucuk);
	background: var(--mavi);
	color: var(--beyaz);
	box-shadow: 0 6px 14px rgb(0 110 158 / 0.35);
	transition: background-color 0.3s var(--egri), transform 0.6s var(--egri-yumusak);
	pointer-events: none;
}

.oynat::after {   /* oynat karesinden yayılan halka */
	content: "";
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--mavi);
	border-radius: var(--kose-kucuk);
	opacity: 0;
	transform: scale(1);
}

.video:has(.kart-baglanti:hover) .oynat::after {
	animation: halka 1.4s var(--egri) infinite;
}

@keyframes halka {

	from {
		opacity: 0.9;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1.9);
	}
}

.oynat .simge {
	width: 18px;
	height: 18px;
	fill: currentcolor;
	stroke: none;
	margin-left: 2px;
}

.video:has(.kart-baglanti:hover) {
	border-color: var(--mavi);
	box-shadow: 0 16px 32px rgb(0 110 158 / 0.16);
	transform: translateY(-4px);
}

.video:has(.kart-baglanti:hover) .video__kapak > img {
	transform: scale(1.05);
}

.video:has(.kart-baglanti:hover) .oynat {
	background: var(--grafit);
	transform: translate(-50%, -50%) scale(1.08);
}

.video:has(.kart-baglanti:focus-visible) {
	outline: 3px solid var(--odak);
	outline-offset: 2px;
}

.video__sure {
	position: absolute;
	right: var(--b3);
	bottom: var(--b3);
	padding: 3px var(--b2);
	border-radius: var(--kose-kucuk);
	background: var(--beyaz);
	color: var(--grafit);
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgb(35 37 37 / 0.2);
}

.video__govde {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 18px var(--b5) var(--b5);
}

.video__ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--b2);
}

.video__konu {
	padding: 3px var(--b2);
	border-radius: var(--kose-kucuk);
	background: color-mix(in srgb, var(--mavi) 12%, var(--beyaz));
	color: var(--koyu-mavi);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.video__marka {
	font-size: 13px;
	line-height: 16px;
	color: var(--koyu-gri);
}

.video__ad {
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: var(--grafit);
}

.video__alt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--kagit);
}

.video__yt {
	display: inline-flex;
	align-items: center;
	gap: var(--b1);
	color: var(--koyu-mavi);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.video__yt .simge {
	width: 16px;
	height: 16px;
}

.video:has(.kart-baglanti:hover) .video__yt {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================ MARKALAR */
.markalar {
	padding-bottom: var(--b9);
}

.markalar .bolum__ic {
	gap: 0;
}

.kayan {
	position: relative;
	margin-top: var(--b7);
}

.kayan__iz {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	width: 100%;
	max-width: calc(var(--genis));
	margin-inline: auto;
	border-top: 2px solid var(--grafit);
}

.kayan__iz li {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: var(--b4);
	border-bottom: 1px solid var(--acik-gri);
	border-right: 1px solid var(--acik-gri);
}

.kayan__iz li:last-child {
	border-right: 0;
}

/* Marka sayısından bağımsız (Beest kararı, 16 Ekim 2026: gruplar, hizmetler ve
   markalar yönetim panelinden eklenip çıkarılır): hareketsiz kipte 960 px ve
   üstünde yedi markaya kadar
   tek satır, sütun sayısı marka sayısı kadar; daha çoksa satırlar dengelenir (8
   → 4 + 4, 9–10 beşli, 11–12 altılı, 13 ve
   üstü yedili). Hareket kipindeki kayan şerit her sayıda çalışır. */
@media (min-width: 960px) {

	:root:not(.hareket) .kayan__iz {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	:root:not(.hareket) .kayan__iz:has(> li:nth-child(8)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	:root:not(.hareket) .kayan__iz:has(> li:nth-child(9)) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	:root:not(.hareket) .kayan__iz:has(> li:nth-child(11)) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	:root:not(.hareket) .kayan__iz:has(> li:nth-child(13)) {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	:root:not(.hareket) .kayan__iz:has(> li:nth-child(8)):not(:has(> li:nth-child(9))) > li:nth-child(4n),
	:root:not(.hareket) .kayan__iz:has(> li:nth-child(9)):not(:has(> li:nth-child(11))) > li:nth-child(5n),
	:root:not(.hareket) .kayan__iz:has(> li:nth-child(11)):not(:has(> li:nth-child(13))) > li:nth-child(6n),
	:root:not(.hareket) .kayan__iz:has(> li:nth-child(13)) > li:nth-child(7n) {
		border-right: 0;
	}
}

/* logosu yüklenmemiş marka adıyla */
.marka-ad {
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--grafit);
	text-align: center;
}

.marka {
	display: block;
	width: auto;
	max-width: 100%;
	height: 24px;
	transition: transform 0.6s var(--egri-yumusak), filter 0.5s var(--egri), opacity 0.5s var(--egri);
}

.marka--siemens {
	height: 20px;
}

.marka--phoenix {
	height: 28px;
}

.marka--loobar {
	height: 30px;
}

.marka--murr {
	height: 22px;
}

.marka--schmersal {
	height: 26px;
}

.marka--pizzato {
	height: 28px;
}

.marka--teltonika {
	height: 18px;
}

/* ============================================================ SSS */
.sss-a {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	gap: var(--b8);
	align-items: start;
}

.sss-a__giris {
	display: grid;
	gap: var(--b4);
	align-content: start;
	justify-items: start;
}

.sss {
	border-top: 2px solid var(--grafit);
}

.sss__oge {
	border-bottom: 1px solid var(--acik-gri);
}

.sss__soru {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 40px;
	align-items: center;
	column-gap: var(--b4);
	width: 100%;
	padding: var(--b5) 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: var(--grafit);
}

.sss__no {
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 28px;
	color: var(--koyu-mavi);
}

.sss__soru-metni {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	transition: transform 0.5s var(--egri-yumusak);
}

.sss__soru:hover .sss__soru-metni {
	transform: translateX(4px);
}

.sss__isaret {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--beyaz);
	color: var(--grafit);
	transition: background-color 0.35s var(--egri), transform 0.6s var(--egri-yumusak);
}

.sss__isaret::before,
.sss__isaret::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	border-radius: 1px;
	background: currentcolor;
	transition: transform 0.5s var(--egri-yumusak);
}

.sss__isaret::after {
	transform: rotate(90deg);
}

.sss__soru:hover .sss__isaret,
.sss__oge[data-acik="true"] .sss__isaret {
	background: var(--mavi);
}

.sss__oge[data-acik="true"] .sss__isaret {
	transform: rotate(180deg);
}

.sss__oge[data-acik="true"] .sss__isaret::after {
	transform: rotate(0deg);
}

.sss__yanit {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.6s var(--egri-yumusak), visibility 0.6s;
}

.sss__yanit-ic {
	min-height: 0;
	overflow: hidden;
}

.sss__yanit-ic > p {
	margin: 0;
	padding: 0 56px var(--b5) 64px;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.4s var(--egri), transform 0.6s var(--egri-yumusak);
}

.sss__oge[data-acik="true"] .sss__yanit {
	grid-template-rows: 1fr;
	visibility: visible;
}

.sss__oge[data-acik="true"] .sss__yanit-ic > p {
	opacity: 1;
	transform: none;
	transition-delay: 0.12s;
}

@media (min-width: 960px) {

	.hareket .sss-a__giris {
		position: sticky;
		top: 140px;
	}
}

/* ============================================================ KAPANIŞ */
.kapanis {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.kapanis__ic {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: var(--b8);
	align-items: end;
}

.kapanis__metin {
	display: grid;
	gap: var(--b5);
	align-content: start;
	justify-items: start;
	padding-block: var(--b9);
}

.kapanis__baslik {
	max-width: 680px;
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -0.02em;
}

.kapanis__metin .govde-buyuk {
	max-width: 600px;
}

.kapanis__metin .dugme-dizisi {
	margin-top: var(--b2);
}

.kapanis__sure {
	display: inline-flex;
	align-items: center;
	gap: var(--b2);
	font-size: 14px;
	color: var(--acik-gri);
}

.kapanis__sure .simge {
	width: 16px;
	height: 16px;
	color: var(--mavi);
}

.kapanis__cizim {
	align-self: end;
	margin-bottom: -150px;
	padding-top: var(--b7);
	opacity: 0.8;
	pointer-events: none;
}

.kapanis__cizim > svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.kopyala-tel .simge {
	color: var(--mavi);
}

/* ============================================================ ALT BİLGİ */
.alt {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--koyu-gri);
}

.alt__ic {
	will-change: transform;
}

.alt__ust {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--b6);
	padding-block: var(--b8) var(--b7);
}

.alt__firma {
	display: grid;
	gap: var(--b4);
	align-content: start;
	justify-items: start;
}

.alt__logo {
	display: inline-flex;
	--logo-ust: #ececec;
	--logo-alt: #c5c6c6;
}

.alt__logo .logo {
	height: 40px;
}

.alt__adres {
	font-style: normal;
	font-size: 14px;
	line-height: 22px;
	max-width: 380px;
}

.alt__iletisim {
	display: grid;
	gap: var(--b2);
	font-size: 14px;
	line-height: 22px;
}

.alt__iletisim li {
	display: flex;
	align-items: center;
	gap: var(--b2);
	color: var(--beyaz);
}

.alt__iletisim .simge,
.alt__iletisim .wa-glif {
	width: 16px;
	height: 16px;
	color: var(--mavi);
}

.alt__baslik {
	margin-bottom: var(--b3);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--beyaz);
}

.alt__sutun ul {
	display: grid;
	gap: var(--b2);
	font-size: 14px;
	line-height: 22px;
}

.alt a {
	color: var(--acik-gri);
	text-decoration: none;
	transition: color 0.3s var(--egri);
}

.alt a:hover {
	color: var(--beyaz);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.alt__iletisim a {
	color: var(--beyaz);
}

.alt__yasal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b2) var(--b6);
	align-items: center;
	padding-block: var(--b5) calc(var(--b5) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--koyu-gri);
	font-size: 14px;
	line-height: 22px;
}

.alt__yasal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--b2) var(--b5);
}

.alt__yasal ul:nth-of-type(2) {
	margin-left: auto;
}

.alt__cerez {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--acik-gri);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.alt__cerez:hover {
	color: var(--beyaz);
}

.alt a.alt__yukari {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--beyaz);
	font-weight: 600;
}

.alt__yukari .simge {
	width: 16px;
	height: 16px;
	color: var(--mavi);
	transition: transform 0.5s var(--egri-yumusak);
}

.alt__yukari:hover .simge {
	transform: translateY(-3px);
}

/* ============================================================ DUYARLI */
@media (max-width: 1199px) {

	.hp__baslik {
		font-size: 30px;
		line-height: 38px;
	}

	.hp__acik {
		width: 400px;
	}

	.vitrin-kutu--buyuk .vitrin-kutu__cizim {
		padding: 48px 48px 8px;
	}

	.vitrin-kutu--buyuk .vitrin-kutu__baslik {
		font-size: 36px;
		line-height: 40px;
	}

	.vitrin__ara {
		grid-template-columns: 1fr;
		gap: var(--b4);
		padding: var(--b6);
	}

	.kapanis__baslik {
		font-size: 40px;
		line-height: 48px;
	}
}

@media (max-width: 959px) {

	.kapilar {
		grid-template-columns: 1fr;
	}

	.kapi {
		flex-direction: row;
	}

	.kapi .cizim-alani {
		width: 44%;
		flex: none;
		aspect-ratio: auto;
		min-height: 220px;
		border-bottom: 0;
		border-right: 1px solid var(--acik-gri);
	}

	.kapi__govde {
		align-content: center;
	}

	/* iki sütun: ilk iki grup tam satır, kalanlar ikişer, arama bandı tam satır;
   tek grup kaldıysa iki sütuna genişler */
	.vitrin {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vitrin__oge,
	.vitrin__oge--ara:nth-child(n) {
		height: auto;
	}

	.vitrin__oge:first-child {
		grid-row: auto;
	}

	.vitrin__oge--ara:nth-child(n) {
		grid-column: 1 / -1;
	}

	.vitrin:has(> .vitrin__oge--ara:nth-child(4n)) > .vitrin__oge:nth-last-child(2) {
		grid-column: auto;
	}

	.vitrin:has(> .vitrin__oge--ara:nth-child(even)) > .vitrin__oge:nth-last-child(2) {
		grid-column: span 2;
	}

	.vitrin:has(> .vitrin__oge--ara:nth-child(even)) > .vitrin__oge:nth-last-child(2) .vitrin-kutu__cizim {
		aspect-ratio: 2 / 1;
	}

	.vitrin-kutu--buyuk .vitrin-kutu__cizim,
	.vitrin-kutu--tek .vitrin-kutu__cizim {
		flex: none;
		aspect-ratio: 4 / 3;
	}

	.vitrin-kutu--genis {
		min-height: 220px;
	}

	.hp {
		flex-direction: column;
		height: auto;
	}

	.hp__panel {
		flex: none;
		min-height: 320px;
	}

	.hp__panel .hp__gorsel img {
		filter: brightness(0.8);
		transform: none;
	}

	.hp__dikey {
		display: none;
	}

	.hp__gorsel .ornek-not {
		opacity: 1;
	}

	.hp__acik {
		width: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.hp__liste li {
		opacity: 1;
		transform: none;
	}

	.hp__panel::after {
		background: linear-gradient(to top, rgb(35 37 37 / 0.95) 0%, rgb(35 37 37 / 0.8) 55%, rgb(35 37 37 / 0.3) 100%);
	}

	.izgara-3 {
		grid-template-columns: 1fr 1fr;
	}

	.kayan__iz {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.kayan__iz li:nth-child(4n) {
		border-right: 0;
	}

	.sss-a {
		grid-template-columns: 1fr;
		gap: var(--b6);
	}

	.kapanis__ic {
		grid-template-columns: 1fr;
	}

	.kapanis__cizim {
		display: none;
	}

	.alt__ust {
		grid-template-columns: 1fr 1fr;
	}

	.alt__firma {
		grid-column: 1 / -1;
	}

	.projeler__sahne {
		padding-block: var(--b8) var(--b7);
	}
}

@media (max-width: 599px) {

	.kapi {
		flex-direction: column;
	}

	.kapi .cizim-alani {
		width: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
		border-right: 0;
		border-bottom: 1px solid var(--acik-gri);
	}

	.kapi__govde {
		padding: var(--b4) var(--b4) var(--b5);
	}

	.vitrin {
		gap: var(--b3);
	}

	.vitrin-kutu--tek .vitrin-kutu__baslik {
		font-size: 15px;
		line-height: 20px;
	}

	.vitrin-kutu--tek .vitrin-kutu__marka {
		font-size: 12px;
		line-height: 16px;
	}

	.vitrin-kutu--tek .ok-dugme {
		display: none;
	}

	.vitrin-kutu--tek .vitrin-kutu__cizim {
		padding: var(--b3) var(--b3) 0;
	}

	.vitrin-kutu--tek .vitrin-kutu__alt {
		padding: var(--b2) var(--b3) var(--b3);
	}

	.vitrin-kutu--buyuk .vitrin-kutu__cizim {
		padding: 32px 24px 0;
	}

	.vitrin-kutu--buyuk .vitrin-kutu__alt {
		padding: var(--b5);
	}

	.vitrin-kutu--buyuk .vitrin-kutu__baslik {
		font-size: 32px;
		line-height: 36px;
	}

	.vitrin-kutu--genis {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 0;
	}

	.vitrin-kutu--genis .vitrin-kutu__alt {
		padding: var(--b5) var(--b3) var(--b5) var(--b5);
		gap: var(--b4);
	}

	.vitrin-kutu--genis .vitrin-kutu__cizim {
		padding: var(--b3) var(--b3) var(--b3) 0;
	}

	.vitrin-kutu--genis .vitrin-kutu__baslik {
		font-size: 22px;
		line-height: 28px;
	}

	.vitrin__ara {
		padding: var(--b5);
	}

	.vitrin__ara-baslik {
		font-size: 20px;
		line-height: 28px;
	}

	.vitrin__arama .dugme {
		padding-inline: var(--b4);
	}

	.hizmetler__sahne {
		padding-block: var(--b7);
	}

	.hp__panel {
		min-height: 300px;
		padding: var(--b5) var(--b4);
	}

	.hp__baslik {
		font-size: 26px;
		line-height: 32px;
	}

	.galeri__oge {
		flex-basis: 82%;
	}

	.galeri__ok {
		display: none;
	}

	.galeri__iz {
		gap: var(--b3);
	}

	.proje__icerik {
		padding: var(--b4);
	}

	.ornek-not {
		right: var(--b3);
		top: var(--b3);
	}

	.proje__baslik {
		font-size: 18px;
		line-height: 26px;
	}

	.projeler__sahne {
		padding-block: var(--b7) var(--b6);
		gap: var(--b5);
	}

	.izgara-3 {
		grid-template-columns: 1fr;
		gap: var(--b4);
	}

	.video__govde {
		gap: var(--b2);
		padding: var(--b4);
	}

	.kayan__iz {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kayan__iz li {
		min-height: 88px;
	}

	.kayan__iz li:nth-child(4n) {
		border-right: 1px solid var(--acik-gri);
	}

	.kayan__iz li:nth-child(2n) {
		border-right: 0;
	}

	.kayan__iz li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.sss__soru {
		grid-template-columns: 32px minmax(0, 1fr) 36px;
		column-gap: var(--b3);
		padding-block: var(--b4);
	}

	.sss__soru-metni {
		font-size: 18px;
		line-height: 26px;
	}

	.sss__isaret {
		width: 36px;
		height: 36px;
	}

	.sss__yanit-ic > p {
		padding: 0 44px var(--b4) 44px;
	}

	.kapanis__baslik {
		font-size: 32px;
		line-height: 40px;
	}

	.kapanis__metin {
		padding-block: var(--b8);
		justify-items: stretch;
	}

	.kapanis__metin .dugme-dizisi {
		display: grid;
	}

	.alt__ust {
		grid-template-columns: 1fr;
		gap: var(--b5);
		padding-block: var(--b7) var(--b6);
	}

	.alt__yasal ul:nth-of-type(2) {
		margin-left: 0;
	}
}

/* ============================================================ PAFTA DİZİNİ:
   sağ kenarda bölüm göstergesi
   Teknik çizim setindeki pafta listesi gibi: etkin bölüm numarası ve adıyla
   uzun çizgi; üzerine gelince tüm liste. */
.dizin {
	--d-renk: var(--grafit);
	--d-soluk: rgb(35 37 37 / 0.28);
	--d-zemin: rgb(255 255 255 / 0.86);
	position: fixed;
	right: max(18px, env(safe-area-inset-right, 0px));
	top: 50%;
	z-index: 80;
	transform: translate(calc(100% + 30px), -50%);
	opacity: 0;
	transition: transform 0.9s var(--egri-yumusak), opacity 0.6s var(--egri);
}

.dizin[data-ton="koyu"] {
	--d-renk: var(--beyaz);
	--d-soluk: rgb(255 255 255 / 0.3);
	--d-zemin: rgb(35 37 37 / 0.82);
}

.dizin.gorunur {
	transform: translate(0, -50%);
	opacity: 1;
}

.dizin ol {
	display: grid;
	gap: 2px;
}

.dizin a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	height: 22px;
	padding-left: 6px;
	color: var(--d-renk);
	text-decoration: none;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.dizin a::after {
	content: "";
	flex: none;
	width: 14px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--d-soluk);
	transition: width 0.6s var(--egri-yumusak), background-color 0.4s var(--egri);
}

.dizin__ad,
.dizin__no {
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.35s var(--egri), transform 0.6s var(--egri-yumusak);
	white-space: nowrap;
}

.dizin__ad {
	position: absolute;
	right: calc(100% + 2px);
	top: 50%;
	margin-top: -9px;
	padding: 1px 8px;
	border-radius: 2px;
	background: var(--d-zemin);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	pointer-events: none;
}

.dizin__no {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 11px;
	color: var(--mavi);
}

.dizin a.etkin::after {
	width: 30px;
	background: var(--mavi);
}

.dizin a.etkin .dizin__no {
	opacity: 1;
	transform: none;
}

.dizin:hover .dizin__ad,
.dizin:hover .dizin__no,
.dizin:focus-within .dizin__ad,
.dizin:focus-within .dizin__no {
	opacity: 1;
	transform: none;
}

.dizin a:hover::after {
	width: 22px;
	background: var(--d-renk);
}

.dizin a.etkin:hover::after {
	background: var(--mavi);
	width: 30px;
}

@media (max-width: 1099px) {

	.dizin {
		display: none;
	}
}

/* ============================================================ BİLDİRİM */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 300;
	max-width: min(560px, calc(100vw - 32px));
	padding: 14px 18px 14px 16px;
	border-radius: var(--kose-orta);
	background: rgb(35 37 37 / 0.94);
	color: var(--beyaz);
	box-shadow: 0 18px 50px rgb(0 0 0 / 0.3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 14px;
	line-height: 20px;
	transform: translate(-50%, 24px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.7s var(--egri-yumusak), opacity 0.4s var(--egri), visibility 0.7s;
}

.toast.acik {
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
}

.toast__ic {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.toast__ic::before {
	content: "";
	flex: none;
	width: 10px;
	height: 8px;
	background: var(--mavi);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.toast strong {
	color: var(--beyaz);
}

/* ============================================================ TEKLİF FORMU
   (iletişim kutusu) */
.teklif {
	--zemin: var(--beyaz);
	--yuzey: var(--beyaz);
	--metin: var(--koyu-gri);
	--baslik: var(--grafit);
	--baglanti: var(--koyu-mavi);
	--eylem: var(--koyu-mavi);
	--eylem-yazi: var(--beyaz);
	--eylem-vurgu: var(--grafit);
	--eylem-vurgu-yazi: var(--beyaz);
	--kontrol-kenari: var(--koyu-gri);
	--odak: var(--koyu-mavi);
	--vurgu: var(--mavi);
	width: min(1040px, calc(100vw - 32px));
	max-width: none;
	max-height: min(880px, calc(100dvh - 32px));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--beyaz);
	color: var(--metin);
	box-shadow: 0 40px 120px rgb(0 0 0 / 0.45);
	opacity: 0;
	transform: translateY(28px) scale(0.98);
	transition: opacity 0.45s var(--egri), transform 0.8s var(--egri-yumusak);
}

.teklif.acik {
	opacity: 1;
	transform: none;
}

.teklif::backdrop {
	background: rgb(26 28 28 / 0);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: background-color 0.5s var(--egri), backdrop-filter 0.5s var(--egri);
}

.teklif.acik::backdrop {
	background: rgb(26 28 28 / 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.teklif__kutu {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: inherit;
}

/* Üst satır (Teklif formu · Teklif isteyin) kalktı (Beest isteği, 16 Ekim
   2026): kapat düğmesi kutunun sağ üst köşesinde,
   gövde kayarken yerinde kalır; masaüstünde formun, telefonda koyu bağlam
   bölümünün sağ üstünde. */
.teklif__kapat {
	position: absolute;
	top: var(--b4);
	right: var(--b4);
	z-index: 2;
	display: grid;
	place-items: center;
	width: var(--kontrol);
	height: var(--kontrol);
	border: 1px solid var(--acik-gri);
	border-radius: 50%;
	background: var(--beyaz);
	color: var(--grafit);
	cursor: pointer;
	transition: transform 0.6s var(--egri-yumusak), background-color 0.3s;
}

.teklif__kapat:hover {
	transform: rotate(90deg);
	background: var(--kagit);
}

.teklif__govde {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	grid-auto-rows: max-content;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

/* kanal kutusu ayrı bölüm: masaüstünde sol sütunda bağlamın altında, telefonda
   formun altında (Akış: teklifin konusu,
   form, telefon ve WhatsApp) */
@media (min-width: 800px) {

	.teklif__govde {
		grid-template-rows: max-content 1fr;
	}

	.teklif__baglam {
		grid-column: 1;
		grid-row: 1;
	}

	.teklif__form-alani {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.teklif__kanal-alan {
		grid-column: 1;
		grid-row: 2;
		padding: 0 var(--b6) var(--b6);
	}

	.teklif__kanal-alan .teklif__kanal {
		margin-top: var(--b1);
	}

	/* sonuç mesajı sağ üstteki kapat düğmesinin altına girmesin */
	.teklif__sonuc .form-mesaji {
		margin-right: calc(var(--kontrol) + var(--b4) + var(--b2) - var(--b6));
	}
}

.teklif__tel a {
	color: inherit;
	text-decoration: none;
}

.form__dogrulama {
	display: grid;
	place-items: center;
	width: 300px;
	max-width: 100%;
	height: 65px;
	border: 1px dashed var(--kontrol-kenari);
	border-radius: var(--kose-kucuk);
	color: var(--metin);
	font-size: 14px;
	line-height: 22px;
}

.teklif__baglam {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--b3);
	padding: var(--b6);
}

.teklif__baglam::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(rgb(0 158 227 / 0.1) 1px, transparent 1px), linear-gradient(90deg, rgb(0 158 227 / 0.1) 1px, transparent 1px);
	background-size: 48px 48px;
	background-position: -1px -1px;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
	mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.teklif__baglam {
	isolation: isolate;
}

.teklif__ad {
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	color: var(--beyaz);
}

.teklif__metin {
	font-size: 15px;
	line-height: 24px;
}

.teklif__kanal {
	display: grid;
	gap: var(--b3);
	margin-top: var(--b5);
	padding-top: var(--b5);
	border-top: 1px solid var(--koyu-gri);
}

.teklif__kanal-baslik {
	font-size: 14px;
	font-weight: 600;
	color: var(--beyaz);
}

.teklif__tel {
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--beyaz);
	letter-spacing: -0.01em;
}

.teklif__form-alani {
	padding: var(--b6);
	display: grid;
	gap: var(--b4);
	align-content: start;
}

.form {
	display: grid;
	gap: var(--b4);
}

.form__not {
	font-size: 14px;
	line-height: 22px;
}

.alan-cifti {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--b4);
}

.alan {
	display: grid;
	gap: 6px;
	align-content: start;
}

.alan__etiket {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--grafit);
}

.alan__istege-bagli {
	font-weight: 400;
	color: var(--koyu-gri);
}

.alan__yardim {
	font-size: 13px;
	line-height: 18px;
	color: var(--koyu-gri);
}

.alan__girdi {
	width: 100%;
	min-height: var(--kontrol);
	padding: 10px var(--b3);
	border: 1px solid var(--koyu-gri);
	border-radius: var(--kose-kucuk);
	background: var(--beyaz);
	color: var(--grafit);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	transition: border-color 0.3s var(--egri), box-shadow 0.3s var(--egri);
}

textarea.alan__girdi {
	resize: vertical;
	min-height: 112px;
}

.alan__girdi:focus-visible {
	outline: none;
	border-color: var(--koyu-mavi);
	box-shadow: 0 0 0 3px rgb(0 110 158 / 0.2);
}

.alan__girdi[aria-invalid="true"] {
	border-color: var(--hata);
}

.alan__secim {
	position: relative;
}

.alan__secim select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	cursor: pointer;
}

.alan__secim .simge {
	position: absolute;
	right: 12px;
	top: 50%;
	translate: 0 -50%;
	pointer-events: none;
	color: var(--grafit);
}

.form__gonder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--b3) var(--b5);
	margin-top: var(--b2);
}

.form-mesaji {
	display: flex;
	gap: var(--b3);
	align-items: flex-start;
	padding: var(--b4);
	border-radius: var(--kose-orta);
	background: color-mix(in srgb, var(--mavi) 10%, var(--beyaz));
	color: var(--grafit);
	border: 1px solid color-mix(in srgb, var(--mavi) 40%, var(--beyaz));
}

.form-mesaji .simge {
	color: var(--koyu-mavi);
	margin-top: 3px;
}

.form-mesaji:focus {
	outline: none;
}

.alan,
.form__not,
.form__gonder {
	animation: none;
}

.teklif.acik .form > * {
	animation: alan-gel 0.8s var(--egri-yumusak) backwards;
}

.teklif.acik .form > *:nth-child(2) {
	animation-delay: 0.05s;
}

.teklif.acik .form > *:nth-child(3) {
	animation-delay: 0.1s;
}

.teklif.acik .form > *:nth-child(4) {
	animation-delay: 0.15s;
}

.teklif.acik .form > *:nth-child(5) {
	animation-delay: 0.2s;
}

.teklif.acik .form > *:nth-child(6) {
	animation-delay: 0.25s;
}

.teklif.acik .form > *:nth-child(7) {
	animation-delay: 0.3s;
}

.teklif.acik .form > *:nth-child(n + 8) {
	animation-delay: 0.35s;
}

@keyframes alan-gel {

	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (max-width: 799px) {

	.teklif {
		width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
		transform: translateY(40px);
	}

	.teklif__govde {
		grid-template-columns: 1fr;
	}

	.teklif__baglam {
		padding: var(--b5);
	}

	.teklif__kanal-alan {
		padding: 0 var(--b5) var(--b5);
	}

	.teklif__form-alani {
		padding: var(--b5);
	}

	.alan-cifti {
		grid-template-columns: 1fr;
	}

	.teklif__kapat {
		top: max(var(--b4), env(safe-area-inset-top, 0px));
	}

	.teklif__baglam {
		padding-top: max(var(--b5), env(safe-area-inset-top, 0px));
	}

	/* başlık kapat düğmesinin altına girmesin (dar telefonda kırılır) */
	.teklif__ad {
		padding-right: calc(var(--kontrol) + var(--b4) + var(--b2) - var(--b5));
	}
}

/* ============================================================ HAREKET KİPİ
   .hareket: betik ve kütüphaneler yüklendi, kullanıcı hareket azaltmayı
   seçmedi.
   .h-bekle: betik hazırlanırken açılış öğeleri gizli bekler (en çok 4 sn;
   sonra her şey görünür). */
.h-bekle .giris__baslik .satir > span,
.h-bekle .giris__ozet,
.h-bekle .giris__dugmeler,
.h-bekle .giris__ipucu,
.h-bekle .pano,
.h-bekle .bant .gs__oge,
.h-bekle .r-kart,
.h-bekle .r-baslik,
.h-bekle .r-metin,
.h-bekle .r-satir,
.h-bekle .kapanis__baslik {
	opacity: 0;
}

/* üst etiket: üçgen düşer, yazı belirir */
.hareket main .ust-etiket {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.7s var(--egri), transform 1s var(--egri-yumusak);
}

.hareket main .ust-etiket::before {
	transform: translateY(-6px) scaleY(0);
	opacity: 0;
	transition: transform 0.9s var(--egri-yumusak) 0.15s, opacity 0.4s var(--egri) 0.15s;
}

.hareket main .ust-etiket.gorundu {
	opacity: 1;
	transform: none;
}

.hareket main .ust-etiket.gorundu::before {
	transform: none;
	opacity: 1;
}

/* Lenis: yumuşak kaydırma kuralları */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* kelime kelime belirme için bölünmüş başlıklar */
.kelime {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}

.kelime > span {
	display: inline-block;
	will-change: transform;
}

.kapanis__baslik .kelime {
	overflow: visible;
}

/* proje galerisi: ekran kilitlenmez; oklarla, sürükleyerek ya da yatay
   kaydırmayla gezilir.
   Görsel kartın biraz genişinde durur: yatay gezinmede kartlardan yavaş
   akabilsin. */
.hareket .proje__gorsel img {
	width: 112%;
	max-width: none;
	margin-left: -6%;
}

.hareket .galeri__iz--serbest,
.hareket .galeri__iz--surukle {
	scroll-snap-type: none;
}

.hareket .galeri__iz--surukle,
.hareket .galeri__iz--surukle * {
	cursor: grabbing !important;
}

@media (hover: hover) and (pointer: fine) {

	.hareket .galeri__iz {
		-webkit-user-select: none;
		user-select: none;
	}

	.hareket .galeri__iz img,
	.hareket .galeri__iz a {
		-webkit-user-drag: none;
	}
}

/* markalar: sonsuz kayan şerit */
.hareket .kayan {
	overflow: hidden;
	border-top: 2px solid var(--grafit);
	border-bottom: 1px solid var(--acik-gri);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	max-width: calc(var(--genis) + 2 * var(--kenar) + 240px);
	margin-inline: auto;
}

.hareket .kayan__iz {
	display: flex;
	width: max-content;
	max-width: none;
	border-top: 0;
	margin: 0;
	will-change: transform;
}

.hareket .kayan__iz li {
	flex: none;
	min-height: 132px;
	padding: var(--b5) 56px;
	border: 0;
	border-right: 1px solid var(--kagit);
}

.hareket .kayan:hover .marka {
	opacity: 0.45;
	filter: grayscale(1);
}

.hareket .kayan .kayan__iz li:hover .marka {
	opacity: 1;
	filter: none;
	transform: scale(1.08);
}

/* kapanış başlığı: kaydırdıkça kelimeler aydınlanır */
.hareket .kapanis__baslik .kelime > span {
	opacity: 0.16;
}

/* hareket azaltma: her şey yerinde, sürekli hareketler durur */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.bant__isik {
		display: none;
	}

	.ik .ik-tik {
		stroke-dashoffset: 0;
	}

	.ik .ik-duman {
		opacity: 0;
	}
}

/* tuvalde tam boy çerçeve: sayfa kaymaz, bölüm göstergesi gizli */
.cerceve .dizin {
	display: none !important;
}