/* ==========================================================================
   VARS ENERJI — Tema stilleri
   1. Tasarim token'lari
   2. Temel / reset
   3. Yardimci siniflar
   4. Buton & rozet
   5. Ust bar + header + navigasyon
   6. Hero
   7. Istatistik seridi
   8. Kart sistemleri (hizmet / urun / blog)
   9. Bolum: hakkimizda, cta, galeri
   10. Ic sayfalar
   11. Footer
   12. Form & yardimci bilesenler
   13. Duyarli (responsive)
   ========================================================================== */

/* 1. TASARIM TOKEN'LARI
   ------------------------------------------------------------------------ */
:root {
	/* Marka mavileri — logo gradyaninden */
	--vs-blue-700: #0754D6;
	--vs-blue-600: #0866E7;
	--vs-blue-400: #18A0FF;

	/* Marka grileri — logo gradyaninden */
	--vs-gray-400: #AEB6C1;
	--vs-gray-300: #C8D0DA;
	--vs-gray-200: #D4DAE2;

	/* Muhendislik lacivertleri (koyu yuzeyler) */
	--vs-ink-900: #060F1E;
	--vs-ink-800: #0A1628;
	--vs-ink-700: #101E33;
	--vs-ink-600: #1B2C45;
	--vs-ink-500: #2A3D59;

	/* Notrler */
	--vs-white: #FFFFFF;
	--vs-paper: #F6F8FB;
	--vs-paper-2: #EDF1F6;
	--vs-line: #E2E8F0;
	--vs-line-soft: #EFF3F8;

	/* Metin */
	--vs-text: #16233A;
	--vs-text-soft: #51637E;
	--vs-text-mute: #7B8CA5;
	--vs-text-invert: #FFFFFF;
	--vs-text-invert-soft: #B7C4D6;

	/* Durum */
	--vs-success: #12A150;
	--vs-warning: #E8901A;
	--vs-danger: #DC2B3A;

	/* Gradyanlar */
	--vs-grad-blue: linear-gradient(135deg, var(--vs-blue-400) 0%, var(--vs-blue-600) 52%, var(--vs-blue-700) 100%);
	--vs-grad-blue-v: linear-gradient(180deg, var(--vs-blue-400) 0%, var(--vs-blue-600) 50%, var(--vs-blue-700) 100%);
	--vs-grad-steel: linear-gradient(180deg, var(--vs-gray-400) 0%, var(--vs-gray-200) 54%, var(--vs-gray-300) 100%);
	--vs-grad-ink: linear-gradient(155deg, #0A1628 0%, #060F1E 62%, #040B16 100%);

	/* Tipografi */
	--vs-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--vs-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--vs-font-logo: "Michroma", "Inter", sans-serif;

	/* Olcek */
	--vs-container: 1240px;
	--vs-container-wide: 1440px;
	--vs-gutter: 24px;
	--vs-radius: 4px;
	--vs-radius-lg: 8px;
	--vs-radius-xl: 14px;

	/* Golgeler */
	--vs-shadow-sm: 0 1px 2px rgba(10, 22, 40, .06), 0 1px 3px rgba(10, 22, 40, .05);
	--vs-shadow: 0 4px 12px rgba(10, 22, 40, .07), 0 2px 4px rgba(10, 22, 40, .04);
	--vs-shadow-md: 0 12px 28px rgba(10, 22, 40, .10), 0 4px 8px rgba(10, 22, 40, .05);
	--vs-shadow-lg: 0 24px 56px rgba(10, 22, 40, .14), 0 8px 16px rgba(10, 22, 40, .06);
	--vs-shadow-blue: 0 12px 30px rgba(8, 102, 231, .28);

	/* Gecis */
	--vs-ease: cubic-bezier(.22, .61, .36, 1);
	--vs-t: 260ms var(--vs-ease);

	/* Header yuksekligi */
	--vs-header-h: 112px;
}

/* 2. TEMEL / RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--vs-header-h) + 20px);
}

body {
	margin: 0;
	font-family: var(--vs-font);
	font-size: 16px;
	line-height: 1.68;
	color: var(--vs-text);
	background: var(--vs-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.021em;
	color: var(--vs-ink-800);
	text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.4rem + 3.2vw, 3.65rem); font-weight: 800; letter-spacing: -.032em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem);  font-weight: 800; letter-spacing: -.028em; }
h3 { font-size: clamp(1.28rem, 1.05rem + .85vw, 1.65rem); }
h4 { font-size: 1.16rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: .93rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--vs-blue-600); text-decoration: none; transition: color var(--vs-t); }
a:hover { color: var(--vs-blue-700); }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* hidden ozniteligi her display kuralini ezmelidir.
   Aksi halde display:flex / grid tasiyan bir ogeye hidden verildiginde
   oge gorunur kalir; cerez tercih panelinde bu sekilde bir hata olustu. */
[hidden] { display: none !important; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .42em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--vs-ink-800); }

blockquote {
	margin: 1.8em 0;
	padding: 1.15em 1.6em;
	border-left: 3px solid var(--vs-blue-600);
	background: var(--vs-paper);
	color: var(--vs-text-soft);
	font-size: 1.06rem;
	border-radius: 0 var(--vs-radius) var(--vs-radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }

code, kbd, pre, samp { font-family: var(--vs-font-mono); font-size: .9em; }
code { background: var(--vs-paper-2); padding: .16em .42em; border-radius: 3px; color: var(--vs-blue-700); }
pre { background: var(--vs-ink-800); color: #DCE6F5; padding: 1.2em 1.4em; border-radius: var(--vs-radius-lg); overflow-x: auto; }
pre code { background: none; color: inherit; padding: 0; }

hr { border: 0; height: 1px; background: var(--vs-line); margin: 2.6em 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .95rem; }
th, td { padding: .78em 1em; text-align: left; border-bottom: 1px solid var(--vs-line); vertical-align: top; }
th { background: var(--vs-paper); font-weight: 700; color: var(--vs-ink-800); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: var(--vs-paper); }

::selection { background: var(--vs-blue-600); color: #fff; }

:focus-visible {
	outline: 2px solid var(--vs-blue-400);
	outline-offset: 3px;
	border-radius: 2px;
}

.vs-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	padding: .8em 1.4em; background: var(--vs-blue-600); color: #fff; font-weight: 600;
}
.vs-skip-link:focus { left: 8px; top: 8px; color: #fff; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 3. YARDIMCI SINIFLAR
   ------------------------------------------------------------------------ */
.vs-container {
	width: 100%;
	max-width: var(--vs-container);
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
}
.vs-container--wide { max-width: var(--vs-container-wide); }
.vs-container--narrow { max-width: 860px; }

.vs-section { padding: clamp(64px, 7vw, 108px) 0; position: relative; }
.vs-section--tight { padding: clamp(48px, 5vw, 76px) 0; }
.vs-section--paper { background: var(--vs-paper); }
.vs-section--ink { background: var(--vs-ink-800); color: var(--vs-text-invert); }
.vs-section--ink h1, .vs-section--ink h2, .vs-section--ink h3, .vs-section--ink h4 { color: #fff; }

/* Bolum basligi */
.vs-eyebrow {
	display: inline-flex; align-items: center; gap: .62em;
	font-family: var(--vs-font-mono);
	font-size: .74rem; font-weight: 600;
	letter-spacing: .17em; text-transform: uppercase;
	color: var(--vs-blue-600);
	margin-bottom: 1em;
}
.vs-eyebrow::before {
	content: ""; width: 26px; height: 2px;
	background: var(--vs-grad-blue); border-radius: 2px; flex: none;
}
.vs-section--ink .vs-eyebrow { color: var(--vs-blue-400); }

.vs-section-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.vs-section-head--center { margin-inline: auto; text-align: center; }
.vs-section-head--center .vs-eyebrow::before { display: none; }
.vs-section-head p {
	font-size: 1.075rem; color: var(--vs-text-soft); margin-top: .85em; margin-bottom: 0;
	text-wrap: pretty;
}
.vs-section--ink .vs-section-head p { color: var(--vs-text-invert-soft); }

.vs-section-head--split {
	max-width: none; display: flex; align-items: flex-end;
	justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.vs-section-head--split > div { max-width: 660px; }

/* Blueprint / teknik desen */
.vs-grid-bg { position: relative; }
.vs-grid-bg::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
	background-size: 64px 64px;
	/* Metnin arkasinda desen gorunmesin: sag-ust bolgede zayif kalsin */
	mask-image: radial-gradient(ellipse 70% 60% at 72% 34%, #000 12%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 72% 34%, #000 12%, transparent 72%);
}

/* Logo geometrisinden turetilmis kose aksani */
.vs-chevron-accent { position: relative; overflow: hidden; }
.vs-chevron-accent::after {
	content: ""; position: absolute; right: -60px; top: -60px;
	width: 340px; height: 340px;
	background: var(--vs-grad-blue); opacity: .07;
	clip-path: polygon(0 0, 46% 0, 100% 62%, 100% 100%, 54% 100%, 0 38%);
	pointer-events: none;
}

/* 4. BUTON & ROZET
   ------------------------------------------------------------------------ */
.vs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	padding: .92em 1.75em;
	font-family: inherit; font-size: .875rem; font-weight: 650;
	letter-spacing: .028em;
	line-height: 1.2;
	border: 1.5px solid transparent;
	border-radius: var(--vs-radius);
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition: background var(--vs-t), color var(--vs-t), border-color var(--vs-t),
	            box-shadow var(--vs-t), transform 140ms var(--vs-ease);
	-webkit-appearance: none;
	appearance: none;
}
.vs-btn:active { transform: translateY(1px); }
.vs-btn svg { width: 1.05em; height: 1.05em; flex: none; }

.vs-btn--primary {
	background: var(--vs-grad-blue);
	background-size: 160% 160%;
	background-position: 0% 50%;
	color: #fff;
	box-shadow: var(--vs-shadow-blue);
}
.vs-btn--primary:hover { color: #fff; background-position: 100% 50%; box-shadow: 0 16px 38px rgba(8,102,231,.38); }

.vs-btn--ghost {
	background: transparent; color: var(--vs-ink-800); border-color: var(--vs-line);
}
.vs-btn--ghost:hover { color: var(--vs-blue-700); border-color: var(--vs-blue-600); background: rgba(8,102,231,.045); }

.vs-btn--on-dark {
	background: rgba(255,255,255,.07); color: #fff;
	border-color: rgba(255,255,255,.22);
	backdrop-filter: blur(8px);
}
.vs-btn--on-dark:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

.vs-btn--white { background: #fff; color: var(--vs-ink-800); }
.vs-btn--white:hover { color: var(--vs-blue-700); box-shadow: var(--vs-shadow-md); }

.vs-btn--lg { padding: 1.08em 2.15em; font-size: .95rem; }
.vs-btn--sm { padding: .68em 1.2em; font-size: .8rem; }
.vs-btn--block { width: 100%; }

/* Metin bagi (ok ile) */
.vs-link-arrow {
	display: inline-flex; align-items: center; gap: .5em;
	font-size: .875rem; font-weight: 650; letter-spacing: .02em;
	color: var(--vs-blue-600);
}
.vs-link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--vs-t); }
.vs-link-arrow:hover svg { transform: translateX(4px); }

.vs-badge {
	display: inline-flex; align-items: center; gap: .45em;
	padding: .34em .8em;
	font-family: var(--vs-font-mono);
	font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	border-radius: 100px;
	background: rgba(8,102,231,.09); color: var(--vs-blue-700);
}
.vs-badge--stock { background: rgba(18,161,80,.1); color: var(--vs-success); }
.vs-badge--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* 5. HEADER + NAVIGASYON
   ------------------------------------------------------------------------ */
.vs-header {
	position: sticky; top: 0; z-index: 300;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--vs-line);
	transition: box-shadow var(--vs-t), background var(--vs-t);
}
.vs-header.is-stuck { box-shadow: var(--vs-shadow); background: rgba(255,255,255,.97); }

/* Dil secici */
.vs-langs { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.vs-langs__item {
	font-family: var(--vs-font-mono);
	font-size: .72rem; font-weight: 700; letter-spacing: .08em;
	color: var(--vs-text-soft);
	padding: .5em .62em;
	border-radius: var(--vs-radius);
	transition: color var(--vs-t), background var(--vs-t);
}
.vs-langs__item:hover { color: var(--vs-blue-600); background: var(--vs-paper); }
.vs-langs__item.is-on { color: var(--vs-ink-800); background: var(--vs-paper); }
.vs-langs__item + .vs-langs__item { position: relative; }
.vs-langs__item + .vs-langs__item::before {
	content: ""; position: absolute; left: -2px; top: 50%;
	width: 1px; height: 12px; margin-top: -6px;
	background: var(--vs-line);
}
/* Mobil panelde tam genislik */
.vs-langs--block { display: flex; justify-content: center; gap: 4px; }
.vs-langs--block .vs-langs__item { flex: 1 1 auto; text-align: center; padding: .7em; }

/* Alt menusu olan ogeler bir sayfaya gitmez, baslik gorevi gorur.
   Kendi sayfalarina alt menunun sonundaki eylem baglantisindan gidilir. */
.vs-nav__heading > a { cursor: default; }

/* Bu baglanti bir menu kalemi degil, bolumun tamamina goturen bir
   eylemdir; ayri zemin ve ok ile menuden gorsel olarak ayrilir. */
.vs-nav .sub-menu .vs-nav__overview {
	margin-top: 8px; padding-top: 8px;
	border-top: 1px solid var(--vs-line);
}
.vs-nav .sub-menu .vs-nav__overview > a {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	background: #f4f8ff;
	color: var(--vs-blue-600);
	font-weight: 600;
	border-radius: var(--vs-radius);
}
.vs-nav .sub-menu .vs-nav__overview > a::after {
	content: ""; flex: none;
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--vs-t);
}
.vs-nav .sub-menu .vs-nav__overview > a:hover,
.vs-nav .sub-menu .vs-nav__overview > a:focus-visible {
	background: #e6f0ff;
	color: var(--vs-blue-700);
}
.vs-nav .sub-menu .vs-nav__overview > a:hover::after {
	transform: rotate(-45deg) translate(2px, 2px);
}

/* Sol logo | menu | sag CTA
   Menu, logo ile CTA arasinda kalan alanin ortasina oturur (optik denge).
   Logo, CTA'dan belirgin genis oldugu icin gercek ekran merkezi kullanildiginda
   sol bosluk daralip menu logoya yapisik gorunuyordu. */
.vs-header__in {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--vs-header-h);
}
.vs-header__in > .vs-logo,
.vs-header__in > .vs-header__actions { flex: none; }
.vs-header__in > .vs-nav { margin-inline: auto; }

/* Header, menunun gercek merkeze oturmasi icin daha genis bir alan kullanir */
.vs-header .vs-container--wide { max-width: 1600px; }

/* Dar masaustunde menu sigmazsa once yazi tipini kucult, ortalamayi bozma.
   Yuksek DPI ekranlarda (orn. 2560px panel, %200 olcekleme) CSS genisligi
   1280px'e duser; menu bu genislikte hala yatay olarak sigmalidir. */
@media (max-width: 1500px) {
	.vs-header__in { gap: 16px; }
	.vs-nav__list > li > a { font-size: .82rem; padding: .7em .72em; }
	.vs-nav__list > li > a::after { left: .72em; right: .72em; }
}

@media (max-width: 1320px) {
	.vs-header__in { gap: 12px; }
	.vs-nav__list > li > a { font-size: .78rem; padding: .68em .58em; }
	.vs-nav__list > li > a::after { left: .58em; right: .58em; }
	.vs-logo__mark { width: 66px; }
	.vs-logo { gap: 12px; }
	.vs-header__actions .vs-btn { padding: .72em 1.05em; font-size: .8rem; }
}

/* Logo */
.vs-logo { display: inline-flex; align-items: center; gap: 16px; flex: none; }
.vs-logo__mark { width: 82px; height: auto; flex: none; }
.vs-logo img { max-height: 82px; width: auto; }
.vs-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.vs-logo__name {
	font-family: var(--vs-font-logo);
	font-size: 1.24rem; font-weight: 400; letter-spacing: .002em;
	color: var(--vs-ink-800); text-transform: uppercase;
	white-space: nowrap;
	/* Michroma tek agirlikli — ince kontur ile kalinlastiriyoruz */
	-webkit-text-stroke: .7px currentColor;
	paint-order: stroke fill;
}
.vs-logo__name span { color: var(--vs-blue-600); }
.vs-logo__tag {
	font-family: var(--vs-font-mono);
	font-size: .6rem; font-weight: 600; letter-spacing: .145em;
	text-transform: uppercase; color: var(--vs-text-mute); margin-top: 6px;
	/* Sarilirsa logo sutunu daralir ve header gridinin simetrisi bozulur */
	white-space: nowrap;
}

/* Ana menu */
/* Ogeler arasi etkin bosluk ~29px (gap + baglanti ic bosluklari) */
.vs-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.vs-nav__list li { margin: 0; position: relative; }

.vs-nav__list > li > a {
	display: flex; align-items: center; gap: .4em;
	padding: .72em .95em;
	font-size: .885rem; font-weight: 600; letter-spacing: .005em;
	color: var(--vs-ink-700);
	border-radius: var(--vs-radius);
	position: relative;
	transition: color var(--vs-t), background var(--vs-t);
}
.vs-nav__list > li > a::after {
	content: ""; position: absolute; left: .95em; right: .95em; bottom: .38em;
	height: 2px; border-radius: 2px; background: var(--vs-grad-blue);
	transform: scaleX(0); transform-origin: left; transition: transform var(--vs-t);
}
.vs-nav__list > li > a:hover,
.vs-nav__list > li.current-menu-item > a,
.vs-nav__list > li.current-menu-parent > a,
.vs-nav__list > li.current-menu-ancestor > a { color: var(--vs-blue-700); }
.vs-nav__list > li > a:hover::after,
.vs-nav__list > li.current-menu-item > a::after,
.vs-nav__list > li.current-menu-parent > a::after,
.vs-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Acilir menu — 1. seviyede asagi ok */
.vs-nav__list > li.menu-item-has-children > a::before {
	content: ""; width: 0; height: 0; order: 2;
	border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor; opacity: .5; margin-left: .1em;
	transition: transform var(--vs-t);
}
.vs-nav__list > li.menu-item-has-children:hover > a::before { transform: rotate(180deg); }

/* Alt menude (2. seviye ve sonrasi) saga bakan ok */
.vs-nav .sub-menu .menu-item-has-children > a {
	display: flex; align-items: center; justify-content: space-between; gap: .8em;
}
.vs-nav .sub-menu .menu-item-has-children > a::after {
	content: ""; flex: none;
	width: 7px; height: 7px;
	border-right: 1.6px solid currentColor;
	border-top: 1.6px solid currentColor;
	transform: rotate(45deg);
	opacity: .45;
	transition: opacity var(--vs-t), transform var(--vs-t);
}
.vs-nav .sub-menu .menu-item-has-children:hover > a::after,
.vs-nav .sub-menu .menu-item-has-children:focus-within > a::after {
	opacity: 1; transform: rotate(45deg) translate(1.5px, -1.5px);
}

.vs-nav .sub-menu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
	min-width: 268px; margin: 0; padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-top: 2px solid var(--vs-blue-600);
	border-radius: var(--vs-radius-lg);
	box-shadow: var(--vs-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity var(--vs-t), transform var(--vs-t), visibility var(--vs-t);
}
.vs-nav li:hover > .sub-menu,
.vs-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.vs-nav .sub-menu li { margin: 0; }
.vs-nav .sub-menu a {
	display: block; padding: .68em .85em;
	font-size: .855rem; font-weight: 550; color: var(--vs-text-soft);
	border-radius: var(--vs-radius);
	transition: background var(--vs-t), color var(--vs-t), padding-left var(--vs-t);
}
.vs-nav .sub-menu a:hover,
.vs-nav .sub-menu .current-menu-item > a {
	background: var(--vs-paper); color: var(--vs-blue-700); padding-left: 1.15em;
}
.vs-nav .sub-menu .sub-menu { top: -8px; left: calc(100% + 4px); }

/* Mobil menu icindeki CTA — masaustunde gizli */
.vs-nav__mobile-cta { display: none; }

/* Header aksiyonlari */
.vs-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Mobil menu butonu */
.vs-burger {
	display: none;
	width: 44px; height: 44px; padding: 0;
	align-items: center; justify-content: center;
	background: transparent; border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius); cursor: pointer;
}
.vs-burger span {
	display: block; position: relative;
	width: 19px; height: 2px; border-radius: 2px; background: var(--vs-ink-800);
	transition: background 120ms linear;
}
.vs-burger span::before, .vs-burger span::after {
	content: ""; position: absolute; left: 0; width: 19px; height: 2px;
	border-radius: 2px; background: var(--vs-ink-800);
	transition: transform var(--vs-t), top var(--vs-t);
}
.vs-burger span::before { top: -6px; }
.vs-burger span::after  { top: 6px; }
.vs-burger[aria-expanded="true"] span { background: transparent; }
.vs-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.vs-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* 6. HERO
   ------------------------------------------------------------------------ */
.vs-hero {
	position: relative;
	background: var(--vs-grad-ink);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.vs-hero__media {
	position: absolute; inset: 0; z-index: -2;
}
.vs-hero__media img {
	width: 100%; height: 100%; object-fit: cover;
	opacity: .5;
	filter: saturate(.88) contrast(1.02);
}
.vs-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		/* Soldaki metin alanini korumak icin yatay koyulastirma */
		linear-gradient(100deg, rgba(4,11,22,.95) 0%, rgba(5,13,26,.86) 30%, rgba(6,15,30,.5) 60%, rgba(6,15,30,.24) 100%),
		/* Alt seridi (pillars) oturtan dikey koyulastirma */
		linear-gradient(180deg, rgba(6,15,30,.34) 0%, transparent 26%, rgba(6,15,30,.62) 100%);
}
.vs-hero__in {
	position: relative; z-index: 2;
	padding-block: clamp(76px, 9vw, 148px);
	display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(40px, 5vw, 76px); align-items: center;
}
.vs-hero__content { max-width: 660px; }

.vs-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .7em;
	padding: .48em 1.05em;
	font-family: var(--vs-font-mono);
	font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
	color: var(--vs-blue-400);
	background: rgba(24,160,255,.1);
	border: 1px solid rgba(24,160,255,.26);
	border-radius: 100px;
	margin-bottom: 1.5em;
}
.vs-hero__eyebrow .vs-dot {
	width: 6px; height: 6px; border-radius: 50%; background: var(--vs-blue-400); flex: none;
	box-shadow: 0 0 0 4px rgba(24,160,255,.2);
	animation: vsPulse 2.4s var(--vs-ease) infinite;
}
@keyframes vsPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(24,160,255,.22); }
	50%      { box-shadow: 0 0 0 7px rgba(24,160,255,0); }
}

.vs-hero h1 { color: #fff; margin-bottom: .5em; }
.vs-hero h1 em {
	font-style: normal;
	background: linear-gradient(100deg, var(--vs-blue-400), #6FC5FF 55%, var(--vs-gray-200));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.vs-hero__lead {
	font-size: clamp(1.03rem, .96rem + .35vw, 1.17rem);
	color: var(--vs-text-invert-soft);
	max-width: 56ch; margin-bottom: 2.2em;
	text-wrap: pretty;
}
.vs-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Hero yan panel — teknik "readout" karti */
.vs-hero__panel {
	background: rgba(255,255,255,.045);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--vs-radius-xl);
	padding: 30px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 28px 64px rgba(0,0,0,.34);
}
.vs-hero__panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding-bottom: 18px; margin-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,.11);
}
.vs-hero__panel-title {
	font-size: .95rem; font-weight: 700; color: #fff; margin: 0; letter-spacing: -.01em;
}
.vs-hero__panel-sub {
	font-family: var(--vs-font-mono); font-size: .66rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--vs-blue-400);
}
.vs-hero__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(255,255,255,.08); border-radius: var(--vs-radius-lg); overflow: hidden; }
.vs-hero__metric { background: rgba(9,20,36,.62); padding: 18px 16px; }
.vs-hero__metric dt {
	font-family: var(--vs-font-mono); font-size: .63rem; font-weight: 500;
	letter-spacing: .13em; text-transform: uppercase; color: var(--vs-text-invert-soft);
	margin-bottom: 7px;
}
.vs-hero__metric dd {
	margin: 0; font-size: 1.42rem; font-weight: 800; color: #fff; letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
}
.vs-hero__metric dd small { font-size: .58em; font-weight: 600; color: var(--vs-blue-400); margin-left: .18em; }

/* --- Hero: tam genislik varyanti (mock duzeni) --- */
.vs-hero--full .vs-hero__in {
	display: block;
	padding-block: clamp(88px, 11vw, 176px) 0;
}
.vs-hero--full .vs-hero__content { max-width: 780px; }
.vs-hero--full h1 {
	text-transform: uppercase;
	font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.15rem);
	letter-spacing: -.035em;
	line-height: 1.08;
	font-weight: 800;
}
.vs-hero__rule {
	width: 64px; height: 3px; border-radius: 3px;
	background: var(--vs-grad-blue);
	margin: 0 0 1.6em;
}

/* Hero alti sutun seridi (pillars) */
.vs-pillars {
	position: relative; z-index: 2;
	margin-top: clamp(56px, 7vw, 104px);
	border-top: 1px solid rgba(255,255,255,.12);
	display: grid; grid-template-columns: repeat(4, 1fr);
}
.vs-pillar {
	display: flex; align-items: flex-start; gap: 15px;
	padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 30px);
	border-right: 1px solid rgba(255,255,255,.12);
}
.vs-pillar:last-child { border-right: 0; }
.vs-pillar:first-child { padding-left: 0; }
.vs-pillar__ic {
	width: 44px; height: 44px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--vs-radius-lg);
	background: rgba(24,160,255,.13);
	border: 1px solid rgba(24,160,255,.26);
	color: var(--vs-blue-400);
}
.vs-pillar__ic svg { width: 21px; height: 21px; }
.vs-pillar__txt h3 {
	font-size: .84rem; font-weight: 700; color: #fff;
	letter-spacing: .09em; text-transform: uppercase;
	margin: 0 0 .42em;
}
.vs-pillar__txt p {
	margin: 0; font-size: .82rem; line-height: 1.5;
	color: var(--vs-text-invert-soft);
}

/* --- Cozum alanlari (sol baslik + gorsel kartlar) --- */
.vs-solutions {
	display: grid;
	grid-template-columns: minmax(0, .74fr) minmax(0, 2.26fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}
.vs-solutions__head h2 { margin-bottom: .55em; }
.vs-solutions__head p { color: var(--vs-text-soft); font-size: 1.02rem; margin-bottom: 1.8em; }

.vs-solutions__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.vs-solution {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4 / 3.6;
	border-radius: var(--vs-radius-lg);
	background: var(--vs-ink-800);
	isolation: isolate;
	transition: transform var(--vs-t), box-shadow var(--vs-t);
}
.vs-solution:hover { transform: translateY(-5px); box-shadow: var(--vs-shadow-lg); }
/* Gorsellerin ust bandinda cozum basligi yaziyor. Kart basligiyla tekrar
   olusturmamasi icin cerceveyi yukari tasirip o bandi disarida birakiyoruz.
   Yuzde bazli oldugu icin farkli en-boy oranlarinda da calisir. */
.vs-solution img {
	position: absolute; z-index: -2;
	top: -24%; left: 0;
	width: 100%; height: 124%;
	object-fit: cover;
	transition: transform 620ms var(--vs-ease);
}
.vs-solution:hover img { transform: scale(1.07); }
.vs-solution::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(6,15,30,.16) 0%, rgba(6,15,30,.52) 46%, rgba(6,15,30,.93) 100%);
	transition: background var(--vs-t);
}
.vs-solution:hover::after {
	background: linear-gradient(180deg, rgba(7,84,214,.24) 0%, rgba(6,15,30,.6) 46%, rgba(6,15,30,.95) 100%);
}
.vs-solution__ic {
	position: absolute; top: 18px; left: 18px;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	color: var(--vs-blue-700);
	box-shadow: 0 6px 18px rgba(0,0,0,.26);
	transition: background var(--vs-t), color var(--vs-t);
}
.vs-solution__ic svg { width: 21px; height: 21px; }
.vs-solution:hover .vs-solution__ic { background: var(--vs-grad-blue); color: #fff; }
.vs-solution__body { position: absolute; inset: auto 0 0 0; padding: 20px 18px 22px; }
.vs-solution__body h3 {
	color: #fff; font-size: .98rem; line-height: 1.32;
	margin: 0 0 .45em; letter-spacing: -.014em;
}
.vs-solution__body p {
	margin: 0; font-size: .8rem; line-height: 1.5;
	color: rgba(255,255,255,.76);
}

/* --- Neden VARS --- */
.vs-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 4.5vw, 72px); align-items: center; }
.vs-why__list { display: grid; gap: 2px; background: var(--vs-line); border-radius: var(--vs-radius-lg); overflow: hidden; }
.vs-why__item {
	display: flex; align-items: flex-start; gap: 16px;
	background: #fff; padding: 22px 24px;
	transition: background var(--vs-t);
}
.vs-why__item:hover { background: var(--vs-paper); }
.vs-why__num {
	flex: none; width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--vs-grad-blue); color: #fff;
	font-family: var(--vs-font-mono); font-size: .78rem; font-weight: 600;
}
.vs-why__item h3 { font-size: 1rem; margin: 0 0 .38em; letter-spacing: -.015em; }
.vs-why__item p { margin: 0; font-size: .89rem; color: var(--vs-text-soft); line-height: 1.6; }

/* --- Teknoloji seridi --- */
.vs-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.vs-tech__col {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--vs-radius-lg);
	padding: 28px 26px;
}
.vs-tech__col h3 {
	font-size: .82rem; font-weight: 700; color: #fff;
	letter-spacing: .12em; text-transform: uppercase;
	margin: 0 0 1.2em; padding-bottom: .9em;
	border-bottom: 1px solid rgba(255,255,255,.12);
	display: flex; align-items: center; gap: .7em;
}
.vs-tech__col h3 svg { width: 17px; height: 17px; color: var(--vs-blue-400); flex: none; }
.vs-tech__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .72em; }
.vs-tech__col li {
	margin: 0; font-size: .875rem; line-height: 1.5;
	color: var(--vs-text-invert-soft);
	padding-left: 1.1em; position: relative;
}
.vs-tech__col li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--vs-blue-400); opacity: .7;
}
.vs-tech__col li strong { color: #fff; font-weight: 600; }

/* --- PVIZLE vurgu bolumu --- */
.vs-platform {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(32px, 4vw, 68px); align-items: center;
}
.vs-platform__shot {
	border-radius: var(--vs-radius-xl);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 32px 72px rgba(0,0,0,.42);
	background: var(--vs-ink-700);
}
.vs-platform__shot img { width: 100%; height: auto; display: block; }
.vs-platform__metrics {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1px; background: rgba(255,255,255,.1);
	border-radius: var(--vs-radius-lg); overflow: hidden;
	margin: 1.9em 0;
}
.vs-platform__metric { background: rgba(9,20,36,.72); padding: 17px 18px; }
.vs-platform__metric dt {
	font-family: var(--vs-font-mono); font-size: .63rem; font-weight: 500;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--vs-text-invert-soft); margin-bottom: 6px;
}
.vs-platform__metric dd {
	margin: 0; font-size: 1.36rem; font-weight: 800; color: #fff;
	letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.vs-platform__metric dd small { font-size: .58em; font-weight: 600; color: var(--vs-blue-400); margin-left: .18em; }

/* 7. ISTATISTIK SERIDI
   ------------------------------------------------------------------------ */
.vs-stats {
	background: var(--vs-white);
	border-bottom: 1px solid var(--vs-line);
	position: relative; z-index: 3;
}
.vs-stats__grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--vs-line);
}
.vs-stats__item {
	background: #fff; padding: clamp(28px, 3vw, 42px) clamp(18px, 2vw, 30px);
	text-align: center; transition: background var(--vs-t);
}
.vs-stats__item:hover { background: var(--vs-paper); }
.vs-stats__num {
	display: block;
	font-size: clamp(1.95rem, 1.4rem + 1.9vw, 2.85rem);
	font-weight: 800; letter-spacing: -.035em; line-height: 1;
	background: var(--vs-grad-blue);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	font-variant-numeric: tabular-nums;
	margin-bottom: .38em;
}
.vs-stats__lbl {
	font-size: .82rem; font-weight: 600; color: var(--vs-text-soft);
	letter-spacing: .015em; line-height: 1.42;
}

/* 8. KART SISTEMLERI
   ------------------------------------------------------------------------ */
.vs-grid { display: grid; gap: 26px; }
.vs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Hizmet karti --- */
.vs-service {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	padding: 32px 30px 30px;
	overflow: hidden;
	transition: border-color var(--vs-t), box-shadow var(--vs-t), transform var(--vs-t);
}
.vs-service::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: var(--vs-grad-blue-v);
	transform: scaleY(0); transform-origin: top;
	transition: transform 340ms var(--vs-ease);
}
.vs-service:hover { border-color: transparent; box-shadow: var(--vs-shadow-md); transform: translateY(-4px); }
.vs-service:hover::before { transform: scaleY(1); }

.vs-service__ic {
	width: 52px; height: 52px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--vs-radius-lg);
	background: linear-gradient(140deg, rgba(24,160,255,.13), rgba(8,102,231,.09));
	color: var(--vs-blue-600);
	margin-bottom: 20px;
	transition: background var(--vs-t), color var(--vs-t);
}
.vs-service__ic svg { width: 25px; height: 25px; }
.vs-service:hover .vs-service__ic { background: var(--vs-grad-blue); color: #fff; }

.vs-service h3 { font-size: 1.14rem; margin-bottom: .55em; letter-spacing: -.018em; }
.vs-service h3 a { color: inherit; }
.vs-service:hover h3 a { color: var(--vs-blue-700); }
.vs-service p { font-size: .925rem; color: var(--vs-text-soft); margin-bottom: 1.5em; flex: 1; }
.vs-service .vs-link-arrow { margin-top: auto; }

/* --- Urun karti --- */
.vs-product {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	overflow: hidden;
	transition: border-color var(--vs-t), box-shadow var(--vs-t), transform var(--vs-t);
}
.vs-product:hover { border-color: transparent; box-shadow: var(--vs-shadow-md); transform: translateY(-4px); }

.vs-product__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(165deg, var(--vs-paper) 0%, var(--vs-paper-2) 100%);
	display: flex; align-items: center; justify-content: center;
	padding: 26px; overflow: hidden;
}
.vs-product__media img {
	width: 100%; height: 100%; object-fit: contain;
	transition: transform 480ms var(--vs-ease);
	mix-blend-mode: multiply;
}
.vs-product:hover .vs-product__media img { transform: scale(1.06); }
.vs-product__tag {
	position: absolute; top: 14px; left: 14px; z-index: 2;
}
.vs-product__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.vs-product__cat {
	font-family: var(--vs-font-mono); font-size: .66rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--vs-text-mute);
	margin-bottom: .7em;
}
.vs-product h3 { font-size: 1.02rem; line-height: 1.34; margin-bottom: .5em; letter-spacing: -.014em; }
.vs-product h3 a { color: inherit; }
.vs-product:hover h3 a { color: var(--vs-blue-700); }
.vs-product__excerpt { font-size: .875rem; color: var(--vs-text-soft); margin-bottom: 1.35em; flex: 1; }
.vs-product__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding-top: 16px; margin-top: auto; border-top: 1px solid var(--vs-line-soft);
}
.vs-product__code { font-family: var(--vs-font-mono); font-size: .74rem; color: var(--vs-text-mute); }

/* --- Blog karti --- */
.vs-post {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	overflow: hidden;
	transition: border-color var(--vs-t), box-shadow var(--vs-t), transform var(--vs-t);
}
.vs-post:hover { border-color: transparent; box-shadow: var(--vs-shadow-md); transform: translateY(-4px); }
.vs-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vs-paper-2); position: relative; }
.vs-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 560ms var(--vs-ease); }
.vs-post:hover .vs-post__media img { transform: scale(1.05); }
.vs-post__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.vs-post__meta {
	display: flex; align-items: center; gap: .65em; flex-wrap: wrap;
	font-family: var(--vs-font-mono); font-size: .68rem;
	letter-spacing: .09em; text-transform: uppercase; color: var(--vs-text-mute);
	margin-bottom: .9em;
}
.vs-post__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.vs-post h3 { font-size: 1.1rem; line-height: 1.36; margin-bottom: .55em; letter-spacing: -.018em; }
.vs-post h3 a { color: inherit; }
.vs-post:hover h3 a { color: var(--vs-blue-700); }
.vs-post__excerpt { font-size: .9rem; color: var(--vs-text-soft); margin-bottom: 1.4em; flex: 1; }

/* Yatay öne çıkan yazı */
.vs-post--wide { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.vs-post--wide .vs-post__media { aspect-ratio: auto; height: 100%; min-height: 300px; }
.vs-post--wide .vs-post__body { padding: 36px 38px; justify-content: center; }
.vs-post--wide h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.62rem); }

/* 9. BOLUMLER
   ------------------------------------------------------------------------ */
/* Hakkimizda */
.vs-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 76px); align-items: center; }
.vs-about__media { position: relative; }
.vs-about__media img { border-radius: var(--vs-radius-xl); box-shadow: var(--vs-shadow-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.vs-about__badge {
	position: absolute; right: -18px; bottom: -22px;
	background: var(--vs-grad-blue); color: #fff;
	padding: 22px 26px; border-radius: var(--vs-radius-lg);
	box-shadow: var(--vs-shadow-blue); max-width: 200px;
}
.vs-about__badge strong { display: block; font-size: 1.85rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.03em; }
.vs-about__badge span { display: block; font-size: .76rem; margin-top: .5em; color: rgba(255,255,255,.9); line-height: 1.4; }

.vs-checklist { list-style: none; padding: 0; margin: 0 0 2em; display: grid; gap: .82em; }
.vs-checklist li { display: flex; align-items: flex-start; gap: .78em; margin: 0; font-size: .945rem; color: var(--vs-text-soft); }
.vs-checklist li::before {
	content: ""; flex: none; width: 20px; height: 20px; margin-top: .14em;
	border-radius: 50%;
	background: rgba(8,102,231,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230866E7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.vs-section--ink .vs-checklist li { color: var(--vs-text-invert-soft); }
.vs-section--ink .vs-checklist li::before { background-color: rgba(24,160,255,.16); }

/* CTA seridi */
.vs-cta {
	position: relative; overflow: hidden;
	background: var(--vs-grad-ink);
	color: #fff;
	border-radius: var(--vs-radius-xl);
	padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 60px);
	display: flex; align-items: center; justify-content: space-between;
	gap: 36px; flex-wrap: wrap;
	box-shadow: var(--vs-shadow-lg);
}
.vs-cta::after {
	content: ""; position: absolute; right: -10%; top: -40%;
	width: 520px; height: 520px;
	background: var(--vs-grad-blue); opacity: .16;
	clip-path: polygon(0 0, 46% 0, 100% 62%, 100% 100%, 54% 100%, 0 38%);
	pointer-events: none;
}
.vs-cta__text { position: relative; z-index: 2; max-width: 620px; }
.vs-cta h2 { color: #fff; margin-bottom: .42em; }
.vs-cta p { color: var(--vs-text-invert-soft); margin: 0; }
.vs-cta__actions { position: relative; z-index: 2; display: flex; gap: 13px; flex-wrap: wrap; }

/* Galeri */
.vs-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.vs-gallery__item {
	position: relative; display: block; overflow: hidden;
	aspect-ratio: 4/3; border-radius: var(--vs-radius-lg);
	background: var(--vs-paper-2);
}
.vs-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 560ms var(--vs-ease); }
.vs-gallery__item:hover img { transform: scale(1.07); }
.vs-gallery__cap {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: 34px 18px 16px;
	background: linear-gradient(transparent, rgba(6,15,30,.86));
	color: #fff; font-size: .86rem; font-weight: 600; line-height: 1.4;
}

/* Marka / logo seridi */
.vs-brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 68px); }
.vs-brands img { max-height: 40px; width: auto; opacity: .48; filter: grayscale(1); transition: opacity var(--vs-t), filter var(--vs-t); }
.vs-brands img:hover { opacity: 1; filter: grayscale(0); }

/* 10. IC SAYFALAR
   ------------------------------------------------------------------------ */
.vs-pagehead {
	position: relative; overflow: hidden;
	background: var(--vs-grad-ink);
	color: #fff;
	padding-block: clamp(48px, 6vw, 84px);
}
.vs-pagehead::after {
	content: ""; position: absolute; right: -6%; top: -70%;
	width: 480px; height: 480px;
	background: var(--vs-grad-blue); opacity: .14;
	clip-path: polygon(0 0, 46% 0, 100% 62%, 100% 100%, 54% 100%, 0 38%);
	pointer-events: none;
}
.vs-pagehead__in { position: relative; z-index: 2; }
.vs-pagehead h1 { color: #fff; margin: 0 0 .35em; }
.vs-pagehead p { color: var(--vs-text-invert-soft); max-width: 62ch; margin: 0; font-size: 1.05rem; }

.vs-crumbs {
	display: flex; align-items: center; flex-wrap: wrap; gap: .55em;
	list-style: none; margin: 0 0 1.2em; padding: 0;
	font-family: var(--vs-font-mono); font-size: .7rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--vs-text-invert-soft);
}
.vs-crumbs li { margin: 0; display: flex; align-items: center; gap: .55em; }
.vs-crumbs li:not(:last-child)::after { content: "/"; opacity: .4; }
.vs-crumbs a { color: var(--vs-text-invert-soft); }
.vs-crumbs a:hover { color: var(--vs-blue-400); }
.vs-crumbs [aria-current] { color: #fff; }

/* Icerik + kenar cubugu duzeni */
.vs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.vs-layout--reverse { grid-template-columns: 320px minmax(0, 1fr); }
.vs-layout--reverse .vs-layout__main { order: 2; }
.vs-layout--reverse .vs-layout__side { order: 1; }

.vs-sidebar { position: sticky; top: calc(var(--vs-header-h) + 24px); display: grid; gap: 20px; }
.vs-widget {
	background: #fff; border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg); padding: 24px 24px 26px;
}
.vs-widget--ink { background: var(--vs-grad-ink); border-color: transparent; color: #fff; }
.vs-widget__title {
	font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	color: var(--vs-ink-800); margin: 0 0 1.05em; padding-bottom: .9em;
	border-bottom: 1px solid var(--vs-line);
	font-family: var(--vs-font-mono);
}
.vs-widget--ink .vs-widget__title { color: #fff; border-color: rgba(255,255,255,.14); }
.vs-widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1em; }
.vs-widget li { margin: 0; }
.vs-widget li a {
	display: flex; align-items: center; gap: .6em;
	padding: .62em .7em; margin-inline: -.7em;
	font-size: .885rem; font-weight: 550; color: var(--vs-text-soft);
	border-radius: var(--vs-radius);
	transition: background var(--vs-t), color var(--vs-t), padding-left var(--vs-t);
}
.vs-widget li a:hover, .vs-widget li.is-active a { background: var(--vs-paper); color: var(--vs-blue-700); padding-left: 1em; }
.vs-widget li.is-active a { font-weight: 650; }
.vs-widget--ink li a { color: var(--vs-text-invert-soft); }
.vs-widget--ink li a:hover { background: rgba(255,255,255,.07); color: #fff; }

/* Yazi govdesi */
.vs-prose { font-size: 1.02rem; color: var(--vs-text-soft); }
.vs-prose > *:first-child { margin-top: 0; }
.vs-prose > *:last-child { margin-bottom: 0; }
.vs-prose h2 {
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
	margin-top: 1.85em; margin-bottom: .62em;
	/* Menuden gelen bag baglantilarinda baslik header altinda kalmasin */
	scroll-margin-top: calc(var(--vs-header-h) + 24px);
}
.vs-prose h3 { scroll-margin-top: calc(var(--vs-header-h) + 24px); }
.vs-prose h3 { font-size: clamp(1.13rem, 1rem + .5vw, 1.32rem); margin-top: 1.65em; margin-bottom: .55em; }
.vs-prose h4 { font-size: 1.06rem; margin-top: 1.5em; margin-bottom: .5em; }
.vs-prose h2:first-child, .vs-prose h3:first-child { margin-top: 0; }
.vs-prose p { margin-bottom: 1.3em; }
.vs-prose ul, .vs-prose ol { margin-bottom: 1.5em; padding-left: 1.3em; }
.vs-prose li { margin-bottom: .55em; }
.vs-prose li::marker { color: var(--vs-blue-600); }
.vs-prose img { border-radius: var(--vs-radius-lg); margin-block: 1.8em; }
.vs-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; text-decoration-color: rgba(8,102,231,.35); }
.vs-prose a:hover { text-decoration-color: var(--vs-blue-600); }
/* Sayfa acilisindaki vurgu cumlesi */
.vs-prose .vs-lead {
	font-size: clamp(1.15rem, 1.02rem + .6vw, 1.42rem);
	line-height: 1.45;
	font-weight: 650;
	color: var(--vs-ink-800);
	letter-spacing: -.018em;
	margin-bottom: 1.1em;
	padding-bottom: .9em;
	border-bottom: 2px solid var(--vs-line);
}
.vs-prose figure { margin: 1.8em 0; }
.vs-prose figcaption { font-size: .84rem; color: var(--vs-text-mute); margin-top: .7em; text-align: center; }

/* --- Yasal / politika sayfasi --- */
.vs-legal {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}
/* Kisa metinlerde "Icindekiler" uretilmiyor; iki sutunlu grid kalirsa
   metin 262px'lik ilk sutuna dusup daralarak sola yapisiyordu. */
.vs-legal--tek { grid-template-columns: minmax(0, 1fr); }
.vs-legal__main { max-width: 76ch; }
.vs-legal__side { position: sticky; top: calc(var(--vs-header-h) + 24px); }

.vs-toc {
	border-left: 2px solid var(--vs-line);
	padding-left: 18px;
}
.vs-toc__title {
	font-family: var(--vs-font-mono);
	font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: var(--vs-text-mute); margin: 0 0 1.1em;
}
.vs-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: .1em; }
.vs-toc li { margin: 0; counter-increment: toc; }
.vs-toc a {
	display: block; padding: .5em 0;
	font-size: .875rem; line-height: 1.45; font-weight: 550;
	color: var(--vs-text-soft);
	transition: color var(--vs-t), padding-left var(--vs-t);
}
.vs-toc a::before {
	content: counter(toc) ".";
	font-family: var(--vs-font-mono); font-size: .78em;
	color: var(--vs-blue-600); margin-right: .55em;
}
.vs-toc a:hover { color: var(--vs-blue-700); padding-left: .35em; }

.vs-legal__main h2 {
	scroll-margin-top: calc(var(--vs-header-h) + 24px);
	padding-top: .35em;
}
.vs-legal__main h2:first-child { padding-top: 0; }

.vs-legal__updated {
	margin-top: 3em; padding-top: 1.4em;
	border-top: 1px solid var(--vs-line);
	font-family: var(--vs-font-mono); font-size: .78rem;
	color: var(--vs-text-mute);
}

/* Form altindaki aydinlatma baglantisi */
.vs-form__legal {
	font-size: .82rem; line-height: 1.6; color: var(--vs-text-mute);
	padding: .9em 1.1em;
	background: var(--vs-paper);
	border-left: 2px solid var(--vs-line);
	border-radius: 0 var(--vs-radius) var(--vs-radius) 0;
}
.vs-form__legal a { font-weight: 600; }

/* Politika kart listesi */
.vs-policy-card {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-lg);
	padding: 28px 26px 26px;
	transition: border-color var(--vs-t), box-shadow var(--vs-t), transform var(--vs-t);
}
.vs-policy-card:hover { border-color: transparent; box-shadow: var(--vs-shadow-md); transform: translateY(-3px); }
.vs-policy-card__ic {
	width: 46px; height: 46px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--vs-radius-lg);
	background: linear-gradient(140deg, rgba(24,160,255,.13), rgba(8,102,231,.09));
	color: var(--vs-blue-600); margin-bottom: 18px;
}
.vs-policy-card h3 { font-size: 1.06rem; margin-bottom: .5em; }
.vs-policy-card h3 a { color: inherit; }
.vs-policy-card:hover h3 a { color: var(--vs-blue-700); }
.vs-policy-card p { font-size: .9rem; color: var(--vs-text-soft); margin-bottom: 1.4em; flex: 1; }

/* Urun detay */
.vs-productview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.vs-productview__media {
	background: linear-gradient(165deg, var(--vs-paper) 0%, var(--vs-paper-2) 100%);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-xl);
	padding: clamp(28px, 4vw, 56px);
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1;
}
.vs-productview__media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.vs-spec { list-style: none; padding: 0; margin: 0 0 2em; border-top: 1px solid var(--vs-line); }
.vs-spec li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
	padding: .85em 0; margin: 0;
	border-bottom: 1px solid var(--vs-line);
	font-size: .92rem;
}
.vs-spec dt, .vs-spec__k { color: var(--vs-text-mute); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; font-family: var(--vs-font-mono); flex: none; }
.vs-spec__v { font-weight: 650; color: var(--vs-ink-800); text-align: right; }

/* Sekmeler */
.vs-tabs { border-bottom: 1px solid var(--vs-line); display: flex; gap: 4px; margin-bottom: 32px; overflow-x: auto; }
.vs-tabs button {
	padding: .9em 1.3em; background: none; border: 0; cursor: pointer;
	font-family: inherit; font-size: .875rem; font-weight: 650; letter-spacing: .02em;
	color: var(--vs-text-mute); white-space: nowrap;
	border-bottom: 2px solid transparent; margin-bottom: -1px;
	transition: color var(--vs-t), border-color var(--vs-t);
}
.vs-tabs button:hover { color: var(--vs-ink-800); }
.vs-tabs button[aria-selected="true"] { color: var(--vs-blue-700); border-bottom-color: var(--vs-blue-600); }
.vs-tabpanel[hidden] { display: none; }

/* Sayfalama */
.vs-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 56px; flex-wrap: wrap; }
.vs-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 .8em;
	font-size: .875rem; font-weight: 650;
	color: var(--vs-text-soft); background: #fff;
	border: 1px solid var(--vs-line); border-radius: var(--vs-radius);
	transition: all var(--vs-t);
}
.vs-pagination .page-numbers:hover { border-color: var(--vs-blue-600); color: var(--vs-blue-700); }
.vs-pagination .page-numbers.current { background: var(--vs-grad-blue); border-color: transparent; color: #fff; box-shadow: var(--vs-shadow-blue); }
.vs-pagination .dots { border: 0; background: none; }

/* Yazi navigasyonu */
.vs-postnav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 56px; }
.vs-postnav a {
	display: block; padding: 22px 24px;
	border: 1px solid var(--vs-line); border-radius: var(--vs-radius-lg);
	transition: border-color var(--vs-t), box-shadow var(--vs-t);
}
.vs-postnav a:hover { border-color: var(--vs-blue-600); box-shadow: var(--vs-shadow); }
.vs-postnav span {
	display: block; font-family: var(--vs-font-mono); font-size: .66rem;
	letter-spacing: .13em; text-transform: uppercase; color: var(--vs-text-mute); margin-bottom: .6em;
}
.vs-postnav strong { display: block; font-size: .95rem; font-weight: 650; color: var(--vs-ink-800); line-height: 1.4; }
.vs-postnav .is-next { text-align: right; }

/* 11. FOOTER
   ------------------------------------------------------------------------ */
.vs-footer { background: var(--vs-ink-900); color: var(--vs-text-invert-soft); position: relative; overflow: hidden; }
.vs-footer::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: var(--vs-grad-blue);
}
.vs-footer__main {
	padding-block: clamp(52px, 6vw, 78px);
	display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.35fr; gap: clamp(28px, 4vw, 56px);
}
.vs-footer__brand .vs-logo__name { color: #fff; }
.vs-footer__brand .vs-logo__tag { color: var(--vs-gray-400); }
.vs-footer__about { font-size: .9rem; line-height: 1.72; margin: 20px 0 22px; max-width: 40ch; }

.vs-footer__title {
	font-family: var(--vs-font-mono);
	font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: #fff; margin: 0 0 1.35em;
	display: flex; align-items: center; gap: .7em;
}
.vs-footer__title::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.11); }

.vs-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .72em; }
.vs-footer li { margin: 0; }
.vs-footer a { color: var(--vs-text-invert-soft); font-size: .9rem; }
.vs-footer a:hover { color: var(--vs-blue-400); }

.vs-footer__contact { display: grid; gap: 1.1em; }
.vs-footer__contact li { display: flex; align-items: flex-start; gap: .85em; font-size: .9rem; line-height: 1.6; }
.vs-footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: .22em; color: var(--vs-blue-400); }

.vs-footer__hours { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.vs-footer__hours dl { display: grid; grid-template-columns: auto 1fr; gap: .55em 1.2em; margin: 0; font-size: .855rem; }
.vs-footer__hours dt { color: var(--vs-gray-400); }
.vs-footer__hours dd { margin: 0; text-align: right; font-family: var(--vs-font-mono); font-size: .8rem; color: #fff; }

.vs-footer__social { display: flex; gap: 10px; }
.vs-footer__social a {
	width: 36px; height: 36px; border-radius: var(--vs-radius);
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
	transition: background var(--vs-t), border-color var(--vs-t), transform var(--vs-t);
}
.vs-footer__social a:hover { background: var(--vs-blue-600); border-color: transparent; transform: translateY(-2px); }
.vs-footer__social svg { width: 16px; height: 16px; }

.vs-footer__bar {
	padding-block: 22px;
	border-top: 1px solid rgba(255,255,255,.09);
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	font-size: .8rem; color: var(--vs-gray-400);
}
.vs-footer__bar p { margin: 0; }
.vs-footer__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Alt bardaki yasal baglantilar cevre metinle ayni tonda kalinca
   tiklanabilir gorunmuyordu; belirginlestiriyoruz. */
.vs-footer__bar nav a {
	color: #D6DFEC;
	font-size: .8rem;
	text-decoration: underline;
	/* Cizgi cok soluk olunca baglantilar tiklanabilir gorunmuyordu */
	text-decoration-color: rgba(214, 223, 236, .6);
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
	transition: color var(--vs-t), text-decoration-color var(--vs-t);
}
.vs-footer__bar nav a:hover {
	color: var(--vs-blue-400);
	text-decoration-color: var(--vs-blue-400);
}

/* Cerez bandi */
.vs-cookie {
	position: fixed; inset: auto 0 0 0; z-index: 400;
	padding: 16px;
	display: flex; justify-content: center;
	pointer-events: none;
}
/* display:flex, hidden ozelligini ezer; bant kapandiginda alan kaplamaya
   devam edip altindaki footer baglantilarini tiklanamaz hale getiriyordu. */
.vs-cookie[hidden] { display: none; }
.vs-cookie__box {
	pointer-events: auto;
	width: 100%; max-width: 860px;
	background: #fff;
	border: 1px solid var(--vs-line);
	border-top: 3px solid transparent;
	border-image: var(--vs-grad-blue) 1;
	border-radius: var(--vs-radius-lg);
	box-shadow: var(--vs-shadow-lg);
	padding: 22px 24px;
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	transform: translateY(14px); opacity: 0;
	transition: transform 320ms var(--vs-ease), opacity 320ms var(--vs-ease);
}
.vs-cookie.is-in .vs-cookie__box { transform: none; opacity: 1; }

.vs-cookie__body { flex: 1 1 380px; min-width: 0; }
.vs-cookie__title {
	font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	font-family: var(--vs-font-mono);
	color: var(--vs-ink-800); margin: 0 0 .7em;
}
.vs-cookie__body p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--vs-text-soft); }
.vs-cookie__body a { font-weight: 600; text-decoration: underline; text-underline-offset: .16em; }

.vs-cookie__prefs { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vs-line); }
.vs-cookie__opt { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.vs-cookie__opt input { margin-top: .28em; flex: none; width: 16px; height: 16px; accent-color: var(--vs-blue-600); }
.vs-cookie__opt span { font-size: .84rem; line-height: 1.5; color: var(--vs-text-soft); }
.vs-cookie__opt strong { display: block; color: var(--vs-ink-800); font-size: .875rem; margin-bottom: .15em; }

.vs-cookie__actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }

@media (max-width: 760px) {
	/* Bant sayfanin altinda yer kapladigi icin mobilde olabildigince
	   alcak tutulur; govdeye birakilan bosluk da bant yuksekligi kadardir. */
	.vs-cookie { padding: 8px; }
	.vs-cookie__box { padding: 15px 16px 16px; gap: 14px; border-radius: var(--vs-radius); }
	.vs-cookie__title { font-size: .7rem; letter-spacing: .1em; margin-bottom: .55em; }
	.vs-cookie__body { flex: 1 1 100%; }
	.vs-cookie__body p { font-size: .8rem; line-height: 1.5; }
	.vs-cookie__actions { width: 100%; gap: 8px; }
	.vs-cookie__actions .vs-btn { flex: 1 1 auto; padding: .62em 1em; font-size: .82rem; }
	.vs-cookie__prefs { margin-top: 14px; padding-top: 12px; gap: 10px; }
}

/* Yukari cik */
.vs-totop {
	position: fixed; right: 22px; bottom: 22px; z-index: 250;
	width: 44px; height: 44px; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--vs-grad-blue); color: #fff;
	border-radius: 50%; box-shadow: var(--vs-shadow-blue);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity var(--vs-t), visibility var(--vs-t), transform var(--vs-t);
}
.vs-totop.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.vs-totop svg { width: 17px; height: 17px; }

/* WhatsApp hizli erisim */
.vs-wa {
	position: fixed; right: 22px; bottom: 76px; z-index: 250;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #25D366; color: #fff; border-radius: 50%;
	box-shadow: 0 8px 22px rgba(37,211,102,.36);
	transition: transform var(--vs-t);
}
.vs-wa:hover { color: #fff; transform: scale(1.08); }
.vs-wa svg { width: 22px; height: 22px; }

/* 12. FORM & YARDIMCI BILESENLER
   ------------------------------------------------------------------------ */
.vs-form { display: grid; gap: 18px; }
.vs-form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vs-field { display: grid; gap: .5em; }
.vs-field label { font-size: .8rem; font-weight: 650; color: var(--vs-ink-800); letter-spacing: .015em; }
.vs-field label .req { color: var(--vs-danger); }

.vs-field input[type="text"],
.vs-field input[type="email"],
.vs-field input[type="tel"],
.vs-field input[type="url"],
.vs-field input[type="search"],
.vs-field input[type="number"],
.vs-field select,
.vs-field textarea {
	width: 100%;
	padding: .82em 1em;
	font-family: inherit; font-size: .92rem; color: var(--vs-text);
	background: #fff;
	border: 1.5px solid var(--vs-line);
	border-radius: var(--vs-radius);
	transition: border-color var(--vs-t), box-shadow var(--vs-t);
	-webkit-appearance: none; appearance: none;
}
.vs-field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.vs-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8CA5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1em center; background-size: 15px;
	padding-right: 2.6em;
}
.vs-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--vs-blue-600);
	box-shadow: 0 0 0 3px rgba(8,102,231,.13);
}
.vs-field ::placeholder { color: var(--vs-text-mute); opacity: 1; }
.vs-field__hint { font-size: .78rem; color: var(--vs-text-mute); }

.vs-notice {
	padding: 1em 1.3em; border-radius: var(--vs-radius);
	border-left: 3px solid var(--vs-blue-600); background: rgba(8,102,231,.06);
	font-size: .9rem; color: var(--vs-text-soft);
}
.vs-notice--ok { border-color: var(--vs-success); background: rgba(18,161,80,.07); }
.vs-notice--err { border-color: var(--vs-danger); background: rgba(220,43,58,.06); }

/* Arama kutusu */
.vs-search { display: flex; gap: 0; }
.vs-search input {
	flex: 1; padding: .8em 1em; font-family: inherit; font-size: .9rem;
	border: 1.5px solid var(--vs-line); border-right: 0;
	border-radius: var(--vs-radius) 0 0 var(--vs-radius);
}
.vs-search input:focus { outline: none; border-color: var(--vs-blue-600); }
.vs-search button {
	padding: 0 1.15em; border: 0; cursor: pointer;
	background: var(--vs-grad-blue); color: #fff;
	border-radius: 0 var(--vs-radius) var(--vs-radius) 0;
}
.vs-search svg { width: 17px; height: 17px; }

/* Bos durum */
.vs-empty { text-align: center; padding: clamp(48px, 6vw, 84px) 20px; }
.vs-empty svg { width: 52px; height: 52px; color: var(--vs-gray-300); margin: 0 auto 20px; }
.vs-empty h3 { margin-bottom: .5em; }
.vs-empty p { color: var(--vs-text-soft); max-width: 46ch; margin-inline: auto; }

/* Giris animasyonu */
@media (prefers-reduced-motion: no-preference) {
	.vs-reveal { opacity: 0; transform: translateY(20px); transition: opacity 620ms var(--vs-ease), transform 620ms var(--vs-ease); }
	.vs-reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}

/* 13. DUYARLI
   ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
	.vs-footer__main { grid-template-columns: 1.6fr 1fr 1.3fr; }
	.vs-footer__col--links2 { display: none; }
}

@media (max-width: 1180px) {
	.vs-solutions { grid-template-columns: 1fr; align-items: start; }
	.vs-solutions__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vs-solution { aspect-ratio: 4 / 3.2; }
	.vs-why { grid-template-columns: 1fr; }
	.vs-why__media { order: -1; }
}

@media (max-width: 1080px) {
	.vs-hero__in { grid-template-columns: 1fr; }
	.vs-hero__panel { max-width: 560px; }
	.vs-pillars { grid-template-columns: repeat(2, 1fr); }
	.vs-pillar:nth-child(2n) { border-right: 0; }
	.vs-pillar:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
	.vs-pillar:nth-child(odd) { padding-left: 0; }
	.vs-platform { grid-template-columns: 1fr; }
	.vs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-layout, .vs-layout--reverse { grid-template-columns: 1fr; }
	.vs-layout--reverse .vs-layout__main { order: 1; }
	.vs-layout--reverse .vs-layout__side { order: 2; }
	.vs-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
	.vs-legal { grid-template-columns: 1fr; }
	.vs-legal__side { position: static; }
	.vs-legal__main { max-width: none; }
	.vs-toc ol { columns: 2; column-gap: 28px; }
}

/* Mobil navigasyon devreye girer.
   Esik 1400px: altinda 8 ust menu ogesi + logo + CTA ortalanmis duzende
   sigmiyor; menu logoya yapisip merkezden kayiyordu. */
@media (max-width: 1100px) {
	:root { --vs-header-h: 84px; }

	.vs-burger { display: inline-flex; }
	.vs-header__actions .vs-btn { display: none; }

	/* backdrop-filter, position:fixed olan menu panelinin sabitlenecegi
	   alani viewport yerine header ile sinirliyor. Panel header
	   yuksekliginde (62px) sikisip icinde kayiyor, ayrica header'in
	   disina tasip sayfaya yatay kaydirma ekliyordu. Mobilde blur yerine
	   duz beyaz zemin kullaniyoruz. */
	.vs-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #fff;
	}
	.vs-header.is-stuck { background: #fff; }

	/* Mobilde menu sabit panele donusur; ortalama devre disi */
	.vs-header__in { justify-content: space-between; }
	.vs-header__in > .vs-nav { margin-inline: 0; }

	.vs-nav {
		position: fixed; inset: var(--vs-header-h) 0 0 auto;
		width: min(400px, 88vw);
		background: #fff;
		border-left: 1px solid var(--vs-line);
		box-shadow: -20px 0 48px rgba(10,22,40,.14);
		padding: 22px 20px 40px;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 340ms var(--vs-ease), visibility 340ms var(--vs-ease);
		margin: 0;
	}
	.vs-nav.is-open { transform: translateX(0); visibility: visible; }

	.vs-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.vs-nav__list > li > a { padding: .95em .9em; font-size: .96rem; border-radius: var(--vs-radius); }
	.vs-nav__list > li > a::after { display: none; }
	.vs-nav__list > li > a:hover { background: var(--vs-paper); }

	.vs-nav__list > li.menu-item-has-children > a::before { margin-left: auto; }

	/* Mobilde alt menu oku asagi bakar (akordiyon) */
	.vs-nav .sub-menu .menu-item-has-children > a::after { transform: rotate(135deg); }
	.vs-nav .sub-menu li.is-expanded > a::after { transform: rotate(-45deg); }
	.vs-nav .sub-menu .menu-item-has-children:hover > a::after { transform: rotate(135deg); }
	.vs-nav .sub-menu li.is-expanded:hover > a::after { transform: rotate(-45deg); }

	.vs-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--vs-line);
		border-radius: 0; margin: 2px 0 6px .9em; padding: 0 0 0 .5em;
		min-width: 0;
		display: none;
	}
	.vs-nav li.is-expanded > .sub-menu { display: block; }

	.vs-nav__mobile-cta { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--vs-line); display: grid; gap: 10px; }

	.vs-navscrim {
		position: fixed; inset: var(--vs-header-h) 0 0 0; z-index: 290;
		background: rgba(6,15,30,.42); backdrop-filter: blur(2px);
		opacity: 0; visibility: hidden; transition: opacity var(--vs-t), visibility var(--vs-t);
	}
	.vs-navscrim.is-on { opacity: 1; visibility: visible; }

	body.vs-nav-open { overflow: hidden; }
}

@media (max-width: 900px) {
	.vs-about { grid-template-columns: 1fr; }
	.vs-about__media { order: -1; }
	.vs-about__badge { right: 12px; bottom: -18px; }
	.vs-productview { grid-template-columns: 1fr; }
	.vs-post--wide { grid-template-columns: 1fr; }
	.vs-post--wide .vs-post__media { min-height: 220px; aspect-ratio: 16/9; }
	.vs-post--wide .vs-post__body { padding: 28px 26px 30px; }
	.vs-footer__main { grid-template-columns: 1fr 1fr; }
	.vs-footer__col--links2 { display: block; }
}

@media (max-width: 760px) {
	:root { --vs-gutter: 18px; }
	.vs-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.vs-grid--3, .vs-grid--4, .vs-grid--2 { grid-template-columns: 1fr; }
	.vs-form__row { grid-template-columns: 1fr; }
	.vs-postnav { grid-template-columns: 1fr; }
	.vs-postnav .is-next { text-align: left; }
	.vs-sidebar { grid-template-columns: 1fr; }
	.vs-cta { flex-direction: column; align-items: flex-start; }
	.vs-section-head--split { align-items: flex-start; }
	.vs-hero__metrics { grid-template-columns: 1fr; }
	.vs-solutions__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vs-tech { grid-template-columns: 1fr; }
	.vs-pillars { grid-template-columns: 1fr; }
	.vs-pillar { border-right: 0; padding-left: 0 !important; }
	.vs-pillar:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.12); }
	.vs-platform__metrics { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.vs-logo__mark { width: 44px; }
	.vs-logo__name { font-size: .82rem; }
	.vs-logo__tag { font-size: .5rem; letter-spacing: .15em; }
	.vs-solutions__cards { grid-template-columns: 1fr; }
	.vs-solution { aspect-ratio: 16 / 10; }
	.vs-hero__cta .vs-btn { width: 100%; }
	.vs-footer__main { grid-template-columns: 1fr; }
	.vs-footer__bar { flex-direction: column; align-items: flex-start; }
	.vs-stats__grid { grid-template-columns: 1fr; }
}

/* Yazdirma */
@media print {
	.vs-header, .vs-footer, .vs-totop, .vs-wa, .vs-cta, .vs-sidebar { display: none !important; }
	body { color: #000; background: #fff; }
	.vs-layout { grid-template-columns: 1fr; }
	a { color: #000; text-decoration: underline; }
}